:root {
  --bg:#0D0B08;--fg:#F5F0E3;--muted:#8B8578;
  --accent:#FFB81C;--accent-dark:#CC9300;--accent-glow:rgba(255,184,28,0.25);
  --card-bg:#1C1A16;--card-border:#3A3528;
  --eats:#FFB81C;--places:#5DADE2;--slang:#E74C3C;--icons:#BDC3C7;
  --hp-red:#E74C3C;--steam-blue:#5DADE2;
  --bcard-w:102px;--bcard-h:150px;
  --slot-w:96px;--slot-h:120px;
}
*{margin:0;padding:0;box-sizing:border-box;}
/* themed scrollbars: charcoal rail, bronze thumb, gold on grab */
*{scrollbar-width:thin;scrollbar-color:#8B6914 rgba(0,0,0,.35);}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:rgba(0,0,0,.35);border-radius:8px;}
::-webkit-scrollbar-thumb{background:#8B6914;border:2px solid #0D0B08;border-radius:8px;}
@media (hover: hover){::-webkit-scrollbar-thumb:hover{background:var(--accent);}}
::-webkit-scrollbar-corner{background:transparent;}
body{
  font-family:'Source Sans 3',sans-serif;color:var(--fg);overflow:hidden;
  height:100vh;width:100vw;
  background:radial-gradient(ellipse at 50% 45%,#1E1B14 0%,#0D0B08 70%);
}
h1,h2,h3,.title-font{font-family:'Oswald',sans-serif;}

/* Particles canvas */
#particles{position:fixed;inset:0;z-index:2;pointer-events:none;}

/* Screens */
.screen{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .5s,visibility .5s;}
.screen.hidden{opacity:0;visibility:hidden;pointer-events:none;}

/* ============ CAMPAIGN MAP (hub) ============ */
#mapScreen{
  background:
    repeating-linear-gradient(60deg,transparent,transparent 12px,rgba(255,184,28,0.04) 12px,rgba(255,184,28,0.04) 13px),
    repeating-linear-gradient(-60deg,transparent,transparent 12px,rgba(255,184,28,0.04) 12px,rgba(255,184,28,0.04) 13px),
    radial-gradient(ellipse at 50% 40%,#1E1B14,var(--bg));
  text-align:center;padding:1rem 1rem 0;justify-content:flex-start;
}
#mapScreen::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:url('../assets/skyline.webp') center 65%/cover no-repeat var(--bg);
  opacity:.35;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,1) 60%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,1) 60%);
}
#mapScreen > *{position:relative;}
.map-head{flex-shrink:0;width:100%;}
.map-title{
  font-family:'Oswald',sans-serif;font-size:clamp(1.6rem,4.5vw,2.4rem);font-weight:700;
  color:var(--accent);letter-spacing:.08em;line-height:1.05;
  text-shadow:0 0 40px rgba(255,184,28,0.3),0 3px 0 #8B6914,0 5px 16px rgba(0,0,0,.8);
}
/* the city-edition line of the lockup: league gold above, edition cream below */
.map-edition{
  font-family:'Oswald',sans-serif;font-weight:600;color:var(--fg);
  font-size:clamp(.95rem,2.6vw,1.3rem);letter-spacing:.4em;margin-top:.2rem;
  text-shadow:0 2px 10px rgba(0,0,0,.85);
}
.map-actions{display:flex;gap:.5rem;justify-content:center;align-items:center;margin-top:.6rem;flex-wrap:wrap;}
.map-actions .btn-secondary{margin-top:0;font-size:.8rem;padding:.45rem 1rem;}
.scrip-badge{
  display:inline-flex;align-items:center;gap:.35rem;
  font-family:'Oswald',sans-serif;font-weight:600;color:var(--accent);font-size:1rem;
  background:rgba(0,0,0,.5);border:1px solid rgba(255,184,28,.35);border-radius:20px;
  padding:.25rem .8rem;
}
.scrip-badge img,.inline-ico{width:18px;height:18px;object-fit:cover;border-radius:50%;vertical-align:-3px;}
#districtList{
  flex:1;min-height:0;overflow-y:auto;width:100%;max-width:760px;margin:0 auto;
  padding:.8rem .4rem;display:flex;flex-direction:column;gap:.5rem;
}
.district{
  display:flex;align-items:center;gap:1rem;text-align:left;
  background:rgba(0,0,0,.45);border:1px solid rgba(255,184,28,.12);border-radius:10px;
  padding:.6rem .9rem;backdrop-filter:blur(2px);
}
.district.locked{opacity:.45;filter:saturate(.4);}
.d-info{flex:1;min-width:0;}
.d-name{font-family:'Oswald',sans-serif;font-weight:600;color:var(--fg);font-size:.95rem;letter-spacing:.04em;}
.d-name i{color:var(--muted);font-size:.75rem;margin-left:.3rem;}
.d-blurb{font-size:.72rem;color:var(--muted);font-style:italic;}
.d-pips{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;}
.pip{
  width:30px;height:30px;border-radius:6px;position:relative;
  font-family:'Oswald',sans-serif;font-size:.75rem;font-weight:600;
  border:1px solid var(--card-border);background:rgba(255,255,255,.03);color:var(--muted);
  cursor:pointer;transition:all .15s;
  touch-action:manipulation; /* no 300ms tap delay / double-tap zoom on Android */
}
.pip.done{border-color:rgba(125,206,130,.5);color:#7DCE82;background:rgba(125,206,130,.08);}
.pip.next{border-color:var(--accent);color:var(--accent);background:rgba(255,184,28,.12);animation:pulse-gold 1.5s ease-in-out infinite;}
.pip.locked{cursor:default;opacity:.5;}
.pip.boss{border-radius:50%;}
@media (hover: hover){.pip:not(.locked):hover{transform:translateY(-2px);border-color:var(--accent);color:var(--accent);}}
.pip-stars{
  position:absolute;left:0;right:0;bottom:-11px;font-size:.5rem;color:var(--accent);
  letter-spacing:-1px;pointer-events:none;
}
.rt-head{
  font-family:'Oswald',sans-serif;font-weight:600;color:var(--accent);letter-spacing:.12em;
  font-size:.85rem;margin:.7rem 0 .1rem;padding-left:.2rem;
}
.rt-head span{color:var(--muted);font-weight:400;letter-spacing:.03em;font-size:.68rem;margin-left:.4rem;}
.map-foot{flex-shrink:0;padding:.5rem 0 1rem;}
/* studio credit: mascot coin + wordmark, quiet at the foot of the hub */
.studio-credit{
  display:flex;align-items:center;justify-content:center;gap:.45rem;
  margin-top:.7rem;font-family:'Oswald',sans-serif;font-weight:600;
  font-size:.68rem;letter-spacing:.28em;color:var(--muted);opacity:.85;
}
.studio-credit img{
  width:26px;height:26px;border-radius:50%;object-fit:cover;
  border:1px solid rgba(255,184,28,.45);box-shadow:0 0 12px rgba(255,184,28,.2);
}
.map-foot .btn-primary{font-size:1rem;padding:.6rem 1.8rem;}
.map-foot .start-hint{margin-top:.5rem;}
.start-title{
  font-family:'Oswald',sans-serif;font-size:clamp(2.4rem,8vw,4.6rem);font-weight:700;
  color:var(--accent);letter-spacing:.08em;line-height:1.05;
  text-shadow:0 0 40px rgba(255,184,28,0.3),0 4px 0 #8B6914,0 6px 20px rgba(0,0,0,.8);
}
.start-sub{font-size:clamp(1rem,3vw,1.4rem);color:var(--fg);opacity:.75;margin-top:.5rem;font-style:italic;letter-spacing:.04em;text-shadow:0 2px 8px rgba(0,0,0,.8);}
.start-bridge{width:200px;height:60px;margin:1.5rem auto;position:relative;opacity:.5;}
.start-bridge svg{width:100%;height:100%;}
.start-hint{margin-top:2rem;font-size:.75rem;color:var(--fg);opacity:.65;max-width:340px;line-height:1.5;text-shadow:0 1px 6px rgba(0,0,0,.9);}
.btn-primary{
  font-family:'Oswald',sans-serif;font-size:1.3rem;font-weight:600;letter-spacing:.1em;
  padding:.85rem 2.5rem;border:2px solid var(--accent);border-radius:6px;
  background:linear-gradient(180deg,rgba(255,184,28,0.15),rgba(255,184,28,0.05));
  color:var(--accent);cursor:pointer;transition:all .2s;margin-top:.5rem;
  backdrop-filter:blur(2px);
}
@media (hover: hover){.btn-primary:hover{background:var(--accent);color:#111;transform:translateY(-2px);box-shadow:0 6px 24px rgba(255,184,28,0.35);}}
.btn-primary:active{transform:translateY(0);}
.btn-secondary{
  font-family:'Oswald',sans-serif;font-size:1rem;font-weight:400;letter-spacing:.08em;
  padding:.6rem 1.8rem;border:1px solid var(--muted);border-radius:6px;
  background:rgba(0,0,0,.35);color:#C9C3B4;cursor:pointer;transition:all .2s;margin-top:.5rem;
}
@media (hover: hover){.btn-secondary:hover{border-color:var(--fg);color:var(--fg);}}

/* ============ GAME SCREEN ============ */
#gameScreen{flex-direction:column;padding:0;justify-content:flex-start;}
#gameScreen::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:url('../assets/skyline.webp') center 80%/cover no-repeat;
  opacity:.1;
  -webkit-mask-image:linear-gradient(180deg,transparent 30%,rgba(0,0,0,1));
  mask-image:linear-gradient(180deg,transparent 30%,rgba(0,0,0,1));
}
#gameHeader{
  display:flex;align-items:center;justify-content:space-between;
  padding:.45rem 1.2rem;background:rgba(0,0,0,0.5);border-bottom:1px solid rgba(255,184,28,0.1);
  z-index:10;flex-shrink:0;width:100%;
}
.header-title{font-family:'Oswald',sans-serif;font-size:1rem;font-weight:600;color:var(--accent);letter-spacing:.1em;}
.header-center{display:flex;align-items:center;gap:.6rem;}
.btn-icon{
  width:30px;height:30px;border-radius:50%;border:1px solid var(--muted);
  background:transparent;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:.75rem;transition:all .15s;
}
@media (hover: hover){.btn-icon:hover{border-color:var(--accent);color:var(--accent);}}

/* ---- Hero bars ---- */
.hero-bar{
  display:flex;align-items:center;gap:.7rem;width:100%;
  padding:.35rem 1rem;flex-shrink:0;z-index:5;position:relative;
  background:rgba(0,0,0,0.35);
}
.hero-bar.enemy{border-bottom:1px solid rgba(255,184,28,0.08);}
.hero-bar.player{border-top:1px solid rgba(255,184,28,0.08);}
.hero-bar.turn-active::after{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);
  animation:turn-pulse 1.2s ease-in-out infinite;
}
@keyframes turn-pulse{0%,100%{opacity:.35;}50%{opacity:1;}}
.hero-ava{
  width:46px;height:46px;border-radius:50%;flex-shrink:0;
  background-color:#14120E;background-size:cover;background-position:center 20%;
  border:2px solid rgba(255,184,28,0.4);
  box-shadow:0 2px 10px rgba(0,0,0,.6);
}
.hero-info{display:flex;flex-direction:column;gap:1px;min-width:70px;}
.hero-name{font-family:'Oswald',sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.1em;color:var(--muted);}
.hero-hp{font-family:'Oswald',sans-serif;font-size:1.05rem;font-weight:700;color:var(--fg);}
.hero-hp i{color:var(--hp-red);font-size:.85rem;margin-right:2px;}
.hero-steam{display:flex;gap:3px;flex-wrap:wrap;max-width:120px;}
.steam-pip{
  width:11px;height:11px;border-radius:50%;
  border:1px solid rgba(93,173,226,0.5);background:rgba(93,173,226,0.08);
}
.steam-pip.full{background:var(--steam-blue);box-shadow:0 0 6px rgba(93,173,226,0.6);}
.steam-none{color:var(--muted);font-size:.7rem;}
.hero-deck{
  font-family:'Oswald',sans-serif;font-size:.85rem;color:var(--muted);
  display:flex;align-items:center;gap:4px;margin-left:auto;
}
.hero-deck i{font-size:.75rem;color:rgba(255,184,28,0.5);}
.mini-hand{display:flex;gap:3px;margin-left:.5rem;}
.mini-back{
  width:22px;height:32px;border-radius:3px;
  background-color:#12100C;
  background-image:linear-gradient(rgba(0,0,0,0.45),rgba(0,0,0,0.45)),var(--cardback,url('../assets/cardback.webp'));
  background-size:cover;background-position:center;
  border:1px solid rgba(255,184,28,0.25);
}
/* player's equipped card back, worn on the hero bar's deck counter */
.deck-back{
  display:inline-block;width:15px;height:21px;border-radius:3px;margin-right:3px;
  background:var(--cardback,url('../assets/cardback.webp')) center/cover;
  border:1px solid rgba(255,184,28,.4);vertical-align:-6px;
}

