/* Chem Clash v1.2 ship — PTCG hub + Style C glass + board sheets */
:root{
  --ptcg-ink:#f4f6ff; --ptcg-ink2:#c9d2ee; --ptcg-gold:#ffd66b;
  --ptcg-glass:rgba(10,14,32,.55); --ptcg-line:rgba(255,255,255,.22);
  --ptcg-mint:#98f0ca;
}
html,body{height:100%;overscroll-behavior:none}
body.ptcg-hub #app, body.ptcg-screen #app{
  max-width:none; margin:0; padding:0; min-height:100dvh;
  background:transparent;
}
body.ptcg-hub, body.ptcg-screen{overflow:hidden}
body.ptcg-battle{
  overflow:hidden;
}
body.ptcg-battle #app{
  max-width:none; margin:0; padding:0; min-height:100dvh; height:100dvh;
  display:flex; flex-direction:column; overflow:hidden;
}

/* ---- Home 4-tile hub ---- */
.ptcg-home{position:relative; min-height:100dvh; color:var(--ptcg-ink); padding:12px 14px 22px; display:flex; flex-direction:column}
.ptcg-home .mtop{display:flex; justify-content:space-between; align-items:center; z-index:3}
.ptcg-chip{display:inline-flex; align-items:center; gap:6px; background:rgba(8,12,28,.45); border:1px solid var(--ptcg-line); border-radius:999px; padding:6px 12px; font-size:13px; font-weight:700; backdrop-filter:blur(8px)}
.ptcg-chip img.av{width:22px;height:22px;border-radius:50%;object-fit:cover}
.ptcg-logo{text-align:center; margin-top:18px; z-index:2}
.ptcg-logo h1{margin:0; letter-spacing:.18em; font-size:28px; text-shadow:0 2px 16px #000a}
.ptcg-logo p{margin:4px 0 0; color:var(--ptcg-ink2); font-weight:600}
.ptcg-fan{display:flex; justify-content:center; gap:0; margin:18px 0 8px; min-height:120px; position:relative; z-index:2}
.ptcg-fan .ptcg-card{margin:0 -18px}
.ptcg-cont{display:flex; align-items:center; gap:12px; width:min(520px,100%); margin:8px auto 14px; padding:10px 14px; border-radius:16px; background:rgba(8,12,28,.5); border:1px solid rgba(255,214,107,.45); cursor:pointer; text-align:left; color:inherit}
.ptcg-cont img{width:44px;height:62px;object-fit:cover;border-radius:8px}
.ptcg-cont span{flex:1; display:flex; flex-direction:column}
.ptcg-cont b{font-size:15px}.ptcg-cont small{color:var(--ptcg-ink2)}
.ptcg-mtiles{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:auto; z-index:3}
.ptcg-mt{position:relative; overflow:hidden; border:1px solid var(--ptcg-line); border-radius:18px; min-height:112px; padding:14px; text-align:left; color:#fff; background:rgba(20,30,60,.55); cursor:pointer}
.ptcg-mt .mbg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; pointer-events:none}
.ptcg-mt::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 20%, var(--tint,rgba(20,40,90,.85)) 100%); pointer-events:none}
.ptcg-mt b,.ptcg-mt small{position:relative; z-index:1; display:block}
.ptcg-mt b{font-size:18px; font-weight:900; margin-top:36px}
.ptcg-mt small{font-size:12px; color:#e8eeff; opacity:.95}
.ptcg-mt .badge{position:absolute; top:10px; right:10px; z-index:2; background:#ff5d73; color:#fff; font-size:11px; font-weight:900; padding:2px 8px; border-radius:999px}
@media(min-width:1000px){
  .ptcg-mtiles{grid-template-columns:repeat(4,1fr); max-width:1200px; margin-left:auto; margin-right:auto; width:100%}
  .ptcg-logo h1{font-size:42px}
}

/* ---- Shared screen chrome ---- */
.ptcg-hdr{display:flex; align-items:center; gap:10px; padding:10px 12px; color:var(--ptcg-ink)}
.ptcg-hdr h2{flex:1; margin:0; font-size:20px; font-weight:900}
.ptcg-iconbtn{width:44px;height:44px;border-radius:50%; background:rgba(8,12,28,.45); border:1px solid var(--ptcg-line); color:inherit; display:grid; place-items:center; font-size:20px; padding:0; min-height:44px}
.ptcg-screen-body{padding:0 14px 24px; color:var(--ptcg-ink); height:calc(100dvh - 64px); overflow:auto}
body.ptcg-nosroll .ptcg-screen-body{overflow:hidden}

/* Story path */
.ptcg-path{position:relative; min-height:640px; padding:8px 0 80px}
.ptcg-node{position:absolute; display:flex; align-items:center; gap:12px}
.ptcg-node .orb{width:72px;height:72px;border-radius:50%; overflow:hidden; border:3px solid rgba(255,214,107,.55); flex:none; background:#1a2038}
.ptcg-node.cur .orb{width:86px;height:86px; border-color:#ffd66b; box-shadow:0 0 24px #ffd66b66}
.ptcg-node.done .orb{border-color:#98f0ca}
.ptcg-node.lock{opacity:.55; filter:grayscale(.4)}
.ptcg-node .orb img{width:100%;height:100%;object-fit:cover; object-position:50% 30%}
.ptcg-node .lbl{background:rgba(8,12,28,.5); border:1px solid var(--ptcg-line); border-radius:16px; padding:8px 12px; backdrop-filter:blur(8px); min-width:160px}
.ptcg-node .lbl b{display:block; font-size:14px}
.ptcg-node .lbl small{color:var(--ptcg-ink2)}
.ptcg-cta{min-height:52px; border-radius:999px; font-weight:900; font-size:17px; padding:12px 28px; border:1px solid rgba(255,214,107,.5); background:linear-gradient(135deg,#ffe9a0,#c9a227); color:#1a1200; cursor:pointer}
.ptcg-cta.ghost{background:rgba(8,12,28,.45); color:var(--ptcg-ink); border-color:var(--ptcg-line)}
.ptcg-cen{display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px}

/* Collection grid */
.ptcg-filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.ptcg-filters .ptcg-chip{cursor:pointer}
.ptcg-filters .ptcg-chip.on{border-color:var(--ptcg-gold); color:var(--ptcg-gold)}
.ptcg-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:10px; padding-bottom:40px}
.ptcg-grid .ptcg-card.dim{opacity:.35; filter:grayscale(.8)}
.ptcg-card .cnt{position:absolute; right:4px; bottom:4px; background:rgba(10,14,32,.5); border:1px solid rgba(255,214,107,.35); border-radius:8px; font-size:11px; padding:1px 6px; font-weight:800; color:#fffef8; backdrop-filter:blur(4px)}

/* Lineup */
.ptcg-slots{display:flex; flex-direction:column; align-items:center; gap:8px; padding:8px 0 16px}
.ptcg-slotlab{font-size:12px; letter-spacing:.2em; color:var(--ptcg-gold); font-weight:900}
.ptcg-picker{background:rgba(8,12,28,.45); border:1px solid var(--ptcg-line); border-radius:18px; padding:12px; margin-top:8px}
.ptcg-picker .row{display:flex; gap:8px; overflow-x:auto; padding:8px 0}
.ptcg-empty-slot{width:92px;height:129px;border:2px dashed rgba(255,255,255,.3); border-radius:12px; display:grid; place-items:center; color:var(--ptcg-ink2); font-size:13px; text-align:center}
.ptcg-decktabs{display:flex; gap:8px}

/* Matchup stays but blend */
.intro.matchup, .intro.hub{background:transparent}
body.ptcg-hub header, body.ptcg-screen .matchup-header{background:transparent}

/* ---- Compact board cards ---- */
.ptcg-card{position:relative; width:var(--w,96px); aspect-ratio:5/7; padding:0; border:none; border-radius:10px; background:transparent; overflow:visible; min-height:0; cursor:pointer; color:inherit}
/* Kill white button fill on board/hand cards (backgrounds.css button:not(.primary)) */
body.ptcg-hub button.ptcg-card,
body.ptcg-screen button.ptcg-card,
body.ptcg-battle button.ptcg-card,
button.ptcg-card{
  background:transparent!important; color:inherit!important;
  background-image:none!important; box-shadow:none!important;
}
.ptcg-card .ptcg-in{position:absolute; inset:0; border-radius:10px; overflow:hidden; border:1px solid rgba(255,214,107,.55); box-shadow:0 8px 20px #0008; background:#1a1520}
.ptcg-card .ptcg-art{width:100%;height:100%;object-fit:cover;object-position:50% 40%; display:block}
.ptcg-card .ptcg-top{position:absolute; left:0; right:0; top:0; display:flex; justify-content:space-between; align-items:flex-start; padding:3px 5px; background:transparent; font-size:11px; font-weight:800; color:#fffef8; text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 6px rgba(0,0,0,.85); backdrop-filter:none; -webkit-backdrop-filter:none}
/* Kill v1.css .hp bar (height/bg) — HP here is a text label, not a meter */
.ptcg-card .ptcg-top .hp{display:inline; height:auto; min-height:0; margin:0; padding:0; background:transparent; border-radius:0; overflow:visible; color:#fecaca; font-size:inherit; font-weight:800; line-height:1.1; text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 6px rgba(0,0,0,.85)}
.ptcg-card .ptcg-top .hp small{font-size:9px; font-weight:700; margin-right:2px; opacity:.9}
.ptcg-card .ptcg-bot{position:absolute; left:0; right:0; bottom:0; padding:4px 6px 6px; background:linear-gradient(0deg,rgba(10,14,32,.45),rgba(10,14,32,.12),transparent)}
.ptcg-card .ptcg-fx{position:absolute; bottom:4px; left:0; right:0; text-align:center; font-size:11px; font-weight:800; text-shadow:0 1px 3px #000}
.ptcg-card .bar{height:4px; background:#0008; border-radius:4px; overflow:hidden; margin-top:4px}
.ptcg-card .bar i{display:block; height:100%; background:var(--ptcg-mint)}
.ptcg-card .ko2, .card.style-c .ko2{
  position:absolute; top:-6px; right:-4px; z-index:8;
  font-size:9px; font-weight:900; letter-spacing:0;
  background:linear-gradient(135deg,#ffe9a0,#c9a227); color:#1a1000;
  padding:2px 6px; border-radius:8px; max-width:88px; line-height:1.2;
  box-shadow:0 2px 8px #0008;
}
.ptcg-card.glow-ready .ptcg-in, .card.style-c.glow-ready{
  box-shadow:0 0 0 2px #ffe9a0, 0 0 28px #ffd66b99, 0 8px 20px #0008;
  animation:ptcg-pulse 1.4s ease-in-out infinite;
}
@keyframes ptcg-pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.12)}}

/* Energy pips */
.pips{display:inline-flex;align-items:center;gap:2px}
.pip{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;font-size:9px;font-weight:900;font-style:normal}
.pip.e{background:linear-gradient(145deg,#5eead4,#0d9488);color:#042f2e}
.pip.any{background:linear-gradient(145deg,#e2e8f0,#94a3b8);color:#1e293b}
.pip.h{background:linear-gradient(145deg,#fdba74,#c2410c);color:#1c0a00}
.pip.a{background:linear-gradient(145deg,#fde68a,#d97706);color:#1c0a00}
.pip-free{font-size:11px;font-weight:800;color:#e6f4ff}

.card.style-c {
  background: transparent;
  padding: 0;
  border: none;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 18px 48px rgba(0,0,0,0.55),
    0 0 0 1px rgba(245,230,163,0.75),
    0 0 28px rgba(201,162,39,0.3);
  isolation: isolate;
}
/* Full-bleed portrait — show as much of the human figure as possible */
.card.style-c .art-bleed {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: 14px;
  background: #1a1520;
}
.card.style-c .art-bleed img,
.card.style-c .style-c-art {
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  aspect-ratio: auto !important;
  object-fit: cover;
  /* Default fallback; inline facePos overrides. Scale+translateY clears name strip. */
  object-position: 50% 16%;
  display: block;
  /* Scale from CENTER so translateY does not open a dark art-bleed gap under the strip */
  transform: scale(1.12) translateY(5%);
  transform-origin: 50% 50%;
}
/* Approved landscape crops fill card height under cover — push eyes below strip */
.card.style-c .style-c-art.approved-crop {
  object-position: 50% 48% !important;
  transform: scale(1.35) translateY(14%);
  transform-origin: 50% 50%;
}
/* Thin gold foil trim */
.card.style-c .foil-edge {
  position: absolute; inset: 0;
  border-radius: 14px;
  padding: 2px;
  background: linear-gradient(135deg,
    #fff6d0 0%, #c9a227 20%, #fff3c4 40%, #8a6a18 55%,
    #f0d878 72%, #b8860b 88%, #f8efc0 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 6;
}
/* Thin crystal glass rim (does not cover art) */
.card.style-c .glass-rim {
  position: absolute; inset: 3px;
  border-radius: 12px;
  pointer-events: none;
  z-index: 5;
  border: 1.5px solid rgba(255,255,255,0.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    0 0 0 1px rgba(201,162,39,0.35);
  background: linear-gradient(
    125deg,
    rgba(255,255,255,0.18) 0%,
    transparent 22%,
    transparent 78%,
    rgba(255,230,160,0.10) 100%
  );
}
.card.style-c .sheen {
  position: absolute; inset: 0;
  border-radius: 14px;
  background: linear-gradient(
    112deg,
    transparent 0%,
    transparent 36%,
    rgba(255,255,255,0.10) 46%,
    rgba(200,230,255,0.16) 50%,
    rgba(255,240,200,0.08) 54%,
    transparent 64%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 7;
  mix-blend-mode: screen;
}
/* Overlay stack */
.card.style-c .ui {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 7px 10px;
  pointer-events: none;
}
.card.style-c .ui > * { pointer-events: auto; }

/* Shared: highly see-through glass chip */
.card.style-c .glass-chip {
  background:
    linear-gradient(165deg,
      rgba(255,255,255,0.18) 0%,
      rgba(255,255,255,0.06) 40%,
      rgba(8,6,14,0.28) 100%);
  backdrop-filter: blur(4px) saturate(1.15);
  -webkit-backdrop-filter: blur(4px) saturate(1.15);
  border: 1px solid rgba(255,255,255,0.42);
  border-top-color: rgba(255,255,255,0.7);
  border-bottom-color: rgba(201,162,39,0.35);
  border-radius: 10px;
  box-shadow:
    0 6px 18px rgba(0,0,0,0.25),
    0 0 0 1px rgba(201,162,39,0.22),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(0,0,0,0.2);
}

/* Kill shared .glass-chip frost on the name strip (almost text-shadow only) */
.card.style-c .top.glass-chip,
.card.style-c .top.glass-chip.glass-chip{
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
  border-bottom: 1px solid rgba(255,214,107,.18) !important;
}
/* Ultra-thin top name strip — almost text-shadow only; face readable through/under */
.card.style-c .top.glass-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 1px 6px;
  max-height: 26px;
  flex: none;
  min-height: 0;
  overflow: hidden;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 5px;
  border-color: transparent;
  box-shadow: none;
}
.card.style-c .top .left .nm {
  font-size: 13px;
  font-weight: 900;
  color: #fffef8;
  letter-spacing: 0.04em;
  line-height: 1.05;
  text-shadow:
    0 0 8px rgba(0,0,0,0.85),
    0 1px 2px rgba(0,0,0,0.95),
    0 0 12px rgba(201,162,39,0.25);
}
.card.style-c .top .left .nm .title {
  font-size: 7px;
  font-weight: 700;
  color: #f5e6a3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-left: 3px;
  vertical-align: middle;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}
.card.style-c .top .left .sub {
  /* Hide sub-line so strip stays hair-thin; formula still in bottom panel */
  display: none;
}
.card.style-c .rarity {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #0c0a06;
  background: linear-gradient(135deg,#f5e6a3,#c9a227,#8a6a10);
  padding: 1px 5px;
  border-radius: 3px;
  flex: none;
  align-self: center;
  box-shadow:
    0 0 8px rgba(201,162,39,0.4),
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 1px 2px rgba(0,0,0,0.3);
}

/* Bottom attack glass — more see-through so legs/full figure show (Terry: not frosted wall) */
.card.style-c .panel.glass-chip {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Soft dark scrim only — clearer glass, body visible underneath; text uses text-shadow */
  background:
    linear-gradient(180deg,
      rgba(8,6,14,0.08) 0%,
      rgba(8,6,14,0.14) 55%,
      rgba(8,6,14,0.20) 100%);
  backdrop-filter: blur(1px) saturate(1.05);
  -webkit-backdrop-filter: blur(1px) saturate(1.05);
}
.card.style-c .panel .meta {
  font-size: 10px;
  color: #f5e6a3;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}
.card.style-c .panel .atkrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 3px 0;
  border-top: 1px solid rgba(255,255,255,0.18);
  font-size: 13px;
  color: #fffef8;
  text-shadow: 0 1px 3px rgba(0,0,0,0.95), 0 0 6px rgba(0,0,0,0.6);
}
.card.style-c .panel .atkrow:first-of-type { border-top: none; }
.card.style-c .panel .atkrow b { font-weight: 800; }
.card.style-c .panel .atkrow .dmg {
  font-size: 17px;
  font-weight: 900;
  color: #ffe9a0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.95), 0 0 10px rgba(201,162,39,0.4);
}
.card.style-c .panel .bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2px;
  padding-top: 5px;
  border-top: 1px solid rgba(255,255,255,0.22);
  font-size: 10px;
  color: rgba(255,255,255,0.92);
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,0.95);
}
.card.style-c .panel .hp {
  font-size: 15px;
  font-weight: 900;
  color: #fecaca;
  text-shadow: 0 1px 3px rgba(0,0,0,0.95);
}
.card.style-c .panel .hp small {
  font-size: 9px;
  color: #fca5a5;
  margin-right: 2px;
}

/* Hero: larger for judging full-bleed glass */
body.shot-hero {
  padding: 48px;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background:
    radial-gradient(ellipse at 50% 35%, #2a3558 0%, #141c32 45%, #080c18 100%);
}
body.shot-hero .page-head,
body.shot-hero .slot .label,
body.shot-hero .slot:not(.focus) { display: none !important; }
body.shot-hero .gallery { gap: 0; }
body.shot-hero .slot.focus { display: flex; }
body.shot-hero .card.style-c {
  width: 504px;
  height: 706px;
  border-radius: 16px;
}
body.shot-hero .card.style-c .art-bleed,
body.shot-hero .card.style-c .foil-edge,
body.shot-hero .card.style-c .glass-rim,
body.shot-hero .card.style-c .sheen { border-radius: 16px; }
body.shot-hero .card.style-c .top .left .nm { font-size: 22px; }
body.shot-hero .card.style-c .panel .atkrow { font-size: 14px; }
body.shot-hero .card.style-c .panel .atkrow .dmg { font-size: 19px; }



/* Style C in dialogs / sheets */
.card.style-c{position:relative; width:min(280px,78vw); aspect-ratio:5/7; margin:0 auto 12px}
/* style-c-art sizing handled with .art-bleed img */
.card.style-c .ability-blurb{font-size:10px; color:rgba(255,255,255,.9); line-height:1.35; text-shadow:0 1px 3px #000; padding:0 0 4px}
.card.style-c .ability-blurb em{color:#f5e6a3; font-style:normal; font-weight:800}
.card.style-c .effect-blurb{font-size:12px; font-weight:800; color:#fffef8; line-height:1.4; text-shadow:0 1px 3px rgba(0,0,0,.95); padding:2px 0 4px}
.card.style-c.trainer .panel.glass-chip{background:linear-gradient(180deg,rgba(8,6,14,.12) 0%,rgba(8,6,14,.28) 55%,rgba(8,6,14,.42) 100%)}
/* Guard: never let a white sheet bleed through Style C */
.card.style-c, .card.style-c .art-bleed{background:#1a1520!important}
.card.style-c .art-bleed img{background:#1a1520}

/* ---- Battle board (one screen, no scroll) ---- */
.ptcg-battle-root{display:flex; flex-direction:column; height:100dvh; color:var(--ptcg-ink); position:relative}
.ptcg-b-top{display:flex; justify-content:space-between; align-items:center; padding:8px 10px; gap:8px; flex:none}
.ptcg-board{flex:1; display:flex; flex-direction:column; justify-content:space-between; min-height:0; padding:0 8px; position:relative}
.ptcg-zone{display:flex; justify-content:center; align-items:flex-end; gap:10px; min-height:0}
.ptcg-zone.opp-bench{align-items:flex-start}
.ptcg-zone.active{margin:4px 0}
/* Mid-board toast removed (Terry: keep battle concise — turn chip lives in top bar) */
.ptcg-toast{display:none!important}
.ptcg-turn-chip{font-size:12px; font-weight:800; white-space:nowrap}
/* Action dock: reserved strip between board and hand — never over card art */
.ptcg-dock{flex:none; display:flex; align-items:stretch; gap:8px; padding:6px 10px 4px; min-height:52px}
.ptcg-dock .ptcg-fusebtn,.ptcg-dock .ptcg-endbtn{flex:1; min-width:0}
.ptcg-hand{display:flex; justify-content:center; align-items:flex-end; gap:0; padding:0 4px 10px; flex:none; min-height:110px; overflow:visible}
.ptcg-hand .ptcg-card{margin:0 -6px; flex:none}
/* Legacy fabs/atkcue: disabled — board stays cards-only */
.ptcg-fabs{display:none!important}
.ptcg-atkcue{display:none!important}
.ptcg-fusebtn,.ptcg-endbtn{
  border-radius:14px; border:1px solid var(--ptcg-line); background:rgba(8,12,28,.55); color:inherit; font-weight:900; padding:8px 12px; min-height:44px; backdrop-filter:blur(6px)
}
.ptcg-fusebtn{border-color:rgba(255,214,107,.55); color:var(--ptcg-gold)}
.ptcg-fusebtn .dot{display:inline-grid; place-items:center; min-width:18px; height:18px; border-radius:999px; background:#ff5d73; color:#fff; font-size:11px; margin-left:6px}
.ptcg-endbtn{position:relative; overflow:hidden; text-align:center}
.ptcg-endbtn .hold-fill, .ptcg-endbtn .fill{position:absolute; left:0; top:0; bottom:0; width:0; background:rgba(152,240,202,.35)}
.ptcg-endbtn small{display:block; font-size:10px; font-weight:600; color:var(--ptcg-ink2)}
.ptcg-coach{position:absolute; left:12px; right:12px; bottom:170px; z-index:9; display:flex; gap:10px; align-items:flex-end}
.ptcg-coach img{width:48px;height:48px;border-radius:50%; object-fit:cover; border:2px solid var(--ptcg-gold)}
.ptcg-coach .bub{flex:1; background:rgba(8,12,28,.6); border:1px solid rgba(255,214,107,.55); border-radius:18px 18px 18px 4px; padding:10px 12px; font-size:13px; line-height:1.45; backdrop-filter:blur(8px)}

/* Sheets / second layer */
.ptcg-scrim{position:fixed; inset:0; background:rgba(4,8,18,.55); z-index:40}
.ptcg-sheet{position:fixed; left:50%; bottom:0; transform:translateX(-50%); width:min(420px,100%); max-height:72dvh; overflow:auto; z-index:41;
  background:linear-gradient(180deg, rgba(16,22,48,.55), rgba(8,12,28,.62));
  backdrop-filter:blur(12px) saturate(1.15);
  -webkit-backdrop-filter:blur(12px) saturate(1.15);
  border:1px solid rgba(255,214,107,.35); border-bottom:none; border-radius:22px 22px 0 0; padding:10px 16px 24px; color:#f2f6ff;
  box-shadow:0 -20px 60px #0008, inset 0 1px 0 rgba(255,255,255,.12)}
.ptcg-sheet .grab{width:44px;height:5px;border-radius:999px;background:rgba(255,255,255,.25);margin:4px auto 12px}
.ptcg-sheet h3{margin:0 0 8px; display:flex; align-items:center; gap:8px; font-size:18px}
.ptcg-atk{display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:12px; border-radius:14px; border:1px solid var(--ptcg-line); background:rgba(255,255,255,.04); color:inherit; margin:6px 0; min-height:56px}
.ptcg-atk.go{border-color:rgba(255,214,107,.65); background:rgba(255,214,107,.12)}
.ptcg-atk.off{opacity:.55}
.ptcg-atk .dmg{margin-left:auto; font-size:22px; font-weight:900; color:#ffe9a0}
.ptcg-atk .an{display:flex; flex-direction:column; flex:1; min-width:0}
.ptcg-atk .an small,.ptcg-atk .why{color:var(--ptcg-ink2); font-size:12px}
.ptcg-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px}
.ptcg-tile{display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 6px; border-radius:14px; border:1px solid var(--ptcg-line); background:rgba(255,255,255,.04); color:inherit; min-height:72px; font-size:13px; font-weight:800}
.ptcg-tile small{font-weight:600; color:var(--ptcg-ink2); font-size:11px}
.ptcg-ai-bar{display:flex; gap:8px; justify-content:center; padding:8px; flex:none}
.ptcg-ai-bar button{min-height:40px; font-size:13px}

/* Fusion electron split donors */
.electron-track.split-donors{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin:12px 0; padding:12px; background:rgba(8,20,28,.45); border-radius:14px; border:1px solid #42636b55}
.electron-track .donor-col,.electron-track .acceptor-col{display:flex; flex-direction:column; align-items:center; gap:2px; font-weight:800}
.electron-track .donor{font-size:22px; color:#98f0ca}
.electron-track .acceptor{font-size:22px; color:#f2d59b}
.electron-track .lose,.electron-track .gain{font-size:12px; color:#c9d2ee}
.electron-track .arrow{font-size:28px; color:#ffe9a0}
.chem-doc-note{font-size:13px; color:#f5e6a3; background:rgba(40,30,8,.45); border-left:3px solid #c9a227; padding:8px 10px; border-radius:0 10px 10px 0; margin:8px 0}

/* Soften old white/frosted floating panels in battle */
body.ptcg-battle .turn-banner,
body.ptcg-battle .inline-help,
body.ptcg-battle .v11-help,
body.ptcg-battle .tutorial-banner{
  background:rgba(8,12,28,.4)!important;
  border-color:var(--ptcg-line)!important;
  backdrop-filter:blur(6px);
}
body.ptcg-battle dialog{
  background:linear-gradient(165deg, rgba(10,14,32,.40), rgba(8,12,28,.50));
  backdrop-filter:blur(12px) saturate(1.15);
  -webkit-backdrop-filter:blur(12px) saturate(1.15);
  border-color:rgba(255,214,107,.35);
  color:#f2f6ff;
}
body.ptcg-battle dialog::backdrop{background:rgba(4,8,18,.6); backdrop-filter:blur(4px)}

/* Hide legacy sticky bar when using sheet battle */
.ptcg-battle-root .legacy-only{display:none}

@media(min-width:1100px){
  .ptcg-battle-root{max-width:900px; margin:0 auto}
  .ptcg-side{display:block}
}

/* Blend dialogs into dark lab (avoid stark white/frosted floating boxes) */
body.ptcg-hub dialog, body.ptcg-screen dialog, body.ptcg-battle dialog{
  background:linear-gradient(165deg, rgba(10,14,32,.40), rgba(8,12,28,.50)) !important;
  backdrop-filter:blur(12px) saturate(1.2) !important;
  -webkit-backdrop-filter:blur(12px) saturate(1.2) !important;
  color:#f2f6ff !important;
  border:1px solid rgba(255,214,107,.35) !important;
  box-shadow:0 24px 80px #0008, inset 0 1px 0 rgba(255,255,255,.12) !important;
}
body.ptcg-hub dialog::backdrop, body.ptcg-screen dialog::backdrop{
  background:rgba(4,8,18,.55); backdrop-filter:blur(4px);
}
body.ptcg-hub dialog button.primary, body.ptcg-screen dialog button.primary, body.ptcg-battle dialog button.primary{
  background:linear-gradient(135deg,#ffe9a0,#c9a227); color:#1a1200; border-color:transparent;
}


/* ---- PTCG dialog contrast (fix black-on-black) ---- */
body.ptcg-hub dialog :is(h2,h3,h4,p,li,label,b,small,.note,.chem-doc-note),
body.ptcg-screen dialog :is(h2,h3,h4,p,li,label,b,small,.note,.chem-doc-note),
body.ptcg-battle dialog :is(h2,h3,h4,p,li,label,b,small,.note,.chem-doc-note){
  color:#f2f6ff !important;
  text-shadow:none !important;
  background:transparent !important;
}
body.ptcg-hub dialog .note,
body.ptcg-screen dialog .note,
body.ptcg-battle dialog .note{
  background:rgba(255,255,255,.06) !important;
  color:#f2f6ff !important;
  border-radius:10px;
  padding:8px 10px;
}
/* Option chips: dark text on light = high contrast */
body.ptcg-hub dialog button[data-fusion-answer],
body.ptcg-screen dialog button[data-fusion-answer],
body.ptcg-battle dialog button[data-fusion-answer],
body.ptcg-hub dialog button[data-answer],
body.ptcg-screen dialog button[data-answer],
body.ptcg-battle dialog button[data-answer]{
  background:linear-gradient(180deg,#ffffff,#e8eef8) !important;
  color:#183b42 !important;
  border:2px solid rgba(255,214,107,.55) !important;
  width:100%;
  margin:6px 0;
  text-align:left;
  padding:12px 14px;
  font-weight:800;
}

/* ---- Dialogue fusion quiz (character + speech bubble) ---- */
.dlg-quiz{display:flex; flex-direction:column; gap:12px; color:#f2f6ff}
.dlg-quiz-row{display:flex; gap:12px; align-items:flex-start}
.dlg-quiz-char{flex:none; width:88px; text-align:center}
.dlg-quiz-char .dlg-av{
  width:88px; height:88px; border-radius:50%;
  object-fit:cover; object-position:50% 22%;
  border:2px solid rgba(255,214,107,.7);
  box-shadow:0 0 18px rgba(201,162,39,.35), 0 8px 20px #0008;
  background:#1a1520; display:block;
}
.dlg-quiz-char .dlg-nm{
  display:block; margin-top:6px; font-size:12px; font-weight:900;
  color:#ffe9a0 !important; letter-spacing:.04em;
  text-shadow:0 1px 3px #000;
}
.dlg-quiz-bubble{
  flex:1; min-width:0; position:relative;
  background:linear-gradient(165deg, rgba(28,36,68,.38), rgba(10,14,32,.46));
  backdrop-filter:blur(10px) saturate(1.15);
  -webkit-backdrop-filter:blur(10px) saturate(1.15);
  border:1px solid rgba(255,214,107,.4);
  border-radius:16px 16px 16px 6px;
  padding:12px 14px;
  box-shadow:0 10px 28px #0006, inset 0 1px 0 rgba(255,255,255,.14);
  color:#fffef8;
}
.dlg-quiz-bubble:before{
  content:''; position:absolute; left:-8px; top:22px;
  border:8px solid transparent; border-right-color:rgba(255,214,107,.45);
}
.dlg-quiz-bubble:after{
  content:''; position:absolute; left:-6px; top:24px;
  border:6px solid transparent; border-right-color:rgba(14,18,40,.55);
}
.dlg-quiz-bubble .dlg-hint{
  margin:0 0 8px; font-size:12px; line-height:1.45;
  color:#c9d2ee !important; font-weight:600;
}
.dlg-quiz-bubble .dlg-q{
  margin:0; font-size:15px; line-height:1.55; font-weight:800;
  color:#fffef8 !important;
}
.dlg-quiz-opts{display:flex; flex-direction:column; gap:2px}
.dlg-quiz-opts button[data-fusion-answer]{border-radius:12px !important}

@media(max-width:380px){
  .dlg-quiz-char{width:72px}
  .dlg-quiz-char .dlg-av{width:72px;height:72px}
  .dlg-quiz-bubble .dlg-q{font-size:14px}
}

/* Keep dark glass dialogs for fusion dialogue quiz even when quiz scene is active */
body.ptcg-hub[data-bg-scene=quiz] dialog:has(.dlg-quiz),
body.ptcg-screen[data-bg-scene=quiz] dialog:has(.dlg-quiz),
body.ptcg-battle[data-bg-scene=quiz] dialog:has(.dlg-quiz),
body.ptcg-hub[data-bg-scene=quiz] dialog,
body.ptcg-screen[data-bg-scene=quiz] dialog,
body.ptcg-battle[data-bg-scene=quiz] dialog{
  background:linear-gradient(165deg, rgba(10,14,32,.40), rgba(8,12,28,.50)) !important;
  backdrop-filter:blur(12px) saturate(1.2) !important;
  -webkit-backdrop-filter:blur(12px) saturate(1.2) !important;
  color:#f2f6ff !important;
  border:1px solid rgba(255,214,107,.35) !important;
}


/* ==== iPad / tablet: stop tap-sink-to-bottom ==== */
html.ptcg-lock, html.ptcg-lock body{
  height:100% !important;
  height:-webkit-fill-available !important;
  max-height:100% !important;
  overflow:hidden !important;
  overscroll-behavior:none !important;
  touch-action:manipulation;
  position:fixed;
  inset:0;
  width:100%;
}
body.ptcg-hub, body.ptcg-screen, body.ptcg-battle{
  overflow:hidden !important;
  overscroll-behavior:none !important;
  height:100% !important;
  height:-webkit-fill-available !important;
  max-height:100dvh !important;
  position:fixed;
  inset:0;
  width:100%;
  touch-action:manipulation;
}
body.ptcg-hub #app, body.ptcg-screen #app, body.ptcg-battle #app{
  height:100% !important;
  height:100dvh !important;
  max-height:100dvh !important;
  min-height:0 !important;
  overflow:hidden !important;
  overscroll-behavior:none !important;
  padding-bottom:env(safe-area-inset-bottom,0);
  padding-top:env(safe-area-inset-top,0);
}
.ptcg-home, .ptcg-battle-root{
  height:100% !important;
  max-height:100% !important;
  min-height:0 !important;
  overflow:hidden !important;
}
.ptcg-home{justify-content:flex-start; padding-bottom:max(12px, env(safe-area-inset-bottom,0))}
.ptcg-screen-body{
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
/* Sheets stay docked; do not drag the page */
.ptcg-sheet, .ptcg-scrim{
  position:fixed !important;
  overscroll-behavior:contain;
}
dialog{
  overscroll-behavior:contain;
  max-height:min(85dvh, calc(100% - 24px)) !important;
}
body.ptcg-hub button, body.ptcg-screen button, body.ptcg-battle button,
body.ptcg-hub [data-cmd], body.ptcg-screen [data-cmd], body.ptcg-battle [data-cmd]{
  touch-action:manipulation;
}
/* iPad-ish widths: keep battle one-screen, no body scroll */
@media (min-width:700px) and (max-width:1366px){
  body.ptcg-battle .ptcg-battle-root{height:100%; max-height:100dvh}
  body.ptcg-battle .ptcg-hand{min-height:96px}
  body.ptcg-battle .ptcg-board{min-height:0; flex:1}
  .ptcg-home .ptcg-mtiles{grid-template-columns:1fr 1fr; gap:12px}
  .ptcg-home .ptcg-fan{min-height:100px; margin:10px 0 6px}
  .ptcg-home .ptcg-logo{margin-top:10px}
  .ptcg-home .ptcg-logo h1{font-size:24px}
}
@media (orientation:landscape) and (min-width:900px) and (min-height:600px){
  /* Allow iPad landscape play — do not show phone-only rotate gate */
  body.ptcg-battle.v12-battle-active::before{content:none !important; display:none !important}
}


/* ==== fix_face2: glass chrome + kill dark-on-dark leftovers ==== */
body.ptcg-hub dialog,
body.ptcg-screen dialog,
body.ptcg-battle dialog,
body.ptcg-hub .ptcg-sheet,
body.ptcg-screen .ptcg-sheet,
body.ptcg-battle .ptcg-sheet{
  color:#f2f6ff !important;
}
body.ptcg-hub dialog :is(h2,h3,h4,p,li,label,b,small,.note,.chem-doc-note,.dlg-q,.dlg-hint),
body.ptcg-screen dialog :is(h2,h3,h4,p,li,label,b,small,.note,.chem-doc-note,.dlg-q,.dlg-hint),
body.ptcg-battle dialog :is(h2,h3,h4,p,li,label,b,small,.note,.chem-doc-note,.dlg-q,.dlg-hint),
body.ptcg-hub .ptcg-sheet :is(h2,h3,h4,p,li,label,b,small,.note),
body.ptcg-screen .ptcg-sheet :is(h2,h3,h4,p,li,label,b,small,.note),
body.ptcg-battle .ptcg-sheet :is(h2,h3,h4,p,li,label,b,small,.note){
  color:#f2f6ff !important;
  text-shadow:0 1px 2px rgba(0,0,0,.45) !important;
}
/* Override backgrounds.css white-frost / dark-ink on PTCG dialogs */
body.ptcg-hub dialog .note,
body.ptcg-screen dialog .note,
body.ptcg-battle dialog .note,
body.ptcg-hub dialog .chem-doc-note,
body.ptcg-screen dialog .chem-doc-note,
body.ptcg-battle dialog .chem-doc-note{
  background:rgba(10,14,32,.4) !important;
  color:#fffef8 !important;
  border-left-color:#c9a227 !important;
}
body.ptcg-hub .ptcg-toast,
body.ptcg-screen .ptcg-toast,
body.ptcg-battle .ptcg-toast{display:none!important}
/* Reaction / fusion animation inside dialogs */
body.ptcg-hub dialog .reaction-animation,
body.ptcg-screen dialog .reaction-animation,
body.ptcg-battle dialog .reaction-animation,
body.ptcg-hub dialog .electron-track,
body.ptcg-screen dialog .electron-track,
body.ptcg-battle dialog .electron-track{
  background:rgba(10,14,32,.4) !important;
  color:#f2f6ff !important;
  border:1px solid rgba(255,214,107,.3);
  border-radius:14px;
}
/* Keep option chips high-contrast (light chip + dark ink) */
body.ptcg-hub dialog button[data-fusion-answer],
body.ptcg-screen dialog button[data-fusion-answer],
body.ptcg-battle dialog button[data-fusion-answer],
body.ptcg-hub dialog button[data-answer],
body.ptcg-screen dialog button[data-answer],
body.ptcg-battle dialog button[data-answer]{
  background:linear-gradient(180deg,#ffffff,#e8eef8) !important;
  color:#183b42 !important;
  text-shadow:none !important;
}


/* ---- fix_card_ux: detail back ← + no empty footer ---- */
.ptcg-dialog-head{
  display:flex; align-items:center; gap:10px; margin:0 0 10px; min-height:44px;
}
.ptcg-dialog-head h2{
  margin:0!important; flex:1; font-size:18px; line-height:1.25;
}
.ptcg-sheet-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 8px; min-height:40px;
}
.ptcg-back.ptcg-iconbtn, button.ptcg-back{
  flex:none; width:40px; height:40px; min-width:40px; min-height:40px;
  border-radius:999px; font-size:20px; font-weight:900; line-height:1;
  background:rgba(8,12,28,.45)!important; color:#fffef8!important;
  border:1px solid rgba(255,214,107,.4)!important;
}
/* Empty sticky controls bar (chain-art) — hide when no buttons */
dialog .controls:empty{display:none!important; padding:0!important; min-height:0!important; background:transparent!important}
body.ptcg-hub dialog .controls:empty,
body.ptcg-screen dialog .controls:empty,
body.ptcg-battle dialog .controls:empty{display:none!important}
/* Detail sheet: keep full Style C visible */
.ptcg-detail-sheet{max-height:88dvh!important; overflow:auto}
.ptcg-detail-sheet .card.style-c{
  width:min(280px,78vw)!important;
  max-width:100%;
  aspect-ratio:5/7!important;
  height:auto!important;
  margin:8px auto 14px!important;
}
body.ptcg-hub dialog .card.style-c,
body.ptcg-screen dialog .card.style-c,
body.ptcg-battle dialog .card.style-c{
  width:min(280px,78vw)!important;
  aspect-ratio:5/7!important;
  height:auto!important;
  margin:6px auto 12px!important;
}

/* fix: HP footer clipping — compact panel for long text */
.card.style-c .ui{padding-bottom:7px}
.card.style-c.dense .panel.glass-chip{padding:5px 8px;gap:2px}
.card.style-c.dense .panel .atkrow{font-size:11.5px;padding:2px 0}
.card.style-c.dense .panel .atkrow .dmg{font-size:15px}
.card.style-c.dense .panel .bottom{padding-top:3px;margin-top:0}
.card.style-c.xdense .panel.glass-chip{padding:4px 7px;gap:1px}
.card.style-c.xdense .panel .meta{font-size:9px}
.card.style-c.xdense .panel .atkrow{font-size:10.5px;padding:1px 0}
.card.style-c.xdense .panel .atkrow .dmg{font-size:13px}
.card.style-c.xdense .ability-blurb{font-size:9px;line-height:1.25;padding:0 0 2px}
.card.style-c.xdense .panel .bottom{padding-top:2px;margin-top:0;font-size:9px}
.card.style-c.xdense .panel .hp{font-size:13px}
.card.style-c .pip{width:14px;height:14px}
/* legacy .hp (HP bar: height:7px;overflow:hidden) was clipping the Style C HP text */
.card.style-c .panel .hp{height:auto!important;min-height:0!important;overflow:visible!important;background:transparent!important;border-radius:0!important;line-height:1.1;margin:0;padding:0}
/* fix_heads: full-body portraits align to top, no zoom — whole head + headroom always visible */
.card.style-c .style-c-art:not(.approved-crop){object-position:50% 0% !important;transform:none !important}
/* redesign_all: portraits are 5:7 = card face; fill exactly, no zoom */
.card.style-c .style-c-art{object-fit:cover!important;object-position:50% 0%!important;transform:none!important}

/* ===== playtest_fix 2026-10-20 (Terry playtest + retest r10) ===== */
/* [1/A] Attack/move sheet: opaque dark sheet + dark buttons with light ink (>=7:1) */
body .ptcg-sheet{background:linear-gradient(180deg,rgba(14,20,44,.96),rgba(8,12,28,.97))!important;color:#fff!important}
body .ptcg-sheet .ptcg-atk,body .ptcg-sheet .ptcg-tile{background:#16203c!important;border:1px solid rgba(255,255,255,.22)!important;color:#fff!important;text-shadow:none!important;box-shadow:none!important;opacity:1!important}
body .ptcg-sheet .ptcg-atk.go{background:#1d2a52!important;border-color:#ffd66b!important}
body .ptcg-sheet .ptcg-atk.off{background:#121a30!important;border-style:dashed!important}
body .ptcg-sheet .ptcg-atk .an b,body .ptcg-sheet .ptcg-tile{color:#ffffff!important;font-weight:800}
body .ptcg-sheet .ptcg-atk .an small,body .ptcg-sheet .ptcg-tile small{color:#d3dcf0!important;text-shadow:none!important}
body .ptcg-sheet .ptcg-atk .why{color:#ffb4b4!important;font-weight:700;text-shadow:none!important}
body .ptcg-sheet .ptcg-atk .dmg{color:#ffd66b!important;text-shadow:none!important}
body .ptcg-sheet .ptcg-atk.off .dmg{color:#c8d0e0!important}
body .ptcg-sheet .ptcg-atk .an small:empty{display:none}

/* [2/C/E] Name strip + HP: own dark backing + outline; never wrap HP */
.ptcg-card .ptcg-top{background:linear-gradient(180deg,rgba(6,10,24,.82),rgba(6,10,24,.6) 75%,rgba(6,10,24,0))!important;padding:3px 5px 6px!important;gap:3px;align-items:center!important;flex-wrap:nowrap!important;color:#fff!important;text-shadow:0 0 2px #000,0 1px 2px #000!important}
.ptcg-card .ptcg-top .nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff!important;line-height:1.15}
.ptcg-card .ptcg-top .hp{flex:none!important;white-space:nowrap!important;color:#ffe1e1!important;text-shadow:0 0 2px #000,0 1px 2px #000!important}
.ptcg-card .ptcg-top .hp small{font-size:8px!important}
.ptcg-card .ptcg-fx{left:3px!important;right:3px!important;bottom:3px!important;font-size:9.5px!important;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:rgba(6,10,24,.72);border-radius:5px;padding:1px 3px;color:#fff}
.ptcg-picker .ptcg-fx{bottom:22px!important}
.card.style-c .top.glass-chip{background:rgba(6,10,24,.66)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.card.style-c .top .nm,.card.style-c .top .sub,.card.style-c .rarity{color:#fff!important;text-shadow:0 0 2px #000,0 1px 3px #000!important}
.card.style-c .top .sub{color:#e6ecf8!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card.style-c .panel.glass-chip{background:rgba(6,10,24,.62)!important}
.card.style-c .panel,.card.style-c .panel *{color:#fff}
.card.style-c .panel .hp{white-space:nowrap!important;color:#ffe1e1!important}
.card.style-c .panel .atkrow .dmg{color:#ffd66b!important}
/* locked/dim collection cards: dim art only, keep name/HP readable */
.ptcg-grid .ptcg-card.dim{opacity:1!important;filter:none!important}
.ptcg-grid .ptcg-card.dim .ptcg-art{opacity:.45;filter:grayscale(.9)}
/* [3] Collection grid: names never wrap, HP never clipped */
.ptcg-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))!important;justify-items:center}

/* [6/F] Hand: >=44px exposed per card, horizontal scroll, never cut first/last */
body.ptcg-battle .ptcg-hand{justify-content:safe center!important;overflow-x:auto!important;overflow-y:hidden!important;padding:10px 14px 10px!important;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
body.ptcg-battle .ptcg-hand::-webkit-scrollbar{display:none}
body.ptcg-battle .ptcg-hand .ptcg-card{margin:0 -10px!important;scroll-snap-align:start;flex:none!important}
body.ptcg-battle .ptcg-hand .ptcg-card:first-child{margin-left:0!important}
body.ptcg-battle .ptcg-hand .ptcg-card:last-child{margin-right:0!important}

/* [F/7] Coach tip: in-flow strip (never over cards/dock), tap to dismiss, auto-fades */
.ptcg-battle-root .ptcg-coach{position:static!important;flex:none;margin:0 10px 4px!important;padding:0!important;border:0!important;background:transparent!important;color:inherit;text-align:left;width:auto;min-height:0;display:flex;align-items:center;gap:8px;cursor:pointer;animation:ccCoachFade 6s ease forwards}
.ptcg-battle-root .ptcg-coach img{width:30px!important;height:30px!important}
.ptcg-battle-root .ptcg-coach .bub{background:rgba(8,12,28,.86)!important;color:#fff!important;padding:6px 10px!important;font-size:12px!important;border-radius:12px!important}
.ptcg-battle-root .ptcg-coach .bub div{display:inline!important;margin-left:6px!important;color:#c9d3ea!important}
@keyframes ccCoachFade{0%,80%{opacity:1}100%{opacity:0}}
/* [9] Fusion-quiz pending entry */
.ptcg-quizbar{flex:none;display:flex;justify-content:center;padding:2px 10px}
.ptcg-quizpill{min-height:44px;border-radius:999px;border:2px solid #ffd66b!important;background:#1d2a52!important;color:#fff!important;font-weight:900;padding:6px 16px;animation:ccPulse 1.6s ease-in-out infinite}
@keyframes ccPulse{50%{box-shadow:0 0 0 6px rgba(255,214,107,.25)}}
/* Dock buttons: dark glass, light ink */
body.ptcg-battle .ptcg-dock .ptcg-fusebtn,body.ptcg-battle .ptcg-dock .ptcg-endbtn{background:rgba(10,16,36,.86)!important;color:#fff!important;text-shadow:none!important}
body.ptcg-battle .ptcg-dock .ptcg-fusebtn{color:#ffd66b!important}
body.ptcg-battle .ptcg-dock .ptcg-fusebtn:disabled{color:#aab3c8!important}
body.ptcg-battle .ptcg-dock .ptcg-endbtn small{color:#cfd8ec!important}

/* [7] Small viewports: shrink board cards so zones never overlap; compact top bar */
.ptcg-b-top .ptcg-chip{white-space:nowrap}
@media (max-width:400px){
  .ptcg-b-top{gap:4px!important;padding:6px!important}
  .ptcg-b-top .ptcg-chip{font-size:11px!important;padding:4px 8px!important;gap:4px!important}
  .ptcg-b-top .ptcg-chip .av{width:18px;height:18px}
  .ptcg-b-top .ptcg-iconbtn{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important}
}
@media (max-height:780px){
  body.ptcg-battle .opp-bench .ptcg-card{--w:52px!important}
  body.ptcg-battle .ptcg-zone.active:nth-child(2) .ptcg-card{--w:92px!important}
  body.ptcg-battle .ptcg-zone.active:nth-child(3) .ptcg-card{--w:106px!important}
  body.ptcg-battle .my-bench .ptcg-card{--w:58px!important}
  body.ptcg-battle .ptcg-zone.active{margin:2px 0!important}
  body.ptcg-battle .ptcg-hand{min-height:0!important;padding-top:6px!important;padding-bottom:max(6px,env(safe-area-inset-bottom,0px))!important}
  body.ptcg-battle .ptcg-hand .ptcg-card{--w:60px!important}
  body.ptcg-battle .ptcg-dock{min-height:46px!important;padding:4px 10px 2px!important}
  body.ptcg-battle .ptcg-dock .ptcg-fusebtn,body.ptcg-battle .ptcg-dock .ptcg-endbtn{min-height:44px!important;padding:4px 8px!important}
}
@media (max-height:680px){
  body.ptcg-battle .opp-bench .ptcg-card{--w:46px!important}
  body.ptcg-battle .ptcg-zone.active:nth-child(2) .ptcg-card{--w:78px!important}
  body.ptcg-battle .ptcg-zone.active:nth-child(3) .ptcg-card{--w:92px!important}
  body.ptcg-battle .my-bench .ptcg-card{--w:52px!important}
  body.ptcg-battle .ptcg-hand .ptcg-card{--w:56px!important}
}

/* [8] Home hero fan: no overlap of names/HP; matchup deck blurbs on dark backing */
.ptcg-home .ptcg-fan{gap:8px!important;flex-wrap:nowrap}
.ptcg-home .ptcg-fan .ptcg-card{margin:0!important}
@media (max-width:400px){
  .ptcg-home .ptcg-fan .ptcg-card{--w:96px!important}
  .ptcg-home .ptcg-fan .ptcg-card:nth-child(2){--w:116px!important}
}
@media (max-width:340px){
  .ptcg-home .ptcg-fan .ptcg-card{--w:86px!important}
  .ptcg-home .ptcg-fan .ptcg-card:nth-child(2){--w:104px!important}
}
body:not(.v12-battle-active) .intro.matchup .vs-tile small,
body:not(.v12-battle-active) .intro.matchup .diff-blurb{background:rgba(6,10,24,.72)!important;color:#fff!important;font-weight:600!important;border-radius:8px;padding:4px 8px!important;text-shadow:none!important}
body:not(.v12-battle-active) .intro.matchup .diff-blurb{color:#bff7e8!important;display:inline-block}
/* hand mini-cards: name only (HP via tap/detail) so names are never ellipsized */
body.ptcg-battle .ptcg-hand .ptcg-top .hp{display:none!important}
body.ptcg-battle .ptcg-battle-root button.ptcg-quizpill{background:#1d2a52!important;color:#fff!important;border:2px solid #ffd66b!important;text-shadow:none!important;opacity:1!important}
html body .ptcg-battle-root .ptcg-dock button.ptcg-fusebtn:disabled,html body .ptcg-battle-root .ptcg-dock button.ptcg-fusebtn[disabled]{background:rgba(10,16,36,.7)!important;color:#c3cbe0!important;opacity:1!important}

/* ===== attack3d 2026-10-20: 3D 立繪 showcase above the move sheet ===== */
.ptcg-scrim.ptcg-show3d{background:radial-gradient(ellipse at 50% 40%,#1b2550 0%,#070a18 75%)!important;overflow:hidden;cursor:pointer;--avail:60dvh;--tx:0;--ty:0}
.ptcg-show3d .s3d-bg{position:absolute;inset:-40px;background-size:cover;background-position:50% 20%;filter:blur(26px) brightness(.38) saturate(1.25);transform:translate3d(calc(var(--tx)*-14px),calc(var(--ty)*-10px),0) scale(1.12);transition:transform .25s ease-out}
.ptcg-show3d::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,8,18,.35),rgba(4,8,18,0) 30%,rgba(4,8,18,.55));pointer-events:none}
.ptcg-show3d .s3d-stage{position:absolute;left:0;right:0;top:0;height:var(--avail);display:flex;align-items:center;justify-content:center;perspective:900px;padding:calc(env(safe-area-inset-top,0px) + 14px) 12px 18px;box-sizing:border-box;z-index:1}
.ptcg-show3d .s3d-float{height:100%;max-width:100%;display:flex;align-items:center;justify-content:center;animation:s3dFloat 4.5s ease-in-out infinite}
.ptcg-show3d .s3d-fig{display:block;max-height:100%;max-width:min(100%,520px);width:auto;height:auto;object-fit:contain;border-radius:16px;
  transform:rotateY(calc(-8deg + var(--tx)*7deg)) rotateX(calc(3deg + var(--ty)*-6deg)) translate3d(calc(var(--tx)*8px),calc(var(--ty)*6px),0);transform-style:preserve-3d;transition:transform .25s ease-out;
  box-shadow:0 26px 50px rgba(0,0,0,.6),0 0 0 1px rgba(255,214,107,.45),0 0 28px rgba(140,180,255,.35);will-change:transform}
@keyframes s3dFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){
  .ptcg-show3d .s3d-float{animation:none}
  .ptcg-show3d .s3d-fig{transform:rotateY(-6deg) rotateX(2deg)!important;transition:none}
  .ptcg-show3d .s3d-bg{transform:scale(1.12)!important;transition:none}
}

/* ===== attack FX 2026-10-20 (js/attack-fx.js): transform/opacity only, no animated blur/shadow ===== */
.afx-layer{position:fixed;inset:0;pointer-events:none;z-index:38;overflow:hidden;contain:strict}
.afx-catcher{position:fixed;inset:0;z-index:39;background:transparent;cursor:pointer;touch-action:none}
.afx{position:absolute;display:block;pointer-events:none;will-change:transform,opacity}
.afx-dot{border-radius:50%}
.afx-puff{border-radius:50%;opacity:.5;background-image:radial-gradient(circle,rgba(255,255,255,.35),transparent 70%)}
.afx-streak{border-radius:2px;height:4px!important;width:20px!important}
.afx-tri{clip-path:polygon(50% 0,100% 100%,0 100%);opacity:.9}
.afx-plate{border-radius:2px;height:5px!important;opacity:.9}
.afx-cube{border-radius:2px;border:1px solid rgba(0,0,0,.25)}
.afx-flame{border-radius:50% 50% 50% 50%/60% 60% 40% 40%}
.afx-bubble{border-radius:50%;border:2px solid;background:transparent!important}
.afx-bead{border-radius:50%}
.afx-flake{clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}
.afx-ring{width:80px;height:80px;border-radius:50%;border:3px solid}
.afx-shard{clip-path:polygon(0 0,100% 20%,70% 100%,10% 80%)}
.afx-flash{inset:0;opacity:0}
.afx-move{left:50%;top:18%;transform:translateX(-50%);text-align:center;color:#fff;white-space:nowrap;max-width:94vw;opacity:0;
  background:rgba(6,10,24,.78);border:1px solid var(--c,#ffd66b);border-radius:14px;padding:6px 14px}
.afx-move b{display:block;font-size:22px;font-weight:900;letter-spacing:1px}
.afx-move small{display:block;font-size:12px;color:#ffe9a0;overflow:hidden;text-overflow:ellipsis}
.afx-move i{display:block;font-style:normal;font-size:11px;color:#d3dcf0}
.afx-num{transform:translate(-50%,-50%);font-size:30px;font-weight:900;color:#fff;opacity:0;white-space:nowrap;text-align:center;
  -webkit-text-stroke:2px #b3122f;paint-order:stroke fill;text-shadow:0 2px 0 #000}
.afx-num.big{font-size:42px}
.afx-num.ko{font-size:46px}
.afx-num small{display:block;font-size:12px;-webkit-text-stroke:0;color:#bff7e8;background:rgba(6,10,24,.8);border-radius:6px;padding:1px 6px}
.afx-num em{display:block;font-style:normal;font-size:16px;-webkit-text-stroke:0;color:#ffd66b}
@media (max-width:360px){.afx-move b{font-size:18px}.afx-num{font-size:26px}.afx-num.big{font-size:34px}}
@media (prefers-reduced-motion:reduce){.afx-ring,.afx-flash,.afx-shard,.afx-dot,.afx-puff,.afx-streak,.afx-tri,.afx-plate,.afx-cube,.afx-flame,.afx-bubble,.afx-bead,.afx-flake{display:none!important}}
/* attack FX v2: UI text layer (move name / numbers / equation) sits above the letter-free fx layer */
.afx-ui{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.afx-u{position:absolute;pointer-events:none}
.afx-hex{clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);opacity:.9}
.afx-drop{border-radius:50% 50% 50% 50%/60% 60% 40% 40%;transform-origin:50% 100%}
.afx-ringlet{border-radius:50%;border:2px solid;background:transparent!important}
.afx-ring.sq{border-radius:4px}
.afx-atom{width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,.7)}
.afx-eq{left:50%;top:12%;transform:translateX(-50%);white-space:nowrap;max-width:94vw;overflow:hidden;text-overflow:ellipsis;color:#fff;font-weight:900;opacity:0;background:rgba(6,10,24,.8);border:1px solid #ffd66b;border-radius:12px;padding:6px 14px;font-size:20px}
.afx-eq.faint{left:auto;right:8px;top:auto;bottom:8px;transform:none;font-size:12px;background:rgba(6,10,24,.55);border-color:rgba(255,214,107,.4);color:#e6ecf8}
.afx-reveal{left:50%;top:42%;width:min(42vw,200px);aspect-ratio:5/7;object-fit:cover;object-position:50% 0;border-radius:12px;border:2px solid #ffd66b;opacity:0;transform:translate(-50%,-50%)}
.afx-stats{left:50%;top:calc(42% + min(29vw,140px) + 12px);transform:translateX(-50%);width:min(60vw,240px);background:rgba(6,10,24,.8);border-radius:10px;padding:6px 10px;opacity:0;color:#fff;font-size:12px}
.afx-stats div{display:flex;align-items:center;gap:8px;margin:2px 0}.afx-stats span{width:30px}
.afx-stats i{flex:1;height:6px;border-radius:3px;background:linear-gradient(90deg,#ffd66b calc(var(--v)*100%),rgba(255,255,255,.18) 0)}
.afx-hint{transform:translate(-50%,-50%);background:rgba(6,10,24,.85);color:#ffd66b;font-weight:900;border-radius:10px;padding:6px 12px;white-space:nowrap;opacity:0}
@media (prefers-reduced-motion:reduce){.afx-hex,.afx-drop,.afx-ringlet,.afx-atom{display:none!important}}
.afx-layer{z-index:70!important}.afx-catcher{z-index:71!important}.afx-ui{z-index:72!important;isolation:isolate}
.afx-move{background:rgba(6,10,24,.9)!important;top:max(64px,9%)!important}


/* ===== contrast_fix 2026-10-20: frosted-white scenes must NOT use light text =====
   backgrounds.css paints quiz/fusion/result dialogs as #fffffff2 over bg_*.webp;
   earlier PTCG rules forced #f2f6ff text → ~1.08 contrast. Force dark ink on those panels. */
body[data-bg-scene=quiz] dialog,
body[data-bg-scene=fusion] dialog,
body[data-bg-scene=result] dialog,
body.ptcg-battle[data-bg-scene=quiz] dialog,
body.ptcg-battle[data-bg-scene=fusion] dialog,
body.ptcg-battle[data-bg-scene=result] dialog,
body.ptcg-hub[data-bg-scene=quiz] dialog,
body.ptcg-hub[data-bg-scene=fusion] dialog,
body.ptcg-hub[data-bg-scene=result] dialog,
body.ptcg-screen[data-bg-scene=quiz] dialog,
body.ptcg-screen[data-bg-scene=fusion] dialog,
body.ptcg-screen[data-bg-scene=result] dialog{
  background:linear-gradient(165deg,rgba(12,16,36,.94),rgba(8,12,28,.96))!important;
  color:#f2f6ff!important;
  border:1px solid rgba(255,214,107,.45)!important;
  backdrop-filter:blur(10px) saturate(1.1)!important;
  -webkit-backdrop-filter:blur(10px) saturate(1.1)!important;
  box-shadow:0 24px 80px #000a, inset 0 1px 0 rgba(255,255,255,.1)!important;
}
body[data-bg-scene=quiz] dialog :is(h2,h3,h4,p,li,label,b,small,.note,.chem-doc-note,#dialog-title),
body[data-bg-scene=fusion] dialog :is(h2,h3,h4,p,li,label,b,small,.note,.chem-doc-note,#dialog-title),
body[data-bg-scene=result] dialog :is(h2,h3,h4,p,li,label,b,small,.note,.chem-doc-note,#dialog-title),
body.ptcg-battle[data-bg-scene=quiz] dialog :is(h2,h3,h4,p,li,label,b,small,.note,.chem-doc-note,#dialog-title),
body.ptcg-battle[data-bg-scene=fusion] dialog :is(h2,h3,h4,p,li,label,b,small,.note,.chem-doc-note,#dialog-title),
body.ptcg-battle[data-bg-scene=result] dialog :is(h2,h3,h4,p,li,label,b,small,.note,.chem-doc-note,#dialog-title){
  color:#f2f6ff!important;
  text-shadow:0 1px 2px rgba(0,0,0,.55)!important;
  background:transparent!important;
}
body[data-bg-scene=fusion] dialog .reaction-animation,
body[data-bg-scene=fusion] dialog .electron-track,
body[data-bg-scene=fusion] dialog .covalent-bonds,
body[data-bg-scene=result] dialog .reaction-animation{
  background:rgba(255,255,255,.06)!important;
  color:#f2f6ff!important;
  border:1px solid rgba(255,214,107,.3)!important;
  border-radius:12px;
  padding:10px 12px;
}
body[data-bg-scene=fusion] dialog .locked-electrons,
body[data-bg-scene=quiz] dialog .locked-electrons{
  color:#ffe9a0!important;
  background:rgba(40,30,8,.55)!important;
}
body[data-bg-scene=quiz] dialog .dlg-quiz,
body[data-bg-scene=quiz] dialog .dlg-quiz-bubble,
body.ptcg-battle[data-bg-scene=quiz] dialog .dlg-quiz-bubble{
  color:#f2f6ff!important;
  background:linear-gradient(165deg,rgba(28,36,68,.55),rgba(10,14,32,.6))!important;
}
body[data-bg-scene=quiz] dialog .dlg-q,
body[data-bg-scene=quiz] dialog .dlg-hint,
body.ptcg-battle[data-bg-scene=quiz] dialog .dlg-q,
body.ptcg-battle[data-bg-scene=quiz] dialog .dlg-hint{
  color:#f2f6ff!important;
}
/* Answer chips: keep dark ink on light chip (≥7:1) */
body[data-bg-scene=quiz] dialog button[data-fusion-answer],
body[data-bg-scene=quiz] dialog button[data-answer],
body[data-bg-scene=fusion] dialog button[data-fusion-answer],
body[data-bg-scene=result] dialog button[data-answer]{
  background:linear-gradient(180deg,#ffffff,#e8eef8)!important;
  color:#183b42!important;
  text-shadow:none!important;
  border:2px solid rgba(255,214,107,.55)!important;
  font-weight:800!important;
}
body[data-bg-scene=quiz] dialog button.primary,
body[data-bg-scene=fusion] dialog button.primary,
body[data-bg-scene=result] dialog button.primary,
body[data-bg-scene=quiz] dialog .controls button.primary,
body[data-bg-scene=fusion] dialog .controls button.primary,
body[data-bg-scene=result] dialog .controls button.primary{
  background:linear-gradient(135deg,#ffe9a0,#c9a227)!important;
  color:#1a1200!important;
  text-shadow:none!important;
  font-weight:900!important;
}
body[data-bg-scene=quiz] dialog .controls button:not(.primary),
body[data-bg-scene=fusion] dialog .controls button:not(.primary),
body[data-bg-scene=result] dialog .controls button:not(.primary){
  background:rgba(255,255,255,.12)!important;
  color:#f2f6ff!important;
  border:1px solid rgba(255,255,255,.25)!important;
}
/* Also neutralize the white overlay from backgrounds.css (in case specificity races) */
body[data-bg-scene=quiz] :is(dialog,.drawer),
body[data-bg-scene=fusion] :is(dialog,.drawer),
body[data-bg-scene=result] :is(dialog,.drawer){
  background-image:none!important;
}

.chem-disclaimer,.ptcg-logo .chem-disclaimer{display:block;margin-top:6px;font-size:12px;font-weight:700;color:#cfd8ec;opacity:.92;letter-spacing:.02em}
body.ptcg-battle .ptcg-hand .ptcg-fx{display:block!important;font-size:8px!important;line-height:1.1;padding:1px 2px;bottom:2px!important}
body[data-bg-scene=result] dialog :is(h2,h3,#dialog-title),
body[data-bg-scene=fusion] dialog :is(h2,h3,#dialog-title),
body[data-bg-scene=quiz] dialog :is(h2,h3,#dialog-title){font-weight:900!important;letter-spacing:.02em}
body[data-bg-scene=result] dialog :is(p,li,small,.note),
body[data-bg-scene=fusion] dialog :is(p,li,small,.note),
body[data-bg-scene=quiz] dialog :is(p,li,small,.note,.dlg-q,.dlg-hint){font-weight:700!important;color:#f7f9ff!important}

/* [home-bottom-fix 2026-10-20] Home must never clip bottom row (玩法說明/收藏進度) behind host bars */
body.ptcg-hub .ptcg-home{
  overflow-x:hidden !important; overflow-y:auto !important;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding-bottom:calc(16px + env(safe-area-inset-bottom,0px)) !important;
}
body.ptcg-hub .ptcg-home>.ptcg-cen{flex:0 0 auto; padding-bottom:4px}
@media (max-height:780px){
  body.ptcg-hub .ptcg-home{padding-top:8px}
  body.ptcg-hub .ptcg-home .ptcg-logo{margin-top:2px !important}
  body.ptcg-hub .ptcg-home .ptcg-logo h1{font-size:22px !important;margin:0 !important}
  body.ptcg-hub .ptcg-home .ptcg-logo .chem-disclaimer{display:none}
  body.ptcg-hub .ptcg-home .ptcg-fan{min-height:0 !important;margin:4px 0 6px !important}
  body.ptcg-hub .ptcg-home .ptcg-fan .ptcg-card{--w:84px !important}
  body.ptcg-hub .ptcg-home .ptcg-fan .ptcg-card:nth-child(2){--w:100px !important}
  body.ptcg-hub .ptcg-home .ptcg-cont{margin:4px auto !important;padding-top:6px !important;padding-bottom:6px !important}
  body.ptcg-hub .ptcg-home .ptcg-mtiles{gap:8px !important}
  body.ptcg-hub .ptcg-home .ptcg-mtiles .ptcg-mt{height:86px !important;min-height:86px !important}
  body.ptcg-hub .ptcg-home>.ptcg-cen{margin-top:8px !important}
  body.ptcg-hub .ptcg-home .ptcg-mt b{margin-top:26px !important}
}
@media (max-height:620px){
  body.ptcg-hub .ptcg-home .ptcg-fan .ptcg-card{--w:70px !important}
  body.ptcg-hub .ptcg-home .ptcg-fan .ptcg-card:nth-child(2){--w:84px !important}
  body.ptcg-hub .ptcg-home .ptcg-mtiles .ptcg-mt{height:74px !important;min-height:74px !important}
  body.ptcg-hub .ptcg-home .ptcg-mt b{margin-top:16px !important}
}

/* iPad/iOS: hold-to-end must not start text selection / callout / scroll */
.v12-end-hold,.ptcg-endbtn{touch-action:none!important;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* ===== story/mobile battle chrome fixes ===== */
.ptcg-b-top{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  min-width:0!important;
  width:100%!important;
  box-sizing:border-box!important;
  padding:6px max(8px, env(safe-area-inset-right,0px)) 6px max(8px, env(safe-area-inset-left,0px))!important;
  flex:none!important;
}
.ptcg-b-top-main{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  gap:6px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,214,107,.75) rgba(0,0,0,.25);
  padding-bottom:2px;
}
.ptcg-b-top-main::-webkit-scrollbar{height:5px;display:block}
.ptcg-b-top-main::-webkit-scrollbar-thumb{background:rgba(255,214,107,.75);border-radius:999px}
.ptcg-b-top .ptcg-chip{flex:0 0 auto;max-width:none}
.ptcg-b-top .ptcg-turn-chip{white-space:nowrap}
.ptcg-b-top .ptcg-b-menu,
.ptcg-b-top .ptcg-iconbtn.ptcg-b-menu{
  flex:0 0 auto!important;
  margin-left:0!important;
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
  position:relative;
  z-index:5;
}
@media(max-width:430px){
  .ptcg-b-top .ptcg-chip{font-size:11px!important;padding:4px 8px!important}
  .ptcg-b-top .ptcg-b-menu{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important}
}

/* Hand: visible scrollbar + edge padding so cards aren't clipped */
body.ptcg-battle .ptcg-hand{
  justify-content:flex-start!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  padding:8px 14px max(10px, env(safe-area-inset-bottom,0px))!important;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(255,214,107,.8) rgba(0,0,0,.28)!important;
  -webkit-overflow-scrolling:touch;
}
body.ptcg-battle .ptcg-hand::-webkit-scrollbar{display:block!important;height:7px!important}
body.ptcg-battle .ptcg-hand::-webkit-scrollbar-thumb{background:rgba(255,214,107,.85);border-radius:999px}
body.ptcg-battle .ptcg-hand::-webkit-scrollbar-track{background:rgba(255,255,255,.12);border-radius:999px}
body.ptcg-battle .ptcg-hand .ptcg-card{margin:0 -6px!important}
body.ptcg-battle .ptcg-hand .ptcg-card:first-child{margin-left:0!important}
body.ptcg-battle .ptcg-hand .ptcg-card:last-child{margin-right:0!important}

/* Home disclaimer contrast on bright sky */
.ptcg-logo p,
.ptcg-logo .chem-disclaimer,
small.chem-disclaimer{
  color:#142033!important;
  background:rgba(255,255,255,.82);
  border-radius:10px;
  padding:4px 10px;
  text-shadow:none!important;
  box-shadow:0 1px 8px rgba(0,0,0,.12);
  display:inline-block;
  max-width:92%;
}
.ptcg-logo h1{text-shadow:0 2px 10px rgba(0,0,0,.45),0 0 2px #000}

/* Move/ability text: avoid mid-CJK / mid-English breaks */
.ptcg-sheet, .ptcg-sheet p, .ptcg-sheet small, .ptcg-detail-sheet, .ptcg-tile small,
.ptcg-card .ptcg-fx, .card.style-c .panel{
  word-break:keep-all!important;
  overflow-wrap:anywhere!important;
  line-break:strict;
}

/* fusion heat VFX (加熱 / 點燃) */
.heat-vfx{display:flex;align-items:center;justify-content:center;gap:6px;margin:8px 0;font-size:14px;color:#c45a00;font-weight:700}
.heat-flame{display:inline-block;font-size:22px;animation:heatFlicker .45s ease-in-out infinite alternate}
.heat-flame.d2{animation-delay:.12s;font-size:18px;opacity:.85}
.heat-flame.d3{animation-delay:.24s;font-size:20px;opacity:.7}
@keyframes heatFlicker{from{transform:translateY(2px) scale(1);filter:brightness(1)}to{transform:translateY(-3px) scale(1.12);filter:brightness(1.25)}}
.afx-flame{pointer-events:none}

/* 老師加持：gold +10 (no shield emoji) */
.teacher-boost-pill,.teacher-boost-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:2.1em;padding:2px 7px;border-radius:999px;
  font-weight:800;font-size:12px;letter-spacing:.02em;
  color:#3b2a00;background:linear-gradient(180deg,#ffe9a8 0%,#f0c14b 55%,#d4a017 100%);
  border:1px solid #b8860b;box-shadow:0 1px 0 #fff6c8 inset,0 1px 3px rgba(0,0,0,.25);
}
.teacher-boost-banner .teacher-boost-pill{font-size:13px;min-width:2.4em;padding:3px 9px}
.ptcg-card{position:relative}
.teacher-boost-badge{
  position:absolute;top:4px;left:4px;z-index:3;
  font-size:10px;min-width:1.8em;padding:1px 5px;
  pointer-events:none;
}

/* fix12 ⚡ energy (shared CC_ENERGY) */
.pip.bolt,.e-shape.bolt{display:inline-grid;place-items:center;width:1.35em;height:1.35em;border-radius:50%;background:#ffd23f;color:#3a2a00;font-style:normal;font-size:.85em;box-shadow:0 0 0 1.5px #a07800 inset}
.energy-notice{border:2px solid #ffd23f;border-radius:10px;padding:8px 10px}
/* ===== v1g (2026-10-23) ===== */
/* item 8: narrow-screen card names: shrink (never wrap to 1 char per line); full name in title attr */
.ptcg-card .ptcg-top .hp{flex:none}
.ptcg-card .ptcg-top .nm{white-space:nowrap!important;text-overflow:clip!important;letter-spacing:-.03em}
.ptcg-card .ptcg-top .nm{font-size:min(12px,calc(var(--w,96px) / 5.4))!important;flex:0 1 auto!important;text-align:left}
.ptcg-card .ptcg-top .nm.long{font-size:min(10.5px,calc(var(--w,96px) / 6.6))!important;letter-spacing:-.06em}
.ptcg-card .ptcg-top .hp{font-size:min(12px,calc(var(--w,96px) / 5.4))}
.ptcg-card .rib-thin{top:32%}
@media (max-width:400px){.ptcg-b-top-main{flex-wrap:wrap;row-gap:4px}.ptcg-b-top-main .ptcg-chip{font-size:11px;padding:3px 8px}}
/* item 8: merged modifiers tag */
.cc-mods{margin:2px 10px 0;font-size:11px;color:#e9f6ff;align-self:flex-start}
.cc-mods>summary{display:inline-block;min-height:0;line-height:1.4;font-size:11px;cursor:pointer;list-style:none;background:rgba(10,30,44,.85);border:1px solid rgba(127,243,232,.45);border-radius:999px;padding:2px 9px;font-weight:700}
.cc-mods>summary::-webkit-details-marker{display:none}
.cc-mods>summary::after{content:' ▾'}.cc-mods[open]>summary::after{content:' ▴'}
.cc-mods>div{display:flex;flex-direction:column;gap:2px;margin-top:3px;background:rgba(10,30,44,.92);border-radius:10px;padding:5px 9px}
/* item 8: short reason tag on unusable hand cards */
.hand-wrap{position:relative;display:inline-block}
.why-tag{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);white-space:nowrap;font-size:9.5px;font-weight:700;line-height:1.2;padding:1px 5px;border-radius:6px;background:rgba(20,20,28,.88);color:#ffd9a8;pointer-events:none;z-index:3}
/* item 1: action toasts sit low in battle so they never cover banners/tags */
body.ptcg-battle #toast{top:calc(env(safe-area-inset-top,0px) + 4px)!important;bottom:auto!important;font-size:13px;padding:6px 12px;z-index:90}
/* item 7 / fusion quiz */
.coin-fx{font-size:13px;opacity:.9}.fq-made{margin:0 0 6px;font-weight:800;color:var(--ptcg-gold,#f2c14e)}
.turnlimit{font-size:15px}

/* v1h: hub background crowd (pre-composited existing half-body art, no text) */
body.ptcg-hub .ptcg-home{isolation:isolate}
body.ptcg-hub .ptcg-home::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,250,255,.10) 0%,rgba(255,250,255,0) 30%,rgba(40,30,70,0) 60%,rgba(40,30,70,.18) 100%),
    url("../assets/hub/hub_crowd_portrait.webp") center top/cover no-repeat;
  opacity:.9}
@media (min-aspect-ratio:4/5){
  body.ptcg-hub .ptcg-home::before{background:
    linear-gradient(180deg,rgba(255,250,255,.08) 0%,rgba(255,250,255,0) 35%,rgba(40,30,70,.15) 100%),
    url("../assets/hub/hub_crowd_wide.webp") center 20%/cover no-repeat}
}
@media (prefers-reduced-transparency:reduce){body.ptcg-hub .ptcg-home::before{opacity:.6}}