/* The user's illustrated kingdom hall: sprite art, jewel enamel and warm paper.
   Loaded after the legacy sheets so the same materials follow the commander
   from the home screen into the muster and the live battle HUD. */
:root {
  --paper-light: #fff0ca;
  --paper: #ecd09a;
  --paper-shadow: #b68a4e;
  --paper-ink: #30200f;
  --paper-muted: #67502d;
  --wood: #754821;
  --wood-dark: #352113;
  --steel: #8c9aab;
  --steel-light: #d8e4e7;
  --enamel-rose: #ad225c;
  --enamel-rose-light: #e85997;
  --enamel-rose-dark: #580e39;
  --enamel-blue: #176baf;
  --enamel-blue-light: #62b7e5;
  --enamel-blue-dark: #102d54;
  --paper-face: radial-gradient(ellipse at 45% 22%, var(--paper-light), transparent 85%),
    repeating-linear-gradient(115deg, transparent 0 4px, rgba(var(--gold-rgb), .035) 5px, transparent 6px 9px),
    linear-gradient(160deg, var(--paper-light), var(--paper) 75%, var(--paper-shadow));
  --carved-edge: 0 2px 0 var(--wood-dark), 0 4px 9px rgba(var(--shade-rgb), .4),
    inset 0 0 0 1px var(--gold-hi), inset 0 0 0 4px var(--paper-shadow), inset 0 0 0 5px var(--paper-light);
}

/* A fixed wooden surround does not participate in screen fitting or eat input. */
body::after {
  content: ''; position: fixed; inset: 3px; z-index: 90; pointer-events: none;
  border: 10px ridge var(--wood); border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 2px var(--gold-dk), 0 0 0 2px var(--wood-dark), inset 0 0 12px rgba(var(--shade-rgb), .7);
}
html.inmatch body::after { border-width: 4px; }
.kingdomframe { position: fixed; inset: 0; z-index: 91; pointer-events: none; }
.kingdomframe i { position: absolute; width: 65px; height: 65px; background: url('/img/menu/frame-corner.svg') center / contain no-repeat; }
.kingdomframe i:nth-child(1) { top: 0; left: 0; }
.kingdomframe i:nth-child(2) { top: 0; right: 0; transform: rotate(90deg); }
.kingdomframe i:nth-child(3) { bottom: 0; right: 0; transform: rotate(180deg); }
.kingdomframe i:nth-child(4) { bottom: 0; left: 0; transform: rotate(270deg); }
html.inmatch .kingdomframe i { width: 28px; height: 28px; }
/* A PHONE IS ITS OWN GLASS, AND THE GLASS ALREADY HAS A FRAME. A handset's
   screen ends in rounded corners, a notch and a home bar, and a square wooden
   surround drawn inside that is cut by all three: the four brass corners sat
   on the Controls "?", the keep stud and the purse in a battle, and the 13px
   ridge cost a fifteenth of a 390px screen's height on every edge of every
   menu. Nothing a phone game puts round its glass survives the hardware's own
   — so on a phone the illustration runs to the edge, like every game on that
   shelf, and the safe-area insets (`--edge-*`) do the work the frame was
   pretending to. A desktop keeps the whole surround. */
html.phone body::after, html.phone .kingdomframe { display: none; }

#scr-menu {
  background: url('/img/menu/kingdom-valley.webp?v=b7f03f18') center center / cover no-repeat;
  padding: 0 18px 16px; isolation: isolate;
}
#scr-menu::before, #scr-menu::after { content: none; }
#scr-menu .topbarmenu {
  flex: 0 0 48px; min-height: 48px; box-sizing: border-box;
  padding: 9px calc(12px + var(--acctw, 250px)) 0 8px;
}
#scr-menu .lp-chip, #scr-menu #topchip, #scr-menu #buygold,
html.on-menu #acctname, html.on-menu #settingsbtn, html.on-menu #acctlogout {
  background: linear-gradient(160deg, var(--enamel-blue-dark), var(--bg));
  border-color: var(--gold-dk); border-radius: var(--r-sm);
  box-shadow: inset 0 1px 0 var(--steel-light), inset 0 -2px 0 var(--wood-dark), 0 2px 4px rgba(var(--shade-rgb), .6);
}
#scr-menu .lp-chip { min-height: 38px; }
#scr-menu .lp-chip .lp-card { padding: 5px 10px; }
#scr-menu .menucenter {
  display: grid; flex: 1 0 auto; position: relative; margin: 0 auto;
  width: 100%; max-width: 1780px; padding: 0 14px; gap: 13px 14px;
  grid-template-columns: minmax(0, 1fr) minmax(335px, 31%) minmax(0, 1fr);
  grid-template-rows: clamp(220px, 29vh, 320px) clamp(245px, 32vh, 330px) auto;
  align-content: start;
}
#scr-menu .menuhero {
  grid-column: 2; grid-row: 1; align-self: start;
  width: 100%; margin: 0; padding: 0; min-height: 0;
}
#scr-menu .gametitle { display: block; margin: 0; line-height: 0; filter: none; }
.kingdom-logo {
  display: block; width: auto; height: clamp(185px, 25vh, 276px); max-width: 100%; object-fit: contain;
  filter: drop-shadow(0 5px 2px rgba(var(--shade-rgb), .45));
}
#scr-menu .menurule { display: none; }

/* Five cloths either side of the battle controls. The tenth kingdom stays in
   the game even though the supplied mockup only pictured nine. */
#scr-menu .racerow {
  grid-column: 1 / -1; grid-row: 2; align-self: start;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) calc(31% + 28px) repeat(5, minmax(0, 1fr));
  gap: 7px; width: 100%; margin: 0; transform: none;
}
#scr-menu .racecard:nth-child(n+6) { grid-column: auto; }
#scr-menu .racecard:nth-child(6) { grid-column: 7; }
#scr-menu .racecard {
  --notch: 23px; width: 100%; min-width: 0; min-height: clamp(200px, 25vh, 260px);
  padding: 10px 5px 30px; gap: 0; transform-origin: top center;
  filter: drop-shadow(0 5px 3px rgba(var(--shade-rgb), .55));
  transition: filter var(--t-2) var(--e-out), transform var(--t-3) var(--e-back);
}
/* THE LIFT IS A CURSOR'S, NOT A FINGER'S. A touch screen fires :hover on the
   tap and then leaves it standing on whatever was pressed last, so a banner a
   commander came back from sat raised and lit on the home screen as if it were
   still under the hand. Behind `(hover: hover)` every lift below belongs to
   the machines that can take it away again; a finger gets the `:active` press. */
