/* Content-first layouts. Existing game art and state remain unchanged. */ #shell{--ui-space:12px;--ui-focus:#f4d79f;--ui-radius:12px} #shell :is(button,input,select,summary){touch-action:manipulation} #shell :is(button,input,select,summary):focus-visible{outline:3px solid var(--ui-focus);outline-offset:2px} #shell button:active:not(:disabled){filter:brightness(1.13)} #shell button:disabled{cursor:default} #shell :is(.section-switch,.browse-toolbar){display:flex;align-items:center;gap:8px;min-width:0} #shell .section-switch button{min-height:44px;font-size:.85rem;flex:1} #shell .section-switch button[aria-pressed=true]{background:#e5dcc3;color:#193746;border-color:#fff1ce} #shell :is(.ui-details,.settings-group){border:1px solid var(--ui-line);border-radius:12px;background:#193449;min-width:0} #shell :is(.ui-details,.settings-group)>summary{padding:12px;min-height:44px;box-sizing:border-box;cursor:pointer;font-weight:650;line-height:1.4} #shell .ui-details>div{padding:12px} #shell [hidden]{display:none!important} #shell .inline-status{color:#f5d9a5;min-height:0;font-size:.8rem;line-height:1.4} #shell .inline-status:empty{display:none} /* One browsing toolbar, a scrollable gallery and a persistent selected-item row. */ #shell #collection-panel .collection-body{grid-template-columns:220px minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:14px;position:relative} #shell #collection-panel #collection-preview-stage{grid-column:1;grid-row:1} #shell #collection-panel .collection-catalog{grid-column:2;grid-row:1;display:flex;flex-direction:column;overflow:hidden;gap:8px;min-height:0} #shell #collection-panel .browse-toolbar{flex-shrink:0;position:relative;z-index:8;min-height:44px} #shell #collection-panel .browse-toolbar .preview-toggle{display:none} #shell #collection-panel .browse-toolbar :is(button,summary){font-size:.8rem;min-height:44px;height:auto;white-space:nowrap;box-sizing:border-box} #shell #collection-panel .browse-toolbar .view-switch{display:flex;flex:none} #shell #collection-panel .browse-toolbar .catalog-paging{position:static;display:flex;align-items:center;gap:6px;margin:0 0 0 auto;padding:0;flex:none;width:auto} #shell #collection-panel .browse-toolbar .catalog-paging button{width:44px;min-width:44px;padding:8px} #shell #collection-panel .browse-toolbar .catalog-paging span{font-size:.72rem;white-space:nowrap;margin:0} #shell #collection-panel .browse-filters{position:static;min-width:0} #shell #collection-panel .browse-filters>summary{display:flex;align-items:center;justify-content:center;cursor:pointer;padding:8px 12px;background:#234257;border:1px solid #94b5c655;border-radius:10px;list-style:none;color:#e7eef3} #shell #collection-panel .browse-filters[open]>summary{background:#dceae6;color:#173749} #shell #collection-panel .browse-filter-content{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#163246;border:1px solid #8cabbc;border-radius:12px;padding:12px;box-shadow:0 12px 36px #020b19aa;max-height:min(320px,55dvh);overflow:auto;display:grid;gap:10px} #shell #collection-panel .browse-filter-content :is(.catalog-tools,.atelier-store-tools){display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;min-width:0} #shell #collection-panel .browse-filter-content label{flex:1 1 145px;font-size:.8rem;display:flex;flex-direction:column;gap:4px} #shell #collection-panel .browse-filter-content .atelier-owned{flex-direction:row;align-items:center;flex:0 1 auto} #shell #collection-panel .browse-filter-content :is(input[type=search],select){width:100%;min-height:44px;font-size:16px} #shell #collection-panel .browse-filter-content .collection-filters{display:flex;flex-wrap:wrap;flex-direction:row;gap:6px;grid-area:auto;overflow:visible;padding:0;background:none;border:0} #shell #collection-panel .browse-filter-content .collection-filters button{flex:0 1 auto;min-height:44px;padding:8px 12px;font-size:.8rem} #shell #collection-panel .browse-filter-content .store-collections{display:flex;flex-wrap:wrap;gap:6px} #shell #collection-panel .browse-filter-content .filter-reset{justify-self:start;min-height:44px} #shell #collection-panel :is(#collection-cards,#store-cards){flex:1 1 0;min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(174px,1fr));grid-auto-flow:row;gap:10px;overflow:auto;align-content:start;padding:2px 5px 2px 1px;scrollbar-width:thin} #shell #collection-panel :is(#collection-cards,#store-cards)[data-view=row]{grid-template-columns:repeat(8,minmax(70px,1fr));grid-template-rows:minmax(194px,1fr)} #shell #collection-panel .catalog-card-shell{min-height:0;position:relative} #shell #collection-panel .catalog-card-shell>:is(.collection-card,.store-card){display:flex;flex-direction:column;align-items:center;width:100%;height:100%;min-height:174px;padding:36px 6px 8px;gap:2px} #shell #collection-panel :is(.collection-card,.store-card) canvas{flex:1 1 68px;min-height:60px;max-height:none;width:100%;height:60px;object-fit:contain} #shell #collection-panel :is(.collection-card,.store-card) strong{font-size:.8rem;line-height:1.3;min-height:2.6em;flex:none;display:flex;align-items:center;justify-content:center;text-align:center;white-space:normal;overflow:visible;-webkit-line-clamp:unset;max-height:none;margin:0} #shell #collection-panel :is(.collection-card small,.store-card .store-price){font-size:.72rem;line-height:1.4;flex:none;white-space:normal;text-align:center} #shell #collection-panel :is(.collection-footer,.store-footer){display:flex;align-items:center;gap:10px;position:relative;flex:none;min-height:48px;padding:7px 0 0;margin:0;border-top:1px solid var(--ui-line);background:#142b3d;z-index:4;overflow:visible} #shell #collection-panel .selection-summary{font-size:.8rem;line-height:1.35;flex:1;min-width:0;color:#eef2f4} #shell #collection-panel :is(.collection-actions,.store-actions){display:flex;gap:6px;flex:none;margin:0} #shell #collection-panel :is(.collection-actions,.store-actions) button{min-height:44px;font-size:.8rem;padding:8px 12px} #shell #collection-panel #collection-description{display:none} #shell #collection-panel :is(#collection-status,#store-status){font-size:.75rem;line-height:1.4;margin:0;flex:none} #shell #collection-panel :is(#collection-status,#store-status):empty{display:none} #shell #collection-panel .equipped-slots{display:flex;flex-wrap:nowrap;overflow:auto;gap:6px;min-height:44px;flex:none;padding:0;margin:0} #shell #collection-panel .slot-chip{min-height:44px;min-width:max-content;font-size:.75rem;white-space:nowrap;padding:6px 10px} #shell #collection-panel .store-item-details{position:static;flex:none;font-size:.75rem} #shell #collection-panel .store-item-details summary{min-height:44px;display:flex;align-items:center} #shell #collection-panel .store-item-details[open] p{position:absolute;bottom:calc(100% + 6px);left:0;right:0;background:#17364a;border:1px solid #a9c5d3;border-radius:10px;padding:14px;max-height:130px;overflow:auto;margin:0;box-shadow:0 -8px 24px #06152299;z-index:6} #shell #collection-panel .collection-store{grid-template-columns:150px minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:12px;overflow:hidden} #shell #collection-panel .store-sidebar{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:8px;overflow:auto;min-width:0} #shell #collection-panel .store-filters{display:flex;flex-direction:column;gap:6px} #shell #collection-panel .store-filters button{background:#203d51;color:#d5e4ec;border:1px solid #99b9ca44;min-height:44px;font-size:.8rem;padding:8px 10px} #shell #collection-panel .store-filters button[aria-pressed=true]{background:#e0ebe5;color:#143549;border-color:#e8f6ee} #shell #collection-panel .store-layout{grid-column:2;grid-row:1;display:grid;grid-template-columns:190px minmax(0,1fr);gap:12px;overflow:hidden;min-height:0} #shell #collection-panel .store-browser{display:flex;flex-direction:column;gap:8px;overflow:hidden;min-height:0;min-width:0} #shell #collection-panel #powerup-shop{grid-column:2;grid-row:1;overflow:auto} #shell #collection-panel #powerup-shop header{padding:4px 0 8px} #shell #collection-panel #powerup-shop header small{display:none} #shell #collection-panel #powerup-shop header h3{font-size:1.15rem;margin:0 0 6px} #shell #collection-panel #powerup-shop header p{font-size:.85rem;line-height:1.5;margin:0} /* Builder: two working columns; the library is a separate view. */ #shell #collection-panel #snake-builder-panel{grid-template-columns:minmax(160px,.7fr) minmax(0,1.3fr);grid-template-rows:44px minmax(0,1fr);gap:10px} #shell #snake-builder-panel>.section-switch{grid-column:1/-1;grid-row:1} #shell #snake-builder-panel .snake-builder-stage{grid-column:1;grid-row:2;display:block;padding:12px;overflow:hidden} #shell #snake-builder-panel .snake-builder-controls{grid-column:2;grid-row:2;padding:14px;overflow:auto} #shell #snake-builder-panel .snake-builder-library{grid-column:1/-1;grid-row:2;display:none} #shell #snake-builder-panel[data-builder-view=saved] :is(.snake-builder-stage,.snake-builder-controls){display:none} #shell #snake-builder-panel[data-builder-view=saved] .snake-builder-library{display:block} #shell #snake-builder-panel .snake-builder-controls>:is(.menu-pill,h3,p:first-of-type){display:none} #shell #snake-builder-panel .snake-builder-parts{display:grid;grid-template-columns:1fr 1fr;gap:10px} #shell #snake-builder-panel .snake-builder-part select{font-size:.875rem;min-height:44px;width:100%} #shell #snake-builder-panel .snake-builder-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} #shell #snake-builder-panel .snake-builder-actions button{flex:1 1 100px;min-height:44px} #shell #snake-builder-panel .snake-builder-preview-options{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px;overflow:visible} #shell #snake-builder-panel #snake-growth-stages{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} #shell #snake-builder-panel .snake-growth-stage{min-height:110px;display:flex;flex-direction:column;align-items:center;gap:4px} #shell #snake-builder-panel .snake-growth-stage canvas{width:70px;height:78px;object-fit:contain} #shell #snake-builder-panel .snake-growth-stage span{font-size:.75rem} #shell #snake-builder-panel .snake-builder-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px} #shell #snake-builder-panel .snake-build-card{display:grid;grid-template-columns:90px minmax(0,1fr);grid-template-rows:auto auto;padding:10px;gap:8px;border:1px solid var(--ui-line);border-radius:12px} #shell #snake-builder-panel .snake-build-card canvas{width:90px;height:110px;grid-row:1/3;object-fit:contain} #shell #snake-builder-panel .snake-build-card[data-selected=true]{border-color:#f4d69c;background:#29484a} #shell #snake-builder-panel .creator-challenges{margin-top:14px} #shell #collection-book{padding:10px;overflow:auto} #shell #collection-book>h3{font-size:1rem;margin:0 0 6px} #shell #collection-book-summary{font-size:.85rem;margin:0 0 10px} #shell #collection-book .book-section>summary{font-size:.95rem;min-height:44px;padding:12px;background:#203d50;border:1px solid var(--ui-line);border-radius:10px;cursor:pointer} #shell #collection-book .book-section{margin:10px 0} #shell #collection-book .book-grid{padding:10px 0} #shell #collection-book .snake-home-room{grid-template-columns:130px minmax(0,1fr);gap:14px} #shell #snake-home-preview{max-height:150px;width:100%;object-fit:contain} #shell #collection-book .snake-home-room h4{margin:4px 0 8px} #shell #collection-book .snake-home-hint{padding:8px;font-size:.8rem} #shell #photo-panel .photo-dialog{display:grid;grid-template-columns:minmax(0,1fr) 240px;grid-template-rows:54px minmax(0,1fr);gap:14px;overflow:hidden;height:min(680px,100%);max-height:100%} #shell #photo-panel .photo-dialog>.collection-header{grid-column:1/-1;grid-row:1} #shell #photo-panel #photo-canvas{grid-column:1;grid-row:2;max-height:100%;width:100%;height:100%;object-fit:contain;min-height:0} #shell #photo-panel .photo-controls{grid-column:2;grid-row:2;overflow:auto;min-height:0} #shell #photo-panel .photo-choices{display:grid;grid-template-columns:1fr;gap:10px} #shell #photo-panel :is(select,#photo-save){min-height:44px;width:100%;font-size:.85rem} #shell #photo-panel #photo-save{margin-top:12px} /* Progression and launch surfaces. */ #shell .mode-launch{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;background:#142b3ff5;padding:8px;margin-bottom:12px;border:1px solid var(--ui-line);border-radius:12px} #shell .mode-launch #mode-description{grid-column:1;grid-row:1/3;margin:0;align-self:center;line-height:1.4;font-size:.85rem} #shell .mode-launch :is(#mode-play,#mode-practice){grid-column:2;min-height:44px;margin:0;font-size:.8rem;width:auto} #shell #expansion-modes>.ui-details{margin:12px 0} #shell .practice-launch{display:grid;grid-template-columns:1fr 1fr;gap:8px} #shell .solo-world-card{border-radius:12px;border:1px solid var(--ui-line);border-left:4px solid #85bcb0;background:linear-gradient(135deg,#254456,#193347);padding:14px} #shell .solo-world-card h3{font-size:1rem;margin:0 0 4px} #shell .solo-world-card p{font-size:.8rem;line-height:1.45;margin:5px 0} #shell .solo-world-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px} #shell .solo-world-actions button{min-height:44px;line-height:1.3;font-size:.75rem} #shell #stats-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} #shell #achievement-grid .achievement-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:14px} #shell .achievement-card progress{width:100%;height:8px;accent-color:#a5cbb8} #shell .achievement-card .badge-progress{font-size:.78rem;color:#c9dce6} #shell .achievement-card.nearly{border-color:#e3ca92;background:#314947} #shell .achievement-card.earned .badge-progress{color:#f1d399} #shell #expansion-social .social-grid>article:first-child{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px} #shell #expansion-social #friend-code{font-size:1rem;letter-spacing:.05em;padding:8px;margin:0} #shell #expansion-social #friend-code[data-empty=true]{font-size:.8rem;letter-spacing:0} #shell #expansion-social .social-grid>article:first-child p{display:none} #shell #expansion-social .social-grid>article:first-child h3{font-size:.9rem;margin:0} #shell #expansion-social :is(#copy-friend-code,#social-set-name){min-height:44px;font-size:.8rem} #shell .journey-overview{padding:12px!important;gap:8px!important} #shell .journey-overview p{font-size:.8rem;margin:4px 0} #shell .journey-adventures>details{border:1px solid var(--ui-line);border-radius:12px;margin-top:8px;background:#1b374a} #shell .journey-adventures>details>summary{min-height:44px;padding:12px;font-size:.85rem;cursor:pointer} #shell .journey-adventures>details>summary small{display:block;font-weight:400;color:#bcd0dd;margin-top:4px} #shell #season-next{font-size:.9rem;color:#f4d9a5;font-weight:650;margin:8px 0} #shell #pane-season .season-banner{padding:12px} /* Supporting screens and clear action states. */ #shell #settings-general{display:flex;flex-direction:column;gap:10px} #shell #settings-general .setting-tile{width:100%;padding:12px;border:0;margin:0;box-sizing:border-box} #shell #settings-general .setting-label{display:block;margin:12px 0 6px;font-size:.85rem;font-weight:600} #shell .settings-group[open]>summary{border-bottom:1px solid var(--ui-line);color:#f0d6a0} #shell #settings-general .audio-mixer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 14px} #shell #settings-general .audio-mixer label{grid-column:1}#shell #settings-general .audio-mixer input{grid-column:2;align-self:center} #shell #pause #pause-note{padding:12px;border:1px solid #daba7155;border-radius:10px;background:#4a402a66;color:#f9dfab;font-weight:600} #shell #pause #exit{min-height:44px;border:1px solid #b78a8555;border-radius:10px;color:#f3c6bf;margin-top:16px} #shell #rooms-play{min-height:44px;font-size:.9rem;margin:12px 0} #shell .purchase-confirm-card{display:grid;grid-template-columns:100px minmax(0,1fr);gap:12px;padding:22px;max-width:520px} #shell .purchase-confirm-card>canvas{width:100px;height:140px;object-fit:contain;grid-column:1;grid-row:1/5} #shell .purchase-confirm-card>:not(canvas){grid-column:2;margin:0} #shell .purchase-confirm-card h2{font-size:1.15rem} #shell .purchase-confirm-card .purchase-balance{font-size:.8rem;line-height:1.6;color:#c6d8e2} #shell .purchase-confirm-card>div:last-child{grid-column:1/-1;display:flex;justify-content:flex-end;gap:10px} #shell .purchase-confirm-card button{min-height:44px} #shell .party-lobby-room>.section-switch{display:none} #shell #death .result-progress-details{display:contents} #shell #death .result-progress-details>summary{display:none} #shell #death .result-progress-content{display:contents} #shell .party-quick-messages button{color:#e5eff4;background:#234457;border:1px solid #afccda44;min-height:44px;border-radius:9px} #shell #party-chat-input{font-size:16px;min-height:44px} #shell #party-chat-send{min-height:44px} #shell #loading-screen .loading-card{background:linear-gradient(140deg,#223f50,#102a3c);border:1px solid #b8d0dd44;border-radius:22px} #shell #loading-screen h1{font-size:clamp(1.4rem,4vw,2.4rem);letter-spacing:-.02em} #shell #admin-refresh{width:auto;min-height:44px;flex:0 0 auto;font-size:.85rem;padding:8px 18px} #shell #admin-panel :is(table,.admin-table){font-size:.85rem} #shell #toast{max-width:min(520px,70vw);pointer-events:none;font-size:.85rem;line-height:1.4} @media(pointer:coarse){ #shell #hud .skill-button kbd{display:none} #shell #hud .skill-button{gap:2px} } /* Short landscapes need a different hierarchy, not smaller text everywhere. */ @media(orientation:landscape) and (max-height:650px){ #shell #collection-panel .collection-dialog{grid-template-rows:44px minmax(0,1fr);gap:8px} #shell #collection-panel :is(.collection-body,.store-layout){grid-template-columns:minmax(0,1fr);gap:8px} #shell #collection-panel .collection-catalog{grid-column:1} #shell #collection-panel :is(#collection-content,#store-layout)[data-preview=closed]>:is(.collection-preview,.store-detail){display:none} #shell #collection-panel :is(#collection-content,#store-layout)[data-preview=open]{grid-template-columns:160px minmax(0,1fr)} #shell #collection-panel #collection-content[data-preview=open] .collection-catalog{grid-column:2} #shell #collection-panel .browse-toolbar .preview-toggle{display:block} #shell #collection-panel :is(#collection-cards,#store-cards){gap:8px;grid-template-rows:repeat(2,minmax(174px,1fr))} #shell #collection-panel :is(#collection-cards,#store-cards)[data-view=row]{grid-template-columns:repeat(6,minmax(68px,1fr));grid-template-rows:minmax(194px,1fr)} #shell #collection-panel .browse-toolbar{gap:6px} #shell #collection-panel .browse-toolbar :is(button,summary){font-size:.75rem;padding:8px} #shell #collection-panel .browse-toolbar .catalog-paging{gap:4px} #shell #collection-panel .browse-toolbar .catalog-paging span{font-size:.68rem} #shell #collection-panel .collection-store{display:flex;flex-direction:column;gap:6px;overflow:hidden} #shell #collection-panel .store-sidebar{flex:none;display:flex;flex-direction:row;overflow:visible;gap:8px;height:44px;min-height:44px;padding:0} #shell #collection-panel .store-filters{display:flex;flex-direction:row;flex:1;gap:6px;width:100%} #shell #collection-panel .store-filters button{flex:1;min-width:0;font-size:.75rem;white-space:normal} #shell #collection-panel .store-filters button span{display:none} #shell #store-quests{min-height:44px;padding:8px;font-size:.7rem;white-space:nowrap} #shell #collection-panel :is(.store-layout,#powerup-shop){flex:1 1 0;min-height:0} #shell #collection-panel .store-browser{height:100%;min-height:0} #shell #collection-panel #store-preview-stage{overflow:auto} #shell #collection-panel .store-detail canvas{min-height:100px;height:140px;max-height:50%;object-fit:contain} #shell #collection-panel .selection-summary{font-size:.75rem} #shell #collection-panel .store-item-details summary{font-size:.7rem} #shell #collection-panel #snake-builder-panel{grid-template-columns:160px minmax(0,1fr)} #shell #snake-builder-panel .snake-builder-controls{padding:10px} #shell #snake-builder-panel .snake-builder-parts{gap:7px} #shell #photo-panel .photo-dialog{grid-template-columns:minmax(0,1fr) 215px;grid-template-rows:44px minmax(0,1fr);gap:8px} #shell #photo-panel .photo-controls{padding-right:4px} #shell #photo-panel .photo-choices{gap:6px} #shell #photo-panel .photo-choices label{font-size:.75rem} #shell #photo-panel #photo-status{font-size:.75rem} #shell #expansion-panel .expansion-dialog{grid-template-columns:88px minmax(0,1fr)} #shell #expansion-tabs button{font-size:.8rem;padding:8px;min-height:44px} #shell #expansion-panel .mode-cards{grid-template-columns:repeat(2,minmax(0,1fr))} #shell .mode-launch{gap:6px;padding:6px;margin-bottom:8px} #shell .mode-launch #mode-description{font-size:.75rem} #shell .mode-launch :is(#mode-play,#mode-practice){font-size:.75rem;padding:8px} #shell .stat-card{padding:12px} #shell .stat-card b{font-size:1.4rem} #shell #expansion-social .social-grid>article:first-child{grid-template-columns:minmax(0,1fr) auto;gap:6px;padding:10px} #shell #career-panel .journey-overview{padding:8px 12px!important} #shell #career-panel #career-status{margin:0;font-size:.7rem} #shell #career-panel #career-status:empty{display:none} #shell #pane-season :is(h2,h3){font-size:1.1rem;margin:4px 0} #shell #pane-season :is(.season-banner,.season-info){padding:10px} #shell #create-panel .party-lobby-room{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:44px 44px minmax(0,1fr) 44px;gap:8px;height:100%;max-height:100%;padding:12px;overflow:hidden} #shell #create-panel .party-lobby-heading{grid-column:1;grid-row:1;padding:0;gap:8px;min-height:44px} #shell #create-panel .party-lobby-heading h2{font-size:1.1rem} #shell #create-panel .party-code-plaque{margin-left:auto;font-size:.65rem} #shell #create-panel .party-code-plaque strong{font-size:1.1rem} #shell #create-panel .party-invite-area button{min-height:44px;font-size:.8rem} #shell #create-panel .party-lobby-room>.section-switch{display:flex;grid-row:2} #shell #create-panel .party-players{grid-column:1;grid-row:3;overflow:auto;min-height:0;max-height:none;padding:10px;display:block} #shell #create-panel .party-setup{display:contents} #shell #create-panel :is(.party-settings-card,.party-chat){grid-column:1;grid-row:3;min-height:0;max-height:none;overflow:auto;padding:10px;display:none} #shell #create-panel .party-lobby-room[data-party-view=settings] .party-settings-card{display:block} #shell #create-panel .party-lobby-room[data-party-view=chat] .party-chat{display:flex;flex-direction:column;gap:6px} #shell #create-panel .party-lobby-room:not([data-party-view=players]) .party-players{display:none} #shell #create-panel #create-confirm{grid-column:1;grid-row:4;width:100%;margin:0;min-height:44px;height:44px;position:static} #shell #create-panel #party-chat-log{flex:1 1 auto;min-height:50px;overflow:auto} #shell #create-panel .party-chat-heading{display:none} #shell #create-panel .party-quick-messages{display:flex;gap:6px;flex:none;margin:0} #shell #create-panel .party-quick-messages button{flex:1;font-size:.75rem;padding:6px} #shell #create-panel .party-chat-compose{display:flex;gap:8px;flex:none;min-height:44px} #shell #create-panel #party-chat-input{flex:1;min-width:0} #shell #create-panel #party-activity{display:none} #shell #create-panel #party-lobby-error{position:absolute;bottom:64px;left:24px;right:24px;background:#542f38;border:1px solid #e4a2a2;border-radius:10px;z-index:10;padding:8px} #shell #death .results-dialog{display:flex;flex-direction:column;gap:10px;overflow:auto;max-height:100%;padding:14px} #shell #death .results-heading{display:flex;gap:12px;flex:none;min-height:48px} #shell #death .results-heading h2{font-size:1.35rem} #shell #death .result-summary{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px 14px;padding:12px;flex:none} #shell #death .result-summary>h3{display:none} #shell #death .round-score{grid-column:1;grid-row:1/3;align-self:center;margin:0} #shell #death .results-table{grid-column:2;grid-row:1;margin:0} #shell #death .ruby-reward{grid-column:2;grid-row:2;margin:0} #shell #death .result-progress-details{display:block;border:1px solid var(--ui-line);border-radius:10px;flex:none} #shell #death .result-progress-details>summary{display:block;cursor:pointer;padding:12px;min-height:44px;box-sizing:border-box;font-size:.85rem} #shell #death .result-progress-content{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px} #shell #death .result-actions{position:sticky;bottom:-14px;background:#142b3ff5;margin:0 -4px;padding:8px 4px;display:flex;flex-wrap:wrap;gap:6px;flex:none;z-index:5} #shell #death .result-actions button{flex:1;min-width:80px;min-height:44px;font-size:.8rem;padding:8px} #shell #death #revive-note{flex:1 0 100%;font-size:.75rem;margin:0} #shell #death #death-exit{order:6} #shell #death #respawn{order:-1} #shell #hud .leaderboard{max-width:180px} #shell #settings-controls .steering-preview{max-height:130px} #shell #admin-panel :is(.admin-toolbar,.admin-filters){display:flex;flex-wrap:wrap;gap:8px} #shell #admin-panel .admin-table-wrap{overflow:auto} } /* Large text follows natural document flow; navigation remains usable. */ #shell:is([data-text-size=large],[data-text-size=extra]) .back-button{width:auto!important;min-width:max-content!important;flex-shrink:0!important;white-space:nowrap!important;padding-inline:12px!important;font-size:1rem!important} #shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel .collection-dialog{height:100%!important;min-height:0!important;max-height:100%!important;overflow:hidden!important;grid-template-rows:auto minmax(0,1fr)!important} #shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel .collection-header{display:flex!important;flex-wrap:nowrap!important;min-height:54px!important;height:auto!important;gap:8px!important} #shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel .collection-header>:is(h2,.menu-pill,.coin-pill){display:none!important} #shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel .collection-tabs{display:flex!important;overflow-x:auto!important;flex:1!important;gap:6px!important;min-width:0!important;width:auto!important} #shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel .collection-tabs button{font-size:1rem!important;min-height:48px!important;min-width:max-content!important;flex:0 0 auto!important;padding:8px 14px!important} #shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel .collection-body{min-height:0!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important} #shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel .collection-catalog{grid-column:1!important;grid-row:1!important;overflow:hidden!important;min-height:0!important} #shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel .browse-toolbar{flex-wrap:wrap;gap:6px} #shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel .browse-toolbar :is(button,summary){font-size:.9rem!important} #shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel :is(#collection-cards,#store-cards){grid-template-columns:repeat(3,minmax(110px,1fr))!important;grid-template-rows:repeat(3,minmax(200px,1fr))!important} #shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel :is(.collection-card,.store-card) strong{font-size:1rem!important} #shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel :is(.collection-footer,.store-footer){flex-wrap:wrap} #shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel .collection-actions{flex:1} #shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel .collection-actions button{flex:1;font-size:.9rem} #shell.high-contrast :is(.browse-filter-content,.mode-launch,.section-switch button,.settings-group,.ui-details){background:#071521!important;color:#fff!important;border-color:#fff!important} #shell.high-contrast :is(button[aria-pressed=true],button[aria-selected=true]){outline:2px solid #ffe28f;outline-offset:-3px} /* Keyboard mode must take precedence over browsing and party layouts. */ #shell #collection-panel.keyboard-panel .browse-toolbar{display:block!important;position:static!important} #shell #collection-panel.keyboard-panel .browse-toolbar>:not(.browse-filters){display:none!important} #shell #collection-panel.keyboard-panel .browse-filters>summary{display:none!important} #shell #collection-panel.keyboard-panel .browse-filter-content{position:static!important;display:block!important;max-height:none!important;padding:0!important;border:0!important;box-shadow:none!important} #shell #collection-panel.keyboard-panel .browse-filter-content>:not(.catalog-tools):not(.atelier-store-tools){display:none!important} #shell #create-panel.keyboard-panel :is(.party-lobby-room>.section-switch,.party-players,.party-settings-card,#create-confirm,.party-quick-messages,#party-chat-log){display:none!important} #shell #create-panel.keyboard-panel .party-setup{display:block!important} #shell #create-panel.keyboard-panel .party-chat{display:block!important;padding:0!important;overflow:visible!important} #shell #create-panel.keyboard-panel .party-chat-compose{display:flex!important;gap:8px} #shell #create-panel.keyboard-panel #party-chat-input{flex:1;min-width:0} @media(prefers-reduced-motion:reduce){#shell *,#shell *::before,#shell *::after{scroll-behavior:auto!important;transition:none!important}} #shell #collection-panel .browse-toolbar>.preview-toggle{flex:0 0 auto;width:auto;max-width:100px} #shell #collection-panel .browse-filters{flex:0 0 auto;width:auto} #shell #collection-panel .browse-toolbar>.view-switch{width:auto} #shell #collection-panel .browse-toolbar>.view-switch button{flex:0 0 auto;width:auto} #shell #collection-panel :is(.collection-actions,.store-actions){width:auto;flex:0 0 auto} #shell #collection-panel :is(.collection-actions,.store-actions) button{width:auto;flex:0 0 auto} #shell #collection-panel .selection-summary{display:block} #shell #snake-builder-panel .snake-builder-controls{display:grid;grid-template-rows:minmax(0,1fr) auto auto;overflow:hidden;gap:8px} #shell #snake-builder-panel .builder-edit-fields{overflow:auto;min-height:0;padding-right:4px;display:flex;flex-direction:column;gap:8px} #shell #snake-builder-panel .builder-edit-fields>:is(.menu-pill,h3,p:first-of-type){display:none} #shell #snake-builder-panel .snake-builder-actions{margin:0} #shell #snake-builder-panel #snake-builder-status{margin:0;font-size:.75rem} #shell #snake-builder-panel #snake-builder-status:empty{display:none} #shell #snake-builder-panel[data-builder-view=saved] .snake-builder-controls{display:none} #shell .tutorial-navigation{display:flex;align-items:center;gap:12px;margin:10px 0} #shell .tutorial-navigation button{width:auto;min-height:44px;flex:1} #shell #tutorial .tutorial-steps{display:block;margin:8px 0} #shell #tutorial .tutorial-steps article{padding:14px;text-align:left;display:grid;grid-template-columns:44px 1fr;gap:6px 12px} #shell #tutorial .tutorial-steps article>b{grid-row:1/3} #shell #tutorial .tutorial-steps article h3{font-size:1.1rem;margin:0} #shell #tutorial .tutorial-steps article p{grid-column:2;font-size:.9rem;line-height:1.5;margin:0} #shell #tutorial .tutorial-dialog{max-width:620px} #shell #tutorial #tutorial-title{font-size:1.4rem;margin:10px 0} #shell #tutorial :is(#tutorial-practice,#tutorial-play){min-height:44px;font-size:.85rem;margin:6px 0 0} @media(orientation:landscape) and (max-height:450px){ #shell #tutorial .tutorial-dialog{padding:12px 18px;display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;overflow:auto;max-height:100%} #shell #tutorial #tutorial-back{grid-column:1;justify-self:start} #shell #tutorial .tutorial-dialog>small{grid-column:2;align-self:center;font-size:.7rem;text-align:right} #shell #tutorial #tutorial-title{grid-column:1/-1;font-size:1.25rem;margin:0} #shell #tutorial .tutorial-steps{grid-column:1/-1;margin:0} #shell #tutorial .tutorial-navigation{grid-column:1/-1;margin:0} #shell #tutorial #tutorial-practice{grid-column:1;grid-row:5} #shell #tutorial #tutorial-play{grid-column:2;grid-row:5} } #shell #account-modes{margin:0 0 12px;width:100%} #shell #account-modes button{min-height:44px;padding:8px;font-size:.8rem;border:1px solid var(--ui-line);background:#244255;color:#d9e7ee} #shell #account-modes button[aria-pressed=true]{color:#17394b;background:#e5dcc3} #shell #account-panel .account-divider{display:none} #shell #account-panel .account-links:has(button:not([hidden])){margin:8px 0} #shell #account-panel .account-links:not(:has(button:not([hidden]))){display:none} #shell #account-panel #account-facebook{display:none} #shell #account-panel .account-form[aria-busy=true] .account-submit{opacity:.7} @media(orientation:landscape) and (max-height:450px){ #shell #account-panel .account-login-column{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(140px,1fr);grid-template-rows:auto auto auto;gap:8px 18px;width:100%} #shell #account-modes{grid-column:1/-1;grid-row:1;margin:0} #shell #account-panel .account-form{grid-column:1;grid-row:2/5} #shell #account-panel .account-status{grid-column:2;grid-row:2;font-size:.8rem} #shell #account-panel .account-links{grid-column:2;grid-row:3} #shell #account-panel .guest-button{grid-column:2;grid-row:4} #shell #account-panel .account-intro{display:none} #shell #account-panel .account-heading{margin-bottom:8px} } #shell #account-panel.keyboard-panel #account-modes{display:none!important} #shell #account-panel.keyboard-panel .account-form:has(#account-password-field[hidden]){grid-template-columns:1fr} #shell #account-panel.keyboard-panel .account-form>label{display:none!important} #shell #settings-general>.settings-group{width:100%;min-width:0;flex:none;align-self:stretch} #shell #settings-general>.settings-group>summary{width:100%;font-size:.95rem;background:transparent;border:0;color:#dce8ef} #shell #settings-panel #settings-guide{display:flex;flex-direction:column;gap:8px} #shell #settings-panel .guide-step{border:1px solid var(--ui-line);border-radius:12px;background:#193448;flex:none;width:100%} #shell #settings-panel .guide-step>summary{display:list-item;min-height:44px;padding:12px;font-size:.9rem;cursor:pointer;background:transparent;color:#dce8ef} #shell #settings-panel .guide-step>article{border:0;background:none;margin:0;display:grid;grid-template-columns:54px 1fr;gap:8px 14px;padding:12px} #shell #settings-panel .guide-step img{width:48px;height:48px;object-fit:contain} #shell #settings-panel .guide-step p{grid-column:2;font-size:.85rem;margin:0} #shell #settings-panel .control-demo{position:relative;touch-action:none;max-height:130px;height:130px;border:1px dashed #99b9c966;border-radius:12px;overflow:hidden;cursor:crosshair} #shell #settings-panel #control-snake-preview{height:100%;max-height:110px;width:65%;object-fit:contain;opacity:.6} #shell #settings-panel #control-demo-icon{display:none} #shell .control-direction{position:absolute;left:50%;top:40%;font-size:34px;color:#f4d69c;transform-origin:center;line-height:1;pointer-events:none} #shell .control-test-hint{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:.72rem;color:#d2e4ec;pointer-events:none} #shell #settings-panel .control-instructions{padding:12px} #shell #settings-panel .control-instructions h3{font-size:.95rem;margin:8px 0} #shell #settings-panel .control-instructions p{font-size:.8rem;line-height:1.45;margin:0} #shell #loading-screen .loading-title{font-size:clamp(1.4rem,4vw,2.4rem);letter-spacing:-.025em;text-shadow:none} #shell #loading-screen .loading-card{width:min(420px,84vw);padding:24px} #shell #loading-screen .loading-card img{width:86px;height:86px;object-fit:contain} #shell #loading-screen #loading-note{font-size:.9rem;line-height:1.5} #shell #loading-screen progress{accent-color:#e5c389;height:8px;border:0} #shell #lobby .menu-panel-toggle{border:1px solid #b3cedb66;box-shadow:0 3px 10px #06132266} #shell #lobby .menu-panel-toggle[aria-expanded=true]{background:#1b3a4ddd!important;color:#d6e7ec} #shell #lobby .menu-panel-toggle[aria-expanded=false]{background:#e2dbc4!important;color:#163749;border-color:#fff0ca} #shell #name-form #name-status{line-height:1.45;font-size:.8rem} #shell #name-form input[aria-invalid=true],#shell input[aria-invalid=true]{border-color:#f4aaa1;outline-color:#f4aaa1} #shell #revive-offer .revive-card{padding:18px;max-height:calc(100dvh - 24px);overflow:auto} #shell #revive-offer #revive-score{font-size:1rem;color:#f3dbab;margin:8px 0} #shell #revive-offer #revive-remaining{font-size:.85rem;color:#c4d8e3;margin:8px 0 0} #shell #revive-accept{min-height:48px} #shell #hud #connection-alert{top:70px;max-width:min(350px,42vw);padding:8px 12px;font-size:.8rem;line-height:1.4;pointer-events:none;background:#263e4df2;border:1px solid #d0bf9255;border-radius:10px} #shell #spectator-bar{background:#142e42f2;border:1px solid var(--ui-line);border-radius:12px;gap:8px;padding:8px;max-width:calc(100vw - 32px);flex-wrap:wrap} #shell #spectator-bar button{min-height:44px;font-size:.8rem} #shell #spectator-label{color:#f3d9a4;letter-spacing:.08em;font-size:.75rem} #shell #admin-panel .admin-section-title{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px} #shell #admin-panel .admin-sort{font-size:.8rem;display:flex;align-items:center;gap:8px;min-width:0} #shell #admin-panel .admin-sort select{min-height:44px;max-width:100%} #shell #admin-panel .admin-pagination{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;position:sticky;bottom:0;background:#183347} #shell #admin-panel .admin-pagination button{min-height:44px;width:auto;padding:8px 16px} #shell #admin-panel .admin-member{overflow-wrap:anywhere;min-width:0} @media(orientation:landscape) and (max-height:650px){ #shell #snake-builder-panel .builder-edit-fields{display:grid;grid-template-columns:85px minmax(0,1fr);grid-auto-rows:max-content;align-content:start;gap:6px 8px} #shell #snake-builder-panel .builder-edit-fields>*{grid-column:1/-1} #shell #snake-builder-panel .builder-edit-fields>label[for=snake-builder-name]{grid-column:1;align-self:center;font-size:.75rem} #shell #snake-builder-panel #snake-builder-name{grid-column:2;min-height:44px;font-size:.85rem} #shell #snake-builder-panel .snake-builder-parts{margin:0;gap:6px 8px} #shell #snake-builder-panel .snake-builder-part{gap:4px} #shell #snake-builder-panel .snake-builder-part select{font-size:.8rem} #shell #career-panel #pane-season .season-banner{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;padding:10px 14px;min-height:0} #shell #career-panel #season-number{grid-column:1;grid-row:1;font-size:.65rem} #shell #career-panel #season-name{grid-column:1;grid-row:2;font-size:1.1rem} #shell #career-panel #season-dates{grid-column:1;grid-row:3;margin:0;font-size:.75rem} #shell #career-panel #season-xp{grid-column:2;grid-row:1;font-size:.85rem} #shell #career-panel #season-next{grid-column:2;grid-row:2;font-size:.8rem;margin:0} #shell #career-panel #season-bar{grid-column:2;grid-row:3;margin:0;height:8px;align-self:center} #shell #career-panel #season-milestones{grid-column:1/-1;grid-row:4;font-size:.65rem;margin:4px 0 0} #shell #settings-panel .control-settings{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:max-content;gap:10px} #shell #settings-panel #steering-options{grid-column:1;grid-row:1;display:grid;grid-template-columns:1fr 1fr;gap:6px} #shell #settings-panel #steering-options button{min-height:64px;font-size:.85rem} #shell #settings-panel .control-instructions{grid-column:2;grid-row:1/3;position:static} #shell #settings-panel .control-settings fieldset{grid-column:auto;grid-row:auto;margin:0;padding:10px} #shell #settings-panel .control-settings .segmented button{min-height:44px} #shell #lobby .dock-button small{display:none} #shell #lobby .career-strip>button{padding-block:9px} #shell #main-topbar .game-wordmark{letter-spacing:-.04em} #shell #revive-offer .revive-art{height:110px;min-height:0;margin:4px 0} #shell #revive-offer #revive-snake{height:100%;max-height:110px;object-fit:contain} #shell #revive-offer #revive-title{font-size:1.3rem;margin:4px 0} #shell #revive-offer .revive-card{width:min(520px,92vw)} } #shell #collection-book .book-section-count{float:right;color:#b7d0de;font-size:.8rem;margin-left:14px} #shell #fullscreen-help .fullscreen-help-card{max-height:calc(100dvh - 24px);overflow:auto;padding:18px;max-width:720px} #shell #fullscreen-help #fullscreen-help-close{position:sticky;bottom:0;min-height:44px} #shell #rotate-screen .rotate-card{padding:24px max(20px,env(safe-area-inset-left));max-width:min(420px,calc(100vw - 32px))} #shell #rotate-screen .rotate-note{font-size:.9rem;line-height:1.5} #shell #collection-panel #collection-views button,#shell #collection-panel #store-views button{color:#d7e6ee!important;background:#1c3a4d!important;opacity:1!important;-webkit-text-fill-color:currentColor;text-shadow:none!important} #shell #collection-panel #collection-views button[aria-pressed=true],#shell #collection-panel #store-views button[aria-pressed=true]{color:#17394b!important;background:#e1ece6!important;border-color:#f2fff8!important} #shell #collection-panel .store-category{display:none;min-height:44px;font-size:.8rem;padding:8px;width:130px;flex:0 0 130px} #shell #collection-panel .powerup-category-row{display:flex;align-items:center;gap:12px;margin-bottom:12px;font-size:.85rem} #shell #collection-panel .powerup-category-row button{min-height:44px;width:auto} @media(orientation:landscape) and (max-height:650px){ #shell #collection-panel .store-sidebar{display:none} #shell #collection-panel .store-category{display:block} #shell #collection-panel #store-layout .preview-toggle{display:none} #shell #collection-panel #store-layout[data-preview=open]{grid-template-columns:minmax(0,1fr)} #shell #collection-panel #store-preview-stage{display:none} #shell #collection-panel #store-layout .store-browser{grid-column:1} #shell #collection-panel #store-cards{grid-template-rows:repeat(2,minmax(174px,1fr))} } #shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel :is(#collection-cards,#store-cards){grid-template-columns:repeat(2,minmax(180px,1fr))!important;grid-template-rows:repeat(4,minmax(132px,1fr))!important} #shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel .catalog-card-shell>:is(.collection-card,.store-card){display:grid!important;grid-template-columns:70px minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr) auto!important;min-height:132px!important;gap:4px!important;padding:10px 8px!important} #shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel :is(.collection-card,.store-card) canvas{grid-column:1;grid-row:1/3;width:70px;height:96px;min-height:0} #shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel :is(.collection-card,.store-card) strong{grid-column:2;grid-row:1;min-height:0;padding:20px 0 0;text-align:left;justify-content:flex-start;font-size:1rem!important} #shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel :is(.collection-card small,.store-card .store-price){grid-column:2;grid-row:2;text-align:left;font-size:.8rem!important} #shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel .card-badge{display:none} #shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel .selection-summary{font-size:.9rem!important} #shell:is([data-text-size=large],[data-text-size=extra]) #account-panel .account-heading small{display:none} #shell:is([data-text-size=large],[data-text-size=extra]) #account-panel .account-login-column{display:flex;flex-direction:column;gap:12px} #shell:is([data-text-size=large],[data-text-size=extra]) #account-panel #account-modes{display:flex;flex-wrap:nowrap;overflow-x:auto;flex:none} #shell:is([data-text-size=large],[data-text-size=extra]) #account-panel #account-modes button{white-space:nowrap;font-size:1rem!important;min-width:max-content;min-height:48px;flex:1} #shell:is([data-text-size=large],[data-text-size=extra]) #account-panel .account-form{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;width:100%;flex:none} #shell:is([data-text-size=large],[data-text-size=extra]) #account-panel .account-form>label[for=account-email]{grid-column:1;grid-row:1} #shell:is([data-text-size=large],[data-text-size=extra]) #account-panel #account-password-label{grid-column:2;grid-row:1} #shell:is([data-text-size=large],[data-text-size=extra]) #account-panel .account-form>.account-input{grid-column:1;grid-row:2} #shell:is([data-text-size=large],[data-text-size=extra]) #account-panel #account-password-field{grid-column:2;grid-row:2} #shell:is([data-text-size=large],[data-text-size=extra]) #account-panel #account-login{grid-column:1/-1;grid-row:3;min-height:48px} #shell:is([data-text-size=large],[data-text-size=extra]) #account-panel .account-status{font-size:.9rem!important;line-height:1.4} #shell:is([data-text-size=large],[data-text-size=extra]) #account-panel .account-form:has(#account-password-field[hidden])>.account-input{grid-column:1/-1} #shell:is([data-text-size=large],[data-text-size=extra]) #account-panel.keyboard-panel .account-form>.account-input{grid-row:1!important} #shell:is([data-text-size=large],[data-text-size=extra]) #account-panel.keyboard-panel #account-login{grid-row:2!important} #shell #account-panel.keyboard-panel[data-keyboard-compact=true] .account-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto!important;align-items:center} #shell #account-panel.keyboard-panel[data-keyboard-compact=true] .account-form .account-input{grid-row:1!important;min-width:0} #shell #account-panel.keyboard-panel[data-keyboard-compact=true] #account-login{grid-column:3!important;grid-row:1!important;font-size:14px!important;max-width:140px;line-height:1.25;padding:8px} #shell #account-panel.keyboard-panel[data-keyboard-compact=true] .account-form:has(#account-password-field[hidden]){grid-template-columns:minmax(0,1fr) auto!important} #shell #account-panel.keyboard-panel[data-keyboard-compact=true] .account-form:has(#account-password-field[hidden]) #account-login{grid-column:2!important} #shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel :is(#collection-cards,#store-cards) canvas{height:96px!important;min-height:96px!important;max-height:96px!important;width:70px!important;flex:none!important} /* Item inspection is its own view, with room for artwork and a reachable action. */ #shell #collection-panel .store-browser:has(.store-item-details[open])>:is(.browse-toolbar,#store-cards,#store-empty){display:none} #shell #collection-panel .store-footer:has(.store-item-details[open]){flex:1 1 0;min-height:0;flex-direction:column;align-items:stretch;gap:8px;border:0;padding:0} #shell #collection-panel .store-footer:has(.store-item-details[open]) .selection-summary{flex:none;font-size:1rem} #shell #collection-panel .store-item-details[open]{display:flex;flex-direction:column;flex:1 1 0;min-height:0} #shell #collection-panel .store-item-details[open] summary{flex:none;align-self:flex-start;min-height:44px;padding:8px 12px;border:1px solid #94b5c655;border-radius:10px;background:#234257} #shell #collection-panel .store-item-details[open] p{position:static;flex:1 1 auto;min-height:0;max-height:none;overflow:auto;margin:8px 0 0;padding:12px;font-size:.85rem;line-height:1.55;box-shadow:none} #shell #collection-panel .store-footer:has(.store-item-details[open]) .store-actions{flex:none;justify-content:flex-end} @media(orientation:landscape) and (max-height:650px){ #shell #collection-panel #store-layout:has(.store-item-details[open]){display:grid;grid-template-columns:160px minmax(0,1fr)} #shell #collection-panel #store-layout:has(.store-item-details[open]) #store-preview-stage{display:flex;flex-direction:column;align-items:center;min-height:0;padding:10px} #shell #collection-panel #store-layout:has(.store-item-details[open]) .store-browser{grid-column:2} #shell #collection-panel #store-layout:has(.store-item-details[open]) #store-preview{flex:1 1 0;min-height:80px;max-height:none;width:100%;height:100%;object-fit:contain} #shell #collection-panel #store-layout:has(.store-item-details[open]) #store-edition-label{display:none} #shell #collection-panel #store-layout:has(.store-item-details[open]) #store-detail-name{font-size:.85rem;margin:6px 0 0;text-align:center} } #shell #collection-panel :is(.store-actions,.collection-actions){flex-direction:row;align-items:center;min-width:0;max-width:none} #shell #collection-panel :is(.store-actions,.collection-actions) button{min-height:44px!important;height:auto!important} #shell #collection-panel .store-footer:has(.store-item-details[open]) .store-actions{align-self:stretch;margin-top:auto} #shell #collection-panel .store-item-details[open]>summary::before{display:none} #shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel .collection-store{grid-row:2;min-height:0;height:100%} #shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel .store-footer:has(.store-item-details[open]){flex-wrap:nowrap} #shell #collection-panel .store-item-details[open] p{max-height:clamp(64px,calc(100dvh - 250px),320px);box-sizing:border-box;flex:none} /* Both lobby columns share the same outer edges. Distribute the available height across the five left actions instead of centering a shorter stack. */ @media(orientation:landscape){ #shell #lobby .player-dock{justify-content:flex-start} #shell #lobby .player-dock>:is(.profile-plaque,.dock-button,.ranked-shortcut){flex:1 1 0;height:auto;margin-block:0} } /* A shared visual hierarchy: mint identifies a selection; warm gold invites the next action. Keep these tokens separate from seasonal scene colors. */ #shell{ --ui-selected:#d8eee5;--ui-selected-ink:#153d3a;--ui-selected-edge:#9cc9b6; --ui-surface-soft:#1a3346;--ui-control-radius:10px;--ui-card-radius:14px; } #shell :is(.settings-tabs,.career-tabs,.expansion-tabs,.collection-tabs,#account-modes,.section-switch){ background:#0f2435;border:1px solid var(--ui-line);border-radius:12px;padding:4px;gap:4px; } #shell :is(.settings-tabs,.career-tabs,.expansion-tabs,.collection-tabs,#account-modes,.section-switch) button{ border-radius:8px;border:1px solid transparent;box-shadow:none;text-shadow:none;font-weight:600; } #shell #settings-panel .settings-tabs button[aria-selected=true], #shell :is(.career-tabs,.expansion-tabs) button[aria-selected=true], #shell #collection-panel .collection-tabs button[aria-selected=true], #shell #account-modes button[aria-pressed=true], #shell .section-switch button[aria-pressed=true]{ background:var(--ui-selected);color:var(--ui-selected-ink);border-color:#ecfff5; box-shadow:inset 0 -2px var(--ui-selected-edge);font-weight:700; } #shell #account-modes button:not([aria-pressed=true]), #shell .section-switch button:not([aria-pressed=true]){background:transparent;color:#c7d9e4} #shell :is(#collection-panel,#create-panel) .section-switch{padding:0;border:0;background:transparent} #shell :is(#collection-panel,#create-panel) .section-switch button{background:#1a3346!important;color:#c7d9e4!important;border-color:var(--ui-line)!important;box-shadow:none!important;backdrop-filter:none} #shell :is(#collection-panel,#create-panel) .section-switch button[aria-pressed=true]{background:var(--ui-selected)!important;color:var(--ui-selected-ink)!important;border-color:#ecfff5!important;box-shadow:inset 0 -2px var(--ui-selected-edge)!important} #shell :is(.panel-heading,.party-lobby-heading) small{color:#afd0c8;letter-spacing:.1em;font-weight:600} #shell :is(.collection-header,.panel-heading,.party-lobby-heading) h2{line-height:1.2;letter-spacing:-.02em} #shell :is(.secondary,.text-button,.back-button){border-radius:var(--ui-control-radius);font-weight:600} #shell :is(.dialog,.expansion-dialog,.party-lobby-room){background:linear-gradient(145deg,#1b3447,#112638)} #shell :is(.setting-tile,.party-choice,.mode-card,.solo-world-card,.achievement-card,.social-grid article,.guide-grid article,.quest,.quest-card,.party-settings-card,.party-players,.party-chat,.control-preview,.admin-grid>section){border-radius:var(--ui-card-radius)} #shell :is(.settings-group,.guide-step,.book-section){border-radius:var(--ui-card-radius)} #shell .settings-group[open]>summary{color:#d8eee5} #shell :is(.settings-group,.guide-step)>summary{font-weight:600} #shell :is(.settings-group,.guide-step,.book-section)>summary:focus-visible{outline-offset:-3px} #shell :is(.inline-status,.feature-note,.career-note,.party-note,.account-note){line-height:1.5} #shell :is(.dialog,.expansion-dialog,.party-lobby-room) :is(input,select,textarea){border-radius:var(--ui-control-radius)} #shell :is(.primary,.secondary,.back-button,.text-button,summary){scroll-margin:12px} #shell :is(.primary,.secondary,.back-button):disabled{filter:saturate(.4);cursor:not-allowed} #shell #expansion-panel .mode-card[aria-pressed=true]{background:linear-gradient(145deg,#294a45,#19383d);border-color:var(--ui-selected-edge);box-shadow:inset 0 0 0 1px #9cc9b633} #shell #expansion-panel .mode-card[aria-pressed=true] .mode-icon{background:var(--ui-selected);color:var(--ui-selected-ink)} #shell #collection-panel :is(.collection-card,.store-card)[aria-pressed=true]{background:linear-gradient(145deg,#294c46,#1c3a40)!important;border-color:var(--ui-selected-edge)!important;box-shadow:inset 0 0 0 1px #9cc9b633!important} #shell #collection-panel :is(.browse-filters>summary,.preview-toggle){border-radius:var(--ui-control-radius);font-weight:550} #shell #collection-panel .preview-toggle{background:#1a3346!important;color:#c7d9e4!important;border-color:var(--ui-line)!important;box-shadow:none!important;backdrop-filter:none} #shell #collection-panel .preview-toggle[aria-expanded=true]{background:#294b49!important;color:#e7f8ef!important;border-color:#90baab!important} #shell #collection-panel .browse-toolbar{gap:6px} #shell #collection-panel :is(.collection-footer,.store-footer){border-radius:0;padding-top:8px;background:#122a3c} #shell #collection-panel .selection-summary{font-weight:600} #shell #collection-panel .store-item-details>summary{padding-inline:8px;color:#c1d5e0} #shell #collection-panel :is(.collection-card strong,.store-card strong){font-weight:600;letter-spacing:0} #shell #collection-panel :is(.collection-card small,.store-price){font-variant-numeric:tabular-nums} #shell #snake-builder-panel .snake-builder-actions{border-top:1px solid var(--ui-line);padding-top:10px} #shell #death .results-heading h2{letter-spacing:-.02em} #shell #death .result-actions .secondary{background:#203c50} #shell #pause #resume{box-shadow:inset 0 1px #fff7,0 4px 16px #0002} @media(hover:hover){ #shell :is(.settings-tabs,.career-tabs,.expansion-tabs,.collection-tabs,#account-modes,.section-switch) button:not([aria-selected=true]):not([aria-pressed=true]):hover{background:#2b4658;color:#fff} #shell :is(.settings-group,.guide-step,.book-section)>summary:hover{background:#29495a} } /* Cap desktop rails together; phone rails use their available height. */ @media(orientation:landscape){ #shell #lobby :is(.player-dock,.career-strip){height:min(100%,440px);align-self:center;box-sizing:border-box} #shell #lobby .player-dock>:is(.profile-plaque,.dock-button,.ranked-shortcut){box-sizing:border-box} #shell #lobby :is(.dock-icon,.feature-icon){color:#c5ded6} #shell #lobby .dock-icon svg{width:24px;height:24px;stroke-width:1.8} #shell #lobby .career-strip .feature-icon svg{width:26px;height:26px;stroke-width:1.8} #shell #lobby .career-strip>button{border-left-width:1px!important} #shell #lobby #collection-open{border-color:#a1c8bb77!important;background:linear-gradient(135deg,#24463ff5,#183d43f0)!important} #shell #lobby #auto-join{letter-spacing:.065em} } @media(orientation:landscape) and (max-height:390px){ #shell #lobby .player-dock{gap:4px} } @media(orientation:landscape) and (max-height:360px){ #shell:not([data-text-size=large]):not([data-text-size=extra]) #lobby .lobby-card{grid-template-rows:minmax(0,1fr) 48px;gap:10px} #shell:not([data-text-size=large]):not([data-text-size=extra]) #lobby .loadout-bar{padding:1px} #shell:not([data-text-size=large]):not([data-text-size=extra]) #lobby .loadout-bar button{min-height:44px} #shell:not([data-text-size=large]):not([data-text-size=extra]) #lobby .player-dock{gap:2px} #shell:not([data-text-size=large]):not([data-text-size=extra]) #lobby .player-dock>:is(.profile-plaque,.dock-button,.ranked-shortcut){min-height:44px} } #shell.high-contrast{--ui-selected:#effff7;--ui-selected-ink:#082a26;--ui-selected-edge:#c5ffdf;--ui-line:#c8e5ed88} #shell.high-contrast #collection-panel :is(.collection-card,.store-card)[aria-pressed=true]{background:#0c302d!important;border-color:#c5ffdf!important;box-shadow:inset 0 0 0 2px #c5ffdf!important} /* Enlarged phone text needs wider rails and one real footer row. The older two-column footer put Play on an implicit, clipped second row. */ @media(orientation:landscape) and (max-height:650px){ #shell:is([data-text-size=large],[data-text-size=extra]) #lobby .lobby-card{grid-template-columns:175px minmax(0,1fr) 155px;grid-template-rows:minmax(0,1fr) 54px} #shell:is([data-text-size=large],[data-text-size=extra]) #lobby .loadout-bar{grid-template-columns:minmax(110px,.8fr) minmax(230px,1.7fr) minmax(140px,1.2fr);grid-template-rows:1fr;padding:0;gap:8px} #shell:is([data-text-size=large],[data-text-size=extra]) #lobby .loadout-bar small{display:none!important} #shell:is([data-text-size=large],[data-text-size=extra]) #lobby .loadout-bar button{height:100%;min-height:44px;padding:6px 8px;line-height:1.2} #shell:is([data-text-size=large],[data-text-size=extra]) #lobby .loadout-bar button span{line-height:1.2;white-space:nowrap} #shell:is([data-text-size=large],[data-text-size=extra]) #lobby .player-dock>button{min-height:44px;padding-block:4px;line-height:1.2} #shell:is([data-text-size=large],[data-text-size=extra]) #lobby .player-dock>button span{line-height:1.2} } @media(orientation:landscape) and (max-height:390px){ #shell:is([data-text-size=large],[data-text-size=extra]) #lobby .lobby-card{grid-template-rows:minmax(0,1fr) 48px;gap:8px} #shell:is([data-text-size=large],[data-text-size=extra]) #lobby .player-dock{gap:2px} } @media(prefers-reduced-motion:reduce){#shell :is(button,summary){transition:none!important}} /* Phone Store keeps its live snake preview beside the cards. Toolbar and actions span both columns so browsing controls retain their touch sizes. */ @media(orientation:landscape) and (max-height:650px){ #shell #collection-panel #store-layout{grid-template-columns:minmax(130px,18vw) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;gap:8px} #shell #collection-panel #store-layout[data-preview=open]{grid-template-columns:minmax(130px,18vw) minmax(0,1fr)} #shell #collection-panel #store-layout[data-preview=closed]{grid-template-columns:minmax(0,1fr)} #shell #collection-panel #store-layout .store-browser{display:contents} #shell #collection-panel #store-layout .browse-toolbar{grid-column:1/-1;grid-row:1} #shell #collection-panel #store-layout .preview-toggle{display:block} #shell #collection-panel #store-layout .store-category{width:110px;flex-basis:110px} #shell #collection-panel #store-layout #store-preview-stage{grid-column:1;grid-row:2;display:flex;flex-direction:column;align-items:center;min-height:0;padding:8px;overflow:hidden} #shell #collection-panel #store-layout[data-preview=closed] #store-preview-stage{display:none} #shell #collection-panel #store-layout #store-preview{flex:1 1 0;min-height:60px;max-height:none;width:100%;height:100%;object-fit:contain} #shell #collection-panel #store-layout #store-edition-label{display:none} #shell #collection-panel #store-layout #store-detail-tag{font-size:.65rem;padding:5px 8px;flex:none} #shell #collection-panel #store-layout #store-detail-name{font-size:.8rem;line-height:1.3;margin:5px 0 0;text-align:center;flex:none} #shell #collection-panel #store-layout :is(#store-cards,#store-empty){grid-column:2;grid-row:2} #shell #collection-panel #store-layout[data-preview=closed] :is(#store-cards,#store-empty){grid-column:1} #shell #collection-panel #store-layout .store-footer{grid-column:1/-1;grid-row:3} #shell #collection-panel #store-layout #store-status{grid-column:1/-1;grid-row:4} #shell #collection-panel #store-layout:has(.store-item-details[open]){grid-template-columns:160px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto} #shell #collection-panel #store-layout:has(.store-item-details[open]) #store-preview-stage{display:flex;grid-column:1;grid-row:1} #shell #collection-panel #store-layout:has(.store-item-details[open]) .store-footer{grid-column:2;grid-row:1} #shell #collection-panel #store-layout:has(.store-item-details[open]) #store-status{grid-column:2;grid-row:2} } @media(orientation:landscape) and (max-height:650px){ /* The selected name and price stay in the footer; give the preview the full\n remaining height when enlarged controls require a second toolbar line. */ #shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel #store-layout:not(:has(.store-item-details[open])) :is(#store-detail-tag,#store-detail-name){display:none} } /* Final phone-space pass: keep content readable without shrinking targets. */ #shell #death .result-summary{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;min-width:0} #shell #death .result-summary>h3{display:none} #shell #death .round-score{grid-column:1;grid-row:1;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:0;min-width:0;text-align:left} #shell #death .round-score strong{font-size:clamp(26px,4.8vw,44px);line-height:1.1;white-space:normal;overflow-wrap:anywhere;font-variant-numeric:tabular-nums;letter-spacing:-.035em;max-width:100%} #shell #death .round-score span{font-size:.7rem;line-height:1.4} #shell #death .results-table{grid-column:1;grid-row:2;width:100%;table-layout:fixed;margin:0;font-variant-numeric:tabular-nums} #shell #death .results-table :is(th,td){overflow-wrap:anywhere;padding-block:4px} #shell #death .ruby-reward{grid-column:1;grid-row:3;margin:0;min-width:0} #shell #death .result-summary .ruby-reward small{white-space:normal} #shell #collection-panel .browse-toolbar .layout-choice{min-height:44px;width:84px;flex:0 0 84px;font-size:.8rem;padding:8px;background:#1c3a4d;color:#dcebe8;border:1px solid var(--ui-line);border-radius:10px} #shell #collection-panel .browse-toolbar .browse-filters>summary{padding-inline:10px} #shell #collection-panel .browse-toolbar .catalog-paging span{max-width:90px;text-align:center} #shell #collection-panel .browse-toolbar .store-category{width:112px;flex-basis:112px} #shell #snake-builder-panel .builder-edit-fields{gap:10px} #shell #snake-builder-panel .snake-builder-parts{order:-2} #shell #snake-builder-panel .snake-builder-part{min-width:0;display:flex;flex-direction:column;gap:4px} #shell #snake-builder-panel .builder-tools{border:1px solid var(--ui-line);border-radius:10px;flex:none;background:#193449} #shell #snake-builder-panel .builder-tools>summary{padding:10px;min-height:44px;font-size:.8rem;line-height:1.4;cursor:pointer;box-sizing:border-box} #shell #snake-builder-panel .builder-tools-body{display:flex;flex-direction:column;gap:10px;padding:10px;border-top:1px solid var(--ui-line)} #shell #snake-builder-panel .builder-tools-body :is(input,select){min-height:44px;font-size:16px;max-width:100%;box-sizing:border-box} #shell #snake-builder-panel .builder-tools-body>.ui-details{flex:none} #shell #snake-builder-panel #snake-builder-price:empty{display:none} #shell #pane-season .season-banner{display:grid;grid-template-columns:minmax(150px,.75fr) minmax(0,1.25fr);gap:18px;padding:16px;align-items:center} #shell #pane-season .season-overview :is(small,h3,p){margin:0 0 6px} #shell #pane-season .season-overview small{font-size:.65rem;letter-spacing:.1em;color:#b9cfdb} #shell #pane-season .season-goal{min-width:0} #shell #pane-season .season-goal .section-eyebrow{font-size:.65rem;color:#bcdad1;letter-spacing:.1em} #shell #pane-season #season-next{font-size:clamp(1rem,2vw,1.3rem);margin:6px 0 10px;line-height:1.35} #shell #pane-season #season-xp{font-size:.75rem;color:#b9cfdb;font-weight:500;display:block;margin-top:6px} #shell #pane-season #season-bar{width:100%;height:8px;display:block;accent-color:#b7dac8} #shell #pane-season .season-all-milestones{margin:10px 0;border:1px solid var(--ui-line);border-radius:10px;background:#193449} #shell #pane-season .season-all-milestones>summary{min-height:44px;padding:10px 12px;box-sizing:border-box;font-size:.8rem;cursor:pointer} #shell #pane-season #season-milestones{display:flex;gap:8px;flex-wrap:wrap;padding:0 12px 12px;margin:0} #shell .settings-group>summary{position:relative;padding-right:14px} #shell .settings-current{display:block;font-weight:400;color:#b8cedb;font-size:.75rem;line-height:1.5;margin:3px 0 0 16px} #shell.high-contrast .settings-current{color:#fff} #shell #hud .signal-controls{width:auto;min-width:64px;padding:0;display:flex;gap:6px;background:transparent;border:0;box-shadow:none} #shell #hud #signal-toggle{min-width:64px;min-height:44px;padding:8px 12px;font-size:.75rem;background:#102235e8;border:1px solid #b7ccdb55;border-radius:10px;color:#e4eef3;pointer-events:auto} #shell #hud .signal-compose{display:flex;align-items:center;gap:6px;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:220px;max-width:50vw;padding:6px;border:1px solid #9ab7c9;border-radius:12px;background:#102235;box-shadow:0 4px 20px #00101a66} #shell #hud .signal-controls[data-open=false] .signal-compose{display:none} #shell #hud .signal-compose :is(select,button){min-height:44px;height:44px;font-size:.8rem} #shell #hud .signal-compose #signal-send{width:auto;min-width:58px} #shell #lobby :is(.dock-button,.ranked-shortcut,.profile-plaque){background:linear-gradient(125deg,#173146ef,#14293ddd);border-color:#b6d1d54a;box-shadow:0 2px 9px #07132126} #shell #lobby .career-strip>button{background:linear-gradient(125deg,#173146ed,#152b3cdc);box-shadow:0 2px 9px #07132126} #shell #lobby .career-strip>button>span:not(.feature-icon){color:#c0d2dc} @media(orientation:landscape) and (max-height:650px){ #shell #snake-builder-panel .snake-builder-controls{padding:8px;gap:6px} #shell #snake-builder-panel .snake-builder-parts{gap:8px 10px} #shell #snake-builder-panel .snake-builder-part{font-size:.75rem;gap:3px} #shell #snake-builder-panel .snake-builder-part select{font-size:.8rem} #shell #snake-builder-panel .snake-builder-actions{gap:6px;flex-wrap:nowrap} #shell #snake-builder-panel .snake-builder-actions button{min-width:0;flex:1 1 0;padding:8px 6px;font-size:.75rem} #shell #pane-season .season-banner{padding:12px;gap:14px} #shell #hud .score-card{min-width:0;max-width:190px;grid-template-rows:auto;column-gap:10px;padding:8px 12px} #shell #hud .score-card strong{grid-row:1;font-size:1.65rem} #shell #hud .score-card>#best{grid-row:1;font-size:.65rem} #shell #hud .run-stats{display:none} #shell #hud .leaderboard[data-size=compact]{width:144px} #shell #hud #boost-meter{width:min(190px,25%);padding:5px 8px;bottom:max(60px,calc(env(safe-area-inset-bottom) + 54px))} } #shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel .browse-toolbar .layout-choice{font-size:.9rem;min-height:48px;width:92px;flex-basis:92px} #shell:is([data-text-size=large],[data-text-size=extra]) #snake-builder-panel .snake-builder-actions{flex-wrap:wrap} #shell #collection-panel.keyboard-panel .browse-toolbar>.layout-choice{display:none!important} #shell #snake-builder-panel #snake-builder-price[data-ready=true]{display:none} #shell #hud #scoreboard-toggle{width:44px;height:44px;right:0;top:0;background:transparent;border:0;padding:13px;box-sizing:border-box} #shell #hud .leaderboard h2{min-height:20px;margin-right:30px} /* Scroll the result details separately from the always-reachable actions. */ #shell #death .results-content{display:contents} @media(orientation:landscape) and (max-height:650px){ #shell #death .results-dialog{height:100%;max-height:100%;overflow:hidden;box-sizing:border-box} #shell #death .results-content{display:flex;flex-direction:column;gap:10px;flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-right:3px} #shell #death .result-summary{overflow:visible;flex:none} #shell #death .result-actions{position:static;margin:0;padding:8px 0 0} #shell #death #revive-note{order:-2} } /* Music off has a visible slash; aria-pressed also drives saved and failed-playback states. */ #sound .sound-off-mark{display:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round} #sound[aria-pressed="false"] .sound-off-mark{display:block} /* Enlarged phone labels need the rail width more than duplicate pictograms. Keep full text and touch targets inside each button at compact heights. */ @media(orientation:landscape) and (max-height:650px){ #shell:is([data-text-size=large],[data-text-size=extra]) #lobby .player-dock .dock-icon{display:none!important} #shell:is([data-text-size=large],[data-text-size=extra]) #lobby .player-dock>button>span:not(.dock-icon){white-space:nowrap;min-width:0} } @media(orientation:landscape) and (min-height:651px){ #shell:is([data-text-size=large],[data-text-size=extra]) #lobby .loadout-bar{grid-template-columns:minmax(150px,.8fr) minmax(260px,1.7fr) minmax(180px,1.2fr);grid-template-rows:1fr} } /* Keep the shared-map Practice option readable and easy to tap on phones. */ #shell #practice-calm-label{display:flex;align-items:center;gap:10px;min-height:44px;margin:10px 0;line-height:1.4;cursor:pointer} #shell #practice-calm{width:44px;height:44px;min-width:44px;min-height:44px;flex:0 0 44px;margin:0;accent-color:var(--ui-focus)} /* Clear identity and save feedback without changing the menu layout. */ #profile-identity{font-size:.65em;opacity:.8;white-space:nowrap} #sound[data-sound-state="muted"]{color:#ffb9ae;background:#452b38;border-color:#e7a39b} #sound[data-sound-state="on"]{color:#baf7d7;border-color:#7fcba7} .progress-help{margin-block:12px;padding:10px 12px;border:1px solid #b6d1d54a;border-radius:12px;background:#10253670} .progress-help summary{cursor:pointer;font-weight:700;min-height:44px;box-sizing:border-box;padding-block:10px} .progress-help p,.builder-storage-note{font-size:.85rem;line-height:1.5} #snake-builder-status[data-state="error"],#career-status[data-state="error"]{color:#ffd1c7} #snake-builder-status[data-state="complete"]{color:#baf7d7}