/* css/map.css: Layout fixes, map pills and the YOU marker, the dice tray, original art on the map, map labels and chit counters.
   The css/ files are CONTIGUOUS SLICES of the old single styles.css, loaded by index.html in this order (base, front, shell, combat, map, plan, sheets, play, shared).
   Cascade order is part of the meaning: a rule that overrides an earlier rule of the same specificity must stay in a file that loads after it. Move rules between files
   only with a screenshot diff (tools/ui_snapshots.py). New rules for a screen go at the END of the file that owns it. */
/* ---- layout fixes for the game screen ---- */
.game .mapbox { flex: 1; min-height: 0; position: relative; overflow: hidden; touch-action: none; background: #0b0d13; }
.combat { font-variant-numeric: lining-nums tabular-nums; }

.plan > .hint { font-size: 14.5px; }

.layer { z-index: 10; }
.btn.row .rl { display: flex; flex-direction: column; align-items: flex-start; text-align: left; line-height: 1.2; min-width: 0; }
.btn.row .rl b { font-weight: 600; }
.btn.row .rl small { font-size: 13px; color: var(--dim); font-weight: 400; }
.btn.row { min-height: 54px; padding: 6px 14px; }
.foe em.ally { color: var(--moss); }
.combat { overflow: hidden; }
.cb-state { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--dim); }
.cb-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; }
.foe { padding: 6px 10px; }
.foe b { font-size: 16px; }

.realm-svg .hero.hid { fill: none; stroke: var(--gold); stroke-width: 2; stroke-dasharray: 3 2; }

