/* ================================================================
   DECK & DRAGONS — styles
   ================================================================ */
:root{
  --sky1:#070914; --sky2:#131a33; --sky3:#22284d; --sky4:#3a3163; --sky5:#584a7a;
  --ground:#141021; --ground-dark:#0a0714;
  --torch:#ff9d3c; --ember:#e05a2b;
  --mana:#5aa7e8; --poison:#7ec44a; --parchment:#f3e3c2;
  --blood:#a72c2c; --gold:#e8b93b; --steel:#aab6c8;
  --ink:#241508; --paper:#f3e3c2; --paper-dark:#e2c896;
  --card-w: 170px; --card-h: 244px;
  font-size:16px;
}
*{box-sizing:border-box; margin:0; padding:0; user-select:none; -webkit-user-select:none;}
html,body{height:100%; overflow:hidden;}
body{
  font-family:'Alegreya', Georgia, serif;
  color:var(--paper);
  background:#070914;
}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
input{font-family:inherit;}
img.px{image-rendering:pixelated; image-rendering:crisp-edges;}
/* never let the browser start a native image drag — it hijacks card drags */
img{-webkit-user-drag:none; user-drag:none;}
/* card art & text are grab-through: a drag started anywhere on a card grabs the card */
.card *{pointer-events:none;}

/* ============ BACKDROP ============ */
#world{position:fixed; inset:0; overflow:hidden;
  background:linear-gradient(to bottom,
    var(--sky1) 0%, var(--sky2) 34%, var(--sky3) 56%, var(--sky4) 72%, var(--sky5) 80%,
    var(--ground) 80.2%, var(--ground-dark) 100%);
}
/* painted pixel-art vista over the gradient (gradient stays as loading fallback) */
#world::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:url(../assets/ui/bg-world.png) center bottom / cover no-repeat;
  image-rendering:pixelated;
}
/* the painted scene brings its own mountains & castle */
.peak, .castle{display:none;}
#moon{position:absolute; left:71%; top:16%; width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #fdf6e0, #d8d2ba 55%, #b8b2a0);
  box-shadow:0 0 60px 22px rgba(240,232,200,.22), 0 0 140px 60px rgba(200,200,240,.1);
  animation:moonpulse 11s ease-in-out infinite; pointer-events:none;
}
#moon::after{content:''; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 66% 30%, transparent 40%, rgba(150,140,120,.35) 41%, transparent 42%),
             radial-gradient(circle at 30% 62%, transparent 22%, rgba(150,140,120,.3) 23%, transparent 25%),
             radial-gradient(circle at 58% 70%, transparent 14%, rgba(150,140,120,.28) 15%, transparent 17%);}
@keyframes moonpulse{0%,100%{transform:scale(1)} 50%{transform:scale(1.03)}}
.star{position:absolute; border-radius:50%; background:#e8ecff; pointer-events:none;
  animation:twinkle ease-in-out infinite;}
@keyframes twinkle{0%,100%{opacity:.2} 50%{opacity:.9}}
.peak{position:absolute; bottom:20%; pointer-events:none;}
.castle{position:absolute; bottom:20%; left:8%; width:190px; height:170px; opacity:.9; pointer-events:none;}
#horizon-glow{position:absolute; left:0; right:0; top:74%; height:9%;
  background:linear-gradient(to bottom, rgba(120,110,180,.28), transparent); pointer-events:none;}
#dust{position:fixed; inset:0; pointer-events:none; z-index:3;}
.mote{position:absolute; border-radius:50%; background:rgba(170,230,140,.6);
  box-shadow:0 0 6px 2px rgba(170,230,140,.35);
  animation:drift linear infinite;}
@keyframes drift{ from{transform:translate(0,0)} to{transform:translate(var(--dx), var(--dy))} }
#grain{position:fixed; inset:-50%; z-index:60; pointer-events:none; opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 10%{transform:translate(-5%,-8%)} 20%{transform:translate(3%,6%)}
  30%{transform:translate(-7%,4%)} 40%{transform:translate(6%,-6%)} 50%{transform:translate(-4%,7%)}
  60%{transform:translate(7%,2%)} 70%{transform:translate(-6%,-5%)} 80%{transform:translate(2%,8%)} 90%{transform:translate(-8%,-3%)}
}
#vignette{position:fixed; inset:0; z-index:59; pointer-events:none;
  box-shadow:inset 0 0 24vmin rgba(2,2,10,.9);}

/* ============ SCREENS ============ */
.screen{position:fixed; inset:0; z-index:10; display:none; flex-direction:column; align-items:center; justify-content:center;}
.screen.on{display:flex;}

/* ---- TITLE ---- */
#title-screen{text-align:center;}
.title-frame{
  padding:40px 60px 34px; position:relative;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(90,120,220,.10), transparent 60%),
    linear-gradient(160deg, rgba(14,12,28,.9), rgba(30,18,40,.9));
  border:3px double var(--gold); border-radius:10px;
  box-shadow:0 30px 80px rgba(0,0,0,.7), inset 0 0 60px rgba(0,0,0,.6);
  animation:rise .9s cubic-bezier(.2,.9,.3,1) both;
}
.title-frame::before,.title-frame::after{
  content:'✦'; position:absolute; color:var(--gold); font-size:20px; top:12px;
}
.title-frame::before{left:16px} .title-frame::after{right:16px}
.overline{font-family:'Alegreya SC', serif; letter-spacing:.55em; font-size:.8rem; color:var(--gold);
  text-transform:uppercase; animation:fadeup .8s .2s both;}
h1.logo{
  font-family:'MedievalSharp', 'Alegreya SC', serif; font-size:clamp(2.8rem, 8vw, 5.2rem); line-height:1;
  margin:.12em 0 .05em; color:var(--gold);
  text-shadow:0 2px 0 #7a4d10, 0 4px 0 #4a3008, 0 9px 24px rgba(0,0,0,.8), 0 0 44px rgba(232,185,59,.3);
  animation:fadeup .8s .35s both;
}
.subtitle{font-style:italic; font-size:1.12rem; color:var(--paper-dark); animation:fadeup .8s .5s both;}
.title-heroes{margin:14px 0 4px; display:flex; gap:22px; justify-content:center; align-items:flex-end;
  min-height:86px; animation:fadeup .8s .6s both;}
.title-heroes img{height:78px;}
.howto{max-width:460px; margin:12px auto 0; font-size:.94rem; line-height:1.5; color:#cfc4a4;
  animation:fadeup .8s .7s both;}
