/* Palette & type lifted from the current card game (game/style.css) */
:root{--blood:#a10d0d;--blood2:#ff2a2a;--bone:#e9e2d0;--ash:#8a8f98;--bg:#07080a;--panel:rgba(18,20,24,.88);--toxic:#5dff6a;--hell:#ff7a1a;}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;min-height:100vh;color:var(--bone);font-family:Georgia,"Times New Roman",serif;overflow-x:hidden;
  background:radial-gradient(ellipse at 50% -10%,#3a0a0a 0%,transparent 55%),radial-gradient(ellipse at 50% 120%,#3a1206 0%,transparent 60%),var(--bg);}
#fog{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;background:radial-gradient(ellipse 60% 20% at 20% 85%,#9aa3ad33,transparent),radial-gradient(ellipse 70% 25% at 80% 90%,#9aa3ad2a,transparent);animation:fog 18s ease-in-out infinite alternate}
@keyframes fog{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
header,section{position:relative;z-index:1}
header{text-align:center;padding:14px 10px 4px}
h1{margin:0;font-size:clamp(30px,7vw,58px);letter-spacing:.12em;color:var(--blood2);text-shadow:0 0 18px #ff000088,0 3px 0 #000;font-family:Impact,"Arial Black",sans-serif}
.sub{color:var(--ash);letter-spacing:.3em;font-size:12px;text-transform:uppercase}
.screen{display:none;max-width:1150px;margin:0 auto;padding:10px}.screen.active{display:block}
.btn{font:bold 15px Arial,sans-serif;padding:11px 16px;border-radius:8px;border:1px solid #555;background:linear-gradient(#2c2f36,#15171b);color:var(--bone);cursor:pointer;letter-spacing:.04em;touch-action:manipulation}
.btn:hover:not(:disabled){filter:brightness(1.25)}.btn.blood{background:linear-gradient(#b51414,#5c0606);border-color:#ff3a3a}
.btn.ghost{background:linear-gradient(#1a2a22,#0b1410);border-color:#3c6b4a}.btn:disabled{opacity:.35;cursor:not-allowed}
.btn.mode.on{border-color:var(--hell);box-shadow:0 0 10px #ff7a1a88;color:var(--hell)}
.pickbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:8px 0 12px;position:sticky;top:0;z-index:5;background:#07080ae6;padding:8px;border-bottom:1px solid #2a0c0c}
.modes,.filters{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
#pickPrompt{font:bold 18px Impact,Arial;letter-spacing:.08em;color:var(--hell)}
select{background:#15171b;color:var(--bone);border:1px solid #555;border-radius:6px;padding:9px}
.own{font:12px Arial;color:var(--ash);display:flex;gap:4px;align-items:center}
.holder{font:bold 10px Arial;padding:2px 6px;border-radius:4px;background:linear-gradient(#ffd27a,#b07a10);color:#000}.holder.off{opacity:.25}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.card{background:linear-gradient(#17191d,#0b0c0e);border:2px solid #333;border-radius:10px;padding:6px;cursor:pointer;transition:transform .15s,box-shadow .15s;position:relative}
.card:hover{transform:translateY(-3px)}
.card.p1{outline:3px solid var(--blood2);box-shadow:0 0 22px #ff2a2aaa}
.card.p2{outline:3px solid #3a8cff;box-shadow:0 0 22px #3a8cffaa}
.card .pick{position:absolute;top:10px;right:10px;padding:2px 7px;border-radius:4px;font:bold 12px Arial;background:var(--blood)}
.card.p2 .pick{background:#1d4fa0}
.legend,.ultra-rare{border-color:#ffb020;box-shadow:0 0 14px #ff8a0055}.elite{border-color:#b04bff}.rare{border-color:#3a8cff}.muscle-man{border-color:#3fbf5a}.common{border-color:#666}
.art{aspect-ratio:1/1;background-size:cover;background-position:center;border-radius:6px;position:relative}
.num{position:absolute;left:5px;top:5px;background:#000b;padding:1px 6px;border-radius:4px;font:bold 11px Arial}
.cname{font-weight:bold;font-size:14px;margin:5px 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta{font:bold 10px Arial;text-transform:uppercase;color:#ffd27a;display:flex;justify-content:space-between}
.fac-Infernal{color:#ff8a5a}.fac-Grave{color:#a8ff9c}.fac-Iron{color:#ffd27a}.fac-Coven{color:#d6a8ff}.fac-Neutral{color:#cfc8b8}
.stats{display:flex;gap:8px;font:bold 13px Arial;margin:4px 0 2px}.kw{font:11px Arial;color:#bdb6a6;min-height:14px}
/* fight */
.hud{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:center}
.hp-name{font:bold 15px Impact,Arial;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.right{text-align:right}
.hp{height:20px;background:#200;border:2px solid #555;border-radius:4px;position:relative;overflow:hidden}
.hp-fill{position:absolute;inset:0;background:linear-gradient(#ff4a2a,#8a0a0a);transition:width .35s;transform-origin:left}
.right .hp-fill{left:auto;right:0}
.hp-txt{position:absolute;inset:0;font:bold 12px/16px Arial;text-align:center;text-shadow:0 1px 2px #000}
.cd{font:11px Arial;color:var(--ash);margin-top:3px}.cd.ready{color:var(--hell);font-weight:bold}
.round{font:bold 26px Impact;color:var(--blood2);text-shadow:0 0 12px #f00}
.pit{position:relative;height:min(52vh,420px);margin:10px 0;border-radius:12px;overflow:hidden;border:1px solid #3a1010;
  background:radial-gradient(ellipse at 50% 110%,#ff5a1a66,transparent 60%),linear-gradient(#0b0b0e,#1a0606 80%,#3a0c04)}
.pit::after{content:"";position:absolute;left:0;right:0;bottom:0;height:18%;background:linear-gradient(transparent,#ff3a0a55);animation:fire 1.2s ease-in-out infinite alternate}
@keyframes fire{from{opacity:.5}to{opacity:1}}
.ftr{position:absolute;bottom:8%;width:42%;max-width:300px;aspect-ratio:1/1;transition:transform .2s}
#ftr0{left:4%}#ftr1{right:4%}
.sprite{width:100%;height:100%;background-size:cover;background-position:center;border-radius:10px;border:3px solid #111;box-shadow:0 0 25px #000}
#ftr0 .sprite{border-color:#ff3a3a}#ftr1 .sprite{border-color:#3a8cff}
.flip .sprite{transform:scaleX(-1)}
.ftr.lunge0{transform:translateX(30%)}.ftr.lunge1{transform:translateX(-30%)}
.ftr.knock0{animation:knockL .45s}.ftr.knock1{animation:knockR .45s}
@keyframes knockL{0%{transform:translateX(0)}20%{transform:translateX(-18%) rotate(-6deg)}100%{transform:translateX(0)}}
@keyframes knockR{0%{transform:translateX(0)}20%{transform:translateX(18%) rotate(6deg)}100%{transform:translateX(0)}}
.ftr.hurt .sprite{filter:brightness(2.2) sepia(1) hue-rotate(-50deg) saturate(5)}
.ftr.blocking::before{content:"🛡️";position:absolute;font-size:48px;top:30%;left:50%;transform:translateX(-50%);z-index:3;filter:drop-shadow(0 0 10px #3a8cff)}
.ftr.dead .sprite{filter:grayscale(1) brightness(.4);transform:rotate(-12deg) translateY(10%)}
.flip.dead .sprite{transform:scaleX(-1) rotate(-12deg) translateY(10%)}
.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:translate(0)}20%{transform:translate(-8px,4px)}40%{transform:translate(7px,-5px)}60%{transform:translate(-5px,3px)}80%{transform:translate(4px,-2px)}}
#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
#flash.on{animation:flash .3s}#flash.fire{background:#ff5a1a}
@keyframes flash{0%{opacity:.75}100%{opacity:0}}
.dmg{position:absolute;font:bold 38px Impact,Arial;color:#ffdf3a;text-shadow:0 0 8px #f00,0 3px 0 #000;pointer-events:none;z-index:5;animation:float 1s forwards}
.dmg.crit{color:#ff3a3a;font-size:48px}.dmg.heal{color:var(--toxic)}.dmg.blk{color:#9cc8ff;font-size:30px}
@keyframes float{0%{transform:translateY(0) scale(.6);opacity:1}25%{transform:translateY(-20px) scale(1.2)}100%{transform:translateY(-90px) scale(1);opacity:0}}
#banner{position:absolute;top:10%;left:0;right:0;text-align:center;font:bold clamp(20px,5vw,36px) Impact;letter-spacing:.1em;color:var(--hell);text-shadow:0 0 12px #f00,0 2px 0 #000;z-index:6;opacity:0;transition:opacity .2s}
#banner.on{opacity:1}
#turnLabel{text-align:center;font:bold 16px Impact,Arial;letter-spacing:.1em;color:var(--bone);min-height:22px}
.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0}
.act{padding:16px 6px;font-size:16px}
#log{background:var(--panel);border:1px solid #2a0c0c;border-radius:8px;padding:8px;height:110px;overflow:auto;font:13px Arial;color:#cfc8b8}
#log div{margin:2px 0}
.ko-box{max-width:420px;margin:10px auto;text-align:center;background:var(--panel);border:1px solid #3a1010;border-radius:12px;padding:16px}
.ko-title{font:bold 90px Impact;color:var(--blood2);text-shadow:0 0 30px #f00,0 4px 0 #000;animation:slam .5s}
@keyframes slam{0%{transform:scale(3);opacity:0}100%{transform:scale(1);opacity:1}}
#koWinner{font:bold 22px Impact;letter-spacing:.06em;color:var(--hell);margin-bottom:8px}
#koArt{width:70%;margin:0 auto 8px;border:3px solid #ffb020;box-shadow:0 0 25px #ff8a00aa}
#koStats{font:13px Arial;color:var(--ash);margin-bottom:12px}
.ko-btns{display:flex;gap:8px;justify-content:center}
.overlay{position:fixed;inset:0;background:#000e;z-index:50;display:none;align-items:center;justify-content:center;text-align:center;font:bold 22px Impact;letter-spacing:.06em}
.overlay.on{display:flex}.overlay .btn{margin-top:14px}
@media (max-width:600px){ .hp-name{font-size:12px} .cd{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pickbar{justify-content:center} .pit{height:40vh} .ftr{width:46%} .act{font-size:14px;padding:18px 4px} .grid{grid-template-columns:repeat(auto-fill,minmax(105px,1fr))} .cname{font-size:12px} .kw{display:none} }
/* ===== v2 ===== */
#muteBtn{position:fixed;top:10px;right:10px;z-index:60;padding:8px 11px;font-size:20px}
.pickbar{flex-direction:column;align-items:stretch}
.row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center}
.lbl{font:bold 12px Arial;letter-spacing:.2em;color:var(--ash)}
.btn.diff{padding:8px 12px;font-size:13px}.btn.diff.on{border-color:var(--blood2);color:#fff;box-shadow:0 0 10px #ff2a2a99}
.best{font:bold 12px Arial;color:#ffd27a;margin-left:8px}
.howto{background:var(--panel);border:1px solid #3a1010;border-radius:8px;padding:6px 12px;margin-bottom:10px;font:13px Arial;color:#cfc8b8}
.howto summary{cursor:pointer;color:var(--hell);font-weight:bold}
.pit{height:min(54vh,440px)}.pit::after{z-index:2;pointer-events:none}
.cam{position:absolute;inset:0;transition:transform .25s ease-out}
.bg{position:absolute;inset:0}
#fx{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
#arenaName{position:absolute;bottom:6px;left:0;right:0;text-align:center;font:bold 11px Arial;letter-spacing:.4em;color:#ffffff55;z-index:3}
#telegraph{position:absolute;top:8px;right:10px;font:bold 13px Arial;color:#ffd23a;text-shadow:0 0 8px #f80;z-index:6;animation:blink .6s infinite alternate}
@keyframes blink{from{opacity:.4}to{opacity:1}}
.ftr{transition:transform .17s cubic-bezier(.2,.9,.3,1.2),left .4s,right .4s;z-index:3}
.ftr.enter0{transform:translateX(-140%)}.ftr.enter1{transform:translateX(140%)}
.ftr.slide0{transform:translateX(58%);z-index:5}.ftr.slide1{transform:translateX(-58%);z-index:5}
.ftr.brace0{transform:translateX(-6%)}.ftr.brace1{transform:translateX(6%)}
.ftr.windup .sprite{box-shadow:0 0 30px #ffd23a,0 0 60px #ff7a1a;animation:wind .3s infinite alternate}
@keyframes wind{from{filter:brightness(1)}to{filter:brightness(1.5)}}
.ftr.whiffA{animation:whiff .4s}@keyframes whiff{30%{transform:translateX(0) rotate(8deg)}}
.shakeBig{animation:shakeBig .55s}
@keyframes shakeBig{0%,100%{transform:translate(0)}10%{transform:translate(-16px,9px)}30%{transform:translate(14px,-10px)}50%{transform:translate(-10px,6px)}70%{transform:translate(8px,-4px)}90%{transform:translate(-3px,2px)}}
.pit.slowmo{filter:contrast(1.25) saturate(1.4)}.pit.slowmo .cam{transition-duration:.6s}
.pit.slowmo::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;box-shadow:inset 0 0 120px #000,inset 0 0 40px #a10d0d}
#banner{z-index:8}#banner.fire{color:#ffb020}#banner.toxic{color:var(--toxic);text-shadow:0 0 12px #0f0}
#banner.big{font-size:clamp(44px,12vw,96px);top:30%;color:var(--blood2);text-shadow:0 0 30px #f00,0 5px 0 #000;animation:slam .45s}
#banner.fin{color:#fff;text-shadow:0 0 20px #f00,0 0 50px #f00,0 5px 0 #400;letter-spacing:.14em}
#banner.fin.big{font-size:clamp(36px,10vw,84px)}
#flash{z-index:7}.hp-lag{position:absolute;inset:0;background:#fff8;transition:width .5s}.right .hp-lag{left:auto;right:0}
.rage{height:8px;background:#111;border:1px solid #444;border-radius:4px;margin-top:3px;position:relative;overflow:hidden}
.rage span{position:absolute;inset:0;font:bold 7px/7px Arial;letter-spacing:.3em;text-align:center;color:#fff8}
.rage-fill{height:100%;width:0;background:linear-gradient(90deg,#6a00ff,#ff2a6a);transition:width .4s}.right .rage-fill{margin-left:auto}
.rage.full{box-shadow:0 0 10px #ff2a6a;animation:blink .4s infinite alternate}
.round{text-align:center}#streakNo{font:bold 11px Arial;color:#ffd27a;letter-spacing:.1em}
.actions{grid-template-columns:repeat(3,1fr)}
.act{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:20px;padding:10px 4px}.act b{font-size:13px}
.act.fin{background:linear-gradient(#3a0a3a,#140014);border-color:#7a2a7a}
.act.fin.ready:not(:disabled){border-color:#ff2a6a;box-shadow:0 0 18px #ff2a6a;animation:blink .5s infinite alternate}
.ko-title.ann{font-size:clamp(40px,12vw,64px);color:#fff;text-shadow:0 0 20px #f00,0 0 50px #f00}
@media (max-width:600px){ .pit{height:42vh} .act{padding:12px 2px} .act b{font-size:11px} #muteBtn{top:6px;right:6px;padding:5px 8px;font-size:16px} }