/* ---- Battlefield ---- */
#battlefield{
  display:flex;justify-content:center;align-items:center;
  flex:1;min-height:0;width:100%;z-index:3;padding:.4rem 0;
  /* fit-to-width lanes: slots shrink so every lane stays fully on-screen.
     20px reserved for the stat badges that overhang the edge slots (-8px each side). */
  --bf-gap:clamp(6px,1.5vw,16px);
  gap:var(--bf-gap);
  --slot-fit:calc((100vw - 20px - (var(--lanes,4) - 1)*var(--bf-gap)) / var(--lanes,4));
  --slot-w-f:min(var(--slot-w),var(--slot-fit));
  --slot-h-f:min(var(--slot-h),calc(var(--slot-w-f)*1.29));
}
.lane{
  display:flex;flex-direction:column;gap:14px;position:relative;
}
.lane::before{
  content:'';position:absolute;left:50%;top:8%;bottom:8%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,184,28,0.12),transparent);
}
.slot{
  width:var(--slot-w-f,var(--slot-w));height:var(--slot-h-f,var(--slot-h));border-radius:8px;position:relative;
  border:1.5px dashed rgba(255,184,28,0.14);background:rgba(255,184,28,0.02);
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.slot.filled{border-style:solid;border-color:transparent;background:none;}
.slot.drop-glow{
  border-color:var(--accent);background:rgba(255,184,28,0.08);cursor:pointer;
  box-shadow:0 0 14px rgba(255,184,28,0.25),inset 0 0 20px rgba(255,184,28,0.06);
  animation:drop-pulse 1s ease-in-out infinite;
}
@keyframes drop-pulse{0%,100%{box-shadow:0 0 8px rgba(255,184,28,0.2);}50%{box-shadow:0 0 18px rgba(255,184,28,0.4);}}
.slot.target-glow{cursor:crosshair;}
.slot.target-glow .unit{
  border-color:var(--slang);
  box-shadow:0 0 16px rgba(231,76,60,.55),0 4px 12px rgba(0,0,0,.5);
  animation:drop-pulse 1s ease-in-out infinite;
}

/* ---- Unit tokens ---- */
.unit{
  position:absolute;inset:0;border-radius:8px;overflow:visible; /* visible so stat badges never crop */
  border:2px solid var(--cat-color,var(--card-border));
  background:var(--card-bg);
  box-shadow:0 4px 12px rgba(0,0,0,0.5);
}
.unit-art{
  position:absolute;inset:0;border-radius:6px; /* rounds itself now that .unit doesn't clip */
  background-size:cover;background-position:center 25%;
  background-color:#14120E;
}
.unit-name{
  position:absolute;left:0;right:0;bottom:0;border-radius:0 0 6px 6px;
  font-family:'Oswald',sans-serif;font-size:min(.5rem,calc(var(--slot-w-f,80px)*.105));font-weight:600;letter-spacing:.04em;
  text-align:center;padding:9px 3px 3px;color:var(--fg);
  background:linear-gradient(180deg,transparent,rgba(0,0,0,0.85) 45%);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.unit-atk,.unit-hp{
  position:absolute;bottom:-8px;border-radius:50%;
  width:min(23px,calc(var(--slot-w-f,23px)*.3));height:min(23px,calc(var(--slot-w-f,23px)*.3));
  font-family:'Oswald',sans-serif;font-size:min(.76rem,calc(var(--slot-w-f,80px)*.16));font-weight:700;
  display:flex;align-items:center;justify-content:center;color:#111;z-index:2;
  border:1.5px solid rgba(0,0,0,.55);
  box-shadow:0 2px 6px rgba(0,0,0,.6);
}
.unit-atk{left:-8px;background:var(--accent);}
.unit-hp{right:-8px;background:#7DCE82;}
.unit-hp.hurt{background:var(--hp-red);color:var(--fg);}
.unit.ready{box-shadow:0 0 12px rgba(255,184,28,0.35),0 4px 12px rgba(0,0,0,0.5);}
.unit.hit{animation:unit-hit .32s ease;}
@keyframes unit-hit{
  0%,100%{transform:translateX(0);filter:none;}
  25%{transform:translateX(-4px);filter:brightness(1.8) saturate(2);}
  50%{transform:translateX(4px);}
  75%{transform:translateX(-2px);}
}
.unit.attack-up{animation:lunge-up .24s ease;}
@keyframes lunge-up{0%{transform:translateY(0);}45%{transform:translateY(-22px) scale(1.06);}100%{transform:translateY(0);}}
.unit.attack-down{animation:lunge-down .24s ease;}
@keyframes lunge-down{0%{transform:translateY(0);}45%{transform:translateY(22px) scale(1.06);}100%{transform:translateY(0);}}

/* ---- Floaters ---- */
.floater{
  position:absolute;left:50%;top:30%;transform:translateX(-50%);
  font-family:'Oswald',sans-serif;font-size:1.25rem;font-weight:700;z-index:60;
  pointer-events:none;animation:float-up 1s ease-out forwards;
  text-shadow:0 2px 6px rgba(0,0,0,.9);
}
.floater.dmg{color:var(--hp-red);}
.floater.buff{color:#7DCE82;}
@keyframes float-up{
  0%{opacity:0;transform:translate(-50%,6px) scale(.7);}
  15%{opacity:1;transform:translate(-50%,0) scale(1.15);}
  100%{opacity:0;transform:translate(-50%,-30px) scale(1);}
}

/* ---- Hero shake ---- */
.hero-bar.shake{animation:bar-shake .4s ease;}
@keyframes bar-shake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-6px);}
  40%{transform:translateX(5px);}
  60%{transform:translateX(-3px);}
  80%{transform:translateX(2px);}
}

/* ---- Message bar + actions ---- */
#msgBar{
  display:flex;align-items:center;justify-content:center;gap:.8rem;
  width:100%;padding:.25rem 1rem;flex-shrink:0;z-index:5;min-height:42px;
}
#messageArea{
  font-size:.95rem;color:var(--muted);font-style:italic;text-align:center;
  max-width:46%;line-height:1.35;
}
#messageArea .highlight{color:var(--accent);font-weight:600;}
#endTurnBtn,#castBtn{
  font-family:'Oswald',sans-serif;font-size:.85rem;font-weight:600;letter-spacing:.1em;
  padding:.4rem 1.2rem;border-radius:6px;cursor:pointer;transition:all .2s;
}
#endTurnBtn{
  border:2px solid var(--accent);color:var(--accent);
  background:linear-gradient(180deg,rgba(255,184,28,0.18),rgba(255,184,28,0.05));
}
@media (hover: hover){#endTurnBtn:hover:not(:disabled){background:var(--accent);color:#111;}}
/* pressed feedback for every input device — brief and honest, unlike a
   latched hover: it ends the moment the finger/button lifts */
#endTurnBtn:active:not(:disabled){background:var(--accent);color:#111;transform:translateY(1px);}
#castBtn:active{background:var(--places);color:#111;transform:translateY(1px);}
.btn-primary:active,.btn-secondary:active,.btn-icon:active{transform:translateY(1px);filter:brightness(1.15);}
#endTurnBtn:disabled{border-color:var(--card-border);color:var(--muted);cursor:default;background:none;opacity:.6;}
#endTurnBtn.glow{animation:pulse-gold 1.5s ease-in-out infinite;}
@keyframes pulse-gold{
  0%,100%{box-shadow:0 0 8px rgba(255,184,28,0.2);}
  50%{box-shadow:0 0 20px rgba(255,184,28,0.45);}
}
#castBtn{
  border:2px solid var(--places);color:var(--places);
  background:linear-gradient(180deg,rgba(93,173,226,0.18),rgba(93,173,226,0.05));
  animation:pulse-blue 1.2s ease-in-out infinite;
}
@media (hover: hover){#castBtn:hover{background:var(--places);color:#111;}}
#castBtn.hidden{display:none;}
@keyframes pulse-blue{
  0%,100%{box-shadow:0 0 8px rgba(93,173,226,0.25);}
  50%{box-shadow:0 0 18px rgba(93,173,226,0.5);}
}

/* ---- Player hand ---- */
#playerHand{
  display:flex;justify-content:center;align-items:flex-end;
  padding:.3rem 1rem .6rem;min-height:calc(var(--bcard-h) + 14px);flex-shrink:0;
  position:relative;z-index:6;width:100%;
}
.bcard-slot{margin-left:-16px;position:relative;transition:transform .2s;}
.bcard-slot:first-child{margin-left:0;}