.howto b{color:var(--gold);}
.mode-row{display:flex; gap:16px; justify-content:center; margin-top:24px; animation:fadeup .8s .85s both;}
.btn-big{
  padding:13px 30px; font-family:'MedievalSharp', serif; font-size:1.12rem; letter-spacing:.05em;
  color:var(--ink); background:linear-gradient(180deg, #ffd45e, var(--gold) 45%, #b98a1c);
  border:2px solid #7a4d10; border-radius:8px;
  box-shadow:0 5px 0 #6d4410, 0 12px 30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .12s, box-shadow .12s, filter .2s;
  position:relative; overflow:hidden;
}
.btn-big::after{
  content:''; position:absolute; top:0; left:-90%; width:55%; height:100%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.4), transparent);
  transform:skewX(-22deg); transition:left .5s ease; pointer-events:none;
}
.btn-big:hover::after{left:135%;}
.btn-big:hover{transform:translateY(-3px) scale(1.03); filter:brightness(1.08);
  box-shadow:0 8px 0 #6d4410, 0 18px 40px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.6);}
.btn-big:active{transform:translateY(2px); box-shadow:0 2px 0 #6d4410, 0 8px 18px rgba(0,0,0,.5);}
.btn-big.alt{background:linear-gradient(180deg, #7fc2f2, var(--mana) 45%, #1d4e8a); border-color:#123458; color:#eaf6ff;
  box-shadow:0 5px 0 #0e2a48, 0 12px 30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.4);}
.btn-big.alt:hover{box-shadow:0 8px 0 #0e2a48, 0 18px 40px rgba(0,0,0,.65);}
.btn-big.alt:active{box-shadow:0 2px 0 #0e2a48, 0 8px 18px rgba(0,0,0,.5);}
@keyframes rise{from{opacity:0; transform:translateY(40px) scale(.96)} to{opacity:1; transform:none}}
@keyframes fadeup{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}

/* ================================================================
   AAA DETAIL PASS
   ================================================================ */
/* battle backdrop: darkened arena with torch pools + ground line */
#battle-screen::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(255,157,60,.10), transparent 32%),
    radial-gradient(ellipse at 80% 80%, rgba(255,157,60,.10), transparent 32%),
    linear-gradient(to bottom, transparent calc(72% - 1px), rgba(232,185,59,.18) 72%, transparent calc(72% + 2px)),
    linear-gradient(to bottom, rgba(7,9,20,.66) 0%, rgba(10,8,16,.5) 52%, rgba(16,10,8,.78) 76%, rgba(8,5,4,.92) 100%);
}
/* professional HP bars: lag ghost + gloss + numbers inside */
.mini-hp.pro{
  position:relative; width:172px; height:16px; margin:0; border-radius:8px;
  border:1.5px solid rgba(226,200,150,.4); background:#170808;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.85), 0 1px 0 rgba(255,235,180,.1);
  overflow:hidden;
}
.mini-hp.pro::after{
  content:''; position:absolute; left:3%; right:3%; top:2px; height:4px; border-radius:4px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.28) 30%, rgba(255,255,255,.28) 70%, transparent);
  pointer-events:none;
}
.mini-ghost{
  position:absolute; top:0; left:0; bottom:0; width:100%; border-radius:6px;
  background:rgba(255,214,110,.5);
  transition:width .9s ease .35s;
}
.mini-hp.pro .mini-fill{
  position:absolute; top:0; left:0; bottom:0; border-radius:6px;
  background:linear-gradient(180deg, #ff8a70, #cf4034 45%, #8e2222);
  transition:width .18s ease;
}
.hp-num{
  position:absolute; inset:0; z-index:2; display:grid; place-items:center;
  font-family:'MedievalSharp',serif; font-size:.72rem; color:#fff;
  text-shadow:0 1px 2px #000, 0 0 5px rgba(0,0,0,.9); letter-spacing:.04em;
  pointer-events:none;
}
/* round & blood-moon tracker */
#round-pill{
  font-family:'Alegreya SC',serif; font-size:.66rem; letter-spacing:.3em;
  color:rgba(226,200,150,.6); margin:-2px 0 4px; text-shadow:0 1px 4px #000;
}
#round-pill .bm-count{color:rgba(255,150,120,.75);}
#round-pill .bm-live{color:#ff6b50; text-shadow:0 0 12px rgba(255,60,40,.7);
  animation:bmpulse 1s ease-in-out infinite;}
/* damage number scaling */
.float-num.big{font-size:2.5rem;}
.float-num.huge{font-size:3.2rem; animation:floatyhuge 1.2s ease-out forwards;}
@keyframes floatyhuge{
  0%{transform:translate(-50%,0) scale(.4) rotate(-4deg); opacity:0}
  12%{transform:translate(-50%,-16px) scale(1.45) rotate(2deg); opacity:1}
  22%{transform:translate(-50%,-18px) scale(1.15);}
  100%{transform:translate(-50%,-110px) scale(1); opacity:0}
}
/* pain vignette on heavy hits */
#pain-vignette{position:fixed; inset:0; z-index:57; pointer-events:none; opacity:0;
  box-shadow:inset 0 0 18vmin rgba(180,20,10,.55);}
#pain-vignette.show{animation:painflash .5s ease-out;}
@keyframes painflash{0%{opacity:0} 15%{opacity:1} 100%{opacity:0}}
/* HUD relic sockets */
#relic-bar img{
  height:30px; padding:3px; border-radius:8px;
  background:linear-gradient(180deg, rgba(50,36,18,.75), rgba(18,12,7,.9));
  border:1px solid rgba(232,185,59,.3);
  box-shadow:inset 0 1px 0 rgba(255,235,180,.12), 0 2px 5px rgba(0,0,0,.45);
}
#relic-bar img:hover{border-color:var(--gold); box-shadow:inset 0 1px 0 rgba(255,235,180,.2), 0 0 12px rgba(232,185,59,.4);}
/* overlay titles get the gem divider */
.ov-title{
  padding-bottom:16px;
  background:url(../assets/ui/divider.png) bottom center/190px 14px no-repeat;
  image-rendering:pixelated;
}
/* victory & defeat: rotating god-rays behind the emblem */
#victory-overlay .ov-icon, #gameover-overlay .ov-icon{position:relative; z-index:1; height:86px;}
#victory-overlay::before, #gameover-overlay::before{
  content:''; position:absolute; top:14%; left:50%; width:340px; height:340px;
  transform:translateX(-50%); pointer-events:none; opacity:.5;
  background:conic-gradient(from 0deg,
    transparent 0deg, rgba(232,185,59,.16) 12deg, transparent 24deg,
    transparent 60deg, rgba(232,185,59,.16) 72deg, transparent 84deg,
    transparent 120deg, rgba(232,185,59,.16) 132deg, transparent 144deg,
    transparent 180deg, rgba(232,185,59,.16) 192deg, transparent 204deg,
    transparent 240deg, rgba(232,185,59,.16) 252deg, transparent 264deg,
    transparent 300deg, rgba(232,185,59,.16) 312deg, transparent 324deg, transparent 360deg);
  border-radius:50%;
  animation:raysspin 22s linear infinite;
  -webkit-mask-image:radial-gradient(circle, #000 30%, transparent 70%);
  mask-image:radial-gradient(circle, #000 30%, transparent 70%);
}
#gameover-overlay::before{
  background:conic-gradient(from 0deg,
    transparent 0deg, rgba(224,90,78,.14) 12deg, transparent 24deg,
    transparent 60deg, rgba(224,90,78,.14) 72deg, transparent 84deg,
    transparent 120deg, rgba(224,90,78,.14) 132deg, transparent 144deg,
    transparent 180deg, rgba(224,90,78,.14) 192deg, transparent 204deg,
    transparent 240deg, rgba(224,90,78,.14) 252deg, transparent 264deg,
    transparent 300deg, rgba(224,90,78,.14) 312deg, transparent 324deg, transparent 360deg);
}
@keyframes raysspin{to{transform:translateX(-50%) rotate(360deg);}}
/* combat log accents */
#log div{
  padding:2px 8px; border-left:2px solid rgba(232,185,59,.35); border-radius:0 6px 6px 0;
  background:linear-gradient(90deg, rgba(10,7,4,.6), transparent 85%);
  margin-bottom:2px;
}
/* merchant breathes */
#shop-merchant{animation:merchantbob 3.6s ease-in-out infinite;}
@keyframes merchantbob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px) rotate(-1deg)}}
/* shop price chips */
.shop-item .price, .shop-relic .price{
  font-size:.82rem; padding:2px 11px; border-radius:12px;
  background:linear-gradient(180deg, rgba(60,44,18,.8), rgba(24,16,8,.9));
  border:1px solid rgba(232,185,59,.35); display:inline-block;
  box-shadow:inset 0 1px 0 rgba(255,235,180,.12);
}
.shop-item .price.broke, .shop-relic.broke .price{border-color:rgba(224,90,78,.5); color:#e0847a;}
/* button press physicality everywhere */
.btn-ghost:active, .gtab:active, .htab:active, .count-btn:active, .srv-join:active{transform:translateY(2px);}
.hud-chip:active{transform:translateY(1px);}
/* map panel compass ornament */
#map-panel::after{
  content:''; position:sticky; display:block; bottom:10px; margin-left:calc(100% - 52px);
  width:40px; height:40px; pointer-events:none; opacity:.4;
  background:url(../assets/ui/compass.png) center/contain no-repeat;
  image-rendering:pixelated;
}
/* focus & selection identity */
:focus-visible{outline:2px solid rgba(232,185,59,.7); outline-offset:2px;}
::selection{background:rgba(232,185,59,.35); color:#fff3d0;}

/* ================================================================
   PERFECTION PASS — combat feel micro-details
   ================================================================ */
/* armor shatter: flying steel shards + cracking badge */
.shard{
  position:fixed; z-index:54; pointer-events:none;
  background:linear-gradient(135deg, #e8f2fc, #9fc4e0 45%, #3e6890);
  clip-path:polygon(50% 0%, 100% 62%, 18% 100%);
  box-shadow:0 0 6px rgba(160,200,240,.5);
  animation:shardfly .6s ease-in forwards;
}
@keyframes shardfly{
  from{transform:translate(0,0) rotate(0deg); opacity:1;}
  to{transform:translate(var(--px), var(--py)) rotate(var(--rot,220deg)) scale(.4); opacity:0;}
}
.block-badge.crack{animation:badgecrack .5s;}
@keyframes badgecrack{
  0%{transform:scale(1); filter:brightness(2.4) saturate(0);}
  25%{transform:scale(1.4) rotate(-14deg);}
  45%{transform:scale(.85) rotate(10deg); filter:brightness(1.6);}
  65%{transform:scale(1.1) rotate(-5deg);}
  100%{transform:scale(1) rotate(0deg);}
}
/* gold edge-flash on huge hits */
#crit-flash{
  position:fixed; inset:0; z-index:56; pointer-events:none; opacity:0;
  background:radial-gradient(ellipse at center, transparent 52%, rgba(255,214,110,.28) 82%, rgba(255,190,80,.4));
}
#crit-flash.show{animation:critflash .45s ease-out;}
@keyframes critflash{0%{opacity:0} 14%{opacity:1} 100%{opacity:0}}
/* battle entrance: heroes stride in from the left, foes from the right */
.hero-f{animation:heroenter .55s cubic-bezier(.2,.9,.3,1) backwards;}
.enemy-f{animation:foeenter .6s cubic-bezier(.2,.9,.3,1) backwards;}
.hero-f:nth-child(2){animation-delay:.1s;} .hero-f:nth-child(3){animation-delay:.2s;}
.hero-f:nth-child(4){animation-delay:.3s;}
.enemy-f:nth-child(2){animation-delay:.14s;} .enemy-f:nth-child(3){animation-delay:.28s;}
@keyframes heroenter{from{opacity:0; transform:translateX(-72px);}}
@keyframes foeenter{from{opacity:0; transform:translateX(72px);}}
/* HP bars: heartbeat when critical, green sweep when healed */
.mini-hp.pro.low{border-color:rgba(224,90,78,.7); box-shadow:inset 0 2px 6px rgba(0,0,0,.85), 0 0 12px rgba(224,60,40,.35);}
.mini-hp.pro.low .mini-fill{animation:lowbeat 1s ease-in-out infinite;}
@keyframes lowbeat{
  0%,100%{filter:brightness(1);}
  42%{filter:brightness(1.55) saturate(1.3);}
  58%{filter:brightness(1.3);}
}
.mini-hp.pro.healed::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(140,224,90,.55), transparent);
  animation:healsweep .7s ease-out;
}
@keyframes healsweep{from{transform:translateX(-100%);} to{transform:translateX(100%);}}
/* energy orb tick + pile count pops */
#energy-orb.tick{animation:orbglow 3.2s ease-in-out infinite, orbtick .35s cubic-bezier(.2,1.6,.4,1);}
@keyframes orbtick{40%{transform:scale(1.18);}}
.pile b.pop{animation:pilepop .3s;}
@keyframes pilepop{45%{transform:scale(1.4);}}
/* END TURN pleads for attention once the hand is spent */
#end-turn.nudge{border-color:var(--gold); animation:etnudge 1.6s ease-in-out infinite;}
@keyframes etnudge{
  0%,100%{box-shadow:0 5px 0 #180d05, 0 12px 28px rgba(0,0,0,.6), 0 0 0 rgba(232,185,59,0),
    inset 0 1px 0 rgba(255,235,180,.3), inset 0 0 22px rgba(0,0,0,.35);}
  50%{box-shadow:0 5px 0 #180d05, 0 12px 28px rgba(0,0,0,.6), 0 0 26px rgba(232,185,59,.55),
    inset 0 1px 0 rgba(255,235,180,.4), inset 0 0 22px rgba(0,0,0,.35);}
}
/* unaffordable cards: the mana gem itself goes dead */
.card.unplayable .cost{
  background:radial-gradient(circle at 35% 30%, #99a2ae, #5a6470 50%, #333a44);
  border-color:#252b33; color:#d4d9e0; text-shadow:0 1px 2px rgba(0,0,0,.7);
}
/* torch sconces breathe with candle-flicker */
#arena::after{animation:sconceflick 5s linear infinite;}
@keyframes sconceflick{
  0%,100%{opacity:.85;} 9%{opacity:.68;} 14%{opacity:.9;} 26%{opacity:.74;}
  33%{opacity:.88;} 47%{opacity:.7;} 54%{opacity:.92;} 68%{opacity:.76;}
  77%{opacity:.87;} 89%{opacity:.69;}
}
/* HUD gold chip glints when coin changes hands */
.hud-chip.gold.bump{animation:goldbump .55s;}
@keyframes goldbump{
  30%{transform:scale(1.1); box-shadow:inset 0 1px 0 rgba(255,235,180,.3), 0 0 20px rgba(232,185,59,.6);}
}

/* ---- DISCOVER (choose 1 of 3) ---- */
#discover-overlay{z-index:45;}
#discover-cards{display:flex; gap:26px; margin:22px 0 8px; flex-wrap:wrap; justify-content:center;}
#discover-cards .card{margin:0; animation:deal .4s var(--deal-delay) backwards;}
#discover-cards .card:hover{margin:0; transform:translateY(-20px) scale(1.13) rotate(0deg);}
/* discovered copies wear a golden FREE ribbon */
.card.free{
  box-shadow:0 10px 26px rgba(0,0,0,.6), 0 0 18px rgba(232,185,59,.35),
    inset 0 0 0 4px rgba(255,244,200,.55), inset 0 0 26px rgba(160,110,40,.3);
}
.card .freetag{
  position:absolute; top:34px; left:-9px; z-index:3; pointer-events:none;
  font-family:'Alegreya SC',serif; font-size:.54rem; letter-spacing:.16em; padding:2px 9px 2px 7px;
  color:var(--ink); background:linear-gradient(180deg,#ffe9a8,var(--gold) 60%,#c89422);
  border:1px solid #7a4d10; border-radius:0 8px 8px 0;
  box-shadow:0 2px 6px rgba(0,0,0,.45);
  animation:freetagpulse 2.2s ease-in-out infinite;
}
@keyframes freetagpulse{50%{box-shadow:0 2px 6px rgba(0,0,0,.45), 0 0 14px rgba(232,185,59,.7);}}
.card.free .cost{
  background:radial-gradient(circle at 35% 30%, #ffe9a8, var(--gold) 50%, #9c6d12);
  border-color:#7a4d10; color:var(--ink); text-shadow:0 1px 0 rgba(255,255,255,.5);
}
@media (max-width:560px){
  #discover-cards{gap:10px; margin:12px 0 6px;}
}

/* ---- POTION BELT ---- */
#potion-belt{display:flex; gap:7px; align-items:center; width:auto; min-width:74px;}
.pslot{
  width:44px; height:44px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(40,30,16,.7), rgba(12,9,6,.9));
  border:1.5px dashed rgba(226,200,150,.25);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.6);
  transition:transform .15s, border-color .15s, box-shadow .15s;
}
.pslot.filled{
  border-style:solid; border-color:rgba(126,196,74,.5); cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,235,180,.1), 0 3px 10px rgba(0,0,0,.45), 0 0 10px rgba(126,196,74,.2);
}
.pslot.filled img{height:30px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.6));}
.pslot.filled:not(:disabled):hover{
  transform:translateY(-3px) scale(1.12); border-color:#b8e08a;
  box-shadow:0 6px 16px rgba(0,0,0,.55), 0 0 18px rgba(126,196,74,.5);
}
.pslot.filled:disabled{cursor:default; filter:saturate(.4) brightness(.7);}
@media (max-width:560px){
  #potion-belt{gap:4px; min-width:0;}
  .pslot{width:32px; height:32px; border-radius:8px;}
  .pslot.filled img{height:22px;}
}

/* ---- BOSS RELIC CHOICE ---- */
#bossrelic-list{display:flex; flex-direction:column; gap:12px; width:min(560px,92vw); margin:18px 0 6px;}
#bossrelic-list .boss-pick{
  flex:none; padding:14px 18px; font-size:.92rem;
  border:2px solid rgba(200,90,220,.4);
  background:linear-gradient(165deg, rgba(34,20,40,.95), rgba(20,12,26,.97));
  animation:fadeup .45s both;
}
#bossrelic-list .boss-pick:nth-child(2){animation-delay:.12s;}
#bossrelic-list .boss-pick:nth-child(3){animation-delay:.24s;}
#bossrelic-list .boss-pick img{height:52px;}
#bossrelic-list .boss-pick:not(.foreign):hover{
  border-color:#e0a4e8; transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(0,0,0,.6), 0 0 26px rgba(200,90,220,.35);
}
#bossrelic-list .boss-pick.foreign{cursor:default; opacity:.8;}
#bossrelic-list .boss-pick b{color:#e0a4e8;}

/* ---- FORGE CONFIRM ---- */
#forge-overlay{z-index:46;}
#forge-compare{display:flex; align-items:center; gap:26px; margin:20px 0 10px;}
#forge-compare .card{margin:0; animation:none; cursor:default; pointer-events:none;}
#forge-old .card{filter:saturate(.8) brightness(.92); transform:scale(.94) rotate(-2deg);}
#forge-new .card{
  transform:scale(1.06) rotate(1.5deg);
  box-shadow:0 20px 46px rgba(0,0,0,.7), 0 0 34px rgba(232,185,59,.55),
    inset 0 0 0 4px rgba(255,244,200,.5)!important;
  animation:forgeglow 1.8s ease-in-out infinite;
}
@keyframes forgeglow{50%{box-shadow:0 20px 46px rgba(0,0,0,.7), 0 0 50px rgba(232,185,59,.8),
  inset 0 0 0 4px rgba(255,244,200,.6);}}
.forge-arrow{
  font-size:2.4rem; color:var(--gold);
  text-shadow:0 0 20px rgba(232,185,59,.7);
  animation:forgearrow 1.2s ease-in-out infinite;
}
@keyframes forgearrow{50%{transform:translateX(6px);}}
@media (max-width:560px){
  #forge-compare{gap:10px;}
  .forge-arrow{font-size:1.6rem;}
}

/* ---- RELIC SHOWCASE ---- */
#relic-showcase{
  position:fixed; inset:0; z-index:66; display:none;
  align-items:center; justify-content:center;
  background:radial-gradient(ellipse at center, rgba(30,20,6,.45), rgba(6,4,10,.82) 78%);
  cursor:pointer;
}
#relic-showcase.show{display:flex; animation:fadein .3s;}
.rs-frame{
  width:min(400px, 90vw); padding:28px 34px 22px; text-align:center;
  background:
    radial-gradient(ellipse at 50% 22%, rgba(232,185,59,.16), transparent 60%),
    linear-gradient(165deg, rgba(38,28,14,.98), rgba(22,15,9,.98));
  border:3px double var(--gold); border-radius:14px;
  box-shadow:0 30px 90px rgba(0,0,0,.85), 0 0 70px rgba(232,185,59,.3),
    inset 0 0 50px rgba(0,0,0,.5);
  animation:rspop .55s cubic-bezier(.2,1.5,.4,1) both;
}
@keyframes rspop{
  0%{transform:scale(.5) translateY(40px); opacity:0;}
  70%{transform:scale(1.06);}
  100%{transform:scale(1); opacity:1;}
}
.rs-head{
  font-family:'Alegreya SC',serif; letter-spacing:.42em; font-size:.78rem; color:var(--gold);
  text-transform:uppercase; text-shadow:0 0 16px rgba(232,185,59,.6);
  animation:fadeup .4s .15s both;
}
.rs-glow{
  width:118px; height:118px; margin:16px auto 12px; border-radius:50%;
  display:grid; place-items:center; position:relative;
  background:radial-gradient(circle, rgba(232,185,59,.32), rgba(232,185,59,.08) 55%, transparent 72%);
  animation:rsglow 2.2s ease-in-out infinite;
}
@keyframes rsglow{50%{box-shadow:0 0 46px rgba(232,185,59,.5);}}
.rs-glow::before{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid rgba(232,185,59,.4);
  animation:nodepulse 1.8s ease-in-out infinite;
}
#rs-icon{height:74px; filter:drop-shadow(0 8px 16px rgba(0,0,0,.7));
  animation:rsicon 3s ease-in-out infinite;}
