:root{--font-title: "Orbitron", sans-serif;--font-body: "Outfit", sans-serif;--color-red: #ff3860;--color-red-glow: rgba(255, 56, 96, .4);--color-blue: #209cee;--color-blue-glow: rgba(32, 156, 238, .4);--color-green: #23d160;--color-green-glow: rgba(35, 209, 96, .4);--color-yellow: #ffdd57;--color-yellow-glow: rgba(255, 221, 87, .4);--glow-intensity: 0 0 15px;--game-width: 400;--game-height: 780;--bg-dark: #f5f6fa;--bg-dark-gray: #e8ebf5;--panel-glass: rgba(255, 255, 255, .88);--border-glass: rgba(0, 0, 0, .1);--text-primary: #1a1a2e;--text-secondary: #5a5f75;--spell-item-bg: rgba(0, 0, 0, .03)}@media (min-width: 481px){:root{--game-width: 520}.player-name-text{font-size:.82rem}.player-stats-row{font-size:.75rem}.player-stat-card{padding:6px 10px;border-radius:10px}.status-banner{font-size:.95rem;padding:8px 24px;border-radius:24px}.ability-name{font-size:.72rem}.ability-cost{font-size:.68rem}.ability-button{padding:10px 8px;border-radius:14px}.ability-desc-banner{font-size:.72rem;padding:6px 16px;border-radius:10px}}@media (min-width: 1025px){:root{--game-width: 580}}:root.dark-theme,body.dark-theme{--bg-dark: #09090e;--bg-dark-gray: #12121e;--panel-glass: rgba(18, 18, 30, .75);--border-glass: rgba(255, 255, 255, .08);--text-primary: #f1f3f9;--text-secondary: #9ea4b0;--spell-item-bg: rgba(255, 255, 255, .03)}*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;outline:none}html,body{width:100%;height:100%;overflow:hidden;background-color:var(--bg-dark);color:var(--text-primary);font-family:var(--font-body)}#app-container{position:relative;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden;background-color:var(--bg-dark)}#game-wrapper{position:relative;width:100vw;height:100vh;max-width:calc(100vh * (var(--game-width) / var(--game-height)));max-height:calc(100vw * (var(--game-height) / var(--game-width)));aspect-ratio:var(--game-width) / var(--game-height);display:flex;justify-content:center;align-items:center;overflow:hidden;box-shadow:0 0 50px #000000b3;background:var(--bg-dark)}:root:not(.dark-theme) #game-wrapper{background:#f5f6fa}#game-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;position:absolute;top:0;left:0;z-index:1}#game-container canvas{border-radius:8px;box-shadow:0 10px 30px #00000080}.ui-layer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between}.ui-layer.hidden{display:none!important}.ui-interactive{pointer-events:auto}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.glass-panel{background:var(--panel-glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-glass);border-radius:16px;box-shadow:0 8px 32px #0000005e;padding:16px;transition:all .3s cubic-bezier(.25,.8,.25,1)}.btn-neon{background:#ffffff0d;border:1px solid rgba(255,255,255,.15);color:var(--text-primary);font-family:var(--font-title);font-weight:700;padding:12px 24px;border-radius:8px;text-transform:uppercase;letter-spacing:1.5px;cursor:pointer;transition:all .2s ease;position:relative;overflow:hidden}.btn-neon:hover{background:#ffffff26;box-shadow:0 0 15px #fff3;transform:translateY(-2px)}.btn-neon:active{transform:translateY(1px);box-shadow:0 0 5px #ffffff1a}.btn-neon.red{border-color:var(--color-red);color:var(--color-red)}.btn-neon.red:hover{background:#ff386026;box-shadow:var(--glow-intensity) var(--color-red-glow)}.btn-neon.blue{border-color:var(--color-blue);color:var(--color-blue)}.btn-neon.blue:hover{background:#209cee26;box-shadow:var(--glow-intensity) var(--color-blue-glow)}.btn-neon.green{border-color:var(--color-green);color:var(--color-green)}.btn-neon.green:hover{background:#23d16026;box-shadow:var(--glow-intensity) var(--color-green-glow)}.btn-neon.yellow{border-color:var(--color-yellow);color:var(--color-yellow)}.btn-neon.yellow:hover{background:#ffdd5726;box-shadow:var(--glow-intensity) var(--color-yellow-glow)}.btn-neon.red.active{background:#ff386040;box-shadow:var(--glow-intensity) var(--color-red-glow);font-weight:900}.btn-neon.blue.active{background:#209cee40;box-shadow:var(--glow-intensity) var(--color-blue-glow);font-weight:900}.btn-neon.green.active{background:#23d16040;box-shadow:var(--glow-intensity) var(--color-green-glow);font-weight:900}.btn-neon.yellow.active{background:#ffdd5740;box-shadow:var(--glow-intensity) var(--color-yellow-glow);font-weight:900}.menu-screen{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at center,var(--bg-dark-gray) 0%,var(--bg-dark) 100%);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:24px;z-index:100;text-align:center;pointer-events:auto}.menu-logo-container{display:flex;justify-content:center;align-items:center;margin-bottom:12px;max-width:75vw;width:220px;filter:drop-shadow(0 0 10px rgba(255,140,0,.5)) drop-shadow(0 0 20px rgba(255,215,0,.25));animation:logoPulse 4s ease-in-out infinite alternate}.menu-logo-img{width:100%;height:auto;object-fit:contain}@keyframes logoPulse{0%{transform:scale(.98);filter:drop-shadow(0 0 10px rgba(255,140,0,.5)) drop-shadow(0 0 20px rgba(255,215,0,.2))}to{transform:scale(1.02);filter:drop-shadow(0 0 20px rgba(255,140,0,.8)) drop-shadow(0 0 40px rgba(255,215,0,.5))}}.menu-title{font-family:var(--font-title);font-size:3.4rem;font-weight:900;letter-spacing:4px;margin-bottom:8px;background:linear-gradient(135deg,#ff3860,#209cee,#23d160,#ffdd57);background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:titleGrad 8s ease infinite,titleGlow 4s ease-in-out infinite alternate}.menu-subtitle{font-size:.95rem;color:var(--text-secondary);margin-bottom:30px;letter-spacing:2px;text-shadow:0 2px 4px rgba(0,0,0,.5)}.menu-options{display:flex;flex-direction:column;gap:16px;width:100%;max-width:320px}.char-select-fullscreen{position:fixed!important;top:0!important;left:0!important;width:100vw!important;height:100vh!important;z-index:999999!important;overflow-y:auto;overflow-x:hidden;display:flex;align-items:flex-start;justify-content:center;padding:20px 16px 24px;pointer-events:auto}:root:not(.dark-theme) .char-select-fullscreen{background:linear-gradient(135deg,#eef1fb,#f5f6fa,#e8ecf8)}:root.dark-theme .char-select-fullscreen{background:radial-gradient(ellipse at 50% 30%,#1a1a2e,#09090e)}.cso-inner{width:100%;max-width:960px;display:flex;flex-direction:column;gap:18px;padding-top:8px}.cso-header{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:nowrap}.cso-title{font-family:var(--font-title);font-size:clamp(.9rem,2.5vw,1.6rem);font-weight:900;letter-spacing:3px;text-align:center;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:linear-gradient(90deg,#ff3860,#ffdd57 35%,#23d160 65%,#209cee);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:titleGrad 6s ease infinite}.cso-back-btn,.cso-theme-btn{flex-shrink:0;padding:7px 14px;font-size:.75rem;white-space:nowrap;min-height:unset}.cso-body{display:grid;grid-template-columns:1fr 280px;gap:20px;align-items:start;width:100%}.cso-grid-col{min-width:0}.cso-char-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:12px;max-height:60vh;overflow-y:auto;padding:14px;border-radius:14px}:root:not(.dark-theme) .cso-char-grid{background:#fff9;border:1.5px solid rgba(0,0,0,.08);box-shadow:0 4px 20px #0000000f}:root.dark-theme .cso-char-grid{background:#ffffff08;border:1px solid rgba(255,255,255,.07)}.cso-char-grid .char-card{border-radius:12px;padding:12px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;text-align:center;transition:all .22s cubic-bezier(.25,.8,.25,1);color:var(--text-primary);border:2px solid transparent}:root:not(.dark-theme) .cso-char-grid .char-card{background:#fff;border-color:#0000001a;box-shadow:0 2px 8px #00000012}:root:not(.dark-theme) .cso-char-grid .char-card:hover{background:#fff;border-color:#0000002e;transform:translateY(-3px);box-shadow:0 8px 20px #0000001f}:root.dark-theme .cso-char-grid .char-card{background:#ffffff0d;border-color:#ffffff12}:root.dark-theme .cso-char-grid .char-card:hover{background:#ffffff17;transform:translateY(-3px)}.cso-char-grid .char-card.selected{transform:scale(1.05)!important}.cso-char-grid .char-card.red.selected{border-color:var(--color-red)!important;box-shadow:0 0 16px #ff386066!important}.cso-char-grid .char-card.blue.selected{border-color:var(--color-blue)!important;box-shadow:0 0 16px #209cee66!important}.cso-char-grid .char-card.green.selected{border-color:var(--color-green)!important;box-shadow:0 0 16px #23d16066!important}.cso-char-grid .char-card.yellow.selected{border-color:var(--color-yellow)!important;box-shadow:0 0 16px #ffdd5766!important}.cso-char-grid .char-avatar-container{width:48px;height:48px;border-radius:50%;overflow:hidden;margin-bottom:7px;border:2px solid rgba(0,0,0,.1)}.cso-char-grid .char-card.red .char-avatar-container{border-color:var(--color-red)}.cso-char-grid .char-card.blue .char-avatar-container{border-color:var(--color-blue)}.cso-char-grid .char-card.green .char-avatar-container{border-color:var(--color-green)}.cso-char-grid .char-card.yellow .char-avatar-container{border-color:var(--color-yellow)}.cso-char-grid .char-avatar-img{width:100%;height:100%;object-fit:cover}.cso-char-grid .char-name{font-family:var(--font-title);font-size:.72rem;font-weight:800;margin-bottom:2px;color:var(--text-primary)}.cso-char-grid .char-class{font-size:.52rem;font-weight:700;letter-spacing:.5px}.cso-char-grid .char-card.red .char-class{color:var(--color-red)}.cso-char-grid .char-card.blue .char-class{color:var(--color-blue)}.cso-char-grid .char-card.green .char-class{color:var(--color-green)}.cso-char-grid .char-card.yellow .char-class{color:var(--color-yellow)}.cso-preview-col{min-width:0;border-radius:14px;padding:20px 18px;display:flex;flex-direction:column;align-items:center;text-align:center;border:2px solid var(--border-glass);transition:border-color .3s ease,box-shadow .3s ease;position:sticky;top:0}:root:not(.dark-theme) .cso-preview-col{background:#fff;box-shadow:0 4px 24px #00000014}:root.dark-theme .cso-preview-col{background:#ffffff0a;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.cso-desc-box{width:100%;text-align:left;padding:10px 14px;border-radius:8px;box-sizing:border-box}.cso-footer{display:flex;justify-content:center;gap:16px;padding-bottom:8px}.cso-start-btn{padding:13px 52px;font-size:.92rem;letter-spacing:2px;font-weight:800}@media (max-width: 600px){.cso-body{grid-template-columns:1fr}.cso-preview-col{position:static}.cso-char-grid{grid-template-columns:repeat(auto-fill,minmax(85px,1fr));max-height:36vh;gap:8px;padding:10px}.cso-title{font-size:.88rem;letter-spacing:1.5px}.cso-back-btn,.cso-theme-btn{padding:6px 10px;font-size:.68rem}.cso-start-btn{padding:11px 32px;font-size:.82rem}}@media (min-width: 601px) and (max-width: 900px){.cso-body{grid-template-columns:1fr 240px}.cso-char-grid{grid-template-columns:repeat(auto-fill,minmax(95px,1fr));max-height:54vh}}.character-select-screen{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at center,var(--bg-dark-gray) 0%,var(--bg-dark) 100%);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;flex-direction:column;padding:24px;z-index:110;pointer-events:auto;overflow-y:auto}.char-title{font-family:var(--font-title);font-size:1.3rem;text-align:center;margin-top:10px;margin-bottom:15px}.char-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px;flex-grow:1}@media (min-width: 480px){.char-grid{grid-template-columns:1fr 1fr}}.char-card{border:1.5px solid var(--border-glass);border-radius:12px;padding:10px 12px;background:var(--panel-glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;cursor:pointer;transition:all .3s cubic-bezier(.25,.8,.25,1);color:var(--text-primary)}.char-preview-panel{background:var(--panel-glass);color:var(--text-primary);border:2px solid var(--border-glass)}.char-card:hover{background:#ffffff14;transform:translateY(-5px);border-color:#ffffff40;box-shadow:0 8px 24px #0006}.char-card.selected{background:#ffffff1f;transform:scale(1.02)}.char-card.red.selected{border-color:var(--color-red);box-shadow:0 0 20px #ff386059}.char-card.blue.selected{border-color:var(--color-blue);box-shadow:0 0 20px #209cee59}.char-card.green.selected{border-color:var(--color-green);box-shadow:0 0 20px #23d16059}.char-card.yellow.selected{border-color:var(--color-yellow);box-shadow:0 0 20px #ffdd5759}.char-avatar{width:44px;height:44px;border-radius:50%;margin-bottom:8px;display:flex;justify-content:center;align-items:center;font-size:1.25rem;background:#ffffff0d;border:2px solid transparent;transition:transform .3s cubic-bezier(.25,.8,.25,1)}.char-card:hover .char-avatar{transform:translateY(-3px) scale(1.1)}.char-card.red .char-avatar{border-color:var(--color-red);background:#ff38601a}.char-card.blue .char-avatar{border-color:var(--color-blue);background:#209cee1a}.char-card.green .char-avatar{border-color:var(--color-green);background:#23d1601a}.char-card.yellow .char-avatar{border-color:var(--color-yellow);background:#ffdd571a}.char-name{font-family:var(--font-title);font-weight:700;font-size:.85rem;margin-bottom:2px}.char-class{font-size:.62rem;color:var(--text-secondary);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}.char-ability-desc{font-size:.65rem;color:var(--text-secondary);text-align:center;line-height:1.25}.char-select-footer{display:flex;justify-content:space-between;gap:16px}.char-select-footer button{flex:1}.in-game-ui{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;display:flex;flex-direction:column;justify-content:flex-start;padding:12px}.top-dashboard{display:flex;justify-content:space-between;gap:6px;width:100%;pointer-events:none}.player-stat-card{flex:1;background:var(--panel-glass);border:1px solid var(--border-glass);border-radius:8px;padding:4px 6px;display:flex;flex-direction:column;position:relative;transition:all .3s ease;pointer-events:auto;min-width:0}.player-stat-card.active{background:var(--panel-glass);border-width:2px;transform:translateY(-4px) scale(1.05);box-shadow:0 8px 16px #00000059;animation:card-active-pulse 2s infinite ease-in-out}:root:not(.dark-theme) .player-stat-card{background:#fff}:root:not(.dark-theme) .player-stat-card.active{background:#fff;box-shadow:0 6px 20px #00000026}@keyframes card-active-pulse{0%{transform:translateY(-4px) scale(1.05);filter:brightness(1)}50%{transform:translateY(-4px) scale(1.08);filter:brightness(1.1)}to{transform:translateY(-4px) scale(1.05);filter:brightness(1)}}.player-stat-card.red.active{border-color:var(--color-red);box-shadow:0 0 20px var(--color-red-glow),0 0 8px var(--color-red-glow) inset}.player-stat-card.blue.active{border-color:var(--color-blue);box-shadow:0 0 20px var(--color-blue-glow),0 0 8px var(--color-blue-glow) inset}.player-stat-card.green.active{border-color:var(--color-green);box-shadow:0 0 20px var(--color-green-glow),0 0 8px var(--color-green-glow) inset}.player-stat-card.yellow.active{border-color:var(--color-yellow);box-shadow:0 0 20px var(--color-yellow-glow),0 0 8px var(--color-yellow-glow) inset}.stat-header{display:flex;align-items:center;gap:4px;margin-bottom:4px}.color-indicator{width:8px;height:8px;border-radius:50%;flex-shrink:0}.color-indicator.red{background-color:var(--color-red)}.color-indicator.blue{background-color:var(--color-blue)}.color-indicator.green{background-color:var(--color-green)}.color-indicator.yellow{background-color:var(--color-yellow)}.player-name-text{font-family:var(--font-title);font-size:.65rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-stats-row{display:flex;justify-content:space-between;align-items:center;font-size:.62rem;color:var(--text-secondary)}.mana-container{width:100%;height:4px;background:#ffffff1a;border-radius:2px;margin-top:6px;overflow:hidden}.mana-bar-fill{height:100%;background:#39f;width:0%;transition:width .3s ease}:root:not(.dark-theme) .mana-bar-fill{background:linear-gradient(90deg,#209cee,#23d160)}.bottom-dashboard{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;margin-top:auto;padding-bottom:2px}.ability-panel{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:calc(100% - 32px);max-width:320px;pointer-events:all;box-sizing:border-box}.ability-desc-banner{font-size:.65rem;color:var(--text-secondary);background:var(--bg-dark-gray);border:1px solid var(--border-glass);border-radius:8px;padding:4px 12px;text-align:center;max-width:320px;width:calc(100% - 32px);font-weight:500;pointer-events:none;font-family:var(--font-body);box-sizing:border-box}:root:not(.dark-theme) .ability-desc-banner{background:#fff;border-color:#0000001f;color:#1a1a2e}.ability-button{-moz-appearance:none;appearance:none;-webkit-appearance:none;border:1px solid var(--border-glass);border-radius:12px;background:var(--panel-glass);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 4px;width:100%;box-sizing:border-box;cursor:pointer;transition:all .2s ease;pointer-events:all;text-align:center;gap:3px}.ability-button:hover:not(.disabled){background:var(--bg-dark-gray);border-color:var(--text-secondary)}.ability-button.disabled{opacity:.4;cursor:not-allowed}:root:not(.dark-theme) .ability-button{background:#fff;border-color:#00000026;box-shadow:0 2px 8px #00000014;color:#1a1a2e}:root:not(.dark-theme) .ability-button:hover:not(.disabled){background:#f0f3ff;border-color:#00000040}.ability-icon{font-size:1.2rem;line-height:1}.ability-name{font-size:.65rem;font-family:var(--font-title);font-weight:700;text-transform:uppercase;white-space:nowrap;color:var(--text-primary)}.ability-cost{font-size:.6rem;color:#39f;font-weight:700;white-space:nowrap}:root:not(.dark-theme) .ability-name{color:#1a1a2e}:root:not(.dark-theme) .ability-cost{color:#209cee}.status-banner{background:var(--panel-glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--border-glass);border-radius:20px;padding:6px 16px;color:var(--text-primary);font-family:var(--font-title);font-size:.85rem;letter-spacing:1px;text-align:center;box-shadow:0 4px 20px #00000040;margin-bottom:4px}:root:not(.dark-theme) .status-banner{background:#fff;border-color:#00000026;box-shadow:0 4px 16px #0000001a;color:#1a1a2e}.cards-drawer{background:var(--panel-glass);border-top:1px solid var(--border-glass);border-radius:16px 16px 0 0;padding:12px;position:absolute;bottom:0;left:50%;transform:translate(-50%) translateY(100%);width:100%;max-width:100%;z-index:105;transition:transform .3s cubic-bezier(.25,.8,.25,1);pointer-events:auto}.cards-drawer.open{transform:translate(-50%) translateY(0)}:root:not(.dark-theme) .cards-drawer{background:#fff;border-color:#0000001a;box-shadow:0 -4px 20px #0000001a}.cards-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.cards-title{font-family:var(--font-title);font-size:.9rem;font-weight:700}.cards-close{background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:1rem}.cards-list{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px}.power-card{flex-shrink:0;width:90px;height:130px;border:1px solid var(--border-glass);border-radius:8px;background:var(--bg-dark-gray);padding:8px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;cursor:pointer;transition:all .2s ease}.power-card:hover:not(.disabled){transform:translateY(-8px);border-color:var(--text-secondary);box-shadow:0 6px 12px var(--border-glass)}.power-card.disabled{opacity:.4;cursor:not-allowed}:root:not(.dark-theme) .power-card{background:#f8f9ff;border-color:#0000001f}:root:not(.dark-theme) .power-card:hover:not(.disabled){background:#eef1ff;border-color:#0003;box-shadow:0 6px 16px #0000001a}.card-icon{font-size:1.6rem;margin-top:8px}.card-name{font-size:.65rem;font-weight:700;text-align:center;text-transform:uppercase;font-family:var(--font-title)}.card-desc{font-size:.55rem;color:var(--text-secondary);text-align:center;line-height:1.2}.game-over-modal{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--panel-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:120;padding:24px;pointer-events:auto}.game-over-title{font-family:var(--font-title);font-size:2.2rem;margin-bottom:12px}.game-over-title.win{color:var(--color-green);text-shadow:0 0 15px var(--color-green-glow)}.game-over-title.lose{color:var(--color-red);text-shadow:0 0 15px var(--color-red-glow)}.game-over-msg{font-size:1.1rem;color:var(--text-secondary);margin-bottom:40px}@keyframes titleGrad{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes titleGlow{0%{filter:drop-shadow(0 0 2px rgba(255,255,255,.1))}to{filter:drop-shadow(0 0 12px rgba(32,156,238,.45)) drop-shadow(0 0 20px rgba(255,56,96,.25))}}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:#ffffff05}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:2px}.dice-pit-spacer{height:110px;pointer-events:none;width:100%}:root:not(.dark-theme) .bottom-dashboard{background:transparent}@media (max-width: 480px),(max-height: 780px){.power-card{width:76px!important;height:106px!important;padding:6px!important}.card-icon{font-size:1.2rem!important;margin-top:4px!important}.card-name{font-size:.52rem!important}.card-desc{font-size:.46rem!important;line-height:1.15!important}.ability-cost{font-size:.5rem!important;margin-top:2px!important}.cards-drawer{padding:8px 12px 6px!important}.cards-header{margin-bottom:6px!important}.cards-title{font-size:.78rem!important}.cards-close{font-size:.9rem!important}.ability-button{padding:6px 4px!important;border-radius:8px!important}.ability-icon{font-size:1rem!important}.ability-name{font-size:.58rem!important}.ability-desc-banner{padding:3px 8px!important;font-size:.6rem!important}.dice-pit-spacer{height:95px!important}}.dragonball-tracker{position:absolute;top:0;left:50%;transform:translate(-50%);display:flex;gap:4px;align-items:center;z-index:50;padding:3px 8px;border-radius:0 0 10px 10px;pointer-events:none}:root:not(.dark-theme) .dragonball-tracker{background:#ffffffe6;border:1px solid rgba(0,0,0,.1);box-shadow:0 2px 8px #00000014}:root.dark-theme .dragonball-tracker{background:#000000b3;border:1px solid rgba(255,165,0,.3)}.db-ball{width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 35%,gold,#ff8c00);border:1.5px solid rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;font-size:8px;color:#8b0000;font-weight:900;transition:all .3s ease;box-shadow:0 0 4px #ffa50080}.db-ball.collected{background:radial-gradient(circle at 35% 35%,#ffec6e,gold);box-shadow:0 0 10px #ffd700cc,0 0 4px orange;animation:dbGlow 1s infinite alternate}.db-ball.empty{background:#8080804d;border-color:#8080804d;box-shadow:none}@keyframes dbGlow{0%{box-shadow:0 0 6px #ffd700cc}to{box-shadow:0 0 14px orange,0 0 20px #ffd70099}}.db-collect-flash{position:fixed;top:0;right:0;bottom:0;left:0;z-index:999998;pointer-events:none;animation:dbFlash .6s ease forwards}@keyframes dbFlash{0%{background:#ffd70000}20%{background:#ffd70066}to{background:#ffd70000}}.shenron-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:999999;background:#001400eb;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:all;animation:shenronFadeIn .5s ease forwards}@keyframes shenronFadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.shenron-overlay .shenron-title{font-family:var(--font-title);font-size:2.2rem;font-weight:900;color:gold;text-shadow:0 0 20px rgba(255,215,0,.8),0 0 40px rgba(255,165,0,.5);letter-spacing:3px;margin-bottom:8px;animation:shenronTitle 1s ease-in-out infinite alternate}@keyframes shenronTitle{0%{text-shadow:0 0 20px rgba(255,215,0,.8)}to{text-shadow:0 0 40px rgba(255,215,0,1),0 0 60px rgba(255,165,0,.7)}}.shenron-overlay .shenron-sub{font-family:var(--font-body);font-size:.85rem;color:#90ee90;letter-spacing:4px;margin-bottom:30px;text-transform:uppercase}.shenron-balls-row{display:flex;gap:12px;margin-bottom:28px}.shenron-balls-row .db-ball{width:36px;height:36px;font-size:12px;animation:dbGlow .8s infinite alternate}.shenron-wish-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:360px;width:90vw}.shenron-wish-btn{background:#00500099;border:1.5px solid rgba(0,255,0,.3);border-radius:10px;padding:12px 8px;color:#90ee90;font-family:var(--font-title);font-size:.68rem;cursor:pointer;text-align:center;transition:all .2s ease;pointer-events:all}.shenron-wish-btn:hover{background:#00960099;border-color:#0f09;color:gold;transform:translateY(-2px);box-shadow:0 4px 12px #0f03}.shenron-wish-btn.selected{background:#00c80080;border-color:gold;color:gold}.shenron-confirm-btn{margin-top:20px;padding:12px 40px;background:linear-gradient(135deg,gold,#ff8c00);border:none;border-radius:10px;color:#000;font-family:var(--font-title);font-size:.9rem;font-weight:900;letter-spacing:2px;cursor:pointer;transition:all .2s ease;pointer-events:all}.shenron-confirm-btn:hover{transform:scale(1.05);box-shadow:0 6px 20px #ffd70080}.db-loss-banner{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.8);z-index:999997;background:linear-gradient(135deg,#b40000f2,#500000f2);border:2px solid rgba(255,56,96,.7);border-radius:14px;padding:16px 28px;text-align:center;pointer-events:none;animation:dbLossAnim 2.5s ease forwards}.db-loss-banner .loss-title{font-family:var(--font-title);font-size:1.1rem;color:#ff3860;font-weight:900;margin-bottom:4px}.db-loss-banner .loss-sub{font-size:.75rem;color:#fffc}@keyframes dbLossAnim{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}75%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.9)}}.cutscene-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:99999;background:#08080ee6;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden;transition:opacity .3s ease;pointer-events:all;animation:cutsceneFadeIn .3s ease forwards}.cutscene-overlay.fade-out{opacity:0}.cutscene-bg-glow{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;opacity:.8;animation:pulseGlow 1.5s infinite alternate ease-in-out}.cutscene-banner{text-align:center;z-index:2;margin-bottom:40px;animation:slideInDown .5s cubic-bezier(.175,.885,.32,1.275) forwards}.cutscene-power-title{font-family:var(--font-title);font-size:1.8rem;font-weight:900;color:var(--text-primary);letter-spacing:2px;text-shadow:0 0 15px rgba(255,255,255,.4);margin-bottom:8px}.cutscene-summon-text{font-family:var(--font-body);font-size:.75rem;color:var(--text-secondary);letter-spacing:3px;margin-bottom:4px}.cutscene-character-name{font-family:var(--font-title);font-size:1.3rem;font-weight:700;letter-spacing:1px;color:#fff}.cutscene-overlay.fire .cutscene-character-name{color:var(--color-red);text-shadow:0 0 10px var(--color-red-glow)}.cutscene-overlay.wind .cutscene-character-name{color:var(--color-green);text-shadow:0 0 10px var(--color-green-glow)}.cutscene-overlay.earth .cutscene-character-name{color:var(--color-yellow);text-shadow:0 0 10px var(--color-yellow-glow)}.cutscene-overlay.ice .cutscene-character-name{color:var(--color-blue);text-shadow:0 0 10px var(--color-blue-glow)}.cutscene-sprite-container{z-index:2;display:flex;justify-content:center;align-items:center;animation:zoomSpin .7s cubic-bezier(.175,.885,.32,1.275) forwards}.cutscene-sprite-img{width:180px;height:180px;image-rendering:pixelated;border-radius:20px;border:3px solid rgba(255,255,255,.25);animation:spriteAttackPulse .4s ease-in-out infinite alternate}.cutscene-sprite-placeholder{font-size:5rem;animation:spriteAttackPulse .4s ease-in-out infinite alternate}@keyframes spriteAttackPulse{0%{transform:scale(.95);filter:brightness(1)}to{transform:scale(1.1);filter:brightness(1.4)}}@keyframes cutsceneFadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulseGlow{0%{opacity:.5}to{opacity:.9}}@keyframes slideInDown{0%{transform:translateY(-80px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes zoomSpin{0%{transform:scale(0) rotate(-180deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}@keyframes floatAvatar{0%{transform:translateY(-8px) scale(.98)}to{transform:translateY(8px) scale(1.02)}}.char-avatar-container{width:60px;height:60px;border-radius:50%;margin-bottom:8px;display:flex;justify-content:center;align-items:center;background:#ffffff0d;border:2px solid transparent;transition:transform .3s cubic-bezier(.25,.8,.25,1);overflow:hidden}.char-card.red .char-avatar-container{border-color:var(--color-red);background:#ff386026;box-shadow:0 0 10px #ff38604d}.char-card.blue .char-avatar-container{border-color:var(--color-blue);background:#209cee26;box-shadow:0 0 10px #209cee4d}.char-card.green .char-avatar-container{border-color:var(--color-green);background:#23d16026;box-shadow:0 0 10px #23d1604d}.char-card.yellow .char-avatar-container{border-color:var(--color-yellow);background:#ffdd5726;box-shadow:0 0 10px #ffdd574d}.char-card:hover .char-avatar-container{transform:translateY(-3px) scale(1.1)}.char-avatar-img{width:100%;height:100%;object-fit:cover}.help-modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#05050ad9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:none;justify-content:center;align-items:center;z-index:10000;opacity:0;pointer-events:none;transition:opacity .3s ease}.help-modal-overlay.open{display:flex;opacity:1;pointer-events:all}.help-modal-container{width:90%;max-width:500px;max-height:85vh;background:var(--panel-glass);border:1px solid var(--border-glass);border-radius:16px;box-shadow:0 12px 40px #000000b3;display:flex;flex-direction:column;overflow:hidden;animation:modalScaleIn .3s cubic-bezier(.175,.885,.32,1.2) forwards}@keyframes modalScaleIn{0%{transform:scale(.9)}to{transform:scale(1)}}.help-modal-header{padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;align-items:center}.help-modal-title{font-family:var(--font-title);font-size:1.15rem;font-weight:700;letter-spacing:1px;background:linear-gradient(135deg,#ff3860,#209cee,#23d160,#ffdd57);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.help-modal-close{background:none;border:none;color:var(--text-secondary);font-size:20px;cursor:pointer;transition:color .2s}.help-modal-close:hover{color:var(--text-primary)}.help-modal-tabs{display:flex;background:#0a0a0f80;border-bottom:1px solid rgba(255,255,255,.05)}.help-tab-btn{flex:1;padding:12px 4px;border:none;background:none;color:var(--text-secondary);font-family:var(--font-title);font-size:.75rem;font-weight:700;cursor:pointer;transition:all .2s;border-bottom:2px solid transparent}.help-tab-btn.red.active{color:var(--color-red);border-bottom-color:var(--color-red);background:#ff38600d}.help-tab-btn.green.active{color:var(--color-green);border-bottom-color:var(--color-green);background:#23d1600d}.help-tab-btn.yellow.active{color:var(--color-yellow);border-bottom-color:var(--color-yellow);background:#ffdd570d}.help-tab-btn.blue.active{color:var(--color-blue);border-bottom-color:var(--color-blue);background:#209cee0d}.help-tab-btn.cards.active{color:#a8f;border-bottom-color:#a8f;background:#aa88ff0d}.help-modal-content{padding:20px;overflow-y:auto;flex-grow:1}.help-section{display:none}.help-section.active{display:block}.help-hero-banner{display:flex;align-items:center;gap:16px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.05)}.help-hero-img{width:64px;height:64px;border-radius:12px;border:1px solid rgba(255,255,255,.15);box-shadow:0 4px 12px #0006;object-fit:contain}.help-hero-meta{display:flex;flex-direction:column}.help-hero-name{font-family:var(--font-title);font-size:1.1rem;font-weight:700}.help-hero-class{font-size:.75rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.help-passive-box{background:#ffffff08;border:1px solid rgba(255,255,255,.05);border-radius:8px;padding:10px 12px;margin-bottom:16px}.help-passive-title{font-size:.78rem;font-weight:700;margin-bottom:4px}.help-passive-desc{font-size:.72rem;color:var(--text-secondary);line-height:1.35}.help-spell-list{display:flex;flex-direction:column;gap:12px}.help-spell-item{background:var(--spell-item-bg);border:1px solid var(--border-glass);border-radius:8px;padding:10px}.help-spell-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.help-spell-title{font-size:.8rem;font-weight:700}.help-spell-cost{font-size:.72rem;color:#39f}.help-spell-desc{font-size:.72rem;color:var(--text-secondary);line-height:1.35;margin-bottom:4px}.help-spell-benefit{font-size:.7rem;color:#23d160;font-style:italic}#btn-help-toggle{transition:all .2s}#btn-help-toggle:hover{transform:scale(1.1);box-shadow:0 0 15px #fff6}.btn-settings-toggle{position:absolute;bottom:85px;right:20px;z-index:9999;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:#12121ed9;color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 4px 15px #00000080;transition:all .2s cubic-bezier(.25,.8,.25,1);pointer-events:all}.btn-settings-toggle:hover{transform:rotate(30deg) scale(1.1);border-color:#fff6;box-shadow:0 0 15px #fff3}.settings-popup-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#05050ab3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:10001;display:none;justify-content:center;align-items:center;opacity:0;transition:opacity .25s ease;pointer-events:none}.settings-popup-overlay.open{display:flex;opacity:1;pointer-events:all}.settings-popup-container{width:280px;background:var(--panel-glass);border:1px solid var(--border-glass);border-radius:16px;padding:20px;box-shadow:0 12px 36px #0009;display:flex;flex-direction:column;align-items:center;gap:16px;transform:scale(.9);transition:transform .25s cubic-bezier(.175,.885,.32,1.2)}.settings-popup-overlay.open .settings-popup-container{transform:scale(1)}.settings-popup-header{font-family:var(--font-title);font-size:1.1rem;font-weight:700;letter-spacing:1.5px;color:var(--text-primary);text-shadow:0 0 10px rgba(255,255,255,.2)}.settings-popup-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}.settings-action-btn{background:var(--bg-dark-gray);border:1px solid var(--border-glass);color:var(--text-primary);border-radius:10px;padding:14px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:18px;transition:all .2s}.settings-action-btn:hover{background:var(--panel-glass);border-color:var(--text-secondary);transform:translateY(-2px)}.settings-action-btn .btn-label{font-family:var(--font-body);font-size:.65rem;color:var(--text-secondary)}.btn-popup-close-confirm{width:100%;background:linear-gradient(135deg,#209cee,#23d160);border:none;color:#fff;padding:10px;border-radius:8px;font-family:var(--font-title);font-size:.8rem;font-weight:700;cursor:pointer;letter-spacing:1px;transition:all .2s}.btn-popup-close-confirm:hover{filter:brightness(1.1);transform:translateY(-1px)}.event-overlay-banner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.65);opacity:0;display:flex;justify-content:center;align-items:center;background:#0a0a14d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:3px solid var(--border-color, #fff);border-bottom:3px solid var(--border-color, #fff);padding:24px 40px;width:100%;box-shadow:0 0 40px #000000d9,0 0 25px var(--glow-color, rgba(255,255,255,.1));z-index:1000;pointer-events:none;transition:all .4s cubic-bezier(.175,.885,.32,1.2)}.event-overlay-banner.show{transform:translate(-50%,-50%) scale(1);opacity:1}.event-banner-inner{text-align:center}.event-title{font-family:var(--font-title);font-size:2.2rem;letter-spacing:5px;margin:0;color:#fff;text-shadow:0 0 15px var(--glow-color, #fff);font-weight:900}.event-desc{font-family:var(--font-body);font-size:.95rem;margin:8px 0 0;color:#ddd;letter-spacing:1px;text-transform:uppercase}.lobby-screen{background:#0a0a14eb;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);box-shadow:0 15px 35px #0009}.lobby-room-code-section{display:flex;flex-direction:column;align-items:center;gap:8px;background:#ffffff08;padding:16px;border-radius:12px;border:1px solid rgba(255,255,255,.05);margin-top:10px;width:100%}.room-code-display{font-family:var(--font-title);font-size:2.2rem;letter-spacing:6px;color:var(--color-yellow);text-shadow:0 0 15px var(--color-yellow-glow);font-weight:900;margin:4px 0}.player-lobby-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:16px 0;width:100%}.player-lobby-slot{background:#ffffff05;border:1px dashed rgba(255,255,255,.1);border-radius:12px;padding:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:80px;transition:all .3s}.player-lobby-slot.occupied{background:#ffffff0f;border:1px solid var(--player-border, rgba(255, 255, 255, .2));box-shadow:0 4px 12px #0003}.lobby-player-avatar{width:32px;height:32px;margin-bottom:6px}.lobby-player-name{font-family:var(--font-title);font-size:.75rem;font-weight:700;color:#fff}.lobby-player-hero{font-size:.6rem;color:var(--text-secondary)}.lobby-host-badge{font-size:.5rem;background:var(--color-yellow);color:#000;padding:1px 4px;border-radius:3px;font-weight:800;margin-top:4px}.multiplayer-inputs{display:flex;flex-direction:column;gap:14px;width:100%;max-width:280px;margin-top:14px}.multiplayer-input-field{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);color:#fff;border-radius:8px;padding:12px;font-family:var(--font-body);font-size:.85rem;text-align:center;letter-spacing:1px}.multiplayer-input-field:focus{outline:none;border-color:var(--color-blue);box-shadow:0 0 10px var(--color-blue-glow)}.exit-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:9999999;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s ease}.exit-modal-overlay.active{opacity:1;pointer-events:all}.exit-modal-card{background:#12121ef2;border:2px solid rgba(255,56,96,.4);border-radius:16px;padding:30px;width:90%;max-width:380px;text-align:center;box-shadow:0 10px 40px #ff386040;transform:scale(.85);transition:transform .3s cubic-bezier(.175,.885,.32,1.275)}.exit-modal-overlay.active .exit-modal-card{transform:scale(1)}.exit-modal-title{font-family:var(--font-title);font-size:1.5rem;font-weight:900;color:#ff3860;margin-bottom:12px;letter-spacing:1.5px;text-transform:uppercase;text-shadow:0 0 12px rgba(255,56,96,.5)}.exit-modal-message{font-family:var(--font-body);font-size:.85rem;color:#fffc;margin-bottom:24px;line-height:1.5}.exit-modal-actions{display:flex;gap:12px;justify-content:center}.exit-btn{padding:10px 24px;font-family:var(--font-title);font-size:.8rem;font-weight:800;border-radius:8px;cursor:pointer;border:none;transition:all .2s ease}.exit-btn-yes{background:linear-gradient(135deg,#ff3860,#b8002b);color:#fff;box-shadow:0 4px 14px #ff386066}.exit-btn-yes:hover{transform:translateY(-2px);box-shadow:0 6px 20px #ff386099}.exit-btn-no{background:#ffffff14;border:1px solid rgba(255,255,255,.2);color:#ccc}.exit-btn-no:hover{background:#ffffff26;color:#fff;transform:translateY(-2px)}