/* October 2026 visual system: illuminated edges, quiet depth and clear actions.
   Layout and gameplay remain owned by the existing responsive components. */
#shell{
 --ui-ink:#f6f5ed;--ui-muted:#b9ccd8;--ui-accent:#f3d69b;--ui-focus:#ffe5ad;
 --ui-line:#b4cdda38;--ui-panel:#122638;--ui-raised:#223e52;
 --ui-shadow:0 16px 40px #020d2340;
 --surface:linear-gradient(155deg,#29475a,#172f43 52%,#112637);
 --surface-inset:linear-gradient(155deg,#102637,#193345);
 --surface-edge:inset 0 1px #f1fbff18,0 3px 0 #071a284d,0 8px 22px #03152330;
}
#shell :is(button,summary,a,input,select):focus-visible{outline:3px solid var(--ui-focus);outline-offset:3px}
#shell :is(input:not([type=checkbox]):not([type=range]),select,textarea){
 background:#0e2334;border-color:#a5c7d54d;box-shadow:inset 0 2px 5px #030e1f33;
}
#shell input::placeholder{color:#a6bdcc;opacity:1}
#shell :is(input,select,textarea):focus-visible{border-color:#f3d69b}
#shell :is(.primary,.secondary,.back-button,.icon-button){
 transition:background-color .18s,border-color .18s,box-shadow .18s,transform .18s;
}
#shell .primary{
 background:linear-gradient(165deg,#fff0c6,#f2d296 60%,#e6b96b);
 border:1px solid #fff1cc;color:#243442;text-shadow:none;
 box-shadow:inset 0 1px #fff9e7,0 3px 0 #927049,0 8px 18px #06121f38;
 font-weight:750;
}
#shell :is(.secondary,.back-button){background:var(--surface);border-color:#acc7d14d;box-shadow:var(--surface-edge)}
#shell button:disabled{cursor:default}
#shell .primary:disabled{background:#304657;color:#c0cbd3;border-color:#75919e66;box-shadow:inset 0 1px #ffffff0d;opacity:.8}
#shell :is(.primary,.secondary,.back-button):active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 2px 5px #04121f33}
#shell .text-button{box-shadow:none;text-underline-offset:4px}
#shell progress{height:7px;box-shadow:inset 0 1px 3px #030d20;accent-color:#f3d69b}
#shell progress::-webkit-progress-bar{background:#091f30}
#shell progress::-webkit-progress-value{background:linear-gradient(90deg,#b28a57,#f7d89d);box-shadow:inset 0 1px #fff3}

/* Each rail is a small set of tangible controls; the scenery stays open. */
#shell #lobby :is(.dock-button,.ranked-shortcut,.profile-plaque,.career-strip>button,#modes-open,#collection-open),
#shell #main-topbar :is(.icon-button,.best-plaque,.coin-plaque){
 background:linear-gradient(145deg,#284658f5,#142d41ed)!important;
 border:1px solid #c0d8df50!important;border-radius:16px;
 box-shadow:inset 0 1px #f2f9ff22,0 3px 0 #08182745,0 10px 24px #04112438!important;
}
#shell #lobby :is(.dock-icon,.feature-icon){color:#f3d69b!important}
#shell #lobby .dock-icon{display:grid;place-items:center;width:34px;height:34px;min-width:34px;background:#e3c89410;border-radius:10px}
#shell #lobby :is(.dock-button,.ranked-shortcut){gap:12px}
#shell #lobby .dock-button small{color:#c4d4df}
#shell #lobby .profile-plaque{border-left:3px solid #cfb17b!important}
#shell #lobby #open-quests{border-left:3px solid #94cdbc!important}
#shell #lobby #open-daily{border-left:3px solid #e4c485!important}
#shell #lobby #open-season{border-left:3px solid #bda8dd!important}
#shell #lobby .career-strip progress{height:5px;border-radius:8px;margin-top:9px}
#shell #lobby .loadout-bar{background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important}
#shell #lobby #auto-join{
 background:linear-gradient(165deg,#fff3ca,#f4d390 65%,#eebf6e)!important;
 border:1px solid #fff3d5!important;border-radius:18px;color:#20394a!important;
 box-shadow:inset 0 2px #fff7de,0 4px 0 #997046,0 12px 30px #09152750!important;
 text-shadow:0 1px #fff8;font-weight:850;letter-spacing:.045em;
}
#shell #lobby #collection-open{background:linear-gradient(145deg,#2d514eeb,#183848f5)!important;border-color:#b5d4c65c!important}
#shell #lobby #menu-snake-growth{background:none!important;box-shadow:none!important;border:0!important}
#shell #lobby #selected-snake{filter:none!important;transform:none!important;transition:none}
#shell #lobby #menu-snake-growth-label{display:none!important}

