/* A separate, touch-first title surface. No animation or video is needed at boot. */
body[data-booting]>.shell{visibility:hidden}
#welcome-loading{position:fixed;inset:0;display:grid;place-content:center;text-align:center;background:#070c14;z-index:100;color:#dcefeb;font:16px system-ui;letter-spacing:4px}
#welcome-loading small{margin-top:20px;font-size:12px;letter-spacing:1px;color:#9bb7c1}
.welcome-screen{position:fixed;inset:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:radial-gradient(ellipse at 50% 28%,#163d4655,transparent 58%),#070c14;color:#e5eeee;overflow:auto;overscroll-behavior:contain}
.welcome-screen::backdrop{background:#070c14}.welcome-layout{width:min(100%,600px);min-height:100%;margin:auto;padding:28px max(22px,env(safe-area-inset-right)) 28px max(22px,env(safe-area-inset-left));display:flex;flex-direction:column;justify-content:center;gap:20px;text-align:center}
.welcome-tag{font:10px ui-monospace,monospace;letter-spacing:3px;color:#9db4bf;margin:0}.welcome-screen h1{font-size:clamp(38px,9vw,62px);font-weight:500;letter-spacing:.08em;line-height:1.1;margin:0}.welcome-screen h1 span{display:block;color:#85e2da;font-weight:250}.welcome-screen h2{font-size:27px;font-weight:500;line-height:1.2;margin:0 0 12px}.welcome-screen p{line-height:1.6;color:#b1c6d0;margin:0}.welcome-orbit{width:164px;height:164px;position:relative;margin:0 auto 16px;border:1px solid #426e7c;border-radius:50%;box-shadow:0 0 80px #4fccc010,inset 0 0 50px #4fccc008}.welcome-orbit:before{content:'';position:absolute;inset:18px;border:1px dashed #294751;border-radius:50%}.welcome-orbit:after{content:'';position:absolute;left:calc(50% - 6px);top:-6px;width:12px;height:12px;border-radius:50%;background:#effffd;box-shadow:0 0 18px #9feee9}.welcome-orbit i{position:absolute;left:calc(50% - 7px);top:calc(50% - 7px);width:14px;height:14px;border:1px solid #7bd1d0;border-radius:50%;background:#275359}
.welcome-actions{display:grid;gap:10px;width:100%;max-width:340px;margin:6px auto 0}.welcome-screen button{min-height:48px;padding:13px 18px;border:1px solid #3b5664;border-radius:7px;background:#10212c;font-size:14px;line-height:1.4}.welcome-screen button.primary{background:#8ce2d9;color:#071b21;border-color:#8ce2d9;font-weight:700}.welcome-screen button:hover:not(:disabled){border-color:#8ce2d9;color:#ddffff}.welcome-screen button.primary:hover:not(:disabled){color:#071b21;background:#b4eee8}.welcome-screen button:focus-visible,.welcome-screen input:focus-visible,.welcome-screen canvas:focus-visible{outline:3px solid #a4fff0;outline-offset:4px}.welcome-screen button.subtle{background:transparent;color:#b1c6d0}.welcome-footer{font-size:11px!important;letter-spacing:.6px}.welcome-mode{display:flex;gap:10px;align-items:center;justify-content:center}.welcome-mode span{font-size:11px;color:#9bb5bf}.welcome-mode button{font-size:13px;min-height:44px}.welcome-screen [hidden]{display:none!important}.welcome-settings{text-align:left}.welcome-setting{padding:18px 0;border-bottom:1px solid #243b48}.welcome-setting label{display:flex;justify-content:space-between;gap:12px;font-size:15px;margin-bottom:12px}.welcome-setting input[type=range]{width:100%;min-height:44px;accent-color:#8ce2d9}.welcome-setting p{font-size:12px}.welcome-setting button{width:100%}.welcome-screen .settings-note{font-size:12px;color:#b4cbd3;margin-top:16px;min-height:20px}.practice-layout{width:min(100%,600px);justify-content:flex-start;gap:12px;padding-top:max(18px,env(safe-area-inset-top))}.practice-stage{width:min(100%,calc(48vh * 480 / 680));min-width:180px;margin:auto;position:relative}.practice-stage canvas{width:100%;aspect-ratio:480/680;display:block;border:1px solid #40616d;border-radius:10px;background:#080f19;touch-action:none}.practice-layout h2{font-size:23px;margin-bottom:7px}.practice-layout p{font-size:13px;line-height:1.5}.practice-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.practice-actions button{flex:1;min-width:115px}.practice-status{min-height:20px;font-size:12px!important;color:#9ff0d9!important}.practice-pause{position:absolute;inset:0;display:grid;place-content:center;gap:16px;background:#07101aee;border-radius:10px;padding:18px}.practice-pause strong{font-size:19px}.welcome-screen[data-effects=off] .welcome-orbit{box-shadow:none}.welcome-screen[data-effects=off] .welcome-orbit:after{box-shadow:none}
@media(max-height:650px){.welcome-layout{padding-top:18px;padding-bottom:18px;gap:14px}.welcome-orbit{width:100px;height:100px;margin-bottom:10px}.welcome-screen h1{font-size:38px}.practice-stage{width:min(100%,180px);min-width:120px}.practice-layout{gap:8px}.practice-layout h2{font-size:20px}.practice-layout p{font-size:12px}.practice-actions button{min-height:44px;padding:10px}}
@media(orientation:landscape) and (max-height:600px){.practice-layout{width:min(100%,850px);display:grid;grid-template-columns:1fr 220px;gap:10px 24px;align-content:center;min-height:100%}.practice-stage{grid-column:2;grid-row:1/6;width:min(100%,calc((100dvh - 40px)*480/680))}.practice-layout .practice-actions,.practice-layout .welcome-footer{grid-column:1}.welcome-orbit{display:none}}

.welcome-actions button{width:100%}.welcome-setting #welcome-sound{margin-bottom:18px}

/* Combined Growth presentation: readable DOM cues, independent of world/canvas scaling. */
#game-section[data-mode=growth] .event-label{font-size:12px;line-height:1.4;letter-spacing:0;padding:5px 8px;background:#080f19e8;border-radius:4px}
#game-section[data-mode=growth] .arena-bottom{font-size:10px;letter-spacing:0}
@media(orientation:landscape) and (max-height:600px){#game-section[data-mode=growth] .event-label{font-size:12px;top:60px}#game-section[data-mode=growth] .arena-bottom{left:6px;right:6px;gap:3px;font-size:10px}#game-section[data-mode=growth] #buff{display:none}}

/* Explicit run navigation and visible keyboard focus. */
#welcome-run-status{font-size:14px;line-height:1.5}#welcome-end button,#welcome-end-run,#end-run{min-height:44px;padding:12px 18px;border:1px solid #8caeaf;border-radius:6px;cursor:pointer}#welcome-screen button:focus-visible,#end-run:focus-visible,#title-open:focus-visible{outline:3px solid #8deee4;outline-offset:3px}