:root{--cocoa:#2b1a1a;--cream:#fff1d0;--dough:#d88b43;--custard:#f3c84b;--raspberry:#cc3a5b;--teal:#2d7d79;--teal-deep:#1e5957;--paper-shade:#ebd9b0;--dough-shadow:#a9642b;--safe-t:env(safe-area-inset-top,0px);--safe-r:env(safe-area-inset-right,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);--ctl-scale:1;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}*{box-sizing:border-box}html,body{background:var(--teal-deep);height:100%;color:var(--cocoa);margin:0}body{background-image:linear-gradient(90deg,#00000014 1px,#0000 1px),linear-gradient(#00000014 1px,#0000 1px);background-size:48px 48px;overflow:hidden}#app{position:fixed;inset:0}#screens{padding:calc(12px + var(--safe-t)) calc(12px + var(--safe-r)) calc(12px + var(--safe-b)) calc(12px + var(--safe-l));position:absolute;inset:0;overflow:auto}.screen{place-items:center;min-height:100%;display:grid}.screen[hidden],[hidden]{display:none!important}.receipt{background:var(--cream);color:var(--cocoa);width:min(440px,100%);box-shadow:0 6px 0 var(--paper-shade), 0 14px 30px #00000059;border-radius:4px;flex-direction:column;gap:12px;padding:20px 22px 22px;display:flex;position:relative}.receipt:before{content:"";background:radial-gradient(circle at 8px 8px, var(--cream) 6px, transparent 6.5px) 0 0 / 16px 8px repeat-x;height:8px;position:absolute;top:-8px;left:0;right:0}.receipt.wide{width:min(980px,100%)}.receipt-head{text-transform:uppercase;letter-spacing:.2em;border-bottom:2px dashed var(--cocoa);margin:0;padding-bottom:6px;font-size:.75rem;font-weight:700}h1,h2,h3{margin:0;line-height:1.1}.logo{letter-spacing:-.02em;color:var(--raspberry);text-shadow:3px 3px 0 var(--cocoa), -1px -1px 0 var(--cocoa);font-size:clamp(2.6rem,9vw,4.4rem);font-weight:900;transform:rotate(-2deg)}.tagline,.muted{color:#5a3325;margin:0}.status{min-height:1.3em;margin:0;font-weight:600}.temp-art-note{color:#5a3325;border-top:1px dashed var(--cocoa);margin:0;padding-top:6px;font-size:.75rem}.row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.row>.btn{flex:auto}.btn{min-width:48px;min-height:48px;font:inherit;color:var(--cocoa);border:3px solid var(--cocoa);box-shadow:0 4px 0 var(--cocoa);cursor:pointer;touch-action:manipulation;background:#fff8ea;border-radius:10px;padding:10px 18px;font-size:1.05rem;font-weight:800}.btn:active{box-shadow:0 1px 0 var(--cocoa);transform:translateY(3px)}.btn-primary{background:var(--custard)}.btn-small{min-height:44px;padding:8px 12px;font-size:.95rem}.btn-huge{min-height:64px;font-size:1.4rem}.btn[aria-pressed=true]{background:var(--teal);color:var(--cream)}.btn:disabled{opacity:.55;cursor:not-allowed}:focus-visible{outline:4px solid var(--teal);outline-offset:3px}h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus{outline:none}.main-actions{gap:12px;display:grid}.main-actions .btn{min-height:60px;font-size:1.25rem}input,select{font:inherit;border:3px solid var(--cocoa);min-height:48px;color:var(--cocoa);background:#fff8ea;border-radius:8px;padding:6px 10px}.join-form{grid-template-columns:1fr auto;align-items:end;gap:8px;display:grid}.join-form label{grid-column:1/-1;font-weight:700}#join-code{text-transform:uppercase;letter-spacing:.3em;font-size:1.3rem;font-weight:800}.pick-layout{grid-template-columns:1fr minmax(220px,320px);gap:14px;display:grid}@media (max-width:720px){.pick-layout{grid-template-columns:1fr}}.cards{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px;display:grid}.card{border:3px solid var(--cocoa);cursor:pointer;font:inherit;color:var(--cocoa);background:#fff8ea;border-radius:6px;flex-direction:column;align-items:center;gap:4px;min-height:48px;padding:8px 6px 10px;display:flex;position:relative}.card img{width:84px;height:84px}.card .name{font-size:1.05rem;font-weight:900}.card .role{text-align:center;font-size:.8rem}.card[aria-checked=true]{background:var(--custard);box-shadow:0 0 0 3px var(--cocoa) inset}.card[aria-checked=true]:after{content:"PICKED";background:var(--raspberry);color:var(--cream);border:2px solid var(--cocoa);padding:2px 6px;font-size:.7rem;font-weight:900;position:absolute;top:6px;right:-6px;transform:rotate(12deg)}.preview canvas{border:3px solid var(--cocoa);background:#fff8ea;border-radius:6px;width:100%;height:auto}.stats{grid-template-columns:auto 1fr;gap:2px 12px;margin:6px 0 0;display:grid}.stats dt{font-weight:700}.stats dd{margin:0}.options-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;display:grid}.options-grid label{gap:4px;font-weight:700;display:grid}.room-code-block{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.room-code{letter-spacing:.25em;background:var(--cocoa);color:var(--custard);border-radius:6px;padding:2px 12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:2.2rem}.tickets{grid-template-columns:1fr 1fr;gap:12px;display:grid}.ticket{border:3px dashed var(--cocoa);background:#fff8ea;border-radius:6px;grid-template-columns:72px 1fr;align-items:center;gap:4px 10px;min-height:110px;padding:10px;display:grid;position:relative}.ticket img{grid-row:span 3;width:72px;height:72px}.ticket .stamp{border:3px solid var(--teal);color:var(--teal);letter-spacing:.1em;padding:2px 8px;font-weight:900;position:absolute;bottom:8px;right:8px;transform:rotate(-10deg)}.ticket .stamp.waiting{color:#5a3325;border-color:#5a3325}.receipt-table{border-collapse:collapse;width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.receipt-table td,.receipt-table th{border-bottom:1px dashed var(--cocoa);text-align:left;padding:4px 2px}.receipt-table td:last-child,.receipt-table th:last-child{text-align:right}.big-number{font-variant-numeric:tabular-nums;margin:0;font-size:3rem;font-weight:900}.howto{gap:6px;margin:0;padding-left:1.1em;display:grid}fieldset{border:2px dashed var(--cocoa);border-radius:6px;gap:8px;display:grid}fieldset label{align-items:center;gap:10px;min-height:44px;display:flex}fieldset input[type=checkbox]{width:26px;height:26px;min-height:0}.overlay{z-index:50;padding:calc(12px + var(--safe-t)) calc(12px + var(--safe-r)) calc(12px + var(--safe-b)) calc(12px + var(--safe-l));background:#2b1a1ab8;place-items:center;display:grid;position:fixed;inset:0;overflow:auto}#toast{left:50%;bottom:calc(16px + var(--safe-b));background:var(--cocoa);color:var(--cream);z-index:60;opacity:0;pointer-events:none;border-radius:8px;max-width:90vw;padding:10px 16px;font-weight:700;transition:opacity .2s;position:fixed;transform:translate(-50%)}#toast.show{opacity:1}#stage-wrap{background:#1e1414;position:fixed;inset:0}#stage{left:calc(50% + (var(--safe-l) - var(--safe-r)) / 2);top:calc(50% + (var(--safe-t) - var(--safe-b)) / 2);width:min(calc(100dvw - var(--safe-l) - var(--safe-r)), calc((100dvh - var(--safe-t) - var(--safe-b)) * 16 / 9));aspect-ratio:16/9;position:absolute;transform:translate(-50%,-50%)}#game,#game canvas{position:absolute;inset:0;width:100%!important;height:100%!important;margin:0!important}#hud{pointer-events:none;color:var(--cocoa);font-weight:900;position:absolute;inset:0}#hud-score{background:var(--cream);border:3px solid var(--cocoa);font-variant-numeric:tabular-nums;border-radius:0 0 10px 10px;gap:.35em;padding:.1em .8em;font-size:clamp(14px,3.2cqw,34px);display:flex;position:absolute;top:.4%;left:50%;transform:translate(-50%)}#stage{container-type:size}#hud-s0{color:var(--raspberry)}#hud-s1{color:var(--teal)}#hud-timer{color:var(--cream);text-shadow:0 2px 0 var(--cocoa);font-variant-numeric:tabular-nums;font-size:clamp(12px,2.2cqw,24px);position:absolute;top:9%;left:50%;transform:translate(-50%)}#hud-banner{color:var(--custard);-webkit-text-stroke:2px var(--cocoa);text-shadow:0 5px 0 var(--cocoa);white-space:nowrap;font-size:clamp(22px,7cqw,72px);position:absolute;top:38%;left:50%;transform:translate(-50%,-50%)}#hud-hint{background:var(--cream);border:3px solid var(--cocoa);white-space:nowrap;border-radius:8px;padding:.3em .8em;font-size:clamp(12px,1.9cqw,20px);position:absolute;top:14%;left:50%;transform:translate(-50%)}#hud-hint:empty{display:none}#hud-badge{background:var(--cocoa);color:var(--cream);border-radius:6px;padding:.25em .6em;font-size:clamp(10px,1.4cqw,15px);position:absolute;top:1%;right:1%}#hud-badge:empty{display:none}#net-banner{background:var(--raspberry);color:var(--cream);border:3px solid var(--cocoa);z-index:5;border-radius:8px;padding:8px 14px;font-size:clamp(12px,2cqw,20px);font-weight:900;position:absolute;top:16%;left:50%;transform:translate(-50%)}#match-menu{top:calc(6px + var(--safe-t));left:calc(6px + var(--safe-l));z-index:20;position:fixed}#controls{z-index:10;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;position:fixed;inset:0}#controls.hidden-controls .zone,#controls.hidden-controls .dash{display:none}.zone{position:absolute;top:18%;bottom:0}#zone-move{width:45%;left:0}#zone-aim{width:45%;right:0}#controls.left-handed #zone-move{left:auto;right:0}#controls.left-handed #zone-aim{left:0;right:auto}.stick{width:calc(128px * var(--ctl-scale));height:calc(128px * var(--ctl-scale));margin:calc(-64px * var(--ctl-scale)) 0 0 calc(-64px * var(--ctl-scale));pointer-events:none;background:#2b1a1a40;border:3px solid #fff1d0bf;border-radius:50%;position:absolute}.stick .knob{width:calc(56px * var(--ctl-scale));height:calc(56px * var(--ctl-scale));margin:calc(-28px * var(--ctl-scale)) 0 0 calc(-28px * var(--ctl-scale));border:3px solid var(--cocoa);background:#fff1d0d9;border-radius:50%;position:absolute;top:50%;left:50%}#stick-aim .knob{background:#f3c84be6}#stick-aim.firing{border-color:var(--custard)}.dash{right:calc(22px + var(--safe-r));bottom:calc(150px * var(--ctl-scale) + var(--safe-b));width:calc(80px * var(--ctl-scale));height:calc(80px * var(--ctl-scale));border:4px solid var(--cocoa);color:var(--cream);font:900 calc(16px * var(--ctl-scale)) system-ui, sans-serif;box-shadow:0 4px 0 var(--cocoa);touch-action:none;background:#cc3a5be6;border-radius:50%;position:absolute}#controls.left-handed .dash{right:auto;left:calc(22px + var(--safe-l))}.dash.cooldown{opacity:.5}.dash.pressed{box-shadow:0 1px 0 var(--cocoa);transform:translateY(3px)}#controls:not(.touch-mode) .zone,#controls:not(.touch-mode) .dash{display:none}#controls:not(.touch-mode){pointer-events:none}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}