:root { color-scheme: dark; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #ffebc9; background: #080e16; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body { display: grid; place-items: center; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); background: radial-gradient(ellipse at 50% 70%, #233a45, #080e16 75%); }
#game-shell { position: relative; width: min(100%, 56.25vh); width: min(100%, 56.25dvh); height: 100%; max-height: 177.7778vw; overflow: hidden; background: #101923; box-shadow: 0 0 90px #0008; }
#unity-canvas { display: block; width: 100%; height: 100%; background: #101923; touch-action: none; outline: none; }
#loader { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 7%; text-align: center; background: radial-gradient(ellipse at 50% 45%, #243d46 0, #101923 65%); }
[hidden] { display: none !important; }
.eyebrow { color: #64f7c7; font-size: clamp(10px, 2vh, 16px); letter-spacing: .24em; margin: 0 0 3%; }
h1 { font-size: clamp(28px, 7vh, 64px); line-height: .94; letter-spacing: -.055em; margin: 0; font-weight: 900; }
.moon { width: 13vh; height: 13vh; max-width: 110px; max-height: 110px; border-radius: 50%; background: #c2d4bf; box-shadow: 0 0 55px #64f7c72b, inset -20px -8px 0 #91b9ad; margin: 6% 0 2%; }
.tagline { font-size: clamp(14px, 2.5vh, 22px); line-height: 1.5; margin: 4% 0; }
#status { min-height: 3em; font-size: clamp(12px, 1.9vh, 16px); line-height: 1.5; margin: 4% 0 2%; max-width: 30ch; color: #c3d0cf; }
button { min-height: 48px; width: 100%; border: 0; border-radius: 6px; padding: 16px 12px; font: inherit; font-weight: 800; letter-spacing: .06em; color: #101923; background: #64f7c7; cursor: pointer; touch-action: manipulation; }
button:hover { background: #a4ffe0; }
button:focus-visible { outline: 3px solid #ffebc9; outline-offset: 4px; }
progress { width: 100%; height: 12px; accent-color: #64f7c7; margin: 0 0 24px; }
.hint { color: #a0b5b7; font-size: clamp(11px, 1.7vh, 14px); line-height: 1.7; margin: 7% 0 0; }
#notice { position: absolute; bottom: 0; inset-inline: 0; padding: 12px; background: #101923ee; color: #ffebc9; font-size: 13px; text-align: center; pointer-events: none; }
/* Surf-horror key art and display lettering, shared with the in-game menus. */
@font-face{font-family:VSCDisplay;src:url('bangers.ttf') format('truetype');font-display:swap}
#loader{background:linear-gradient(#06122245,#06122245),url('night-beach.png') center/cover;justify-content:flex-start;padding-top:14%}
#loader h1{font:clamp(25px,min(5.5vh,7.5vw),52px)/1.05 VSCDisplay,Impact,sans-serif;letter-spacing:1px;transform:rotate(-3deg);text-shadow:3px 5px #061323,0 0 30px #08121c}
#loader .eyebrow{font-weight:800;font-size:12px;letter-spacing:3px;margin-bottom:7%}
#loader .moon{display:none}
#loader .tagline{font:clamp(14px,2.1vh,20px)/1.25 VSCDisplay,Impact,sans-serif;letter-spacing:1px;margin:9% 0 2%}
#loader #status{background:#071723cc;border:1px solid #355363;border-radius:10px;padding:10px;min-height:0}
#loader button{font:18px/1.2 VSCDisplay,Impact,sans-serif;letter-spacing:1px;background:linear-gradient(#83ffdc,#4ce6ba);border:2px solid #9dffe2;border-bottom:6px solid #218879;border-radius:12px 3px 12px 3px;box-shadow:0 4px #030b13;margin-top:6%}
#loader .hint{background:#071723cc;border-radius:8px;padding:8px 14px;color:#cfddd9}
body{background:radial-gradient(ellipse at 50% 60%,#183545,#050b13 75%)}