@keyframes rsicon{50%{transform:translateY(-6px) rotate(3deg);}}
.rs-name{font-family:'MedievalSharp',serif; font-size:1.5rem; color:var(--paper);
  text-shadow:0 2px 8px #000; animation:fadeup .4s .25s both;}
.rs-desc{font-size:.98rem; font-style:italic; color:#d8c8a0; line-height:1.5;
  margin:8px 0 14px; animation:fadeup .4s .35s both;}
.rs-hint{font-family:'Alegreya SC',serif; font-size:.62rem; letter-spacing:.3em;
  color:rgba(226,200,150,.45); text-transform:uppercase; animation:fadeup .4s .8s both;}

/* ---- GRIMOIRE ---- */
#grimoire-screen{justify-content:flex-start; padding-top:48px; gap:10px;}
#grimoire-title{font-family:'MedievalSharp',serif; font-size:1.9rem; color:var(--gold);
  text-shadow:0 3px 0 #6d4410, 0 8px 30px rgba(0,0,0,.8);}
#grimoire-tabs{display:flex; gap:8px; flex-wrap:wrap; justify-content:center;}
.gtab{
  font-family:'Alegreya SC',serif; letter-spacing:.14em; font-size:.82rem; padding:7px 20px;
  color:var(--paper-dark); border:1.5px solid rgba(226,200,150,.3); border-radius:22px;
  background:rgba(12,9,6,.7); transition:all .15s;
}
.gtab:hover{border-color:var(--gold); color:var(--paper);}
.gtab.act{background:linear-gradient(180deg, rgba(74,52,22,.9), rgba(30,20,10,.95));
  border-color:var(--gold); color:var(--gold); box-shadow:0 0 14px rgba(232,185,59,.3);}
#grimoire-panel{
  width:min(880px,96vw); flex:1; margin-bottom:14px; overflow:hidden; padding:22px 12px 22px 26px;
  display:flex;
  background:linear-gradient(165deg, rgba(30,24,16,.96), rgba(20,15,11,.97));
  border:3px double rgba(232,185,59,.55); border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.7), inset 0 0 80px rgba(0,0,0,.5);
}
/* the CONTENT scrolls, not the ornate frame — corners stay pinned */
#grimoire-content{flex:1; min-width:0; overflow-y:auto; padding-right:14px;
  scrollbar-width:thin; scrollbar-color:rgba(232,185,59,.4) transparent;}
#grimoire-content::-webkit-scrollbar{width:9px;}
#grimoire-content::-webkit-scrollbar-thumb{background:rgba(232,185,59,.35); border-radius:5px;}
/* same treatment for any ornate frame with scrolling innards */
.frame-scroll{overflow-y:auto; min-height:0; flex:1;
  scrollbar-width:thin; scrollbar-color:rgba(232,185,59,.4) transparent;}
.frame-scroll::-webkit-scrollbar{width:9px;}
.frame-scroll::-webkit-scrollbar-thumb{background:rgba(232,185,59,.35); border-radius:5px;}
.g-hero, .g-enemy{
  display:flex; gap:18px; align-items:flex-start; padding:14px 10px;
  border-bottom:1px solid rgba(226,200,150,.15); animation:fadeup .4s both;
}
.g-hero img{height:88px; flex-shrink:0; filter:drop-shadow(0 8px 8px rgba(0,0,0,.5));}
.g-enemy img{height:74px; flex-shrink:0; filter:drop-shadow(0 8px 8px rgba(0,0,0,.5));}
.g-hero-info{flex:1; min-width:0;}
.g-name{font-family:'MedievalSharp',serif; font-size:1.15rem; color:var(--paper); margin-bottom:2px;}
.g-tag{font-family:'Alegreya SC',serif; font-size:.62rem; letter-spacing:.2em; padding:2px 10px;
  border-radius:12px; background:rgba(232,185,59,.15); border:1px solid rgba(232,185,59,.4);
  color:var(--gold); vertical-align:middle;}
