#boot-screen{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:max(24px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom));background:linear-gradient(#02251bbb,#022b24f5),url('assets/scene-village.webp') center/cover;color:#fff1ca;transition:opacity .35s;overflow:hidden}
#boot-screen.boot-finished{opacity:0;pointer-events:none}.boot-content{position:relative;width:min(100%,360px);text-align:center}.boot-logo{width:min(100%,300px);height:auto;filter:drop-shadow(0 5px 16px #031e15)}
.boot-content h1{font:900 italic 25px/1.2 Arial;letter-spacing:0;color:#ffe4a0;margin:25px 0 14px}.boot-content p{font:16px/1.5 Arial;min-height:48px;margin:16px 0}
#boot-progress{appearance:none;width:100%;height:18px;border:2px solid #f7d58b;border-radius:20px;overflow:hidden;background:#012c22}#boot-progress::-webkit-progress-bar{background:#012c22}#boot-progress::-webkit-progress-value{background:repeating-linear-gradient(120deg,#ffe598 0 12px,#eeb537 13px 24px);border-radius:20px;transition:width .2s}#boot-progress::-moz-progress-bar{background:#efc564}
#boot-percent{display:block;color:#ffe19a;font:900 20px Arial;margin-top:12px}.boot-content .play-button{font-size:19px}.boot-content .text-button{color:#ffedbc;font-size:15px}
.boot-snow{position:absolute;inset:-100% 0 0;pointer-events:none;background-image:radial-gradient(circle,#fff9 1px,transparent 2px),radial-gradient(circle,#ffe8bb9c 1px,transparent 2px);background-size:73px 109px,139px 163px;animation:boot-snow 12s linear infinite}@keyframes boot-snow{to{transform:translateY(50%)}}
#tutorial{position:absolute;top:var(--popup-offset);height:var(--popup-space);left:6px;right:6px;z-index:30;display:flex;flex-direction:column;gap:8px;padding:12px;border:2px solid #efd18c;border-radius:22px;background:linear-gradient(#064b3ef5,#032e29f5);box-shadow:inset 0 0 24px #53ddbf15;color:#fff0c6;min-height:0}
.tutorial-heading{display:flex;gap:10px;align-items:center;justify-content:space-between;flex:none}.tutorial-heading span{font:800 13px Arial;letter-spacing:.5px;color:#f3d58a}.tutorial-heading button{font:700 14px Arial;color:#eed8a2;min-height:44px;border:0;background:none;text-decoration:underline;padding:4px 8px}
#tutorial-title{font:900 italic 24px/1.15 Arial;color:#ffe3a1;margin:0;text-align:center}#tutorial-copy{font:16px/1.35 Arial;text-align:center;margin:0;min-height:44px;flex:none}
#tutorial-canvas{flex:1;min-height:0;width:100%;border:1px solid #9de7d76b;border-radius:15px;background:radial-gradient(ellipse at top,#14614d,#052e2c);touch-action:none;outline-offset:0}
#tutorial-feedback{font:700 15px/1.3 Arial;color:#fff1b9;text-align:center;min-height:20px;margin:0;flex:none}
#tutorial-next{height:48px;min-height:48px;font-size:18px;margin:0;flex:none}
#practice-trigger{min-height:44px;border:0;background:none;color:#ffe5a4;font:700 14px Arial;text-decoration:underline;padding:7px 3px}
.menu-utility:has(#practice-trigger:not([hidden])){grid-template-columns:1fr 1fr}
@media(max-height:600px){#tutorial{padding:8px;gap:5px}.tutorial-heading{height:30px}.tutorial-heading button{min-height:30px}#tutorial-title{font-size:21px}#tutorial-copy{font-size:16px;min-height:42px}#tutorial-next{height:44px;min-height:44px}}
@media(max-height:440px){#tutorial{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto 1fr auto;gap:4px 12px}.tutorial-heading{grid-column:1}#tutorial-title{grid-column:1;font-size:18px}#tutorial-copy{grid-column:1;font-size:14px;min-height:0}#tutorial-canvas{grid-column:2;grid-row:1/4;height:100%}#tutorial-feedback{grid-column:1;font-size:13px}#tutorial-next{grid-column:2;grid-row:4}}
@media(prefers-reduced-motion:reduce){.boot-snow{animation:none}#boot-screen{transition:none}}
#boot-screen{overflow:auto;align-items:safe center}.boot-content{max-height:100%;overflow:auto}
@media(max-height:650px){.boot-logo{width:210px}.boot-content h1{font-size:22px;margin:14px 0 10px}.boot-content p{margin:10px 0}}
@media(max-height:440px){#boot-screen{padding:16px}.boot-content{width:min(100%,650px);display:grid;grid-template-columns:130px minmax(0,1fr);gap:4px 14px;align-items:center}.boot-logo{width:130px;grid-column:1;grid-row:1/5}.boot-content h1{grid-column:2;font-size:20px;margin:0}.boot-content progress,.boot-content strong,.boot-content p,.boot-content button{grid-column:2}.boot-content p{min-height:0;font-size:14px;margin:4px 0}#boot-percent{margin:0;font-size:17px}.boot-content .play-button{height:44px;min-height:44px;margin:0}.boot-content .text-button{padding:4px;font-size:14px}}