:root{font-family:Space Mono,monospace;color:#fefce8;--bg-base: #06010f;--bg-panel: #100625;--panel-border: #8b5cf6;--text-soft: #d6d3d1;--accent-cyan: #22d3ee;--accent-pink: #f43f5e;--accent-yellow: #facc15}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 20% 15%,#4e007a8c,#06010f1a 42%),radial-gradient(circle at 80% 20%,#0f766e73,#06010f1f 40%),linear-gradient(180deg,#0d0220,#06010f);background-attachment:fixed}.app-root{width:100%;margin:0;padding:20px;display:flex;flex-direction:column;gap:30px}.landing-hero{position:relative;overflow:hidden;border:1px solid rgb(250 204 21 / 50%);border-radius:18px;padding:34px;background:linear-gradient(135deg,#14072af2,#2e1065d9 46%,#082f49d1);box-shadow:0 0 0 1px #0f172a47,0 20px 38px #0206179e}.brand-logo-hero{width:min(360px,36vw);min-width:220px;border-radius:14px;border:1px solid rgb(251 191 36 / 34%);box-shadow:0 18px 36px #02061775}.hero-layout{display:flex;align-items:center;justify-content:space-between;gap:24px}.hero-content{flex:1 1 auto}.landing-hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#facc1500 0 8px,#facc1514 9px,#facc1500 10px);mix-blend-mode:screen}.eyebrow{margin:0 0 8px;color:var(--accent-yellow);font-size:12px;text-transform:uppercase;letter-spacing:.14em;font-weight:700}.landing-hero h1{margin:0;font-size:clamp(34px,8vw,68px);line-height:.95;letter-spacing:.03em;text-transform:uppercase;color:#fff7ed;text-shadow:0 0 12px rgb(244 63 94 / 58%),0 0 32px rgb(34 211 238 / 34%)}.hero-copy{margin:16px 0 0;max-width:700px;color:var(--text-soft);font-size:clamp(16px,2.5vw,20px);line-height:1.45}.hero-actions{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px}.hero-button{border:1px solid transparent;border-radius:999px;padding:10px 18px;color:#fff;cursor:pointer;font:inherit;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.hero-button.primary{background:linear-gradient(135deg,#f43f5e,#fb7185);box-shadow:0 8px 16px #f43f5e59}.hero-button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}.hero-button.primary:hover{background:linear-gradient(135deg,#fb7185,#fecdd3);color:#3f0012}.hero-button.ghost{background:#0f172a7f;border-color:#22d3eea6}.hero-button.ghost:hover{background:#0e749073}.hero-tags{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}.hero-tags span{border:1px solid rgb(251 191 36 / 42%);background:#0f172a70;border-radius:999px;padding:4px 10px;font-size:12px;color:#fef08a}.play-shell{display:grid;grid-template-columns:320px 1fr;gap:18px}.hud-panel-shell{min-width:0}.play-shell.gameplay-focus{grid-template-columns:1fr;justify-items:center}.play-shell.gameplay-focus .game-canvas-shell{width:100%;max-width:2200px;margin:0 auto}.hud-panel-shell.is-hidden{display:none}.hud-panel{background:linear-gradient(180deg,#100625f2,#070412f5);border:1px solid rgb(139 92 246 / 75%);border-radius:12px;padding:16px}.hud-panel h1{margin-top:0;margin-bottom:8px;font-size:28px}.hud-title{display:flex;align-items:center;gap:10px}.hud-title-logo{width:48px;height:48px;border-radius:8px;object-fit:cover;border:1px solid rgb(251 191 36 / 34%)}.hud-panel p{margin:4px 0}.status{color:var(--accent-cyan)}.input-label{display:block;margin-top:10px;margin-bottom:4px;font-size:13px;color:#ddd6fe}.device-select{width:100%;background:#0f172a;color:#f8fafc;border:1px solid #4338ca;border-radius:8px;padding:6px 8px}.error{color:#fda4af;margin-top:6px}.divider{border:0;border-top:1px solid #4338ca;margin:14px 0}.analytics-toggle{display:flex;align-items:center;gap:8px;font-size:13px;color:#ddd6fe}.analytics-toggle input{margin:0}.analytics-note{margin:6px 0 8px;font-size:12px;color:#cbd5e1}.subheading{margin:14px 0 8px;font-size:16px}.note-list{margin:0;padding-left:16px;max-height:160px;overflow:auto;font-size:12px;color:#e2e8f0}.buttons{margin-top:12px;display:flex;flex-direction:column;gap:8px}.feedback-link-hud-btn{margin-top:12px;width:100%;border:1px solid rgb(34 211 238 / 60%);background:#082f4973;color:#e0f2fe;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.feedback-link-hud-btn:hover{background:#082f49b8}.community-link-hud{margin-top:10px;display:inline-flex;width:100%;align-items:center;justify-content:center;gap:8px;padding:8px 10px;border-radius:8px;border:1px solid rgb(147 51 234 / 65%);background:#5865f247;color:#eef2ff;font-weight:700;text-decoration:none}.community-link-hud:hover{background:#5865f266}button{background:linear-gradient(135deg,#4338ca,#7c3aed);border:none;color:#fff;border-radius:8px;padding:8px 10px;cursor:pointer;font:inherit}button:hover{background:linear-gradient(135deg,#6366f1,#8b5cf6)}button:disabled{background:#3f3f46;cursor:not-allowed}.game-canvas{border:1px solid rgb(34 211 238 / 60%);border-radius:12px;overflow:hidden;height:calc(100vh - 24px);min-height:620px;width:100%;display:flex;align-items:center;justify-content:center;background:#02061773;box-shadow:inset 0 0 0 1px #0f766e4d}.game-canvas-shell{position:relative}.game-stats-layer{position:absolute;inset:12px 14px auto;display:flex;justify-content:flex-end;pointer-events:none;z-index:6}.game-exit-button{position:absolute;top:14px;left:50%;transform:translate(-50%);z-index:7;padding:8px 14px;border:1px solid rgb(248 113 113 / 75%);border-radius:999px;background:linear-gradient(135deg,#7f1d1deb,#b91c1ceb);color:#fee2e2;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;box-shadow:0 0 16px #f8717152}.game-exit-button:hover{background:linear-gradient(135deg,#991b1bf5,#dc2626f5)}.game-stats-panel{width:min(92vw,460px);min-width:220px;max-width:460px;border:1px solid rgb(34 211 238 / 52%);border-radius:10px;padding:10px 12px;background:repeating-linear-gradient(0deg,#22d3ee00 0 7px,#22d3ee14 8px,#22d3ee00 9px),linear-gradient(180deg,#020617e5,#0f172ad6);box-shadow:inset 0 0 0 1px #f472b629,0 0 22px #22d3ee33}.game-stats-panel.score-overlay{border-color:#f472b694;box-shadow:inset 0 0 0 1px #22d3ee24,0 0 22px #f472b633}.game-stats-panel p{margin:2px 0;font-size:12px;color:#e2e8f0;text-shadow:0 0 10px rgb(56 189 248 / 30%)}.game-score-title{margin:0;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#f9a8d4}.game-score-value{margin:2px 0 8px;font-size:clamp(26px,3vw,38px);font-weight:900;letter-spacing:.06em;line-height:1;color:#fef3c7;text-shadow:0 0 12px rgb(250 204 21 / 55%),0 0 24px rgb(244 114 182 / 42%)}.game-stat-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:3px 0}.game-stat-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#c4b5fd}.game-stat-value{font-size:13px;font-weight:700;color:#f8fafc}.game-stat-note{margin:5px 0 0;font-size:11px;color:#fbcfe8;line-height:1.35}.game-instructions{position:absolute;inset:18px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;text-align:center;border:1px solid rgb(56 189 248 / 40%);border-radius:12px;background:radial-gradient(circle at 15% 10%,#f472b638,#111827cc 36%),linear-gradient(180deg,#0f172ad6,#020617f0);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);padding:20px}.game-instructions h2{margin:0;font-size:clamp(18px,2.7vw,30px);max-width:780px;color:#f8fafc}.game-instructions p{margin:0;color:#cbd5e1;max-width:720px;line-height:1.5}.start-mode-switch{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.start-mode-button{min-width:190px;border:1px solid rgb(34 211 238 / 45%);background:#0f172aa3;color:#e2e8f0}.start-mode-button.active{border-color:#f43f5ecc;background:linear-gradient(135deg,#fb7185,#f43f5e 52%,#be123c);color:#fff7ed}.game-results{gap:8px}.feedback-form-inline{width:min(620px,100%);display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid rgb(34 211 238 / 46%);border-radius:10px;background:#0f172a9e}.feedback-form-copy{margin:0;font-size:13px;line-height:1.45;color:#dbeafe}.feedback-label{margin:2px 0 0;text-align:left;width:100%;font-size:13px;font-weight:700;color:#fef08a}.feedback-stars{display:flex;gap:8px;width:100%;justify-content:flex-start}.feedback-star{min-width:42px;min-height:40px;border:1px solid rgb(147 197 253 / 48%);border-radius:8px;background:#1e293be0;color:#94a3b8f2;font-size:22px;line-height:1;padding:0}.feedback-star:hover{color:#fef08a;border-color:#facc15b8}.feedback-star.is-active{color:#fef08a;border-color:#facc15d1;background:linear-gradient(180deg,#92400eeb,#b45309eb)}.feedback-textarea{width:100%;min-height:120px;resize:vertical;border-radius:8px;border:1px solid rgb(56 189 248 / 52%);background:#0f172ae0;color:#f8fafc;padding:10px 12px;font:inherit}.feedback-honeypot{position:absolute;left:-10000px;width:1px;height:1px;opacity:0;pointer-events:none}.feedback-form-status{margin:0;width:100%;text-align:left;font-size:13px;line-height:1.35}.feedback-form-status.is-success{color:#86efac}.feedback-form-status.is-error{color:#fda4af}.feedback-submit-button{width:100%;padding:10px 14px;border-radius:8px;background:linear-gradient(135deg,#22c55e,#16a34a);color:#f0fdf4;font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.feedback-submit-button:hover{background:linear-gradient(135deg,#4ade80,#22c55e)}.community-link-inline{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:290px;padding:10px 14px;border-radius:10px;border:1px solid rgb(147 51 234 / 65%);background:#5865f23d;color:#eef2ff;text-decoration:none;font-weight:700}.community-link-inline:hover{background:#5865f266}.community-link-icon{width:18px;height:18px;flex:0 0 auto}.result-line{font-size:20px;font-weight:700;color:#f8fafc}.keyboard-svg{width:min(500px,100%);height:auto}.keyboard-instructions{width:min(500px,100%);margin-top:6px;padding:10px 12px;border:1px solid rgb(56 189 248 / 38%);border-radius:10px;background:#0f172a8c}.keyboard-instructions p{margin:0;text-align:left;font-size:12px;line-height:1.4;color:#dbeafe}.keyboard-instructions p+p{margin-top:4px}.game-start-button{width:min(380px,100%);padding:14px 18px;font-size:clamp(18px,2.4vw,24px);font-weight:700;text-transform:uppercase;letter-spacing:.06em;border-radius:12px;background:linear-gradient(135deg,#fb7185,#f43f5e 52%,#be123c);box-shadow:0 10px 24px #e11d486b,0 0 0 1px #fff1f24d inset}.game-start-button:hover{background:linear-gradient(135deg,#fda4af,#fb7185 52%,#e11d48)}.start-connect-button{width:min(380px,100%);border:1px solid rgb(34 211 238 / 62%);background:#082f4985;color:#e0f2fe;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.start-connect-button:hover{background:#082f49c2}.game-canvas canvas{width:auto;height:auto;max-width:100%;max-height:100%;display:block}@media(max-width:1000px){.play-shell{grid-template-columns:1fr}}@media(max-width:900px){.app-root{padding:14px}.landing-hero{padding:22px}.hero-layout{flex-direction:column-reverse;align-items:flex-start}.brand-logo-hero{width:min(100%,420px);min-width:0}.game-canvas{height:min(78vh,700px);min-height:420px}.game-instructions{inset:12px;padding:16px;justify-content:flex-start;overflow:auto;-webkit-overflow-scrolling:touch}.game-stats-layer{inset:10px 10px auto;justify-content:center}.game-stats-panel{width:calc(100% - 20px);min-width:0;max-width:100%}}