*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;font-family:Courier New,monospace;background:#1a1a1a;color:silver;overflow:hidden;-webkit-user-select:none;user-select:none}body{background:linear-gradient(135deg,#1a1a1a,#2a2a2a);background-attachment:fixed}@keyframes scanlines{0%{opacity:.8}50%{opacity:.4}to{opacity:.8}}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(90deg,transparent,transparent 2px,rgba(192,192,192,.03) 2px,rgba(192,192,192,.03) 4px);pointer-events:none;z-index:1000;animation:scanlines 2s infinite}.cell{position:relative;border:none;cursor:pointer;transition:transform .1s ease;-webkit-user-select:none;user-select:none;aspect-ratio:1;min-width:0;min-height:0}.cell-inner{position:absolute;left:1px;right:1px;top:1px;bottom:1px;display:flex;align-items:center;justify-content:center}.cell-content{font-family:Courier New,monospace;font-weight:700;font-size:min(1.2vw,12px);position:relative;z-index:2;transition:all .3s ease}.cell.off .cell-inner{background:#010a0f;color:#606060}.cell.off:hover .cell-inner{background:#055049;color:#00c399;outline:1px solid #00c399}.cell.off .cell-content{pointer-events:none;background:#feca67;width:70%;height:70%;opacity:0;transform:scale(2.5);border-radius:50%;transition:transform .6s ease,opacity .4s ease,border-radius .2s ease}.cell.on .cell-inner{background:#1e262f;color:#feca67;border-color:silver}.cell.on:hover .cell-inner{background:#055049;color:#00c399;outline:1px solid #00c399}.cell.on .cell-content{background:#feca67;width:70%;height:70%;opacity:1;transition:opacity .4s ease}.cell.celebration,.cell.celebration.on{animation:celebrationFlicker .1s ease-in-out infinite}@keyframes celebrationFlicker{0%,to{filter:brightness(1)}50%{filter:brightness(1.5) saturate(1.3);border-color:#fa0;color:#fa0}}.cell.cheat-mode{outline:1px solid rgba(255,170,0,.1)}.cell.cheat-mode:hover{outline:1px solid rgba(255,170,0,.3)}@media (max-width: 1200px){.cell-content{font-size:min(1.5vw,10px)}}@media (max-width: 768px){.cell-content{font-size:min(2vw,8px)}}@media (max-width: 480px){.cell-content{font-size:min(2.5vw,6px)}.cell{border-width:.5px}.cell.on{box-shadow:0 0 3px #c0c0c04d}}.game-board-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;padding:0}.game-board{display:grid;gap:0px;background:#3a3a3a;border:2px solid #808080;border-radius:0;padding:4px}.game-board.celebration{animation:celebrationPulse .5s ease-in-out infinite alternate}@keyframes celebrationPulse{0%{border-color:gray;background:#3a3a3a}to{border-color:#fa0;background:#4a3a00}}.game-board.loading{display:flex;justify-content:center;align-items:center;font-size:1.2rem;font-weight:700}.game-board:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;background:repeating-linear-gradient(0deg,transparent 0px,transparent 8px,rgba(128,128,128,.1) 8px,rgba(128,128,128,.1) 9px),repeating-linear-gradient(90deg,transparent 0px,transparent 8px,rgba(128,128,128,.1) 8px,rgba(128,128,128,.1) 9px);pointer-events:none;border-radius:6px}@media (max-width: 768px){.game-board-container{padding:5px}.game-board{width:100%;height:100%;max-width:calc(100vh * var(--grid-aspect-ratio));max-height:calc(100vw / var(--grid-aspect-ratio));gap:0px;padding:0}}@media (max-width: 480px){.game-board{width:100%;height:100%;max-width:calc(100vh * var(--grid-aspect-ratio));max-height:calc(100vw / var(--grid-aspect-ratio));border-width:1px;gap:0px}}.connection-status{display:flex;flex-direction:column;align-items:flex-end;gap:5px;font-family:Courier New,monospace;font-size:.8rem}.status-row{display:flex;align-items:center;gap:8px}.status-indicator{position:relative;width:12px;height:12px;border-radius:50%;transition:all .3s ease}.status-pulse{position:absolute;top:-2px;left:-2px;width:16px;height:16px;border:1px solid currentColor;border-radius:50%;animation:pulse 2s infinite;opacity:.6}@keyframes pulse{0%{transform:scale(.8);opacity:.8}50%{transform:scale(1.2);opacity:.3}to{transform:scale(1.5);opacity:0}}.status-text{font-weight:700;letter-spacing:1px}.stats-row{display:flex;align-items:center;gap:8px;opacity:.9}.stat{font-size:.75rem;letter-spacing:.5px}.stat.separator{opacity:.6}.stat.celebration{color:#fa0;font-weight:700;animation:celebrationBlink .6s ease-in-out infinite alternate}.connection-status[data-status=connected] .status-indicator{background-color:silver}.connection-status[data-status=connecting] .status-indicator{background-color:#fa0;animation:connecting-blink 1s ease-in-out infinite alternate}.connection-status[data-status=disconnected] .status-indicator,.connection-status[data-status=error] .status-indicator{background-color:red;animation:error-blink .5s ease-in-out infinite alternate}@keyframes connecting-blink{0%{opacity:.5}to{opacity:1}}@keyframes error-blink{0%{opacity:.3}to{opacity:1}}.connection-status:before{content:"";position:absolute;top:-5px;right:-10px;width:calc(100% + 20px);height:calc(100% + 10px);background:repeating-linear-gradient(45deg,transparent 0px,transparent 2px,rgba(0,255,0,.1) 2px,rgba(0,255,0,.1) 3px);opacity:.3;pointer-events:none;border-radius:4px}@media (max-width: 768px){.connection-status{font-size:.7rem;gap:3px}.status-indicator{width:10px;height:10px}.status-pulse{width:14px;height:14px;top:-2px;left:-2px}.stat{font-size:.65rem}.stats-row{gap:6px}}@media (max-width: 480px){.connection-status{font-size:.6rem}.status-indicator{width:8px;height:8px}.status-pulse{width:12px;height:12px}.stat{font-size:.6rem}.stats-row{gap:4px}}.app{display:flex;flex-direction:column;height:100vh;background:#1a1a1a;color:silver;font-family:Courier New,monospace;position:relative}.app.loading{justify-content:center;align-items:center}.loading-text{display:flex;align-items:center;font-size:1.2rem;font-weight:700;animation:pulse 1.5s ease-in-out infinite alternate}@keyframes pulse{0%{opacity:.6}to{opacity:1}}.loading-spinner{width:20px;height:20px;border:2px solid #808080;border-top:2px solid transparent;border-radius:50%;margin-right:15px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.app-header{display:flex;justify-content:space-between;align-items:center;padding:8px 20px;background:linear-gradient(90deg,#2a2a2a,#3a3a3a,#2a2a2a);border-bottom:2px solid #808080;position:relative}.app-header:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(90deg,rgba(0,255,0,.1) 0px,rgba(128,128,128,.1) 1px,transparent 1px,transparent 3px);pointer-events:none}.title{display:flex;flex-direction:column}.title-main{font-size:1.5rem;font-weight:700;letter-spacing:2px;animation:glow 2s ease-in-out infinite alternate}@keyframes glow{0%{opacity:.8}to{opacity:1}}.title-sub{font-size:.7rem;opacity:.8;letter-spacing:1px;margin-top:2px}.app-main{flex:1;display:flex;justify-content:center;align-items:center;padding:10px;overflow:hidden}.app-footer{padding:10px 20px;background:linear-gradient(90deg,#2a2a2a,#3a3a3a,#2a2a2a);border-top:1px solid #808080;text-align:center;position:relative}.app-footer:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(90deg,rgba(0,255,0,.05) 0px,rgba(128,128,128,.05) 1px,transparent 1px,transparent 3px);pointer-events:none}.footer-text{font-size:.9rem;opacity:.9;position:relative;z-index:1}.celebration-text{color:#fa0;font-weight:700;animation:celebrationBlink .5s ease-in-out infinite alternate}@keyframes celebrationBlink{0%{opacity:.7}to{opacity:1}}@media (max-width: 768px){.app-header{padding:10px 15px}.title-main{font-size:1.5rem;letter-spacing:2px}.title-sub{font-size:.6rem}.app-main{padding:5px}.footer-text{font-size:.8rem}}@media (max-width: 480px){.title-main{font-size:1.2rem;letter-spacing:1px}.title-sub{display:none}}