#scr-menu .racecard:focus-visible {
  transform: translateY(-4px) rotate(-1deg); filter: drop-shadow(0 7px 5px rgba(var(--shade-rgb), .55)) brightness(1.17);
}
@media (hover: hover) {
  #scr-menu .racecard:hover {
    transform: translateY(-4px) rotate(-1deg); filter: drop-shadow(0 7px 5px rgba(var(--shade-rgb), .55)) brightness(1.17);
  }
}
#scr-menu .racecard:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 5px; }
#scr-menu .racecard:active { transform: translateY(2px); }
#scr-menu .rc-cloth { background: linear-gradient(160deg, var(--gold-hi), var(--gold-dk) 50%, var(--gold-lt)); }
#scr-menu .rc-cloth::before {
  background: repeating-linear-gradient(90deg, transparent 0 2px, rgba(var(--shade-rgb), .10) 3px 4px),
    linear-gradient(90deg, rgba(var(--shade-rgb), .25), transparent 20%, rgba(var(--lit-rgb), .15) 44%, transparent 55%, rgba(var(--shade-rgb), .3)),
    linear-gradient(180deg, var(--fac), var(--facd) 70%, var(--bg));
}
#scr-menu .rc-rod { left: -4px; right: -4px; height: 7px; top: -5px; }
#scr-menu .racecard:first-child .rc-rod { left: -6px; }
#scr-menu .racecard:last-child .rc-rod { right: -6px; }
#scr-menu .racecrest { position: absolute; top: 9px; right: 5px; width: 21px; height: 25px; opacity: .75; animation: none; }
#scr-menu .rc-host { --host-size: clamp(73px, 10vh, 110px); order: -1; display: flex; justify-content: center; width: 100%; height: var(--host-size); min-height: 0; margin: 1px 0 6px; }
/* The troop canvas is the picture itself: object-fit cannot letterbox what was
   already painted into it. One square size must clear both the card's width and
   the host's height, including the narrow ten-banner desktop layout. */
#scr-menu .rc-host canvas { width: min(110px, 100%, var(--host-size)); height: auto; max-width: 100%; aspect-ratio: 1 / 1; margin: 0; filter: drop-shadow(0 3px 1px rgba(var(--shade-rgb), .7)); }
#scr-menu .racename {
  display: block; margin: 0; min-height: 2.2em; font: 800 clamp(13px, 1.1vw, 19px)/1.1 var(--font-display);
  letter-spacing: .015em; color: var(--gold-hi); text-shadow: 0 2px 1px var(--bg), 1px 0 var(--bg); text-transform: uppercase;
}
#scr-menu .raceblurb { display: block; margin: 6px 0 0; padding: 0 1px; font: 600 clamp(10px, .8vw, 13px)/1.12 var(--font-display); color: var(--cloth-ink); opacity: 1; }

