/* Shared materials for EVERY game surface. Paper containers remap the legacy
   text tokens locally, so nested statistics and controls remain readable. Dark
   enamel is reserved for selected controls, cloth, and small portrait stages. */
:root {
  --paper-gold: #795315;
  --paper-ready: #22633b;
  --paper-peril: #a12e36;
  --paper-wash: rgba(255, 238, 195, .6);
  --field-paper: linear-gradient(160deg, rgba(255, 240, 202, .86), rgba(236, 208, 154, .78));
  --field-enamel: linear-gradient(160deg, rgba(16, 45, 84, .80), rgba(39, 77, 102, .70));
  --field-wood: linear-gradient(160deg, rgba(117, 72, 33, .78), rgba(53, 33, 19, .68));
  --panel-1: #274d66;
  --panel-2: #142c41;
  --font-hero: "Grenze", Georgia, serif;
  --enamel-face: linear-gradient(160deg, var(--enamel-blue-light), var(--enamel-blue) 38%, var(--enamel-blue-dark));
  --rose-face: linear-gradient(160deg, var(--enamel-rose-light), var(--enamel-rose) 38%, var(--enamel-rose-dark));
  --enamel-edge: inset 0 1px 0 var(--steel-light), inset 0 0 0 2px var(--enamel-blue-dark), 0 3px 0 var(--wood-dark), 0 4px 8px rgba(var(--shade-rgb), .35);
}
.screen:not(#scr-menu) {
  background: linear-gradient(160deg, rgba(var(--hall-rgb), .52), rgba(var(--hall-rgb), .78)), url('/img/menu/kingdom-valley.webp?v=b7f03f18') center / cover;
  padding: var(--sat) var(--sar) calc(18px + var(--sab)) var(--sal);
}
.screen:not(#scr-menu)::before, .screen:not(#scr-menu)::after { content: none; }

/* Safari's layout viewport can extend behind its toolbar or keyboard. All UI
   roots use the measured visible height, including dialogs outside #screens. */
#screens, #hud, html #auth-gate, #settingsmodal, #keymodal, #mintlay, #partylay,
#asklay, #seasonlay, #instlay {
  top: var(--vtop, 0px); bottom: auto; height: calc(var(--vh, 1vh) * 100);
}
.screen { scroll-padding-block: 14px 100px; overscroll-behavior: contain; }
html.phone .screen { --edge-l: 12px; --edge-r: 12px; --edge-t: 6px; --edge-b: 12px; }

/* Parchment: the roster, the ledger, the shop, the map briefing, and dialogs
   share this exact palette. Affordability retains both its tick and green rim. */
