/* THE PAINTED WAR ROOM
   The new troops are broad colored planes inside warm charcoal contours. The
   furniture follows that drawing: one outline, one pale edge, one shadow plane.
   Paper is for reading, cloth locates a room, painted keys are for acting. This
   replaces the old room pass, so there is still just one room theme to maintain. */
:root {
  --outline: #302a27; --outline-soft: #726454;
  --paper-light: #fff3d5; --paper: #ecd7aa; --paper-shadow: #c8ac79;
  --paper-ink: #302a27; --paper-muted: #6d5a43; --paper-gold: #765524;
  --paper-ready: #285c40; --paper-peril: #953e39; --paper-wash: rgba(255,243,213,.65);
  --wood: #956340; --wood-dark: #42352b; --steel: #829899; --steel-light: #c9d6ce;
  --enamel-blue: #376583; --enamel-blue-light: #6492ab; --enamel-blue-dark: #253e50;
  --enamel-rose: #b8503c; --enamel-rose-light: #db8060; --enamel-rose-dark: #763d31;
  --paper-face: linear-gradient(160deg, var(--paper-light) 0 18%, var(--paper) 18% 100%);
  --enamel-face: linear-gradient(160deg, var(--enamel-blue-light) 0 12%, var(--enamel-blue) 12% 100%);
  --rose-face: linear-gradient(160deg, var(--enamel-rose-light) 0 12%, var(--enamel-rose) 12% 100%);
  --carved-edge: inset 0 2px 0 var(--paper-light), 0 4px 0 var(--outline), var(--sh-2);
  --enamel-edge: inset 0 2px 0 var(--steel-light), 0 4px 0 var(--outline), var(--sh-2);
  --field-paper: var(--paper-face); --field-enamel: var(--enamel-face); --field-wood: var(--wood-dark);
  --room-deep: #253e50; --room-light: #376583; --room-trim: #acc5cf;
  --room-yard: #376583; --room-yard-deep: #253e50; --room-yard-trim: #acc5cf;
  --room-armory: #956340; --room-armory-deep: #594334; --room-armory-trim: #e4c494;
  --room-atlas: #4b7664; --room-atlas-deep: #304f45; --room-atlas-trim: #bfd0a1;
  --room-crown: #9b514b; --room-crown-deep: #613f3b; --room-crown-trim: #e6c494;
  --room-chronicle: #766185; --room-chronicle-deep: #4d415c; --room-chronicle-trim: #cdbed4;
  --room-stores: #477d80; --room-stores-deep: #2c5158; --room-stores-trim: #b7d4ca;
  --room-workshop: #827194; --room-workshop-deep: #50435f; --room-workshop-trim: #d3bfdc;
  --room-vignette: rgba(29,37,39,.46); --room-shade: rgba(29,37,39,.8);
  --field-board: #293c43; --field-board-light: #405963; --field-ink: #fff3d5;
  --field-muted: #c5cbc0; --field-rule: #829899;
  --blueprint: #cdded7; --blueprint-light: #e6ede0; --blueprint-ink: #253e50;
}
/* A quiet architectural backdrop gives the new portraits space to speak. */
html .screen:not(#scr-menu) { background: linear-gradient(160deg, var(--room-vignette), var(--room-shade)), url('/img/menu/war-room.svg') center / cover, var(--field-board); }
html .screen:is(#scr-muster, #scr-loadout, #scr-modes) { --room-light: var(--room-yard); --room-deep: var(--room-yard-deep); --room-trim: var(--room-yard-trim); }
html .screen#scr-armory { --room-light: var(--room-armory); --room-deep: var(--room-armory-deep); --room-trim: var(--room-armory-trim); }
html .screen#scr-campaign { --room-light: var(--room-atlas); --room-deep: var(--room-atlas-deep); --room-trim: var(--room-atlas-trim); }
html .screen:is(#scr-ranked, #scr-challenge, #scr-results) { --room-light: var(--room-crown); --room-deep: var(--room-crown-deep); --room-trim: var(--room-crown-trim); }
html .screen:is(#scr-deeds, #scr-saga, #scr-boons) { --room-light: var(--room-chronicle); --room-deep: var(--room-chronicle-deep); --room-trim: var(--room-chronicle-trim); }
html .screen#scr-shop { --room-light: var(--room-stores); --room-deep: var(--room-stores-deep); --room-trim: var(--room-stores-trim); }
html .screen#scr-forge { --room-light: var(--room-workshop); --room-deep: var(--room-workshop-deep); --room-trim: var(--room-workshop-trim); }
body::after { border: 6px solid var(--wood-dark); box-shadow: inset 0 2px var(--paper-shadow); }
.kingdomframe i { opacity: .65; width: 42px; height: 42px; }

/* Real engraved seals, rather than platform glyphs, identify each room. */
html .screen:not(#scr-menu) .scrhdr { position: sticky; top: 0; z-index: 8; isolation: isolate; background: linear-gradient(160deg, var(--room-light) 0 25%, var(--room-deep) 25% 100%); border: 3px solid var(--outline); border-top-color: var(--room-trim); border-radius: var(--r-sm); box-shadow: 0 4px 0 var(--outline), var(--sh-2); padding-block: 10px; gap: 14px; }
html .screen:not(#scr-menu) .scrhdr::before, html .screen:not(#scr-menu) .scrhead::before { content: none; }
html .screen:not(#scr-menu) .scrhead { padding-left: 0; gap: 0; }
.room-seal { flex: 0 0 44px; width: 44px; height: 48px; display: grid; place-items: center; background: var(--room-light); color: var(--paper-light); border: 2px solid var(--outline); border-top-color: var(--room-trim); border-radius: var(--r-xs) var(--r-xs) var(--r-xl) var(--r-xl); box-shadow: 0 3px 0 var(--outline); transform: rotate(-5deg); }
.room-seal .ic { width: 25px; height: 25px; }
.room-label { font: 800 11px/1.4 var(--font-ui); text-transform: uppercase; letter-spacing: .16em; color: var(--room-trim); }
html .screen:not(#scr-menu) .scrhead .scrtitle { font: 800 32px/1 var(--font-display); color: var(--cloth-ink); -webkit-text-fill-color: currentColor; text-shadow: 0 2px var(--outline); }
html .screen:not(#scr-menu) .scrhead :is(.scrsub, .scrkick) { color: var(--cloth-ink); text-shadow: none; }
html .screen:not(#scr-menu) .scrhdr .backbtn { background: var(--paper-face); color: var(--paper-ink); border: 2px solid var(--outline); box-shadow: 0 3px 0 var(--outline); text-shadow: none; }
html .screen:not(#scr-menu) .scrhdr .backbtn:hover { color: var(--paper-ink); border-color: var(--paper-shadow); }
.muster-trail { list-style: none; display: flex; align-items: center; gap: 18px; padding: 0; margin: 0; font: 700 13px var(--font-ui); color: var(--steel-light); }
.muster-trail li { display: flex; align-items: center; gap: 6px; }
.muster-trail li + li::before { content: ''; width: 18px; height: 2px; background: var(--room-trim); opacity: .4; margin-right: 2px; }
.muster-trail b { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid var(--room-trim); border-radius: var(--r-pill); font-variant-numeric: var(--nums); }
.muster-trail .current { color: var(--cloth-ink); }
.muster-trail .current b { color: var(--paper-ink); background: var(--paper-light); border: 2px solid var(--outline); }
.muster-trail .complete b { background: var(--room-light); color: var(--cloth-ink); }
.muster-trail .ic { width: 15px; height: 15px; }

/* Shared hardware at every scale: opaque paint, an outline and a press depth. */
html :is(.backbtn, .menubtn, .buybtn, .qm-tab, .rd-tab, .rq-tab, .ar-tab, .loadoutsaveactions button, .armfilters button, .fg-rollbtn, .ask-no) { border: 2px solid var(--outline); background: var(--enamel-face); color: var(--cloth-ink); border-radius: var(--r-sm); box-shadow: var(--enamel-edge); text-shadow: none; }
html :is(.bigbtn, .menubtn.primary, .ag-btn, .ask-yes) { background: var(--rose-face); border: 3px solid var(--outline); border-top-color: var(--enamel-rose-light); color: var(--cloth-ink); text-shadow: 0 1px var(--enamel-rose-dark); box-shadow: inset 0 2px var(--enamel-rose-light), 0 4px 0 var(--outline), var(--sh-2); }
html .bigbtn.alt { background: var(--enamel-face); border-top-color: var(--steel-light); }
html :is(.qm-tab, .rd-tab, .rq-tab).on { background: var(--rose-face); border-color: var(--outline); }
html :is(button, a, input, select, summary):focus-visible { outline: 3px solid var(--paper-light); outline-offset: 3px; box-shadow: 0 0 0 5px var(--outline); }
html :is(.armsearch, .fg-own input) { color: var(--paper-ink); background: var(--paper-light); border: 2px solid var(--outline-soft); }
html :is(.armsearch, .fg-own input)::placeholder { color: var(--paper-muted); opacity: 1; }
html :is(#musterdetail, #musterstage, .armplate, .armcard, .loadouthead, .loadoutsaved, .loadoutarmy, .loadoutworks, .loadoutspells, .modecard, .searchbox, .profbody, .rq-hero, .rq-stakes, .rq-div, .rq-card, .cg-intro, .cg-pickbar, .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) { background: var(--paper-face); border: 2px solid var(--outline); border-top: 3px solid var(--paper-light); box-shadow: var(--carved-edge); border-radius: var(--r-md); }

/* The gate puts play first and gives all ten banners an uninterrupted gallery. */
html #scr-menu { background: linear-gradient(180deg, transparent 12%, var(--room-vignette) 78%), url('/img/menu/kingdom-valley.webp?v=b7f03f18') center / cover; }
html #scr-menu .menucenter { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: 16px; width: min(1250px, 100%); max-width: 1250px; padding: 0 16px 26px; align-content: start; margin: 0 auto; }
html #scr-menu .menuhero { grid-column: 1; grid-row: 1; position: relative; height: auto; align-self: center; }
html #scr-menu .kingdom-logo { height: 182px; max-width: 100%; margin: 0 auto; }
.menu-motto { position: relative; z-index: 1; width: fit-content; margin: 0 auto; padding: 4px 18px; border-radius: var(--r-sm); background: var(--wood-dark); color: var(--cloth-ink); font: 700 16px/1.2 var(--font-display); letter-spacing: .04em; box-shadow: var(--sh-1); }
html #scr-menu .battledeck { grid-column: 1; grid-row: 3; width: min(760px, 100%); margin: 0; justify-self: center; align-self: stretch; }
html #scr-menu #rankbadge { gap: 12px; margin-bottom: 9px; }
html #scr-menu :is(.lp-chip, #topchip, #buygold), html.on-menu :is(#acctname, #settingsbtn, #acctlogout) { background: var(--field-board); border: 2px solid var(--outline); box-shadow: inset 0 2px var(--field-board-light), 0 3px 0 var(--outline); }
html #scr-menu .lp-chip .lp-lab { font-size: 12px; }
html #scr-menu .lp-chip .lp-card { padding: 4px 9px; }
html #scr-menu .modelist { gap: 12px; }
html #scr-menu .bigbtn.modebtn { background: var(--rose-face); border: 3px solid var(--outline); border-top-color: var(--enamel-rose-light); box-shadow: inset 0 2px var(--enamel-rose-light), 0 4px 0 var(--outline), var(--sh-2); min-height: 72px; padding: 12px; color: var(--cloth-ink); }
html #scr-menu .bigbtn.modebtn.alt { background: var(--enamel-face); border-top-color: var(--steel-light); box-shadow: inset 0 2px var(--steel-light), 0 4px 0 var(--outline), var(--sh-2); }
html #scr-menu .bigbtn.modebtn .bttl { font: 800 25px/1.1 var(--font-display); text-shadow: 0 1px var(--outline); }
html #scr-menu .bigbtn.modebtn .bsub { font: 500 12px/1.25 var(--font-ui); }
html #scr-menu .adventuredeck { grid-column: 1; grid-row: 4; justify-self: center; align-self: stretch; width: min(760px, 100%); margin: 0; gap: 12px; }
/* Campaign, Gauntlet and Clash are three buttons of one size in one row. The grid
   is restated at the specificity of the withclash/withgauntlet rules in kingdom.css
   (and its phone twins), which each counted columns for a different shape of deck. */
html #scr-menu .adventuredeck.withclash.withgauntlet, html.phone #scr-menu .adventuredeck.withclash.withgauntlet { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(760px, 100%); }
html #scr-menu .adventuredeck.withgauntlet .campaignbtn, html.phone #scr-menu .adventuredeck.withgauntlet .campaignbtn { grid-column: auto; }
html #scr-menu .adventurecard { background: var(--paper-face); border: 2px solid var(--outline); box-shadow: var(--carved-edge); min-height: 72px; padding: 0; }
html #scr-menu .adventurecard img { display: none; }
html #scr-menu .adventurecard span { background: none; border-left: 0; margin: 0; color: var(--paper-ink); text-shadow: none; font-size: 18px; }
html #scr-menu :is(.clashbtn, .gauntletbtn) { background: var(--paper-face); border: 2px solid var(--outline); box-shadow: var(--carved-edge); color: var(--paper-ink); }
html #scr-menu .racerow { grid-column: 1; grid-row: 2; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 10px; margin: 0; }
html #scr-menu .racecard:nth-child(6) { grid-column: auto; }
html #scr-menu .racecard { min-height: 170px; padding: 10px 5px 25px; }
html #scr-menu .rc-cloth { background: var(--facd); background: linear-gradient(160deg, var(--fac) 0 32%, var(--facd) 32% 100%); }
html #scr-menu .rc-sheen { opacity: .15; }
html #scr-menu .racecrest { width: 26px; height: 30px; opacity: 1; }
html #scr-menu .rc-host { --host-size: 90px; margin-bottom: 4px; }
html #scr-menu .racename { font-size: 15px; color: var(--cloth-ink); text-shadow: 0 1px var(--outline); }
html #scr-menu .menurow { grid-column: 1; grid-row: 5; width: 100%; gap: 12px; margin: 0; }
html #scr-menu .menurow .menubtn { min-height: 72px; background: var(--paper-face); border: 2px solid var(--outline); box-shadow: var(--carved-edge); padding: 10px 12px; }
html #scr-menu .menurow .menubtn .mb-tx { color: var(--paper-ink); font-size: 18px; }
html #scr-menu .menurow .menubtn .mb-sub { display: block; color: var(--paper-muted); font: 500 13px/1.2 var(--font-ui); }
html #scr-menu .menurow .menubtn .mb-ic { background: var(--wood); color: var(--paper-light); border: 2px solid var(--outline); box-shadow: 0 2px 0 var(--outline); }

/* Clean stages show the new silhouettes without haze. The numbered wax seal
   carries selection in shape as well as hue; full armies can still be compared. */
html #scr-muster .md-head { background: var(--paper-wash); border-radius: var(--r-sm); }
html #scr-muster .ms-plinth { background: linear-gradient(160deg, var(--steel-light) 0 28%, var(--enamel-blue-light) 28% 100%); border: 3px solid var(--outline); box-shadow: 0 3px 0 var(--outline); }
html #scr-muster :is(.ms-light, .ms-halo) { opacity: .15; }
html #scr-muster .md-troop { background: var(--paper-light); border: 1px solid var(--outline-soft); box-shadow: 0 2px 0 var(--paper-shadow); }
html #scr-muster .md-troop.on { border: 2px solid var(--enamel-blue); }
html #scr-loadout .loadouthead { border-left: 6px solid var(--fac); }
html #scr-loadout .loadoutpage { gap: 14px; }
html #scr-loadout .loadouthead { order: 0; }
html #scr-loadout .loadoutarmy { order: 1; }
html #scr-loadout .loadoutspells { order: 2; }
html #scr-loadout .loadoutworks { order: 3; }
html #scr-loadout .loadoutsaved { order: 4; }
html #scr-loadout .loadoutfoot { order: 5; position: sticky; bottom: 0; z-index: 6; background: var(--paper-face); padding: 10px 12px; border: 2px solid var(--outline); border-radius: var(--r-sm); box-shadow: var(--sh-3); }
html #scr-loadout .loadoutgrid { grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); gap: 9px; padding: 12px; max-height: none; overflow: visible; }
html #scr-loadout :is(.loadoutunit, .loadoutspell) { border: 2px solid var(--outline-soft); background: var(--paper-light); box-shadow: 0 3px 0 var(--paper-shadow); min-height: 140px; padding: 8px 5px; transition: transform var(--t-2) var(--e-back), border-color var(--t-2) var(--e-out); }
html #scr-loadout :is(.loadoutunit, .loadoutspell).on { border: 2px solid var(--outline); background: var(--enamel-face); box-shadow: inset 0 2px var(--steel-light), 0 3px 0 var(--outline); }
html #scr-loadout :is(.loadoutunit, .loadoutspell).held { opacity: .75; }
html #scr-loadout .loadoutunit canvas { width: 78px; height: 78px; }
html #scr-loadout .loadoutname { font: 800 15px/1.15 var(--font-display); text-align: center; }
html #scr-loadout .loadoutrole { font: 700 11px/1.4 var(--font-ui); }
html #scr-loadout .loadoutcost { font: 700 13px/1.4 var(--font-display); }
html #scr-loadout .loadouttick { width: 25px; height: 25px; background: var(--enamel-rose); color: var(--cloth-ink); border: 2px solid var(--outline); box-shadow: 0 2px 0 var(--outline); }
html #scr-loadout .loadoutsectiontitle { padding: 9px 12px; }
html #scr-loadout .loadoutsectiontitle b { font: 800 16px var(--font-display); }
html #scr-loadout .loadoutsectiontitle span { font: 500 12px var(--font-ui); }
html #scr-loadout .loadouthint { background: none; color: var(--paper-ink); font: 600 13px/1.3 var(--font-ui); padding: 0; }
html #scr-loadout .loadoutsavename b { font-size: 13px; }
html #scr-loadout :is(.loadoutsavename em, .loadoutsaveunits > em) { font-size: 12px; }
html #scr-loadout .loadoutsaveactions button { min-height: 34px; padding: 5px 10px; font-size: 12px; }
html #scr-loadout .loadoutwork { background: var(--paper-light); border-color: var(--paper-shadow); }
html #scr-loadout .loadoutwork span b { font-size: 13px; }
html #scr-loadout .loadoutwork span em { font-size: 11px; }
html #scr-loadout .loadoutcount { color: var(--paper-ink); background: var(--paper-light); border: 2px solid var(--outline-soft); }
html #scr-armory .armcard { border: 2px solid var(--outline); border-top: 5px solid var(--cat, var(--wood)); }
html #scr-armory .armcard.owned { border-color: var(--outline); border-top-color: var(--cat, var(--paper-ready)); }
html #scr-armory .armcard.ready { border-color: var(--paper-ready); box-shadow: var(--carved-edge), inset 0 0 0 1px var(--paper-ready); }
html #scr-armory .armicon { width: 82px; height: 82px; background: var(--paper-light); box-shadow: none; filter: none; border-radius: var(--r-md); }
html #scr-armory .armcard.ready .armicon { filter: none; }
html #scr-armory .aname { font: 800 20px/1.1 var(--font-display); }
html #scr-armory .astats span { background: var(--paper-light); box-shadow: inset 0 0 0 1px var(--paper-shadow); }
html #scr-armory .astats em { color: var(--paper-muted); font-size: 11px; }
html #scr-armory .afield { background: var(--paper-light); color: var(--paper-ink); }
html #scr-armory .afoot .owned { background: var(--wood-dark); color: var(--paper-light); box-shadow: none; }
html #scr-armory .armcard .buybtn.go { color: var(--cloth-ink); background: var(--paper-ready); border: 2px solid var(--outline); box-shadow: 0 3px 0 var(--outline); }
html #scr-armory .armsearch::placeholder { color: var(--paper-muted); opacity: 1; }
html #scr-armory .armcard .buybtn.dim em { font-size: 11px; }
html #scr-menu :is(.clashbtn, .gauntletbtn) .cb-sub { font-size: 11px; }

/* One artifact per room, built from the same painted materials. */
html #scr-campaign .cp-march { border-left: 6px solid var(--room-atlas); }
html #scr-campaign .cp-mmap { border: 3px solid var(--outline); border-radius: var(--r-sm); box-shadow: 0 3px 0 var(--outline); }
html #scr-campaign .cp-mmap canvas { filter: none; }
html #scr-ranked .rq-hero { border-top: 6px solid var(--room-crown); }
html #scr-ranked .rq-div { border-top: 4px solid var(--room-crown); }
html #scr-ranked .rq-dn { color: var(--paper-ink); }
html #scr-deeds :is(.rd-ledger, .rd-panel), html #scr-saga #sgbody, html #scr-boons #bnbody { border-left: 6px solid var(--room-chronicle); }
html #scr-shop :is(.qmfw, .qmsk, .qmcos, .qmem) { border-top: 4px solid var(--room-stores); }
html #scr-shop :is(.qmfw-pv, .qmcos-pv) { background: var(--enamel-face); border: 2px solid var(--outline); box-shadow: inset 0 2px var(--steel-light); }
html #scr-forge .fg-stage { background: var(--paper-face); border-top: 5px solid var(--room-workshop); }
html #scr-forge .fg-ch.on { box-shadow: 0 0 0 3px var(--room-workshop); }
html #scr-profile .profbody, html #scr-report #reportbox { border-left: 6px solid var(--enamel-blue); }
html #scr-search .searchbox { border-top: 6px solid var(--enamel-blue); }
html #scr-results #resultbox { border-top: 6px solid var(--gold); box-shadow: var(--carved-edge), var(--sh-4); }
html #scr-results #resultbox.lose { border-top-color: var(--paper-peril); }
html #scr-modes .modegrid { width: min(1100px, 100%); margin: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
html #scr-modes .modecard { min-height: 260px; border-top: 6px solid var(--room-yard); }
html #scr-modes .modecard .micon { color: var(--enamel-blue); }
html #scr-modes .modecard .mname { color: var(--paper-ink); font: 800 32px var(--font-display); }
html #scr-modes .modecard :is(.mdesc, .mtag) { color: var(--paper-muted); text-shadow: none; }
/* Unit dossiers and field tips are pages from the same command ledger. */
html :is(#tip, #unittip) { --ink: var(--paper-ink); --muted: var(--paper-muted); --gold-lt: var(--paper-gold); --gold-bright: var(--paper-ink); --ready: var(--paper-ready); --peril: var(--paper-peril); background: var(--paper-face); color: var(--paper-ink); border: 2px solid var(--outline); border-radius: var(--r-md); box-shadow: 0 4px 0 var(--outline), var(--sh-4); backdrop-filter: none; }
html #tip::before, html #tip::after { content: none; }
html #tip .thead, html #unittip .ut-head { background: var(--enamel-face); border-bottom: 2px solid var(--outline); }
html #tip :is(.tname, .trole, .tcat, .tworth, .tonly), html #unittip :is(.ut-name, .ut-role, .ut-cat) { color: var(--cloth-ink); text-shadow: none; }
html #tip .tart, html #unittip .ut-art { background: var(--steel-light); border-radius: var(--r-sm); filter: none; }
html #tip .tgrid { background: var(--paper-shadow); }
html #tip .tcell { background: var(--paper-light); }
html #tip .tcell :is(b,i), html #unittip .ut-stats :is(b,i,em) { color: var(--paper-ink); }
html #tip .tcell.twide b { white-space: normal; }
html #tip .tpow span, html #unittip .ut-pow span { color: var(--paper-ink); background: var(--paper-light); border-color: var(--paper-shadow); }
html #tip .tstrong, html #unittip .ut-strong { color: var(--paper-ready); }
html #tip .tweak, html #unittip .ut-weak { color: var(--paper-peril); }
html #unittip .ut-desc { color: var(--paper-muted); font-family: var(--font-ui); }
html #unittip .ut-foot { border-color: var(--paper-shadow); background: var(--paper-light); }
html #unittip .ut-foot.own { color: var(--paper-ready); }
html #unittip .ut-foot.locked { color: var(--paper-gold); }
html #tip .tclose, html #unittip .ut-close { color: var(--cloth-ink); background: var(--outline); border: 1px solid var(--steel-light); }
@media (hover: hover) {
  html :is(.armcard, .cp-march, .modecard):hover { transform: translateY(-2px); box-shadow: var(--carved-edge), var(--sh-3); }
  html #scr-loadout :is(.loadoutunit, .loadoutspell):hover { transform: translateY(-2px); border-color: var(--enamel-blue); filter: none; }
}
@media (max-width: 1149px) {
  html #scr-menu .racerow { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 12px; }
  html #scr-menu .racecard { min-height: 154px; }
  html #scr-menu .rc-host { --host-size: 65px; }
  .muster-trail { gap: 7px; }
  .muster-trail li + li::before { width: 8px; }
}
@media (max-width: 700px) {
  .room-seal, .room-label { display: none; }
  html .screen:not(#scr-menu) .scrhead .scrtitle { font-size: 21px; }
  html .screen:not(#scr-menu) .scrhdr { padding: 6px; gap: 8px; }
  .muster-trail { gap: 4px; font-size: 11px; }
  .muster-trail b { width: 18px; height: 18px; }
  .muster-trail li { gap: 3px; }
  .muster-trail li + li::before { display: none; }
  .muster-trail li:not(.current) span { display: none; }
  html #scr-menu .menucenter { grid-template-columns: 1fr; gap: 12px; padding: 0 3px 15px; }
  html #scr-menu .menuhero { height: auto; grid-column: 1; }
  html #scr-menu .kingdom-logo { height: 130px; max-width: 100%; }
  .menu-motto { font-size: 13px; padding: 4px 8px; }
  html #scr-menu .battledeck { grid-column: 1; grid-row: 3; }
  html #scr-menu .bigbtn.modebtn { min-height: 59px; padding: 8px; }
  html #scr-menu .bigbtn.modebtn .bttl { font-size: 21px; }
  html #scr-menu .adventuredeck { grid-column: 1; grid-row: 4; }
  html #scr-menu .adventurecard { min-height: 59px; }
  html #scr-menu .adventurecard span { font-size: 16px; }
  html #scr-menu .racerow { grid-column: 1; grid-row: 2; gap: 8px 5px; }
  html #scr-menu .racecard { min-height: 126px; padding: 6px 3px 22px; }
  html #scr-menu .rc-host { --host-size: 54px; }
  html #scr-menu .racename { font-size: 12px; }
  html #scr-menu .racecrest { width: 18px; height: 22px; }
  html #scr-menu .menurow { grid-column: 1; grid-row: 5; flex-wrap: wrap; gap: 8px; }
  html #scr-menu .menurow .menubtn { flex: 1 0 40%; min-height: 58px; }
  html #scr-menu .menurow .menubtn .mb-tx { font-size: 15px; }
  html #scr-menu .menurow .menubtn .mb-sub { font-size: 11px; }
  html #scr-loadout .loadoutgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px; }
  html #scr-loadout :is(.loadoutunit, .loadoutspell) { min-height: 127px; }
  html #scr-loadout .loadoutunit canvas { width: 65px; height: 65px; }
  html #scr-loadout .loadoutname { font-size: 14px; }
  html #scr-loadout .loadoutfoot { padding: 9px; }
  html #scr-armory .armicon { width: 70px; height: 70px; }
  html #scr-modes .modegrid { grid-template-columns: 1fr; padding: 10px 14px 24px; }
  html #scr-modes .modecard { min-height: 220px; }
}
/* Preserve physical safe areas in the phone's older flex layout, but move the
   primary battle orders ahead of the gallery just as on the desktop grid. */
html.phone #scr-menu .menuhero { order: 0; }
html.phone #scr-menu .racerow { order: 1; }
html.phone #scr-menu .battledeck { order: 2; }
html.phone #scr-menu .adventuredeck { order: 3; }
html.phone #scr-menu .menurow { order: 5; }
html.phone #scr-menu .menurow .menubtn { flex: 1 0 40%; }
html.phone .screen .scrhdr { border-width: 2px; }
/* Old phone orientation rules used named grid areas and a flexible portrait
   height. Give this gallery a real portrait height in both orientations: a
   100% canvas inside an auto-height host otherwise collapses to zero in Safari. */
html.phone.portrait #scr-menu .racerow { order: 1; }
html.phone.portrait #scr-menu .battledeck { order: 2; }
html.phone.portrait #scr-menu .adventuredeck { order: 3; max-width: none; }
html.phone.portrait #scr-menu .menurow { order: 5; grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.phone.portrait #scr-menu .menurow .menubtn { padding: 8px; min-height: 58px; }
html.phone.portrait #scr-menu .menurow .menubtn .mb-tx { font-size: 15px; }
html.phone.portrait #scr-menu .rc-host, html.phone.landscape #scr-menu .rc-host { flex: none; height: var(--host-size); }
html.phone.landscape #scr-menu .rc-host canvas { width: min(100%, var(--host-size)); height: auto; aspect-ratio: 1 / 1; }
html.phone.landscape #scr-menu { display: flex; flex-direction: column; gap: 0; grid-template-areas: none; padding: var(--sat) calc(10px + var(--sar)) calc(18px + var(--sab)) calc(10px + var(--sal)); }
html.phone.landscape #scr-menu .topbarmenu { grid-area: auto; position: relative; flex: none; width: 100%; min-height: 46px; height: 46px; padding: 8px calc(12px + var(--acctw, 160px)) 0 8px; }
html.phone.landscape #scr-menu .menucenter { display: grid; grid-template-areas: none; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: auto; height: auto; min-height: 0; gap: 12px; align-content: start; }
html.phone.landscape #scr-menu .menuhero { grid-area: 1 / 1 / 2 / 3; height: 118px; width: 100%; padding: 0; align-items: center; justify-content: center; gap: 0; }
html.phone.landscape #scr-menu .gametitle { align-self: center; }
html.phone.landscape #scr-menu .kingdom-logo { height: 90px; }
html.phone.landscape #scr-menu .menu-motto { font-size: 13px; }
html.phone.landscape #scr-menu .battledeck { grid-area: 3 / 1 / 4 / 2; width: 100%; align-self: stretch; }
html.phone.landscape #scr-menu .bigbtn.modebtn { min-height: 60px; }
html.phone.landscape #scr-menu .adventuredeck { grid-area: 3 / 2 / 4 / 3; width: 100%; align-self: stretch; }
html.phone.landscape #scr-menu .adventurecard { min-height: 60px; }
html.phone.landscape #scr-menu .racerow { grid-area: 2 / 1 / 3 / 3; grid-template-rows: auto; padding: 0; }
html.phone.landscape #scr-menu .racecard { min-height: 126px; padding: 6px 3px 22px; }
html.phone.landscape #scr-menu .menurow { grid-area: 4 / 1 / 5 / 3; }
html.phone.landscape #scr-menu .menurow .menubtn { flex: 1 1 0; }
@media (prefers-reduced-motion: reduce) {
  html :is(.armcard, .cp-march, .modecard, .loadoutunit, .loadoutspell):hover { transform: none; transition: none; }
}