.key p { margin: 8px 0; } .key b { display: inline-block; min-width: 3.2em; color: var(--gold); }
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lane { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 6px; min-height: 96px; display: flex; flex-direction: column; gap: 4px; }
.lane-h { display: flex; flex-direction: column; line-height: 1.1; }
.lane-h b { font-size: 15px; } .lane-h small { color: var(--dim); font-size: 12px; }
.lane-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag { font-size: 11px; padding: 1px 6px; border-radius: 8px; background: rgba(134, 196, 122, .18); color: var(--gold); }
.lane-foe { font-size: 13px; background: #2a171b; border: 1px solid #5a2f2f; border-radius: 8px; padding: 2px 6px; }
.cb-foes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cb-foes .foe b { font-size: 14.5px; line-height: 1.15; }
.cb-foes .foe span { font-size: 12.5px; }
.fine .ver { opacity: .6; margin-left: 4px; }

/* ---- map pills, YOU marker, clearer sheets ---- */
.realm-svg .pill rect { stroke: #0c0e14; stroke-width: 1; }
.realm-svg .pill text { font-size: 9px; font-weight: 700; fill: #fff; font-family: var(--font-ui); }
.realm-svg .pill.mon rect { fill: #a33; } .realm-svg .pill.nat rect { fill: #3d6fb8; } .realm-svg .pill.ally rect { fill: #2f8f6a; }
.realm-svg .pill.visit rect { fill: #2e7f86; } .realm-svg .pill.task rect { fill: #a14b6b; }
.realm-svg .pill.dwelling rect { fill: #8a6d2c; } .realm-svg .pill.site rect { fill: #6a4fa8; } .realm-svg .pill.sound rect { fill: #7a5a2e; }
.realm-svg .chit text { font-size: 9px; font-weight: 700; }
.realm-svg .me .halo { fill: rgba(134, 196, 122, .18); stroke: var(--gold); stroke-width: 3; }
.realm-svg .me.hid .halo { stroke-dasharray: 4 3; fill: none; }
.realm-svg .me rect { fill: var(--gold); stroke: #0d1a0f; stroke-width: 1.4; }
.realm-svg .me text { font-size: 11px; font-weight: 800; fill: #0d1a0f; font-family: var(--font-ui); }
.realm-svg .me path { fill: var(--gold); }

.clearing h3 { margin: 12px 0 4px; }
.crow { border: 1px solid var(--line); border-left: 4px solid var(--dim); border-radius: 12px; padding: 8px 10px; margin: 6px 0; background: var(--panel2); display: flex; flex-direction: column; gap: 2px; }
.crow b { font-size: 17px; } .crow small { font-size: 14px; color: var(--dim); line-height: 1.3; }
.crow.me { border-left-color: var(--gold); } .crow.mon { border-left-color: #c44; } .crow.nat { border-left-color: #4a78c0; } .crow.dwelling { border-left-color: #b08a3a; }
.crow.site, .crow.sound, .crow.chit, .crow.warning { border-left-color: #8a6ad0; } .crow.loot { border-left-color: var(--moss); } .crow.road.off { opacity: .55; }
details summary { cursor: pointer; color: var(--dim); margin: 10px 0 4px; }

/* a path not found yet: a closed gate (a dashed diamond long in the path's direction with a bar across it), in the colour of its kind (hidden path orange, secret passage teal); never a '?' */
.realm-svg .undisc-mark .pm { fill: #14161f; fill-opacity: .88; stroke-width: 1.5; stroke-dasharray: 2.4 1.8; stroke-linejoin: round; }
.realm-svg .undisc-mark .pmbar { stroke-width: 2; stroke-linecap: round; }
.realm-svg .me.hid rect { fill: #3a3320; stroke: var(--gold); stroke-dasharray: 3 2; } .realm-svg .me.hid text { fill: var(--gold); }

/* ---- dice: the tray under the map, the history sheet, and the rolls shown with offers and fights ---- */
.die { position: relative; flex: none; width: 34px; height: 34px; border-radius: 8px; background: #efe6d0; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 5px; gap: 1px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .22), 0 1px 2px rgba(0, 0, 0, .5); }
.die i { border-radius: 50%; }
.die i.on { background: #1b1d28; }
.die.counts { outline: 2px solid var(--gold); outline-offset: 1px; }
.die .dmod { position: absolute; right: -4px; bottom: -7px; font: 700 12px/1 var(--font-ui); color: var(--ember); background: var(--panel); border-radius: 8px; padding: 1px 3px; }
.dice { display: inline-flex; gap: 8px; align-items: center; padding-bottom: 4px; }
.rollrow { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rr-what { font-family: var(--font-display); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.rr-body { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rr-res { font-family: var(--font-text); font-size: 17px; color: var(--text); min-width: 0; }
.rr-res.dim { color: var(--dim); }
.rollrow.monster .rr-what { color: var(--ember); }
.rollrow.monster .rr-res { color: var(--gold); font-weight: 600; }
.rollrow.compact .die { width: 28px; height: 28px; padding: 4px; border-radius: 8px; }
.rollrow.compact .rr-body { gap: 10px; }
.rollrow.compact .rr-res { font-size: 15.5px; }
.rollrow.compact .dice { padding-bottom: 0; }

@keyframes tumble { 0% { transform: rotate(-200deg) scale(.5); opacity: 0; } 60% { transform: rotate(18deg) scale(1.12); opacity: 1; } 100% { transform: none; } }

.histrow { display: flex; flex-direction: column; gap: 3px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.histrow small { color: var(--dim); font-size: 12px; }
.offerdice { display: flex; flex-direction: column; gap: 10px; padding: 8px 0; }
.cb-dice { display: flex; flex-direction: column; gap: 8px; padding: 8px 12px; margin: 8px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); }

/* ---- original art on the map ---- */
.realm-svg .pill .thumbbg { fill: #efe6d0; stroke: none; }
.realm-svg .artnum { font-size: 11px; font-weight: 800; fill: #fff; font-family: var(--font-ui); paint-order: stroke; stroke: #000; stroke-width: 2px; }
.realm-svg .clr:hover .numbadge, .realm-svg .clr.sel .numbadge { stroke: var(--gold); stroke-width: 2.4; }
.ico { flex: none; width: 38px; height: 38px; object-fit: contain; background: #efe6d0; border-radius: 8px; margin-right: 10px; padding: 2px; }
.tablepic { width: 100%; height: auto; border-radius: 8px; background: #efe6d0; }
.tables h3 { margin-top: 14px; }
.foepic { float: right; width: 44px; height: 44px; object-fit: contain; background: #efe6d0; border-radius: 8px; margin-left: 8px; padding: 2px; }
.btn.row .ico + .rl { flex: 1; }
.cardpic { width: 100%; height: auto; border-radius: 12px; display: block; margin: 8px 0; }
/* labels, chits and path markers sit above the clearings: they must never take the tap meant for the clearing under them */
.realm-svg .top, .realm-svg .top *, .realm-svg .chit, .realm-svg .chit *, .realm-svg .undisc-mark, .realm-svg .undisc-mark *, .realm-svg .tname { pointer-events: none; }
.crow { flex-direction: row; align-items: center; gap: 10px; }
.crow .ico { margin-right: 0; }
/* map chits are small counters on clear spots of the tile; their names show once the map is zoomed in */
.realm-svg .chitdisc { fill: #1b1d28; stroke: var(--gold); stroke-width: 1.4; }
.realm-svg .chit.up .chitdisc { fill: #2a2438; stroke: #b9a3ff; }
.realm-svg .chit.up.warning .chitdisc { stroke: #e0814f; }
.realm-svg .chit.up.site .chitdisc { stroke: #6fae8a; }
.realm-svg .chitglyph { fill: var(--text); font: 800 9px var(--font-ui); }

/* ---- P5: the map overlay (rings, the hero's marker, the planned road, the pin) ----
   Drawn by mapview.js into one div above the map, in screen pixels, so everything keeps its size at every zoom. The class names are the design vocabulary of
   docs/design/redesign/mockups/ds.css (.ds-ring, .ds-hero, .ds-route, .ds-stop, .ds-pin); the rules are repeated here, scoped under .mv-ov, so the map works with or without core.css
   (the values are the same; the var() fallbacks are the ds.css token values). Sizes and positions are set inline by mapview.js. */
.mv-ov { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.mv-ov > * { pointer-events: none; }
.mv-ov .ds-ring, .mv-ov .ds-hero, .mv-ov .ds-stop, .mv-key .ds-ring, .mv-key .ds-hero, .mv-key .ds-stop { position: absolute; left: 0; top: 0; }
.mv-ov .ds-ring, .mv-key .ds-ring { width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; box-sizing: border-box; border: 2.5px solid var(--st-legal, #b5e39c); box-shadow: 0 0 0 4px rgba(181, 227, 156, .16); }
.mv-ov .ds-ring.legal { animation: mv-pulse 2.2s cubic-bezier(.4, 0, .2, 1) infinite; }
.mv-ov .ds-ring.maybe, .mv-key .ds-ring.maybe { border-style: dotted; border-color: var(--st-maybe, rgba(181, 227, 156, .75)); box-shadow: none; }
.mv-ov .ds-ring.illegal, .mv-key .ds-ring.illegal { border: 2px dashed var(--st-illegal, rgba(143, 136, 114, .55)); box-shadow: 0 0 0 1.5px rgba(10, 12, 17, .5); }          /* (a dark edge: a dim ring must still be seen on the tile art) */
.mv-ov .ds-ring.danger, .mv-key .ds-ring.danger { border-color: var(--st-danger, #e2685c); box-shadow: 0 0 0 4px rgba(226, 104, 92, .18); }
.mv-ov .ds-ring.locked, .mv-key .ds-ring.locked { border-color: var(--st-locked, #8ea6d0); box-shadow: 0 0 0 4px rgba(142, 166, 208, .18); }
.mv-ov .ds-ring.chosen, .mv-key .ds-ring.chosen { border-color: var(--gold, #86c47a); background: rgba(134, 196, 122, .22); box-shadow: 0 0 0 5px rgba(134, 196, 122, .28); animation: none; }
@keyframes mv-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(181, 227, 156, .10); } 50% { box-shadow: 0 0 0 8px rgba(181, 227, 156, .22); } }
@media (prefers-reduced-motion: reduce) { .mv-ov .ds-ring.legal { animation: none; } }
html[data-calm="on"] .mv-ov .ds-ring.legal { animation: none; }
/* the hero: a solid gold dot, hollow and dashed when he is hidden */
.mv-ov .ds-hero, .mv-key .ds-hero { width: 22px; height: 22px; margin: -11px 0 0 -11px; box-sizing: border-box; border-radius: 50%; background: #0d0f15; border: 2.5px solid var(--gold-hi, #b5e39c); box-shadow: 0 0 0 4px rgba(10, 12, 17, .55), 0 0 14px rgba(181, 227, 156, .5); }
.mv-ov .ds-hero::after, .mv-key .ds-hero::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: var(--gold-hi, #b5e39c); }
.mv-ov .ds-hero.hidden::after, .mv-key .ds-hero.hidden::after { background: transparent; }
.mv-ov .ds-hero.hidden, .mv-key .ds-hero.hidden { border-style: dashed; }
/* the planned road: dotted gold along the roads, numbered stops; what is already walked dims */
.realm-svg .ds-route { position: static; }          /* (the route is drawn in the map, under the names: mapview.js mountRoute) */
.realm-svg .ds-route path { fill: none; stroke: var(--gold-hi, #b5e39c); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 7; }
.realm-svg .ds-route path.mv-route-done { opacity: .35; }
/* a stop on the planned road is a hollow ring round its clearing, with no number: nothing sits on the clearing's own number (Mike, 2026-11-02) */
.mv-ov .ds-stop, .mv-key .ds-stop { width: 34px; height: 34px; margin: -17px 0 0 -17px; box-sizing: border-box; border-radius: 50%; background: transparent; border: 3px solid var(--gold, #86c47a); box-shadow: 0 0 0 1.5px rgba(10, 12, 17, .7), inset 0 0 0 1.5px rgba(10, 12, 17, .7); }
.mv-ov .ds-stop.done { opacity: .45; }
/* the pin: why a dim clearing is dim (the sentence comes from game.js) */
.mv-ov .ds-pin { position: absolute; z-index: 2; transform: translate(-50%, calc(-100% - var(--off, 30px))); width: max-content; max-width: min(220px, calc(100% - 16px)); box-sizing: border-box; padding: 8px 12px; border-radius: var(--r-md, 12px); background: rgba(21, 25, 37, .96); border: 1px solid var(--line-gold, rgba(134, 196, 122, .48)); box-shadow: var(--shadow-2, 0 8px 28px rgba(0, 0, 0, .55)); font: 500 15px/1.25 var(--font-ui, system-ui); color: var(--text, #efe6d0); text-align: center; }
.mv-ov .ds-pin::after { content: ""; position: absolute; left: calc(50% - var(--dx, 0px)); bottom: -6px; width: 10px; height: 10px; margin-left: -5px; background: inherit; border-right: 1px solid var(--line-gold, rgba(134, 196, 122, .48)); border-bottom: 1px solid var(--line-gold, rgba(134, 196, 122, .48)); transform: rotate(45deg); }
.mv-ov .ds-pin.below { transform: translate(-50%, var(--off, 30px)); }
.mv-ov .ds-pin.below::after { bottom: auto; top: -6px; transform: rotate(225deg); }
.mv-ov .ds-pin.bad { border-color: rgba(226, 104, 92, .6); }
.mv-ov .ds-pin b { color: var(--gold-hi, #b5e39c); font-weight: 700; } .mv-ov .ds-pin.bad b { color: var(--danger, #e2685c); }
.mv-ov [hidden] { display: none; }

/* a character's pill (notes 90, 96): the green accent while he is in plain sight, dark and dashed in teal while he is hidden (the ring round his clearing is the same teal); his hex face
   is the one of the new-game screens; the eye at the end says the same in a picture: open when he is seen, shut when he is hidden */
.realm-svg .pill.char rect.pbody { fill: #2c7a46; stroke: #e3f6d6; stroke-width: 1.3; }
.realm-svg .pill.char text { fill: #fff; }
.realm-svg .pill.char .hexo, .realm-svg .bicon.face .hexo { fill: #e3f6d6; stroke: none; }
.realm-svg .pill.char .hexi, .realm-svg .bicon.face .hexi { fill: #efe6d0; stroke: none; }
.realm-svg .pill.char .eye path, .realm-svg .pill.char .eye line { fill: none; stroke: #fff; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.realm-svg .pill.char .eye.open circle { fill: #fff; stroke: none; }
.realm-svg .pill.char.hid rect.pbody { fill: rgba(12, 14, 20, .84); stroke: #7fd1c8; stroke-width: 1.4; stroke-dasharray: 3 2.2; }
.realm-svg .pill.char.hid text { fill: #9fe0d6; }
.realm-svg .pill.char.hid .hexo { fill: #7fd1c8; }
.realm-svg .pill.char.hid .hexface image, .realm-svg .pill.char.hid .hexi { opacity: .6; }
.realm-svg .pill.char.hid .eye path, .realm-svg .pill.char.hid .eye line { stroke: #9fe0d6; }
.realm-svg .leader.char, .realm-svg .leader-mark.char { stroke: #b5e39c; }
.realm-svg .bseg.char rect { fill: #2c7a46; stroke: #e3f6d6; stroke-width: 1; }
.realm-svg .bseg.char.hid rect { fill: rgba(12, 14, 20, .86); stroke: #7fd1c8; stroke-dasharray: 2 1.6; }
.realm-svg .bseg.char.hid .hexface { opacity: .7; }
/* a site's chip when the names have given way to chips: the gold edge of a discovered site, as on its pill */
.realm-svg .bseg.site.disc rect { stroke: #b5e39c; stroke-width: 2.4; }
.realm-svg.lod .leader { vector-effect: non-scaling-stroke; }

/* ---- P5: the map key (mapLegend() in mapview.js): swatches drawn by the map's own builders, five words each ---- */
.mv-key { display: flex; flex-direction: column; }
.mv-key-h { margin: 14px 0 2px; font: 600 12px/1.2 var(--font-display, serif); letter-spacing: .14em; text-transform: uppercase; color: var(--dim, #a39a84); }
.mv-key-h:first-child { margin-top: 2px; }
.mv-key-row { display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 3px 0; border-bottom: 1px solid var(--line, #323a52); }
.mv-key-row:last-child { border-bottom: 0; }
.mv-key-sw { flex: none; width: 150px; display: flex; align-items: center; }
.mv-key-tx { font: 500 16px/1.25 var(--font-ui, system-ui); color: var(--text, #efe6d0); min-width: 0; }
.mv-key .mv-swatch { display: block; cursor: default; touch-action: auto; overflow: visible; }
.mv-key-box { position: relative; display: block; width: 44px; height: 44px; }

@media (max-width: 374px) { .mv-key-sw { width: 128px; } }

/* QA-14: the tile name set upright over the printed one (mapview.js upright) */
.realm-svg .tname-up text { font: 800 7.8px Arial, Helvetica, sans-serif; letter-spacing: .3px; pointer-events: none; }

/* ---- the bare-tiles view (the eye button above the map button; G.ui.bare): no name, number or mark of discovery, so the printed tile shows;
   what is found throbs with a soft glow: the paths and the sites ---- */
.ds-map-btn.ds-bare-btn { bottom: 64px; }
.ds-bare-btn.on { border-color: var(--gold); color: var(--gold-hi, #b5e39c); }
.mapbox .sitehalo { display: none; fill: none; stroke: #b5e39c; stroke-width: 3; }
.mapbox.bare .labels, .mapbox.bare .leaders, .mapbox.bare .numbadge, .mapbox.bare .artnum, .mapbox.bare .num, .mapbox.bare .undisc-mark, .mapbox.bare .chit, .mapbox.bare .ds-stop, .mapbox.bare .mv-route { display: none; }   /* (the plan's numbered stops and its road too: they sat over the clearing numbers) */
.mapbox.bare .sitehalo { display: block; animation: bare-throb 1.8s ease-in-out infinite; }
.mapbox.bare .found-path { stroke-width: 3; animation: bare-throb 1.8s ease-in-out infinite; }
@keyframes bare-throb { 0%, 100% { opacity: .55; filter: drop-shadow(0 0 1px rgba(181, 227, 156, .5)); } 50% { opacity: 1; filter: drop-shadow(0 0 5px rgba(181, 227, 156, .95)); } }
@media (prefers-reduced-motion: reduce) { .mapbox.bare .sitehalo, .mapbox.bare .found-path { animation: none; opacity: 1; } }
/* art switch: the black-and-white box counters need their cream tile on a pill (the pill-colour rule above hid it) */
.realm-svg g.pill rect.thumbbg { fill: #efe6d0; }