/* ---- Battle cards (hand) ---- */
.bcard{
  width:var(--bcard-w);height:var(--bcard-h);border-radius:9px;
  background:var(--card-bg);border:2px solid var(--card-border);
  display:flex;flex-direction:column;overflow:visible;position:relative;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s,opacity .18s;
  flex-shrink:0;user-select:none;
}
.bcard-art{
  height:56%;border-radius:7px 7px 0 0;flex-shrink:0;
  background-size:cover;background-position:center 25%;background-color:#14120E;
  border-bottom:2px solid var(--cat-color,var(--card-border));
}
.bcard-body{flex:1;display:flex;flex-direction:column;align-items:center;padding:3px 5px 12px;min-height:0;}
.bcard-name{
  font-family:'Oswald',sans-serif;font-size:.58rem;font-weight:600;letter-spacing:.02em;
  text-align:center;line-height:1.1;color:var(--fg);
}
.bcard-desc{
  font-size:.46rem;color:var(--muted);text-align:center;line-height:1.25;margin-top:2px;
  overflow:hidden;
}
.bcard-cost{
  position:absolute;top:-8px;left:-8px;width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFD966,var(--accent-dark));
  border:2px solid #8B6914;color:#111;z-index:3;
  font-family:'Oswald',sans-serif;font-size:.85rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.5);
}
.bcard-stats{
  position:absolute;bottom:-8px;left:0;right:0;display:flex;justify-content:space-between;
  padding:0 4px;z-index:3;pointer-events:none;
}
.bcard-atk,.bcard-hp{
  font-family:'Oswald',sans-serif;font-size:.72rem;font-weight:700;
  width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  gap:1px;color:#111;box-shadow:0 2px 6px rgba(0,0,0,.5);
}
.bcard-atk{background:var(--accent);}
.bcard-hp{background:#7DCE82;}
.bcard-atk i,.bcard-hp i{font-size:.5rem;}
.bcard-spell-tag{
  margin:0 auto;font-family:'Oswald',sans-serif;font-size:.5rem;font-weight:600;letter-spacing:.2em;
  color:var(--cat-color,var(--muted));background:rgba(0,0,0,.75);
  padding:2px 10px;border-radius:8px;border:1px solid var(--cat-color,var(--card-border));
}
.bcard.playable{cursor:pointer;border-color:rgba(255,184,28,.55);animation:afford-breathe 2.4s ease-in-out infinite;}
@media (hover: hover){.bcard.playable:hover{transform:translateY(-10px);z-index:10;border-color:var(--cat-color,var(--accent));}}
.bcard.disabled{filter:saturate(.5) brightness(.72);}
.bcard.selected{animation:none;}
@keyframes afford-breathe{0%,100%{box-shadow:0 0 3px rgba(255,184,28,.12);}50%{box-shadow:0 0 12px rgba(255,184,28,.38);}}
/* steam-spend preview: the pips a selected card would vent */
.steam-pip.spend{background:#E8A33D;border-color:#E8A33D;box-shadow:0 0 6px rgba(232,163,61,.75);animation:spend-pulse 1s ease-in-out infinite;}
@keyframes spend-pulse{50%{opacity:.4;}}
/* Last Call countdown chip (game header) */
#lastCallChip{
  font-family:'Oswald',sans-serif;font-size:.68rem;font-weight:600;letter-spacing:.08em;
  color:#E8A33D;border:1px solid rgba(232,163,61,.55);border-radius:12px;padding:.15rem .6rem;
  background:rgba(232,163,61,.1);white-space:nowrap;
}
#lastCallChip.hot{animation:spend-pulse 1s ease-in-out infinite;}
/* SHIFT REPORT log drawer */
#logDrawer{
  position:fixed;top:0;right:0;height:100%;width:min(340px,85vw);z-index:45;
  background:linear-gradient(200deg,#1A1712,#0F0D09);border-left:1px solid rgba(255,184,28,.35);
  transform:translateX(100%);transition:transform .25s ease;display:flex;flex-direction:column;
  box-shadow:-12px 0 30px rgba(0,0,0,.5);
}
#logDrawer.open{transform:translateX(0);}
.log-head{
  display:flex;align-items:center;gap:.5rem;padding:.7rem .9rem;flex-shrink:0;
  font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:.18em;color:var(--accent);font-size:.8rem;
  border-bottom:1px solid rgba(255,184,28,.2);
}
.log-head img{width:26px;height:26px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,184,28,.4);}
.log-head button{margin-left:auto;background:none;border:none;color:var(--muted);font-size:1rem;cursor:pointer;}
@media (hover: hover){.log-head button:hover{color:var(--accent);}}
#logList{flex:1;overflow-y:auto;padding:.5rem .8rem 1rem;font-size:.72rem;line-height:1.55;color:#C9C3B4;}
#logList div{padding:.12rem 0;border-bottom:1px dashed rgba(255,255,255,.05);}
#logList b{color:var(--accent);font-family:'Oswald',sans-serif;font-weight:600;margin-right:.35rem;}
.bcard.selected{
  transform:translateY(-16px);z-index:10;
  border-color:var(--accent);
  box-shadow:0 0 18px var(--accent-glow),0 12px 24px rgba(0,0,0,0.4);
}
.bcard.disabled{opacity:.55;filter:saturate(.5);}
@media (hover: hover){.bcard-slot:hover{z-index:10;}}

