/* TCG 6v6 battle (2026-09-28 phase 2). Lean by rule: no backdrop-filter, no looping animations, no filters on
   images; only short transform/opacity transitions (scaled by --sp = playback speed). prefers-reduced-motion respected. */

/* ---------- pre-battle (inside the hub, #/tcg/match) ---------- */
.tcgb-pre { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr); gap: 16px; align-items: start; max-width: 1240px; margin: 0 auto; }
.tcgb-npc { grid-row: span 3; display: grid; grid-template-columns: minmax(170px, 230px) 1fr; gap: 20px; padding: 16px; border-radius: 22px;
  background: var(--tcgh-surface); border: 1px solid var(--tcgh-line); }
.tcgb-npc .art { position: relative; border-radius: 16px; overflow: hidden; min-height: 300px; }
.tcgb-npc .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.tcgb-npc .txt { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tcgb-npc .kick { font-size: 11px; font-weight: 700; letter-spacing: .22em; color: var(--tcgh-accent); text-transform: uppercase; }
.tcgb-npc h3 { margin: 0; font: 800 38px/1 var(--skin-display, "Space Grotesk", Inter, sans-serif); }
.tcgb-npc .deck { margin: -2px 0 0; font: 400 20px/1 CuteStitch, var(--skin-font, sans-serif); color: #ff8fc7; }
.tcgb-npc p { margin: 0; color: var(--tcgh-muted); line-height: 1.5; }
.tcgb-lineup { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.tcgb-lineup .rw { display: grid; grid-template-columns: 42px repeat(3, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
.tcgb-lineup .rl { align-self: center; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tcgh-muted); }
.tcgb-mini { display: flex; gap: 8px; align-items: center; min-width: 0; padding: 5px 8px 5px 5px; border-radius: 12px; background: var(--tcgh-surface-2); border: 1px solid var(--tcgh-line); }
.tcgb-mini.uq { border-color: #f5c451; }
.tcgb-mini img { width: 40px; height: 40px; flex: none; border-radius: 9px; object-fit: cover; }
.tcgb-mini .mt { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12px; }
.tcgb-mini .mt b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcgb-mini .mt b em { font-style: normal; color: #f5c451; }
.tcgb-mini .tags { display: flex; gap: 5px; align-items: center; color: var(--tcgh-muted); font-size: 11px; }
.tcgb-mini .stt, .tcgb-u .stt { display: flex; gap: 7px; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--tcgh-text); }
.tcgb-mini .stt span { white-space: nowrap; }
.tcgb-mini .stt i { font-size: 9px; margin-right: 2px; color: var(--tcgh-muted); }
.el-fire { --elc: var(--el-fire, #ff7a3d); } .el-water { --elc: var(--el-water, #46a8ff); } .el-earth { --elc: var(--el-earth, #c08f4f); } .el-wind { --elc: var(--el-wind, #43cfb2); } .el-none { --elc: #9aa3b2; }
.tcgb-mini .elc { color: var(--elc); }
.tcgb-panel { padding: 16px; border-radius: 20px; background: var(--tcgh-surface); border: 1px solid var(--tcgh-line); }
.tcgb-rew .today { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 4px 8px; }
.tcgb-rew .today b { font: 800 26px/1 var(--skin-display, "Space Grotesk", Inter, sans-serif); font-variant-numeric: tabular-nums; }
.tcgb-rew .lab { font-size: 12px; color: var(--tcgh-muted); }
.tcgb-rew .meter { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: var(--tcgh-surface-2); overflow: hidden; }
.tcgb-rew .meter i { display: block; height: 100%; background: var(--skin-btn, var(--tcgh-accent)); border-radius: inherit; }
.tcgb-rew .rules { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 8px; padding: 0; }
.tcgb-rew .rules li { padding: 5px 10px; border-radius: 999px; background: var(--tcgh-surface-2); border: 1px solid var(--tcgh-line); font-size: 12px; }
.tcgb-rew .rules li.hot { border-color: #f5c451; color: #fde68a; }
.tcgb-rew .rules li.done { opacity: .7; }
.tcgb-rew .note, .tcgb-rew .rec { margin: 6px 0 0; font-size: 12px; color: var(--tcgh-muted); line-height: 1.45; }
.tcgb-decks .hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.tcgb-decks h4 { margin: 0; font: 700 17px var(--skin-display, "Space Grotesk", Inter, sans-serif); }
.tcgb-link { background: none; border: 0; padding: 2px 0; color: var(--tcgh-accent); font: 600 12px var(--skin-font, Inter, sans-serif); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.tcgb-dlist { display: flex; flex-direction: column; gap: 8px; max-height: 330px; overflow-y: auto; overscroll-behavior: contain; }
.tcgb-deck { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 14px; cursor: pointer; text-align: left;
  color: var(--tcgh-text); background: var(--tcgh-surface-2); border: 1.5px solid var(--tcgh-line); font: 600 14px var(--skin-font, Inter, sans-serif); transition: border-color .15s; }
.tcgb-deck.on { border-color: var(--tcgh-accent); box-shadow: 0 0 0 1px var(--tcgh-accent) inset; }
.tcgb-deck[disabled] { opacity: .55; cursor: not-allowed; }
.tcgb-deck .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcgb-deck .th { display: flex; flex-direction: column; gap: 3px; flex: none; }
.tcgb-deck .r { display: flex; gap: 3px; }
.tcgb-deck .t { position: relative; width: 30px; height: 30px; border-radius: 7px; overflow: hidden; box-shadow: 0 0 0 1.5px var(--elc) inset; }
.tcgb-deck .t img { width: 100%; height: 100%; object-fit: cover; }
.tcgb-deck .t i { position: absolute; right: 1px; bottom: 1px; font-size: 8px; color: #fff; background: rgba(0,0,0,.6); padding: 1px 2px; border-radius: 3px; }
.tcgb-deck .t.uq { box-shadow: 0 0 0 2px #f5c451 inset; }
.tcgb-deck .bad { font-size: 11px; color: #fca5a5; font-weight: 500; }
.tcgb-nodeck { text-align: center; padding: 10px 0; color: var(--tcgh-muted); }
.tcgb-go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.tcgb-go .cta.big { width: 100%; justify-content: center; font-size: 17px; padding: 15px 20px; }
.tcgb-go .cta[disabled] { opacity: .5; cursor: not-allowed; }
.tcgb-go .run { width: 100%; margin: 0; font-size: 14px; color: var(--tcgh-muted); }
.tcgb-go .run b { color: var(--tcgh-text); font-variant-numeric: tabular-nums; }
.tcgb-msg { margin: 10px 0 0; font-size: 13px; }
.tcgb-msg.ok { color: #86efac; } .tcgb-msg.err { color: #fca5a5; }
.tcgb-tutopt { grid-column: 2; margin: 0; font-size: 12px; color: var(--tcgh-muted); text-align: right; }

/* ---------- arena (fullscreen, appended to body) ---------- */
html.tcgb-on, html.tcgb-on body { overflow: hidden; overscroll-behavior: none; }
.tcgb-arena {
  --tcgh-surface: var(--skin-surface, #0f172a); --tcgh-surface-2: var(--skin-surface-2, #1e293b); --tcgh-line: var(--skin-border, rgba(51,65,85,.95));
  --tcgh-accent: var(--skin-accent, #6366f1); --tcgh-text: var(--skin-text, #f8fafc); --tcgh-muted: var(--skin-muted, #94a3b8);
  --el-fire: #ff7a3d; --el-water: #46a8ff; --el-earth: #c08f4f; --el-wind: #43cfb2;
  --foe: #f87171; --sp: 1;
  position: fixed; inset: 0; z-index: 1050; display: flex; flex-direction: column; overflow: hidden;
  color: var(--tcgh-text); font-family: var(--skin-font, Inter, system-ui, sans-serif);
  background: radial-gradient(900px 520px at 50% 50%, var(--skin-hero-glow, rgba(99,102,241,.16)), transparent 70%), linear-gradient(180deg, var(--skin-bg-2, #0b1224), var(--skin-bg, #020617));
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
/* arena backdrop (2026-09-28): static image + static darken/vignette, painted once. Landscape vs portrait crop by orientation;
   only the matching file is fetched. Per-opponent art: .tcgb-arena[data-arena="<npc>"] { --arena-l / --arena-p }. */
/* 2026-09-28 topdown (approved): near top-down meadow + Lulu ring, floor fills the frame, scenery only a thin top band -> every fighter
   stands on the floor at every breakpoint. Same art for landscape (1920x1086) and portrait (855x1520 centre crop), downscaled from the 2k raw. */
.tcgb-arena[data-arena] { --arena-l: url("/static/tcg/live/arena/default_td_l.webp?v=1"); --arena-p: url("/static/tcg/live/arena/default_td_p.webp?v=1");
  background: radial-gradient(ellipse 75% 70% at 50% 52%, rgba(4,7,20,.18), rgba(4,7,20,.62) 100%), linear-gradient(180deg, rgba(5,9,24,.42), rgba(5,9,24,.26) 45%, rgba(5,9,24,.48)),
    var(--arena-l) 50% 50% / cover no-repeat, var(--skin-bg, #020617); }
@media (orientation: portrait) { .tcgb-arena[data-arena] { background-image: radial-gradient(ellipse 80% 70% at 50% 52%, rgba(4,7,20,.18), rgba(4,7,20,.62) 100%),
    linear-gradient(180deg, rgba(5,9,24,.42), rgba(5,9,24,.26) 45%, rgba(5,9,24,.48)), var(--arena-p); } }
.tcgb-arena[data-arena="lulu"] { --arena-l: url("/static/tcg/live/arena/lulu_td_l.webp?v=1"); --arena-p: url("/static/tcg/live/arena/lulu_td_p.webp?v=1"); } /* Lulu: fairground ring, top-down (approved 2026-09-28) */
.tcgb-arena .cta { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 12px; cursor: pointer; border: 0;
  font: 700 14px/1 var(--skin-font, Inter, sans-serif); color: var(--skin-btn-text, #fff); background: var(--skin-btn, var(--tcgh-accent)); }
.tcgb-arena .cta.ghost { background: transparent; color: var(--tcgh-text); border: 1px solid var(--tcgh-line); }
.tcgb-top { display: flex; align-items: center; gap: 8px; padding: 8px 10px 4px; }
.tcgb-ic { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; cursor: pointer; color: var(--tcgh-text);
  background: var(--tcgh-surface); border: 1px solid var(--tcgh-line); font-size: 15px; }
.tcgb-ic.sm { width: 28px; height: 28px; font-size: 13px; }
.tcgb-rd { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.tcgb-rd b { font: 700 16px/1 var(--skin-display, "Space Grotesk", Inter, sans-serif); }
.tcgb-rd .fat { font-size: 11px; font-weight: 700; color: #fdba74; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcgb-rd .fat[hidden] { display: none; }
.tcgb-ctl { display: flex; gap: 6px; align-items: center; flex: none; }
.tcgb-sp { height: 34px; min-width: 40px; padding: 0 10px; border-radius: 10px; cursor: pointer; color: var(--tcgh-text); background: var(--tcgh-surface);
  border: 1px solid var(--tcgh-line); font: 700 13px var(--skin-font, Inter, sans-serif); white-space: nowrap; }
.tcgb-sp[disabled], .tcgb-ic[disabled] { opacity: .4; cursor: default; }
.tcgb-sp.on { background: var(--skin-btn, var(--tcgh-accent)); color: var(--skin-btn-text, #fff); border-color: transparent; }
.tcgb-order { display: flex; gap: 7px; padding: 8px 12px 8px; overflow-x: auto; scrollbar-width: none; min-height: 48px; box-sizing: border-box; }
.tcgb-order::-webkit-scrollbar { display: none; }
.tcgb-order .oc { flex: none; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px var(--tcgh-accent); transition: transform .15s, opacity .15s; }
.tcgb-order .oc.side-e { box-shadow: 0 0 0 2px var(--foe); }
.tcgb-order .oc img { width: 100%; height: 100%; object-fit: cover; }
.tcgb-order .oc.done { opacity: .4; }
.tcgb-order .oc.ko { opacity: .15; }
.tcgb-order .oc.now { transform: scale(1.18); box-shadow: 0 0 0 3px #fde047; }

.tcgb-field { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 1fr 1fr auto 1fr 1fr;
  gap: 8px; padding: 4px 10px 6px; width: 100%; max-width: 720px; margin: 0 auto; box-sizing: border-box; }
.tcgb-side { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; pointer-events: none; white-space: nowrap; }
.tcgb-side.e { color: var(--foe); background: color-mix(in srgb, var(--foe) 14%, transparent); }
.tcgb-side.p { color: #a5b4fc; background: color-mix(in srgb, var(--tcgh-accent) 18%, transparent); }
/* 2026-09-28 side swap toggle */
.tcgb-view { margin-right: auto; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  font: 700 11px/1 var(--skin-display, "Space Grotesk", Inter, sans-serif); color: var(--tcgh-text); background: var(--tcgh-surface); border: 1px solid var(--tcgh-line); }
.tcgb-view i { font-size: 10px; color: #a5b4fc; }
.tcgb-view[aria-pressed="true"] { border-color: #a5b4fc; }
.tcgb-vseg { display: flex; gap: 6px; margin: 2px 0 10px; }
.tcgb-vseg .tcgb-sp { flex: 1; font-size: 12px; }
.tcgb-mid { grid-row: 3; grid-column: 1 / -1; position: relative; display: flex; align-items: center; gap: 6px; min-height: 30px;
  border-top: 1px dashed color-mix(in srgb, var(--tcgh-line) 80%, transparent); }
.tcgb-banner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 5px 14px; border-radius: 999px; white-space: nowrap; opacity: 0;
  font: 800 14px/1 var(--skin-display, "Space Grotesk", Inter, sans-serif); letter-spacing: .06em; background: var(--tcgh-surface); border: 1px solid var(--tcgh-line); pointer-events: none; }
.tcgb-banner.on { animation: tcgb-banner calc(1.3s / var(--sp)) ease-out both; }
.tcgb-banner.win { color: #86efac; border-color: #22c55e; } .tcgb-banner.lose { color: #fca5a5; border-color: var(--foe); }
.tcgb-banner.adv { color: #fde68a; }
@keyframes tcgb-banner { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.9); } 15%, 75% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }

/* unit slot (2026-09-28 sprites): character sprite standing on the slot + compact card below.
   Sprite sheet = 9 frames x 4 rows (act, hit, ko, win); the <img> is 900% x 400% of its window and only moved by transform.
   Static frame = act row frame 1; KO holds the last defeat frame. Frames only step during an action (JS, Web Animations). */
.tcgb-u { position: relative; min-height: 0; display: flex; flex-direction: column; transition: transform calc(.18s / var(--sp)) ease-out; }
.tcgb-u .spr { position: relative; flex: 1 1 auto; min-height: 0; display: flex; justify-content: center; align-items: flex-end; }
/* 2026-09-28 fx: the character stands on its card art, lying flat on the ground (static perspective, rasterised once) */
.tcgb-u .spr { padding-bottom: 12%; }
.tcgb-u .plat { position: absolute; left: 10%; right: 10%; bottom: 0; aspect-ratio: 1; box-sizing: border-box; border-radius: 16%; overflow: hidden;
  transform-origin: 50% 100%; transform: perspective(380px) rotateX(64deg); border: 3px solid var(--elc); background: #0b1224;
  box-shadow: 0 18px 22px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4); pointer-events: none; }
.tcgb-u .plat img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tcgb-u.uq .plat { box-shadow: 0 18px 22px rgba(0,0,0,.55), 0 0 0 3px #f5c451; }
.tcgb-u.act .plat { box-shadow: 0 18px 22px rgba(0,0,0,.55), 0 0 0 4px #fde047; }
.tcgb-u.tgt .plat { box-shadow: 0 18px 22px rgba(0,0,0,.55), 0 0 0 4px var(--foe); }
.tcgb-u.ko .plat { filter: grayscale(1) brightness(.5); border-color: #475569; box-shadow: 0 10px 14px rgba(0,0,0,.4); }
/* 2026-09-28 ground: soft contact shadow right under the feet (static, above the card platform, below the sprite) */
.tcgb-u .spr::before { content: ""; position: absolute; left: 22%; right: 22%; bottom: 7%; height: 11%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0,0,0,.74), rgba(0,0,0,.42) 55%, transparent); }
.tcgb-u.ko .spr::before { opacity: .45; }
.tcgb-u .spr::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: -2%; height: 30%; border-radius: 50%; pointer-events: none;
  opacity: 0; transition: opacity .25s; background: var(--fxc, transparent); }
.tcgb-u[data-fx]:not([data-fx=""]) .spr::after { opacity: .55; }
.tcgb-u .sw { position: relative; z-index: 1; flex: none; height: 100%; max-height: 190px; aspect-ratio: 216 / 212; overflow: hidden; transition: opacity .3s; }
.tcgb-u .sw .sh { position: absolute; left: 0; top: 0; width: 900%; height: 400%; max-width: none; transform: translate(0, 0); pointer-events: none; }
.tcgb-u.ko .sw .sh { transform: translate(-88.8889%, -50%); }
.tcgb-u .sw.nos { display: grid; place-items: end center; }
.tcgb-u .sw.nos .th { width: 78%; aspect-ratio: 1; margin-bottom: 6%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--elc); }
.tcgb-u[data-fx="steam"] { --fxc: radial-gradient(closest-side, rgba(235,240,248,.95), rgba(200,210,225,.15)); --fxb: #cbd5e1; }
.tcgb-u[data-fx="embers"] { --fxc: radial-gradient(closest-side, rgba(255,110,40,.95), rgba(255,160,60,.1)); --fxb: #fb923c; }
.tcgb-u[data-fx="ash"] { --fxc: radial-gradient(closest-side, rgba(110,110,120,.95), rgba(90,90,100,.1)); --fxb: #9ca3af; }
.tcgb-u[data-fx="mud"] { --fxc: radial-gradient(closest-side, rgba(130,86,44,.98), rgba(120,80,40,.15)); --fxb: #b08050; }
.tcgb-u[data-fx="frost"] { --fxc: radial-gradient(closest-side, rgba(170,225,255,.98), rgba(120,190,255,.15)); --fxb: #7dd3fc; }
.tcgb-u[data-fx="sandstorm"] { --fxc: radial-gradient(closest-side, rgba(235,205,125,.98), rgba(210,170,90,.15)); --fxb: #eab308; }
.tcgb-u .fxb, .tcgb-u .shb { position: absolute; z-index: 2; }
.tcgb-u .fxb { left: 2px; top: 2px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; font-size: 12px; color: #111827; background: var(--fxb, #fff); }
.tcgb-u .fxb[hidden], .tcgb-u .shb[hidden] { display: none; }
.tcgb-u .shb { left: 2px; bottom: 4px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 7px; font-size: 10px; font-weight: 800; color: #bfdbfe; background: rgba(30,64,175,.8); }
/* one-shot fx layers: pointer (SVG) + particles (canvas, only drawn while particles live) */
.tcgb-ptr { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 8; pointer-events: none; overflow: visible; }
.tcgb-cv { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1065; pointer-events: none; }
/* compact card */
.tcgb-u .cd { position: relative; z-index: 2; flex: none; display: flex; flex-direction: column; gap: 3px; padding: 4px 5px 4px; border-radius: 10px;
  background: color-mix(in srgb, var(--tcgh-surface-2) 92%, transparent); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--tcgh-accent) 55%, transparent);
  transition: box-shadow .15s, opacity .3s; }
.tcgb-u.side-e .cd { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--foe) 55%, transparent); }
.tcgb-u.uq .cd { box-shadow: 0 0 0 2px #f5c451; }
.tcgb-u .r1, .tcgb-u .r2 { display: flex; align-items: center; gap: 4px; min-width: 0; }
.tcgb-u .elb { flex: none; font-size: 11px; color: var(--elc); }
.tcgb-u .nm { min-width: 0; font: 800 12px/1.1 var(--skin-font, Inter, sans-serif); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcgb-u .r2 { gap: 7px; font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tcgh-text); white-space: nowrap; overflow: hidden; }
.tcgb-u .r2 i { font-size: 9px; margin-right: 2px; color: var(--tcgh-muted); }
.tcgb-u .r2 .rlb i { color: #e5e7eb; margin: 0; }
.tcgb-u .r2 .resb { margin-left: auto; } .tcgb-u .r2 .resb i { color: #fde047; margin: 0; }
.tcgb-u .hp { position: relative; height: 11px; border-radius: 6px; background: rgba(0,0,0,.6); overflow: hidden; }
.tcgb-u .hp i { position: absolute; inset: 0; transform-origin: 0 50%; background: #22c55e; transition: transform calc(.3s / var(--sp)) ease-out; }
.tcgb-u .hp.low i { background: #ef4444; }
.tcgb-u.side-e .hp i { background: #f59e0b; } .tcgb-u.side-e .hp.low i { background: #ef4444; }
.tcgb-u .hp b { position: relative; display: block; text-align: center; font: 800 9px/11px var(--skin-font, Inter, sans-serif); color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #000; }
.tcgb-u.act { transform: translateY(-4px); z-index: 2; }
.tcgb-u.top.act { transform: translateY(4px); } /* top side lunges down toward the centre (follows the side swap) */
.tcgb-u.act .cd { box-shadow: 0 0 0 2.5px #fde047; }
.tcgb-u.tgt .cd { box-shadow: 0 0 0 2.5px var(--foe); }
.tcgb-u.side-e.tgt .cd { box-shadow: 0 0 0 2.5px #fb7185; }
.tcgb-u.ko .cd { opacity: .4; }
.tcgb-u.ko .sw { opacity: .7; }
.tcgb-u.ko .hp b { visibility: hidden; }
/* hit flash: opacity only (the sprite's own hit frames do the rest) */
.tcgb-u.hurt .sw { animation: tcgb-hurt calc(.3s / var(--sp)) ease-out; }
.tcgb-u.healed .hp { animation: tcgb-heal calc(.5s / var(--sp)) ease-out; }
.tcgb-u.moved { animation: tcgb-in calc(.35s / var(--sp)) ease-out; }
@keyframes tcgb-hurt { 0%, 100% { opacity: 1; } 25% { opacity: .35; } 55% { opacity: .9; } 75% { opacity: .55; } }
@keyframes tcgb-heal { 0% { opacity: .5; } 100% { opacity: 1; } }
@keyframes tcgb-in { from { opacity: .2; } to { opacity: 1; } }
.tcgb-u .fl { position: absolute; z-index: 4; left: 50%; top: 22%; transform: translate(-50%, 0); pointer-events: none; white-space: nowrap;
  font: 900 22px/1 var(--skin-display, "Space Grotesk", Inter, sans-serif); color: #fff; text-shadow: 0 2px 0 #000, 0 0 6px rgba(0,0,0,.7);
  animation: tcgb-float calc(.95s / var(--sp)) ease-out forwards; }
.tcgb-u .fl.dmg { color: #fecaca; }
.tcgb-u .fl.crit { color: #fde047; font-size: 28px; }
.tcgb-u .fl.frost { color: #bae6fd; }
.tcgb-u .fl.burn { color: #fdba74; }
.tcgb-u .fl.heal { color: #86efac; }
.tcgb-u .fl.miss { color: #cbd5e1; font-size: 16px; font-style: italic; }
.tcgb-u .fl.shd { color: #bfdbfe; font-size: 14px; top: 52%; }
.tcgb-u .fl.ko { color: #f87171; font-size: 30px; top: 28%; }
.tcgb-u .fl.fxl { top: 12%; font-size: 12px; font-weight: 800; letter-spacing: .04em; padding: 4px 8px; border-radius: 999px; color: #111827; background: var(--fxb, #fde68a); text-shadow: none; animation-duration: calc(1.4s / var(--sp)); }
.tcgb-u .fl.fxl.fx-firestorm { background: #f97316; }
/* 2026-09-28 signature skills: one-shot pill, no loop, no blur */
.tcgb-u .fl.skl { top: 2%; z-index: 5; font-size: 12px; font-weight: 800; letter-spacing: .02em; padding: 3px 8px; border-radius: 999px;
  color: #fff; background: #7c3aed; border: 1px solid rgba(255,255,255,.55); text-shadow: 0 1px 0 rgba(0,0,0,.35);
  animation: tcgb-skl calc(1.5s / var(--sp)) ease-out forwards; }
@keyframes tcgb-skl { 0% { opacity: 0; transform: translate(-50%, 4px) scale(.85); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.06); }
  22% { transform: translate(-50%, 0) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -14px); } }
.tcgb-sheet .legend.sk li { display: block; }
@keyframes tcgb-float { 0% { opacity: 0; transform: translate(-50%, 6px); } 15% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -26px); } }

.tcgb-log { padding: 6px 14px calc(8px + env(safe-area-inset-bottom)); min-height: 58px; box-sizing: border-box; font-size: 12px; line-height: 1.45; color: var(--tcgh-muted);
  border-top: 1px solid var(--tcgh-line); background: color-mix(in srgb, var(--skin-surface, #0f172a) 85%, transparent); cursor: pointer; width: 100%; max-width: 720px; margin: 0 auto; border-radius: 14px 14px 0 0; }
.tcgb-log p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcgb-log p:last-child { color: var(--tcgh-text); }
.tcgb-log b.s-p, .tcgb-sheet b.s-p { color: #a5b4fc; } .tcgb-log b.s-e, .tcgb-sheet b.s-e { color: #fca5a5; }
.fxt { font-weight: 700; color: #fde68a; }

/* tips, sheet, result */
.tcgb-focus { outline: 3px solid #fde047 !important; outline-offset: 2px; z-index: 5; }
.tcgb-tip { position: fixed; z-index: 1080; box-sizing: border-box; padding: 14px 14px 12px; border-radius: 16px; background: var(--skin-surface, #0f172a); color: var(--tcgh-text);
  border: 1.5px solid #fde047; box-shadow: 0 18px 50px rgba(0,0,0,.6); font-size: 14px; line-height: 1.45; animation: tcgb-tip .18s ease-out; }
.tcgb-tip[hidden] { display: none; }
.tcgb-tip p { margin: 0 0 10px; }
.tcgb-tip b.s-p { color: #a5b4fc; } .tcgb-tip b.s-e { color: #fca5a5; }
.tcgb-tip .b { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tcgb-tip .tcgb-link { color: var(--tcgh-muted); }
@keyframes tcgb-tip { from { opacity: 0; transform: translateY(6px); } }
.tcgb-sheet { position: absolute; inset: 0; z-index: 1070; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(3,6,16,.7); }
.tcgb-sheet[hidden] { display: none; }
.tcgb-sheet .in { width: min(520px, 100%); max-height: calc(100% - 20px); overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px; border-radius: 20px;
  background: var(--skin-surface, #0f172a); border: 1px solid var(--tcgh-line); box-shadow: 0 24px 70px rgba(0,0,0,.55); box-sizing: border-box; }
.tcgb-sheet .hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tcgb-sheet h4 { margin: 0; font: 700 18px var(--skin-display, "Space Grotesk", Inter, sans-serif); }
.tcgb-sheet h5 { margin: 14px 0 4px; font-size: 14px; }
.tcgb-sheet .lead { margin: 0; font-size: 13px; color: var(--tcgh-muted); line-height: 1.5; }
.tcgb-sheet .legend { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tcgb-sheet .legend li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.4; }
.tcgb-sheet .legend em { font-style: normal; color: var(--tcgh-muted); font-size: 12px; }
.tcgb-sheet .legend .ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: #111827; background: var(--fxb, #fff); }
.tcgb-sheet .legend .fx-steam { --fxb: #cbd5e1; } .tcgb-sheet .legend .fx-embers { --fxb: #fb923c; } .tcgb-sheet .legend .fx-firestorm { --fxb: #f97316; }
.tcgb-sheet .legend .fx-ash { --fxb: #9ca3af; } .tcgb-sheet .legend .fx-mud { --fxb: #b08050; } .tcgb-sheet .legend .fx-frost { --fxb: #7dd3fc; } .tcgb-sheet .legend .fx-sandstorm { --fxb: #eab308; }
.tcgb-sheet .loglist p { margin: 0; padding: 3px 0; font-size: 13px; border-bottom: 1px solid color-mix(in srgb, var(--tcgh-line) 50%, transparent); }
.tcgb-res { position: absolute; inset: 0; z-index: 1060; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(3,6,16,.72); animation: tcgb-in .25s ease-out; }
.tcgb-res .in { width: min(420px, 100%); padding: 22px 20px; border-radius: 22px; text-align: center; background: var(--skin-surface, #0f172a); border: 1.5px solid var(--tcgh-line); box-shadow: 0 24px 70px rgba(0,0,0,.55); box-sizing: border-box; }
.tcgb-res.win .in { border-color: #22c55e; } .tcgb-res.lose .in { border-color: var(--foe); }
.tcgb-res .kick { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--tcgh-muted); }
.tcgb-res h3 { margin: 6px 0 2px; font: 900 42px/1 var(--skin-display, "Space Grotesk", Inter, sans-serif); }
.tcgb-res.win h3 { color: #86efac; } .tcgb-res.lose h3 { color: #fca5a5; }
.tcgb-res .sub { margin: 0 0 14px; color: var(--tcgh-muted); }
.tcgb-res .pts { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px; border-radius: 14px; background: var(--tcgh-surface-2); font-size: 14px; min-height: 40px; justify-content: center; }
.tcgb-res .pts .big { font: 900 30px/1 var(--skin-display, "Space Grotesk", Inter, sans-serif); color: #fde047; }
.tcgb-res .pts .bon { color: #fde68a; font-size: 13px; } .tcgb-res .pts .cap { color: #fdba74; font-size: 12px; } .tcgb-res .pts .day { color: var(--tcgh-muted); font-size: 12px; }
.tcgb-res .acts { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }

/* responsive */
@media (max-width: 980px) {
  .tcgb-pre { grid-template-columns: 1fr; }
  .tcgb-npc { grid-row: auto; order: 0; }
  .tcgb-decks { order: 1; } .tcgb-rew { order: 2; } .tcgb-tutopt { order: 3; }
  .tcgb-tutopt { grid-column: 1; text-align: center; }
}
@media (max-width: 640px) {
  .tcgb-npc { grid-template-columns: 1fr; padding: 12px; gap: 12px; }
  .tcgb-npc .art { min-height: 150px; }
  .tcgb-npc h3 { font-size: 30px; }
  .tcgb-lineup .rw { grid-template-columns: 1fr 1fr 1fr; }
  .tcgb-lineup .rl { grid-column: 1 / -1; }
  .tcgb-mini { flex-direction: column; align-items: flex-start; padding: 6px; }
  .tcgb-mini img { width: 100%; height: auto; aspect-ratio: 1; }
  .tcgb-mini .stt { gap: 4px; font-size: 10px; flex-wrap: wrap; }
  .tcgb-sp { min-width: 36px; padding: 0 8px; }
  .tcgb-top { gap: 6px; padding: 8px 8px 2px; }
  .tcgb-ctl { gap: 4px; }
  .tcgb-rd b { font-size: 15px; }
  .tcgb-field { gap: 6px; padding: 2px 8px 4px; }
  .tcgb-u .nm { font-size: 11px; }
  .tcgb-u .cd { padding: 3px 4px; gap: 2px; border-radius: 9px; }
  .tcgb-u .r2 { gap: 5px; }
  .tcgb-sheet { align-items: flex-end; padding: 0; }
  .tcgb-sheet .in { border-radius: 20px 20px 0 0; max-height: 80%; }
}
@media (min-width: 981px) and (max-width: 1280px) {
  .tcgb-mini { flex-direction: column; align-items: flex-start; }
  .tcgb-mini img { width: 100%; height: auto; aspect-ratio: 1.4; }
}
@media (min-width: 981px) {
  .tcgb-field { gap: 12px 16px; max-width: 920px; }
  /* wide screens: card beside the sprite so the character can use the full row height */
  .tcgb-u { flex-direction: row; align-items: center; gap: 6px; }
  .tcgb-u .spr { align-self: stretch; }
  .tcgb-u .cd { width: 124px; gap: 4px; padding: 6px 7px; }
  .tcgb-u .nm { font-size: 13px; } .tcgb-u .r2 { font-size: 11px; } .tcgb-u .hp { height: 13px; } .tcgb-u .hp b { line-height: 13px; font-size: 10px; }
  .tcgb-u .fl { left: calc(50% - 65px); }
  .tcgb-u .spr { padding-bottom: 6%; }
  .tcgb-u .plat { left: 14%; right: 14%; }
  .tcgb-u .spr::before { left: 26%; right: 26%; bottom: 2%; height: 10%; }
  .tcgb-u .fl { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .tcgb-u, .tcgb-u .hp i, .tcgb-order .oc, .tcgb-u .sw, .tcgb-u .cd { transition: none; }
  .tcgb-u.healed .hp, .tcgb-u.moved, .tcgb-res, .tcgb-tip { animation: none; }
  .tcgb-u.hurt .sw { animation: tcgb-flash .35s linear; }
  @keyframes tcgb-flash { 0%, 100% { opacity: 1; } 40% { opacity: .35; } }
  .tcgb-u.act, .tcgb-u.top.act { transform: none; }
  .tcgb-u .fl { animation-name: tcgb-fade; }
  .tcgb-banner.on { animation-name: tcgb-fade; }
  @keyframes tcgb-fade { 0% { opacity: 0; } 15%, 70% { opacity: 1; } 100% { opacity: 0; } }
}

/* Deck Builder chooser: battle stats line (2026-09-28) */
.tcgd-cstat { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 5px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tcgd-cstat i { font-size: 10px; color: var(--tcgh-muted); }
.tcgd-skill { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.35; color: var(--tcgh-text); }
.tcgd-skill b { color: #a78bfa; }