/* ================================================================
   DECK & DRAGONS — polish layer (after style.css)
   Fluid battle layout driven by --card-w / --card-h / --spr / --ctrl-h,
   which js/polish.js sets from the viewport. Card internals are in em,
   so a card's text scales with the card.
   ================================================================ */

/* ---------------------------------------------------------------- screens fade in */
.screen.enter{animation:screenin .38s cubic-bezier(.2,.7,.2,1);}
@keyframes screenin{from{opacity:0; transform:scale(1.015); filter:blur(3px);}}

/* ---------------------------------------------------------------- cards, em-based */
.card{
  font-size:calc(var(--card-w) * .094);
  padding:.56em .62em .62em; border-radius:.7em;
  margin:0 var(--ov, -1.25em);
}
.card:hover{margin:0 max(.25em, calc(var(--ov, -1.25em) + 2em));}
.card .cost{top:-.62em; left:-.62em; width:1.875em; height:1.875em; font-size:1.2em;}
.card .cname{font-size:.95em;}
.card .ctext{font-size:.9em;}
.card .ctype{font-size:.64em; bottom:.6em;}
.card .art{margin:.31em auto .375em; padding:.5em 0 .375em;}
.card .art img{height:4.4em;}
.card .rgem{width:1.69em; height:1.69em; top:-.5em; right:-.44em; font-size:.9em;}
.card .uprider{font-size:.7em;}
.card .upflavor{font-size:.74em;}
/* overlays show bigger, readable cards (reward, discover, shop, forge) */
#reward-cards .card, #discover-cards .card, .shop-item .card, #forge-compare .card{--card-w:var(--card-w-big); --card-h:calc(var(--card-w-big) * 1.435);}
.card.unplayable{filter:saturate(.3) brightness(.62);}
/* a playable card breathes a faint rim light so it is obvious what you can afford */
body:not(.foe-turn) #hand .card:not(.unplayable){box-shadow:0 10px 26px rgba(0,0,0,.6), 0 0 0 1px rgba(255,230,160,.25), 0 0 16px var(--glow, rgba(232,185,59,.25)), inset 0 0 0 4px rgba(255,255,255,.35), inset 0 0 26px rgba(106,74,46,.25);}
body.foe-turn #hand{filter:brightness(.6) saturate(.6); transition:filter .4s;}

/* ---------------------------------------------------------------- battle layout */
#battle-screen{height:100vh; height:100dvh; padding-top:var(--hud-h,56px); justify-content:flex-start;}
#stage-title{font-size:clamp(.5rem, 1.5vh, .85rem); margin-bottom:0; padding-bottom:clamp(8px, 1.6vh, 16px);}
#round-pill{font-size:clamp(.5rem, 1.25vh, .72rem);}
#arena{flex:1 1 auto; min-height:0; max-height:none; width:min(1180px, 98vw); padding:0 4% clamp(4px, 1.2vh, 18px); overflow:visible;}
.sprite, .fighter.duo .sprite, #heroes-col .sprite{height:var(--spr)!important;}
#heroes-col[data-count="3"] .sprite{height:calc(var(--spr) * .78)!important;}
#heroes-col[data-count="4"] .sprite{height:calc(var(--spr) * .64)!important;}
.enemy-f .sprite, #enemies-col .sprite{height:calc(var(--spr) * 1.12)!important;}
.enemy-f .sprite.big, #enemies-col .sprite.big{height:calc(var(--spr) * 1.45)!important;}
#enemies-col[data-count="2"] .sprite{height:calc(var(--spr) * .95)!important;}
#enemies-col[data-count="2"] .sprite.big{height:calc(var(--spr) * 1.2)!important;}
#enemies-col[data-count="3"] .sprite{height:calc(var(--spr) * .8)!important;}
#enemies-col[data-count="3"] .sprite.big{height:calc(var(--spr) * 1.02)!important;}
.fighter, .fighter.duo, #heroes-col .fighter, #enemies-col .fighter{width:auto!important; min-width:calc(var(--spr) * .9); padding:0 clamp(2px, .8vw, 12px);}
.fighter-name{font-size:clamp(.6rem, 1.65vh, 1.02rem)!important; margin-top:clamp(2px, .7vh, 10px); padding:1px clamp(8px, 1vw, 16px);}
.mini-hp, .mini-hp.pro{width:clamp(64px, calc(var(--spr) * .95), 160px)!important;}
.status-row{min-height:clamp(14px, 2.4vh, 26px);}