html :is(.scrhdr, #musterdetail, #musterstage, .armplate, .armcard,
  .loadouthead, .loadoutsaved, .loadoutarmy, .loadoutworks, .loadoutspells,
  .modecard, .searchbox, .profbody, .rq-hero, .rq-stakes, .rq-div, .rq-card,
  .cg-intro, .cg-pickbar, .gt-top, .gt-board, .gt-idle, .gt-drawnp, .cp-march, .cp-brief, .cp-road, .cp-legend, .cp-boons,
  #bnbody, #sgbody, .rd-ledger, .rd-d, .rd-panel, .qmfw, .qmsk, .qmcos, .qmem,
  .fg-stage, .fg-uses, .fg-roll, .fg-sec, .fg-bar, #reportbox, #resultbox,
  .mintbox, .plobbybox, .askbox, .seasonbox, .instbox, .ag-card,
  .st-card, .km-card, #bldqueue,
  #keepsheet, #worksheet, .pl-row) {
  --ink: var(--paper-ink); --muted: var(--paper-muted);
  --gold-lt: var(--paper-gold); --gilt-body: var(--paper-gold);
  --gold: var(--paper-gold);
  --gold-bright: var(--paper-ink); --parchment: var(--paper-ink); --parchment-dim: var(--paper-muted);
  --ready: var(--paper-ready); --ready-lt: var(--paper-ready); --peril: var(--paper-peril); --peril-lt: var(--paper-peril);
  --edge: var(--paper-shadow); --edge-quiet: rgba(121, 83, 21, .25); --edge-strong: var(--wood);
  --plate: var(--paper-face); --vellum-plate: var(--paper-face);
  background: var(--paper-face); color: var(--paper-ink);
  border: 2px ridge var(--paper-shadow); border-radius: var(--r-sm);
  box-shadow: var(--carved-edge); backdrop-filter: none;
  text-shadow: none;
}
html :is(.scrhdr, #musterdetail, #musterstage, .armcard, .loadouthead, .profbody,
  .rq-hero, .rq-card, .cp-march, #bnbody, #sgbody, .rd-d, .fg-stage,
  #resultbox, .mintbox, .plobbybox, .askbox, .seasonbox, .ag-card) :is(h1,h2,h3,h4,b,strong) { text-shadow: none; }

/* A continuous wooden lintel with a paper title makes every screen recognizably
   part of the same castle. Controls keep their positions and keyboard behavior. */
html .screen .scrhdr { margin: 12px 18px 14px; padding: 10px 16px; width: calc(100% - 36px); max-width: calc(100% - 36px); min-height: 60px; flex-shrink: 0; box-sizing: border-box; }
html .scrhead .scrtitle { color: var(--paper-ink); background: none; -webkit-text-fill-color: currentColor; font-family: var(--font-display); font-weight: 800; text-shadow: 0 1px var(--paper-light); }
html .scrsub, html .scrkick { color: var(--paper-muted); }
html .scrhdr .backbtn { min-height: 36px; padding: 7px 16px; }
html :is(.backbtn, .menubtn, .buybtn, .qm-tab, .rd-tab, .rq-tab, .ar-tab,
  .loadoutsaveactions button, .armfilters button, .fg-rollbtn, .ask-no) {
  background: var(--enamel-face); color: var(--cloth-ink); border: 2px ridge var(--steel);
  border-radius: var(--r-sm); box-shadow: var(--enamel-edge);
  transition: transform var(--t-2) var(--e-back), filter var(--t-2) var(--e-out);
}
/* Lifts belong to a cursor: a tap leaves :hover standing on the last thing
   pressed, so on a touch screen they are the press's job (see kingdom.css). */
@media (hover: hover) {
  html :is(.backbtn, .menubtn, .buybtn, .qm-tab, .rd-tab, .rq-tab):hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-2px); }
}
html :is(.backbtn, .menubtn, .buybtn, .qm-tab, .rd-tab, .rq-tab):active:not(:disabled) { transform: translateY(2px); }
html :is(.qm-tab, .rd-tab, .rq-tab) :is(b,i,span) { color: var(--cloth-ink); }
html :is(.qm-tab.on, .rd-tab.on, .rq-tab.on) { background: var(--rose-face); border-color: var(--gold-hi); }
html .bigbtn, html .menubtn.primary, html .ag-btn, html .ask-yes {
  background: var(--rose-face); color: var(--cloth-ink); border: 3px ridge var(--gold);
  border-radius: var(--r-md); text-shadow: 0 2px 0 var(--enamel-rose-dark);
  box-shadow: inset 0 1px 0 var(--gold-hi), inset 0 0 0 2px var(--enamel-rose-dark), 0 3px 0 var(--wood-dark), 0 6px 9px rgba(var(--shade-rgb), .3);
}
html .bigbtn .bsub { color: var(--cloth-ink); }
html .bigbtn.alt { background: var(--enamel-face); }
html button:focus-visible, html a:focus-visible, html summary:focus-visible { outline: 3px solid var(--enamel-blue-light); outline-offset: 3px; }
html button:disabled { cursor: not-allowed; }
html .scrhdr .chip, html .scrhdr .buygold { color: var(--gold-hi); background: var(--enamel-blue-dark); border-color: var(--gold); }
html .scrhdr .chip .gold { color: var(--gold-hi); }

/* Kingdom selection: actual sprites stand on a daylight stage. */
html .mustermode { color: var(--cloth-ink); background: var(--wood-dark); width: fit-content; max-width: calc(100% - 40px); margin: -6px auto 12px; padding: 5px 18px; border: 1px solid var(--gold-dk); border-radius: var(--r-sm); }
html #musterdetail, html #musterstage { border-top: 4px ridge var(--gold); }
html .md-name, html .ms-name, html .loadouthead h2 { color: var(--paper-ink); text-shadow: none; }
html #musterdetail .md-head h2, html #musterdetail .md-col h6,
html #musterdetail .md-cath, html #musterdetail .md-troop i,
html #musterstage .ms-hdr, html #musterstage .ms-bar > em,
html #musterstage .ms-desc { color: var(--paper-ink); text-shadow: none; }
html #musterdetail .md-pcol .kd-powers div { background: var(--paper-wash); color: var(--paper-ink); border-color: var(--paper-shadow); }
html #musterdetail .md-pcol .kd-powers .ic { color: var(--paper-gold); }
html #musterdetail .md-catnone { opacity: .65; }
html #musterdetail .md-none { color: var(--paper-muted); }
html #musterstage .ms-strong { color: var(--paper-ready); }
html #musterstage .ms-weak { color: var(--paper-peril); }
html .md-traits li, html .md-perks li, html .md-bonus, html .ms-vs, html .ms-might { background: var(--paper-wash); border-color: var(--paper-shadow); color: var(--paper-ink); }
html .md-head { background: transparent; }
html .md-troop { background: linear-gradient(160deg, var(--paper-light), var(--paper-shadow)); border-color: var(--paper-shadow); box-shadow: inset 0 1px var(--paper-light), 0 2px 3px rgba(var(--shade-rgb), .2); }
html .md-troop.on { border-color: var(--enamel-blue); background: var(--paper-light); }
@media (hover: hover) { html .md-troop:hover { border-color: var(--enamel-blue); background: var(--paper-light); } }
html .md-cat, html .md-catname, html .ms-kicker { color: var(--paper-muted); }
html .ms-plinth { background: radial-gradient(ellipse at 50% 75%, rgba(var(--gold-rgb), .6), transparent 65%), linear-gradient(160deg, var(--enamel-blue-light), var(--enamel-blue-dark)); border: 2px ridge var(--steel); border-radius: var(--r-sm); }
html .ms-light { opacity: .25; }
html .ms-stat .ms-bar { background: var(--paper-shadow); }
html .mt-cloth { filter: brightness(1.3) saturate(1.2); }
html .musterwrap .bigbtn { min-height: 52px; }