/* Move only the artwork, keeping the preview's tap target fixed. */
#shell .preview-turn{touch-action:none!important;cursor:grab;-webkit-user-select:none;user-select:none}
#shell .preview-turn:not(canvas){overflow:clip!important}
#shell .preview-turn .preview-turn-art{pointer-events:none}
#shell .preview-turn.preview-dragging{cursor:grabbing}
#shell .preview-turn-art{transform:perspective(1000px) rotateX(var(--preview-pitch,0deg)) rotateY(var(--preview-yaw,0deg)) rotateZ(var(--preview-roll,0deg))!important;transform-origin:50% 50%;transition:none!important}
#shell .preview-turn-art.preview-held{will-change:transform}
#shell .preview-turn-art:focus-visible{outline:2px solid #ffecab;outline-offset:-4px;border-radius:12px}
#shell #lobby .menu-panel-toggle{box-shadow:inset 0 1px #fff2,0 4px 10px #07122244!important;border-color:#b8cfda66!important}
@media(orientation:landscape) and (min-height:651px){
 #shell #lobby :is(.player-dock,.career-strip){height:min(100%,360px);gap:10px!important}
 #shell #lobby .player-dock{grid-template-rows:repeat(5,minmax(48px,1fr));align-content:center}
 #shell #lobby .career-strip{grid-template-rows:repeat(3,minmax(0,1fr))}
 #shell #lobby .loadout-bar{width:min(1120px,100%);justify-self:center}
 #shell #lobby .lobby-card{grid-template-rows:minmax(0,1fr) 72px}
}

/* Shared panel frame, with the existing seasonal backdrop around it. */
#shell :is(#party-panel,#rooms-panel,#career-panel,#collection-panel,#expansion-panel,#tutorial,#account-panel,#admin-panel,#settings-panel,#photo-panel,#death,#pause,#closed,#fullscreen-help) :is(.dialog,.collection-dialog,.settings-dialog,.expansion-dialog,.admin-dialog,.photo-dialog),
#shell :is(.party-lobby-room,.revive-card,.purchase-confirm-card,.name-form-card){
 background:radial-gradient(ellipse at 16% 0%,#3a606a40,transparent 55%),linear-gradient(150deg,#1c384cf7,#112638fa 64%);
 color:var(--ui-ink);border:1px solid #bbd1d44d;border-radius:24px;
 box-shadow:inset 0 1px #f7fbff26,0 18px 55px #03102080;backdrop-filter:none;-webkit-backdrop-filter:none;
}
#shell :is(.collection-header,.panel-heading,.account-heading,.expansion-heading,.settings-heading,.party-lobby-heading){
 border-bottom-color:#c0d4df29;
}
/* Reserve room for the full header controls inside the rounded frame. */
#shell #collection-panel .collection-dialog{grid-template-rows:auto minmax(0,1fr)}
#shell #collection-panel .collection-header{height:auto;min-height:64px;box-sizing:border-box;margin:0;padding:10px 12px 8px}
#shell :is(.dialog,.collection-dialog,.settings-dialog,.expansion-dialog,.admin-dialog) h2{color:#fbf1da;letter-spacing:-.035em}
#shell :is(.section-eyebrow,.dialog-kicker,.panel-heading small){color:#eacb92;letter-spacing:.12em}
#shell :is(.collection-tabs,.settings-tabs,.career-tabs,.expansion-tabs,.section-switch,.section-views,.segmented,#account-modes){
 background:#0c2233;border-color:#acc6d62e;box-shadow:inset 0 2px 5px #06102038;border-radius:13px;
}
#shell :is(.collection-tabs,.settings-tabs,.career-tabs,.expansion-tabs,.section-switch,.section-views,.segmented,#account-modes) button{border-radius:9px;line-height:1.3}
#shell :is(.collection-tabs,.settings-tabs,.career-tabs,.expansion-tabs,.section-switch,.section-views,.segmented,#account-modes) :is([aria-selected=true],[aria-pressed=true]){
 background:linear-gradient(155deg,#f8e8bf,#dec28b)!important;color:#233c49!important;border-color:#fff0cb!important;
 box-shadow:inset 0 1px #fff8,0 2px 6px #06132344!important;outline:none;
}
#shell :is(.collection-tabs,.settings-tabs,.career-tabs,.expansion-tabs,.section-switch,.segmented) button:focus-visible{outline:3px solid #fff0c0;outline-offset:2px}

