/* The castle's finishing materials. Layout and reading order live in hall.css;
   this sheet gives every destination the same brass, cloth and parchment craft. */
:root {
  --brass: #b98232; --brass-light: #ffe2a0; --brass-dark: #62401f;
  --royal-ink: #252b2d; --vellum: #f5e5c1;
  --paper-face: url('/img/menu/materials/vellum.svg'), linear-gradient(135deg, #fff4d8, #ead3a1);
  --enamel-face: url('/img/menu/materials/cloth.svg'), linear-gradient(150deg, #52849b, #254c65 72%, #1c3449);
  --rose-face: url('/img/menu/materials/cloth.svg'), linear-gradient(150deg, #cf7350, #9b4032 72%, #6d2d29);
  --hardware-shadow: inset 0 1px #fff1c780, inset 0 -3px #171e2466, 0 4px 0 #30251e, 0 7px 14px #10212d55;
}

/* Every room gets a large illustrated artifact in its architectural backdrop. */
html .screen:not(#scr-menu) {
  --room-art: url('/img/menu/rooms/council.svg');
  background: linear-gradient(180deg, #0d1c2b35, #0d172bb3), var(--room-art) center / cover, #273944;
  scrollbar-color: var(--brass) #233342;
}
html .screen#scr-armory { --room-art: url('/img/menu/rooms/armory.svg'); }
html .screen#scr-campaign { --room-art: url('/img/menu/rooms/atlas.svg'); }
html .screen:is(#scr-ranked, #scr-challenge, #scr-results) { --room-art: url('/img/menu/rooms/crowns.svg'); }
html .screen:is(#scr-deeds, #scr-saga, #scr-boons, #scr-profile, #scr-report) { --room-art: url('/img/menu/rooms/archives.svg'); }
html .screen#scr-shop { --room-art: url('/img/menu/rooms/stores.svg'); }
html .screen#scr-forge { --room-art: url('/img/menu/rooms/forge.svg'); }

/* Woven banners and carved hardware: bright enough to read over the valley. */
html #scr-menu .kingdom-logo { filter: drop-shadow(0 5px 0 #2a211c55) drop-shadow(0 0 20px #fff1c24d); }
html #scr-menu .rc-cloth {
  background: url('/img/menu/materials/cloth.svg'), linear-gradient(100deg, #0005, transparent 27%, #ffffff12 49%, #0006), linear-gradient(155deg, var(--fac), var(--facd));
}
html #scr-menu .rc-host canvas { filter: drop-shadow(0 3px 0 #15191c80) drop-shadow(0 0 6px #ffe9b03d); }
html #scr-menu .racename { letter-spacing: .015em; text-shadow: 0 2px 1px #15191c; }
html #scr-menu .racecrest { filter: drop-shadow(0 2px 2px #0009); }
html #scr-menu .racecard { transition: transform 180ms ease, filter 180ms ease; }
html #scr-menu .bigbtn.modebtn {
  --key-color: #a84432; --key-light: #e88b5e;
  background: url('/img/menu/materials/cloth.svg'), linear-gradient(150deg, var(--key-light), var(--key-color) 50%, #6b2a26);
  border: 2px solid var(--brass-dark); border-top-color: var(--brass-light);
  box-shadow: var(--hardware-shadow); border-radius: 11px; overflow: hidden;
}
html #scr-menu .bigbtn.modebtn.alt {
  --key-color: #2a5b7d; --key-light: #77abc1;
  background: url('/img/menu/materials/cloth.svg'), linear-gradient(150deg, var(--key-light), var(--key-color) 50%, #18354f);
  border-color: var(--brass-dark); border-top-color: var(--brass-light); box-shadow: var(--hardware-shadow);
}
html #scr-menu .modebtn::before {
  content: ''; position: absolute; inset: 5px; border: 1px solid #ffedbc80;
  border-radius: 6px; background: none; opacity: 1; transform: none; pointer-events: none;
}
html #scr-menu .modebtn::after { content: none; }
html #scr-menu .modebtn .destination-art {
  left: 12px; width: 76px; height: 55px;
  filter: drop-shadow(0 2px 1px #1c171880); object-fit: contain;
}
html #scr-menu .mode-copy { padding-left: 65px; }
html #scr-menu .bigbtn.modebtn .bttl { color: #fff1cc; text-shadow: 0 2px 1px #1b2326; letter-spacing: .01em; }
html #scr-menu .lp-chip {
  background: url('/img/menu/materials/leather.svg'), linear-gradient(150deg, #344e5b, #1b303c);
  border: 1px solid #b99856; border-bottom: 3px solid #352a20;
  box-shadow: inset 0 1px #fff0bb40, 0 3px 8px #0005;
}
html #scr-menu .lp-chip .lp-rankck { border-left-color: #d4b56a55; }
html #scr-menu .lp-chip .lp-rk { color: #ffe2a0; }
html #scr-menu .lp-chip .lp-lab { color: #f8dfaa; }
html #scr-menu .lp-chip .lp-tick { border-color: #c49b4e; border-radius: 4px; background: #14232d; box-shadow: inset 0 1px 3px #0008; }
html #scr-menu .lp-chip.on { border-color: #a8e8b5; box-shadow: inset 0 1px #c4f5c6, 0 3px 8px #0005; }
html #scr-menu .lp-chip.on .lp-tick { background: #316b46; color: #fff4d2; }

/* Adventure plaques stay compact. Their painted edges identify the destination. */
html #scr-menu :is(.adventurecard, .gauntletbtn, .clashbtn) {
  background: var(--paper-face); border: 2px solid var(--brass-dark);
  border-top: 3px solid var(--destination); border-radius: 9px;
  box-shadow: inset 0 1px #fff9e8, inset 0 -3px #ad854445, 0 4px #30251e, 0 7px 12px #10212d55;
  isolation: isolate;
}
html #scr-menu :is(.adventurecard, .gauntletbtn, .clashbtn)::before {
  content: ''; position: absolute; inset: 5px; z-index: -1; pointer-events: none;
  border: 1px solid var(--destination); opacity: .3; border-radius: 4px;
  background: radial-gradient(ellipse at 50% 0, var(--destination), transparent 75%);
}
html #scr-menu :is(.adventurecard, .gauntletbtn, .clashbtn) .destination-art { width: 68px; height: 40px; filter: drop-shadow(0 2px 1px #74523040); }
html #scr-menu .adventurecard .adventure-copy { background: none; }
html #scr-menu .adventuredeck.withgauntlet.withclash :is(.campaignbtn, .gauntletbtn, .clashbtn) { grid-column: auto; grid-row: auto; }
html #scr-menu :is(.adventure-copy b, .cb-tx) { color: #352a24; letter-spacing: .045em; }
html #scr-menu .adventure-progress:not(:empty) { z-index: 2; }

/* Four doors, four enamels. The silhouette carries as much identity as the color. */
html #scr-menu .menurow .menubtn {
  --door-deep: #523a2b; --door-face: #93613e;
  background: url('/img/menu/materials/leather.svg'), linear-gradient(140deg, var(--door-face), var(--door-deep) 76%);
  border: 2px solid var(--brass-dark); border-top: 2px solid #e5c488;
  border-radius: 9px; box-shadow: var(--hardware-shadow); padding-inline: 12px; gap: 6px;
}
html #scr-menu .menurow [data-destination="party"] { --door-deep: #204b50; --door-face: #457b80; }
html #scr-menu .menurow [data-destination="deeds"] { --door-deep: #44304f; --door-face: #795980; }
html #scr-menu .menurow [data-destination="stores"] { --door-deep: #264c3c; --door-face: #4d7b5e; }
html #scr-menu .menurow [data-destination="install"] { --door-deep: #243c58; --door-face: #567b9b; }
html #scr-menu .menurow .menubtn::before {
  content: ''; position: absolute; inset: 5px; border: 1px solid #eed3a14d;
  border-radius: 4px; background: none; pointer-events: none;
}
html #scr-menu .menurow .destination-art { flex-basis: 65px; width: 65px; height: 48px; filter: drop-shadow(0 2px 1px #111b2180); }
html #scr-menu .menurow .menubtn .mb-tx { color: #fff1cd; text-shadow: 0 2px #1d2425; letter-spacing: .02em; }
html #scr-menu .navbadge { color: #fff9df; background: #21553d; border-color: #e9ca8a; box-shadow: 0 2px 4px #0007; }
html #scr-menu :is(#topchip, #buygold), html.on-menu :is(#acctname, #settingsbtn, #acctlogout) {
  background: url('/img/menu/materials/leather.svg'), linear-gradient(145deg, #314b59, #192d3d);
  border-color: #caa561; box-shadow: inset 0 1px #ffe6a75e, 0 3px #2c231d, 0 4px 8px #0006;
}

/* Headers are cloth stretched between brass rails, with a real room artifact. */
html .screen:not(#scr-menu) .scrhdr {
  background: url('/img/menu/materials/cloth.svg'), linear-gradient(120deg, var(--room-light), var(--room-deep) 70%);
  border: 2px solid var(--brass-dark); border-top-color: var(--room-trim);
  border-bottom: 3px solid var(--brass); box-shadow: inset 0 1px #fff2cb50, 0 4px #1c2529, 0 8px 18px #0004;
  border-radius: 9px;
}
html .screen:not(#scr-menu) .scrhead .scrtitle { color: #fff1ce; text-shadow: 0 2px #16232b; letter-spacing: .01em; }
html .screen:not(#scr-menu) .room-seal {
  border-color: var(--brass); border-top-color: var(--brass-light);
  background: url('/img/menu/materials/leather.svg'), #283e48;
  box-shadow: inset 0 1px #ffeeb85e, 0 3px #18262d;
}
html .screen:not(#scr-menu) .room-seal img { filter: drop-shadow(0 2px 1px #0006); }
html .screen:not(#scr-menu) .rooms-button {
  color: #fff0c9; background: url('/img/menu/materials/leather.svg'), var(--room-deep);
  border: 1px solid var(--brass); box-shadow: inset 0 1px #fff0bb40, 0 2px #18262d;
}
html .screen:not(#scr-menu) .scrhdr .backbtn { background: var(--paper-face); border-color: var(--brass-dark); box-shadow: inset 0 1px #fff8e2, 0 3px #352a22; }

/* Reading surfaces: subtle fibers, warm edges, crisp ink. No decorative copy. */
html :is(#musterdetail, .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) {
  background: var(--paper-face); border-color: #8d6a3c; border-top-color: #fff0c9;
  box-shadow: inset 0 0 0 1px #fff4d570, 0 4px #302921, 0 8px 18px #0d1b2540;
}
html :is(.bigbtn, .menubtn.primary, .ag-btn, .ask-yes) { box-shadow: var(--hardware-shadow); border-color: var(--brass-dark); border-top-color: #f2c089; }
html :is(.backbtn, .menubtn, .buybtn, .loadoutsaveactions button, .fg-rollbtn, .ask-no) { box-shadow: var(--hardware-shadow); border-color: #624522; }
html :is(.qm-tab, .rd-tab, .rq-tab, .ar-tab, .armfilters button) {
  background: url('/img/menu/materials/leather.svg'), #344957; color: #eee1c1;
  border-color: #677472; box-shadow: inset 0 1px #fff0b526, 0 3px #19272e;
  transition: background-color 160ms, border-color 160ms, box-shadow 160ms;
}
html .screen:not(#scr-menu) :is(.qm-tab.on, .rd-tab.on, .rq-tab.on, .ar-tab.on, .armfilters button.on) {
  background: url('/img/menu/materials/cloth.svg'), var(--room-deep); color: #fff2cf;
  border-color: #dfbd76; box-shadow: inset 0 -3px #dfbd76, 0 3px #19272e;
}
html :is(input, select, textarea) { accent-color: #3c7b60; caret-color: #352a24; }
html :is(.armsearch, .fg-own input) { background: #fff7df; border-color: #a58351; box-shadow: inset 0 2px 5px #6647281a; }
html :is(button, a, input, select, summary):focus-visible { outline: 3px solid #fff3c5; outline-offset: 3px; box-shadow: 0 0 0 5px #263747, 0 0 16px #f9d16e66; }
html button:disabled { cursor: default; }

/* Army selections feel like placing a piece on a command table. */
html #scr-muster .ms-plinth { background: url('/img/menu/materials/cloth.svg'), radial-gradient(ellipse at 50% 20%, #9bc3c8, #46738b 75%); border-color: #b58c50; box-shadow: inset 0 1px #edf5da, 0 4px #243642; }
html #scr-muster .md-troop { background: var(--paper-face); border-color: #b8955b; box-shadow: inset 0 1px #fff9e2, 0 3px #9c7642; }
html #scr-muster .md-troop.on { border-color: #28704f; box-shadow: 0 0 0 2px #cfba78, 0 3px #284b3c; }
html #scr-loadout :is(.loadoutunit, .loadoutspell) { background: var(--paper-face); border-color: #b39566; box-shadow: inset 0 1px #fff7e1, 0 3px #9b7747; }
html #scr-loadout :is(.loadoutunit, .loadoutspell).on { background: var(--enamel-face); border-color: #e2bc70; box-shadow: inset 0 1px #e1e6c8, 0 3px #273645; }
html #scr-loadout .loadouttick { background: #2f7854; border-color: #e7c483; box-shadow: 0 2px #284234; }
html #scr-loadout .loadoutfoot { background: var(--paper-face); border-color: #a07c47; }
html #scr-armory .armicon { background: radial-gradient(ellipse, #fff6d6, #d8bf86); border: 1px solid #bba16d; box-shadow: inset 0 1px #fff7dd; }
html #scr-armory .armcard.ready { border-color: #4f8557; box-shadow: inset 0 0 0 1px #b6d086, 0 4px #304733, 0 8px 18px #0d1b2540; }
html #scr-armory .afoot .owned { background: #304b40; color: #fff1cc; }
html #scr-armory .armcard .buybtn.go { background: url('/img/menu/materials/cloth.svg'), linear-gradient(#528e60, #2c6244); border-color: #36543b; }
html #scr-campaign .cp-mmap { border-color: #9b793e; box-shadow: inset 0 0 0 2px #f8e7bd, 0 3px #4b4031; }
html #scr-ranked :is(.rq-hero, .rq-div), html #scr-challenge .cg-intro { border-top-color: #b88543; }
html #scr-deeds :is(.rd-ledger, .rd-panel), html #scr-saga #sgbody, html #scr-boons #bnbody { border-left-color: #9670a0; }
html #scr-shop .qmcos-pv { background: url('/img/menu/materials/cloth.svg'), radial-gradient(ellipse at 50% 30%, #537f80, #243a42); border-color: #b99454; }
html #scr-shop .qmfw-pv { background: radial-gradient(ellipse at 50% 45%, #243b42, #0e202d 78%); background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--fw1) 18%, #102b38), #0e202d 78%); border-color: #b99454; }
html #scr-shop :is(.qmfw, .qmsk, .qmcos, .qmem).on { border-color: #2c7858; box-shadow: inset 0 0 0 1px #bdd696, 0 4px #2d483b, 0 8px 18px #0d1b2540; }
html #scr-forge .fg-stage { border-top-color: #aa86b7; }
html #scr-forge .fg-ch.on { box-shadow: 0 0 0 3px #e3bf75, 0 4px #3e3047; }
html #scr-forge :is(.fg-cut, .fg-ord, .fg-arr, .fg-div, .fg-ch) { background: #fff3d3; border-color: #b1996a; }
html #scr-forge :is(.fg-cut, .fg-ord, .fg-arr, .fg-div, .fg-ch).on { background: #e9dcf0; color: #493354; border-color: #896694; }
html #scr-results #resultbox { border-top-color: #d7ad58; }
html #scr-results #resultbox.lose { border-top-color: #ad4b43; }

/* Navigation, settings, sign-in and confirmation sheets use the same craft. */
.castle-rooms { background: var(--paper-face); border: 2px solid #816034; border-top: 5px solid #b99454; box-shadow: inset 0 0 0 2px #fff4d5, 0 10px 40px #08162399; }
.rooms-grid button { background: var(--paper-face); border-color: #baa071; box-shadow: inset 0 1px #fff7e1, 0 3px #b39568; }
.rooms-grid [aria-current] { border-color: #375e73; background: #d2e1db; box-shadow: inset 0 -3px #375e73, 0 3px #b39568; }
html :is(.st-card, .km-card, .ag-card, .plobbybox, .mintbox, .askbox) { border-top: 4px solid #c5a15c; }
html .km-title { color: #3d352b; text-shadow: none; font: 800 24px/1.1 var(--font-display); }
html :is(.km-x, .mintx) { background: #304653; color: #fff0ca; border: 1px solid #aa874a; box-shadow: inset 0 1px #ffedbf4d, 0 2px #22313b; }
html .km-seg { background: #e0cca2; border-color: #ad8e59; box-shadow: inset 0 1px 3px #5c452b26; }
html .km-seg button { min-height: 32px; color: #493d2e; background: none; }
html .km-seg button.on { color: #fff3d3; background: var(--enamel-face); box-shadow: inset 0 -2px #dabc80; }
html .km-set input[type="range"] { accent-color: #3d7180; }
html :is(.km-tog, .km-set) input[type="checkbox"] { accent-color: #347052; }
html .st-sec > h4 { color: #6e4f2b; border-bottom-color: #b69b6655; }
html .ag-title { color: #3e3428; text-shadow: none; }
html .ag-tab--active { background: var(--enamel-face); color: #fff3d3; }
html .ag-input { background: #fff7df; color: #352c24; border-color: #ac8d58; box-shadow: inset 0 2px 4px #6653331a; }
html .ag-input:focus { border-color: #406f80; box-shadow: 0 0 0 2px #96b5b0; }
html :is(#tip, #unittip) { background: var(--paper-face); border-color: #9b783f; }

/* Battle hardware keeps its translucent panels and exact battlefield footprint. */
html #hud :is(#factions, #mapframe, #clashcmd, #clashbar, #buildbar, #upgradewin, #selpanel) { border-color: #b99b66; box-shadow: inset 0 1px #ffebbd45, 0 3px 12px #12202b66; }
html #hud :is(#buildbtn, #upgradebtn, #releasebtn) { border-color: #a7834e; box-shadow: var(--hardware-shadow); }
html #hud #buildbtn { background: var(--rose-face); }
html #hud #upgradebtn { background: var(--enamel-face); }
html #hud :is(.build, .cl-card) { border-color: #a18556; box-shadow: inset 0 1px #fff4cc40, 0 2px #1d2c35; }
html #hud :is(.build.on, .cl-card[aria-pressed="true"]) { border-color: #f6d28a; box-shadow: inset 0 0 0 1px #f6d28a, 0 2px #1d2c35; }

html #scr-menu .destination-art { transition: filter 180ms ease, scale 180ms ease; }
html .screen.active:not(#scr-menu) .scrhdr { animation: regalia-arrive 220ms ease-out both; }
@keyframes regalia-arrive { from { opacity: .4; } to { opacity: 1; } }

@media (hover: hover) {
  html #scr-menu .racecard:hover { transform: translateY(-5px); filter: brightness(1.12); }
  html #scr-menu :is(.modebtn, .adventurecard, .gauntletbtn, .clashbtn, .menurow .menubtn):hover { transform: translateY(-3px); filter: brightness(1.09); box-shadow: inset 0 1px #fff4d8, 0 6px #30251e, 0 10px 20px #10212d66, 0 0 15px #ffd78c3d; }
  html #scr-menu button:hover .destination-art { scale: 1.06; filter: drop-shadow(0 2px 1px #111b2180) drop-shadow(0 0 5px #ffe6a45e); }
  html :is(.buybtn, .rooms-button, .fg-rollbtn, .loadoutsaveactions button):hover:not(:disabled) { filter: brightness(1.12); }
  html #scr-loadout :is(.loadoutunit, .loadoutspell):hover { border-color: #b28434; }
  .rooms-grid button:hover { background: #fff0c9; border-color: #9d7944; }
}
html #scr-menu :is(.modebtn, .adventurecard, .gauntletbtn, .clashbtn, .menurow .menubtn):active { transform: translateY(2px); box-shadow: inset 0 2px 4px #1c232640, 0 1px #30251e; }
/* A laptop's shorter field of view still shows every home destination. */
@media (min-width: 1150px) and (max-height: 800px) {
  html:not(.phone) #scr-menu .menucenter { gap: 12px; }
  html:not(.phone) #scr-menu .menuhero { height: 160px; }
  html:not(.phone) #scr-menu .kingdom-logo { height: 150px; }
  html:not(.phone) #scr-menu .racecard { min-height: 154px; }
  html:not(.phone) #scr-menu .rc-host { --host-size: 68px; }
}
@media (max-width: 700px) {
  html #scr-menu .bigbtn.modebtn { display: grid; grid-template-columns: 37px minmax(0, 1fr); gap: 3px; min-height: 72px; padding: 9px 7px; }
  html #scr-menu .modebtn .destination-art { position: static; width: 37px; height: 34px; transform: none; align-self: center; }
  html #scr-menu .modebtn .mode-copy { padding: 0; }
  html #scr-menu .bigbtn.modebtn .bttl { white-space: normal; font-size: 17px; letter-spacing: 0; }
  html #scr-menu .menurow .menubtn { padding-inline: 8px; gap: 4px; }
  html #scr-menu .menurow .destination-art { flex-basis: 42px; width: 42px; height: 36px; }
  html #scr-menu :is(.adventurecard, .gauntletbtn, .clashbtn) .destination-art { width: 57px; height: 36px; }
  html #scr-menu :is(.adventure-copy b, .cb-tx) { font-size: 15px; letter-spacing: .015em; }
}
html.phone.portrait #scr-menu .bigbtn.modebtn, html.phone.landscape #scr-menu .bigbtn.modebtn { display: grid; grid-template-columns: 37px minmax(0, 1fr); gap: 3px; min-height: 72px; padding: 9px 7px; }
html.phone #scr-menu .modebtn .destination-art { position: static; width: 37px; height: 34px; transform: none; align-self: center; }
html.phone #scr-menu .modebtn .mode-copy { padding: 0; }
html.phone.portrait #scr-menu .bigbtn.modebtn .bttl, html.phone.landscape #scr-menu .bigbtn.modebtn .bttl { white-space: normal; font-size: 17px; letter-spacing: 0; }
html.phone.portrait #scr-menu :is(.adventurecard, .gauntletbtn, .clashbtn) { min-height: 82px; padding: 6px; }
html.phone.portrait #scr-menu :is(.adventurecard, .gauntletbtn, .clashbtn) .destination-art { width: 57px; height: 36px; }
html.phone #scr-menu .menurow .destination-art { flex-basis: 42px; width: 42px; height: 36px; }
html.reduce-motion .screen.active:not(#scr-menu) .scrhdr { animation: none; }
html.reduce-motion #scr-menu :is(.racecard, .destination-art) { transition: none; }
html.reduce-motion #scr-menu button:hover .destination-art { scale: none; }
html.reduce-motion #scr-menu :is(.racecard, .modebtn, .adventurecard, .gauntletbtn, .clashbtn, .menurow .menubtn):hover { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html .screen.active:not(#scr-menu) .scrhdr { animation: none; }
  html #scr-menu .destination-art { transition: none; }
  html #scr-menu button:hover .destination-art { scale: none; }
  html #scr-menu .racecard, html :is(.qm-tab, .rd-tab, .rq-tab, .ar-tab, .armfilters button) { transition: none; }
  html #scr-menu :is(.racecard, .modebtn, .adventurecard, .gauntletbtn, .clashbtn, .menurow .menubtn):hover { transform: none; }
}