:root{--asphalt:#23252a;--asphalt-line:#2c2f35;--cloth:#f6f1e4;--cardboard:#d8b47a;--cardboard-dark:#b98f52;--ink:#161616;--paint-red:#d42a20;--hi-vis:#ffd400;--hi-vis-dark:#e0b800;--muted:#5a4a32;--font-placard:"Anton", Impact, "Arial Black", "Helvetica Neue", sans-serif;--font-marker:"Permanent Marker", "Comic Sans MS", "Chalkboard SE", cursive;--font-body:system-ui, -apple-system, "Segoe UI", sans-serif}html,body,#root{background:var(--asphalt);width:100%;height:100%;margin:0;overflow:hidden}*{box-sizing:border-box}.screen{color:var(--ink);font:16px/1.4 var(--font-body);background:repeating-linear-gradient(-35deg, transparent 0 46px, var(--asphalt-line) 46px 52px), var(--asphalt);flex-direction:column;align-items:center;gap:22px;padding:36px 16px 48px;display:flex;position:fixed;inset:0;overflow-y:auto}.banner{background:var(--cloth);text-align:center;border-radius:6px 14px 8px 18px/18px 8px 14px 6px;width:min(760px,100%);padding:18px 28px 22px;position:relative;transform:rotate(-1.5deg);box-shadow:0 10px 0 -2px #00000059}.banner:before,.banner:after{content:"";z-index:-1;background:linear-gradient(90deg,#7a5530,#a7794a 50%,#7a5530);border-radius:4px;width:10px;height:calc(100% + 60px);position:absolute;top:-14px}.banner:before{left:10px}.banner:after{right:10px}.banner-title{font-family:var(--font-placard);letter-spacing:.02em;text-transform:uppercase;color:var(--paint-red);text-shadow:3px 3px 0 var(--ink);margin:0;font-size:clamp(64px,14vw,132px);font-weight:400;line-height:.95}.banner-slogan,.banner-kicker{font-family:var(--font-marker);color:var(--ink);margin:6px 0 0;font-size:clamp(18px,3.4vw,26px)}.banner-kicker{margin:0 0 4px;font-size:20px}.banner-small .banner-title{font-size:clamp(44px,9vw,84px)}.lobby-code{text-transform:none;color:var(--ink);text-shadow:none;vertical-align:.15em;word-break:break-all;font-size:.6em}.invite-note{background:var(--hi-vis);border:3px solid var(--ink);text-align:center;max-width:560px;margin:4px 0 0;padding:8px 14px;font-weight:600;transform:rotate(.8deg)}.placards{flex-wrap:wrap;justify-content:center;gap:22px;width:min(760px,100%);display:flex}.placard{background:repeating-linear-gradient(90deg, transparent 0 7px, #00000009 7px 9px), var(--cardboard);border:3px solid var(--cardboard-dark);border-radius:3px;flex-direction:column;flex:300px;gap:10px;padding:18px 20px 20px;display:flex;box-shadow:6px 6px #00000073}.placard:nth-child(odd){transform:rotate(-1deg)}.placard:nth-child(2n){transform:rotate(1.2deg)}.placard-name{flex:none;width:min(520px,100%);transform:rotate(.6deg)}.placard-main{outline:4px solid var(--hi-vis);outline-offset:4px}.placard-label{font-family:var(--font-placard);text-transform:uppercase;letter-spacing:.01em;margin:0;font-size:30px;font-weight:400;line-height:1.05}.placard-text{font-family:var(--font-marker);color:var(--muted);margin:0;font-size:17px}.field-row{gap:8px;display:flex}.field{border:3px solid var(--ink);min-width:0;color:var(--ink);font:600 18px/1.2 var(--font-body);background:#fffaf0;border-radius:2px;flex:1;padding:10px 12px}.field-code{font-family:ui-monospace,SF Mono,Menlo,monospace}.field-link{font:14px/1.2 ui-monospace,SF Mono,Menlo,monospace}.field:focus-visible{outline:3px solid var(--hi-vis);outline-offset:1px}.btn{border:3px solid var(--ink);color:var(--ink);font-family:var(--font-placard);letter-spacing:.03em;text-transform:uppercase;cursor:pointer;box-shadow:4px 4px 0 var(--ink);background:#fffaf0;border-radius:2px;padding:10px 18px;font-size:22px;font-weight:400;transition:transform 80ms ease-out,box-shadow 80ms ease-out}.btn:hover:not(:disabled){box-shadow:5px 5px 0 var(--ink);transform:translate(-1px,-1px)}.btn:active:not(:disabled){box-shadow:1px 1px 0 var(--ink);transform:translate(3px,3px)}.btn:focus-visible{outline:3px solid var(--hi-vis);outline-offset:3px}.btn:disabled{cursor:progress;opacity:.6}.btn-primary{background:var(--hi-vis)}.btn-primary:hover:not(:disabled){background:var(--hi-vis-dark)}.btn-icon{padding:6px 12px;font-size:22px;line-height:1}.btn-copy{white-space:nowrap;font-size:18px}.btn-start{padding:14px 28px;font-size:30px}.btn-ghost{color:var(--cloth);border-color:var(--cloth);background:0 0;font-size:18px;box-shadow:4px 4px #00000080}.error{color:#ffd9d4;text-align:center;max-width:560px;min-height:1.4em;margin:0;font-weight:600}.error:not(:empty){background:var(--paint-red);border:3px solid var(--ink);color:#fff;padding:10px 14px;transform:rotate(-.6deg)}.count{font-family:var(--font-body);color:var(--muted);vertical-align:middle;font-size:18px;font-weight:700}.roster{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.roster li{border:2px solid var(--ink);font-family:var(--font-marker);background:#fffaf0;align-items:center;gap:8px;padding:6px 10px;font-size:19px;display:flex}.roster li.is-me{background:#fff3b0}.roster-name{overflow-wrap:anywhere;flex:1;min-width:0}.tag{border:2px solid var(--ink);font:700 12px/1.4 var(--font-body);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;padding:1px 7px}.tag-host{background:var(--paint-red);color:#fff}.lobby-actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:18px;margin-top:6px;display:flex}.waiting{background:var(--cloth);border:3px solid var(--ink);font-family:var(--font-marker);margin:0;padding:10px 16px;font-size:19px}.hud{color:#f2f2f2;pointer-events:none;-webkit-user-select:none;user-select:none;background:#0000008c;border-radius:6px;flex-direction:column;gap:2px;padding:8px 12px;font:13px/1.4 system-ui,sans-serif;display:flex;position:fixed;top:12px;left:12px}.hud-leave{color:#f2f2f2;font:inherit;cursor:pointer;pointer-events:auto;background:0 0;border:1px solid #f2f2f2;border-radius:4px;align-self:flex-start;margin-top:6px;padding:3px 8px}.hud-leave:hover{background:#ffffff26}.hud-debug{color:#ff8a65;font-size:12px}@media (width<=520px){.field-row{flex-wrap:wrap}.btn-copy{flex:1}}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.loading{color:var(--cloth);font-family:var(--font-placard);text-transform:uppercase;justify-content:center;font-size:40px}