:root{--cga-black: #000000;--cga-white: #ffffff;--cga-cyan: #00ffff;--cga-magenta: #ff00ff;--cga-yellow: #ffff00;--border: 4px solid var(--cga-black);--border-thick: 6px solid var(--cga-black);--shadow-hard: 8px 8px 0 var(--cga-black);--shadow-cyan: 8px 8px 0 var(--cga-cyan);--shadow-magenta: 8px 8px 0 var(--cga-magenta);--font-mono: "JetBrains Mono", "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;--font-bitmap: "VT323", "Courier New", monospace}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;width:100%;overflow:hidden;font-family:var(--font-mono);background:var(--cga-black);color:var(--cga-white);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-font-smoothing:none;font-smooth:never;text-rendering:geometricPrecision}button{font-family:inherit;cursor:pointer;text-transform:uppercase}input{font-family:inherit}.canvas-page{position:relative;width:100vw;height:100vh;overflow:hidden;background:repeating-linear-gradient(0deg,rgba(0,255,255,.04) 0,rgba(0,255,255,.04) 1px,transparent 1px,transparent 3px),var(--cga-black)}.canvas-page canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.canvas-header{position:absolute;top:24px;left:24px;z-index:10;background:var(--cga-black);border:var(--border-thick);padding:14px 20px;box-shadow:var(--shadow-magenta)}.canvas-header h1{font-family:var(--font-bitmap);font-size:48px;font-weight:400;letter-spacing:2px;color:var(--cga-magenta);text-transform:uppercase;line-height:1;text-shadow:3px 3px 0 var(--cga-cyan)}.canvas-header p{color:var(--cga-cyan);font-size:12px;text-transform:uppercase;letter-spacing:1px;margin-top:6px;font-weight:700}.mode-nav{display:flex;gap:8px;margin-top:12px}.mode-nav a{text-decoration:none;padding:6px 12px;font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--cga-cyan);background:var(--cga-black);border:3px solid var(--cga-cyan)}.mode-nav a.active{color:var(--cga-black);background:var(--cga-magenta);border-color:var(--cga-magenta)}.canvas-top-right{position:absolute;top:24px;right:24px;z-index:10;display:flex;flex-direction:column;align-items:flex-end;gap:10px}.mode-toggle{padding:10px 16px;background:var(--cga-magenta);color:var(--cga-black);border:var(--border-thick);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;box-shadow:var(--shadow-cyan);transition:transform .05s steps(2,end),box-shadow .05s steps(2,end)}.mode-toggle:active{transform:translate(6px,6px);box-shadow:2px 2px 0 var(--cga-cyan)}.player-count{padding:10px 16px;background:var(--cga-cyan);color:var(--cga-black);border:var(--border-thick);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:1px;box-shadow:var(--shadow-hard)}.reset-ball{margin-left:10px;padding:6px 10px;background:var(--cga-yellow);color:var(--cga-black);border:3px solid var(--cga-black);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1px;transition:transform .05s steps(2,end)}.reset-ball:active{transform:translate(3px,3px)}.canvas-steps{position:absolute;left:24px;top:50%;transform:translateY(-50%);z-index:10;display:flex;flex-direction:column;gap:16px;list-style:none;padding:0;margin:0}.canvas-step{display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--cga-black);border:var(--border-thick);box-shadow:var(--shadow-cyan);min-width:240px}.canvas-step:nth-child(2){background:var(--cga-magenta);box-shadow:var(--shadow-cyan)}.canvas-step:nth-child(2) .canvas-step-num,.canvas-step:nth-child(2) .canvas-step-text{color:var(--cga-black)}.canvas-step:nth-child(3){background:var(--cga-cyan);box-shadow:8px 8px 0 var(--cga-magenta)}.canvas-step:nth-child(3) .canvas-step-num,.canvas-step:nth-child(3) .canvas-step-text{color:var(--cga-black)}.canvas-step-num{font-family:var(--font-bitmap);font-size:38px;line-height:1;color:var(--cga-magenta);letter-spacing:1px}.canvas-step-text{font-size:14px;font-weight:800;letter-spacing:1.5px;color:var(--cga-white);line-height:1.2;text-transform:uppercase}.mobile-warning{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:repeating-linear-gradient(45deg,var(--cga-magenta) 0,var(--cga-magenta) 24px,var(--cga-black) 24px,var(--cga-black) 48px);display:flex;align-items:center;justify-content:center;padding:24px}.mobile-warning-card{background:var(--cga-black);border:var(--border-thick);box-shadow:var(--shadow-cyan);padding:28px;max-width:360px;display:flex;flex-direction:column;gap:18px}.mobile-warning-eyebrow{display:inline-block;align-self:flex-start;background:var(--cga-yellow);color:var(--cga-black);padding:4px 10px;font-size:12px;font-weight:800;letter-spacing:2px;border:3px solid var(--cga-black)}.mobile-warning-card h2{font-family:var(--font-bitmap);font-size:44px;font-weight:400;letter-spacing:2px;line-height:.95;color:var(--cga-magenta);text-shadow:3px 3px 0 var(--cga-cyan);text-transform:uppercase}.mobile-warning-card p{color:var(--cga-white);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1px;line-height:1.5}.mobile-warning-cta{display:inline-block;text-align:center;text-decoration:none;padding:16px;font-size:15px;font-weight:800;letter-spacing:2px;background:var(--cga-cyan);color:var(--cga-black);border:var(--border-thick);box-shadow:var(--shadow-magenta);text-transform:uppercase}.mobile-warning-cta:active{transform:translate(6px,6px);box-shadow:2px 2px 0 var(--cga-magenta)}.qr-panel{position:absolute;bottom:24px;right:24px;z-index:10;background:var(--cga-white);padding:16px;border:var(--border-thick);box-shadow:var(--shadow-magenta);display:flex;flex-direction:column;align-items:center;gap:10px}.qr-panel .qr-label{font-family:var(--font-bitmap);font-size:22px;font-weight:400;color:var(--cga-black);text-transform:uppercase;letter-spacing:2px;line-height:1}.qr-panel .qr-room{font-size:13px;font-weight:800;color:var(--cga-black);background:var(--cga-yellow);padding:4px 10px;border:3px solid var(--cga-black);letter-spacing:2px;text-transform:uppercase}.connection-status{position:absolute;bottom:24px;left:24px;z-index:10;display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--cga-black);color:var(--cga-cyan);border:var(--border-thick);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:1px;box-shadow:var(--shadow-cyan)}.status-dot{width:12px;height:12px;background:var(--cga-magenta);border:2px solid var(--cga-white)}.status-dot.connected{background:var(--cga-cyan);animation:cga-blink 1s steps(2,end) infinite}@keyframes cga-blink{0%,50%{opacity:1}50.01%,to{opacity:.35}}.controller-page{width:100vw;height:100vh;display:flex;flex-direction:column;background:repeating-linear-gradient(0deg,rgba(255,0,255,.05) 0,rgba(255,0,255,.05) 1px,transparent 1px,transparent 3px),var(--cga-black);overflow:hidden;touch-action:none}.controller-form{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 18px;gap:14px;text-align:center}.controller-form h1{font-family:var(--font-bitmap);font-size:48px;font-weight:400;letter-spacing:3px;color:var(--cga-magenta);text-transform:uppercase;line-height:.95;text-shadow:3px 3px 0 var(--cga-cyan);margin-bottom:4px}@media (min-height: 720px){.controller-form h1{font-size:56px}.controller-form{padding:24px;gap:18px}}.controller-form p{color:var(--cga-white);font-size:13px;line-height:1.5;max-width:320px;text-transform:uppercase;letter-spacing:1px;font-weight:700}.nickname-row{display:flex;gap:10px;width:100%;max-width:320px;align-items:stretch}.controller-form input{flex:1;min-width:0;padding:16px 14px;font-size:18px;font-weight:700;background:var(--cga-white);border:var(--border-thick);color:var(--cga-black);outline:none;text-align:center;text-transform:uppercase;letter-spacing:1.5px;box-shadow:var(--shadow-cyan)}.controller-form .roll-button{flex:0 0 auto;width:64px;max-width:64px;padding:0;font-size:28px;font-weight:800;background:var(--cga-yellow);color:var(--cga-black);border:var(--border-thick);box-shadow:var(--shadow-hard);transition:transform .05s steps(2,end),box-shadow .05s steps(2,end)}.controller-form .roll-button:active{transform:translate(4px,4px);box-shadow:4px 4px 0 var(--cga-black)}.controller-form input::placeholder{color:var(--cga-black);opacity:.4}.controller-form input:focus{box-shadow:var(--shadow-magenta)}.controller-form button{width:100%;max-width:320px;padding:18px;font-size:16px;font-weight:800;background:var(--cga-magenta);color:var(--cga-black);border:var(--border-thick);box-shadow:var(--shadow-cyan);text-transform:uppercase;letter-spacing:2px;transition:transform .05s steps(2,end),box-shadow .05s steps(2,end)}.controller-form button:active{transform:translate(6px,6px);box-shadow:2px 2px 0 var(--cga-cyan)}.controller-form button:disabled{opacity:.5}.controller-form .error{color:var(--cga-black);background:var(--cga-yellow);padding:8px 12px;border:4px solid var(--cga-black);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:1px}.controller-form .room-tag{font-size:12px;color:var(--cga-cyan);font-weight:800;text-transform:uppercase;letter-spacing:2px}.controller-active{flex:1;display:flex;flex-direction:column;padding:14px 18px 32px;gap:10px;position:relative;touch-action:none;min-height:0}.controller-active .status{display:flex;align-items:stretch;justify-content:space-between;gap:10px}.controller-active .nickname-badge{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--cga-cyan);color:var(--cga-black);border:var(--border-thick);font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:1px}.controller-active .connection-status{position:static;box-shadow:none}.color-swatch{width:16px;height:16px;border:3px solid var(--cga-black)}.wand-visual{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;padding:12px 0}.wand-icon{font-size:72px;line-height:1;transition:transform .05s steps(3,end);filter:drop-shadow(3px 0 0 var(--cga-cyan)) drop-shadow(-3px 0 0 var(--cga-magenta))}.recenter-button{margin-top:auto;padding:10px;font-size:12px}@media (min-height: 720px){.wand-icon{font-size:96px}.wand-visual{padding:24px 0}.controller-active{padding:16px 20px 36px;gap:14px}}.controller-hint{color:var(--cga-yellow);font-size:12px;text-align:center;padding:8px;line-height:1.4;text-transform:uppercase;letter-spacing:1px;font-weight:700}.cast-button{padding:18px;font-size:16px;font-weight:800;background:var(--cga-magenta);color:var(--cga-black);border:var(--border-thick);box-shadow:var(--shadow-cyan);text-transform:uppercase;letter-spacing:2px;-webkit-tap-highlight-color:transparent;transition:transform .05s steps(2,end),box-shadow .05s steps(2,end)}.cast-button.secondary{background:var(--cga-black);color:var(--cga-cyan);box-shadow:var(--shadow-magenta)}.cast-button:active{transform:translate(6px,6px);box-shadow:2px 2px 0 var(--cga-cyan)}.cast-button.secondary:active{box-shadow:2px 2px 0 var(--cga-magenta)}.color-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:320px;width:100%}.color-picker button{width:100%;aspect-ratio:1;border:var(--border);padding:0;box-shadow:4px 4px 0 var(--cga-black);touch-action:none}.color-picker button.selected{outline:3px solid var(--cga-white);outline-offset:-10px}.color-hint{font-size:11px!important;color:var(--cga-cyan)!important;letter-spacing:1.5px;font-weight:800;margin-top:-4px}