/* Hearth v1.7.0 — map interactions on the C2 DM screen (design: Jenny, map-interactions/mi.css).
   GM mode v2 (.gm2) uses the same templates, handles, labels and AoE fan, so every rule is scoped to both.
   Handles, chips, toolbars, the path and the brush ring use the palette (--gold, --gold-deep,
   --card-surface, --page*, --ink*); ember orange on templates and red on enemy rings are fixed. */
:is(.c2, .gm2) { --mi-ember: #e9bd62; --mi-ember-hot: #ffb347; --mi-ember-ink: var(--mi-ember-hot);
  /* v1.7.1 — the dark plates (help line, phone off-screen markers, the corner fans) stay dark on every theme, so
     their text can't use the theme's --ink / --ink-soft, which go dark on light themes. Dark themes keep the theme
     inks; light themes mix their ink nearly to white (and lighten the gold for the chosen fan button) */
  --mi-plate-ink: var(--ink); --mi-plate-soft: var(--ink-soft); --mi-plate-gold: var(--gold); }
html[data-theme="light"] :is(.c2, .gm2) { --mi-plate-ink: color-mix(in srgb, var(--ink) 8%, #fff); --mi-plate-soft: color-mix(in srgb, var(--ink) 18%, #fff); --mi-plate-gold: color-mix(in srgb, var(--gold) 45%, #fff); }
/* v1.7.1 — template counts in ember on the palette-coloured label chip: on light themes the chip is
   pale, so the ember goes deep (5:1 or better on every light palette; the bright ember is 10:1 on dark ones) */
html[data-theme="light"] :is(.c2, .gm2) { --mi-ember-ink: color-mix(in srgb, var(--mi-ember) 30%, #000); }
/* ---------- layers on the board ---------- */
:is(.c2, .gm2) .mi-fog { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; }
:is(.c2, .gm2) .mi-path { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; overflow: visible; }
:is(.c2, .gm2) .mi-ov { position: absolute; inset: 0; z-index: 7; pointer-events: none; } /* above the atmosphere light layer (6), so handles and labels never dim at night */
:is(.c2, .gm2) .mi-ov > div { position: absolute; inset: 0; }
:is(.c2, .gm2) #dmMapGrid { --mi-inv: 1; }
/* templates */
:is(.c2, .gm2) .mi-tpl > .s { fill: color-mix(in srgb, var(--aoe-color) 30%, transparent); stroke: var(--aoe-color); stroke-width: 2.4; stroke-linejoin: round; }
:is(.c2, .gm2) .mi-tpl.k-cone > .s, :is(.c2, .gm2) .mi-tpl.k-line > .s { stroke-dasharray: 9 4.5; }
:is(.c2, .gm2) .mi-tpl.sel > .s { fill: color-mix(in srgb, var(--aoe-color) 36%, transparent); stroke-width: 3; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--aoe-color) 60%, transparent)); }
:is(.c2, .gm2) .mi-tpl.ghost > .s { fill: color-mix(in srgb, var(--aoe-color) 18%, transparent); stroke-dasharray: 5 4; opacity: .85; }
:is(.c2, .gm2) .mi-tpl .mi-axis { stroke: var(--gold); stroke-width: 1.6; stroke-dasharray: 5 4; opacity: .85; }
:is(.c2, .gm2) .mi-tpl { animation: mi-tpl-in .14s ease-out both; transform-box: fill-box; transform-origin: center; }
:is(.c2, .gm2) .mi-tpl.pulse { animation: mi-pulse .2s ease-in-out; }
@keyframes mi-tpl-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes mi-pulse { 50% { opacity: .8; } }
:is(.c2, .gm2) #miAoeG .mi-tpl { animation: none; }
:is(.c2, .gm2) #miAoeG .mi-tpl.ghost { animation: mi-tpl-in .14s ease-out both; }
:is(.c2, .gm2) #miAoeG .mi-tpl.pulse { animation: mi-pulse .2s ease-in-out; }
/* handles: 26 px desktop, 44 px phone, counter-scaled so the zoom doesn't change their size */
:is(.c2, .gm2) .mi-hdl { position: absolute; width: 26px; height: 26px; margin: 0; padding: 0; min-height: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transform: translate(-50%, -50%) scale(var(--mi-inv)); pointer-events: auto; touch-action: none; cursor: grab;
  font: 700 13px/1 system-ui, sans-serif; color: var(--c2-on-gold); background: var(--c2-brass); border: 2px solid var(--page); box-shadow: 0 2px 6px rgba(0,0,0,.85);
  animation: mi-pop .12s .06s ease-out both; }
:is(.c2, .gm2) .mi-hdl.k-size { font-size: 11px; }
:is(.c2, .gm2) .mi-hdl.k-aim { font-size: 15px; }
:is(.c2, .gm2) .mi-hdl.on { box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 40%, transparent), 0 2px 6px rgba(0,0,0,.85); }
:is(.c2, .gm2) .mi-hdl.active { cursor: grabbing; box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 45%, transparent), 0 0 16px var(--gold), 0 2px 6px #000; }
:is(.c2, .gm2) .mi-phone .mi-hdl { width: 44px; height: 44px; font-size: 19px; }
:is(.c2, .gm2) .mi-phone .mi-hdl.k-size { font-size: 15px; }
/* on phone every template handle is a 44 px touch target, selected or not */
:is(.c2, .gm2) .mi-phone .mi-hdl.sm { width: 44px; height: 44px; font-size: 16px; }
:is(.c2, .gm2) .mi-phone .mi-hdl.sm.k-size { font-size: 14px; }
@keyframes mi-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(calc(var(--mi-inv) * .6)); } }
/* live label chips */
:is(.c2, .gm2) .mi-chip { position: absolute; transform: translate(-50%, -50%) scale(var(--mi-inv)); white-space: nowrap; pointer-events: auto; cursor: pointer;
  font: 600 12px/1.25 var(--rs-sans, system-ui, sans-serif); padding: 4px 9px; border-radius: 9px; color: var(--ink);
  background: color-mix(in srgb, var(--page-deep, #000) 80%, #000); border: 1px solid var(--c2-rim); box-shadow: 0 3px 10px rgba(0,0,0,.6); }
:is(.c2, .gm2) .mi-chip.big { font-size: 14px; padding: 6px 11px; border-color: var(--gold-deep); }
:is(.c2, .gm2) .mi-chip.ghost { opacity: .8; pointer-events: none; }
:is(.c2, .gm2) .mi-chip b { color: var(--gold); }
/* v1.7.1 — the template's name in gold on the pale light-theme chip: deepened like the count (--mi-ember-ink) */
html[data-theme="light"] :is(.c2, .gm2) .mi-chip b { color: color-mix(in srgb, var(--gold) 45%, #000); }
:is(.c2, .gm2) .mi-chip .mi-hitc { color: var(--mi-ember-ink); }
:is(.c2, .gm2) .mi-chip .mi-shown { font-size: 11px; }
/* creatures inside a template */
:is(.c2, .gm2) .map-token.mi-hit { box-shadow: 0 0 0 3px var(--mi-ember), 0 0 14px var(--mi-ember) !important; transition: box-shadow .12s; }
:is(.c2, .gm2) .map-token.mi-hit .ht-token, :is(.c2, .gm2) .map-token.mi-hit .ht-wrap { filter: drop-shadow(0 0 5px var(--mi-ember)); }
/* phone: creatures caught off screen */
:is(.c2, .gm2) .mi-offbox { position: absolute; inset: 0; pointer-events: none; z-index: 12; }
:is(.c2, .gm2) .mi-offhit { position: absolute; transform: translateY(-50%); font: 600 11.5px/1 system-ui, sans-serif; color: var(--mi-plate-ink); padding: 6px 9px; background: rgba(12,12,14,.9); border: 1px solid var(--mi-ember); box-shadow: 0 0 10px color-mix(in srgb, var(--mi-ember) 40%, transparent); white-space: nowrap; }
:is(.c2, .gm2) .mi-offhit.l { left: 0; border-left: 0; border-radius: 0 999px 999px 0; }
:is(.c2, .gm2) .mi-offhit.r { right: 0; border-right: 0; border-radius: 999px 0 0 999px; }
:is(.c2, .gm2) .mi-offhit b { color: var(--mi-ember-hot); }

/* ---------- the AoE fan (quarter circle centred on the screen's bottom-right corner) ---------- */
:is(.c2, .gm2) .mi-afan { position: absolute; right: 0; bottom: 0; width: 0; height: 0; z-index: 32; }
:is(.c2, .gm2) .mi-afwrap { position: absolute; right: 0; bottom: 0; pointer-events: none; filter: drop-shadow(0 10px 22px rgba(0,0,0,.75)); transform-origin: 100% 100%; }
:is(.c2, .gm2) .mi-afan.in .mi-afwrap { animation: mi-grow .26s ease-out both; }
@keyframes mi-grow { from { transform: scale(.2); opacity: 0; } }
:is(.c2, .gm2) .mi-afsvg { display: block; overflow: visible; }
:is(.c2, .gm2) .mi-afbg { fill: color-mix(in srgb, var(--c2-surface) 94%, transparent); }
:is(.c2, .gm2) .mi-afrim { fill: none; stroke: var(--gold-deep); stroke-width: 2; }
:is(.c2, .gm2) .mi-aftrack { fill: none; stroke: color-mix(in srgb, var(--gold-deep) 70%, transparent); stroke-width: 2; stroke-dasharray: 1 5; stroke-linecap: round; }
:is(.c2, .gm2) .mi-afdivide { fill: none; stroke: color-mix(in srgb, var(--gold-deep) 55%, transparent); stroke-width: 1.5; }
:is(.c2, .gm2) .mi-afdial { fill: none; stroke: color-mix(in srgb, var(--page) 70%, transparent); stroke-width: 22; stroke-linecap: round; }
:is(.c2, .gm2) .mi-afan button, :is(.c2, .gm2) .mi-aival { position: absolute; padding: 0; margin: 0; min-height: 0; box-sizing: border-box; }
:is(.c2, .gm2) .mi-af, :is(.c2, .gm2) .mi-ai, :is(.c2, .gm2) .mi-achip { border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  background: var(--c2-surface); color: var(--ink); border: 1px solid var(--c2-rim); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gold) 16%, transparent), 0 2px 5px rgba(0,0,0,.5); }
:is(.c2, .gm2) .mi-af span { font-size: 19px; }
:is(.c2, .gm2) .mi-af small { position: absolute; top: 100%; margin-top: 3px; font-size: 10px; color: var(--mi-plate-soft); text-shadow: 0 1px 2px #000; white-space: nowrap; }
:is(.c2, .gm2) .mi-af.on { background: var(--c2-brass); color: var(--c2-on-gold); box-shadow: 0 0 0 2px var(--page), 0 0 16px color-mix(in srgb, var(--gold) 60%, transparent); }
:is(.c2, .gm2) .mi-af.on small { color: var(--mi-plate-gold); font-weight: 700; }
:is(.c2, .gm2) .mi-ai { font-size: 22px; font-weight: 700; color: var(--gold); }
:is(.c2, .gm2) .mi-achip { font-size: 13px; background: var(--page-deep, var(--page)); border-color: var(--gold-deep); }
:is(.c2, .gm2) .mi-achip.del { color: #f08a6e; }
:is(.c2, .gm2) .mi-afan button:disabled { opacity: .45; cursor: default; }
:is(.c2, .gm2) .mi-aival { display: flex; align-items: center; justify-content: center; border-radius: 999px; font: 700 15px var(--rs-sans, sans-serif); color: var(--gold); cursor: ew-resize; touch-action: none; user-select: none;
  background: var(--page-deep, var(--page)); border: 1.5px solid var(--gold-deep); box-shadow: inset 0 1px 4px rgba(0,0,0,.6); }
:is(.c2, .gm2) .mi-hub { border-radius: 50%; font-size: 26px; text-align: left; z-index: 2; background: var(--c2-brass); color: var(--c2-on-gold); border: 1px solid var(--gold-deep);
  box-shadow: 0 0 0 3px var(--page), 0 0 18px color-mix(in srgb, var(--gold) 55%, transparent); }
:is(.c2, .gm2) .mi-hub span { position: absolute; left: 21%; top: 17%; font-weight: 700; }
:is(.c2, .gm2) .mi-afan.in .mi-af, :is(.c2, .gm2) .mi-afan.in .mi-ai, :is(.c2, .gm2) .mi-afan.in .mi-aival, :is(.c2, .gm2) .mi-afan.in .mi-achip { animation: mi-fanout .16s cubic-bezier(.3,1.4,.5,1) both; animation-delay: calc(60ms + var(--i) * 25ms); }
:is(.c2, .gm2) .mi-afan.in .mi-hub span { animation: mi-hubspin .26s ease-out both; }
@keyframes mi-fanout { from { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(.4); } }
@keyframes mi-hubspin { from { transform: rotate(-45deg); opacity: 0; } }
:is(.c2, .gm2) .mi-aftogs { position: absolute; display: flex; gap: 6px; white-space: nowrap; z-index: 3; }
:is(.c2, .gm2) .mi-aftogs.left { position: fixed; left: 12px; bottom: 14px; flex-direction: column; align-items: flex-start; }
:is(.c2, .gm2) .mi-pill { position: static !important; display: inline-flex; align-items: center; gap: 5px; font: 600 12px/1 system-ui, sans-serif; padding: 8px 11px !important; border-radius: 999px;
  background: var(--page-deep, var(--page)); color: var(--ink-soft); border: 1px solid var(--gold-deep); box-shadow: 0 3px 10px rgba(0,0,0,.55); }
:is(.c2, .gm2) .mi-pill.on { background: var(--c2-brass); color: var(--c2-on-gold); border-color: var(--gold); }
.c2-phone .mi-pill { font-size: 13px; padding: 9px 12px !important; }
/* hints along the bottom of the map */
:is(.c2, .gm2) .mi-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 20; font-size: 12px; color: var(--mi-plate-soft); background: rgba(0,0,0,.66); padding: 5px 12px; border-radius: 12px; white-space: nowrap; pointer-events: none; }
/* desktop: the template help line sits at the map's bottom-left, well away from the pills and the fan */
.c2-desk .mi-hint-aoe { left: 14px; transform: none; bottom: 14px; }
.c2-phone .mi-hint-aoe { display: none; }
.c2-phone .mi-hint-move { bottom: 70px; }
/* the tool fan and help stay hidden while one of these tools owns the map */
:is(.c2, .gm2).mi-aoe-on .c2-fab, :is(.c2, .gm2).mi-aoe-on .c2-fan, :is(.c2, .gm2).mi-aoe-on .c2-help, :is(.c2, .gm2).mi-aoe-on .c2-bars,
:is(.c2, .gm2).mi-fog-on .c2-fab, :is(.c2, .gm2).mi-fog-on .c2-fan, :is(.c2, .gm2).mi-fog-on .c2-help, :is(.c2, .gm2).mi-fog-on .c2-bars { display: none; }

/* ---------- token movement ---------- */
:is(.c2, .gm2) .map-token.mi-lift { z-index: 9 !important; transform: translateY(-6px) scale(1.12); transition: transform .12s ease-out; cursor: grabbing; opacity: 1; filter: drop-shadow(0 14px 12px rgba(0,0,0,.8)); }
:is(.c2, .gm2) .map-token.mi-lift .map-token-caption, :is(.c2, .gm2) .map-token.mi-lift .map-token-num { opacity: 0; }
:is(.c2, .gm2) .map-token.mi-ghost { opacity: .35; filter: grayscale(.6); pointer-events: none; z-index: 1 !important; }
:is(.c2, .gm2) .mi-reach { fill: color-mix(in srgb, var(--gold) 7%, transparent); }
:is(.c2, .gm2) .mi-moving .mi-ov { z-index: 12; } /* the feet chip stays above the lifted token */
:is(.c2, .gm2) .mi-diffzone { fill: url(#miHatch); opacity: .55; }
:is(.c2, .gm2) .mi-pcell { fill: color-mix(in srgb, var(--gold) 26%, transparent); stroke: var(--gold); stroke-width: 1.2; animation: mi-fade .08s ease-out both; }
:is(.c2, .gm2) .mi-pcell.diff { fill: url(#miHatch); stroke: var(--mi-ember-hot); }
:is(.c2, .gm2) .mi-snapcell { fill: none; stroke: var(--gold); stroke-width: 2; }
:is(.c2, .gm2) .mi-pline { fill: none; stroke: var(--gold); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.9)); }
:is(.c2, .gm2) .mi-wp { fill: var(--page); stroke: var(--gold); stroke-width: 2.6; }
@keyframes mi-fade { from { opacity: 0; } }
:is(.c2, .gm2) .mi-mchip, :is(.c2, .gm2) .mi-fchip, :is(.c2, .gm2) .mi-x2 { position: absolute; transform: translate(-50%, -50%) scale(var(--mi-inv)); white-space: nowrap; pointer-events: none;
  font: 600 14px/1.2 var(--rs-sans, system-ui, sans-serif); padding: 6px 11px; border-radius: 9px; color: var(--ink); background: rgba(8,8,8,.88); border: 1px solid var(--c2-rim); box-shadow: 0 3px 10px rgba(0,0,0,.6); z-index: 6; }
:is(.c2, .gm2) .mi-mchip b { color: var(--gold); }
:is(.c2, .gm2) .mi-mchip small { color: var(--ink-faded); font-weight: 400; }
:is(.c2, .gm2) .mi-mchip .mi-dt { color: var(--mi-ember-hot); }
:is(.c2, .gm2) .mi-mchip.over { border-color: #c0392b; box-shadow: 0 0 0 1px #c0392b, 0 3px 10px rgba(0,0,0,.6); }
:is(.c2, .gm2) .mi-mchip.over b, :is(.c2, .gm2) .mi-mchip .mi-ov2 { color: #f08a6e; }
:is(.c2, .gm2) .mi-x2 { font-size: 10px; padding: 1px 6px; background: color-mix(in srgb, var(--gold-deep) 70%, #000); color: var(--ink); }
:is(.c2, .gm2) .mi-cancel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; padding: 22px; text-align: center; font-weight: 700; color: #f08a6e; pointer-events: none;
  background: linear-gradient(0deg, rgba(120,20,10,.62), rgba(120,20,10,.2)); border-top: 2px dashed rgba(240,138,110,.6); animation: mi-up .16s ease-out both; }
:is(.c2, .gm2) .mi-cancel.hot { background: linear-gradient(0deg, rgba(160,28,14,.85), rgba(160,28,14,.4)); color: #fff; }
@keyframes mi-up { from { transform: translateY(8px); opacity: 0; } }
.mi-toast { position: fixed; left: 50%; top: 118px; z-index: 120; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-radius: 12px; transform: translate(-50%, 8px); opacity: 0;
  font: 500 13px var(--rs-sans, system-ui, sans-serif); color: var(--ink); background: var(--page-texture, none), var(--rs-card, var(--card-surface)); border: 1px solid var(--gold-deep); box-shadow: 0 8px 24px #000;
  transition: opacity .2s, transform .2s; }
.mi-toast.show { opacity: 1; transform: translate(-50%, 0); transition-duration: .16s; }
.mi-toast:not(.desk) { top: auto; bottom: 22px; }
.mi-toast button { font: 600 12.5px var(--rs-sans, system-ui, sans-serif); padding: 6px 10px; min-height: 0; border-radius: 8px; cursor: pointer; width: auto;
  background: var(--page-deep, var(--page)); color: var(--ink); border: 1px solid var(--gold-deep); box-shadow: none; text-transform: none; letter-spacing: 0; }
.mi-toast small { color: var(--ink-faded); font-size: 11px; }
/* The move toast never blocks the map: only its buttons take pointer events. */
.mi-toast { pointer-events: none; }
.mi-toast button { pointer-events: auto; }

/* ---------- fog tools ---------- */
:is(.c2, .gm2) .mi-fbar { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 22; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 14px; white-space: nowrap;
  background: var(--page-texture, none), var(--c2-surface); border: 1px solid var(--gold-deep); box-shadow: 0 8px 24px rgba(0,0,0,.7); }
:is(.c2, .gm2) .mi-fbar button { min-height: 0; margin: 0; width: auto; text-transform: none; letter-spacing: 0; }
:is(.c2, .gm2) .mi-seg { display: flex; gap: 2px; padding: 2px; border-radius: 10px; background: rgba(0,0,0,.35); }
:is(.c2, .gm2) .mi-seg button { display: flex; flex-direction: column; align-items: center; padding: 4px 9px; font-size: 15px; line-height: 1.1; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink); box-shadow: none; }
:is(.c2, .gm2) .mi-seg button small { font-size: 10px; color: var(--ink-faded); }
:is(.c2, .gm2) .mi-seg button.on { background: var(--c2-brass); color: var(--c2-on-gold); }
:is(.c2, .gm2) .mi-seg button.on small { color: var(--c2-on-gold); }
:is(.c2, .gm2) .mi-seg button:disabled { opacity: .4; cursor: default; }
:is(.c2, .gm2) .mi-step { display: flex; align-items: center; gap: 6px; color: var(--ink); }
:is(.c2, .gm2) .mi-step.dim { opacity: .45; }
:is(.c2, .gm2) .mi-step small { color: var(--ink-faded); font-size: 11px; }
:is(.c2, .gm2) .mi-step b { min-width: 40px; text-align: right; font-size: 13px; }
:is(.c2, .gm2) .mi-step input { width: 90px; accent-color: var(--gold); }
:is(.c2, .gm2) .mi-sep { width: 1px; align-self: stretch; background: var(--c2-rim); }
:is(.c2, .gm2) .mi-tx, :is(.c2, .gm2) .mi-ic { padding: 7px 10px; border-radius: 8px; font-size: 12.5px; background: var(--c2-surface); color: var(--ink); border: 1px solid var(--c2-rim); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gold) 16%, transparent); }
:is(.c2, .gm2) .mi-ic { font-size: 15px; padding: 5px 9px; }
:is(.c2, .gm2) .mi-ic.on { box-shadow: 0 0 0 2px var(--gold); }
:is(.c2, .gm2) .mi-ic:disabled { opacity: .4; cursor: default; }
:is(.c2, .gm2) .mi-done { padding: 7px 12px; border-radius: 8px; font-weight: 700; }
:is(.c2, .gm2) .mi-hist { position: absolute; right: 14px; top: 12px; z-index: 21; width: 236px; box-sizing: border-box; padding: 10px; border-radius: 12px; display: flex; flex-direction: column; gap: 3px; font-size: 12px;
  background: var(--page-texture, none), var(--c2-surface); border: 1px solid var(--gold-deep); box-shadow: 0 8px 22px rgba(0,0,0,.6); }
:is(.c2, .gm2) .mi-hist > b { color: var(--gold); font: 600 13px Georgia, serif; margin-bottom: 3px; }
:is(.c2, .gm2) .mi-hist em { color: var(--ink-faded); font-size: 11.5px; }
:is(.c2, .gm2) .mi-hist .mi-hnote { color: var(--ink-faded); font-size: 10.5px; margin-top: 2px; }
:is(.c2, .gm2) .mi-hi { display: flex; justify-content: space-between; gap: 8px; text-align: left; padding: 4px 7px; min-height: 0; border-radius: 6px; border: 0; background: none; color: var(--ink-soft); box-shadow: none; width: auto; font-size: 12px; text-transform: none; letter-spacing: 0; }
:is(.c2, .gm2) .mi-hi small { color: var(--ink-faded); }
:is(.c2, .gm2) .mi-hi.on { background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--ink); }
:is(.c2, .gm2) .mi-hi.undone { opacity: .5; text-decoration: line-through; }
:is(.c2, .gm2) .mi-link { align-self: flex-start; margin-top: 4px; background: none; border: 0; padding: 2px 0; min-height: 0; color: var(--ink-faded); font-size: 11.5px; text-decoration: underline; box-shadow: none; width: auto; }
:is(.c2, .gm2) .mi-pview { position: absolute; right: 14px; bottom: 14px; z-index: 21; width: 236px; box-sizing: border-box; padding: 8px; border-radius: 12px;
  background: var(--page-texture, none), var(--c2-surface); border: 1px solid var(--gold-deep); box-shadow: 0 10px 30px #000; }
:is(.c2, .gm2) .mi-pvt { font: 600 12px Georgia, serif; color: var(--gold); margin-bottom: 6px; }
:is(.c2, .gm2) .mi-pvt small { color: #a9c47e; font: 11px var(--rs-sans, sans-serif); margin-left: 6px; }
:is(.c2, .gm2) .mi-pvmap { position: relative; width: 100%; background: #000 center / 100% 100% no-repeat; border-radius: 4px; overflow: hidden; border: 1px solid var(--c2-rim); }
:is(.c2, .gm2) .mi-pvmap canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
:is(.c2, .gm2) .mi-pvtok { position: absolute; inset: 0; z-index: 1; }
:is(.c2, .gm2) .mi-pvtok i { position: absolute; border-radius: 50%; background: #000 center / cover; box-shadow: 0 0 0 1px #c0392b; animation: mi-reveal .6s ease-in-out both; }
:is(.c2, .gm2) .mi-pvtok i.pc { box-shadow: 0 0 0 1px var(--gold); }
@keyframes mi-reveal { from { opacity: 0; filter: blur(2px); } }
/* brush ring, area rectangle, room highlight */
:is(.c2, .gm2) .mi-ring { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; border: calc(2px * var(--mi-inv)) solid var(--gold);
  box-shadow: 0 0 0 calc(1px * var(--mi-inv)) rgba(0,0,0,.6), inset 0 0 0 calc(1px * var(--mi-inv)) rgba(0,0,0,.4), 0 0 calc(14px * var(--mi-inv)) color-mix(in srgb, var(--gold) 50%, transparent); }
:is(.c2, .gm2) .mi-ring.on { border-width: calc(3px * var(--mi-inv)); box-shadow: 0 0 0 calc(1px * var(--mi-inv)) rgba(0,0,0,.6), inset 0 0 calc(18px * var(--mi-inv)) color-mix(in srgb, var(--gold) 45%, transparent), 0 0 calc(18px * var(--mi-inv)) color-mix(in srgb, var(--gold) 65%, transparent); }
:is(.c2, .gm2) .mi-ring.cover { border-style: dashed; }
:is(.c2, .gm2) .mi-ring::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(6px * var(--mi-inv)); height: calc(6px * var(--mi-inv)); transform: translate(-50%, -50%); border-radius: 50%; background: var(--gold); }
:is(.c2, .gm2) .mi-ring span { position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -3px) scale(var(--mi-inv)); transform-origin: 50% 100%; font: 700 11px system-ui, sans-serif; color: var(--ink); text-shadow: 0 1px 2px #000, 0 0 4px #000; white-space: nowrap; }
:is(.c2, .gm2) .mi-fchip { font-size: 12px; padding: 4px 10px; }
:is(.c2, .gm2) .mi-fchip small { color: var(--ink-faded); font-weight: 400; }
:is(.c2, .gm2) .mi-fchip.room { background: rgba(0,0,0,.82); }
:is(.c2, .gm2) .mi-rectsel { position: absolute; border: calc(2px * var(--mi-inv)) solid var(--gold); background: color-mix(in srgb, var(--gold) 9%, transparent); pointer-events: none; }
:is(.c2, .gm2) .mi-rectsel.cover { border-style: dashed; }
:is(.c2, .gm2) .mi-rectsel span { position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -4px) scale(var(--mi-inv)); transform-origin: 50% 100%; white-space: nowrap; font: 700 12px system-ui, sans-serif; color: var(--ink); background: rgba(0,0,0,.8); padding: 2px 8px; border-radius: 8px; }
:is(.c2, .gm2) .mi-rectsel i { position: absolute; right: 0; bottom: 0; width: 10px; height: 10px; transform: translate(50%, 50%) scale(var(--mi-inv)); background: var(--gold); border-radius: 2px; }
:is(.c2, .gm2) .mi-roomhi { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
:is(.c2, .gm2) .mi-roomhi .f { fill: color-mix(in srgb, var(--gold) 14%, transparent); }
:is(.c2, .gm2) .mi-roomhi .o { fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-dasharray: 6 4; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--gold) 60%, transparent)); }
:is(.c2, .gm2) .dm-map-grid.mi-fogtool, :is(.c2, .gm2) .mi-fog-on .dm-map-grid { cursor: crosshair; }
/* phone fog bar (bottom) */
:is(.c2, .gm2) .mi-fbar.phone { position: fixed; left: 0; right: 0; top: auto; bottom: 0; transform: none; border-radius: 0; justify-content: space-between; padding: 10px 10px 12px; border: 0; border-top: 2px solid var(--gold-deep); z-index: 70; }
:is(.c2, .gm2) .mi-fbar.phone .mi-seg button { padding: 8px 10px; font-size: 17px; }
:is(.c2, .gm2) .mi-fbar.phone .mi-ic { padding: 8px 10px; font-size: 16px; }
:is(.c2, .gm2) .mi-fbar.phone .mi-done { padding: 9px 13px; font-size: 16px; }
:is(.c2, .gm2) .mi-fmore { position: fixed; right: 10px; bottom: 74px; z-index: 71; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; min-width: 220px;
  background: var(--page-texture, none), var(--c2-surface); border: 1px solid var(--gold-deep); box-shadow: 0 10px 30px #000; }
.c2-phone.mi-fog-on .c2-stage { margin-bottom: 64px; }
/* ⋯ More: round history */
:is(.c2, .gm2) .mi-rh { display: flex; flex-direction: column; gap: 3px; padding: 4px 6px; font-size: 12px; color: var(--ink-soft); max-height: 260px; overflow: auto; }
:is(.c2, .gm2) .mi-rh b { color: var(--gold); font: 600 13px Georgia, serif; }
:is(.c2, .gm2) .mi-rh em { color: var(--ink-faded); }
:is(.c2, .gm2) .mi-rhr { color: var(--ink-faded); text-transform: uppercase; letter-spacing: .6px; font-size: 10px; margin-top: 4px; }
:is(.c2, .gm2) .mi-rh span.undone { color: var(--ink-faded); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-faded) 70%, transparent); opacity: .75; }
:is(.c2, .gm2) .mi-rh span.undone small { text-decoration: none; display: inline-block; margin-left: 4px; font-size: 10px; letter-spacing: .4px; text-transform: uppercase; }
/* phone: the stat sheet folds into a peek bar while the AoE fan is open */
:is(.c2, .gm2) .mi-peek { flex: none; height: 99px; box-sizing: border-box; padding: 8px 10px; display: flex; flex-direction: column; gap: 7px; position: relative; z-index: 20;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c2-surface) 92%, #000), var(--page-deep, var(--page))); border-top: 1px solid var(--gold-deep); border-bottom: 2px solid var(--gold-deep); box-shadow: 0 6px 16px rgba(0,0,0,.65); }
:is(.c2, .gm2) .mi-pk1, :is(.c2, .gm2) .mi-pk2 { display: flex; align-items: center; gap: 9px; min-width: 0; }
:is(.c2, .gm2) .mi-pk1 .c2-cface { width: 38px; height: 38px; flex: none; border-radius: 50%; box-shadow: 0 0 0 2px var(--mi-ember), 0 0 10px var(--mi-ember); overflow: hidden; display: flex; align-items: center; justify-content: center; }
:is(.c2, .gm2) .mi-pkn { flex: 1; min-width: 0; display: flex; flex-direction: column; }
:is(.c2, .gm2) .mi-pkn b { font: 700 15px/1.1 Georgia, serif; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.c2, .gm2) .mi-pkn small { font-size: 10.5px; color: var(--ink-faded); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.c2, .gm2) .mi-pkhp { display: flex; flex-direction: column; gap: 4px; width: 66px; }
:is(.c2, .gm2) .mi-pkhp b { font: 700 14px/1 var(--rs-sans, sans-serif); color: var(--ink); }
:is(.c2, .gm2) .mi-pkhp b small { color: var(--ink-faded); font-weight: 400; font-size: 11px; }
:is(.c2, .gm2) .mi-pkx { width: 32px; height: 32px; padding: 0; min-height: 0; border-radius: 50%; background: var(--page-deep, var(--page)); border: 1px solid var(--gold-deep); color: var(--gold); font-size: 14px; box-shadow: none; }
:is(.c2, .gm2) .mi-pkact { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 10px; font-size: 13px; white-space: nowrap; overflow: hidden;
  background: var(--c2-brass); color: var(--c2-on-gold); border: 1px solid var(--gold); box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 45%, transparent); }
:is(.c2, .gm2) .mi-pkact small { font-size: 10.5px; opacity: .85; overflow: hidden; text-overflow: ellipsis; }
:is(.c2, .gm2) .mi-pkrc { font: 800 9.5px/1 var(--rs-sans, sans-serif); letter-spacing: .6px; color: #a9c47e; border: 1px solid color-mix(in srgb, #a9c47e 55%, transparent); padding: 5px 6px; border-radius: 6px; }
:is(.c2, .gm2) .mi-pkrc.spent { color: #f08a6e; border-color: color-mix(in srgb, #f08a6e 55%, transparent); }
:is(.c2, .gm2) .c2-roll.placing { background: var(--c2-brass) !important; color: var(--c2-on-gold) !important; border-color: var(--gold) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 40%, transparent), 0 0 12px color-mix(in srgb, var(--gold) 60%, transparent) !important; }
@media (prefers-reduced-motion: reduce) {
  :is(.c2, .gm2) .mi-tpl, :is(.c2, .gm2) .mi-hdl, :is(.c2, .gm2) .mi-afan.in .mi-afwrap, :is(.c2, .gm2) .mi-afan.in .mi-af, :is(.c2, .gm2) .mi-afan.in .mi-ai, :is(.c2, .gm2) .mi-afan.in .mi-aival, :is(.c2, .gm2) .mi-afan.in .mi-achip, :is(.c2, .gm2) .mi-afan.in .mi-hub span, :is(.c2, .gm2) .mi-pcell, :is(.c2, .gm2) .mi-cancel, :is(.c2, .gm2) .mi-pvtok i { animation: none !important; }
  :is(.c2, .gm2) .map-token.mi-lift { transition: none; }
  .mi-toast { transition: opacity .08s; }
}
/* The Hearth reskin lights every [aria-pressed="true"] with an ember ring; inside the fans and bars
   the pressed state is a brass disc instead (Jenny's spec), so win that fight explicitly. */
html:root[data-palette][data-palette] body :is(.c2, .gm2) :is(.mi-af, .mi-pill, .mi-seg button, .c2-roll.placing)[aria-pressed="true"] {
  background: var(--c2-brass) !important; color: var(--c2-on-gold) !important; opacity: 1 !important; filter: none !important;
  box-shadow: 0 0 0 2px var(--page), 0 0 14px color-mix(in srgb, var(--gold) 55%, transparent) !important; }
html:root[data-palette][data-palette] body :is(.c2, .gm2) :is(.mi-af, .mi-pill, .mi-seg button)[aria-pressed="true"] * { color: var(--c2-on-gold) !important; }
html:root[data-palette][data-palette] body :is(.c2, .gm2) .mi-af[aria-pressed="true"] small { color: var(--mi-plate-gold) !important; text-shadow: 0 1px 2px #000; }
html:root[data-palette][data-palette] body :is(.c2, .gm2) .mi-ic[aria-pressed="true"] { background: var(--c2-surface) !important; box-shadow: 0 0 0 2px var(--gold) !important; }
/* desktop: room to slide the map left, clear of the fan */
.c2-desk.mi-aoe-on .dm-map-scroll { padding-right: var(--mi-fanpad, 0px); }
/* phone: the board can slide up and left of the fan instead of staying centred under it */
:is(.c2, .gm2).c2-phone.mi-aoe-on .c2-stage .dm-map-scroll { align-items: flex-start; justify-content: flex-start; padding-bottom: var(--mi-fanpad, 0px); padding-right: var(--mi-fanpad, 0px); }
/* while a token is lifted the tool button and help step aside (the phone cancel zone sits there) */
:is(.c2, .gm2):has(.mi-moving) :is(.c2-fab, .c2-help, .c2-helpbox) { opacity: 0; pointer-events: none; transition: opacity .12s; }
/* fog tools: one finger paints, two fingers pan the board */
:is(.c2, .gm2).mi-fog-on .c2-stage .dm-map-scroll, :is(.c2, .gm2).mi-fog-on #dmMapGrid { touch-action: none; }
/* waypoint pending: a gold dot fills during the ~350 ms pause, then the path bends there */
:is(.c2, .gm2) .mi-wpend { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; z-index: 8; pointer-events: none;
  border: 2px solid var(--gold); box-shadow: 0 0 0 2px rgba(0,0,0,.55); transform: scale(calc(var(--mi-inv, 1)));
  background: conic-gradient(var(--gold) calc(var(--p, 0) * 1%), transparent 0); }
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
:is(.c2, .gm2) .mi-wpend.go { animation: mi-wfill .35s linear forwards; }
@keyframes mi-wfill { from { --p: 0; } to { --p: 100; } }
@media (prefers-reduced-motion: reduce) { :is(.c2, .gm2) .mi-wpend.go { animation-duration: .01s; animation-delay: .34s; } }

/* v1.7.1 — a name caption the corner fan (or the round button, pills, help line) would cover moves above its
   token, or beside it on the left (mi.js clearCaps) */
:is(.c2, .gm2) .map-token .map-token-caption.mi-cap-up { top: auto; bottom: 100%; margin: 0 0 3px; }
:is(.c2, .gm2) .map-token .map-token-caption.mi-cap-l { top: 50%; left: auto; right: 100%; transform: translateY(-50%); margin: 0 4px 0 0; }
/* v1.7.1 — fixed map-tool bars stay clear of the nav bar / Fold taskbar and the status bar (edge-to-edge) */
:is(.c2, .gm2) .mi-fbar.phone, :is(.c2, .gm2) .mi-cancel { bottom: var(--hearth-safe-bottom, 0px); }
:is(.c2, .gm2) .mi-aftogs.left { bottom: calc(14px + var(--hearth-safe-bottom, 0px)); left: calc(12px + var(--hearth-safe-left, 0px)); }
:is(.c2, .gm2) .mi-fmore { bottom: calc(74px + var(--hearth-safe-bottom, 0px)); right: calc(10px + var(--hearth-safe-right, 0px)); }
.mi-toast { top: calc(118px + var(--hearth-safe-top, 0px)); }