#scr-menu .battledeck { grid-column: 2; grid-row: 2; align-self: start; width: 100%; margin: clamp(12px, 1.5vw, 28px) 0 0; z-index: 3; }
#scr-menu #rankbadge {
  width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; margin: 0 0 8px;
}
#scr-menu .lp-chip { min-width: 0; width: 100%; }
#scr-menu .lp-chip .lp-card { flex: 1 1 auto; min-width: 0; padding: 4px 7px; gap: 6px; }
#scr-menu .lp-chip .lp-rk { overflow: hidden; text-overflow: ellipsis; }
#scr-menu .lp-chip .lp-rankck { flex: none; padding: 0 8px; }
#scr-menu .lp-chip .lp-lab { font-size: 12px; letter-spacing: .02em; }
#scr-menu .lp-chip .lp-tick { width: 21px; height: 21px; }
#scr-menu .modelist { gap: 12px; }
#scr-menu .bigbtn.modebtn {
  flex: 1; width: auto; min-width: 0; min-height: 57px; padding: 10px 7px; border: 3px ridge var(--gold-lt); border-radius: var(--r-md);
  color: var(--gold-hi); background: linear-gradient(160deg, var(--enamel-rose-light), var(--enamel-rose) 40%, var(--enamel-rose-dark));
  box-shadow: 0 0 0 2px var(--wood-dark), 0 4px 0 var(--wood), 0 7px 10px rgba(var(--shade-rgb), .5), inset 0 0 0 2px var(--enamel-rose-dark), inset 0 4px 0 rgba(var(--lit-rgb), .35);
}
#scr-menu .bigbtn.modebtn.alt { border: 3px ridge var(--steel-light); color: var(--gold-hi); background: linear-gradient(160deg, var(--enamel-blue-light), var(--enamel-blue) 40%, var(--enamel-blue-dark)); box-shadow: 0 0 0 2px var(--enamel-blue-dark), 0 4px 0 var(--steel), 0 7px 10px rgba(var(--shade-rgb), .5), inset 0 0 0 2px var(--enamel-blue-dark), inset 0 4px 0 rgba(var(--lit-rgb), .35); }
#scr-menu .bigbtn.modebtn .bttl { font: 800 clamp(17px, 1.5vw, 25px)/1 var(--font-display); letter-spacing: 0; text-shadow: 0 2px 1px var(--bg); white-space: nowrap; }
#scr-menu .bigbtn.modebtn .bsub { color: var(--cloth-ink); opacity: 1; white-space: normal; }
#scr-menu .modebtn::before, #scr-menu .modebtn::after { content: none; }
@media (hover: hover) { #scr-menu .bigbtn.modebtn:hover { filter: brightness(1.12); transform: translateY(-2px); } }
#scr-menu .bigbtn.modebtn:active { box-shadow: 0 0 0 2px var(--wood-dark), 0 1px 0 var(--wood), inset 0 3px 8px rgba(var(--shade-rgb), .32); }
#scr-menu .bigbtn.modebtn.alt:active { box-shadow: 0 0 0 2px var(--enamel-blue-dark), 0 1px 0 var(--steel), inset 0 3px 8px rgba(var(--shade-rgb), .32); }

.adventuredeck {
  grid-column: 2; grid-row: 2; align-self: end; justify-self: center;
  width: min(270px, 100%); margin-bottom: 13px; display: grid; grid-template-columns: 1fr; z-index: 3;
}
.adventurecard {
  position: relative; display: flex; align-items: center; min-width: 0; min-height: 78px; padding: 4px 0 4px 5px;
  border: 2px ridge var(--steel); border-radius: var(--r-sm); background: var(--paper-face); color: var(--paper-ink);
  box-shadow: var(--carved-edge); cursor: pointer; transition: transform var(--t-2) var(--e-back), filter var(--t-2) var(--e-out);
}
.adventurecard img { flex: none; width: 70px; height: 66px; object-fit: contain; filter: drop-shadow(0 2px 1px var(--paper-shadow)); }
.adventurecard span {
  align-self: stretch; flex: 1; display: grid; place-items: center; min-width: 0; margin: -4px -1px -4px 4px;
  padding: 8px; box-sizing: border-box; background: linear-gradient(160deg, var(--wood), var(--wood-dark));
  color: var(--paper-light); font: 800 clamp(16px, 1.2vw, 20px)/1 var(--font-display);
  text-transform: uppercase; border-left: 1px solid var(--gold-dk);
}
#scr-menu .adventurecard.campaignbtn { overflow: visible; }
.adventurecard .adventure-progress:not(:empty) {
  position: absolute; top: -9px; right: -6px; z-index: 2; padding: 3px 7px;
  border: 1px solid var(--wood-dark); border-radius: var(--r-pill);
  background: var(--gold-hi); color: var(--paper-ink);
  box-shadow: 0 2px 4px rgba(var(--shade-rgb), .5); font: 800 11px/1 var(--font-display);
}
.adventurecard.walking { border-color: var(--gold-hi); }
@media (hover: hover) { .adventurecard:hover { transform: translateY(-3px); filter: brightness(1.08); } }
.adventurecard:active { transform: translateY(2px); box-shadow: inset 0 3px 7px rgba(var(--shade-rgb), .24), 0 1px 0 var(--paper-shadow); }

#scr-menu .menurow { grid-column: 1 / -1; grid-row: 3; display: flex; flex-wrap: nowrap; width: min(880px, 78%); gap: 12px; margin: 3px auto 0; }
#scr-menu .menurow .menubtn {
  flex: 1 1 0; min-width: 0; min-height: 78px; display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 8px 6px; gap: 5px; text-align: center; border: 2px ridge var(--paper-shadow); border-radius: var(--r-sm);
  background: var(--paper-face); box-shadow: var(--carved-edge); color: var(--paper-ink);
}
#scr-menu .menurow .mode + .door { margin-left: 0; }
#scr-menu .menurow .menubtn .mb-ic { width: 30px; height: 30px; color: var(--wood); background: none; box-shadow: none; filter: drop-shadow(0 1px 0 var(--paper-light)); }
#scr-menu .menurow .menubtn .mb-ic svg { width: 100%; height: 100%; }
#scr-menu .menurow .menubtn .mb-tx { font: 800 clamp(14px, 1.1vw, 18px)/1.1 var(--font-display); text-transform: uppercase; letter-spacing: 0; color: var(--paper-ink); white-space: nowrap; }
#scr-menu .menurow .menubtn .mb-sub { display: none; }
@media (hover: hover) { #scr-menu .menurow .menubtn:hover { transform: translateY(-2px); border-color: var(--gold-hi); filter: brightness(1.06); } }
#scr-menu .menurow .menubtn:active { box-shadow: inset 0 3px 7px rgba(var(--shade-rgb), .24), 0 1px 0 var(--paper-shadow); }
#scr-menu .navbadge { top: -5px; right: -3px; background: var(--ready-ink); color: var(--ready-lt); border-color: var(--ready-dk); }

.ordersboard {
  grid-column: 1 / -1; grid-row: 4; width: 86%; box-sizing: border-box; margin: 0 auto; padding: 9px 14px 12px;
  border: 3px ridge var(--paper-shadow); border-radius: var(--r-sm); background: var(--paper-face);
  box-shadow: var(--carved-edge); color: var(--paper-ink); text-shadow: 0 1px rgba(var(--lit-rgb), .4);
}
.ordershead { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 5px 7px; }
.ordershead h2 { margin: 0; color: var(--paper-ink); font: 800 23px/1 var(--font-display); }
.ordershead h2 span { display: inline-block; vertical-align: middle; margin-left: 10px; padding: 1px 9px 3px; border: 1px solid var(--paper-shadow); background: var(--wood-dark); color: var(--paper-light); border-radius: var(--r-sm); font: 700 16px/1 var(--font-display); font-variant-numeric: var(--nums); }
.ordershead p { margin: 0; font: 600 15px var(--font-display); font-variant-numeric: var(--nums); }
.ordersgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ordercard { display: flex; flex-direction: column; padding: 7px 10px; border: 1px solid var(--paper-shadow); border-radius: var(--r-sm); background: rgba(var(--lit-rgb), .22); box-shadow: inset 0 1px 0 var(--paper-light); }
.order-meta { display: flex; justify-content: space-between; align-items: center; gap: 6px; font: 700 13px var(--font-display); }
.order-meta > span { display: inline-flex; align-items: center; gap: 5px; text-transform: uppercase; }
.order-meta .ic { width: 16px; height: 16px; color: var(--wood); }
.order-meta b { background: linear-gradient(160deg, var(--gold-hi), var(--gold)); border: 1px solid var(--gold-dk); padding: 0 5px; border-radius: var(--r-sm); box-shadow: 0 2px 1px var(--paper-shadow); }
.order-meta .gold { display: inline-flex; align-items: center; gap: 2px; color: var(--paper-ink); }
.ordercard h3 { margin: 6px 0 2px; text-align: center; font: 800 clamp(15px, 1.25vw, 20px)/1.1 var(--font-display); color: var(--paper-ink); }
.ordercard p { flex: 1; margin: 2px 0 9px; text-align: center; font: 600 13px/1.25 var(--font-display); color: var(--paper-ink); }
.order-progress { position: relative; height: 19px; overflow: hidden; border: 1px solid var(--gold-dk); border-radius: var(--r-sm); background: var(--wood-dark); color: var(--cloth-ink); box-shadow: inset 0 2px 2px rgba(var(--shade-rgb), .6); text-shadow: 0 1px var(--bg); }
.order-progress i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(160deg, var(--enamel-blue-light), var(--enamel-blue)); transition: width var(--t-4) var(--e-out); }
.order-progress span { position: relative; display: block; text-align: center; font: 700 12px/18px var(--font-display); font-variant-numeric: var(--nums); }
.order-veto { align-self: flex-end; margin-top: 6px; padding: 2px 11px; border: 1px solid var(--paper-shadow); border-radius: var(--r-sm); background: linear-gradient(160deg, var(--gold-hi), var(--gold)); color: var(--paper-ink); box-shadow: 0 2px 0 var(--paper-shadow), inset 0 1px var(--paper-light); font: 700 12px/1.2 var(--font-display); text-transform: uppercase; cursor: pointer; }
@media (hover: hover) { .order-veto:hover:not(:disabled) { filter: brightness(1.13); } }
.order-veto:disabled { opacity: .6; cursor: default; }
.ordercard.complete { border-color: var(--ready-dk); }
.ordercard.complete .order-progress i { background: var(--ready-dk); }
.resultorders { padding: 12px 18px; margin: 14px auto; max-width: 540px; border: 2px ridge var(--paper-shadow); border-radius: var(--r-sm); background: var(--paper-face); box-shadow: var(--carved-edge); color: var(--paper-ink); text-align: left; }
.resultorders h3 { margin: 0 0 8px; font: 800 22px var(--font-display); }
.resultorders h3 span { float: right; }
.resultorders p { display: flex; align-items: center; gap: 8px; margin: 5px 0; font: 600 15px var(--font-display); }
.resultorders p > span { margin-left: auto; }
.resultorders .gold { color: var(--paper-ink); }
.warpathfold { grid-column: 1 / -1; grid-row: 5; width: 86%; margin: -5px auto 0; color: var(--paper-light); text-shadow: 0 1px 2px var(--bg); }
.warpathfold summary { width: fit-content; margin: 0 auto; padding: 2px 15px; background: var(--wood-dark); border: 1px solid var(--gold-dk); border-radius: var(--r-sm); font: 600 12px var(--font-display); cursor: pointer; }
.warpathfold[open] { background: var(--plate); border-radius: var(--r-sm); }
.deedsextras { width: min(var(--screenw), 100%); margin: 12px auto 0; padding: 0 var(--sp-4); box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; }
.deedsextras .deedsorders, .deedsextras .warpathfold { width: 100%; margin: 0; }
/* WebKit can still report rectangles for controls inside a closed details when
   the child section has author layout rules. Keep the folded actions truly out
   of layout and focus order until their summary opens. */