.g-tag.g-secret{background:rgba(126,196,74,.15); border-color:rgba(126,196,74,.5); color:#b8e08a;}
.g-tag.g-easy{background:rgba(126,196,74,.12); border-color:rgba(126,196,74,.4); color:#b8e08a;}
.g-tag.g-med{background:rgba(90,167,232,.12); border-color:rgba(90,167,232,.4); color:#9fdcff;}
.g-tag.g-hard{background:rgba(224,144,60,.12); border-color:rgba(224,144,60,.45); color:#ffb87a;}
.g-tag.g-elite{background:rgba(224,90,78,.14); border-color:rgba(224,90,78,.5); color:#ff9d94;}
.g-tag.g-boss{background:rgba(180,60,200,.14); border-color:rgba(200,90,220,.5); color:#e0a4e8;}
.g-line{font-size:.86rem; color:#d8c8a0; margin:3px 0; line-height:1.45;}
.g-line b{color:var(--paper);}
.g-blurb{font-style:italic; font-size:.88rem; color:#b8a882; margin:4px 0;}
.g-cardgrid{display:flex; flex-wrap:wrap; gap:18px 14px; justify-content:center; margin-bottom:18px; padding-top:8px;}
.g-cardgrid .card.g-card{
  margin:0; animation:none; cursor:default;
  width:176px; height:252px; padding:12px 13px 14px;
}
.g-cardgrid .card.g-card .cname{font-size:1rem; min-height:2.2em;}
.g-cardgrid .card.g-card .art img{height:72px;}
.g-cardgrid .card.g-card .ctext{font-size:.9rem; line-height:1.35;}
.g-cardgrid .card.g-card .cost{width:38px; height:38px; font-size:1.3rem; top:-11px; left:-11px;}
.g-cardgrid .card.g-card .ctype{font-size:.66rem; bottom:7px;}
.g-cardgrid .card.g-card:hover{margin:0; transform:translateY(-10px) scale(1.08); z-index:8;}
@media (max-width:560px){
  .g-cardgrid .card.g-card{width:150px; height:218px;}
  .g-cardgrid .card.g-card .art img{height:56px;}
  .g-cardgrid .card.g-card .ctext{font-size:.8rem;}
}
.g-enemy.g-voiced{cursor:pointer; border-radius:10px; transition:background .15s;}
.g-enemy.g-voiced:hover{background:rgba(232,185,59,.07);}
.g-tag.g-voice{background:rgba(90,167,232,.14); border-color:rgba(90,167,232,.45); color:#9fdcff; cursor:pointer;}
.g-enemy.g-speaking img{animation:speakshake .6s;}
@keyframes speakshake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-4px) rotate(-2deg)} 40%{transform:translateX(4px) rotate(2deg)}
  60%{transform:translateX(-3px)} 80%{transform:translateX(3px)}
}
#grimoire-content .shop-relic{margin-bottom:8px;}
#grimoire-content .shop-relic:hover{transform:none; border-color:rgba(226,200,150,.3); box-shadow:none;}

/* ---- TITLE ANIMATIONS ---- */
.title-frame{animation:rise .9s cubic-bezier(.2,.9,.3,1) both, framebreathe 6s 1.2s ease-in-out infinite;}
@keyframes framebreathe{
  0%,100%{box-shadow:0 30px 80px rgba(0,0,0,.7), inset 0 0 60px rgba(0,0,0,.6);}
  50%{box-shadow:0 34px 90px rgba(0,0,0,.75), 0 0 60px rgba(232,185,59,.12), inset 0 0 60px rgba(0,0,0,.55);}
}
h1.logo{position:relative;
  animation:fadeup .8s .35s both, logopulse 5s 1.5s ease-in-out infinite;}
@keyframes logopulse{
  0%,100%{text-shadow:0 2px 0 #7a4d10, 0 4px 0 #4a3008, 0 9px 24px rgba(0,0,0,.8), 0 0 44px rgba(232,185,59,.3);}
  50%{text-shadow:0 2px 0 #7a4d10, 0 4px 0 #4a3008, 0 9px 24px rgba(0,0,0,.8), 0 0 70px rgba(232,185,59,.55);}
}
.title-heroes img{
  animation:herofloat 3.4s ease-in-out infinite;
  transition:transform .25s;
}
.title-heroes img:nth-child(1){animation-delay:0s;}
.title-heroes img:nth-child(2){animation-delay:.5s;}
.title-heroes img:nth-child(3){animation-delay:.25s; animation-duration:4.2s;}
.title-heroes img:nth-child(4){animation-delay:.8s;}
.title-heroes img:nth-child(5){animation-delay:1.1s;}
@keyframes herofloat{
  0%,100%{transform:translateY(0) rotate(-1deg);}
  50%{transform:translateY(-9px) rotate(1.2deg);}
}
.title-heroes img:hover{transform:translateY(-12px) scale(1.18)!important; animation-play-state:paused;}
.ember{
  position:absolute; bottom:-8px; border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle, #ffd88a, #ff9d3c 55%, transparent 75%);
  animation:emberrise linear forwards;
  filter:blur(.4px);
}
@keyframes emberrise{
  0%{transform:translate(0,0) scale(1); opacity:0;}
  8%{opacity:.9;}
  100%{transform:translate(var(--ex), var(--ey)) scale(.25); opacity:0;}
}

/* ---- ONLINE PANEL ---- */
.panel{
  padding:36px 48px; text-align:center; max-width:480px;
  background:linear-gradient(160deg, rgba(14,12,28,.92), rgba(30,18,40,.92));
  border:3px double var(--gold); border-radius:10px;
  box-shadow:0 30px 80px rgba(0,0,0,.7);
  animation:rise .5s both;
}
.panel h2{font-family:'MedievalSharp',serif; color:var(--gold); font-size:1.8rem; margin-bottom:8px;}
.panel p{color:#cfc4a4; font-size:.95rem; margin-bottom:18px;}
.join-row{display:flex; gap:10px; justify-content:center; margin-top:14px;}
#join-code{
  width:150px; padding:10px 14px; font-size:1.2rem; letter-spacing:.3em; text-transform:uppercase;
  text-align:center; background:rgba(0,0,0,.4); color:var(--paper);
  border:2px solid rgba(232,185,59,.4); border-radius:8px; outline:none;
}
#join-code:focus{border-color:var(--gold); box-shadow:0 0 14px rgba(232,185,59,.3);}
#online-status{margin-top:18px; min-height:48px; font-size:1rem; color:var(--paper-dark); line-height:1.5;}
.roomcode{font-family:'MedievalSharp',serif; font-size:1.9rem; color:var(--gold); letter-spacing:.25em;
  text-shadow:0 0 18px rgba(232,185,59,.5);}
.browser-head{
  font-family:'Alegreya SC',serif; letter-spacing:.3em; text-transform:uppercase; font-size:.78rem;
  color:var(--paper-dark); margin:20px 0 8px; border-bottom:1px solid rgba(226,200,150,.25); padding-bottom:5px;
  text-align:left;
}
#server-list{display:flex; flex-direction:column; gap:7px; max-height:220px; overflow-y:auto; text-align:left;}
.srv-empty{font-style:italic; color:#9a8f74; font-size:.85rem; padding:6px 2px;}
.srv-row{
  display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:9px;
  background:rgba(0,0,0,.32); border:1.5px solid rgba(226,200,150,.18); font-size:.83rem; color:#d8c8a0;
}
.srv-row.open{border-color:rgba(126,196,74,.45);}
.srv-row .srv-info{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.srv-row .srv-info b{color:var(--gold); font-family:'MedievalSharp',serif; letter-spacing:.1em;}
.srv-row .srv-meta{color:#9a8f74; font-size:.72rem; white-space:nowrap;}
.srv-badge{
  font-family:'Alegreya SC',serif; font-size:.6rem; letter-spacing:.14em; padding:3px 8px;
  border-radius:14px; white-space:nowrap;
}
.srv-badge.b-lobby{background:rgba(126,196,74,.2); color:#b8e08a; border:1px solid rgba(126,196,74,.5);}
.srv-badge.b-game{background:rgba(224,90,78,.14); color:#e0a49e; border:1px solid rgba(224,90,78,.35);}
.srv-join{
  font-family:'MedievalSharp',serif; font-size:.8rem; color:var(--ink); padding:5px 14px; border-radius:7px;
  background:linear-gradient(180deg,#c8e88a,#7ec44a 55%,#4e8a2e); border:1.5px solid #2e5e1a;
  box-shadow:0 2px 0 #24490f, 0 4px 10px rgba(0,0,0,.4); transition:transform .12s, filter .15s;
}
.srv-join:hover{transform:translateY(-1px); filter:brightness(1.1);}
.srv-join:active{transform:translateY(1px); box-shadow:0 0 0 #24490f;}
.invite-url{
  margin-top:8px; padding:6px 12px; font-size:.78rem; color:#9fdcff; word-break:break-all;
  background:rgba(0,0,0,.35); border:1px dashed rgba(90,167,232,.4); border-radius:8px;
  user-select:text; -webkit-user-select:text; cursor:text;
}
.btn-ghost{
  margin-top:14px; padding:9px 30px; font-family:'Alegreya SC',serif; letter-spacing:.16em; font-size:.92rem;
  color:var(--paper-dark); border:1.5px solid rgba(226,200,150,.5); border-radius:30px;
  transition:all .15s;
}
.btn-ghost:hover{color:var(--gold); border-color:var(--gold); box-shadow:0 0 18px rgba(232,185,59,.3); transform:translateY(-2px);}

/* ---- HERO SELECT ---- */
#select-screen{gap:10px; overflow-y:auto; justify-content:flex-start; padding:56px 0 30px;}
/* children keep their height — the screen scrolls instead of squishing buttons */
#select-screen > *{flex-shrink:0;}
#select-title{font-family:'MedievalSharp',serif; font-size:2.2rem; color:var(--gold);
  text-shadow:0 3px 0 #6d4410, 0 8px 30px rgba(0,0,0,.8);}
#select-status{font-style:italic; color:var(--paper-dark); min-height:26px; font-size:1.05rem;}
#select-status b{color:var(--gold);}
#hero-grid{display:flex; gap:18px; flex-wrap:wrap; justify-content:center; padding:8px; max-width:1100px;}
.hero-card{
  width:225px; padding:18px 16px 14px; text-align:center; cursor:pointer; position:relative;
  background:linear-gradient(165deg, rgba(24,20,44,.94), rgba(38,24,52,.94));
  border:2px solid rgba(232,185,59,.35); border-radius:12px;
  box-shadow:0 14px 34px rgba(0,0,0,.6);
  transition:transform .16s, border-color .16s, box-shadow .16s;
  animation:fadeup .5s both;
}
.hero-card:nth-child(2){animation-delay:.08s} .hero-card:nth-child(3){animation-delay:.16s} .hero-card:nth-child(4){animation-delay:.24s}
.hero-card:hover{transform:translateY(-8px) scale(1.03); border-color:var(--gold);
  box-shadow:0 24px 50px rgba(0,0,0,.7), 0 0 30px rgba(232,185,59,.25);}
.hero-card img{height:96px; margin-bottom:6px; filter:drop-shadow(0 10px 8px rgba(0,0,0,.6));}
.hc-name{font-family:'MedievalSharp',serif; font-size:1.15rem; color:var(--paper);}
.hc-title{font-family:'Alegreya SC',serif; font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin:2px 0 8px;}
.hc-blurb{font-size:.83rem; font-style:italic; color:#c4b894; line-height:1.4; min-height:64px;}
.hc-mech{font-size:.8rem; color:#9fdcff; margin-top:8px;}
.hc-hp{font-size:.85rem; color:#ff9d94; margin-top:4px;}
.hero-card.p1::after, .hero-card.p2::after{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  font-family:'Alegreya SC',serif; font-size:.7rem; letter-spacing:.2em; padding:3px 12px; border-radius:20px;
}
.hero-card.p1{border-color:var(--gold);}
.hero-card.p1::after{content:'PLAYER 1'; background:var(--gold); color:var(--ink);}
.hero-card.p2{border-color:var(--mana);}
.hero-card.p2::after{content:'PLAYER 2'; background:var(--mana); color:#eaf6ff;}
.hero-card.p1.p2{border-color:#b8e08a;}
.hero-card.p1.p2::after{content:'P1 + P2'; background:#b8e08a; color:var(--ink);}

/* ---- LOBBY ROSTER ---- */
#lobby-roster{
  width:min(460px,92vw); display:flex; flex-direction:column; gap:6px; padding:12px 16px;
  background:rgba(10,8,20,.75); border:1.5px solid rgba(232,185,59,.35); border-radius:12px;
}
.roster-code{font-family:'MedievalSharp',serif; color:var(--paper-dark); display:flex; align-items:center; gap:10px;
  padding-bottom:6px; border-bottom:1px solid rgba(226,200,150,.2); margin-bottom:2px;}
.roster-code b{color:var(--gold); letter-spacing:.2em; font-size:1.2rem;}
#roster-copy{font-family:'Alegreya SC',serif; font-size:.68rem; letter-spacing:.1em; padding:3px 12px;
  border:1px solid rgba(90,167,232,.5); border-radius:14px; color:#9fdcff; transition:all .15s;}
#roster-copy:hover{border-color:#9fdcff; box-shadow:0 0 10px rgba(90,167,232,.3);}
.roster-row{display:flex; align-items:center; gap:10px; font-size:.9rem; color:#d8c8a0; padding:3px 2px;}
.roster-row .rp{font-family:'Alegreya SC',serif; font-size:.72rem; letter-spacing:.1em; width:110px; color:var(--paper-dark);}
.roster-row .rh{flex:1; color:var(--paper);}
.roster-row .rs{color:#b8e08a; font-size:.8rem;}
.roster-row.me .rp{color:var(--gold);}
.roster-row.empty{color:#7a7057; font-style:italic; font-size:.8rem;}
.count-btn{
  font-family:'MedievalSharp',serif; font-size:1rem; color:var(--ink); margin-left:10px; padding:6px 16px;
  background:linear-gradient(180deg,#ffd45e,var(--gold) 50%,#b98a1c); border:2px solid #7a4d10; border-radius:8px;
  box-shadow:0 3px 0 #6d4410; transition:transform .12s;
}
.count-btn:hover{transform:translateY(-2px);}
.hero-card .picked-by{
  position:absolute; top:-10px; left:50%; transform:translateX(-50%); z-index:2;
  font-family:'Alegreya SC',serif; font-size:.66rem; letter-spacing:.12em; color:var(--ink); white-space:nowrap;
}
.hero-card .picked-by:not(:empty){background:var(--gold); padding:2px 12px; border-radius:14px; box-shadow:0 2px 8px rgba(0,0,0,.5);}
#select-start:disabled{opacity:.45; filter:saturate(.5); pointer-events:none;}
/* chat colors per player */
#chat-log b.cs0{color:#ffd45e;} #chat-log b.cs1{color:#9fdcff;}
#chat-log b.cs2{color:#b8e08a;} #chat-log b.cs3{color:#e0a4e8;}
/* 3-4 hero battle layout */
#heroes-col[data-count="3"] .fighter{width:118px;}
#heroes-col[data-count="3"] .sprite{height:92px;}
#heroes-col[data-count="4"] .fighter{width:98px;}
#heroes-col[data-count="4"] .sprite{height:80px;}
#heroes-col[data-count="3"] .mini-hp, #heroes-col[data-count="4"] .mini-hp{width:80px;}
#heroes-col[data-count="4"] .fighter-name{font-size:.72rem;}

/* ---- SECRET ROSTER ---- */
#secret-wrap{flex-basis:100%; display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:6px;}
#secret-btn{
  animation:fadeup .5s .35s both, secretglow 2.2s ease-in-out infinite;
  border-color:rgba(126,196,74,.6); color:#b8e08a; font-size:1rem; padding:11px 34px;
}
@keyframes secretglow{0%,100%{box-shadow:0 0 6px rgba(126,196,74,.2)} 50%{box-shadow:0 0 22px rgba(126,196,74,.55)}}
#secret-grid{display:flex; gap:18px; flex-wrap:wrap; justify-content:center;}
.hero-card.homie{
  border-color:rgba(126,196,74,.5);
  background:linear-gradient(165deg, rgba(20,34,22,.94), rgba(28,38,26,.94));
  animation:fadeup .4s both;
}
.hero-card.homie:hover{border-color:#b8e08a; box-shadow:0 24px 50px rgba(0,0,0,.7), 0 0 30px rgba(126,196,74,.3);}
.hero-card.homie .hc-title{color:#b8e08a;}
.hero-card.homie .hc-blurb{min-height:96px;}

/* ---- ORNATE FRAMES (generated corner flourishes) ---- */
.ornate{position:relative;}
.ornate::before{
  content:''; position:absolute; inset:5px; pointer-events:none; z-index:1;
  background:
    url(../assets/ui/corner-tl.png) top left no-repeat,
    url(../assets/ui/corner-tr.png) top right no-repeat,
    url(../assets/ui/corner-bl.png) bottom left no-repeat,
    url(../assets/ui/corner-br.png) bottom right no-repeat;
  background-size:34px 34px;
  image-rendering:pixelated;
  opacity:.85;
}
.ov-icon{height:74px; margin-bottom:4px; animation:fadeup .5s both; filter:drop-shadow(0 6px 14px rgba(0,0,0,.6));}

/* ---- HUD ---- */
#hud{position:fixed; top:0; left:0; right:0; z-index:20; display:none;
  padding:7px 16px; align-items:center; gap:12px;
  background:linear-gradient(180deg, rgba(20,14,7,.97), rgba(11,8,5,.9));
  border-bottom:1px solid rgba(60,42,20,.9);
  box-shadow:0 6px 24px rgba(0,0,0,.55);}
#hud::after{content:''; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:linear-gradient(90deg, transparent 2%, rgba(232,185,59,.55) 30%, rgba(232,185,59,.55) 70%, transparent 98%);}
#hud.on{display:flex;}
#hud .game-name{font-family:'MedievalSharp',serif; font-size:1rem; color:var(--gold); text-shadow:0 2px 6px #000;}
.hud-chip{
  display:flex; align-items:center; gap:7px; padding:4px 14px; border-radius:20px;
  font-family:'MedievalSharp',serif; font-size:.92rem; color:var(--paper);
  background:linear-gradient(180deg, rgba(64,46,22,.55), rgba(24,16,9,.85));
  border:1px solid rgba(232,185,59,.35);
  box-shadow:inset 0 1px 0 rgba(255,235,180,.14), 0 2px 8px rgba(0,0,0,.45);
  text-shadow:0 1px 3px #000;
}
.hud-chip img{height:20px;}
.hud-chip.gold b{color:var(--gold);}
button.hud-chip{cursor:pointer; transition:all .15s; letter-spacing:.06em;}
button.hud-chip:hover{border-color:var(--gold); box-shadow:inset 0 1px 0 rgba(255,235,180,.2), 0 0 14px rgba(232,185,59,.35); transform:translateY(-1px);}
#trail{display:flex; gap:7px; margin-left:auto; align-items:center;}
.tstop{width:15px; height:15px; border-radius:50%; border:2px solid rgba(244,234,216,.35);
  background:rgba(0,0,0,.4); transition:all .3s;}
.tstop.done{background:var(--poison); border-color:#b8e08a; box-shadow:0 0 8px rgba(126,196,74,.7);}
.tstop.here{background:var(--gold); border-color:#fff0c0; transform:scale(1.45); box-shadow:0 0 12px var(--gold);}
.tstop.boss{border-radius:4px; transform:rotate(45deg);}
.tstop.boss.here{transform:rotate(45deg) scale(1.45);}
#mute-btn{font-size:1.25rem; opacity:.85; transition:transform .15s; filter:drop-shadow(0 2px 4px #000);}
#mute-btn:hover{transform:scale(1.2); opacity:1;}
#pause-btn{font-size:1.2rem; opacity:.85; transition:transform .15s; filter:drop-shadow(0 2px 4px #000);}
#pause-btn:hover{transform:scale(1.2) rotate(-12deg); opacity:1;}

/* ---- PAUSE MENU ---- */
#pause-overlay{z-index:48;}
#pause-frame{
  padding:30px 46px 24px; text-align:center; position:relative;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(90,120,220,.10), transparent 60%),
    linear-gradient(160deg, rgba(14,12,28,.96), rgba(30,18,40,.96));
  border:3px double var(--gold); border-radius:12px;
  box-shadow:0 30px 80px rgba(0,0,0,.8), inset 0 0 60px rgba(0,0,0,.6);
  animation:rise .5s cubic-bezier(.2,.9,.3,1) both;
}
#pause-col{display:flex; flex-direction:column; gap:11px; margin:20px 0 14px; min-width:300px;}
#pause-col .btn-big{width:100%; text-align:center;}
#pause-note{color:#a8996f;}

/* ---- BATTLE ---- */
#battle-screen{justify-content:flex-start; padding-top:56px;}
/* painted dungeon hall behind the fight, darkened top & bottom for readability */
#battle-screen::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(8,6,16,.82) 0%, rgba(8,6,16,.28) 32%, rgba(8,6,16,.22) 58%, rgba(10,7,4,.92) 94%),
    url(../assets/ui/bg-battle.png) center / cover no-repeat;
  image-rendering:pixelated;
}
#battle-screen > *{position:relative; z-index:1;}
body.bloodmoon #battle-screen::before{filter:hue-rotate(-18deg) saturate(1.2) brightness(.9);}
#stage-title{
  font-family:'Alegreya SC',serif; letter-spacing:.35em; text-transform:uppercase; font-size:.85rem;
  color:rgba(244,234,216,.8); text-shadow:0 2px 8px #000; margin-bottom:6px;
  padding:2px 30px 16px;
  background:url(../assets/ui/divider.png) bottom center/170px 13px no-repeat;
  image-rendering:pixelated;
}
#arena{
  position:relative; width:min(1060px, 96vw); flex:1; max-height:40vh;
  display:flex; align-items:flex-end; justify-content:space-between; padding:0 5% 1.8vh;
}
/* drifting battle mist */
.mist{
  position:absolute; bottom:0; height:60px; width:130%; left:-15%; pointer-events:none;
  background:radial-gradient(ellipse at 30% 60%, rgba(190,200,230,.05), transparent 55%),
             radial-gradient(ellipse at 70% 40%, rgba(190,200,230,.045), transparent 55%);
  animation:mistdrift 26s linear infinite;
}
.mist.m2{bottom:26px; animation-duration:38s; animation-direction:reverse; opacity:.7;}
@keyframes mistdrift{
  0%{transform:translateX(-4%);} 50%{transform:translateX(4%);} 100%{transform:translateX(-4%);}
}
#enemies-col{display:flex; flex-direction:row; gap:8px; align-items:flex-end;}
#enemies-col[data-count="2"] .sprite{height:118px;}
#enemies-col[data-count="3"] .sprite{height:96px;}
#enemies-col[data-count="2"] .fighter{width:160px;}
#enemies-col[data-count="3"] .fighter{width:128px;}
.enemy-f .sprite{height:150px;}
.enemy-f .sprite.big{height:200px;}
.enemy-f.downed{opacity:.5;}
.enemy-f.downed .intent{display:none!important;}
.enemy-f .intent{
  position:absolute; top:-48px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:5px; white-space:nowrap;
  padding:4px 10px; border-radius:20px; z-index:5;
  background:rgba(8,6,18,.88); border:1.5px solid rgba(232,185,59,.5);
  box-shadow:0 6px 20px rgba(0,0,0,.6);
}
/* targeting */
body.targeting, body.targeting *{cursor:crosshair!important;}
.fighter.targetable{filter:brightness(1.06);}
.fighter.targetable .sprite{animation-play-state:paused;}
.fighter.targetable::before{
  content:''; position:absolute; left:50%; bottom:38px; width:96px; height:96px;
  transform:translateX(-50%); border-radius:50%; pointer-events:none; z-index:0;
  border:2.5px dashed rgba(232,185,59,.55);
  animation:tgtspin 6s linear infinite;
}
.fighter.targetable.ally::before{border-color:rgba(126,196,74,.55);}
@keyframes tgtspin{to{transform:translateX(-50%) rotate(360deg);}}
.fighter.target-hover{filter:brightness(1.2) drop-shadow(0 0 18px rgba(232,185,59,.5));}
.fighter.target-hover::before{
  border-style:solid; border-width:3.5px; border-color:#ffd45e;
  box-shadow:0 0 26px rgba(232,185,59,.55), inset 0 0 26px rgba(232,185,59,.2);
  animation:tgtspin 1.6s linear infinite;
}
.fighter.target-hover.ally::before{border-color:#b8e08a;
  box-shadow:0 0 26px rgba(126,196,74,.55), inset 0 0 26px rgba(126,196,74,.2);}
.card.aiming{
  transform:rotate(0deg) translateY(-30px) scale(1.08)!important;
  z-index:44!important;
  box-shadow:0 24px 50px rgba(0,0,0,.7), 0 0 34px rgba(232,185,59,.55)!important;
  outline:2px solid var(--gold);
}
.card.dragging{
  transition:none!important; animation:none!important;
  box-shadow:0 30px 60px rgba(0,0,0,.75), 0 0 30px rgba(232,185,59,.4)!important;
}
#target-arrow{
  position:fixed; inset:0; width:100vw; height:100vh; z-index:58; pointer-events:none;
  display:none;
}
#target-arrow.on{display:block;}
#ta-path{
  fill:none; stroke:#ffd45e; stroke-width:5; stroke-linecap:round;
  stroke-dasharray:4 14;
  animation:arrowflow .5s linear infinite;
  filter:drop-shadow(0 0 6px rgba(232,185,59,.7));
}
@keyframes arrowflow{to{stroke-dashoffset:-18;}}
#ta-head{fill:#ffd45e; filter:drop-shadow(0 0 6px rgba(232,185,59,.7));}
/* on a valid target only the COLOR changes — the curve stays a line (fill:none) */
#target-arrow.t-foe #ta-path{stroke:#ff6b50; fill:none;
  filter:drop-shadow(0 0 8px rgba(255,80,50,.8));}
#target-arrow.t-foe #ta-head{fill:#ff6b50;
  filter:drop-shadow(0 0 8px rgba(255,80,50,.8));}
#target-arrow.t-ally #ta-path{stroke:#8fe05a; fill:none;
  filter:drop-shadow(0 0 8px rgba(126,196,74,.8));}
#target-arrow.t-ally #ta-head{fill:#8fe05a;
  filter:drop-shadow(0 0 8px rgba(126,196,74,.8));}
#playline{
  position:fixed; left:6%; right:6%; bottom:300px; z-index:57; pointer-events:none;
  border-top:2px dashed rgba(232,185,59,.35); display:none; text-align:center;
}
#playline.on{display:block;}
#playline span{
  position:relative; top:-13px; padding:2px 18px; border-radius:14px;
  font-family:'Alegreya SC',serif; font-size:.66rem; letter-spacing:.3em;
  color:rgba(232,185,59,.55); background:rgba(10,7,4,.85);
  transition:all .15s;
}
#playline.ready{border-top-color:rgba(126,196,74,.8);
  box-shadow:0 -10px 30px rgba(126,196,74,.12);}
#playline.ready span{color:#b8e08a; text-shadow:0 0 12px rgba(126,196,74,.6);}
#turn-banner{
  position:fixed; top:30%; left:50%; transform:translateX(-50%); z-index:56;
  font-family:'MedievalSharp',serif; font-size:2.2rem; color:var(--gold);
  text-shadow:0 0 30px rgba(232,185,59,.7), 0 3px 0 #4a3008;
  letter-spacing:.2em; pointer-events:none; opacity:0; white-space:nowrap;
}
#turn-banner.foe{color:#ff8a6a; text-shadow:0 0 30px rgba(224,90,78,.7), 0 3px 0 #4a1008;}
#turn-banner.show{animation:turnsweep 1.5s cubic-bezier(.2,.8,.3,1) forwards;}
@keyframes turnsweep{
  0%{opacity:0; transform:translateX(-50%) translateY(18px) scale(.85);}
  18%{opacity:1; transform:translateX(-50%) translateY(0) scale(1.04);}
  30%{transform:translateX(-50%) scale(1);}
  75%{opacity:1;}
  100%{opacity:0; transform:translateX(-50%) translateY(-14px);}
}
/* name plates */
.fighter-name{
  display:inline-block; padding:2px 16px; border-radius:14px;
  background:linear-gradient(180deg, rgba(30,22,12,.85), rgba(14,10,6,.9));
  border:1px solid rgba(226,200,150,.28);
  box-shadow:0 3px 10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,235,180,.1);
}
.fighter-name.boss-name{border-color:rgba(224,90,78,.5); color:#ffb0a8;}
#arena.shake{animation:shake .4s;}
@keyframes shake{
  0%,100%{transform:translate(0,0)} 15%{transform:translate(-9px,4px)} 30%{transform:translate(8px,-5px)}
  45%{transform:translate(-7px,-3px)} 60%{transform:translate(6px,4px)} 75%{transform:translate(-4px,2px)} 90%{transform:translate(3px,-2px)}
}
#heroes-col{display:flex; flex-direction:row; gap:6px; align-items:flex-end;}
.fighter{position:relative; text-align:center; width:230px;}
.fighter.duo{width:170px;}
.sprite-box{position:relative; display:inline-block;}
.sprite{height:128px; display:inline-block;
  filter:drop-shadow(0 14px 10px rgba(0,0,0,.6));
  animation:idle 3.2s ease-in-out infinite;}
.fighter.duo .sprite{height:106px;}
#enemy-zone .sprite{height:150px; animation-duration:2.7s;}
#enemy-zone .sprite.big{height:200px;}
.shadow-ellipse{position:absolute; left:50%; bottom:-8px; width:70%; height:16px; transform:translateX(-50%);
  background:radial-gradient(ellipse, rgba(0,0,0,.55), transparent 70%); border-radius:50%;}
@keyframes idle{0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)}}
.sprite.hit{animation:hitflash .35s;}
@keyframes hitflash{
  0%{transform:translateX(0); filter:brightness(3) saturate(0)}
  30%{transform:translateX(14px) rotate(4deg)}
  60%{transform:translateX(-9px) rotate(-3deg); filter:brightness(1.6)}
  100%{transform:translateX(0); filter:drop-shadow(0 14px 10px rgba(0,0,0,.6))}
}
.sprite.attacking{animation:lunge .4s;}
@keyframes lunge{0%{transform:translateX(0)} 35%{transform:translateX(var(--lunge,60px)) scale(1.1)} 100%{transform:translateX(0)}}
.sprite.dying{animation:die .8s forwards;}
@keyframes die{to{transform:translateY(30px) rotate(90deg) scale(.4); opacity:0; filter:saturate(0)}}
.fighter.downed .sprite{animation:none; filter:saturate(0) brightness(.55) drop-shadow(0 14px 10px rgba(0,0,0,.6));
  transform:rotate(80deg) translateY(16px) scale(.85); opacity:.7;}
.fighter-name{font-family:'MedievalSharp',serif; font-size:1.02rem; margin-top:10px; color:var(--paper);
  text-shadow:0 2px 6px rgba(0,0,0,.9);}
.fighter.duo .fighter-name{font-size:.9rem;}
.mini-hp{width:150px; height:11px; margin:5px auto 0; border-radius:6px; background:#26090f;
  border:1px solid rgba(0,0,0,.6); overflow:hidden; box-shadow:inset 0 1px 4px rgba(0,0,0,.8);}
.mini-fill{height:100%; background:linear-gradient(180deg,#e05a4e,#8e2222); transition:width .4s cubic-bezier(.3,1.2,.4,1);}
.mini-num{font-size:.8rem; color:#e8d3a8; margin-top:3px; text-shadow:0 1px 3px #000;}
/* block badge — shield beside the HP bar */
.hp-row{display:flex; align-items:center; justify-content:center; gap:6px; margin-top:5px;}
.hp-row .mini-hp{margin:0;}
.block-badge{
  min-width:26px; height:26px; padding:0 4px; border-radius:50%;
  display:grid; place-items:center;
  font-family:'MedievalSharp',serif; font-size:.85rem; color:#eaf6ff;
  background:radial-gradient(circle at 35% 30%, #7fb8e8, #2e5e8a 55%, #143252);
  border:2px solid #9fc4e0;
  box-shadow:0 2px 8px rgba(0,0,0,.55), 0 0 12px rgba(90,167,232,.45), inset 0 1px 0 rgba(255,255,255,.35);
  text-shadow:0 1px 2px #04234a;
  clip-path:polygon(50% 0%, 96% 18%, 96% 60%, 50% 100%, 4% 60%, 4% 18%);
  border-radius:0;
  opacity:.28; filter:saturate(.4); transition:opacity .2s, filter .2s;
}
.block-badge.on{opacity:1; filter:none;}
.block-badge.pop{animation:blkpop .3s;}
@keyframes blkpop{40%{transform:scale(1.35)}}
.status-row{min-height:24px; margin-top:4px; display:flex; gap:5px; justify-content:center; flex-wrap:wrap;}
.chip{font-size:.72rem; padding:2px 8px; border-radius:20px; background:rgba(0,0,0,.6);
  border:1px solid rgba(244,234,216,.3); letter-spacing:.03em; animation:chippop .25s;}
@keyframes chippop{from{transform:scale(.4); opacity:0}}
.chip.blk{border-color:#9fc4e0; color:#cfe6f7;}
.chip.vuln{border-color:#b48ae0; color:#dcc4ff;}
.chip.burn{border-color:#ff8a4c; color:#ffb38a;}
.chip.str{border-color:#e05a4e; color:#ffb0a8;}
.chip.psn{border-color:#a5e05a; color:#c8f0a0;}
.chip.chl{border-color:#9fdcff; color:#d0f0ff;}
.chip.chg{border-color:#7fd4ff; color:#c8ecff;}
.chip.fth{border-color:#ffe9a8; color:#fff3cc;}
.chip.thn{border-color:#c8d94a; color:#e4ef9a;}
#intent{
  position:absolute; top:-52px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:6px; white-space:nowrap;
  padding:5px 14px; border-radius:24px;
  background:rgba(8,6,18,.88); border:1.5px solid rgba(232,185,59,.55);
  box-shadow:0 6px 20px rgba(0,0,0,.6); animation:chippop .3s; z-index:5;
}
.intent-label{font-family:'Alegreya SC',serif; font-size:.6rem; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(226,200,150,.55); margin-right:2px;}
.intent-pill{
  display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:15px;
  font-family:'MedievalSharp',serif; font-size:.95rem;
  background:rgba(0,0,0,.45); border:1px solid rgba(244,234,216,.25);
}
.intent-pill img{height:17px; filter:drop-shadow(0 1px 2px #000);}
.intent-pill b{color:var(--paper);}
.intent-pill.p-atk{border-color:rgba(224,90,78,.6); background:rgba(90,20,16,.5);}
.intent-pill.p-atk b{color:#ffb0a8;}
.intent-pill.p-atk.p-bm{border-color:#ff5040; box-shadow:0 0 12px rgba(255,60,40,.5);
  animation:bmpulse 1s ease-in-out infinite;}
@keyframes bmpulse{50%{box-shadow:0 0 20px rgba(255,60,40,.8);}}
.intent-pill.p-blk{border-color:rgba(90,167,232,.55); background:rgba(20,44,70,.5);}
.intent-pill.p-blk b{color:#9fdcff;}
.intent-pill.p-hex{border-color:rgba(180,138,224,.55); background:rgba(50,26,66,.5); color:#dcc4ff;
  font-family:'Alegreya SC',serif; font-size:.72rem; letter-spacing:.12em;}
.intent-pill.p-str{border-color:rgba(232,185,59,.5); background:rgba(70,50,14,.5);}
.intent-pill.p-str b{color:#ffd45e;}
.intent-pill.p-reg{border-color:rgba(126,196,74,.5); background:rgba(28,54,18,.5);}
.intent-pill.p-reg b{color:#b8e08a;}
.intent-all{
  font-family:'Alegreya SC',serif; font-size:.62rem; letter-spacing:.16em; color:#ff8a6a;
  border:1px solid rgba(255,120,90,.55); border-radius:10px; padding:1px 7px; margin-left:3px;
}
.intent-arrow{color:rgba(226,200,150,.6); font-size:.85rem;}
.intent-target{
  display:inline-flex; align-items:center; gap:5px; padding:2px 10px 2px 3px; border-radius:15px;
  font-family:'MedievalSharp',serif; font-size:.88rem; color:var(--paper);
  background:rgba(0,0,0,.45); border:1px solid rgba(232,185,59,.45);
}
.intent-target img{height:22px; filter:drop-shadow(0 1px 2px #000);}
#vs{font-family:'MedievalSharp',serif; font-size:2rem; color:rgba(244,234,216,.22);
  text-shadow:0 2px 10px #000; align-self:center;}

/* floating combat text */
.float-num{position:fixed; z-index:55; font-family:'MedievalSharp',serif; font-size:1.9rem; pointer-events:none;
  text-shadow:0 3px 0 rgba(0,0,0,.7), 0 6px 18px rgba(0,0,0,.6); animation:floaty 1s ease-out forwards;}
@keyframes floaty{
  0%{transform:translate(-50%,0) scale(.5); opacity:0}
  15%{transform:translate(-50%,-14px) scale(1.25); opacity:1}
  100%{transform:translate(-50%,-90px) scale(.95); opacity:0}
}
.particle{position:fixed; z-index:54; width:9px; height:9px; border-radius:50%; pointer-events:none;
  animation:pfly .7s ease-out forwards;}
@keyframes pfly{
  from{transform:translate(0,0) scale(1); opacity:1}
  to{transform:translate(var(--px), var(--py)) scale(.2); opacity:0}
}

/* ---- CONTROL BAR + HAND ---- */
#battle-bottom{
  width:min(1100px,98vw); margin-top:auto; padding:14px 0 10px;
  background:linear-gradient(to top, rgba(14,9,5,.96) 45%, rgba(14,9,5,.6) 78%, rgba(14,9,5,.1));
  border-radius:26px 26px 0 0;
  position:relative;
  box-shadow:0 -12px 36px rgba(0,0,0,.35);
}
/* gilded frame: full edges that trace the rounded corners, melting away
   toward the bottom of the screen */
#battle-bottom::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  border:2px solid rgba(232,185,59,.34); border-bottom:none;
  border-radius:26px 26px 0 0;
  background:linear-gradient(90deg, transparent 6%, rgba(232,185,59,.55) 38%,
    rgba(232,185,59,.55) 62%, transparent 94%) top center/100% 1px no-repeat;
  -webkit-mask-image:linear-gradient(to bottom, #000 55%, transparent 98%);
  mask-image:linear-gradient(to bottom, #000 55%, transparent 98%);
  box-shadow:inset 0 1px 0 rgba(255,235,180,.16), inset 0 0 30px rgba(0,0,0,.35);
}
#battle-bottom::after{
  content:''; position:absolute; top:6px; left:8px; right:8px; height:40px; pointer-events:none;
  background:
    url(../assets/ui/corner-tl.png) top left no-repeat,
    url(../assets/ui/corner-tr.png) top right no-repeat;
  background-size:30px 30px; image-rendering:pixelated; opacity:.9;
}
/* battle arena framing: sconces + corner filigree */
#arena::before{
  content:''; position:absolute; inset:2px; pointer-events:none; z-index:1;
  background:
    url(../assets/ui/corner-tl.png) top left no-repeat,
    url(../assets/ui/corner-tr.png) top right no-repeat;
  background-size:38px 38px; image-rendering:pixelated; opacity:.55;
}
#arena::after{
  content:''; position:absolute; top:14px; left:52px; right:52px; height:34px; pointer-events:none;
  background:
    url(../assets/ui/sconce.png) left top no-repeat,
    url(../assets/ui/sconce.png) right top no-repeat;
  background-size:26px 34px; image-rendering:pixelated; opacity:.85;
}
#hero-tabs{display:flex; gap:10px; justify-content:center; margin-bottom:6px; min-height:40px;}
.htab{
  display:flex; align-items:center; gap:7px; padding:4px 15px 4px 6px; border-radius:24px;
  background:linear-gradient(180deg, rgba(40,30,16,.7), rgba(12,9,6,.9));
  border:1.5px solid rgba(226,200,150,.22);
  font-size:.85rem; color:var(--paper-dark); transition:all .15s;
  box-shadow:0 3px 10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,235,180,.08);
}
.htab img{height:30px;}
.htab .thp{color:#ff9d94;} .htab .tmana{color:#9fdcff;} .htab .trdy{color:#b8e08a; font-weight:bold;}
.htab.act{border-color:var(--gold); color:var(--paper);
  box-shadow:0 0 18px rgba(232,185,59,.35), inset 0 1px 0 rgba(255,235,180,.16);
  background:linear-gradient(180deg, rgba(74,52,22,.85), rgba(28,18,9,.95));}
.htab.downed{opacity:.45; filter:saturate(.3);}
.htab.foreign{cursor:default;}
#control-row{display:flex; align-items:center; justify-content:space-between; padding:0 26px 8px;}
#energy-orb{
  width:84px; height:84px; display:grid; place-items:center; position:relative;
  background:url(../assets/ui/orb.png) center/contain no-repeat;
  image-rendering:pixelated;
  filter:drop-shadow(0 8px 18px rgba(40,120,220,.4));
  font-family:'MedievalSharp',serif; font-size:1.9rem; color:#0b2038;
  font-weight:bold;
  text-shadow:0 1px 0 rgba(255,255,255,.55), 0 0 10px rgba(180,225,255,.6);
  animation:orbglow 3.2s ease-in-out infinite;
}
@keyframes orbglow{50%{filter:drop-shadow(0 8px 26px rgba(80,170,255,.65));}}
#energy-orb small{position:absolute; bottom:-18px; left:50%; transform:translateX(-50%);
  font-family:'Alegreya SC',serif; font-size:.66rem; letter-spacing:.28em; color:var(--mana); text-shadow:0 1px 4px #000; white-space:nowrap;}
#energy-orb.spent{filter:saturate(.25) brightness(.5); animation:none;}
.pile{position:relative; width:70px; text-align:center; line-height:1.2;
  font-family:'Alegreya SC',serif; font-size:.62rem; letter-spacing:.2em; color:#b8a882;
  text-transform:uppercase; text-shadow:0 1px 4px #000;}
.pile img{height:38px; image-rendering:pixelated; filter:drop-shadow(0 4px 6px rgba(0,0,0,.55));
  display:block; margin:0 auto 3px;}
.pile b{
  position:absolute; top:-8px; right:4px;
  font-family:'MedievalSharp',serif; font-size:.85rem; color:var(--ink);
  background:radial-gradient(circle at 35% 30%, #ffe9a8, var(--gold) 55%, #9c6d12);
  border:1.5px solid #7a4d10; border-radius:50%; min-width:24px; height:24px;
  display:grid; place-items:center; box-shadow:0 2px 6px rgba(0,0,0,.55); padding:0 3px;
}
#end-turn{
  display:flex; align-items:center; justify-content:center; gap:11px;
  padding:13px 30px; font-family:'MedievalSharp',serif; font-size:1.05rem; letter-spacing:.05em;
  color:#f4e2b8; text-shadow:0 1px 3px #000;
  background:linear-gradient(180deg, #64432a, #3e2814 52%, #24150a);
  border:2px solid #96703a; border-radius:10px; min-width:230px;
  box-shadow:0 5px 0 #180d05, 0 12px 28px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,235,180,.3), inset 0 0 22px rgba(0,0,0,.35);
  transition:transform .12s, filter .15s, box-shadow .12s;
  position:relative; overflow:hidden;
}
#end-turn img{height:28px; image-rendering:pixelated; filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));}
#end-turn::after{
  content:''; position:absolute; top:0; left:-90%; width:55%; height:100%;
  background:linear-gradient(105deg, transparent, rgba(255,235,180,.25), transparent);
  transform:skewX(-22deg); transition:left .5s ease; pointer-events:none;
}
#end-turn:hover::after{left:135%;}
#end-turn:hover{transform:translateY(-2px); filter:brightness(1.18); border-color:var(--gold);}
#end-turn:active{transform:translateY(2px); box-shadow:0 1px 0 #180d05, 0 6px 14px rgba(0,0,0,.5);}
#end-turn:disabled{opacity:.5; pointer-events:none; filter:saturate(.5);}

#hand{display:flex; justify-content:center; align-items:flex-end; min-height:calc(var(--card-h) + 30px); perspective:900px;}
.card{
  width:var(--card-w); height:var(--card-h); margin:0 -20px; position:relative; flex-shrink:0;
  border-radius:11px; padding:9px 10px 10px; text-align:center;
  background:
    radial-gradient(ellipse at 50% 12%, rgba(255,246,220,.22), rgba(243,227,194,.12) 55%),
    url(../assets/ui/card-paper.png?v=2) center / 100% 100% no-repeat,
    var(--paper);
  border:2px solid var(--edge,#6a4a2e);
  box-shadow:0 10px 26px rgba(0,0,0,.6), inset 0 0 0 4px rgba(255,255,255,.35), inset 0 0 26px rgba(106,74,46,.25);
  color:var(--ink); cursor:pointer;
  transform:rotate(var(--tilt,0deg)) translateY(var(--sink,0px));
  transition:transform .18s cubic-bezier(.2,1.4,.4,1), box-shadow .18s, filter .18s, margin .18s;
  animation:deal .35s var(--deal-delay,0s) backwards;
}
@keyframes deal{from{transform:translateY(130px) rotate(14deg); opacity:0}}
.card:hover{
  transform:rotate(0deg) translateY(-38px) scale(1.16); z-index:30;
  box-shadow:0 26px 50px rgba(0,0,0,.7), 0 0 30px var(--glow, rgba(232,185,59,.4)), inset 0 0 0 4px rgba(255,255,255,.4);
  margin:0 12px;
}
.card.unplayable{filter:saturate(.35) brightness(.72); cursor:not-allowed;}
.card.unplayable:hover{transform:rotate(var(--tilt)) translateY(-8px) scale(1.02);}
.card.played{animation:playcard .45s forwards; pointer-events:none;}
@keyframes playcard{
  40%{transform:translateY(-110px) scale(1.2) rotate(0deg); opacity:1}
  100%{transform:translateY(-190px) scale(.5) rotate(18deg); opacity:0}
}
.card.atk{--edge:#8e2b22; --glow:rgba(224,90,78,.5);}
.card.skl{--edge:#2e5e8a; --glow:rgba(90,167,232,.5);}
.card.pwr{--edge:#a07412; --glow:rgba(232,185,59,.6);}
.card .cost{
  position:absolute; top:-10px; left:-10px; width:36px; height:36px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #bfe2ff, var(--mana) 50%, #1d4e8a);
  border:2px solid #123458; font-family:'MedievalSharp',serif; font-size:1.2rem; color:#eaf6ff;
  display:grid; place-items:center; box-shadow:0 3px 8px rgba(0,0,0,.5); text-shadow:0 1px 3px rgba(0,20,50,.8);
}
.card .cname{
  font-family:'MedievalSharp',serif; font-size:.95rem; line-height:1.1; min-height:2.1em;
  display:flex; align-items:center; justify-content:center; letter-spacing:.01em;
  margin:0 -4px; padding:2px 6px; position:relative;
  background:linear-gradient(90deg, transparent, var(--band, rgba(138,90,46,.18)) 18%, var(--band, rgba(138,90,46,.18)) 82%, transparent);
  border-top:1px solid rgba(255,255,255,.25);
  border-bottom:1px solid rgba(106,74,46,.3);
  text-shadow:0 1px 0 rgba(255,250,235,.6);
}
.card.atk .cname{--band:rgba(200,80,60,.16);}
.card.skl .cname{--band:rgba(70,120,180,.15);}
.card.pwr .cname{--band:rgba(212,164,44,.22);}
/* epic (3+ cost) frame */
.card.epic{
  border-width:2.5px;
  box-shadow:0 10px 26px rgba(0,0,0,.6), 0 0 18px rgba(232,185,59,.28),
    inset 0 0 0 4px rgba(255,244,200,.5), inset 0 0 26px rgba(160,110,40,.3);
}
.card.epic .cost{background:radial-gradient(circle at 35% 30%, #ffe9a8, #e8b93b 50%, #9c6d12);
  color:var(--ink); border-color:#7a4d10; text-shadow:0 1px 0 rgba(255,255,255,.5);}
/* ---- rarity ---- */
.rgem{
  position:absolute; top:-8px; right:-7px; width:27px; height:27px; z-index:2;
  display:grid; place-items:center; font-size:.9rem; border-radius:50%;
  box-shadow:0 2px 6px rgba(0,0,0,.5);
}
.rgem.u{background:radial-gradient(circle at 35% 30%, #e8eef4, #9aa8b8 60%, #5a6878);
  color:#2a3440; border:1.5px solid #c8d4e0;}
.rgem.r{background:radial-gradient(circle at 35% 30%, #ffe9a8, #e8b93b 55%, #9c6d12);
  color:#4a3008; border:1.5px solid #ffd45e;
  animation:rgemglow 2.4s ease-in-out infinite;}
@keyframes rgemglow{50%{box-shadow:0 2px 6px rgba(0,0,0,.5), 0 0 14px rgba(232,185,59,.7);}}
.card.r-r{box-shadow:0 10px 26px rgba(0,0,0,.6), 0 0 14px rgba(232,185,59,.22),
  inset 0 0 0 4px rgba(255,255,255,.35), inset 0 0 26px rgba(160,110,40,.28);}
/* ---- upgrades ---- */
.card.up1 .cname{color:#5a3c10; text-shadow:0 1px 0 rgba(255,235,170,.8);}
.card.up2 .cname{color:#7a4a08;
  background:linear-gradient(90deg, transparent, rgba(232,185,59,.35) 18%, rgba(232,185,59,.35) 82%, transparent);}
/* upgraded numbers glow green, StS-style */
.card .upnum{color:#1e7e34; text-shadow:0 1px 0 rgba(180,255,190,.5);}
.uprider{
  margin-top:3px; font-style:normal; font-family:'Alegreya SC',serif; font-size:.7rem;
  letter-spacing:.08em; color:#8a5c10;
}
.upflavor{margin-top:2px; font-size:.74rem; color:#7a5a30;}
.card .ctext .exh{color:#7a3ca8; font-style:normal;}
.card .ctext .dsc{color:#8a6a3a; font-style:normal;}
.card.mini.maxed{opacity:.45; filter:saturate(.5); pointer-events:none; position:relative;}
/* power cards shimmer (::before — ::after is reserved for the touch hint) */
.card.pwr::before{
  content:''; position:absolute; inset:0; border-radius:9px; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,230,150,.22) 46%, rgba(255,246,210,.4) 50%, rgba(255,230,150,.22) 54%, transparent 70%);
  background-size:280% 280%;
  animation:pwrshine 3.4s ease-in-out infinite;
  mix-blend-mode:screen;
}
@keyframes pwrshine{0%{background-position:120% 0} 55%,100%{background-position:-80% 0}}
.card .art{
  line-height:0; margin:5px auto 6px; width:82%; padding:8px 0 6px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(106,74,46,.22), transparent 65%),
    linear-gradient(160deg, var(--artbg1,#f8ecd4), var(--artbg2,#eeD9ae));
  border:1.5px solid rgba(106,74,46,.55); border-radius:6px;
  box-shadow:inset 0 2px 8px rgba(106,74,46,.3), inset 0 0 0 1.5px rgba(255,250,225,.55);
}
.card .art img{height:70px; filter:drop-shadow(0 3px 3px rgba(0,0,0,.3));}
.card.atk .art{--artbg1:#f7d9c4; --artbg2:#eab694;}
.card.skl .art{--artbg1:#d6e4ef; --artbg2:#aecbde;}
.card.pwr .art{--artbg1:#fbe9b7; --artbg2:#f0cf7d;}
.card .ctext{font-size:.9rem; line-height:1.28; font-style:italic; color:#4a2c12;}
.card .ctext b{font-style:normal; color:#8e2b22;}
.card .ctype{
  position:absolute; bottom:6px; left:0; right:0; font-family:'Alegreya SC',serif;
  font-size:.64rem; letter-spacing:.34em; color:rgba(74,44,18,.55); text-transform:uppercase;
}

/* ---- LOG ---- */
#log{position:fixed; left:16px; bottom:14px; z-index:22; width:250px; font-size:.82rem;
  color:#e6d6a8; text-shadow:0 1px 4px #000; pointer-events:none; line-height:1.4;}
#log div{opacity:0; animation:logline .35s forwards;}
@keyframes logline{from{opacity:0; transform:translateX(-12px)} to{opacity:.9; transform:none}}

/* ---- OVERLAYS ---- */
.overlay{
  position:fixed; inset:0; z-index:40; display:none; flex-direction:column;
  align-items:center; justify-content:center; gap:8px;
  background:radial-gradient(ellipse at center, rgba(10,8,24,.55), rgba(4,3,12,.93) 75%);
  backdrop-filter:blur(3px);
}
.overlay.on{display:flex; animation:fadein .4s;}
@keyframes fadein{from{opacity:0}}
.ov-title{font-family:'MedievalSharp',serif; font-size:clamp(2rem,6vw,3.4rem); color:var(--gold);
  text-shadow:0 3px 0 #6d4410, 0 8px 30px rgba(0,0,0,.8); animation:fadeup .5s both;}
.ov-sub{font-style:italic; color:var(--paper-dark); font-size:1.06rem; animation:fadeup .5s .12s both; text-align:center; max-width:540px; padding:0 16px;}
.ov-sub b{color:var(--gold);}
#reward-cards{display:flex; gap:26px; margin:22px 0 8px;}
#reward-cards .card{margin:0; animation:deal .4s var(--deal-delay) backwards;}
#reward-cards .card:hover{margin:0; transform:translateY(-20px) scale(1.13) rotate(0deg);}

.confetti{position:fixed; top:-20px; z-index:65; width:10px; height:16px; pointer-events:none;
  animation:confall linear forwards;}
@keyframes confall{
  from{transform:translateY(0) rotate(0deg)}
  to{transform:translateY(110vh) rotate(720deg)}
}

/* ============ HUD EXTRAS ============ */
#deck-btn{font-size:.8rem;}
#relic-bar{display:flex; gap:6px; margin-left:auto; align-items:center; max-width:40vw; flex-wrap:wrap;}
#relic-bar img{height:30px; filter:drop-shadow(0 2px 4px #000); cursor:help; transition:transform .15s;}
#relic-bar img:hover{transform:scale(1.35);}

/* ============ BLOOD MOON ============ */
body.bloodmoon #moon{
  background:radial-gradient(circle at 38% 34%, #ffd0c0, #e05a4e 55%, #8e2222);
  box-shadow:0 0 70px 30px rgba(224,90,78,.4), 0 0 160px 80px rgba(224,60,40,.18);
}
body.bloodmoon #world{filter:hue-rotate(-18deg) saturate(1.15);}
#moon-banner{
  position:fixed; top:16%; left:50%; transform:translateX(-50%) scale(.6); z-index:58;
  font-family:'MedievalSharp',serif; font-size:1.7rem; color:#ffb0a0; pointer-events:none; opacity:0;
  text-shadow:0 0 24px rgba(224,90,78,.9), 0 3px 0 #4a0f0f;
  padding:10px 34px; border:2px solid rgba(224,90,78,.6); border-radius:50px;
  background:rgba(30,6,10,.75);
}
#moon-banner.show{animation:moonbanner 3s ease-out forwards;}
@keyframes moonbanner{
  0%{opacity:0; transform:translateX(-50%) scale(.6)}
  12%{opacity:1; transform:translateX(-50%) scale(1.06)}
  20%{transform:translateX(-50%) scale(1)}
  80%{opacity:1}
  100%{opacity:0; transform:translateX(-50%) scale(.98) translateY(-16px)}
}
.bm{color:#ff8a6a;}

/* ============ MAP ============ */
#map-screen{justify-content:flex-start; padding-top:58px; gap:2px;}
#map-title{font-family:'MedievalSharp',serif; font-size:1.9rem; color:var(--gold);
  text-shadow:0 3px 0 #6d4410, 0 8px 30px rgba(0,0,0,.8);}
#map-sub{font-style:italic; color:var(--paper-dark); font-size:.98rem; margin-bottom:8px;}
#map-panel{
  position:relative; width:min(800px, 96vw); flex:1; margin-bottom:16px;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(120,90,50,.14), transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(90,60,90,.12), transparent 55%),
    linear-gradient(165deg, rgba(36,28,19,.94), rgba(23,17,13,.96));
  border:3px double rgba(232,185,59,.55); border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.7), inset 0 0 90px rgba(0,0,0,.6);
  overflow-y:auto; overflow-x:hidden;
  scrollbar-width:thin; scrollbar-color:rgba(232,185,59,.4) transparent;
}
#map-panel::-webkit-scrollbar{width:9px;}
#map-panel::-webkit-scrollbar-thumb{background:rgba(232,185,59,.35); border-radius:5px;}
#map-panel::-webkit-scrollbar-track{background:rgba(0,0,0,.25);}
#map-scroll{position:relative; width:100%;}
#map-edges{position:absolute; top:0; left:0; width:100%; pointer-events:none;}
#map-edges .edge{stroke:rgba(226,200,150,.2); stroke-width:3; stroke-dasharray:2 9; stroke-linecap:round;}
#map-edges .edge.hot{
  stroke:rgba(232,185,59,.95); stroke-width:4.5; stroke-dasharray:10 8;
  filter:drop-shadow(0 0 6px rgba(232,185,59,.7));
  animation:edgeflow 1.2s linear infinite;
}
@keyframes edgeflow{to{stroke-dashoffset:-18;}}
#map-edges .edge.trod{stroke:rgba(126,196,74,.5); stroke-width:3.5; stroke-dasharray:none;}
#map-nodes{position:absolute; inset:0;}
.floor-line{position:absolute; left:74px; right:34px; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(226,200,150,.14) 20%, rgba(226,200,150,.14) 80%, transparent);}
.floor-num{
  position:absolute; left:26px; transform:translateY(-50%); pointer-events:none;
  font-family:'MedievalSharp',serif; font-size:1.05rem; color:rgba(226,200,150,.4);
  text-shadow:0 2px 4px #000;
}
.floor-num.boss-num{color:rgba(224,90,78,.75); font-size:1.4rem;}
.map-banner{
  position:absolute; left:50%; transform:translateX(-50%); pointer-events:none; white-space:nowrap;
  font-family:'Alegreya SC',serif; letter-spacing:.34em; font-size:.78rem; color:var(--paper-dark);
  text-shadow:0 2px 6px #000; padding:5px 26px;
  border-top:1px solid rgba(226,200,150,.3); border-bottom:1px solid rgba(226,200,150,.3);
}
.map-top{top:42px; color:#ff9d94; border-color:rgba(224,90,78,.4);}
.map-bottom{bottom:34px;}
.boss-glow{
  position:absolute; left:50%; width:340px; height:230px; transform:translate(-50%,-50%);
  background:radial-gradient(ellipse, rgba(224,60,40,.16), transparent 65%);
  pointer-events:none;
}
.mnode{
  position:absolute; transform:translate(-50%,-50%); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  opacity:.55; transition:all .22s; cursor:default; filter:saturate(.45);
  z-index:2;
}
.mn-ring{
  width:66px; height:66px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 35% 28%, #4a3c26, #241a10 75%);
  border:2.5px solid rgba(226,200,150,.4);
  box-shadow:0 8px 20px rgba(0,0,0,.6), inset 0 2px 8px rgba(255,240,200,.12), inset 0 -6px 12px rgba(0,0,0,.5);
  transition:all .22s;
}
.mnode img{height:40px; filter:drop-shadow(0 3px 4px rgba(0,0,0,.6));}
.mn-label{font-family:'Alegreya SC',serif; font-size:.62rem; letter-spacing:.16em;
  color:var(--paper-dark); text-transform:uppercase; text-shadow:0 1px 3px #000;}
.mnode.t-boss .mn-ring{width:96px; height:96px; border-color:rgba(224,90,78,.6);
  background:radial-gradient(circle at 35% 28%, #4a2620, #240f0c 75%);}
.mnode.t-boss img{height:62px;}
.mnode.t-boss .mn-label{color:#ff9d94; font-size:.7rem;}
.mnode.t-elite .mn-ring{border-color:rgba(224,90,78,.5);}
.mnode.t-elite .mn-label{color:#ff9d94;}
.mnode.t-rest .mn-ring{border-color:rgba(126,196,74,.4);}
.mnode.t-shop .mn-ring, .mnode.t-treasure .mn-ring{border-color:rgba(232,185,59,.5);}
.mnode.avail{opacity:1; cursor:pointer; filter:none;}
.mnode.avail .mn-ring{
  border-color:var(--gold);
  box-shadow:0 8px 24px rgba(0,0,0,.65), 0 0 26px rgba(232,185,59,.4), inset 0 2px 8px rgba(255,240,200,.2);
}
.mnode.avail::before{
  content:''; position:absolute; top:33px; left:50%; width:82px; height:82px;
  transform:translate(-50%,-50%); border-radius:50%;
  border:2.5px solid rgba(232,185,59,.6); pointer-events:none;
  animation:nodepulse 1.6s ease-in-out infinite;
}
.mnode.t-boss.avail::before{width:116px; height:116px; top:48px;}
@keyframes nodepulse{0%,100%{transform:translate(-50%,-50%) scale(.94); opacity:.45} 50%{transform:translate(-50%,-50%) scale(1.1); opacity:1}}
.mnode.avail:hover{transform:translate(-50%,-52%) scale(1.12);}
.mnode.avail:hover .mn-ring{box-shadow:0 14px 30px rgba(0,0,0,.7), 0 0 40px rgba(232,185,59,.6);}
.mnode.done{opacity:.8; filter:saturate(.7);}
.mnode.done .mn-ring{border-color:rgba(126,196,74,.5);}
.mnode.done .mn-ring::after{content:'✓'; position:absolute; top:-6px; right:-4px; color:#b8e08a;
  font-size:1rem; text-shadow:0 1px 3px #000; background:rgba(10,20,8,.85); border-radius:50%;
  width:20px; height:20px; display:grid; place-items:center; border:1px solid rgba(126,196,74,.5);}
.mn-ring{position:relative;}
.mnode.here{opacity:1; filter:none;}
.mnode.here .mn-ring{border-color:#b8e08a; box-shadow:0 8px 24px rgba(0,0,0,.65), 0 0 26px rgba(126,196,74,.45);}
.mnode.here::after{content:'🏴'; position:absolute; top:-20px; right:-8px; font-size:1.25rem;
  filter:drop-shadow(0 2px 3px #000); animation:flagwave 2s ease-in-out infinite;}
@keyframes flagwave{0%,100%{transform:rotate(-6deg)} 50%{transform:rotate(8deg)}}

/* ============ SHOP ============ */
.shop-frame{
  width:min(860px,96vw); max-height:92vh; overflow:hidden; display:flex; flex-direction:column; padding:24px 30px;
  background:linear-gradient(165deg, rgba(30,24,16,.97), rgba(22,16,12,.97));
  border:3px double var(--gold); border-radius:14px;
  box-shadow:0 30px 80px rgba(0,0,0,.8);
}
.shop-head{display:flex; gap:20px; align-items:center; margin-bottom:8px;}
.shop-head img{height:90px;}
.shop-quote{font-style:italic; color:#c4b894; font-size:.92rem;}
#shop-gold{font-family:'MedievalSharp',serif; color:var(--gold); font-size:1.3rem; margin-top:4px;}
.shop-section{font-family:'Alegreya SC',serif; letter-spacing:.3em; text-transform:uppercase;
  font-size:.8rem; color:var(--paper-dark); margin:14px 0 8px; text-align:center;
  padding-bottom:15px;
  background:url(../assets/ui/divider.png) bottom center/150px 12px no-repeat;
  image-rendering:pixelated;}
.shop-note{letter-spacing:.02em; text-transform:none; font-family:'Alegreya',serif; font-style:italic; font-size:.85rem;}
#shop-cards{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.shop-item{position:relative; text-align:center;}
.shop-item .card{margin:0; transform:scale(.92); animation:none;}
.shop-item .card:hover{margin:0; transform:scale(1.02) translateY(-8px);}
.shop-item.sold{opacity:.35; filter:saturate(0); pointer-events:none;}
.shop-item .price{font-family:'MedievalSharp',serif; color:var(--gold); margin-top:2px;}
.shop-item .price.broke{color:#e05a4e;}
#shop-relics{display:flex; gap:14px; flex-wrap:wrap;}
.shop-relic{
  flex:1 1 300px; display:flex; gap:12px; align-items:center; padding:10px 14px; cursor:pointer;
  background:rgba(0,0,0,.35); border:1.5px solid rgba(226,200,150,.3); border-radius:10px;
  transition:all .15s; font-size:.86rem; color:#d8c8a0;
}
.shop-relic b{color:var(--paper); font-family:'MedievalSharp',serif;}
.shop-relic img{height:44px;}
.shop-relic:hover{border-color:var(--gold); box-shadow:0 0 16px rgba(232,185,59,.25); transform:translateY(-2px);}
.shop-relic.sold{opacity:.35; filter:saturate(0); pointer-events:none;}
.shop-relic.broke{cursor:not-allowed;}
.shop-relic .price{margin-left:auto; font-family:'MedievalSharp',serif; color:var(--gold); white-space:nowrap;}
.shop-row{display:flex; gap:16px; justify-content:center; margin-top:18px;}
#shop-remove:disabled{opacity:.45;}

/* ============ EVENT ============ */
.event-frame{
  width:min(560px,94vw); padding:30px 36px; text-align:center;
  background:linear-gradient(165deg, rgba(26,22,34,.97), rgba(18,14,24,.97));
  border:3px double rgba(180,138,224,.55); border-radius:14px;
  box-shadow:0 30px 80px rgba(0,0,0,.8);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
#event-icon{height:64px;}
#event-choices{display:flex; flex-direction:column; gap:10px; width:100%; align-items:center;}
.evchoice{width:88%; font-size:.95rem; padding:11px 18px;}
#event-result{min-height:24px;}

/* ============ REST ============ */
#rest-choices{display:flex; flex-direction:column; gap:14px; margin:14px 0;}
.rest-row{display:flex; gap:14px; align-items:center; justify-content:center;}
.rest-name{font-family:'MedievalSharp',serif; color:var(--paper); min-width:160px; text-align:right;}
.rest-done{color:#b8e08a;}
.rest-row .btn-big{padding:9px 20px; font-size:.95rem;}

/* ============ DECK VIEWER / PICKER ============ */
.deck-frame{
  width:min(900px,96vw); max-height:90vh; overflow:hidden; display:flex; flex-direction:column; padding:24px 30px; text-align:center;
  background:linear-gradient(165deg, rgba(24,20,30,.97), rgba(16,13,20,.97));
  border:3px double rgba(232,185,59,.5); border-radius:14px;
  box-shadow:0 30px 80px rgba(0,0,0,.8);
}
.deck-frame .btn-big, .deck-frame .btn-ghost{align-self:center;}
#deck-relics{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin:12px 0; color:#c4b894;}
#deck-relics .shop-relic{flex:0 1 380px; cursor:default;}
#deck-relics .shop-relic:hover{transform:none; border-color:rgba(226,200,150,.3); box-shadow:none;}
#deck-cards, #picker-cards{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:14px 0;}
.card.mini{
  margin:0; transform:scale(.82); transform-origin:center; animation:none;
  margin:-14px -10px;
}
.card.mini:hover{transform:scale(.94) translateY(-6px); z-index:5; margin:-14px -10px;}
.card.crs{--edge:#5a3a6e; --glow:rgba(180,138,224,.5); filter:saturate(.6) brightness(.9);}
.card.crs .art{--artbg1:#d8c8e4; --artbg2:#b49cc8;}

/* ============ CHAT ============ */
#chat-box{position:fixed; right:14px; bottom:12px; z-index:45; width:250px; display:none;
  flex-direction:column; gap:6px;}
#chat-box.on{display:flex;}
#chat-log{display:flex; flex-direction:column; gap:3px; font-size:.83rem; color:#e6d6a8;
  text-shadow:0 1px 3px #000; max-height:180px; overflow:hidden;}
#chat-log b.me{color:#9fdcff;} #chat-log b.ally{color:#ffd45e;}
#chat-input{
  padding:7px 12px; font-size:.85rem; border-radius:18px; outline:none;
  background:rgba(8,6,18,.8); color:var(--paper);
  border:1.5px solid rgba(226,200,150,.3);
}
#chat-input:focus{border-color:var(--gold); box-shadow:0 0 12px rgba(232,185,59,.25);}

/* ============ TOUCH SUPPORT ============ */
*{-webkit-tap-highlight-color:transparent;}
button, .card, .mnode, .hero-card, .shop-relic, .htab{touch-action:manipulation;}
#toast{
  position:fixed; top:56px; left:50%; transform:translateX(-50%); z-index:70;
  max-width:min(420px, 90vw); padding:10px 20px; border-radius:12px; text-align:center;
  font-size:.9rem; color:var(--paper); pointer-events:none; opacity:0;
  background:rgba(10,8,20,.94); border:1.5px solid rgba(232,185,59,.55);
  box-shadow:0 10px 30px rgba(0,0,0,.6);
}
#toast b{color:var(--gold);}
#toast.show{animation:toastin 3.2s ease-out forwards;}
@keyframes toastin{
  0%{opacity:0; transform:translateX(-50%) translateY(-8px)}
  8%{opacity:1; transform:translateX(-50%) translateY(0)}
  80%{opacity:1} 100%{opacity:0}
}
/* on touch devices: neutralize hover-raise (tap-to-inspect replaces it) */
@media (hover:none){
  .card:hover{
    transform:rotate(var(--tilt,0deg)) translateY(var(--sink,0px)); margin:0 -14px; z-index:auto;
    box-shadow:0 10px 26px rgba(0,0,0,.6), inset 0 0 0 4px rgba(255,255,255,.35), inset 0 0 26px rgba(106,74,46,.25);
  }
  #reward-cards .card:hover, .shop-item .card:hover{transform:none; margin:0;}
  .card.mini:hover{transform:scale(.82); margin:-14px -10px;}
  .mnode.avail:hover{transform:translate(-50%,-50%);}
}
/* inspected card (first tap on touch): readable zoom, second tap confirms */
.card.insp{
  transform:rotate(0deg) translateY(-52px) scale(1.5)!important;
  z-index:44!important; margin:0 14px!important;
  box-shadow:0 30px 60px rgba(0,0,0,.75), 0 0 34px var(--glow, rgba(232,185,59,.5)),
    inset 0 0 0 4px rgba(255,255,255,.45)!important;
  outline:2px solid var(--gold);
}
.card.insp::after{
  content:'tap again ▸'; position:absolute; top:-20px; left:50%; transform:translateX(-50%);
  font-family:'Alegreya SC',serif; font-size:.5rem; letter-spacing:.2em; white-space:nowrap;
  color:var(--gold); text-shadow:0 1px 3px #000;
}
.card.mini.insp{transform:scale(1.15) translateY(-14px)!important; z-index:44!important;}
.shop-item .card.insp, #reward-cards .card.insp{transform:scale(1.3) translateY(-30px)!important;}

/* ============ RESPONSIVE — TABLET ============ */
@media (max-width:820px){
  :root{--card-w:116px; --card-h:172px;}
  .sprite{height:84px!important;}
  #enemy-zone .sprite{height:100px!important;}
  #enemy-zone .sprite.big{height:128px!important;}
  #arena{padding:0 2% 2vh;}
  .fighter{width:150px;}
  .fighter.duo{width:112px;}
  .mini-hp{width:100px;}
  .card .art img{height:44px;}
  .card .cname{font-size:.74rem;}
  .card .ctext{font-size:.68rem;}
  #log{display:none;}
  .hero-card{width:170px;}
  .hc-blurb{display:none;}
  #chat-box{top:52px; right:8px; bottom:auto; width:190px;}
  #chat-log{max-height:110px; font-size:.75rem;}
  #chat-input{font-size:.78rem; padding:6px 10px;}
}

/* ============ RESPONSIVE — PHONE ============ */
@media (max-width:560px){
  :root{--card-w:88px; --card-h:128px; font-size:14px;}
  .screen{padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right);}
  /* HUD */
  #hud{padding:5px 8px; gap:6px;}
  #hud .game-name{display:none;}
  .hud-chip{padding:3px 10px; font-size:.74rem; gap:5px;}
  .hud-chip img{height:16px;}
  #deck-btn{font-size:.66rem;}
  #relic-bar img{height:22px;}
  /* title */
  .title-frame{padding:22px 18px 20px; margin:0 8px;}
  .title-heroes{gap:10px; min-height:56px;}
  .title-heroes img{height:48px;}
  .howto{font-size:.82rem; max-width:none;}
  .mode-row{flex-direction:column; gap:10px; align-items:stretch;}
  .btn-big{padding:12px 18px; font-size:1rem;}
  /* hero select */
  #select-title{font-size:1.5rem;}
  #hero-grid{gap:10px;}
  .hero-card{width:44vw; min-width:140px; padding:12px 8px 10px;}
  .hero-card img{height:64px;}
  .hc-mech{font-size:.68rem;}
  /* map */
  #map-screen{padding-top:52px;}
  #map-title{font-size:1.2rem;}
  #map-panel{width:96vw;}
  .mn-ring{width:56px; height:56px;}
  .mnode img{height:34px;}
  .mnode.t-boss .mn-ring{width:80px; height:80px;}
  .mnode.t-boss img{height:52px;}
  .mn-label{font-size:.54rem;}
  .floor-num{left:12px; font-size:.85rem;}
  .floor-line{left:44px; right:16px;}
  .map-banner{font-size:.6rem; letter-spacing:.2em; padding:4px 14px;}
  /* battle */
  #battle-screen{padding-top:46px;}
  #stage-title{font-size:.64rem; letter-spacing:.2em; padding:0 8px; text-align:center;}
  #arena{max-height:34vh; padding:0 1% 1vh;}
  .sprite{height:58px!important;}
  .enemy-f .sprite{height:76px!important;}
  .enemy-f .sprite.big{height:100px!important;}
  #enemies-col[data-count="2"] .sprite{height:62px!important;}
  #enemies-col[data-count="3"] .sprite{height:52px!important;}
  #enemies-col[data-count="2"] .fighter{width:108px;}
  #enemies-col[data-count="3"] .fighter{width:88px;}
  .enemy-f .intent{top:-40px; padding:2px 6px; gap:3px;}
  #playline{bottom:240px;}
  #turn-banner{font-size:1.4rem;}
  .fighter{width:104px;}
  .fighter.duo{width:86px;}
  .fighter-name{font-size:.7rem; margin-top:4px;}
  .mini-hp{width:74px; height:8px;}
  .mini-hp.pro{width:92px; height:13px;}
  .hp-num{font-size:.58rem;}
  #round-pill{font-size:.52rem; letter-spacing:.18em;}
  .mini-num{font-size:.66rem;}
  .chip{font-size:.6rem; padding:1px 6px;}
  .status-row{min-height:18px; gap:3px;}
  #vs{display:none;}
  #intent{padding:3px 8px; top:-42px; gap:4px;}
  .intent-pill{padding:2px 7px; font-size:.75rem; gap:3px;}
  .intent-pill img{height:13px;}
  .intent-target img{height:16px;}
  .intent-target{font-size:.7rem;}
  .intent-label{display:none;}
  #heroes-col{gap:2px;}
  /* controls + hand */
  #hero-tabs{gap:6px; min-height:32px;}
  .htab{padding:2px 8px 2px 4px; font-size:.68rem; gap:4px;}
  .htab img{height:20px;}
  #control-row{padding:0 8px 6px;}
  #energy-orb{width:58px; height:58px; font-size:1.3rem;}
  #energy-orb small{font-size:.5rem; bottom:-13px;}
  .pile{width:48px; font-size:.5rem;}
  .pile img{height:28px;}
  .pile b{font-size:.7rem; min-width:19px; height:19px; top:-6px; right:0;}
  #end-turn{min-width:128px; padding:10px 10px; font-size:.8rem; gap:6px;}
  #end-turn img{height:20px;}
  #battle-bottom{padding-top:8px;}
  #stage-title{background-size:120px 10px; padding-bottom:13px;}
  #hand{flex-wrap:wrap; row-gap:6px; min-height:calc(var(--card-h) + 14px); padding-top:4px;}
  .card{margin:0 -8px; padding:6px 6px 8px;}
  .card:hover{margin:0 -8px;}
  .card .cost{width:24px; height:24px; font-size:.85rem; top:-7px; left:-7px;}
  .card .cname{font-size:.58rem; min-height:1.9em;}
  .card .art{margin:3px auto 4px; padding:5px 0 4px;}
  .card .art img{height:26px;}
  .card .ctext{font-size:.52rem; line-height:1.2;}
  .card .ctype{font-size:.44rem;}
  .card.insp{transform:rotate(0deg) translateY(-40px) scale(1.6)!important;}
  /* overlays */
  .ov-title{font-size:1.6rem;}
  .ov-sub{font-size:.9rem;}
  #reward-cards{gap:8px; margin:12px 0 6px; flex-wrap:wrap; justify-content:center;}
  .shop-frame, .deck-frame, .event-frame{padding:14px 12px; max-height:92dvh;}
  .shop-head img{height:56px;}
  .shop-head{gap:12px;}
  #shop-cards{gap:6px;}
  .shop-item .card{transform:scale(.88);}
  .shop-relic{flex:1 1 100%; padding:8px 10px; font-size:.76rem; gap:8px;}
  .shop-relic img{height:34px;}
  .shop-row{flex-wrap:wrap; gap:8px;}
  .rest-row{flex-wrap:wrap; gap:8px;}
  .rest-name{min-width:100%; text-align:center;}
  .rest-row .btn-big{padding:9px 14px; font-size:.85rem;}
  .evchoice{width:100%; font-size:.85rem; padding:10px 12px;}
  .card.mini{transform:scale(.78); margin:-16px -12px;}
  .join-row{flex-wrap:wrap;}
  .panel{padding:22px 18px; margin:0 8px;}
  #moon-banner{font-size:1rem; padding:8px 18px; width:max-content; max-width:92vw; white-space:normal; text-align:center;}
  #chat-box{width:160px;}
  #toast{top:44px; font-size:.78rem;}
}
/* short landscape phones */
@media (max-height:460px){
  #battle-screen{padding-top:40px;}
  #arena{max-height:30vh;}
  .sprite{height:52px!important;}
  .enemy-f .sprite{height:66px!important;}
  .enemy-f .sprite.big{height:82px!important;}
  :root{--card-h:118px; --card-w:84px;}
  .card .ctext{font-size:.5rem;}
  #hand{min-height:calc(var(--card-h) + 8px);}
  #map-screen{padding-top:44px;}
}

/* ============ RESPONSIVE — LANDSCAPE PHONES (short viewports) ============
   Phones held sideways are WIDE but very short (~360-430px tall), so the
   width-based breakpoints never fire. Everything here keys on height. */
@media (max-height:540px){
  :root{--card-w:88px; --card-h:126px; font-size:13px;}
  /* slim HUD */
  #hud{padding:2px 8px; gap:6px;}
  #hud .game-name{display:none;}
  .hud-chip{padding:2px 8px; font-size:.7rem; gap:4px;}
  .hud-chip img{height:14px;}
  #relic-bar img{height:18px;}
  /* title fits one short screen */
  .title-frame{padding:12px 24px 12px; margin:0 10px;}
  h1.logo{font-size:2rem;}
  .overline{font-size:.58rem; letter-spacing:.3em;}
  .subtitle{font-size:.78rem;}
  .title-heroes{min-height:0; gap:10px; margin:4px 0 2px;}
  .title-heroes img{height:36px !important;}
  .howto{display:none;}
  .mode-row{margin-top:8px; gap:8px;}
  .btn-big{padding:8px 16px; font-size:.9rem;}
  #btn-grimoire{margin-top:6px !important; padding:4px 12px;}
  /* hero select (screen scrolls) */
  #select-screen{padding:38px 0 14px;}
  #select-title{font-size:1.4rem;}
  .hero-card{width:150px; padding:8px;}
  .hero-card img{height:52px;}
  .hc-blurb{display:none;}
  /* map */
  #map-screen{padding-top:32px;}
  #map-title{font-size:1.05rem;}
  #map-sub{font-size:.72rem; margin-bottom:2px;}
  /* battle — the important one */
  #battle-screen{padding-top:24px;}
  #stage-title{font-size:.56rem; letter-spacing:.18em; margin-bottom:0; padding:0 6px 3px; background:none;}
  #round-pill{font-size:.5rem; margin:0 0 2px;}
  #arena{flex:1; max-height:none; min-height:0; padding:0 3% .5vh;}
  .sprite{height:52px!important;}
  .enemy-f .sprite{height:64px!important;}
  .enemy-f .sprite.big{height:84px!important;}
  .fighter{width:110px;}
  .fighter-name{font-size:.6rem;}
  .mini-hp{width:76px;}
  .enemy-f .intent{top:-28px; padding:2px 7px;}
  .status-row{min-height:13px; gap:2px;}
  .chip{font-size:.56rem; padding:1px 5px;}
  #arena::after{display:none;}
  #battle-bottom{padding:4px 0 3px;}
  #hero-tabs{min-height:0; margin-bottom:2px;}
  .htab{padding:2px 8px 2px 4px; font-size:.64rem;}
  .htab img{height:18px;}
  #control-row{padding:0 10px 2px;}
  #energy-orb{width:44px; height:44px; font-size:1rem;}
  #energy-orb small{display:none;}
  .pile{width:42px; font-size:.48rem;}
  .pile img{height:22px;}
  .pile b{min-width:16px; height:16px; font-size:.62rem; top:-5px;}
  #end-turn{min-width:0; padding:6px 14px; font-size:.78rem; gap:6px;}
  #end-turn img{height:16px;}
  .pslot{width:30px; height:30px; border-radius:8px;}
  .pslot.filled img{height:20px;}
  #hand{min-height:calc(var(--card-h) + 4px); margin-bottom:12px;}
  /* shallower fan so edge cards don't dip off-screen */
  .card{transform:rotate(var(--tilt,0deg)) translateY(calc(var(--sink,0px) * .5));}
  .card:hover{transform:rotate(0) translateY(-12px) scale(1.05); margin:0 4px;}
  .card .art{margin:2px auto 3px; padding:4px 0 3px;}
  .card .art img{height:34px;}
  .card .cname{font-size:.6rem; min-height:1.8em; padding:1px 4px;}
  .card .ctext{font-size:.55rem; line-height:1.18;}
  .card .cost{width:22px; height:22px; font-size:.85rem; top:-7px; left:-7px;}
  .card .ctype{display:none;}
  .rgem{width:17px; height:17px; font-size:.6rem; top:-6px; right:-5px;}
  .uprider{font-size:.5rem;}
  .upflavor{display:none;}
  #log{display:none;}
  /* overlays */
  .ov-title{font-size:1.4rem!important;}
  .ov-sub{font-size:.78rem;}
  .ov-icon{height:40px; margin-bottom:0;}
  #pause-frame{padding:10px 24px 8px;}
  #pause-col{gap:6px; margin:8px 0 6px; min-width:230px;}
  #pause-col .btn-big{padding:6px 12px;}
  #reward-cards{gap:12px; margin:8px 0 4px;}
  #discover-cards{gap:12px; margin:8px 0 4px;}
  .shop-frame, .deck-frame{max-height:97vh; padding:10px 16px;}
  .shop-head img{height:40px;}
  .shop-head .ov-title{font-size:1.2rem!important;}
  #event-icon{height:52px;}
  #event-choices .btn-big{padding:6px 12px; font-size:.82rem;}
  /* tome */
  #grimoire-screen{padding-top:6px; gap:6px;}
  #grimoire-title{font-size:1.15rem;}
  .gtab{padding:3px 10px; font-size:.7rem;}
  #grimoire-panel{margin-bottom:8px; padding:10px 6px 10px 14px;}
}