/* ===================================================================
   map2d.css — the 2D battle-map board (shares HUD chrome variables)
   =================================================================== */
#map2d{position:fixed;inset:0;z-index:5;display:none;overflow:hidden;
  background:radial-gradient(120% 120% at 50% 30%,#16223a,#0a1120 70%,#070b14);cursor:grab;touch-action:none}
#map2d.show{display:block}
#map2d.grabbing{cursor:grabbing}
body.board-2d #map2d{display:block}

.m2-stage{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.m2-board{position:absolute;left:0;top:0;display:block;border-radius:6px;
  box-shadow:0 24px 80px #000a, 0 0 0 1px #e3b75522, 0 0 0 10px #0c1426;background:#0c1426}
.m2-grid{position:absolute;left:0;top:0;pointer-events:none}
.m2-fog{position:absolute;left:0;top:0;pointer-events:none}
.m2-rings{position:absolute;left:0;top:0;pointer-events:none}
.m2-tokens{position:absolute;left:0;top:0}

/* a token on the board */
.m2-tok{position:absolute;transform:translate(-50%,-50%);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 4px 6px #0009)}
.m2-tok.dragging{z-index:50;cursor:grabbing}
.m2-tok.hidden2d{display:none}
.m2-name{order:-1;margin-bottom:3px;font-family:'Cinzel',serif;font-size:13px;color:#f3e7c8;
  background:#0c1426d9;border:1px solid var(--ring,#888);border-radius:7px;padding:1px 8px;white-space:nowrap;
  box-shadow:0 2px 6px #0007}
.m2-disc{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:24px;
  background:radial-gradient(circle at 38% 32%,#1b2740,#0c1426);
  border:3px solid var(--ring,#888);box-shadow:inset 0 0 8px #000a, 0 0 0 2px #0c142680;overflow:hidden;position:relative}
.m2-disc img{width:100%;height:100%;object-fit:cover}
.m2-tok.sel .m2-disc{box-shadow:0 0 0 3px var(--ember),0 0 16px var(--ember),inset 0 0 8px #000a}
.m2-tok.foe .m2-name{color:#ffd9cf}
.m2-tok.ghost{opacity:.45;filter:grayscale(.5) drop-shadow(0 4px 6px #0009)}
.m2-hp{width:46px;height:6px;border-radius:4px;background:#0c1426;border:1px solid #0008;margin-top:3px;overflow:hidden}
.m2-hp i{display:block;height:100%;background:var(--ally,#3f7d4a);transition:width .3s,background .3s}
.m2-turn{position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-size:11px;color:var(--ember)}

/* reachable move ring (player) */
.m2-reach{position:absolute;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);
  border:2px dashed #e3b75588;background:radial-gradient(circle,#e3b7551a,#e3b75508 60%,transparent 72%)}

/* dice result pop */
.m2-dice{position:fixed;left:50%;top:46%;transform:translate(-50%,-50%) scale(.6);z-index:30;
  font-family:'Cinzel',serif;font-weight:700;color:#1a140c;pointer-events:none;opacity:0;transition:.18s}
.m2-dice.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.m2-dice .die{width:104px;height:104px;display:grid;place-items:center;border-radius:18px;
  background:radial-gradient(circle at 36% 30%,#ffe7a6,#c1933f);border:3px solid #7d5a1e;
  box-shadow:0 18px 50px #000a, inset 0 2px 6px #fff6;font-size:48px}
.m2-dice .die small{position:absolute;bottom:8px;font-size:13px;color:#5a3a14;font-weight:600}

/* map-mode controls in the top bar */
.board-seg{display:flex;background:#0c1426aa;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.board-seg button{appearance:none;border:0;background:transparent;color:#c9bfa6;font-family:'Cinzel',serif;
  font-size:11px;letter-spacing:.06em;padding:8px 12px;cursor:pointer;transition:.15s}
.board-seg button.on{background:linear-gradient(180deg,#6a8fb8,#3a5d86);color:#0c1426;font-weight:700}
.board-seg button:hover:not(.on){color:#f3e7c8;background:#ffffff10}
.maptabs{display:flex;gap:6px;align-items:center}
.maptab{appearance:none;border:1px solid var(--line);background:#0c1426aa;color:#c9bfa6;
  font-family:'Cinzel',serif;font-size:11px;letter-spacing:.04em;padding:7px 12px;border-radius:9px;cursor:pointer;transition:.15s}
.maptab.on{background:linear-gradient(180deg,var(--ember),var(--ember-dk));color:#2a1d08;font-weight:700;border-color:var(--ember)}
.maptab:hover:not(.on){color:#f3e7c8;border-color:var(--ember)}

/* hide 3D-only chrome in 2D, and the dice-tray focus when it doesn't apply */
body.board-2d #vrBtn, body.board-2d #arBtn, body.board-2d #diceFocusBtn{display:none}
body.map-bloom #diceFocusBtn{display:none}

.m2-help{position:absolute;left:14px;bottom:14px;font-size:11.5px;color:#9fb4cf;opacity:.7;
  font-family:'EB Garamond',serif;pointer-events:none}