@font-face { font-family:Consolas; src:url('../assets/fonts/Consolas.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:Consolas; src:url('../assets/fonts/Consolas-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }
:root { color-scheme:dark; --gold:#d4b477; --ice:#b7eaf5; --white:#edf7f5; --muted:#bfd0d2; --button:url('../assets/hud/neon-gold/button.svg'); --button-glow:url('../assets/hud/neon-gold/button-glow.svg'); --close-icon:url('../assets/hud/neon-gold/close-icon.svg'); }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; background:#07161c; color:var(--white); font-family:Consolas,monospace; }
button,input { font:inherit; }
button { cursor:pointer; color:inherit; -webkit-tap-highlight-color:transparent; }
button:disabled { cursor:wait; opacity:.5; }
button:focus-visible,input:focus-visible { outline:2px solid var(--ice); outline-offset:5px; }
[hidden] { display:none!important; }
#canvas { display:block; width:100%; height:100%; outline:none; touch-action:none; }
#cover,#landing { position:fixed; inset:0; isolation:isolate; overflow:hidden; transition:opacity .4s ease; }
#cover { z-index:2; }
#landing { z-index:1; }
#cover.departing,#landing.departing { opacity:0; pointer-events:none; }
.cover-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; image-rendering:pixelated; z-index:-3; }
.cover-shade { position:absolute; inset:0; z-index:-2; background:linear-gradient(180deg,#031521a6,transparent 37%,transparent 52%,#0315218c); }
.cover-title { position:absolute; top:10%; left:50%; transform:translateX(-50%); width:90%; text-align:center; font-size:clamp(40px,6.2vw,124px); text-shadow:0 3px 14px #031521,0 0 50px #031521a6; }
.cover-title .title-small { font-size:.48em; letter-spacing:.16em; margin-top:14px; }
.cover-access { position:absolute; left:50%; bottom:10%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; width:min(420px,90vw); text-align:center; }
.profile-card { width:clamp(112px,11vw,148px); aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px; border:2px solid #e4ca8b; border-radius:13px; background:none; box-shadow:0 15px 48px #03152180; font-size:19px; transition:box-shadow .12s,border-color .12s; }
.profile-card svg { width:44px; height:44px; fill:none; stroke:var(--ice); stroke-width:1.2; stroke-linecap:round; }
.profile-card:enabled:hover { box-shadow:0 0 14px #b7eaf51f; }
.cover-access .loading { width:min(320px,100%); margin-top:24px; }
.cover-access .loading[hidden] { display:block!important; visibility:hidden; }
.cover-access .loading p { color:var(--white); text-shadow:0 2px 10px #031521; }
.cover-access .error-notice { margin-top:12px; }
.landscape { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:57% 50%; image-rendering:pixelated; z-index:-3; }
.scene-shade { position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,#06151beb 0%,#071a2599 22%,#081b2840 45%,transparent 69%),linear-gradient(0deg,#061620b3 0%,transparent 28%); }
.welcome { position:absolute; left:7.5%; top:50%; transform:translateY(-47%); width:min(45%,660px); }
.eyebrow,.micro-label { color:var(--ice); font-size:12px; letter-spacing:.19em; line-height:1.5; }
.eyebrow { margin:0 0 26px; text-shadow:0 2px 10px #03131b; }
h1 { margin:0; font-weight:700; font-size:clamp(42px,4.6vw,92px); letter-spacing:-.055em; line-height:1.07; text-shadow:0 3px 18px #03151c80; }
h1>span { display:block; }
.title-small { margin-top:12px; font-size:.58em; font-weight:400; letter-spacing:.13em; color:#deebe9; }
.title-rule { height:1px; width:120px; background:linear-gradient(90deg,var(--gold),#d4b47700); margin:32px 0; box-shadow:0 0 10px #b7eaf52e; }
.actions { display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.glass-button { position:relative; display:flex; align-items:center; justify-content:flex-start; gap:17px; min-height:60px; width:278px; padding:0 24px; border:0; border-top:2px solid #d8b66a; border-radius:0; background:none; color:#fff; font-size:17px; letter-spacing:.015em; text-align:left; transition:background-color .12s,box-shadow .12s; }
.glass-button:enabled:hover { background:#071a242e; }
.glass-button:enabled:active { background:#24485b4d; }
.glass-button:focus-visible { outline:none; box-shadow:inset 0 -1px #a1e9f159; }
.glass-button.primary { min-height:68px; }
.glass-button svg { width:21px; height:21px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; }
.loading { width:278px; margin-top:22px; }
.loading p { font-size:12px; color:var(--muted); margin:0 0 10px; line-height:1.5; }
progress { display:block; appearance:none; width:100%; height:3px; border:0; background:#183747; accent-color:var(--ice); }
progress::-webkit-progress-bar { background:#183747; border-radius:5px; }
progress::-webkit-progress-value { background:var(--ice); border-radius:5px; box-shadow:0 0 10px #b7eaf569; transition:width .18s; }
progress::-moz-progress-bar { background:var(--ice); }
.error-notice { max-width:380px; margin-top:18px; font-size:13px; line-height:1.6; color:#f1dab7; }
.error-notice p { margin:0; }
.text-button { min-height:56px; border:0; background:none; padding:8px 0; color:var(--ice); text-decoration:underline; text-underline-offset:5px; }
.hero { position:absolute; bottom:8.5%; right:14.5%; height:min(64vh,760px); aspect-ratio:3/4; background-repeat:no-repeat; image-rendering:pixelated; filter:drop-shadow(0 5px 4px #06171960); animation:hero-idle 2s steps(1,end) infinite; pointer-events:none; }
.hero-ground { position:absolute; bottom:8%; right:19.2%; width:min(18vw,340px); height:3.4%; border-radius:50%; background:radial-gradient(ellipse,#07192385,transparent 68%); pointer-events:none; }
.location { position:absolute; left:7.5%; bottom:6%; display:flex; align-items:center; gap:13px; font-size:14px; letter-spacing:.04em; text-shadow:0 2px 10px #06161c; }
.location-dot { width:5px; height:5px; border-radius:50%; background:var(--ice); box-shadow:0 0 9px #a3e9ff91; }
.location-chapter { padding-left:14px; border-left:1px solid #d4b47770; color:#c0d1d3; font-size:12px; }
.glass-dialog { position:fixed; width:min(440px,calc(100vw - 40px)); padding:36px; border:1px solid #d4b4779e; border-radius:20px; background:linear-gradient(145deg,#213b49dd,#091b29ef); backdrop-filter:blur(14px); color:var(--white); box-shadow:0 0 1px #ecdfb7,0 22px 80px #030e1670,inset 0 0 24px #9be9ff07; }
.glass-dialog::backdrop { background:#03121b8c; backdrop-filter:blur(3px); }
.glass-dialog h2 { margin:9px 0 30px; font-size:25px; font-weight:400; letter-spacing:-.025em; }
.glass-dialog>.micro-label { margin:0; font-size:10px; }
.close-button { position:absolute; top:10px; right:10px; display:grid; place-items:center; width:56px; height:56px; border:0; background:var(--close-icon) center/22px 22px no-repeat; font-size:0; color:var(--muted); }
.close-button:hover { color:var(--ice); text-shadow:0 0 14px #b7eaf560; }
.setting-row { display:flex; align-items:center; justify-content:space-between; min-height:56px; margin-bottom:18px; gap:16px; font-size:15px; }
input[type=checkbox] { appearance:none; flex:0 0 46px; width:46px; height:27px; border:1px solid var(--gold); border-radius:16px; background:#071b2b; cursor:pointer; position:relative; }
input[type=checkbox]::after { content:''; position:absolute; width:17px; height:17px; top:4px; left:4px; background:#7e919b; border-radius:50%; transition:transform .15s,background .15s; }
input[type=checkbox]:checked::after { transform:translateX(19px); background:var(--ice); box-shadow:0 0 10px #b7eaf555; }
.volume-label { display:flex; justify-content:space-between; font-size:13px; color:var(--muted); }
input[type=range] { width:100%; min-height:56px; margin:0 0 18px; accent-color:var(--ice); cursor:pointer; }
.fullscreen-button { width:100%; font-size:15px; }
.settings-notice { color:var(--muted); font-size:12px; line-height:1.6; margin:14px 0 0; }
noscript { position:fixed; inset:0; display:grid; place-content:center; background:#07161c; }
@media (min-width:1800px) { .welcome { width:min(44%,720px); } .eyebrow { font-size:14px; } .glass-button { width:320px; min-height:68px; font-size:19px; } .glass-button.primary { min-height:76px; } }
@media (max-aspect-ratio:4/3) { .landscape { object-position:60% 50%; } .welcome { left:6%; width:47%; } h1 { font-size:clamp(36px,5.1vw,64px); } .title-small { letter-spacing:.09em; } .hero { right:5.5%; height:58vh; bottom:10%; } .hero-ground { right:12%; width:26%; bottom:9.5%; } .location { left:6%; } }
@media (max-height:620px) and (orientation:landscape) { .welcome { top:48%; } .eyebrow { margin-bottom:14px; font-size:10px; } h1 { font-size:clamp(32px,4.3vw,52px); } .cover-title { font-size:clamp(40px,6.2vw,80px); } .title-small { margin-top:7px; } .title-rule { margin:19px 0; } .glass-button,.glass-button.primary { min-height:56px; } .actions { gap:8px; } .cover-access { bottom:8%; } .cover-access .loading { margin-top:16px; } .location { bottom:4%; font-size:12px; } .hero { height:72vh; bottom:8%; } .glass-dialog { padding:25px 28px; } }
@media (orientation:portrait) { .landscape { object-position:63% 50%; } .scene-shade { background:linear-gradient(90deg,#06151bea,#071a2580 70%,#071a2550); } .welcome { left:7%; top:44%; width:87%; z-index:2; } h1 { font-size:clamp(34px,8.4vw,58px); } .cover-title { top:12%; font-size:clamp(34px,8.4vw,58px); } .cover-access { bottom:16%; } .eyebrow { font-size:10px; } .hero { right:-8%; height:43vh; bottom:7%; opacity:.65; z-index:-1; } .hero-ground { right:0%; bottom:7%; width:45%; } .location { left:7%; bottom:4%; } .glass-button { width:min(278px,72vw); } }
@media (prefers-reduced-motion:reduce) { *,*::after { animation:none!important; transition:none!important; } }