/* The saved hands, troop cards and spell book are pages of one army ledger. */
html :is(.loadoutsavecard, .loadoutwork, .loadoutunit, .loadoutspell) { background: var(--paper-face); border: 1px solid var(--paper-shadow); border-radius: var(--r-sm); box-shadow: inset 0 1px var(--paper-light); }
html :is(.loadoutunit, .loadoutspell).on { background: var(--enamel-face); border: 2px ridge var(--steel-light); box-shadow: 0 2px 0 var(--enamel-blue-dark); }
html :is(.loadoutunit, .loadoutspell) :is(.loadoutname, .loadoutcost, .loadoutrole) { color: var(--paper-ink); }
html :is(.loadoutunit, .loadoutspell).on :is(.loadoutname, .loadoutcost, .loadoutrole) { color: var(--cloth-ink); }
html .loadoutwork span b, html .loadoutcount b { color: var(--paper-ink); }
html .loadoutcount { background: var(--paper-wash); border-color: var(--paper-shadow); }
html .loadoutsectiontitle { background: var(--paper-face); color: var(--paper-ink); border-bottom: 1px solid var(--paper-shadow); }
html .loadoutsectiontitle :is(b,span) { color: var(--paper-ink); }
html .loadouthint { background: var(--wood-dark); color: var(--cloth-ink); border-radius: var(--r-sm); padding: 5px 10px; }
html .armcard .afield, html .armcard .astat, html .armcard .armcost, html .armcard .owned { background: var(--paper-wash); color: var(--paper-ink); border-color: var(--paper-shadow); }
html .armcard .armname { color: var(--paper-ink); }
/* A ROLE'S PILL IS INK ON WOOD, NOT INK ON PAPER. It is set in the role's own
   colour (`--cat`), and on the parchment that colour sat on a 35% black wash over
   cream — "LEVY", "CAVALRY", "SIEGE" read as blank tabs on every card, desk and
   phone alike. The dark wood the lintel is cut from gives the colour its ground. */
html .armcard .acatpill { background: var(--wood-dark); border-color: var(--gold-dk); }
html .armcard.owned { border-color: var(--paper-ready); }
html .armcard.ready { border: 2px solid var(--paper-ready); }
html .armcard.gold .armicon { filter: saturate(.7); }
html .armsearch { background: var(--paper-light); color: var(--paper-ink); border-color: var(--paper-shadow); }
html .armsearch::placeholder { color: var(--paper-muted); }
html .armrow select { background: var(--paper-light); color: var(--paper-ink); }

/* Records, ranked, the challenge board, and the campaign chronicle. */
html .profbody { flex: 0 1 auto; width: min(920px, calc(100% - 48px)); margin: 8px auto 24px; padding: 24px; }
html .profbody .purse, html .pf-ledger { background: var(--paper-wash); border: 1px solid var(--paper-shadow); border-radius: var(--r-sm); padding: 12px; }
html :is(.rq-srow, .rq-plain, .sg-node, .sg-book, .bn-node, .cp-bmod, .cp-boons, .rd-wornbox) { background: var(--paper-face); border-color: var(--paper-shadow); color: var(--paper-ink); }
html .rq-tab, html .rq-plain { color: var(--cloth-ink); background: var(--enamel-face); }
html .rq-div { border-top-width: 5px; }
html .rq-div.cap { border-color: var(--gold); }
html .rq-srow span, html .rq-srow b { color: var(--paper-ink); }
html .cg-grid { padding: 10px; background: var(--paper-face); border: 3px ridge var(--paper-shadow); border-radius: var(--r-sm); box-shadow: var(--carved-edge); }
html .cg-cell { border-color: var(--paper-shadow); box-shadow: inset 0 1px rgba(var(--lit-rgb), .35); }
@media (hover: hover) { html .cg-cell:hover { outline: 2px solid var(--gold-hi); outline-offset: -2px; filter: brightness(1.2); } }
html .cp-march { overflow: hidden; }
html .cp-mname, html .cp-mtitle, html .cp-mcap b { color: var(--paper-ink); text-shadow: none; }
html .cp-mcap { background: var(--paper-face); color: var(--paper-ink); border-top: 2px ridge var(--paper-shadow); padding: 12px; }
html #campbody.inmarch :is(.cp-brief, .cp-road, .cp-legends, .cp-mapcol) { border-radius: var(--r-sm); }
html #campbody.inmarch .cp-brief { background: var(--paper-face); padding: 14px; border: 2px ridge var(--paper-shadow); box-shadow: var(--carved-edge); }
html #bnbody, html #sgbody { margin: 0 24px 18px; padding: 20px; }
html .bn-node, html .sg-node { border: 2px ridge var(--paper-shadow); box-shadow: 0 2px 3px rgba(var(--shade-rgb), .18); }
html .bn-node.had, html .sg-node.had { background: var(--paper-face); border-color: var(--paper-ready); }
@media (hover: hover) { html .bn-node.buy:hover, html .sg-node.buy:hover { background: var(--paper-light); border-color: var(--enamel-blue); } }
html .rd-d { padding: 12px; }
html .rd-panel { padding: 12px; }
html .rd-tab.on { border-bottom-color: var(--gold-hi); }