#battle-bottom{margin-top:0; flex:none; width:min(1180px, 100vw); padding:clamp(4px, 1vh, 14px) 0 0;}
#hero-tabs{min-height:0; margin-bottom:clamp(2px, .6vh, 6px);}
#hero-tabs:empty{display:none;}
.htab{font-size:clamp(.66rem, 1.5vh, .85rem); padding:2px 12px 2px 4px;}
.htab img{height:clamp(20px, 3.2vh, 30px);}
#control-row{height:var(--ctrl-h); padding:0 clamp(8px, 2.4vw, 28px) clamp(2px, .6vh, 8px); gap:clamp(6px, 1.4vw, 20px);}
#energy-orb{width:calc(var(--ctrl-h) * .98); height:calc(var(--ctrl-h) * .98); font-size:calc(var(--ctrl-h) * .34); flex:none;}
#energy-orb small{bottom:calc(var(--ctrl-h) * -.2); font-size:clamp(.5rem, calc(var(--ctrl-h) * .13), .66rem);}
.pile{width:auto; min-width:calc(var(--ctrl-h) * .7); font-size:clamp(.5rem, calc(var(--ctrl-h) * .12), .62rem);}
.pile img{height:calc(var(--ctrl-h) * .46);}
#end-turn{min-width:clamp(118px, 22vw, 240px); padding:calc(var(--ctrl-h) * .14) calc(var(--ctrl-h) * .3); font-size:clamp(.78rem, calc(var(--ctrl-h) * .2), 1.08rem); gap:calc(var(--ctrl-h) * .12);}
#end-turn img{height:calc(var(--ctrl-h) * .34);}
#potion-belt .pslot{width:calc(var(--ctrl-h) * .55); height:calc(var(--ctrl-h) * .55);}
#hand{min-height:0; height:calc(var(--card-h) + 36px); align-items:flex-start; padding-top:4px;}
body.short #stage-title{display:none;}
body.tiny #round-pill{display:none;}

/* ---------------------------------------------------------------- damage preview */
.mini-hp{position:relative;}
.mini-hp .incoming{position:absolute; top:0; bottom:0; z-index:2; pointer-events:none;
  background:repeating-linear-gradient(-45deg, rgba(255,210,200,.85) 0 4px, rgba(255,90,70,.75) 4px 8px);
  box-shadow:0 0 8px rgba(255,80,60,.8); animation:incpulse 1s ease-in-out infinite;}
