:root{
  --ink:#f0e8d4; --muted:#a99c80; --gold:#f0cf6e; --gold-d:#8a6a1c; --gold-l:#fff0b8;
  --good:#43d188; --good-d:#0c5b35; --good-glow:rgba(67,209,136,.6);
  --evil:#ff4a5f; --evil-d:#5a0f1d; --evil-glow:rgba(255,74,95,.6);
  --mana:#4fc2ff; --line:#4a3f57;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
html,body{margin:0;height:100%;overflow:hidden;touch-action:manipulation;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body{color:var(--ink);font-family:'Spectral',Georgia,serif;background:#05040a}
/* long-press shows the in-game card tooltip — never the iOS "Copy / Search" text-selection menu.
   Re-enable selection only where the user actually types. */
input,textarea,[contenteditable]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
h1,h2,.disp{font-family:'Cinzel',Georgia,serif;letter-spacing:.04em}

#app{position:fixed;inset:0;display:flex;flex-direction:column;
  background:
   radial-gradient(1100px 520px at 50% 6%, rgba(70,30,30,.55), transparent 60%),
   radial-gradient(1100px 520px at 50% 94%, rgba(30,55,40,.5), transparent 60%),
   radial-gradient(1400px 900px at 50% 50%, #1a1530 0%, #0c0a17 55%, #05040a 100%);}
#app::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><filter id='n'><feTurbulence baseFrequency='.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/></svg>");}
#app::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;box-shadow:inset 0 0 260px 50px rgba(0,0,0,.9)}
#midline{position:absolute;left:0;right:0;top:50%;height:2px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(240,207,110,.35),transparent);box-shadow:0 0 24px rgba(240,207,110,.25)}

#start{justify-content:center;gap:22px}
#start h1{font-size:clamp(40px,8vw,86px);margin:0;font-weight:900;color:var(--gold);text-shadow:0 0 40px rgba(240,207,110,.45),0 3px 0 #000,0 0 2px #000;letter-spacing:.08em}
#start .tag{color:var(--muted);max-width:640px;line-height:1.5;font-size:16px;margin-top:-12px;font-style:italic}
.choose{display:flex;gap:24px;flex-wrap:wrap;justify-content:center}
.fac{width:248px;cursor:pointer;border-radius:18px;padding:26px 20px;position:relative;overflow:hidden;background:linear-gradient(180deg,#241f30,#100d18);transition:.3s;border:1px solid var(--line)}
.fac:hover{transform:translateY(-8px) scale(1.02)}
.fac .crest{font-size:54px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.6))}
.fac h2{margin:.25em 0;font-size:27px;font-weight:900}
.fac.good{box-shadow:0 0 0 1px var(--good-d),0 20px 50px -22px var(--good-glow)}
.fac.good:hover{box-shadow:0 0 0 2px var(--good),0 30px 70px -16px var(--good-glow)}
.fac.good h2{color:var(--good)}
.fac.evil{box-shadow:0 0 0 1px var(--evil-d),0 20px 50px -22px var(--evil-glow)}
.fac.evil:hover{box-shadow:0 0 0 2px var(--evil),0 30px 70px -16px var(--evil-glow)}
.fac.evil h2{color:var(--evil)}
.fac p{font-size:13.5px;color:var(--muted);line-height:1.5;margin:.4em 0 0}
.fac .sheen{position:absolute;top:-60%;left:-30%;width:60%;height:220%;transform:rotate(20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);transition:.5s}
.fac:hover .sheen{left:120%}
.hint{color:#7a7060;font-size:12.5px;max-width:640px;line-height:1.6}

#table{flex:1;display:grid;grid-template-rows:auto 1fr 1fr auto;min-height:0;min-width:0;position:relative;z-index:3}
.heroRow{display:flex;align-items:center;justify-content:center;padding:8px 10px;min-width:0}
.zone{position:relative;display:flex;align-items:center;justify-content:center;padding:4px;min-height:0;min-width:0;flex-wrap:nowrap;overflow:visible}
.zone.enemyZone{align-items:flex-end;padding-bottom:8px} .zone.myZone{align-items:flex-start;padding-top:8px}
/* inner row that holds the units — scaled by GAME.fitZone() so the whole board always fits the screen */
.zRow{display:flex;gap:10px;flex-wrap:nowrap;align-items:flex-end;will-change:transform}
.zone.myZone .zRow{align-items:flex-start;transform-origin:center top}
.zone.enemyZone .zRow{align-items:flex-end;transform-origin:center bottom}

.hero{display:flex;align-items:center;gap:14px;padding:8px 18px 8px 8px;border-radius:60px;position:relative;min-width:230px;cursor:default;background:linear-gradient(180deg,#2a2433,#15121c);border:1px solid var(--line)}
.hero.good{box-shadow:inset 0 0 0 1px rgba(67,209,136,.3),0 0 30px -12px var(--good-glow)}
.hero.evil{box-shadow:inset 0 0 0 1px rgba(255,74,95,.3),0 0 30px -12px var(--evil-glow)}
.hero .av{width:62px;height:62px;border-radius:50%;background-size:cover;background-position:center top;flex:0 0 auto;border:3px solid var(--gold-d);box-shadow:0 0 16px rgba(0,0,0,.7),inset 0 0 12px rgba(0,0,0,.5)}
.hero.good .av{border-color:#2c8d59} .hero.evil .av{border-color:#a32c3a}
.hero .meta{display:flex;flex-direction:column;line-height:1.15;gap:2px}
.hero .nm{font-family:'Cinzel',serif;font-size:16px;font-weight:700;color:var(--gold)}
.hero .fc{font-size:11px;color:var(--muted);letter-spacing:.12em}
.manaBar{display:flex;align-items:center;gap:5px;margin-top:3px}
.crystal{width:16px;height:16px;transform:rotate(45deg);border-radius:3px;background:#13202c;border:1px solid #2c4258;transition:.3s}
.crystal.full{background:linear-gradient(135deg,#aee6ff,#1f7fd6);border-color:#cfeeff;box-shadow:0 0 10px var(--mana)}
.manaTxt{font-size:14px;color:var(--mana);margin-left:5px;font-family:'Cinzel',serif}
.deckCount{font-size:12px;color:var(--muted);margin-left:8px}
.heroHP{position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-family:'Cinzel',serif;font-weight:900;font-size:21px;color:#fff;background:radial-gradient(circle at 35% 30%,#ff9aa2,#c01e2f 60%,#5a0f1d);border-radius:50%;border:2px solid #ffd0d4;box-shadow:0 0 16px rgba(210,30,47,.7),0 4px 10px -3px #000;text-shadow:0 1px 2px #000}
.hero.targetable{cursor:crosshair;box-shadow:0 0 0 3px var(--evil),0 0 40px var(--evil-glow);animation:tpulse 1s infinite}
@keyframes tpulse{50%{box-shadow:0 0 0 4px #ff8a98,0 0 50px var(--evil-glow)}}
.hero.heroHit{animation:heroHit .4s}
@keyframes heroHit{20%{transform:translateX(-8px) rotate(-1deg)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}}

.unit{width:128px;height:174px;border-radius:14px;position:relative;flex:0 0 auto;cursor:default;background:#0a0810;overflow:visible;transition:transform .14s,box-shadow .18s;animation:idle 3.6s ease-in-out infinite}
@keyframes idle{50%{transform:translateY(-3px)}}
.unit .inner{position:absolute;inset:0;border-radius:14px;overflow:hidden;box-shadow:0 8px 20px -6px #000,inset 0 0 0 2px #000}
.unit .art{position:absolute;inset:0;background-size:cover;background-position:center top}
.unit .grad{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.25) 56%,rgba(0,0,0,.92) 84%,#000)}
.unit .ring{position:absolute;inset:0;border-radius:14px;border:3px solid;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.14),transparent 40%)}
.unit.good .ring{border-color:#3fbf78;box-shadow:inset 0 0 16px rgba(67,209,136,.22)}
.unit.evil .ring{border-color:#d23b4e;box-shadow:inset 0 0 16px rgba(255,74,95,.22)}
.unit .nm{position:absolute;left:5px;right:5px;bottom:26px;text-align:center;font-family:'Cinzel',serif;font-size:12.5px;font-weight:700;color:var(--gold-l);text-shadow:0 1px 4px #000;line-height:1.06;z-index:2;letter-spacing:.02em}
.unit .race{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:9px;letter-spacing:.13em;color:var(--gold);opacity:.85;text-transform:uppercase;z-index:2}
.unit .pa,.unit .ph{position:absolute;bottom:-10px;width:42px;height:42px;display:flex;align-items:center;justify-content:center;font-family:'Cinzel',serif;font-weight:900;font-size:21px;color:#fff;text-shadow:0 2px 4px #000;z-index:3;border-radius:50%}
.unit .pa{left:-10px;background:radial-gradient(circle at 35% 30%,#ff7a6a,#b81f1f 60%,#5a0f0f);border:3px solid #ffd0c8;box-shadow:0 4px 9px -2px #000,0 0 12px rgba(184,31,31,.55)}
.unit .ph{right:-10px;background:radial-gradient(circle at 35% 30%,#7fe6a0,#1f9b52 60%,#0d4a26);border:3px solid #d0ffe0;box-shadow:0 4px 9px -2px #000,0 0 12px rgba(31,155,82,.55)}
.unit .badges{position:absolute;top:4px;left:4px;right:4px;display:flex;flex-wrap:wrap;gap:3px;justify-content:center;z-index:3}
.badge{width:16px;height:16px;display:flex;align-items:center;justify-content:center;font-size:9px;border-radius:50%;background:rgba(8,6,12,.82);border:1px solid var(--gold-d);box-shadow:0 0 6px rgba(0,0,0,.6)}
.unit.canAct{cursor:grab}
.unit.canAct .ring{box-shadow:0 0 0 2px var(--good),0 0 22px var(--good-glow),inset 0 0 16px rgba(67,209,136,.3)}
.unit.selected{transform:translateY(-14px) scale(1.1)!important;z-index:8;animation:none}
.unit.selected .ring{box-shadow:0 0 0 3px var(--gold),0 0 34px rgba(240,207,110,.7)}
.unit.targetable{cursor:crosshair;animation:tpulse2 1s infinite}
@keyframes tpulse2{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.unit.targetable .ring{box-shadow:0 0 0 3px var(--evil),0 0 28px var(--evil-glow)}
.unit.guard .ring{border-style:double;border-width:5px}
.unit .shieldwall{display:none;position:absolute;inset:-5px;border-radius:14px;border:2px dashed rgba(170,190,255,.55);box-shadow:0 0 14px rgba(120,150,255,.35);pointer-events:none;z-index:1}
.unit.guard .shieldwall{display:block}
.unit.shield .inner{box-shadow:0 0 0 3px #ffe79a,0 0 22px rgba(255,231,154,.85),inset 0 0 0 2px #000}
.unit .stealth{display:none}
.unit.hidden{opacity:.55;filter:grayscale(.5)}
.unit.hidden .stealth{display:block;position:absolute;top:3px;right:4px;color:#cdb6ff;font-size:14px;text-shadow:0 0 8px #8a6bff;z-index:3}
.unit.frozen .art{filter:hue-rotate(170deg) saturate(1.4) brightness(1.15)}
.unit.frozen .inner::after{content:"❄";position:absolute;top:2px;left:50%;transform:translateX(-50%);color:#cfefff;font-size:16px;text-shadow:0 0 10px #6bd0ff;z-index:3}
.unit.poisoned .ph{background:radial-gradient(circle at 35% 30%,#e0b0ff,#7a1fae 60%,#3a0d5a);border-color:#ecd0ff}
.unit.attacking{z-index:9!important;animation:none}
.unit.recoil{animation:recoil .3s}
@keyframes recoil{30%{transform:scale(.9) translateY(4px)}}
/* ---- status-effect feedback: clear, lingering visuals so the player SEES shield/dodge/confused ---- */
.statusFX{position:absolute;z-index:64;pointer-events:none;display:flex;flex-direction:column;align-items:center;text-align:center;transform:translate(-50%,-50%);text-shadow:0 2px 8px #000,0 0 16px currentColor}
.statusFX .sfIco{font-size:48px;line-height:1;filter:drop-shadow(0 0 12px currentColor)}
.statusFX .sfLbl{font-family:'Bangers',cursive;font-size:23px;letter-spacing:.05em;color:#fff;-webkit-text-stroke:1.6px #000;paint-order:stroke fill;margin-top:-3px}
.fxRing{position:absolute;width:130px;height:130px;border-radius:50%;pointer-events:none;z-index:60;transform:translate(-50%,-50%)}
.fxRing.shield{border:5px solid #ffe79a;box-shadow:0 0 30px rgba(255,231,154,.95),inset 0 0 26px rgba(255,231,154,.8)}
.unit.shieldFlash .inner{animation:shieldFlash .62s ease-out}
@keyframes shieldFlash{0%{box-shadow:0 0 0 4px #fff,0 0 46px rgba(255,231,154,1),inset 0 0 0 2px #000}100%{box-shadow:0 0 0 3px #ffe79a,0 0 22px rgba(255,231,154,.85),inset 0 0 0 2px #000}}
.unit.dodging{animation:dodgeSide .56s cubic-bezier(.3,1.2,.4,1)!important;z-index:9}
@keyframes dodgeSide{0%{transform:translateX(0)}28%{transform:translateX(-28px) rotate(-8deg)}56%{transform:translateX(11px) rotate(3deg)}100%{transform:translateX(0)}}
.unit.confusedHit{animation:confSpin .86s ease-in-out!important;z-index:9}
@keyframes confSpin{0%{transform:rotate(0)}22%{transform:rotate(-10deg)}48%{transform:rotate(9deg)}74%{transform:rotate(-6deg)}100%{transform:rotate(0)}}
/* persistent CONFUSED indicator: a bobbing dizzy swirl above the head + slight desaturation */
.unit.confused .inner{filter:saturate(.8) brightness(.95)}
.unit.confused::after{content:"\1F4AB";position:absolute;top:-7px;left:50%;font-size:19px;z-index:5;text-shadow:0 0 9px #c98cff;animation:confBob 1.7s ease-in-out infinite}
@keyframes confBob{0%,100%{transform:translateX(-50%) translateY(0) rotate(-10deg)}50%{transform:translateX(-50%) translateY(-3px) rotate(10deg)}}
.unit.born .inner{animation:bornIn .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes bornIn{from{transform:scale(.4);opacity:0;filter:brightness(3)}}

#hand{display:flex;align-items:flex-end;justify-content:center;padding:14px 8px 22px;min-height:264px;position:relative;z-index:5}
.card{width:174px;height:244px;border-radius:16px;position:relative;margin:0 -14px;cursor:pointer;flex:0 0 auto;transition:transform .2s cubic-bezier(.2,.8,.3,1.3),margin .2s;transform-origin:bottom center;background:#0a0810;overflow:visible;box-shadow:0 14px 30px -10px #000}
.pngCard{width:140px;height:190px;background-size:contain;background-repeat:no-repeat;background-position:center;background-color:transparent;box-shadow:0 12px 26px -8px #000;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.pngCard .ring{position:absolute;inset:4px;border-radius:11px;border:2px solid transparent;pointer-events:none;transition:.2s}
.pngCard.good.playable .ring{border-color:#43d188;box-shadow:0 0 20px rgba(67,209,136,.5),inset 0 0 14px rgba(67,209,136,.25)}
.pngCard.evil.playable .ring{border-color:#ff4a5f;box-shadow:0 0 20px rgba(255,74,95,.5),inset 0 0 14px rgba(255,74,95,.25)}
.pngCard.playable{cursor:grab;animation:cardBob 2.5s ease-in-out infinite}
@keyframes cardBob{50%{transform:translateY(-2px)}}
.pngCard.unplayable{filter:grayscale(.55) brightness(.7) drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.pngCard:hover{transform:translateY(-18px) scale(1.1);z-index:10}
.pngCard.lifting{transform:translateY(-130px) scale(1.18);opacity:0;transition:.32s}
.pngCard.costy::before{content:"";position:absolute;top:10px;left:10px;width:34px;height:34px;border-radius:50%;border:2px solid #ff4a5f;box-shadow:0 0 12px rgba(255,74,95,.7);pointer-events:none}
.card .inner{position:absolute;inset:0;border-radius:16px;overflow:hidden;box-shadow:inset 0 0 0 2px #000}
.card .art{position:absolute;inset:0;background-size:cover;background-position:center top}
.card .grad{position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(0,0,0,.3) 56%,rgba(0,0,0,.92) 82%,#000)}
.card .ring{position:absolute;inset:0;border-radius:16px;border:3px solid var(--gold-d);pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.16),transparent 38%)}
.card.good .ring{border-color:#2c8d59} .card.evil .ring{border-color:#a32c3a}
.card .gem{position:absolute;top:8px;right:9px;width:16px;height:16px;border-radius:50%;z-index:4;box-shadow:0 0 8px rgba(0,0,0,.6),inset 0 0 4px rgba(255,255,255,.5)}
.card .mc{position:absolute;top:-10px;left:-10px;width:54px;height:54px;display:flex;align-items:center;justify-content:center;font-family:'Cinzel',serif;font-weight:900;color:#fff;font-size:26px;z-index:5;text-shadow:0 2px 4px #000;background:radial-gradient(circle at 35% 28%,#bfeaff,#1f7fd6 62%,#0d3f78);border-radius:50%;border:3px solid #d7f1ff;box-shadow:0 0 18px var(--mana),0 5px 10px -2px #000}
.card .nm{position:absolute;left:6px;right:6px;bottom:66px;text-align:center;font-family:'Cinzel',serif;font-weight:700;font-size:15px;color:var(--gold-l);text-shadow:0 1px 4px #000;line-height:1.08;z-index:3;letter-spacing:.02em}
.card .race{position:absolute;left:0;right:0;bottom:54px;text-align:center;font-size:10px;letter-spacing:.14em;color:var(--gold);opacity:.85;text-transform:uppercase;z-index:3}
.card .txt{position:absolute;left:9px;right:9px;bottom:8px;height:44px;font-size:10.5px;line-height:1.32;text-align:center;color:#e8dcbf;overflow:hidden;z-index:3;font-weight:500;text-shadow:0 1px 2px #000}
.card .pa,.card .ph{position:absolute;bottom:-12px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-family:'Cinzel',serif;font-weight:900;font-size:24px;color:#fff;text-shadow:0 2px 4px #000;z-index:5;border-radius:50%}
.card .pa{left:-12px;background:radial-gradient(circle at 35% 30%,#ff7a6a,#b81f1f 60%,#5a0f0f);border:3px solid #ffd0c8;box-shadow:0 5px 10px -2px #000,0 0 14px rgba(184,31,31,.55)}
.card .ph{right:-12px;background:radial-gradient(circle at 35% 30%,#7fe6a0,#1f9b52 60%,#0d4a26);border:3px solid #d0ffe0;box-shadow:0 5px 10px -2px #000,0 0 14px rgba(31,155,82,.55)}
.card:hover{transform:translateY(-58px) scale(1.18) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg));z-index:30;margin:0 14px;box-shadow:0 36px 60px -12px #000}
.card.playable .ring{border-color:var(--gold);box-shadow:inset 0 0 18px rgba(240,207,110,.4),0 0 14px rgba(240,207,110,.3)}
.card.playable{cursor:grab}
.card.playable::after{content:"";position:absolute;inset:-3px;border-radius:16px;border:1px solid rgba(240,207,110,.5);animation:playGlow 1.8s ease-in-out infinite;pointer-events:none}
@keyframes playGlow{50%{box-shadow:0 0 22px rgba(240,207,110,.5)}}
.card.unplayable .inner{filter:grayscale(.55) brightness(.74)}
.card.unplayable .nm,.card.unplayable .race,.card.unplayable .txt{opacity:.65}
.card.unplayable:hover{transform:translateY(-14px) scale(1.06)}
.card.lifting{animation:cardLift .35s forwards}
@keyframes cardLift{to{transform:translateY(-120px) scale(.4);opacity:0}}

#hud{position:absolute;right:14px;top:50%;transform:translateY(-50%);z-index:25}
#endBtn{font-family:'Cinzel',serif;font-weight:700;font-size:14px;padding:18px 16px;border-radius:50px;cursor:pointer;border:none;color:#1a1206;writing-mode:vertical-rl;letter-spacing:.14em;transition:.15s;background:radial-gradient(circle at 35% 25%,#fff0b8,#f0cf6e 55%,#8a6a1c);box-shadow:0 0 26px rgba(240,207,110,.55),0 6px 16px -4px #000}
#endBtn:hover{filter:brightness(1.1)} #endBtn:active{transform:scale(.95)}
#endBtn.enemyTurn{background:radial-gradient(circle at 35% 25%,#5a5566,#26232f);color:#8a8396;cursor:not-allowed;box-shadow:none;animation:thinking 1.1s infinite}
#endBtn.noMoves{animation:endPulse .7s ease-in-out infinite alternate;background:radial-gradient(circle at 35% 25%,#fff6d4,#ffd86b 50%,#a07628)}
@keyframes endPulse{from{box-shadow:0 0 22px rgba(240,207,110,.6),0 6px 16px -4px #000;transform:scale(1)}to{box-shadow:0 0 44px rgba(255,238,170,.95),0 6px 16px -4px #000;transform:scale(1.07)}}
@keyframes thinking{50%{opacity:.45}}

#turnFlash{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:35;overflow:hidden}
#turnFlash .bar{position:absolute;left:-60%;right:-60%;height:120px;top:50%;transform:translateY(-50%) skewY(-4deg);opacity:0}
#turnFlash.show .bar{animation:bar 1.3s}
@keyframes bar{12%{opacity:1}40%{opacity:1}100%{opacity:0}}
#turnFlash span{font-family:'Cinzel',serif;font-weight:900;font-size:clamp(32px,7vw,64px);opacity:0;letter-spacing:.1em;color:var(--gold);text-shadow:0 0 36px rgba(240,207,110,.7),0 4px 0 #000}
#turnFlash.show span{animation:flash 1.3s}
@keyframes flash{14%{opacity:1;transform:scale(1)}34%{opacity:1;transform:scale(1.04)}100%{opacity:0;transform:scale(1.2)}}

#log{position:absolute;left:12px;bottom:210px;width:220px;max-height:150px;overflow:hidden;z-index:24;font-size:11.5px;line-height:1.4;display:flex;flex-direction:column-reverse;gap:3px;pointer-events:none}
#log div{background:rgba(8,7,12,.72);color:var(--ink);padding:3px 9px;border-radius:7px;border-left:2px solid var(--gold);animation:logIn .3s}
@keyframes logIn{from{opacity:0;transform:translateX(-12px)}}

#tip{position:fixed;z-index:80;width:auto;max-width:392px;background:linear-gradient(180deg,#1a1622,#100d18);border:1px solid var(--gold-d);border-radius:13px;padding:12px;font-size:12.5px;line-height:1.45;color:var(--ink);box-shadow:0 18px 40px -10px #000,0 0 0 1px rgba(0,0,0,.4);display:none;pointer-events:none;gap:12px;align-items:flex-start}
#tip.tipGood{border-color:rgba(67,209,136,.55)} #tip.tipEvil{border-color:rgba(255,90,80,.5)}
#tip .tipImg{flex:0 0 120px;width:120px;height:120px;border-radius:9px;background-size:contain;background-repeat:no-repeat;background-position:center;background-color:#0c0a12;border:1px solid var(--line)}
#tip .tipBody{flex:1 1 auto;min-width:0;max-width:236px}
#tip b{color:var(--gold);font-family:'Cinzel',serif;font-size:15px;letter-spacing:.3px}
#tip .tipSub{color:#a99c80;font-size:11px;margin:1px 0 7px;text-transform:uppercase;letter-spacing:.4px}
#tip .tipStats{display:flex;gap:7px;margin-bottom:7px}
#tip .tipStats .ts{display:flex;flex-direction:column;align-items:center;line-height:1;font-family:'Cinzel',serif;font-weight:700;font-size:16px;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:7px;padding:4px 9px;min-width:34px}
#tip .tipStats .ts i{font-style:normal;font-size:8px;font-weight:600;letter-spacing:.5px;color:#8a8070;margin-top:2px}
#tip .tipStats .m{color:#7fc8ff} #tip .tipStats .a{color:#ffd27a} #tip .tipStats .h{color:#ff8a8a}
#tip .tipStats .up{color:#7CFF9E;text-shadow:0 0 8px rgba(80,255,140,.5)}
#tip .tipAbil{color:#e8dcc0;margin-bottom:6px}
#tip .tipKw{border-top:1px solid var(--line);padding-top:6px;margin-top:2px;display:flex;flex-direction:column;gap:3px}
#tip .tipKw .kw{color:#9fd0ff;font-weight:600}
#tip .tipLore{border-top:1px solid var(--line);margin-top:7px;padding-top:6px;color:#9a8f78;font-style:italic;font-size:11.5px;max-height:96px;overflow:hidden}

#fxlayer{position:absolute;inset:0;z-index:55;pointer-events:none;overflow:hidden}
#vignette{position:absolute;inset:0;z-index:58;pointer-events:none;opacity:0;box-shadow:inset 0 0 120px 30px rgba(255,40,40,0)}
.spark{position:absolute;border-radius:50%;pointer-events:none}
.shock{position:absolute;border-radius:50%;border:3px solid #fff;pointer-events:none}
.impact{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(circle,#fff 0%,rgba(255,240,180,.9) 30%,rgba(255,120,60,.5) 55%,transparent 72%)}

#over{position:absolute;inset:0;z-index:45;display:none;align-items:center;justify-content:center;flex-direction:column;gap:20px;background:rgba(4,3,8,.9);backdrop-filter:blur(4px);text-align:center;padding:20px}
#over h1{font-size:clamp(46px,10vw,104px);margin:0;font-weight:900}
#over.win h1{color:var(--gold);text-shadow:0 0 50px rgba(240,207,110,.7)}
#over.lose h1{color:var(--evil);text-shadow:0 0 50px var(--evil-glow)}
#over p{color:var(--muted);font-size:15px;max-width:520px;line-height:1.5}
.btn{font-family:'Cinzel',serif;font-weight:700;font-size:16px;padding:15px 32px;border-radius:50px;cursor:pointer;border:1px solid var(--gold-d);color:#1a1206;background:radial-gradient(circle at 35% 25%,#fff0b8,#f0cf6e 55%,#8a6a1c);box-shadow:0 6px 20px -6px #000;transition:.15s}
.btn:hover{filter:brightness(1.1);transform:translateY(-2px)}

.float{position:absolute;z-index:62;font-family:'Cinzel',serif;font-weight:900;font-size:30px;pointer-events:none;text-shadow:0 2px 6px #000,0 0 14px currentColor}
.float.dmg{color:#ff5a5a} .float.heal{color:#6dff9a} .float.miss{color:#cdb6ff;font-size:18px}

@media(max-width:600px){
  .unit{width:74px;height:102px}.unit .nm{font-size:8px;bottom:17px}.unit .race{font-size:6px}
  .unit .pa,.unit .ph{width:24px;height:24px;font-size:12px}
  .card{width:128px;height:182px;margin:0 -12px}.card .nm{font-size:12px;bottom:54px}.card .race{font-size:9px;bottom:42px}.card .txt{font-size:9px;height:34px}
  .card .mc{width:42px;height:42px;font-size:21px;top:-8px;left:-8px}.card .pa,.card .ph{width:38px;height:38px;font-size:20px;bottom:-10px}.card .pa{left:-10px}.card .ph{right:-10px}
  #hand{min-height:200px;padding:8px 8px 16px}
  .hero{min-width:170px;padding:6px 16px 6px 6px}.hero .av{width:50px;height:50px}#log{display:none}
}
/* ===== deck piles ===== */
.deckPile{position:absolute;width:96px;height:134px;z-index:6;cursor:default}
#myDeck{right:22px;bottom:22px}
#enemyDeck{right:22px;top:22px}
.deckPile .cardback{position:absolute;inset:0;border-radius:11px;border:3px solid var(--gold-d);
  background:
    repeating-linear-gradient(45deg,rgba(0,0,0,.25) 0 6px,transparent 6px 12px),
    radial-gradient(circle at 50% 40%,#2a2540,#120f1c);
  box-shadow:0 6px 16px -4px #000,inset 0 0 22px rgba(120,90,40,.25),inset 0 0 0 1px rgba(240,207,110,.18)}
.deckPile .cardback::after{content:"✦";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:42px;color:var(--gold);opacity:.7;text-shadow:0 0 18px rgba(240,207,110,.6)}
.deckPile .s1{transform:translate(5px,5px);opacity:.55}
.deckPile .s2{transform:translate(2.5px,2.5px);opacity:.8}
.deckPile .count{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);min-width:44px;height:34px;padding:0 12px;
  display:flex;align-items:center;justify-content:center;font-family:'Cinzel',serif;font-weight:900;font-size:19px;color:#fff;
  background:radial-gradient(circle at 35% 30%,#3a3245,#15121c);border:2px solid var(--gold-d);border-radius:18px;z-index:2;
  box-shadow:0 4px 10px -2px #000,0 0 12px rgba(240,207,110,.3);text-shadow:0 1px 3px #000;letter-spacing:.02em}
.deckPile.draw .s0{animation:deckPulse .38s}
@keyframes deckPulse{40%{transform:translate(-3px,-6px) scale(1.06) rotate(-3deg);box-shadow:0 0 28px rgba(240,207,110,.75),inset 0 0 22px rgba(240,207,110,.45)}}

/* flying drawn card */
.flycard{position:fixed;width:96px;height:134px;border-radius:11px;z-index:99;pointer-events:none;border:3px solid var(--gold);
  background:repeating-linear-gradient(45deg,rgba(0,0,0,.25) 0 6px,transparent 6px 12px),radial-gradient(circle at 50% 40%,#2a2540,#120f1c);
  box-shadow:0 14px 30px -6px #000,0 0 26px rgba(240,207,110,.65);display:flex;align-items:center;justify-content:center;
  color:var(--gold);font-size:42px;text-shadow:0 0 12px rgba(240,207,110,.8)}
.flycard::before{content:"✦"}
.card.justDrawn{animation:cardDrawIn .55s cubic-bezier(.2,.8,.3,1.1)}
@keyframes cardDrawIn{
 0%{transform:translateY(-90px) scale(.55) rotate(-10deg);opacity:0;filter:brightness(1.6) drop-shadow(0 0 18px rgba(240,207,110,.7))}
 55%{opacity:1;transform:translateY(-12px) scale(1.08) rotate(2deg);filter:brightness(1.2)}
 100%{transform:translateY(0) scale(1) rotate(0);opacity:1;filter:none}
}

/* ===== v0.12 juice: draw/deal/mana/power micro-anims (classes set by js/juice.js) ===== */
.card.dealIn{animation:dealIn .5s cubic-bezier(.2,.8,.3,1.1) both;animation-delay:var(--di,0ms)}
@keyframes dealIn{
 0%{transform:translateY(46px) rotate(4deg) scale(.86);opacity:0;filter:brightness(1.45) drop-shadow(0 0 14px rgba(240,207,110,.55))}
 60%{opacity:1;transform:translateY(-10px) rotate(-1deg) scale(1.05);filter:brightness(1.15)}
 100%{transform:translateY(0) rotate(0) scale(1);opacity:1;filter:none}
}
.crystal.pulse{animation:crystalPulse .55s ease-out}
@keyframes crystalPulse{
 0%{transform:rotate(45deg) scale(1)}
 40%{transform:rotate(45deg) scale(1.35);box-shadow:0 0 16px var(--mana),0 0 30px rgba(79,194,255,.6);filter:brightness(1.6)}
 100%{transform:rotate(45deg) scale(1);filter:none}
}
#enemyHand .ehCard.pop{animation:ehPop .4s cubic-bezier(.2,.8,.3,1.2)}
@keyframes ehPop{
 0%{transform:scale(.3);opacity:0}
 65%{transform:scale(1.12);opacity:1}
 100%{transform:scale(1);opacity:1}
}
.deckCt.tick,.deckPile .count.tick{animation:deckTick .45s cubic-bezier(.2,.8,.3,1.2)}
@keyframes deckTick{
 0%{transform:translateX(-50%) scale(1)}
 45%{transform:translateX(-50%) scale(1.5);color:var(--gold);box-shadow:0 4px 10px -2px #000,0 0 22px rgba(240,207,110,.8);text-shadow:0 0 12px rgba(240,207,110,.9)}
 100%{transform:translateX(-50%) scale(1)}
}
/* !important: must beat .powerBtn:not(.used):not(.nofund) godPulse later in file; reduceMotion guard below outranks it */
.powerBtn.burst{animation:pwrBurst .6s ease-out!important}
@keyframes pwrBurst{
 0%{box-shadow:0 0 0 0 rgba(240,207,110,.85),0 0 18px rgba(240,207,110,.7);filter:brightness(1.9)}
 70%{box-shadow:0 0 0 22px rgba(240,207,110,0),0 0 30px rgba(240,207,110,.35);filter:brightness(1.2)}
 100%{box-shadow:0 0 0 26px rgba(240,207,110,0),0 0 0 rgba(240,207,110,0);filter:none}
}
body.reduceMotion .card.dealIn,body.reduceMotion .crystal.pulse,body.reduceMotion #enemyHand .ehCard.pop,body.reduceMotion .deckCt.tick,body.reduceMotion .deckPile .count.tick,body.reduceMotion .powerBtn.burst{animation:none!important}

/* ===== manga FX ===== */
.mlines{position:absolute;z-index:56;pointer-events:none;border-radius:50%;
  background:repeating-conic-gradient(from 0deg, rgba(255,255,255,.9) 0deg 3deg, transparent 3deg 11deg);
  -webkit-mask:radial-gradient(circle, transparent 22%, #000 38%, #000 50%, transparent 60%);
          mask:radial-gradient(circle, transparent 22%, #000 38%, #000 50%, transparent 60%);}
.mstar{position:absolute;z-index:57;pointer-events:none;
  filter:drop-shadow(0 0 8px rgba(255,200,80,.8))}
.mslash{position:absolute;z-index:57;pointer-events:none;height:8px;border-radius:8px;
  background:linear-gradient(90deg,transparent,#fff 40%,#fff 60%,transparent);box-shadow:0 0 16px #fff}
.screenflash{position:absolute;inset:0;z-index:59;pointer-events:none;background:#fff;opacity:0}

/* big manga damage numbers */
.float{font-family:'Bangers',cursive!important;font-weight:400;-webkit-text-stroke:2px #000;paint-order:stroke fill;letter-spacing:.02em}
.float.dmg{color:#ffe14a;font-size:46px;text-shadow:0 0 18px rgba(255,90,40,.9),0 3px 0 #000}
.float.heal{color:#7dff9a;font-size:40px;text-shadow:0 0 16px rgba(40,255,120,.8),0 3px 0 #000}
.float.miss{color:#cdb6ff;font-size:26px;-webkit-text-stroke:1.5px #000}
.float.big{font-size:64px}

/* mute */
#muteBtn{position:absolute;left:14px;top:14px;z-index:27;width:42px;height:42px;border-radius:50%;cursor:pointer;border:1px solid var(--line);
  background:linear-gradient(180deg,#2a2433,#15121c);color:var(--gold);font-size:18px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px -4px #000;transition:.15s}
#muteBtn:hover{filter:brightness(1.15)}#muteBtn:active{transform:scale(.92)}
#muteBtn.muted{color:#7a7060;border-color:#3a3245;background:linear-gradient(180deg,#1a1622,#0a0810);box-shadow:inset 0 0 12px rgba(0,0,0,.6)}
.heroRow.thinking .hero{box-shadow:0 0 0 2px var(--evil-d),0 0 38px var(--evil-glow);animation:enemyThink 1.6s ease-in-out infinite}
@keyframes enemyThink{0%,100%{box-shadow:0 0 0 2px var(--evil-d),0 0 28px var(--evil-glow)}50%{box-shadow:0 0 0 2px #ff8a98,0 0 56px var(--evil-glow)}}
/* ===== hero power + armor ===== */
.powerBtn{position:relative;width:40px;height:40px;border-radius:50%;margin-left:10px;cursor:pointer;border:2px solid var(--gold-d);
  font-size:17px;display:flex;align-items:center;justify-content:center;color:#1a1206;transition:.15s;
  background:radial-gradient(circle at 35% 28%,#fff0b8,#e8c45a 60%,#8a6a1c);box-shadow:0 0 14px rgba(240,207,110,.45),0 3px 8px -3px #000}
.powerBtn.off{filter:grayscale(.7) brightness(.7);cursor:not-allowed;box-shadow:none}
.powerBtn.nofund{filter:grayscale(.55) brightness(.78);cursor:not-allowed;box-shadow:none;opacity:.85}
.powerBtn.nofund::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px dashed rgba(79,194,255,.6);animation:nofundSpin 6s linear infinite;pointer-events:none}
@keyframes nofundSpin{to{transform:rotate(360deg)}}
.powerBtn.used{filter:grayscale(1) brightness(.5);cursor:not-allowed;box-shadow:none}
.powerBtn.used::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;font-weight:900;text-shadow:0 0 6px #000;pointer-events:none}
.powerBtn.on{animation:powerPulse 1.8s ease-in-out infinite}
.powerBtn.active{box-shadow:0 0 0 3px #fff,0 0 22px var(--gold);transform:scale(1.1)}
@keyframes powerPulse{50%{box-shadow:0 0 20px rgba(240,207,110,.8),0 3px 8px -3px #000}}
.powerBtn .pcost{position:absolute;top:-5px;right:-5px;width:18px;height:18px;font-size:11px;font-family:'Cinzel',serif;font-weight:700;color:#fff;
  background:radial-gradient(circle at 35% 30%,#7fd0ff,#1c5fa8);border:1.5px solid #cfeeff;border-radius:50%;display:flex;align-items:center;justify-content:center}
.heroArmor{position:absolute;right:-6px;top:-2px;font-family:'Cinzel',serif;font-weight:700;font-size:13px;color:#bfe0ff;
  text-shadow:0 0 8px #4aa0ff,0 1px 2px #000}

/* ===== rope timer ===== */
#rope{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);width:min(420px,70%);height:9px;z-index:26;display:none;
  background:rgba(0,0,0,.5);border-radius:9px;border:1px solid var(--line);overflow:visible}
#rope.show{display:block}
.ropeFill{height:100%;width:100%;border-radius:9px;transform-origin:left;
  background:linear-gradient(90deg,#43d188,#f0cf6e 60%,#ff8a4a);box-shadow:0 0 12px rgba(240,207,110,.5);transition:none}
.ropeFlame{position:absolute;top:-12px;font-size:18px;transform:translateX(-50%);filter:drop-shadow(0 0 6px #ff7a3c);animation:flicker .25s infinite alternate}
@keyframes flicker{to{transform:translateX(-50%) scale(1.15) rotate(4deg)}}
.ropeTxt{position:absolute;right:-30px;top:-8px;font-family:'Cinzel',serif;font-size:13px;color:var(--gold)}
#rope.low .ropeFill{background:linear-gradient(90deg,#ff3a4a,#ff7a3c)}
#rope.low .ropeTxt{color:#ff5a5a}

/* ===== ambient board animation ===== */
#motes{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.mote{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(240,207,110,.9),transparent 70%);
  filter:blur(.5px);animation:drift linear infinite}
@keyframes drift{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:.7}90%{opacity:.5}100%{transform:translateY(-110vh) translateX(30px);opacity:0}}
#ambient{position:absolute;inset:-20%;z-index:1;pointer-events:none;opacity:.6;
  background:
   radial-gradient(600px 400px at 30% 20%, rgba(67,209,136,.18), transparent 60%),
   radial-gradient(600px 400px at 70% 80%, rgba(255,74,95,.16), transparent 60%),
   radial-gradient(500px 360px at 80% 30%, rgba(79,194,255,.12), transparent 60%);
  animation:ambdrift 26s ease-in-out infinite}
@keyframes ambdrift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(4%,-3%) scale(1.06)}66%{transform:translate(-3%,3%) scale(1.04)}}
#midline{animation:midpulse 4s ease-in-out infinite}
@keyframes midpulse{50%{box-shadow:0 0 40px rgba(240,207,110,.5);opacity:.8}}
/* ===== targeting arrow ===== */
#arrowSvg{position:fixed;inset:0;width:100%;height:100%;z-index:64;pointer-events:none;display:none}
#arrowSvg.show{display:block}

/* ===== sick + dimmed + guard label ===== */
.unit.sick .inner{filter:brightness(.78) saturate(.85)}
.unit.sick .ring{border-style:dashed}
.sickLbl{position:absolute;top:2px;left:50%;transform:translateX(-50%);font-size:18px;z-index:4;text-shadow:0 0 8px #000;
  animation:zzz 1.8s ease-in-out infinite}
@keyframes zzz{50%{transform:translateX(-50%) translateY(-2px) scale(1.1);opacity:.7}}
.gLabel{position:absolute;top:-8px;left:50%;transform:translateX(-50%);font-family:'Cinzel',serif;font-size:9px;letter-spacing:.16em;font-weight:700;
  color:#cfe0ff;padding:2px 6px;border:1px solid rgba(170,190,255,.55);background:rgba(8,12,28,.85);border-radius:8px;z-index:4;text-shadow:0 1px 2px #000;box-shadow:0 0 10px rgba(120,150,255,.4)}
.unit.dimmed{opacity:.68;filter:saturate(.78) brightness(1.06)}

/* ===== why-not-playable badge ===== */
.card .why{position:absolute;top:-18px;left:50%;transform:translateX(-50%);background:linear-gradient(180deg,#5a1820,#2a0810);border:2px solid #ff5a6a;color:#fff;
  font-family:'Cinzel',serif;font-weight:700;font-size:13px;padding:5px 13px;border-radius:16px;letter-spacing:.05em;white-space:nowrap;z-index:60;
  text-shadow:0 1px 3px #000;box-shadow:0 0 18px rgba(255,74,95,.7),0 4px 12px -2px #000;display:none;pointer-events:none}
.card.unplayable .why{display:block;animation:whyBounce .4s ease-out}
@keyframes whyBounce{from{opacity:0;transform:translateX(-50%) translateY(8px) scale(.7)}}
.card.costy .mc{box-shadow:0 0 0 2px #ff4a5f,0 0 14px rgba(255,74,95,.7),0 4px 8px -2px #000}

/* ===== toast ===== */
.blockerFlash{animation:blockerShake .5s ease-out!important;outline:3px solid #ff5a6a!important;outline-offset:4px;box-shadow:0 0 30px rgba(255,90,106,.85)!important;border-radius:14px}
@keyframes blockerShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.zone.full::before{content:"BOARD FULL — 6 / 6";position:absolute;top:-8px;left:50%;transform:translateX(-50%);
  font-family:'Cinzel',serif;font-weight:700;font-size:13px;color:#fff;letter-spacing:.14em;padding:6px 18px;border-radius:14px;
  background:linear-gradient(180deg,#5a1820,#2a0810);border:2px solid #ff5a6a;
  box-shadow:0 0 20px rgba(255,74,95,.75),0 4px 10px -2px #000;text-shadow:0 1px 3px #000;z-index:10;animation:fullPulse 1.2s ease-in-out infinite alternate}
@keyframes fullPulse{to{box-shadow:0 0 32px rgba(255,90,106,1),0 4px 10px -2px #000;transform:translateX(-50%) scale(1.04)}}
.toast{position:fixed;left:50%;top:30%;transform:translateX(-50%);z-index:90;font-family:'Cinzel',serif;font-weight:700;font-size:16px;
  color:#ffeed0;background:linear-gradient(180deg,#3a1a22,#1c0c12);border:2px solid var(--evil-d);padding:14px 24px;border-radius:30px;
  box-shadow:0 14px 30px -10px #000,0 0 28px rgba(255,74,95,.5);pointer-events:none;letter-spacing:.05em;max-width:80vw;text-align:center}

/* ===== hint banner ===== */
#hint{position:absolute;left:50%;top:8px;transform:translateX(-50%);z-index:36;display:none;align-items:center;gap:10px;
  font-family:'Cinzel',serif;font-size:15px;font-weight:700;color:var(--gold);background:linear-gradient(180deg,#2a2433,#13101a);
  border:1px solid var(--gold-d);padding:9px 16px;border-radius:30px;box-shadow:0 8px 24px -8px #000,0 0 22px rgba(240,207,110,.35)}
#hint.show{display:flex;animation:hintPop .3s,hintGlow 1.1s ease-in-out infinite}
@keyframes hintGlow{0%,100%{box-shadow:0 8px 24px -8px #000,0 0 20px rgba(240,207,110,.3)}50%{box-shadow:0 8px 24px -8px #000,0 0 38px rgba(240,207,110,.85)}}
@keyframes hintPop{from{opacity:0;transform:translateX(-50%) translateY(-8px)}}
#hint button{font-family:inherit;font-size:11px;padding:4px 10px;border-radius:18px;background:transparent;border:1px solid var(--gold-d);color:var(--gold);cursor:pointer}
#hint button:hover{background:rgba(240,207,110,.15)}

/* ===== tweaks ===== */
.unit.targetable{outline:0}
.unit.targetable.guard .gLabel{color:#ff5a5a;border-color:rgba(255,74,95,.7);background:rgba(40,8,12,.95);box-shadow:0 0 14px var(--evil-glow)}
/* ===== scenes (menu, codex, lore, help, settings, mulligan) ===== */
.scene{position:absolute;inset:0;z-index:40;display:none;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:42px 24px 26px;text-align:center;overflow-y:auto;
  background:radial-gradient(900px 600px at 50% 18%,rgba(40,30,70,.5),transparent 70%)}
.scene.show{display:flex;animation:sceneIn .35s ease-out}
@keyframes sceneIn{from{opacity:0;transform:translateY(8px)}}
.scene h1{font-family:'Cinzel',serif;font-weight:900;color:var(--gold);font-size:clamp(28px,5.2vw,52px);margin:6px 0 2px;
  text-shadow:0 0 30px rgba(240,207,110,.4),0 3px 0 #000;letter-spacing:.06em}
.scene .tag{color:var(--muted);font-style:italic;margin-bottom:16px;max-width:680px;font-size:14.5px;line-height:1.5}
.backBtn{position:absolute;left:18px;top:18px;font-family:'Cinzel',serif;font-size:15.5px;font-weight:700;letter-spacing:.08em;color:var(--gold);
  background:rgba(20,16,28,.88);border:1.5px solid var(--gold);padding:10px 22px;border-radius:30px;cursor:pointer;z-index:5;transition:.15s;box-shadow:0 5px 16px -4px #000,0 0 16px rgba(240,207,110,.28)}
.backBtn:hover{background:rgba(240,207,110,.15);transform:translateX(-2px)}

/* main menu */
#mainMenu{justify-content:center}
.titleWrap{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:32px;animation:titleIn 1.2s cubic-bezier(.2,.8,.3,1.1)}
@keyframes titleIn{from{opacity:0;transform:translateY(-14px)}}
.titleSub{font-family:'Cinzel',serif;color:var(--muted);font-size:14px;letter-spacing:.32em;text-transform:uppercase}
.bigTitle{font-family:'Cinzel',serif;font-weight:900;font-size:clamp(54px,11vw,128px);margin:0;color:var(--gold);
  letter-spacing:.12em;line-height:1;text-shadow:0 0 50px rgba(240,207,110,.5),0 0 12px rgba(240,207,110,.7),0 4px 0 #000;
  animation:bigPulse 4s ease-in-out infinite}
@keyframes bigPulse{50%{text-shadow:0 0 70px rgba(240,207,110,.7),0 0 18px rgba(255,240,184,.9),0 4px 0 #000}}
.titleTag{color:#a99c80;font-style:italic;font-size:15px;max-width:560px;line-height:1.5;margin-top:8px}
.menuList{display:flex;flex-direction:column;gap:12px;align-items:stretch;min-width:280px;max-width:340px;width:90%}
.mItem{font-family:'Cinzel',serif;font-weight:700;font-size:18px;letter-spacing:.14em;padding:14px 22px;border-radius:50px;cursor:pointer;
  border:1px solid var(--gold-d);background:linear-gradient(180deg,#2a2433,#13101a);color:var(--gold);transition:.2s;
  display:flex;align-items:center;gap:14px;text-align:left;position:relative;overflow:hidden}
.mItem::after{content:"›";position:absolute;right:20px;opacity:.4;font-size:22px;transition:.2s}
.mItem:hover{transform:translateX(4px);background:linear-gradient(180deg,#3a3245,#1a1422);box-shadow:0 0 22px rgba(240,207,110,.3),0 8px 22px -8px #000;border-color:var(--gold)}
.mItem:hover::after{opacity:1;transform:translateX(4px)}
.mIco{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3a3245,#15111c);border:1px solid var(--gold-d);font-size:16px}
.menuFoot{position:absolute;bottom:16px;color:#5a5260;font-size:11px;letter-spacing:.1em}

/* faction-select tweaks */
#start .facHint{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);font-size:11.5px;color:var(--muted);letter-spacing:.04em}
#start .facHint b{color:var(--gold)}

/* ===== mulligan ===== */
#mulligan{justify-content:center}
#mullCards{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin:18px 0 22px;max-width:920px}
.mull{width:160px;height:218px;background-size:contain;background-repeat:no-repeat;background-position:center;cursor:pointer;position:relative;transition:transform .2s;filter:drop-shadow(0 8px 14px rgba(0,0,0,.5))}
#mullPowers{margin:0 auto 14px;max-width:740px;text-align:center}
.mpTitle{font-family:'Cinzel',serif;color:var(--gold);font-size:15px;letter-spacing:.04em;margin-bottom:9px}
.mpTitle span{color:#b6a888;font-size:12px;font-weight:400}
.mpRow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.mpCard{width:212px;text-align:left;padding:10px 13px;border-radius:12px;cursor:pointer;background:linear-gradient(180deg,rgba(42,36,51,.82),rgba(19,16,26,.88));border:1.5px solid var(--gold-d);color:#d9cfe0;transition:.15s;display:flex;flex-direction:column;gap:3px;font-family:inherit}
.mpCard:hover{transform:translateY(-2px);border-color:var(--gold)}
.mpCard.on{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold),0 0 18px rgba(240,207,110,.4);background:linear-gradient(180deg,rgba(58,48,28,.9),rgba(30,24,14,.92))}
.mpCard .mpIco{font-size:20px}
.mpCard .mpName{font-family:'Cinzel',serif;font-weight:700;color:#fff7dc;font-size:14px}
.mpCard .mpDesc{font-size:11.5px;color:#c9c0d4;line-height:1.34}
.mull:hover{transform:translateY(-6px) scale(1.04)}
.mull.swap{transform:rotate(-3deg);filter:saturate(.45) brightness(.65) drop-shadow(0 4px 10px rgba(0,0,0,.6))}
.mull.swap::before{content:"✕ swap";position:absolute;inset:auto 0 -4px 0;text-align:center;color:#ff8a8a;font-family:'Cinzel',serif;font-weight:700;font-size:12px;letter-spacing:.1em;text-shadow:0 1px 4px #000}
.mull .ring{position:absolute;inset:6px;border-radius:11px;border:2px solid transparent;pointer-events:none}
.mull.good .ring{border-color:rgba(67,209,136,.7)}
.mull.evil .ring{border-color:rgba(255,74,95,.7)}
#mullGo{margin-top:6px}

/* ===== codex ===== */
.codexFilter{display:flex;gap:8px;margin:6px 0 14px;flex-wrap:wrap;justify-content:center}
.filt{font-family:'Cinzel',serif;font-size:12px;letter-spacing:.1em;padding:7px 14px;border-radius:30px;cursor:pointer;background:transparent;color:var(--muted);border:1px solid var(--line);transition:.15s}
.filt:hover{color:var(--gold);border-color:var(--gold-d)}
.filt.on{background:linear-gradient(180deg,#2a2433,#13101a);color:var(--gold);border-color:var(--gold)}
#codexGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px;max-width:1200px;width:100%;padding:8px;box-sizing:border-box}
.cdx{height:240px;cursor:pointer;background-size:contain;background-repeat:no-repeat;background-position:center;transition:.2s;position:relative;filter:drop-shadow(0 6px 12px rgba(0,0,0,.5))}
.cdx:hover{transform:translateY(-6px) scale(1.04);z-index:5}
.cdx .ring{display:none}
.cdx:hover{transform:translateY(-6px) scale(1.04);z-index:2}
.cdx.good:hover{filter:drop-shadow(0 12px 20px rgba(0,0,0,.55)) drop-shadow(0 0 11px rgba(67,209,136,.55))}
.cdx.evil:hover{filter:drop-shadow(0 12px 20px rgba(0,0,0,.55)) drop-shadow(0 0 11px rgba(255,74,95,.55))}
.cdxFoot{position:absolute;left:0;right:0;bottom:-6px;text-align:center;font-family:'Cinzel',serif;font-size:11px;letter-spacing:.1em;color:var(--gold-l);text-shadow:0 1px 4px #000;text-transform:uppercase}

/* card-detail modal */
#cdxModal{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;background:rgba(4,3,8,.86);backdrop-filter:blur(4px);padding:20px}
#cdxModal.show{display:flex;animation:sceneIn .3s}
.modalCard{background:linear-gradient(180deg,#1a1622,#0a0810);border:1px solid var(--gold-d);border-radius:16px;padding:18px;max-width:540px;width:100%;display:flex;flex-direction:column;gap:14px;color:var(--ink);box-shadow:0 24px 60px -10px #000,0 0 28px rgba(240,207,110,.2)}
.modalCard .row{display:flex;gap:14px}
.modalCard .pic,.modalCard .bigCard{flex:0 0 200px;height:270px;background-size:contain;background-repeat:no-repeat;background-position:center;filter:drop-shadow(0 8px 18px rgba(0,0,0,.5))}
.modalCard .meta h2{font-family:'Cinzel',serif;font-weight:700;color:var(--gold);margin:0 0 4px;font-size:22px}
.modalCard .meta .sub{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.modalCard .meta .stl{font-family:'Cinzel',serif;margin-top:8px;font-size:15px}
.modalCard .meta .stl .a{color:#ffd86b}.modalCard .meta .stl .h{color:#ff8a8a}
.modalCard .desc{font-style:italic;color:#d3c5a8;line-height:1.55;font-size:13.5px}
.modalCard .kws{display:flex;flex-wrap:wrap;gap:8px}
.modalCard .kws span{padding:5px 10px;border:1px solid var(--gold-d);border-radius:18px;font-size:11.5px;color:var(--gold-l);background:rgba(20,15,8,.5)}
.modalCard .closeBtn{align-self:flex-end;font-family:'Cinzel',serif;font-size:12px;padding:6px 14px;border-radius:18px;cursor:pointer;border:1px solid var(--gold-d);background:transparent;color:var(--gold);letter-spacing:.1em}
.modalCard .closeBtn:hover{background:rgba(240,207,110,.12)}

/* ===== lore ===== */
#lore{align-items:center}
#loreBody{max-width:760px;padding:0 8px 24px;text-align:left;line-height:1.7;color:#d8cdb4}
#loreBody .factionCard{display:flex;gap:14px;padding:16px;border-radius:14px;background:linear-gradient(180deg,#1a1622,#0a0810);border:1px solid var(--line);margin:14px 0;text-align:left}
#loreBody .factionCard.good{border-left:4px solid #2c8d59}
#loreBody .factionCard.evil{border-left:4px solid #a32c3a}
#loreBody .factionCard .crest{font-size:48px;flex:0 0 auto;line-height:1}
#loreBody .factionCard h3{margin:0 0 6px;font-family:'Cinzel',serif;color:var(--gold);font-size:18px}
#loreBody h2.ch{font-family:'Cinzel',serif;color:var(--gold);letter-spacing:.1em;margin:32px 0 14px;text-align:center;font-size:22px;
  border-top:1px solid var(--line);padding-top:18px;text-shadow:0 0 18px rgba(240,207,110,.3)}
#loreBody h2.ch:first-of-type{border-top:none;padding-top:0;margin-top:18px}
#loreBody p{margin:0 0 14px;font-size:14.5px}
#loreBody p:first-letter{font-family:'Cinzel',serif;font-size:1.6em;color:var(--gold);font-weight:700;line-height:1}

/* ===== help / how to play ===== */
#helpBody{max-width:780px;padding:0 8px 24px;text-align:left;color:var(--ink)}
.helpSect{margin-bottom:22px;padding:14px 16px;border-radius:12px;background:linear-gradient(180deg,#1a1622,#0a0810);border:1px solid var(--line)}
.helpSect h3{font-family:'Cinzel',serif;color:var(--gold);margin:0 0 8px;font-size:16px;letter-spacing:.1em}
.helpSect p{margin:0 0 8px;font-size:13.5px;line-height:1.55;color:#d8cdb4}
.kwGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:8px}
.kwItem{display:flex;gap:10px;padding:10px;border-radius:10px;background:rgba(20,16,28,.6);border:1px solid var(--line)}
.kwItem .ki{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 35% 30%,#3a3245,#15111c);border:1px solid var(--gold-d);font-size:16px;flex:0 0 auto}
.kwItem b{color:var(--gold);font-family:'Cinzel',serif;font-size:13px;letter-spacing:.06em}
.kwItem p{margin:1px 0 0;font-size:12px;line-height:1.4;color:#bdb29a}

/* ===== settings ===== */
.setBlock{max-width:500px;width:100%;display:flex;flex-direction:column;gap:14px;margin:8px 0 24px}
.setBlock label{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-radius:12px;background:linear-gradient(180deg,#1a1622,#0a0810);border:1px solid var(--line);font-family:'Cinzel',serif;font-size:14px;color:var(--ink);letter-spacing:.04em}
.setBlock input[type=range]{accent-color:#f0cf6e;width:160px}
.setBlock input[type=checkbox]{transform:scale(1.4);accent-color:#f0cf6e}
.setBlock select{background:#13101a;color:var(--ink);border:1px solid var(--gold-d);padding:6px 10px;border-radius:8px;font-family:'Cinzel',serif}
.setCredits{max-width:560px;text-align:left;padding:16px;border-radius:12px;background:linear-gradient(180deg,#1a1622,#0a0810);border:1px solid var(--line)}
.setCredits h3{font-family:'Cinzel',serif;color:var(--gold);margin:0 0 8px}
.setCredits p{margin:0;font-size:13px;line-height:1.55;color:#b8ad96}

/* in-game menu button */
#gameMenu{position:absolute;left:14px;top:60px;z-index:27;width:42px;height:42px;border-radius:50%;cursor:pointer;border:1px solid var(--line);background:linear-gradient(180deg,#2a2433,#15121c);color:var(--gold);font-size:16px;display:none;align-items:center;justify-content:center}
#undoBtn{position:absolute;left:auto;right:20px;top:auto;bottom:280px;transform:none;z-index:36;display:none;align-items:center;gap:8px;
  font-family:'Cinzel',serif;font-weight:700;font-size:14px;color:#1a1206;letter-spacing:.14em;cursor:pointer;
  padding:11px 22px;border-radius:30px;border:2px solid #fff0b8;
  background:radial-gradient(circle at 35% 25%,#fff6d4,#f0cf6e 55%,#8a6a1c);
  box-shadow:0 0 26px rgba(240,207,110,.7),0 8px 22px -6px #000;
  animation:undoPulse .9s ease-in-out infinite alternate}
#undoBtn.show{display:flex;animation:undoIn .35s ease-out,undoPulse .9s ease-in-out .35s infinite alternate}
#undoBtn:hover{filter:brightness(1.12);transform:scale(1.06)}
@keyframes undoIn{from{opacity:0;transform:translateY(10px) scale(.85)}}
@keyframes undoPulse{from{box-shadow:0 0 18px rgba(240,207,110,.55),0 8px 22px -6px #000}to{box-shadow:0 0 38px rgba(255,238,170,.95),0 8px 22px -6px #000}}
#gameMenu.show{display:flex}
#gameMenu:hover{filter:brightness(1.15)}

/* ===== Split battlefield background ===== */
#bfBg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;border-radius:14px}

#bfBg .bfHalf{position:absolute;left:0;right:0;height:50%;overflow:hidden}
#bfBg .bfTop{top:0}
#bfBg .bfBot{bottom:0}
/* meadow / light (Elvorien) */
#table.bfEl .bfBot{background:radial-gradient(120% 90% at 50% 0%,rgba(120,205,150,.30),transparent 66%),radial-gradient(80% 60% at 50% 25%,rgba(70,135,95,.16),transparent 72%),linear-gradient(180deg,#0c1d16,#0a1410)}
#table.bfAz .bfTop{background:radial-gradient(120% 90% at 50% 100%,rgba(120,205,150,.30),transparent 66%),radial-gradient(80% 60% at 50% 75%,rgba(70,135,95,.16),transparent 72%),linear-gradient(0deg,#0c1d16,#0a1410)}
/* lava / holy war (Azomir) */
#table.bfAz .bfBot{background:radial-gradient(120% 95% at 50% 0%,rgba(255,115,45,.34),transparent 64%),radial-gradient(80% 60% at 50% 22%,rgba(155,32,20,.24),transparent 72%),linear-gradient(180deg,#180a0a,#100707)}
#table.bfEl .bfTop{background:radial-gradient(120% 95% at 50% 100%,rgba(255,115,45,.34),transparent 64%),radial-gradient(80% 60% at 50% 78%,rgba(155,32,20,.24),transparent 72%),linear-gradient(0deg,#180a0a,#100707)}
/* particle layer */
#bfBg .bfHalf::before{content:"";position:absolute;inset:-10% 0;background-repeat:no-repeat}
#table.bfAz .bfBot::before,#table.bfEl .bfTop::before{background-image:radial-gradient(2px 2px at 18% 80%,rgba(255,170,70,.9),transparent 60%),radial-gradient(2px 2px at 48% 92%,rgba(255,120,40,.85),transparent 60%),radial-gradient(1.5px 1.5px at 72% 84%,rgba(255,190,90,.85),transparent 60%),radial-gradient(2px 2px at 34% 70%,rgba(255,105,35,.8),transparent 60%),radial-gradient(1.5px 1.5px at 88% 66%,rgba(255,155,55,.8),transparent 60%),radial-gradient(1.5px 1.5px at 60% 55%,rgba(255,140,50,.7),transparent 60%);animation:bfEmbers 4.6s linear infinite}
#table.bfEl .bfBot::before,#table.bfAz .bfTop::before{background-image:radial-gradient(2px 2px at 24% 36%,rgba(190,255,205,.7),transparent 60%),radial-gradient(1.5px 1.5px at 58% 52%,rgba(225,245,165,.6),transparent 60%),radial-gradient(2px 2px at 80% 28%,rgba(165,235,185,.6),transparent 60%),radial-gradient(1.5px 1.5px at 42% 66%,rgba(205,255,215,.55),transparent 60%),radial-gradient(1.5px 1.5px at 12% 58%,rgba(220,250,180,.5),transparent 60%);animation:bfMotes 7.5s ease-in-out infinite}
@keyframes bfEmbers{0%{transform:translateY(10px);opacity:0}18%{opacity:.75}100%{transform:translateY(-34px);opacity:0}}
@keyframes bfMotes{0%,100%{transform:translateY(2px);opacity:.32}50%{transform:translateY(-12px);opacity:.68}}
/* clash front line */
#bfBg .bfFront{position:absolute;left:5%;right:5%;top:50%;height:3px;transform:translateY(-1.5px);background:linear-gradient(90deg,transparent,rgba(255,224,150,.6),rgba(255,180,120,.7),rgba(255,224,150,.6),transparent);box-shadow:0 0 16px 3px rgba(255,200,120,.28);animation:bfFront 3.4s ease-in-out infinite}
@keyframes bfFront{0%,100%{opacity:.55}50%{opacity:.95}}

/* ===== Prominent God Power button ===== */
.powerBtn{width:54px;height:54px;font-size:23px}
.powerBtn:not(.used):not(.nofund){animation:godPulse 1.5s ease-in-out infinite}
@keyframes godPulse{0%,100%{box-shadow:0 0 14px rgba(240,207,110,.5),0 3px 8px -3px #000}50%{box-shadow:0 0 28px 5px rgba(255,228,135,.9),0 3px 8px -3px #000}}
.powerBtn::before{content:"GOD POWER";position:absolute;bottom:-13px;left:50%;transform:translateX(-50%);font-family:'Cinzel',serif;font-size:7.5px;letter-spacing:.4px;font-weight:700;color:var(--gold);white-space:nowrap;text-shadow:0 1px 2px #000;pointer-events:none}
.powerBtn.used::before,.powerBtn.nofund::before{opacity:.4}


.record{margin-top:16px;display:flex;flex-direction:column;gap:3px;align-items:center;font-family:'Cinzel',serif;color:var(--gold)}
.record .recL{font-size:10px;letter-spacing:2px;opacity:.6;margin-bottom:1px}
.record .recV{font-size:13px;opacity:.92}
#overStats{margin:4px auto 14px;display:flex;flex-direction:column;gap:5px;min-width:250px;max-width:300px;font-family:'Cinzel',serif}
#overStats .osRow{display:flex;justify-content:space-between;gap:24px;font-size:13.5px;color:#e8e0d0}
#overStats .osRow b{color:var(--gold);font-weight:700}
#overStats .osDiv{height:1px;background:linear-gradient(90deg,transparent,rgba(240,207,110,.45),transparent);margin:4px 0}


@keyframes shk{0%,100%{transform:translate(0,0)}18%{transform:translate(-6px,3px)}38%{transform:translate(5px,-3px)}58%{transform:translate(-4px,2px)}78%{transform:translate(3px,-2px)}}#table.shaking{animation:shk .3s ease-in-out}

/* ===== ambient hourglass (time flows, no limit) ===== */
#hourglass{position:absolute;left:18px;top:calc(50% - 32px);width:48px;height:64px;opacity:.9;pointer-events:none;z-index:4;animation:hgGlow 2.6s ease-in-out infinite}
#hourglass svg{width:100%;height:100%;overflow:visible}
#hourglass .hgFrame{stroke:#e8c45a;stroke-width:3}
#hourglass .hgSandTop{fill:#f0cf6e;animation:hgTop 9s linear infinite}
#hourglass .hgSandBot{fill:#f0cf6e;animation:hgBot 9s linear infinite}
#hourglass .hgStream{stroke:#f7e07a;stroke-width:1.8;stroke-dasharray:2 3;animation:hgStream .5s linear infinite,hgStreamShow 9s linear infinite}
@keyframes hgTop{0%{transform:translateY(0)}92%,100%{transform:translateY(26px)}}
@keyframes hgBot{0%{transform:translateY(24px)}92%,100%{transform:translateY(0)}}
@keyframes hgStream{to{stroke-dashoffset:-5}}
@keyframes hgStreamShow{0%,88%{opacity:.9}96%,100%{opacity:0}}
#endBtn.enemyTurn ~ #hourglass{opacity:.3}

/* center table brand */
#bfBg .bfLogo{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-family:'Cinzel',serif;font-weight:700;font-size:37px;letter-spacing:13px;color:rgba(245,222,140,.26);text-shadow:0 2px 16px rgba(0,0,0,.6);pointer-events:none;line-height:1;text-indent:13px}
#bfBg .bfLogo span{display:block;font-size:13px;letter-spacing:14px;margin-top:8px;color:rgba(245,222,140,.34);text-indent:14px}
/* premium buttons */
#endBtn{box-shadow:0 0 26px rgba(240,207,110,.5),0 6px 16px -4px #000,inset 0 2px 3px rgba(255,255,255,.5),inset 0 -3px 6px rgba(120,80,10,.5)}
#endBtn:hover{transform:scale(1.045);filter:brightness(1.06);box-shadow:0 0 36px rgba(255,224,130,.8),0 6px 16px -4px #000,inset 0 2px 3px rgba(255,255,255,.55)}
.btn{box-shadow:0 6px 20px -6px #000,inset 0 2px 3px rgba(255,255,255,.5),inset 0 -3px 6px rgba(120,80,10,.45)}
.btn:hover{filter:brightness(1.08);transform:translateY(-2px) scale(1.02);box-shadow:0 10px 26px -8px #000,0 0 22px rgba(240,207,110,.35),inset 0 2px 3px rgba(255,255,255,.55)}
.mItem{box-shadow:0 4px 14px -7px #000,inset 0 1px 0 rgba(255,255,255,.06)}
.mItem::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#f7e07a,#8a6a1c);opacity:.45;transition:.2s}
.mItem:hover{transform:translateX(5px);border-color:var(--gold);box-shadow:0 7px 24px -8px #000,0 0 18px rgba(240,207,110,.28),inset 0 1px 0 rgba(255,255,255,.09)}
.mItem:hover::before{opacity:1;width:5px}
.mItem:hover .mIco{transform:scale(1.12);filter:drop-shadow(0 0 6px rgba(240,207,110,.6))}
.mIco{transition:.2s}

.unit.hidden.canAct{opacity:.92}

#vignette.low{opacity:1;animation:vigPulse 1.5s ease-in-out infinite}@keyframes vigPulse{0%,100%{box-shadow:inset 0 0 110px 26px rgba(255,40,40,.32)}50%{box-shadow:inset 0 0 150px 46px rgba(255,40,40,.6)}}

#hourglass .hgNum{position:absolute;left:0;right:0;top:100%;margin-top:1px;text-align:center;font-family:'Cinzel',serif;font-weight:700;font-size:15px;color:#f0cf6e;text-shadow:0 1px 3px #000;line-height:1}
#hourglass .hgNum.low{color:#ff6a5a;animation:hgLow .55s ease-in-out infinite}@keyframes hgLow{50%{opacity:.35}}
#endBtn.noMoves{animation:endPulse2 .8s ease-in-out infinite alternate!important;box-shadow:0 0 34px 7px rgba(255,225,130,.9),0 6px 16px -4px #000!important}
@keyframes endPulse2{from{transform:scale(1);filter:brightness(1)}to{transform:scale(1.09);filter:brightness(1.18)}}

.lbList{max-width:460px;margin:14px auto 0;display:flex;flex-direction:column;gap:6px}
.lbHead{font-family:'Cinzel',serif;font-size:12px;color:var(--gold);opacity:.8;text-align:center;margin-bottom:8px;letter-spacing:1px}
.lbRow{display:flex;align-items:center;gap:14px;padding:10px 16px;border-radius:12px;background:linear-gradient(180deg,rgba(42,36,51,.7),rgba(19,16,26,.7));border:1px solid var(--gold-d);font-family:'Cinzel',serif}
.lbRow.me{border-color:var(--gold);box-shadow:0 0 18px rgba(240,207,110,.3);background:linear-gradient(180deg,rgba(60,50,30,.8),rgba(30,24,14,.8))}
.lbRank{color:var(--gold);font-weight:700;width:36px}
.lbName{flex:1;color:#e8e0d0}.lbRow.me .lbName{color:var(--gold);font-weight:700}
.lbScore{color:var(--gold);opacity:.85;font-size:14px}
.lbNote{max-width:520px;margin:20px auto 0;text-align:center;color:#b9b0c4;font-size:13px;line-height:1.5}
.shopGrid{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:16px;max-width:760px}
.shopCard{width:220px;padding:20px 18px;border-radius:16px;background:linear-gradient(180deg,rgba(42,36,51,.8),rgba(19,16,26,.85));border:1px solid var(--gold-d);text-align:center}
.shopCard .shopIco{font-size:38px;margin-bottom:8px}
.shopCard h3{font-family:'Cinzel',serif;color:var(--gold);margin:0 0 8px}
.shopCard p{color:#c9c0d4;font-size:13px;line-height:1.5;margin:0 0 12px}
.shopCard .soon{display:inline-block;font-family:'Cinzel',serif;font-size:11px;letter-spacing:1px;color:#1a1206;background:linear-gradient(180deg,#f0cf6e,#b98e2c);padding:4px 12px;border-radius:20px}

#hourglass::before{content:'';position:absolute;inset:-9px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,rgba(240,207,110,.4) 90deg,transparent 200deg);animation:hgSpin 3.6s linear infinite;z-index:-1;filter:blur(3px)}
@keyframes hgSpin{to{transform:rotate(360deg)}}
@keyframes hgGlow{0%,100%{filter:drop-shadow(0 0 6px rgba(240,207,110,.45))}50%{filter:drop-shadow(0 0 16px rgba(240,207,110,.8))}}
#bigTimer{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);font-family:'Cinzel',serif;font-weight:700;font-size:130px;color:#ffd27a;text-shadow:0 0 50px rgba(255,110,40,.7),0 6px 16px #000;pointer-events:none;z-index:42;display:none;line-height:1}
#bigTimer.show{display:block;animation:btTick .85s cubic-bezier(.2,.7,.3,1)}
#bigTimer.crit{color:#ff3624;text-shadow:0 0 64px rgba(255,40,20,.9),0 6px 16px #000}
@keyframes btTick{0%{transform:translate(-50%,-50%) scale(1.55);opacity:.12}45%{opacity:.92}100%{transform:translate(-50%,-50%) scale(1);opacity:.72}}

#log div{animation:lgIn .3s ease-out}
@keyframes lgIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
#log .lgI{margin-right:5px;opacity:.95}
#log div.lgGood{border-left:2px solid rgba(67,209,136,.7)}
#log div.lgEvil{border-left:2px solid rgba(255,74,95,.7)}
.aiEmote{position:absolute;z-index:41;transform:translate(-50%,0);font-family:'Cinzel',serif;font-size:14px;font-weight:600;color:#f3e6c4;background:linear-gradient(180deg,rgba(40,20,28,.95),rgba(20,10,14,.95));border:1px solid var(--gold-d);padding:7px 14px;border-radius:14px;white-space:nowrap;pointer-events:none;box-shadow:0 6px 18px -6px #000,0 0 16px rgba(255,90,70,.2)}
.aiEmote:after{content:'';position:absolute;top:-7px;left:50%;transform:translateX(-50%);border:7px solid transparent;border-bottom-color:var(--gold-d);border-top:0}

#hand .card[draggable=true]{cursor:grab}
#hand .card.dragging{opacity:.3;filter:saturate(.6)}
body.dragging{cursor:grabbing}
.zone.myZone.dropReady{outline:2px dashed rgba(240,207,110,.5);outline-offset:-7px;border-radius:14px;background:rgba(240,207,110,.05)}
.zone.myZone.dropHot{outline-color:rgba(240,207,110,.95);background:rgba(240,207,110,.14);box-shadow:inset 0 0 44px rgba(240,207,110,.22)}
.zone.myZone.dropReady:empty::after{content:'DROP TO SUMMON';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:'Cinzel',serif;font-size:13px;letter-spacing:2px;color:rgba(240,207,110,.7);pointer-events:none;font-weight:600;text-shadow:0 1px 6px #000;z-index:5}

#tutorial{position:fixed;inset:0;z-index:200;display:none}
#tutSpot{position:fixed;border-radius:14px;box-shadow:0 0 0 9999px rgba(8,6,12,.78);border:2px solid rgba(240,207,110,.92);pointer-events:none;transition:left .28s cubic-bezier(.3,.8,.3,1),top .28s cubic-bezier(.3,.8,.3,1),width .28s,height .28s;animation:tutPulse 1.9s ease-in-out infinite}
@keyframes tutPulse{0%,100%{filter:drop-shadow(0 0 2px rgba(240,207,110,.4))}50%{filter:drop-shadow(0 0 16px rgba(240,207,110,.85))}}
#tutCoach{position:fixed;max-width:330px;background:linear-gradient(180deg,#241d2e,#15101d);border:1px solid var(--gold-d);border-radius:14px;padding:16px 18px;box-shadow:0 22px 54px -12px #000,0 0 0 1px rgba(0,0,0,.4);color:var(--ink);pointer-events:auto;transition:left .22s ease,top .22s ease}
#tutCoach .tcTitle{font-family:'Cinzel',serif;color:var(--gold);font-size:18px;margin-bottom:7px}
#tutCoach .tcText{font-size:13.5px;line-height:1.5;color:#e8dcc8}
#tutCoach .tcDots{display:flex;gap:6px;justify-content:center;margin:13px 0 11px}
#tutCoach .tcDots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22);transition:all .2s}
#tutCoach .tcDots i.on{background:var(--gold);box-shadow:0 0 8px var(--gold);transform:scale(1.15)}
#tutCoach .tcBtns{display:flex;gap:8px;align-items:center}
#tutCoach .tcBtns button{font-family:'Cinzel',serif;font-size:12.5px;padding:8px 14px;border-radius:9px;cursor:pointer;border:1px solid var(--gold-d);background:rgba(255,255,255,.06);color:var(--ink)}
#tutCoach .tcNext{margin-left:auto;background:linear-gradient(180deg,var(--gold),var(--gold-d));color:#1a1208;font-weight:700;border:none}
#tutCoach .tcSkip{opacity:.7;border-color:transparent}
#tutCoach .tcBtns button:hover{filter:brightness(1.12)}
#tutCoach::after{content:'';position:absolute;width:0;height:0;border:11px solid transparent}
#tutCoach[data-dir=up]::after{border-bottom-color:#241d2e;top:-21px;left:50%;transform:translateX(-50%)}
#tutCoach[data-dir=down]::after{border-top-color:#15101d;bottom:-21px;left:50%;transform:translateX(-50%)}
#tutCoach[data-dir=left]::after{border-right-color:#241d2e;left:-21px;top:50%;transform:translateY(-50%)}
#tutCoach[data-dir=right]::after{border-left-color:#15101d;right:-21px;top:50%;transform:translateY(-50%)}
#tutBtn{position:absolute;top:10px;left:14px;width:34px;height:34px;border-radius:50%;border:1px solid var(--gold-d);background:rgba(20,14,26,.8);color:var(--gold);font-family:'Cinzel',serif;font-size:17px;font-weight:700;cursor:pointer;z-index:6;line-height:1}
#tutBtn:hover{background:rgba(40,28,52,.95);box-shadow:0 0 12px rgba(240,207,110,.4)}

body.reduceMotion *,body.reduceMotion *::before,body.reduceMotion *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0ms!important}
body.reduceMotion #vignette.low{animation:none!important;opacity:.5}
body.reduceMotion #bigTimer{display:none!important}

.idBlock .bannerPick{display:flex;align-items:center;gap:14px;margin-top:4px}
.idBlock .bannerPick>span{font-family:'Cinzel',serif;color:var(--ink);font-size:14px}
.idBlock .banners{display:flex;gap:8px;flex-wrap:wrap}
.idBlock .banners .bnr{width:36px;height:36px;border-radius:8px;border:2px solid rgba(255,255,255,.18);cursor:pointer;transition:.15s;padding:0}
.idBlock .banners .bnr:hover{transform:translateY(-2px)}
.idBlock .banners .bnr.on{border-color:var(--gold);box-shadow:0 0 12px rgba(240,207,110,.6)}
#playerName{background:rgba(0,0,0,.35);border:1px solid var(--gold-d);color:var(--ink);font-family:'Cinzel',serif;font-size:14px;padding:7px 12px;border-radius:8px;min-width:190px;margin-left:8px}
#playerName:focus{outline:none;border-color:var(--gold);box-shadow:0 0 12px rgba(240,207,110,.3)}
.recBanner{display:inline-block;width:24px;height:10px;border-radius:3px;margin-right:9px;vertical-align:middle;box-shadow:0 0 6px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.15)}

#turnTimer{position:absolute;bottom:calc(100% + 12px);right:0;min-width:70px;text-align:center;font-family:'Cinzel',serif;font-weight:700;font-size:23px;letter-spacing:.5px;color:#bff0c4;background:linear-gradient(180deg,rgba(22,32,24,.96),rgba(10,16,12,.96));border:2px solid #43d188;border-radius:13px;padding:6px 14px;box-shadow:0 7px 20px -6px #000,0 0 16px rgba(67,209,136,.35);pointer-events:none;display:none;z-index:7}
#turnTimer.show{display:block}
#turnTimer.warn{color:#ffd98a;border-color:#f0a93e;background:linear-gradient(180deg,rgba(40,30,12,.96),rgba(18,12,6,.96));box-shadow:0 7px 20px -6px #000,0 0 18px rgba(240,169,62,.55)}
#turnTimer.crit{color:#ff7a6a;border-color:#ff3a2e;background:linear-gradient(180deg,rgba(46,14,12,.96),rgba(20,6,6,.96));box-shadow:0 7px 20px -6px #000,0 0 22px rgba(255,60,46,.7);animation:ttPulse .62s ease-in-out infinite}
@keyframes ttPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.13)}}

.zone.myZone .unit:not(.guard){margin-top:30px}
.zone.enemyZone .unit:not(.guard){margin-bottom:30px}
.unit.guard{filter:drop-shadow(0 8px 10px rgba(0,0,0,.6))}
.reticle{position:absolute;width:90px;height:90px;border:3px solid rgba(255,82,68,.92);border-radius:50%;pointer-events:none;z-index:39;box-shadow:0 0 16px rgba(255,60,50,.6),inset 0 0 12px rgba(255,60,50,.35)}
.reticle::before,.reticle::after{content:'';position:absolute;background:rgba(255,82,68,.92);box-shadow:0 0 6px rgba(255,60,50,.7)}
.reticle::before{left:50%;top:-10px;bottom:-10px;width:2px;transform:translateX(-50%)}
.reticle::after{top:50%;left:-10px;right:-10px;height:2px;transform:translateY(-50%)}

.spellCard{position:relative;border-radius:13px;overflow:hidden;background:linear-gradient(165deg,#241d33,#14101e 55%,#0b0912);border:2px solid var(--gold-d);box-shadow:0 12px 26px -8px #000,inset 0 0 0 1px rgba(240,207,110,.15);width:140px;height:190px}
.card.spellCard{width:140px;height:190px}
.cdx.spellCard{width:177px;height:240px}
.spellCard.good{border-color:#2c8d59}
.spellCard.evil{border-color:#a32c3a}
.spellCard.neutral{border-color:#c8a24a}
.spellCard .spInner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:9px 9px 10px}
.spellCard .spGlow{position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,rgba(150,110,200,.28),transparent 60%);pointer-events:none}
.spellCard.good .spGlow{background:radial-gradient(circle at 50% 30%,rgba(67,209,136,.26),transparent 60%)}
.spellCard.evil .spGlow{background:radial-gradient(circle at 50% 30%,rgba(255,74,95,.24),transparent 60%)}
.spellCard .spCost{position:absolute;top:6px;left:6px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-family:'Cinzel',serif;font-weight:800;font-size:17px;color:#fff;background:radial-gradient(circle at 35% 30%,#5aa0ff,#1f4fb0);border:2px solid #cfe4ff;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.55);z-index:3}
.spellCard .spSig{margin-top:28px;font-size:46px;line-height:1;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6));z-index:1}
.spellCard .spNameWrap{margin-top:auto;width:100%;text-align:center;z-index:1}
.spellCard .spName{font-family:'Cinzel',serif;font-weight:700;font-size:13px;color:var(--gold);line-height:1.05;text-shadow:0 1px 4px #000}
.spellCard .spType{font-size:8px;letter-spacing:2px;color:#9a8f78;margin-top:2px}
.spellCard .spText{width:100%;margin-top:6px;font-size:9.5px;line-height:1.28;color:#e2d8c4;text-align:center;background:rgba(0,0,0,.34);border-radius:7px;padding:5px 6px;border:1px solid rgba(255,255,255,.07);z-index:1}
.cdx.spellCard .spSig{font-size:62px;margin-top:40px}
.cdx.spellCard .spName{font-size:16px}
.cdx.spellCard .spType{font-size:9px}
.cdx.spellCard .spText{font-size:11px}
.cdx.spellCard .spCost{width:38px;height:38px;font-size:21px;top:8px;left:8px}
.spellCard.bigSpell{position:relative;width:210px;height:285px;margin:0 auto;overflow:hidden}
.bigSpell .spellCard{width:210px;height:285px}
.bigSpell .spellCard .spSig{font-size:74px;margin-top:48px}
.bigSpell .spellCard .spName{font-size:19px}
.bigSpell .spellCard .spText{font-size:12.5px}
.bigSpell .spellCard .spCost{width:42px;height:42px;font-size:23px}
#tip .tipImg.tipSpell{display:flex;align-items:center;justify-content:center;font-size:58px;background:radial-gradient(circle at 50% 40%,#241d33,#0b0912)}
#tip.tipNeutral{border-color:rgba(200,162,74,.6)}
#tip .tipStats .ts.sp{color:#c9a6ff}

.ecard{position:relative;border-radius:13px;box-sizing:border-box;background:linear-gradient(145deg,#403856,#251e34 55%,#140f1d);box-shadow:0 12px 26px -8px #000,inset 0 0 0 1px rgba(0,0,0,.5),inset 0 0 0 2px rgba(240,207,110,.2)}
.ecard.good{background:linear-gradient(145deg,#2f4a3a,#1c3328 55%,#0e1c14);box-shadow:0 12px 26px -8px #000,inset 0 0 0 1px rgba(0,0,0,.5),inset 0 0 0 2px rgba(120,210,150,.3)}
.ecard.evil{background:linear-gradient(145deg,#46283e,#2a1626 55%,#160a12);box-shadow:0 12px 26px -8px #000,inset 0 0 0 1px rgba(0,0,0,.5),inset 0 0 0 2px rgba(205,95,150,.3)}
.card.ecard{width:140px;height:190px}
.cdx.ecard{width:177px;height:240px;cursor:pointer}
.mull.ecard{width:150px;height:204px}
.ecf-inner{position:absolute;inset:5px;border-radius:9px;overflow:hidden;background:#0c0a12}
.ecf-art{position:absolute;top:0;left:0;right:0;height:66%;background-size:cover;background-position:center 12%}
.ecf-art::after{content:'';position:absolute;left:0;right:0;top:0;height:22%;background:linear-gradient(180deg,#0c0a12 0%,rgba(12,10,18,.72) 42%,transparent 100%);pointer-events:none;z-index:1}
.ecf-noart{position:absolute;top:0;left:0;right:0;height:66%;display:flex;align-items:center;justify-content:center;color:#5a5266;font-size:10px;text-align:center;padding:6px;font-family:system-ui;letter-spacing:1px;background:repeating-linear-gradient(45deg,#16121f 0 9px,#120e1a 9px 18px)}
.ecf-fade{position:absolute;left:0;right:0;top:46%;height:54%;background:linear-gradient(180deg,transparent,rgba(12,10,18,.72) 40%,#100c1a 72%)}
.ecf-plate{position:absolute;left:0;right:0;bottom:0;height:44%;padding:0 8px 7px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.ecf-name{font-family:'Cinzel',serif;font-weight:700;font-size:12px;color:var(--gold);line-height:1.02;text-shadow:0 1px 4px #000}
.ecf-type{font-size:7px;letter-spacing:1.5px;color:#b0a488;margin:2px 0 3px;text-transform:uppercase}
.ecf-kw{font-size:11px;letter-spacing:3px;min-height:13px}
.ecf-text{font-size:8px;line-height:1.24;color:#e6dcc6;font-family:system-ui,sans-serif;margin-top:3px}
.card.ecard .ecf-text{display:none}
.ecf-cost,.ecf-atk,.ecf-hp{position:absolute;width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-family:'Cinzel',serif;font-weight:800;font-size:16px;color:#fff;border-radius:50%;z-index:4;text-shadow:0 1px 2px rgba(0,0,0,.6);box-shadow:0 2px 7px rgba(0,0,0,.6),inset 0 -2px 5px rgba(0,0,0,.3)}
.ecf-cost{top:-3px;left:-3px;background:radial-gradient(circle at 36% 30%,#6fb3ff,#1f54b8);border:2.5px solid #e6f0ff}
.ecf-atk{bottom:-3px;left:-3px;background:radial-gradient(circle at 36% 30%,#ff7a6a,#b81f1f);border:2.5px solid #ffd0c8}
.ecf-hp{bottom:-3px;right:-3px;background:radial-gradient(circle at 36% 30%,#7fe6a0,#1f9b52);border:2.5px solid #d0ffe0}
.ecf-rar{position:absolute;left:50%;top:57%;transform:translate(-50%,-50%) rotate(45deg);width:11px;height:11px;border:2px solid rgba(0,0,0,.5);z-index:3}
.ecard.rar-stone .ecf-rar{background:#9aa0a6;box-shadow:0 0 7px #9aa0a6}
.ecard.rar-copper .ecf-rar{background:#c87f4a;box-shadow:0 0 7px #c87f4a}
.ecard.rar-silver .ecf-rar{background:#cfd6df;box-shadow:0 0 8px #cfd6df}
.ecard.rar-gold .ecf-rar{background:var(--gold);box-shadow:0 0 10px var(--gold)}
.ecard.rar-rhodium .ecf-rar{background:#bfa9ff;box-shadow:0 0 12px #bfa9ff}
.cdx.ecard .ecf-name{font-size:15px}.cdx.ecard .ecf-type{font-size:8.5px}.cdx.ecard .ecf-kw{font-size:13px}.cdx.ecard .ecf-text{display:none}.cdx.ecard .ecf-cost,.cdx.ecard .ecf-atk,.cdx.ecard .ecf-hp{width:38px;height:38px;font-size:19px}
.mull.ecard .ecf-text{display:none}
.bigCard.ecardBig{width:230px!important;height:312px!important;background:linear-gradient(145deg,#403856,#251e34 55%,#140f1d)!important;border-radius:15px;box-shadow:0 16px 32px -10px #000,inset 0 0 0 2px rgba(240,207,110,.25)}
.bigCard.ecardBig.good{background:linear-gradient(145deg,#2f4a3a,#1c3328 55%,#0e1c14)!important}
.bigCard.ecardBig.evil{background:linear-gradient(145deg,#46283e,#2a1626 55%,#160a12)!important}
.bigCard.ecardBig .ecf-name{font-size:18px}.bigCard.ecardBig .ecf-type{font-size:9px}.bigCard.ecardBig .ecf-kw{font-size:15px}.bigCard.ecardBig .ecf-text{display:none}.bigCard.ecardBig .ecf-cost,.bigCard.ecardBig .ecf-atk,.bigCard.ecardBig .ecf-hp{width:44px;height:44px;font-size:22px}

/* --- drop the distracting left hourglass (turn timer pill covers it) --- */
#hourglass{display:none!important}
/* --- cooler deck card backs (ornate arcane medallion, static) --- */
.deckPile .cardback{position:absolute;inset:0;border-radius:11px;border:3px solid var(--gold-d);
  background:radial-gradient(circle at 50% 42%,rgba(150,110,210,.32),transparent 60%),repeating-linear-gradient(45deg,rgba(0,0,0,.30) 0 7px,transparent 7px 14px),linear-gradient(160deg,#352a52,#1a1330 58%,#0d0a18);
  box-shadow:0 9px 22px -4px #000,inset 0 0 0 2px rgba(240,207,110,.30),inset 0 0 28px rgba(95,62,165,.40)}
.deckPile .cardback::before{content:'';position:absolute;inset:6px;border-radius:8px;border:1px solid rgba(240,207,110,.34);box-shadow:inset 0 0 0 3px rgba(0,0,0,.38),inset 0 0 16px rgba(0,0,0,.5)}
.deckPile .cardback::after{content:'\2756';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:40px;color:#f0cf6e;opacity:.95;text-shadow:0 0 20px rgba(240,207,110,.75),0 0 5px rgba(255,242,200,.9),0 2px 6px #000}
.deckPile .s1{transform:translate(6px,6px);opacity:.5}
.deckPile .s2{transform:translate(3px,3px);opacity:.78}
/* --- unplayable cards: black out + concise badge --- */
.pngCard.costy::before{display:none!important}
.card.unplayable,.card.costy{filter:grayscale(.4) brightness(.55) saturate(.85)}
.card .why{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(10,8,16,.88);border:1px solid rgba(255,255,255,.2);color:#fff;font-family:'Cinzel',serif;font-weight:700;font-size:13px;padding:5px 11px;border-radius:11px;white-space:nowrap;z-index:6;letter-spacing:.04em;box-shadow:0 3px 12px rgba(0,0,0,.65);display:none;pointer-events:none;animation:none}
.card .why.mana{color:#cfe6ff;border-color:rgba(127,200,255,.55)}
.card .why.mana::before{content:'';display:inline-block;width:9px;height:9px;background:linear-gradient(135deg,#7fc8ff,#1f54b8);transform:rotate(45deg);margin-right:6px;vertical-align:middle;border:1px solid #cfe4ff;position:relative;top:-1px}
.card.unplayable .why,.card.costy .why{display:block;animation:none}
#hand.awaitTarget .card{opacity:.55;filter:saturate(.6);transition:opacity .25s}

/* ===== premium spell cards ===== */
.spellCard{position:relative;border-radius:13px;overflow:hidden;background:linear-gradient(160deg,#251b3c,#150f24 55%,#0a0712);border:2px solid var(--gold-d);box-shadow:0 12px 26px -8px #000,inset 0 0 0 1px rgba(0,0,0,.5),inset 0 0 0 2px rgba(240,207,110,.18)}
.card.spellCard{width:140px;height:190px}
.cdx.spellCard{width:177px;height:240px;cursor:pointer}
.mull.spellCard{width:150px;height:204px}
.spellCard .spInner{position:absolute;inset:0;--el:#b58cff}
.spInner.el-fire{--el:#ff6a3a}.spInner.el-ice{--el:#7fd0ff}.spInner.el-light{--el:#ffe08a}.spInner.el-nature{--el:#5fe08a}.spInner.el-arcane{--el:#b58cff}.spInner.el-void{--el:#b07ad0}.spInner.el-blood{--el:#ff4a6a}.spInner.el-mystic{--el:#c98cff}
.spArt{position:absolute;top:5px;left:5px;right:5px;height:57%;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:9px;background:radial-gradient(circle at 50% 44%,rgba(255,255,255,.05),transparent 60%)}
.spArt::before{content:'';position:absolute;width:96px;height:96px;border-radius:50%;background:radial-gradient(circle,var(--el),transparent 62%);opacity:.30;filter:blur(5px)}
.spRing{position:absolute;width:76px;height:76px;border-radius:50%;border:2px solid var(--el);opacity:.85;box-shadow:0 0 16px var(--el),inset 0 0 12px var(--el)}
.spRing2{width:98px;height:98px;border-style:dashed;border-width:1px;opacity:.42}
.spSig{position:relative;font-size:40px;line-height:1;z-index:2;filter:drop-shadow(0 0 13px var(--el)) drop-shadow(0 2px 4px #000)}
.spBanner{position:absolute;top:58%;left:0;right:0;transform:translateY(-50%);text-align:center;font-family:'Cinzel',serif;font-weight:700;font-size:8.5px;letter-spacing:4px;color:#1a1208;background:linear-gradient(90deg,transparent,var(--gold) 18%,var(--gold) 82%,transparent);padding:3px 0;text-shadow:0 1px 0 rgba(255,255,255,.35);box-shadow:0 2px 8px rgba(0,0,0,.45);z-index:3}
.spPlate{position:absolute;bottom:0;left:0;right:0;height:40%;padding:7px 9px 9px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center}
.spName{font-family:'Cinzel',serif;font-weight:700;font-size:13px;color:var(--gold);line-height:1.04;text-shadow:0 1px 4px #000;margin-bottom:3px}
.spText{font-size:9px;line-height:1.28;color:#e2d8c4;font-family:system-ui,sans-serif}
.spCost{position:absolute;top:-3px;left:-3px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-family:'Cinzel',serif;font-weight:800;font-size:16px;color:#fff;background:radial-gradient(circle at 36% 30%,#6fb3ff,#1f54b8);border:2.5px solid #e6f0ff;border-radius:50%;z-index:5;box-shadow:0 2px 7px rgba(0,0,0,.6),inset 0 -2px 5px rgba(0,0,0,.3);text-shadow:0 1px 2px rgba(0,0,0,.6)}
.spRar{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%) rotate(45deg);width:10px;height:10px;border:2px solid rgba(0,0,0,.5);z-index:4}
.spRar.rar-stone{background:#9aa0a6;box-shadow:0 0 7px #9aa0a6}.spRar.rar-copper{background:#c87f4a;box-shadow:0 0 7px #c87f4a}.spRar.rar-silver{background:#cfd6df;box-shadow:0 0 8px #cfd6df}.spRar.rar-gold{background:var(--gold);box-shadow:0 0 10px var(--gold)}.spRar.rar-rhodium{background:#bfa9ff;box-shadow:0 0 12px #bfa9ff}
/* codex + modal scale */
.cdx.spellCard .spSig{font-size:54px}.cdx.spellCard .spRing{width:96px;height:96px}.cdx.spellCard .spRing2{width:122px;height:122px}.cdx.spellCard .spName{font-size:16px}.cdx.spellCard .spText{font-size:11px}.cdx.spellCard .spCost{width:38px;height:38px;font-size:19px}.cdx.spellCard .spBanner{font-size:10px}
.bigSpell .spellCard{width:210px;height:285px}
.bigSpell .spSig{font-size:66px}.bigSpell .spRing{width:118px;height:118px}.bigSpell .spRing2{width:150px;height:150px}.bigSpell .spName{font-size:19px}.bigSpell .spText{font-size:12.5px}.bigSpell .spCost{width:44px;height:44px;font-size:22px}.bigSpell .spBanner{font-size:11px;letter-spacing:6px}

#tip{flex-wrap:wrap}
#tip .tipFc{flex:0 0 100%;width:100%;box-sizing:border-box;margin-bottom:4px;padding:8px 10px;border-radius:8px;background:rgba(255,90,70,.10);border:1px solid rgba(255,120,100,.32);font-size:11.5px;line-height:1.42;font-family:system-ui,sans-serif}
#tip .tipFc .tipFcHd{font-family:'Cinzel',serif;color:#ffd27a;font-size:11px;letter-spacing:1px;margin-bottom:4px}
#tip .tipFc b{font-weight:700}
#tip .tipFc .die{color:#ff6a5a}
#tip .tipFc .ok{color:#7CFF9E}
#tip .tipFc .tipFcNote{color:#9a8f78;font-style:italic;font-size:10px;margin-top:3px}

/* ============================================================
   VISUAL UPGRADE v3 (session 3) — premium spells, deck backs, menu
   ============================================================ */
/* ---------- SPELL CARDS ---------- */
.spellCard{
  background:radial-gradient(120% 78% at 50% 6%,rgba(255,255,255,.07),transparent 48%),linear-gradient(160deg,#2b2244,#161024 52%,#0a0712)!important;
  border:2px solid #3c3018!important;
  box-shadow:0 16px 32px -10px #000,inset 0 0 0 1px rgba(0,0,0,.55),inset 0 0 0 2px rgba(240,207,110,.24),inset 0 0 34px rgba(0,0,0,.42)!important;
}
.spellCard .spInner::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(135% 72% at 50% 30%,var(--el),transparent 56%);opacity:.16}
.spellCard::before{content:'';position:absolute;inset:5px;border-radius:9px;z-index:4;pointer-events:none;border:1px solid rgba(240,207,110,.5);box-shadow:inset 0 0 0 2px rgba(0,0,0,.5),inset 0 0 0 3px rgba(240,207,110,.08),inset 0 0 16px rgba(0,0,0,.55)}
.spellCard::after{content:'';position:absolute;inset:0;border-radius:13px;z-index:6;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.10),transparent 20%,transparent 80%,rgba(0,0,0,.34))}
.spArt{top:6px!important;left:6px!important;right:6px!important;height:55%!important;border:1px solid rgba(240,207,110,.18)!important;background:radial-gradient(circle at 50% 46%,rgba(255,255,255,.06),transparent 60%)!important}
.spArt::after{content:'';position:absolute;inset:-10%;border-radius:50%;z-index:0;background:conic-gradient(from 0deg,transparent,var(--el),transparent 36%,transparent 64%,var(--el),transparent);opacity:.22;filter:blur(3px);animation:spAura 14s linear infinite}
@keyframes spAura{to{transform:rotate(360deg)}}
.spArt::before{width:112px!important;height:112px!important;opacity:.42!important;filter:blur(7px)!important;background:radial-gradient(circle,var(--el),transparent 60%)!important}
.spRing{z-index:1!important;opacity:.92!important;box-shadow:0 0 22px var(--el),inset 0 0 16px var(--el)!important}
.spRing2{opacity:.5!important;animation:spDash 30s linear infinite}
@keyframes spDash{to{transform:rotate(-360deg)}}
.spSig{color:#fff7e8!important;filter:drop-shadow(0 0 18px var(--el)) drop-shadow(0 0 6px var(--el)) drop-shadow(0 2px 4px #000)!important}
.spBanner{color:#1a1208!important;background:linear-gradient(90deg,transparent,#6a521c 9%,var(--gold) 24%,#fff2c0 50%,var(--gold) 76%,#6a521c 91%,transparent)!important;border-top:1px solid rgba(255,242,200,.55);border-bottom:1px solid rgba(0,0,0,.45);box-shadow:0 2px 10px rgba(0,0,0,.5),0 0 14px rgba(240,207,110,.32)!important}
.spName{text-shadow:0 0 10px rgba(240,207,110,.35),0 1px 4px #000!important}
.spText{background:rgba(0,0,0,.32)!important;border:1px solid rgba(240,207,110,.13)!important;border-radius:7px!important;padding:5px 7px!important;color:#ece2cf!important}
.spCost{background:radial-gradient(circle at 36% 28%,#7fc0ff,#163e9e)!important;border:2.5px solid #eaf3ff!important;box-shadow:0 3px 9px rgba(0,0,0,.6),0 0 12px rgba(90,160,255,.5),inset 0 -2px 5px rgba(0,0,0,.35)!important}

/* ---------- DECK CARD BACKS (static, premium) ---------- */
.deckPile .cardback{border:3px solid #3a2f17!important;
  background:radial-gradient(circle at 50% 38%,rgba(170,122,232,.38),transparent 56%),repeating-conic-gradient(from 0deg at 50% 42%,rgba(240,207,110,.055) 0 7deg,transparent 7deg 15deg),repeating-linear-gradient(45deg,rgba(0,0,0,.34) 0 7px,transparent 7px 14px),linear-gradient(160deg,#3c2f5e,#1d1638 56%,#0c0918)!important;
  box-shadow:0 11px 26px -4px #000,inset 0 0 0 2px rgba(240,207,110,.36),inset 0 0 32px rgba(98,64,170,.46)!important}
.deckPile .cardback::before{inset:5px!important;border:1px solid rgba(240,207,110,.42)!important;border-radius:8px!important;box-shadow:inset 0 0 0 2px rgba(0,0,0,.4),inset 0 0 0 3px rgba(240,207,110,.10),inset 0 0 18px rgba(0,0,0,.55)!important}
.deckPile .cardback::after{content:'\2756'!important;font-size:38px!important;color:#ffe6a3!important;
  background:radial-gradient(circle,rgba(240,207,110,.22) 0 16%,transparent 23%,transparent 30%,rgba(240,207,110,.16) 33%,transparent 41%)!important;
  text-shadow:0 0 22px rgba(240,207,110,.82),0 0 6px rgba(255,242,200,.95),0 2px 6px #000!important}

/* ---------- MAIN MENU (cooler) ---------- */
#mainMenu{position:relative}
#mainMenu::before{content:'';position:absolute;top:6%;left:50%;transform:translateX(-50%);width:780px;max-width:96%;height:380px;z-index:0;pointer-events:none;background:radial-gradient(58% 58% at 50% 40%,rgba(240,207,110,.13),transparent 70%);filter:blur(8px)}
#mainMenu .titleWrap,#mainMenu .menuList,#mainMenu .menuFoot{position:relative;z-index:2} /* above the menufx storm canvas (inline z-1) */
.bigTitle{background:linear-gradient(180deg,#fff4c6 0%,#f0cf6e 38%,#b5862a 65%,#f6e08c 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important;filter:drop-shadow(0 2px 0 #000) drop-shadow(0 0 26px rgba(240,207,110,.5));animation:bigGlow 4.5s ease-in-out infinite!important}
@keyframes bigGlow{50%{filter:drop-shadow(0 2px 0 #000) drop-shadow(0 0 42px rgba(255,240,184,.85))}}
.titleWrap::after{content:'\2756';color:var(--gold);opacity:.55;font-size:13px;letter-spacing:.5em;margin-top:2px;text-shadow:0 0 12px rgba(240,207,110,.6)}
.menuList .mItem{background:linear-gradient(180deg,#302941 0%,#1b1526 58%,#120e1b 100%)!important;border:1px solid #4a3c1e!important;box-shadow:0 5px 16px -8px #000,inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 0 1px rgba(0,0,0,.3)!important}
.menuList .mItem::before{background:linear-gradient(180deg,#ffe9a3,#9a751f)!important;opacity:.6!important}
.menuList .mItem .mIco{background:radial-gradient(circle at 36% 30%,#4a3f5c,#161019)!important;border:1px solid #6a531f!important;box-shadow:0 0 10px rgba(240,207,110,.2),inset 0 1px 0 rgba(255,255,255,.08)!important}
.menuList .mItem:hover{background:linear-gradient(180deg,#3e3552,#241a30)!important;box-shadow:0 8px 26px -8px #000,0 0 22px rgba(240,207,110,.34),inset 0 1px 0 rgba(255,255,255,.1)!important}
#mainMenu .record{padding:8px 18px;border:1px solid rgba(240,207,110,.24);border-radius:14px;background:linear-gradient(180deg,rgba(42,34,54,.55),rgba(18,14,26,.55));box-shadow:inset 0 0 14px rgba(0,0,0,.4),0 4px 14px -8px #000}


/* MENU53 CSS START */
#mainMenu{position:absolute;inset:0;justify-content:flex-start;align-items:stretch;overflow:hidden;
  background:
    url('../assets/img/menu_bg.jpg') center/cover no-repeat,
    linear-gradient(90deg,transparent calc(50% - 80px),rgba(150,90,235,.08) calc(50% - 38px),rgba(220,190,255,.30) 50%,rgba(150,90,235,.08) calc(50% + 38px),transparent calc(50% + 80px)),
    radial-gradient(120% 80% at 50% 36%,rgba(120,66,200,.42),transparent 58%),
    radial-gradient(90% 120% at 50% 122%,rgba(150,90,230,.30),transparent 60%),
    linear-gradient(180deg,#140c20,#201336 46%,#0e0816);}
#mainMenu .mmVign{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(120% 100% at 50% 42%,transparent 58%,rgba(4,2,10,.5) 100%);}
#mainMenu>*{position:absolute;z-index:2}
#mainMenu .mmVign{z-index:1}

/* ornate frame mixin look */
.mmFrame{border:1px solid #6b521f;background:linear-gradient(180deg,rgba(28,20,40,.92),rgba(12,8,20,.92));
  box-shadow:0 8px 26px -8px #000,inset 0 0 0 1px rgba(0,0,0,.5),inset 0 0 0 2px rgba(232,201,119,.16),inset 0 0 22px rgba(0,0,0,.4);}

/* title */
#mainMenu .mmTitle{top:26px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
#mainMenu .mmRune{position:absolute;top:-18px;left:50%;transform:translateX(-50%);width:330px;height:330px;border-radius:50%;pointer-events:none;
  border:1px solid rgba(232,201,119,.18);box-shadow:0 0 50px rgba(150,90,230,.30),inset 0 0 70px rgba(150,90,230,.18);
  background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(232,201,119,.10) 0 3deg,transparent 3deg 15deg);
  -webkit-mask:radial-gradient(circle,transparent 58%,#000 60%,#000 73%,transparent 76%);mask:radial-gradient(circle,transparent 58%,#000 60%,#000 73%,transparent 76%);}
#mainMenu .titleSub{font-size:12px;letter-spacing:.42em;color:#cdbb8e;opacity:.8}
#mainMenu .bigTitle{font-size:clamp(42px,5vw,68px);letter-spacing:.1em;
  background:linear-gradient(180deg,#fff6cf 0%,#f0cf6e 40%,#a8801e 70%,#f6e08c 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 2px 0 #000) drop-shadow(0 0 30px rgba(180,120,255,.5));margin:0}
#mainMenu .mmSub{font-family:'Cinzel',serif;font-weight:700;letter-spacing:.55em;font-size:15px;color:#e8c977;text-shadow:0 0 14px rgba(232,201,119,.5);margin-top:3px;display:flex;align-items:center;justify-content:center}
#mainMenu .mmSub i{display:inline-block;width:54px;height:1px;background:linear-gradient(90deg,transparent,#c9a24a);margin:0 14px;box-shadow:0 0 8px rgba(232,201,119,.4)}
#mainMenu .mmSub i:last-child{background:linear-gradient(90deg,#c9a24a,transparent)}
#mainMenu .mmRune{animation:mmRuneBreath 6s ease-in-out infinite alternate}
@keyframes mmRuneBreath{from{box-shadow:0 0 50px rgba(150,90,230,.30),inset 0 0 70px rgba(150,90,230,.18);opacity:.85}to{box-shadow:0 0 72px rgba(150,90,230,.48),inset 0 0 92px rgba(150,90,230,.28);opacity:1}}
#mainMenu .mmSub{animation:mmSubGlow 5s ease-in-out infinite alternate}
@keyframes mmSubGlow{from{text-shadow:0 0 14px rgba(232,201,119,.5)}to{text-shadow:0 0 22px rgba(232,201,119,.8),0 0 40px rgba(232,201,119,.35)}}
body.reduceMotion #mainMenu .mmRune,body.reduceMotion #mainMenu .mmSub{animation:none}

/* left menu */
#mainMenu .menuList{position:absolute;left:34px;top:50%;transform:translateY(-44%);width:300px;display:flex;flex-direction:column;gap:9px}
#mainMenu .mItem{font-family:'Cinzel',serif;font-weight:700;font-size:16px;letter-spacing:.12em;color:#e8c977;
  display:flex;align-items:center;gap:14px;padding:12px 16px;cursor:pointer;text-align:left;position:relative;
  border:1px solid #6b521f;background:linear-gradient(180deg,rgba(34,25,46,.93),rgba(13,9,20,.95));
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%);
  box-shadow:0 6px 18px -10px #000,inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 0 1px rgba(232,201,119,.10);transition:.16s}
#mainMenu .mItem .mIco{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:16px;color:#e8c977;
  border-radius:7px;border:1px solid rgba(232,201,119,.35);background:radial-gradient(circle at 36% 30%,#3a2f50,#140e1f);text-shadow:0 0 8px rgba(232,201,119,.4)}
#mainMenu .mItem .mLbl{flex:1}
#mainMenu .mItem .mArrow{opacity:.35;font-size:20px;margin-right:6px}
#mainMenu .mItem:hover{transform:translateX(5px);border-color:#e8c977;color:#fff2c0;box-shadow:0 8px 22px -8px #000,0 0 18px rgba(150,90,230,.28)}
#mainMenu .mItem:hover .mArrow{opacity:1}
#mainMenu .mItem.on{border-color:#b98bff;color:#fff;
  background:linear-gradient(180deg,rgba(86,52,140,.6),rgba(40,22,66,.85));
  box-shadow:0 8px 24px -8px #000,0 0 26px rgba(150,90,230,.5),inset 0 0 0 1px rgba(185,139,255,.5)}
#mainMenu .mItem.on .mIco{border-color:#cbb0ff;background:radial-gradient(circle at 36% 30%,#6a44a8,#241038);color:#fff}
#mainMenu .mItem.on::before{content:'';position:absolute;left:-1px;top:8%;bottom:8%;width:3px;background:linear-gradient(180deg,#e0c6ff,#8a5be0);box-shadow:0 0 12px #a36bff}

/* profile card (top-left) */
#mainMenu .mmProfile{top:18px;left:18px;width:258px;display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:4px;
  border:1px solid #6b521f;background:linear-gradient(180deg,rgba(28,20,40,.92),rgba(12,8,20,.92));
  box-shadow:0 8px 24px -10px #000,inset 0 0 0 2px rgba(232,201,119,.14)}
#mainMenu .mmAv{width:48px;height:48px;border-radius:8px;background-size:cover;background-position:center;border:2px solid #c9a24a;box-shadow:0 0 12px rgba(150,90,230,.4),inset 0 0 8px rgba(0,0,0,.5);flex:none}
#mainMenu .mmPInfo{flex:1;min-width:0}
#mainMenu .mmName{font-family:'Cinzel',serif;font-weight:700;font-size:15px;letter-spacing:.1em;color:#f0e0b0;line-height:1.1}
#mainMenu .mmLvl{font-size:10px;letter-spacing:.18em;color:#a89878;margin:1px 0 4px}
#mainMenu .mmXp{height:7px;border-radius:5px;background:rgba(0,0,0,.55);border:1px solid rgba(232,201,119,.25);overflow:hidden}
#mainMenu .mmXp i{display:block;height:100%;background:linear-gradient(90deg,#b98bff,#7a4fd0);box-shadow:0 0 8px rgba(150,90,230,.7)}

/* top-right icons */
#mainMenu .mmTopIcons{top:18px;right:18px;display:flex;gap:8px}
#mainMenu .mmIcon{width:40px;height:40px;font-size:17px;color:#e8c977;cursor:pointer;border-radius:4px;
  border:1px solid #6b521f;background:linear-gradient(180deg,rgba(28,20,40,.92),rgba(12,8,20,.92));
  box-shadow:0 6px 16px -8px #000,inset 0 0 0 1px rgba(232,201,119,.14);transition:.15s}
#mainMenu .mmIcon:hover{border-color:#e8c977;color:#fff2c0;box-shadow:0 6px 18px -8px #000,0 0 14px rgba(150,90,230,.35);transform:translateY(-1px)}

/* daily quest (bottom-left) */
#mainMenu .mmQuest{bottom:22px;left:22px;width:300px;padding:11px 15px;border-radius:4px;
  border:1px solid #6b521f;background:linear-gradient(180deg,rgba(28,20,40,.92),rgba(12,8,20,.92));box-shadow:0 8px 24px -10px #000,inset 0 0 0 2px rgba(232,201,119,.14)}
#mainMenu .mmQHd{font-family:'Cinzel',serif;font-weight:700;font-size:13px;letter-spacing:.12em;color:#f0e0b0}
#mainMenu .mmQTxt{font-size:11px;color:#b6a888;margin:2px 0 7px}
#mainMenu .mmQRow{display:flex;align-items:center;gap:9px}
#mainMenu .mmQBar{flex:1;height:8px;border-radius:5px;background:rgba(0,0,0,.55);border:1px solid rgba(232,201,119,.25);overflow:hidden}
#mainMenu .mmQBar i{display:block;height:100%;background:linear-gradient(90deg,#f0cf6e,#a8801e);box-shadow:0 0 8px rgba(232,201,119,.6)}
#mainMenu .mmGem{color:#b98bff;font-size:14px;text-shadow:0 0 10px rgba(150,90,230,.8)}
#mainMenu .mmQNum{font-family:'Cinzel',serif;font-weight:700;font-size:13px;color:#e8c977}

/* record (bottom-right) */
#mainMenu .mmRecord{bottom:22px;right:22px;min-width:230px;text-align:right;padding:11px 16px;border-radius:4px;
  border:1px solid #6b521f;background:linear-gradient(180deg,rgba(28,20,40,.92),rgba(12,8,20,.92));box-shadow:0 8px 24px -10px #000,inset 0 0 0 2px rgba(232,201,119,.14)}
#mainMenu .mmRHd{font-family:'Cinzel',serif;font-weight:700;font-size:13px;letter-spacing:.1em;color:#f0e0b0;margin-bottom:3px}
#mainMenu .mmRV{font-family:'Cinzel',serif;font-size:12px;letter-spacing:.06em;color:#c2b48f;line-height:1.5}

/* central emblem */
#mainMenu .mmEmblem{bottom:14px;left:50%;transform:translateX(-50%);width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:2px solid #c9a24a;background:radial-gradient(circle at 50% 38%,#3a2456,#120a1e);box-shadow:0 0 22px rgba(150,90,230,.6),inset 0 0 14px rgba(0,0,0,.6);color:#e0c6ff;font-size:22px;text-shadow:0 0 12px rgba(150,90,230,.9)}
#mainMenu .menuFoot{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);width:auto;color:#7a6f5a;font-size:10px;letter-spacing:.1em;text-align:center}
/* gold SVG line icons */
#mainMenu .mItem .mIco{color:#e8c977}
#mainMenu .mItem .mIco svg{width:19px;height:19px;display:block;filter:drop-shadow(0 0 5px rgba(232,201,119,.35))}
#mainMenu .mItem.on .mIco svg{filter:drop-shadow(0 0 6px rgba(185,139,255,.7))}
#mainMenu .mmIcon{display:flex;align-items:center;justify-content:center;color:#e8c977}
#mainMenu .mmIcon svg{width:20px;height:20px}
/* ornate corner brackets on panels */
#mainMenu .mmProfile::before,#mainMenu .mmProfile::after,#mainMenu .mmQuest::before,#mainMenu .mmQuest::after,#mainMenu .mmRecord::before,#mainMenu .mmRecord::after{content:'';position:absolute;width:12px;height:12px;border:2px solid #c9a24a;opacity:.85;pointer-events:none}
#mainMenu .mmProfile::before,#mainMenu .mmQuest::before,#mainMenu .mmRecord::before{top:4px;left:4px;border-right:none;border-bottom:none}
#mainMenu .mmProfile::after,#mainMenu .mmQuest::after,#mainMenu .mmRecord::after{bottom:4px;right:4px;border-left:none;border-top:none}
/* MENU53 CSS END */
/* SPELL54 CSS START */
.spImg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:2}
/* painted sigil art for the 9 pack spells: fills the spell's art window inside the engine frame
   (frame + SPELL banner + name + text + cost stay CSS-rendered → matches the original 20 spells) */
.spPic{position:absolute;inset:0;background-size:cover;background-position:center;border-radius:inherit;z-index:2}
.spInner.hasPic .spArt{border-color:rgba(240,207,110,.32)!important}
/* Only spells with a baked full-art image go borderless/full-bleed. Procedural (art-less) spells
   KEEP the gold frame + inset border below, so all spell cards read as evenly framed in a grid. */
.spellCard:has(.spImg){border:none!important;box-shadow:0 12px 26px -8px #000!important;background:#08060e!important;overflow:hidden}
.spellCard:has(.spImg)::before,.spellCard:has(.spImg)::after{content:none!important;display:none!important}
/* SPELL54 CSS END */
/* DECKBACK55 START */
.deckPile .cardback{background:url('../assets/img/deck_back.jpg') center/cover no-repeat!important;border:2px solid #6b521f!important;border-radius:9px!important;box-shadow:0 8px 20px -4px #000,inset 0 0 0 1px rgba(0,0,0,.55)!important}
.deckPile .cardback::before,.deckPile .cardback::after{content:none!important;display:none!important}
.flycard{background:url('../assets/img/deck_back.jpg') center/cover no-repeat!important;border:2px solid #6b521f!important;border-radius:9px!important;box-shadow:0 10px 26px -4px #000!important}
.flycard::before{content:none!important;display:none!important}
/* DECKBACK55 END */

/* ===== _fix63 menu polish: lighter title/buttons + congruent submenu theme ===== */
#mainMenu .bigTitle{
  background:linear-gradient(180deg,#fffdf4 0%,#ffeaa6 38%,#ecca77 72%,#fff6d4 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:transparent!important;
  filter:drop-shadow(0 2px 0 #000) drop-shadow(0 0 36px rgba(196,148,255,.6))!important;}
#mainMenu .titleSub{color:#e6d3a0;opacity:.95}
#mainMenu .mmSub{color:#f4dd92}
#mainMenu .mItem{color:#f6e7ba}
#mainMenu .mItem .mIco{color:#f6e7ba}
#mainMenu .mItem .mLbl{text-shadow:0 0 10px rgba(0,0,0,.55)}
#mainMenu .mItem:hover{color:#fff7dc}
/* submenus: same world as the menu, dimmed so content stays readable */
.scene{background:
   radial-gradient(900px 560px at 50% 14%,rgba(122,72,202,.32),transparent 70%),
   linear-gradient(180deg,rgba(9,5,17,.84),rgba(6,3,12,.93) 60%,rgba(4,2,9,.96)),
   url('../assets/img/menu_bg.jpg') center/cover no-repeat;}
.scene h1{
   background:linear-gradient(180deg,#fffdf4,#ffe6a2 55%,#e8c26e)!important;
   -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important;
   filter:drop-shadow(0 2px 0 #000) drop-shadow(0 0 22px rgba(196,148,255,.42));}
.scene .tag{color:#cabd9d}
.backBtn{background:linear-gradient(180deg,rgba(42,32,60,.92),rgba(20,14,30,.94))!important;color:#f4e4b2!important;
   border:1.5px solid rgba(240,207,110,.6)!important;box-shadow:0 6px 18px -6px #000,0 0 18px rgba(150,90,230,.3)!important}
.backBtn:hover{background:linear-gradient(180deg,rgba(240,207,110,.2),rgba(60,44,86,.9))!important;color:#fff7dc!important}
/* gold corner-bracket accents on submenu content panels for congruence with the menu panels */
.setBlock,.setCredits,.modalCard,#leaderboard .lbWrap,#shop .shopWrap{
   border:1px solid rgba(240,207,110,.26)!important;box-shadow:inset 0 0 18px rgba(0,0,0,.45),0 6px 20px -10px #000!important}


/* ===== _fix66: yellower title text + remove accidental gold box on submenu headers ===== */
#mainMenu .bigTitle{
  background:linear-gradient(180deg,#fff7c4 0%,#ffe24c 40%,#f4c736 72%,#fff0a0 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;}
.scene h1{
  background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;
  -webkit-text-fill-color:#ffd95a!important;color:#ffd95a!important;filter:none!important;
  text-shadow:0 2px 4px #000,0 0 24px rgba(255,205,80,.55)!important;}


/* === _fix69: enemy hero visibility + clearer attack targeting === */
#enemyHeroRow .hero{box-shadow:inset 0 0 0 1.5px rgba(255,74,95,.55),0 0 26px -6px var(--evil-glow),0 7px 20px -7px #000}
.hero .nm{font-size:17px}
.hero .heroHP{width:54px;height:54px;font-size:23px;box-shadow:0 0 22px rgba(210,30,47,.85),0 4px 10px -3px #000}
.hero.targetable{box-shadow:0 0 0 4px var(--evil),0 0 52px var(--evil-glow)!important}
.hero.targetable::after{content:'\2694';position:absolute;left:50%;top:-15px;transform:translateX(-50%);width:26px;height:26px;line-height:26px;text-align:center;font-size:14px;color:#fff;background:var(--evil);border-radius:50%;box-shadow:0 2px 10px #000;border:1px solid #ffd0d4;pointer-events:none;z-index:5}

/* === _fix70: clearer combat status & blocked-play feedback === */
.badge{width:20px;height:20px;font-size:11px;border-width:1.5px}
.unit .badges{gap:4px}
.gLabel{font-size:10px;padding:1px 6px;background:rgba(10,16,24,.82);border-radius:6px;box-shadow:0 0 10px rgba(120,200,255,.5)}
.unit.frozen .inner::after{font-size:22px;text-shadow:0 0 14px #6bd0ff,0 0 4px #fff}
.unit.frozen .ring{box-shadow:0 0 0 2px rgba(140,210,255,.7),0 0 20px rgba(110,208,255,.6)}
.unit.targetable .ring{box-shadow:0 0 0 3px var(--evil),0 0 34px var(--evil-glow)!important}
#myBoard.full{box-shadow:inset 0 0 0 2px rgba(255,90,80,.30)}
.toast{font-size:17px}

/* === _fix76: guard creatures — drop badges below the GUARD label (no overlap) === */
.unit.guard .badges{top:24px}
.card.guard .badges{top:24px}

/* === _fix80: enemy hand as face-down cards (count always visible) === */
#enemyHand{position:absolute;top:4px;left:50%;transform:translateX(-50%);display:flex;justify-content:center;align-items:flex-start;z-index:9;pointer-events:none;height:50px}
#enemyHand .ehCard{width:34px;height:48px;margin:0 -6px;border-radius:5px;background:url('../assets/img/deck_back.jpg') center/cover no-repeat;border:1.5px solid #6b521f;box-shadow:0 3px 8px -2px #000}
#enemyHand::after{content:attr(data-count);position:absolute;right:-26px;top:14px;min-width:20px;height:20px;line-height:20px;text-align:center;font-family:'Cinzel',serif;font-weight:700;font-size:12px;color:#ffd27a;background:rgba(10,8,14,.85);border:1px solid var(--gold-d);border-radius:10px;padding:0 5px}
#enemyHeroRow{padding-top:56px}

/* === _fix81: hero crest avatars + bigger enemy hand + menu-style board logo === */
/* hero avatar = friendly faction crest (matches side-select), not the demon image */
.hero .av{display:flex!important;align-items:center;justify-content:center;font-size:34px;background-image:none!important;line-height:1;text-shadow:0 2px 8px rgba(0,0,0,.55)}
.hero.good .av{background:radial-gradient(circle at 38% 30%,#2f7d50,#0f3019)!important;border-color:#43d188!important;box-shadow:0 0 18px rgba(67,209,136,.42),inset 0 0 12px rgba(0,0,0,.45)}
.hero.evil .av{background:radial-gradient(circle at 38% 30%,#8a3026,#2a0d0a)!important;border-color:#ff7a4a!important;box-shadow:0 0 18px rgba(255,90,40,.48),inset 0 0 12px rgba(0,0,0,.45)}
/* bigger enemy face-down hand */
#enemyHand{height:74px;top:5px}
#enemyHand .ehCard{width:50px;height:70px;margin:0 -9px;border-radius:7px;box-shadow:0 4px 11px -3px #000}
#enemyHand::after{right:-30px;top:25px;font-size:13px}
#enemyHeroRow{padding-top:84px}
/* board logo: centered poker-table centerpiece, main-menu font (Cinzel 900 + gold gradient) */
#bfBg .bfLogo{font-weight:900;font-size:54px;letter-spacing:18px;text-indent:18px;background:linear-gradient(180deg,#fff4c6,#f0cf6e 42%,#b5862a 72%,#f6e08c);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;opacity:.24;text-shadow:none}
#bfBg .bfLogo span{font-size:17px;letter-spacing:21px;text-indent:21px;margin-top:12px;-webkit-text-fill-color:transparent;color:transparent}

/* v0.3 version tag */
#mainMenu .mmVer{font-family:'Cinzel',serif;font-size:10px;letter-spacing:.32em;color:#9a8a64;opacity:.72;margin-top:7px;text-transform:uppercase}

/* === _fix83: looking-for-player screen === */
#lfp .lfpBox{max-width:520px;margin:26px auto 0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
#lfp .lfpSpin{width:56px;height:56px;border-radius:50%;border:4px solid rgba(240,207,110,.22);border-top-color:#f0cf6e;animation:lfpspin 1s linear infinite}
@keyframes lfpspin{to{transform:rotate(360deg)}}
#lfp .lfpBox p{color:#cdbb8e;line-height:1.55;font-size:14px;margin:0}
#lfp .lfpSoon{color:#f0cf6e;letter-spacing:.22em;font-family:'Cinzel',serif;text-transform:uppercase;font-size:12px}

/* === _fix85: looking-for-player nav (clear exits) === */
#lfp .lfpBtns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.btnGhost{background:transparent!important;color:var(--gold)!important;border:1px solid var(--gold-d)!important;box-shadow:none!important}
.btnGhost:hover{background:rgba(240,207,110,.10)!important;filter:none!important}
#lfp .lfpSpin{animation:lfpspin 2.4s linear infinite;opacity:.8}

/* === v0.3: online PvP lobby === */
#lfp .pvPanel{display:none;flex-direction:column;align-items:center;gap:20px;margin-top:18px;width:100%;animation:sceneIn .3s ease-out}
#lfp .pvPanel.show{display:flex}
#lfp .pvChoose .fac{width:268px}
.pvAdv{max-width:520px;width:90%;border:1px solid var(--line);border-radius:12px;background:rgba(20,16,28,.5);padding:0 16px;color:#cdbb8e}
.pvAdvToggle{width:100%;text-align:left;cursor:pointer;padding:12px 0;background:none;border:none;font-family:'Cinzel',serif;font-size:13px;letter-spacing:.06em;color:var(--gold)}
.pvAdvToggle:hover{filter:brightness(1.15)}
.pvAdvBody{display:none;padding-bottom:8px;border-top:1px solid var(--line)}
.pvAdv.open .pvAdvBody{display:block}
.pvAdv p{font-size:12.5px;line-height:1.55;margin:12px 0 8px}
.pvAdv code{background:rgba(240,207,110,.12);color:#f4e4b2;padding:1px 6px;border-radius:5px;font-size:12px}
.pvInput{width:100%;box-sizing:border-box;margin:0 0 14px;padding:11px 14px;border-radius:10px;border:1px solid var(--gold-d);
  background:rgba(10,8,14,.7);color:#fff7dc;font-family:'Spectral',serif;font-size:14px;outline:none}
.pvInput:focus{border-color:var(--gold);box-shadow:0 0 0 2px rgba(240,207,110,.2)}
.pvCodeWrap,.pvJoinWrap{display:flex;flex-direction:column;align-items:center;gap:12px}
.pvCodeLbl{font-family:'Cinzel',serif;letter-spacing:.28em;font-size:12px;color:#cdbb8e;text-transform:uppercase}
.pvCode{font-family:'Cinzel',serif;font-weight:900;font-size:clamp(40px,8vw,72px);letter-spacing:.16em;color:var(--gold);
  text-shadow:0 3px 14px rgba(240,207,110,.35),0 0 2px #000;padding:8px 22px;border:1px solid var(--gold-d);border-radius:14px;
  background:linear-gradient(180deg,rgba(40,32,18,.6),rgba(18,14,10,.6))}
.pvCodeInput{max-width:300px;text-align:center;font-family:'Cinzel',serif;font-weight:900;font-size:38px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold);padding:14px 10px}
.pvCodeInput::placeholder{color:rgba(205,187,142,.4);letter-spacing:.28em}
.pvCopy{padding:8px 18px!important;font-size:13px!important}
.pvStatus{max-width:520px;color:#cdbb8e;font-size:13.5px;line-height:1.5;text-align:center;min-height:20px}
.pvStatus.err{color:#ff8a8a}

/* === v0.4: deck-building / collection === */
#decks,#deckSelect{align-items:center}
.deckBank{display:flex;gap:18px;color:#cdbb8e;font-size:13.5px;margin:-4px 0 16px;font-family:'Cinzel',serif;flex-wrap:wrap;justify-content:center}
.deckBank span{background:rgba(20,16,28,.55);border:1px solid var(--line);border-radius:20px;padding:6px 16px}
.deckList{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;max-width:920px;width:100%}
.deckTile{position:relative;width:190px;min-height:118px;border-radius:14px;cursor:pointer;padding:18px 16px;background:linear-gradient(180deg,#241f30,#100d18);border:1px solid var(--line);transition:.2s;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.deckTile:hover{transform:translateY(-5px) scale(1.02)}
.deckTile.good{box-shadow:0 0 0 1px var(--good-d),0 14px 30px -16px var(--good-glow)}
.deckTile.evil{box-shadow:0 0 0 1px var(--evil-d),0 14px 30px -16px var(--evil-glow)}
.deckTile.dimmed{opacity:.5}.deckTile.dimmed:hover{transform:none}
.dtCrest{font-size:38px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.6))}
.dtName{font-family:'Cinzel',serif;font-weight:700;color:#fff7dc;font-size:16px;word-break:break-word;line-height:1.15}
.dtMeta{font-size:12px;color:var(--muted);letter-spacing:.03em}
.ok{color:#7fe3a4}.warn{color:#ffb46b}
.dtDel{position:absolute;top:6px;right:8px;background:none;border:none;color:#7a7060;font-size:14px;cursor:pointer;opacity:.55}
.dtDel:hover{color:#ff8a8a;opacity:1}
.newDeck{justify-content:center;border-style:dashed;opacity:.85}
.newDeck:hover{opacity:1}
.dtPlus{font-size:32px;color:var(--gold)}
/* builder */
#deckBuild{align-items:stretch;justify-content:flex-start;padding:16px 20px 0}
.dbHead{display:flex;align-items:center;gap:14px;width:100%;max-width:1300px;margin:0 auto 10px}
.dbHead .backBtn{position:static}
.dbName{flex:1;max-width:340px;background:rgba(10,8,14,.7);border:1px solid var(--gold-d);border-radius:10px;color:#fff7dc;font-family:'Cinzel',serif;font-size:17px;padding:8px 14px;outline:none}
.dbName:focus{border-color:var(--gold);box-shadow:0 0 0 2px rgba(240,207,110,.2)}
.dbCount{font-family:'Cinzel',serif;font-size:20px;font-weight:900;margin-left:auto}
.dbFilters{display:flex;gap:8px;align-items:center;width:100%;max-width:1300px;margin:0 auto 8px;flex-wrap:wrap}
.dbFilt{background:rgba(20,16,28,.6);border:1px solid var(--line);color:#cdbb8e;border-radius:16px;padding:5px 13px;font-size:11px;letter-spacing:.07em;font-family:'Cinzel',serif;cursor:pointer}
.dbFilt.on{background:rgba(240,207,110,.16);color:var(--gold);border-color:var(--gold-d)}
.dbHint{color:#8a8270;font-size:11px;margin-left:auto}
.dbBody{display:flex;gap:16px;width:100%;max-width:1300px;margin:0 auto;flex:1;min-height:0}
.dbGrid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,177px);justify-content:center;gap:16px 14px;padding:6px 8px 40px;align-content:start}
.dbCard{position:relative;width:177px;cursor:pointer;transition:.15s}
.dbCard.locked{cursor:default;filter:grayscale(.9) brightness(.5)}
.dbCard.dis{cursor:default}
.dbCard.dis:not(.locked) .cdx{opacity:.5}
.dbCard:not(.dis):hover{transform:translateY(-5px)}
.dbCard .cdxFoot{display:none}
.dbOwn{position:absolute;bottom:6px;right:6px;background:rgba(8,6,12,.85);border:1px solid var(--gold-d);border-radius:10px;color:#f0cf6e;font-size:11px;font-weight:700;padding:1px 8px;font-family:'Cinzel',serif;z-index:3}
.dbCard.locked .dbOwn{border-color:#666;color:#cbb}
.dbIn{position:absolute;top:8px;left:8px;background:#43d188;color:#06210f;font-weight:900;border-radius:50%;width:25px;height:25px;display:flex;align-items:center;justify-content:center;font-size:13px;box-shadow:0 2px 8px rgba(0,0,0,.6);z-index:3}
.dbDeck{width:272px;flex-shrink:0;display:flex;flex-direction:column;background:rgba(16,12,24,.6);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:14px}
.dbDeckHd{font-family:'Cinzel',serif;color:var(--gold);padding:12px 14px;border-bottom:1px solid var(--line);letter-spacing:.1em;font-size:14px}
.dbDeckList{overflow-y:auto;flex:1;padding:6px}
.dbRow{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;cursor:pointer;margin-bottom:3px;background:rgba(255,255,255,.02);transition:.12s}
.dbRow:hover{background:rgba(255,74,95,.14)}
.dbRow:hover .dbRn{text-decoration:line-through;opacity:.7}
.dbCost{width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#9fd2ff,#3a7bd5);color:#04122b;font-weight:900;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.dbRow.evil .dbCost{background:radial-gradient(circle at 35% 25%,#ff9a8a,#c0392b);color:#2b0606}
.dbRn{flex:1;color:#e7dcc4;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dbRc{color:#cdbb8e;font-weight:700;font-size:12px}
.dbEmpty{color:#8a8270;font-size:12.5px;text-align:center;padding:24px 12px;line-height:1.5}
/* new-deck overlay */
#deckOverlay{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;background:rgba(6,4,10,.72)}
#deckOverlay.show{display:flex}
.ovBox{background:linear-gradient(180deg,#241f30,#13101c);border:1px solid var(--gold-d);border-radius:16px;padding:28px 30px;text-align:center;box-shadow:0 20px 60px -20px #000}
.ovTitle{font-family:'Cinzel',serif;color:var(--gold);font-size:18px;margin-bottom:18px}
.ovChoose{display:flex;gap:16px;margin-bottom:16px}
.ovFac{width:130px;padding:18px;border-radius:12px;background:rgba(20,16,28,.6);border:1px solid var(--line);color:#fff7dc;font-family:'Cinzel',serif;font-size:15px;cursor:pointer;display:flex;flex-direction:column;gap:8px;align-items:center;transition:.2s}
.ovFac span{font-size:34px}
.ovFac.good:hover{border-color:var(--good);transform:translateY(-3px)}
.ovFac.evil:hover{border-color:var(--evil);transform:translateY(-3px)}

/* === v0.4: single-player campaign === */
#campaign{align-items:center;justify-content:flex-start;overflow-y:auto;padding-top:18px}
.campProg{display:flex;align-items:center;gap:16px;width:100%;max-width:1100px;margin:0 auto 14px;font-family:'Cinzel',serif;font-size:13px;color:#cdbb8e}
.campBar{flex:1;height:10px;border-radius:6px;background:rgba(20,16,28,.7);border:1px solid var(--line);overflow:hidden}
.campBar i{display:block;height:100%;background:linear-gradient(90deg,#6fe08a,#f0cf6e);transition:width .5s}
.campGold{color:var(--gold)}
.campWrap{display:flex;gap:20px;width:100%;max-width:1100px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.campMap{position:relative;flex:1;min-width:340px;height:560px;border-radius:16px;border:1px solid var(--line);overflow:hidden;
  background:#0d0a14 url('../assets/img/menu_bg.jpg') center/cover}
.campMap::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,5,14,.55),rgba(8,5,14,.78))}
.campPath{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.campPath polyline{fill:none;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.campPath .cpBase{stroke:rgba(240,207,110,.22);stroke-width:2.5;stroke-dasharray:5 6}
.campPath .cpLit{stroke:#f0cf6e;stroke-width:3;filter:drop-shadow(0 0 5px rgba(240,207,110,.7))}
.campCrystal{position:absolute;left:50%;top:5%;transform:translate(-50%,-50%);font-size:34px;color:#c79bff;z-index:2;filter:drop-shadow(0 0 12px rgba(199,155,255,.8));animation:campPulse 3s ease-in-out infinite}
.campNode{position:absolute;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;z-index:3;cursor:pointer;
  border:2px solid var(--ac,#f0cf6e);background:radial-gradient(circle at 40% 30%,#2a2236,#120e1c);color:#fff;display:flex;align-items:center;justify-content:center;
  transition:.18s;box-shadow:0 4px 12px rgba(0,0,0,.5)}
.campNode .cnIco{font-size:17px;line-height:1}
.campNode:hover{transform:translate(-50%,-50%) scale(1.16);z-index:5}
.campNode.sel{box-shadow:0 0 0 3px rgba(240,207,110,.55),0 4px 14px rgba(0,0,0,.6)}
.campNode.cleared{border-color:#6fe08a;color:#9af0b6;background:radial-gradient(circle at 40% 30%,#16361f,#0a1c10)}
.campNode.locked{border-color:#4a4452;color:#6a6472;filter:grayscale(.5);cursor:default;opacity:.7}
.campNode.locked:hover{transform:translate(-50%,-50%)}
.campNode.current{border-color:#f0cf6e;color:#fff7dc;background:radial-gradient(circle at 40% 30%,#4a3a14,#241a08);animation:campNode 1.6s ease-in-out infinite}
.campNode.t-boss.current,.campNode.t-final.current{border-color:#ff7ad0}
.campNode.t-final{width:46px;height:46px}
.cnHere{position:absolute;bottom:108%;left:50%;transform:translateX(-50%);font-family:'Cinzel',serif;font-size:9px;letter-spacing:.12em;color:#f0cf6e;background:rgba(8,5,14,.8);padding:1px 6px;border-radius:8px;white-space:nowrap}
@keyframes campNode{0%,100%{box-shadow:0 0 0 0 rgba(240,207,110,.5),0 4px 12px rgba(0,0,0,.5)}50%{box-shadow:0 0 0 8px rgba(240,207,110,0),0 4px 12px rgba(0,0,0,.5)}}
@keyframes campPulse{0%,100%{opacity:.8;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}}
.campDetail{width:300px;flex-shrink:0;background:linear-gradient(180deg,rgba(36,31,48,.92),rgba(16,13,24,.95));border:1px solid var(--line);border-radius:16px;padding:20px 18px;display:flex;flex-direction:column;gap:9px;align-self:flex-start}
.campDetail.good{box-shadow:0 0 0 1px var(--good-d),0 18px 40px -20px var(--good-glow)}
.campDetail.evil{box-shadow:0 0 0 1px var(--evil-d),0 18px 40px -20px var(--evil-glow)}
.cdAct{font-family:'Cinzel',serif;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.cdName{font-family:'Cinzel',serif;font-weight:900;color:#fff7dc;font-size:21px;line-height:1.1}
.cdEnemy{font-size:12.5px;color:#cdbb8e}.cdEnemy b{color:#fff7dc}
.cdFlavor{font-size:13px;font-style:italic;color:#b6a98a;line-height:1.5;border-left:2px solid var(--line);padding-left:10px}
.cdReward{font-size:12px;color:#9af0b6;margin-top:2px}.cdReward b{color:#f0cf6e}
.cdMod{font-size:12px;color:#ff9a8a;margin-top:2px;font-weight:600;letter-spacing:.2px;text-shadow:0 0 8px rgba(255,80,60,.3)}
.cdActIntro{font-size:12px;font-style:italic;color:#b9aed2;margin:-1px 0 3px;opacity:.9;line-height:1.45}
.crAct{font-family:Cinzel,serif;color:#f0cf6e;text-align:center;font-size:15px;letter-spacing:2px;text-shadow:0 0 12px rgba(240,207,110,.55);margin-bottom:6px}
.cdCta{margin-top:8px}
/* crate reveal */
.crateBox{max-width:440px;text-align:center}
.crateBox.cr-rare{border-color:#9fe8ff}.crateBox.cr-epic{border-color:#c79bff}
.crTier{font-family:'Cinzel',serif;font-size:20px;color:var(--gold);margin-bottom:8px}
.crGold{font-size:16px;color:#f0cf6e;margin-bottom:14px}
.crCards{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.crCard{position:relative;width:120px;padding:12px 10px;border-radius:10px;background:rgba(20,16,28,.7);border:1px solid var(--gold-d)}
.crCard.rar-gold{border-color:#f0cf6e;box-shadow:0 0 14px rgba(240,207,110,.35)}
.crCard.rar-rhodium{border-color:#9fe8ff;box-shadow:0 0 14px rgba(159,232,255,.4)}
.crCardN{font-family:'Cinzel',serif;color:#fff7dc;font-size:14px;line-height:1.15}
.crCardR{font-size:10px;color:#cdbb8e;text-transform:uppercase;letter-spacing:.06em;margin-top:4px}
/* Shop "Forge a specific card" — show the FULL card render, not a text tile */
.crForgeGrid{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;max-width:1100px;margin:14px auto 0}
.crForge{display:flex;flex-direction:column;align-items:center;gap:8px}
.crForge .cdx{cursor:pointer}
.crForgeMeta{font-size:10px;color:#cdbb8e;text-transform:uppercase;letter-spacing:.05em;text-align:center;max-width:177px}
.crNew{position:absolute;top:-8px;right:-8px;background:#43d188;color:#06210f;font-weight:900;font-size:10px;padding:2px 7px;border-radius:10px;font-family:'Cinzel',serif}
.crNone{color:#cdbb8e;font-style:italic;padding:10px}
.crHint{font-size:12px;color:#8a8270;margin-bottom:14px}

/* ===================================================================
   v0.4.1 — BUGFIX & POLISH PASS (2026-06-02)
   Menu click-through, in-game HUD overlaps, deck/collection stat icons,
   mulligan readability, short-screen board sizing, guard/poison feedback.
   =================================================================== */

/* --- MAIN MENU: the decorative title spanned full width and ate every
       click meant for the top-right icons; the info panels (display-only)
       sat over the bottom menu items and blocked Settings/Exit. --- */
#mainMenu .mmTitle{pointer-events:none}
#mainMenu .mmTopIcons{z-index:6}
#mainMenu .mmProfile,#mainMenu .mmQuest,#mainMenu .mmRecord{pointer-events:none}
#mainMenu .menuList{z-index:4}
/* stats/quest panel: move it from the bottom-left (over the menu) to bottom-centre */
#mainMenu .mmQuest{left:50%!important;right:auto!important;transform:translateX(-50%)}

/* --- IN-GAME: God Power button collided with the Hero HP orb.
       Reserve room on the right of the hero pill so they never overlap. --- */
.hero{padding-right:62px}

/* --- IN-GAME: the turn-timer pill sat directly below the enemy deck pile
       on short screens. Move it to the LEFT of the END TURN button. --- */
#turnTimer{top:50%!important;bottom:auto!important;right:calc(100% + 14px)!important;transform:translateY(-50%)}
#turnTimer.crit{animation:ttPulse .62s ease-in-out infinite}

/* --- IN-GAME: UNDO (which grows with the card name) overlapped END TURN.
       Anchor it bottom-left, clear of the right-side column + my deck. --- */
#undoBtn{left:14px!important;right:auto!important;bottom:20px!important;top:auto!important}

/* --- DECK BUILDER / COLLECTION: the owned/in-deck count badges were drawn
       on top of the card's cost + HP stat circles. The top-right corner of
       the card frame is free, so stack both badges there. --- */
.dbIn{top:5px!important;left:auto!important;right:5px!important;bottom:auto!important}
.dbOwn{top:35px!important;right:5px!important;bottom:auto!important;left:auto!important}

/* --- MULLIGAN: the "✕ swap" label was painted over the bottom stat circles.
       Center it with a backdrop so it reads over the (dimmed) art instead. --- */
.mull.swap::before{inset:auto!important;top:50%!important;left:0;right:0;transform:translateY(-50%);
  background:rgba(8,6,14,.72);padding:7px 0;border-radius:6px}

/* --- GUARD / POISON: clearer, animated on-board status (player-feedback request).
       Guards visibly pulse a shield wall; poisoned creatures drip toxic light so the
       player understands the board state at a glance. --- */
.unit.guard .shieldwall{animation:guardWall 1.8s ease-in-out infinite}
@keyframes guardWall{0%,100%{box-shadow:0 0 9px rgba(120,150,255,.3);border-color:rgba(170,190,255,.45)}
  50%{box-shadow:0 0 22px rgba(120,160,255,.7);border-color:rgba(195,215,255,.9)}}
.unit.guard .gLabel{animation:guardLbl 1.8s ease-in-out infinite}
@keyframes guardLbl{0%,100%{box-shadow:0 0 8px rgba(120,200,255,.4)}50%{box-shadow:0 0 16px rgba(150,210,255,.9)}}
.unit.poisoned .inner::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:14px;
  box-shadow:inset 0 -20px 24px -10px rgba(150,40,200,.75);animation:poisonPulse 1.5s ease-in-out infinite}
@keyframes poisonPulse{0%,100%{opacity:.45}50%{opacity:1}}
.unit.poisoned .ph{animation:poisonOrb 1.5s ease-in-out infinite}
@keyframes poisonOrb{0%,100%{box-shadow:0 4px 9px -2px #000,0 0 8px rgba(150,40,200,.5)}
  50%{box-shadow:0 4px 9px -2px #000,0 0 17px rgba(185,60,235,.95)}}

/* --- DECK NAMES are user-typed text. Cinzel is a titling face that renders mixed
       case as uneven small-caps, so ALL-CAPS names looked off. Use the body serif
       so any casing reads naturally in the name input and on the deck tiles. --- */
.dbName,.dtName{font-family:'Spectral',Georgia,serif!important;letter-spacing:.01em}

/* --- IN-GAME: short screens (laptops ~768–860px tall) squeezed the two play
       zones to ~118px while creatures are 174px, so units overflowed DOWN onto
       the hero pill — hiding their ATK/HP orbs behind the hero avatar — and the
       board felt tiny. Reclaim vertical space from the oversized enemy-hand
       padding, the hand tray and hero padding so the zones fit full-size cards. */
@media(max-height:880px){
  #enemyHeroRow{padding-top:52px!important}
  #enemyHand{height:56px;top:4px}
  #enemyHand .ehCard{width:42px;height:56px;margin:0 -8px;border-radius:6px}
  #enemyHand::after{right:-26px;top:17px;font-size:12px}
  .heroRow{padding:3px 10px}
  #hand{min-height:0;padding:6px 8px 10px}
  .card{width:158px;height:222px;margin:0 -12px}
  .card .nm{bottom:60px}.card .race{bottom:48px}.card .txt{bottom:7px}
  .unit{width:114px;height:148px}
  .unit .nm{font-size:11px;bottom:22px}.unit .race{bottom:11px}
  .unit .pa,.unit .ph{width:34px;height:34px;font-size:17px;bottom:-5px}
  .unit .pa{left:-7px}.unit .ph{right:-7px}
  .zone.myZone .unit:not(.guard){margin-top:4px}
  .zone.enemyZone .unit:not(.guard){margin-bottom:4px}
}
@media(max-height:720px){
  #enemyHeroRow{padding-top:46px!important}
  .unit{width:106px;height:144px}
  .unit .pa,.unit .ph{width:32px;height:32px;font-size:16px;bottom:-8px}
  .unit .pa{left:-8px}.unit .ph{right:-8px}
  #hand{min-height:168px}
  .card{width:146px;height:204px}
}

/* ===================================================================
   MOBILE & TOUCH  (2026-06-02) — phones / tablets / small windows.
   The board now auto-fits the screen via GAME.fitZone(); this section
   tunes the hand (scrollable), HUD (no overlap), menus, deck-builder
   and orientation. Kept last so it wins on source order.
   =================================================================== */

/* --- Touch devices: no desktop hover-jump on cards/units (tap to play,
       long-press to read). --- */
@media (hover:none){
  .card:hover{transform:none;margin:0 5px;z-index:auto;box-shadow:0 12px 26px -10px #000}
  .unit:hover{transform:none}
  .mItem:hover,.fac:hover,.deckTile:hover,.cdx:hover,.dbCard:not(.dis):hover{transform:none}
  .btn:hover{transform:none}
}

/* --- Scrollable, tappable hand (portrait & landscape phones). Generous
       vertical padding keeps the mana / atk / hp orbs from clipping when
       the row becomes an x-scroll container. --- */
@media (max-width:760px), (max-height:540px){
  #hand{justify-content:safe center;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    padding:16px 10px 18px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;overscroll-behavior-x:contain}
  #hand::-webkit-scrollbar{display:none}
  #hand .card{margin:0 5px!important;scroll-snap-align:center;flex:0 0 auto}
}

/* --- General narrow screens: menus, scenes, collection, deck-builder. --- */
@media (max-width:760px), (orientation:landscape) and (max-height:540px){
  /* scenes scroll instead of clipping; comfortable top room for the back button */
  .scene{justify-content:flex-start;padding:52px 12px 26px;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .scene h1{font-size:clamp(23px,6.6vw,40px);margin-top:2px}
  .scene .tag{font-size:13px;line-height:1.45;margin-bottom:12px;padding:0 4px}
  .backBtn{top:10px;left:10px;font-size:14px;padding:9px 13px}

  /* faction / play / pvp choosers stack to one column */
  .choose{gap:13px;width:100%}
  .fac{width:100%;max-width:360px;padding:17px 16px}
  .fac .crest{font-size:40px}
  .fac h2{font-size:21px;margin:.15em 0}
  .fac p{font-size:12.5px}
  .hint{font-size:12px;padding:0 8px;max-width:100%}

  /* main menu */
  /* the menu title "ELEMENTALS" overflowed the right edge + collided with the top-right
     icons. #mainMenu .bigTitle (2 selectors) beats a bare .bigTitle, so target it directly;
     shrink to fit 375px and drop it below the icon row. */
  .bigTitle{font-size:clamp(42px,15vw,84px)}
  #mainMenu .bigTitle{font-size:31px;letter-spacing:.03em;white-space:nowrap}
  #mainMenu .mmTitle{top:44px}
  #mainMenu .mmSub{font-size:10px;letter-spacing:.32em}
  #mainMenu .menuList{margin-top:102px}
  #mainMenu .mmSub{font-size:12px;letter-spacing:.4em}
  #mainMenu .mmSub i{width:30px;margin:0 8px}
  .menuList{min-width:0;width:92%;max-width:360px;gap:8px}
  .mItem{font-size:14.5px;padding:12px 16px 12px 18px;letter-spacing:.08em}
  .mItem .mIco{width:26px;height:26px}
  /* decorative side panels would overlap the list / icons on a phone — hide them */
  #mainMenu .mmProfile,#mainMenu .mmRecord,#mainMenu .mmQuest{display:none}
  #mainMenu .mmTopIcons{top:10px;right:10px;gap:6px}
  #mainMenu .mmIcon{width:34px;height:34px}
  .menuFoot{font-size:9.5px;bottom:8px}

  /* collection / codex: tighter grid that fits 3 across. The card faces are
     .cdx.ecard / .cdx.spellCard (2 classes) so they must be targeted directly;
     fill the grid cell and keep the card aspect ratio. */
  #codexGrid{grid-template-columns:repeat(auto-fill,minmax(102px,1fr));gap:10px;padding:4px}
  .cdx.ecard,.cdx.spellCard{width:100%;height:auto;aspect-ratio:59/80}
  .cdx.ecard .ecf-name{font-size:11px}.cdx.ecard .ecf-type{font-size:7px}.cdx.ecard .ecf-kw{font-size:10px}
  .cdx.ecard .ecf-cost,.cdx.ecard .ecf-atk,.cdx.ecard .ecf-hp{width:28px;height:28px;font-size:14px}
  .codexFilter{flex-wrap:wrap;gap:7px;justify-content:center}
  .filt{font-size:11px;padding:6px 11px}

  /* deck-builder: stack the deck panel under a self-scrolling card grid so
     the deck list stays visible while you browse (count is in the header). */
  #deckBuild{padding:10px 12px 0;overflow:hidden}
  .dbBody{flex-direction:column;gap:8px;overflow:hidden;min-height:0}
  .dbGrid{flex:1 1 auto;min-height:0;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:11px 9px;padding:4px 2px 16px}
  .dbCard{width:auto}
  .dbCard .cdx.ecard,.dbCard .cdx.spellCard{width:100%;height:auto;aspect-ratio:59/80}
  .dbDeck{width:100%;flex:0 0 auto;max-height:30vh;margin-bottom:8px}
  .dbHead{flex-wrap:wrap;gap:9px}
  .dbName{max-width:none;flex:1 1 60%}
  .dbHint{display:none}

  /* deck list / shop / leaderboard */
  .deckList{gap:12px}
  .deckTile{width:46%;min-width:150px}
  .shopGrid{grid-template-columns:1fr;gap:14px}

  /* mulligan: let the opening hand wrap and stay readable */
  #mullCards{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:100%}

  /* game-over panel */
  #over h1{font-size:clamp(40px,13vw,72px)}
  #over p{font-size:13px;padding:0 14px}

  /* tutorial coach (shown to every new player) — never let it exceed the
     viewport, and give the Skip/Back/Next buttons real tap targets */
  #tutCoach{max-width:min(92vw,320px);padding:13px 15px}
  #tutCoach .tcTitle{font-size:16px}
  #tutCoach .tcText{font-size:12.5px}
  #tutCoach .tcBtns button{padding:10px 14px;font-size:12.5px}

  /* settings: full-width controls, comfy rows */
  .setBlock{width:94%;max-width:460px}
  .setBlock label{font-size:13.5px}
  .setCredits{width:94%;max-width:460px}
}

/* --- PORTRAIT phones: corner the in-battle controls so the board keeps
       (almost) the full width. --- */
@media (orientation:portrait) and (max-width:600px){
  /* shorter hero pills free vertical room */
  .heroRow{padding:4px 8px!important}
  .hero{min-width:0;padding:5px 56px 5px 6px;gap:9px}
  .hero .av{width:46px;height:46px}
  .hero .nm{font-size:14px}.hero .fc{font-size:10px}
  /* my hero pill hugs the left + is capped so the corner END-TURN button
     never covers its HP / god-power */
  #myHeroRow{justify-content:flex-start;padding-left:10px!important}
  #myHeroRow .hero{max-width:calc(100% - 122px)}

  /* END TURN → bottom-right corner of the table (just above the hand) */
  #hud{right:6px;bottom:6px;top:auto;transform:none}
  #endBtn{writing-mode:horizontal-tb;font-size:12.5px;padding:11px 15px;letter-spacing:.06em;border-radius:30px}
  /* countdown sits ABOVE the corner END-TURN button (was overlapping the hero's
     god-power + HP when placed to its left) */
  #turnTimer{right:4px!important;left:auto!important;top:auto!important;bottom:calc(100% + 7px)!important;transform:none!important}
  /* timer + decorative piles are redundant on a phone (count shown on the hero) */
  #hourglass{display:none!important}
  #myDeck,#enemyDeck{display:none}
  /* UNDO → bottom-left corner, mirrors END TURN */
  #undoBtn{left:8px!important;right:auto!important;bottom:8px!important;top:auto!important;font-size:12px;padding:9px 13px}
  /* top-left utility stack stays clear of the centred enemy hand */
  #muteBtn{left:8px;top:8px;width:36px;height:36px}
  #gameMenu{left:8px;top:50px;width:36px;height:36px}
  #tutBtn{left:50px;top:8px;width:34px;height:34px}
  #hint{font-size:11px;max-width:84vw;top:6px}
  #rope{bottom:62px}
}

/* --- LANDSCAPE phones / very short windows: keep the desktop-style side
       rail for END TURN + timer, but compact everything vertically (height
       is the binding constraint at ~375px) so the two board rows get room. --- */
@media (orientation:landscape) and (max-height:540px){
  /* landscape MENU: all 8 items must fit a ~375px-tall screen — compact them, drop the
     footer, and override the portrait title push (was margin-top:102px → would overflow). */
  #mainMenu{justify-content:flex-start!important;overflow-y:auto!important}
  #mainMenu .bigTitle{font-size:20px}
  #mainMenu .mmTitle{top:1px}
  #mainMenu .mmSub{font-size:7.5px;margin-top:0}
  #mainMenu .menuList{margin:46px auto 6px!important;gap:3px;width:80%;max-width:480px}
  #mainMenu .menuList .mItem{padding:4px 16px!important;font-size:12px!important;letter-spacing:.05em!important}
  #mainMenu .menuList .mItem .mIco{width:18px!important;height:18px!important}
  .menuFoot{display:none}
  .scene{padding-top:38px}
  .scene h1{font-size:23px;margin:2px 0}
  .scene .tag{font-size:10.5px;margin-bottom:6px}
  .choose{flex-direction:row;gap:12px}
  .fac{max-width:300px;padding:12px 14px}
  .fac .crest{font-size:30px}.fac h2{font-size:18px}.fac p{font-size:11px}
  /* battlefield watermark also hid only at max-width:760 → kill it here too */
  #bfBg .bfLogo{display:none!important}

  .heroRow{padding:0 8px!important}
  #enemyHeroRow{padding-top:20px!important}
  .hero{min-width:0;padding:2px 68px 2px 3px;gap:6px}
  .hero .av{width:30px;height:30px;border-width:2px}
  .hero .meta{gap:0;line-height:1.05}
  .hero .nm{font-size:11px}.hero .fc{font-size:7.5px;letter-spacing:.05em}
  .hero .manaBar{gap:2px;margin-top:1px}
  .crystal{width:6px;height:10px}
  .heroHP{font-size:18px;right:8px}
  .powerBtn{width:28px;height:28px;font-size:13px;margin-left:6px}
  /* enemy hand cardbacks: smaller so the enemy hero row stays short */
  #enemyHand{height:26px!important;top:1px!important}
  #enemyHand .ehCard{width:20px!important;height:26px!important;margin:0 -4px!important}
  #enemyHand::after{top:5px!important;font-size:10px!important}
  /* compact hand */
  #hand{min-height:0;padding:5px 10px 6px}
  .card.ecard,.card.spellCard{width:90px;height:124px}
  .ecf-name{font-size:9px}.ecf-type{font-size:6px;margin:1px 0 1px}.ecf-kw{font-size:8px;min-height:9px}
  .ecf-cost,.ecf-atk,.ecf-hp{width:24px;height:24px;font-size:12px;border-width:2px}
  #endBtn{padding:12px 10px;font-size:11px}
  #myDeck,#enemyDeck{display:none}
  #hourglass{width:32px;height:44px;left:10px}
  #hint{font-size:10.5px;top:2px;padding:4px 10px}
  #undoBtn{bottom:auto!important;top:5px!important;right:52px!important;left:auto!important;font-size:11px;padding:7px 10px}
}

/* ===================================================================
   MOBILE polish pass 2 (2026-06-02) — readability + battle composition,
   from real-device feedback ("too dark, text unreadable, empty board,
   giant logo watermark"). Screenshots time out in preview, so these are
   high-confidence changes verified on device.
   =================================================================== */
@media (max-width:760px), (orientation:landscape) and (max-height:540px){
  /* (B) The huge "ELEMENTALS · PVP" watermark read as placeholder text in
     the empty board on a phone — remove it. */
  #bfBg .bfLogo{display:none!important}

  /* (B) A new player's first battle runs the tutorial, whose spotlight dimmed
     the WHOLE screen to 78% black → looked broken. Lighten the dim. */
  #tutSpot{box-shadow:0 0 0 9999px rgba(10,8,16,.55)!important}

  /* (A/B) Lift the dark, empty board out of near-black with a soft light wash
     on each zone (keeps the moody theme, kills the "black void" feel). */
  .zone{background:radial-gradient(150% 105% at 50% 50%,rgba(150,162,186,.10),rgba(150,162,186,.03) 46%,transparent 74%)}
  #midline{opacity:.95}

  /* (A) Hero text was small gold-on-dark — brighter + a touch bigger. */
  .hero .nm{color:#ffe9a8}
  .hero .fc{color:#cbb992}

  /* (A) Board units: the race sub-label is illegible once the board is
     fit-scaled — drop it; brighten the name; enlarge the ATK/HP orbs so the
     numbers stay legible after scaling (stats are what matter at a glance). */
  .unit .race{display:none}
  .unit .nm{font-size:12px;bottom:16px;color:#fff3c8;text-shadow:0 1px 5px #000,0 0 2px #000}
  .unit .pa,.unit .ph{width:36px;height:36px;font-size:18px}
  .unit .pa{left:-9px;bottom:-9px}.unit .ph{right:-9px;bottom:-9px}

  /* (B) targeting hint was a huge text box covering the board — make it a slim
     full-width bar at the very top (the JS also shortens the text on mobile). */
  #hint{left:8px!important;right:8px!important;transform:none!important;max-width:none;width:auto;
    justify-content:space-between;font-size:11px;top:4px;padding:7px 12px;gap:8px;line-height:1.2;border-radius:16px}
  #hint.show{animation:hintGlow 1.1s ease-in-out infinite}
  #hint span{font-weight:600;text-align:left;flex:1}
  #hint button{padding:6px 12px;font-size:10.5px;flex:0 0 auto;border-radius:14px;white-space:nowrap}
}
/* portrait phones have width to spare on the hero pill → bigger hero name */
@media (orientation:portrait) and (max-width:600px){
  .hero .nm{font-size:16px}
  .hero .fc{font-size:11px}
  .hero .av{width:48px;height:48px}
}

/* ===================================================================
   MOBILE BATTLE POLISH (game-mobile, 2026-06-03) — make the battle look
   like a real arena instead of a flat empty void. Portrait phones.
   =================================================================== */
@media (orientation:portrait) and (max-width:600px){
  /* (1) the enemy hero band was ~122px tall (cardbacks + 52px padding) — top-heavy.
     Shrink the cardbacks so the board breathes. */
  #enemyHeroRow{padding-top:30px!important}
  #enemyHand{height:32px!important;top:3px!important}
  #enemyHand .ehCard{width:25px!important;height:32px!important;margin:0 -5px!important;border-radius:5px}
  #enemyHand::after{top:7px!important;font-size:11px!important}

  /* (2) arena FLOOR — each zone gets a faction-coloured platform glow rising from
     the front line + a faint material hatch, so an empty board reads as a
     battlefield floor, not a black void. */
  .zone.enemyZone{background:
     radial-gradient(120% 105% at 50% 100%, rgba(255,99,66,.20), transparent 72%),
     radial-gradient(165% 80% at 50% 100%, rgba(130,46,32,.26), transparent 86%),
     repeating-linear-gradient(45deg, rgba(255,180,150,.022) 0 2px, transparent 2px 10px)}
  .zone.myZone{background:
     radial-gradient(120% 105% at 50% 0%, rgba(92,222,146,.20), transparent 72%),
     radial-gradient(165% 80% at 50% 0%, rgba(30,104,62,.26), transparent 86%),
     repeating-linear-gradient(135deg, rgba(170,255,200,.022) 0 2px, transparent 2px 10px)}

  /* (2b) hand TRAY — a dark gradient so the hand reads as a held fan with depth,
     not cards floating off the screen edge */
  #hand{background:linear-gradient(180deg, transparent 0%, rgba(8,6,14,.45) 38%, rgba(8,6,14,.82) 100%)}

  /* (3) the FRONT LINE — a glowing seam with a central rune where the armies clash */
  #midline{height:2px;background:linear-gradient(90deg,transparent 6%,rgba(240,207,110,.5),transparent 94%);
    box-shadow:0 0 18px rgba(240,207,110,.35);opacity:1}
  #midline::after{content:'';position:absolute;left:50%;top:50%;width:46px;height:46px;
    transform:translate(-50%,-50%);border:1px solid rgba(240,207,110,.4);border-radius:50%;
    background:radial-gradient(circle,rgba(240,207,110,.14),transparent 68%);
    box-shadow:0 0 14px rgba(240,207,110,.25),inset 0 0 10px rgba(240,207,110,.15)}

  /* (4) frame the whole battlefield with a soft inner vignette for depth */
  #table::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
    box-shadow:inset 0 0 70px 8px rgba(4,3,8,.55)}
}

/* ===================================================================
   MOBILE GAMEPLAY-UX (game-mobile, 2026-06-03) — the long-press card
   popup buried the cards + wouldn't dismiss; mulligan selection unclear.
   =================================================================== */
@media (max-width:760px), (orientation:landscape) and (max-height:540px){
  /* shrink the card-detail popup (was ~392px ≈ whole screen). It's pointer-events:none
     and now tap-anywhere-dismisses (JS), so it no longer buries the cards you're picking. */
  #tip{max-width:min(84vw,290px)!important;padding:9px 10px;font-size:11px;gap:9px}
  #tip .tipImg{flex:0 0 62px!important;width:62px!important;height:62px!important}
  #tip .tipBody{max-width:none}
  #tip b{font-size:12.5px}
  #tip .tipSub{font-size:9px;margin:1px 0 5px}
  #tip .tipStats{gap:5px;margin-bottom:5px}
  #tip .tipStats .ts{font-size:13px;padding:3px 7px;min-width:26px}
  #tip .tipAbil{font-size:10.5px;margin-top:4px}
  #tip .tipKw{font-size:9.5px}
  #tip .tipImg.tipSpell{font-size:34px}
}
/* mulligan: make "marked to swap" unmistakable on a phone */
@media (orientation:portrait) and (max-width:600px){
  #mullCards{gap:12px;margin:10px 0 14px}
  .mull.swap{filter:saturate(.3) brightness(.42)}
  .mull.swap::after{content:'';position:absolute;inset:5px;border-radius:12px;border:3px solid #ff5a5a;
    box-shadow:0 0 16px rgba(255,70,70,.6),inset 0 0 20px rgba(255,40,40,.28);pointer-events:none;z-index:2}
  .mull.swap::before{font-size:13px!important;bottom:0!important;padding:3px 0;
    background:linear-gradient(180deg,transparent,rgba(150,12,12,.85));border-radius:0 0 11px 11px;z-index:3}
}

/* ===================================================================
   PRESS-AND-HOLD "PEEK" (game-mobile) — genre standard (Hearthstone /
   Legends of Runeterra): hold a card → big centred detail on a dimmed
   backdrop; lift the finger → it's gone. Cards take visual precedence.
   =================================================================== */
body.peeking::after{content:'';position:fixed;inset:0;z-index:120;background:rgba(4,3,10,.76);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);pointer-events:none;animation:peekFade .14s ease-out}
@keyframes peekFade{from{opacity:0}}
#tip.tipBig{position:fixed!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;
  z-index:131!important;flex-direction:column!important;align-items:center!important;text-align:center;
  width:min(80vw,330px)!important;max-width:min(80vw,330px)!important;max-height:88vh;overflow:auto;
  padding:16px 18px!important;gap:5px!important;font-size:13px!important;
  box-shadow:0 30px 80px -14px #000,0 0 0 1px rgba(0,0,0,.5),0 0 44px rgba(240,207,110,.14);
  animation:peekPop .16s cubic-bezier(.2,.9,.3,1.2)}
@keyframes peekPop{from{opacity:0;transform:translate(-50%,-50%) scale(.9)}}
#tip.tipBig .tipImg{flex:0 0 auto!important;width:174px!important;height:174px!important;margin:0 auto 6px}
#tip.tipBig .tipImg.tipSpell{display:flex;align-items:center;justify-content:center;font-size:88px!important}
#tip.tipBig .tipBody{max-width:100%!important;text-align:center}
#tip.tipBig b{font-size:18px!important}
#tip.tipBig .tipSub{font-size:11px!important;margin:2px 0 8px;letter-spacing:.6px}
#tip.tipBig .tipStats{justify-content:center!important;gap:10px!important;margin-bottom:8px}
#tip.tipBig .tipStats .ts{font-size:17px!important;padding:5px 12px!important;min-width:38px!important}
#tip.tipBig .tipStats .ts i{font-size:9px!important}
#tip.tipBig .tipAbil{font-size:13px!important;margin-top:6px;line-height:1.4}
#tip.tipBig .tipKw{font-size:12px!important;line-height:1.4}
#tip.tipBig .tipFc{justify-content:center}


/* ==========================================================================
   AAA COMBAT TEXT (v0.11) — damage numbers / heals / SLAIN
   --------------------------------------------------------------------------
   PLACEMENT: replaces the old "big manga damage numbers" block in
   game/css/style.css (lines ~269-274):

       /* big manga damage numbers *​/
       .float{font-family:'Bangers',cursive!important;font-weight:400;-webkit-text-stroke:2px #000;paint-order:stroke fill;letter-spacing:.02em}
       .float.dmg{color:#ffe14a;font-size:46px;text-shadow:0 0 18px rgba(255,90,40,.9),0 3px 0 #000}
       .float.heal{color:#7dff9a;font-size:40px;text-shadow:0 0 16px rgba(40,255,120,.8),0 3px 0 #000}
       .float.miss{color:#cdb6ff;font-size:26px;-webkit-text-stroke:1.5px #000}
       .float.big{font-size:64px}

   (Also safe to APPEND at the very END of style.css without deleting that
   block — every rule here out-cascades it — but deleting keeps things clean.
   The older .float base at line ~214 can stay either way.)

   JS CONTRACT (new floatOn in game.js): each float gets
     .float .<kind: dmg|heal|miss> [.big]
     .fl-sm | .fl-big | .fl-crit | .fl-slain | .fl-heal [.fl-big] | .fl-info
     .fl-a | .fl-b              (alternating pop variant)
     data-t="<text>"            (drives the gradient + stroke underlayer)
     style="--fldur:<ms>"       (duration, pre-scaled by GAME._t)
   Degrades: without the JS patch (no data-t / no .fl-*) the base .float rule
   below still renders a readable Cinzel number; without this CSS the JS falls
   back to its old WAAPI pop. No new assets; Cinzel 900 already loaded.
   ========================================================================== */

/* ---- base: Cinzel 900, armored with thick dark stroke + shadow stack so
        numbers stay readable on top of any particle storm ---- */
.float{
  position:absolute;z-index:62;pointer-events:none;white-space:nowrap;
  font-family:'Cinzel',serif!important;font-weight:900;font-style:normal;
  font-size:32px;line-height:1;letter-spacing:.01em;
  transform-origin:50% 62%;
  will-change:transform,opacity;
  paint-order:stroke fill;
  -webkit-text-stroke:.045em rgba(16,8,3,.92);
  /* shadow stack = 4-offset faux-stroke (covers non-WebKit) + drop + soft glow */
  text-shadow:
    0 .06em 0 #160a04,0 -.04em 0 #160a04,.05em 0 0 #160a04,-.05em 0 0 #160a04,
    0 .1em .3em rgba(0,0,0,.85),
    0 0 .5em currentColor;
}
/* solid fills — these are ALSO the fallback when background-clip:text is unsupported */
.float.dmg{color:#ffcf4d}
.float.heal{color:#7dff9a}
.float.miss{color:#cdb6ff}

/* ---- the four damage tiers ---- */
.float.fl-sm{font-size:32px}                                   /* 1-3 dmg */
.float.fl-big{font-size:50px;letter-spacing:.015em;            /* 4-6 dmg / hero hits */
  -webkit-text-stroke:.05em rgba(16,8,3,.95)}
.float.fl-crit{font-size:78px;letter-spacing:.02em;            /* 7+ dmg — the money shot */
  font-style:italic;font-style:oblique 9deg;                   /* slight skew (Cinzel synthesizes) */
  color:#fff6e2;-webkit-text-stroke:.05em rgba(20,8,2,.95);
  text-shadow:
    0 .05em 0 #1a0c04,0 -.03em 0 #1a0c04,.04em 0 0 #1a0c04,-.04em 0 0 #1a0c04,
    -.06em 0 0 rgba(255,46,46,.5),.06em 0 0 rgba(64,140,255,.38), /* chromatic split */
    0 .08em .26em rgba(0,0,0,.9),
    0 0 .34em rgba(255,170,60,.95),0 0 .9em rgba(255,90,20,.55)}  /* white-hot core, orange bloom */
.float.fl-slain{font-size:54px;letter-spacing:.07em;color:#ff4a4a; /* ☠ SLAIN / DEADLY / DESTROYED */
  -webkit-text-stroke:.05em rgba(26,4,6,.95);
  text-shadow:
    0 .06em 0 #1c0507,0 -.04em 0 #1c0507,.05em 0 0 #1c0507,-.05em 0 0 #1c0507,
    0 .12em .3em rgba(0,0,0,.95),
    0 0 .5em rgba(255,60,60,.85),0 0 1em rgba(190,16,16,.5)}
.float.fl-heal{font-size:36px;color:#8dffae;letter-spacing:.02em;
  text-shadow:
    0 .06em 0 #04160b,0 -.04em 0 #04160b,.05em 0 0 #04160b,-.05em 0 0 #04160b,
    0 .1em .3em rgba(0,0,0,.8),
    0 0 .55em rgba(60,255,140,.75)}
.float.fl-heal.fl-big{font-size:46px}                           /* 6+ heals get louder */
/* status/info text (miss, FROZEN, POISONED, PIERCE…) — quieter, still armored */
.float.fl-info{font-size:22px;-webkit-text-stroke:.04em rgba(10,6,16,.9);
  text-shadow:0 .05em 0 #0c0714,0 -.03em 0 #0c0714,.04em 0 0 #0c0714,-.04em 0 0 #0c0714,
    0 .1em .3em rgba(0,0,0,.85),0 0 .5em currentColor}

/* ---- warm gradient fills where supported (solid colors above = fallback).
        background-clip:text makes the glyphs transparent, so text-shadow would
        bleed THROUGH the fill — the stroke+shadow armor therefore moves to a
        ::before underlayer that re-renders the same text via attr(data-t). ---- */
/* gradient-fill via background-clip:text REMOVED: Chrome kills the clipped background when the element is layer-promoted (will-change + transform animation) -> glyphs went invisible. Solid fills + the stroke/shadow armor below are the cross-browser path. */

/* ---- crit/slain backplate: soft radial bloom behind the glyphs (fades/scales
        with the parent's animation; z-index -2 sits under the ::before stroke) ---- */
.float.fl-crit::after,.float.fl-slain::after{
  content:'';position:absolute;left:50%;top:50%;z-index:-2;
  width:150%;height:135%;min-width:1.7em;transform:translate(-50%,-50%);
  border-radius:50%;filter:blur(3px);
  background:radial-gradient(closest-side,rgba(255,166,64,.5),rgba(255,96,28,.2) 55%,transparent 78%)}
.float.fl-slain::after{
  background:radial-gradient(closest-side,rgba(255,70,70,.45),rgba(180,20,20,.2) 55%,transparent 78%)}

/* ---- choreography: pop 0.3→1.25→1 overshoot w/ rotation → hold ≈40% of the
        duration (~500ms) → drift up + fade. Two alternating variants (fl-a/fl-b)
        so back-to-back numbers don't read as copy-paste. Duration via --fldur
        (set inline by floatOn, pre-scaled by the user's animation-speed). ---- */
.float.fl-a{animation:flPopA var(--fldur,1.15s) cubic-bezier(.22,.9,.28,1) both}
.float.fl-b{animation:flPopB var(--fldur,1.15s) cubic-bezier(.22,.9,.28,1) both}
.float.fl-crit.fl-a{animation-name:flCritA}
.float.fl-crit.fl-b{animation-name:flCritB}
.float.fl-slain.fl-a,.float.fl-slain.fl-b{animation-name:flSlam}

@keyframes flPopA{
  0%{opacity:0;transform:translateY(18px) scale(.3) rotate(-8deg)}
  11%{opacity:1;transform:translateY(-2px) scale(1.25) rotate(-4deg)}
  20%{transform:translateY(-6px) scale(1) rotate(-2deg)}
  62%{opacity:1;transform:translateY(-14px) scale(1) rotate(-2deg)}
  100%{opacity:0;transform:translateY(-76px) scale(.88) rotate(-1deg)}
}
@keyframes flPopB{
  0%{opacity:0;transform:translateY(18px) scale(.3) rotate(8deg)}
  11%{opacity:1;transform:translateY(-2px) scale(1.25) rotate(4deg)}
  20%{transform:translateY(-6px) scale(1) rotate(2deg)}
  62%{opacity:1;transform:translateY(-14px) scale(1) rotate(2deg)}
  100%{opacity:0;transform:translateY(-76px) scale(.88) rotate(1deg)}
}
/* crit: harder overshoot + a punch-bounce before settling */
@keyframes flCritA{
  0%{opacity:0;transform:translateY(24px) scale(.2) rotate(-10deg)}
  9%{opacity:1;transform:translateY(-4px) scale(1.45) rotate(-5deg)}
  16%{transform:translateY(-2px) scale(.94) rotate(-3deg)}
  24%{transform:translateY(-5px) scale(1.08) rotate(-3deg)}
  32%{transform:translateY(-6px) scale(1) rotate(-3deg)}
  68%{opacity:1;transform:translateY(-12px) scale(1) rotate(-3deg)}
  100%{opacity:0;transform:translateY(-92px) scale(.9) rotate(-2deg)}
}
@keyframes flCritB{
  0%{opacity:0;transform:translateY(24px) scale(.2) rotate(10deg)}
  9%{opacity:1;transform:translateY(-4px) scale(1.45) rotate(5deg)}
  16%{transform:translateY(-2px) scale(.94) rotate(3deg)}
  24%{transform:translateY(-5px) scale(1.08) rotate(3deg)}
  32%{transform:translateY(-6px) scale(1) rotate(3deg)}
  68%{opacity:1;transform:translateY(-12px) scale(1) rotate(3deg)}
  100%{opacity:0;transform:translateY(-92px) scale(.9) rotate(2deg)}
}
/* SLAIN: slams DOWN onto the corpse, then lifts away */
@keyframes flSlam{
  0%{opacity:0;transform:translateY(-36px) scale(1.85)}
  13%{opacity:1;transform:translateY(2px) scale(.96)}
  22%{transform:translateY(0) scale(1.05)}
  30%{transform:translateY(0) scale(1)}
  72%{opacity:1;transform:translateY(-6px) scale(1)}
  100%{opacity:0;transform:translateY(-54px) scale(.94)}
}

/* ---- phones: keep the drama, shrink the type ---- */
@media(max-width:600px){
  .float,.float.fl-sm{font-size:25px}
  .float.fl-big{font-size:38px}
  .float.fl-crit{font-size:56px}
  .float.fl-slain{font-size:40px}
  .float.fl-heal{font-size:28px}
  .float.fl-heal.fl-big{font-size:34px}
  .float.fl-info{font-size:17px}
}

/* ===== v0.13 polish: tilt/shine/parallax ===== */
/* Desktop-only finishers (polish.js bails on pointer:coarse; this media query
   keeps the CSS off touch too). The tilt transform extension lives IN the
   original .card:hover rule above (rotateX/rotateY of --ty/--tx, default 0deg
   = inert), so the later @media(hover:none){.card:hover{transform:none}}
   still neutralizes hover on touch devices exactly as before. */
@media (hover:hover) and (pointer:fine){
  #hand{perspective:900px}
  #hand .card:hover::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,20%),rgba(255,255,255,.16),transparent 55%)}
  /* menu parallax: the #mainMenu background is a 5-layer stack — ONLY the
     photo layer (1st) moves via --par-x/--par-y; the 4 gradient layers are
     box-sized, so 50% 50% is a no-op for them */
  #mainMenu{background-position:calc(50% + var(--par-x,0px)) calc(50% + var(--par-y,0px)),50% 50%,50% 50%,50% 50%,50% 50%}
  /* the rune ring counter-drifts: EXTENDS its translateX(-50%) base (its
     mmRuneBreath animation only touches box-shadow/opacity, never transform) */
  #mainMenu .mmRune{transform:translateX(calc(-50% - var(--par-x,0px)*.35)) translateY(calc(var(--par-y,0px)*-.35))}
}
body.reduceMotion #mainMenu{--par-x:0px;--par-y:0px}
body.reduceMotion #hand .card:hover::after{content:none}

/* ===== v0.14: hero-power cast moment + always-visible shield pulse ===== */
.hero.powerCast{animation:powerCast .95s cubic-bezier(.2,.8,.3,1)}
@keyframes powerCast{0%{filter:brightness(1)}14%{filter:brightness(2.15) saturate(1.5);outline:3px solid #ffd86b;outline-offset:3px}48%{filter:brightness(1.4);outline:2px solid rgba(255,216,107,.6);outline-offset:6px}100%{filter:brightness(1);outline:0 solid transparent}}
/* a unit still holding its Shield PULSES gold — playtesters couldn't tell why hits got "blocked" */
.unit.shield .inner{animation:shieldIdle 1.9s ease-in-out infinite}
@keyframes shieldIdle{0%,100%{box-shadow:0 0 0 3px #ffe79a,0 0 16px rgba(255,231,154,.65),inset 0 0 0 2px #000}50%{box-shadow:0 0 0 4px #fff3c8,0 0 34px rgba(255,231,154,1),inset 0 0 0 2px #000}}
body.reduceMotion .unit.shield .inner{animation:none}
body.reduceMotion .hero.powerCast{animation:none}
/* opponent's mirrored turn timer (PvP): same pill, hostile tint */
#turnTimer.foe{color:#ffb0b8;border-color:#c2364a;background:linear-gradient(180deg,rgba(40,14,20,.96),rgba(16,6,10,.96));box-shadow:0 7px 20px -6px #000,0 0 16px rgba(255,74,95,.4)}
#turnTimer.foe.warn{color:#ffd98a;border-color:#f0a93e}
#turnTimer.foe.crit{color:#ff7a6a;border-color:#ff3a2e;animation:ttPulse .62s ease-in-out infinite}