/* Every Quartermaster tab: fireworks, skins, reticles, symbols, emotes, plates. */
html #qmbody { background: transparent; }
html .qm-kh { padding: 6px 10px; background: var(--paper-face); border: 1px solid var(--paper-shadow); border-radius: var(--r-sm); }
html .qm-kh b, html .qm-kh span { color: var(--paper-ink); }
html :is(.qmfw, .qmsk, .qmcos, .qmem) { padding: 10px 7px; }
html :is(.qmfw, .qmsk, .qmcos, .qmem).on { border: 2px solid var(--paper-ready); }
html .qmfw b { color: var(--paper-ink); }
html .qmfw-pv, html .qmcos-pv { background: var(--enamel-blue-dark); border-radius: var(--r-sm); }
html .qmem-load { background: var(--paper-face); color: var(--paper-ink); border-color: var(--paper-shadow); }
html .qmem.on, html .qmsk.shut { background: var(--paper-face); }
html .fg-ch, html .fg-row, html .fg-t { background: var(--paper-wash); border-color: var(--paper-shadow); color: var(--paper-ink); }
html .fg-ch.on { background: var(--paper-light); border: 2px solid var(--enamel-blue); }
html .fg-stage { background: radial-gradient(ellipse at 50% 35%, var(--paper-light), var(--paper)); }

/* Results and overlays are physical sheets laid over the same bright world. */
html #resultbox { padding: 30px; }
html .resverdict { color: var(--enamel-blue-dark); background: none; -webkit-text-fill-color: currentColor; text-shadow: 0 2px var(--paper-light); filter: none; }
html #resultbox.lose .resverdict { color: var(--paper-peril); }
html :is(.rstat, .respurse, .reschal, .rescamp, .reswarpath) { background: var(--paper-wash); border-color: var(--paper-shadow); color: var(--paper-ink); }
html .respurse .rpnum, html .rstat b, html .rpttl { color: var(--paper-gold); background: none; text-shadow: none; -webkit-text-fill-color: currentColor; }
/* THE DEED'S MOMENT CARRIES ITS OWN NIGHT. It was drawn as gilt light over the
   dark hall — a name in --gold-lt, glowing — and the hall is parchment now: over
   the results sheet "Not a Scratch" was gold on cream, the ceremony a deed is
   promised with reduced to a smudge laid across the Warpath row. The banner it
   is cut on is the enamel the scoreboards wear. */
html .deedrise {
  padding: 10px 22px 12px; border: 2px ridge var(--gold-dk); border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--panel-1), var(--panel-2)); box-shadow: var(--enamel-edge), var(--sh-4);
}
html.phone .dr-kind, html.phone .dr-pays i { font-size: 11px; }
/* The results card's pinned exit is "the card continuing" (style.css, AND WHEN
   THE CEREMONY IS STILL TOO TALL) — so it was struck in the foot of the card's
   dark gradient, and the card is parchment now: on a phone the two ways off the
   screen sat in a black slab, "Claim the spoils" dark gold on near-black. */
