/* War Room UI · the game client in the carved wood and stone skin of the home page (ui/kit/style.css
   and retro.css are copies of design v7 with asset paths rewritten). This file only adds what a
   full client needs: screens, the realm layout, panels, the keep, the muster, the report scroll,
   the ledger, codex and settings, the crown ceremony, the commander's tips and accessibility. */

body.wr { min-height: 100vh; }
[hidden] { display: none !important; }
.screen { min-height: calc(100vh - 76px); }
.brand-btn { background: none; border: 0; padding: 2px; cursor: var(--cur-hand), pointer; }
kbd { font: 700 13px var(--serif); padding: 1px 6px; border: 1px solid rgba(27, 19, 13, .6); border-radius: 2px; background: rgba(255, 246, 216, .5); margin-left: 8px; }
.topbar.bare .res, .topbar.bare #top-ledger { display: none; }
.topbar.bare .topbar-row { justify-content: space-between; }
.res-item .of { font-size: 14px; color: var(--text-soft); margin-left: 4px; font-weight: 400; }
.res-ico-renown { background: url(../../assets/icons/renown.svg) 50% 50% / 20px no-repeat, #2a1a0e; }
.res-renown b { color: var(--gold-hi); }
.res .res-wide { display: flex; }
@media (max-width: 600px) { .res { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; } .res-item { justify-content: center; } }
.top-actions .btn-iron { white-space: nowrap; }
@media (max-width: 1960px) { .res-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .res-item { padding-right: 8px; } }
@media (max-width: 1280px) { .top-actions .btn-iron span:not(.snd-label) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .top-actions .btn-iron { padding: 6px 10px; } }
.toast { position: fixed; left: 50%; bottom: 22px; z-index: 120; transform: translate(-50%, 140%); max-width: min(560px, calc(100vw - 32px)); padding: 10px 16px; background: var(--tex-fibre) 0 0 / 256px, var(--parch); color: var(--parch-ink); border: 2px solid var(--ink); box-shadow: 0 0 0 3px #b8862c, 0 0 0 4px var(--ink), 0 10px 20px rgba(0, 0, 0, .5); font: 700 16px/1.4 var(--serif); text-align: center; visibility: hidden; transition: transform .2s steps(3); }
.toast.on { transform: translate(-50%, 0); visibility: visible; }
body.rm .toast { transition: none; }

/* ---------- 1 the gate ---------- */
.gate { padding-top: 30px; }
.gate .ts-menu .btn-stone { width: 100%; }
.gate .btn-stone[disabled] { opacity: .55; cursor: var(--cur-sword), not-allowed; animation: none; }
.gate-save { margin: 4px 0 4px; font: italic 14px/1.35 var(--serif); color: var(--text-soft); }
.hall { max-width: 1240px; margin: 22px auto 0; }
/* QA A: on large screens the gate painting steps up to the next whole pixel scale (3x, 1440 x 804) inside a
   wider frame, instead of a small 2x painting in a wall of stone; the hall below follows its width */
@media (min-width: 2000px) and (min-height: 1100px) {
  .gate .ts-frame { max-width: 1780px; }
  .gate .slot-hero { aspect-ratio: auto; height: 804px; min-height: 804px; max-height: none; }
  .gate .ts-menu { width: 440px; }
  .gate .ts-lede { font-size: 18px; }
  .gate .hall { max-width: 1780px; }
}

.hall-box { padding: 14px 18px; background: var(--tex-grain) 0 0 / 400px 200px, #1a1008; border: 1px solid #0a0603; box-shadow: var(--bevel-in); }
.hall-list { display: grid; gap: 8px; }
.hall-list li { display: flex; gap: 10px; align-items: center; font-size: 16px; }
.hall-list .crest { width: 28px; height: 30px; flex: none; }

/* ---------- 2 choose house ---------- */
.pickhouse { padding: 40px 0 60px; background: linear-gradient(rgba(12, 8, 4, .5), rgba(12, 8, 4, .5)), var(--tex-stone) 0 0 / 480px 288px, #3a352f; }
.hcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 30px; }
.hcard { display: flex; flex-direction: column; text-align: left; padding: 0; color: #fff6e0; border: 3px solid var(--ink); border-radius: 2px; box-shadow: var(--bevel-out), 0 4px 0 #0a0603, 0 14px 26px rgba(0, 0, 0, .45); overflow: hidden; }
.hcard-forge { background: var(--tex-leather) 0 0 / 200px, #7a2414; }
.hcard-ghost { background: var(--tex-leather) 0 0 / 200px, #2f4035; }
.hcard-tide { background: var(--tex-leather) 0 0 / 200px, #0d4f57; }
.hcard[aria-checked="true"] { outline: 4px solid var(--gold-hi); outline-offset: 3px; }
.hcard:focus-visible { outline: 4px solid #fff1b8; outline-offset: 3px; }
.hc-portrait { display: flex; justify-content: center; align-items: flex-end; height: 260px; background: #1b130d; border-bottom: 3px solid var(--ink); box-shadow: inset 0 -3px 0 #b8862c; overflow: hidden; }
.hc-portrait img { width: 188px; height: 250px; }
.hc-body { display: grid; gap: 8px; padding: 14px 16px 18px; }
.hc-head { display: flex; gap: 12px; align-items: center; }
.hc-head .crest { width: 52px; height: 54px; flex: none; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5)); }
.hc-name { display: block; font: 700 24px/1.1 var(--serif); font-variant: small-caps; letter-spacing: .04em; text-shadow: 0 2px 0 #000; }
.hc-cmd { display: block; font: italic 15px/1.3 var(--serif); color: #f1e2c2; }
.hc-line { font: italic 16px/1.45 var(--serif); color: #f1e2c2; }
.hc-fact { font-size: 15px; line-height: 1.45; }
.hc-fact b { color: var(--gold-hi); }
.hc-pick { justify-self: start; margin-top: 4px; padding: 3px 10px; font: 700 14px var(--serif); font-variant: small-caps; letter-spacing: .1em; color: var(--ink); background: var(--gold-hi); border: 2px solid var(--ink); visibility: hidden; }
.hcard[aria-checked="true"] .hc-pick { visibility: visible; }
.diff { margin: 30px 0 0; padding: 16px 18px 18px; border: 0; background: var(--tex-fibre) 0 0 / 256px, var(--parch); color: var(--parch-ink); box-shadow: inset 0 0 0 1px rgba(143, 116, 68, .6), 0 3px 0 #6b5634; }
.diff legend { float: left; width: 100%; font: 700 20px var(--serif); margin-bottom: 10px; padding: 0; }
.diff-row { clear: both; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dopt { position: relative; display: block; cursor: var(--cur-hand), pointer; }
.dopt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: inherit; }
.dbox { display: grid; gap: 4px; height: 100%; padding: 10px 12px; background: var(--vellum); border: 2px solid var(--ink); box-shadow: inset 2px 2px 0 #fffaf0, inset -2px -2px 0 #c9b07a; }
.dbox b { font: 700 19px var(--serif); font-variant: small-caps; letter-spacing: .06em; }
.dbox span { font-size: 15px; line-height: 1.4; color: var(--parch-soft); }
.dopt input:checked + .dbox { background: #f6e3a4; box-shadow: inset 2px 2px 0 #fff3c4, inset -2px -2px 0 #b8862c, 0 0 0 3px #b8862c, 0 0 0 4px var(--ink); }
.dopt input:focus-visible + .dbox { outline: 3px solid var(--gold-d); outline-offset: 3px; }
.begin-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; margin-top: 22px; }
.begin-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.check { display: inline-flex; gap: 10px; align-items: center; font-size: 16px; cursor: var(--cur-hand), pointer; }
.check input { width: 22px; height: 22px; accent-color: #b8862c; flex: none; }

/* ---------- 3 the realm ---------- */
#scr-realm.stage { padding-top: 22px; }
/* QA A: the game column is no longer capped at 1640 px. map.js sets --map-w to the fitted map plus its
   frame, the grid centres the map and the command book together, and the stone hall fills the rest of
   the page at any width, so there is no empty band inside the frame and nothing looks cut off. */
.stage-inner { max-width: none; }
.stage-grid { grid-template-columns: minmax(0, var(--map-w, 1fr)) 410px; justify-content: center; }
.map-sizer { margin: 0 auto; }
.map-frame { margin-left: auto; margin-right: auto; width: 100%; }
.map-scroll { background: #0d0804; }
.map-head { flex-wrap: wrap; }
.map-head .cartouche { flex: 1 1 260px; min-width: 0; }
.map-tools { margin-left: auto; }
.map-tools { display: flex; align-items: center; gap: 10px; flex: none; }
.zoom { display: flex; gap: 4px; }
.zb { min-height: 40px; min-width: 42px; justify-content: center; padding: 6px 8px; }
.map-scroll { height: min(640px, calc(100vh - 250px)); min-height: 360px; touch-action: pan-x pan-y; overscroll-behavior: contain; }
.map-sizer { position: relative; width: 1200px; height: 760px; }
.realm-wrap { transform-origin: 0 0; }
/* below 2x the painted pixels are scaled down smoothly, so no pixel row is dropped */
.realm-wrap.soft .map-paint, .realm-wrap.soft canvas, .realm-wrap.soft .realm image { image-rendering: auto; }
.realm .node { cursor: var(--cur-hand), pointer; outline: none; }
.realm .node:focus-visible .plq-base { filter: brightness(1.25) drop-shadow(0 0 0 #fff); }
.realm .node.fogged .plq-base { filter: grayscale(.6) brightness(.72); }
.realm .node.memory .plq-base { filter: grayscale(.4) brightness(.86); }
.realm .node.target .plq-alt, .realm .node.picked .plq-alt { display: inline; }
.realm .node-ring-px.focus { display: inline; }
.realm .tok { cursor: var(--cur-hand), pointer; }
.realm .tok-orders .tok-spr { opacity: .55; }
.realm .tok image, .realm .walker image, .realm .node-flag image { image-rendering: pixelated; }
.realm .burst .spark { animation: sparkPx .6s steps(4) both; transform-box: fill-box; transform-origin: center; }
@keyframes sparkPx { 0% { opacity: 0; transform: scale(.4); } 40% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0; transform: scale(1.6); } }
body.rm .realm .burst .spark { animation: none; opacity: 0; }
.realm .tod { transition: opacity 1s steps(4); }
body.hc .map-paint { filter: saturate(.45) brightness(.72) contrast(1.05); }
body.hc .map-terr { filter: saturate(1.6) contrast(1.5); }
body.hc .map-fog { filter: brightness(.6); }
body.hc .realm .plq { filter: contrast(1.25); }

/* the five moves as buttons */
.moves5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.moves5 button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 2px 6px; background: none; border: 2px solid transparent; border-radius: 2px; font: 700 15px var(--serif); font-variant: small-caps; letter-spacing: .05em; color: #f1dfb8; cursor: var(--cur-hand), pointer; }
.moves5 button .ph-ico { filter: none; background: var(--parch-2); border-color: #a8781f; transition: none; }
.moves5 button:hover:not([disabled]) .ph-ico, .moves5 button.now .ph-ico { background: var(--parch); border-color: #c9962f; box-shadow: inset 2px 2px 0 #fff3c4, inset -2px -2px 0 #b99a60, 0 0 0 2px var(--ink), 0 0 0 5px rgba(236, 201, 106, .35); }
.moves5 button:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 0; }
.moves5 button[disabled] { opacity: .45; cursor: var(--cur-sword), not-allowed; }
.orders-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: var(--tex-grain) 0 0 / 400px 200px, #1a1008; border: 1px solid #0a0603; box-shadow: var(--bevel-in); }
.ol-label { font: 700 15px var(--serif); font-variant: small-caps; letter-spacing: .12em; color: var(--gold-text); }
.pips { display: flex; gap: 6px; }
.pips i { width: 18px; height: 18px; background: #2a1a0e; border: 2px solid #5a3b0d; transform: rotate(45deg); box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .6); }
.pips i.on { background: #d9a53b; border-color: #1b130d; box-shadow: inset 2px 2px 0 #f2d488, inset -2px -2px 0 #8a6420; }
.ol-n { margin-left: auto; font: 700 20px var(--serif); color: #fff4d6; }
.end-row { display: flex; }
.btn-end { width: 100%; min-height: 56px; font-size: 20px; }
.btn-end kbd { background: rgba(255, 246, 216, .35); }
.cmd { min-height: 260px; }
.cmd-step { font-size: 15px; }
.dawn-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; padding: 8px 10px; background: rgba(255, 248, 220, .45); border: 1px solid rgba(43, 29, 16, .3); font-size: 15px; }
.dawn-line .cost { margin: 0; }
.dl-l, .dl-u { color: var(--parch-soft); font-style: italic; }
.todo { display: grid; gap: 6px; margin-top: 12px; }
.todo-b { width: 100%; text-align: left; padding: 8px 12px 8px 30px; position: relative; background: var(--vellum); border: 2px solid var(--ink); color: var(--parch-ink); font: 700 16px/1.35 var(--serif); box-shadow: inset 2px 2px 0 #fffaf0, inset -2px -2px 0 #c9b07a; cursor: var(--cur-hand), pointer; }
.todo-b::before { content: ""; position: absolute; left: 10px; top: 50%; width: 9px; height: 9px; margin-top: -5px; border: 2px solid var(--rubric); transform: rotate(45deg); }
.todo-b:hover { background: #fbf2d8; }
.todo-done { font: italic 16px var(--serif); color: var(--parch-soft); }
.quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.quick .btn-plain { flex: 1 1 auto; min-height: 44px; font-size: 16px; padding: 6px 12px; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin-top: 10px; font-size: 16px; }
.facts dt { font-weight: 700; color: var(--parch-soft); }
.sub-h { margin-top: 14px; font: 700 16px var(--serif); font-variant: small-caps; letter-spacing: .1em; color: var(--rubric); }
.sub-h .panel-sub { color: var(--parch-soft); font-size: 14px; }
.seen-list { display: grid; gap: 4px; margin-top: 6px; }
.seen-list li { display: flex; gap: 10px; align-items: center; font-size: 15px; }
.seen-list svg { flex: none; width: auto; height: 44px; }
.seen-list .none { font-style: italic; color: var(--parch-soft); }
.armies { min-height: 120px; }
.armies li { padding: 0; width: auto; }
.army-card { display: flex; flex-direction: column; align-items: center; width: 132px; min-height: 100%; padding: 0 4px 8px; background: none; border: 0; color: var(--parch-ink); text-align: center; cursor: var(--cur-hand), pointer; position: relative; }
.army-card:focus-visible { outline: 3px solid var(--gold-d); outline-offset: -3px; }
.army-card .art { height: 70px; display: flex; align-items: end; justify-content: center; }
.army-card .nm { font: 700 15px/1.2 var(--serif); margin-top: 4px; }
.army-card .ct { font: italic 14px/1.3 var(--serif); color: var(--parch-soft); }
.army-card .ct-m { color: var(--rubric); }
.cmd-badge { position: absolute; top: 4px; right: 4px; padding: 0 5px; font: 700 12px var(--serif); background: var(--gold-hi); border: 1px solid var(--ink); }
.empty-army { width: auto !important; padding: 10px 12px !important; font: italic 15px var(--serif); color: var(--text-soft); background: none !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; }
.empty-army::before { display: none !important; }
.queue .q-art .bld-spr { --k: 1 !important; }
.queue .q-name { display: block; }
.q-when { display: block; font: italic 14px var(--serif); color: var(--gold-text); }
.hud-bottom { grid-template-columns: 340px minmax(0, 1fr) 270px; }
.panel-mini .minimap { min-height: 150px; border-width: 8px; border-image-width: 8px; }

/* muster */
.mu-mode, .mu-places { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mu-mode .chip, .mu-places .chip { min-height: 40px; padding: 6px 12px; font-size: 15px; }
.chip[aria-pressed="true"] { background: #d9a53b; color: #1b130d; box-shadow: inset 2px 2px 0 #f2cc63, inset -2px -2px 0 #8a6420; }
.chip small { font-size: 13px; opacity: .8; }
.sq-list { display: grid; gap: 4px; margin-top: 6px; }
.sq, .sq-away { display: grid; grid-template-columns: 26px 56px 1fr; gap: 8px; align-items: center; padding: 4px 6px; background: var(--vellum); border: 1px solid rgba(43, 29, 16, .4); cursor: var(--cur-hand), pointer; }
.sq-away { grid-template-columns: 56px 1fr; opacity: .75; cursor: default; }
.sq input { width: 22px; height: 22px; accent-color: #b8862c; }
.sq-art { display: flex; justify-content: center; align-items: flex-end; height: 50px; overflow: hidden; }
.sq-art svg { height: auto; max-height: 50px; width: auto; }
.sq-t b { display: block; font: 700 16px/1.2 var(--serif); }
.sq-t span { font-size: 14px; color: var(--parch-soft); }
.mu-merge { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bsm { min-height: 40px; font-size: 15px; padding: 4px 12px; }
.mu-cmd { margin-top: 10px; font-size: 15px; line-height: 1.4; align-items: flex-start; }
.mu-targets .o-art svg { max-height: 56px; }
.mark-fog { display: grid; place-items: center; width: 48px; height: 48px; font: 700 26px var(--serif); color: #efe0bc; background: #22263a; border: 2px solid var(--ink); }
.opt-slim { grid-template-columns: 1fr; padding: 6px 10px; }
.mu-sum { margin-top: 10px; font-size: 15px; }
.mu-sum summary { font-weight: 700; cursor: var(--cur-hand), pointer; color: var(--rubric); }
.mu-sumcols li { opacity: 1; animation: none; }

/* ---------- panels: keep, ledger, codex, settings ---------- */
.dlg-back { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(12, 8, 4, .72); }
.dlg-box { position: relative; display: flex; flex-direction: column; width: min(1120px, 100%); max-height: calc(100vh - 32px); border: 28px solid transparent; border-image: url(../../assets/frame/wood.svg) 32 stretch; background: var(--tex-fibre) 0 0 / 256px, var(--parch); background-clip: padding-box; color: var(--parch-ink); box-shadow: 0 18px 40px rgba(0, 0, 0, .65); }
.dlg-small { width: min(560px, 100%); }
.dlg-settings { width: min(760px, 100%); }
.dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px 10px; border-bottom: 2px solid rgba(43, 29, 16, .45); }
.dlg-head h2 { font: 700 28px/1.15 var(--serif); outline: none; }
.dlg-head h2::first-letter { color: var(--rubric); }
.dlg-body { overflow: auto; padding: 16px 20px 22px; overscroll-behavior: contain; }
.dlg-lede { font-size: 17px; line-height: 1.55; color: #3b2a19; }
body.dlg-on, body.rep-on { overflow: hidden; }
.dlg-body .actions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; }
.keep-top { display: grid; grid-template-columns: 320px 1fr; gap: 18px; align-items: center; }
.keep-scene { border: 2px solid var(--ink); box-shadow: 0 0 0 3px #b8862c, 0 0 0 4px var(--ink); background: #1b130d; line-height: 0; }
.keep-scene img { width: 100%; height: auto; }
.keep-left { font-size: 17px; margin-top: 4px; }
.keep-left b { font-size: 22px; color: var(--rubric); }
.keep-stores { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.keep-stores li { display: grid; grid-template-columns: 24px auto; column-gap: 6px; align-items: center; padding: 4px 10px 4px 6px; background: rgba(43, 29, 16, .08); border: 1px solid rgba(43, 29, 16, .3); }
.keep-stores b { font-size: 18px; }
.keep-stores span { grid-column: 2; font-size: 13px; color: var(--parch-soft); }
.keep-stores .ico { grid-row: 1 / 3; }
.keep-tabs { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 16px 0 4px; padding: 6px 0; border-top: 2px solid rgba(43, 29, 16, .45); border-bottom: 1px solid rgba(43, 29, 16, .3); }
.keep-tabs a { font: 700 16px var(--serif); font-variant: small-caps; letter-spacing: .08em; color: var(--rubric); }
.ksec { margin-top: 18px; scroll-margin-top: 10px; }
.ksec-h { font: 700 22px var(--serif); outline: none; }
.ksec-h::first-letter { color: var(--rubric); }
.ksec-h .panel-sub { color: var(--parch-soft); }
.bgrid, .ygrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin-top: 10px; }
.bcard2, .ycard { display: grid; grid-template-columns: 70px 1fr; gap: 10px; padding: 10px; background: var(--vellum); border: 2px solid var(--ink); box-shadow: inset 2px 2px 0 #fffaf0, inset -2px -2px 0 #c9b07a; }
.bcard2.built { background: #efe3c0; }
.bcard2.building { box-shadow: inset 0 0 0 3px #b8862c; }
.bcard2 .b-art, .ycard .y-art { display: flex; align-items: flex-end; justify-content: center; align-self: start; min-height: 60px; overflow: hidden; }
.u-militia svg { filter: grayscale(1) brightness(.9); }
.u-crown svg { filter: sepia(1) saturate(2.2) hue-rotate(-10deg); }
.bcard2 b, .ycard b { display: block; font: 700 17px/1.2 var(--serif); }
.bcard2 p, .ycard p { font-size: 14px; line-height: 1.4; margin-top: 4px; color: var(--parch-soft); }
.b-state { display: inline-block; margin-top: 6px; padding: 1px 8px; font: 700 13px var(--serif); background: #d9c49a; border: 1px solid rgba(43, 29, 16, .5); }
.bbtn { min-height: 40px; margin-top: 8px; padding: 4px 18px; font-size: 16px; }
.bbtn[aria-disabled="true"] { opacity: .55; }
.y-cls { display: block; font: italic 14px var(--serif); color: var(--parch-soft); }
.ycard .y-art svg { max-height: 64px; width: auto; height: auto; }
.trade { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px; padding: 12px; background: rgba(255, 248, 220, .45); border: 1px solid rgba(43, 29, 16, .35); }
.trade label { display: flex; gap: 8px; align-items: center; font-weight: 700; }
.trade select { min-height: 40px; padding: 4px 8px; font: 700 16px var(--serif); background: var(--vellum); border: 2px solid var(--ink); color: var(--parch-ink); }
.tr-sum { flex: 1 1 200px; font-size: 15px; }
.o-why { display: block; font: italic 700 14px var(--serif); color: var(--rubric); margin-top: 4px; }
.o-why:empty { display: none; }

/* ledger */
.ledger-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; margin-top: 14px; align-items: start; }
.ledger-chart { margin: 0; }
.ledger-chart > div, .cr-chart { display: flex; justify-content: center; background: #1b130d; border: 2px solid var(--ink); box-shadow: 0 0 0 3px #b8862c, 0 0 0 4px var(--ink); padding: 6px; }
.ledger-cv { image-rendering: pixelated; display: block; max-width: 100%; }
.ledger-chart figcaption, .cr-key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 14px; }
.lg-key::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; border: 2px solid var(--ink); }
.lk-forge::before { background: #b23a1e; }
.lk-ghost::before { background: #5fa060; transform: rotate(45deg); }
.lk-tide::before { background: #a8e0d4; border-radius: 50%; box-shadow: inset 0 0 0 2px #1f9aa6; }
.lk-crown::before { background: rgba(232, 187, 82, .5); }
.ledger-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ledger-table th, .ledger-table td { padding: 6px 8px; border-bottom: 1px solid rgba(43, 29, 16, .3); text-align: left; }
.ledger-table thead th { font-variant: small-caps; letter-spacing: .08em; color: var(--rubric); }
.ledger-table tr.me { background: rgba(232, 187, 82, .25); }
.lt-h { display: inline-flex; align-items: center; gap: 6px; }
.lt-h .crest { width: 22px; height: 24px; }
.lg-days { margin-top: 16px; }
.lg-days summary { font-weight: 700; color: var(--rubric); cursor: var(--cur-hand), pointer; }
.lg-days .ledger-table { font-size: 14px; }

/* the scrubber */
.rep-scrub { margin-top: 18px; }
.scrubber { display: grid; gap: 6px; }
.scr-label { font: 700 15px var(--serif); font-variant: small-caps; letter-spacing: .12em; color: var(--rubric); }
.scr-track { position: relative; display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 2px; padding: 4px; background: #2a1a0e; border: 2px solid var(--ink); outline: none; touch-action: none; cursor: var(--cur-hand), pointer; }
.scr-track:focus-visible { box-shadow: 0 0 0 3px var(--gold-hi); }
.scr-tick { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; min-height: 40px; padding: 2px 0; background: #3a2a22; border: 1px solid #0a0603; color: #8a7a62; font: 700 13px var(--serif); cursor: var(--cur-hand), pointer; }
.scr-tick.past { background: #6e4b14; color: #fff4d6; }
.scr-tick.on { background: #d9a53b; color: #1b130d; }
.scr-tick[disabled] { cursor: var(--cur-sword), not-allowed; }
.scr-tick svg { width: 14px; height: 11px; }
.scr-handle { position: absolute; top: -6px; width: 12px; height: 8px; margin-left: -6px; background: #fff1b8; border: 2px solid var(--ink); pointer-events: none; }
.scrub { padding: 10px 14px 12px; background: var(--tex-grain) 0 0 / 400px 200px, #3a2412; border-top: 3px solid #0d0804; color: var(--text); }
.scrub .scr-label { color: var(--gold-text); }
.scr-ctl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.scr-ctl .btn-seal { min-height: 42px; font-size: 16px; padding: 6px 16px; }
body.replaying .end-row, body.replaying .orders-row { display: none; }
body.replaying .map-frame { box-shadow: 0 0 0 3px #b8862c, var(--drop); }

/* ---------- 6 the report scroll ---------- */
.report-back { position: fixed; z-index: 80; padding: 18px; }
.report-back .battle-roll { width: min(760px, 100%); max-height: calc(100vh - 36px); }
.battle-title { outline: none; }
.rep-sec { margin-top: 16px; }
.rep-h { font: 700 18px var(--serif); font-variant: small-caps; letter-spacing: .12em; color: var(--rubric); padding-bottom: 4px; border-bottom: 2px solid rgba(43, 29, 16, .45); }
.rep-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid rgba(43, 29, 16, .2); font-size: 15px; }
.rep-list li > span:first-child { font-weight: 700; }
.rep-list li b { text-align: right; font-weight: 400; }
.rep-list li.bad b { color: var(--rubric); font-weight: 700; }
.rep-list .cost { margin: 0; justify-content: flex-end; }
.rep-none { margin-top: 8px; font: italic 16px var(--serif); color: var(--parch-soft); }
.rep-battle { margin-top: 14px; padding: 10px 12px 12px; background: rgba(255, 248, 220, .4); border: 1px solid rgba(43, 29, 16, .35); }
.rep-battle.rep-mine { border: 2px solid var(--ink); box-shadow: inset 0 0 0 3px rgba(184, 134, 44, .5); }
.rep-battle h4 { font: 700 18px/1.25 var(--serif); }
.rep-battle .battle-scene { margin-top: 8px; }
.rep-battle .battle-sum li { opacity: 1; animation: none; }
.rep-renown { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.rep-renown li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--vellum); border: 1px solid rgba(43, 29, 16, .4); }
.rep-renown li.rr-me { border: 2px solid var(--ink); background: #f6e3a4; }
.rep-renown .crest { width: 26px; height: 28px; flex: none; }
.rep-renown b { margin-left: auto; font-size: 20px; }
.rep-lines summary { font-weight: 700; color: var(--rubric); cursor: var(--cur-hand), pointer; }
.rep-lines ol { margin-top: 8px; display: grid; gap: 4px; font-size: 15px; list-style: decimal; padding-left: 22px; }

/* ---------- codex ---------- */
.codex-tabs { padding-left: 0; }
.codex-tabs button { min-height: 42px; }
.cx-panel { margin-top: 0; padding: 16px; background: var(--vellum); border: 2px solid var(--ink); outline: none; }
.cx-panel:focus-visible { box-shadow: 0 0 0 3px var(--gold-d); }
.cx-rules { columns: 2 340px; column-gap: 28px; }
.cx-rules section { break-inside: avoid; margin-bottom: 16px; }
.cx-rules h3, .cx-house h3, .cx-tri-text h3 { font: 700 20px var(--serif); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.cx-house h3 .crest { width: 30px; height: 32px; }
.cx-rules p, .cx-tri-text p { font-size: 16px; line-height: 1.55; margin-top: 6px; }
.cx-tri { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 22px; align-items: start; }
.cx-tri .triangle { margin: 0; padding: 10px; }
.cx-tri .triangle svg { width: 100%; height: auto; }
.tri-label { font: 700 22px var(--serif); fill: #2b1d10; }
.tri-beats { font: 700 14px var(--serif); fill: #8a2a14; letter-spacing: .12em; }
.cx-tri figcaption { font: italic 15px var(--serif); text-align: center; margin-top: 6px; }
.tri-table { margin-top: 14px; }
.tri-table caption { text-align: left; font-weight: 700; padding-bottom: 6px; }
.cx-house + .cx-house { margin-top: 18px; }
.cx-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.ucard2 { display: grid; grid-template-columns: 84px 1fr; gap: 10px; padding: 8px; background: #fbf4df; border: 1px solid rgba(43, 29, 16, .4); align-items: start; }
.u2-art { display: flex; justify-content: center; align-items: flex-end; height: 100px; overflow: hidden; background: linear-gradient(transparent 80%, rgba(43, 29, 16, .15) 80%); }
.u2-art .spr { flex: none; animation-play-state: running; }
.ucard2 b { display: block; font: 700 17px var(--serif); }
.ucard2 p { font-size: 14px; line-height: 1.45; margin-top: 4px; }
.cx-cmd { display: grid; gap: 14px; }
.cx-c { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 12px; background: #fbf4df; border: 1px solid rgba(43, 29, 16, .4); }
.cx-c img { width: 140px; height: auto; border: 2px solid var(--ink); background: #1b130d; }
.cx-c h3 { font: 700 22px var(--serif); }
.cx-c p { font-size: 15px; line-height: 1.5; margin-top: 5px; }
.cx-c .epithet { font-style: italic; color: var(--parch-soft); margin-top: 0; }
.cx-c .motto { font-style: italic; color: var(--rubric); }
.cx-note { margin-top: 12px; font-size: 15px; font-style: italic; }
.cx-tips { display: grid; gap: 8px; list-style: decimal; padding-left: 24px; font-size: 16px; line-height: 1.5; }
.cx-coin { display: grid; grid-template-columns: 48px 1fr; gap: 6px 14px; align-items: start; font-size: 16px; line-height: 1.55; }
.cx-coin p + p { grid-column: 2; }

/* settings */
.sets { display: grid; gap: 10px; }
.set { padding: 10px 12px; background: var(--vellum); border: 1px solid rgba(43, 29, 16, .4); }
.switch { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0; background: none; border: 0; text-align: left; font: 700 18px var(--serif); color: var(--parch-ink); cursor: var(--cur-hand), pointer; min-height: 40px; }
.sw-knob { position: relative; flex: none; width: 56px; height: 30px; background: #6d6252; border: 2px solid var(--ink); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .35); }
.sw-knob::after { content: "OFF"; position: absolute; top: 2px; left: 2px; width: 26px; height: 22px; display: grid; place-items: center; font: 700 10px var(--serif); background: #efe0bc; border: 2px solid var(--ink); }
.switch[aria-checked="true"] .sw-knob { background: #4f7a2a; }
.switch[aria-checked="true"] .sw-knob::after { content: "ON"; left: 24px; background: #f2cc63; }
.set-h { font-size: 15px; line-height: 1.45; color: var(--parch-soft); margin-top: 4px; padding-left: 68px; }
.set-save { margin-top: 18px; }
.set-save h3 { font: 700 20px var(--serif); }
.set-save p { font-size: 16px; line-height: 1.5; margin-top: 6px; }
.set-msg { font-weight: 700; color: var(--rubric); min-height: 1.4em; }
.warn { color: var(--rubric); font-weight: 700; }
.btn-danger { background-color: #6e1d0f; }

/* ---------- 11 the crown ceremony ---------- */
.crowning { padding-bottom: 60px; background: linear-gradient(rgba(12, 8, 4, .45), rgba(12, 8, 4, .45)), var(--tex-stone) 0 0 / 480px 288px, #3a352f; }
.cr-stage { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 26px; align-items: center; max-width: 1240px; margin: 0 auto; padding: 30px clamp(16px, 3vw, 32px) 10px; }
.cr-scene { position: relative; overflow: hidden; border: 32px solid transparent; border-image: url(../../assets/frame/gilt.svg) 40 round; background: #120b05; aspect-ratio: 480 / 220; }
.cr-bg { position: absolute; left: 50%; top: 50%; width: 200%; height: auto; max-width: none; transform: translate(-50%, -50%); }
@media (max-width: 1200px) { .cr-bg { width: 100%; } }
.cr-keep { position: absolute; left: 50%; bottom: 8%; width: calc(var(--w) * 3px); height: calc(var(--h) * 3px); margin-left: calc(var(--w) * -1.5px); background-size: calc(var(--w) * 6px) calc(var(--h) * 3px); background-repeat: no-repeat; image-rendering: pixelated; }
.cr-banner { position: absolute; left: 50%; top: 2%; width: 92px; margin-left: 30px; filter: drop-shadow(3px 6px 0 rgba(0, 0, 0, .5)); animation: crDrop 1s steps(6) both; }
.cr-banner svg { width: 92px; height: auto; }
@keyframes crDrop { from { transform: translateY(-120%); } }
body.rm .cr-banner { animation: none; }
.cr-title .sec-title { color: #f3e6c4; text-shadow: 0 2px 0 #000; outline: none; }
.cr-title .sec-title::first-letter { color: var(--gold-text); }
.cr-title .sec-lede { color: var(--text-soft); }
.cr-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 26px; }
.cr-sec { padding: 18px 20px 20px; }
.cr-sec h3 { font: 700 22px var(--serif); margin-bottom: 10px; }
.cr-sec h3::first-letter { color: var(--rubric); }
.cr-stand { display: grid; gap: 8px; }
.cr-stand li { display: grid; grid-template-columns: 28px 36px 1fr auto auto auto; gap: 10px; align-items: center; padding: 8px 10px; background: var(--vellum); border: 1px solid rgba(43, 29, 16, .4); font-size: 15px; }
.cr-stand li.me { border: 2px solid var(--ink); background: #f6e3a4; }
.cs-n { font: 700 24px var(--serif); color: var(--rubric); text-align: center; }
.cr-stand .crest { width: 34px; height: 36px; }
.cs-name b { display: block; font-size: 17px; }
.cs-name span { font-style: italic; color: var(--parch-soft); font-size: 14px; }
.cs-v b { font-size: 20px; }
.cr-personal { margin-top: 12px; font-size: 16px; line-height: 1.5; }
.cr-titles { display: grid; gap: 10px; }
.cr-titles li { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; }
.cr-titles svg { width: 52px; height: 52px; }
.cr-titles b { display: block; font-size: 17px; }
.cr-titles span { display: block; font-size: 14px; color: var(--parch-soft); }
.cr-titles em { display: block; font-weight: 700; color: var(--rubric); }
.cr-hall p { font-size: 16px; line-height: 1.55; }

/* ---------- the commander's tips ---------- */
.coach.inflow { position: static; max-width: none; grid-template-columns: 64px minmax(0, 1fr); }
.coach.inflow .coach-face { width: 64px; height: 64px; }
.coach.inflow .coach-face img { width: 58px; height: 58px; }
.coach.inflow .coach-say { box-shadow: 0 0 0 3px #b8862c, 0 0 0 4px var(--ink); }
.coach { position: fixed; left: 16px; bottom: 16px; z-index: 70; display: grid; grid-template-columns: 76px minmax(0, 360px); gap: 10px; align-items: end; max-width: calc(100vw - 32px); pointer-events: none; }
.coach > * { pointer-events: auto; }
.coach.away { display: none; }
.coach-face { width: 76px; height: 76px; border: 3px solid #a8781f; outline: 1px solid var(--ink); background: #2a1a0e; box-shadow: inset 0 0 0 1px #ecc96a; overflow: hidden; }
.coach-face img { width: 70px; height: 70px; display: block; }
.coach-say { position: relative; padding: 10px 14px 12px; background: var(--tex-fibre) 0 0 / 256px, var(--vellum); color: #3b2a19; border: 2px solid var(--ink); box-shadow: 0 0 0 3px #b8862c, 0 0 0 4px var(--ink), 0 12px 24px rgba(0, 0, 0, .5); font: italic 16px/1.45 var(--serif); }
.coach-say b { display: block; font: 700 14px var(--serif); font-variant: small-caps; letter-spacing: .1em; font-style: normal; color: var(--rubric); }
.coach-actions { display: flex; gap: 8px; margin-top: 8px; }
.coach-b { min-height: 38px; padding: 4px 12px; font-size: 15px; font-style: normal; }
.coach-target { outline: 3px solid #f2cc63 !important; outline-offset: 3px; animation: coachPulse 1.2s steps(2) infinite; }
@keyframes coachPulse { 50% { outline-color: #fff6d8; } }
body.rm .coach-target { animation: none; }
body.dlg-on .coach, body.rep-on .coach { display: none; }

/* ---------- larger text ---------- */
body.large .command, body.large .dlg-body, body.large .battle-body, body.large .hud-bottom, body.large .coach-say, body.large .pickhouse .wrap { zoom: 1.16; }

/* ---------- responsive ---------- */
@media (max-width: 1380px) { .hud-bottom { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); } }
@media (max-width: 1100px) {
  .stage-grid { grid-template-columns: 1fr; }
  .map-col { display: contents; }
  .map-frame { order: 1; }
  .command { order: 2; }
  .hud-bottom { order: 3; }
  .hcards { grid-template-columns: 1fr; max-width: 640px; margin-left: auto; margin-right: auto; }
  .hcard { display: grid; grid-template-columns: 170px 1fr; }
  .hc-portrait { height: 100%; min-height: 220px; border-bottom: 0; border-right: 3px solid var(--ink); box-shadow: inset -3px 0 0 #b8862c; }
  .hc-portrait img { width: 150px; height: 200px; }
  .cr-stage, .cr-body { grid-template-columns: 1fr; }
  .ledger-grid, .cx-tri { grid-template-columns: 1fr; }
  .title-screen .ts-frame { border-width: 24px; border-image-width: 24px; }
}
@media (max-width: 860px) {
  .map-head { flex-wrap: wrap; }
  .map-scroll { height: 400px; min-height: 0; }
  .keep-top { grid-template-columns: 1fr; }
  .diff-row { grid-template-columns: 1fr; }
  .dlg-box { border-width: 16px; border-image-width: 16px; }
  .dlg-body { padding: 12px 12px 18px; }
  .dlg-head { padding: 8px 10px; }
  .dlg-head h2 { font-size: 23px; }
  .dlg-back { padding: 6px; }
  .report-back { padding: 6px; }
  .report-back .battle-roll { max-height: calc(100vh - 12px); }
  .rep-renown { grid-template-columns: 1fr; }
  .cr-stand li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
  .cr-stand .cs-name { flex: 1 1 60%; }
  .cr-stand .cs-v:first-of-type { margin-left: 64px; }
  .daybar { display: none; }
}
@media (max-width: 640px) {
  .hud-bottom { grid-template-columns: minmax(0, 1fr); }
  .hcard { grid-template-columns: 1fr; }
  .hc-portrait { height: 210px; border-right: 0; border-bottom: 3px solid var(--ink); }
  .hc-portrait img { width: 150px; height: 200px; }
  .bgrid, .ygrid, .cx-units { grid-template-columns: 1fr; }
  .cx-c { grid-template-columns: 90px 1fr; }
  .cx-c img { width: 90px; }
  .battle-sum { grid-template-columns: 1fr; }
  .scr-tick { min-height: 34px; font-size: 12px; }
  .scr-tick span { font-size: 12px; }
  .coach { grid-template-columns: 52px minmax(0, 1fr); left: 8px; right: 8px; bottom: 8px; }
  .coach-face { width: 52px; height: 52px; }
  .coach-face img { width: 46px; height: 46px; }
  .coach-say { font-size: 15px; padding: 8px 10px 10px; }
  .top-actions { gap: 4px; }
  .top-actions .btn-iron { padding: 6px 8px; min-height: 40px; }
  .gate .ts-menu { margin-top: 0; }
}
@media (max-width: 480px) {
  .res-item { padding: 3px 4px 3px 2px; gap: 3px; }
  .res-ico { width: 24px; height: 24px; }
  .res-item .pxi { width: 18px; height: 18px; }
  .res-item .of { display: none; }
  .map-frame { border-width: 12px; border-image-width: 12px; }
  .cartouche h2 { font-size: 20px; }
  .tagline { font-size: 14px; }
  .zb { min-width: 40px; }
  .moves5 button { font-size: 13px; letter-spacing: 0; }
  .orders-row { flex-wrap: wrap; }
  .facts { grid-template-columns: 1fr; }
  .sq { grid-template-columns: 24px 44px 1fr; }
  .opt { grid-template-columns: 52px 1fr; }
  .army-card { width: 112px; }
  .hud-bottom .panel { border-width: 16px; border-image-width: 16px; }
}

.cx-places { margin-top: 18px; }
.cx-places h3 { font: 700 20px var(--serif); }
.cx-places p { font-size: 16px; margin: 6px 0 8px; }
.cx-places .ledger-table { font-size: 14px; }
@media (max-width: 640px) { .cx-places .ledger-table thead { display: none; } .cx-places .ledger-table tr { display: grid; padding: 6px 0; border-bottom: 1px solid rgba(43,29,16,.3); } .cx-places .ledger-table th, .cx-places .ledger-table td { border: 0; padding: 1px 4px; } }

/* ---------- QA A: layout, touch and small screen fixes (see ui/QA-A.md) ---------- */
/* touch screens: every control is at least 44 px in both directions */
@media (pointer: coarse) {
  .btn-iron, .zb, .coach-b, .bbtn, .chip, .bsm, .codex-tabs button, .dlg-x, .scr-ctl .btn-iron { min-height: 44px; min-width: 44px; justify-content: center; }
  .todo-b, .switch { min-height: 44px; }
  .stepper button { width: 44px; height: 44px; }
  .keep-tabs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
  .dlg-body summary, .rep-lines summary, .mu-sum summary { padding: 10px 0; }
  .check { min-height: 44px; }
  .top-actions .btn-iron { min-width: 44px; min-height: 44px; }
  .mu-mode .chip, .mu-places .chip, .scr-tick { min-height: 44px; }
  .skip { min-height: 44px; }
}
/* the ledger and the codex tables fit a phone */
.lt-h .crest { flex: none; }
.ledger-grid > * { min-width: 0; }
.lg-days { overflow-x: auto; }
@media (max-width: 640px) {
  .ledger-grid { grid-template-columns: minmax(0, 1fr); }
  .ledger-table { font-size: 14px; }
  .ledger-table th, .ledger-table td { padding: 5px 4px; }
  .ledger-table thead th { font-size: 13px; letter-spacing: .02em; }
  /* the day scrubber in two rows of seven, so each day is a real tap target */
  .scr-track { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .scr-tick { min-height: 44px; }
}
/* landscape phones and very short windows: the carved bar scrolls away instead of covering a third of the screen,
   and the keep's painting sits beside its stores instead of filling the whole panel */
@media (max-height: 500px) {
  .topbar { position: relative; }
  .keep-top { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); }
  .dlg-back, .report-back { padding: 4px; }
  .dlg-box { max-height: calc(100vh - 8px); border-width: 14px; border-image-width: 14px; }
  .report-back .battle-roll { max-height: calc(100vh - 8px); }
  .dlg-head { padding: 4px 10px; }
  .dlg-head h2 { font-size: 21px; }
}
/* anchors and keyboard focus scroll clear of the sticky bar (index.html keeps --top-h equal to its real height) */
main :focus, main [id] { scroll-margin-top: calc(var(--top-h, 76px) + 12px); scroll-margin-bottom: 16px; }
.realm :focus, .realm [id] { scroll-margin: 0; }
/* the carved bar never runs off the right edge between 861 and 1180 px, whatever the size of the numbers */
@media (min-width: 861px) and (max-width: 1180px) {
  .brand-full { display: none !important; }
  .brand-mark { display: block !important; }
  .res-item .of { display: none; }
  .res { gap: 4px; min-width: 0; }
  .topbar-row { gap: 10px; }
}
/* short desktop windows: the whole gate menu stays above the fold */
@media (min-width: 1101px) and (max-height: 760px) {
  .gate.title-screen { padding-top: 14px; padding-bottom: 20px; }
  .gate .ts-frame { border-width: 24px; border-image-width: 24px; }
  .gate .slot-hero { aspect-ratio: auto; min-height: 0; height: 536px; } /* exactly the painting at 2x, so it never drops to 1x */
  .gate .ts-menu { padding: 8px 16px 12px; border-width: 16px; border-image-width: 16px; }
  .gate .ts-title, .gate .ts-title img { width: 84px; }
  .gate .ts-eyebrow { display: none; }
  .gate .ts-title { margin: 4px auto; }
  .gate .ts-lede { font-size: 15px; line-height: 1.4; }
  .gate .ts-buttons { gap: 6px; margin-top: 8px; }
  .gate .ts-buttons .btn-stone { min-height: 42px; font-size: 17px; }
}
/* phones: the crown ceremony shows its painting at 1x, crisp and centred on the keep, with the keep at 2x and a
   smaller banner, instead of a squeezed painting under a keep and banner that fill the whole frame */
@media (max-width: 640px) {
  .cr-scene { border-width: 14px; border-image-width: 14px; aspect-ratio: auto; height: 190px; }
  .cr-bg { width: 480px; image-rendering: pixelated; }
  .cr-keep { width: calc(var(--w) * 2px); height: calc(var(--h) * 2px); margin-left: calc(var(--w) * -1px); background-size: calc(var(--w) * 4px) calc(var(--h) * 2px); bottom: 6%; }
  .cr-banner { width: 56px; margin-left: 22px; }
  .cr-banner svg { width: 56px; }
}