*{margin:0;padding:0;box-sizing:border-box}body{font-family:VT323,monospace;background:#07070f;color:#e2e8f0;min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative}.scanlines{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:1000;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.08) 2px,rgba(0,0,0,.08) 4px)}.vignette{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:999;background:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.7) 100%)}.particles{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:0}.pixel{position:absolute;bottom:-20px;left:var(--x);width:var(--s);height:var(--s);background:#818cf8;opacity:.15;animation:pixel-float var(--d) linear var(--dl) infinite}@keyframes pixel-float{0%{transform:translateY(0) rotate(0);opacity:.15}50%{opacity:.4}to{transform:translateY(-110vh) rotate(360deg);opacity:0}}#root{position:relative;z-index:1;width:100%;max-width:1200px;padding:16px}.screen{display:flex;flex-direction:column;align-items:center;gap:12px}.logo{text-align:center;margin-bottom:8px}.logo-title{font-family:"Press Start 2P",monospace;font-size:36px;line-height:1.2;color:#f1f5f9;text-shadow:0 0 10px #7c3aed,0 0 20px #7c3aed,0 0 40px #7c3aed,0 0 80px #7c3aed44;letter-spacing:4px;animation:title-flicker 3s ease-in-out infinite}@keyframes title-flicker{0%,to{opacity:1}3%{opacity:.6}6%{opacity:1}7%{opacity:.8}8%{opacity:1}92%{opacity:1}95%{opacity:.7}97%{opacity:1}}.logo-sub{font-family:VT323,monospace;font-size:18px;color:#818cf8;margin-top:12px;text-transform:uppercase;letter-spacing:3px;text-shadow:0 0 8px #818cf888}.card{background:#0f0f23d9;border:1px solid rgba(129,140,248,.2);border-radius:4px;padding:24px 22px;box-shadow:0 0 10px #818cf80d,inset 0 0 30px #818cf805;width:100%}.section-title{font-family:"Press Start 2P",monospace;font-size:11px;color:#a78bfa;letter-spacing:1px;margin-bottom:8px;line-height:1.5;text-shadow:0 0 6px #a78bfa66}.section-hint{font-family:VT323,monospace;font-size:16px;color:#64748b;margin-bottom:12px;letter-spacing:1px;text-transform:uppercase}.field{margin-bottom:14px}.label-pixel{display:block;font-family:"Press Start 2P",monospace;font-size:9px;color:#818cf8;letter-spacing:1px;margin-bottom:8px;text-shadow:0 0 4px #818cf866}.input-pixel{width:100%;padding:10px 14px;background:#00000080;border:1px solid rgba(129,140,248,.3);border-radius:2px;font-family:"Press Start 2P",monospace;font-size:12px;color:#e2e8f0;outline:none;transition:border-color .15s,box-shadow .15s;letter-spacing:2px}.input-pixel:focus{border-color:#818cf8;box-shadow:0 0 8px #818cf840,inset 0 0 8px #818cf80d}.input-pixel::placeholder{color:#334155;letter-spacing:2px}.input-lg{font-size:22px;text-align:center;padding:12px;letter-spacing:6px}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.room-row{display:flex;gap:8px}.room-row input{flex:1;text-align:center;font-size:20px;letter-spacing:8px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 24px;border:none;border-radius:2px;font-family:"Press Start 2P",monospace;font-size:10px;letter-spacing:1px;cursor:pointer;transition:all .15s;width:100%;color:#f1f5f9}.btn:active{transform:scale(.96)}.btn:disabled{opacity:.25;cursor:not-allowed;transform:none}.btn-small{width:auto;padding:8px 14px;font-size:16px;font-family:VT323,monospace;background:#818cf81a;border:1px solid rgba(129,140,248,.3);color:#818cf8}.btn-small:hover{background:#818cf833}.btn-primary{background:linear-gradient(135deg,#7c3aed,#6d28d9);box-shadow:0 0 12px #7c3aed66}.btn-primary:hover:not(:disabled){box-shadow:0 0 24px #7c3aed99;transform:translateY(-1px)}.btn-secret{background:linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 0 12px #f59e0b4d}.btn-secret:hover:not(:disabled){box-shadow:0 0 24px #f59e0b80;transform:translateY(-1px)}.btn-guess{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 0 12px #10b9814d}.btn-guess:hover:not(:disabled){box-shadow:0 0 24px #10b98180;transform:translateY(-1px)}.secret-input-group,.guess-input-group{display:flex;gap:8px}.secret-input-group input,.guess-input-group input{flex:1}.secret-input-group .btn,.guess-input-group .btn{width:auto;white-space:nowrap}.status-msg{margin-top:10px;font-size:14px;color:#818cf8;text-align:center;letter-spacing:1px;text-shadow:0 0 6px #818cf866;min-height:20px}.waiting-box{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;background:#0f0f23b3;border:1px dashed rgba(129,140,248,.2);border-radius:2px;font-size:16px;color:#818cf8;letter-spacing:2px;width:100%}.blink-dot{animation:blink 1s step-end infinite;color:#a78bfa}@keyframes blink{50%{opacity:0}}.status-bar{display:flex;justify-content:space-between;width:100%;padding:6px 12px;background:#0006;border:1px solid rgba(129,140,248,.1);border-radius:2px;font-size:12px;color:#475569;letter-spacing:1px}.room-tag{color:#818cf8;text-shadow:0 0 4px #818cf844}.status-led{color:#10b981;text-shadow:0 0 6px #10b98144}.announcement-banner{width:100%;padding:12px 16px;background:linear-gradient(135deg,#7c3aed33,#7c3aed0d);border:1px solid #7c3aed;box-shadow:0 0 20px #7c3aed33;color:#a78bfa;font-family:"Press Start 2P",monospace;font-size:9px;text-align:center;letter-spacing:1px;text-shadow:0 0 8px #a78bfa88;border-radius:2px;animation:banner-flash .3s ease-out}@keyframes banner-flash{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.game-header{display:flex;align-items:center;justify-content:center;gap:12px;width:100%}.player-panel{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 20px;background:#0f0f23cc;border:1px solid rgba(129,140,248,.25);border-radius:2px;min-width:120px;width:100%}.panel-label{font-family:"Press Start 2P",monospace;font-size:9px;color:#818cf8;letter-spacing:2px}.panel-name{font-family:VT323,monospace;font-size:22px;color:#e2e8f0;letter-spacing:2px}.vs-display{font-family:"Press Start 2P",monospace;font-size:14px;color:#f59e0b;text-shadow:0 0 10px #f59e0b66}.phase-content{width:100%;display:flex;flex-direction:column;align-items:center;gap:16px}.playing-layout{width:100%}.boards-container{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:start}.player-board{background:#0a0a1cd9;border:1px solid rgba(129,140,248,.15);border-radius:4px;padding:12px;display:flex;flex-direction:column;gap:10px;transition:border-color .3s,box-shadow .3s}.player-board.active-board{border-color:#22d3ee66;box-shadow:0 0 15px #22d3ee14}.board-header{display:flex;align-items:center;gap:8px;padding-bottom:8px;border-bottom:1px solid rgba(129,140,248,.1)}.board-label{font-family:"Press Start 2P",monospace;font-size:9px;color:#818cf8;letter-spacing:1px}.board-name{font-family:VT323,monospace;font-size:20px;color:#e2e8f0;letter-spacing:1px;flex:1}.turn-pulse{color:#22d3ee;font-size:14px;animation:turn-pulse-glow 1s ease-in-out infinite}@keyframes turn-pulse-glow{0%,to{opacity:.5;text-shadow:0 0 4px #22d3ee44}50%{opacity:1;text-shadow:0 0 12px #22d3eeaa}}.ready-indicator{font-family:"Press Start 2P",monospace;font-size:7px;color:#10b981;text-shadow:0 0 4px #10b98144;letter-spacing:1px}.center-rail{display:flex;flex-direction:column;gap:12px;min-width:220px;padding-top:8px}.turn-indicator{text-align:center}.turn-badge{font-family:"Press Start 2P",monospace;font-size:9px;padding:6px 12px;border-radius:2px;letter-spacing:1px;display:inline-block}.my-turn-badge{background:#22d3ee1f;border:1px solid rgba(34,211,238,.4);color:#22d3ee;text-shadow:0 0 8px #22d3ee66;animation:badge-pulse 1.2s ease-in-out infinite}.opp-turn-badge{background:#818cf814;border:1px solid rgba(129,140,248,.25);color:#818cf8}@keyframes badge-pulse{0%,to{box-shadow:0 0 4px #22d3ee33}50%{box-shadow:0 0 16px #22d3ee66}}.center-controls{display:flex;flex-direction:column;gap:8px}.guess-card{padding:16px}.guess-card .section-title{font-size:10px;margin-bottom:4px}.guess-card .section-hint{font-size:12px;margin-bottom:10px}.attempt-grid{width:100%}.grid-title{font-family:"Press Start 2P",monospace;font-size:9px;color:#818cf8;letter-spacing:1px;margin-bottom:8px;text-shadow:0 0 4px #818cf844}.grid-rows{display:flex;flex-direction:column;gap:4px}.grid-row{display:flex;align-items:center;gap:6px;padding:4px 8px;background:#0f0f2380;border:1px solid rgba(129,140,248,.08);border-radius:2px;animation:row-slide-in .25s ease-out}@keyframes row-slide-in{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}.row-number{font-family:"Press Start 2P",monospace;font-size:7px;color:#475569;min-width:14px}.row-digits{display:flex;gap:3px}.digit-cell{font-family:"Press Start 2P",monospace;font-size:14px;color:#e2e8f0;width:20px;text-align:center;letter-spacing:1px}.row-feedback{display:flex;gap:3px;margin-left:auto}.feedback-cell{font-size:12px;width:18px;height:18px;display:flex;align-items:center;justify-content:center;border-radius:2px;border:1px solid transparent}.feedback-absent{border-color:#334155;background:#1e1e3299;color:#475569}.feedback-present{border-color:#f59e0b;background:#f59e0b1a;color:#fbbf24;box-shadow:0 0 6px #f59e0b33}.feedback-correct{border-color:#10b981;background:#10b9811a;color:#34d399;box-shadow:0 0 8px #10b9814d}.feedback-pending{font-size:12px;color:#475569;width:18px;text-align:center;animation:blink 1s step-end infinite}.empty-msg{color:#475569;font-size:13px;text-align:center;padding:10px;letter-spacing:1px}.digit-ledger{width:100%}.ledger-title{font-family:"Press Start 2P",monospace;font-size:9px;color:#818cf8;letter-spacing:1px;margin-bottom:6px;text-shadow:0 0 4px #818cf844}.ledger-list{display:grid;grid-template-columns:repeat(5,1fr);gap:3px}.ledger-entry{display:flex;align-items:center;justify-content:space-between;padding:2px 6px;border:1px solid rgba(129,140,248,.08);border-radius:2px;background:#0f0f2366;transition:border-color .2s,background .2s}.ledger-digit{font-family:"Press Start 2P",monospace;font-size:11px;color:#e2e8f0}.ledger-state{font-size:10px}.ledger-unknown{border-color:#818cf814;color:#475569}.ledger-absent{border-color:#334155;color:#475569}.ledger-absent .ledger-digit{color:#475569}.ledger-present{border-color:#f59e0b;color:#fbbf24}.ledger-present .ledger-digit{color:#fbbf24}.ledger-confirmed{border-color:#10b981;color:#34d399;background:#10b9810f}.ledger-confirmed .ledger-digit{color:#34d399}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d9;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100;animation:fade-in .3s ease-out}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.result-card{background:#0f0f23f2;border:1px solid rgba(129,140,248,.2);border-radius:4px;padding:40px 36px;text-align:center;box-shadow:0 0 40px #7c3aed26;max-width:400px;width:90%;position:relative;overflow:hidden;animation:pop-in .4s cubic-bezier(.175,.885,.32,1.275)}@keyframes pop-in{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}.result-title{font-family:"Press Start 2P",monospace;font-size:28px;line-height:1.3;margin-bottom:8px;letter-spacing:2px}#win-card .result-title{color:#34d399;text-shadow:0 0 10px #34d399,0 0 20px #34d39966}.result-sub{font-family:VT323,monospace;font-size:20px;color:#64748b;letter-spacing:3px;margin-bottom:12px;text-transform:uppercase}.secret-reveal{font-family:"Press Start 2P",monospace;font-size:16px;color:#a78bfa;margin:16px 0;line-height:1.5;text-shadow:0 0 8px #a78bfa66}.result-card .btn{margin-top:16px}.confetti-container{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.confetti-piece{position:absolute;width:6px;height:6px;animation:confetti-fall 2.5s ease-out forwards}@keyframes confetti-fall{0%{transform:translateY(-20px) rotate(0);opacity:1}to{transform:translateY(400px) rotate(720deg);opacity:0}}.my-turn{animation:turn-pulse 1.2s ease-in-out infinite}@keyframes turn-pulse{0%,to{border-color:#10b9814d}50%{border-color:#10b981b3;box-shadow:0 0 15px #10b98126}}@media(max-width:900px){.boards-container{grid-template-columns:1fr}.center-rail{min-width:unset;order:-1}#root{max-width:520px}}@media(max-width:520px){#root{padding:10px}.card{padding:18px 14px}.logo-title{font-size:24px}.secret-input-group,.guess-input-group{flex-direction:column}.secret-input-group .btn,.guess-input-group .btn{width:100%}.game-header{flex-wrap:wrap}.player-panel{min-width:90px;padding:8px 14px}.panel-name{font-size:17px}}