/* ============ MODALS ============ */
.modal{
  position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.8);backdrop-filter:blur(4px);padding:1rem;
  transition:opacity .3s,visibility .3s;
}
.modal.hidden{opacity:0;visibility:hidden;pointer-events:none;}
.modal-box{
  background:linear-gradient(160deg,#1E1B14,#12100D);border:1px solid rgba(255,184,28,0.2);
  border-radius:12px;padding:2rem;max-width:520px;width:100%;max-height:85vh;overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,0.6);
}
.modal-box h2{font-family:'Oswald',sans-serif;font-size:1.6rem;color:var(--accent);margin-bottom:1rem;letter-spacing:.06em;}
.modal-box h3{font-family:'Oswald',sans-serif;font-size:1rem;color:var(--fg);margin:1rem 0 .4rem;letter-spacing:.04em;}
.modal-box p,.modal-box li{font-size:.9rem;color:var(--muted);line-height:1.6;}
.modal-box ul,.modal-box ol{padding-left:1.2rem;margin-bottom:.5rem;}
.modal-box .accent{color:var(--accent);font-weight:600;}
.modal-close{
  float:right;background:none;border:none;color:var(--muted);font-size:1.2rem;cursor:pointer;
  transition:color .15s;padding:0;line-height:1;
}
@media (hover: hover){.modal-close:hover{color:var(--accent);}}

/* Wide modal (deck builder / store) */
.modal-box.wide{max-width:860px;}

/* ---- Level intro ---- */
.lvl-blurb{font-style:italic;}
.lvl-mod{
  color:var(--accent);background:rgba(255,184,28,.08);border:1px solid rgba(255,184,28,.25);
  border-radius:8px;padding:.5rem .8rem;margin:.6rem 0;font-size:.85rem;
}
.lvl-stats{display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin:.8rem 0;}
.lvl-stats span{font-size:.82rem;color:var(--fg);}
.lvl-stats i{color:var(--accent);margin-right:4px;font-size:.75rem;}
.lvl-rewards{font-size:.82rem;}
.lvl-reward-card{
  display:inline-block;background:rgba(255,184,28,.1);border:1px solid rgba(255,184,28,.3);
  border-radius:10px;padding:1px 8px;margin:0 3px;color:var(--accent);font-size:.75rem;
}

/* ---- Deck builder ---- */
.dk-size{font-size:1rem;margin-left:.5rem;}
.dk-size.ok{color:#7DCE82;}
.dk-size.bad{color:var(--hp-red);}
.dk-hint{font-size:.75rem;}
.dk-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:.5rem;margin-top:.8rem;
}
.dk-tile{
  background:var(--card-bg);border:1px solid var(--rar,var(--card-border));border-radius:8px;
  overflow:hidden;display:flex;flex-direction:column;
}
.dk-art{
  height:64px;background-size:cover;background-position:center 25%;position:relative;
  border-bottom:2px solid var(--cat-color,var(--card-border));
}
.dk-cost{
  position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFD966,var(--accent-dark));
  color:#111;font-family:'Oswald',sans-serif;font-size:.65rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.dk-name{
  font-family:'Oswald',sans-serif;font-size:.55rem;font-weight:600;color:var(--fg);
  padding:3px 4px 1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;
}
.dk-controls{display:flex;align-items:center;justify-content:center;gap:4px;padding:2px 0 4px;}
.dk-btn{
  width:20px;height:20px;border-radius:4px;border:1px solid var(--card-border);
  background:rgba(255,255,255,.05);color:var(--fg);cursor:pointer;font-weight:700;line-height:1;
}
@media (hover: hover){.dk-btn:hover:not([disabled]){border-color:var(--accent);color:var(--accent);}}
.dk-btn[disabled]{opacity:.3;cursor:default;}
.dk-count{font-family:'Oswald',sans-serif;font-size:.7rem;color:var(--muted);min-width:28px;text-align:center;}
.dk-count.in{color:var(--accent);}

