:root{--font-display:"Righteous", cursive;--font-body:"Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--clay-shadow:6px 6px 12px #00000014, -2px -2px 8px #fff9;--clay-shadow-hover:8px 8px 16px #0000001f, -3px -3px 10px #ffffffb3;--clay-shadow-inset:inset 2px 2px 4px #0000000f, inset -1px -1px 3px #fff6;--clay-border:3px solid #0000000f;--clay-radius:20px;--clay-radius-sm:14px;--clay-radius-lg:28px;--color-primary:#ec4899;--color-primary-light:#f9a8d4;--color-secondary:#8b5cf6;--color-secondary-light:#c4b5fd;--color-accent:#f59e0b;--color-accent-dark:#d97706;--color-bg-start:#fdf2f8;--color-bg-mid:#fde68a;--color-bg-end:#fbbf24;--color-card:#fffbf0;--color-text:#1c1917;--color-text-muted:#78716c;--color-text-warm:#92400e;--color-team-red:#ef4444;--color-team-red-light:#fca5a5;--color-team-blue:#3b82f6;--color-team-blue-light:#93c5fd;--color-hp:#ef4444;--color-hp-empty:#d6d3d1;--color-shield:#3b82f6;--color-bleed:#be185d;--color-heal:#10b981;--color-damage:#ef4444;--hero-warrior:#ef4444;--hero-warrior-light:#fca5a5;--hero-shaman:#8b5cf6;--hero-shaman-light:#c4b5fd;--hero-bomber:#f97316;--hero-bomber-light:#fdba74;--hero-cloud:#06b6d4;--hero-cloud-light:#67e8f9}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background:var(--color-bg-start);color:var(--color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}#root{width:100%;max-width:100%;margin:0}@keyframes slideUp{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#d6d3d1;border-radius:3px}@keyframes floatUp{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-60px)}}@keyframes hitFlash{0%,to{background-color:#0000}25%{background-color:#ef44444d}50%{background-color:#0000}75%{background-color:#ef44444d}}@keyframes healGlow{0%{box-shadow:0 0 #10b98166}50%{box-shadow:0 0 20px 8px #10b9814d}to{box-shadow:0 0 #10b98100}}@keyframes shieldBlock{0%{transform:scale(1);box-shadow:0 0 #3b82f680}40%{transform:scale(1.08);box-shadow:0 0 16px 6px #3b82f666}to{transform:scale(1);box-shadow:0 0 #3b82f600}}@keyframes deathFade{0%{filter:grayscale(0);opacity:1;transform:scale(1)}to{filter:grayscale();opacity:.5;transform:scale(.95)}}@keyframes skillActivate{0%,to{box-shadow:0 0 #f59e0b00}25%{box-shadow:0 0 20px 8px #f59e0b80}50%{box-shadow:0 0 #f59e0b00}75%{box-shadow:0 0 20px 8px #f59e0b80}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes numberChange{0%{transform:scale(1)}40%{transform:scale(1.4)}to{transform:scale(1)}}@keyframes bleedPulse{0%,to{border-color:#be185d33;box-shadow:0 0 #be185d00}50%{border-color:#be185d99;box-shadow:0 0 12px 4px #be185d40}}@keyframes victoryBurst{0%{opacity:0;transform:scale(.8);box-shadow:0 0 #f59e0b00}60%{opacity:1;transform:scale(1.05);box-shadow:0 0 40px 16px #f59e0b66}to{opacity:1;transform:scale(1);box-shadow:0 0 20px 8px #f59e0b26}}@keyframes handConnect{0%{opacity:.6;width:0%}to{opacity:1;width:100%}}@keyframes glowPulse{0%,to{box-shadow:0 0 #f59e0b00}50%{box-shadow:0 0 12px 4px #f59e0b59}}@keyframes ripple{0%{opacity:.5;transform:scale(0)}to{opacity:0;transform:scale(4)}}@keyframes slideInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes stepSlideLeft{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-30px)}}@keyframes stepSlideRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(30px)}}@keyframes confetti{0%{opacity:1;transform:translateY(-100%)rotate(0)}to{opacity:0;transform:translateY(100vh)rotate(720deg)}}@keyframes turnBanner{0%{opacity:0;transform:translateY(-100%)}15%{opacity:1;transform:translateY(0)}75%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100%)}}.floating-text{pointer-events:none;text-shadow:0 1px 3px #0000004d;z-index:100;will-change:transform, opacity;font-size:18px;font-weight:800;animation:1s ease-out forwards floatUp;position:absolute}.floating-damage{color:#ef4444}.floating-heal{color:#10b981}.floating-shield{color:#3b82f6}.hit-flash{will-change:background-color;animation:.4s ease-out hitFlash}.heal-glow{will-change:box-shadow;animation:.6s ease-out healGlow}.shield-block{will-change:transform, box-shadow;animation:.5s ease-out shieldBlock}.death-state{will-change:filter, transform, opacity;animation:.8s ease-out forwards deathFade}.bleed-state{will-change:border-color, box-shadow;animation:1.5s ease-in-out infinite bleedPulse}.skill-activate{will-change:box-shadow;animation:.6s ease-out skillActivate}.bounce-in{will-change:transform, opacity;animation:.5s cubic-bezier(.68,-.55,.265,1.55) bounceIn}.number-change{will-change:transform;animation:.3s ease-out numberChange}.victory-burst{will-change:transform, opacity, box-shadow;animation:1s ease-out victoryBurst}.glow-hint{will-change:box-shadow;animation:1.5s ease-in-out infinite glowPulse}.ripple-container{position:relative;overflow:hidden}.ripple-effect{pointer-events:none;will-change:transform, opacity;background:#fff6;border-radius:50%;animation:.6s ease-out ripple;position:absolute;transform:scale(0)}.turn-banner{text-align:center;color:#fff;z-index:200;text-shadow:0 2px 4px #0003;will-change:transform, opacity;background:linear-gradient(135deg,#f59e0b,#d97706);padding:12px 0;font-size:20px;font-weight:800;animation:2s ease-in-out forwards turnBanner;position:fixed;top:0;left:0;right:0}.phase-indicator{text-align:center;color:#92400e;background:linear-gradient(135deg,#fbbf2433,#f59e0b26);border:1px solid #f59e0b4d;border-radius:12px;margin-bottom:12px;padding:8px 16px;font-size:15px;font-weight:700;animation:.3s ease-out fadeIn}.log-entry-animated{will-change:transform, opacity;animation:.3s ease-out slideInUp}@keyframes stepEnterFromRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes stepEnterFromLeft{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}.step-enter-right{animation:.35s ease-out stepEnterFromRight}.step-enter-left{animation:.35s ease-out stepEnterFromLeft}.hero-card-setup{transition:all .25s}.hero-card-setup:hover{transform:translateY(-6px);box-shadow:0 8px 24px #0000001f,0 0 12px #f59e0b40;border-color:#f59e0b!important}.hero-card-setup.selected{box-shadow:0 0 15px #f59e0b80;border:2px solid #f59e0b!important}.rules-panel-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;color:#92400e;background:#f59e0b14;border:1px solid #f59e0b33;border-radius:12px;justify-content:center;align-items:center;gap:6px;padding:10px 16px;font-size:14px;font-weight:600;transition:all .2s;display:flex}.rules-panel-toggle:hover{background:#f59e0b26}.rules-panel-content{text-align:left;color:#78716c;background:#f59e0b0d;border:1px solid #f59e0b26;border-radius:12px;margin-top:8px;padding:12px 16px;font-size:13px;line-height:1.8;animation:.3s ease-out fadeIn;overflow:hidden}.setup-btn:hover{transform:scale(1.06)!important;box-shadow:0 6px 20px #f59e0b73!important}.confetti-piece{will-change:transform, opacity;z-index:300;pointer-events:none;border-radius:2px;width:10px;height:10px;animation:3s ease-in-out forwards confetti;position:fixed;top:-20px}.winner-card{background:#fef3c7;border:2px solid #f59e0b;box-shadow:0 0 15px #f59e0b66}.loser-card{filter:grayscale(.6);opacity:.7}@keyframes comicPop{0%{opacity:0;transform:translate(-50%,-50%)scale(.2)}50%{opacity:1;transform:translate(-50%,-50%)scale(1.3)}to{opacity:0;transform:translate(-50%,-50%)scale(1)}}@keyframes particleBurst{0%{opacity:1;transform:translate(-50%,-50%)scale(0)}60%{opacity:1}to{transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1);opacity:0}}@keyframes shockwave{0%{opacity:.8;border-width:6px;transform:translate(-50%,-50%)scale(.3)}to{opacity:0;border-width:1px;transform:translate(-50%,-50%)scale(2.5)}}.screen-shake{animation:.4s ease-out screenShake}@keyframes screenShake{0%,to{transform:translate(0)}10%{transform:translate(-5px,-3px)}20%{transform:translate(5px,3px)}30%{transform:translate(-4px,2px)}40%{transform:translate(4px,-2px)}50%{transform:translate(-3px,3px)}60%{transform:translate(3px,-1px)}70%{transform:translate(-2px,1px)}}@keyframes healPulseEffect{0%{opacity:0;transform:translate(-50%,-50%)scale(.5)}40%{opacity:.8;transform:translate(-50%,-50%)scale(1.5)}to{opacity:0;transform:translate(-50%,-50%)scale(2)}}@keyframes shieldExpand{0%{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1.1)}to{opacity:.6;transform:scale(1)}}@keyframes flashBang{0%{opacity:.9}30%{opacity:.8}to{opacity:0}}@keyframes ultimateWave{0%{opacity:1;border-width:8px;transform:translate(-50%,-50%)scale(.5)}to{opacity:0;border-width:1px;transform:translate(-50%,-50%)scale(6)}}@keyframes aiThinkingPulse{0%,to{opacity:.85;background-position:0%}50%{opacity:1;background-position:100%}}.ai-thinking-pulse{background-size:200% 200%;animation:1.5s ease-in-out infinite aiThinkingPulse;background:linear-gradient(135deg,#fbbf2440,#f59e0b33,#fbbf2440)!important}.hero-detail-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:1000;background:#0006;justify-content:center;align-items:center;animation:.2s ease-out overlayFadeIn;display:flex;position:fixed;inset:0}@keyframes overlayFadeIn{0%{opacity:0}to{opacity:1}}.hero-detail-card{transform-origin:50%;animation:.3s cubic-bezier(.34,1.56,.64,1) cardPopIn}@keyframes cardPopIn{0%{opacity:0;transform:scale(.8)translateY(20px)}to{opacity:1;transform:scale(1)translateY(0)}}.hero-detail-card .skill-tag{letter-spacing:.5px;border-radius:20px;align-items:center;gap:4px;padding:3px 10px;font-size:11px;font-weight:700;display:inline-flex}.hero-detail-card .skill-item{border-radius:var(--clay-radius-sm);background:#ffffffb3;border:2px solid #0000000a;padding:10px 14px;transition:all .2s}.hero-detail-card .skill-item:hover{background:#fffffff2;transform:translate(4px)}.hero-info-btn{width:22px;height:22px;color:var(--color-text-muted);cursor:pointer;background:#ffffffe6;border:2px solid #0000001a;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:12px;font-weight:800;transition:all .2s;display:flex}.hero-info-btn:hover{background:var(--color-accent);color:#fff;border-color:var(--color-accent);transform:scale(1.15)}@media (height<=700px){.game-table-4p{gap:4px!important;padding:6px 10px!important}}@media (width<=900px){.game-table-4p{gap:4px!important;padding:6px 8px!important}}@media (height<=600px),(width<=700px){.game-table-4p>div{transform-origin:inherit;transform:scale(.85)}.game-table-4p>div:nth-child(2){transform-origin:0 100%}.game-table-4p>div:nth-child(3){transform-origin:0 0}.game-table-4p>div:nth-child(4){transform-origin:100% 0}.game-table-4p>div:nth-child(5){transform-origin:100% 100%}}