/* Mega Tower interface. Pixel artwork frames the controls; the world stays open. */
:root {
  --ui-bg:#06080d; --ui-panel:#101724; --ui-inset:#080d16; --ui-line:#354967;
  --ui-edge:#6385aa; --ui-paper:#e6edf2; --ui-muted:#93a3b8;
  --ui-orange:#ff9b30; --ui-yellow:#ffe66b; --ui-cyan:#80dce6; --ui-green:#a9d740;
  --ui-frame:url('/assets/ui/tower-frame.png'); --ui-button:url('/assets/ui/tower-button.png');
  --bg:var(--ui-bg); --panel:var(--ui-panel); --text:var(--ui-paper); --muted:var(--ui-muted);
  --line:var(--ui-line); --orange:var(--ui-orange); --yellow:var(--ui-yellow); --cyan:var(--ui-cyan); --lime:var(--ui-green);
  color-scheme:dark;
}
body { background:var(--ui-bg); color:var(--ui-paper); font:20px/1.2 VT323,monospace; }
::selection { background:var(--ui-orange); color:#151018; }
button,input,select,textarea { border-radius:0; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:2px solid var(--ui-yellow); outline-offset:4px; }
button { touch-action:manipulation; }
.eyebrow { font:15px/1.2 VT323; color:var(--ui-cyan); letter-spacing:1px; }
body:not(.studio-body):not([data-screen="battle"]) #app { max-width:1600px; padding:0 32px; }
body[data-screen="home"] #app { max-width:1600px; }
.topbar,body[data-screen="battle"] .topbar { background:var(--ui-bg); border-bottom:1px solid #293448; box-shadow:none; }
body:not([data-screen="battle"]) .topbar { height:64px; gap:26px; padding:0; }
.topbar .wordmark { width:146px; height:58px; flex-shrink:0; }
.topbar .mode { color:#8291a7; font:15px VT323; letter-spacing:1px; }
.topbar .mode b { margin:0 10px; color:#3e5470; }
.topbar nav { gap:8px; align-items:center; }
.topbar .menu-button,.topbar .icon-button { background:#101927; border:1px solid #3b526f; color:#cfdeef; box-shadow:inset 0 1px #526d8c; font:17px VT323; letter-spacing:.5px; min-height:32px; }
.topbar .menu-button { padding:0 14px; display:inline-flex; align-items:center; text-decoration:none; }
.topbar .icon-button { width:32px; height:32px; font-size:21px; }
.topbar .menu-button:hover,.topbar .icon-button:hover,.topbar .icon-button.active { color:var(--ui-yellow); background:#1a293e; border-color:#7c9ec7; }
.topbar .studio-menu-link { color:#9bb4d1; }
.pixel-frame { background:var(--ui-panel); border:16px solid transparent; border-image:var(--ui-frame) 280 / 16px / 0 stretch; image-rendering:pixelated; }
.outline-button,.secondary-play,.text-button,.back-link { font-family:VT323,monospace; }
.outline-button { background:#182639; color:#dce9f6; border:2px solid #46617f; box-shadow:inset 1px 1px #6b85a1,inset -1px -1px #090f1b,0 2px #000; font:18px VT323; padding:10px 15px; letter-spacing:.5px; }
.outline-button:hover:not(:disabled) { background:#223651; border-color:#a0bdd8; color:#fff4c9; }
.outline-button:disabled { opacity:.4; }
.end-turn,.studio-body .primary { background:#ff9726; background-clip:padding-box; border:6px solid transparent; border-image:var(--ui-button) 112 192 128 192 / 6px 10px 7px 10px / 0 stretch; color:#211323; box-shadow:none; font:19px VT323; letter-spacing:.7px; padding:14px 24px; min-height:46px; image-rendering:pixelated; }
.end-turn:hover:not(:disabled),.studio-body .primary:hover:not(:disabled) { color:#0f0a12; filter:brightness(1.13); background-color:#ffb940; }
.end-turn:disabled,.studio-body .primary:disabled { opacity:.45; filter:grayscale(.7); cursor:not-allowed; }
.end-turn:hover,.end-turn:active { transform:none; }
.outline-button:active:not(:disabled),.end-turn:active:not(:disabled) { translate:0 1px; }
.text-button,.back-link { color:#9db6d1; font:17px VT323; letter-spacing:.4px; }
.text-button:hover,.back-link:hover { color:var(--ui-yellow); }

/* Main menu: original world, a compact console, and a proper crew rack. */
#home-screen:not([hidden]) { min-height:calc(100svh - 64px); display:grid; grid-template-columns:360px minmax(0,1fr); grid-template-rows:minmax(520px,1fr) auto auto; gap:20px 18px; padding:24px 0 16px; overflow:visible; isolation:isolate; }
.main-menu { grid-column:1; grid-row:1; width:100%; align-self:center; position:relative; z-index:1; padding:0; }
.menu-logo { width:100%; margin:0 0 10px; padding:0; line-height:1; }
.menu-logo img { width:100%; height:auto; display:block; image-rendering:pixelated; }
.menu-console { padding:17px 17px 15px; }
.console-heading { display:flex; align-items:center; justify-content:space-between; color:#89a7c7; font:15px VT323; letter-spacing:1.5px; border-bottom:1px solid #344663; padding-bottom:12px; }
.console-heading span:last-child { color:var(--ui-orange); font-size:21px; letter-spacing:0; }
.menu-intro { color:#b5c4d6; font:25px/1.1 VT323; margin:18px 0 23px; }
.menu-intro strong { color:#fff2c6; font-weight:400; }
.menu-actions { display:grid; gap:12px; }
#home-screen .play-button { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:100%; min-height:76px; height:76px; padding:10px 20px; margin:0; border:7px solid transparent; border-image:var(--ui-button) 112 192 128 192 / 7px 12px 8px 12px / 0 stretch; color:#271326; background:#ff9726; background-clip:padding-box; box-shadow:none; text-shadow:none; image-rendering:pixelated; transition:filter .12s,translate .12s; }
#home-screen .play-button>span { font:16px/1.15 Silkscreen; font-weight:400; letter-spacing:0; }
#home-screen .play-button small { font:15px VT323; letter-spacing:1px; margin:0; color:#703f29; }
#home-screen .play-button:hover:not(:disabled) { filter:brightness(1.12); transform:none; box-shadow:none; }
#home-screen .play-button:active:not(:disabled) { translate:0 2px; }
#home-screen .play-button:disabled { opacity:.45; filter:grayscale(.8); }
#home-screen .secondary-play { width:100%; min-height:54px; margin:0; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border:2px solid #567699; background:#1b2c43; color:#e0edf8; box-shadow:inset 1px 1px #7894ad,inset -1px -1px #0b1120,0 2px #000; font:20px VT323; letter-spacing:.3px; }
#home-screen .secondary-play>span { color:#e0edf8; font:20px VT323; }
#home-screen .secondary-play small { font:15px VT323; color:var(--ui-cyan); white-space:nowrap; }
#home-screen .secondary-play:hover { background:#273d56; border-color:#a6bed4; }
.menu-current { display:grid; grid-template-columns:1fr auto; gap:4px 12px; padding-top:16px; margin-top:17px; border-top:1px solid #344663; }
.menu-current>span { grid-column:1/-1; font:14px VT323; letter-spacing:1px; color:#7f96b0; }
.menu-current b { grid-column:1/-1; font:23px VT323; color:var(--ui-yellow); overflow-wrap:anywhere; }
.menu-current small { grid-column:1/-1; font:14px VT323; color:#9eafc2; }
.menu-world { grid-column:2; grid-row:1; position:relative; min-width:0; min-height:520px; overflow:hidden; background:#000; }
#home-screen .splash-art { position:absolute; inset:0; width:100%; height:100%; max-width:none; opacity:1; transform:none; animation:none; z-index:0; }
#home-screen .splash-art canvas { width:100%; height:100%; max-height:none; object-fit:contain; }
.world-caption { position:absolute; right:18px; bottom:8px; display:grid; text-align:right; gap:3px; pointer-events:none; }
.world-caption span { font:14px VT323; letter-spacing:2px; color:#8c9caa; }
.world-caption b { font:16px Silkscreen; color:#d0e99d; font-weight:400; text-shadow:2px 2px #000; }
#home-screen .home-deck-strip { position:static; grid-column:1/-1; display:block; min-width:0; padding:0; margin:0; background:transparent; border:0; box-shadow:none; }
#home-screen .deck-strip-label { min-width:0; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #304159; padding:0 2px 10px; margin-bottom:12px; }
#home-screen .deck-strip-label .eyebrow { color:#e2bd78; font:15px VT323; letter-spacing:1.4px; }
#home-screen .deck-strip-label>span:last-child { color:#6e859f; font:15px VT323; }
#home-screen .loadouts { display:flex; gap:14px; margin:0; padding:3px 2px 8px; overflow-x:auto; min-width:0; scrollbar-width:thin; scrollbar-color:#536d8a #0b111b; }
#home-screen .loadout { flex:1 0 245px; min-width:245px; max-width:380px; height:91px; display:flex; align-items:center; gap:13px; padding:9px 11px; margin:0; background:#111b2a; border:2px solid #354d69; box-shadow:inset 0 1px #536b85,0 3px #000; opacity:1; text-align:left; position:relative; transform:none; }
#home-screen .loadout:hover { background:#1b2a3d; border-color:#829eba; transform:none; }
#home-screen .loadout.chosen { background:#1b2836; border-color:#edb64c; box-shadow:inset 0 1px #ffdf88,0 3px #000; }
.loadout-art { display:flex; flex:0 0 72px; position:relative; width:72px; height:66px; align-items:end; overflow:hidden; background:#ffe46a; border:2px solid #121723; }
#home-screen .loadout-art canvas { position:absolute; height:64px; width:55px; max-height:none; background:none; border:0; object-fit:contain; left:18px; bottom:0; }
#home-screen .loadout-art canvas:nth-child(1) { left:-10px; }
#home-screen .loadout-art canvas:nth-child(2) { left:8px; }
#home-screen .loadout-art canvas:nth-child(3) { left:26px; }
.loadout-art img { width:100%; height:100%; object-fit:contain; }
.loadout-info { min-width:0; display:grid; gap:7px; flex:1; }
#home-screen .loadout b { font:23px/1 VT323; color:#dce6ef; text-shadow:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#home-screen .loadout.chosen b { color:var(--ui-yellow); }
#home-screen .loadout small { color:#8299b4; font:14px VT323; letter-spacing:.2px; white-space:nowrap; }
#home-screen .loadout i { margin-left:auto; color:#7795b4; font:20px VT323; font-style:normal; }
#home-screen .loadout.chosen i { color:var(--ui-yellow); }
#home-screen .home-bottom { position:static; grid-column:1/-1; display:flex; justify-content:space-between; gap:12px; padding:0 2px; color:#62778e; font:14px VT323; letter-spacing:1px; }
#home-screen .home-bottom i { color:#c17c3d; padding:0 6px; }

/* Collection: quiet shelves let the original card frames provide the colour. */
#deck-screen { padding:28px 0; }
#deck-screen .workshop-heading { padding:0 0 24px; margin:0 0 24px; color:var(--ui-paper); background:none; border:0; border-bottom:1px solid #34445c; box-shadow:none; align-items:center; gap:20px; }
#deck-screen .back-link { color:#8ea6bf; font:16px VT323; letter-spacing:1px; }
#deck-screen .workshop-heading h1 { font:27px/1.15 Silkscreen; color:var(--ui-paper); text-shadow:2px 2px #000; letter-spacing:-1px; margin:12px 0 8px; max-width:none; }
#deck-screen .workshop-heading h1 span { color:var(--ui-orange); }
#deck-screen .workshop-heading p { font:21px VT323; color:#8498b2; }
#deck-screen .workshop-actions { display:flex; flex-direction:row; gap:10px; align-items:center; }
#deck-screen .workshop-actions .outline-button { font:18px VT323; padding:12px 17px; }
#deck-screen .workshop-actions .end-turn { min-width:110px; font:19px VT323; }
#deck-screen .workshop-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:30px; align-items:start; }
#deck-screen .collection { min-width:0; width:100%; border:0; padding:0; background:none; box-shadow:none; }
#deck-screen .collection-toolbar { display:flex; gap:12px; align-items:center; flex-wrap:nowrap; }
#deck-screen .search-box { flex:1; min-width:0; height:46px; padding:0 14px; background:#111b2a; border:1px solid #405773; box-shadow:inset 2px 2px #070c14; }
#deck-screen .search-box:focus-within { border-color:var(--ui-yellow); }
#deck-screen .search-box input { color:#e1e9ee; background:transparent; font:21px VT323; }
#deck-screen .search-box input::placeholder { color:#7c93ad; }
#deck-screen .search-box>span { color:#7c93ad; }
#deck-screen .collection-toolbar select,#deck-screen .deck-selector-row select,#deck-screen .deck-name-label input { color:#d4e2ee; background:#0b131e; border:1px solid #4d6380; box-shadow:inset 1px 1px #03070c; font:20px VT323; padding:10px 12px; border-radius:0; }
#deck-screen .collection-toolbar select { height:46px; width:205px; max-width:40%; }
#deck-screen .collection-filters { display:flex; gap:12px; align-items:center; margin:16px 0; flex-wrap:wrap; }
#deck-screen .type-tabs { gap:0; border:1px solid #3a4b61; }
#deck-screen .type-tabs button { border:0; border-right:1px solid #3a4b61; color:#8fa5bf; background:#0e1623; font:17px VT323; letter-spacing:.7px; padding:9px 15px; }
#deck-screen .type-tabs button:last-child { border-right:0; }
#deck-screen .type-tabs button.active { background:#2d4158; color:var(--ui-yellow); box-shadow:inset 0 -3px var(--ui-orange); }
#deck-screen .cost-filters { gap:5px; }
#deck-screen .cost-filters button { width:30px; height:31px; border:1px solid #354f6c; background:#101d2d; color:#94b8d5; font:19px VT323; box-shadow:inset 0 1px #425c75; }
#deck-screen .cost-filters button.active { border-color:#f0ba55; color:#201622; background:var(--ui-yellow); box-shadow:inset 1px 1px #fff6b4; }
#deck-screen .collection-count { font:15px VT323; color:#8095ae; letter-spacing:.6px; margin-bottom:18px; }
#deck-screen .collection-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(172px,1fr)); gap:24px 19px; padding:4px 0; }
#deck-screen .collection-card { max-width:245px; width:100%; justify-self:center; }
#deck-screen .collection-card:hover { box-shadow:none; transform:translateY(-3px); }
#deck-screen .collection-inspect:focus-visible { outline-color:var(--ui-yellow); }
#deck-screen .copy-control { border:1px solid #3e5572; margin:7px 5px 0; background:#111a28; box-shadow:0 2px #000; height:34px; }
#deck-screen .copy-control span { font:17px VT323; color:#93abc3; }
#deck-screen .copy-control button { width:40px; border:0; color:#d6e8f3; background:#263c55; box-shadow:inset 0 1px #627e98; font:25px VT323; }
#deck-screen .copy-control button:hover:not(:disabled) { background:#d49639; color:#181422; }
#deck-screen .copy-control button:disabled { opacity:.3; }
#deck-screen .deck-sidebar { position:sticky; top:18px; display:flex; flex-direction:column; gap:0; width:100%; max-height:calc(100svh - 36px); min-height:600px; padding:13px; background:#101724; border:13px solid transparent; border-image:var(--ui-frame) 280 / 13px / 0 stretch; box-shadow:none; }
#deck-screen .deck-selector-row .eyebrow { color:#829cb8; font:15px VT323; margin-bottom:8px; letter-spacing:1px; }
#deck-screen .deck-selector-row select { width:100%; height:39px; padding:6px 9px; }
#deck-screen .deck-name-label { color:#7d93ac; font:14px VT323; letter-spacing:1px; margin:18px 0 0; }
#deck-screen .deck-name-label input { display:block; background:transparent; border:0; border-bottom:1px solid #405471; box-shadow:none; font:25px VT323; padding:5px 0 9px; color:#e8cc87; }
#deck-screen .deck-total { margin-top:14px; gap:8px; }
#deck-screen .deck-total>strong { color:#e9edf3; font:35px VT323; }
#deck-screen .deck-total small { color:#627b95; font:24px VT323; }
#deck-screen .deck-total>span { font:14px VT323; letter-spacing:.3px; max-width:none; }
#deck-screen .deck-valid { color:#badb79; }
#deck-screen .deck-incomplete { color:#e3a672; }
#deck-screen .deck-progress { height:5px; margin-top:9px; border:0; background:#26354a; }
#deck-screen .deck-progress>i { background:var(--ui-orange); }
#deck-screen .mana-curve { height:83px; padding:9px 0 4px; margin-top:8px; border:0; background:none; gap:7px; }
#deck-screen .mana-curve i { background:#437c9b; border-top:2px solid #a4e5e3; box-shadow:inset 2px 0 #6cacbd; }
#deck-screen .mana-curve span,#deck-screen .mana-curve small { color:#94aac2; font:14px VT323; }
#deck-screen .deck-breakdown { color:#738ca6; font:14px VT323; border-color:#2b3e54; letter-spacing:.4px; padding-bottom:10px; }
#deck-screen .deck-list { display:block; min-height:110px; max-height:none; margin:12px 0 0; padding:0 1px; overflow:auto; scrollbar-color:#49637d #0c1420; }
#deck-screen .deck-row { height:38px; margin-bottom:4px; background:#182639; border:1px solid #314a65; border-left:2px solid var(--rarity); gap:6px; box-shadow:none; }
#deck-screen .deck-row .row-cost { flex:0 0 24px; width:24px; background:#263f5b; color:var(--ui-yellow); border-color:#46607b; font:22px VT323; }
#deck-screen .row-portrait { flex:0 0 30px; width:30px; height:34px; max-height:none; background:#e4cc6b; object-fit:cover; }
#deck-screen .deck-row>button:first-of-type { min-width:0; color:#d8e4ee; font:18px VT323; }
#deck-screen .deck-row>b { color:#91aec9; font:16px VT323; }
#deck-screen .deck-row>button:last-child { width:25px; background:#122032; border-color:#34506c; color:#899cb5; font:24px VT323; }
#deck-screen .deck-row>button:last-child:hover { color:#ffd886; background:#613b26; }
#deck-screen .deck-tools { margin-top:12px; padding-top:11px; border-color:#30465f; gap:6px; }
#deck-screen .deck-tools button { padding:7px 3px; font:14px VT323; letter-spacing:0; }
#deck-screen .deck-play-wrap .end-turn { margin-top:12px; font:18px VT323; padding:13px; min-height:45px; }
#deck-screen #storage-status { color:#61778d; font:13px VT323; letter-spacing:.5px; margin-top:10px; }
#deck-screen .empty-deck { color:#8aa1bb; padding:25px 8px; }
#deck-screen .empty-deck p { color:#d3e0ec; font:21px VT323; }
#deck-screen .empty-deck small { color:#8aa1bb; font:17px/1.2 VT323; }
#deck-screen .no-cards,#deck-screen .no-cards p { color:#8aa1bb; }
#deck-screen .no-cards h3 { color:#e0c48b; font:24px Silkscreen; }

/* Shared game windows. Card art retains its original percentage-based layout. */
dialog,.studio-body dialog { background:#101724; color:#dce6ef; border:18px solid transparent; border-image:var(--ui-frame) 280 / 18px / 0 stretch; outline:0; box-shadow:0 12px 0 #0009; padding:24px 28px; }
dialog::backdrop { background:#000c; backdrop-filter:none; }
dialog .eyebrow { color:#7a99ba; font:15px VT323; }
dialog h2 { color:var(--ui-yellow); font:25px/1.2 Silkscreen; text-shadow:2px 2px #05080d; letter-spacing:-.5px; }
dialog #modal-content>p,dialog .rule,dialog .modal-note,.studio-body dialog p { color:#aebfd2; font:21px/1.2 VT323; }
dialog .rule { border-color:#30455f; }
dialog .rule b { color:#e4b865; font-weight:400; }
.modal-close { top:8px; right:9px; border:1px solid #4c6380; background:#26364d; color:#b8cee1; width:30px; height:30px; font:27px/1 VT323; box-shadow:inset 1px 1px #7490a9; }
.modal-close:hover { color:#fff1b7; background:#8b5229; }
dialog .text-button { color:#87a5c5; font:18px VT323; }
dialog:has(.card-detail-view) { width:min(760px,94vw); }
.card-detail-view { display:grid; grid-template-columns:212px minmax(0,1fr); gap:30px; align-items:center; padding:10px 0; }
.card-detail-view .detail-card { width:212px; max-width:100%; margin:0; }
.card-detail-copy { min-width:0; }
.card-detail-copy h2 { margin:12px 0 16px; overflow-wrap:anywhere; }
.card-detail-tags { display:flex; gap:12px; color:#7e9cba; font:15px VT323; letter-spacing:1px; }
.card-detail-copy>p { color:#d3e2ed; font:24px/1.2 VT323; margin:22px 0; }
.card-detail-stats { border-top:1px solid #3b506b; padding-top:18px; display:flex; gap:28px; }
.card-detail-stats>div { display:grid; gap:3px; }
.card-detail-stats b { color:var(--ui-yellow); font:34px VT323; }
.card-detail-stats span { color:#7994b0; font:14px VT323; letter-spacing:.8px; }
.mulligan-card { box-shadow:3px 4px #000; }
.mulligan-card .keep-label { background:#12263c; color:#a7d6d8; border-top:1px solid #507192; }
.mulligan-card.replace .keep-label { color:#ffd3ca; background:#79334c; border-color:#d9697e; }
.result-summary { border-color:#334c67; }
.result-summary b { color:#ffbd54; }
.result-summary span,.result-summary small { color:#8aa2bd; }
.global-toast { background:#15273c; color:#e4eef4; border:2px solid #5c81a5; box-shadow:3px 4px #000; font:21px VT323; }

/* The battle rows stay where they are. Its controls borrow the card-back metal. */
#battle-screen .battle-hud { background:#05080d; border:0; box-shadow:none; }
#battle-screen .hero-label,#battle-screen .health-caption,#battle-screen .round-info { color:#a3b3c4; }
#battle-screen .hero-vitals strong,#battle-screen #round { color:#ffe37a; }
#battle-screen #turn-marker { color:#9cdadf; }
#battle-screen .mini-mana { color:#7991aa; }
#battle-screen .health-track { border-color:#344b64; background:#112033; box-shadow:none; }
#battle-screen .health-track i { background:#b4d346; }
#battle-screen .player-dock { background:#101723; border-top-color:#526c87; box-shadow:inset 0 2px #273b54; }
#battle-screen .player-hud { background:#172538; color:#d9e3ec; box-shadow:inset 0 1px #3d536b,inset 0 -1px #050c15; }
#battle-screen .player-profile .eyebrow,#battle-screen .player-health,#battle-screen .deck-indicator { color:#b2c3d4; }
#battle-screen .energy-readout span { color:#8197b0; }
#battle-screen .energy-readout b { color:var(--ui-yellow); }
#battle-screen .hero-power { color:#c6e6ed; background:#243b54; border-color:#557896; box-shadow:inset 1px 1px #6e93ad; }
#battle-screen .hero-power>b { color:var(--ui-yellow); }
#battle-screen .hero-power.selected { background:#4f4524; border-color:#f5cb6e; }
#battle-screen .hero-power:disabled { opacity:.45; }
#battle-screen .crystals i { border-color:#405978; background:#112135; }
#battle-screen .crystals i.filled { background:#f6bf4f; box-shadow:inset 1px 1px #fff4a4; }
#battle-screen .hand { scrollbar-color:#526e8d #101723; }
#battle-screen .inspector { background:#0b111c; border:1px solid #45607d; box-shadow:inset 0 2px #1b2d43; }
#battle-screen .intel-name,#battle-screen .intel-empty p { color:#efc477; }
#battle-screen .intel-description,#battle-screen .intel-empty small { color:#bed0e0; }
#battle-screen .intel-status,#battle-screen .intel-stats small { color:#7e9cb8; }
#battle-screen .detail-close,#battle-screen .detail-play { color:#b2cce1; background:#1c3049; border-color:#446683; box-shadow:inset 1px 1px #547c98; }
#battle-screen .detail-play { color:#fff0bb; border-color:#af7537; background:#613e23; }
#battle-screen .mobile-detail small { color:#aac0d4; }
#battle-screen .battle-controls { background:#101723; box-shadow:none; }
#battle-screen .orders-heading,#battle-screen .order-list>p { color:#8da4bc; }
#battle-screen .orders-heading b { color:#efc879; }
#battle-screen .orders-heading>button { color:#9cb7d0; border-color:#3d5671; background:#1b2a3f; }
#battle-screen .order-chip { background:#18263a; box-shadow:none; }
#battle-screen .order-label span { color:#dce9f2; }
#battle-screen .order-label small { color:#97b2ca; }
#battle-screen .order-controls button { background:#233c55; color:#b9d4e4; border-color:#486983; }
#battle-screen .order-controls button:last-child { color:#eda397; }
#battle-screen .status-message { background:#e8edf0; border-color:#22364e; box-shadow:inset 1px 1px #97adba; }
#battle-screen .action-row { background:none; }
#battle-screen .end-turn { min-height:0; color:#251527; background:#ff9726; background-clip:padding-box; border:6px solid transparent; border-image:var(--ui-button) 112 192 128 192 / 6px 9px 7px 9px / 0 stretch; box-shadow:none; image-rendering:pixelated; }
#battle-screen .end-turn:hover:not(:disabled) { color:#1f1422; filter:brightness(1.15); }
#battle-screen .end-turn:disabled { filter:grayscale(.6); opacity:.5; background-color:#9d825c; }
#battle-screen .battle-history { background:#080d15; color:#677d95; }
#battle-screen #restart { color:#809ebc; }

/* Studio is a usable editing desk within the same game, not another theme. */
.studio-body { background:#080d15; color:#cad8e5; }
.studio-top { height:82px; background:#0a101b; border-color:#354e69; border-bottom-width:2px; box-shadow:inset 0 -1px #182a41; padding:0 26px; }
.studio-brand { color:#8da6c1; gap:20px; }
.studio-brand img { width:168px; }
.studio-brand span { font:16px VT323; letter-spacing:1px; }
.studio-toolbar button { font:18px VT323; padding:10px 14px; }
.studio-toolbar .end-turn { min-height:44px; font:18px VT323; min-width:120px; }
.studio-toolbar #save-state { color:#8ca5bf; font:16px VT323; max-width:155px; }
.studio-shell { grid-template-columns:205px minmax(0,1fr); min-height:calc(100svh - 82px); }
.studio-nav { top:82px; max-height:calc(100svh - 82px); padding:25px 14px; background:#111c2b; border-right:1px solid #334d69; box-shadow:inset -2px 0 #080e18; }
.studio-nav>.eyebrow { font:15px VT323; color:#6f8ba9; letter-spacing:1.7px; padding:0 10px; }
.studio-nav nav { gap:6px; }
.studio-nav button { padding:11px 10px; background:none; border:1px solid transparent; color:#92aac4; font:22px VT323; box-shadow:none; }
.studio-nav button:hover { background:#1a2b40; color:#d1e4ed; }
.studio-nav button.active { color:#f6d891; background:#253a51; border-color:#4b6885; box-shadow:inset 3px 0 #f9ab3d,inset 0 1px #617c94; }
.studio-nav button b { color:#92c4d9; }
.studio-nav-bottom { color:#6e87a2; font:17px/1.2 VT323; }
.studio-nav-bottom a { color:#a5c5db; }
.draft-indicator { background:#172c40; color:#d7bc7b; border:1px solid #4c6580; font:14px VT323; letter-spacing:1px; padding:6px 9px; }
.studio-main { max-width:1640px; width:100%; padding:32px; }
.studio-heading { background:none; border:0; border-bottom:1px solid #324861; padding:0 0 22px; margin:0 0 25px; box-shadow:none; gap:20px; }
.studio-heading h1,.studio-heading h2 { color:#e4ebf1; font-size:25px; text-shadow:2px 2px #000; }
.studio-heading p { color:#819ab4; font:21px/1.15 VT323; max-width:740px; }
.studio-body input,.studio-body select,.studio-body textarea { background:#0b1522; color:#d7e4ef; border:1px solid #43617f; box-shadow:inset 2px 2px #040910; padding:10px 12px; font-family:VT323; }
.studio-body input::placeholder,.studio-body textarea::placeholder { color:#66819e; }
.studio-body input[type="checkbox"] { accent-color:#f3b447; }
.studio-body .primary { padding:13px 24px; }
.studio-body .danger { color:#f5a698; border-color:#8b5062; background:#311f30; }
.studio-body .danger:hover { color:#ffcbb9; border-color:#d78486; background:#4f293b; }
.studio-filters { gap:12px; margin-bottom:28px; }
.studio-card-grid { grid-template-columns:repeat(auto-fill,minmax(185px,1fr)); gap:28px 24px; }
.studio-card-grid .studio-card { width:100%; max-width:250px; justify-self:center; }
.studio-card:hover { outline:2px solid #efc76f; outline-offset:3px; }
.studio-section { padding:24px; background:#111e2e; border:1px solid #34506b; box-shadow:inset 0 2px #284058,0 4px #030710; margin-bottom:24px; }
.studio-section h2 { color:#dab477; font:19px Silkscreen; letter-spacing:-.5px; margin-bottom:20px; }
.studio-section p,.studio-fields label,.studio-preview small,.studio-rule-note { color:#8fa9c1; }
.studio-fields { gap:20px 24px; }
.studio-fields label { font-size:19px; gap:8px; }
.studio-fields .check,.studio-tags label { color:#cfdee9; }
.studio-preview { top:106px; }
.studio-rule { background:#0a1421; border:1px solid #385571; border-left:3px solid #d69e4e; padding:17px; }
.studio-small-button { background:#213b53; border:1px solid #52748c; color:#c7e0eb; box-shadow:inset 1px 1px #6c879c; }
.studio-link { color:#86c9d8; }
.studio-asset-grid { gap:24px; }
.asset-tile { background:#142236; border:1px solid #3b5775; box-shadow:0 4px #030710; color:#d5e2ed; }
.asset-tile:hover { border-color:#e8b25a; }
.asset-image { background-color:#0b111c; background-image:linear-gradient(45deg,#18263a 25%,transparent 25%),linear-gradient(-45deg,#18263a 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#18263a 75%),linear-gradient(-45deg,transparent 75%,#18263a 75%); border-bottom:1px solid #3b5775; }
.asset-caption { padding:14px; }
.asset-caption b { color:#d8e7ef; }
.asset-caption small { color:#7394b3; }
.upload-zone { background:#112337; color:#aac4d8; border:1px dashed #698cad; box-shadow:inset 0 0 0 5px #0a1726; padding:26px; }
.upload-zone.dragging { color:#e2f4e8; background:#253a32; border-color:#bde786; }
.studio-empty { color:#8aa5c0; border-color:#3e5974; }
.studio-message { background:#28291d; color:#dfd197; border-left:3px solid #e7ad44; box-shadow:none; font:20px/1.2 VT323; }
.studio-error { background:#352134; color:#f4aaa2; border-color:#e67684; }
.studio-good { background:#1a312c; color:#b6d6a0; border-color:#91b95b; }
.studio-toast { color:#e1edf3; background:#182e44; border:2px solid #7295b2; box-shadow:4px 4px #000; }
.studio-body dialog h2 { color:#e3ba72; }
.studio-history { background:#111e2e; border:1px solid #3c5772; }
.studio-history th { color:#86a6c4; background:#182a3f; }
.studio-history th,.studio-history td { border-color:#2e455e; }
.studio-guide p,.studio-guide li { color:#a2b8ce; }
.studio-guide code { color:#99d7dc; }
.studio-sim-output { color:#abc9bf; background:#070f18; border-color:#3f5c72; }
.studio-preview-tag { background:#f1bc57; color:#252033; border:1px solid #a97336; }

@media(min-width:1600px) {
  #home-screen:not([hidden]) { grid-template-columns:390px minmax(0,1fr); gap:24px 45px; }
  .menu-console { padding:20px 23px; }
  .menu-world { min-height:570px; }
}
@media(max-width:1100px) {
  body:not(.studio-body):not([data-screen="battle"]) #app { padding:0 22px; }
  #home-screen:not([hidden]) { grid-template-columns:320px minmax(0,1fr); gap:20px 8px; }
  .menu-console { padding:15px 10px; }
  #home-screen .play-button>span { font-size:14px; }
  #home-screen .secondary-play { padding:11px; }
  #home-screen .secondary-play>span { font-size:19px; }
  .world-caption b { font-size:13px; }
  #deck-screen .workshop-layout { grid-template-columns:minmax(0,1fr) 290px; gap:22px; }
  #deck-screen .collection-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:22px 15px; }
  #deck-screen .collection-toolbar { flex-wrap:wrap; }
  #deck-screen .collection-toolbar .search-box { flex-basis:100%; }
  #deck-screen .collection-toolbar select { max-width:none; width:100%; height:40px; }
  #deck-screen .deck-sidebar { padding:10px; border-width:11px; border-image-width:11px; }
  .studio-shell { grid-template-columns:180px minmax(0,1fr); }
  .studio-main { padding:25px; }
  .studio-card-grid { gap:22px 18px; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); }
  .studio-section { padding:20px; }
}
@media(max-width:800px) {
  .topbar .mode { display:none; }
  #home-screen:not([hidden]) { grid-template-columns:290px minmax(0,1fr); grid-template-rows:minmax(475px,1fr) auto auto; gap:18px 0; padding-top:18px; min-height:0; }
  .menu-console { border-width:12px; border-image-width:12px; padding:15px 9px; }
  .menu-intro { font-size:24px; }
  #home-screen .play-button { min-height:70px; height:70px; }
  #home-screen .play-button>span { font-size:13px; }
  #home-screen .secondary-play { gap:6px; padding:11px 8px; }
  #home-screen .secondary-play>span { font-size:18px; }
  #home-screen .secondary-play small { font-size:13px; }
  .menu-world { min-height:475px; }
  .world-caption { right:0; bottom:12px; }
  .world-caption span { font-size:13px; letter-spacing:1px; }
  .world-caption b { font:19px VT323; }
  #deck-screen .workshop-heading h1 { font-size:23px; }
  #deck-screen .workshop-layout { grid-template-columns:minmax(0,1fr) 265px; gap:18px; }
  #deck-screen .deck-sidebar { padding:8px; }
  #deck-screen .collection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 12px; }
  #deck-screen .type-tabs button { font-size:16px; padding:8px; }
  #deck-screen .cost-filters { flex-wrap:wrap; }
  #deck-screen .cost-filters button { width:28px; }
  .studio-top { height:auto; min-height:82px; padding:10px 15px; }
  .studio-brand { max-width:none; }
  .studio-brand img { width:142px; }
  .studio-toolbar .end-turn { min-width:100px; font:18px VT323; }
  .studio-shell { grid-template-columns:minmax(0,1fr); }
  .studio-nav { position:static; max-height:none; border-right:0; border-bottom:1px solid #344d67; padding:10px; }
  .studio-nav nav { display:flex; }
  .studio-nav button { font-size:20px; padding:9px 12px; }
  .studio-preview { position:static; }
  .studio-section h2 { font-size:16px; }
  .studio-heading h1 { font-size:22px; }
}
@media(min-width:801px) and (max-width:1000px) {
  .studio-top { height:110px; padding:10px 20px; gap:18px; }
  .studio-brand img { width:145px; }
  .studio-toolbar { flex:1; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
  .studio-toolbar #save-state { flex-basis:100%; width:100%; max-width:none; text-align:right; }
  .studio-toolbar button { padding:9px 12px; font-size:17px; }
  .studio-shell { min-height:calc(100svh - 110px); }
  .studio-nav { top:110px; max-height:calc(100svh - 110px); }
  .studio-preview { top:134px; }
}
@media(max-width:650px) {
  body:not(.studio-body):not([data-screen="battle"]) #app { padding:0 14px; }
  body:not([data-screen="battle"]) .topbar { height:58px; gap:8px; }
  .topbar .wordmark { width:125px; height:50px; }
  .topbar nav { gap:5px; }
  .topbar .menu-button { padding:0 8px; font-size:16px; }
  .topbar .icon-button { width:29px; height:31px; }
  #home-screen:not([hidden]) { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto auto; gap:24px; padding-top:20px; }
  .main-menu { grid-column:1; grid-row:1; width:min(100%,390px); justify-self:center; }
  .menu-logo { width:min(100%,355px); margin:0 auto 10px; }
  .menu-console { padding:16px 18px; border-width:15px; border-image-width:15px; }
  .menu-intro { margin:15px 0 20px; font-size:25px; }
  #home-screen .play-button>span { font-size:16px; }
  #home-screen .secondary-play>span { font-size:21px; }
  #home-screen .secondary-play small { font-size:15px; }
  .menu-world { grid-column:1; grid-row:2; width:100%; min-height:0; aspect-ratio:1280/1050; }
  .world-caption { right:5px; bottom:0; }
  #home-screen .home-deck-strip { grid-row:3; }
  #home-screen .loadout { flex-basis:250px; }
  #home-screen .home-bottom { grid-row:4; flex-wrap:wrap; font-size:13px; gap:7px; }
  #deck-screen { padding-top:20px; }
  #deck-screen .workshop-heading { padding-bottom:20px; margin-bottom:20px; display:flex; flex-wrap:wrap; }
  #deck-screen .workshop-heading h1 { font-size:23px; max-width:none; }
  #deck-screen .workshop-heading p { font-size:20px; }
  #deck-screen .workshop-actions { width:100%; justify-content:space-between; }
  #deck-screen .workshop-layout { display:flex; flex-direction:column-reverse; gap:26px; }
  #deck-screen .deck-sidebar { position:relative; top:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); max-height:none; min-height:0; border-width:12px; border-image-width:12px; padding:12px; gap:12px 14px; }
  #deck-screen .deck-selector-row { grid-column:1/-1; }
  #deck-screen .deck-name-label { grid-column:1; margin:0; }
  #deck-screen .deck-name-label input { font-size:23px; }
  #deck-screen .deck-total { margin:0; flex-wrap:wrap; gap:2px; }
  #deck-screen .deck-total>strong { font-size:30px; }
  #deck-screen .deck-total>span { font-size:13px; text-align:left; }
  #deck-screen .mana-curve { height:66px; }
  #deck-screen .deck-breakdown { font-size:13px; }
  #deck-screen .deck-list { grid-column:1/-1; max-height:172px; min-height:0; margin:0; display:grid; grid-template-columns:1fr; gap:4px; }
  #deck-screen .deck-row { margin:0; }
  #deck-screen .deck-tools { grid-column:1/-1; margin:0; padding:0; border:0; display:flex; flex-wrap:wrap; gap:5px; }
  #deck-screen .deck-tools button { flex:1; }
  #deck-screen .deck-play-wrap { grid-column:1/-1; }
  #deck-screen .deck-play-wrap .end-turn { margin:0; font-size:17px; min-width:0; width:100%; }
  #deck-screen #storage-status { font-size:12px; }
  #deck-screen .collection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:21px 17px; }
  #deck-screen .collection-toolbar { gap:10px; }
  #deck-screen .collection-filters { gap:13px; }
  #deck-screen .cost-filters button { width:30px; }
  dialog,.studio-body dialog { border-width:12px; border-image-width:12px; padding:22px 14px; }
  dialog h2 { font-size:21px; }
  .card-detail-view { grid-template-columns:minmax(0,1fr); gap:22px; }
  .card-detail-view .detail-card { width:190px; justify-self:center; }
  .card-detail-copy { width:100%; }
  .card-detail-copy h2 { font-size:23px; }
  .studio-top { position:relative; gap:12px; }
  .studio-toolbar { justify-content:flex-start; flex-basis:100%; gap:7px; }
  .studio-toolbar #save-state { width:auto; text-align:left; flex-basis:100%; }
  .studio-toolbar button { font:17px VT323; padding:8px 12px; }
  .studio-toolbar .end-turn { min-height:39px; min-width:94px; font:17px VT323; }
  .studio-main { padding:22px 15px; }
  .studio-heading { flex-wrap:wrap; gap:16px; }
  .studio-heading .studio-actions { width:100%; }
  .studio-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 16px; }
  .studio-fields { gap:16px 12px; }
  .studio-fields label { font-size:18px; }
  .studio-section { padding:17px; }
}
@media(max-width:370px) {
  .topbar .wordmark { width:108px; }
  .topbar .menu-button { padding:0 6px; font-size:15px; }
  .topbar .icon-button { width:26px; }
  #home-screen .play-button>span { font-size:14px; }
  .menu-console { padding:14px 12px; }
  #home-screen .secondary-play>span { font-size:19px; }
}
@media(prefers-reduced-motion:reduce) {
  #home-screen .play-button,.outline-button,.end-turn { transition:none; }
  #home-screen .play-button:active:not(:disabled),.outline-button:active:not(:disabled),.end-turn:active:not(:disabled) { translate:none; }
  #deck-screen .collection-card:hover { transform:none; }
}
@media(pointer:coarse) {
  #deck-screen .cost-filters button { min-width:38px; min-height:40px; }
  #deck-screen .copy-control { height:42px; }
  #deck-screen .copy-control button { min-width:44px; }
  #deck-screen .deck-row { height:42px; }
  #deck-screen .deck-row>button:last-child { width:38px; }
}

/* Sept 21 interface: the account mock-up is the source of truth for every control surface. */
:root {
  --mt-sky:#6fcaf0;
  --mt-ink:#173f47;
  --mt-ink-2:#20535d;
  --mt-teal:#08718a;
  --mt-cyan:#70d0ee;
  --mt-cream:#ffe675;
  --mt-paper:#fff0a0;
  --mt-orange:#f47a08;
  --mt-gold:#d39c0b;
  --mt-green:#63dc38;
  --mt-line:#263d42;
  --mt-shadow:#102f34;
  --ui-bg:var(--mt-ink);
  --ui-panel:var(--mt-ink-2);
  --ui-inset:#123940;
  --ui-line:var(--mt-gold);
  --ui-edge:var(--mt-cream);
  --ui-paper:var(--mt-cream);
  --ui-muted:#9cdae7;
  --ui-orange:var(--mt-orange);
  --ui-yellow:var(--mt-cream);
  --ui-cyan:var(--mt-cyan);
  --ui-green:var(--mt-green);
  --bg:var(--mt-ink);
  --panel:var(--mt-ink-2);
  --text:var(--mt-cream);
  --muted:#9cdae7;
  --line:var(--mt-gold);
  --orange:var(--mt-orange);
  --yellow:var(--mt-cream);
  --cyan:var(--mt-cyan);
  --lime:var(--mt-green);
}
body { background:var(--mt-sky); color:var(--mt-cream); }
body:not(.studio-body):not([data-screen="battle"]) #app {
  width:min(100%,1500px);
  min-height:100svh;
  background:var(--mt-ink);
  border-inline:4px solid var(--mt-line);
  box-shadow:0 0 0 2px var(--mt-gold);
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:3px solid var(--mt-cream);
  outline-offset:2px;
}
.topbar,body[data-screen="battle"] .topbar {
  background:var(--mt-ink);
  border-bottom:5px solid var(--mt-orange);
  box-shadow:inset 0 -2px var(--mt-cream);
}
body:not([data-screen="battle"]) .topbar { height:66px; padding:0 10px; }
.topbar .mode { color:var(--mt-cyan); }
.topbar .mode b { color:var(--mt-orange); }
.topbar .menu-button,.topbar .icon-button {
  min-height:32px;
  background:var(--mt-cream);
  border:2px solid var(--mt-line);
  color:var(--mt-line);
  box-shadow:inset 0 0 0 2px #fff3a6,2px 2px 0 var(--mt-orange);
  text-shadow:none;
}
.topbar .menu-button:hover,.topbar .icon-button:hover,.topbar .icon-button.active {
  color:#fff;
  background:var(--mt-orange);
  border-color:var(--mt-line);
}
.topbar .studio-menu-link { color:var(--mt-line); }
.pixel-frame,dialog,.studio-body dialog {
  background:var(--mt-ink-2);
  border:3px solid var(--mt-line);
  border-image:none;
  box-shadow:inset 0 0 0 2px var(--mt-gold),4px 4px 0 var(--mt-shadow);
}
.outline-button,.secondary-play {
  background:var(--mt-teal);
  border:2px solid var(--mt-line);
  color:var(--mt-cream);
  box-shadow:inset 0 0 0 1px var(--mt-cyan),2px 2px 0 var(--mt-shadow);
}
.outline-button:hover:not(:disabled),.secondary-play:hover {
  background:var(--mt-cyan);
  color:var(--mt-line);
  border-color:var(--mt-line);
}
.end-turn,.studio-body .primary {
  min-height:42px;
  padding:10px 20px;
  color:var(--mt-line);
  background:var(--mt-cream);
  border:3px solid var(--mt-line);
  border-image:none;
  box-shadow:inset 0 0 0 2px #fff4ab,3px 3px 0 var(--mt-orange);
}
.end-turn:hover:not(:disabled),.studio-body .primary:hover:not(:disabled) {
  background:var(--mt-orange);
  color:white;
  filter:none;
}
.text-button,.back-link { color:var(--mt-cyan); }
.text-button:hover,.back-link:hover { color:var(--mt-cream); }

/* Main menu */
#home-screen:not([hidden]) { padding:22px 0 16px; }
.menu-console { padding:0; overflow:hidden; }
.console-heading {
  margin:-1px -1px 0;
  padding:7px 10px;
  color:var(--mt-line);
  background:var(--mt-cream);
  border:2px solid var(--mt-line);
  font-family:Silkscreen,monospace;
}
.console-heading span:last-child { color:var(--mt-orange); }
.menu-intro { margin:0; padding:18px 16px; color:var(--mt-cyan); border-bottom:4px solid var(--mt-orange); }
.menu-intro strong { color:var(--mt-cream); }
.menu-actions { padding:15px; gap:9px; }
#home-screen .play-button {
  min-height:66px;
  height:66px;
  background:var(--mt-orange);
  border:3px solid var(--mt-line);
  border-image:none;
  box-shadow:inset 0 0 0 2px #ffb733,3px 3px 0 #102f34;
  color:#fff;
}
#home-screen .play-button small { color:#ffe08c; }
#home-screen .play-button:hover:not(:disabled) { background:#ff9818; filter:none; }
#home-screen .secondary-play {
  background:var(--mt-teal);
  border:2px solid var(--mt-line);
  box-shadow:inset 0 0 0 1px var(--mt-cyan),2px 2px 0 var(--mt-shadow);
}
#home-screen .secondary-play>span,#home-screen .secondary-play small { color:var(--mt-cream); }
#home-screen .secondary-play:hover { background:var(--mt-cyan); }
#home-screen .secondary-play:hover>span,#home-screen .secondary-play:hover small { color:var(--mt-line); }
.menu-current { margin:0; padding:13px 16px 16px; border-top:4px solid var(--mt-orange); background:#194850; }
.menu-current>span,.menu-current small { color:var(--mt-cyan); }
.menu-current b { color:var(--mt-cream); }
.menu-world { border:3px solid var(--mt-line); box-shadow:0 0 0 2px var(--mt-gold),4px 4px 0 var(--mt-shadow); }
.world-caption { right:10px; bottom:9px; padding:6px 8px; background:var(--mt-ink); border:2px solid var(--mt-orange); }
.world-caption span { color:var(--mt-cyan); }
.world-caption b { color:var(--mt-cream); }
#home-screen .deck-strip-label { padding:6px 10px; margin-bottom:8px; color:var(--mt-line); background:var(--mt-orange); border:2px solid var(--mt-line); }
#home-screen .deck-strip-label .eyebrow,#home-screen .deck-strip-label>span { color:#fff1aa; }
#home-screen .loadout { background:var(--mt-ink-2); border:2px solid var(--mt-gold); box-shadow:2px 2px 0 var(--mt-shadow); }
#home-screen .loadout:hover,#home-screen .loadout.chosen { background:var(--mt-teal); border-color:var(--mt-cream); }
#home-screen .loadout-info b { color:var(--mt-cream); }
#home-screen .loadout-info small { color:var(--mt-cyan); }
#home-screen .loadout>i { color:var(--mt-orange); }
#home-screen .home-bottom { border-top-color:var(--mt-orange); color:var(--mt-cyan); }

/* Deck workshop */
#deck-screen { color:var(--mt-cream); }
#deck-screen .workshop-heading { border-bottom:5px solid var(--mt-orange); }
#deck-screen .workshop-heading h1 { color:var(--mt-cream); }
#deck-screen .workshop-heading h1 span { color:var(--mt-orange); }
#deck-screen .workshop-heading p { color:var(--mt-cyan); }
#deck-screen .collection-toolbar,#deck-screen .collection-filters {
  background:var(--mt-cream);
  border:2px solid var(--mt-line);
  box-shadow:0 3px var(--mt-orange);
}
#deck-screen .search-box,#deck-screen .collection-toolbar select {
  background:var(--mt-paper);
  border:2px solid var(--mt-line);
  color:var(--mt-line);
}
#deck-screen .search-box input { color:var(--mt-line); }
#deck-screen .type-tabs button,#deck-screen .cost-filters button {
  background:var(--mt-ink-2);
  border:1px solid var(--mt-line);
  color:var(--mt-cream);
}
#deck-screen .type-tabs button.active,#deck-screen .cost-filters button.active {
  background:var(--mt-orange);
  color:white;
}
#deck-screen .collection-count { color:var(--mt-cyan); }
#deck-screen .deck-sidebar {
  background:var(--mt-ink-2);
  border:3px solid var(--mt-line);
  border-image:none;
  box-shadow:inset 0 0 0 2px var(--mt-gold),4px 4px 0 var(--mt-shadow);
}
#deck-screen .deck-selector-row { margin:-10px -10px 10px; padding:8px 10px; background:var(--mt-orange); }
#deck-screen .deck-selector-row .eyebrow { color:white; }
#deck-screen .deck-selector-row select,#deck-screen .deck-name-label input {
  background:var(--mt-paper);
  color:var(--mt-line);
  border:2px solid var(--mt-line);
}
#deck-screen .deck-name-label { color:var(--mt-cyan); }
#deck-screen .deck-progress { background:#102f34; border-color:var(--mt-gold); }
#deck-screen .deck-progress i { background:var(--mt-green); }
#deck-screen .deck-total strong,#deck-screen .deck-valid { color:var(--mt-green); }
#deck-screen .deck-incomplete { color:var(--mt-orange); }
#deck-screen .mana-curve i { background:var(--mt-orange); }
#deck-screen .mana-curve small,#deck-screen .deck-breakdown { color:var(--mt-cyan); }
#deck-screen .deck-row { background:#f7dc72; border-color:var(--mt-line); color:var(--mt-line); }
#deck-screen .deck-row>button { color:var(--mt-line); }
#deck-screen .deck-row>button:first-of-type,#deck-screen .deck-row>b { color:var(--mt-line); }
#deck-screen .row-cost { background:var(--mt-teal); color:white; }
#deck-screen .deck-row>button:last-child { background:var(--mt-orange); color:white; }
#deck-screen .deck-tools { border-color:var(--mt-orange); }
#deck-screen #storage-status { color:var(--mt-cyan); }

/* Account: deliberately follows the supplied game UI, down to its compact section bars. */
#account-screen:not([hidden]) { display:block; min-height:calc(100svh - 66px); padding:18px 0 36px; }
.account-window {
  width:min(100%,1060px);
  margin:0 auto;
  color:var(--mt-cream);
  background:var(--mt-ink);
  border:4px solid var(--mt-line);
  box-shadow:0 0 0 2px var(--mt-gold),7px 7px 0 rgba(21,59,65,.45);
  overflow:hidden;
}
.account-titlebar {
  min-height:48px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:5px 9px;
  background:var(--mt-cream);
  border-bottom:3px solid var(--mt-line);
  box-shadow:inset 0 -4px var(--mt-orange);
}
.account-titlebar button {
  align-self:stretch;
  padding:0 10px;
  color:#fff6a2;
  background:var(--mt-orange);
  border:2px solid var(--mt-line);
  font:16px/1 Silkscreen,monospace;
  text-shadow:2px 2px #9a3910;
}
.account-titlebar h1 { flex:1; margin:0; color:var(--mt-line); font:21px/1 Silkscreen,monospace; letter-spacing:-1px; }
.account-titlebar>span { color:var(--mt-line); font-size:24px; }
.account-profile {
  display:grid;
  grid-template-columns:170px minmax(250px,1fr) repeat(3,minmax(116px,auto));
  min-height:145px;
  border-bottom:4px solid var(--mt-orange);
  background:var(--mt-ink-2);
}
.account-avatar { display:grid; place-items:center; background:var(--mt-cream); border-right:3px solid var(--mt-line); overflow:hidden; }
.account-avatar canvas { width:154px; height:136px; object-fit:contain; image-rendering:pixelated; }
.account-identity { padding:15px 13px; background:linear-gradient(120deg,#16526a,#0b4266); }
.account-identity label { display:grid; gap:3px; color:var(--mt-cyan); font-size:14px; letter-spacing:1px; }
.account-identity input {
  width:100%;
  padding:2px 4px;
  color:var(--mt-cream);
  background:transparent;
  border:0;
  border-bottom:2px solid var(--mt-cyan);
  font:27px/1 VT323,monospace;
  text-transform:uppercase;
}
.account-identity>span { display:block; margin-top:7px; color:var(--mt-orange); font:15px Silkscreen,monospace; }
.account-stars { color:var(--mt-cream); margin-top:7px; letter-spacing:8px; }
.account-stat { align-self:end; display:grid; gap:4px; padding:10px 12px; border-left:1px solid rgba(112,208,238,.3); text-align:center; }
.account-stat small { color:var(--mt-cyan); font-size:14px; }
.account-stat b { color:var(--mt-cream); font:25px VT323,monospace; white-space:nowrap; }
.account-body { display:grid; grid-template-columns:195px minmax(0,1fr); }
.account-sidebar { min-height:590px; background:var(--mt-teal); border-right:4px solid var(--mt-orange); }
.account-menu-label,.account-section-title {
  min-height:30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:4px 9px;
  color:#fff;
  background:var(--mt-orange);
  border-block:2px solid var(--mt-line);
  font-size:16px;
}
.account-menu-label { border-top:0; }
.account-sidebar nav { display:grid; }
.account-sidebar nav button {
  display:flex;
  align-items:center;
  gap:6px;
  min-height:35px;
  padding:5px 9px;
  color:var(--mt-cream);
  background:var(--mt-teal);
  border:0;
  border-bottom:1px solid #2b9cb0;
  text-align:left;
  font:17px VT323,monospace;
}
.account-sidebar nav button i { width:18px; color:var(--mt-orange); font-style:normal; text-align:center; }
.account-sidebar nav button:hover,.account-sidebar nav button.active { color:var(--mt-line); background:var(--mt-cyan); }
.account-sidebar nav button.active i { color:var(--mt-line); }
.account-summary { margin-top:12px; border-top:3px solid var(--mt-line); }
.account-summary>b { display:block; padding:5px 9px; color:white; background:var(--mt-orange); border-bottom:2px solid var(--mt-line); font-weight:400; }
.account-summary>span { display:grid; gap:3px; padding:9px; color:#a9e8f0; border-bottom:1px solid #3297a7; font-size:14px; }
.account-summary>span strong { color:var(--mt-cream); font-size:23px; }
.account-summary>small { display:block; padding:12px 9px; color:var(--mt-cyan); line-height:1.35; }
.account-content { min-width:0; padding:0 9px 24px; background:var(--mt-ink-2); }
.account-module { margin-top:9px; border:2px solid var(--mt-gold); background:var(--mt-ink); }
.account-section-title { margin:-2px -2px 0; min-height:30px; border:2px solid var(--mt-line); }
.account-section-title b { color:#fff0a8; font-weight:400; font-size:15px; }
.account-floor-list { display:grid; gap:6px; padding:8px; }
.account-floor { border:2px solid var(--mt-line); background:var(--mt-cyan); color:var(--mt-line); }
.account-floor.selected { box-shadow:inset 5px 0 var(--mt-green); }
.account-floor-title { display:flex; justify-content:space-between; gap:10px; padding:4px 7px; background:var(--mt-paper); border-bottom:2px solid var(--mt-line); }
.account-floor-title b { font-weight:400; text-transform:uppercase; }
.account-floor-title span { color:var(--mt-teal); }
.account-floor-body { display:grid; grid-template-columns:84px minmax(0,1fr) 125px; align-items:center; gap:9px; min-height:86px; }
.account-floor-body canvas { width:80px; height:82px; align-self:end; object-fit:contain; image-rendering:pixelated; }
.account-floor-body>div { display:grid; }
.account-floor-body small { color:#286c79; }
.account-floor-body strong { color:var(--mt-line); font-size:32px; line-height:1; }
.account-floor-body strong i { font-style:normal; font-size:19px; }
.account-floor-body span { color:#255b65; }
.account-rank { padding:0 8px; border-left:1px solid #389cb3; text-align:center; }
.account-rank b { color:var(--mt-line); font-size:24px; }
.account-rank span { color:var(--mt-teal); font-size:21px; }
.account-floor>button,.account-build {
  width:100%;
  min-height:28px;
  color:var(--mt-cream);
  background:var(--mt-teal);
  border:0;
  border-top:2px solid var(--mt-line);
  font:15px VT323,monospace;
}
.account-floor>button:hover,.account-build:hover { color:var(--mt-line); background:var(--mt-green); }
.account-build { margin:0; border:2px solid var(--mt-line); border-inline:0; }
.account-table { width:100%; border-collapse:collapse; color:var(--mt-cyan); font-size:18px; }
.account-table th,.account-table td { padding:6px 10px; border-bottom:1px solid #41717a; text-align:center; }
.account-table thead { color:var(--mt-line); background:var(--mt-paper); }
.account-table thead th { border-right:1px solid var(--mt-line); }
.account-table th:first-child { text-align:left; }
.account-table tbody th { color:var(--mt-cream); font-weight:400; }
.account-table tbody td:nth-last-child(-n+2) { color:var(--mt-green); }
.account-table tfoot { color:var(--mt-green); background:#173f47; }
.account-achievements { display:grid; gap:1px; }
.account-achievements article { display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:10px; padding:11px 12px; border-bottom:1px solid #3b7079; opacity:.6; }
.account-achievements article.earned { opacity:1; background:#225962; }
.account-achievements article>i { color:var(--mt-orange); font:30px VT323; font-style:normal; text-align:center; }
.account-achievements article b { color:var(--mt-cream); font-weight:400; }
.account-achievements article p { margin:2px 0 0; color:var(--mt-cyan); font-size:16px; }
.account-achievements article>span { color:var(--mt-green); }
.account-activity { padding:7px; }
.account-activity p { display:grid; grid-template-columns:100px minmax(0,1fr) auto; gap:10px; margin:0; padding:10px; border-bottom:1px solid #3b7079; }
.account-activity time { color:var(--mt-orange); }
.account-activity b { color:var(--mt-cream); font-weight:400; }
.account-activity span { color:var(--mt-cyan); }
.account-footer { display:flex; justify-content:space-between; gap:15px; padding:8px 12px; color:var(--mt-cyan); background:#12373e; border-top:3px solid var(--mt-gold); font-size:15px; }
.account-footer b { color:var(--mt-green); font-weight:400; }

/* Dialogs */
dialog::backdrop { background:#082a30db; }
dialog .eyebrow { color:var(--mt-cyan); }
dialog h2 { color:var(--mt-cream); }
dialog #modal-content>p,dialog .rule,dialog .modal-note,.studio-body dialog p { color:#b9e4eb; }
.modal-close { background:var(--mt-orange); border-color:var(--mt-line); color:white; box-shadow:2px 2px var(--mt-shadow); }
.global-toast { background:var(--mt-cream); color:var(--mt-line); border-color:var(--mt-line); box-shadow:3px 3px var(--mt-orange); }

/* Battle geometry remains owned by battlefield.css. Only the controls change colour and texture. */
body[data-screen="battle"] { background:#000; }
#battle-screen .battle-hud { background:var(--mt-ink); border-bottom:3px solid var(--mt-orange); }
#battle-screen .hero-label,#battle-screen .health-caption,#battle-screen .round-info { color:var(--mt-cyan); }
#battle-screen .hero-vitals strong,#battle-screen #round { color:var(--mt-cream); }
#battle-screen #turn-marker { color:var(--mt-green); }
#battle-screen .mini-mana { color:var(--mt-cyan); }
#battle-screen .health-track { background:#12343b; border-color:var(--mt-gold); }
#battle-screen .health-track i { background:var(--mt-green); }
#battle-screen .player-dock { background:var(--mt-ink); border-top-color:var(--mt-orange); box-shadow:inset 0 2px var(--mt-gold); }
#battle-screen .player-hud { background:var(--mt-ink-2); box-shadow:inset 0 -2px var(--mt-orange); }
#battle-screen .player-profile .eyebrow,#battle-screen .player-health,#battle-screen .deck-indicator { color:var(--mt-cream); }
#battle-screen .energy-readout span { color:var(--mt-cyan); }
#battle-screen .energy-readout b { color:var(--mt-green); }
#battle-screen .hero-power { color:var(--mt-cream); background:var(--mt-teal); border-color:var(--mt-gold); box-shadow:inset 0 0 0 1px var(--mt-cyan); }
#battle-screen .hero-power>b { color:var(--mt-cream); }
#battle-screen .hero-power.selected { background:var(--mt-orange); border-color:var(--mt-cream); }
#battle-screen .crystals i { border-color:var(--mt-gold); background:#133a42; }
#battle-screen .crystals i.filled { background:var(--mt-green); box-shadow:inset 1px 1px #dfffaa; }
#battle-screen .inspector { background:var(--mt-ink-2); border:2px solid var(--mt-gold); box-shadow:inset 0 3px var(--mt-orange); }
#battle-screen .intel-name,#battle-screen .intel-empty p { color:var(--mt-cream); }
#battle-screen .intel-description,#battle-screen .intel-empty small { color:var(--mt-cyan); }
#battle-screen .intel-status,#battle-screen .intel-stats small { color:#8dd7e2; }
#battle-screen .detail-close,#battle-screen .detail-play { color:var(--mt-cream); background:var(--mt-teal); border-color:var(--mt-gold); box-shadow:none; }
#battle-screen .detail-play { color:var(--mt-line); background:var(--mt-cream); }
#battle-screen .battle-controls { background:var(--mt-ink); border-top:2px solid var(--mt-gold); }
#battle-screen .orders-heading,#battle-screen .order-list>p { color:var(--mt-cyan); }
#battle-screen .orders-heading b { color:var(--mt-cream); }
#battle-screen .orders-heading>button { color:var(--mt-cream); border-color:var(--mt-gold); background:var(--mt-teal); }
#battle-screen .order-chip { background:var(--mt-ink-2); border-color:var(--mt-gold); }
#battle-screen .order-label span { color:var(--mt-cream); }
#battle-screen .order-label small { color:var(--mt-cyan); }
#battle-screen .order-controls button { background:var(--mt-teal); color:var(--mt-cream); border-color:var(--mt-gold); }
#battle-screen .status-message { background:var(--mt-paper); border-color:var(--mt-line); box-shadow:inset 0 0 0 2px #fff4b0; }
#battle-screen .end-turn { min-height:0; color:var(--mt-line); background:var(--mt-cream); border:3px solid var(--mt-line); border-image:none; box-shadow:inset 0 0 0 2px #fff5aa,3px 3px var(--mt-orange); }
#battle-screen .end-turn:hover:not(:disabled) { color:white; background:var(--mt-orange); filter:none; }
#battle-screen .battle-history { background:#10363e; color:var(--mt-cyan); border-top-color:var(--mt-orange); }
#battle-screen #restart { color:var(--mt-cream); }

/* Studio uses the same account-console kit. */
.studio-body { background:var(--mt-sky); color:var(--mt-cream); }
.studio-top { background:var(--mt-ink); border-bottom:5px solid var(--mt-orange); box-shadow:inset 0 -2px var(--mt-cream); }
.studio-brand,.studio-brand span { color:var(--mt-cyan); }
.studio-toolbar #save-state { color:var(--mt-cyan); }
.studio-shell { background:var(--mt-ink-2); }
.studio-nav { background:var(--mt-teal); border-right:4px solid var(--mt-orange); box-shadow:none; }
.studio-nav>.eyebrow { color:var(--mt-cream); }
.studio-nav button { color:var(--mt-cream); border-bottom:1px solid #2f9db0; }
.studio-nav button:hover,.studio-nav button.active { background:var(--mt-cyan); color:var(--mt-line); border-color:var(--mt-line); box-shadow:inset 4px 0 var(--mt-orange); }
.studio-nav button b { color:var(--mt-orange); }
.studio-nav-bottom,.studio-nav-bottom a { color:var(--mt-cream); }
.draft-indicator { background:var(--mt-cream); color:var(--mt-line); border-color:var(--mt-line); }
.studio-heading { border-bottom:5px solid var(--mt-orange); }
.studio-heading h1,.studio-heading h2 { color:var(--mt-cream); }
.studio-heading p { color:var(--mt-cyan); }
.studio-body input,.studio-body select,.studio-body textarea { background:var(--mt-paper); color:var(--mt-line); border:2px solid var(--mt-line); box-shadow:inset 2px 2px #dcbe4e; }
.studio-body input::placeholder,.studio-body textarea::placeholder { color:#44727a; }
.studio-body input[type="checkbox"] { accent-color:var(--mt-orange); }
.studio-body .danger { color:#fff; border-color:var(--mt-line); background:#b7432d; }
.studio-section { background:var(--mt-ink); border:2px solid var(--mt-gold); box-shadow:3px 3px var(--mt-shadow); }
.studio-section h2 { margin:-26px -26px 20px; padding:7px 10px; color:white; background:var(--mt-orange); border:2px solid var(--mt-line); }
.studio-section p,.studio-fields label,.studio-preview small,.studio-rule-note { color:var(--mt-cyan); }
.studio-fields .check,.studio-tags label { color:var(--mt-cream); }
.studio-rule { background:#123b43; border:1px solid var(--mt-gold); border-left:4px solid var(--mt-orange); }
.studio-small-button { background:var(--mt-teal); border-color:var(--mt-gold); color:var(--mt-cream); box-shadow:none; }
.studio-link { color:var(--mt-cream); }
.asset-tile { background:var(--mt-ink); border-color:var(--mt-gold); box-shadow:3px 3px var(--mt-shadow); color:var(--mt-cream); }
.asset-tile:hover { border-color:var(--mt-cream); }
.asset-image { border-bottom-color:var(--mt-orange); }
.asset-caption b { color:var(--mt-cream); }
.asset-caption small { color:var(--mt-cyan); }
.upload-zone { background:#174a53; color:var(--mt-cream); border-color:var(--mt-cream); box-shadow:inset 0 0 0 5px var(--mt-teal); }
.studio-empty { color:var(--mt-cyan); border-color:var(--mt-gold); }
.studio-message { background:var(--mt-paper); color:var(--mt-line); border-left-color:var(--mt-orange); }
.studio-toast { color:var(--mt-line); background:var(--mt-cream); border-color:var(--mt-line); box-shadow:4px 4px var(--mt-orange); }
.studio-history { background:var(--mt-ink); border-color:var(--mt-gold); }
.studio-history th { color:var(--mt-line); background:var(--mt-paper); }
.studio-history th,.studio-history td { border-color:#477781; }
.studio-guide p,.studio-guide li { color:var(--mt-cyan); }
.studio-guide code { color:var(--mt-cream); }
.studio-sim-output { color:var(--mt-green); background:#102f34; border-color:var(--mt-gold); }

@media(max-width:900px) {
  .account-profile { grid-template-columns:145px minmax(220px,1fr) repeat(3,minmax(90px,auto)); }
  .account-avatar canvas { width:135px; }
  .account-stat { padding:8px 6px; }
  .account-stat b { font-size:21px; }
  .account-body { grid-template-columns:170px minmax(0,1fr); }
  .account-sidebar { min-height:540px; }
}
@media(max-width:700px) {
  #account-screen:not([hidden]) { padding:10px 0 24px; }
  .account-titlebar h1 { font-size:17px; }
  .account-profile { grid-template-columns:115px repeat(3,minmax(0,1fr)); }
  .account-avatar { grid-column:1; grid-row:1; }
  .account-avatar canvas { width:110px; height:118px; }
  .account-identity { grid-column:2/-1; min-width:0; }
  .account-stat { grid-row:2; padding:7px 4px; border-top:2px solid var(--mt-orange); }
  .account-stat:nth-of-type(3) { grid-column:1/3; }
  .account-stat:nth-of-type(4) { grid-column:3; }
  .account-stat:nth-of-type(5) { grid-column:4; }
  .account-body { display:block; }
  .account-sidebar { min-height:0; border-right:0; border-bottom:4px solid var(--mt-orange); }
  .account-sidebar nav { display:flex; overflow-x:auto; }
  .account-sidebar nav button { flex:0 0 auto; }
  .account-summary { display:none; }
  .account-content { padding:0 5px 16px; }
  .account-floor-body { grid-template-columns:66px minmax(0,1fr) 92px; }
  .account-floor-body canvas { width:64px; }
  .account-rank { padding:0 3px; }
  .account-table { font-size:15px; }
  .account-table th,.account-table td { padding:5px 4px; }
  .account-inventory-table th:nth-child(2),.account-inventory-table td:nth-child(2),.account-inventory-table th:nth-child(3),.account-inventory-table td:nth-child(3) { display:none; }
  .account-activity p { grid-template-columns:80px minmax(0,1fr); }
  .account-activity span { grid-column:2; }
  .account-footer { font-size:13px; }
}
@media(max-width:470px) {
  #account-button { display:none; }
  .account-titlebar button { font-size:12px; }
  .account-titlebar>span { font-size:19px; }
  .account-identity input { font-size:22px; }
  .account-profile { grid-template-columns:92px repeat(3,minmax(0,1fr)); }
  .account-avatar canvas { width:92px; }
  .account-identity>span { font:12px VT323; }
  .account-floor-body { grid-template-columns:58px minmax(0,1fr); }
  .account-floor-body canvas { width:56px; }
  .account-rank { grid-column:1/-1; display:flex!important; justify-content:flex-end; gap:8px; padding:5px; border-left:0; border-top:1px solid #389cb3; }
  .account-achievements article { grid-template-columns:32px minmax(0,1fr); }
  .account-achievements article>span { grid-column:2; }
  .account-footer span { display:none; }
}

/* Immediate combat keeps the original artist arena clear of planning controls. */
#orders-panel{display:none!important}
.battle-controls .action-row{border-top:2px solid #3c4e6b}