@keyframes incpulse{50%{opacity:.55;}}
.inc-tag{font-family:'MedievalSharp',serif; font-size:clamp(.62rem, 1.5vh, .82rem); line-height:1; padding:3px 7px; border-radius:10px; white-space:nowrap; display:none;}
.inc-tag.hurt{display:block; color:#ffd0c8; background:rgba(120,20,16,.85); border:1px solid rgba(255,120,100,.6);}
.inc-tag.lethal{display:block; color:#fff; background:#b0151a; border:1px solid #ff8a7a; animation:lethal .7s ease-in-out infinite;}
.inc-tag.safe{display:block; color:#cfe6f7; background:rgba(20,40,70,.8); border:1px solid rgba(120,180,230,.5);}
@keyframes lethal{50%{transform:scale(1.12); box-shadow:0 0 14px rgba(255,40,40,.9);}}
.enemy-f .intent.danger{border-color:#ff6b50; animation:intdanger 1.1s ease-in-out infinite;}
@keyframes intdanger{50%{box-shadow:0 6px 20px rgba(0,0,0,.6), 0 0 18px rgba(255,80,50,.75); transform:translateX(-50%) scale(1.08);}}

/* ---------------------------------------------------------------- glossary */
#glossary{position:fixed; z-index:90; pointer-events:none; opacity:0; transform:translateY(6px); transition:opacity .15s, transform .15s;
  background:linear-gradient(180deg, rgba(36,26,14,.97), rgba(16,11,6,.97)); border:1.5px solid rgba(232,185,59,.5);
  border-radius:10px; padding:8px 11px; box-shadow:0 14px 34px rgba(0,0,0,.7); font-size:.82rem; line-height:1.3;}
#glossary.on{opacity:1; transform:none;}
#glossary div{padding:4px 0;} #glossary div + div{border-top:1px solid rgba(232,185,59,.15);}
#glossary b{display:block; font-family:'MedievalSharp',serif; color:var(--gold); font-weight:normal; font-size:.92rem;}
#glossary span{color:#e8d8b4;}

/* ---------------------------------------------------------------- combat juice */
.slash{position:fixed; z-index:62; width:0; height:0; pointer-events:none; transform:rotate(var(--rot,-25deg));}
.slash i{position:absolute; left:-70px; width:140px; height:4px; border-radius:4px;
  background:linear-gradient(90deg, transparent, var(--sc,#fff4d6) 30%, #fff 50%, var(--sc,#fff4d6) 70%, transparent);
  box-shadow:0 0 12px var(--sc,#fff4d6); transform:scaleX(0); animation:slashline .38s cubic-bezier(.2,.9,.3,1) forwards;}
.slash i:nth-child(1){top:-16px; animation-delay:0s;}
.slash i:nth-child(2){top:0; animation-delay:.04s; width:170px; left:-85px;}
.slash i:nth-child(3){top:16px; animation-delay:.08s;}
@keyframes slashline{0%{transform:scaleX(0); opacity:1} 45%{transform:scaleX(1); opacity:1} 100%{transform:scaleX(1.1) translateX(20px); opacity:0}}
#arena.bigshake{animation:bigshake .5s;}
@keyframes bigshake{
  0%,100%{transform:translate(0,0)} 10%{transform:translate(-16px,8px) rotate(-.6deg)} 25%{transform:translate(14px,-9px) rotate(.5deg)}
  40%{transform:translate(-11px,-6px)} 55%{transform:translate(9px,7px)} 70%{transform:translate(-6px,3px)} 85%{transform:translate(4px,-2px)}}
.wisp{position:fixed; z-index:61; width:22px; height:30px; margin:-15px 0 0 -11px; pointer-events:none; border-radius:50% 50% 45% 45%;
  background:radial-gradient(circle at 50% 60%, rgba(230,215,255,.95), rgba(170,140,230,.5) 45%, transparent 70%);
  filter:blur(1px); animation:wisp 1.6s ease-out forwards;}
@keyframes wisp{0%{transform:translateY(0) scale(.4); opacity:0} 15%{opacity:1} 100%{transform:translateY(-150px) translateX(14px) scale(1.4); opacity:0}}
.ember{position:absolute; bottom:0; width:3px; height:3px; border-radius:50%; pointer-events:none; z-index:0;
  background:#ffb54a; box-shadow:0 0 6px 2px rgba(255,140,40,.7); opacity:0; animation:ember linear infinite;}
@keyframes ember{0%{transform:translate(0,0); opacity:0} 10%{opacity:.9} 80%{opacity:.6} 100%{transform:translate(var(--dx,20px), -42vh); opacity:0}}
/* torch flicker: a warm light that breathes over the hall */
#battle-screen::after{content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse 40% 50% at 12% 38%, rgba(255,150,60,.13), transparent 70%),
             radial-gradient(ellipse 40% 50% at 88% 38%, rgba(255,150,60,.13), transparent 70%);
  animation:torchlight 3.8s steps(14) infinite;}
@keyframes torchlight{0%,100%{opacity:1} 20%{opacity:.75} 35%{opacity:.95} 55%{opacity:.7} 70%{opacity:1} 85%{opacity:.82}}
body.bloodmoon #battle-screen::after{background:radial-gradient(ellipse at 50% 30%, rgba(200,30,30,.18), transparent 70%);}
/* hp bars ease and flash when hit */
.mini-fill{transition:width .5s cubic-bezier(.3,1.3,.4,1);}

/* ---------------------------------------------------------------- pause menu settings */
#pause-settings{display:flex; flex-direction:column; gap:8px; padding:10px 14px; border:1px solid rgba(232,185,59,.25); border-radius:10px; background:rgba(0,0,0,.25);}
#pause-settings label{display:flex; align-items:center; justify-content:space-between; gap:14px; font-family:'Alegreya SC',serif; letter-spacing:.08em; color:var(--paper-dark);}
#pause-settings input[type=range]{width:150px; accent-color:var(--gold);}
#pause-settings .btn-ghost{margin:0; padding:5px 16px; min-width:110px;}

/* ---------------------------------------------------------------- phones: tighten the bottom bar */
@media (max-width:560px){
  #control-row{padding:0 6px 2px;}
  #potion-belt{gap:3px;}
  .pile span{display:none;}
  #end-turn{min-width:0; flex:1; max-width:170px; white-space:nowrap; font-size:.74rem; padding:8px 10px;}
  #end-turn img{display:none;}
  .inc-tag{padding:2px 5px;}
  #glossary{font-size:.74rem;}
}
@media (prefers-reduced-motion: reduce){
  .ember, .slash, .wisp, #battle-screen::after{display:none;}
  .screen.enter{animation:none;}
}

/* Honk Party login on the online co-op screen; gold + check = a hub-verified account (never a typed guest name) */
.dd-namebox { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 14px; text-align: left; }
.dd-namebox label { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.dd-namebox input { font: inherit; font-size: 1rem; padding: 10px 12px; border-radius: 8px; border: 2px solid rgba(255,214,140,.35); background: rgba(0,0,0,.45); color: inherit; }
.dd-namebox .sq-or { font-size: .9rem; }
.dd-namebox .sq-btn { color: #f3c96b; }
.dd-namebox .sq-me { background: rgba(0,0,0,.45); }
.dd-acct { color: #ffc53d !important; font-weight: 700; white-space: nowrap; }