.deedsextras details:not([open]) > :not(summary) { display: none; }
.deedsextras summary { width: 100%; box-sizing: border-box; padding: 11px 16px; border: 1px solid var(--gold-dk); border-radius: var(--r-sm); background: var(--wood-dark); color: var(--paper-light); font: 700 17px/1.2 var(--font-display); cursor: pointer; }
.deedsextras .ordersboard { width: 100%; margin: 8px 0 0; }
.deedsextras .warpath { width: 100%; padding: 10px; box-sizing: border-box; }
@media (min-width: 1150px) and (max-width: 1450px) {
  #scr-menu .lp-chip .rcrest.sm { display: none; }
}
@media (max-width: 700px) {
  .deedsextras .ordersgrid { grid-template-columns: 1fr; }
  .deedsextras .ordershead { flex-wrap: wrap; }
  .deedsextras .ordercard { min-height: 128px; }
}

/* Carry the same daylight and crafted edges into the existing game screens.
   Dense army tables retain their dark ink ground for readable unit statistics. */
.screen:not(#scr-menu) { background: linear-gradient(160deg, rgba(var(--hall-rgb), .78), rgba(var(--hall-rgb), .94)), url('/img/menu/kingdom-valley.webp?v=b7f03f18') center / cover; }
.screen:not(#scr-menu) .screenhead { border-bottom-color: var(--gold-dk); }
.bigbtn, .menubtn, .build, .adventurecard, .order-veto { touch-action: manipulation; }
.adventurecard:focus-visible, .order-veto:focus-visible, .warpathfold summary:focus-visible { outline: 3px solid var(--enamel-blue-light); outline-offset: 3px; }
#hud .panelish, #hud #mapframe { border-color: var(--gold-dk); box-shadow: inset 0 1px 0 var(--steel-light), inset 0 0 0 3px var(--wood-dark), 0 3px 8px rgba(var(--shade-rgb), .45); }
#hud .build { border-color: var(--paper-shadow); border-radius: var(--r-sm); }
#hud .build.ready { border-color: var(--ready); }

@media (max-width: 1149px) {
  #scr-menu .menucenter { grid-template-columns: 1fr; grid-template-rows: auto; gap: 10px; }
  #scr-menu .menuhero { grid-column: 1; grid-row: 1; }
  #scr-menu .kingdom-logo { height: 170px; }
  #scr-menu .racerow { grid-column: 1; grid-row: 2; grid-template-columns: repeat(10, minmax(0, 1fr)); }
  #scr-menu .racecard:nth-child(6) { grid-column: auto; }
  #scr-menu .racecard { min-height: 160px; }
  #scr-menu .rc-host { --host-size: 60px; }
  #scr-menu .racename { font-size: 13px; }
  #scr-menu .battledeck { grid-column: 1; grid-row: 3; width: min(500px, 100%); margin: 0 auto; }
  #scr-menu .adventuredeck { grid-column: 1; grid-row: 4; width: min(270px, 100%); margin: 0 auto; }
  #scr-menu .adventurecard img { width: 60px; height: 58px; }
  #scr-menu .menurow { grid-column: 1; grid-row: 5; width: 100%; }
  #scr-menu .menurow .menubtn { min-height: 60px; }
}

/* Touch layouts deliberately reflow instead of miniaturizing the desktop art. */
@media (max-width: 700px) {
  #scr-menu .racerow { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 16px; }
  #scr-menu .racecard { min-height: 155px; padding-bottom: 25px; }
  #scr-menu .raceblurb { display: none; }
  #scr-menu .menurow { flex-wrap: wrap; }
  #scr-menu .menurow .menubtn { flex: 1 0 26%; }
  #scr-menu .ordersgrid { grid-template-columns: 1fr; }
  #scr-menu .ordershead { align-items: flex-start; }
  #scr-menu .ordershead h2 { font-size: 21px; }
  #scr-menu .ordershead p { font-size: 12px; }
  #scr-menu .ordercard h3 { font-size: 19px; }
  #scr-menu .ordercard p { font-size: 15px; }
}
html.phone #scr-menu { padding: var(--sat) calc(10px + var(--sar)) calc(18px + var(--sab)) calc(10px + var(--sal)); }
html.phone #scr-menu .topbarmenu { min-height: 53px; flex-basis: 53px; padding-top: 8px; }
html.phone #scr-menu .menucenter { display: flex; flex-direction: column; width: 100%; max-width: none; min-height: 0; padding: 0 6px; gap: 15px; }
html.phone #scr-menu .menuhero { order: 0; width: 100%; margin: 0; padding: 0; }
html.phone #scr-menu .kingdom-logo { height: 165px; }
html.phone #scr-menu .racerow { order: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; margin: 0; gap: 15px 6px; }
html.phone #scr-menu .racecard { min-height: 139px; padding: 7px 3px 25px; }
html.phone #scr-menu .racecard:nth-child(6) { grid-column: auto; }
html.phone #scr-menu .rc-host { --host-size: 68px; display: flex; margin: 0 0 3px; }
html.phone #scr-menu .racename { font-size: 12px; min-height: 2.2em; display: block; }
html.phone #scr-menu .racecrest { width: 14px; height: 17px; top: 6px; right: 3px; }
html.phone #scr-menu .raceblurb { display: none; }
html.phone #scr-menu .battledeck { order: 2; width: 100%; margin: 0; }
html.phone #scr-menu .bigbtn.modebtn { min-height: 55px; padding: 8px 5px; }
html.phone #scr-menu .bigbtn.modebtn .bttl { font-size: 19px; }
html.phone #scr-menu .adventuredeck { order: 3; width: min(270px, 100%); margin: 0 auto; }
html.phone #scr-menu .menurow { order: 4; display: flex; flex-wrap: wrap; width: 100%; margin: 0; gap: 7px; }
html.phone #scr-menu .menurow .menubtn { flex: 1 0 26%; min-height: 60px; padding: 5px; gap: 4px; }
html.phone #scr-menu .menurow .menubtn .mb-ic { width: 25px; height: 25px; }
html.phone #scr-menu .menurow .menubtn .mb-tx { font-size: 12px; white-space: normal; overflow: visible; }
html.phone.landscape #scr-menu .kingdom-logo { height: 140px; }
html.phone.landscape #scr-menu .racerow { grid-template-columns: repeat(10, minmax(0, 1fr)); }
html.phone.landscape #scr-menu .menurow { flex-wrap: wrap; }
html.phone.landscape #scr-menu .menurow .menubtn { flex-basis: 12%; }
html.phone.landscape #scr-menu .adventuredeck, html.phone.landscape #scr-menu .battledeck { max-width: 500px; align-self: center; }
html:not(.on-menu) .kingdomframe i { width: 28px; height: 28px; }
body::after, .kingdomframe { top: var(--vtop, 0px); bottom: auto; height: calc(var(--vh, 1vh) * 100); }

/* ═══════════════════════════════════════════════════════════════════════════
   THE PHONE: ONE GLASS, AND A DOCK
   ═══════════════════════════════════════════════════════════════════════════
   The hall fits the illustrated adventures, battle choices, and four
   destinations in each orientation. Daily goals live in Deeds. */
html.phone #scr-menu .menucenter { animation: none; }

/* ---- SIDEWAYS: THE LOBBY ------------------------------------------------
   One grid on the screen itself, the centre column's box dissolved into it
   (`contents`) so the top band can take a cell of its own:

        logo    │ purse · name · cog
        logo    │ standing + the two battles
        banners │ campaign
        ─────────── the dock ───────────

   The wordmark takes the left of the band's row as well as the battles' — the
   band only ever had things at its right end, and the old floating band left
   the logo a third of the way down a column it had to itself. The battles sit
   where a right thumb rests; the banners sit under the name they answer
   ("Choose your kingdom"); the dock is the one row a thumb reaches from
   either side. */
html.phone.landscape #scr-menu {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "hero  bar"
    "hero  battle"
    "races adv"
    "dock  dock";
  gap: 6px 14px;
  padding: 0 calc(10px + var(--sar)) calc(6px + var(--sab)) calc(10px + var(--sal));
}
html.phone.landscape #scr-menu .menucenter { display: contents; }
html.phone.landscape #scr-menu .menurule { display: none; }

/* the band: its own cell now, not a strip floated over the screen */
html.phone.landscape #scr-menu .topbarmenu {
  grid-area: bar; position: relative; top: auto; left: auto; right: auto;
  min-height: 0; height: auto; flex-basis: auto;
  padding: var(--edge-t) calc(var(--acctw, 160px) + 12px) 0 0;
  justify-content: flex-end; align-items: center;
}

