/* Chem Clash responsive layer (2026-10-21). Loaded last. Fit-only: no redesign.
   Battle cards are sized from the board's real height/width via container query units,
   so zones can never overflow into each other / below the dock (iPad "stack of cards fell down" bug). */

/* ---------- Battle: height-driven card sizing ---------- */
@supports (container-type:size){
  body.ptcg-battle .ptcg-board{container-type:size;container-name:board;overflow:hidden}
  html body.ptcg-battle .ptcg-board .ptcg-zone.opp-bench .ptcg-card,
  html body.ptcg-battle .ptcg-board .ptcg-zone.my-bench .ptcg-card{
    --w:clamp(40px, min(calc((17cqh - 6px) / 1.4), 17cqw), 104px)!important}
  html body.ptcg-battle .ptcg-board .ptcg-zone.active:nth-child(2) .ptcg-card{
    --w:clamp(56px, min(calc((27cqh - 8px) / 1.4), 42cqw), 190px)!important}
  html body.ptcg-battle .ptcg-board .ptcg-zone.active:nth-child(3) .ptcg-card{
    --w:clamp(64px, min(calc((33cqh - 8px) / 1.4), 50cqw), 230px)!important}
  body.ptcg-battle .ptcg-board .ptcg-zone{flex:none}
  body.ptcg-battle .ptcg-board .ptcg-zone.active{margin:clamp(1px,.8cqh,6px) 0!important}
}

/* Hand: never cut by the home indicator / Safari toolbar; scale with viewport */
body.ptcg-battle .ptcg-hand{padding-bottom:max(8px, env(safe-area-inset-bottom,0px))!important}
body.ptcg-battle .ptcg-hand .ptcg-card{--w:clamp(56px, min(10.5vh, 15vw), 92px)!important}
body.ptcg-battle .ptcg-dock{padding-left:max(10px,env(safe-area-inset-left,0px))!important;padding-right:max(10px,env(safe-area-inset-right,0px))!important}
body.ptcg-battle .ptcg-b-top{padding-top:max(6px,env(safe-area-inset-top,0px))!important;padding-left:max(8px,env(safe-area-inset-left,0px))!important;padding-right:max(8px,env(safe-area-inset-right,0px))!important}

/* Battle root: follow the *visible* viewport (fixed body) instead of 100dvh, so the
   Safari address/tab bar can't push dock + hand below the fold. */
body.ptcg-battle .ptcg-battle-root{height:100%!important;max-height:100%!important;width:100%!important;box-sizing:border-box}

/* Wide screens: centred column that grows with the screen (not a tiny phone strip) */
@media (min-width:700px){
  body.ptcg-battle .ptcg-battle-root{max-width:min(100%, max(640px, 92vh))!important;margin:0 auto}
}

/* Landscape phones: opponent on the left, you on the right; hand + dock stay one row */
@media (orientation:landscape) and (max-height:540px){
  body.ptcg-battle .ptcg-battle-root{max-width:none!important}
  @supports (container-type:size){
    body.ptcg-battle .ptcg-board{display:grid!important;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;
      grid-template-areas:"ob mb" "oa ma";align-items:center;column-gap:12px}
    body.ptcg-battle .ptcg-board .ptcg-zone.opp-bench{grid-area:ob}
    body.ptcg-battle .ptcg-board .ptcg-zone.active:nth-child(2){grid-area:oa}
    body.ptcg-battle .ptcg-board .ptcg-zone.active:nth-child(3){grid-area:ma}
    body.ptcg-battle .ptcg-board .ptcg-zone.my-bench{grid-area:mb}
    html body.ptcg-battle .ptcg-board .ptcg-zone.opp-bench .ptcg-card,
    html body.ptcg-battle .ptcg-board .ptcg-zone.my-bench .ptcg-card{--w:clamp(34px, min(calc((30cqh - 4px) / 1.4), 9cqw), 80px)!important}
    html body.ptcg-battle .ptcg-board .ptcg-zone.active:nth-child(2) .ptcg-card,
    html body.ptcg-battle .ptcg-board .ptcg-zone.active:nth-child(3) .ptcg-card{--w:clamp(48px, min(calc((64cqh - 8px) / 1.4), 30cqw), 200px)!important}
  }
  body.v12-battle-active::before{content:none!important;display:none!important}
  body.ptcg-battle .ptcg-hand .ptcg-card{--w:clamp(36px, 12vh, 56px)!important}
  body.ptcg-battle .ptcg-battle-root .tutorial-banner, body.ptcg-battle .ptcg-battle-root .ptcg-coach{margin-top:0!important;margin-bottom:2px!important;padding-top:2px!important;padding-bottom:2px!important;font-size:12px!important}
  body.ptcg-battle .ptcg-hand{padding-top:4px!important}
  body.ptcg-battle .ptcg-dock{min-height:44px!important;padding-top:2px!important;padding-bottom:2px!important}
  body.ptcg-battle .ptcg-b-top{padding-top:max(2px,env(safe-area-inset-top,0px))!important;padding-bottom:2px!important}
}