html.phone #scr-results.overflows .resexit,
html.phone #scr-results.overflows .resultbox.lose .resexit {
  background: linear-gradient(180deg, transparent 0%, var(--paper-light) 22%, var(--paper) 100%);
}
html #resultbox :is(.reskd, .reshead b, .resname, .bp-preview, .bp-active) { color: var(--paper-muted); }
html .searchbox { min-width: min(380px, calc(100vw - 70px)); padding: 30px; }
html .searchbox::before { content: ''; position: static; display: block; width: 110px; height: 110px; margin: 0 auto 10px; border: 0; background: url('/img/units/knight.png') center / contain no-repeat; }
html .searchbox .spinner { border-color: var(--paper-shadow); border-top-color: var(--enamel-blue); }
html .searchtitle { color: var(--paper-ink); }
html :is(.mintlay, .asklay, .plobbylay, .seasonlay, .instlay) { background: rgba(var(--hall-rgb), .55); backdrop-filter: blur(4px); }
html :is(.mintpack, .pl-row, .inststep, .setrow, .km-section) { border-color: var(--paper-shadow); }
html .mintpack { background: var(--paper-wash); }
html :is(.mintbox, .plobbybox, .askbox, .seasonbox, .instbox, .st-card, .km-card) :is(input:not([type="range"]):not([type="checkbox"]), select) { background: var(--paper-light); color: var(--paper-ink); border: 1px solid var(--paper-shadow); }
html #auth-gate { background: linear-gradient(rgba(var(--hall-rgb), .2), rgba(var(--hall-rgb), .45)), url('/img/menu/kingdom-valley.webp?v=b7f03f18') center / cover; overflow-y: auto; padding: 20px; }
html .ag-card { padding: 22px 30px; margin: auto; flex-shrink: 0; }
html .ag-card > * { flex-shrink: 0; }
html .ag-crest { filter: none; margin: 0; }
html .ag-crest img { width: 210px; max-width: 100%; height: auto; }
html .ag-input { background: var(--paper-light); color: var(--paper-ink); border-color: var(--paper-shadow); }
html .ag-tabs { border-color: var(--paper-shadow); }
html .ag-tab--active { background: var(--enamel-face); color: var(--cloth-ink); }
html .ag-err { color: var(--paper-peril); }
html .ag-guide { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 16px; font-size: 16px; }
html .ag-guide a { color: var(--paper-ink); text-underline-offset: 3px; }
html .ag-guide a:focus-visible { outline: 2px solid var(--paper-ink); outline-offset: 4px; }

/* The hall uses solid parchment; the field uses translucent vellum and enamel.
   Alpha belongs to the backgrounds, never the whole HUD: labels and buttons
   stay crisp while the moving battlefield remains visible through the panels.
   No blur is needed, which also avoids new fixed-position ancestors on iOS. */
html #factions, html #factions.scorecard, html #factions.alliance {
  background: var(--field-enamel); backdrop-filter: none;
  border: 3px ridge var(--gold-dk); border-radius: var(--r-sm); box-shadow: var(--enamel-edge);
}
html #factions .sc-side { background: transparent; }
html #hud #mapframe, html #hud #selpanel, html #hud .uw-card { background: var(--field-paper); border: 2px ridge var(--paper-shadow); border-radius: var(--r-sm); box-shadow: var(--sh-2), inset 0 1px var(--paper-light); }
html #hud #selpanel.atworld { opacity: 1; }
/* (no paper on hover: the panel is the battle's dark glass now — combat.css — and
   a cream flash under the pointer turned its field inks into pale-on-pale) */
