:root{--bg: #1c1c21;--bg2: #26262e;--panel: #2b2b34;--line: #3d3d4a;--text: #ffffff;--muted: #a8a8b8;--gold: #ffd93d;--green: #5ef08a;--red: #ff6b8a;--violet: #b388ff;--blue: #5ec8f8;--pink: #ff8ad8}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;height:100%;background:radial-gradient(600px 400px at 15% 10%,rgba(255,217,61,.07) 0%,transparent 60%),radial-gradient(700px 500px at 85% 20%,rgba(255,255,255,.05) 0%,transparent 60%),radial-gradient(900px 700px at 50% 110%,rgba(0,0,0,.35) 0%,transparent 60%),linear-gradient(180deg,#232329 0%,var(--bg) 100%) fixed;color:var(--text);font-family:ui-rounded,SF Pro Rounded,Nunito,system-ui,-apple-system,Segoe UI,sans-serif;overscroll-behavior:none}#app{height:100dvh;display:flex;flex-direction:column;position:relative}.screen{display:none;flex:1;flex-direction:column;align-items:center;justify-content:center;padding:20px}.screen.active{display:flex}#screen-home.active{justify-content:flex-start;overflow-y:auto;padding-top:48px;padding-bottom:48px}#topnav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:#0d1030eb;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:3px solid var(--line)}.nav-brand{display:flex;align-items:center;gap:10px;font-family:Titan One,ui-rounded,system-ui,sans-serif;letter-spacing:1px;font-size:16px}.nav-brand img{width:36px;height:36px;border-radius:10px;border:2px solid var(--line)}.nav-links{display:flex;gap:8px;align-items:center}.nav-link{background:none;border:2px solid transparent;color:var(--muted);font-size:14px;font-weight:800;padding:8px 14px;border-radius:14px;cursor:pointer}.nav-link:hover{color:var(--text)}.nav-link.active{color:var(--text);background:#5ec8f824;border-color:var(--line)}.nav-link.cta{background:linear-gradient(180deg,#ffe45e,#ffb700);color:#3a2500;font-weight:800;border:3px solid #0a0c24;box-shadow:0 4px #0a0c24}.nav-link.cta:hover{color:#3a2500}.nav-link.cta:active{transform:translateY(3px);box-shadow:0 1px #0a0c24}.nav-brand{cursor:pointer}.view{display:none;flex:1;flex-direction:column}.view.active{display:flex}.landing-hero{text-align:center;padding:48px 0 40px}.landing-logo{width:150px;height:150px;border-radius:36px;margin-bottom:16px;border:4px solid var(--line);box-shadow:0 8px #06081499;animation:hero-bob 3s ease-in-out infinite}@keyframes hero-bob{0%,to{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}.landing-hero h1{font-family:Titan One,ui-rounded,system-ui,sans-serif;font-size:clamp(38px,10vw,52px);letter-spacing:2px;margin:0 0 12px;text-shadow:0 4px 0 rgba(6,8,20,.7),0 0 40px rgba(94,200,248,.3)}.landing-tag{color:var(--muted);font-size:17px;line-height:1.6;max-width:520px;margin:0 auto 28px}.landing-cta{text-align:center;padding:48px 0 16px}.shot-feature{margin:8px 0 20px}.shot-feature img{width:100%;border-radius:20px;border:3px solid var(--line);display:block;box-shadow:0 6px #06081499}.shots{display:flex;flex-direction:column;gap:28px;margin:8px 0}.shot{margin:0}.shot img{width:100%;border-radius:16px;border:1px solid var(--line);display:block}.shot figcaption{color:var(--muted);font-size:14px;margin-top:10px;text-align:center}.page{width:100%;max-width:640px;margin:0 auto;padding:40px 20px 64px}.page h2{font-size:30px;margin:0 0 8px;letter-spacing:1px;text-shadow:0 3px 0 rgba(6,8,20,.7)}.page h3{font-size:19px;margin:32px 0 12px;text-shadow:0 2px 0 rgba(6,8,20,.7)}.page-sub{color:var(--muted);line-height:1.6;margin:0 0 20px;font-size:15px}.facts{display:grid;grid-template-columns:1fr 1fr;gap:12px}.fact{background:var(--panel);border:3px solid var(--line);border-radius:18px;padding:14px;box-shadow:0 4px #06081499}.fact span{display:block;color:var(--muted);font-size:12px;letter-spacing:1px;margin-bottom:6px;font-weight:700}.fact b{font-size:16px}.winners{display:flex;flex-direction:column;gap:12px}.winner-row{display:flex;align-items:center;gap:12px;background:var(--panel);border:3px solid var(--line);border-radius:18px;padding:12px 16px;box-shadow:0 4px #06081499}.winner-row .crown{font-size:22px}.winner-row .who{flex:1}.winner-row .who b{display:block;font-size:14px}.winner-row .who span{color:var(--muted);font-size:12px;font-family:monospace}.winner-row .amt{text-align:right}.winner-row .amt b{display:block;color:#4ade80}.winner-row .amt span{color:var(--muted);font-size:12px}.hero{text-align:center;max-width:420px;width:100%}.logo-row{margin-bottom:8px}.site-logo{width:112px;height:112px;border-radius:24px;animation:bob 2.4s ease-in-out infinite}.logo-emoji{display:inline-block;animation:bob 2.4s ease-in-out infinite}.logo-emoji:nth-child(2){animation-delay:.3s}.logo-emoji:nth-child(3){animation-delay:.6s}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}h1{font-family:Titan One,ui-rounded,system-ui,sans-serif;font-size:clamp(40px,9vw,64px);margin:0 0 10px;letter-spacing:2px;background:linear-gradient(180deg,#fff7d6,var(--gold) 60%,#b45309);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 40px rgba(251,191,36,.15)}.tagline{color:var(--muted);margin:0 0 24px;line-height:1.5}input{background:var(--bg2);border:3px solid var(--line);color:var(--text);border-radius:16px;padding:14px 16px;font-size:17px;width:100%;outline:none;text-align:center;font-weight:700}input:focus{border-color:var(--gold)}#name-input{margin-bottom:12px}.btn-row{display:flex;gap:10px;margin-bottom:12px}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:3px solid #0a0c24;background:var(--panel);color:var(--text);border-radius:18px;padding:14px 22px;font-size:16px;font-weight:800;cursor:pointer;letter-spacing:.5px;box-shadow:0 5px #0a0c24;transition:transform .08s,box-shadow .08s}.btn:active{transform:translateY(4px);box-shadow:0 1px #0a0c24}.btn.primary{background:linear-gradient(180deg,#ffe45e,#ffb700);color:#3a2500;border-color:#0a0c24}.btn-row .btn{flex:1}.btn.ghost{background:transparent;color:var(--muted);box-shadow:none;border-color:var(--line)}.btn.ghost:active{transform:scale(.97)}.btn.small{padding:8px 14px;font-size:14px;border-radius:14px}.join-row{display:flex;gap:10px}#code-input{text-transform:uppercase;letter-spacing:8px;font-weight:800}.error{color:var(--red);min-height:20px}.hint{color:var(--muted);font-size:13px;margin-top:18px}.how{margin-top:28px;display:flex;flex-direction:column;gap:14px;text-align:left}.how-step{display:flex;gap:14px;align-items:flex-start;background:var(--panel);border:3px solid var(--line);border-radius:20px;padding:14px 16px;box-shadow:0 4px #06081499}.how-n{flex:none;width:32px;height:32px;border-radius:50%;background:linear-gradient(180deg,#5ec8f8,#2e8fd8);color:#06283d;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;border:2px solid #0a0c24}.how-step div b{display:block;font-size:15px}.how-step div span{color:var(--muted);font-size:13px;line-height:1.5}.btn.big{font-size:18px;padding:14px 36px}.play-panel{margin-top:40px;padding-top:32px;border-top:1px solid var(--line)}.divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px;letter-spacing:2px;margin:20px 0 12px}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--line)}.panel{width:100%;max-width:480px;background:var(--panel);border:3px solid var(--line);border-radius:24px;padding:24px;box-shadow:0 8px #06081499}.label{color:var(--muted);font-size:12px;letter-spacing:3px;margin:18px 0 10px}.label:first-child{margin-top:0}.code-row{display:flex;align-items:center;gap:12px}.code{font-size:40px;font-weight:800;letter-spacing:10px;color:var(--gold);font-family:ui-monospace,monospace}.status{color:var(--text);margin:12px 0 4px}.countdown{font-size:56px;font-weight:800;color:var(--green);text-align:center;margin:8px 0;font-variant-numeric:tabular-nums}.hidden{display:none!important}.animal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.animal-btn{background:var(--bg2);border:2px solid var(--line);border-radius:14px;padding:12px 6px;cursor:pointer;text-align:center;color:var(--text)}.animal-btn .em{font-size:34px;display:block}.animal-btn .nm{font-size:12px;color:var(--muted);text-transform:capitalize}.animal-btn.sel{border-color:var(--gold);box-shadow:0 0 16px #fbbf2459}.player-list{display:flex;flex-wrap:wrap;gap:8px;min-height:40px}.player-chip{background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:14px;display:flex;gap:6px;align-items:center}.player-chip .dot{width:8px;height:8px;border-radius:50%}#screen-game{padding:0;position:relative;overflow:hidden}#hud{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:12px 16px;font-size:18px;font-weight:700;pointer-events:none}#hud .btn{pointer-events:auto}#hud-time{font-variant-numeric:tabular-nums;color:var(--gold)}#game-canvas{width:100%;height:100%;display:block;touch-action:none}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#04070eb8;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);text-align:center;padding:20px}.overlay h2{font-size:clamp(34px,8vw,56px);margin:0;letter-spacing:2px}.overlay p{margin:0;font-size:20px}.overlay .sub{color:var(--muted);font-size:15px}.overlay .btn{margin-top:8px;min-width:200px}#spectate-text{font-size:30px;font-weight:800}.kbd-hint{color:var(--muted);font-size:13px}#yeti{position:absolute;left:14px;bottom:14px;z-index:8;display:flex;align-items:flex-end;gap:10px;pointer-events:none;max-width:70%}#yeti-emoji{font-size:44px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.6));animation:yeti-bob 2.2s ease-in-out infinite;flex-shrink:0;background:#0d1424d9;border:1px solid var(--line);border-radius:50%;width:64px;height:64px;display:flex;align-items:center;justify-content:center}@keyframes yeti-bob{0%,to{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(3deg)}}#yeti-bubble{background:#0d1424eb;border:1px solid var(--line);border-radius:4px 16px 16px;padding:10px 14px;font-size:15px;font-weight:600;color:var(--text);box-shadow:0 8px 24px #00000073;animation:bubble-in .25s ease-out}#yeti-bubble .yn{color:var(--gold);font-size:11px;letter-spacing:2px;display:block;margin-bottom:2px}@keyframes bubble-in{0%{opacity:0;transform:translateY(8px) scale(.95)}}@media (hover: hover) and (pointer: fine){#screen-game:after{content:"WASD / arrows to move";position:absolute;bottom:10px;left:0;right:0;text-align:center;color:var(--muted);font-size:12px;z-index:4;pointer-events:none}}.cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:4px 0 8px}.pop-card{border-radius:24px;padding:18px 16px;text-align:center;border:3px solid rgba(10,12,36,.9);box-shadow:0 5px #060814a6;transition:transform .12s}.pop-card:nth-child(odd){transform:rotate(-1.2deg)}.pop-card:nth-child(2n){transform:rotate(1.2deg)}.pop-card:active{transform:rotate(0) scale(.97)}.pop-card.amber{background:linear-gradient(160deg,#fde68a,#fbbf24)}.pop-card.blue{background:linear-gradient(160deg,#a5e3ff,#5ec8f8)}.pop-card.pink{background:linear-gradient(160deg,#ffc7ec,#ff8ad8)}.pop-card.green{background:linear-gradient(160deg,#b8f5cd,#5ef08a)}.pop-card.gold{background:linear-gradient(160deg,#fff3b0,#ffd93d)}.pop-emoji{font-size:34px;display:block;margin-bottom:8px}.pop-num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#1a14401f;color:#1a1440;font-weight:800;font-size:17px;margin-bottom:8px;border:2px solid rgba(26,20,64,.25)}.pop-card b{display:block;font-size:17px;color:#1a1440;margin-bottom:4px}.pop-card p{margin:0;font-size:13px;color:#3d3670;line-height:1.4;font-weight:600}#hud-demo{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;font-weight:800;font-size:16px;z-index:5;pointer-events:none;text-shadow:0 2px 8px rgba(0,0,0,.8)}#hud-demo .hint{margin:0}#screen-demo{position:relative;padding:0;overflow:hidden}#screen-demo.active{justify-content:flex-start}#demo-canvas{width:100%;flex:1;min-height:0;display:block;touch-action:none}@media (max-width: 480px){.cards{gap:10px}.pop-card{padding:14px 10px;border-radius:20px}.pop-emoji{font-size:28px}.pop-card b{font-size:15px}}@media (max-width: 480px){#topnav{padding:10px 12px}.nav-brand span{display:none}.nav-link{padding:8px 10px;font-size:13px}.landing-hero{padding:32px 0 28px}.landing-logo{width:110px;height:110px;border-radius:28px}.landing-tag{font-size:15px}.page{padding:28px 16px 48px}.page h2{font-size:24px}.facts{grid-template-columns:1fr 1fr;gap:10px}.fact{padding:12px}.fact b{font-size:14px}.how-step{padding:12px}.btn.big{font-size:16px;padding:13px 28px}.shot figcaption{font-size:13px}}