:root {
  --bg: #121419; --panel: #1d2129; --panel2: #282d37; --line: #3a414e; --text: #ecebe6; --dim: #a6acb8;
  --accent: #e0a93b; --good: #58b368; --bad: #d9534f; --blue: #4f9bd9;
  color-scheme: dark;
}
.review-shade { position: fixed; inset: 0; z-index: 100; background: #000b; display: flex; align-items: center; justify-content: center; padding: 12px; }
.review-dialog { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; width: 100%; max-width: 460px; max-height: calc(100dvh - 24px); overflow-y: auto; padding: 16px; }
.review-dialog h2 { color: var(--text); font-size: 18px; text-transform: none; letter-spacing: normal; }
.review-dialog > button { width: 100%; }
.discard-row { display: flex; align-items: end; gap: 8px; margin-top: 8px; }
.discard-row label { flex: 1; font-size: 13px; }
.discard-row input { display: block; margin-top: 4px; }
details { margin: 10px 0; }
summary { cursor: pointer; padding: 10px 0; color: var(--dim); }
g[data-area]:focus { outline: none; }
g[data-area]:focus circle { stroke: var(--accent); stroke-width: 3; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 15px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overscroll-behavior: none; }
#app { max-width: 480px; margin: 0 auto; height: 100%; display: flex; flex-direction: column; }
header.top { padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--line); }
.top-row { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-weight: 600; }
.bars { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.bar { position: relative; height: 16px; background: #0003; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; font-size: 11px; }
.bar > i { position: absolute; inset: 0 auto 0 0; display: block; background: var(--good); }
.bar.weight > i { background: var(--accent); }
.bar.enemy > i { background: var(--bad); }
.bar.xp { height: 6px; }
.bar.xp > i { background: var(--blue); }
.bar { height: 18px; }
.bar > span { position: relative; line-height: 16px !important; display: block; text-align: center; line-height: 14px; }
main { flex: 1; min-width: 0; overflow-y: auto; padding: 10px 12px 16px; -webkit-overflow-scrolling: touch; }
nav.tabs { display: grid; grid-template-columns: repeat(5, 1fr); background: var(--panel); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
nav.tabs button { position: relative; background: none; border: 0; color: var(--dim); padding: 9px 0 7px; font-size: 11px; border-radius: 0; min-height: 58px; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
nav.tabs button .ic { width: 24px; height: 24px; }
nav.tabs button.on { color: var(--accent); }
nav.tabs button.on::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); }
.ic { width: 1em; height: 1em; vertical-align: -0.15em; flex: none; }
.chip { font-size: 12px; font-weight: 500; color: var(--dim); background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 1px 8px; margin-left: 4px; }
.coin { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); }
.coin .ic { width: 18px; height: 18px; }
.classes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 8px; }
.class-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.class-card.on { border-color: var(--accent); background: linear-gradient(#3d3520, var(--panel)); }
.class-card .class-icon { font-size: 28px; line-height: 1; }
.class-card button { width: 100%; }
.class-card .tag { min-height: 32px; display: flex; align-items: center; }
.abil .ab { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid #fff1; }
.abil .ab:last-child { border-bottom: 0; }
.abil .ab.locked { opacity: .55; }
.ab-icon { font-size: 22px; width: 32px; text-align: center; flex: none; }
.worn .slot { padding: 6px 0; border-bottom: 1px solid #fff1; min-height: 44px; }
.worn .slot:last-child { border-bottom: 0; }
.slot-name { width: 52px; flex: none; color: var(--dim); font-size: 12px; text-transform: capitalize; }
h2 { font-size: 13px; margin: 16px 0 6px; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
h2:first-child { margin-top: 0; }
.place { font-size: 19px; font-weight: 700; }
.dim { color: var(--dim); font-size: 13px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin-bottom: 8px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.row .grow { flex: 1; min-width: 0; }
.btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
button { font: inherit; color: var(--text); background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; min-height: 40px; cursor: pointer; touch-action: manipulation; }
button:active { filter: brightness(1.25); }
button:disabled { opacity: .4; }
button.primary { background: var(--accent); color: #221a06; border-color: var(--accent); font-weight: 600; }
button.danger { color: #ffb4b0; }
button.small { padding: 4px 8px; min-height: 32px; font-size: 13px; }
input, select { font: inherit; color: var(--text); background: #0003; border: 1px solid var(--line); border-radius: 6px; padding: 8px; min-height: 40px; width: 100%; }
.inline { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.tag { font-size: 11px; padding: 1px 6px; border-radius: 10px; background: var(--panel2); color: var(--dim); white-space: nowrap; }
.tag.bad { color: #ffb4b0; }
.tag.good { color: #a5e3b0; }
.log { font-size: 13px; color: var(--dim); }
.log div { padding: 2px 0; border-bottom: 1px solid #fff1; }
.feed { font-size: 13px; min-height: 96px; color: var(--dim); }
.feed div:last-child { color: var(--text); }
.big-icon { font-size: 44px; text-align: center; line-height: 1.1; }
.queue { display: flex; gap: 4px; min-height: 44px; margin: 8px 0; }
.queue button { flex: 1; padding: 0; font-size: 20px; min-height: 44px; }
.queue .empty { flex: 1; border: 1px dashed var(--line); border-radius: 6px; }
.clock { height: 6px; margin-top: 8px; background: #0003; border-radius: 3px; overflow: hidden; }
.clock > i { display: block; height: 100%; background: var(--accent); }
.tabs2 { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.tabs2 button { flex: 1 1 auto; white-space: nowrap; }
.tabs2 button.on { background: var(--accent); color: #221a06; }
.chat-line { font-size: 13px; padding: 3px 0; border-bottom: 1px solid #fff1; }
.chat-line.system { color: var(--accent); background: #e0a93b14; padding: 5px 6px; border-radius: 6px; font-weight: 500; }
.tutorial { border-color: var(--accent); }
#toast { position: fixed; left: 50%; transform: translateX(-50%); top: 70px; background: #000d; border: 1px solid var(--line); padding: 8px 14px; border-radius: 8px; z-index: 30; max-width: 90vw; font-size: 14px; }

/* Minigames */
#game-overlay { position: fixed; inset: 0; background: var(--bg); z-index: 20; display: flex; flex-direction: column; max-width: 480px; margin: 0 auto; padding: 12px; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
#game-overlay[hidden] { display: none; }
.mg-title { font-weight: 700; font-size: 17px; display: flex; justify-content: space-between; align-items: center; }
.mg-help { color: var(--dim); font-size: 13px; min-height: 36px; margin: 2px 0 8px; }
.mg-stage { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; min-height: 0; }
.mg-time { height: 6px; background: #0003; border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.mg-time > i { display: block; height: 100%; background: var(--accent); }
.mg-grid { display: grid; gap: 8px; }
.mg-cell { aspect-ratio: 1; font-size: 34px; background: #3b3f47; border: 2px solid var(--line); border-radius: 10px; padding: 0; }
.mg-cell.lit { background: #6a5526; border-color: var(--accent); }
.mg-cell.special { background: #2d5e75; border-color: #7fd4ff; box-shadow: 0 0 14px #7fd4ff; }
.mg-cell.hazard { background: #5b2b2b; border-color: var(--bad); }
.mg-cell.hit { background: #2f5a3a; }
.mg-tap { min-height: 96px; font-size: 22px; font-weight: 700; background: var(--accent); color: #221a06; border: 0; border-radius: 12px; }
.mg-sweep { position: relative; height: 56px; background: #0004; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.mg-notch { position: absolute; top: 0; bottom: 0; background: #58b36899; border-inline: 2px solid var(--good); }
.mg-marker { position: absolute; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: #fff; }
.mg-water { height: 180px; background: linear-gradient(#27475c, #18303f); border-radius: 12px; position: relative; overflow: hidden; }
.mg-bob { position: absolute; left: 50%; top: 40%; font-size: 40px; transform: translateX(-50%); }
.mg-note { position: absolute; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--accent); }
.mg-line { position: absolute; top: 0; bottom: 0; left: 20%; width: 4px; margin-left: -2px; background: #fff; }
.mg-seq { font-size: 54px; text-align: center; min-height: 80px; }
.mg-seqbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mg-seqbtns button { font-size: 40px; min-height: 84px; border-radius: 12px; }
.mg-meterwrap { display: flex; justify-content: center; gap: 18px; align-items: stretch; height: 240px; }
.mg-meter { position: relative; width: 56px; background: #0004; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.mg-meter > .fill { position: absolute; left: 0; right: 0; bottom: 0; background: var(--accent); }
.mg-meter > .zone { position: absolute; left: 0; right: 0; background: #58b36855; border-block: 2px solid var(--good); z-index: 1; }
.mg-meter > .failline { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--bad); z-index: 1; }
.mg-count { display: flex; flex-direction: column; justify-content: center; text-align: center; font-size: 20px; min-width: 96px; }
.mg-duo { display: flex; gap: 10px; }
.mg-duo button { flex: 1; min-height: 96px; font-size: 20px; font-weight: 700; border-radius: 12px; }
.mg-result { text-align: center; }
.mg-result .score { font-size: 28px; font-weight: 800; }
.mg-result .good { color: var(--good); }
.mg-result .bad { color: var(--bad); }
.mg-gain { font-size: 18px; margin: 8px 0; }
.mg-next { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; margin-top: 12px; }
.mg-next button { min-height: 64px; font-size: 17px; }

/* Zone map */
.map { display: block; width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; }
.map-road { stroke: var(--line); stroke-width: 3; }
.map-node { fill: var(--panel2); stroke: var(--line); stroke-width: 2; }
.map-node.here { stroke: var(--accent); stroke-width: 3; }
.map-label { fill: var(--dim); font-size: 10px; }
.map-icons { font-size: 20px; margin-top: 4px; letter-spacing: 2px; }

.map-short { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 4; }
.map-short.locked { stroke: var(--line); opacity: .6; }
.map-hit { fill: transparent; cursor: pointer; }
.map-node.selected { fill: #3d3520; }
.tiers { display: flex; align-items: center; gap: 4px; margin: 0 0 8px; font-size: 12px; color: var(--dim); }
.tiers button { min-height: 30px; padding: 2px 9px; font-size: 13px; }
.tiers button.on { background: var(--accent); color: #221a06; }
.mg-animal { position: absolute; top: 12px; font-size: 26px; margin-left: -14px; }
.mg-track { position: relative; height: 300px; background: #0004; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.mg-wall { position: absolute; left: 0; right: 0; height: 22px; }
.mg-runner { position: absolute; bottom: 4px; font-size: 30px; text-align: center; }
.mg-lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mg-lanes button { min-height: 80px; font-size: 30px; border-radius: 12px; }

.map-node.ghost { opacity: .55; stroke-dasharray: 3 3; }

/* Round 4: progression, skills list, fight clarity */
.note { font-size: 12px; margin: 4px 2px 8px; }
.stats { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 13px; color: var(--dim); }
.stats .ic { color: var(--bad); }
.specs { display: grid; gap: 6px; margin-bottom: 8px; }
.spec-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.spec-card.on { border-color: var(--accent); background: linear-gradient(#3d3520, var(--panel)); }
.spec-card .spec-icon { font-size: 24px; width: 34px; text-align: center; }
.spec-card > button, .spec-card > .tag { align-self: flex-end; }
.tree { display: flex; flex-direction: column; align-items: stretch; }
.tree-row { display: flex; gap: 6px; justify-content: center; }
.tree-row .node { flex: 1; max-width: 220px; display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 8px; border-radius: 8px; background: var(--panel2); border: 1px solid var(--line); color: var(--text); min-height: 58px; }
.tree-row .node span { font-size: 12px; color: var(--dim); font-weight: 400; }
.tree-row .node.got { border-color: var(--good); background: #1f3324; }
.tree-row .node.got b::before { content: "✓ "; color: var(--good); }
.tree-row .node.shut { opacity: .45; }
.tree-row .node:disabled:not(.got):not(.shut) { opacity: .75; }
.tree-link { width: 2px; height: 10px; background: var(--line); margin: 0 auto; }
.track .lv { display: flex; align-items: center; gap: 10px; padding: 5px 2px; border-bottom: 1px solid #ffffff0d; font-size: 13px; color: var(--dim); }
.track .lv:last-of-type { border-bottom: 0; }
.track .lv.got { color: var(--text); }
.track .lv.next { color: var(--text); background: #e0a93b14; border-radius: 6px; }
.track .lv-n { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--panel2); border: 1px solid var(--line); }
.track .lv.got .lv-n { background: var(--good); border-color: var(--good); color: #10200f; }
.track .lv.next .lv-n { border-color: var(--accent); color: var(--accent); }
.track .lv-r { flex: 1; }
.track .rw { color: var(--accent); }
.empty-state { text-align: center; padding: 18px 12px; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.big-icon.dimmed { opacity: .4; font-size: 32px; }
.skill-list { padding: 4px 10px; }
.skill { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #ffffff0d; }
.skill:last-child { border-bottom: 0; }
.skill .sk-icon { font-size: 20px; width: 26px; text-align: center; }
.skill .sk-lv { min-width: 26px; text-align: right; font-size: 16px; }
.skill .bar.xp { margin-top: 4px; }
.skill .row .dim { font-size: 12px; }

.windup { margin-top: 8px; padding: 8px; border: 1px solid var(--bad); border-radius: 6px; background: #d9534f22; font-size: 14px; }

.card.wild { border-color: var(--bad); background: #d9534f14; }

/* ---- Aesthetic pass (Grok, 2026-11-01) ---- */
:root { --zone: #8fbf5a; --zone-deep: #1f2a17; --warn: #e8a33b; --minion: #a68be0; --ally: #5fa8e0;
  --c-warrior: #d9733b; --c-mage: #5f8fe8; --c-ranger: #5fb36a; --c-necromancer: #a274d9; }
#app[data-zone="vale"] { --zone: #8fbf5a; --zone-deep: #1d2a17; }
#app[data-zone="frost"] { --zone: #8cc8ea; --zone-deep: #16252f; }
#app[data-zone="desert"] { --zone: #e2b25c; --zone-deep: #2e2414; }
#app[data-zone="ember"] { --zone: #e9684a; --zone-deep: #301713; }
#app[data-zone="sky"] { --zone: #c6b3f2; --zone-deep: #221d33; }
#app[data-zone="ashen"] { --zone: #d39565; --zone-deep: #302019; }
#app[data-zone="black"] { --zone: #d2788c; --zone-deep: #2b1720; }
.map.zone-ashen { --mz: #493124; } .map.zone-black { --mz: #39202a; }
body { font-feature-settings: "tnum"; }
header.top { border-bottom: 2px solid var(--zone); background: linear-gradient(180deg, var(--zone-deep), var(--panel) 85%); }
.zone-line { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dim); margin-top: 5px; }
.zone-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--zone); flex: none; }
.risk { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 9px; border: 1px solid; }
.risk-partial { color: #ffd08a; border-color: var(--warn); background: #e8a33b22; }
.risk-full { color: #ffc1bd; border-color: var(--bad); background: #d9534f33; }
.place { color: var(--text); border-left: 4px solid var(--zone); padding-left: 8px; }
.card { border-radius: 10px; }
h2 { color: #b5bbc7; }
button:focus-visible, summary:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.small { min-height: 36px; }
.tabs2 { padding-bottom: 2px; }
.tabs2 button { min-height: 40px; border-radius: 20px; padding: 6px 12px; }
.tabs2 button.on { font-weight: 600; box-shadow: 0 0 0 1px var(--accent) inset; }
.tag.dur { font-variant-numeric: tabular-nums; }
.tag.warn { color: #ffd08a; background: #e8a33b26; }
.tag.bad { background: #d9534f2b; }
.tag.good { background: #58b36824; }

/* Class picker: a balanced 2x2 with each class's own color */
.class-card { align-items: stretch; text-align: left; padding: 10px; border-top: 3px solid var(--cc, var(--line)); gap: 8px; }
.class-card .class-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.class-card .class-head b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.class-card .class-icon { font-size: 26px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--cc) 22%, transparent); flex: none; }
.class-card.on { border-color: var(--cc); border-top-width: 3px; background: linear-gradient(color-mix(in srgb, var(--cc) 20%, var(--panel)), var(--panel)); }
.class-card .in-use { text-align: center; padding: 8px; font-size: 13px; }
.class-card button { min-height: 40px; }
.cls-warrior { --cc: var(--c-warrior); } .cls-mage { --cc: var(--c-mage); } .cls-ranger { --cc: var(--c-ranger); } .cls-necromancer { --cc: var(--c-necromancer); }
.chip[class*="cls-"] { border-color: var(--cc); }

/* Fight */
.fight-card { border-color: #4a3434; }
.foe-icon { font-size: 22px; vertical-align: -3px; }
.hp-num { font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; }
.bar.enemy > i { background: linear-gradient(90deg, #b8423e, #e0625c); }
.bar.ally > i { background: var(--ally); }
.bar.minion > i { background: repeating-linear-gradient(135deg, var(--minion) 0 8px, #8a70c4 8px 16px); }
.bar.low { box-shadow: 0 0 0 1px var(--bad); }
.minion-row { margin-top: 6px; color: #d6c8f5; }
.ally { margin-top: 6px; }
.side-line { height: 1px; background: var(--line); margin: 10px 0 4px; }
.clock-label { font-size: 12px; color: var(--dim); margin-top: 6px; }
.windup { margin-top: 8px; padding: 8px 10px; border: 2px solid var(--bad); border-radius: 8px; background: repeating-linear-gradient(135deg, #d9534f26 0 10px, #d9534f14 10px 20px); }
.windup .count { font-size: 18px; color: #ffc1bd; font-variant-numeric: tabular-nums; }
.windup .clock > i { background: var(--bad); }
.fx-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 8px; }
.fx-who { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); min-width: 54px; }
.fx { font-size: 12px; padding: 3px 8px; border-radius: 12px; border: 1px solid; white-space: nowrap; }
.fx small { color: var(--dim); font-size: 11px; }
.fx.harm-them { border-color: #58b36880; background: #58b3681a; }
.fx.harm-me { border-color: var(--bad); background: #d9534f26; color: #ffd2cf; }
.fx.buff { border-color: #4f9bd980; background: #4f9bd91f; }
.feed { min-height: 72px; }
.dock { position: sticky; bottom: 0; margin: 8px -12px 0; padding: 8px 12px 10px; background: linear-gradient(#171a20f2, #15171c); border-top: 1px solid var(--line); box-shadow: 0 -6px 16px #0008; z-index: 5; backdrop-filter: blur(4px); }
.dock-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; }
.dock-head small { color: var(--dim); font-weight: 400; }
.dock .queue { margin: 6px 0; }
.dock .queue button { min-height: 44px; }
.dock-main { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 6px; margin-top: 6px; }
.dock-main button { min-height: 48px; }
.dock-main .no-flee { display: grid; place-items: center; white-space: normal; text-align: center; border-radius: 6px; }
.ab-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.ab-btn { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 2px; min-height: 56px; min-width: 0; }
.ab-btn .ab-i { font-size: 18px; line-height: 1; }
.ab-btn .ab-n { font-size: 11px; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-btn small { font-size: 10px; color: var(--dim); }
.ab-btn.cooling { opacity: .6; }
.ab-btn.stops { border-color: #e8a33b88; }
.ab-btn.hot { border: 2px solid var(--warn); background: #e8a33b2e; animation: pulse 1s ease-in-out infinite; }
.ab-btn.hot small { color: #ffd08a; font-weight: 700; }
@keyframes pulse { 50% { box-shadow: 0 0 0 3px #e8a33b55; } }
@media (prefers-reduced-motion: reduce) { .ab-btn.hot { animation: none; } }
.food-row { display: flex; gap: 5px; align-items: center; overflow-x: auto; margin-top: 6px; scrollbar-width: none; }
.food-row button { flex: none; }
.food-row small { color: var(--dim); }

/* World map and risk */
.map { background: radial-gradient(circle at 30% 20%, var(--mz, #2a3a22) 0, var(--panel) 75%); }
.map.zone-vale { --mz: #2a3d22; } .map.zone-frost { --mz: #1f3442; } .map.zone-desert { --mz: #42341a; } .map.zone-ember { --mz: #45201a; } .map.zone-sky { --mz: #2f2848; }
.map-road { stroke: #6b7280; stroke-linecap: round; }
.map-node.here { stroke: var(--zone); stroke-width: 3.5; }
.map-label { fill: #e1e5ec; font-size: 11px; font-weight: 500; stroke: none; text-shadow: 0 1px 2px #000; }
.map-wild { fill: none; stroke-width: 2.5; }
.map-wild.partial { stroke: var(--warn); stroke-dasharray: 4 3; }
.map-wild.full { stroke: var(--bad); stroke-width: 3.5; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--dim); margin: -2px 2px 8px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.lg { display: inline-block; width: 18px; height: 0; border-top: 3px solid #6b7280; }
.lg.short { border-top: 2px dashed var(--accent); } .lg.short.locked { border-top-color: var(--line); }
.lg.ghost { width: 10px; height: 10px; border: 2px dashed var(--line); border-radius: 50%; }
.lg.wildp { width: 12px; height: 12px; border: 2px dashed var(--warn); border-radius: 50%; }
.lg.wildf { width: 12px; height: 12px; border: 3px solid var(--bad); border-radius: 50%; }
.card .go { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.card.wild.partial { border-color: var(--warn); background: #e8a33b12; }
.card.wild.full { border-color: var(--bad); border-width: 2px; background: #d9534f17; }
.risk-box { margin-top: 10px; border-radius: 8px; padding: 8px 10px; }
.risk-box.partial { background: #e8a33b1c; border: 1px solid var(--warn); }
.risk-box.full { background: repeating-linear-gradient(135deg, #d9534f2e 0 10px, #d9534f1c 10px 20px); border: 2px solid var(--bad); }
.risk-title { font-weight: 800; font-size: 15px; }
.risk-box ul { margin: 6px 0 0; padding-left: 0; list-style: none; font-size: 13px; display: grid; gap: 4px; }

/* Test tools sit apart and fold away */
.test-tools { margin-top: 18px; border: 1px dashed #5a5f6b; border-radius: 10px; padding: 0 10px; background: #ffffff05; }
.test-tools summary { font-size: 13px; min-height: 44px; display: flex; align-items: center; }
.test-tools .card { background: transparent; border: 0; padding: 0 0 10px; }
.tiers { border: 1px dashed #5a5f6b; border-radius: 8px; padding: 4px 6px; flex-wrap: wrap; }
summary { min-height: 40px; display: flex; align-items: center; }

/* Aesthetic pass 2 */
.risk-ack { background: var(--warn); color: #1a1205; font-weight: 700; border-color: transparent; }
.go button[disabled] { opacity: .55; }
#scroll { scroll-padding-bottom: calc(var(--dock-h, 0px) + 12px); }
.clock-label.row { display: flex; align-items: baseline; }
@media (max-width: 400px) {
  .tabs2 button { padding: 6px 10px; font-size: 13px; }
}
@media (max-height: 700px), (max-width: 370px) {
  .dock { padding: 6px 10px 8px; }
  .dock-head small { display: none; }
  .ab-grid { gap: 4px; }
  .ab-btn { flex-direction: row; justify-content: center; gap: 4px; min-height: 44px; padding: 2px 4px; flex-wrap: wrap; }
  .ab-btn .ab-i { font-size: 15px; }
  .ab-btn small { width: 100%; text-align: center; line-height: 1; }
  .ab-btn small.ready { display: none; }
  .dock .queue { margin: 4px 0; }
  .food-row { margin-top: 4px; }
  .dock-main button { min-height: 44px; }
}
main:has(> .dock), main:has(.dock) { padding-bottom: 0; }

/* Aesthetic pass 3: a destructive button waiting for its second tap */
button.armed { background: var(--bad, #b33a3a); color: #fff; font-weight: 700; outline: 2px solid #fff3; }
/* Area icons: shape tells the area apart, the zone adds a light tint (all pass 4.5:1 on the dark panels). */
img { max-width: 100%; height: auto; }
img.ai { width: 1.25em; height: 1.25em; max-width: 24px; max-height: 24px; vertical-align: -0.25em; flex: none; object-fit: contain; }
.place .ai { width: 24px; height: 24px; max-width: 24px; max-height: 24px; vertical-align: -5px; }
.map image.ai { pointer-events: none; }
.credits-link { justify-content: center; margin-top: 8px; }
.credits p { margin: 8px 0; }
.credits .license { font-size: 12px; line-height: 1.45; color: var(--dim); margin: 0 0 10px; }
.credits .license p { margin: 0 0 8px; }

/* D-191: tappable names in chat */
.chat-name { background: none; border: 0; padding: 0; margin: 0; width: auto; min-height: 0; font: inherit; font-weight: 700; color: var(--accent); text-decoration: underline dotted; cursor: pointer; }
.chat-rules { margin: 4px 0 6px; font-size: 0.85em; }