/* ---- Company Store ---- */
.st-packs{display:flex;gap:.8rem;margin:1rem 0;flex-wrap:wrap;}
.st-pack{
  flex:1;min-width:150px;text-align:center;background:rgba(0,0,0,.35);
  border:1px solid rgba(255,184,28,.15);border-radius:10px;padding:.8rem .5rem;
}
.st-pack > img{width:84px;height:84px;object-fit:cover;border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.5);}
.st-buy .inline-ico{width:15px;height:15px;}
.st-pack-name{font-family:'Oswald',sans-serif;font-weight:600;color:var(--fg);margin:.4rem 0 .2rem;font-size:.85rem;}
.st-buy{
  margin-top:.45rem;font-family:'Oswald',sans-serif;font-size:.8rem;font-weight:600;letter-spacing:.05em;
  padding:.35rem .9rem;border-radius:6px;border:2px solid var(--accent);color:var(--accent);
  background:linear-gradient(180deg,rgba(255,184,28,0.15),rgba(255,184,28,0.05));cursor:pointer;transition:all .15s;
}
@media (hover: hover){.st-buy:hover:not([disabled]){background:var(--accent);color:#111;}}
.st-buy[disabled]{border-color:var(--card-border);color:var(--muted);cursor:default;opacity:.6;}
.st-cats{display:flex;gap:3px;justify-content:center;margin-top:.3rem;flex-wrap:wrap;}
.st-cat{
  font-size:.62rem;padding:2px 7px;border-radius:9px;cursor:pointer;
  border:1px solid var(--cat-color);color:var(--cat-color);background:transparent;
}
.st-cat.on{background:var(--cat-color);color:#111;font-weight:700;}
.st-singles{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.5rem;}
.st-single{
  width:118px;text-align:center;background:var(--card-bg);
  border:1px solid var(--rar,var(--card-border));border-radius:8px;padding-bottom:.5rem;overflow:hidden;
}
.st-card{width:96px;text-align:center;background:var(--card-bg);border:1px solid var(--cat-color);border-radius:8px;overflow:hidden;}
.st-card-art{height:74px;background-size:cover;background-position:center 25%;border-bottom:2px solid var(--cat-color,var(--card-border));}
.st-card-name{font-family:'Oswald',sans-serif;font-size:.6rem;font-weight:600;color:var(--fg);padding:3px 4px;line-height:1.15;}
.st-rarity{font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;color:var(--rar,var(--muted));}
.st-result{margin-top:1rem;border-top:1px solid rgba(255,184,28,.15);padding-top:.8rem;}
.st-result-cards{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:.4rem;}
.st-error{color:var(--hp-red);margin-top:.8rem;font-weight:600;}

/* ---- Game-over rewards ---- */
#goRewards{margin-bottom:1rem;}
.go-stars{font-size:1.7rem;color:var(--accent);letter-spacing:.2em;margin-bottom:.3rem;}
.go-scrip{font-family:'Oswald',sans-serif;color:var(--accent);font-size:1rem;}
.go-scrip img{width:18px;height:18px;border-radius:50%;vertical-align:-3px;}
.go-first{
  font-size:.62rem;background:var(--accent);color:#111;border-radius:8px;padding:1px 7px;
  vertical-align:2px;letter-spacing:.08em;font-weight:700;
}
.go-cards{display:flex;gap:.5rem;justify-content:center;margin-top:.6rem;flex-wrap:wrap;}
.go-card{
  width:74px;height:74px;border-radius:8px;background-size:cover;background-position:center 25%;
  border:2px solid var(--accent);position:relative;overflow:hidden;
}
.go-card span{
  position:absolute;left:0;right:0;bottom:0;font-size:.5rem;font-family:'Oswald',sans-serif;
  background:rgba(0,0,0,.75);padding:2px;color:var(--fg);
}
.go-cardnote{font-size:.72rem;color:var(--accent);margin-top:.3rem;}

/* Game over */
.gameover-title{font-family:'Oswald',sans-serif;font-size:2.2rem;letter-spacing:.06em;}
.gameover-title.win{color:var(--accent);}
.gameover-title.lose{color:var(--slang);}
.gameover-scores{display:flex;gap:2rem;justify-content:center;margin:1.2rem 0;}
.gameover-score{text-align:center;}
.gameover-score .label{font-size:.8rem;color:var(--muted);letter-spacing:.06em;font-family:'Oswald',sans-serif;}
.gameover-score .num{font-size:2.5rem;font-weight:700;font-family:'Oswald',sans-serif;color:var(--accent);}

/* ============ RESPONSIVE ============ */
@media(max-width:560px){
  :root{--bcard-w:84px;--bcard-h:126px;--slot-w:76px;--slot-h:98px;}
  .bcard-desc{display:none;}
  .bcard-name{font-size:.5rem;}
  .hero-steam{max-width:80px;}
  .mini-hand{display:none;}
  #messageArea{font-size:.85rem;}
  .unit-name{font-size:min(.44rem,calc(var(--slot-w-f,80px)*.093));}
  /* hand on phones: horizontal scroller — full tap targets for all 7 cards.
     auto-margins on first/last center a small hand WITHOUT the unreachable
     negative-scroll space a centered flex container creates when it overflows */
  #playerHand{
    justify-content:flex-start;overflow-x:auto;overflow-y:hidden;
    padding-top:22px;min-height:calc(var(--bcard-h) + 36px);
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  #playerHand::-webkit-scrollbar{display:none;}
  #playerHand .bcard-slot{margin-left:4px;flex-shrink:0;scroll-snap-align:center;touch-action:pan-x;}
  #playerHand .bcard-slot:first-child{margin-left:auto;}
  #playerHand .bcard-slot:last-child{margin-right:auto;}
  /* campaign map on phones: stack text over pips, 5-wide pip grid with
     real touch targets (the desktop side-by-side row crushes the text) */
  .district{flex-direction:column;align-items:stretch;gap:.5rem;padding:.6rem .7rem;}
  .d-name{font-size:1rem;}
  .d-pips{display:grid;grid-template-columns:repeat(5,1fr);gap:14px 8px;}
  .pip{width:100%;height:40px;font-size:.85rem;}
  .pip-stars{bottom:-12px;font-size:.55rem;}
  #districtList{padding:.8rem .6rem;}
  .map-foot{padding-bottom:calc(1rem + env(safe-area-inset-bottom));}
}
@media(max-height:640px){
  :root{--bcard-h:118px;--slot-h:92px;}
  .bcard-desc{display:none;}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important;}
}

/* ==========================================
   BATTLE UX (Tier 2) — drag-to-play, targeting
   arrow, attack telegraphs, card inspector
   ========================================== */
.bcard,.unit{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
#playerHand .bcard{touch-action:pan-x;} /* vertical lift = drag; sideways stays the hand-scroll */

#arrowCanvas{position:fixed;inset:0;pointer-events:none;z-index:44;display:none;}

.drag-ghost{
  position:fixed;top:0;left:0;z-index:46;pointer-events:none;
  transform-origin:center;will-change:transform;
  box-shadow:0 14px 34px rgba(0,0,0,.55),0 0 18px rgba(255,184,28,.35);
  border-color:var(--accent)!important;rotate:2.5deg;opacity:.95;
}
.drag-src{opacity:.25;filter:grayscale(.5);}

.slot.drop-hot{
  box-shadow:0 0 0 2px var(--accent),0 0 22px rgba(255,184,28,.7)!important;
  transform:scale(1.05);transition:transform .08s;
}
#battlefield.spell-drop{
  box-shadow:inset 0 0 34px rgba(255,184,28,.22);
  border-radius:10px;
}

/* attack telegraphs: where each ready unit's swing is headed */
.tg-badge{
  position:absolute;top:-9px;right:-5px;font-size:13px;line-height:1;
  color:var(--accent);text-shadow:0 0 6px rgba(0,0,0,.9),0 0 10px rgba(255,184,28,.6);
  pointer-events:none;
}
.tg-badge.tg-face{
  color:#FF6B35;text-shadow:0 0 6px rgba(0,0,0,.9),0 0 10px rgba(255,107,53,.8);
  animation:tg-pulse 1.2s ease-in-out infinite;
}
@keyframes tg-pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.25);}}
.slot.tg-target{outline:1px dashed rgba(255,140,80,.65);outline-offset:2px;}
#faceTg{
  margin-left:.4rem;font-family:'Oswald',sans-serif;font-size:.68rem;
  color:#FF6B35;background:rgba(255,107,53,.12);border:1px solid rgba(255,107,53,.45);
  border-radius:99px;padding:.05rem .45rem;letter-spacing:.05em;vertical-align:middle;
}

/* card inspector: long-press (touch) / hover-linger (mouse) */
#inspectOverlay{
  position:fixed;inset:0;z-index:150;pointer-events:none; /* above modals (z=100) — binder/store/backs open it too */
  display:flex;align-items:center;justify-content:center;
  background:rgba(8,10,14,.6);backdrop-filter:blur(2px);
}
#inspectOverlay.hidden{display:none;}
.inspect-box{display:flex;flex-direction:column;align-items:center;text-align:center;}
.inspect-box .bcard{
  transform:scale(2.1);cursor:default;
  margin:calc(var(--bcard-h)*0.58) calc(var(--bcard-w)*0.58) calc(var(--bcard-h)*0.62);
  box-shadow:0 18px 50px rgba(0,0,0,.7),0 0 26px rgba(255,184,28,.3);
}
.inspect-box .bcard .bcard-desc{display:block;} /* short screens hide hand desc; inspector always shows it */
.inspect-extra{
  max-width:300px;font-size:.8rem;color:var(--fg);
  font-family:'Oswald',sans-serif;letter-spacing:.06em;
}
.inspect-rules{margin-top:.35rem;font-family:inherit;letter-spacing:0;color:var(--fg);font-size:.8rem;line-height:1.4;}
.inspect-flavor{margin-top:.3rem;font-style:italic;color:var(--muted);font-size:.75rem;letter-spacing:0;line-height:1.4;}
@media(max-width:560px){
  .inspect-box .bcard{transform:scale(1.85);margin:calc(var(--bcard-h)*0.5) calc(var(--bcard-w)*0.5) calc(var(--bcard-h)*0.55);}
  .inspect-extra{max-width:250px;font-size:.74rem;}
}

/* ==========================================
   GAMEPAD + STEAM DECK — focus ring, button
   hints, deck-mode font floor (js/gamepad.js)
   ========================================== */
body.gamepad, body.gamepad *{cursor:none!important;}

.gp-focus{
  outline:3px solid var(--accent)!important;outline-offset:3px;
  box-shadow:0 0 18px rgba(255,184,28,.55);
  border-radius:8px;
  z-index:5;position:relative;
}
body:not(.gamepad):not(.keynav) .gp-focus{outline:none!important;box-shadow:none;} /* ring only while a pad or arrow keys drive */