/* the wordmark, and the plaque that names the rank under it */
html.phone.landscape #scr-menu .menuhero {
  grid-area: hero; align-self: stretch; min-width: 0; min-height: 0;
  display: flex; align-items: flex-end; gap: 10px; margin: 0; padding: calc(var(--edge-t) - 2px) 0 0;
}
html.phone.landscape #scr-menu .gametitle { flex: none; align-self: flex-start; }
html.phone.landscape #scr-menu .kingdom-logo { height: clamp(92px, 33vh, 148px); width: auto; }

/* the rank: two rows of five, as tall as the cell gives them */
html.phone.landscape #scr-menu .racerow {
  grid-area: races; align-self: stretch; min-height: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 10px 6px; width: 100%; margin: 0; padding: 6px 0 0;
}
html.phone.landscape #scr-menu .racecard {
  --notch: 9px; min-height: 0; height: auto;
  padding: 3px 2px calc(var(--notch) + 7px); gap: 0; justify-content: flex-end;
}
html.phone.landscape #scr-menu .rc-host { flex: 1 1 auto; height: auto; min-height: 0; margin: 0 0 1px; }
html.phone.landscape #scr-menu .rc-host canvas { width: auto; height: 100%; max-width: 100%; }
html.phone.landscape #scr-menu .racename { font-size: 11px; line-height: 1.05; min-height: 0; }
html.phone.landscape #scr-menu .racecrest { width: 13px; height: 16px; top: 4px; right: 3px; }

/* the standing and the battles, where the right thumb rests */
html.phone.landscape #scr-menu .battledeck { grid-area: battle; align-self: end; width: 100%; max-width: none; margin: 0; }
html.phone.landscape #scr-menu #rankbadge { margin: 0 0 6px; gap: 6px; }
html.phone.landscape #scr-menu .lp-chip { height: 36px; }
/* the rung's name keeps its letters at 667: the tracking goes before the word does */
html.phone.landscape #scr-menu .lp-rk { letter-spacing: 0; }
html.phone.landscape #scr-menu .lp-rankck { padding: 0 7px; }
html.phone.landscape #scr-menu .modelist { gap: 6px; }
html.phone.landscape #scr-menu .bigbtn.modebtn { min-height: clamp(46px, 14vh, 58px); padding-inline: 6px; }
/* Sized off the WIDTH, which is what the name has to fit across: "TEAM BATTLE
   4V4" is fifteen capitals in a button 147px wide on the narrowest phone, and a
   height-keyed size ran it off both ends of the plate there. */
html.phone.landscape #scr-menu .bigbtn.modebtn .bttl { font-size: clamp(13px, 2.05vw, 19px); letter-spacing: 0.02em; }

/* Campaign stays centered beneath the battles. */
html.phone.landscape #scr-menu .adventuredeck { grid-area: adv; align-self: center; justify-self: center; width: min(270px, 100%); max-width: none; margin: 0; }
html.phone.landscape #scr-menu .adventurecard { min-height: clamp(54px, 18vh, 70px); }
html.phone.landscape #scr-menu .adventurecard img { width: clamp(42px, 15vh, 60px); height: clamp(42px, 15vh, 60px); }
html.phone.landscape #scr-menu .adventurecard span { font-size: 15px; padding: 5px; }

/* the dock: every place there is to go, one row, a thumb's height */
html.phone.landscape #scr-menu .menurow {
  grid-area: dock; align-self: end; display: flex; flex-wrap: nowrap; gap: 6px; width: 100%; margin: 0;
}
html.phone.landscape #scr-menu .menurow .menubtn { flex: 1 1 0; min-width: 0; min-height: 46px; padding: 4px 3px 5px; gap: 2px; }
html.phone.landscape #scr-menu .menurow .menubtn .mb-ic { width: 20px; height: 20px; }
/* Title case, not capitals: "QUARTERMASTER" is a fifth wider than
   "Quartermaster", and the dock's narrowest cell on the narrowest phone is 86px. */
html.phone.landscape #scr-menu .menurow .menubtn .mb-tx { font-size: 11.5px; text-transform: none; white-space: nowrap; }
html.phone.landscape #scr-menu .menurow .menubtn .navbadge { top: -6px; right: -4px; }

/* ---- UPRIGHT: THE SAME LOBBY, STACKED ---------------------------------------
   A phone held upright is a reading posture here — the battle asks to be
   turned, the menus do not — so the lobby stacks rather than spreads, in the
   order a thumb comes to it: the name, the kingdoms, the battles, the
   campaign, and the dock under them all. The stack fits a 390x844 phone at
   full size; a shorter one scrolls, at full size. */