html #hud .uw-strap, html #hud .uw-strap b { color: var(--paper-ink); }
html #hud #mapframe::before { opacity: .35; }
html #hud #resources, html #hud .mf-bank { color: var(--paper-ink); border-color: var(--paper-shadow); }
html #hud :is(.res-gold, .res-gold b, .res-pop, .mf-bank b, .mf-gold, .mf-label, .mf-title) { color: var(--paper-ink); text-shadow: none; }
html #hud #bldqueue { background: var(--field-paper); border: 2px ridge var(--paper-shadow); box-shadow: var(--sh-2); }
html #hud :is(.bq-row, .kp-row, .kp-btn, .sb-row, .uw-row, .uw-head, .uw-tabs, .bp-stat, .bp-wait, .autobox) { background: var(--paper-wash); color: var(--paper-ink); border-color: var(--paper-shadow); }
html #hud #buildbar { background: var(--field-wood); border: 2px ridge var(--wood); border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--gold-dk), 0 5px 14px rgba(var(--shade-rgb), .25); padding: 8px; }
html #hud .build { background: var(--field-paper); backdrop-filter: none; border: 2px ridge var(--paper-shadow); border-radius: var(--r-sm); box-shadow: inset 0 1px var(--paper-light), 0 2px 0 var(--wood-dark); color: var(--paper-ink); }
html #hud .build :is(.bn, .bc, .bname, .bcost, .bpop, .bdesc) { color: var(--paper-ink); text-shadow: none; }
html #hud .build.ready { border: 2px solid var(--ready-dk); box-shadow: inset 0 0 0 1px var(--ready-lt), 0 2px 0 var(--wood-dark); }
@media (hover: hover) { html #hud .build:hover { background: var(--paper-light); transform: translateY(-2px); } }
html #hud .build .bk { color: var(--cloth-ink); background: var(--enamel-blue-dark); border-color: var(--steel); }
html #hud :is(#buildbtn, #upgradebtn, #releasebtn, .fortbtn, .upgbtn, .bupg) { background: var(--enamel-face); border: 2px ridge var(--steel); border-radius: var(--r-sm); color: var(--cloth-ink); box-shadow: var(--enamel-edge); text-shadow: 0 1px var(--enamel-blue-dark); }
html #hud #buildbtn { background: var(--rose-face); border-color: var(--gold); }
html #hud #leavebtn { border: 2px ridge var(--gold-dk); border-radius: var(--r-sm); }
html #hud .sc-bar { border-radius: var(--r-sm); border: 1px solid var(--gold-dk); }
html #hud .pl-card { color: var(--paper-ink); }
html #hud .pl-line { color: var(--paper-ink); text-shadow: none; }
html #hud :is(.uw-name, .uw-g, .bq-t, .bq-k, .bq-o, .kp-label, .kp-name, .kp-ttl) { color: var(--paper-ink); text-shadow: none; }
html #hud .bq-i { background: var(--paper-wash); border-color: var(--paper-shadow); }
html #hud .uw-up.can { color: var(--cloth-ink); background: var(--enamel-face); border-color: var(--steel); }
html #hud .uw-up.poor { color: var(--paper-muted); background: var(--paper-wash); }
html #hud .uw-up.busy { color: var(--paper-ink); background: var(--paper-wash); }
/* The battle reference floats over a live field. It keeps the dark enamel shell
   from style.css so its pale labels and category stripe remain legible at a glance. */
html #tip { font-size: 13px; }
html #hud :is(.ws-gold, .ws-pursehd > span) { color: var(--paper-ink); background: none; -webkit-text-fill-color: currentColor; text-shadow: none; }
html #hud .ws-inc { background: var(--paper-wash); border-color: var(--paper-ready); box-shadow: none; }
html #hud .ws-inc :is(i,em), html #hud .ws-inc::before { color: var(--paper-ready); background: none; -webkit-text-fill-color: currentColor; text-shadow: none; }
html #hud #keeppanel { background: var(--paper-wash); border-color: var(--paper-shadow); }
html #hud #garrisonbtn { color: var(--cloth-ink); background: var(--enamel-face); border-color: var(--steel); }
html #hud #garrisonbtn[aria-pressed="true"] { color: var(--cloth-ink); background: var(--ready-dk); border-color: var(--paper-ready); }
html #hud #fortifybtn { color: var(--paper-ink); background: var(--paper-wash); border-color: var(--paper-shadow); text-shadow: none; }
html #hud #fortifybtn .fb-cost { color: var(--paper-ink); }
html #hud .kp-tot { color: var(--paper-ink); }
html #reportbox :is(.rnote, .rsname b, .rsrow i, .rshead span) { color: var(--paper-ink); }
html #reportbox :is(.rsname em, .reptl span) { color: var(--paper-muted); }
html #reportbox .rsrow.good .rsret { color: var(--paper-ready); }
html #reportbox .rsrow.poor .rsret { color: var(--paper-peril); }
html #reportbox :is(.reptile, .repnotes, .repvs, .repcurve) { background: var(--paper-wash); border-color: var(--paper-shadow); }
html #reportbox .reptab { color: var(--cloth-ink); background: var(--enamel-face); border-color: var(--steel); }
html #reportbox .reptab.on { background: var(--rose-face); border-color: var(--gold-dk); }
html #reportbox :is(.reptitle b, .reptile b, .repbar b, .repverdict) { color: var(--paper-ink); }
html #reportbox :is(.reptitle small, .reptile span, .reptile em, .repvsttl, .repbar span, .repfoot, .rcaxis, .rckey, .rchead) { color: var(--paper-muted); }
html #reportbox .repai { color: var(--cloth-ink); background: var(--enamel-blue-dark); }
html .km-tosettings { color: var(--paper-ink); background: var(--paper-face); border-color: var(--paper-shadow); }
html .mint-joke b, html .qmem-load b { color: var(--paper-ink); }
html :is(#emotewheel, #fwrack) { --ink: var(--paper-ink); --muted: var(--paper-muted); background: var(--field-paper); border: 2px ridge var(--paper-shadow); box-shadow: var(--sh-2); }
html .br-item { background: var(--field-paper); border-color: var(--paper-shadow); color: var(--paper-ink); box-shadow: inset 0 1px var(--paper-light), 0 3px 5px rgba(var(--shade-rgb), .4); }
html .br-item :is(.br-n, .br-c) { color: var(--paper-ink); text-shadow: none; }
html .br-x { color: var(--cloth-ink); background: var(--enamel-face); border-color: var(--steel); }
html .seasonbox .ss-row { background: var(--paper-wash); border-color: var(--paper-shadow); }
html .seasonbox .ss-fin b { color: var(--paper-ink); }
html #emotewheel .emtile :is(i,u), html #emotewheel .emtile:hover i { color: var(--paper-ink); }
html .uinote { background: var(--paper-face); color: var(--paper-ink); border-color: var(--paper-shadow); box-shadow: var(--carved-edge); }
html #netlost { background: var(--enamel-face); color: var(--cloth-ink); border-color: var(--steel); }
html #rotatehint { background: var(--enamel-blue-dark); color: var(--cloth-ink); }
html #bnbody :is(.bn-head, .bn-standing, .bn-pts), html #sgbody .sg-pts { background: var(--paper-wash); border-color: var(--paper-shadow); }
html #bnbody .bn-node i { color: var(--paper-ink); background: var(--paper-wash); }
html #reportbox :is(.rcvttl, .tlttl, .tlkey, .tlp > b, .tlp > u, .repempty) { color: var(--paper-muted); }
html #reportbox .reptl { background: var(--paper-wash); border-color: var(--paper-shadow); }

@media (max-width: 700px) {
  html .screen .scrhdr { margin: 7px 10px 10px; padding: 8px; min-height: 48px; }
  html .profbody { width: calc(100% - 26px); padding: 14px; }
  html #bnbody, html #sgbody { margin: 0 12px 12px; padding: 12px; }
  html #resultbox { padding: 18px; }
  html .ag-crest img { width: 160px; }
}
html.phone #hud #buildbar {
  padding: 6px; border-width: 2px;
  /* The two-rank rack scrolls within the gap below the live score on short
     landscape phones; 52vh alone let its top cover the score at 844x300. */
  max-height: min(
    calc((var(--vh) * 52) / var(--rack)),
    calc((var(--vh) * 100 - var(--field-top, 90px) - var(--edge-b) - var(--tap) - 16px) / var(--rack))
  );
}
html.phone #hud .uw-card, html.phone #hud #keepsheet {
  max-height: calc(var(--vh) * 100 - var(--field-top, 90px) - var(--edge-b) - var(--tap) - 18px);
}
html.phone #hud #worksheet {
  max-height: calc(var(--vh) * 100 - var(--field-top, 90px) - var(--edge-b) - (var(--tap) + 8px) * 2 - 10px);
}
html.phone #hud .build { border-width: 1px; }
html.phone #hud #keepsheet, html.phone #hud #worksheet { background: var(--field-paper); color: var(--paper-ink); border: 2px ridge var(--paper-shadow); box-shadow: var(--sh-2); }
/* Long pages keep full-size text on touch screens. Wide matchup tables scroll
   inside their own rail; the page and its pinned action never grow sideways. */