/* Sculpted display cards. Item colors supply their own subtle studio light. */
#shell #collection-panel :is(.collection-card,.store-card){
 position:relative;isolation:isolate;border-radius:18px!important;
 background:radial-gradient(ellipse at var(--light-x,50%) var(--light-y,30%),color-mix(in srgb,var(--item-glow,#91c6cd) 19%,transparent),transparent 66%),linear-gradient(155deg,#29485b,#142c3f 82%)!important;
 border:1px solid #b1ccd446!important;box-shadow:inset 0 1px #effcff1c,0 3px 0 #061b2c66,0 6px 14px #020f241f!important;
 transition:border-color .18s,box-shadow .18s,background-color .18s;
}
#shell #collection-panel :is(.collection-card,.store-card)::after{
 content:"";position:absolute;z-index:-1;pointer-events:none;left:19%;right:19%;bottom:20%;height:12%;border-radius:50%;
 background:radial-gradient(ellipse,#091c3080,transparent 70%);
}
#shell #collection-panel :is(.collection-card,.store-card) canvas{transform:perspective(650px) rotateY(var(--depth-x,0deg)) rotateX(var(--depth-y,0deg));transition:transform .2s ease-out}
#shell #collection-panel :is(.collection-card,.store-card) strong{color:#fff4e1!important;font-weight:700!important}
#shell #collection-panel :is(.collection-card,.store-card)[aria-pressed=true]{
 border:2px solid #f3d395!important;background:radial-gradient(ellipse at 50% 25%,color-mix(in srgb,var(--item-glow,#93cdbc) 26%,transparent),transparent 68%),linear-gradient(155deg,#304d56,#183444)!important;
 box-shadow:inset 0 0 0 1px #f3d39530,0 3px 0 #97734866,0 7px 20px #020f2438!important;
}
#shell #collection-panel :is(#collection-preview-stage,#store-preview-stage){
 isolation:isolate;border-radius:19px!important;border:1px solid #d7dbca60!important;
 background:radial-gradient(ellipse at var(--light-x,42%) var(--light-y,30%),color-mix(in srgb,var(--item-glow,#aacdc7) 23%,transparent),transparent 66%),linear-gradient(150deg,#355763,#172f42 80%)!important;
 box-shadow:inset 0 1px #fff3,inset 0 -30px 50px #07192e26,0 7px 22px #020f2433!important;
}
#shell #collection-panel :is(#collection-preview,#store-preview):not(.preview-turn-art){transform:perspective(900px) rotateY(var(--depth-x,0deg));transition:transform .22s ease-out}
#shell #collection-panel :is(.collection-footer,.store-footer){border-top:1px solid #dcc59544;background:linear-gradient(120deg,#1b3749,#142c3e);padding:10px;border-radius:12px}
#shell #collection-panel :is(.store-price,.card-badge){color:#f8e6bd}
#shell #collection-panel .store-filters button[aria-pressed=true]{background:linear-gradient(155deg,#f6e6bf,#d7c391);color:#203b48;border-color:#ffedc2}
#shell #collection-panel .store-filters button[aria-pressed=true] :is(span,small,b){color:#294651!important;opacity:1}
#shell #collection-panel .browse-filter-content{background:linear-gradient(145deg,#234355,#112a3e);border-color:#a8c5d166;box-shadow:0 16px 38px #03122588}
#shell #collection-panel :is(.preview-toggle,.browse-filters>summary,.layout-choice,.store-category){border-color:#bdd1d64a;border-radius:10px}
#shell #snake-builder-panel :is(.snake-builder-stage,.snake-builder-controls,.snake-build-card){background:var(--surface);border-color:#b6cdd842;box-shadow:inset 0 1px #fff1}
#shell #snake-builder-panel .snake-builder-stage[data-preview-light=true]{background:radial-gradient(ellipse at 40% 20%,#fff8e7,#c9dedf)!important}

/* Discovery, social, progression and rooms share the same card language. */
#shell :is(.mode-card,.solo-world-card,.achievement-card,.quest-card,.book-entry,.stats-card,.social-grid>article,.party-choice,.room-row,.admin-member,.admin-offer){
 background:var(--surface);border:1px solid #adc8d43b;border-radius:16px;box-shadow:inset 0 1px #f0f8ff14,0 4px 12px #03132420;
}
#shell .mode-card{position:relative;overflow:hidden}
#shell #mode-cards .mode-card{--mode-glow:#7bc4bf;background:radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--mode-glow) 19%,transparent),transparent 72%),var(--surface);padding:17px;min-height:146px}
#shell #mode-cards .mode-card[data-mode=survival]{--mode-glow:#d8a785}
#shell #mode-cards .mode-card[data-mode=teams]{--mode-glow:#92b5ef}
#shell #mode-cards .mode-card[data-mode=event]{--mode-glow:#ba9bea}
#shell #mode-cards .mode-card[data-mode=ranked]{--mode-glow:#f4cb72}
#shell #mode-cards .mode-card[data-mode=tag]{--mode-glow:#e89da4}
#shell #mode-cards .mode-card[data-mode=race]{--mode-glow:#a4d6ec}
#shell #mode-cards .mode-card .mode-icon{width:74px;height:46px;object-position:left center}
#shell #mode-cards .mode-card[aria-pressed=true]{border-color:#efd299;background:radial-gradient(ellipse at 100% 0%,#e1c48824,transparent 72%),linear-gradient(145deg,#37554f,#1b3645)}
#shell .mode-card .mode-icon{transform:perspective(650px) rotateY(var(--depth-x,0deg)) rotateX(var(--depth-y,0deg));transition:transform .2s ease-out;filter:drop-shadow(0 3px 3px #020e2338)}
#shell .mode-card[aria-pressed=true]{background:linear-gradient(150deg,#405951,#1e3947);border-color:#edcf97;box-shadow:inset 0 1px #fff3,0 3px 0 #876b4144}
#shell .mode-card[aria-pressed=true]::after{content:"✓";position:absolute;right:10px;top:8px;color:#ffe6ab;font-size:13px}
#shell .solo-world-card{overflow:hidden;border-left:3px solid #93c7b6}
#shell .world-preview{height:100px;border-radius:10px;box-shadow:inset 0 1px #fff3,0 3px 12px #020e2338}
#shell .room-row{padding:16px;gap:14px;min-height:86px;position:relative}
#shell .room-row::before{content:"";width:9px;height:9px;border-radius:50%;flex:none;background:#a0dfc6;box-shadow:0 0 0 5px #a0dfc616}
#shell .room-row:has(button:disabled)::before{background:#b6bec8;box-shadow:none}
#shell .room-row strong{font-weight:750;color:#f6ead2;display:block;margin-bottom:5px}
#shell .room-row small{line-height:1.5;color:#bdd0dc}
#shell .room-row button{min-width:66px;min-height:44px;border:1px solid #fff0cb;background:linear-gradient(150deg,#f8e7bd,#dfbf84);color:#263d47;border-radius:10px;box-shadow:0 2px 0 #8f6f464f}
#shell .room-row button:disabled{background:#294253;border-color:#7896a655;color:#b8c7d1;box-shadow:none}
#shell .public-rooms{background:#0b22324d;border-color:#a5c3d02b;border-radius:18px}
#shell .achievement-card.earned{background:linear-gradient(145deg,#33534d,#1a3544);border-color:#dbc08b88}
#shell .quest-card progress{margin-block:10px}
#shell .season-banner{background:radial-gradient(ellipse at 90% 0%,#ac8acf24,transparent 60%),linear-gradient(130deg,#304958,#23364d);border:1px solid #dfc98e6b;box-shadow:inset 0 1px #fff2}
#shell :is(.ui-details,.settings-group,.guide-step,.book-section>summary){background:var(--surface);border-color:#b0cdd63b;border-radius:13px;box-shadow:inset 0 1px #fff1}
#shell :is(.settings-group,.ui-details)[open]>summary{color:#f3d69b;border-bottom-color:#b8cfd329}
#shell :is(.settings-group-body,.book-tools,.mode-launch){background:#112a3a}
#shell #account-panel :is(.account-input,.account-person){border:1px solid #b1cbd34a;border-radius:12px;box-shadow:inset 0 2px 5px #040f2030}
#shell #account-panel .account-input:focus-within{border-color:#efd096;box-shadow:0 0 0 3px #efd09615}
#shell #account-panel .account-input input{box-shadow:none}
#shell :is(.field-status,.inline-status,.error){line-height:1.5}
#shell .error{background:#502c3eea;border-color:#e7a8a366;color:#ffeded}
#shell .admin-section-heading{border-bottom:1px solid #b6cbd033;padding-bottom:10px}

/* Match interface uses fixed surfaces: readable without adding moving layers. */
#shell #hud :is(.score-card,.leaderboard,#boost-meter,#signal-toggle),#shell #menu-button{
 background:linear-gradient(155deg,#223e52ed,#0c2539ed);border-color:#c0d5da55;
 box-shadow:inset 0 1px #eff9ff1c,0 4px 14px #04102030;
}
#shell #hud .score-card{border-top:2px solid #e9cd99a6}
#shell #hud .score-card strong{color:#fff1d3}
#shell #hud .leaderboard .own{background:linear-gradient(100deg,#ecd6a9,#cbded5);color:#163445;box-shadow:0 1px 4px #04122033}
#shell #hud .leaderboard .own .rank{color:#163445}
#shell #hud .skill-button{background:linear-gradient(150deg,#304e63f2,#122d43f2);border-color:#c2d7d966;box-shadow:inset 0 1px #f4fcff33,0 3px 0 #091a2b66}
#shell #hud .skill-button:not(:disabled):active{box-shadow:inset 0 2px 6px #031422;transform:translateY(1px)}
#shell #hud #minimap{border-color:#b9d6d066;box-shadow:0 3px 12px #04112233;border-radius:13px}
#shell :is(#boost,#boost-left){box-shadow:inset 0 2px #fff3,0 4px 12px #04142633}
#shell :is(#boost,#boost-left).pressed{box-shadow:inset 0 3px 10px #020d2455}
#shell #death .result-summary{background:radial-gradient(ellipse at 15% 0%,#e1bf7420,transparent 65%),#122f42;border-color:#d9c28c5c;border-radius:16px}
#shell #death .results-table td{font-variant-numeric:tabular-nums}
#shell #death .earned-summary strong{color:#f9dc9e}
#shell #death .result-summary .round-score{grid-row:1}
#shell #death .result-summary .earned-summary{grid-row:2}
#shell #death .result-summary #result-next-goal{grid-row:3}
#shell #death .result-summary .results-table{grid-row:4}
#shell #death .result-summary #result-save-kind{grid-row:5}
#shell #death .result-summary .ruby-reward{grid-row:6}
#shell #death .result-actions{border-top-color:#dfc79442}
#shell #pause .dialog{border-top:2px solid #ecd39a}
#shell .menu-tour-card{background:var(--surface);border:1px solid #edce98;border-radius:18px;box-shadow:inset 0 1px #fff2,0 14px 35px #03122580}
#shell .menu-tour-card button{min-height:44px;color:#173344;background:#ead4a5;border:1px solid #fff1cb;border-radius:10px;font-weight:750}
#shell .small-overlay:not([hidden])>:is(.dialog,.collection-dialog,.settings-dialog,.expansion-dialog,.admin-dialog,.photo-dialog,.party-lobby-room,.revive-card){animation:ui-surface-arrive .18s ease-out both}
@keyframes ui-surface-arrive{from{opacity:.7;translate:0 7px}to{opacity:1;translate:0 0}}
#shell #lobby #auto-join:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 2px 5px #8d693a22,0 2px 0 #997046!important}

@media(hover:hover) and (pointer:fine){
 #shell #lobby :is(.dock-button,.ranked-shortcut,.profile-plaque,.career-strip>button,#modes-open,#collection-open):hover:not(:disabled){background:linear-gradient(145deg,#37566a,#213f52)!important;border-color:#f1d39aa1!important;box-shadow:inset 0 1px #fff3,0 4px 0 #08182745,0 12px 25px #04112455!important;transform:translateY(-2px)}
 #shell #lobby #auto-join:hover:not(:disabled){transform:translateY(-2px);box-shadow:inset 0 2px #fff8,0 6px 0 #997046,0 15px 32px #07122466!important}
 #shell #collection-panel :is(.collection-card,.store-card):hover{border-color:#edd9b2b3!important;box-shadow:inset 0 1px #fff3,0 3px 0 #061b2c66,0 7px 18px #020f2444!important}
 #shell :is(.mode-card,.room-row,.solo-world-card):hover{border-color:#d9cfaa80}
 #shell :is(.settings-group,.ui-details)>summary:hover{color:#ffe3ac;background:#ffffff06}
}
@media(orientation:landscape) and (max-height:650px){
 #shell #collection-panel .collection-dialog{grid-template-rows:auto minmax(0,1fr)}
 #shell #collection-panel .collection-header{height:auto;min-height:60px;padding:8px 10px 6px}
 #shell :is(.dialog,.collection-dialog,.settings-dialog,.expansion-dialog,.admin-dialog,.photo-dialog){border-radius:16px!important}
 #shell #lobby :is(.dock-button,.ranked-shortcut,.profile-plaque,.career-strip>button,#collection-open,#modes-open){border-radius:12px}
 #shell #lobby .dock-icon{width:28px;height:28px;min-width:28px;border-radius:8px}
 #shell #collection-panel :is(.collection-footer,.store-footer){padding:6px 8px;gap:6px;border-radius:10px}
 #shell #collection-panel :is(.collection-card,.store-card){border-radius:12px!important}
 #shell .room-row{min-height:72px;padding:10px 12px}
 #shell .world-preview{height:70px}
 #shell #mode-cards .mode-card{padding:12px;min-height:120px}
 #shell #mode-cards .mode-card .mode-icon{width:62px;height:36px}
 #shell #collection-panel #store-layout .store-footer:not(:has(.store-item-details[open])) #store-budget-note{flex:0 1 auto;order:3}
 #shell #collection-panel #store-layout .store-footer:not(:has(.store-item-details[open])) #store-slot-note{flex:1 1 320px;order:4;min-width:0}
 #shell #collection-panel #store-layout #store-inspect{min-height:0}
 #shell #collection-panel #store-layout #store-inspect #store-preview{min-height:0;height:0;flex:1 1 0}
 #shell #collection-panel #store-layout #store-inspect-label{font-size:9px;line-height:1.3;margin:2px 0;flex:none}
 #shell #collection-panel #store-layout #store-cards[data-view=row]{min-height:0!important}
 #shell #collection-panel #store-layout #store-cards[data-view=row] canvas{min-height:0;flex:1 1 60px}
}
@media(orientation:landscape) and (max-height:450px){
 #shell #account-panel:not(.keyboard-panel) .account-login-column{grid-template-columns:minmax(0,1fr) 170px;column-gap:14px}
 #shell #account-panel:not(.keyboard-panel) .guest-save-note{font-size:12px!important;line-height:1.4;padding:7px 10px;margin:3px 0 8px}
 #shell #account-panel:not(.keyboard-panel) .account-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px 10px;align-content:start}
 #shell #account-panel:not(.keyboard-panel) .account-form>label[for=account-email]{grid-column:1;grid-row:1}
 #shell #account-panel:not(.keyboard-panel) #account-password-label{grid-column:2;grid-row:1}
 #shell #account-panel:not(.keyboard-panel) .account-form>.account-input{grid-column:1;grid-row:2}
 #shell #account-panel:not(.keyboard-panel) #account-password-field{grid-column:2;grid-row:2}
 #shell #account-panel:not(.keyboard-panel) #account-email-error{grid-column:1;grid-row:3}
 #shell #account-panel:not(.keyboard-panel) #account-password-error{grid-column:2;grid-row:3}
 #shell #account-panel:not(.keyboard-panel) #account-login{grid-column:1/-1;grid-row:4;min-height:44px}
 #shell #account-panel:not(.keyboard-panel) .account-form:has(#account-password-field[hidden])>.account-input{grid-column:1/-1}
}
@media(orientation:portrait){
 #shell #lobby .lobby-card{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(140px,1fr) auto 68px;gap:14px}
 #shell #lobby .equipped-stage{grid-column:1/-1;grid-row:1;padding:0;overflow:hidden}
 #shell #lobby .player-dock{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:44px repeat(2,56px);width:calc(100% - 52px);height:auto;gap:8px;padding:0}
 #shell #lobby .player-dock .profile-plaque{grid-column:1/-1}
 #shell #lobby .player-dock :is(.dock-button,.ranked-shortcut){padding:8px;gap:7px;font-size:.9rem}
 #shell #lobby .player-dock .dock-icon{width:26px;min-width:26px;height:26px}
 #shell #lobby .player-dock small{display:none}
 #shell #lobby .loadout-bar{grid-column:1/-1;grid-row:3;grid-template-columns:1fr 1.25fr 1.25fr;gap:8px;padding:0}
 #shell #lobby .loadout-bar small{display:none!important}
 #shell #lobby #modes-open{font-size:.85rem;text-align:center;padding:8px}
 #shell #lobby #collection-open{padding:8px;gap:7px;justify-content:center}
 #shell #lobby #collection-open svg{width:18px;min-width:18px}
 #shell #lobby #auto-join{font-size:1.4rem;padding:8px}
 #shell .room-row{padding:12px;gap:10px}
 #shell #room-list{grid-template-columns:1fr;max-height:none}
 #shell :is(.account-dialog,.rooms-dialog,.party-dialog){border-radius:20px!important}
}
/* Preference controls retain priority over decorative material and motion. */
#shell.high-contrast :is(.dialog,.collection-dialog,.settings-dialog,.expansion-dialog,.admin-dialog,.room-row,.mode-card,.settings-group,.score-card,.leaderboard){background:#081b29!important;border-color:#dcecf1!important;color:#fff}
#shell.high-contrast #collection-panel :is(.collection-card,.store-card){background:#0d293c!important;border-color:#cde5eb!important}
#shell.high-contrast #collection-panel :is(.collection-card,.store-card)[aria-pressed=true]{background:#12362f!important;border:2px solid #fff0bc!important}
#shell[data-ui-depth=off] :is(.collection-card,.store-card,.mode-card,#collection-preview-stage,#store-preview-stage){--depth-x:0deg!important;--depth-y:0deg!important;--light-x:50%!important;--light-y:30%!important}
#shell[data-ui-depth=off] #lobby button{transform:none!important}
#shell[data-ui-depth=off] .small-overlay>:is(.dialog,.collection-dialog,.settings-dialog,.expansion-dialog,.admin-dialog,.photo-dialog,.party-lobby-room,.revive-card){animation:none!important}
@media(prefers-reduced-motion:reduce){
 #shell :is(button,canvas,summary){transition:none!important}
 #shell .small-overlay>*{animation:none!important}
 #shell :is(.collection-card,.store-card,.mode-card,#collection-preview-stage,#store-preview-stage){--depth-x:0deg!important;--depth-y:0deg!important}
 #shell #lobby button{transform:none!important}
}