html.phone.portrait #scr-menu .menucenter { gap: 12px; }
html.phone.portrait #scr-menu .kingdom-logo { height: clamp(92px, 14vh, 150px); }
html.phone.portrait #scr-menu .racecard { min-height: clamp(88px, 13vh, 132px); padding-bottom: calc(var(--notch) + 7px); }
html.phone.portrait #scr-menu .rc-host { --host-size: clamp(38px, 6.4vh, 70px); }
html.phone.portrait #scr-menu .battledeck { order: 2; }
html.phone.portrait #scr-menu .adventuredeck { order: 3; max-width: 270px; }
html.phone.portrait #scr-menu .adventurecard { min-height: 68px; }
html.phone.portrait #scr-menu .adventurecard img { width: clamp(52px, 8vh, 66px); height: clamp(52px, 8vh, 66px); }
html.phone.portrait #scr-menu .bigbtn.modebtn { padding-inline: 6px; }
html.phone.portrait #scr-menu .bigbtn.modebtn .bttl { font-size: clamp(13px, 4.1vw, 19px); letter-spacing: 0.02em; }
html.phone.portrait #scr-menu .menurow {
  order: 4; margin-top: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
}
html.phone.portrait #scr-menu .menurow .menubtn { min-height: 52px; padding: 5px 3px; gap: 3px; }
html.phone.portrait #scr-menu .menurow .menubtn .mb-ic { width: 20px; height: 20px; }
html.phone.portrait #scr-menu .menurow .menubtn .mb-tx { font-size: 11.5px; text-transform: none; white-space: nowrap; }
html.phone.portrait #scr-menu .menurow #installbtn:not(.hidden) {
  grid-column: 1 / -1; flex-direction: row; min-height: 38px; gap: 8px;
}

@media (prefers-reduced-motion: reduce) {
  #scr-menu *, #scr-menu *::before, #scr-menu *::after { animation: none; transition: none; }
  #scr-menu .racecard:hover, #scr-menu .racecard:focus-visible, #scr-menu .bigbtn.modebtn:hover, #scr-menu .menubtn:hover, #scr-menu .adventurecard:hover { transform: none; }
}

/* The logo and playable choices carry the home screen. The battle controls are
   individual commands over the open valley, with the kingdoms at their sides. */
#scr-menu .mode-mark { display: none; }
@media (min-width: 1150px) {
  #scr-menu .menucenter {
    width: calc(100% - 72px); max-width: 3000px;
    grid-template-columns: minmax(0, 1fr) clamp(355px, 22vw, 660px) minmax(0, 1fr);
    grid-template-rows: clamp(195px, 26vh, 320px) clamp(250px, 27vh, 350px) auto;
    column-gap: 14px; row-gap: clamp(9px, 1.3vh, 20px);
    padding: 0;
  }
  #scr-menu .menuhero { justify-content: flex-start; padding-top: clamp(1px, 1vh, 14px); }
  #scr-menu .kingdom-logo { height: clamp(170px, 22vh, 285px); filter: drop-shadow(0 6px 2px #1e1730) drop-shadow(0 0 16px rgba(255,226,132,.5)); }
  #scr-menu .racerow {
    width: 100%; margin: 0;
    grid-template-columns: repeat(5, minmax(0, 1fr)) calc(clamp(355px, 22vw, 660px) + 28px) repeat(5, minmax(0, 1fr));
    gap: clamp(6px, .3vw, 11px);
  }
  #scr-menu .racecard {
    --notch: clamp(18px, 2.2vh, 27px);
    min-height: clamp(250px, 27vh, 350px);
    padding: clamp(10px, 1.4vh, 19px) clamp(4px, .35vw, 12px) calc(var(--notch) + 10px);
    border-radius: 3px 3px 0 0;
    filter: drop-shadow(0 8px 5px rgba(15, 20, 24, .78));
  }
  #scr-menu .rc-rod { top: -8px; height: 9px; }
  #scr-menu .racecrest { width: clamp(21px, 1.2vw, 38px); height: auto; }
  #scr-menu .rc-host { --host-size: clamp(76px, 4.6vw, 158px); height: var(--host-size); margin: clamp(5px, 1vh, 14px) 0 clamp(5px, .8vh, 10px); }
  #scr-menu .rc-host canvas { width: min(100%, var(--host-size)); }
  #scr-menu .racename {
    font-size: clamp(14px, .72vw, 23px); line-height: 1.13;
    letter-spacing: .03em; text-shadow: 0 2px 2px #15101b, 1px 0 #15101b, -1px 0 #15101b;
  }
  #scr-menu .raceblurb {
    margin-top: clamp(8px, 1.3vh, 16px); padding: 0 2px;
    font: 700 clamp(10px, .48vw, 16px)/1.25 var(--font-display);
    color: #fff2d9; opacity: 1; text-shadow: 0 1px 2px #130f15, 0 2px 7px #130f15;
  }
  #scr-menu .battledeck {
    position: relative; align-self: start; width: 100%; margin: 0; padding: 0;
    box-sizing: border-box; border: 0; background: none; box-shadow: none;
  }
  #scr-menu #rankbadge { gap: clamp(7px, .55vw, 18px); margin-bottom: clamp(7px, .6vh, 10px); }
  #scr-menu .lp-chip {
    height: clamp(43px, 4.2vh, 56px); border: 2px solid #e9c57e; border-radius: 10px 10px 4px 4px;
    background: linear-gradient(160deg, rgba(32,48,68,.97), rgba(19,26,39,.97));
    box-shadow: 0 4px 0 #291e19, 0 8px 12px rgba(9,22,32,.52), inset 0 1px 0 rgba(255,250,222,.35);
  }
  #scr-menu .lp-chip.on { border-color: #8de9a8; box-shadow: 0 4px 0 #224b34, 0 8px 12px rgba(9,22,32,.52), 0 0 15px rgba(94,234,145,.34); }
  #scr-menu .lp-chip .lp-rk { font-size: clamp(12px, .55vw, 18px); }
  #scr-menu .lp-chip .lp-lab { font-size: clamp(11px, .47vw, 15px); }
  #scr-menu .lp-chip .lp-tick { width: clamp(21px, 1.15vw, 32px); height: clamp(21px, 1.15vw, 32px); }
  #scr-menu .modelist { gap: clamp(7px, .55vw, 18px); }
  #scr-menu .bigbtn.modebtn {
    min-height: clamp(88px, 9.2vh, 124px); padding: 12px 16px;
    border: 4px ridge #ffdc92; border-radius: 16px 16px 9px 9px;
    color: #fff5d6; background: radial-gradient(ellipse at 50% -20%, #ef7a99, transparent 73%), linear-gradient(160deg, #b82061, #791542 72%, #450f32);
    box-shadow: 0 0 0 2px #3e1828, 0 6px 0 #5a1c33, 0 12px 15px rgba(12,22,28,.55), inset 0 0 0 2px #6e163d, inset 0 3px 0 rgba(255,236,226,.52);
  }
  #scr-menu .bigbtn.modebtn.alt {
    border-color: #d6edff; background: radial-gradient(ellipse at 50% -20%, #85d6ff, transparent 73%), linear-gradient(160deg, #2782c5, #155388 72%, #112c50);
    box-shadow: 0 0 0 2px #142d4c, 0 6px 0 #173d6d, 0 12px 15px rgba(12,22,28,.55), inset 0 0 0 2px #155384, inset 0 3px 0 rgba(238,249,255,.62);
  }
  #scr-menu .bigbtn.modebtn::before {
    content: ''; position: absolute; inset: 5px; border: 1px solid rgba(255,238,190,.52);
    border-radius: 10px 10px 5px 5px; pointer-events: none;
  }
  #scr-menu .bigbtn.modebtn .bttl { font-size: clamp(19px, .94vw, 31px); line-height: 1.03; white-space: normal; text-wrap: balance; }
  #scr-menu .bigbtn.modebtn .bsub { color: #fff2d4; font-size: clamp(10px,.42vw,14px); }
  #scr-menu .mode-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding-left: clamp(0px, 2vw, 68px); }
  #scr-menu .mode-mark { position: absolute; top: 50%; left: clamp(12px,.85vw,28px); display: grid; place-items: center; width: clamp(38px,2.2vw,72px); height: clamp(38px,2.2vw,72px); transform: translateY(-50%); color: #fff4d9; filter: drop-shadow(0 3px 2px rgba(21,15,30,.7)); }
  #scr-menu .mode-mark .ic { width: 100%; height: 100%; }
  #scr-menu .adventuredeck { align-self: start; width: min(67%, 450px); margin: clamp(170px, 17vh, 215px) auto 0; }
  #scr-menu .adventurecard {
    min-height: clamp(78px, 8vh, 116px); padding: 5px 5px 5px 8px; border: 4px ridge #f2d38a; border-radius: 11px;
    background: linear-gradient(145deg, #f4dfab, #b88f4e); box-shadow: 0 0 0 2px #3d321b, 0 6px 0 #5d4728, 0 12px 15px rgba(12,22,28,.52), inset 0 1px 0 #fff9df;
  }
  #scr-menu .adventurecard img { width: clamp(66px, 4vw, 105px); height: clamp(66px, 4vw, 105px); padding: 2px; border-radius: 7px; background: radial-gradient(circle, #fff7d8, #d8bd81); }
  #scr-menu .adventurecard span {
    margin: -5px -5px -5px 6px; border-left: 2px solid #f6d88e; border-radius: 0 5px 5px 0;
    background: radial-gradient(ellipse at 50% 0%, #557449, transparent 78%), linear-gradient(160deg, #365338, #1a3129);
    color: #fff6dc; font-size: clamp(18px, .9vw, 30px); text-shadow: 0 2px 1px #142019;
  }
  #scr-menu .menurow { width: min(1400px, 78%); gap: clamp(9px, .8vw, 20px); margin-top: clamp(2px, .6vh, 8px); }
  #scr-menu .menurow .menubtn {
    --door-accent: #976028; min-height: clamp(74px, 8.7vh, 116px); flex-direction: row; gap: clamp(7px, .5vw, 16px);
    padding: 8px clamp(8px, .7vw, 20px); text-align: left; justify-content: flex-start;
    border: 3px ridge var(--door-accent); border-radius: 11px 11px 5px 5px;
    background: linear-gradient(160deg, #fff3d2, #e4c58d 64%, #c99f62);
    box-shadow: 0 0 0 2px #573b22, 0 5px 0 #70502b, 0 9px 13px rgba(24,27,25,.45), inset 0 1px 0 #fff9e8;
  }
  #scr-menu .menurow .menubtn:nth-child(2) { --door-accent: #3a6fa2; }
  #scr-menu .menurow .menubtn:nth-child(3) { --door-accent: #368069; }
  #scr-menu .menurow .menubtn:nth-child(4) { --door-accent: #aa7738; }
  #scr-menu .menurow .menubtn .mb-ic {
    width: clamp(31px, 2.1vw, 66px); height: clamp(31px, 2.1vw, 66px); flex: none;
    border: 2px solid #fff3d4; border-radius: 50%; background: var(--door-accent); color: #fff8dc;
    box-shadow: 0 0 0 2px #714720, inset 0 2px 0 rgba(255,255,255,.42), 0 3px 3px rgba(43,24,12,.36); filter: none;
  }
  #scr-menu .menurow .menubtn .mb-ic svg { width: 60%; height: 60%; }
  #scr-menu .menurow .menubtn .mb-tx { font-size: clamp(15px, .76vw, 25px); }
  #scr-menu .menurow .menubtn .mb-sub { display: block; font: 700 clamp(10px, .43vw, 15px)/1.2 var(--font-display); color: #67421d; white-space: normal; }
  #scr-menu .bigbtn.modebtn:focus-visible, #scr-menu .menurow .menubtn:focus-visible,
  #scr-menu .adventurecard:focus-visible { outline: 4px solid #fff8d6; outline-offset: 5px; }
}
@media (min-width: 1150px) and (hover: hover) {
  #scr-menu .bigbtn.modebtn:hover { transform: translateY(-5px); filter: brightness(1.14) saturate(1.1); }
  #scr-menu .adventurecard:hover, #scr-menu .menurow .menubtn:hover { transform: translateY(-4px); filter: brightness(1.08); }
  #scr-menu .lp-chip:hover { filter: brightness(1.1); }
}