#gpHints{
  position:fixed;right:.8rem;bottom:.6rem;z-index:48;display:none;
  font-family:'Oswald',sans-serif;font-size:.72rem;letter-spacing:.04em;color:var(--muted);
  background:rgba(13,11,8,.85);border:1px solid var(--card-border);border-radius:99px;
  padding:.3rem .8rem;backdrop-filter:blur(3px);pointer-events:none;
  display:none;align-items:center;gap:.55rem;
}
body.gamepad #gpHints{display:flex;}
.glyph{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:17px;height:17px;border-radius:50%;margin-right:4px;
  font-size:.62rem;font-weight:700;color:#0D0B08;vertical-align:middle;
}
.glyph.gA{background:#6DB33F;}
.glyph.gB{background:#D84B4B;}
.glyph.gX{background:#4B7BD8;}
.glyph.gY{background:#D8B23B;}
.glyph.gShoulder,.glyph.gMeta{border-radius:5px;background:#8B8578;font-size:.55rem;padding:0 4px;}

/* Deck Verified — "Controller Glyphs": on-screen glyphs must match the input in
   use, and "mouse and keyboard glyphs should not be shown if they are not the
   active input". The rules sheet listed keyboard AND controller side by side, so a
   pad player reading it saw keyboard glyphs. Hidden while a pad is driving, and
   always on Deck, which has no keyboard attached by default. */
body.deck .rules-kbd,body.gamepad .rules-kbd{display:none;}

/* Steam Deck (1280x800). Valve's floor is 9px "in height", with 12px recommended
   (steamhardware/compat). Raised to 12px everywhere there is room to grow: map
   pips, board unit names, status digits.

   The two IN-HAND card texts deliberately stay lower. Measured at 1280x800: the
   hand sits at y=636 and the page fills 800px exactly, so the 150px card cannot
   grow. Pushing .bcard-name to 12px steals the description's height and
   .bcard-desc to 12px needs 59px of a 34px box — both TRUNCATE rules text
   against overflow:hidden. Clipped text reads worse than small text, and 9px
   still meets the stated minimum. Revisit only alongside a taller card. */
body.deck .pip-stars{font-size:12px;bottom:-15px;}
body.deck .unit-name{font-size:12px;}
body.deck .bcard-name{font-size:10px;}       /* 12px clips .bcard-desc — measured */
body.deck .bcard-desc{font-size:9px;line-height:1.2;}
body.deck .bcard-atk i,body.deck .bcard-hp i{font-size:11px;}
body.deck .bcard-spell-tag{font-size:11px;}
body.deck .unit > span > span{font-size:12px!important;} /* status-count digits (inline 8px) */
body.deck .inspect-rules,body.deck .inspect-flavor{font-size:.85rem;}

/* ==========================================
   TUTORIAL — shield, spotlight, coach Grinnie
   ========================================== */
#tutShield{
  position:fixed;inset:0;z-index:68;background:rgba(8,10,14,.62);
  backdrop-filter:blur(1px);
}
#tutShield.hidden{display:none;}
.tut-spot{
  outline:3px dashed var(--accent);outline-offset:4px;border-radius:8px;
  animation:tut-pulse 1.4s ease-in-out infinite;
}
@keyframes tut-pulse{0%,100%{outline-color:var(--accent);}50%{outline-color:rgba(255,184,28,.35);}}

#tutCoach{
  position:fixed;left:50%;top:12%;transform:translateX(-50%);z-index:70;
  display:flex;gap:.7rem;align-items:flex-start;max-width:430px;width:calc(100% - 2rem);
  background:rgba(13,11,8,.96);border:1px solid var(--accent);border-radius:12px;
  padding:.7rem .8rem;box-shadow:0 12px 40px rgba(0,0,0,.6);
}
#tutCoach.hidden{display:none;}
#tutCoach img{width:52px;height:52px;border-radius:50%;border:2px solid var(--accent);object-fit:cover;flex-shrink:0;}
#tutText{font-size:.85rem;line-height:1.5;color:var(--fg);}
#tutText b{color:var(--accent);}
.tut-btns{display:flex;gap:.8rem;align-items:center;margin-top:.5rem;}
.tut-btns .btn-primary{padding:.35rem 1.1rem;font-size:.8rem;margin:0;}
#tutSkip{
  background:none;border:none;color:var(--muted);font-size:.7rem;cursor:pointer;
  text-decoration:underline;font-family:inherit;padding:0;
}
@media (hover: hover){#tutSkip:hover{color:var(--fg);}}
/* free-play phase: coach shrinks into a corner note */
#tutCoach.tut-mini{
  top:auto;bottom:calc(var(--bcard-h) + 60px);left:auto;right:.8rem;transform:none;
  max-width:280px;opacity:.92;
}
#tutCoach.tut-mini img{width:34px;height:34px;}
#tutCoach.tut-mini #tutText{font-size:.72rem;}
/* coach auto-flips low when it would sit on top of the spotlighted element */
#tutCoach.tut-low{top:auto;bottom:calc(var(--bcard-h) + 70px);}
@media(max-width:560px){
  #tutCoach.tut-low{bottom:calc(var(--bcard-h) + 56px);}
  #tutCoach.tut-mini{bottom:calc(var(--bcard-h) + 52px);}
}

/* ==========================================
   SETTINGS — modal rows + preference modes
   ========================================== */
.set-row{
  display:flex;align-items:center;gap:.7rem;padding:.55rem 0;
  border-bottom:1px solid rgba(255,184,28,.08);
}
.set-row label{flex:1;font-family:'Oswald',sans-serif;font-size:.85rem;letter-spacing:.05em;color:var(--fg);}
.set-note{font-size:.68rem;color:var(--muted);font-style:italic;letter-spacing:0;}
.set-val{font-family:'Oswald',sans-serif;font-size:.75rem;color:var(--accent);min-width:38px;text-align:right;}
.set-row input[type=range]{
  flex:1;max-width:150px;accent-color:var(--accent);height:20px;cursor:pointer;
}
.set-select{
  background:#14120C;border:1px solid var(--card-border);border-radius:6px;color:var(--fg);
  padding:.35rem .5rem;font-family:'Oswald',sans-serif;font-size:.8rem;cursor:pointer;
}
.set-check{
  appearance:none;width:42px;height:22px;border-radius:99px;cursor:pointer;position:relative;
  background:rgba(255,255,255,.08);border:1px solid var(--card-border);transition:background .15s;
}
.set-check::after{
  content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:var(--muted);transition:transform .15s,background .15s;
}
.set-check:checked{background:rgba(255,184,28,.35);border-color:var(--accent);}
.set-check:checked::after{transform:translateX(20px);background:var(--accent);}

/* Reduce Motion (settings toggle — same effect as the OS-level preference) */
body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after{
  animation-duration:0.01ms!important;transition-duration:0.01ms!important;
}

/* Big Card Text (readability bump, mirrors the Steam Deck font floor) */
body.bigtext .pip-stars{font-size:9px;bottom:-13px;}
body.bigtext .unit-name{font-size:10px;}
body.bigtext .bcard-name{font-size:11px;}
body.bigtext .bcard-desc{font-size:10px;line-height:1.2;}
body.bigtext .bcard-atk i,body.bigtext .bcard-hp i{font-size:9px;}
body.bigtext .bcard-spell-tag{font-size:9px;}
body.bigtext .unit > span > span{font-size:9px!important;}
body.bigtext #messageArea{font-size:1rem;}

/* ==========================================
   REDD UP — mulligan overlay
   ========================================== */
#mullCards{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin:1rem 0 1.2rem;}
.mull-slot{position:relative;cursor:pointer;border-radius:10px;transition:transform .1s;perspective:600px;}
@media (hover: hover){.mull-slot:hover{transform:translateY(-4px);}}
.mull-slot .bcard{cursor:pointer;transition:transform .38s ease;backface-visibility:hidden;}
.mull-slot::before{ /* yer equipped back — revealed when the card flips to toss */
  content:'';position:absolute;inset:0;z-index:1;border-radius:10px;pointer-events:none;
  background:#12100C var(--cardback,url('../assets/cardback.webp')) center/cover;
  border:2px solid rgba(255,184,28,.35);
  transform:rotateY(-180deg);backface-visibility:hidden;transition:transform .38s ease;
}
.mull-slot.toss::before{transform:rotateY(0);}
.mull-slot.toss .bcard{transform:rotateY(180deg);}
.mull-slot .mull-x{
  position:absolute;inset:0;z-index:2;display:none;align-items:center;justify-content:center;
  font-size:2.6rem;font-weight:700;color:#E74C3C;
  text-shadow:0 0 12px rgba(0,0,0,.9);border-radius:10px;
  background:rgba(20,10,8,.45);pointer-events:none;
}
.mull-slot.toss .mull-x{display:flex;}
.mull-slot.toss{outline:2px dashed #E74C3C;outline-offset:3px;}

/* ==========================================
   WORK ORDERS — daily quest modal + badge
   ========================================== */
.wo-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:16px;height:16px;border-radius:99px;background:var(--accent);color:#111;
  font-size:.62rem;font-weight:700;padding:0 4px;margin-left:2px;
  animation:pulse-gold 1.5s ease-in-out infinite;
}
.wo-sub{font-size:.78rem;color:var(--muted);margin:.3rem 0 .8rem;line-height:1.45;}
.wo-row{
  display:flex;align-items:center;gap:.8rem;padding:.6rem .7rem;margin:.4rem 0;
  border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(0,0,0,.25);
}
.wo-row.ready{border-color:rgba(255,184,28,.55);background:rgba(255,184,28,.07);}
.wo-row.claimed{opacity:.55;}
.wo-info{flex:1;min-width:0;}
.wo-text{font-family:'Oswald',sans-serif;font-size:.88rem;color:var(--fg);}
.wo-bar{height:7px;border-radius:99px;background:rgba(255,255,255,.08);margin:.35rem 0 .2rem;overflow:hidden;}
.wo-bar span{display:block;height:100%;background:linear-gradient(90deg,#8B6914,var(--accent));border-radius:99px;transition:width .3s;}
.wo-count{font-size:.68rem;color:var(--muted);}
.wo-claim{font-size:.8rem;padding:.4rem 1rem;margin:0;flex-shrink:0;}
.wo-stamp{
  font-family:'Oswald',sans-serif;font-weight:700;font-size:.8rem;color:#7DCE82;
  border:2px solid rgba(125,206,130,.6);border-radius:6px;padding:.2rem .5rem;
  transform:rotate(-6deg);flex-shrink:0;letter-spacing:.08em;
}
.wo-bonus{
  margin-top:.7rem;padding:.55rem .7rem;border-radius:8px;text-align:center;
  font-family:'Oswald',sans-serif;font-size:.78rem;letter-spacing:.05em;
  border:1px dashed rgba(255,184,28,.4);color:var(--muted);
}
.wo-bonus.got{border-style:solid;color:var(--accent);background:rgba(255,184,28,.08);}

/* ==========================================
   YER CARDS hub — tabs, binder, card backs
   ========================================== */
.cards-tabs{display:flex;gap:.4rem;margin-bottom:.8rem;border-bottom:1px solid rgba(255,184,28,.15);padding-bottom:.5rem;}
.cards-tab{
  font-family:'Oswald',sans-serif;font-size:.82rem;letter-spacing:.08em;
  background:none;border:1px solid transparent;border-radius:6px;color:var(--muted);
  padding:.35rem .9rem;cursor:pointer;transition:all .15s;
}
@media (hover: hover){.cards-tab:hover{color:var(--fg);}}
.cards-tab.on{color:var(--accent);border-color:rgba(255,184,28,.5);background:rgba(255,184,28,.08);}

/* binder */
.bn-cats{display:flex;flex-direction:column;gap:.25rem;margin:.5rem 0 .3rem;}
.bn-cat{display:flex;align-items:center;gap:.5rem;font-size:.72rem;}
.bn-cat-name{font-family:'Oswald',sans-serif;color:var(--cat-color);width:52px;text-align:right;letter-spacing:.05em;}
.bn-cat-bar{flex:1;height:7px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;}
.bn-cat-bar span{display:block;height:100%;background:var(--cat-color);border-radius:99px;opacity:.8;}
.bn-cat-n{color:var(--muted);width:48px;font-size:.68rem;}
.bn-rars{font-size:.68rem;color:var(--muted);margin:.2rem 0 .5rem;letter-spacing:.03em;}
.bn-chips{display:flex;gap:.3rem;flex-wrap:wrap;margin-bottom:.6rem;align-items:center;}
.bn-chip{
  font-family:'Oswald',sans-serif;font-size:.62rem;letter-spacing:.08em;
  background:rgba(0,0,0,.3);border:1px solid var(--card-border);border-radius:99px;
  color:var(--muted);padding:.22rem .6rem;cursor:pointer;
}
.bn-chip.on{color:var(--accent);border-color:var(--accent);background:rgba(255,184,28,.1);}
.bn-sep{width:1px;height:14px;background:rgba(255,255,255,.15);margin:0 .3rem;}
.bn-tile{width:96px;cursor:pointer;border-radius:8px;transition:transform .1s;}
@media (hover: hover){.bn-tile:hover{transform:translateY(-3px);}}
.bn-art{
  aspect-ratio:1;border-radius:8px 8px 0 0;background-size:cover;background-position:center 25%;
  border:1px solid var(--cat-color);border-bottom:none;position:relative;
}
.bn-tile.missing .bn-art{filter:grayscale(.9) brightness(.45);border-color:rgba(255,255,255,.15);}
.bn-name{
  font-family:'Oswald',sans-serif;font-size:.6rem;color:var(--fg);text-align:center;
  background:rgba(0,0,0,.55);border:1px solid var(--card-border);border-top:none;
  padding:2px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bn-tile.missing .bn-name{color:var(--muted);}
.bn-own{font-size:.58rem;color:var(--accent);text-align:center;padding:1px 2px 3px;}
.bn-tile.missing .bn-own{color:var(--muted);font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* card backs */
.cb-grid{display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center;margin-top:.7rem;}
.cb-tile{
  width:128px;text-align:center;padding:.6rem .5rem;border-radius:10px;
  border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.25);
}
.cb-tile.on{border-color:var(--accent);background:rgba(255,184,28,.07);box-shadow:0 0 14px rgba(255,184,28,.2);}
.cb-art{
  width:84px;height:126px;margin:0 auto .4rem;border-radius:8px;
  background-size:cover;background-position:center;border:1px solid rgba(255,184,28,.35);
  box-shadow:0 6px 16px rgba(0,0,0,.5);
}
.cb-name{font-family:'Oswald',sans-serif;font-size:.78rem;color:var(--fg);letter-spacing:.05em;}
.cb-blurb{font-size:.62rem;color:var(--muted);font-style:italic;margin:.15rem 0 .4rem;min-height:2em;line-height:1.3;}
.cb-btn{font-size:.72rem;padding:.3rem .8rem;margin:0;}
.cb-btn[disabled]{opacity:.45;cursor:default;}
.cb-state{
  font-family:'Oswald',sans-serif;font-size:.68rem;color:var(--accent);letter-spacing:.1em;
  border:1px dashed rgba(255,184,28,.5);border-radius:6px;padding:.25rem .5rem;display:inline-block;
}

/* ==========================================
   INTERFACE BATCH — NEW badges, log links,
   store owned count, post-battle summary
   ========================================== */
.bn-newtag{
  position:absolute;top:2px;right:2px;
  font-family:'Oswald',sans-serif;font-size:.5rem;font-weight:700;letter-spacing:.08em;
  color:#111;background:var(--accent);border-radius:4px;padding:1px 4px;
  box-shadow:0 1px 6px rgba(0,0,0,.6);
}
.log-card{color:var(--accent);cursor:help;border-bottom:1px dotted rgba(255,184,28,.4);}
.st-owned{color:var(--muted);font-style:normal;}
.gos-row{display:flex;gap:1.1rem;justify-content:center;margin:.4rem 0 .6rem;flex-wrap:wrap;}
.gos-stat{font-size:.78rem;color:var(--muted);}
.gos-stat b{font-family:'Oswald',sans-serif;font-size:1rem;color:var(--fg);}
.gos-mvp{
  display:inline-flex;gap:.6rem;align-items:center;text-align:left;
  background:rgba(255,184,28,.07);border:1px solid rgba(255,184,28,.4);border-radius:10px;
  padding:.45rem .8rem;margin-bottom:.6rem;cursor:help;
}
.gos-mvp-art{
  width:44px;height:44px;border-radius:8px;background-size:cover;background-position:center 25%;
  border:1px solid rgba(255,184,28,.5);flex-shrink:0;
}
.gos-mvp-label{font-family:'Oswald',sans-serif;font-size:.58rem;letter-spacing:.14em;color:var(--accent);}
.gos-mvp-name{font-family:'Oswald',sans-serif;font-size:.9rem;color:var(--fg);}
.gos-mvp-n{font-size:.65rem;color:var(--muted);}

/* inspectable surfaces: no text selection fighting the mouse-hold zoom */
[data-inspect],[data-inspect-img]{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}

/* draw FX: equipped back flies from the deck counter and flips to the face */
.draw-fly{
  position:fixed;z-index:60;width:58px;height:78px;margin:-39px 0 0 -29px;pointer-events:none;
  transform-style:preserve-3d;
  animation:draw-fly .6s cubic-bezier(.3,.7,.4,1) both;
}
.draw-fly-back,.draw-fly-face{
  position:absolute;inset:0;border-radius:6px;backface-visibility:hidden;
  border:1.5px solid rgba(255,184,28,.5);background-size:cover;background-position:center 25%;
  box-shadow:0 6px 18px rgba(0,0,0,.55);
}
.draw-fly-back{background-image:var(--cardback,url('../assets/cardback.webp'));background-color:#12100C;}
.draw-fly-face{transform:rotateY(180deg);background-color:#14120E;}
@keyframes draw-fly{
  0%{transform:translate(0,0) rotateY(0) scale(.55);opacity:0;}
  15%{opacity:1;}
  80%{opacity:1;}
  100%{transform:translate(var(--dx),var(--dy)) rotateY(180deg) scale(1);opacity:0;}
}

/* ==========================================
   CAMPAIGN MAP mobile QoL — slim footer so the
   district list gets the screen back
   ========================================== */
@media(max-width:560px){
  .map-foot .start-hint{display:none;}
  .studio-credit{margin-top:.3rem;font-size:.58rem;opacity:.6;}
  .studio-credit img{width:18px;height:18px;}
  .map-foot .btn-primary{font-size:.95rem;padding:.55rem 1.3rem;margin-top:.35rem;}
  .map-foot .btn-secondary{font-size:.72rem;padding:.4rem .75rem;margin-top:.35rem;}
  .map-foot{padding:.3rem 0 calc(.8rem + env(safe-area-inset-bottom));}
}

/* ---- PUNCH OUT (forfeit) — settings row + confirm (2026-08-21) ---- */
/* Settings rows toggled with .hidden (PUNCH OUT mid-duel, EXIT GAME on shells that can
   close themselves) need a rule to hide them: .set-row sets display:flex and this stylesheet
   has NO generic .hidden — only scoped ones (.screen.hidden, .modal.hidden, ...). Without
   this, both rows rendered ALWAYS, so PUNCH OUT sat on the map screen where it means nothing.
   Deliberately NOT a blanket .hidden{display:none!important}: .screen.hidden and .modal.hidden
   animate with opacity/visibility, and display:none cannot transition — a global rule would
   make every screen and modal pop instead of fade. */
.set-row.hidden{display:none;}

/* Category cue badge. Shape + colour, so the four categories stay distinguishable without
   relying on hue — eats/amber against slang/red is the deuteranopia confusion pair. Hidden
   by default because the tile grid is dense and most players do not need it; body.cat-cues
   is set from Settings. The inspect panel shows its icon unconditionally (js/battleux.js),
   since there it sits beside the category NAME and costs no clarity. */
/* The binder's category bars double as the LEGEND for the tile symbols, so the icon shows
   here unconditionally — beside the word it teaches the mapping and cannot be ambiguous,
   unlike the tile badges which are opt-in via Settings -> Category Symbols. */
.bn-cat-ico{display:inline-flex;width:1.05em;margin-right:.35em;color:var(--cat-color);}

/* ---- Records screen ---- */
.rec-h{font-family:'Oswald',sans-serif;letter-spacing:.08em;font-size:.85rem;color:var(--accent);
  margin:1.1rem 0 .5rem;text-transform:uppercase;}
.rec-h:first-child{margin-top:.2rem;}
.rec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.5rem;}
.rec-stat{background:#12100D;border:1px solid var(--line,#3A3528);border-radius:8px;padding:.55rem .7rem;}
.rec-stat b{display:block;font-family:'Oswald',sans-serif;font-size:1.35rem;color:var(--accent);line-height:1.1;}
.rec-stat span{font-size:.72rem;letter-spacing:.06em;color:var(--muted);}
.rec-tbl{width:100%;border-collapse:collapse;font-size:.82rem;margin-top:.2rem;}
.rec-tbl td{padding:.35rem .5rem;border-bottom:1px solid var(--line,#3A3528);white-space:nowrap;}
.rec-tbl td.num{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted);}
.rec-tbl tr.win td:first-child{color:var(--places);font-weight:600;}
.rec-tbl tr.loss td:first-child{color:var(--slang);font-weight:600;}

.cat-cue{display:none;}
/* The binder's NEW badge is top-right too. Only when a tile has one does the cue move
   down under it — :has() is fine on Electron 33 (Chromium 130) and current mobile webviews;
   where it is unsupported the two simply overlap on newly-won cards, which is cosmetic. */
body.cat-cues .bn-art:has(.bn-newtag) .cat-cue{top:22px;}
body.cat-cues .cat-cue{
  display:flex;align-items:center;justify-content:center;
  /* TOP RIGHT, not left: .dk-cost owns the top-left corner of every tile and the cue
     was sitting on top of the card's steam cost. */
  position:absolute;right:3px;top:3px;width:16px;height:16px;border-radius:4px;
  background:rgba(13,11,8,.82);color:var(--cat-color,#F5F0E3);font-size:9px;line-height:1;
  border:1px solid var(--cat-color,#3A3528);pointer-events:none;
}
.set-row.set-quit{border-top:1px solid var(--line,#3A3528);padding-top:.7rem;margin-top:.4rem;}
.set-row.set-quit label .set-note{display:block;font-family:'Source Sans 3',sans-serif;letter-spacing:0;font-size:.72rem;}
.btn-quit{border-color:var(--slang);color:var(--slang);padding:.45rem .9rem;font-size:.8rem;}
@media (hover: hover){.btn-quit:hover:not(:disabled){background:var(--slang);color:#fff;border-color:var(--slang);}}
.btn-quit:active:not(:disabled){transform:translateY(1px);filter:brightness(1.15);}
.btn-quit:disabled{opacity:.45;cursor:not-allowed;}
.btn-quit-confirm{border-color:var(--slang);color:var(--slang);background:transparent;}
@media (hover: hover){.btn-quit-confirm:hover{background:var(--slang);color:#fff;box-shadow:0 6px 24px rgba(231,76,60,.35);}}
.btn-quit-confirm:active{transform:translateY(1px);filter:brightness(1.15);}

/* ---- Steam-fed "clocked in" chip on the map (js/platform.js) ---- */
.online-chip{color:var(--places);}
.online-chip i{font-size:.8em;margin-right:.1rem;}

/* ==========================================
   CJK LANGUAGES (zh-CN / ja / ko — 2026-08-22 localization)
   Glyphs arrive through @font-face aliases of 'Oswald' and 'Source Sans 3' with
   a CJK unicode-range (vendor/fonts/cjk-<steamcode>.css, injected by js/i18n.js
   for those languages only), so every existing font rule keeps working and
   Latin text inside a CJK string still renders in Oswald. Ideographs need more
   size than Latin caps: the card/unit minimums rise and the Deck floor goes
   9px -> 12px; wide tracking on ideographs reads as gaps, so it tightens.
   ========================================== */
body.lang-cjk .btn-primary,body.lang-cjk .btn-secondary,body.lang-cjk h1,body.lang-cjk h2,body.lang-cjk h3,
body.lang-cjk .map-title,body.lang-cjk .d-name,body.lang-cjk .hero-name,body.lang-cjk .bcard-spell-tag{letter-spacing:.02em;}
body.lang-cjk .bcard-name{font-size:.62rem;letter-spacing:0;}
body.lang-cjk .bcard-desc{font-size:.54rem;line-height:1.3;}
body.lang-cjk .unit-name{font-size:min(.56rem,calc(var(--slot-w-f,80px)*.115));letter-spacing:0;}
body.lang-cjk .inspect-rules{font-size:.88rem;line-height:1.55;}
body.lang-cjk .inspect-flavor{font-size:.82rem;line-height:1.5;}
body.lang-cjk #messageArea{font-style:normal;}
body.lang-cjk .d-blurb,body.lang-cjk .lvl-blurb,body.lang-cjk .inspect-flavor,body.lang-cjk .ns-sub{font-style:normal;} /* synthetic italics mangle ideographs */
body.deck.lang-cjk .unit-name,body.bigtext.lang-cjk .unit-name{font-size:12px;}
body.deck.lang-cjk .bcard-name,body.bigtext.lang-cjk .bcard-name{font-size:13px;}
body.deck.lang-cjk .bcard-desc,body.bigtext.lang-cjk .bcard-desc{font-size:12px;line-height:1.3;}
body.deck.lang-cjk .bcard-spell-tag,body.bigtext.lang-cjk .bcard-spell-tag{font-size:12px;}
body.deck.lang-cjk .inspect-rules,body.deck.lang-cjk .inspect-flavor{font-size:.95rem;}