/* ============ WAYSTONE — cozy tavern, dark dungeon ============ */
:root{
  --tavern-bg:#2b1d12;
  --tavern-panel:#3d2a18;
  --tavern-panel2:#4a3320;
  --wood:#5c4226;
  --amber:#e8a33d;
  --amber-soft:#f3c87d;
  --cream:#f5e6c8;
  --ink:#241808;
  --dungeon-bg:#13101e;
  --dungeon-panel:#1d1830;
  --dungeon-panel2:#262040;
  --torch:#ff9d45;
  --hp:#d4514e;
  --hp-bg:#3a1f24;
  --armor:#8fa8c8;
  --gold:#f2c14e;
  --ember:#ff7a45;
  --tide:#52a8e8;
  --storm:#c9a3ff;
  --stone:#b8a98a;
  --good:#7dc97a;
  --bad:#e06c66;
  --radius:10px;
  /* card width — desktop default; overridden per breakpoint */
  --cw:clamp(120px, 11.5vw, 178px);
  /* medieval display face (buttons, tabs, headings) */
  --font-display:'Cinzel', Georgia, 'Times New Roman', serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:Georgia,'Times New Roman',serif;
  background:var(--dungeon-bg);
  color:var(--cream);
  line-height:1.45;
  overflow-x:hidden;
}
/* scene backgrounds live on a fixed layer (background-attachment:fixed breaks on iOS) */
body::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--dungeon-bg)}
body.fight::before{
  background:linear-gradient(rgba(15,12,26,.78), rgba(15,12,26,.9)),
    url('art/bg_dungeon.jpg') center/cover no-repeat var(--dungeon-bg);
}
body.tavern::before{
  background:linear-gradient(rgba(32,21,11,.72), rgba(32,21,11,.88)),
    url('art/bg_tavern.jpg') center/cover no-repeat var(--tavern-bg);
}
body.titlebg::before{
  background:linear-gradient(rgba(15,12,26,.35), rgba(15,12,26,.75)),
    url('art/bg_title.jpg') center/cover no-repeat var(--dungeon-bg);
}
#app{
  width:100%;max-width:none;margin:0 auto;min-height:100dvh;
  padding:clamp(8px,1.4vw,20px) clamp(8px,2.5vw,34px);
  padding-bottom:calc(clamp(8px,1.4vw,20px) + env(safe-area-inset-bottom));
}
/* the fight is a full-height column: enemy up top, hand docked at the bottom */
body.fight #app{display:flex;flex-direction:column}
body.fight #app > .hand{margin-top:auto}
/* tavern & meta screens stay readable on huge monitors */
body.tavern #app > *{max-width:1240px;margin-left:auto;margin-right:auto}
button{font-family:inherit;cursor:pointer;border:none;border-radius:var(--radius)}
button:disabled{opacity:.45;cursor:not-allowed}
.hidden{display:none !important}