@media (min-width: 2100px) and (min-height: 900px) {
  #scr-menu .topbarmenu { flex-basis: 65px; min-height: 65px; padding-top: 14px; }
  #scr-menu .menucenter { row-gap: 22px; }
  #scr-menu .racecard:focus-visible { transform: translateY(-9px); }
  #scr-menu .menurow { width: min(1600px, 76%); }
}
@media (min-width: 2100px) and (min-height: 900px) and (hover: hover) {
  #scr-menu .racecard:hover { transform: translateY(-9px); }
}
@media (min-width: 1150px) and (max-width: 1700px) {
  #scr-menu .mode-mark { display: none; }
  #scr-menu .mode-copy { padding-left: 0; }
  #scr-menu .lp-chip .rcrest.sm { display: none; }
  #scr-menu .lp-chip { height: 62px; flex-direction: column; }
  #scr-menu .lp-chip .lp-card { flex: 1 1 auto; min-height: 0; padding: 3px 8px; }
  #scr-menu .lp-chip .lp-sub { display: none; }
  #scr-menu .lp-chip .lp-rankck { min-height: 28px; padding: 0 8px; border-left: 0; border-top: 1px solid rgba(255, 222, 154, .3); }
  #scr-menu .lp-chip .lp-tick { width: 17px; height: 17px; }
  #scr-menu .bigbtn.modebtn .bttl { white-space: normal; line-height: 1.08; text-wrap: balance; }
}
@media (max-width: 1149px) {
  #scr-menu .lp-chip {
    border: 2px solid #e9c57e; border-radius: 9px 9px 4px 4px;
    background: linear-gradient(160deg, rgba(35,49,66,.98), rgba(19,27,39,.98));
    box-shadow: 0 3px 0 #302218, 0 5px 8px rgba(13,20,24,.42);
  }
  #scr-menu .lp-chip.on { border-color: #8de9a8; box-shadow: 0 3px 0 #234331, 0 0 10px rgba(94,234,145,.34); }
  #scr-menu .bigbtn.modebtn { border-radius: 12px 12px 6px 6px; box-shadow: 0 0 0 2px #431e29, 0 4px 0 #6b2944, 0 7px 10px rgba(15,20,29,.5), inset 0 2px 0 rgba(255,237,224,.42); }
  #scr-menu .bigbtn.modebtn.alt { box-shadow: 0 0 0 2px #193757, 0 4px 0 #245989, 0 7px 10px rgba(15,20,29,.5), inset 0 2px 0 rgba(230,246,255,.5); }
  #scr-menu .adventurecard {
    border: 3px ridge #edcf8e; border-radius: 9px; padding-left: 5px;
    background: linear-gradient(145deg, #f4dfab, #b88f4e);
    box-shadow: 0 0 0 2px #3d321b, 0 4px 0 #5d4728, 0 7px 10px rgba(12,22,28,.5);
  }
  #scr-menu .adventurecard img { border-radius: 5px; background: radial-gradient(circle, #fff7d8, #d8bd81); }
  #scr-menu .adventurecard span { border-left: 2px solid #f6d88e; background: linear-gradient(160deg, #45683f, #1c342a); color: #fff6dc; text-shadow: 0 2px 1px #142019; }
  #scr-menu .menurow .menubtn {
    --door-accent: #976028; border: 2px ridge var(--door-accent); border-radius: 8px;
    background: linear-gradient(160deg, #fff3d2, #e4c58d 68%, #c99f62);
    box-shadow: 0 0 0 1px #573b22, 0 3px 0 #70502b, 0 5px 8px rgba(24,27,25,.4);
  }
  #scr-menu .menurow .menubtn:nth-child(2) { --door-accent: #3a6fa2; }
  #scr-menu .menurow .menubtn:nth-child(3) { --door-accent: #368069; }
  #scr-menu .menurow .menubtn:nth-child(4) { --door-accent: #aa7738; }
  #scr-menu .menurow .menubtn .mb-ic { border: 1px solid #fff3d4; border-radius: 50%; background: var(--door-accent); color: #fff8dc; box-shadow: 0 0 0 1px #714720, inset 0 1px 0 rgba(255,255,255,.42); filter: none; }
  #scr-menu .menurow .menubtn .mb-ic svg { width: 62%; height: 62%; }
}

