@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Nunito:wght@400;700;800;900&display=swap');

/* ---------- palette & base ---------- */
:root{
  --grass:#5a9a3f; --grass-dark:#3d6e2b; --dirt:#6d4a2b; --dirt-dark:#4d321c;
  --stone:#6b6f6c; --stone-dark:#3b3f3d; --deep:#1f2421; --plank:#9c6b3a; --plank-dark:#7a512a;
  --paper:#f1efe2; --ink:#1b211b; --gold:#f3c85b; --red:#d9534f; --blue:#5ab5d0; --purple:#9a5fa8;
  --text:#f3f1e6; --muted:#c3c8bf; --focus:#ffe36b;
  --pixel:'Press Start 2P',ui-monospace,monospace;
  --body:Nunito,system-ui,-apple-system,"Segoe UI",sans-serif;
}
html{font-size:16px;-webkit-text-size-adjust:100%}
html[data-text="large"]{font-size:19px}
*{box-sizing:border-box}
body{
  margin:0;min-height:100vh;color:var(--text);font-family:var(--body);line-height:1.45;
  background:
    linear-gradient(#1a1f1cd9,#1a1f1cd9),
    repeating-linear-gradient(90deg,#4a4f4c 0 16px,#424744 16px 32px),
    repeating-linear-gradient(0deg,#4a4f4c 0 16px,#3d423f 16px 32px);
  background-blend-mode:normal,multiply,normal;
  padding-bottom:env(safe-area-inset-bottom);
}
a{color:var(--gold)}
h1,h2,h3{font-weight:900;margin:.2em 0 .4em}
h1,h2{font-family:var(--pixel);letter-spacing:.02em;line-height:1.5}
h2{font-size:1.05rem}
h3{font-size:1.05rem}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.hidden{display:none!important}
.muted{color:var(--muted)}
.small-print{font-size:.82rem}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--ink);padding:8px;z-index:50}
.skip-link:focus{left:8px}

/* ---------- top bar: grass on dirt ---------- */
.topbar{
  position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:calc(8px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left));
  background:linear-gradient(var(--grass) 0 6px,var(--grass-dark) 6px 10px,var(--dirt) 10px),var(--dirt);
  border-bottom:4px solid var(--dirt-dark);
}
.brand{display:flex;gap:10px;align-items:center;background:none;border:0;color:var(--text);cursor:pointer;text-align:left;padding:4px}
.brand strong{font-family:var(--pixel);font-size:.72rem;display:block;line-height:1.7}
.brand small{color:#e7d9c4;font-size:.75rem}
.brand-block{width:30px;height:30px;flex:none;border:2px solid #23170c;
  background:linear-gradient(var(--grass) 0 35%,var(--grass-dark) 35% 45%,var(--dirt) 45%);box-shadow:inset -3px -3px 0 #0003}
.top-actions{display:flex;gap:6px;align-items:center}
.net-status{font-size:.75rem;font-weight:800;padding:4px 8px;background:#000a;border:2px solid #000;border-radius:2px}
.net-status.bad{background:#7a1f1b}

main{max-width:1200px;margin:0 auto;padding:clamp(10px,2.5vw,24px) max(10px,env(safe-area-inset-left))}
.screen{animation:fadeIn .15s ease-out}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ---------- buttons ---------- */
.btn{
  font:800 .95rem var(--body);border:3px solid #111;border-radius:2px;padding:10px 14px;min-height:44px;cursor:pointer;
  box-shadow:inset -3px -4px 0 #0004,inset 3px 3px 0 #fff3,3px 3px 0 #000a;color:var(--ink);
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;touch-action:manipulation;
}
.btn small{font-size:.72rem;font-weight:800;opacity:.85}
.btn.primary{background:var(--grass);color:#0f1d0b}
.btn.secondary{background:#c9cbc4}
.btn.danger{background:#d9534f;color:#fff}
.btn.small{min-height:36px;padding:5px 10px;font-size:.82rem}
.btn.big{font-size:1.05rem;padding:14px}
.btn:hover:not(:disabled):not([aria-disabled="true"]){filter:brightness(1.08)}
.btn:active:not(:disabled):not([aria-disabled="true"]){transform:translateY(2px);box-shadow:inset -2px -2px 0 #0004,1px 1px 0 #000a}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;filter:grayscale(.7);cursor:not-allowed}
.row{display:flex;gap:8px;flex-wrap:wrap}
.row.center{justify-content:center}
.stack{display:grid;gap:10px}

/* ---------- panels ---------- */
.panel{
  background:linear-gradient(#2e3330f2,#262a28f2),repeating-linear-gradient(45deg,#000 0 2px,transparent 2px 6px);
  border:4px solid #111;box-shadow:inset 3px 3px 0 #ffffff1a,inset -3px -3px 0 #0006,5px 5px 0 #0009;
  padding:clamp(14px,3vw,28px);
}
.section-head{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:4px 0 16px}
.section-head>div{flex:1;min-width:200px}
.section-head p{margin:0}
.record{font-family:var(--pixel);font-size:.7rem;color:var(--gold)}
input,select{
  font:700 1rem var(--body);background:var(--paper);color:var(--ink);border:3px solid #111;border-radius:2px;
  padding:10px;min-height:44px;width:100%;
}
label{font-weight:800}
.toggle{display:flex;gap:10px;align-items:center}
.toggle input{width:24px;height:24px;min-height:0}
.message{min-height:1.4em;font-weight:800;color:var(--gold);margin:6px 0}
.message.error{color:#ff9b8f}

/* ---------- menu ---------- */
.hero{max-width:760px;margin:2vh auto;text-align:center}
.hero h1{font-size:clamp(1.6rem,6.5vw,3rem);text-shadow:4px 4px 0 #000}
.hero h1 span{color:#8fd16a}
.eyebrow{font-family:var(--pixel);font-size:.6rem;letter-spacing:.1em;color:#b8d99d;margin:0}
.menu-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:540px;margin:20px auto}
.note{font-size:.85rem;color:var(--muted);border-top:2px solid #ffffff1a;padding-top:12px}
.account-summary{font-weight:900;color:var(--gold)}

.difficulty-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}
.difficulty{color:var(--text);text-align:left;cursor:pointer;display:grid;gap:8px;font:inherit}
.difficulty strong{font-family:var(--pixel);font-size:.8rem}
.difficulty:hover{border-color:var(--gold)}
.form-row{display:grid;gap:6px;max-width:420px}

.auth-panel{max-width:480px;margin:0 auto}
.code-input{font-family:var(--pixel)!important;font-size:1.1rem!important;letter-spacing:.4em;text-align:center;text-transform:uppercase}
.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.resume{margin-bottom:14px;text-align:center}
.lobby{max-width:560px;margin:2vh auto;text-align:center;display:grid;gap:8px;justify-items:center}
.room-code{font-size:clamp(1.6rem,8vw,2.6rem);letter-spacing:.25em;margin:0;color:var(--gold)}
.lobby-players{list-style:none;padding:0;margin:8px 0;display:grid;gap:8px;width:100%}
.lobby-players li{display:flex;justify-content:space-between;gap:8px;background:#0005;border:2px solid #000;padding:10px 12px;font-weight:800}
.badge{font-size:.78rem;padding:2px 8px;border:2px solid #000;background:#555;border-radius:2px}
.badge.ok{background:var(--grass);color:#0f1d0b}
.badge.wait{background:var(--gold);color:var(--ink)}
.badge.off{background:#7a1f1b;color:#fff}

/* ---------- cards ---------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.card{
  background:var(--paper);color:var(--ink);border:4px solid #111;border-radius:3px;padding:7px;position:relative;
  box-shadow:inset 0 0 0 3px #8fbf6a,3px 3px 0 #000a;display:flex;flex-direction:column;gap:5px;text-align:left;font:inherit;min-width:0;
}
.card-item{box-shadow:inset 0 0 0 3px #d5ad50,3px 3px 0 #000a}
.card-top{display:flex;justify-content:space-between;align-items:center;gap:4px;font-weight:900;font-size:.92rem}
.card-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-hp,.card-cost{font-size:.78rem;background:#111;color:#fff;padding:1px 5px;border-radius:2px;white-space:nowrap}
.card-art{
  aspect-ratio:16/10;display:grid;place-items:center;border:3px solid #23301e;
  background:repeating-linear-gradient(0deg,#a5c67e 0 10px,#92b76c 10px 20px);
}
.card-item .card-art{border-color:#4d321c;background:
  linear-gradient(90deg,transparent 48%,#4d321c 48% 52%,transparent 52%),
  repeating-linear-gradient(0deg,var(--plank) 0 9px,var(--plank-dark) 9px 11px)}
.card-art .art{width:56%;height:auto;max-height:90%;image-rendering:pixelated;filter:drop-shadow(2px 2px 0 #0006)}
.card-type{font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.04em;color:#4a5547}
.card-stats{display:flex;justify-content:space-between;font-weight:900;font-size:.82rem}
.card-text{font-size:.78rem;line-height:1.3;margin:0}
.card.selected{outline:4px solid var(--gold);outline-offset:1px;transform:translateY(-4px)}
.card-large{max-width:300px;margin:0 auto}
.card-large .card-text{font-size:.92rem}
.card-buttons{display:flex;gap:6px}
.card-buttons .btn{flex:1;min-height:38px;font-size:.82rem;padding:4px}

/* ---------- deck builder ---------- */
.deck-layout{display:grid;grid-template-columns:1fr 300px;gap:14px;align-items:start}
.tools{display:flex;gap:8px;margin-bottom:10px}
.tools select{max-width:150px}
.deck-side{position:sticky;top:80px}
.deck-list{list-style:none;padding:0;margin:0 0 10px;display:grid;gap:4px;max-height:55vh;overflow:auto}
.deck-list li{display:flex;align-items:center;gap:6px;background:#0005;border:2px solid #000;padding:4px 6px;font-weight:800}
.deck-list .mini{width:24px;height:24px}
.deck-list .count{margin-left:auto;font-family:var(--pixel);font-size:.65rem}
.deck-list .btn{min-height:32px;min-width:32px;padding:0 6px}

/* ---------- rules / settings ---------- */
.rules{line-height:1.6}
.rules h3{margin-top:18px;color:var(--gold)}
.how-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.how-cards div{background:#0005;border:2px solid #000;padding:8px;font-size:.9rem}
.settings{max-width:520px}

/* ---------- battlefield ---------- */
.battle-grid{
  display:grid;gap:8px;
  grid-template-columns:minmax(0,1fr) minmax(220px,280px);
  grid-template-areas:"opp-info turn" "opp-zone mid" "my-zone mid" "my-info menu";
}
.player-info.opp{grid-area:opp-info}
.player-info.me{grid-area:my-info}
.turn-box{grid-area:turn}
.battle-menu{grid-area:menu;align-self:center}
.opp-zone{grid-area:opp-zone}
.my-zone{grid-area:my-zone}
.midline{grid-area:mid}
.player-info{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;background:#1d241ee6;border:3px solid #000;padding:6px 10px}
.player-info .who{font-weight:900;display:flex;align-items:center;gap:6px}
.player-info .counts{font-size:.8rem;color:var(--muted)}
.conn{font-size:.72rem;font-weight:900;padding:1px 6px;border:2px solid #000}
.conn.on{background:var(--grass);color:#0f1d0b}
.conn.off{background:#7a1f1b;color:#fff}
.turn-box{display:grid;place-items:center;text-align:center;border:3px solid #000;padding:6px;background:#d4e9b8;color:#20361f}
.turn-box strong{font-family:var(--pixel);font-size:.66rem;line-height:1.6}
.turn-box small{font-size:.78rem;font-weight:800}
.turn-box.theirs{background:#e3c3b8;color:#3a1c15}
.turn-box.over{background:var(--gold);color:var(--ink)}

.zone{
  display:flex;flex-direction:column;gap:6px;padding:8px;border:3px solid #000;min-width:0;
  background:linear-gradient(#27331fe6,#27331fe6),repeating-linear-gradient(0deg,var(--grass-dark) 0 12px,#355f26 12px 24px);
}
.opp-zone{background:linear-gradient(#33281fe6,#33281fe6),repeating-linear-gradient(0deg,var(--dirt) 0 12px,var(--dirt-dark) 12px 24px)}
.active-slot{display:flex;justify-content:center;min-height:150px;align-items:center}
.bench{display:flex;justify-content:center;gap:6px;min-height:64px;flex-wrap:wrap}
.bench .empty-slot{width:88px;min-height:64px;border:2px dashed #ffffff33;display:grid;place-items:center;font-size:.7rem;color:#ffffff66}

.mob{
  position:relative;background:var(--paper);color:var(--ink);border:4px solid #111;border-radius:3px;padding:6px;font:inherit;text-align:center;cursor:pointer;
  box-shadow:inset 0 0 0 3px #8fbf6a,3px 3px 0 #000a;display:flex;flex-direction:column;align-items:stretch;gap:3px;touch-action:manipulation;
}
.mob-active{width:min(100%,230px)}
.mob-bench{width:96px;padding:4px}
.mob-art{display:grid;place-items:center;background:repeating-linear-gradient(0deg,#a5c67e 0 8px,#92b76c 8px 16px);border:2px solid #23301e}
.mob-active .mob-art{height:72px}
.mob-bench .mob-art{height:38px}
.mob-art .art{height:86%;width:auto;image-rendering:pixelated}
.mob-name{font-weight:900;font-size:.95rem}
.mob-bench .mob-name{font-size:.75rem}
.mob-atk{font-weight:900;font-size:.85rem}
.hp{display:grid;gap:2px}
.hp-bar{height:10px;background:#555;border:2px solid #111;overflow:hidden}
.hp-bar span{display:block;height:100%;transition:width .35s}
.hp-ok span{background:#5cbf3a}.hp-mid span{background:#e6b93a}.hp-low span{background:#e0475b}
.hp-text{font-size:.78rem;font-weight:900}
.mob-bench .hp-text{font-size:.68rem}
.chips{display:flex;flex-wrap:wrap;gap:3px;justify-content:center}
.chip{font-size:.66rem;font-weight:900;padding:1px 4px;border:2px solid #111;border-radius:2px;background:#ddd;line-height:1.3}
.chip-shield{background:#b8d4ef}.chip-buff{background:#f3d983}.chip-info{background:#d6c8f0}.chip-used{background:#bbb;text-decoration:line-through}.chip-danger{background:#f2a9a0}
.mob-bench .chip{font-size:.58rem}

.midline{display:flex;flex-direction:column;gap:6px;min-width:0}
.vs{font-family:var(--pixel);color:var(--gold);text-shadow:3px 3px #000;text-align:center;font-size:.9rem}
.bed-banner{background:#7a1f1b;border:2px solid #000;padding:4px 8px;font-weight:900;font-size:.8rem;text-align:center}
.log-wrap{display:flex;flex-direction:column;gap:4px;min-height:0;flex:1}
.combat-log{list-style:none;margin:0;padding:6px 8px;background:#0b100c;border:3px solid #000;font-size:.8rem;line-height:1.4;overflow:auto;height:320px;color:#dfe8d6}
.combat-log li{border-bottom:1px solid #ffffff12;padding:3px 0}
.combat-log li:first-child{color:#fff;font-weight:800}
.combat-log.collapsed{display:none}

.energy{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.food-row{display:inline-flex;gap:1px}
.food{position:relative;width:16px;height:16px;display:inline-block}
.food-icon{width:16px;height:16px;display:block}
.food-half{position:absolute;inset:0;clip-path:inset(0 50% 0 0)}
.energy-num{font-weight:900;font-size:.85rem;background:#2d4551;border:2px solid #7bb2c2;color:#d6f5ff;padding:0 6px}

.hand-head{display:flex;justify-content:space-between;align-items:baseline;margin:10px 0 2px}
.hand-head h3{margin:0}
.hand{display:flex;gap:8px;overflow-x:auto;padding:8px 4px 12px;scroll-snap-type:x proximity;min-height:120px;-webkit-overflow-scrolling:touch}
.hand .card{flex:0 0 132px;width:132px;cursor:pointer;scroll-snap-align:start;padding:5px}
.hand .card .card-art{aspect-ratio:auto;height:46px}
.hand .card .card-text{font-size:.7rem;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.hand .empty{color:var(--muted);padding:20px}
.hint{background:#141a15;border-left:5px solid var(--gold);padding:8px 12px;font-weight:700;margin:4px 0 8px;min-height:2.6em}
.action-bar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.action-bar .btn{min-height:52px;padding:6px 4px;font-size:.88rem}

/* ---------- result ---------- */
.result{max-width:640px;margin:4vh auto;text-align:center}
.result-icon{font-size:4rem}
.result h1{font-size:clamp(1.3rem,5vw,2rem)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:16px 0}
.stat{background:#0006;border:2px solid #000;padding:10px;font-size:.85rem}
.stat strong{display:block;font-family:var(--pixel);font-size:.7rem;margin-top:4px}

/* ---------- modal, toast, coin ---------- */
.modal{position:fixed;inset:0;background:#050806cc;display:grid;place-items:center;padding:16px;z-index:40}
.modal-card{background:#e9ecd9;color:var(--ink);border:5px solid #111;box-shadow:inset 0 0 0 3px #75935f,8px 8px 0 #000a;
  width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:20px;position:relative}
.modal-card.wide{width:min(760px,100%)}
.modal-card h2{font-size:.85rem;padding-right:36px}
.modal-close{position:absolute;right:6px;top:4px;border:0;background:transparent;font-size:2rem;cursor:pointer;min-width:44px;min-height:44px;color:var(--ink)}
.modal-choices{display:grid;gap:8px;margin-top:14px}
.modal-choices .btn{align-items:flex-start;text-align:left;width:100%}
#modalBody .muted{color:#4a5547}
.inspect{display:grid;gap:10px}
.inspect-live{display:grid;gap:6px;background:#fff8;border:2px solid #111;padding:8px}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.pick-grid .card{cursor:pointer}
.pick-grid .card:hover{outline:3px solid var(--gold)}
.toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;
  background:#111;color:#fff;border:3px solid var(--gold);padding:10px 16px;font-weight:800;z-index:45;transition:opacity .2s,transform .2s;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.coin-overlay{position:fixed;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;background:#0008;z-index:35;pointer-events:none}
.coins{display:flex;gap:18px}
.coin{width:76px;height:76px;border-radius:50%;border:5px solid #6b4f12;display:grid;place-items:center;font-family:var(--pixel);font-size:.55rem;
  background:radial-gradient(circle at 35% 35%,#ffe58a,#e0b23a 60%,#a97a17);color:#3a2a06;box-shadow:4px 4px 0 #000a}
.coin.spin{animation:spin .7s ease-out}
.coin-overlay p{font-family:var(--pixel);font-size:.7rem;color:#fff;text-shadow:2px 2px #000}
@keyframes spin{from{transform:rotateY(0)}to{transform:rotateY(1440deg)}}

/* ---------- combat animations ---------- */
.float{position:absolute;left:50%;top:30%;transform:translateX(-50%);font-family:var(--pixel);font-size:.9rem;pointer-events:none;z-index:5;
  text-shadow:2px 2px 0 #000,-1px -1px 0 #000;animation:floatUp 1.1s ease-out forwards;white-space:nowrap}
.float.dmg{color:#ff6b6b}.float.heal{color:#7dff7d}.float.buff{color:#ffe36b}.float.block{color:#9fd4ff}.float.ko{color:#fff}
@keyframes floatUp{0%{opacity:0;transform:translate(-50%,8px)}15%{opacity:1}100%{opacity:0;transform:translate(-50%,-46px)}}
.lunge-up{animation:lungeUp .35s ease-out}
.lunge-down{animation:lungeDown .35s ease-out}
@keyframes lungeUp{50%{transform:translateY(-22px) scale(1.04)}}
@keyframes lungeDown{50%{transform:translateY(22px) scale(1.04)}}
.shake{animation:shake .35s}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.glow-heal{animation:glowHeal .7s}
@keyframes glowHeal{50%{box-shadow:0 0 0 6px #7dff7d88,3px 3px 0 #000a}}
.glow-shield{animation:glowShield .7s}
@keyframes glowShield{50%{box-shadow:0 0 0 6px #9fd4ffaa,3px 3px 0 #000a}}
.pop-in{animation:popIn .3s ease-out}
@keyframes popIn{from{transform:scale(.7);opacity:.3}to{transform:none;opacity:1}}
.ko-slot{animation:ko .6s}
@keyframes ko{0%{background:#e0475b88}100%{background:transparent}}

html[data-motion="reduce"] *,html[data-motion="reduce"] *::before,html[data-motion="reduce"] *::after{animation:none!important;transition:none!important}
html[data-motion="reduce"] .float{animation:none!important;top:4px;opacity:1}

footer{text-align:center;padding:16px 16px calc(16px + env(safe-area-inset-bottom));color:#9eaf99;font-size:.78rem}

/* ---------- tablet ---------- */
@media (max-width:900px){
  .deck-layout{grid-template-columns:1fr}
  .deck-side{position:static;order:-1}
  .deck-list{max-height:30vh}
  .difficulty-grid{grid-template-columns:1fr}
}

/* ---------- phone portrait: stacked battlefield ---------- */
@media (max-width:700px){
  .menu-actions,.two-col{grid-template-columns:1fr}
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .battle-grid{grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"opp-info menu" "opp-zone opp-zone" "turn turn" "mid mid" "my-zone my-zone" "my-info my-info"}
  .opp-zone{flex-direction:column-reverse}
  .active-slot{min-height:120px}
  .mob-active{width:min(100%,250px);display:grid;grid-template-columns:72px 1fr;grid-template-areas:"art name" "art hp" "art atk" "chips chips";text-align:left;column-gap:8px}
  .mob-active .mob-art{grid-area:art;height:72px}
  .mob-active .mob-name{grid-area:name}
  .mob-active .hp{grid-area:hp}
  .mob-active .mob-atk{grid-area:atk}
  .mob-active .chips{grid-area:chips;justify-content:flex-start}
  .mob-bench{width:84px}
  .midline{display:grid;grid-template-columns:auto 1fr;align-items:start}
  .midline .vs{display:none}
  .bed-banner{grid-column:1/-1}
  .log-wrap{grid-column:1/-1}
  .combat-log{height:96px}
  .turn-box{grid-template-columns:auto auto;gap:10px;justify-content:center}
  .action-bar{position:sticky;bottom:0;z-index:10;grid-template-columns:repeat(3,minmax(0,1fr));background:#1a1f1cf2;padding:6px 0 calc(6px + env(safe-area-inset-bottom));margin:0 -4px}
  .brand small{display:none}
}

/* ---------- phone landscape: both sides side by side ---------- */
@media (orientation:landscape) and (max-height:560px){
  .topbar{position:static}
  .battle-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 190px;
    grid-template-areas:"opp-info my-info turn" "opp-zone my-zone mid" "opp-zone my-zone menu"}
  .opp-zone{flex-direction:column-reverse}
  .active-slot{min-height:0}
  .mob-active .mob-art{height:44px}
  .combat-log{height:120px}
  .hand{min-height:0}
  .hand .card{flex-basis:118px;width:118px}
  .hand .card .card-text{-webkit-line-clamp:2}
  .action-bar{grid-template-columns:repeat(6,minmax(0,1fr))}
}

@media (prefers-reduced-motion:reduce){
  html:not([data-motion="full"]) *{animation:none!important;transition:none!important}
}

/* ---------- small extras ---------- */
.card.dim{opacity:.55}
/* Desktop & tablet: bench sits beside the active Mob so the whole board fits on screen. */
@media (min-width:701px){
  .zone{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center}
  .zone .active-slot{grid-column:2;grid-row:1;min-height:0}
  .zone .bench{grid-column:3;grid-row:1;justify-content:flex-start}
  .zone{padding:6px}
  .zone .mob-active{width:210px}
  .mob-active .mob-art{height:52px}
  .combat-log{height:auto;max-height:400px;flex:1}
  .battle-grid{gap:6px}
  .hand{min-height:0;padding-bottom:8px}
  .hand .card .card-art{height:40px}
  .hand .card .card-text{-webkit-line-clamp:3}
}
@media (max-width:700px){
  .bench .empty-slot{min-height:44px;width:84px}
  .bench{min-height:44px}
}
.card-btn{background:none;border:0;padding:0;cursor:pointer;text-align:left;font:inherit;color:inherit;display:block}
.card-btn .card{height:100%}
.pool-item{display:grid;gap:4px;align-content:start}
.mini{width:24px;height:24px;flex:none}
.hint.error{border-left-color:var(--red);color:#ffd2cc}
button.card{cursor:pointer}

/* Action buttons stay in reach on every screen size. */
.action-bar{position:sticky;bottom:0;z-index:10;background:#1a1f1cf2;padding:6px 0 calc(6px + env(safe-area-inset-bottom))}

/* ---------- phone landscape (wins over the rules above) ---------- */
@media (orientation:landscape) and (max-height:560px){
  .topbar{position:static;padding-top:calc(4px + env(safe-area-inset-top));padding-bottom:6px}
  .brand small{display:none}
  main{padding-top:6px}
  .zone{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:6px;align-items:start;padding:5px}
  .zone .active-slot{grid-column:1;grid-row:1;min-height:0}
  .zone .bench{grid-column:2;grid-row:1;flex-direction:column;flex-wrap:nowrap;gap:4px;justify-content:flex-start;min-height:0}
  .bench .empty-slot{display:none}
  .zone .mob-active{width:100%;display:grid;grid-template-columns:48px 1fr;grid-template-areas:"art name" "art hp" "art atk" "chips chips";text-align:left;column-gap:6px}
  .mob-active .mob-art{grid-area:art;height:48px}
  .mob-active .mob-name{grid-area:name}
  .mob-active .hp{grid-area:hp}
  .mob-active .mob-atk{grid-area:atk}
  .mob-active .chips{grid-area:chips;justify-content:flex-start}
  .mob-bench{width:100%;display:grid;grid-template-columns:26px 1fr;column-gap:4px;padding:2px 4px;text-align:left}
  .mob-bench .mob-art{height:26px;grid-row:span 2}
  .mob-bench .chips{display:none}
  .mob-bench .hp-bar{display:none}
  .player-info{padding:4px 8px}
  .player-info .counts{font-size:.72rem}
  .turn-box strong{font-size:.55rem}
  .combat-log{height:110px}
  .hand-head{margin-top:4px}
}