:root{font-family:Trebuchet MS,Verdana,sans-serif;color:#edf0dc;background:#142b33;--cream: #f3efda;--ink: #182f34;--accent: #bfeb78;color-scheme:light}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 18% 25%,#2b4650 0,transparent 58%),#142b33}button,select,input{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:wait;opacity:.6}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ee861e;outline-offset:4px}[hidden]{display:none!important}.topbar{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #50656a;max-width:1296px;margin:0 auto;padding:23px clamp(18px,4vw,64px)}.brand{display:flex;align-items:center;gap:14px;color:var(--cream);font-size:clamp(13px,1.8vw,19px);letter-spacing:.03em;font-weight:900;text-decoration:none}.pad{height:22px;width:34px;border-radius:8px 8px 6px 6px;display:inline-block;background:var(--accent);position:relative;box-shadow:0 3px #426a49}.pad:before,.pad:after{content:"";position:absolute;left:5px;top:9px;width:11px;height:4px;background:var(--ink)}.pad:after{transform:rotate(90deg)}.pad i{position:absolute;right:5px;top:6px;background:var(--ink);width:4px;height:4px;box-shadow:-5px 5px var(--ink)}.service,.eyebrow,.game-label,.controls h3,label,.play-head,.seats{font-family:ui-monospace,Menlo,monospace}.service{display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:.13em}.service i{width:7px;height:7px;background:var(--accent);border-radius:100%}main{max-width:1296px;margin:auto;padding:clamp(20px,5vw,68px) clamp(18px,4vw,64px) 28px}.lobby{display:grid;grid-template-columns:1.18fr 1fr;align-items:stretch;border:2px solid #0d242a;box-shadow:7px 7px #0b2026;border-radius:13px;overflow:hidden}.preview{min-width:0;background:#152e30;display:flex;flex-direction:column;justify-content:center;position:relative}.preview video{width:100%;height:100%;min-height:0;object-fit:contain;background:#102024;image-rendering:pixelated}.game-label{display:flex;align-items:center;gap:10px;color:#e9eacf;background:#122b31;padding:14px 20px;font-size:10px;letter-spacing:.12em}.game-label span{background:var(--cream);color:var(--ink);padding:2px 5px;font-weight:700}.game-label b{margin-left:auto;font-size:9px;color:#bfcdbe}.panel{background:var(--cream);color:var(--ink);padding:clamp(24px,3.7vw,58px);display:flex;flex-direction:column;justify-content:center;min-width:0}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.14em;margin:0 0 17px;display:flex;align-items:center;gap:9px}.square{width:9px;height:9px;background:#679249;box-shadow:2px 2px #253f31}.panel h1,.panel h2{font:900 clamp(38px,4.4vw,72px) / .96 "Arial Black","Trebuchet MS",sans-serif;letter-spacing:-.07em;margin:0}.panel h1 span,.panel h2 span{color:#588338}.panel h2{font-size:clamp(35px,3.8vw,55px);margin-bottom:30px}.lead{color:#4e5c54;font-size:clamp(14px,1.15vw,17px);line-height:1.5;max-width:32em;margin:17px 0 25px}.choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:2px solid #bcc3ad;margin-bottom:19px}.choices button{background:transparent;border:0;color:#556350;font-size:clamp(11px,1.1vw,14px);font-weight:700;padding:10px 2px;position:relative}.choices button[aria-pressed=true]{color:var(--ink)}.choices button[aria-pressed=true]:after{content:"";height:3px;position:absolute;bottom:-2px;left:0;right:0;background:#275d3c}label{display:block;text-transform:uppercase;font-size:10px;letter-spacing:.11em;font-weight:700;margin:0 0 8px}.panel input,.panel select,.invite{width:100%;height:43px;background:#faf8ed;border:1px solid #909e89;border-radius:4px;color:var(--ink);padding:0 12px}.panel input{text-transform:uppercase}.primary{width:100%;margin-top:14px;display:flex;justify-content:space-between;align-items:center;background:#bde97b;color:#193225;border:2px solid #1b3426;border-radius:6px;box-shadow:0 4px #1b3426;padding:12px 16px;font-weight:800}.primary:hover{background:#d3f69a}.primary:active{transform:translateY(2px);box-shadow:0 2px #1b3426}.primary b{font-size:20px;line-height:1}.subtle{background:transparent;color:inherit;border:0;text-decoration:underline;text-underline-offset:3px;padding:8px 0}.panel .subtle{margin-top:12px}.notice{font-size:13px;color:#864b13;line-height:1.4;margin:16px 0 0}.notice:empty{display:none}.invite{display:flex;align-items:center;justify-content:space-between}.invite output{font:700 21px ui-monospace,monospace;letter-spacing:.14em}.invite button{background:transparent;color:#356542;border:0;font-weight:700}.seats{list-style:none;padding:0;margin:18px 0}.seats li{display:flex;align-items:center;gap:8px;border-bottom:1px solid #c9cdb9;padding:12px 0;font-size:13px}.seats li:before{content:"";width:10px;height:10px;background:#d94836}.seats li+li:before{background:#4c9851}.seats small{margin-left:auto;font-size:11px;color:#49594b}.controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 18px;margin:24px auto;color:#d2d9cb;font-size:12px}.controls h3{margin:0;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#96aaa4}.controls div{white-space:nowrap}kbd{display:inline-block;min-width:20px;text-align:center;padding:2px 4px;background:#203e46;border:1px solid #647d7e;border-bottom-width:2px;border-radius:4px;font:700 11px monospace}#play{max-width:900px;margin:auto}.play-body{display:flex;flex-direction:column;align-items:center}#screen{width:min(100%,calc(74vh * 256 / 224));aspect-ratio:256/224;background:#0c171c;position:relative;overflow:hidden;margin:auto;border:2px solid #102024;box-shadow:5px 5px #0e2227}#screen canvas{width:100%!important;height:100%!important;display:block;image-rendering:pixelated}.play-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 auto 10px;font-size:13px}.play-head button{color:#e4eacb}.fullscreen-button{flex:0 0 44px;width:44px;height:44px;padding:0;color:#e4eacb;background:#203e46;border:1px solid #647d7e;border-radius:5px;font-size:22px;line-height:1;text-decoration:none}.fullscreen-button:disabled{cursor:not-allowed}#fullscreen-help{margin:0 0 10px;color:#d2d9cb;font-size:12px;line-height:1.4}#touch-controls{display:none}#play-notice{position:absolute;z-index:2;inset:0;display:grid;place-items:center;text-align:center;background:#102928cf;color:#fff;font:700 17px ui-monospace,monospace;padding:20px;white-space:pre-line}body:has(#play:not([hidden])) main{padding-top:15px}@media(max-width:720px){.lobby{grid-template-columns:1fr}.preview video{height:clamp(190px,43vw,280px)}.game-label{padding:9px 14px}.panel h1 br{display:none}.panel{padding:25px}.topbar{padding:16px 18px}.controls{justify-content:flex-start}.play-head{font-size:11px}.service{font-size:9px}}#play-notice.compact{inset:auto 0 0;font-size:12px;padding:8px;background:#102928df;pointer-events:none}#screen .cinematic{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;z-index:1;background:#000}#screen .resume-movie{position:absolute;bottom:8px;left:50%;transform:translate(-50%);z-index:3}#play:where(:fullscreen,:-webkit-full-screen,.is-fullscreen){position:fixed;inset:0;z-index:999;display:flex;flex-direction:column;gap:8px;width:100%;max-width:none;height:100vh;height:100dvh;margin:0;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));background:#0c171c}#play:where(:fullscreen,:-webkit-full-screen,.is-fullscreen) .play-head{flex:0 0 auto;margin:0}#play:where(:fullscreen,:-webkit-full-screen,.is-fullscreen) .play-body{flex:1 1 auto;min-height:0;justify-content:center}#play:where(:fullscreen,:-webkit-full-screen,.is-fullscreen) #screen{flex:0 1 auto;width:min(100%,calc((100vh - 72px) * 256 / 224));width:min(100%,calc((100dvh - 72px) * 256 / 224));max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px);border:0;box-shadow:none}@media(any-pointer:coarse){body:has(#play:not([hidden])) .topbar,body:has(#play:not([hidden])) .controls{display:none}body:has(#play:not([hidden])) main{padding:0;max-width:none}#play{--pad-size: clamp(104px, 26vmin, 124px);--pad-ink: #e1ede8;--pad-rim: rgb(201 226 217 / 36%);--pad-fill: rgb(24 49 56 / 76%);--edge: clamp(10px, 3vmin, 20px);display:flex;flex-direction:column;width:100%;max-width:none;height:100dvh;padding:max(4px,env(safe-area-inset-top)) max(4px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left));gap:0;background:#101f24}#play .play-head{flex:none;width:100%;gap:8px;padding-inline:var(--edge);margin:0;color:#c0d0c9;font-size:11px}#stage-name{margin-right:auto}#hud:empty{display:none}#fullscreen,#play-leave{min-height:44px;min-width:44px;border:0;background:transparent;text-decoration:none}#fullscreen-help{padding-inline:var(--edge)}#play .play-body{position:relative;container-type:size;flex:1;min-height:0;width:100%;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) var(--pad-size);justify-items:center;align-items:center;padding-bottom:clamp(8px,5dvh,48px);row-gap:12px}#play #screen{width:min(100cqw,calc((100cqh - var(--pad-size) - 24px) * 8 / 7));height:auto;max-height:none;margin:0;border:0;box-shadow:none}#touch-controls{width:min(100%,560px);height:var(--pad-size);display:flex;align-items:center;justify-content:space-between;padding-inline:var(--edge);color:var(--pad-ink);pointer-events:none}#touch-controls,#touch-controls *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none}.touch-directions,.touch-actions button{pointer-events:auto}.touch-directions{width:var(--pad-size);height:var(--pad-size);position:relative;border-radius:50%;background:radial-gradient(circle,rgb(177 207 194 / 28%) 0 10%,transparent 11%),var(--pad-fill);border:1px solid var(--pad-rim)}.touch-directions button{position:absolute;display:grid;place-content:center;width:44px;height:44px;padding:0;background:transparent;color:inherit;border:none;border-radius:50%}.touch-directions button:after{content:"";width:9px;height:9px;border:solid currentColor;border-width:2px 2px 0 0;transform:rotate(var(--angle))}[data-control=up]{top:0;left:calc(50% - 22px);--angle: -45deg}[data-control=down]{bottom:0;left:calc(50% - 22px);--angle: 135deg}[data-control=left]{left:0;top:calc(50% - 22px);--angle: -135deg}[data-control=right]{right:0;top:calc(50% - 22px);--angle: 45deg}.touch-actions{display:grid;grid-template:44px 64px / 54px 64px;align-items:center;justify-items:center;gap:2px 5px}.touch-actions button{display:grid;place-content:center;min-width:44px;min-height:44px;padding:0;border-radius:50%;border:1px solid var(--pad-rim);background:var(--pad-fill);color:inherit;font:700 11px/1.15 Trebuchet MS,sans-serif}.touch-actions button span{font:700 23px/1 ui-monospace,monospace;pointer-events:none}.touch-actions [data-control=jump]{grid-area:2 / 2;width:64px;height:64px;color:#e5f8d4;border-color:#c0e59da3;background:#35553dd1;align-self:start}.touch-actions [data-control=run]{grid-area:2 / 1;width:52px;height:52px;align-self:end}.touch-actions [data-control=spin]{grid-area:1 / 1;align-self:end;font-size:22px}.touch-actions [data-control=reserve]{grid-area:1 / 2;border:0;background:transparent;text-shadow:0 1px 3px #102027}.touch-actions [data-control=action]{grid-area:1 / 1 / 3 / 3;justify-self:end;border-radius:24px;padding-inline:17px;font-size:13px}#touch-controls .is-pressed{color:#102820;background:var(--accent)}#touch-controls:not([data-mode=level]) .touch-actions button:not([data-control=action]),#touch-controls:is([data-mode=level],[data-mode=idle]) [data-control=action],#touch-controls:not([data-has-reserve]) [data-control=reserve],#touch-controls:is([data-mode=continue],[data-mode=idle]) .touch-directions{display:none}#touch-controls[data-mode=continue]{justify-content:flex-end}}@media(any-pointer:coarse)and (orientation:landscape){#play .play-body{display:grid;place-items:center;align-content:stretch;grid-template-rows:minmax(0,1fr);padding-bottom:0;gap:0}#play #screen{width:min(100cqw,calc(100cqh * 8 / 7))}#touch-controls{position:absolute;inset:auto 0 var(--edge);width:100%;padding-inline:clamp(10px,4vw,46px);z-index:3}}