/* ---------- Hub / screens: centred, scaled column on big screens ---------- */
@media (min-width:900px){
  body.ptcg-hub #app>*, body.ptcg-screen #app>*{max-width:min(1100px, 94vw);margin-left:auto;margin-right:auto}
}

/* ---------- Readability & touch targets ---------- */
html body.ptcg-battle .ptcg-dock .ptcg-endbtn small{font-size:12px!important}
body.ptcg-hub button, body.ptcg-screen button, body.ptcg-battle .ptcg-dock button, dialog button{min-height:44px}
.ptcg-b-top .ptcg-iconbtn, .ptcg-dialog-head .ptcg-iconbtn{min-width:44px!important;min-height:44px!important}

/* Dialogs / sheets: always within the visible viewport, respect safe areas */
dialog{max-width:min(720px, calc(100vw - 16px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)))!important}
.ptcg-sheet{padding-bottom:max(12px, env(safe-area-inset-bottom,0px))!important}

/* Never horizontal scroll */
html, body{overflow-x:hidden}

/* F-04: pinch-zoom allowed again; stop double-tap zoom on game controls */
button, [data-cmd], .ptcg-card, .ptcg-hand, .ptcg-board, .ptcg-dock, .ptcg-sheet, dialog{touch-action:manipulation}

/* Playability cues: usable hand cards glow (existing .glow-ready); unusable ones dim during your turn */
body.ptcg-battle .ptcg-hand:has(.glow-ready) .ptcg-card:not(.glow-ready){filter:grayscale(.55) brightness(.68)}
body.ptcg-battle .ptcg-hand .ptcg-card.glow-ready{transform:translateY(-4px)}
body .ptcg-sheet .ptcg-atk.off{opacity:.5!important;filter:grayscale(.6)}

/* Tap-to-enlarge (battle detail sheet): full card face, as big as the screen allows */
.ptcg-detail-sheet .card.style-c{width:min(420px, 86vw, calc((76dvh - 110px) / 1.4), 100%)!important;max-width:100%!important;height:auto!important;aspect-ratio:5/7!important}

/* ===== Student / art-tester batch (2026-10-21) ===== */
/* Hand: no overlap, names readable, swipe horizontally when many cards */
html body.ptcg-battle .ptcg-hand{gap:6px!important;justify-content:safe center!important;overflow-x:auto!important;overscroll-behavior-x:contain;touch-action:pan-x!important}
html body.ptcg-battle .ptcg-hand .ptcg-card{margin:0!important;--w:clamp(64px, min(11vh, 17vw), 96px)!important}
html body.ptcg-battle .ptcg-hand .ptcg-card .ptcg-top .nm{text-overflow:clip!important;font-size:12px!important;letter-spacing:-.02em}
/* Card text floors (board, bench, opponent row, hand) */
html body .ptcg-card .ptcg-top{font-size:12px!important}
html body .ptcg-card .ptcg-top .hp small{font-size:11px!important}
html body .ptcg-card .ptcg-fx, html body.ptcg-battle .ptcg-hand .ptcg-fx{font-size:11px!important}
html body .pip{font-size:11px!important;width:18px!important;height:18px!important}
html body.ptcg-battle .opp-bench .ptcg-card .ptcg-top .hp small, html body.ptcg-battle .my-bench .ptcg-card .ptcg-top .hp small{display:none!important}
.card.style-c .ability-blurb,.card.style-c.xdense .ability-blurb,.card.style-c.xdense .panel .meta,.card.style-c.xdense .panel .bottom,.card.style-c.xdense .panel .atkrow{font-size:11px!important}
/* ☰ / back / close: 44px hit area */
html body .ptcg-b-top .ptcg-iconbtn, html body .ptcg-iconbtn{min-width:44px!important;min-height:44px!important;width:44px!important;height:44px!important}

