:root { --navy:#0d1b3d; --ink:#14264f; --gold:#c8932e; --gold-bright:#e8b83c; --paper:#faf6ec; --lime:#d8f24b; --coral:#ff7058; --line:rgba(13,27,61,.14); }
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; color:var(--ink); background:var(--paper); font-family:'Space Grotesk',sans-serif; }
.logo { width:190px; height:auto; }.pixel-logo { image-rendering:pixelated; }
.eyebrow { margin:0 0 16px; color:var(--gold); font:500 11px/1.4 'DM Mono',monospace; letter-spacing:.14em; }
h1,h2,p { margin-top:0; } h1 { font-size:clamp(2.5rem,6vw,6.5rem); line-height:.89; letter-spacing:-.07em; } h1 em { color:var(--gold); font-style:normal; } h2 { font-size:clamp(1.5rem,3vw,3rem); line-height:1.06; letter-spacing:-.045em; }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:48px; padding:12px 20px; border:1px solid var(--navy); border-radius:3px; color:var(--navy); background:transparent; font:600 14px 'Space Grotesk',sans-serif; cursor:pointer; text-decoration:none; transition:transform .15s,background .15s; }
.button:hover { transform:translateY(-2px); }.button.gold { border-color:var(--gold); background:var(--gold-bright); }.button.ghost { background:rgba(255,255,255,.24); }
.landing { display:grid; place-items:center; padding:28px; background:linear-gradient(140deg,var(--navy) 0 66%,var(--paper) 66%); }.landing-card { width:min(720px,100%); color:var(--paper); }.landing-card h1 { margin:28px 0 20px; }.landing-card>p:not(.eyebrow) { max-width:380px; color:#e1dfd7; font-size:1.2rem; }.landing-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }.landing .ghost { border-color:var(--paper); color:var(--paper); }
.host-body { overflow:hidden; background:var(--navy); }.host-app { position:relative; min-height:100vh; display:grid; grid-template-columns:1fr; grid-template-rows:78px 1fr; }.host-top { display:flex; gap:22px; align-items:center; padding:16px 32px; background:var(--paper); }.host-logo { width:145px; }.room-code { margin-left:auto; border:1px solid var(--line); padding:7px 10px; font:12px 'DM Mono',monospace; }
.sound-toggle { padding:7px 10px; border:1px solid var(--line); color:var(--ink); background:transparent; font:12px 'DM Mono',monospace; cursor:pointer; }
.game-stage { min-width:0; position:relative; overflow:hidden; }.lobby-stage { color:var(--paper); background:linear-gradient(#325e9e 0 58%,#8db955 58% 72%,#67451e 72%); }.pixel-sky { position:absolute; inset:0; overflow:hidden; background:linear-gradient(#b9e6f9,#5686c5); }.sun { position:absolute; top:13%; left:12%; width:70px; height:70px; background:var(--gold-bright); box-shadow:0 0 0 10px rgba(255,220,104,.2); }.cloud { position:absolute; width:150px; height:30px; background:#edf7f7; box-shadow:28px -22px #edf7f7,60px 0 #edf7f7; opacity:.88; }.cloud-one { top:20%; left:58%; animation:drift 12s linear infinite; }.cloud-two { top:38%; left:7%; transform:scale(.7); animation:drift 19s linear infinite reverse; }.turbine { position:absolute; width:9px; background:#e8f1f2; bottom:27%; height:260px; }.turbine:before { content:''; position:absolute; width:70px; height:6px; top:0; left:-31px; background:#e8f1f2; transform:rotate(28deg); transform-origin:center; }.turbine:after { content:''; position:absolute; width:56px; height:6px; top:3px; left:-21px; background:#e8f1f2; transform:rotate(142deg); transform-origin:center; }.turbine-one { left:72%; }.turbine-two { left:83%; height:190px; transform:scale(.72); transform-origin:bottom; }.lobby-copy { position:absolute; z-index:2; left:8%; top:17%; max-width:560px; }.lobby-copy h1 { margin-bottom:18px; }.lobby-copy p:not(.eyebrow) { max-width:340px; font-size:1.15rem; }.countdown { display:inline-block; margin-top:18px; padding:14px 16px; background:var(--navy); color:var(--lime); font:14px 'Press Start 2P',monospace; }.join-qr { position:absolute; z-index:3; right:8%; top:14%; width:180px; padding:11px; background:var(--paper); image-rendering:pixelated; }.ground { position:absolute; z-index:2; bottom:0; left:0; right:0; height:27%; border-top:8px solid #3a2712; background:repeating-linear-gradient(90deg,#725328 0 36px,#7d5c2f 36px 72px); }.player-tokens { display:flex; align-items:end; gap:6px; position:absolute; bottom:20px; left:8%; }.token { display:grid; place-items:center; width:42px; height:42px; border:4px solid var(--navy); box-shadow:4px 4px 0 rgba(0,0,0,.22); animation:arrive .6s both; animation-delay:calc(var(--token) * .08s); }.token b { font:10px 'Press Start 2P',monospace; }.token-development { background:#81d0ff; }.token-legal { background:#ff9a7f; }.token-finance { background:#f5d85d; }.token-management { background:#c59bff; }
.host-panel { padding:24px; color:var(--paper); background:#14264f; }.host-panel>div:first-child { padding-bottom:22px; border-bottom:1px solid rgba(255,255,255,.16); }.host-panel strong { display:block; color:var(--lime); font:36px 'Press Start 2P',monospace; }.host-panel span { color:#c6ccd9; font-size:13px; }.leaderboard { margin-top:24px; }.leaderboard div { display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.11); }.leaderboard b { color:var(--gold-bright); }.host-controls { position:absolute; right:24px; bottom:26px; left:24px; }.winner-note { color:var(--lime); font-size:14px; }
.round-stage { display:grid; grid-template-columns:42% 58%; background:var(--paper); }.round-image { min-height:calc(100vh - 78px); background:center/cover no-repeat; }.round-content { padding:clamp(28px,4vw,70px); align-self:center; }.projector-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:28px 0; }.projector-choices span { padding:14px; border:1px solid var(--line); font-size:1.05rem; }.submission-count { color:#6b6b6b; font-family:'DM Mono',monospace; }.caption-note,.explanation { padding:16px; background:#f2e4be; line-height:1.45; }.captions { display:grid; gap:10px; }.captions blockquote { margin:0; padding:12px; border-left:4px solid var(--gold); background:#fff; }.captions small { color:#777; }
.pause-stage { display:grid; place-items:center; color:var(--paper); background:var(--navy); }.pause-grid { position:absolute; inset:0; opacity:.34; background-image:linear-gradient(rgba(200,147,46,.46) 1px,transparent 1px),linear-gradient(90deg,rgba(200,147,46,.46) 1px,transparent 1px); background-size:48px 48px; transform:perspective(420px) rotateX(55deg) scale(1.8); transform-origin:bottom; }.pause-copy { position:relative; z-index:1; width:min(720px,80%); text-align:center; }.pause-copy h1 { margin:18px 0; font-size:clamp(4rem,11vw,10rem); }.pause-copy p:not(.eyebrow) { margin:auto; max-width:370px; font-size:1.2rem; }.pause-mark { margin:30px auto 0; display:grid; place-items:center; width:66px; height:66px; color:var(--navy); background:var(--gold-bright); font-size:34px; box-shadow:7px 7px 0 rgba(0,0,0,.24); }
.player-body { padding:22px; background:radial-gradient(circle at top right,#e6cf97,transparent 38%),var(--paper); }.player-app { width:min(560px,100%); margin:0 auto; }.player-logo { width:150px; margin-bottom:46px; }.player-app h1 { margin-bottom:18px; }.player-app p:not(.eyebrow) { color:#5f6064; font-size:1.08rem; line-height:1.55; } form { display:grid; gap:18px; margin-top:32px; } label { display:grid; gap:8px; font-weight:600; } input,select,textarea { width:100%; padding:14px; border:1px solid var(--line); border-radius:2px; color:var(--ink); background:#fffdfa; font:16px 'Space Grotesk',sans-serif; } textarea { min-height:120px; resize:vertical; }.answer-grid,.caption-votes { display:grid; gap:10px; margin-top:28px; }.answer,.caption-votes button { padding:18px; border:1px solid var(--line); color:var(--ink); background:#fffdfa; text-align:left; font:600 17px 'Space Grotesk',sans-serif; cursor:pointer; }.answer:active,.caption-votes button:active { background:var(--gold-bright); transform:translateY(2px); }.caption-votes small { display:block; margin-top:8px; color:#777; font-weight:400; }.mini-loader { width:36px; height:36px; border:6px solid var(--gold); border-right-color:transparent; animation:spin .8s linear infinite; }
.avatar-picker { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:0; border:0; }.avatar-picker legend { grid-column:1/-1; margin-bottom:2px; font-weight:600; }.avatar-choice { display:flex; min-height:63px; align-items:center; gap:8px; padding:8px; border:1px solid var(--line); background:#fffdfa; color:var(--ink); text-align:left; font:12px 'Space Grotesk',sans-serif; cursor:pointer; }.avatar-choice b { font-size:23px; }.avatar-choice.selected { border:3px solid var(--gold); background:#fff0c4; }
@keyframes drift { from { transform:translateX(0); } to { transform:translateX(110vw); } } @keyframes arrive { from { transform:translateX(-100px) rotate(-10deg); opacity:0; } to { transform:translateX(0) rotate(0); opacity:1; } } @keyframes spin { to { transform:rotate(1turn); } }
@keyframes drive { to { transform:translateX(5px); } } @keyframes fly { to { transform:translate(5px,-3px); } }
.build-tag { display:inline-block; padding:12px 16px; color:var(--navy); background:var(--lime); font:14px monospace; box-shadow:5px 5px 0 rgba(0,0,0,.22); }.build-stage,.finish-stage { color:var(--paper); background:linear-gradient(#5b94cc 0 60%,#5c7d38 60% 76%,#50351d 76%); }.wind-farm { position:absolute; inset:0; overflow:hidden; }.turbine-build { position:absolute; left:66%; bottom:17%; width:210px; height:440px; }.turbine-build .base { position:absolute; bottom:0; left:72px; width:68px; height:36px; background:#d2d9d8; opacity:calc(min(1,var(--build)/28%)); }.turbine-build .mast { position:absolute; bottom:34px; left:99px; width:13px; height:0; background:#edf4f4; transition:height .5s; }.p-1 .mast,.p-2 .mast,.p-3 .mast { height:270px; }.turbine-build .hub { position:absolute; top:134px; left:81px; display:none; width:48px; height:48px; place-items:center; color:var(--gold); background:#edf4f4; font-size:26px; }.p-2 .hub,.p-3 .hub { display:grid; }.blade { position:absolute; top:156px; left:105px; display:none; width:116px; height:12px; background:#edf4f4; transform-origin:left center; }.p-3 .blade { display:block; animation:spin-blades 3s linear infinite; }.b1 { transform:rotate(0deg); }.b2 { transform:rotate(120deg); }.b3 { transform:rotate(240deg); }.crane { position:absolute; bottom:18%; left:23%; font-size:84px; filter:grayscale(1); }.crane.active { filter:none; animation:crane-bob 1.1s ease-in-out infinite alternate; }.build-copy,.finish-copy { position:absolute; z-index:2; left:8%; top:18%; max-width:520px; }.build-copy h1,.finish-copy h1 { margin:14px 0 22px; }.progress { width:min(460px,70vw); height:22px; border:4px solid var(--paper); background:rgba(13,27,61,.45); }.progress span { display:block; height:100%; background:var(--lime); transition:width .2s; }.crew { display:flex; gap:5px; position:absolute; bottom:20px; left:10%; }.build-crew { bottom:10%; left:44%; }.work-button { display:grid; width:100%; min-height:200px; place-items:center; gap:8px; border:0; color:var(--navy); background:var(--lime); box-shadow:8px 8px 0 var(--navy); font:700 22px sans-serif; cursor:pointer; }.work-button b { font-size:58px; }.work-button small { font:12px monospace; }.work-button:active { transform:translate(5px,5px); box-shadow:3px 3px 0 var(--navy); }.work-button:disabled { opacity:.7; }.ghost-tower { opacity:.24; left:74%; height:250px; }.finish-copy { text-align:center; left:8%; right:8%; max-width:none; }.finish-stage .turbine-build { left:50%; transform:scale(1.25); transform-origin:bottom; }.finish-stage .wind-farm { background:radial-gradient(circle at 50% 25%,rgba(232,184,60,.6),transparent 25%); } @keyframes spin-blades { to { transform:rotate(360deg); } } @keyframes crane-bob { to { transform:translateY(-8px); } }

.journey-board { display:flex; flex-wrap:wrap; gap:7px; max-width:560px; margin-top:20px; }.journey-board span { display:flex; align-items:center; gap:7px; padding:8px 10px; color:var(--navy); background:var(--paper); box-shadow:4px 4px 0 rgba(0,0,0,.18); font-size:13px; }.journey-board b { font:17px 'Press Start 2P',monospace; }.journey-board strong { padding-left:3px; color:var(--gold); font:14px 'Press Start 2P',monospace; }.journey-board small { font:10px 'DM Mono',monospace; }.journey-board .alfa { color:#cf2d28; text-shadow:2px 0 #8b1615; animation:drive 1.3s ease-in-out infinite alternate; }.journey-board .car { color:#446891; }.plane { animation:fly 2s ease-in-out infinite alternate; }
.projector-hud { position:absolute; z-index:5; right:28px; bottom:26px; display:flex; align-items:flex-end; gap:18px; }.arrival-count { padding:10px 12px; color:var(--paper); background:rgba(13,27,61,.9); }.arrival-count strong { display:block; color:var(--lime); font:25px 'Press Start 2P',monospace; }.arrival-count span { font-size:12px; }.projector-hud .leaderboard { display:none; }.projector-hud .host-controls { position:static; }.host-controls .button { box-shadow:5px 5px 0 rgba(0,0,0,.22); }.token i { display:block; font-size:18px; font-style:normal; line-height:17px; }.token b { margin-top:-2px; }
@media (max-width:800px) { .host-app { grid-template-columns:1fr; grid-template-rows:65px minmax(660px,1fr) auto; }.host-top { padding:12px 18px; }.host-top .eyebrow { display:none; }.host-panel { display:flex; gap:16px; padding:16px; }.host-panel>div:first-child { border:0; padding:0; }.host-controls { position:static; margin-left:auto; }.host-controls .button { min-height:38px; }.leaderboard { display:none; }.round-stage { grid-template-columns:1fr; }.round-image { min-height:34vh; }.round-content { padding:28px 22px; }.join-qr { width:138px; right:6%; }.lobby-copy { left:7%; top:16%; }.projector-choices { grid-template-columns:1fr; } }
.plane-fly,.paper,.helmet-fly,.vest-fly,.car-drive { position:absolute; z-index:4; image-rendering:pixelated; }.plane-fly { top:13%; left:-10%; font-size:42px; animation:plane-go 11s linear infinite; }.paper { top:28%; color:#fffdf6; font-size:25px; animation:paper-go 5s linear infinite; }.paper-a { left:28%; }.paper-b { left:51%; animation-delay:-2s; }.helmet-fly { top:44%; left:18%; font-size:34px; animation:gear-go 7s linear infinite; }.vest-fly { top:35%; left:69%; font-size:34px; animation:gear-go 6s linear infinite reverse; }.road { position:absolute; right:0; bottom:0; left:0; height:68px; border-top:5px dashed #f0d461; background:#374151; }.car-drive { bottom:10px; font-size:33px; animation:car-go 7s linear infinite; }.car-drive.alfa { animation-delay:-3s; }.car-drive.blue { animation-delay:-5s; } @keyframes plane-go { to { transform:translateX(120vw) translateY(-45px); } } @keyframes paper-go { 50% { transform:translate(80px,-46px) rotate(140deg); } to { transform:translate(180px,20px) rotate(320deg); } } @keyframes gear-go { to { transform:translate(120px,-90px) rotate(380deg); } } @keyframes car-go { from { transform:translateX(-12vw); } to { transform:translateX(112vw); } }