html.phone .screen .scrhdr { width: calc(100% - 20px); max-width: calc(100% - 20px); min-width: 0; margin: 7px 10px 10px; padding: 8px; }
html.phone .scrhead { min-width: 0; }
html.phone .scrhdr .backbtn { padding: 6px 10px; }
/* ---- THE LINTEL, CUT TO A PHONE ---------------------------------------------
   The paper lintel above is set at 60px tall inside 26px of margin — written
   for a desk, and `html .screen .scrhdr` outranks the phone's own one-row header
   in style.css by coming later, so on a 390px phone every screen opened with
   90px of title: a quarter of the glass before the first troop, the first
   square or the first march. Here it is the row a phone game's header is: a
   back arrow where the left thumb is, the name of the place, and the purse;
   one line, and it stays on the glass while the screen scrolls under it.
   The word "Back" leaves the plate and stays in the button's name — an arrow
   at the top-left is the one mark every phone reads the same way. */
html.phone .screen .scrhdr {
  margin: calc(4px + var(--sat)) calc(8px + var(--sar)) 6px calc(8px + var(--sal));
  /* `flex: none`: the screen is a flex column, and with the desk's 60px floor
     gone a header over a long screen was shrunk to its own padding — 10px. */
  flex: none; width: auto; max-width: none; min-height: 0; padding: 3px 6px 3px 4px; gap: 8px; align-items: center;
}
html.phone .scrhdr .backbtn { min-height: 38px; min-width: 46px; padding: 0 10px; justify-content: center; }
html.phone .scrhdr .backbtn .ic { width: 18px; height: 18px; }
html.phone .scrhdr .backbtn .bk-lab {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
html.phone .scrhead { gap: 1px; }
html.phone .scrhead .scrtitle { font-size: 19px; line-height: 1.1; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.phone .scrhead .scrsub { font-size: 12px; line-height: 1.2; }
html.phone .scrhead .scrkick { font-size: 11px; line-height: 1.1; }
html.phone .scrhdr .menupurse { height: 34px; }
/* THE ARMY'S HEAD, ON ONE ROW. The desk's plate is 92px with a 66px shield
   standing in it — on a 390px phone, the head and the lintel over it took half
   the glass before the first of the seven troops it is about. Crest, name and
   count keep their places and their order; they are a phone's size. */
html.phone .loadouthead { min-height: 0; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; padding: 5px 10px 5px 8px; }
html.phone .loadoutcrest { width: 36px; height: 42px; }
html.phone .loadouthead h2 { font-size: 19px; margin: 0; }
html.phone .loadoutcount { min-width: 0; padding: 3px 10px; }
html.phone .screen :is(.cg-pickbar, .cp-bgo, .bn-foot, .loadoutfoot) { background: var(--paper-face); color: var(--paper-ink); }
html.phone .screen :is(.cg-pickbar, .cp-bgo, .bn-foot, .loadoutfoot)::before { left: 0; right: 0; bottom: 0; background: var(--paper-face); }
html.phone .cg-wrap { overflow-x: auto; max-width: 100%; padding-bottom: 12px; scrollbar-width: thin; }
html.phone .cg-grid { width: 960px; min-width: 960px; max-width: none; grid-template-columns: 100px repeat(var(--n), minmax(64px, 1fr)) 70px; }
html.phone .cg-colhd span, html.phone .cg-rowhd span { font-size: 11px; }
.cg-touchhint { display: none; }
html.phone .cg-touchhint { display: block; margin-top: 5px; color: var(--paper-muted); }
html.phone .cp-march { flex-direction: column; align-items: stretch; padding: 8px; gap: 8px; }
html.phone .cp-mmap { flex: none; width: 100%; aspect-ratio: 16 / 9; }
html.phone .cp-mtop { width: 100%; }
html.phone .cp-mname { font-size: 15px; line-height: 1.15; overflow-wrap: normal; }
html.phone .cp-mkind { font-size: 11px; }
html.phone .cp-mdots { flex-wrap: wrap; }
html.phone.portrait .cp-stage { grid-template-columns: 1fr; }
html.phone.portrait #armgrid { grid-template-columns: 1fr; }
html.phone.portrait #scr-armory #armgrid .armcards { grid-template-columns: minmax(0, 1fr); }
html.phone.portrait .armtools { max-width: 100%; }
/* Grid's automatic minimum was wider than the phone, even though the screen
   itself reported no overflow. Bound the entire chain, not just its clip. */
html #scr-armory :is(.armlayout, .armdetail, .armsec, .armcards, .armcard) { min-width: 0; }
html.phone #scr-armory #armgrid { display: block; overflow: visible; }
html.phone #scr-armory .armcards { grid-template-columns: repeat(auto-fit, minmax(min(228px, 100%), 1fr)); }
html.phone #scr-armory .armtools { flex-wrap: wrap; overflow: visible; }
html.phone #scr-armory .armplate { width: 100%; min-width: 0; max-width: 100%; flex-wrap: wrap; overflow: visible; }
html.phone #scr-armory .armplate .armprog { flex-wrap: wrap; max-width: 100%; }
html.phone #scr-armory .armplate .armdim { white-space: normal; }
html.phone #scr-armory .armsearch { min-width: 0; max-width: 100%; }
html.phone #bnbody, html.phone #sgbody { width: calc(100% - 24px); max-width: calc(100% - 24px); margin: 0 12px 12px; }
html.phone .loadoutpage { width: 100%; max-width: 100%; }
html.phone .rd-tabs, html.phone .rd-shelf { scroll-snap-type: none; scroll-padding-inline: var(--sp-3); }
html.phone .fg-tin { min-height: 44px; height: auto; }
html.phone .fg-own input[type="color"] { min-height: 0; }
/* A pinned preview taller than a laptop viewport traps the Strike button. */
@media (max-height: 760px) { .fg-left { position: static; } }
html.phone .scrhdr .backbtn { min-height: 44px; }
html.phone .scrhdr .scrtitle { white-space: normal; overflow-wrap: anywhere; letter-spacing: .04em; line-height: 1.05; }
html.phone .screen .rephead { background: var(--paper-face); }
html.phone.landscape .cp-march { flex-direction: row; align-items: center; }
html.phone.landscape .cp-mmap { width: 100px; flex: 0 0 100px; }
html.phone.landscape .cp-mtop { min-width: 0; }
/* A small enamel scroll hint leaves the last readable row visible. */
html.phone #scrollcue { left: 50%; right: auto; width: max-content; transform: translateX(-50%); padding: 3px 10px; margin-bottom: 6px; border: 1px solid var(--gold-dk); border-radius: var(--r-pill); background: var(--field-enamel); }
html.phone #scrollcue::before { content: none; }
html.phone #scrollcue .sc-word { margin: 0; font-size: 11px; letter-spacing: .08em; }
html.phone #scrollcue .sc-arrow { margin: 0 7px 4px 0; width: 7px; height: 7px; }
html #auth-gate { padding: calc(16px + var(--sat)) calc(16px + var(--sar)) calc(16px + var(--sab)) calc(16px + var(--sal)); }
html .ag-card { max-height: none; }
html.phone .ag-card { max-height: none; overflow: visible; }
html .ag-input { font-size: 16px; }
html :is(.km-card, .st-card, .mintbox, .plobbybox, .askbox, .seasonbox, .instbox) {
  max-width: calc(100vw - var(--sal) - var(--sar) - 28px);
  max-height: calc(var(--vh, 1vh) * 100 - var(--sat) - var(--sab) - 28px);
  overflow-y: auto; overscroll-behavior: contain;
}
@media (prefers-reduced-motion: reduce) {
  html :is(.backbtn, .menubtn, .buybtn, .qm-tab, .rd-tab, .rq-tab, .bigbtn, .build) { transition: none; }
}