:root { color-scheme: light; background: #dce9df; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; min-height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; background: #eef3df; }
body, canvas { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; touch-action: none; }
button, a { touch-action: manipulation; }
#game-shell { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100vh; height: 100dvh; min-height: 0; margin: 0; padding: 0; overflow: hidden; background: #eef3df; }
#game-root { position: absolute; inset: 0; overflow: hidden; }
#game-root, #game-root canvas { display: block; width: 100%; height: 100%; }
#game-root canvas { width: 100% !important; height: 100% !important; margin: 0 !important; }
#loading { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: max(24px, env(safe-area-inset-top)) 28px max(24px, env(safe-area-inset-bottom)); background: linear-gradient(180deg,#d9eee0,#f4edce 72%,#d4dda7); color: #294938; font-family: "Avenir Next",Avenir,"Trebuchet MS",system-ui,sans-serif; text-align: center; transition: opacity .35s ease, visibility .35s ease; }
#loading.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.mark { position: relative; width: 118px; height: 88px; margin-bottom: 18px; animation: mark-breathe 1.8s ease-in-out infinite; }
.mark i { position: absolute; width: 58px; height: 58px; border: 5px solid rgba(255,255,255,.9); border-radius: 50%; box-shadow: inset -8px -10px rgba(38,75,51,.11),0 10px 20px rgba(50,79,61,.16); }
.mark i:nth-child(1) { left: 0; bottom: 0; background: #e66d58; }
.mark i:nth-child(2) { right: 0; bottom: 0; background: #8f6fc7; }
.mark i:nth-child(3) { left: 30px; top: 0; background: #9cc755; }
#loading p { margin: 0 0 7px; color: #71806b; font-size: 9px; font-weight: 900; letter-spacing: .18em; }
#loading h1 { margin: 0; font-size: clamp(42px,13vw,58px); line-height: .82; letter-spacing: -.07em; text-shadow: 0 3px rgba(255,255,255,.7); }
#loading h1 span { display: block; color: #d2674f; }
.load-track { width: min(270px,82vw); height: 9px; margin-top: 27px; overflow: hidden; border-radius: 99px; background: rgba(65,83,64,.12); box-shadow: inset 0 2px 4px rgba(44,65,48,.14); }
.load-track i { display: block; width: 12%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#8fbd55,#f0bd4f,#dc6b57); transition: width .2s ease; }
#loading small { margin-top: 10px; color: #788375; font-size: 10px; }
@keyframes mark-breathe { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-6px) scale(1.025); } }
@media (min-width: 700px) { html, body { overflow-y: auto; } #game-shell { position: relative; inset: auto; width: 390px; max-width: 390px; height: 844px; min-height: 844px; margin: 18px auto; border-radius: 28px; box-shadow: 0 0 44px rgba(52,77,63,.22); } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; } }