/* css/shell.css: The game screen frame: status strip, map box, dock, sheet layer (the first generation of them).
   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. */
/* ---- game screen ---- */
.game { padding: 0; position: relative; }

.stat.gold { color: var(--gold); }
.gamemap { margin: 0; border-top: 0; }

.layer { position: absolute; inset: 0; pointer-events: none; }
.layer > * { pointer-events: auto; }

.btn.row { justify-content: space-between; min-height: 48px; font-size: calc(17px * var(--ts, 1)); }
.btn.row.on { border-color: var(--gold); }
.btn.row em { font-style: normal; color: var(--gold); font-size: calc(15px * var(--ts, 1)); }
.hint { font-size: calc(15.5px * var(--ts, 1)); color: var(--dim); }
.chit2 { border: 1px solid var(--line); border-radius: 12px; background: var(--panel2); text-align: center; padding: 6px 0; display: flex; flex-direction: column; line-height: 1.1; }
.chit2 b { font-family: var(--font-display); font-size: calc(19px * var(--ts, 1)); }
.chit2 small { font-size: calc(11px * var(--ts, 1)); color: var(--dim); text-transform: uppercase; letter-spacing: .08em; }
.chit2.move { border-color: #4d6a8f; } .chit2.fight { border-color: #8f4d4d; } .chit2.magic { border-color: #7a5fb0; }
.chit2.fatigued { opacity: .45; } .chit2.wounded { opacity: .35; text-decoration: line-through; }
.journal { display: flex; flex-direction: column; gap: 2px; }
.journal p { margin: 2px 0; font-size: calc(16px * var(--ts, 1)); }
.journal small { color: var(--dim); }
.j-combat { color: #f0c0a0; } .j-block { color: #ff9c8a; } .j-discover { color: #a9e0c8; } .j-trade { color: var(--gold); } .j-monster { color: #e8a0a0; }
.scorerow { display: flex; justify-content: space-between; }

.realm-svg .chit rect { fill: #26283a; stroke: #7e7690; stroke-width: 1.2; }
.realm-svg .chit text { font-size: calc(13px * var(--ts, 1)); fill: #d9d2c0; font-weight: 700; }
.realm-svg .tok circle { stroke: #0c0e14; stroke-width: 1.2; }
.realm-svg .tok text { font-size: calc(9px * var(--ts, 1)); font-weight: 700; fill: #fff; }
.realm-svg .tok.mon circle { fill: #b44; } .realm-svg .tok.nat circle { fill: #4a78c0; } .realm-svg .tok.dwelling circle { fill: #a08040; }
.realm-svg .tok.site circle { fill: #7a5fb0; } .realm-svg .tok.sound circle { fill: #8f6a3a; }
.realm-svg .hero { fill: var(--gold); stroke: #0d1a0f; stroke-width: 1.5; }
.realm-svg .planring { fill: none; stroke: var(--gold); stroke-width: 2; stroke-dasharray: 3 3; }
.realm-svg .clr.sel circle:nth-of-type(2) { stroke: var(--gold); stroke-width: 3.5; }