/* End-turn dock: fixed height (hint never pushes the board), progress ring while holding */
html body.ptcg-battle .ptcg-dock .ptcg-endbtn{height:48px!important;min-height:48px!important;overflow:hidden}
html body.ptcg-battle .ptcg-dock .ptcg-fusebtn{height:48px!important;min-height:48px!important}
html body.ptcg-battle .ptcg-dock .ptcg-endbtn small{font-size:12px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
html body.ptcg-battle .ptcg-dock .ptcg-endbtn .hold-label{white-space:nowrap}
.v12-end-hold::after{content:"";position:absolute;right:10px;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;
  background:conic-gradient(#98f0ca calc(var(--hold-p,0) * 360deg), rgba(255,255,255,.14) 0);
  -webkit-mask:radial-gradient(circle, transparent 8px, #000 9px);mask:radial-gradient(circle, transparent 8px, #000 9px);
  opacity:0;transition:opacity .12s;pointer-events:none}
.v12-end-hold.holding::after{opacity:1}

/* Detail sheet: action buttons pinned to the bottom of the sheet (never below the fold) */
.ptcg-detail-sheet{display:flex!important;flex-direction:column;overflow-y:auto}
.ptcg-sheet-actions{position:sticky;bottom:0;z-index:3;margin:8px -4px 0;padding:8px 4px max(8px,env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,rgba(12,16,34,0),rgba(12,16,34,.96) 22%);display:flex;flex-wrap:wrap;gap:8px}
.ptcg-sheet-actions button{flex:1 1 140px;margin:0!important;min-height:48px}

/* Netlify-injected "Powered by Netlify" badge (iframe#nl-badge-frame, bottom-right, from /.netlify/scripts/hud).
   We do not hide it; we keep our bottom controls clear of it when present. */
body:has(#nl-badge-frame) .ptcg-battle-root .ptcg-hand{padding-bottom:max(48px, env(safe-area-inset-bottom,0px))!important}
body:has(#nl-badge-frame) .ptcg-ai-bar{padding-right:200px!important}
body:has(#nl-badge-frame) .ptcg-sheet{padding-bottom:max(56px, env(safe-area-inset-bottom,0px))!important}
body:has(#nl-badge-frame) .ptcg-sheet-actions{padding-bottom:52px}
body:has(#nl-badge-frame) dialog{margin-bottom:56px}
body:has(#nl-badge-frame) .ptcg-home{padding-bottom:56px!important}

/* iPad landscape / tablets wider than tall: use full width; cards no smaller than portrait */
@media (orientation:landscape) and (min-height:541px){
  body.ptcg-battle .ptcg-battle-root{max-width:none!important}
}
@media (orientation:landscape) and (max-height:540px){
  html body.ptcg-battle .ptcg-hand .ptcg-card{--w:clamp(48px, 16vh, 66px)!important}
  html body.ptcg-battle .ptcg-dock .ptcg-endbtn, html body.ptcg-battle .ptcg-dock .ptcg-fusebtn{height:44px!important;min-height:44px!important}
}
/* text floors 12px */
html body .ptcg-card .ptcg-top .hp small, html body .ptcg-card .ptcg-fx, html body.ptcg-battle .ptcg-hand .ptcg-fx, html body .ptcg-card .cnt, html body .ptcg-b-top .ptcg-chip, html body .ptcg-mt .badge{font-size:12px!important}
dialog .card.style-c .title, dialog .card.style-c .rarity, dialog .card.style-c .meta, dialog .card.style-c .atk-text, dialog .card.style-c .bottom, dialog .card.style-c .bottom span, dialog .card.style-c .ability-blurb,
.ptcg-sheet .card.style-c .title, .ptcg-sheet .card.style-c .rarity, .ptcg-sheet .card.style-c .meta, .ptcg-sheet .card.style-c .atk-text, .ptcg-sheet .card.style-c .bottom, .ptcg-sheet .card.style-c .bottom span, .ptcg-sheet .card.style-c .ability-blurb,
.ptcg-screen .card.style-c .title{font-size:max(12px, 1em)!important}
dialog .card.style-c .title, .ptcg-sheet .card.style-c .title, dialog .card.style-c .rarity, .ptcg-sheet .card.style-c .rarity, dialog .card.style-c .atk-text, .ptcg-sheet .card.style-c .atk-text{font-size:12px!important}
@media (max-width:400px){ html body .ptcg-b-top .ptcg-chip{font-size:12px!important;padding:4px 7px!important} }
html.anime body.ptcg-battle .ptcg-dock .ptcg-endbtn small{font-size:12px!important}
/* landscape phones: cut-in / summon portraits scaled down so HP + dock stay visible */
@media (orientation:landscape) and (max-height:540px){
  .ax-fig{height:min(50vh,300px)!important;top:8%!important}
  .ax-title{top:calc(8% + min(50vh,300px) - 30px)!important}
  .ax-title b{font-size:clamp(28px,8vh,44px)!important}
  .ax-sfig{height:min(46vh,280px)!important;top:30%!important}
  .ptcg-show3d .s3d-fig{max-height:100%;max-width:min(40vw,420px)!important}
}
/* landscape phones v2: one row  [opp bench | opp active ‖ my active | my bench]; coach hidden (tips stay in banner) */
@media (orientation:landscape) and (max-height:540px){
  @supports (container-type:size){
    body.ptcg-battle .ptcg-board{grid-template-columns:auto 1fr 1fr auto!important;grid-template-rows:1fr!important;grid-template-areas:"ob oa ma mb"!important;column-gap:10px}
    body.ptcg-battle .ptcg-board .ptcg-zone.opp-bench, body.ptcg-battle .ptcg-board .ptcg-zone.my-bench{display:grid!important;grid-template-columns:repeat(2,auto);gap:4px!important;align-content:center;align-self:center}
    html body.ptcg-battle .ptcg-board .ptcg-zone.opp-bench .ptcg-card,
    html body.ptcg-battle .ptcg-board .ptcg-zone.my-bench .ptcg-card{--w:clamp(34px, min(calc((46cqh - 6px) / 1.4), 8cqw), 72px)!important}
    html body.ptcg-battle .ptcg-board .ptcg-zone.active:nth-child(2) .ptcg-card,
    html body.ptcg-battle .ptcg-board .ptcg-zone.active:nth-child(3) .ptcg-card{--w:clamp(52px, min(calc((94cqh - 6px) / 1.4), 24cqw), 200px)!important}
    body.ptcg-battle .ptcg-board .ptcg-zone.active{align-self:center;margin:0!important}
  }
  body.ptcg-battle .ptcg-battle-root .ptcg-coach{display:none!important}
  html body.ptcg-battle .ptcg-hand .ptcg-card{--w:clamp(44px, 14vh, 58px)!important}
  html body.ptcg-battle .ptcg-hand{padding-top:2px!important;padding-bottom:max(4px,env(safe-area-inset-bottom,0px))!important}
}
/* wide screens: centre hub/screen column */
@media (min-width:900px){
  body.ptcg-hub #app, body.ptcg-screen #app{width:min(1100px, 94vw)!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important;left:0;right:0}
  body.ptcg-battle #app{width:100%!important;margin:0 auto!important}
}
/* Wide landscape (iPad landscape, tablets, desktop): same one-row board — opponent left, you right — using full width */
@media (orientation:landscape) and (min-aspect-ratio:13/10) and (min-height:541px){
  @supports (container-type:size){
    body.ptcg-battle .ptcg-board{display:grid!important;grid-template-columns:auto 1fr 1fr auto!important;grid-template-rows:1fr!important;grid-template-areas:"ob oa ma mb"!important;column-gap:clamp(10px,2cqw,28px);align-items:center}
    body.ptcg-battle .ptcg-board .ptcg-zone.opp-bench{grid-area:ob}
    body.ptcg-battle .ptcg-board .ptcg-zone.active:nth-child(2){grid-area:oa}
    body.ptcg-battle .ptcg-board .ptcg-zone.active:nth-child(3){grid-area:ma}
    body.ptcg-battle .ptcg-board .ptcg-zone.my-bench{grid-area:mb}
    body.ptcg-battle .ptcg-board .ptcg-zone.opp-bench, body.ptcg-battle .ptcg-board .ptcg-zone.my-bench{display:grid!important;grid-template-columns:repeat(2,auto);gap:8px!important;align-content:center;align-self:center}
    html body.ptcg-battle .ptcg-board .ptcg-zone.opp-bench .ptcg-card,
    html body.ptcg-battle .ptcg-board .ptcg-zone.my-bench .ptcg-card{--w:clamp(48px, min(calc((30cqh - 8px) / 1.4), 9cqw), 120px)!important}
    html body.ptcg-battle .ptcg-board .ptcg-zone.active:nth-child(2) .ptcg-card,
    html body.ptcg-battle .ptcg-board .ptcg-zone.active:nth-child(3) .ptcg-card{--w:clamp(80px, min(calc((92cqh - 8px) / 1.4), 24cqw), 340px)!important}
    body.ptcg-battle .ptcg-board .ptcg-zone.active{align-self:center;margin:0!important}
  }
}
/* c710c: many target buttons (tools) — don't float over description */
.ptcg-sheet-actions.many{position:static;background:none}
.ptcg-sheet-actions.many button{flex:1 1 46%;min-height:44px;font-size:13px}
/* c710c: move sheet title — English name on one tidy line under the Chinese name */
.ptcg-sheet h3.sh-h3{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ptcg-sheet h3.sh-h3 .sh-nm{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;line-height:1.2}
.ptcg-sheet h3.sh-h3 .sh-en{font-size:.62em;font-weight:600;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptcg-sheet h3.sh-h3>:last-child{flex:0 0 auto}
/* c710c: quiz feedback not by colour alone — ✓ + solid border for right, ✕ + stripes + shake for wrong */
.dlg .choice button.right,.c7-opt.ok{border:3px solid currentColor!important;position:relative}
.dlg .choice button.right::before,.c7-opt.ok::before{content:"✓ ";font-weight:900}
.dlg .choice button.wrong,.c7-opt.no{border:2px dashed currentColor!important;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.18) 0 6px,transparent 6px 12px)!important;animation:ccShake .35s 1}
.dlg .choice button.wrong::before,.c7-opt.no::before{content:"✕ ";font-weight:900}
.fb.no::before{content:"✕ "}
@keyframes ccShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.dlg .choice button.wrong,.c7-opt.no{animation:none}}
/* c710c: on phones, when a story hint is showing, move the energy toast down to just above the action bar so it doesn't cover the hint */
@media (max-width:600px){html body.ptcg-battle:has(.story-tip-banner) #toast,html body.ptcg-battle:has(.ptcg-coach) #toast{top:auto!important;bottom:calc(env(safe-area-inset-bottom,0px) + 250px)!important}}
/* c710c: colour-change swatches with text + brightness contrast (not hue alone) */
.sw{display:inline-block;padding:1px 8px;border-radius:6px;font-weight:800;border:2px solid rgba(255,255,255,.6)}
.sw-or{background:#ffc070;color:#3a1d00}
.sw-gr{background:#1d4a24;color:#e8ffe8;border-style:dashed}