:root{
  --bg:#0c0c10; --bg2:#15151d; --panel:#1b1b25; --panel2:#23232f;
  --ink:#e9e6df; --dim:#9a96a6; --line:#34323f;
  --crimson:#c4283a; --crimson2:#8f1c2a; --gold:#d4af37; --gold2:#b8932c;
  --good:#5fc77e; --bad:#e0556a; --joker:#c77bd6; --benny:#e0b94a;
  --steel:#6f7d96;
  --rad:14px; --shadow:0 10px 30px rgba(0,0,0,.5);
  --fonthead:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  min-height:100%;overscroll-behavior:none}
body{
  background:
    radial-gradient(1200px 600px at 50% -10%, #1d1a22 0%, transparent 60%),
    radial-gradient(800px 500px at 50% 110%, #181018 0%, transparent 55%),
    var(--bg);
}
body.shake{animation:bodyshake .3s}
@keyframes bodyshake{0%,100%{transform:translate(0,0)}25%{transform:translate(-4px,2px)}50%{transform:translate(3px,-2px)}75%{transform:translate(-2px,1px)}}
#app{max-width:560px;margin:0 auto;min-height:100dvh;padding:env(safe-area-inset-top) 12px env(safe-area-inset-bottom);display:flex;flex-direction:column}

.screen{flex:1;display:flex;flex-direction:column;animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Buttons ---------- */
.btn{font-family:var(--fonthead);font-weight:700;border:1px solid var(--line);
  background:var(--panel2);color:var(--ink);border-radius:12px;padding:12px 16px;
  font-size:15px;cursor:pointer;transition:transform .08s ease,filter .15s,background .15s;
  display:inline-flex;flex-direction:column;align-items:center;gap:2px;line-height:1.15}
.btn i{font-style:normal;font-size:11px;color:var(--dim);font-weight:600}
.btn:active{transform:scale(.96)}
.btn-primary{background:linear-gradient(180deg,var(--crimson),var(--crimson2));border-color:#5e1019;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.4)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--dim)}
.btn.big{font-size:18px;padding:15px 26px;width:100%;max-width:320px}
.btn.small{font-size:13px;padding:8px 14px;align-self:center}
.btn-attack{background:linear-gradient(180deg,#2a2a38,#20202b);border-color:#3a3a4a}
.btn-attack.wild{border-color:var(--crimson2);box-shadow:inset 0 0 0 1px rgba(196,40,58,.35)}
.btn-defend{background:linear-gradient(180deg,#26303f,#1c2532);border-color:#33415a}
.btn-benny{background:linear-gradient(180deg,#e0b94a,#b8932c);border-color:#7d6314;color:#1b1305}
.btn-benny i{color:#5b4a16}

/* ---------- Title ---------- */
.title-screen{align-items:center;justify-content:center;text-align:center;gap:22px}
.brand{display:flex;flex-direction:column;align-items:center;gap:6px}
.brand-die{font-size:54px;color:var(--crimson);filter:drop-shadow(0 0 18px rgba(196,40,58,.55));animation:spinpulse 6s linear infinite}
@keyframes spinpulse{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.08)}100%{transform:rotate(360deg) scale(1)}}
.brand h1{font-family:var(--fonthead);font-size:46px;letter-spacing:3px;margin:0;line-height:.95;
  background:linear-gradient(180deg,#fff,#c9c4d2);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand h1 span{display:block;font-size:30px;letter-spacing:10px;color:var(--gold);background:none;-webkit-text-fill-color:var(--gold)}
.tag{color:var(--dim);margin:6px 0 0;font-size:14px}
.tag em{color:var(--ink)}
.title-actions{display:flex;flex-direction:column;gap:12px;width:100%;align-items:center}
.footnote{color:var(--dim);font-size:12px;line-height:1.6}

/* ---------- Hero select ---------- */
.screen-title{font-family:var(--fonthead);text-align:center;letter-spacing:1px;font-size:22px;margin:14px 0}
.hero-grid{display:flex;flex-direction:column;gap:14px}
.hero-card{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);
  border-radius:var(--rad);padding:16px;box-shadow:var(--shadow)}
.hero-card h3{margin:6px 0 0;font-family:var(--fonthead);font-size:20px}
.hero-emoji{font-size:34px}
.hero-arch{color:var(--gold);font-weight:700;font-size:12px;letter-spacing:2px;text-transform:uppercase}
.hero-blurb{color:var(--dim);font-size:13px;margin:8px 0}
.statline{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.statline span{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:4px 8px;font-size:12px;color:var(--dim)}
.statline b{color:var(--ink)}
.statline.derived span{background:#191921}
.weplist{display:flex;flex-direction:column;gap:4px;margin:8px 0 12px}
.wep{font-size:12px;color:var(--ink)}
.wep i{color:var(--dim);font-style:normal;margin-left:6px}
.hero-card .btn{width:100%}

/* ---------- Combat screen ---------- */
.combat-screen{display:flex;flex-direction:column;gap:8px;flex:1;padding:6px 0 4px;animation:fade .3s}
.enemy-zone{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;min-height:108px}
.enemy-card{position:relative;background:linear-gradient(180deg,#221820,#181018);border:1px solid #3a2730;
  border-radius:12px;padding:8px 10px;min-width:96px;text-align:center;cursor:pointer;transition:transform .1s,box-shadow .2s,border-color .2s}
.enemy-card.targeted{border-color:var(--crimson);box-shadow:0 0 0 1px var(--crimson),0 0 18px rgba(196,40,58,.35)}
.enemy-card.dead{opacity:.4;filter:grayscale(1)}
.enemy-card.hit{animation:ehit .38s}
@keyframes ehit{0%{transform:none}30%{transform:translateX(-6px) scale(1.05);box-shadow:0 0 24px rgba(224,85,106,.7)}100%{transform:none}}
.ec-emoji{font-size:30px;line-height:1}
.ec-name{font-weight:700;font-size:13px;margin-top:2px}
.ec-name .wc{font-size:9px;background:var(--gold);color:#1b1305;border-radius:4px;padding:0 4px;vertical-align:middle}
.ec-stats{display:flex;gap:8px;justify-content:center;font-size:11px;color:var(--dim);margin-top:2px}
.ec-status{min-height:16px;margin-top:2px}
.badge{font-size:9px;font-weight:800;letter-spacing:.5px;padding:1px 6px;border-radius:5px}
.badge.shaken{background:#3a2a12;color:var(--gold);border:1px solid var(--gold2)}
.badge.dead{background:#2a2a2a;color:#888}
.badge.wpen{background:#3a1620;color:var(--bad);border:1px solid #6a2030}
.wound-pips,.wounds .pip{margin-top:4px}
.wound-pips{display:flex;gap:3px;justify-content:center}
.pip{width:10px;height:10px;border-radius:50%;border:1px solid var(--line);background:#2a2a33;display:inline-block}
.pip.on{background:var(--crimson);border-color:var(--crimson2);box-shadow:0 0 6px rgba(196,40,58,.6)}

/* initiative strip */
.init-strip{display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap;min-height:54px}
.init-label{font-size:10px;color:var(--dim);letter-spacing:1px;text-transform:uppercase;width:100%;text-align:center}
.card{width:38px;height:50px;background:#f4f1e8;color:#1a1a1a;border-radius:6px;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(0,0,0,.5);
  animation:deal .4s ease;font-weight:800;border:1px solid #cbc6b8}
@keyframes deal{from{transform:translateY(-20px) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}
.card.red{color:var(--crimson)}
.card.black{color:#1a1a1a}
.card .rank{font-size:15px;line-height:1}
.card .suit{font-size:13px;line-height:1}
.card .owner{position:absolute;bottom:-15px;font-size:8px;color:var(--dim);font-weight:700;letter-spacing:.5px}
.card.hero-card-init{box-shadow:0 0 0 2px var(--gold),0 3px 8px rgba(0,0,0,.5)}
.card.joker{background:linear-gradient(135deg,#2a1430,#46204e);color:var(--joker);border-color:var(--joker)}

/* dice tray */
.dice-tray{min-height:60px;display:flex;align-items:center;justify-content:center}
.roll{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;
  background:rgba(20,20,28,.7);border:1px solid var(--line);border-radius:12px;padding:8px 10px;
  opacity:0;transform:scale(.92);transition:opacity .25s,transform .25s}
.roll.show{opacity:1;transform:none}
.roll.enemy{border-color:#5a2430}
.die-chip{background:#15151d;border:1px solid var(--line);border-radius:8px;padding:4px 7px;display:flex;flex-direction:column;align-items:center;min-width:34px;animation:diepop .3s ease}
@keyframes diepop{from{transform:scale(.5) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}
.die-chip .dt{font-size:9px;color:var(--dim)}
.die-chip .dv{font-size:14px;font-weight:800}
.die-chip.used{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold2)}
.die-chip.wild .dt{color:var(--crimson)}
.die-chip.aced{border-color:var(--good);box-shadow:0 0 10px rgba(95,199,126,.4)}
.die-chip.aced .dv{color:var(--good)}
.die-chip.dmg,.die-chip.bonus{background:#241820}
.roll .mod{color:var(--dim);font-weight:700}
.roll .eq{color:var(--dim)}
.roll .total{font-size:22px;font-weight:900;color:var(--gold)}
.roll .total.dmg{color:var(--crimson)}
.roll .total.crit{color:var(--bad);font-size:15px}
.roll .lbl{font-size:10px;color:var(--dim);width:100%;text-align:center;text-transform:uppercase;letter-spacing:1px}

/* log */
.log-box{flex:1;min-height:84px;max-height:30vh;overflow-y:auto;background:rgba(10,10,14,.5);
  border:1px solid var(--line);border-radius:12px;padding:8px 10px;font-size:13px;line-height:1.5;scroll-behavior:smooth}
.log-line{margin:2px 0;color:var(--ink)}
.log-line.sys,.log-line.flavor{color:var(--dim)}
.log-line.flavor{font-style:italic}
.log-line.stage{color:var(--gold);font-weight:800;letter-spacing:.5px;margin-top:6px}
.log-line.good{color:var(--good)}
.log-line.bad{color:var(--bad)}
.log-line.enemy{color:#e89aa6}
.log-line.benny{color:var(--benny)}
.log-line.joker{color:var(--joker);font-weight:700}
.log-line.kill{color:var(--gold);font-weight:800}

/* hero panel */
.hero-panel{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:12px;padding:8px 12px}
.hero-panel.hit{animation:ehit .38s}
.hp-top{display:flex;align-items:center;gap:8px;font-family:var(--fonthead)}
.hp-emoji{font-size:20px}
.hp-name{font-weight:800}
.hp-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--dim);margin-top:5px}
.hp-row b{color:var(--ink);font-size:14px}
.hp-row .wounds .pip{vertical-align:middle;margin-left:2px}
.benny{filter:saturate(1.2)}

/* action bar */
.action-bar{min-height:96px}
.turn-flag{text-align:center;color:var(--gold);font-weight:700;font-size:13px;margin-bottom:6px}
.turn-flag.dim{color:var(--dim)}
.btn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}

/* interlude / endcards */
.interlude{align-items:center;justify-content:center;text-align:center;gap:16px}
.win{color:var(--good)}
.interlude-sub{color:var(--dim);max-width:320px}
.reward-row{display:flex;flex-direction:column;gap:10px;width:100%;max-width:340px}
.reward-card{align-items:flex-start;text-align:left;width:100%;background:linear-gradient(180deg,var(--panel2),var(--panel))}
.reward-card b{font-size:15px;color:var(--gold)}
.reward-card span{color:var(--dim);font-size:12px;font-weight:600}
.next-foe{color:var(--dim);font-size:13px}
.next-foe b{color:var(--ink)}

.endcard{align-items:center;justify-content:center;text-align:center;gap:14px}
.end-emoji{font-size:64px;animation:fade .6s}
.endcard h1{font-family:var(--fonthead);letter-spacing:2px;font-size:30px;margin:0}
.endcard.victory h1{color:var(--gold);text-shadow:0 0 24px rgba(212,175,55,.5)}
.endcard.defeat h1{color:var(--crimson)}
.endcard p{color:var(--dim);max-width:340px}
.end-stats{font-size:13px}
.end-actions{display:flex;flex-direction:column;gap:10px;align-items:center;width:100%}

/* modal */
.modal-ov{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:50;animation:fade .2s}
.modal{background:var(--panel);border:1px solid var(--gold2);border-radius:14px;padding:18px;max-width:300px;text-align:center;box-shadow:var(--shadow)}
.modal p{margin:0 0 14px;font-size:14px}
.modal-btns{display:flex;gap:10px;justify-content:center}
.modal-btns .btn{flex:1}

@media(min-width:480px){.hero-grid{}}