*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #020c1a;--panel-bg: #040f1f;--glow-blue: #00aaff;--glow-blue-dim: rgba(0,170,255,.15);--glow-blue-mid: rgba(0,170,255,.35);--damage-orange: #ff6633;--damage-orange-dim: rgba(255,102,51,.15);--heal-green: #00ffaa;--text-bright: #e8f4ff;--text-mid: rgba(200,230,255,.65);--text-dim: rgba(160,200,240,.35);--seam: rgba(0,170,255,.5);--font-display: "Orbitron", monospace;--font-ui: "Rajdhani", sans-serif}html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:var(--font-ui);touch-action:none;-webkit-tap-highlight-color:transparent;user-select:none}#stars{position:fixed;inset:0;pointer-events:none;z-index:0}#app{position:relative;width:100%;height:100%;display:flex;flex-direction:column;z-index:1;isolation:isolate}#seam{position:relative;height:4px;flex-shrink:0;background:linear-gradient(90deg,transparent,var(--glow-blue),var(--seam),var(--glow-blue),transparent);box-shadow:0 0 12px 2px #0af9,0 0 40px 4px #0af3;z-index:50;overflow:visible}#seam-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border:2px solid var(--glow-blue);background:var(--bg);border-radius:50%;box-shadow:0 0 16px 4px #00aaffb3,inset 0 0 10px #00aaff4d;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:50;transition:box-shadow .2s;touch-action:none;-webkit-user-select:none;user-select:none}#seam-center svg{width:22px;height:22px;fill:var(--glow-blue);opacity:.9}#seam-center:hover{box-shadow:0 0 24px 8px #00aaffe6,inset 0 0 16px #00aaff80}.player-panel{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:visible;padding:12px 8px;gap:8px;z-index:1;--btn-size: clamp(64px, 12vw, 84px);--group-width: calc(3 * var(--btn-size) + 10px)}#player2{transform:rotate(180deg)}.player-panel:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 80%,rgba(0,100,200,.08) 0%,transparent 70%);pointer-events:none}.health-wrap{position:relative;display:flex;align-items:center;justify-content:center;width:100%}.health-number{font-family:var(--font-display);font-size:clamp(112px,20vw,180px);font-weight:900;line-height:1;color:var(--text-bright);text-shadow:0 0 20px rgba(0,170,255,.6),0 0 60px rgba(0,170,255,.2),0 2px 4px rgba(0,0,0,.8);transition:color .3s,text-shadow .3s;cursor:default}.health-number.damaged{color:var(--damage-orange);text-shadow:0 0 20px rgba(255,102,51,.8),0 0 60px rgba(255,102,51,.4),0 2px 4px rgba(0,0,0,.8);animation:damage-pulse .4s ease-out}.health-number.dead{color:#f24;text-shadow:0 0 30px rgba(255,34,68,.9),0 0 80px rgba(255,34,68,.5)}@keyframes damage-pulse{0%{transform:scale(1.08)}to{transform:scale(1)}}.pending-badge{position:absolute;right:-4px;top:50%;transform:translateY(-50%);font-family:var(--font-display);font-size:clamp(18px,4vw,28px);font-weight:700;color:var(--damage-orange);text-shadow:0 0 12px rgba(255,102,51,.8);opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap}.pending-badge.visible{opacity:1}.damage-controls,.heal-controls{display:flex;align-items:center;justify-content:space-between;width:var(--group-width)}.controls-row{display:flex;align-items:center;gap:8px}.dmg-btn{position:relative;width:var(--btn-size);height:var(--btn-size);border-radius:8px;border:1.5px solid rgba(0,170,255,.3);background:#00aaff0f;color:var(--glow-blue);font-family:var(--font-display);font-size:0;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s,box-shadow .15s,transform .1s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.dmg-btn:before,.dmg-btn:after{content:"";position:absolute;left:50%;top:50%;background:currentColor;border-radius:1.5px}.dmg-btn:before{width:38%;height:3px;transform:translate(-50%,-50%)}.dmg-btn.plus:after,.dmg-btn.heal-plus:after{width:3px;height:38%;transform:translate(-50%,-50%)}.dmg-btn:active{transform:scale(.92)}.dmg-btn:hover{background:#00aaff24;border-color:var(--glow-blue);box-shadow:0 0 12px #00aaff4d}.dmg-btn.minus:hover,.dmg-btn.plus:hover{background:#ff66331a;border-color:var(--damage-orange);color:var(--damage-orange);box-shadow:0 0 12px #ff66334d}.dmg-display{font-family:var(--font-display);font-size:clamp(32px,5.5vw,48px);font-weight:700;color:var(--damage-orange);min-width:clamp(36px,7vw,56px);text-align:center;text-shadow:0 0 10px rgba(255,102,51,.5)}.attack-btn{position:relative;overflow:hidden;width:var(--group-width);padding:clamp(14px,2vw,20px) 0;border-radius:6px;border:1.5px solid var(--damage-orange);background:linear-gradient(135deg,#ff66332e,#ff320014);color:#ffd9c8;font-family:var(--font-display);font-size:clamp(15px,2.5vw,22px);font-weight:700;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:background .2s,box-shadow .2s,transform .1s;touch-action:manipulation}.attack-btn:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,102,51,.15),transparent);transform:translate(-100%);transition:transform .4s}.attack-btn:hover:before{transform:translate(100%)}.attack-btn:hover{background:linear-gradient(135deg,#ff663352,#ff32002e);box-shadow:0 0 20px #f636,0 0 60px #ff66331a}.attack-btn:active{transform:scale(.96)}.attack-btn:disabled{opacity:.25;cursor:default;pointer-events:none}.heal-btn{position:relative;overflow:hidden;width:var(--group-width);padding:clamp(14px,2vw,20px) 0;border-radius:6px;border:1.5px solid var(--heal-green);background:linear-gradient(135deg,#00ffaa1f,#00c8780f);color:#ccfff0;font-family:var(--font-display);font-size:clamp(15px,2.5vw,22px);font-weight:700;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:background .2s,box-shadow .2s,transform .1s;touch-action:manipulation}.heal-btn:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(0,255,170,.12),transparent);transform:translate(-100%);transition:transform .4s}.heal-btn:hover:before{transform:translate(100%)}.heal-btn:hover{background:linear-gradient(135deg,#00ffaa38,#00c87824);box-shadow:0 0 20px #00ffaa59,0 0 60px #00ffaa14}.heal-btn:active{transform:scale(.96)}.heal-btn:disabled{opacity:.25;cursor:default;pointer-events:none}.heal-display{font-family:var(--font-display);font-size:clamp(32px,5.5vw,48px);font-weight:700;color:var(--heal-green);min-width:clamp(36px,7vw,56px);text-align:center;text-shadow:0 0 10px rgba(0,255,170,.5)}.dmg-btn.heal-plus:hover{background:#00ffaa1a;border-color:var(--heal-green);color:var(--heal-green);box-shadow:0 0 12px #00ffaa4d}.dmg-btn.heal-minus:hover{background:#00ffaa0f;border-color:var(--heal-green);color:var(--heal-green);box-shadow:0 0 8px #0fa3}.controls-divider{width:1px;height:clamp(48px,8vw,64px);background:linear-gradient(to bottom,transparent,rgba(0,170,255,.2),transparent);flex-shrink:0}.health-number.healed{color:var(--heal-green);text-shadow:0 0 20px rgba(0,255,170,.8),0 0 60px rgba(0,255,170,.4),0 2px 4px rgba(0,0,0,.8);animation:heal-pulse .4s ease-out}@keyframes heal-pulse{0%{transform:scale(1.06)}to{transform:scale(1)}}.log-overlay{position:absolute;inset:8px;background:#040f1ff5;backdrop-filter:blur(10px);border:1px solid rgba(0,170,255,.3);border-radius:10px;z-index:20;display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .2s;box-shadow:0 0 30px #0af3}.log-overlay.visible{opacity:1;pointer-events:auto}.log-overlay-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(0,170,255,.15)}.log-overlay-title{font-family:var(--font-display);font-size:clamp(10px,1.6vw,13px);font-weight:700;letter-spacing:.25em;color:var(--text-bright)}.log-overlay-close{background:transparent;border:1px solid rgba(0,170,255,.3);color:var(--text-mid);width:26px;height:26px;border-radius:4px;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s,border-color .15s}.log-overlay-close:hover{background:#00aaff1a;color:var(--glow-blue);border-color:var(--glow-blue)}.log-overlay-body{flex:1;overflow-y:auto;padding:8px 14px 12px;scrollbar-width:thin;scrollbar-color:rgba(0,170,255,.3) transparent}.log-overlay-body .log-entry{text-align:left;font-size:clamp(11px,1.5vw,13px);padding:4px 0;color:var(--text-mid)}.log-overlay-body .log-entry.damage-entry{color:#ff6633d9}.log-overlay-body .log-entry.undo-entry{color:#00ffaab3}.log-overlay-body:empty:before{content:"No actions yet";display:block;text-align:center;font-family:var(--font-ui);font-size:11px;color:var(--text-dim);letter-spacing:.15em;padding:20px 0}.log-entry{font-family:var(--font-ui);font-size:clamp(9px,1.5vw,12px);font-weight:500;color:var(--text-dim);text-align:center;padding:1px 0;letter-spacing:.05em;animation:log-fade .3s ease-out}.log-entry.damage-entry{color:#ff66338c}.log-entry.undo-entry{color:#00ffaa73}@keyframes log-fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.action-row{display:flex;align-items:center;gap:8px}.undo-corner{position:absolute;top:12px;left:12px;z-index:3}.log-corner{position:absolute;top:12px;right:12px;z-index:3}.icon-btn{width:clamp(34px,7vw,44px);height:clamp(34px,7vw,44px);border-radius:8px;border:1.5px solid rgba(0,170,255,.2);background:#00aaff0a;color:var(--text-mid);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s,box-shadow .15s;flex-shrink:0;touch-action:manipulation}.icon-btn svg{width:16px;height:16px}.icon-btn:hover{background:#00aaff1a;border-color:var(--glow-blue);box-shadow:0 0 10px #00aaff40;color:var(--glow-blue)}.icon-btn:disabled{opacity:.2;pointer-events:none}#reset-overlay{position:fixed;inset:0;background:#020c1aeb;backdrop-filter:blur(8px);z-index:100;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}#reset-overlay.visible{opacity:1;pointer-events:all}.reset-modal{text-align:center;padding:32px 40px;border:1px solid rgba(0,170,255,.3);border-radius:12px;background:#040f1ff2;box-shadow:0 0 40px #00aaff26}.reset-modal h2{font-family:var(--font-display);font-size:18px;color:var(--text-bright);letter-spacing:.2em;margin-bottom:8px}.reset-modal p{font-family:var(--font-ui);font-size:14px;color:var(--text-mid);margin-bottom:24px;letter-spacing:.05em}.reset-progress-ring{width:64px;height:64px;margin:0 auto 20px;position:relative}.reset-progress-ring svg{transform:rotate(-90deg)}.ring-bg{fill:none;stroke:#00aaff26;stroke-width:4}.ring-fill{fill:none;stroke:var(--glow-blue);stroke-width:4;stroke-linecap:round;stroke-dasharray:175.9;stroke-dashoffset:175.9;transition:stroke-dashoffset .05s linear}.ring-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--glow-blue)}.win-flash{position:absolute;inset:0;background:radial-gradient(ellipse,rgba(0,255,170,.12),transparent 70%);pointer-events:none;opacity:0;z-index:5}.win-flash.active{animation:win-pulse 1.2s ease-in-out infinite}@keyframes win-pulse{0%,to{opacity:0}50%{opacity:1}}.victory-banner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;z-index:6;pointer-events:none;opacity:0;transition:opacity .4s}.victory-banner.visible{opacity:1}.victory-banner .v-title{font-family:var(--font-display);font-size:clamp(18px,4vw,28px);font-weight:900;color:#0fa;letter-spacing:.3em;text-shadow:0 0 20px rgba(0,255,170,.8),0 0 60px rgba(0,255,170,.3);text-transform:uppercase}.victory-banner .v-sub{font-family:var(--font-ui);font-size:clamp(10px,2vw,14px);color:#00ffaaa6;letter-spacing:.2em;margin-top:4px}::-webkit-scrollbar{width:0}