/* ---------- shared: medieval buttons (bronze plate, corner rivets) ---------- */
.btn{
  font-family:var(--font-display);font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;
  color:#2b1a06;font-size:.98rem;
  padding:12px 26px;border-radius:8px;min-height:46px;
  background:
    radial-gradient(circle at 8px 8px, #ffe9b8 0 1.7px, #00000055 2.6px, transparent 3.4px),
    radial-gradient(circle at calc(100% - 8px) 8px, #ffe9b8 0 1.7px, #00000055 2.6px, transparent 3.4px),
    radial-gradient(circle at 8px calc(100% - 8px), #b97c1f 0 1.7px, #00000066 2.6px, transparent 3.4px),
    radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), #b97c1f 0 1.7px, #00000066 2.6px, transparent 3.4px),
    linear-gradient(180deg,#f6d491 0%, var(--amber) 48%, #b06f1a 100%);
  border:1px solid #5e3c0c;
  border-bottom:4px solid #6e450e;
  box-shadow:inset 0 1px 0 #ffeec4, inset 0 -3px 7px #8a551255, 0 4px 10px #0009;
  text-shadow:0 1px 0 #ffe2a4;
  transition:transform .08s, filter .12s;
}
.btn:hover:not(:disabled){filter:brightness(1.06)}
.btn:active:not(:disabled){transform:translateY(2px);border-bottom-width:2px}
.btn.ghost{
  color:var(--amber-soft);
  background:
    radial-gradient(circle at 8px 8px, #e8a33d88 0 1.6px, #00000088 2.5px, transparent 3.3px),
    radial-gradient(circle at calc(100% - 8px) 8px, #e8a33d88 0 1.6px, #00000088 2.5px, transparent 3.3px),
    radial-gradient(circle at 8px calc(100% - 8px), #e8a33d55 0 1.6px, #00000088 2.5px, transparent 3.3px),
    radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), #e8a33d55 0 1.6px, #00000088 2.5px, transparent 3.3px),
    linear-gradient(180deg,#46311c 0%, #32220f 55%, #241808 100%);
  border:1px solid var(--wood);border-bottom:4px solid #1c1206;
  box-shadow:inset 0 1px 0 #ffffff1c, inset 0 -3px 7px #00000066, 0 4px 10px #0007;
  text-shadow:0 1px 2px #000;
}
.btn.small{padding:7px 15px;font-size:.8rem;min-height:38px;letter-spacing:.05em}
.btn.danger{
  color:#ffe6e4;
  background:
    radial-gradient(circle at 8px 8px, #ffb3ae 0 1.6px, #00000066 2.5px, transparent 3.3px),
    radial-gradient(circle at calc(100% - 8px) 8px, #ffb3ae 0 1.6px, #00000066 2.5px, transparent 3.3px),
    radial-gradient(circle at 8px calc(100% - 8px), #7e2522 0 1.6px, #00000066 2.5px, transparent 3.3px),
    radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), #7e2522 0 1.6px, #00000066 2.5px, transparent 3.3px),
    linear-gradient(180deg,#e0716d 0%, #c1413d 50%, #8c2926 100%);
  border:1px solid #5e1815;border-bottom:4px solid #531512;
  text-shadow:0 1px 2px #00000088;
}
.icon-btn{
  font-family:var(--font-display);font-weight:600;letter-spacing:.04em;
  background:linear-gradient(180deg,#3a2918,#241808);
  border:1px solid var(--wood);border-bottom:2px solid #1c1206;
  color:var(--amber-soft);
  border-radius:8px;padding:5px 12px;font-size:.84rem;min-height:32px;
  box-shadow:inset 0 1px 0 #ffffff14, 0 2px 5px #0006;
}
.icon-btn:hover{border-color:var(--amber)}
.pill{display:inline-block;padding:2px 10px;border-radius:99px;font-size:.78rem;background:#0006;border:1px solid #fff2}
.gold{color:var(--gold)}
.muted{opacity:.65;font-size:.86rem}
h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:.5px}

/* ---------- inline SVG icons ---------- */
.ic{width:1em;height:1em;display:inline-block;vertical-align:-.13em;fill:currentColor}
.ic.amber{color:var(--amber-soft)}
.ic.gold{color:var(--gold)}
.ic.pip{width:1.15em;height:1.15em;color:var(--torch)}
.ic.pip.off{opacity:.25}
.guard-pips{margin-left:8px;color:var(--armor)}
.btn .ic,.tab .ic,.icon-btn .ic{margin-right:3px}

/* ---------- title ---------- */
.title-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:92dvh;text-align:center;gap:18px;position:relative;overflow:hidden}
.logo-img{
  width:min(640px,86vw);height:auto;display:block;z-index:2;
  filter:drop-shadow(0 6px 24px #000c) drop-shadow(0 0 36px #e8a33d33);
}
.logo{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.2rem,7vw,3.6rem);letter-spacing:.3em;color:var(--amber-soft);
  text-shadow:0 0 30px #e8a33d55, 0 3px 0 #00000088;
}
.logo-sub{color:var(--cream);opacity:.8;font-style:italic;margin-top:-10px}
.title-sign{
  background:linear-gradient(180deg,var(--tavern-panel),var(--tavern-bg));
  border:3px solid var(--wood);border-radius:14px;padding:30px 44px;
  box-shadow:0 10px 40px #000a, inset 0 0 60px #0005;
}
.title-btns{display:flex;flex-direction:column;gap:10px;width:260px;max-width:90vw}

/* ---------- memorial wall ---------- */
.wall{max-width:620px;margin:0 auto;text-align:left}
.wall-frame{background:var(--tavern-panel);border:2px solid var(--wood);border-radius:var(--radius);padding:12px 16px;margin:8px 0}
.wall-frame .epitaph{font-style:italic;opacity:.85;font-size:.92rem}

/* ---------- HUD ---------- */
.hud{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 12px;margin-bottom:10px;
  background:#0005;border:1px solid #fff1;border-radius:var(--radius);flex-wrap:wrap}
.hud .stat{font-size:.95rem}

/* ---------- torches (NES-Zelda pixel flame, from korykelly.com) ---------- */
:root{--flame:#ff7a18;--flame-hi:#ffc24a}
.torch{position:absolute;bottom:8%;width:110px;z-index:1;pointer-events:none}
.torch.left{left:4.5%} .torch.right{right:4.5%}
.torch::before{content:'';position:absolute;left:50%;top:-18%;width:250px;height:330px;transform:translateX(-50%);
  background:radial-gradient(46% 36% at 50% 24%, rgba(255,170,60,.52), rgba(255,110,20,.18) 42%, transparent 66%),
             radial-gradient(60% 16% at 50% 93%, rgba(255,130,30,.30), transparent 70%);
  filter:blur(4px);z-index:-1;animation:torchGlow .42s steps(3) infinite}
@keyframes torchGlow{0%{opacity:.7;transform:translateX(-50%) scale(.96)}50%{opacity:1;transform:translateX(-51%) scale(1.07)}100%{opacity:.82;transform:translateX(-49%) scale(1)}}
.torch::after{content:'';position:absolute;left:46%;top:14%;width:3px;height:3px;border-radius:50%;background:var(--flame-hi);
  box-shadow:0 0 7px var(--flame), 18px 12px 0 -1px var(--gold), -16px 18px 0 -1px var(--flame), 10px 30px 0 0 var(--flame-hi), -8px 46px 0 -1px var(--gold), 20px 60px 0 -1px var(--flame);
  animation:torchSpark 1.05s linear infinite}
@keyframes torchSpark{0%{transform:translate(0,0) scale(1);opacity:0}12%{opacity:1}100%{transform:translate(-10px,-140px) scale(.2);opacity:0}}
.ztorch{width:100%;height:auto;display:block}
.ztorch .fa{animation:zswapA .18s steps(1) infinite, flameLeap .3s steps(3) infinite;transform-box:fill-box;transform-origin:50% 100%}
.ztorch .fb{animation:zswapB .18s steps(1) infinite, flameLeap .3s steps(3) infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes zswapA{0%,49.9%{opacity:1}50%,100%{opacity:0}}
@keyframes zswapB{0%,49.9%{opacity:0}50%,100%{opacity:1}}
@keyframes flameLeap{0%{transform:scaleY(1) scaleX(1)}50%{transform:scaleY(1.13) scaleX(.93)}100%{transform:scaleY(1.02) scaleX(1.02)}}
.ember{position:absolute;bottom:-10px;width:4px;height:4px;border-radius:50%;background:var(--flame-hi);
  box-shadow:0 0 8px var(--flame);opacity:0;animation:rise-ember linear infinite;pointer-events:none}
@keyframes rise-ember{0%{transform:translateY(0) scale(1);opacity:0}10%{opacity:.9}100%{transform:translateY(-92vh) translateX(30px) scale(.3);opacity:0}}
@media (max-width:900px){.torch{width:72px;bottom:3%}.torch.left{left:2%}.torch.right{right:2%}.torch::before{width:150px;height:200px}}
@media (max-width:560px){.torch{width:50px}.torch::before{width:104px;height:150px}}

/* ---------- enemy portraits ---------- */
.enemy-portrait{
  width:clamp(72px,9vw,116px);height:clamp(72px,9vw,116px);border-radius:12px;object-fit:cover;flex:none;
  border:2px solid #6b5333;box-shadow:0 6px 16px #000c;
}
.enemy-portrait.big{width:clamp(140px,24vw,220px);height:clamp(140px,24vw,220px);border-radius:16px}
.enemy-portrait.hit{animation:shake .35s}
.enemy-glyph{
  width:clamp(72px,9vw,116px);height:clamp(72px,9vw,116px);border-radius:12px;flex:none;
  border:2px solid #6b5333;box-shadow:0 6px 16px #000c;background:#0a0814;
  display:flex;align-items:center;justify-content:center;color:var(--stone);
}
.enemy-glyph .ic{width:62%;height:62%}
.enemy-glyph.big{width:clamp(140px,24vw,220px);height:clamp(140px,24vw,220px);border-radius:16px}
.enemy-glyph.hit{animation:shake .35s}

/* ---------- the board (monsters in play) ---------- */
.board{display:flex;gap:10px;align-items:stretch;justify-content:center;flex-wrap:wrap;margin-bottom:8px}
.mon{
  background:linear-gradient(180deg,var(--dungeon-panel2),var(--dungeon-panel));
  border:2px solid #3a3160;border-radius:14px;padding:10px 12px;position:relative;
  flex:1 1 240px;max-width:380px;min-width:215px;cursor:pointer;
  display:flex;gap:10px;align-items:flex-start;transition:border-color .15s, box-shadow .15s, opacity .3s;
}
.mon .enemy-portrait,.mon .enemy-glyph{width:clamp(56px,6.5vw,84px);height:clamp(56px,6.5vw,84px)}
.mon.boss{flex:2 1 320px;max-width:560px;border-color:#5a4a86}
.mon.boss .enemy-portrait,.mon.boss .enemy-glyph{width:clamp(84px,10vw,128px);height:clamp(84px,10vw,128px)}
.mon.tgt{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber), 0 0 18px #e8a33d44}
.mon.dead{opacity:.38;filter:grayscale(.9);cursor:default}
.mon-body{flex:1;min-width:0}
.mon-name{color:var(--amber-soft);font-size:1.02rem;line-height:1.2}
.mon.boss .mon-name{font-size:1.18rem}
.mon-meta{display:flex;gap:4px;flex-wrap:wrap;margin:3px 0}
.mon-meta .pill{font-size:.7rem;padding:1px 8px}
.mon .hpbar{height:17px;margin-top:4px}
.mon .hpbar .label{font-size:.72rem}
.mon .intent{font-size:.78rem;padding:3px 9px;margin-top:6px}
.mon.targetable{border-color:var(--good);box-shadow:0 0 0 1px var(--good), 0 0 16px #7dc97a44;cursor:crosshair}
.dmg-chip{
  position:absolute;top:-11px;right:-7px;padding:2px 11px;border-radius:99px;
  background:var(--good);color:#0c1d0c;font-weight:bold;font-size:.9rem;
  box-shadow:0 2px 8px #000c;z-index:2;
}
.statline{display:flex;align-items:center;gap:8px;margin-top:4px}
.statline .hpbar{flex:1;margin-top:0}
.m-atk{color:var(--amber-soft);font-size:.85rem;white-space:nowrap;background:#0007;border:1px solid #fff2;border-radius:8px;padding:2px 8px}
.taunt-chip{color:var(--stone)}

/* ---------- YOUR board (units in play) ---------- */
.yboard{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin:10px 0 4px}
.ally{
  position:relative;width:clamp(92px,8.5vw,128px);aspect-ratio:3/4;border-radius:10px;
  border:2px solid #6b5333;background:#15101f;cursor:pointer;overflow:hidden;
  box-shadow:0 4px 12px #000a;transition:transform .12s, box-shadow .15s, border-color .15s;
}
.ally .a-art{position:absolute;inset:0;background-size:cover;background-position:center 18%}
.ally .a-name{
  position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:.6rem;line-height:1.15;
  background:linear-gradient(transparent,#000d 35%);padding:14px 3px 20px;color:var(--amber-soft);
}
.ally .a-atk,.ally .a-hp{
  position:absolute;bottom:3px;font-weight:bold;font-size:.78rem;padding:1px 7px;border-radius:99px;
  background:#000b;border:1px solid #fff3;z-index:2;display:flex;align-items:center;gap:2px;
}
.ally .a-atk{left:3px;color:var(--amber-soft)}
.ally .a-hp{right:3px;color:#ff9d99}
.ally .a-hp.hurt{color:var(--bad);border-color:var(--bad)}
.ally .a-el{position:absolute;top:3px;right:4px;font-size:.85rem;filter:drop-shadow(0 1px 2px #000)}
.ally .a-taunt{position:absolute;top:3px;left:4px;color:var(--stone);filter:drop-shadow(0 1px 2px #000)}
.ally .a-state{
  position:absolute;top:38%;left:0;right:0;text-align:center;font-size:.62rem;font-style:italic;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--cream);text-shadow:0 1px 3px #000;
  background:#0008;padding:2px 0;
}
.ally.ready{border-color:var(--good);box-shadow:0 0 12px #7dc97a44, 0 4px 12px #000a}
@media (hover:hover){.ally.ready:hover{transform:translateY(-4px)}}
.ally.armed{border-color:var(--amber);box-shadow:0 0 0 2px var(--amber), 0 0 20px #e8a33d66;transform:translateY(-6px)}
.ally.sick .a-art,.ally.spent .a-art{filter:saturate(.55) brightness(.75)}
.ally.empty{
  border:1px dashed #fff3;background:none;box-shadow:none;cursor:default;
  display:flex;align-items:center;justify-content:center;opacity:.35;font-size:.7rem;
}

/* ---------- fight control bar ---------- */
.fightbar{
  display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;
  background:#0006;border:1px solid #fff1;border-radius:var(--radius);padding:8px 14px;margin:6px 0;
}
.fightbar .face{font-size:1.15rem;white-space:nowrap}
.fightbar .formbanner{font-size:.95rem;text-align:center}
.fightbar .formbanner .formname{color:var(--amber-soft)}
.fightbar .formbanner .dmg{color:var(--torch);font-size:1.1rem}
.fightbar .mana{white-space:nowrap}
.fightbar .mana .ic.pip{color:var(--tide)}
.fightbar .mana .ic.pip.off{opacity:.22}
.float-dmg.face-hit{color:var(--bad)}
.board-hint{text-align:center;margin:-2px 0 4px;font-size:.8rem}
.mon.phased{border-color:#8a3b32;box-shadow:0 0 0 1px #8a3b32, 0 0 16px #d4514e33}
.mon.phased.tgt{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber), 0 0 18px #e8a33d44, inset 0 0 14px #d4514e22}
.phase-chip{font-size:.68rem;color:var(--bad);text-transform:uppercase;letter-spacing:1px;white-space:nowrap}
.herald{
  font-style:italic;color:var(--amber-soft);opacity:.9;max-width:460px;
  font-size:.95rem;line-height:1.4;
}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px) rotate(-4deg)}40%{transform:translateX(6px)}60%{transform:translateX(-4px) rotate(3deg)}80%{transform:translateX(3px)}}
.enemy-name{font-size:1.25rem;color:var(--amber-soft)}
.enemy-joke{font-style:italic;opacity:.7;font-size:.86rem}
.hpbar{height:22px;background:var(--hp-bg);border-radius:99px;border:1px solid #000;overflow:hidden;margin-top:8px;position:relative}
.hpbar .fill{height:100%;background:linear-gradient(180deg,#e8625e,var(--hp));transition:width .45s ease;border-radius:99px}
.hpbar .label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.82rem;text-shadow:0 1px 2px #000}
.armor-chip{color:var(--armor)}
.intent{
  margin-top:8px;display:inline-block;background:#0007;border:1px dashed #fff3;
  padding:5px 12px;border-radius:8px;font-size:.9rem;
}
.minion-box{margin-top:8px;background:#0006;border:1px solid #fff2;border-radius:8px;padding:6px 10px;font-size:.9rem;display:flex;align-items:center;gap:8px}
.minion-box .mini-hp{flex:1;height:10px;background:var(--hp-bg);border-radius:99px;overflow:hidden}
.minion-box .mini-hp .fill{height:100%;background:var(--hp)}
.el-ember{color:var(--ember)} .el-tide{color:var(--tide)} .el-storm{color:var(--storm)} .el-stone{color:var(--stone)}
.curse-banner{margin-top:6px;color:var(--bad);font-size:.88rem}

/* ---------- party ---------- */
.party-row{display:flex;gap:8px;margin:10px 0;flex-wrap:wrap}
.comp{
  background:var(--dungeon-panel);border:1px solid #4a3f78;border-radius:var(--radius);
  padding:7px 10px;font-size:.82rem;max-width:200px;position:relative;cursor:default;
  display:flex;gap:8px;align-items:flex-start;
}
.comp-avatar{
  width:44px;height:44px;border-radius:8px;object-fit:cover;flex:none;
  border:1px solid #00000088;box-shadow:0 2px 5px #0008;
}
.comp-emoji{font-size:1.7rem;line-height:1;flex:none}
.comp-body{min-width:0}
.shop-portrait{
  width:100%;height:104px;object-fit:cover;object-position:center 22%;
  border-radius:7px;border:1px solid #00000066;margin-bottom:2px;
}
.tavern .comp{background:var(--tavern-panel2);border-color:var(--wood)}
.comp .c-name{color:var(--amber-soft);font-size:.88rem}
.comp .c-fx{opacity:.78;font-size:.76rem}
.comp.ko{opacity:.4;filter:grayscale(1)}
.comp.ko::after{content:"hiding under the table";position:absolute;bottom:2px;left:0;right:0;text-align:center;font-size:.62rem;color:var(--bad);font-style:italic}
.comp .sellbtn{margin-top:4px}
.empty-slot{border:1px dashed #fff3;border-radius:var(--radius);min-width:90px;display:flex;align-items:center;justify-content:center;opacity:.4;font-size:.78rem;padding:7px}

/* ---------- consumables ---------- */
.bag-row{display:flex;gap:8px;margin:6px 0;flex-wrap:wrap;align-items:center}
.bag-item{background:#0006;border:1px solid var(--wood);border-radius:8px;padding:6px 10px;font-size:.84rem;cursor:pointer}
.bag-item:hover{border-color:var(--amber)}

/* ---------- preview / actions ---------- */
.preview{
  text-align:center;margin:10px 0 4px;font-size:1.05rem;min-height:34px;
}
.preview .formname{color:var(--amber-soft)}
.preview .dmg{font-size:1.5rem;color:var(--torch)}
.actions{display:flex;justify-content:center;gap:14px;align-items:center;margin:8px 0 4px;flex-wrap:wrap}
.pips{font-size:.92rem;letter-spacing:2px}

/* ---------- unit cards (illustrated; container-query scaled) ---------- */
.hand{display:flex;justify-content:center;gap:clamp(6px,.9vw,12px);flex-wrap:wrap;padding:18px 0 14px}
.card{
  width:var(--cw);aspect-ratio:132/200;border-radius:11px;position:relative;cursor:pointer;user-select:none;
  container-type:inline-size;
  background:linear-gradient(180deg,#2e2417,#241b10);
  border:2px solid #6b5333;box-shadow:0 4px 12px #000a, inset 0 0 0 1px #00000066;
  transition:transform .12s, box-shadow .12s;
  display:flex;flex-direction:column;overflow:hidden;
  font-family:Georgia,serif;color:var(--cream);
}
@media (hover:hover){.card:hover{transform:translateY(-4px)}}
.card.sel{transform:translateY(-14px);box-shadow:0 0 0 3px var(--amber), 0 0 22px #e8a33d66, 0 12px 20px #000c}
.card .c-art{
  height:81.8cqw;background-size:cover;background-position:center 18%;
  border-bottom:1px solid #6b533388;flex:none;
}
.card .c-power{ /* mana cost gem */
  position:absolute;top:3.8cqw;left:3.8cqw;width:19.7cqw;height:19.7cqw;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #cdeaff, var(--tide) 60%, #1d4f86);
  color:#06121f;font-weight:bold;font-size:11.5cqw;display:flex;align-items:center;justify-content:center;
  border:1px solid #103a5e;box-shadow:0 2px 4px #000a;
}
.card .c-atk,.card .c-hp{
  position:absolute;bottom:2cqw;font-weight:bold;font-size:9.5cqw;z-index:2;
  padding:.5cqw 6cqw;border-radius:99px;background:#000c;border:1px solid #fff3;
}
.card .c-atk{left:2cqw;color:var(--amber-soft)}
.card .c-hp{right:2cqw;color:#ff9d99}
.card.can-play{border-color:#7dc97a;box-shadow:0 0 10px #7dc97a44, 0 4px 12px #000a}
.card.cant-play .c-art{filter:brightness(.78)}
.card.cant-play .c-power{filter:grayscale(.55)}
.card .c-gem{
  position:absolute;top:6cqw;right:6cqw;width:11.4cqw;height:11.4cqw;transform:rotate(45deg);
  border:1px solid #000a;box-shadow:0 1px 3px #000a, inset 0 0 4px #ffffff55;
}
.card .c-gem.g-ember{background:linear-gradient(135deg,#ffb27a,var(--ember) 60%,#9c3a14)}
.card .c-gem.g-tide{background:linear-gradient(135deg,#a8dcff,var(--tide) 60%,#1d5f96)}
.card .c-gem.g-storm{background:linear-gradient(135deg,#e6d4ff,var(--storm) 60%,#6f4e9e)}
.card .c-gem.g-stone{background:linear-gradient(135deg,#e8ddc2,var(--stone) 60%,#6e6147)}
.card .c-gem.g-wild{background:conic-gradient(var(--ember),var(--tide),var(--storm),var(--stone),var(--ember))}
.card .c-info{
  position:absolute;top:23cqw;right:4cqw;width:15cqw;height:15cqw;border-radius:50%;
  background:#000a;border:1px solid #fff5;color:var(--amber-soft);
  font-size:9.5cqw;font-style:italic;font-weight:bold;font-family:Georgia,serif;
  display:flex;align-items:center;justify-content:center;z-index:3;cursor:help;
}
.card .c-info:hover{background:#000d;border-color:var(--amber)}
.card .c-name{
  font-size:8.7cqw;font-weight:bold;color:var(--amber-soft);text-align:center;
  padding:3cqw 3cqw 0;line-height:1.15;letter-spacing:.2px;
}
.card .c-meta{font-size:7.3cqw;text-align:center;opacity:.7;text-transform:uppercase;letter-spacing:.6cqw;padding:.8cqw 0 1.5cqw}
.card .c-fx{
  font-size:7cqw;text-align:center;opacity:.85;line-height:1.25;padding:0 4.5cqw;
  font-style:italic;
}
.card .enh{
  position:absolute;bottom:2.5cqw;left:26cqw;right:26cqw;text-align:center;font-size:6.4cqw;font-weight:bold;
  letter-spacing:1px;text-transform:uppercase;padding:1.2cqw 0;background:#000c;color:var(--amber-soft);
  border-radius:99px;border:1px solid #fff2;z-index:1;
}
.card.ed-moonlit{border-color:#9a8fd8;box-shadow:0 0 14px #9a8fd866, 0 4px 12px #000a}
.card.ed-prismatic{border-color:#d4a5ff;box-shadow:0 0 16px #d4a5ff88, 0 4px 12px #000a}
.card.enh-crystal{border-color:#7cc7de;box-shadow:0 0 12px #7cc7de66, 0 4px 12px #000a}
.card.enh-gilded{border-color:#e3b341;box-shadow:0 0 12px #e3b34188, 0 4px 12px #000a}
.card.enh-warded{border-color:#8fa8c8;box-shadow:0 0 12px #8fa8c866, 0 4px 12px #000a}
.card.mini{width:calc(var(--cw) * .72)}
.card.mini .c-fx{display:none}

/* ---------- log line ---------- */
.barkeep-line{
  text-align:center;font-style:italic;opacity:.75;font-size:.9rem;min-height:22px;margin-bottom:6px;
}

/* ---------- pre-fight ---------- */
.prefight{display:flex;flex-direction:column;align-items:center;gap:14px;padding:30px 0;text-align:center}
.pf-board{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;align-items:flex-start}
.pf-mon{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:330px}
.pf-mon .pf-name{font-size:1.25rem}
.pf-mon.boss .pf-name{font-size:1.5rem}
.weak-tip{background:#0006;border:1px solid #fff2;border-radius:8px;padding:6px 14px;font-size:.92rem}

/* ---------- tavern ---------- */
.tavern-head{text-align:center;padding:6px 0 2px}
.tavern-head h2{color:var(--amber-soft);font-variant:small-caps;letter-spacing:.2em;font-size:1.6rem}
.tabs{display:flex;gap:6px;justify-content:center;margin:10px 0;flex-wrap:wrap}
.tab{
  font-family:var(--font-display);font-weight:600;letter-spacing:.04em;
  background:#0005;color:var(--cream);padding:7px 16px;border-radius:8px 8px 0 0;
  border:1px solid var(--wood);border-bottom:none;font-size:.84rem;min-height:38px;
}
.tab.active{background:var(--tavern-panel2);color:var(--amber-soft)}
.tavern-panel{
  background:var(--tavern-panel2);border:2px solid var(--wood);border-radius:var(--radius);
  padding:16px;min-height:240px;box-shadow:inset 0 0 50px #0004;
}
.shop-grid{display:flex;gap:10px;flex-wrap:wrap}
.shop-item{
  background:var(--tavern-panel);border:1px solid var(--wood);border-radius:var(--radius);
  padding:10px 12px;width:200px;display:flex;flex-direction:column;gap:5px;font-size:.85rem;
}
.shop-item .s-name{color:var(--amber-soft);font-size:.95rem}
.shop-item .s-joke{font-style:italic;opacity:.65;font-size:.76rem}
.shop-item .s-buy{margin-top:auto}
.rarity-common{border-left:3px solid #9aa} .rarity-uncommon{border-left:3px solid #6db56d}
.rarity-rare{border-left:3px solid #d4a017} .rarity-legendary{border-left:3px solid #c06ee0}

/* ---------- overlay / modal ---------- */
#overlay,#overlay2{
  position:fixed;inset:0;background:#000b;display:flex;align-items:center;justify-content:center;z-index:50;padding:16px;
}
#overlay2{z-index:80}
.modal{
  background:var(--tavern-panel);border:3px solid var(--wood);border-radius:14px;
  padding:22px;max-width:640px;width:100%;max-height:88dvh;overflow-y:auto;box-shadow:0 20px 60px #000;
  overscroll-behavior:contain;
}
.modal h3{color:var(--amber-soft);margin-bottom:10px}
.modal.wide{max-width:880px}
.choice-grid{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:12px 0}

/* ---------- card detail ---------- */
.card-detail{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
.cd-art{
  width:min(200px,42vw);aspect-ratio:1;object-fit:cover;object-position:center 15%;
  border-radius:12px;border:2px solid #6b5333;box-shadow:0 8px 24px #000c;flex:none;
}
.cd-body{flex:1;min-width:230px}
.cd-body h3{margin-bottom:2px}
.cd-box{background:#0005;border:1px solid #fff2;border-radius:8px;padding:8px 12px;margin:8px 0;font-size:.88rem;line-height:1.4}
.kw{color:var(--amber-soft);font-weight:bold}

/* ---------- rules ---------- */
.rules{text-align:left;line-height:1.5}
.rules h4{
  color:var(--amber-soft);margin:18px 0 6px;font-variant:small-caps;letter-spacing:.12em;
  font-size:1.08rem;border-bottom:1px solid #fff2;padding-bottom:3px;
}
.rules h4:first-child{margin-top:0}
.rules p{margin:6px 0;font-size:.93rem}
.rules ul{margin:6px 0 6px 20px;font-size:.93rem}
.rules li{margin:3px 0}
.rules table{width:100%;border-collapse:collapse;font-size:.84rem;margin:8px 0}
.rules th,.rules td{border:1px solid #fff2;padding:5px 8px;text-align:left;vertical-align:top}
.rules th{background:#0005;color:var(--amber-soft);font-weight:bold}
.rules .wheel{
  text-align:center;font-size:1rem;background:#0005;border:1px solid #fff2;border-radius:8px;
  padding:10px;margin:8px 0;letter-spacing:.5px;
}
.rules .table-scroll{overflow-x:auto}

/* ---------- floating damage ---------- */
#toasts{position:fixed;inset:0;pointer-events:none;z-index:60}
.float-dmg{
  position:absolute;font-size:2rem;font-weight:bold;color:var(--torch);
  text-shadow:0 2px 4px #000;animation:floatUp 1.1s ease-out forwards;
}
@keyframes floatUp{0%{opacity:0;transform:translateY(10px) scale(.7)}15%{opacity:1;transform:translateY(0) scale(1.15)}100%{opacity:0;transform:translateY(-70px) scale(1)}}
.toast{
  position:fixed;left:50%;transform:translateX(-50%);bottom:30px;
  background:var(--tavern-panel);border:1px solid var(--amber);color:var(--cream);
  padding:9px 18px;border-radius:99px;font-size:.9rem;animation:toastIn 2.6s forwards;z-index:70;
  max-width:92vw;text-align:center;
}
@keyframes toastIn{0%{opacity:0;transform:translate(-50%,16px)}10%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}

/* ---------- death / victory ---------- */
.end-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:90dvh;text-align:center;gap:14px}
.portrait{
  font-size:4.5rem;background:var(--tavern-panel);border:4px solid var(--wood);
  border-radius:10px;padding:24px 34px;box-shadow:0 10px 40px #000a;filter:sepia(.5)
}
.stats-box{background:#0005;border:1px solid #fff2;border-radius:var(--radius);padding:12px 22px;font-size:.95rem}

/* ============ TABLET (641–1024px) ============ */
@media (max-width:1024px){
  :root{--cw:clamp(104px, 12.5vw, 150px)}
  .shop-item{width:calc(50% - 6px);min-width:170px}
}

/* ============ PHONE (≤640px) ============ */
@media (max-width:640px){
  :root{--cw:min(31vw, 126px)}
  #app{padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
  /* hand becomes a horizontal card rail — big tappable cards, swipe to browse */
  body.fight #app > .hand{
    flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;justify-content:flex-start;
    gap:8px;padding:16px 4px 12px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  }
  body.fight #app > .hand .card{flex:none;scroll-snap-align:center}
  .card.sel{transform:translateY(-8px)}
  /* party + tabs scroll sideways instead of stacking forever */
  .party-row{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .comp{flex:none;max-width:170px;font-size:.74rem}
  .empty-slot{flex:none}
  .tabs{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .tab{flex:none}
  .hud{padding:6px 8px;gap:6px}
  .hud .stat{font-size:.8rem}
  .board{gap:7px}
  .mon{min-width:0;flex:1 1 100%;max-width:none;padding:8px 10px}
  .mon .enemy-portrait,.mon .enemy-glyph{width:52px;height:52px}
  .mon.boss .enemy-portrait,.mon.boss .enemy-glyph{width:72px;height:72px}
  .mon-name{font-size:.92rem}
  .mon .intent{font-size:.72rem}
  .enemy-name{font-size:1.05rem}
  .enemy-joke{font-size:.78rem}
  .intent{font-size:.82rem;padding:4px 9px}
  .preview{font-size:.95rem}
  .preview .dmg{font-size:1.25rem}
  .actions .btn{padding:10px 18px}
  /* your board: keep all 5 units on one row */
  .yboard{flex-wrap:nowrap;gap:6px}
  .ally{width:auto;flex:1 1 0;max-width:19vw;min-width:0}
  .ally .a-name{font-size:.52rem;padding:10px 2px 16px}
  .ally .a-atk,.ally .a-hp{font-size:.66rem;padding:0 5px}
  .fightbar{gap:8px;padding:6px 8px}
  .fightbar .face{font-size:.95rem}
  .fightbar .formbanner{font-size:.78rem;flex:1 1 100%;order:5}
  .fightbar .btn{padding:8px 14px;min-height:38px;font-size:.8rem}
  .shop-item{width:100%}
  .modal{padding:14px;border-width:2px}
  .tavern-panel{padding:10px}
  .prefight{padding:18px 0}
  .end-screen{gap:10px}
  .portrait{font-size:3.2rem;padding:16px 24px}
}