/* v0.26: the basement. Pixel mode only (body.pixel-mode); the classic 3D renderer keeps its own field-equipment UI.
   Game panels are dark stone with notched pixel corners; menus and dialogs are crumpled paper sheets, as in Isaac.
   Type is Fusion Pixel at its native 12px, or exact multiples (24 / 48) so every glyph stays on the grid. */
body.pixel-mode{
 --px-ink:#0a0505;--px-bg:#140c0c;--px-panel:#1e1411;--px-raise:#2c1d17;--px-hi:#5a4032;--px-lo:#0f0806;--px-side:#3a2a22;
 --px-bone:#e8dcc4;--px-dim:#b4a084;--px-faint:#7d6956;--px-blood:#c8283a;--px-blood-hi:#ff6a6a;--px-blood-lo:#5a0a14;
 --px-gold:#e8c04a;--px-soul:#7fa8e8;--px-bile:#a8c040;
 --px-paper:#d4c19c;--px-paper-hi:#e9dcbd;--px-paper-lo:#a88d66;--px-paper-ink:#2a1a10;--px-paper-dim:#5e4632;--px-paper-red:#8e1a1e;--px-paper-edge:#3a2418;
 --px-font:'Fusion Pixel','Microsoft YaHei',monospace;
 --px-frame:0 -3px 0 0 var(--px-ink),0 3px 0 0 var(--px-ink),-3px 0 0 0 var(--px-ink),3px 0 0 0 var(--px-ink),inset 0 3px 0 0 var(--px-hi),inset 0 -3px 0 0 var(--px-lo),inset 3px 0 0 0 var(--px-side),inset -3px 0 0 0 var(--px-lo);
 --px-paper-frame:0 -3px 0 0 var(--px-paper-edge),0 3px 0 0 var(--px-paper-edge),-3px 0 0 0 var(--px-paper-edge),3px 0 0 0 var(--px-paper-edge),inset 0 3px 0 0 var(--px-paper-hi),inset 0 -4px 0 0 var(--px-paper-lo),inset -3px 0 0 0 var(--px-paper-lo),9px 9px 0 0 #00000070;
 --paper:var(--px-bg);--ground:var(--px-bg);--ink:var(--px-bone);--muted:var(--px-dim);--line:#4a332866;--accent:var(--px-blood);--accent-light:#c8283a26;--orange:var(--px-gold);--glass:#1e1411f2;
 --font:var(--px-font);--icon-ink:var(--px-bone);
 background:var(--px-bg);color:var(--px-bone);font-family:var(--px-font);line-height:1.5;-webkit-font-smoothing:none;
}
body.pixel-mode *,body.pixel-mode *:before,body.pixel-mode *:after{font-family:var(--px-font)!important;font-size:12px!important;letter-spacing:0!important;border-radius:0!important;text-shadow:none!important;backdrop-filter:none!important;font-weight:400!important}
body.pixel-mode ::selection{background:var(--px-blood);color:#fff}
body.pixel-mode button:focus-visible,body.pixel-mode a:focus-visible,body.pixel-mode input:focus-visible,body.pixel-mode select:focus-visible{outline:3px solid var(--px-gold);outline-offset:3px}
body.pixel-mode button:active:not(:disabled){transform:translateY(2px)}
body.pixel-mode :is(svg,img){image-rendering:pixelated}
body.pixel-mode ::-webkit-scrollbar{width:9px;height:9px}
body.pixel-mode ::-webkit-scrollbar-thumb{background:var(--px-hi);border:3px solid var(--px-panel)}
body.pixel-mode ::-webkit-scrollbar-track{background:var(--px-panel)}
body.pixel-mode *{scrollbar-color:var(--px-hi) transparent}

/* ---------- Shared pieces: stone panels, paper sheets, buttons, tags ---------- */
body.pixel-mode :is(.supply-dock,#travel-hud,.field-note,.view-tools,.hover-tip,.item-tooltip,#expedition-status,.journey-info,.auto-notice,.module-drag-chip,.mobile-inspector-toggle){
 background:var(--px-panel)!important;border:0!important;box-shadow:var(--px-frame)!important;color:var(--px-bone)}
body.pixel-mode :is(.modal,.intro,.paused-banner){
 background:var(--px-paper) var(--px-paper-tex,none)!important;color:var(--px-paper-ink)!important;border:0!important;box-shadow:var(--px-paper-frame)!important}
body.pixel-mode :is(.modal,.intro,.paused-banner){background-size:192px 192px!important;image-rendering:pixelated}
body.pixel-mode .modal::backdrop{background:#07030380}
body.pixel-mode .eyebrow{color:var(--px-blood)!important}
body.pixel-mode .primary-btn{
 background:var(--px-blood)!important;color:#fff0e4!important;border:0!important;padding:11px 18px;
 box-shadow:0 -3px 0 0 var(--px-ink),0 3px 0 0 var(--px-ink),-3px 0 0 0 var(--px-ink),3px 0 0 0 var(--px-ink),inset 0 3px 0 0 var(--px-blood-hi),inset 0 -4px 0 0 var(--px-blood-lo)!important}
body.pixel-mode .primary-btn:hover:not(:disabled){background:#e0344a!important}
body.pixel-mode .primary-btn:active:not(:disabled){box-shadow:0 -3px 0 0 var(--px-ink),0 3px 0 0 var(--px-ink),-3px 0 0 0 var(--px-ink),3px 0 0 0 var(--px-ink),inset 0 4px 0 0 var(--px-blood-lo)!important}
body.pixel-mode :is(.outline-btn,#gate-action,.auto-active-toggle,.starter-options button,.unlock-starters button,.codex-filters button,.inspect-actions button){
 background:var(--px-raise)!important;color:var(--px-bone)!important;border:0!important;
 box-shadow:0 -3px 0 0 var(--px-ink),0 3px 0 0 var(--px-ink),-3px 0 0 0 var(--px-ink),3px 0 0 0 var(--px-ink),inset 0 3px 0 0 var(--px-hi),inset 0 -3px 0 0 var(--px-lo)!important}
body.pixel-mode :is(.outline-btn,#gate-action,.auto-active-toggle,.starter-options button,.unlock-starters button,.codex-filters button,.inspect-actions button):hover:not(:disabled){background:#3d2820!important;color:#fff!important}
body.pixel-mode :is(.outline-btn,.auto-active-toggle,.codex-filters button)[aria-pressed=true],body.pixel-mode .codex-filters button.active,body.pixel-mode .starter-options button.selected,body.pixel-mode .unlock-starters button.selected{
 background:var(--px-blood-lo)!important;color:#ffd8d0!important;box-shadow:0 -3px 0 0 var(--px-ink),0 3px 0 0 var(--px-ink),-3px 0 0 0 var(--px-ink),3px 0 0 0 var(--px-ink),inset 0 0 0 3px var(--px-blood)!important}
body.pixel-mode .text-btn,body.pixel-mode .icon-btn,body.pixel-mode .lab-link{color:var(--px-dim)!important}
body.pixel-mode .text-btn:hover:not(:disabled),body.pixel-mode .icon-btn:hover:not(:disabled),body.pixel-mode .lab-link:hover{color:var(--px-blood-hi)!important}
body.pixel-mode .text-btn span{color:var(--px-faint)!important}
body.pixel-mode kbd{background:var(--px-raise)!important;color:var(--px-bone)!important;border:0!important;box-shadow:inset 0 -2px 0 var(--px-lo),0 0 0 2px var(--px-ink)!important;padding:0 4px;margin:0 3px}
body.pixel-mode .close-btn{color:var(--px-paper-red)!important;font-size:24px!important;line-height:1}
body.pixel-mode .close-btn:hover{color:var(--px-blood)!important}
body.pixel-mode .quality-badge{color:var(--quality)!important}
body.pixel-mode .family-tag{color:var(--px-faint)!important}

/* Item icons: rasterised pictograms on a dark socket framed in the rarity colour. */
body.pixel-mode .block-icon{background:#120a08!important;border:0!important;box-shadow:0 0 0 2px var(--px-ink),inset 0 0 0 2px color-mix(in srgb,var(--quality,#8a7a6a) 70%,#000)!important;display:grid;place-items:center;overflow:visible}
body.pixel-mode .block-icon:before{display:none!important}
body.pixel-mode .block-icon .px-icon{width:36px;height:36px;display:block;image-rendering:pixelated;pointer-events:none;filter:drop-shadow(2px 2px 0 #00000088)}
body.pixel-mode .block-icon.large .px-icon{width:54px;height:54px}

/* ---------- Top bar ---------- */
body.pixel-mode .topbar{height:52px!important;padding:0 18px!important;background:#0e0807!important;border:0!important;box-shadow:0 3px 0 0 var(--px-ink),inset 0 -3px 0 0 #2a1a14!important;gap:22px!important}
body.pixel-mode[data-mode="ready"] .topbar{background:transparent!important;box-shadow:none!important}
body.pixel-mode .brand{min-width:0!important;gap:10px!important}
body.pixel-mode .brand svg{color:var(--px-blood)!important;width:22px!important;height:26px!important}
body.pixel-mode .brand>span{font-size:24px!important;color:var(--px-bone);line-height:1}
body.pixel-mode .brand small{color:var(--px-blood)!important;margin-top:2px}
body.pixel-mode .run-status{color:var(--px-dim)!important}
body.pixel-mode .live-dot{background:var(--px-blood)!important;box-shadow:0 0 0 3px var(--px-blood-lo)!important;animation:px-pulse 1s steps(2) infinite}
@keyframes px-pulse{50%{opacity:.35}}
body.pixel-mode .divider{background:var(--px-hi)!important}
body.pixel-mode .toolbar{gap:18px!important}
body.pixel-mode .toolbar .outline-btn{padding:7px 12px!important;min-height:0!important}

/* ---------- Arena overlays: hearts HUD, stage card, minimap, boss bar ---------- */
body.pixel-mode .arena{background:var(--px-bg)!important}
body.pixel-mode .arena:after{box-shadow:inset 0 0 140px #04000299!important}
body.pixel-mode .battle-hud{top:66px!important;left:16px!important;right:auto!important}
body.pixel-mode .battle-hud :is(.wave-readout,.core-readout){display:none!important}
body.pixel-mode .pixel-hud{display:block;image-rendering:pixelated;filter:drop-shadow(3px 3px 0 #000000a0)}
body.pixel-mode .journey-info{top:calc(78px + var(--px-hud-h,130px))!important;left:16px!important;max-width:300px!important;padding:10px 13px!important}
body.pixel-mode .journey-info>div:first-child{color:var(--px-bone)!important}
body.pixel-mode .journey-info small{color:var(--px-dim)!important;margin-left:6px}
body.pixel-mode .journey-info p{color:var(--px-dim)!important;margin:4px 0 6px!important;max-width:none!important;line-height:1.5}
body.pixel-mode #journey-track{gap:6px!important;flex-wrap:wrap}
body.pixel-mode #journey-track>span{color:var(--px-faint)!important;border:0!important;background:var(--px-lo);box-shadow:0 0 0 2px var(--px-ink);padding:0 5px}
body.pixel-mode #journey-track .current{color:#ffe6a0!important;background:var(--px-blood-lo);box-shadow:0 0 0 2px var(--px-ink),inset 0 0 0 2px var(--px-blood)}
body.pixel-mode #journey-track .done{color:var(--px-bile)!important}
body.pixel-mode #gate-action{margin-top:8px;padding:7px 12px}
/* Loadout (desktop): the squad's organs under the stage card, icons 1:1 on the pixel grid; drop targets light up. */
body:not(.pixel-mode) :is(.loadout-panel,.pedestal-card){display:none!important}
body.pixel-mode .loadout-panel{position:absolute;left:16px;width:300px;box-sizing:border-box;z-index:5;overflow-y:auto;padding:8px 10px 10px;background:var(--px-panel);box-shadow:var(--px-frame);color:var(--px-bone);pointer-events:auto}
body.pixel-mode .loadout-panel[hidden],body.pixel-mode .pedestal-card[hidden]{display:none}
body.pixel-mode .loadout-panel h2{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:0 0 6px;color:var(--px-bone)}
body.pixel-mode .loadout-panel h2 small{color:var(--px-faint)}
body.pixel-mode .loadout-panel.dragging h2 small{color:var(--px-gold)}
body.pixel-mode .lo-row{padding:4px;margin:0 -4px 2px}
body.pixel-mode .lo-row header{display:flex;align-items:center;gap:6px;height:22px}
body.pixel-mode .lo-row header b{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--px-bone)}
body.pixel-mode .lo-row header small{color:var(--px-dim)}
body.pixel-mode .lo-hp{display:block;width:36px;height:4px;background:var(--px-lo);box-shadow:0 0 0 1px var(--px-ink)}
body.pixel-mode .lo-hp i{display:block;height:100%;background:#8fd06a}
body.pixel-mode .lo-row.down{opacity:.55}
body.pixel-mode .lo-row.down .lo-hp i{background:#e2384a}
body.pixel-mode .lo-slots{display:flex;flex-wrap:wrap;gap:2px;margin-top:3px;min-height:22px}
body.pixel-mode :is(.lo-cell,.lo-empty){width:22px;height:22px;flex:none;display:grid;place-items:center;background:#120a08;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--quality,#5a4032) 60%,#000)}
body.pixel-mode .lo-empty{background:#0d0706;box-shadow:inset 0 0 0 1px #2a1d17}
body.pixel-mode .lo-cell{cursor:pointer}
body.pixel-mode .lo-cell[draggable=true]{cursor:grab}
body.pixel-mode .lo-cell .px-icon{width:20px;height:20px;display:block;image-rendering:pixelated;pointer-events:none}
body.pixel-mode .lo-cell:hover{box-shadow:inset 0 0 0 2px var(--px-gold)}
body.pixel-mode .lo-pack{border-top:2px solid var(--px-lo);padding-top:6px;margin-top:4px}
body.pixel-mode .lo-pack em{color:var(--px-faint);font-style:normal;line-height:22px}
body.pixel-mode .lo-row.lo-ok{background:#26301a;box-shadow:inset 0 0 0 2px var(--px-bile)}
body.pixel-mode .lo-row.lo-no{background:#2a0a0e;box-shadow:inset 0 0 0 2px var(--px-blood-lo)}
body.pixel-mode .lo-cell.lo-swap{background:#3a2a10;box-shadow:inset 0 0 0 2px var(--px-gold)}
body.pixel-mode .lo-cell.lo-lifted{opacity:.35}
/* Pedestal card: walk up to an item (or a closed chest) and its card floats above it. */
body.pixel-mode .pedestal-card{position:absolute;z-index:7;transform:translate(-50%,-100%);width:min(260px,70vw);box-sizing:border-box;padding:8px 10px;background:var(--px-panel);box-shadow:var(--px-frame);color:var(--px-bone);pointer-events:none}
body.pixel-mode .pc-head{display:flex;gap:8px;align-items:center}
body.pixel-mode .pc-head .block-icon{width:40px;height:40px;flex:none}
body.pixel-mode .pc-head strong{display:block;color:var(--px-bone)}
body.pixel-mode .pc-head small{color:var(--px-dim)}
body.pixel-mode .pedestal-card p{margin:6px 0 0;color:var(--px-dim);line-height:1.5}
body.pixel-mode .pedestal-card footer{display:flex;gap:6px;margin-top:6px;color:var(--px-gold)}
body.pixel-mode .pedestal-card footer.short{color:#c06060}
/* Devil prices: red hearts, as in Isaac. */
.deal-hearts{display:inline-flex;gap:4px;vertical-align:middle}
.deal-hearts img{width:33px;height:30px;image-rendering:pixelated}
/* Isaac boss bar: wide and heavy at the bottom centre, a skull at its head, the name above, a pale trail for damage just
   dealt, a notch at half life and a throb below a quarter. */
body.pixel-mode .boss-health{position:fixed!important;left:50%!important;transform:translateX(-50%);bottom:112px;width:min(780px,74vw);max-width:none!important;margin:0!important;z-index:6;text-align:center;pointer-events:none;padding-left:46px}
body.pixel-mode[data-mode="build"] .boss-health{bottom:290px}
body.pixel-mode .boss-health #boss-name{font-size:24px!important;line-height:1;color:#ffe0d0!important;display:block;margin-bottom:8px;filter:drop-shadow(3px 3px 0 #000)}
body.pixel-mode .boss-health>div{position:relative;height:26px!important;background:#2a0508!important;box-shadow:0 0 0 4px var(--px-ink),inset 0 0 0 2px #5a0a14,5px 5px 0 4px #000000a0!important;padding:0!important;border:0!important;overflow:visible}
body.pixel-mode .boss-health>div:before{content:'';position:absolute;left:0;top:0;bottom:0;width:var(--boss-lag,0%);background:#f0d090}
body.pixel-mode .boss-health>div:after{content:'';position:absolute;left:50%;top:-4px;bottom:-4px;width:4px;margin-left:-2px;background:var(--px-ink);z-index:2}
body.pixel-mode .boss-health #boss-fill{position:relative;z-index:1;display:block;height:100%;background:linear-gradient(#ff9a9a 0 4px,#d8202c 4px calc(100% - 5px),#7a0c16 calc(100% - 5px))!important;transition:width .12s steps(3)}
body.pixel-mode .boss-health.hit #boss-fill{filter:brightness(1.8)}
body.pixel-mode .boss-health.low #boss-fill{animation:px-pulse .45s steps(2) infinite}
body.pixel-mode .boss-health .px-boss-skull{position:absolute;left:0;bottom:-8px;width:44px;height:44px;image-rendering:pixelated;filter:drop-shadow(3px 3px 0 #000)}
/* Stage and boss banners: a black band slides across the arena for a moment, as on an Isaac floor or boss intro. */
body.pixel-mode .px-banner{position:absolute;left:0;right:0;top:38%;z-index:8;display:flex;align-items:center;justify-content:center;gap:28px;padding:18px 0;background:#000000d8;box-shadow:0 -4px 0 #2a0508,0 4px 0 #2a0508;pointer-events:none;animation:px-banner 2.7s steps(16) forwards}
body.pixel-mode .px-banner-art{image-rendering:pixelated;filter:drop-shadow(4px 4px 0 #2a0508)}
body.pixel-mode .px-banner-text{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
body.pixel-mode .px-banner small{font-size:24px!important;color:#c8283a}
body.pixel-mode .px-banner b{font-size:48px!important;line-height:1;color:#f4ece0;filter:drop-shadow(4px 4px 0 #2a0508)}
body.pixel-mode .px-banner.floor b{color:#e8dcc4}
@keyframes px-banner{0%{transform:translateX(-100%)}12%{transform:translateX(0)}82%{transform:translateX(0);opacity:1}100%{transform:translateX(100%);opacity:0}}
body.pixel-mode #expedition-status{top:64px!important;padding:6px 14px!important;color:var(--px-dim)!important}
body.pixel-mode #expedition-loot{color:var(--px-gold)!important}
body.pixel-mode #travel-hud{top:66px!important;right:16px!important;padding:10px!important;width:172px!important}
body.pixel-mode #travel-hud strong{color:var(--px-dim)!important}
body.pixel-mode .map-heading{color:var(--px-bone)!important}
body.pixel-mode :is(.map-coords,.map-legend){color:var(--px-faint)!important}
body.pixel-mode #world-map{display:none}
body.pixel-mode .pixel-map{display:block;width:136px;height:136px;image-rendering:pixelated;margin:2px auto 0}
body.pixel-mode #expedition-region{color:var(--px-bone)!important}
/* Body panel: choices on dark pedestals. */
body.pixel-mode :is(.core-items button){background:var(--px-panel)!important;color:var(--px-bone)!important;border:0!important;box-shadow:0 0 0 3px var(--px-paper-edge),inset 0 -3px 0 0 var(--px-lo)!important}
body.pixel-mode :is(.core-items button) :is(small,span,p){color:var(--px-dim)!important}
body.pixel-mode :is(.core-items button) :is(b,strong){color:var(--px-bone)!important}

/* ---------- Field chrome: notes, view tools, toast, pause ---------- */
body.pixel-mode .field-note{color:var(--px-dim)!important;padding:7px 12px!important}
body.pixel-mode.has-loadout .field-note{left:332px!important}
body.pixel-mode .tiny-cross{color:var(--px-blood)!important}
body.pixel-mode .view-tools{padding:5px!important;gap:3px}
body.pixel-mode .view-tools button{color:var(--px-bone)!important;min-width:30px;height:30px}
body.pixel-mode .view-tools button:hover{background:var(--px-raise)!important}
body.pixel-mode .view-tools i{background:var(--px-hi)!important}
body.pixel-mode .toast{background:var(--px-bone)!important;color:var(--px-paper-ink)!important;border:0!important;box-shadow:0 -3px 0 0 var(--px-ink),0 3px 0 0 var(--px-ink),-3px 0 0 0 var(--px-ink),3px 0 0 0 var(--px-ink),inset 0 -3px 0 0 #b8a888,6px 6px 0 0 #00000080!important;padding:9px 16px!important}
body.pixel-mode .hover-tip{color:var(--px-bone)!important;padding:7px 10px!important}
body.pixel-mode .hover-tip.invalid{background:var(--px-blood-lo)!important;color:#ffd8d0!important}
body.pixel-mode .paused-banner{padding:20px 34px!important;text-align:center}
body.pixel-mode .paused-banner,body.pixel-mode .paused-banner>span{font-size:24px!important;color:var(--px-paper-red)!important}
body.pixel-mode .paused-banner small{color:var(--px-paper-dim)!important}
/* Mid-run assembly: a slimmer banner at the top so the board stays visible, and a glowing resume button. */
body.pixel-mode .frozen-banner{top:58px!important;transform:translateX(-50%)!important;padding:8px 18px!important;pointer-events:none}
body.pixel-mode .frozen-banner,body.pixel-mode .frozen-banner>span{font-size:16px!important;color:#3a6ad8!important}
@keyframes resume-glow{0%,100%{box-shadow:0 0 0 3px var(--px-ink),0 0 0 5px #ffd06a00}50%{box-shadow:0 0 0 3px var(--px-ink),0 0 0 6px #ffd06acc}}
body.pixel-mode #next-wave-btn.resume-glow{animation:resume-glow 1s ease-in-out infinite}
/* The touch stick: a dark stone ring with a bone knob. */
body.pixel-mode #move-pad{border-radius:50%!important;background:#0a050599!important;border:0!important;box-shadow:0 0 0 3px var(--px-ink),inset 0 0 0 3px var(--px-side),inset 0 0 0 6px #0a050566!important}
body.pixel-mode #move-pad .stick-knob{border-radius:50%!important;background:var(--px-raise)!important;border:0!important;box-shadow:0 0 0 3px var(--px-ink),inset 0 3px 0 0 #ffffff26,inset 0 -3px 0 0 #00000059,inset 0 0 0 9px var(--px-hi)!important}

/* ---------- Assembly dock: items lie on stone pedestals ---------- */
body.pixel-mode .supply-dock{padding:14px 16px 10px!important;left:14px!important;right:14px!important;bottom:14px!important}
body.pixel-mode .phase-actions strong{color:var(--px-bone)!important}
body.pixel-mode .phase-actions small{color:var(--px-dim)!important}
body.pixel-mode .phase-buttons{gap:12px!important;padding:3px}
body.pixel-mode .phase-buttons .outline-btn{padding:8px 11px!important}
body.pixel-mode .supply-slots{gap:12px!important;padding:5px 5px 8px!important}
body.pixel-mode .supply-slot{background:#170f0c!important;border:0!important;box-shadow:0 0 0 3px var(--px-ink),inset 0 -6px 0 0 #2a1c16,inset 0 3px 0 0 #24170f!important;min-height:78px;height:auto!important;padding:9px 11px!important;transition:none!important}
body.pixel-mode .supply-slot:hover:not(:disabled){background:#22150f!important;transform:translateY(-3px)!important}
body.pixel-mode .supply-slot.selected{background:var(--px-blood-lo)!important;box-shadow:0 0 0 3px var(--px-ink),inset 0 0 0 3px var(--px-gold)!important;transform:translateY(-3px)!important}
body.pixel-mode .supply-slot .block-icon{width:44px!important;height:44px!important;flex:none}
body.pixel-mode .slot-key{color:var(--px-faint)!important}
body.pixel-mode .slot-name{color:var(--px-bone)!important}
body.pixel-mode :is(.slot-type,.slot-tags){color:var(--px-dim)!important;line-height:1.5}
body.pixel-mode .empty-slot{color:var(--px-faint)!important;background:transparent!important;box-shadow:0 0 0 3px #2a1c16!important}
body.pixel-mode .run-kit{border-color:#4a332866!important}
body.pixel-mode #relic-strip button{background:transparent;padding:2px}
body.pixel-mode #relic-strip .block-icon{width:36px!important;height:36px!important}
body.pixel-mode #relic-strip .block-icon .px-icon{width:28px;height:28px}
body.pixel-mode :is(.relic-empty,.relic-area>small){color:var(--px-faint)!important}
body.pixel-mode #active-btn{border:0!important;color:var(--px-bone)!important;background:linear-gradient(90deg,#3e5a1c var(--charge),var(--px-raise) var(--charge))!important;box-shadow:0 0 0 3px var(--px-ink),inset 0 3px 0 0 #ffffff1a,inset 0 -3px 0 0 #0000004d!important}
body.pixel-mode #active-btn small{color:var(--px-dim)!important}
body.pixel-mode :is(.dock-foot,.save-state){color:var(--px-faint)!important}
body.pixel-mode .dock-foot b{color:var(--px-hi)!important}

/* ---------- Autonomy bar (core AI / full auto) ---------- */
body.pixel-mode .autonomy-bar{background:transparent!important;border:0!important;box-shadow:none!important;margin:0!important;padding:0!important;gap:10px!important}
body.pixel-mode .autonomy-bar .outline-btn{padding:6px 10px!important;min-height:0!important}
body.pixel-mode .map-legend{display:none!important}
body.pixel-mode #auto-status{color:var(--px-dim)!important}
body.pixel-mode .auto-choice select,body.pixel-mode .settings-row select{background:var(--px-lo)!important;color:var(--px-bone)!important;border:0!important;box-shadow:0 0 0 2px var(--px-ink),inset 0 0 0 2px var(--px-hi)!important;padding:4px 8px}
body.pixel-mode .auto-notice{color:var(--px-bone)!important;padding:12px!important}

/* ---------- Inspector, tooltips, drag chip ---------- */
body.pixel-mode .inspector{background:var(--px-panel)!important;border:0!important;box-shadow:inset 3px 0 0 0 var(--px-ink),inset 6px 0 0 0 var(--px-side)!important;color:var(--px-bone)!important;padding-top:70px!important}
body.pixel-mode.inspect-open:not([data-mode="ready"]) .inspector{box-shadow:var(--px-frame)!important;top:66px!important;padding-top:34px!important}
body.pixel-mode .inventory-summary strong{font-size:24px!important;color:var(--px-gold)}
body.pixel-mode .resource-glyph{color:var(--px-gold)!important}
body.pixel-mode :is(.inventory-summary>div>span:not(.resource-glyph),.kills b,.inventory-summary .eyebrow){color:var(--px-dim)!important}
body.pixel-mode .inspect-title h2{font-size:24px!important;color:var(--px-bone)!important;line-height:1.2}
body.pixel-mode :is(.inspect-title p,.description,.stat-row,.effects-label,.empty-hint,.micro-line span,.subtle,.log-entry,.relic-area>small){color:var(--px-dim)!important}
body.pixel-mode .description{line-height:1.6!important}
body.pixel-mode .stat-row{border-color:#4a332866!important}
body.pixel-mode .stat-row strong,body.pixel-mode .micro-line b{color:var(--px-bone)!important}
body.pixel-mode .weapon-form{background:var(--px-blood-lo)!important;color:#ffd8d0!important;border:0!important;box-shadow:0 0 0 2px var(--px-ink)!important}
body.pixel-mode .effect-tag{background:var(--px-raise)!important;color:var(--px-bone)!important;border:0!important;box-shadow:0 0 0 2px var(--px-ink)!important}
body.pixel-mode .module-stack>div{background:#170f0c!important;border:0!important;box-shadow:0 0 0 2px var(--px-ink)!important}
body.pixel-mode .module-stack button{color:var(--px-bone)!important}
body.pixel-mode .module-stack button:hover{background:var(--px-raise)!important}
body.pixel-mode :is(.section-heading,.inspector-tip-title){color:var(--px-bone)!important}
body.pixel-mode .log-entry:before{background:var(--px-blood)!important}
body.pixel-mode .side-footer{color:var(--px-faint)!important;border-color:#4a332866!important}
body.pixel-mode .item-tooltip{padding:14px!important;color:var(--px-bone)!important}
body.pixel-mode .item-tooltip :is(p,small,span){color:var(--px-dim)}
body.pixel-mode .item-tooltip strong{color:var(--px-bone)}
body.pixel-mode .module-drag-chip{color:var(--px-bone)!important}

/* ---------- Title screen: a paper note on the basement floor ---------- */
body.pixel-mode .intro{padding:26px 28px 22px!important;width:min(470px,calc(100vw - 32px))!important}
body.pixel-mode .intro-kicker,body.pixel-mode .intro-kicker *{color:var(--px-paper-red)!important}
body.pixel-mode .intro-kicker>span{background:var(--px-paper-red)!important}
body.pixel-mode .intro h1{font-size:48px!important;line-height:1.1!important;color:var(--px-paper-ink)!important;margin:8px 0 12px!important}
body.pixel-mode .intro h1>span{display:block;color:var(--px-paper-red)!important;margin-top:6px}
body.pixel-mode .intro p{color:var(--px-paper-dim)!important;line-height:1.6!important}
body.pixel-mode .intro-foot{color:var(--px-paper-dim)!important}
body.pixel-mode .intro-foot b{color:var(--px-paper-red)!important}
body.pixel-mode .save-note{color:var(--px-paper-red)!important}
body.pixel-mode .intro .lab-link{color:var(--px-paper-dim)!important}
body.pixel-mode .intro .lab-link:hover{color:var(--px-paper-red)!important}
body.pixel-mode .starter-options{gap:12px!important;padding:3px}
body.pixel-mode .starter-options button small,body.pixel-mode .unlock-starters small{color:var(--px-dim)!important}
body.pixel-mode .starter-options button.selected small{color:#ffb8b0!important}
body.pixel-mode .intro .outline-btn{margin-top:10px}
body.pixel-mode .intro :is(.primary-btn,.outline-btn,.starter-options,.unlock-starters){margin-left:3px;margin-right:3px}
body.pixel-mode .unlock-starters{gap:12px}
body.pixel-mode .menu-version{color:var(--px-faint)!important}

/* ---------- Dialogs: paper sheets ---------- */
body.pixel-mode .modal{padding:26px 30px!important}
body.pixel-mode .modal :is(h2,h3){color:var(--px-paper-ink)!important}
body.pixel-mode .modal-heading h2{font-size:24px!important;line-height:1.2}
body.pixel-mode .modal-heading h2>span{color:var(--px-paper-red)!important;font-size:24px!important}
body.pixel-mode .modal :is(.eyebrow,.reward-mark){color:var(--px-paper-red)!important}
body.pixel-mode .modal :is(p,small,li,.modal-intro,.smallprint,.settings-foot,#end-copy){color:var(--px-paper-dim)!important}
body.pixel-mode .modal b{color:var(--px-paper-ink)}
body.pixel-mode .modal kbd{background:var(--px-paper-hi)!important;color:var(--px-paper-ink)!important;box-shadow:inset 0 -2px 0 var(--px-paper-lo),0 0 0 2px var(--px-paper-edge)!important}
body.pixel-mode .modal input[type=search],body.pixel-mode .codex-search{background:var(--px-paper-hi)!important;color:var(--px-paper-ink)!important;border:0!important;box-shadow:0 0 0 3px var(--px-paper-edge),inset 0 3px 0 0 var(--px-paper-lo)!important;padding:8px 12px!important}
body.pixel-mode .codex-search::placeholder{color:var(--px-paper-lo)}
body.pixel-mode .modal .text-btn{color:var(--px-paper-dim)!important}
body.pixel-mode .modal .text-btn:hover:not(:disabled){color:var(--px-paper-red)!important}
/* Cards inside paper sheets are dark item pedestals, so item art reads the same as in the dock. */
body.pixel-mode :is(.reward-option,.codex-item,.route-card,.counter-guide div,#end-stats>*,.settings-row){
 background:var(--px-panel)!important;color:var(--px-bone)!important;border:0!important;box-shadow:0 0 0 3px var(--px-paper-edge),inset 0 3px 0 0 var(--px-raise),inset 0 -4px 0 0 var(--px-lo)!important}
body.pixel-mode :is(.reward-option,.codex-item,.route-card,.counter-guide div,#end-stats>*,.settings-row) :is(h3,b,strong){color:var(--px-bone)!important}
body.pixel-mode :is(.reward-option,.codex-item,.route-card,.counter-guide div,#end-stats>*,.settings-row) :is(p,small,span:not(.block-icon):not(.quality-badge)){color:var(--px-dim)!important}
body.pixel-mode :is(.reward-option,.codex-item,.route-card):hover:not(:disabled){background:#2a1a14!important;transform:translateY(-3px)}
body.pixel-mode .reward-option{transition:none!important}
body.pixel-mode .reward-option.picked{opacity:.5}
body.pixel-mode .reward-option h3{color:#ffe6a0!important}
body.pixel-mode #reward-options,body.pixel-mode #event-options,body.pixel-mode .codex-grid{gap:14px!important;padding:4px}
body.pixel-mode .codex-filters{gap:10px!important;padding:3px}
body.pixel-mode .codex-filters button{padding:5px 10px!important}
body.pixel-mode .instructions li:before{color:var(--px-paper-red)!important;background:transparent!important;border-color:var(--px-paper-red)!important}
body.pixel-mode .instructions li{border-color:#a88d6666!important}
body.pixel-mode .manual-shortcuts{color:var(--px-paper-dim)!important}
body.pixel-mode .end-modal>h2{font-size:48px!important;color:var(--px-paper-red)!important;line-height:1.1}
body.pixel-mode #end-stats strong{font-size:24px!important;color:var(--px-gold)!important}

/* ---------- Layout ----------
   The dock is re-flowed with grid areas; the DOM and its ids stay exactly as the game code expects. */
body.pixel-mode #expedition-status{display:none!important}
body.pixel-mode .supply-dock .autonomy-bar #auto-status{flex:1 1 auto!important;min-width:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;order:0!important;flex-basis:auto!important;grid-column:auto!important;grid-row:auto!important}
body.pixel-mode .supply-dock .auto-switches{flex-wrap:nowrap!important;gap:10px!important}

/* Building: four slim rows - autonomy / stage + relics + device + actions / pedestals / keys. */
body.pixel-mode[data-mode="build"] .supply-dock{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,max-content) max-content;grid-template-areas:"auto auto active" "phase kit buttons" "slots slots slots" "foot foot foot";column-gap:16px;row-gap:10px;align-items:center}
body.pixel-mode[data-mode="build"] .supply-dock :is(.phase-actions,.run-kit){display:contents!important}
body.pixel-mode[data-mode="build"] .supply-dock .autonomy-bar{grid-area:auto;min-width:0;display:flex!important;align-items:center;flex-wrap:wrap!important;row-gap:8px!important;padding-bottom:10px!important;box-shadow:inset 0 -2px 0 0 #2c1d17!important}
body.pixel-mode[data-mode="build"] .supply-dock .phase-actions>div:first-child{grid-area:phase;min-width:0;overflow:hidden}
body.pixel-mode[data-mode="build"] .supply-dock .phase-actions>div:first-child :is(strong,small){display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.pixel-mode[data-mode="build"] .supply-dock .phase-buttons{grid-area:buttons;display:flex;flex-wrap:nowrap}
body.pixel-mode[data-mode="build"] .supply-dock .relic-area{grid-area:kit;min-width:0;display:flex;align-items:center;gap:12px;overflow:hidden}
body.pixel-mode[data-mode="build"] .supply-dock .relic-area>small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.pixel-mode[data-mode="build"] .supply-dock .active-control{grid-area:active}
body.pixel-mode .supply-dock .active-control{display:flex!important;flex-direction:row!important;align-items:center;gap:10px}
body.pixel-mode .supply-dock .auto-active-toggle{position:static!important;margin:0!important;padding:6px 8px!important;white-space:nowrap}
body.pixel-mode[data-mode="build"] .supply-dock .supply-slots{grid-area:slots;margin:0!important}
body.pixel-mode[data-mode="build"] .supply-dock .dock-foot{grid-area:foot;margin:0!important;padding:0!important;border:0!important}
body.pixel-mode[data-mode="build"] .supply-slot{min-height:64px!important;padding:6px 10px!important}
body.pixel-mode[data-mode="build"] .supply-slot .block-icon{width:40px!important;height:40px!important}
body.pixel-mode[data-mode="build"] .supply-slot.empty-slot{min-height:0!important;height:auto!important;padding:9px!important;justify-content:center}

/* Battle: one 64px strip - autonomy on the left, body slots in the middle, the active device on the right. */
body.pixel-mode:is([data-mode="running"],[data-mode="paused"]) .supply-dock{display:flex!important;align-items:center;gap:14px!important;height:64px;min-height:0!important;padding:8px 12px!important;left:14px!important;right:14px!important;bottom:12px!important}
body.pixel-mode:is([data-mode="running"],[data-mode="paused"]) .supply-dock .autonomy-bar{display:flex!important;flex:1 1 auto;min-width:0;align-items:center;flex-wrap:nowrap!important;width:auto!important}
body.pixel-mode:is([data-mode="running"],[data-mode="paused"]) .supply-dock .phase-actions{flex:none;margin:0!important}
body.pixel-mode:is([data-mode="running"],[data-mode="paused"]) .supply-dock .phase-actions>div:first-child{display:none}
body.pixel-mode:is([data-mode="running"],[data-mode="paused"]) .supply-dock .run-kit{flex:none;display:flex!important;align-items:center;gap:10px;margin:0!important;padding:0!important;border:0!important}
body.pixel-mode:is([data-mode="running"],[data-mode="paused"]) .supply-dock .relic-area{display:none!important}
body.pixel-mode:is([data-mode="running"],[data-mode="paused"]) :is(.field-note,.view-tools){bottom:90px!important}
body.pixel-mode:is([data-mode="running"],[data-mode="paused"]) .mobile-inspector-toggle{bottom:140px!important;right:16px!important}
body.pixel-mode:is([data-mode="running"],[data-mode="paused"]) .toast{bottom:150px!important}
body.pixel-mode:is([data-mode="running"],[data-mode="paused"]) .boss-health{bottom:108px}
body.pixel-mode #active-btn{min-height:44px;padding:4px 10px 4px 4px!important;gap:8px}
body.pixel-mode #active-btn .block-icon{width:36px!important;height:36px!important}
body.pixel-mode #active-btn .block-icon .px-icon{width:30px;height:30px}
/* Clone / host switch under the map: the knob slides across with a little overshoot; a bar drains while it cools down. */
.mode-switch{pointer-events:auto;position:relative;display:grid;grid-template-columns:1fr 1fr;width:100%;height:26px;margin-top:8px;padding:0!important;border:0!important;cursor:pointer;background:var(--px-lo)!important;box-shadow:0 0 0 3px var(--px-ink),inset 0 2px 0 0 #0000004d!important;overflow:hidden}
.mode-switch>i{position:absolute;left:2px;top:2px;width:calc(50% - 2px);height:calc(100% - 4px);background:var(--px-raise);box-shadow:inset 0 2px 0 0 #ffffff26,inset 0 -2px 0 0 #00000059,0 0 0 1px var(--px-hi);transition:transform .28s cubic-bezier(.3,1.6,.5,1),background .2s}
.mode-switch.is-host>i{transform:translateX(100%);background:#4a3a14}
.mode-switch>span{position:relative;z-index:1;display:grid;place-items:center;color:var(--px-faint);transition:color .2s}
.mode-switch:not(.is-host)>span:nth-of-type(1),.mode-switch.is-host>span:nth-of-type(2){color:var(--px-bone)}
.mode-switch.is-host>span:nth-of-type(2){color:#ffd06a}
.mode-switch:after{content:'';position:absolute;left:0;bottom:0;height:2px;width:calc(var(--cd,0)*100%);background:#ffd06a;opacity:.8}
.mode-switch.cooling{cursor:wait}
.mode-switch:disabled{opacity:.5;cursor:default}
/* Pocket: two slots for pills and cards beside the active item; Q uses the first. */
.pocket{display:flex;gap:8px}
body.pixel-mode .pocket-slot{position:relative;width:44px;height:44px;flex:none;display:grid;place-items:center;padding:0!important;border:0!important;background:var(--px-raise)!important;box-shadow:0 0 0 3px var(--px-ink),inset 0 3px 0 0 #ffffff1a,inset 0 -3px 0 0 #0000004d!important;cursor:pointer}
body.pixel-mode .pocket-slot img{width:30px;height:auto;max-height:36px;image-rendering:pixelated}
body.pixel-mode .pocket-slot.card img{width:24px}
body.pixel-mode .pocket-slot.empty{background:transparent!important;box-shadow:0 0 0 2px #4a332866!important;cursor:default}
body.pixel-mode .pocket-slot i{position:absolute;left:3px;top:1px;font:12px/1 var(--px-font,monospace);font-style:normal;color:#ffd06a;text-shadow:1px 1px 0 var(--px-ink)}
body.pixel-mode .pocket-slot kbd{position:absolute;right:-5px;bottom:-7px;font-size:9px;padding:1px 3px}
body.pixel-mode .pocket-slot:not(:disabled):hover{filter:brightness(1.25)}
body.pixel-mode .pocket-slot:disabled{opacity:.55;cursor:default}

/* Narrow screens: the inspector becomes a drawer so the board and the dock get the full width. */
@media (max-width:1699px){
 body.pixel-mode[data-mode="build"] .workspace{grid-template-columns:minmax(0,1fr)!important}
 body.pixel-mode[data-mode="build"] .inspector{display:none!important}
 body.pixel-mode.inspect-open[data-mode="build"] .inspector{display:flex!important;position:fixed!important;right:14px!important;top:62px!important;bottom:14px!important;width:330px!important;z-index:20;box-shadow:var(--px-frame)!important;padding:36px 18px 16px!important}
 body.pixel-mode.inspect-open[data-mode="build"] .inspector :is(.activity,.inventory-summary){display:none!important}
 body.pixel-mode[data-mode="build"] .mobile-inspector-toggle{display:block!important;position:fixed!important;right:16px!important;top:346px!important;bottom:auto!important;z-index:11}
 body.pixel-mode[data-mode="build"] .mobile-inspector-close{display:block!important}
}
/* Short screens: a slimmer top bar, no key-hint row, lower pedestals. */
@media (max-height:820px){
 body.pixel-mode .topbar{height:44px!important}
 body.pixel-mode .battle-hud{top:54px!important}
 body.pixel-mode .journey-info{top:calc(64px + var(--px-hud-h,130px))!important}
 body.pixel-mode #travel-hud{top:54px!important}
 body.pixel-mode[data-mode="build"] .supply-dock .dock-foot{display:none!important}
 body.pixel-mode[data-mode="build"] .supply-dock{row-gap:8px!important;padding:10px 14px 10px!important}
 body.pixel-mode[data-mode="build"] .supply-slot{min-height:54px!important}
 body.pixel-mode[data-mode="build"] .supply-slot .block-icon{width:34px!important;height:34px!important}
 body.pixel-mode[data-mode="build"] .supply-slot .block-icon .px-icon{width:28px;height:28px}
}
@media (max-width:1799px){
 body.pixel-mode[data-mode="build"] .supply-dock .autonomy-bar #auto-status{display:none!important}
 body.pixel-mode[data-mode="build"] .supply-dock .phase-buttons{gap:10px!important}
}
body.pixel-mode[data-mode="build"] .supply-dock .relic-area>small,body.pixel-mode[data-mode="build"] .supply-dock .relic-empty{display:none!important}
/* Title screen: the basement darkens toward the paper note instead of the old moss-green wash. */
body.pixel-mode[data-mode="ready"] .arena:after{background:linear-gradient(90deg,#0a0505e6 0%,#140c0c99 32%,#140c0c14 62%),linear-gradient(0deg,#0a0505a6,transparent 25%)!important}
/* English shows the name once; the small Latin subtitle only accompanies the Chinese title. */
html[lang="en"] body.pixel-mode :is(.intro h1>span,.brand small){display:none!important}
body.pixel-mode .intro :is(#support-demo,.lab-link){display:inline-flex;align-items:center;margin:12px 12px 0 3px!important;vertical-align:middle}
/* The item name on a reward card is the headline, as in an Isaac pickup banner. */
body.pixel-mode #reward-options .reward-option h3{font-size:24px!important;line-height:1.2;color:#ffe6a0!important;margin:6px 0 8px}
/* Boot screen: until main.js finishes, only the basement background and a pixel "loading" line show. */
html.booting body>*{visibility:hidden!important}
html.booting body.pixel-mode::after{content:'LOADING…';position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);color:#7d6956;font:12px 'Fusion Pixel',monospace;letter-spacing:2px}
html.booting[lang="zh-CN"] body.pixel-mode::after{content:'载入中…'}

/* ---------- Phones: portrait up to 760px wide, landscape up to 500px tall ----------
   One compact top strip, a minimal battle bar, full-screen sheets for dialogs, smaller HUD pieces. */
@media (max-width:760px),(max-height:500px){
 html,body{overflow:hidden}
 body.pixel-mode .loadout-panel{display:none!important}
 body.pixel-mode .topbar{height:40px!important;padding:0 8px!important;gap:8px!important}
 body.pixel-mode .brand>span,body.pixel-mode .divider,body.pixel-mode #mode-label,body.pixel-mode .live-dot{display:none!important}
 body.pixel-mode .brand svg{width:20px!important;height:22px!important}
 body.pixel-mode .run-status{flex:0 0 auto!important}
 body.pixel-mode .toolbar{gap:4px!important;margin-left:auto;flex-wrap:nowrap}
 body.pixel-mode #fx-btn,body.pixel-mode #sound-btn{display:none!important}
 body.pixel-mode #help-btn{display:inline-flex!important}
 body.pixel-mode .toolbar :is(.text-btn,.icon-btn,.outline-btn){min-width:30px;height:30px;padding:0 6px!important;display:inline-flex;align-items:center;justify-content:center}
 body.pixel-mode :is(#help-btn,#codex-btn,#settings-btn,#pause-btn,#assembly-btn){font-size:0!important;gap:0}
 body.pixel-mode #help-btn span{display:inline!important;font-size:12px!important;margin:0!important;color:var(--px-bone)!important}
 body.pixel-mode #codex-btn span{display:none}
 body.pixel-mode :is(#codex-btn,#settings-btn,#pause-btn,#assembly-btn):before{font-size:12px!important;color:var(--px-bone)}
 body.pixel-mode #codex-btn:before{content:'▤'}
 body.pixel-mode #settings-btn:before{content:'⚙'}
 body.pixel-mode #pause-btn:before{content:'Ⅱ'}
 body.pixel-mode #assembly-btn:before{content:'⚒'}
 body.pixel-mode .battle-hud{top:46px!important;left:8px!important}
 body.pixel-mode .journey-info{top:calc(52px + var(--px-hud-h,90px))!important;left:8px!important;max-width:min(260px,48vw)!important;padding:7px 9px!important}
 body.pixel-mode .journey-info :is(p,small,#journey-track){display:none!important}
 body.pixel-mode .journey-info #gate-action{display:block;width:100%;margin-top:6px}
 body.pixel-mode #travel-hud{top:46px!important;right:8px!important;width:auto!important;padding:6px!important}
 body.pixel-mode #travel-hud :is(.map-heading>span:last-child,.map-coords,#travel-state,strong,small){display:none!important}
 body.pixel-mode .pixel-map{width:102px;height:102px}
 body.pixel-mode :is(.field-note,.view-tools){display:none!important}
 body.pixel-mode .mobile-inspector-toggle{bottom:auto!important;top:auto!important}
 body.pixel-mode:is([data-mode="running"],[data-mode="paused"]) .mobile-inspector-toggle{bottom:72px!important;right:8px!important;font-size:0!important;padding:6px 9px!important}
 body.pixel-mode:is([data-mode="running"],[data-mode="paused"]) .mobile-inspector-toggle:before{content:'◇';font-size:12px}
 body.pixel-mode #move-pad{bottom:76px!important;left:8px!important}
 /* Battle toasts sit above the stick (bottom 76 + 116 px). */
 body.pixel-mode:is([data-mode="running"],[data-mode="paused"]) .toast{bottom:204px!important}
 /* Battle: auto switches, the assembly key and the active item; the rest lives in the build screen. */
 body.pixel-mode:is([data-mode="running"],[data-mode="paused"]) .supply-dock{left:6px!important;right:6px!important;bottom:6px!important;height:56px;padding:6px 8px!important;gap:6px!important}
 body.pixel-mode:is([data-mode="running"],[data-mode="paused"]) .supply-dock .autonomy-bar :is(.auto-choice,#auto-status,label,select){display:none!important}
 body.pixel-mode:is([data-mode="running"],[data-mode="paused"]) .supply-dock :is(.phase-actions,.auto-active-toggle){display:none!important}
 body.pixel-mode .supply-dock .autonomy-bar .outline-btn{padding:5px 7px!important}
 /* The dock also carries the pocket: the cooldown shows as the button fill, so the seconds step aside. */
 body.pixel-mode #active-btn :is(b,kbd,small){display:none!important}
 body.pixel-mode #active-btn{padding:3px!important;min-height:40px}
 body.pixel-mode .pocket{gap:4px}
 body.pixel-mode .pocket-slot{width:36px;height:36px}
 body.pixel-mode .pocket-slot img{width:26px}
 body.pixel-mode .pocket-slot.card img{width:20px}
 body.pixel-mode .pocket-slot kbd{display:none}
 /* Building: buttons wrap, the pack scrolls sideways, relics and key hints step aside. */
 body.pixel-mode[data-mode="build"] .supply-dock{left:6px!important;right:6px!important;bottom:6px!important;padding:8px!important;row-gap:6px!important;column-gap:8px!important;
  grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"auto" "active" "buttons" "slots"!important;max-height:52dvh;overflow-y:auto}
 body.pixel-mode[data-mode="build"] .supply-dock :is(.dock-foot,.relic-area,#auto-status,.phase-actions>div:first-child){display:none!important}
 body.pixel-mode[data-mode="build"] .supply-dock .supply-slots:has(>.empty-slot){display:none!important}
 body.pixel-mode[data-mode="build"] .mobile-inspector-toggle{top:226px!important;right:8px!important}
 body.pixel-mode[data-mode="build"] .supply-dock .autonomy-bar{padding-bottom:6px!important;row-gap:6px!important}
 body.pixel-mode[data-mode="build"] .supply-dock .autonomy-bar select{max-width:120px}
 body.pixel-mode[data-mode="build"] .supply-dock .phase-buttons{flex-wrap:wrap!important;gap:8px!important;justify-content:flex-end}
 body.pixel-mode[data-mode="build"] .supply-dock .phase-buttons>*{padding:6px 9px!important;min-width:0!important}
 body.pixel-mode[data-mode="build"] .supply-slots{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important}
 body.pixel-mode[data-mode="build"] .supply-slot{min-width:150px!important;flex:0 0 auto!important}
 body.pixel-mode .supply-dock .auto-active-toggle{padding:5px 7px!important}
 /* Dialogs become full-screen sheets that scroll inside. */
 body.pixel-mode .modal{width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;margin:0!important;padding:14px 14px 20px!important;overflow-y:auto!important;box-shadow:none!important}
 body.pixel-mode .modal-heading h2{font-size:24px!important}
 body.pixel-mode #reward-options{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))!important;gap:10px!important}
 body.pixel-mode .reward-option{padding:10px 12px!important;min-height:0!important}
 body.pixel-mode #reward-options .reward-option h3{font-size:12px!important;margin:4px 0!important}
 body.pixel-mode .reward-option .block-icon.large{width:48px!important;height:48px!important}
 body.pixel-mode .reward-option .block-icon.large .px-icon{width:40px;height:40px}
 body.pixel-mode .codex-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important}
 body.pixel-mode .intro{max-height:calc(100dvh - 56px);overflow-y:auto;top:48px!important;left:50%!important;transform:translateX(-50%);width:min(470px,calc(100vw - 16px))!important;padding:16px!important}
 body.pixel-mode .intro h1{font-size:24px!important}
 body.pixel-mode .boss-health{width:min(560px,86vw)!important;bottom:72px!important;padding-left:30px}
 body.pixel-mode .boss-health #boss-name{font-size:12px!important;margin-bottom:4px}
 body.pixel-mode .boss-health>div{height:14px!important;box-shadow:0 0 0 3px var(--px-ink),3px 3px 0 3px #000000a0!important}
 body.pixel-mode .boss-health .px-boss-skull{width:28px;height:28px;bottom:-6px}
 body.pixel-mode .px-banner{top:30%;gap:14px;padding:10px 0}
 body.pixel-mode .px-banner b{font-size:24px!important}
 body.pixel-mode .px-banner small{font-size:12px!important}
 body.pixel-mode .px-banner-art{width:auto!important;height:64px!important}
 body.pixel-mode.inspect-open .inspector{left:8px!important;right:8px!important;width:auto!important;top:46px!important;bottom:70px!important}
}
/* Landscape phones: the build panel folds into two rows so the board keeps most of the short screen. */
@media (max-height:500px){
 body.pixel-mode[data-mode="build"] .supply-dock{grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"auto auto" "active buttons" "slots slots"!important}
 body.pixel-mode[data-mode="build"] .supply-dock .autonomy-bar{flex-wrap:nowrap!important;padding-bottom:4px!important}
 body.pixel-mode[data-mode="build"] .supply-dock .phase-buttons{flex-wrap:nowrap!important}
 body.pixel-mode[data-mode="build"] .mobile-inspector-toggle{top:auto!important;bottom:130px!important}
 body.pixel-mode .pixel-map{width:68px;height:68px}
}