.pixel-button{font-family:Silkscreen,Pixelify Sans,VT323,"Press Start 2P",monospace;font-size:18px;font-weight:600;padding:16px 32px;border:4px solid;cursor:pointer;text-transform:uppercase;letter-spacing:2px;transition:all .2s ease;position:relative;color:var(--color-text);text-shadow:2px 2px 0px rgba(0,0,0,.8);outline:none;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;text-rendering:optimizeSpeed}.pixel-button:not(:disabled):hover{transform:translateY(-2px)}.pixel-button:not(:disabled):active{transform:translateY(0)}.pixel-button:disabled{opacity:.5;cursor:not-allowed}.pixel-button-primary{background-color:var(--color-button-primary);border-color:var(--color-button-primary);box-shadow:4px 4px #0009;color:var(--color-text)}.pixel-button-primary:not(:disabled):hover{background-color:#6fc0e0;border-color:#6fc0e0;box-shadow:6px 6px #0009}.pixel-button-primary:not(:disabled):active{box-shadow:2px 2px #0009}.pixel-button-secondary{background-color:var(--color-button-secondary);border-color:var(--color-button-secondary);box-shadow:4px 4px #0009;color:var(--color-text)}.pixel-button-secondary:not(:disabled):hover{background-color:#ff9f5a;border-color:#ff9f5a;box-shadow:6px 6px #0009}.pixel-button-secondary:not(:disabled):active{box-shadow:2px 2px #0009}.quiz-interface{height:100%;background:linear-gradient(to bottom,#0b0818f2,#15112dfa);padding:20px;display:flex;flex-direction:column;gap:15px;border-top:3px solid var(--color-highlight)}.quiz-loading{flex:1;display:flex;align-items:center;justify-content:center;color:var(--color-text-dim);font-family:"Press Start 2P",monospace;font-size:14px}.question-section{flex:0 0 auto}.question-card{background:#080516e6;padding:24px;text-align:center;box-shadow:0 0 25px #00ffff26}.question-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;text-transform:uppercase;letter-spacing:1px;font-size:11px;color:var(--color-text-dim)}.question-label{font-weight:700}.question-energy{font-family:"Press Start 2P",monospace;color:#0ff;text-shadow:0 0 10px rgba(0,255,255,.6)}.question-text{font-family:"Press Start 2P",monospace;font-size:14px;color:var(--color-text);line-height:1.8;margin:0}.waiting-message{font-family:"Press Start 2P",monospace;font-size:10px;color:#0ff;text-align:center;margin-top:15px;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.answers-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;flex:1 1 auto}.answer-button{font-size:12px!important;min-height:80px;display:flex;align-items:center;justify-content:center;text-align:center;padding:15px!important;line-height:1.5}.spell-bar{flex:0 0 auto;background:#00ffff0d;padding:15px;border-radius:8px;border:2px solid rgba(0,255,255,.3)}.spell-bar-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-family:"Press Start 2P",monospace;font-size:10px;color:var(--color-highlight)}.energy-display{color:#0ff;text-shadow:0 0 10px #00ffff}.spell-buttons{display:flex;gap:10px;justify-content:center}.spell-button{flex:1;min-height:60px;font-size:10px!important}.spell-button small{font-size:8px;opacity:.8}.spell-button:disabled{opacity:.3;cursor:not-allowed}.spell-selection-screen{flex:1;display:flex;flex-direction:column;gap:20px;justify-content:center}.spell-selection-header{background:#00ff6426;padding:20px;text-align:center;border:3px solid rgba(0,255,100,.5)}.spell-selection-header h2{font-family:"Press Start 2P",monospace;font-size:16px;color:#00ff64;margin:0 0 10px}.reduced-damage-note{font-family:"Press Start 2P",monospace;font-size:9px;color:orange;margin:10px 0;line-height:1.6}.spell-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.spell-choice-button{min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.spell-name{font-size:14px;font-weight:700}.spell-stats{display:flex;gap:15px;font-size:11px}.spell-cost{color:#0ff}.spell-damage{color:#f44}.insufficient-energy{opacity:.3}.not-enough{font-size:8px;color:#f44}.skip-button{background:#6464644d!important}.mistake-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;background:#ff00001a;padding:40px;text-align:center;border:3px solid rgba(255,0,0,.5)}.mistake-title{font-family:"Press Start 2P",monospace;font-size:18px;color:#f44;margin:0}.answer-comparison{display:flex;flex-direction:column;gap:20px;width:100%;max-width:500px}.your-wrong-answer,.correct-answer-display{display:flex;flex-direction:column;gap:10px}.your-wrong-answer .label,.correct-answer-display .label{font-family:"Press Start 2P",monospace;font-size:10px;color:var(--color-text-dim)}.answer{font-family:"Press Start 2P",monospace;font-size:14px;padding:15px;border-radius:8px;border:2px solid}.answer.wrong{background:#f003;border-color:#f44;color:#f88}.answer.correct{background:#00ff6433;border-color:#00ff64;color:#8fa}.waiting-opponent{font-family:"Press Start 2P",monospace;font-size:10px;color:var(--color-text-dim);animation:pulse 1.5s ease-in-out infinite}.waiting-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:#00ffff0d;padding:40px;border:3px solid rgba(0,255,255,.3)}.waiting-spinner{font-size:48px;animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.waiting-text{font-family:"Press Start 2P",monospace;font-size:12px;color:var(--color-highlight);text-align:center;line-height:1.8;animation:pulse 1.5s ease-in-out infinite}.energy-bar{display:flex;justify-content:space-between;align-items:center;padding:15px;background:#00ffff0d;border-radius:8px;border:2px solid rgba(0,255,255,.3)}.energy-label{font-family:"Press Start 2P",monospace;font-size:10px;color:var(--color-highlight)}@media (max-width: 768px){.quiz-interface{padding:10px;gap:10px}.question-text{font-size:11px}.answer-button{font-size:10px!important;min-height:60px;padding:10px!important}.spell-buttons{flex-wrap:wrap}.spell-button{flex:1 1 calc(50% - 5px)}.spell-selection-header h2{font-size:12px}.reduced-damage-note{font-size:8px}.spell-grid{grid-template-columns:1fr}.mistake-title{font-size:14px}.answer{font-size:11px}}.quit-section{margin-top:15px;text-align:center;padding-top:15px;border-top:2px solid rgba(255,255,255,.1)}.quit-button{background:#f003!important;border-color:#f44!important;color:#f88!important;min-width:200px}.quit-button:hover:not(:disabled){background:#ff000059!important;border-color:#f66!important;transform:translateY(-2px)}.game-over-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;padding:60px 40px;background:linear-gradient(to bottom,#140028f2,#280050f2);border:4px solid var(--color-highlight)}.game-result{font-family:"Press Start 2P",monospace;font-size:28px;text-align:center;margin:0;line-height:1.6;text-shadow:0 0 20px currentColor}.game-result.winner{color:#00ff64;animation:winner-pulse 1.5s ease-in-out infinite}.game-result.loser{color:#f44}@keyframes winner-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.9}}.score-summary{display:flex;flex-direction:column;gap:20px;width:100%;max-width:400px}.score-item{display:flex;justify-content:space-between;align-items:center;padding:20px;background:#8be9fd1a;border:2px solid rgba(139,233,253,.3);border-radius:8px}.score-label{font-family:"Press Start 2P",monospace;font-size:14px;color:var(--color-text)}.score-value{font-family:"Press Start 2P",monospace;font-size:20px;color:var(--color-highlight);text-shadow:0 0 10px var(--color-highlight)}.game-over-actions{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}.play-again-button,.quit-button-end{min-width:180px;font-size:12px}.quit-button-end{background:#f003!important;border-color:#f44!important;color:#f88!important}.quit-button-end:hover:not(:disabled){background:#ff000059!important;border-color:#f66!important}@media (max-width: 768px){.game-over-screen{padding:40px 20px;gap:30px}.game-result{font-size:20px}.score-summary{max-width:100%}.score-item{padding:15px}.score-label{font-size:11px}.score-value{font-size:16px}.game-over-actions{flex-direction:column;width:100%}.play-again-button,.quit-button-end{width:100%}}.battle-view-container{width:100vw;height:100vh;display:flex;flex-direction:column;background:#000;overflow:hidden}.battle-canvas-wrapper{flex:1 1 60%;min-height:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(to bottom,#080612,#0b0818)}.battle-canvas{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.battle-canvas canvas{max-width:100%;max-height:100%;image-rendering:pixelated}.quiz-wrapper{flex:0 0 40%;max-height:40vh;overflow-y:auto}@media (max-width: 768px){.battle-canvas-wrapper{flex:1 1 50%}.quiz-wrapper{flex:0 0 50%;max-height:50vh}}@media (orientation: landscape) and (max-height: 600px){.battle-canvas-wrapper{flex:1 1 55%}.quiz-wrapper{flex:0 0 45%;max-height:45vh}}.home-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;position:relative;overflow:hidden;background-color:var(--color-background);background-image:url(data:image/png;base64,),url(/arcane-bg.svg),repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(21,17,45,.25) 2px,rgba(21,17,45,.25) 4px);background-size:cover,cover,auto;background-position:center,center,center;background-blend-mode:normal,screen,normal}.toast{position:fixed;top:24px;right:24px;padding:14px 18px;font-family:Silkscreen,Pixelify Sans,VT323,monospace;font-size:18px;z-index:1100;background:#15112de6;color:var(--color-text);border:3px solid var(--color-border);box-shadow:0 0 12px #8c5bff66,4px 4px #0009}.toast-success{border-color:var(--color-accent);color:var(--color-highlight)}.home-container:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 50%,rgba(95,179,211,.08) 0%,transparent 50%),radial-gradient(circle at 80% 50%,rgba(255,140,66,.08) 0%,transparent 50%);pointer-events:none;z-index:0}.home-content{text-align:center;z-index:1;position:relative;max-width:800px;width:100%}.home-title{font-family:Pixelify Sans,Silkscreen,"Press Start 2P",VT323,monospace;font-size:64px;font-weight:700;margin-bottom:20px;color:var(--color-highlight);line-height:1.2;text-rendering:optimizeSpeed}@media (max-width: 768px){.home-title{font-size:48px}}@media (max-width: 480px){.home-title{font-size:36px}}.home-subtitle{font-family:Silkscreen,Pixelify Sans,VT323,monospace;font-size:28px;color:var(--color-text-dim);margin-bottom:60px;letter-spacing:3px;text-shadow:2px 2px 0px rgba(0,0,0,.8);text-rendering:optimizeSpeed}@media (max-width: 768px){.home-subtitle{font-size:24px;margin-bottom:40px}}.home-actions{display:flex;gap:30px;justify-content:center;flex-wrap:wrap}@media (max-width: 480px){.home-actions{flex-direction:column;align-items:center;gap:20px}.home-actions .pixel-button{width:100%;max-width:300px}}.card{background:#15112de6;padding:20px;margin-top:20px;width:100%}.grid-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}.card-title{font-family:Pixelify Sans,Silkscreen,VT323,monospace;font-size:22px;color:var(--color-highlight);margin-bottom:8px}.card-text{font-family:Silkscreen,Pixelify Sans,VT323,monospace;font-size:18px;color:var(--color-text-dim);margin-bottom:12px}.card-block{display:flex;flex-direction:column;gap:12px}.status-banner{margin-top:16px;padding:12px 14px;background:#8c5bff26;color:var(--color-highlight);font-family:Silkscreen,Pixelify Sans,VT323,monospace;font-size:18px}.waiting-card,.ready-card{margin-top:24px}.join-link-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.room-setup{width:min(720px,95vw);padding:32px;background:#15112deb;border:4px solid var(--color-border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:1}.room-title{font-family:Pixelify Sans,Silkscreen,"Press Start 2P",VT323,monospace;font-size:32px;margin-bottom:14px;color:var(--color-highlight)}.room-subtitle{font-family:Silkscreen,Pixelify Sans,VT323,monospace;font-size:22px;color:var(--color-text-dim);margin-bottom:24px}.room-code-display{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;margin-bottom:16px;background:#0c0a19cc}.room-code-label{font-family:Silkscreen,Pixelify Sans,VT323,monospace;font-size:18px;color:var(--color-text-dim)}.room-code-value{font-family:"Press Start 2P",monospace;font-size:24px;letter-spacing:6px;color:var(--color-highlight)}.room-hint{font-family:Silkscreen,Pixelify Sans,VT323,monospace;font-size:18px;color:var(--color-text);margin-bottom:24px;line-height:1.5}.room-actions{display:flex;justify-content:flex-end}.connection-status-card{padding:16px 20px;background:#15112deb;margin-bottom:24px}.connection-status-card .form-label{font-size:18px}.battle-wrapper{width:min(1024px,95vw);display:flex;flex-direction:column;gap:12px}.battle-meta{padding:12px 16px;background:#15112de6;color:var(--color-text);font-family:Silkscreen,Pixelify Sans,VT323,monospace}.battle-meta .battle-room span{color:var(--color-highlight)}.battle-meta .battle-names{display:flex;justify-content:space-between;font-size:16px;margin-top:8px}.battle-canvas{height:560px;background:#0c0a19e6}.modal-form{display:flex;flex-direction:column;gap:24px}.form-group{display:flex;flex-direction:column;gap:12px}.form-label{font-family:Silkscreen,Pixelify Sans,VT323,monospace;font-size:22px;color:var(--color-highlight);text-shadow:1px 1px 0px rgba(0,0,0,.8);letter-spacing:1px;text-rendering:optimizeSpeed}.file-info{font-family:Silkscreen,Pixelify Sans,VT323,monospace;font-size:18px;color:var(--color-text-dim);margin-top:8px;padding:8px;background-color:var(--color-primary);border:2px solid var(--color-border);text-rendering:optimizeSpeed}.form-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:8px}.form-error{font-family:Silkscreen,Pixelify Sans,VT323,monospace;font-size:16px;color:#ff6b6b;margin-top:4px;padding:6px 8px;background-color:#ff6b6b1a;border:2px solid rgba(255,107,107,.3);text-shadow:1px 1px 0px rgba(0,0,0,.8);text-rendering:optimizeSpeed;animation:error-pulse 1s ease-in-out infinite;white-space:pre-line;line-height:1.6}@keyframes error-pulse{0%,to{opacity:1}50%{opacity:.7}}:root{--color-primary: #2D1B4E;--color-secondary: #FF8C42;--color-accent: #5FB3D3;--color-background: #1A0F2E;--color-highlight: #B8E6B8;--color-text: #FFFFFF;--color-text-dim: #D4C5E8;--color-border: #4A3A6B;--color-button-primary: #5FB3D3;--color-button-secondary: #FF8C42;--color-button-dark: #2D1B4E}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Silkscreen,Pixelify Sans,VT323,"Press Start 2P",monospace;background-color:var(--color-background);color:var(--color-text);overflow-x:hidden;min-height:100vh;font-smooth:never;-webkit-font-smoothing:none;-moz-osx-font-smoothing:unset}.pixel-border{border:4px solid var(--color-border);border-style:solid;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges}.pixel-shadow,.pixel-shadow-gold{box-shadow:4px 4px #0009}.pixel-text,.pixel-text-glow{text-shadow:2px 2px 0px rgba(0,0,0,.8);letter-spacing:2px}.pixel-bg{background-color:var(--color-background);background-image:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(45,27,78,.15) 2px,rgba(45,27,78,.15) 4px)}@keyframes pixel-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.01)}}.pixel-input{background-color:var(--color-primary);border:3px solid var(--color-border);color:var(--color-text);font-family:Silkscreen,Pixelify Sans,VT323,monospace;font-size:20px;padding:12px 16px;width:100%;outline:none;transition:border-color .2s ease;text-rendering:optimizeSpeed}.pixel-input:focus{border-color:var(--color-accent)}.pixel-file-input{display:none}.pixel-file-label{display:inline-block;padding:12px 24px;background-color:var(--color-primary);border:3px solid var(--color-border);color:var(--color-text);cursor:pointer;font-family:Silkscreen,Pixelify Sans,VT323,monospace;font-size:18px;transition:border-color .2s ease;text-align:center;text-rendering:optimizeSpeed}.pixel-file-label:hover{border-color:var(--color-accent)}