/* A single phone shell follows Safari's visual viewport, not its tall layout
   viewport. Keyboard mode is a JS class because height media queries stay tall. */
html:has(body.phone-layout){height:100%;overflow:hidden;overscroll-behavior:none}
body.phone-layout{position:fixed;inset:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
.phone-layout #app{position:fixed;inset:auto;left:0;top:var(--view-top,0px);width:100%;height:var(--view-height,100dvh);overflow:hidden}
.phone-layout #depth-ruler,.phone-layout #buddy,.phone-layout .scanlines{display:none}
.phone-layout #lake{height:100%;opacity:.65;transition:opacity .2s ease}
.phone-layout.playing:before{content:'';position:fixed;inset:0;z-index:1;background:#061423b3;pointer-events:none}
.phone-layout .top-controls,.phone-layout.playing .top-controls{top:calc(var(--view-top,0px) + 8px);left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right))}
.phone-layout.playing #sound-button{display:none}
.phone-layout .pixel-icon{width:44px;height:44px;background:#0c2033;border-color:#466477;box-shadow:none}
.phone-layout .hud{top:calc(var(--view-top,0px) + 10px);left:72px;right:max(16px,env(safe-area-inset-right));width:auto;height:40px;transform:none;display:flex;gap:14px;align-items:center;justify-content:flex-end}
.phone-layout .hud-block{background:none;clip-path:none;padding:0;display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.phone-layout .hud-block:first-child{display:none}
.phone-layout .hud-block small{font-size:12px;letter-spacing:1px;margin:0;color:#a9c2ce}
.phone-layout .hud-block strong{font-size:25px}
.phone-layout .hud-center{order:-1;padding:0;margin-right:auto;min-width:0;text-align:left}
.phone-layout .round-boxes{display:none}
.phone-layout .hud-center small{margin:0;font:15px/1.2 var(--mono);letter-spacing:.3px;color:#bad0d9}
.phone-layout.playing #app:has(.question-panel){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;align-items:stretch;gap:16px;padding:68px max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));overflow:hidden}
.phone-layout .question-panel{position:relative;inset:auto;transform:none;width:100%;max-width:520px;max-height:100%;min-height:0;margin:auto;align-self:center;overflow:auto;overscroll-behavior:contain;padding:20px;background:#10263bf5;border:1px solid #48677a;clip-path:none;box-shadow:none;animation:fadein .2s ease-out both;scrollbar-width:thin;scroll-padding:12px}
.phone-layout .prompt-meta,.phone-layout .question-panel .slogan{display:none}
.phone-layout .question-panel h1{font:clamp(24px,6.2vw,29px)/1.2 var(--mono);letter-spacing:0;margin:0;overflow-wrap:anywhere}
.phone-layout .scope{margin-top:12px}.phone-layout .scope summary{font-size:16px;min-height:32px;color:#9ab8c7}
.phone-layout .scope p{font:17px/1.35 var(--mono);padding-top:10px}
.phone-layout .entry-dock{position:relative;inset:auto;transform:none;align-self:end;width:100%;max-width:520px;margin:0 auto;animation:none}
.phone-layout .input-row{display:grid;grid-template-columns:minmax(0,1fr) 76px;gap:8px;align-items:center}
.phone-layout #answer{height:50px;font:23px var(--mono);padding:10px 12px;box-shadow:none;background:#081a2b;border-width:1px}
.phone-layout #answer:focus{border-color:#a2eced;box-shadow:0 0 0 2px #7bdeec22}
.phone-layout .dive-submit{min-height:50px;padding:0 10px;letter-spacing:1px;font-size:21px;box-shadow:inset 0 0 0 2px #d15a78}
.phone-layout .clock,.phone-layout .clock.urgent{position:absolute;right:0;bottom:2px;width:auto;height:32px;font-size:21px;display:flex;align-items:center;gap:2px;background:none;border:0;box-shadow:none;border-radius:0;color:#a9dce6;white-space:nowrap}
.phone-layout .clock:after{content:'s';font-size:16px;color:#8aabba}.phone-layout .clock.urgent{color:#ff9cae}
.phone-layout .time-track{margin-top:7px;height:2px;background:#29475c}
.phone-layout .input-footer{min-height:36px;margin:2px 0 0;padding-right:42px;gap:8px;font-size:13px;justify-content:space-between}
.phone-layout .input-footer button{min-height:36px;text-align:left;min-width:48px}
.phone-layout .feedback{width:100%;max-width:none;margin:0 0 9px;padding:9px 11px;font-size:16px;line-height:1.2;max-height:70px;overflow:auto;box-shadow:none}
.phone-layout .feedback small{font-size:14px}.phone-layout .suggestion-list{bottom:58px;max-height:120px}
.phone-layout.keyboard-open #lake{opacity:.18}
.phone-layout.keyboard-open.playing #app:has(.question-panel){padding-top:62px;padding-bottom:8px;gap:10px}
.phone-layout.keyboard-open .question-panel{padding:14px 16px;animation:none;background:#10263b}
.phone-layout.keyboard-open .question-panel h1{font-size:24px;line-height:1.16}
.phone-layout.keyboard-open .question-panel .scope{display:none}
.phone-layout.keyboard-open .input-footer>span{display:none}
.phone-layout.keyboard-open .input-footer{justify-content:flex-start;min-height:32px}
.phone-layout.keyboard-open .input-footer button{min-height:32px}
.phone-layout.keyboard-open .feedback{max-height:56px;margin-bottom:7px}
.phone-layout .reveal-screen{inset:58px 0 92px;padding:20px 24px;display:flex;align-items:center;justify-content:center;overflow:auto}
.phone-layout .verdict{margin:auto;max-width:460px}.phone-layout .rarity-label{font-size:28px;margin-bottom:16px}.phone-layout .answer-name{font-size:27px;margin-bottom:14px}
.phone-layout .spoilers-locked{margin-top:18px;font-size:14px}.phone-layout .next-dock{position:absolute;bottom:max(18px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);animation:none}
.phone-layout #toast{top:calc(var(--view-top,0px) + var(--view-height,100dvh) - 76px);bottom:auto;max-width:calc(100% - 32px);font-size:16px}
.phone-layout dialog{top:calc(var(--view-top,0px) + var(--view-height,100dvh) / 2);max-height:calc(var(--view-height,100dvh) - 24px);translate:0 -50%}
.phone-layout #modal-content{max-height:calc(var(--view-height,100dvh) - 28px)}
/* Quieter home: a brief introduction and two primary choices. */
.phone-layout .surface-screen{display:flex;flex-direction:column;justify-content:space-between;gap:20px;overflow-y:auto;padding:80px 20px max(12px,env(safe-area-inset-bottom))}
.phone-layout .title-block{position:static;width:100%;margin:0;flex-shrink:0;padding:14px 10px 16px;background:#c8e4eac9;border:1px solid #cfe8ed55}
.phone-layout .wordmark{font-size:clamp(27px,7vw,40px);text-shadow:2px 0 #aee6ed,-1px -1px #e8f7f4,0 3px #a52e5d}
.phone-layout .title-block h2{font-size:17px;letter-spacing:4px;margin:14px 0 12px}
.phone-layout .tagline{font-size:16px;line-height:1.25;letter-spacing:0}
.phone-layout .mobile-break{display:none}.phone-layout .daily-reset{font-size:13px;line-height:1.3;margin-top:12px;max-width:280px;color:#27485d}
.phone-layout .surface-actions{position:static;transform:none;margin:0 auto;width:100%;max-width:480px;flex-shrink:0}
.phone-layout .surface-actions .minor{min-height:40px;margin-bottom:6px;background:#0b2031df;border:1px solid #36576c;padding:8px 15px;font-size:14px}
.phone-layout .pixel-button.wide{min-height:56px;font-size:23px;letter-spacing:2px}
.phone-layout .themed-cta{min-height:52px!important;margin-top:10px;background:#152e42;border-width:1px;box-shadow:none}
.phone-layout .themed-cta span{font-size:20px;letter-spacing:.6px}.phone-layout .themed-cta small{display:none}
.phone-layout .surface-links{flex-wrap:wrap;gap:10px;margin-top:12px}.phone-layout .surface-links button{min-height:40px;font-size:14px;padding:8px 12px;background:#0b2031df}.phone-layout .dive-number{flex-basis:100%;order:3;font-size:12px;margin:4px 0 0}
.phone-layout .credit{position:static;margin:0;font-size:11px;line-height:1.35;color:#9db4c2}.phone-layout .credit nav{margin-top:4px;column-gap:14px;row-gap:0}.phone-layout .credit nav a,.phone-layout .credit nav button{min-height:32px;font-size:12px}
@media(max-width:360px){.phone-layout .hud{left:66px;gap:8px}.phone-layout .hud-center small{font-size:14px}.phone-layout .hud-block small{font-size:10px}.phone-layout .title-block{padding:12px 6px}.phone-layout .surface-screen{padding-inline:16px;gap:16px}.phone-layout .question-panel{padding:16px}.phone-layout .question-panel h1{font-size:25px}}
@media(orientation:landscape) and (max-height:500px){.phone-layout .surface-screen{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-content:start;padding-top:64px}.phone-layout .credit{grid-column:1/-1}.phone-layout .title-block h2{margin:10px 0}.phone-layout .title-block{padding:12px}.phone-layout .surface-actions .minor{min-height:32px}.phone-layout .surface-screen .surface-links{margin-top:6px}.phone-layout .question-panel h1{font-size:24px}.phone-layout .scope{margin-top:4px}}
.phone-intro{display:none}
.phone-layout .tagline,.phone-layout .daily-reset{display:none}
.phone-layout .phone-intro{display:block;font:17px/1.3 var(--mono);color:#27485d;margin:12px 0 0}
@media(max-width:360px){.phone-layout .surface-screen{padding-top:68px;gap:12px}.phone-layout .title-block h2{font-size:15px;letter-spacing:3px}.phone-layout .phone-intro{font-size:16px}}