/* The small corner actions use the same blue steel and gold as the main choices. */
#scr-menu #topchip, #scr-menu #buygold,
html.on-menu:not(.phone) #acctname, html.on-menu:not(.phone) #settingsbtn {
  border-color: #d6ad67; background: linear-gradient(160deg, #233e5a, #10283d 72%, #0c1e30);
  box-shadow: 0 0 0 1px #2b1d1a, 0 3px 0 #30231d, 0 5px 8px rgba(10,20,29,.52), inset 0 1px 0 rgba(236,247,255,.34);
}
#scr-menu #buygold { color: #ffe49b; }
#scr-menu #buygold:hover, html.on-menu:not(.phone) #settingsbtn:hover,
html.on-menu:not(.phone) #acctname:hover { border-color: #fff0b5; filter: brightness(1.15); }
#scr-menu .menuarms { border-color: #e6bd74; background: linear-gradient(160deg, #31516b, #10273c); box-shadow: 0 0 0 1px #34271b, 0 3px 0 #42301e, 0 5px 8px rgba(10,20,29,.46), inset 0 1px 0 rgba(255,248,218,.35); }
#scr-menu .menuarms:hover { filter: brightness(1.14); }
#scr-menu #buygold:focus-visible, #scr-menu .menuarms:focus-visible,
html.on-menu:not(.phone) #acctname:focus-visible, html.on-menu:not(.phone) #settingsbtn:focus-visible,
html.on-menu:not(.phone) #acctlogout:focus-visible { outline: 3px solid #fff3c4; outline-offset: 4px; }

/* THE FIELD BATTLE'S DOOR (MODES[].deploy): a small paper tile beside the
   Campaign card, the same height and carved edge as it, so the strip reads as
   one row of "more ways to play" — and narrow, so it never competes with the two
   battle buttons above or the Campaign it stands beside. The strip widens to
   hold it, to the battle deck's own width and no further. */
#scr-menu .adventuredeck.withclash { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; width: min(372px, 100%); }
/* …AND THE GAUNTLET'S DOOR, the same tile beside it. A run in progress wears the
   gilt rim the Campaign card wears while a march is being walked: there is a pot
   behind this door that is still the commander's to take or to lose. */
#scr-menu .adventuredeck.withclash.withgauntlet { grid-template-columns: minmax(0, 1fr) auto auto; width: min(480px, 100%); }
#scr-menu .gauntletbtn.live { border-color: var(--gold-hi); }
/* Where the strip is narrow — a phone, the stacked layout under 1150px — the two
   doors share a row beneath the Campaign rather than squeezing it to a sliver. */
html.phone #scr-menu .adventuredeck.withclash.withgauntlet { grid-template-columns: 1fr 1fr; width: min(320px, 100%); }
html.phone #scr-menu .adventuredeck.withgauntlet .campaignbtn { grid-column: 1 / -1; }
@media (max-width: 1149px) {
  #scr-menu .adventuredeck.withclash.withgauntlet { grid-template-columns: 1fr 1fr; width: min(320px, 100%); }
  #scr-menu .adventuredeck.withgauntlet .campaignbtn { grid-column: 1 / -1; }
}
#scr-menu :is(.clashbtn, .gauntletbtn) {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 92px; min-height: 78px; padding: 6px 10px; box-sizing: border-box;
  border: 2px ridge var(--steel); border-radius: var(--r-sm); background: var(--paper-face); color: var(--paper-ink);
  box-shadow: var(--carved-edge); cursor: pointer; touch-action: manipulation;
  transition: transform var(--t-2) var(--e-back), filter var(--t-2) var(--e-out);
}
#scr-menu :is(.clashbtn, .gauntletbtn) .cb-ic { width: 26px; height: 26px; color: var(--wood); filter: drop-shadow(0 1px 0 var(--paper-light)); }
#scr-menu :is(.clashbtn, .gauntletbtn) .cb-ic svg { width: 100%; height: 100%; }
#scr-menu :is(.clashbtn, .gauntletbtn) .cb-tx { font: 800 16px/1 var(--font-display); text-transform: uppercase; letter-spacing: .03em; }
#scr-menu :is(.clashbtn, .gauntletbtn) .cb-sub { font: 700 10px/1 var(--font-ui); color: var(--paper-muted); font-variant-numeric: var(--nums); white-space: nowrap; }
@media (hover: hover) { #scr-menu :is(.clashbtn, .gauntletbtn):hover { transform: translateY(-3px); filter: brightness(1.08); } }
#scr-menu :is(.clashbtn, .gauntletbtn):active { transform: translateY(2px); box-shadow: inset 0 3px 7px rgba(var(--shade-rgb), .24), 0 1px 0 var(--paper-shadow); }
#scr-menu :is(.clashbtn, .gauntletbtn):focus-visible { outline: 3px solid var(--enamel-blue-light); outline-offset: 3px; }