/* ============================================================
   TSW BATTLE — visual layer rebuilt to fit the rest of the site:
   same dark-panel treatment as Win the Treble, same tab pattern
   used elsewhere, genuinely mobile-friendly grids (no card
   fanning, no clip-path shapes, no hover-only states), and
   rarity-coloured cards so Common/Rare/Epic/Legendary are
   visually distinct again.
   ============================================================ */

.tswb-panel {
  color: #ffffff; margin: 0 -1.2rem; padding: 1.2rem; min-height: 500px;
  background: transparent;
}

.tswb-home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; margin-bottom: 1.2rem; scroll-margin-top: 90px; }
#tswbMatchScreen, #tswbDraft { scroll-margin-top: 90px; }

.tswb-home-tile {
  --mode-primary: #37b9ff;
  --mode-secondary: #0b2d50;
  --mode-glow: rgba(55,185,255,0.38);

  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 168px; border-radius: 18px; border: 2px solid var(--mode-primary);
  cursor: pointer; overflow: hidden; padding: 0.85rem; text-align: left;

  background:
    radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--mode-primary) 30%, transparent), transparent 38%),
    linear-gradient(150deg, color-mix(in srgb, var(--mode-secondary) 88%, black), #050812 78%);

  box-shadow:
    0 0 14px var(--mode-glow),
    inset 0 0 0 1px rgba(255,255,255,0.04),
    inset 0 10px 20px rgba(255,255,255,0.025),
    inset 0 -16px 26px rgba(0,0,0,0.32);

  isolation: isolate;
  transition: transform 0.14s ease, filter 0.14s ease, box-shadow 0.14s ease;
}
.tswb-home-tile:active { transform: translateY(-1px) scale(0.97); filter: brightness(1.05); }

/* Diagonal streak texture + corner bloom + one bright streak line, sitting behind the content */
.tswb-tile-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(255,255,255,0.03) 22px 24px);
}
.tswb-tile-bg::before {
  content: ""; position: absolute; top: -36px; right: -30px; width: 130px; height: 130px;
  background: var(--mode-primary); filter: blur(46px); opacity: 0.24; border-radius: 50%;
}
.tswb-tile-bg::after {
  content: ""; position: absolute; right: -8%; bottom: 14%; width: 78%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--mode-primary), transparent);
  transform: rotate(-40deg); opacity: 0.8;
  box-shadow: 0 0 8px var(--mode-primary), 0 0 16px var(--mode-glow);
}

.tswb-tile-icon {
  position: absolute; top: 14px; left: 14px; width: 40px; height: 40px;
  display: grid; place-items: center; color: var(--mode-primary);
  filter: drop-shadow(0 0 7px var(--mode-glow));
}
.tswb-tile-icon svg { width: 100%; height: 100%; }

.tswb-tile-copy { position: relative; z-index: 2; padding-right: 22px; margin-top: 2.6rem; }
.tswb-tile-copy h3 {
  margin: 0 0 0.3rem; color: #ffffff; font-family: 'Inter', sans-serif;
  font-size: 1.02rem; line-height: 1; font-weight: 900; letter-spacing: -0.01em; text-transform: uppercase;
}
.tswb-tile-copy p { margin: 0; color: rgba(241,245,255,0.8); font-size: 0.68rem; line-height: 1.35; }

.tswb-tile-arrow {
  position: absolute; right: 10px; bottom: 8px; z-index: 2; color: #fff;
  font-size: 1.7rem; font-weight: 300; line-height: 0.7;
  text-shadow: 0 0 8px rgba(255,255,255,0.15);
}

.tswb-back-to-menu {
  display: flex; align-items: center; gap: 0.4rem; background: #141c6a; border: 2px solid #2a3390;
  border-radius: 10px; padding: 0.5rem 0.9rem; font-weight: 800; font-size: 0.72rem; color: #dce0ff;
  cursor: pointer; margin-bottom: 1.1rem; scroll-margin-top: 90px;
}
.tswb-back-to-menu:active { transform: scale(0.97); }

/* CARDS — cyan */
.tswb-tab-catalogue { --mode-primary: #31baff; --mode-secondary: #062c48; --mode-glow: rgba(49,186,255,0.40); }

/* PACKS — purple */
.tswb-tab-packs { --mode-primary: #ba42ff; --mode-secondary: #351050; --mode-glow: rgba(186,66,255,0.42); }

/* DECK — royal blue */
.tswb-tab-deck { --mode-primary: #3d7cff; --mode-secondary: #0b2456; --mode-glow: rgba(61,124,255,0.42); }

/* QUICK MATCH — orange */
.tswb-tab-quick { --mode-primary: #ff861b; --mode-secondary: #4d1c07; --mode-glow: rgba(255,134,27,0.46); }

/* ROAD TO GLORY — gold, with a slow shimmer */
.tswb-tab-road {
  --mode-primary: #ffd735; --mode-secondary: #514109; --mode-glow: rgba(255,215,53,0.42);
  background-size: 200% 200%; animation: tswbTabRoadShimmer 3s ease-in-out infinite;
}
@keyframes tswbTabRoadShimmer { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* SURVIVOR — red, with a pulse */
.tswb-tab-survivor {
  --mode-primary: #ff364f; --mode-secondary: #4f0d18; --mode-glow: rgba(255,54,79,0.43);
  animation: tswbTabSurvivorPulse 1.4s ease-in-out infinite;
}
@keyframes tswbTabSurvivorPulse { 0%,100% { box-shadow: 0 0 12px var(--mode-glow); } 50% { box-shadow: 0 0 22px var(--mode-glow); } }

@media (prefers-reduced-motion: reduce) {
  .tswb-tab-road, .tswb-tab-survivor { animation: none; }
  .tswb-home-tile { transition: none; }
}

/* ============================================================
   HOME PAGE FEATURE TILES — same .tswb-home-tile component as
   Battle's own mode-select tiles, scoped separately so Battle's
   tiles (min-height rectangles) aren't affected: these four are
   square, and each gets its own distinct colour rather than
   sharing one scheme.
   ============================================================ */
#homeFeatureTiles .tswb-home-tile { aspect-ratio: 1; min-height: 0; border-radius: 0; }

/* BATTLE — crimson */
.tsw-home-battle { --mode-primary: #ff3b57; --mode-secondary: #4a0f1a; --mode-glow: rgba(255,59,87,0.42); }

/* SPURSBOXD — gold, matching its own star-rating colour */
.tsw-home-spursboxd { --mode-primary: #ffcc33; --mode-secondary: #4a3a08; --mode-glow: rgba(255,204,51,0.42); }

/* GAMES — emerald green */
.tsw-home-games { --mode-primary: #34d399; --mode-secondary: #0a3a2a; --mode-glow: rgba(52,211,153,0.42); }

/* STATS — sky cyan */
.tsw-home-stats { --mode-primary: #38bdf8; --mode-secondary: #0a2d42; --mode-glow: rgba(56,189,248,0.42); }

.tswb-hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: 0.85rem;
  padding: 1.1rem 1.1rem; margin-bottom: 1.2rem; border-radius: 18px;
  border: 2px solid rgba(221,70,255,0.7);
  background:
    radial-gradient(circle at 78% 20%, rgba(207,38,255,0.16), transparent 32%),
    linear-gradient(125deg, #030619, #050720 55%, #0a041d);
  box-shadow: 0 0 18px rgba(204,44,255,0.24), inset 0 0 0 1px rgba(255,255,255,0.04), inset 0 -24px 44px rgba(0,0,0,0.35);
}
.tswb-hero-fx { position: absolute; pointer-events: none; z-index: 0; }
.tswb-hero-fx-1 {
  width: 320px; height: 160px; right: -60px; top: 20px; transform: rotate(-18deg);
  background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(208,29,255,0.13) 19px 21px); opacity: 0.7;
}
.tswb-hero-fx-2 {
  width: 260px; height: 260px; right: 10px; top: -30px; border-radius: 50%;
  background: radial-gradient(circle, rgba(208,31,255,0.16), transparent 62%); filter: blur(10px);
}

.tswb-hero-copy { position: relative; z-index: 2; }
.tswb-hero-eyebrow { display: flex; align-items: center; gap: 0.6rem; color: #d6d8e5; font-size: 0.66rem; letter-spacing: 0.03em; }
.tswb-hero-chip {
  display: inline-flex; align-items: center; justify-content: center; padding: 0.15rem 0.35rem;
  border: 2px solid #a800df; border-radius: 6px; color: #df55ff; background: rgba(77,0,103,0.42);
  font-weight: 900; font-size: 0.6rem; box-shadow: inset 0 0 8px rgba(205,32,255,0.15);
}
.tswb-hero-title {
  margin: 0.35rem 0 0.1rem; padding-right: 0.2em; font-family: "Arial Narrow", Impact, sans-serif;
  font-size: clamp(2.1rem, 11vw, 2.8rem); font-style: italic; font-weight: 1000; line-height: 0.82;
  letter-spacing: -0.045em;
  background: linear-gradient(180deg,#ffffff 0%,#f5edff 35%,#bc55ff 80%,#8d25e7 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 4px 14px rgba(169,59,255,0.3);
}
.tswb-hero-tagline { margin: 0.3rem 0 0; color: #d3d6e2; font-size: 0.8rem; }

.tswb-hero-rules { margin-top: 0.65rem; display: grid; gap: 0.4rem; }
.tswb-hero-rule { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 0.45rem; }
.tswb-hero-rule-icon { width: 24px; height: 24px; display: grid; place-items: center; color: var(--rule-color); filter: drop-shadow(0 0 5px var(--rule-glow)); }
.tswb-hero-rule-icon svg { width: 21px; height: 21px; }
.tswb-hero-rule strong { display: block; color: #f8f8ff; font-size: 0.76rem; font-weight: 900; line-height: 1.1; }
.tswb-hero-rule span { display: block; margin-top: 0.1rem; color: #c3c6d7; font-size: 0.62rem; line-height: 1.15; }
.tswb-hero-rule-purple { --rule-color: #d442ff; --rule-glow: rgba(212,66,255,0.55); }
.tswb-hero-rule-gold { --rule-color: #ffe13b; --rule-glow: rgba(255,225,59,0.5); }
.tswb-hero-rule-cyan { --rule-color: #23e9ee; --rule-glow: rgba(35,233,238,0.5); }

.tswb-hero-visual { position: relative; z-index: 2; height: 150px; padding-bottom: 2.5rem; }
.tswb-hero-card-burst {
  position: absolute; width: 220px; height: 150px; top: 0; left: 50%; transform: translateX(-50%);
  background: repeating-conic-gradient(from 250deg at 50% 58%, transparent 0deg 5deg, rgba(207,37,255,0.1) 6deg 6.5deg);
  mask-image: radial-gradient(circle, black, transparent 70%); opacity: 0.85; pointer-events: none;
}
/* Real .tswb-card components size to their own content (team name, stat
   grid) rather than a simple aspect ratio, so a plain width override
   left them far too tall here. Each wrapper below is a fixed, predictable
   box for positioning the fan; the card inside renders at its natural
   size and is scaled down to fit, sidestepping that min-width fight. */
.tswb-hero-demo-card { position: absolute; width: 70px; height: 130px; overflow: visible; }
.tswb-hero-demo-card .tswb-card { width: 140px; transform-origin: top left; pointer-events: none; }
.tswb-hero-demo-back { left: 2%; top: 18px; z-index: 1; }
.tswb-hero-demo-back .tswb-card { transform: rotate(-13deg) scale(0.46); outline: 2px solid #a52af5; box-shadow: 0 0 14px rgba(188,42,255,0.4); }
.tswb-hero-demo-mid { left: 28%; top: 6px; z-index: 2; }
.tswb-hero-demo-mid .tswb-card { transform: rotate(-3deg) scale(0.46); outline: 2px solid #ffe06c; box-shadow: 0 0 15px rgba(255,210,48,0.32); }
.tswb-hero-demo-front { left: 54%; top: 0; width: 78px; height: 145px; z-index: 3; }
.tswb-hero-demo-front .tswb-card { transform: rotate(7deg) scale(0.5); outline: 2px solid #68caff; box-shadow: 0 0 16px rgba(57,149,255,0.5); }

.tswb-hero-play {
  position: absolute; z-index: 10; left: 0; right: 0; bottom: 0; height: 40px;
  display: flex; align-items: center; justify-content: center; gap: 0.45rem;
  border: 2px solid #d12dff; border-radius: 11px; cursor: pointer; color: #fff;
  background: linear-gradient(90deg,#260c4a,#421260 50%,#12072d);
  box-shadow: 0 0 14px rgba(211,46,255,0.5), inset 0 0 14px rgba(219,53,255,0.12);
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.tswb-hero-play span { font-size: 0.8rem; font-style: italic; font-weight: 900; letter-spacing: 0.03em; }
.tswb-hero-play svg { width: 16px; height: 16px; }
.tswb-hero-play:active { transform: scale(0.98); filter: brightness(1.1); }

@media (min-width: 620px) {
  .tswb-hero { flex-direction: row; align-items: center; padding: 1.5rem 1.8rem; min-height: 220px; }
  .tswb-hero-copy { flex: 0.95; }
  .tswb-hero-visual { flex: 1.05; height: 220px; padding-bottom: 2.8rem; }
  .tswb-hero-title { font-size: clamp(2.6rem, 5vw, 3.4rem); }
  .tswb-hero-demo-card { width: 100px; height: 190px; }
  .tswb-hero-demo-back { left: 4%; top: 30px; }
  .tswb-hero-demo-back .tswb-card { transform: rotate(-13deg) scale(0.64); }
  .tswb-hero-demo-mid { left: 30%; top: 12px; }
  .tswb-hero-demo-mid .tswb-card { transform: rotate(-3deg) scale(0.64); }
  .tswb-hero-demo-front { left: 56%; top: 0; width: 110px; height: 210px; }
  .tswb-hero-demo-front .tswb-card { transform: rotate(7deg) scale(0.72); }
  .tswb-hero-play { left: 0; max-width: 280px; margin: 0 auto; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .tswb-hero-play { transition: none; }
}

.tswb-statbar { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.tswb-stat-chip {
  --stat-color: #d4c44a; --stat-glow: rgba(212,196,74,0.35);
  display: flex; align-items: center; gap: 0.4rem; flex: 1; min-width: 92px;
  padding: 0.5rem 0.55rem; border-radius: 10px; border: 1.5px solid var(--stat-color);
  background: linear-gradient(150deg, rgba(255,255,255,0.06), #0c0e22 65%);
  box-shadow: inset 0 0 10px rgba(255,255,255,0.03), 0 0 8px var(--stat-glow);
}
.tswb-stat-icon { width: 17px; height: 17px; flex-shrink: 0; color: var(--stat-color); filter: drop-shadow(0 0 4px var(--stat-glow)); }
.tswb-stat-body { display: flex; flex-direction: column; min-width: 0; }
.tswb-stat-chip .l { font-size: 0.54rem; color: #a9adda; text-transform: uppercase; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; }
.tswb-stat-chip .v { font-family: 'Source Serif 4', serif; font-weight: 800; font-size: 0.88rem; color: var(--stat-color); text-shadow: 0 0 6px var(--stat-glow); }

.tswb-stat-coins { --stat-color: #ffd735; --stat-glow: rgba(255,215,53,0.4); }
.tswb-stat-picks { --stat-color: #ba42ff; --stat-glow: rgba(186,66,255,0.4); }
.tswb-stat-record { --stat-color: #31d9c0; --stat-glow: rgba(49,217,192,0.4); }

.tswb-btn { display: block; width: 100%; background: #d4c44a; color: #0e1555; border: none; padding: 0.85rem; font-weight: 800; font-size: 0.85rem; text-transform: uppercase; cursor: pointer; border-radius: 6px; transition: transform 0.1s ease; }
.tswb-btn:active { transform: scale(0.97); }
.tswb-btn.secondary { background: #141c6a; color: white; }
.tswb-btn.small { width: auto; padding: 0.6rem 1rem; font-size: 0.72rem; }

.tswb-section-title { font-family: 'Source Serif 4', serif; font-weight: 800; font-size: 1.05rem; margin: 1.2rem 0 0.6rem; color: #d4c44a; }
.tswb-subtitle { color: #a9adda; font-size: 0.78rem; text-align: center; margin-bottom: 1rem; }

/* ============================
   TOOLBAR (sort/filter)
============================ */
.tswb-toolbar { position: sticky; top: 0; z-index: 5; background: #0e1555; display: flex; gap: 0.7rem; flex-wrap: wrap; padding: 0.5rem 0; margin-bottom: 0.8rem; }
.tswb-toolbar label { font-size: 0.62rem; font-weight: 700; color: #a9adda; text-transform: uppercase; display: block; margin-bottom: 0.15rem; }
.tswb-toolbar select { background: #141c6a; color: white; border: 1px solid #2a3390; border-radius: 6px; padding: 0.4rem 0.5rem; font-size: 0.72rem; }

/* ============================
   CARD — rarity-coloured, mobile-first grid, no fanning
============================ */
.tswb-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; align-items: start; transform: translateX(-7px); }

/* The deck-builder's own-collection picker (unlike the small fixed-size
   deck slots sharing this same grid class) can hold a player's entire
   collection at once - same fast-scroll performance treatment as the
   Catalogue's club binder, and for the same reason. */
#tswbDeckBinder .tswb-card {
  content-visibility: auto;
  contain-intrinsic-height: auto 260px;
}

/* ============================================================
   TSW PLAYER CARD — premium collectible treatment. One set of
   structural rules driven entirely by CSS custom properties
   (--tcv-*), set once per rarity below, so every tier gets the exact
   same layered construction just recoloured, rather than 9 separate
   designs.
   ============================================================ */
.tswb-card {
  position: relative; cursor: pointer; display: flex; flex-direction: column;
  padding: 3px; /* the thick luminous outer edge itself */
  border-radius: 0;
  background: linear-gradient(155deg, var(--tcv-glow) 0%, var(--tcv-mid) 45%, var(--tcv-dark) 100%);
  box-shadow: 0 0 13px rgba(var(--tcv-glow-rgb), 0.4), 0 4px 12px rgba(0,0,0,0.4);
  transition: transform 0.16s ease, box-shadow 0.25s ease;
  animation: tswbBorderPulse 3.4s ease-in-out infinite;
}
@keyframes tswbBorderPulse {
  0%, 100% { box-shadow: 0 0 13px rgba(var(--tcv-glow-rgb), 0.4), 0 4px 12px rgba(0,0,0,0.4); }
  50% { box-shadow: 0 0 20px rgba(var(--tcv-glow-rgb), 0.62), 0 4px 12px rgba(0,0,0,0.4); }
}
.tswb-card:hover { transform: perspective(700px) rotateX(3deg) rotateY(-3deg) translateY(-2px); }
.tswb-card:active { transform: scale(0.96); }

/* The second, inset rail - a 1px border nested inside the outer frame,
   giving the "manufactured, multi-layer edge" look. Everything else -
   background, flag, content, corner details - lives inside this. */
.tswb-card-inner {
  position: relative; flex: 1 1 auto; overflow: hidden; display: flex; flex-direction: column;
  padding: 0.65rem 0.55rem 0.55rem;
  border: 1px solid rgba(var(--tcv-glow-rgb), 0.6);
  background:
    radial-gradient(ellipse 60% 45% at 14% 10%, rgba(var(--tcv-glow-rgb), 0.4), transparent 60%),
    linear-gradient(112deg, transparent 52%, rgba(255,255,255,0.05) 55%, transparent 59%),
    linear-gradient(112deg, transparent 66%, rgba(255,255,255,0.04) 69%, transparent 74%),
    repeating-linear-gradient(115deg, transparent 0 9px, rgba(255,255,255,0.035) 9px 10px),
    linear-gradient(205deg, var(--tcv-bright) 0%, var(--tcv-mid) 48%, var(--tcv-dark) 100%);
}
.tswb-card-content { position: relative; z-index: 3; display: flex; flex-direction: column; flex: 1 1 auto; text-align: center; }

/* Nationality flag watermark - sits fully inside the card's own bounds
   (never a negative offset that would push it into the parent's
   overflow:hidden and clip it) so the complete flag is always visible,
   never a fragment. No mask - a clean, whole rotated banner reads far
   more clearly as "that specific flag" than a partially-faded one. */
.tswb-card-flag {
  position: absolute; top: 4%; right: -4%; width: 50%; height: auto; max-width: none; z-index: 1;
  object-fit: contain; opacity: 0.19; pointer-events: none; user-select: none;
  transform: translate3d(0,0,0) rotate(-6deg) scale(1.05); transform-origin: center;
  filter: saturate(1.05) contrast(1.03);
  animation: tswbFlagFloat 8s ease-in-out infinite alternate;
}
@keyframes tswbFlagFloat {
  0% { transform: translate3d(0,0,0) rotate(-6deg) scale(1.05); opacity: 0.17; }
  100% { transform: translate3d(-3px,2px,0) rotate(-5deg) scale(1.08); opacity: 0.21; }
}
@media (prefers-reduced-motion: reduce) {
  .tswb-card-flag { animation: none; }
}

/* Reflective light sweep - a diagonal band drifting across the card on
   a loop, the classic foil/holo effect the reference's lighting implies. */
.tswb-card-inner::after {
  content: ''; position: absolute; top: -50%; left: -30%; width: 36%; height: 200%; z-index: 4;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.16) 45%, rgba(255,255,255,0.26) 50%, rgba(255,255,255,0.16) 55%, transparent 100%);
  transform: rotate(8deg) translateX(0);
  animation: tswbCardShine 5.5s ease-in-out infinite;
  pointer-events: none; will-change: transform;
}
@keyframes tswbCardShine {
  0% { transform: rotate(8deg) translateX(0); }
  35%, 100% { transform: rotate(8deg) translateX(340%); }
}
.tswb-card:nth-child(3n+1) .tswb-card-inner::after { animation-delay: 0s; }
.tswb-card:nth-child(3n+2) .tswb-card-inner::after { animation-delay: 1.2s; }
.tswb-card:nth-child(3n) .tswb-card-inner::after { animation-delay: 2.4s; }
#tswbCatalogueGrid .tswb-card-inner::after,
#tswbDeckBinder .tswb-card-inner::after,
#tswbSurvivorDeckGrid .tswb-card-inner::after { animation: none; display: none; }

/* Top rarity notch - the small chopped-corner banner across the very
   top of the card. */
.tswb-rarity-notch {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 3;
  padding: 0.16rem 0.6rem 0.12rem; clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
  background: linear-gradient(165deg, rgba(0,0,0,0.35), rgba(0,0,0,0.65));
  white-space: nowrap;
}
.tswb-rarity-notch span { font-size: 0.44rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tcv-glow); white-space: nowrap; }

/* Rarity themes - each sets the same handful of variables, so the
   entire structure above just gets recoloured per tier. */
.tswb-card.rarity-academy     { --tcv-glow:#b8b8b8; --tcv-glow-rgb:184,184,184; --tcv-bright:#7d7d7d; --tcv-mid:#2e2e2e; --tcv-dark:#0a0a0a; --tswb-accent:#c7c7c7; border-color:#8a8a8a; }
.tswb-card.rarity-prospect    { --tcv-glow:#3ecf6e; --tcv-glow-rgb:62,207,110;  --tcv-bright:#1f8f47; --tcv-mid:#0d3d1f; --tcv-dark:#030d06; --tswb-accent:#6ee89a; border-color:#22c55e; }
.tswb-card.rarity-first-team  { --tcv-glow:#4a90e2; --tcv-glow-rgb:74,144,226;  --tcv-bright:#2f6fc4; --tcv-mid:#12294f; --tcv-dark:#050a18; --tswb-accent:#8fc0f5; border-color:#4a90e2; }
.tswb-card.rarity-star        { --tcv-glow:#6f7ff0; --tcv-glow-rgb:111,127,240; --tcv-bright:#4552c4; --tcv-mid:#1a2058; --tcv-dark:#070816; --tswb-accent:#8ea3f0; border-color:#3b5bdb; }
.tswb-card.rarity-elite       { --tcv-glow:#b954ff; --tcv-glow-rgb:185,84,255;  --tcv-bright:#8b2fd6; --tcv-mid:#3a0f5c; --tcv-dark:#0d0316; --tswb-accent:#d6a8fc; border-color:#a855f7; }
.tswb-card.rarity-world-class { --tcv-glow:#ff9b3d; --tcv-glow-rgb:255,155,61;  --tcv-bright:#e0701a; --tcv-mid:#5c2606; --tcv-dark:#170a02; --tswb-accent:#fdb073; border-color:#f97316; }
.tswb-card.rarity-icon        { --tcv-glow:#f0dc7a; --tcv-glow-rgb:240,220,122; --tcv-bright:#d4af17; --tcv-mid:#5c4a08; --tcv-dark:#171200; --tswb-accent:#f7e29c; border-color:#d4c44a; }
.tswb-card.rarity-legend      { --tcv-glow:#ff5c5c; --tcv-glow-rgb:255,92,92;   --tcv-bright:#d62f2f; --tcv-mid:#5c0f0f; --tcv-dark:#170404; --tswb-accent:#ff9d9d; border-color:#ef4444; }
.tswb-card.rarity-immortal    { --tcv-glow:#ffffff; --tcv-glow-rgb:255,255,255; --tcv-bright:#d8dce6; --tcv-mid:#565b6e; --tcv-dark:#0e0f14; --tswb-accent:#f3f4f6; border-color:#e5e7eb; }

.tswb-card.selected .tswb-card-inner { outline: 3px solid #fff; outline-offset: -3px; }
.tswb-card.winner .tswb-card-inner { outline: 3px solid #48dd92; outline-offset: -3px; }
.tswb-card.loser { opacity: 0.5; }

.tswb-card-top { position: relative; z-index: 3; text-align: left; margin-top: 0.55rem; }
.tswb-card .ovr { font-family: 'Source Serif 4', serif; font-weight: 900; font-size: 1.9rem; color: #fff; line-height: 0.9; text-shadow: 0 3px 2px rgba(0,0,0,0.55), 0 -1px 0 rgba(255,255,255,0.28); }
.tswb-card .pos { font-size: 0.76rem; font-weight: 800; letter-spacing: 0.02em; color: rgba(255,255,255,0.92); margin-top: 0.12rem; }

.tswb-card .club {
  position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 0.35rem;
  font-size: 0.6rem; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: 0.02em;
  background: rgba(0,0,0,0.4); border: 1px solid rgba(var(--tcv-glow-rgb),0.35); border-radius: 4px;
  padding: 0.28rem 0.35rem; margin: 0.42rem 0;
}
.tswb-club-dot {
  flex-shrink: 0; width: 12px; height: 12px; border-radius: 50%;
  background: linear-gradient(90deg, var(--c1, #888) 0 50%, var(--c2, #333) 50% 100%);
  border: 1px solid rgba(255,255,255,0.75); box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.tswb-club-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tswb-card .stats { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.26rem; margin-top: 0.1rem; }
.tswb-card .stat {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.12rem;
  background: rgba(0,0,0,0.4); border: 1px solid rgba(var(--tcv-glow-rgb),0.4); border-radius: 5px;
  padding: 0.38rem 0.12rem; box-shadow: inset 0 0 9px rgba(0,0,0,0.45);
}
.tswb-card .stat .l { color: var(--tcv-glow); font-size: 0.5rem; font-weight: 800; letter-spacing: 0.02em; }
.tswb-card .stat .v { color: #fff; font-weight: 900; font-size: 1.2rem; line-height: 1; margin-top: 0.06rem; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
.tswb-card .stat.active { border-color: var(--tcv-glow); box-shadow: inset 0 0 9px rgba(0,0,0,0.45), 0 0 8px rgba(var(--tcv-glow-rgb),0.4); }
.tswb-card .stat.active .l, .tswb-card .stat.active .v { color: var(--tcv-glow); }
.tswb-card .total { position: relative; z-index: 3; border-top: 1px solid rgba(255,255,255,0.25); margin-top: 0.35rem; padding-top: 0.3rem; display: flex; justify-content: space-between; font-size: 0.75rem; font-weight: 900; color: #fff; }

.tswb-divider { position: relative; z-index: 3; display: flex; align-items: center; gap: 0.3rem; margin: 0.5rem 0 0.28rem; }
.tswb-divider span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); }
.tswb-divider i { width: 9px; height: 9px; background: var(--tcv-glow); transform: rotate(45deg); box-shadow: 0 0 7px var(--tcv-glow), 0 0 3px #fff; flex-shrink: 0; }

.tswb-card .name {
  position: relative; z-index: 3; font-size: 1.02rem; font-weight: 900; color: #fff; line-height: 1.12;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-shadow: 0 2px 3px rgba(0,0,0,0.4);
}
.tswb-card .rarity-label {
  position: relative; z-index: 3; font-size: 0.52rem; color: var(--tcv-glow); text-transform: uppercase; font-weight: 800; letter-spacing: 0.05em;
  margin-top: 0.22rem; display: flex; align-items: center; justify-content: center; gap: 0.4rem; white-space: nowrap;
}
.tswb-card .rarity-label .chev { position: relative; width: 11px; height: 6px; flex-shrink: 0; }
.tswb-card .rarity-label .chev::before, .tswb-card .rarity-label .chev::after {
  content: ''; position: absolute; top: 50%; width: 62%; height: 2px; background: var(--tcv-glow); box-shadow: 0 0 4px var(--tcv-glow);
}
.tswb-card .rarity-label .chev::before { left: 0; transform: rotate(32deg); transform-origin: left center; }
.tswb-card .rarity-label .chev::after { right: 0; transform: rotate(-32deg); transform-origin: right center; }

.tswb-levelpill-row { position: relative; z-index: 3; display: flex; justify-content: center; margin-top: 0.42rem; }
.tswb-levelpill {
  border: 1.5px solid var(--tcv-glow); border-radius: 999px; padding: 0.18rem 0.7rem;
  font-size: 0.6rem; font-weight: 800; color: var(--tcv-glow); background: rgba(0,0,0,0.4);
  box-shadow: 0 0 7px rgba(var(--tcv-glow-rgb),0.35);
}
.tswb-mini-xp-track { position: relative; z-index: 3; height: 4px; background: rgba(0,0,0,0.5); border-radius: 3px; overflow: hidden; margin: 0.28rem 0.35rem 0; }
.tswb-mini-xp-fill { height: 100%; background: linear-gradient(90deg, var(--tcv-glow), #fff176); box-shadow: 0 0 5px var(--tcv-glow); }

/* Decorative bottom-corner rails and a tiny dotted accent - present on
   every card, not just when there's data to show there. */
.tswb-card-corner { position: absolute; z-index: 2; opacity: 0.55; pointer-events: none; }
.tswb-card-corner-bl { bottom: 0; left: 0; width: 26%; height: 16%; clip-path: polygon(0 100%, 0 30%, 70% 100%); background: repeating-linear-gradient(45deg, transparent 0 4px, rgba(var(--tcv-glow-rgb),0.55) 4px 5px); }
.tswb-card-corner-br { bottom: 0; right: 0; width: 26%; height: 16%; clip-path: polygon(100% 100%, 100% 30%, 30% 100%); background: repeating-linear-gradient(-45deg, transparent 0 4px, rgba(var(--tcv-glow-rgb),0.55) 4px 5px); }
.tswb-card-dots {
  position: absolute; z-index: 2; bottom: 9%; left: 3.5%; width: 12px; height: 34px; opacity: 0.5; pointer-events: none;
  background-image: radial-gradient(circle, rgba(var(--tcv-glow-rgb),0.85) 1px, transparent 1.3px);
  background-size: 100% 6px;
}

/* ============================================================
   CARD ALIGNMENT SYSTEM — a permanent per-card directional marker.
   Colour is fixed by direction, not rarity: left/right are always a
   hard, solid blue; up/down are always a hard, solid yellow/gold -
   flat, high-contrast tones on purpose, not a glow effect. "Lit"
   (brighter, pulsing) only when a Battle screen has determined this
   card is part of a connected Alignment Boost pairing right now.
   Full-size cards: a genuine 6th cell in the 5-stat grid, sitting in
   the one slot that grid always leaves empty (row 2, after DEF).
   Compact hand cards (no stat grid to sit in): the original small
   standalone corner marker, same colour rules.
   ============================================================ */
.tswb-align-stat-box {
  position: relative;
  --align-hard: #2451d6; --align-hard-hi: #6a92ff; --align-hard-lit: #3d6bff;
}
.tswb-align-stat-box.v { --align-hard: #b8860b; --align-hard-hi: #ffcf3d; --align-hard-lit: #e0a80f; }
.tswb-align-stat-box {
  background: var(--align-hard) !important; border-color: var(--align-hard-hi) !important;
  box-shadow: inset 0 0 9px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.4);
}
.tswb-align-stat-icon {
  display: block; width: 22px; height: 22px; color: #fff;
  transform: rotate(var(--align-rot));
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
.tswb-align-stat-box.lit {
  background: var(--align-hard-lit) !important; border-color: #fff !important;
  box-shadow: inset 0 0 9px rgba(0,0,0,0.25), 0 0 10px var(--align-hard-hi);
  animation: tswbAlignBoxPulse 1s ease-in-out infinite;
}
@keyframes tswbAlignBoxPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.tswb-align-badge {
  position: absolute; z-index: 4; bottom: 4%; right: 4%;
  transform: rotate(var(--align-rot));
  width: 17px; height: 17px; padding: 2px; box-sizing: border-box;
  display: grid; place-items: center; border-radius: 4px;
  background: #2451d6; border: 1px solid #6a92ff;
  color: #fff; pointer-events: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.tswb-align-badge.v { background: #b8860b; border-color: #ffcf3d; }
.tswb-align-badge svg { width: 100%; height: 100%; }
.tswb-align-badge.lit {
  background: #3d6bff; border-color: #fff;
  box-shadow: 0 0 9px rgba(106,146,255,0.9);
  animation: tswbAlignPulse 1s ease-in-out infinite;
}
.tswb-align-badge.v.lit { background: #e0a80f; box-shadow: 0 0 9px rgba(255,207,61,0.9); }
@keyframes tswbAlignPulse {
  0%, 100% { transform: rotate(var(--align-rot)) scale(1); }
  50% { transform: rotate(var(--align-rot)) scale(1.3); }
}
.tswb-card-handstatless .tswb-align-badge { width: 11px; height: 11px; padding: 1.5px; bottom: 3%; right: 3%; }

/* The animated energy link drawn between two Alignment-Boosted cards
   once placed - a thin glowing bar rotated/stretched to span exactly
   between their centres, sourced from the wrapper's own JS-computed
   geometry rather than a fixed shape. */
.tswb-align-connector {
  position: absolute; z-index: 5; height: 3px; transform-origin: 0 50%;
  border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, #2451d6, #ffcf3d, #2451d6);
  box-shadow: 0 0 8px rgba(255,207,61,0.8), 0 0 4px rgba(36,81,214,0.8);
  animation: tswbConnectorFade 2.2s ease-out forwards;
}
@keyframes tswbConnectorFade {
  0% { opacity: 0; filter: brightness(1); }
  15% { opacity: 1; }
  70% { opacity: 1; filter: brightness(1.4); }
  100% { opacity: 0; filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
  .tswb-align-connector { animation: none; opacity: 0.8; }
}

@media (prefers-reduced-motion: reduce) {
  .tswb-align-badge.lit, .tswb-align-stat-box.lit { animation: none; }
}

/* ============================
   OPPONENT SELECT — Road to Glory and Quick Match share this design
============================ */

/* ============================
   ROAD TO GLORY / QUICK MATCH — opponent selection panels
   Scoped entirely under tswb-rtg-*. Used by both modes so opponent
   choice looks and feels consistent everywhere in Battle.
============================ */
.tswb-rtg-opponent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; align-items: start; }

.tswb-rtg-opponent {
  --accent: #19ff74; --accent-rgb: 25,255,116;
  position: relative; overflow: hidden; min-height: 220px;
  padding: 0.7rem 0.4rem 3.2rem; text-align: center; border-radius: 12px;
  border: 2px solid var(--accent);
  background:
    radial-gradient(circle at 50% 32%, rgba(var(--accent-rgb),0.18), transparent 33%),
    linear-gradient(145deg, rgba(var(--accent-rgb),0.12), #060912 55%);
  box-shadow: inset 0 0 22px rgba(var(--accent-rgb),0.09), 0 0 10px rgba(var(--accent-rgb),0.2);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tswb-rtg-opponent:active { transform: translateY(-2px); box-shadow: inset 0 0 26px rgba(var(--accent-rgb),0.13), 0 0 16px rgba(var(--accent-rgb),0.35); }

/* diagonal texture */
.tswb-rtg-opponent::before {
  content: ""; position: absolute; inset: 0; opacity: 0.25; pointer-events: none;
  background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(var(--accent-rgb),0.12) 15px, transparent 17px);
}
/* light burst */
.tswb-rtg-opponent::after {
  content: ""; position: absolute; width: 150px; height: 150px; left: 50%; top: 30px; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(var(--accent-rgb),0.2), transparent 65%); pointer-events: none;
}

.tswb-rtg-opponent-safe { --accent: #16ff6a; --accent-rgb: 22,255,106; }
.tswb-rtg-opponent-balanced {
  --accent: #ffc51c; --accent-rgb: 255,197,28;
  transform: translateY(-5px);
  box-shadow: inset 0 0 26px rgba(255,190,20,0.13), 0 0 15px rgba(255,190,20,0.42);
}
.tswb-rtg-opponent-hard { --accent: #ff3049; --accent-rgb: 255,48,73; }

.tswb-rtg-ribbon {
  position: absolute; right: -28px; top: 13px; width: 100px; padding: 0.18rem 0;
  transform: rotate(45deg); color: #171000; background: linear-gradient(180deg,#ffe864,#f2b500);
  font-size: 0.46rem; font-weight: 900; letter-spacing: 0.01em; z-index: 5; text-align: center;
  white-space: nowrap;
}

.tswb-rtg-point-reward { position: relative; z-index: 2; color: var(--accent); font-size: 0.68rem; font-weight: 900; }
.tswb-rtg-point-reward strong { font-size: 1.35rem; display: block; line-height: 1.1; }

.tswb-rtg-shield {
  position: relative; z-index: 2; width: 58px; height: 66px; margin: 0.5rem auto; display: grid; place-items: center;
  clip-path: polygon(50% 0, 92% 17%, 86% 70%, 50% 100%, 14% 70%, 8% 17%);
  background: linear-gradient(145deg, rgba(var(--accent-rgb),0.95), rgba(var(--accent-rgb),0.25) 45%, #05080d);
  filter: drop-shadow(0 0 8px rgba(var(--accent-rgb),0.65));
}
.tswb-rtg-shield-inner {
  position: absolute; inset: 4px; clip-path: inherit;
  background: linear-gradient(160deg, #06100b, rgba(var(--accent-rgb),0.25));
  border: 1px solid var(--accent);
  display: grid; place-items: center;
}
.tswb-rtg-ball {
  width: 30px; height: 30px; color: var(--accent);
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb),0.6));
}
.tswb-rtg-ball svg { width: 100%; height: 100%; }

.tswb-rtg-opp-label { position: relative; z-index: 2; color: #aeb3cd; font-size: 0.58rem; font-weight: 900; letter-spacing: 0.04em; }
.tswb-rtg-opp-power { position: relative; z-index: 2; margin-top: 0.1rem; color: #e9ebf6; font-size: 1.7rem; line-height: 1; font-weight: 900; text-shadow: 0 2px 4px #000; }

.tswb-rtg-difficulty {
  position: relative; z-index: 2; display: inline-block; margin-top: 0.4rem; min-width: 72px;
  padding: 0.2rem 0.5rem; border-radius: 6px; color: var(--accent);
  background: linear-gradient(180deg, rgba(var(--accent-rgb),0.14), rgba(0,0,0,0.5));
  border: 1px solid var(--accent); font-weight: 900; font-size: 0.62rem; letter-spacing: 0.03em;
  box-shadow: 0 0 7px rgba(var(--accent-rgb),0.22);
}

.tswb-rtg-play-bar {
  position: absolute; z-index: 3; left: 6px; right: 6px; bottom: 6px; height: 42px;
  display: grid; grid-template-columns: 1fr 1.15fr; overflow: hidden; border-radius: 8px;
  border: 1px solid var(--accent); background: #070a14;
}
.tswb-rtg-bout-cost {
  display: flex; align-items: center; justify-content: center; gap: 0.2rem;
  color: #c4c7d8; font-size: 0.56rem; font-weight: 900;
}
.tswb-rtg-bolt { width: 12px; height: 12px; color: var(--gold, #d4c44a); flex-shrink: 0; }
.tswb-rtg-play-btn {
  border: 0; cursor: pointer; color: #fff; font-size: 0.8rem; font-weight: 900;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.4), rgba(var(--accent-rgb),0.75));
  transition: filter 0.12s ease;
}
.tswb-rtg-play-btn:active { filter: brightness(1.25); }
.tswb-rtg-opponent-balanced .tswb-rtg-play-btn { color: #191100; background: linear-gradient(135deg,#ffc01d,#ffe55d); }

/* Quick Match variant — same card, opponent name instead of a points
   reward, and a full-width play bar since there's no bout cost to
   split it with. */
.tswb-rtg-opp-name {
  position: relative; z-index: 2; color: var(--accent); font-size: 0.66rem; font-weight: 900;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 0.15rem;
}
.tswb-rtg-quick-play-bar {
  position: absolute; z-index: 3; left: 6px; right: 6px; bottom: 6px; height: 38px;
  border-radius: 8px; overflow: hidden; border: 1px solid var(--accent);
}
.tswb-rtg-quick-play-btn {
  width: 100%; height: 100%; border: 0; cursor: pointer; color: #fff; font-size: 0.72rem; font-weight: 900;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.4), rgba(var(--accent-rgb),0.75));
  transition: filter 0.12s ease;
}
.tswb-rtg-quick-play-btn:active { filter: brightness(1.25); }
.tswb-rtg-opponent-balanced .tswb-rtg-quick-play-btn { color: #191100; background: linear-gradient(135deg,#ffc01d,#ffe55d); }

@media (prefers-reduced-motion: reduce) {
  .tswb-rtg-opponent { transition: none; }
}

/* Mobile — stays 3-column side by side per spec, scaled down proportionally rather than stacking */
@media (max-width: 480px) {
  .tswb-rtg-opponent-grid { gap: 0.35rem; }
  .tswb-rtg-opponent { min-height: 178px; padding: 0.5rem 0.25rem 2.6rem; border-radius: 10px; }
  .tswb-rtg-shield { width: 42px; height: 48px; margin: 0.35rem auto; }
  .tswb-rtg-ball { width: 20px; height: 20px; }
  .tswb-rtg-point-reward { font-size: 0.56rem; }
  .tswb-rtg-point-reward strong { font-size: 1rem; }
  .tswb-rtg-opp-name { font-size: 0.52rem; }
  .tswb-rtg-opp-label { font-size: 0.48rem; }
  .tswb-rtg-opp-power { font-size: 1.25rem; }
  .tswb-rtg-difficulty { min-width: 54px; padding: 0.15rem 0.3rem; font-size: 0.52rem; }
  .tswb-rtg-play-bar { height: 34px; left: 4px; right: 4px; bottom: 4px; }
  .tswb-rtg-quick-play-bar { height: 32px; left: 4px; right: 4px; bottom: 4px; }
  .tswb-rtg-quick-play-btn { font-size: 0.58rem; }
  .tswb-rtg-bout-cost { font-size: 0.44rem; }
  .tswb-rtg-bolt { width: 9px; height: 9px; }
  .tswb-rtg-play-btn { font-size: 0.6rem; }
  .tswb-rtg-ribbon { right: -22px; top: 10px; width: 76px; font-size: 0.34rem; padding: 0.14rem 0; letter-spacing: 0; }
}

/* ============================
   MATCH SCREEN — shared sizing tokens used by both the hand row and
   the stat matrix below it (see the HAND section further down) so a
   card always lines up exactly above its own column.
============================ */
#tswbMatchScreen { --tswb-side-w: 30px; --tswb-label-w: 26px; --tswb-card-w: 62px; --tswb-cols: 4; }

/* ============================
   SCOREBOARD — kept small and secondary now that the opponent's
   hand, the active stat and your own hand/matrix are the things
   that actually matter round to round; still readable, just not
   the focal point it once was.
============================ */
.tswb-scoreboard {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 1fr 64px 1fr; align-items: center; gap: 0.3rem;
  min-height: 64px; margin-bottom: 0.5rem; padding: 0.45rem 0.6rem; overflow: hidden;
  clip-path: polygon(4% 0, 96% 0, 100% 14%, 100% 86%, 96% 100%, 4% 100%, 0 86%, 0 14%);
  background:
    radial-gradient(circle at 12% 40%, rgba(103,232,255,0.14), transparent 34%),
    radial-gradient(circle at 88% 40%, rgba(255,138,138,0.16), transparent 34%),
    linear-gradient(115deg, rgba(2,15,42,0.94) 0%, rgba(3,7,24,0.97) 48%, rgba(24,4,25,0.94) 100%);
}
.tswb-scoreboard::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; padding: 2px; clip-path: inherit;
  background: linear-gradient(90deg, #67e8ff, rgba(103,232,255,0.15) 38%, rgba(255,138,138,0.15) 62%, #ff8a8a);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.tswb-score-side { position: relative; z-index: 2; text-align: center; }
.tswb-score-name { font-size: 0.56rem; color: #67e8ff; text-transform: uppercase; font-weight: 900; letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tswb-score-side.right .tswb-score-name { color: #ff8a8a; }
.tswb-score-num {
  margin-top: 0.1rem; font-family: 'Source Serif 4', serif; font-weight: 900; line-height: 0.8;
  font-size: clamp(1.5rem, 8vw, 1.9rem); text-shadow: 0 3px 8px rgba(0,0,0,0.55);
}
.tswb-score-center { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.tswb-first-to { font-size: 0.44rem; color: #c7c1d9; text-transform: uppercase; letter-spacing: 0.1em; text-align: center; margin-bottom: 0.2rem; }

.tswb-scoreboard-vs {
  position: relative; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  color: #fff; font-size: 0.62rem; font-weight: 900; text-shadow: 0 0 6px rgba(255,255,255,0.5);
  background: radial-gradient(circle, #171134 0%, #050714 62%, #000 100%);
  box-shadow: 0 0 10px rgba(103,232,255,0.4), 0 0 12px rgba(255,138,138,0.3);
}
.tswb-scoreboard-vs::before {
  content: ''; position: absolute; inset: -5px; border-radius: 50%; padding: 2px;
  background: conic-gradient(from 90deg, #ff8a8a, transparent 25%, #67e8ff, transparent 75%, #ff8a8a);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.tswb-vs-energy { position: absolute; top: 50%; width: 22px; height: 2px; transform: translateY(-50%); opacity: 0.85; pointer-events: none; }
.tswb-vs-energy.left { right: 100%; background: linear-gradient(90deg, transparent, #67e8ff); box-shadow: 0 0 6px #67e8ff; }
.tswb-vs-energy.right { left: 100%; background: linear-gradient(90deg, #ff8a8a, transparent); box-shadow: 0 0 6px #ff8a8a; }

/* ============================
   OPPONENT HAND FAN — face-down cards at the very top of the match
   screen. The count itself (4/3/2/1) is the real, live length of
   m.oppHand, not a separate decorative track - it drops for real as
   they play. Card-back is TSW's own design, never the real crest.
============================ */
.tswb-opp-hand-fan { display: flex; justify-content: center; align-items: flex-end; min-height: 78px; margin: 0.4rem 0 0.5rem; }
.tswb-cardback {
  position: relative; width: 50px; aspect-ratio: 0.7; margin-left: -16px;
  border-radius: 6px; border: 2px solid #d4c44a;
  background: linear-gradient(150deg, #141c6a, #060912 72%);
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
.tswb-cardback:first-child { margin-left: 0; }
.tswb-cardback:nth-child(odd) { transform: rotate(-5deg) translateY(3px); }
.tswb-cardback:nth-child(even) { transform: rotate(5deg) translateY(-2px); }
.tswb-cardback-inner {
  position: absolute; inset: 3px; border-radius: 4px; border: 1px solid rgba(212,196,74,0.5);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem;
  background: repeating-linear-gradient(135deg, transparent 0 9px, rgba(255,255,255,0.03) 9px 10px);
}
.tswb-cardback-emblem { width: 18px; height: 18px; color: #d4c44a; }
.tswb-cardback-emblem svg { width: 100%; height: 100%; }
.tswb-cardback-word { font-family: 'Source Serif 4', serif; font-weight: 900; font-size: 0.5rem; color: #d4c44a; letter-spacing: 0.06em; }

.tswb-match-label { text-align: center; color: #67e8ff; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }

/* ============================
   STAT SELECTOR — replaces the old giant round banner. The
   requested stat(s) for this round glow gold and grow; everything
   else stays muted grey. Communicates the round on its own.
============================ */
.tswb-stat-selector {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap;
  width: fit-content; max-width: calc(100% - 1.2rem); margin: 0.4rem auto 0.3rem; padding: 0.5rem 1rem;
  border: 1px solid rgba(212,196,74,0.4); border-radius: 999px;
  background: linear-gradient(180deg, rgba(20,28,106,0.5), rgba(3,7,24,0.6));
}
.tswb-stat-pill {
  display: flex; align-items: center; gap: 0.22rem; color: #6b7280;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.02em;
  transition: color 0.2s ease, font-size 0.2s ease;
}
.tswb-stat-pill.active { color: #ffd63d; font-size: 0.92rem; text-shadow: 0 0 8px rgba(255,214,61,0.5); }
.tswb-stat-pill-icon { width: 13px; height: 13px; color: #ffd63d; filter: drop-shadow(0 0 4px rgba(255,214,61,0.6)); flex-shrink: 0; }
.tswb-stat-pill-icon svg { width: 100%; height: 100%; }

.tswb-instruction-line { text-align: center; color: #a9adda; font-size: 0.7rem; margin: 0.1rem 0 0.7rem; }

/* ============================================================
   OPPONENT REVEAL FLIGHT — the face-down card that lifts out of
   the fan above and flips to reveal their pick, right before the
   real side-by-side reveal renders. Classic two-face flip: both
   faces are always in the DOM, backface-visibility hides whichever
   one currently faces away, so nothing needs to swap mid-animation.
   ============================================================ */
.tswb-opp-flip { position: fixed; z-index: 9999; pointer-events: none; perspective: 800px; }
.tswb-opp-flip-inner {
  position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transition: transform 0.38s ease;
}
.tswb-opp-flip-inner.flipped { transform: rotateY(180deg); }
.tswb-opp-flip-face { position: absolute; inset: 0; backface-visibility: hidden; }
.tswb-opp-flip-face.front { transform: rotateY(180deg); }
.tswb-opp-flip-face.front .tswb-card { width: 100%; }
.tswb-opp-flip-face .tswb-cardback { width: 100%; height: 100%; margin: 0; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .tswb-opp-flip-inner { transition: none; }
}

/* ============================================================
   PRE-SELECTION FIELD — two drop zones either side of a VS node.
   Neither card is visible here; the local pick renders into the
   "mine" zone the instant it's chosen, the opponent zone stays in
   its waiting state until the round actually resolves. The label
   is a hexagon tab on the zone's own top border, kept as a SIBLING
   of the clipped dropzone (same reasoning as the round tab above)
   rather than a child poking out above it.
   ============================================================ */
.tswb-field { display: grid; grid-template-columns: minmax(0,1fr) 34px minmax(0,1fr); gap: 0.4rem; align-items: center; margin-bottom: 0.5rem; }
.tswb-dropzone-wrap {
  --zone: #67e8ff; --zone-rgb: 103,232,255;
  position: relative;
}
.tswb-dropzone-wrap.theirs { --zone: #ff8a8a; --zone-rgb: 255,138,138; }
.tswb-dropzone {
  position: relative; min-height: 88px; display: grid; place-items: center; overflow: visible; padding: 0.4rem;
  clip-path: polygon(9% 0, 91% 0, 100% 7%, 100% 93%, 91% 100%, 9% 100%, 0 93%, 0 7%);
  border: 2px solid var(--zone);
  background:
    radial-gradient(circle at 50% 50%, rgba(var(--zone-rgb),0.1), transparent 45%),
    repeating-linear-gradient(135deg, transparent 0 30px, rgba(var(--zone-rgb),0.05) 31px 33px),
    linear-gradient(150deg, rgba(var(--zone-rgb),0.12), rgba(2,7,25,0.94));
  box-shadow: 0 0 10px rgba(var(--zone-rgb),0.25), inset 0 0 14px rgba(var(--zone-rgb),0.08);
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.tswb-dropzone.drag-over { filter: brightness(1.2); box-shadow: 0 0 20px rgba(var(--zone-rgb),0.6), inset 0 0 22px rgba(var(--zone-rgb),0.18); }
.tswb-dropzone.filled { padding: 0.3rem; }
.tswb-dropzone.duo { display: flex; align-items: center; justify-content: center; gap: 0.3rem; }
.tswb-dropzone-wrap .tswb-dropzone-label {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%); z-index: 3;
  min-width: 0; max-width: calc(100% - 10px); padding: 0.22rem 0.45rem;
  clip-path: polygon(6% 0, 94% 0, 100% 50%, 94% 100%, 6% 100%, 0 50%);
  border: 1px solid var(--zone); color: var(--zone); background: #04081a;
  font-size: 0.48rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.01em;
  text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tswb-dropzone-empty { text-align: center; position: relative; z-index: 2; }
.tswb-dropzone-icon { width: 20px; height: 20px; margin: 0 auto; color: var(--zone); filter: drop-shadow(0 0 4px rgba(var(--zone-rgb),0.5)); }
.tswb-dropzone-icon svg { width: 100%; height: 100%; }
.tswb-dropzone-title { margin-top: 0.28rem; font-size: 0.56rem; font-weight: 900; letter-spacing: 0.01em; }
.tswb-dropzone-copy { display: none; } /* the tiny footprint doesn't have room for this now the icon+title already say it */
.tswb-dropzone .tswb-card { width: 100%; max-width: 220px; pointer-events: none; }
.tswb-dropzone-waiting-pulse { animation: tswbWaitPulse 1.4s ease-in-out infinite; }
@keyframes tswbWaitPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.tswb-vs-node {
  position: relative; z-index: 4; width: 30px; height: 30px; margin: auto; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, #181035, #050717 65%);
  color: #fff; font-size: 0.56rem; font-weight: 900; text-shadow: 0 0 6px #fff;
}
.tswb-vs-node::before, .tswb-vs-node::after { content: ''; position: absolute; border-radius: 50%; border: 1px solid rgba(94,56,255,0.35); }
.tswb-vs-node::before { inset: -6px; }
.tswb-vs-node::after { inset: -12px; border-color: rgba(103,232,255,0.28); border-right-color: rgba(255,138,138,0.32); border-bottom-color: rgba(255,138,138,0.32); }

/* ============================
   HAND — compact footballer cards in a loose row (no stat tiles),
   a support card flanking each side, and one shared stat matrix
   underneath showing every remaining player's trained stats side
   by side. Card content itself is untouched shared
   tswbCardHtml()/tswbSupportCardHtml() markup - only the
   surrounding layout is new.
============================ */
.tswb-hand-title {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  margin: 1.6rem 0 0.7rem; color: #d4c44a; font-size: 0.85rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.02em;
}
.tswb-hand-title::before, .tswb-hand-title::after { content: ''; flex: 1; max-width: 60px; height: 1px; background: linear-gradient(90deg, transparent, #d4c44a); }
.tswb-hand-title::after { background: linear-gradient(90deg, #d4c44a, transparent); }

.tswb-hand-toprow {
  display: grid;
  grid-template-columns: var(--tswb-side-w) var(--tswb-label-w) repeat(var(--tswb-cols, 4), var(--tswb-card-w)) var(--tswb-side-w);
  justify-content: center;
  align-items: end; gap: 0.2rem;
}
.tswb-hand-side { display: flex; flex-direction: column; gap: 0.3rem; align-self: start; }
.tswb-hand-side .tswb-support-card { transform: translateY(-6px) rotate(-4deg); }
.tswb-hand-side.right .tswb-support-card { transform: translateY(-6px) rotate(4deg); }
.tswb-hand-label-spacer { min-width: 0; }

.tswb-hand-card {
  position: relative; min-width: 0; padding: 0; border: 0; background: transparent; cursor: pointer;
  transform-origin: center bottom; user-select: none;
  transition: transform 0.22s ease, filter 0.22s ease;
}
.tswb-hand-card .tswb-card { width: 100%; cursor: pointer; }
.tswb-hand-card.selected {
  z-index: 10; transform: translateY(-10px) scale(1.08) !important;
  filter: drop-shadow(0 0 12px rgba(212,196,74,0.65));
}
.tswb-hand-card.tswb-hand-flight { transition: none; } /* JS drives this one frame-by-frame during flight */

@media (prefers-reduced-motion: reduce) {
  .tswb-hand-card { transition: none; }
}

/* ============================
   SHARED STAT MATRIX — one row per stat, one column per remaining
   footballer, sitting directly under the hand. Every row (and the
   hand row above it) share the exact same grid template - a
   leading side-column + label-column width, then --tswb-cols FIXED-
   width data columns (never minmax/1fr - flexing to fill whatever
   space is left is exactly what made cards balloon in later rounds
   as the hand thinned out) - so a card always sits directly above
   its own column, and stays the same size all match, win or lose.
   The requested round stat(s) glow gold across their whole row; the
   selected card's whole column glows gold too.
============================ */
.tswb-stat-matrix {
  width: fit-content; max-width: 100%; margin: 0.4rem auto 0; overflow: hidden; border-radius: 6px;
  border: 1px solid rgba(96,121,190,0.4);
  background: linear-gradient(180deg, rgba(3,11,32,0.96), rgba(2,8,23,0.98));
}
.tswb-stat-row {
  display: grid;
  grid-template-columns: var(--tswb-side-w) var(--tswb-label-w) repeat(var(--tswb-cols, 4), var(--tswb-card-w)) var(--tswb-side-w);
  min-height: 32px; border-bottom: 1px solid rgba(116,139,202,0.26);
}
.tswb-stat-row:last-child { border-bottom: 0; }
.tswb-stat-row-spacer { min-width: 0; }
.tswb-stat-label, .tswb-stat-cell { display: flex; align-items: center; justify-content: center; }
.tswb-stat-label {
  justify-content: center; gap: 0; padding: 0 0.06rem;
  color: rgba(255,255,255,0.84); font-size: 0.5rem; font-weight: 900;
  overflow: hidden; white-space: nowrap;
}
/* Icon is a nice-to-have that costs real width the label column can't
   spare on a narrow phone - text alone ("SPE" etc) already says what's
   needed, so it only shows once there's room to spare (see the
   min-width breakpoint below). */
.tswb-stat-label-icon { display: none; }
.tswb-stat-cell {
  position: relative; color: rgba(255,255,255,0.82);
  font-family: 'Source Serif 4', serif; font-size: 0.84rem; font-weight: 900;
  border-left: 1px solid rgba(116,139,202,0.24);
  transition: color 0.18s ease, background 0.18s ease, text-shadow 0.18s ease;
}

.tswb-stat-row.requested {
  background: linear-gradient(90deg, rgba(23,103,45,0.6), rgba(13,67,36,0.55), rgba(5,32,24,0.45));
  box-shadow: inset 0 0 14px rgba(54,255,115,0.08);
}
.tswb-stat-row.requested .tswb-stat-label { color: #ffd63d; text-shadow: 0 0 8px rgba(255,214,61,0.35); }
.tswb-stat-row.requested .tswb-stat-label-icon { color: #fff38a; filter: drop-shadow(0 0 5px rgba(255,214,61,0.5)); }
.tswb-stat-row.requested .tswb-stat-cell { color: #f5f6ef; text-shadow: 0 0 7px rgba(61,255,125,0.2); }

.tswb-stat-cell.selected {
  background: linear-gradient(180deg, rgba(255,211,47,0.14), rgba(255,211,47,0.04));
  color: #ffe86b;
  box-shadow: inset 1px 0 rgba(255,211,47,0.35), inset -1px 0 rgba(255,211,47,0.35);
}
.tswb-stat-row.requested .tswb-stat-cell.selected { color: #ffe15d; text-shadow: 0 0 10px rgba(255,213,66,0.45); }

/* ============================================================
   ROUND POPUP — replaces the old side-by-side reveal screen. Both
   cards stay exactly where they already are (in their own drop
   zones - nothing moves, nothing scrolls), this is just a small
   overlay announcing the outcome. A tap anywhere on it advances to
   the next round; there's no separate auto-timer.
   ============================================================ */
.tswb-round-popup-overlay {
  position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center;
  padding: 1.2rem; background: rgba(2,6,20,0.55); cursor: pointer;
  animation: tswbPopupFadeIn 0.18s ease;
}
@keyframes tswbPopupFadeIn { from { opacity: 0; } to { opacity: 1; } }
.tswb-round-popup {
  width: min(100%, 300px); text-align: center; padding: 1.1rem 1.2rem;
  border-radius: 12px; background: linear-gradient(150deg, #141c6a, #0a0e35);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  animation: tswbPopupPop 0.22s cubic-bezier(0.22,1,0.36,1);
}
@keyframes tswbPopupPop { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.tswb-round-popup.win { border: 2px solid #48dd92; }
.tswb-round-popup.loss { border: 2px solid #ff6978; }
.tswb-round-popup-title { font-family: 'Source Serif 4', serif; font-weight: 900; font-size: 1.3rem; }
.tswb-round-popup.win .tswb-round-popup-title { color: #48dd92; }
.tswb-round-popup.loss .tswb-round-popup-title { color: #ff6978; }
.tswb-round-popup-sub { margin-top: 0.3rem; color: #e4e6f5; font-size: 0.78rem; font-weight: 700; }
.tswb-round-popup-note { margin-top: 0.4rem; color: #a9adda; font-size: 0.62rem; }
.tswb-round-popup-tap {
  margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px solid rgba(255,255,255,0.12);
  color: #d4c44a; font-size: 0.66rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em;
}

@media (prefers-reduced-motion: reduce) {
  .tswb-round-popup-overlay, .tswb-round-popup { animation: none; }
}

/* ============================
   MATCH FINISH POPUP — same overlay/card language as the round
   popup, sized for a fuller reward breakdown (and, unlike the round
   popup, only the CONTINUE button dismisses it - there's more here
   worth actually reading than a quick round result).
============================ */
.tswb-match-finish-overlay { cursor: default; }
.tswb-match-finish-popup { width: min(100%, 340px); max-height: 85vh; overflow-y: auto; }
.tswb-match-finish-title { font-family: 'Source Serif 4', serif; font-weight: 900; font-size: 1.4rem; }
.tswb-match-finish-title.win { color: #48dd92; }
.tswb-match-finish-title.loss { color: #ff6978; }
.tswb-match-finish-score { margin-top: 0.3rem; font-family: 'Source Serif 4', serif; font-weight: 900; font-size: 1.8rem; color: #fff; }
.tswb-match-finish-rewards { margin-top: 0.5rem; color: #d4c44a; font-weight: 700; font-size: 0.8rem; }
.tswb-match-finish-superstar { margin-top: 0.6rem; color: #48dd92; font-weight: 900; font-size: 0.86rem; }
.tswb-match-finish-superstar span { display: block; margin-top: 0.15rem; font-size: 0.66rem; font-weight: 700; color: #a9adda; }
.tswb-match-finish-popup #tswbContinueBtn { margin-top: 0.9rem; width: 100%; }
.tswb-match-finish-popup #tswbCardXpResults { text-align: left; }

/* ============================
   OPPONENT'S OWN ZONE ONCE FILLED — same compact card the hand
   uses, sized to the zone rather than the old full-size treatment.
============================ */
.tswb-dropzone .tswb-card-handstatless { width: var(--tswb-inhand-card-w, 100%); max-width: 100%; }

/* ============================
   DRAFT BOARD / REWARD TILES
============================ */
.tswb-tile-grid-6x6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.3rem; max-width: 480px; width: 100%; margin: 0 auto; overflow-x: hidden; }
.tswb-tile { aspect-ratio: 1; min-width: 0; background: #141c6a; border: 2px solid #2a3390; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; text-align: center; padding: 0.2rem; overflow: hidden; }
.tswb-tile:active { transform: scale(0.95); }
.tswb-tile.revealed { cursor: default; background: linear-gradient(160deg,#2a2410,#141c6a); border-color: #d4c44a; }
.tswb-tile .q { font-family: 'Source Serif 4', serif; font-size: 1.1rem; color: #4a5090; }
.tswb-tile .reward-val { font-family: 'Source Serif 4', serif; font-weight: 900; font-size: 0.66rem; color: #d4c44a; }
.tswb-tile .reward-label { font-size: 0.36rem; color: #fff; margin-top: 0.1rem; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }

/* Fly-to-front reveal — the picked card appears large and centred,
   then auto-dismisses on its own rather than needing another tap */
.tswb-front-reveal-overlay {
  position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center;
  background: rgba(3,9,25,0.85); pointer-events: none;
}
.tswb-front-reveal-overlay.visible { display: flex; }
.tswb-front-reveal-card {
  width: 200px; padding: 1.2rem 1rem; border-radius: 14px; text-align: center;
  border: 3px solid #8a8a8a; background: linear-gradient(160deg,#5a5a5a 0%,#2a2a2a 55%,#111 100%);
  animation: tswbFrontRevealPop 0.45s cubic-bezier(.2,1.4,.4,1);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
@keyframes tswbFrontRevealPop {
  0% { transform: scale(0.4) translateY(40px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.tswb-front-reveal-special { font-size: 0.68rem; font-weight: 900; color: #d4c44a; letter-spacing: 0.06em; margin-bottom: 0.4rem; }
.tswb-front-reveal-card .ovr { font-family: 'Source Serif 4', serif; font-weight: 900; font-size: 2.2rem; }
.tswb-front-reveal-card .pos { font-size: 0.75rem; font-weight: 700; color: rgba(255,255,255,0.8); margin-bottom: 0.6rem; }
.tswb-front-reveal-card .name { font-size: 1.1rem; font-weight: 900; margin-bottom: 0.2rem; }
.tswb-front-reveal-card .rarity-label { font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.6rem; }
.tswb-front-reveal-status { font-size: 0.75rem; font-weight: 800; color: #48dd92; }

/* Rarity colours for the revealed board tiles and the front-reveal card,
   matching the same palette used throughout the rest of the game */
.tswb-tile.rarity-academy, .tswb-front-reveal-card.rarity-academy { border-color: #c7c7c7; background: linear-gradient(160deg,#8a8a8a 0%,#2a2a2a 55%,#111 100%); }
.tswb-tile.rarity-prospect, .tswb-front-reveal-card.rarity-prospect { border-color: #6ee89a; background: linear-gradient(160deg,#4ade80 0%,#14532d 55%,#052e16 100%); }
.tswb-tile.rarity-first-team, .tswb-front-reveal-card.rarity-first-team { border-color: #8fc0f5; background: linear-gradient(160deg,#6fa8f5 0%,#1a3a6b 55%,#0a1730 100%); }
.tswb-tile.rarity-star, .tswb-front-reveal-card.rarity-star { border-color: #8ea3f0; background: linear-gradient(160deg,#5c78e8 0%,#1c2a70 55%,#0a1030 100%); }
.tswb-tile.rarity-elite, .tswb-front-reveal-card.rarity-elite { border-color: #d6a8fc; background: linear-gradient(160deg,#c084fc 0%,#5a1f8a 55%,#1a0a30 100%); }
.tswb-tile.rarity-world-class, .tswb-front-reveal-card.rarity-world-class { border-color: #fdb073; background: linear-gradient(160deg,#fb923c 0%,#7c2d12 55%,#2a0d04 100%); }
.tswb-tile.rarity-icon, .tswb-front-reveal-card.rarity-icon { border-color: #f7e29c; background: linear-gradient(160deg,#f0dc7a 0%,#8a6f00 55%,#2a2000 100%); }
.tswb-tile.rarity-legend, .tswb-front-reveal-card.rarity-legend { border-color: #ff9d9d; background: linear-gradient(160deg,#f87171 0%,#7f1d1d 55%,#2a0808 100%); }
.tswb-tile.rarity-immortal, .tswb-front-reveal-card.rarity-immortal { border-color: #f3f4f6; background: linear-gradient(160deg,#f3f4f6 0%,#4b5563 55%,#0a0a0c 100%); }

/* ============================
   ROAD TO GLORY PATH
============================ */
.tswb-reward-stage { display: grid; grid-template-columns: auto 1fr auto; gap: 0.8rem; align-items: center; padding: 0.7rem 0.8rem; background: #141c6a; border: 1px solid #2a3390; border-radius: 8px; margin-bottom: 0.5rem; }
.tswb-reward-stage.current { border-color: #d4c44a; }
.tswb-reward-stage .rating { font-family: 'Source Serif 4', serif; font-weight: 900; font-size: 1.2rem; color: #d4c44a; }
.tswb-reward-stage .label { font-weight: 700; font-size: 0.8rem; }
.tswb-progress-bar { height: 5px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; margin-top: 0.3rem; }
.tswb-progress-fill { height: 100%; background: #d4c44a; }
.tswb-reward-stage .status { font-size: 0.65rem; color: #a9adda; text-align: right; }

/* ============================
   SURVIVOR STATUS
============================ */
.tswb-status-row { display: flex; gap: 0.6rem; justify-content: center; margin-bottom: 1rem; flex-wrap: wrap; }
.tswb-status-box { background: #141c6a; border: 1px solid #2a3390; border-radius: 8px; padding: 0.6rem 0.9rem; text-align: center; }
.tswb-status-box .l { font-size: 0.58rem; color: #a9adda; text-transform: uppercase; }
.tswb-status-box .v { font-family: 'Source Serif 4', serif; font-weight: 900; font-size: 1.3rem; color: #d4c44a; }

/* ============================
   RESPONSIVE — mobile first
============================ */
@media (max-width: 640px) {
  .tswb-card-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   CARD LEVEL / XP SYSTEM — compact in-card indicators, the
   card-detail modal, and the after-match XP/level-up UI.
   ============================================================ */
.tswb-card .level-badge {
  position: absolute; top: 0.4rem; right: -0.05rem; background: rgba(0,0,0,0.55); color: #fff;
  font-size: 0.52rem; font-weight: 800; padding: 0.2rem 0.55rem 0.2rem 0.4rem; z-index: 2;
  clip-path: polygon(15% 0, 100% 0, 100% 100%, 15% 100%, 0 50%);
}

/* Card detail modal */
.tswb-modal-overlay { position: fixed; inset: 0; background: rgba(3,9,25,.85); display: none; align-items: center; justify-content: center; padding: 1.2rem; z-index: 200; }
.tswb-modal-overlay.visible { display: flex; }
.tswb-modal-panel { position: relative; width: 100%; max-width: 340px; max-height: 85vh; overflow-y: auto; background: #0e1555; border: 1px solid #2a3390; border-radius: 14px; padding: 1.4rem 1.2rem; }
.tswb-modal-close { position: absolute; top: 0.6rem; right: 0.6rem; background: none; border: none; color: #a9adda; font-size: 1rem; cursor: pointer; }
.tswb-detail-name { text-align: center; font-family: 'Source Serif 4', serif; font-weight: 900; font-size: 1.2rem; }
.tswb-detail-rarity { text-align: center; color: #d4c44a; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.8rem; }
.tswb-detail-level { text-align: center; font-weight: 800; font-size: 0.85rem; margin-bottom: 0.4rem; }
.tswb-detail-xp-track { height: 10px; background: rgba(255,255,255,0.1); border-radius: 6px; overflow: hidden; }
.tswb-detail-xp-fill { height: 100%; background: linear-gradient(90deg,#d4c44a,#f0dc7a); transition: width 0.6s ease; }
.tswb-detail-xp-label { text-align: center; font-size: 0.68rem; color: #a9adda; margin: 0.3rem 0 1rem; }
.tswb-detail-stats { display: grid; gap: 0.4rem; }
.tswb-detail-stat { display: flex; justify-content: space-between; background: #141c6a; padding: 0.5rem 0.8rem; border-radius: 6px; font-weight: 700; font-size: 0.78rem; }

/* Deck-context action buttons on the card detail modal */
.tswb-detail-actions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }
.tswb-detail-actions .tswb-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* Training modal */
.tswb-train-steps { display: flex; gap: 0.4rem; margin-bottom: 1rem; }
.tswb-train-step-label { flex: 1; text-align: center; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.04em; padding: 0.4rem; border-radius: 6px; background: #141c6a; color: #6b7280; }
.tswb-train-step-label.active { background: #d4c44a; color: #0e1555; }
.tswb-train-feeder-grid { grid-template-columns: repeat(4, 1fr); gap: 0.4rem; max-height: 40vh; overflow-y: auto; padding-right: 2px; }
.tswb-train-feeder-card { aspect-ratio: 3/2.2; padding: 0.3rem; }
.tswb-train-feeder-card .tswb-support-card-name { font-size: 0.56rem; }
.tswb-train-feeder-card .tswb-support-card-rarity { font-size: 0.5rem; margin-top: 0; }
.tswb-train-target { border: 2px solid #2a3390; border-radius: 10px; padding: 0.9rem; text-align: center; margin-bottom: 0.5rem; }
.tswb-train-target-name { font-weight: 900; font-size: 1rem; margin-bottom: 0.3rem; }
.tswb-train-target-level { font-weight: 800; font-size: 0.85rem; color: #a9adda; }
.tswb-train-level-up { color: #48dd92; font-size: 1.1rem; }
.tswb-train-xp-preview { font-size: 0.68rem; color: #d4c44a; margin-top: 0.3rem; }
.tswb-train-stat-changes { display: grid; gap: 0.25rem; margin-top: 0.7rem; text-align: left; }
.tswb-train-stat { display: flex; justify-content: space-between; background: #0e1450; padding: 0.35rem 0.6rem; border-radius: 5px; font-size: 0.68rem; font-weight: 700; }
.tswb-train-stat b { color: #48dd92; }
.tswb-train-total { text-align: center; font-size: 0.75rem; color: #a9adda; margin: 0.6rem 0; }
.tswb-train-total b { color: #d4c44a; }
#tswbTrainConfirmBtn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* After-match card XP results */
.tswb-cardxp-row { background: #141c6a; border-radius: 8px; padding: 0.7rem 0.9rem; margin-top: 0.6rem; }
.tswb-cardxp-name { font-weight: 800; font-size: 0.82rem; margin-bottom: 0.4rem; }
.tswb-cardxp-plus { color: #d4c44a; font-weight: 800; font-size: 0.72rem; margin-left: 0.3rem; }
.tswb-xp-bar-track { height: 8px; background: rgba(255,255,255,0.12); border-radius: 5px; overflow: hidden; }
.tswb-xp-bar-fill { height: 100%; background: linear-gradient(90deg,#d4c44a,#f0dc7a); transition: width 0.9s ease; }
.tswb-cardxp-label { font-size: 0.66rem; color: #a9adda; margin-top: 0.3rem; }
.tswb-levelup-banner { text-align: center; font-family: 'Source Serif 4', serif; font-weight: 900; font-size: 1rem; color: #48dd92; margin-top: 0.5rem; animation: tswbLevelUpPop 0.4s cubic-bezier(.34,1.56,.64,1); }
@keyframes tswbLevelUpPop { 0% { transform: scale(0.7); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.tswb-stat-deltas { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.3rem; }
.tswb-stat-deltas span { background: rgba(72,221,146,0.15); color: #48dd92; font-size: 0.62rem; font-weight: 800; padding: 0.1rem 0.4rem; border-radius: 4px; }
.tswb-topeight-update { text-align: center; background: #1a7a3c; color: #fff; font-weight: 800; font-size: 0.78rem; padding: 0.7rem; border-radius: 8px; margin-top: 0.6rem; }
.tswb-match-tierup-banner { text-align: center; font-family: 'Source Serif 4', serif; font-weight: 900; font-size: 1.05rem; color: #d4c44a; margin-top: 0.4rem; animation: tswbLevelUpPop 0.4s cubic-bezier(.34,1.56,.64,1); }

/* ============================================================
   TIER PROGRESS BAR — shown above the deck, and the "tier up"
   celebration when a match's card levelling pushes the deck's
   power into the next rarity bracket.
   ============================================================ */
/* ============================================================
   TIER PROGRESS BAR — a genuinely thin, wide, single horizontal
   row spanning almost the full page width (breaks out of the
   panel's own padding, matching its full-bleed edge), with a
   real, clearly-visible progress bar rather than a thin sliver.
   ============================================================ */
.tswb-tierbar {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 1.2rem;
  width: 100%;
  margin-bottom: 0.8rem; padding: 0.65rem 1.2rem;
  border-radius: 10px;
  max-height: 84px;
  background:
    radial-gradient(circle at 10% 30%, color-mix(in srgb, var(--tb-primary) 20%, transparent), transparent 42%),
    linear-gradient(180deg, var(--tb-bg-hi), var(--tb-bg-lo));
  border: 2px solid color-mix(in srgb, var(--tb-primary) 55%, transparent);
  box-shadow:
    0 0 14px color-mix(in srgb, var(--tb-primary) 30%, transparent),
    inset 0 0 0 1px rgba(255,255,255,0.05),
    inset 0 -8px 16px rgba(0,0,0,0.3);
}
.tswb-tierbar::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.4;
  background: repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,255,255,0.025) 18px 20px);
}
.tswb-tb-left, .tswb-tb-center, .tswb-tb-right { position: relative; z-index: 1; min-width: 0; }

.tswb-tb-left { flex: 0 0 auto; line-height: 1.05; }
.tswb-tb-eyebrow { font-size: 0.55rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.65); white-space: nowrap; }
.tswb-tb-tiername {
  font-family: 'Source Serif 4', serif; font-weight: 900; letter-spacing: -0.01em; line-height: 1.05;
  font-size: clamp(0.95rem, 3.6vw, 1.4rem); color: var(--tb-highlight); white-space: nowrap;
  text-shadow: 0 0 8px color-mix(in srgb, var(--tb-primary) 50%, transparent);
}

.tswb-tb-center { flex: 1 1 auto; }
.tswb-tb-track {
  position: relative; height: 24px; border-radius: 12px; overflow: visible;
  background: repeating-linear-gradient(-45deg, rgba(255,255,255,0.02) 0 8px, rgba(255,255,255,0.05) 8px 12px), #0c0a18;
  border: 2px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.4), 0 0 10px color-mix(in srgb, var(--tb-primary) 35%, transparent);
}
.tswb-tb-fill {
  height: 100%; border-radius: 10px 6px 6px 10px; position: relative;
  background: linear-gradient(90deg, var(--tb-secondary), var(--tb-primary) 55%, var(--tb-highlight));
  box-shadow: 0 0 10px color-mix(in srgb, var(--tb-primary) 45%, transparent), inset 0 1px 0 rgba(255,255,255,0.35);
  transition: width 0.9s cubic-bezier(.2,.75,.2,1);
  display: flex; align-items: center; justify-content: flex-end;
}
.tswb-tb-fill-pct {
  font-size: 0.62rem; font-weight: 900; color: #06111d; padding-right: 0.4rem; white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
}
.tswb-tb-current-marker, .tswb-tb-next-marker {
  position: absolute; top: -7px; width: 0; height: 0; transform: translateX(-50%);
  border-left: 5px solid transparent; border-right: 5px solid transparent;
}
.tswb-tb-current-marker { border-top: 9px solid #fff; filter: drop-shadow(0 0 3px var(--tb-primary)); transition: left 0.9s cubic-bezier(.2,.75,.2,1); }
.tswb-tb-next-marker { left: 100%; border-top: 9px solid #f7d154; }

.tswb-tb-right { flex: 0 0 auto; text-align: right; line-height: 1.15; }
.tswb-tb-power-value {
  font-family: 'Source Serif 4', serif; font-weight: 900; letter-spacing: -0.01em; color: #fff; white-space: nowrap;
  font-size: clamp(0.95rem, 3.6vw, 1.4rem); text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.tswb-tb-power-label { font-size: 0.52rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.tswb-tb-percent { font-size: 0.6rem; font-weight: 700; color: var(--tb-highlight); white-space: nowrap; margin-top: 0.1rem; }

/* Tier-up celebration — a brief inline flash, not an overlay that
   would fight the strip's own tight height */
.tswb-tierbar.tswb-tier-just-changed { animation: tswbTierGlowPulse 1.6s ease-out; }
.tswb-tierup-banner {
  position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  background: rgba(5,4,10,0.9); font-family: 'Source Serif 4', serif; font-weight: 900;
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.8);
  animation: tswbTierUpFade 1.8s ease-out forwards;
}
.tswb-tierup-banner span { color: var(--tb-highlight); text-shadow: 0 0 10px var(--tb-primary); }
@keyframes tswbTierGlowPulse { 0% { box-shadow: 0 0 28px color-mix(in srgb, var(--tb-primary) 75%, transparent); } 100% { box-shadow: 0 0 14px color-mix(in srgb, var(--tb-primary) 30%, transparent); } }
@keyframes tswbTierUpFade { 0%, 55% { opacity: 1; } 100% { opacity: 0; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) {
  .tswb-tierbar.tswb-tier-just-changed { animation: none; }
  .tswb-tierup-banner { animation: none; opacity: 0; pointer-events: none; }
}

/* Stays horizontal even on narrow phones — just tightens further,
   never stacks into rows */
@media (max-width: 420px) {
  .tswb-tierbar { padding: 0.5rem 0.7rem; gap: 0.7rem; }
  .tswb-tb-eyebrow { display: none; } /* first thing to go, not the layout shape */
  .tswb-tb-tiername, .tswb-tb-power-value { font-size: 0.85rem; }
  .tswb-tb-percent { font-size: 0.52rem; }
  .tswb-tb-track { height: 18px; }
  .tswb-tb-fill-pct { font-size: 0.55rem; }
}

/* ============================================================
   SUPPORT CARDS — deck picker (2 mandatory slots) and in-round
   activation. Colour-coded by rarity using the same accent
   colours already established for football cards, so a Legend
   support card reads red/gold and an Academy one reads grey,
   consistent with the rest of the game.
   ============================================================ */
.tswb-support-deck-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.5rem; font-size: 0.78rem; font-weight: 800; }
.tswb-support-deck-count-ok { color: #48dd92; font-size: 0.68rem; font-weight: 700; }
.tswb-support-deck-count-bad { color: #ff6978; font-size: 0.68rem; font-weight: 700; }

/* Rarity accent colours, reused from the same palette as the football cards */
.tswb-support-activate-btn.rarity-academy, .tswb-support-armed.rarity-academy, .tswb-support-used-banner.rarity-academy { border-color: #c7c7c7; background: linear-gradient(90deg,#8a8a8a,#c7c7c7); color: #111; }
.tswb-support-activate-btn.rarity-prospect, .tswb-support-armed.rarity-prospect, .tswb-support-used-banner.rarity-prospect { border-color: #6ee89a; background: linear-gradient(90deg,#22c55e,#6ee89a); color: #052e16; }
.tswb-support-activate-btn.rarity-first-team, .tswb-support-armed.rarity-first-team, .tswb-support-used-banner.rarity-first-team { border-color: #8fc0f5; background: linear-gradient(90deg,#4a90e2,#8fc0f5); color: #0a1730; }
.tswb-support-activate-btn.rarity-star, .tswb-support-armed.rarity-star, .tswb-support-used-banner.rarity-star { border-color: #8ea3f0; background: linear-gradient(90deg,#3b5bdb,#8ea3f0); color: #0a1030; }
.tswb-support-activate-btn.rarity-elite, .tswb-support-armed.rarity-elite, .tswb-support-used-banner.rarity-elite { border-color: #d6a8fc; background: linear-gradient(90deg,#a855f7,#d6a8fc); color: #1a0a30; }
.tswb-support-activate-btn.rarity-world-class, .tswb-support-armed.rarity-world-class, .tswb-support-used-banner.rarity-world-class { border-color: #fdb073; background: linear-gradient(90deg,#f97316,#fdb073); color: #2a0d04; }
.tswb-support-activate-btn.rarity-icon, .tswb-support-armed.rarity-icon, .tswb-support-used-banner.rarity-icon { border-color: #f7e29c; background: linear-gradient(90deg,#d4c44a,#f7e29c); color: #2a2000; }
.tswb-support-activate-btn.rarity-legend, .tswb-support-armed.rarity-legend, .tswb-support-used-banner.rarity-legend { border-color: #ff9d9d; background: linear-gradient(90deg,#ef4444,#ff9d9d); color: #2a0808; }
.tswb-support-activate-btn.rarity-immortal, .tswb-support-armed.rarity-immortal, .tswb-support-used-banner.rarity-immortal { border-color: #f3f4f6; background: linear-gradient(90deg,#9ca3af,#f3f4f6); color: #0a0a0c; }

.tswb-support-activate-btn {
  display: block; margin: 0 auto 0.6rem; border: 2px solid transparent;
  font-weight: 900; font-size: 0.75rem; padding: 0.5rem 1.1rem; border-radius: 20px; cursor: pointer;
  animation: tswbSupportPulse 1.6s ease-in-out infinite;
}
@keyframes tswbSupportPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.15); } }
.tswb-support-armed { text-align: center; font-weight: 800; font-size: 0.7rem; margin-bottom: 0.6rem; padding: 0.3rem; border-radius: 8px; }
.tswb-support-inactive { text-align: center; color: #6b7280; font-size: 0.62rem; margin-bottom: 0.6rem; }
.tswb-support-used { text-align: center; color: #6b7280; font-size: 0.62rem; margin-bottom: 0.6rem; text-decoration: line-through; }
.tswb-support-used-banner { text-align: center; font-weight: 800; font-size: 0.75rem; margin-bottom: 0.5rem; padding: 0.35rem; border-radius: 8px; }

/* ============================================================
   SUPPORT CARD — a proper card-shaped component matching the
   football card's visual language (rarity-coloured border and
   gradient, similar proportions), not a small pill chip, so the
   deck genuinely reads as one unit with real space set aside
   for support cards.
   ============================================================ */
.tswb-support-binder-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-top: 0.6rem; }
.tswb-support-card {
  position: relative; aspect-ratio: 3/4; border-radius: 8px; padding: 0.5rem 0.4rem; text-align: center; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem;
  border: 2px solid #8a8a8a; background: linear-gradient(160deg,#5a5a5a 0%,#2a2a2a 55%,#111 100%);
  transition: transform 0.1s ease;
}
.tswb-support-card:active { transform: scale(0.96); }
.tswb-support-card.selected { outline: 3px solid #fff; outline-offset: -3px; }
.tswb-support-card-icon { font-size: 1.6rem; }
.tswb-support-card-name { font-size: 0.68rem; font-weight: 900; color: #fff; line-height: 1.1; }
.tswb-support-card-effect { font-size: 0.5rem; font-weight: 800; color: #ffd63d; letter-spacing: 0.02em; }
.tswb-support-card-type { font-size: 0.5rem; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 0.04em; }
.tswb-support-card-rarity { font-size: 0.48rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; margin-top: 0.15rem; }
.tswb-support-card.empty { background: rgba(255,255,255,0.03); border: 2px dashed rgba(255,255,255,0.2); cursor: default; }
.tswb-support-card.empty:active { transform: none; }
.tswb-support-card-empty-label { font-size: 0.62rem; color: rgba(255,255,255,0.4); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }

/* Rarity colours, same palette as the football cards and the in-round activation UI */
.tswb-support-card.rarity-academy { border-color: #c7c7c7; background: linear-gradient(160deg,#8a8a8a 0%,#2a2a2a 55%,#111 100%); }
.tswb-support-card.rarity-academy .tswb-support-card-rarity { color: #c7c7c7; }
.tswb-support-card.rarity-prospect { border-color: #6ee89a; background: linear-gradient(160deg,#4ade80 0%,#14532d 55%,#052e16 100%); }
.tswb-support-card.rarity-prospect .tswb-support-card-rarity { color: #6ee89a; }
.tswb-support-card.rarity-first-team { border-color: #8fc0f5; background: linear-gradient(160deg,#6fa8f5 0%,#1a3a6b 55%,#0a1730 100%); }
.tswb-support-card.rarity-first-team .tswb-support-card-rarity { color: #8fc0f5; }
.tswb-support-card.rarity-star { border-color: #8ea3f0; background: linear-gradient(160deg,#5c78e8 0%,#1c2a70 55%,#0a1030 100%); }
.tswb-support-card.rarity-star .tswb-support-card-rarity { color: #8ea3f0; }
.tswb-support-card.rarity-elite { border-color: #d6a8fc; background: linear-gradient(160deg,#c084fc 0%,#5a1f8a 55%,#1a0a30 100%); }
.tswb-support-card.rarity-elite .tswb-support-card-rarity { color: #d6a8fc; }
.tswb-support-card.rarity-world-class { border-color: #fdb073; background: linear-gradient(160deg,#fb923c 0%,#7c2d12 55%,#2a0d04 100%); }
.tswb-support-card.rarity-world-class .tswb-support-card-rarity { color: #fdb073; }
.tswb-support-card.rarity-icon { border-color: #f7e29c; background: linear-gradient(160deg,#f0dc7a 0%,#8a6f00 55%,#2a2000 100%); box-shadow: 0 0 10px rgba(212,196,74,0.4); }
.tswb-support-card.rarity-icon .tswb-support-card-rarity { color: #f7e29c; }
.tswb-support-card.rarity-legend { border-color: #ff9d9d; background: linear-gradient(160deg,#f87171 0%,#7f1d1d 55%,#2a0808 100%); box-shadow: 0 0 10px rgba(239,68,68,0.35); }
.tswb-support-card.rarity-legend .tswb-support-card-rarity { color: #ff9d9d; }
.tswb-support-card.rarity-immortal { border-color: #f3f4f6; background: linear-gradient(160deg,#f3f4f6 0%,#4b5563 55%,#0a0a0c 100%); box-shadow: 0 0 14px rgba(229,231,235,0.5); }
.tswb-support-card.rarity-immortal .tswb-support-card-rarity { color: #f3f4f6; }

/* Reveal screen support pull */
.tsw-reveal-support .tsw-rc-support-icon { margin: 0.4rem 0; }

/* Deck-mode toggle (Quick Match Deck / Road to Glory Deck) */
.tswb-deck-mode-toggle { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.tswb-deck-mode-btn { flex: 1; background: #141c6a; border: 2px solid #2a3390; border-radius: 8px; padding: 0.6rem; font-weight: 800; font-size: 0.72rem; color: #a9adda; cursor: pointer; }
.tswb-deck-mode-btn.active { background: #d4c44a; border-color: #d4c44a; color: #0e1555; }
.tswb-tile.tswb-tile-titlematch { background: linear-gradient(160deg,#f0dc7a,#8a6f00); border-color: #f7e29c; }

/* Road to Glory — unified status card (target + bouts + title match) */
.tswb-rtg-status-card {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 0.95rem 1rem 0.85rem; margin-bottom: 0.8rem; border-radius: 18px;
  border: 2px solid transparent;
  background:
    linear-gradient(#080b1d, #080b1d) padding-box,
    linear-gradient(100deg, #ffdb46, #f4ba3e 20%, #d466ff 100%) border-box;
  box-shadow: 0 0 12px rgba(255,198,41,0.18), 0 0 16px rgba(167,65,255,0.12), inset 0 0 0 1px rgba(255,255,255,0.025);
}
.tswb-rtg-status-glow { position: absolute; z-index: -1; width: 160px; height: 160px; border-radius: 50%; filter: blur(38px); opacity: 0.22; pointer-events: none; }
.tswb-rtg-status-glow-l { left: -70px; top: -70px; background: #ffb30e; }
.tswb-rtg-status-glow-r { right: -75px; bottom: -75px; background: #7d1eff; }

.tswb-rtg-status-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.6rem; }
.tswb-rtg-status-label {
  display: flex; align-items: center; gap: 0.3rem; color: #ffd32c;
  font-size: 0.58rem; font-weight: 900; letter-spacing: 0.03em; text-transform: uppercase;
}
.tswb-rtg-status-crown { width: 13px; height: 13px; flex-shrink: 0; filter: drop-shadow(0 0 4px rgba(255,205,34,0.5)); }
.tswb-rtg-status-name { margin-top: 0.3rem; font-family: 'Source Serif 4', serif; font-size: 1.4rem; line-height: 0.95; font-weight: 900; color: #fff; }

.tswb-rtg-status-score { text-align: right; flex-shrink: 0; }
.tswb-rtg-status-score-main { display: flex; align-items: baseline; justify-content: flex-end; gap: 0.15rem; }
.tswb-rtg-status-score-main strong { color: #ffd32c; font-size: 1.5rem; line-height: 0.85; font-weight: 900; text-shadow: 0 0 10px rgba(255,207,39,0.28); }
.tswb-rtg-status-score-main span { color: #f7f7ff; font-size: 0.9rem; font-weight: 800; }
.tswb-rtg-status-score-main small { color: #c7c7d3; font-size: 0.55rem; font-weight: 900; text-transform: uppercase; }
.tswb-rtg-status-remaining { margin-top: 0.3rem; font-size: 0.56rem; font-weight: 700; color: #cfc79a; white-space: nowrap; }

.tswb-rtg-status-progress-panel { margin-top: 0.7rem; padding: 0.55rem 0.6rem 0.35rem; border-radius: 12px; border: 1px solid rgba(213,164,42,0.35); background: rgba(3,6,18,0.5); }
.tswb-rtg-status-progress-row { display: flex; align-items: center; gap: 0.6rem; }
.tswb-rtg-status-track { position: relative; flex: 1; height: 12px; overflow: hidden; border: 2px solid #6a5215; border-radius: 999px; background: #060817; box-shadow: inset 0 0 6px #000; }
.tswb-rtg-status-fill { position: relative; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#f5b000,#ffd42a 65%,#fff0a0); box-shadow: 0 0 8px rgba(255,210,34,0.4); transition: width 0.3s ease; }
.tswb-rtg-status-spark { position: absolute; right: -1px; top: 50%; width: 5px; height: 5px; transform: translateY(-50%); border-radius: 50%; background: #fff; box-shadow: 0 0 5px #fff, 0 0 10px #ffd429; }
.tswb-rtg-status-complete { text-align: right; white-space: nowrap; }
.tswb-rtg-status-complete strong { display: block; color: #ffd32c; font-size: 0.9rem; font-weight: 900; line-height: 1; }
.tswb-rtg-status-complete span { color: #ceced8; font-size: 0.52rem; font-weight: 700; }
.tswb-rtg-status-scale { display: flex; justify-content: space-between; padding: 0.3rem 0.15rem 0; color: #8f909d; font-size: 0.56rem; }

.tswb-rtg-status-lower { display: grid; grid-template-columns: 1fr 1px 1fr; align-items: center; gap: 0.6rem; margin-top: 0.7rem; }
.tswb-rtg-status-divider { width: 1px; height: 72px; background: linear-gradient(transparent, rgba(255,191,31,0.6), transparent); }
.tswb-rtg-status-icon {
  width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 50%;
  background: #070a1c; color: #ffd32c;
}
.tswb-rtg-status-icon svg { width: 17px; height: 17px; }
.tswb-rtg-status-icon-bolt { border: 2px solid #995cff; box-shadow: 0 0 8px rgba(150,75,255,0.35); }
.tswb-rtg-status-icon-trophy { border: 2px solid #ffd32c; box-shadow: 0 0 9px rgba(255,210,36,0.3); }

.tswb-rtg-status-bouts, .tswb-rtg-status-titlematch { display: flex; align-items: center; gap: 0.5rem; }
.tswb-rtg-status-small-title { color: #c5a2ff; font-size: 0.56rem; font-weight: 900; letter-spacing: 0.03em; text-transform: uppercase; }
.tswb-rtg-status-bout-count { margin-top: 0.1rem; display: flex; align-items: baseline; gap: 0.15rem; }
.tswb-rtg-status-bout-count strong { color: #fff; font-size: 1.2rem; line-height: 0.9; font-weight: 900; }
.tswb-rtg-status-bout-count span { color: #d6d5e2; font-size: 0.72rem; font-weight: 800; }
.tswb-rtg-status-next-bout { margin-top: 0.1rem; color: #beb4d8; font-size: 0.56rem; }
.tswb-rtg-status-pips { display: flex; gap: 0.2rem; margin-top: 0.3rem; }
.tswb-rtg-status-pips span { width: 9px; height: 9px; border-radius: 3px; }
.tswb-rtg-status-pips span.active { background: #ffd32c; box-shadow: 0 0 5px rgba(255,204,29,0.6); }
.tswb-rtg-status-pips span.inactive { background: #2a2c3a; }

.tswb-rtg-status-tm-copy { flex: 1; min-width: 0; }
.tswb-rtg-status-tm-head { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.tswb-rtg-status-tm-head strong { color: #ffd32c; font-size: 0.72rem; font-weight: 900; }
.tswb-rtg-status-tm-head span { padding: 0.1rem 0.3rem; color: #ffd32c; border: 1px solid #b78300; border-radius: 6px; font-size: 0.5rem; font-weight: 900; }
.tswb-rtg-status-tm-copy p { margin: 0.25rem 0 0.35rem; color: #e1e1e8; font-size: 0.6rem; line-height: 1.2; }
.tswb-rtg-status-tm-none { color: #8f909d; font-size: 0.56rem; font-weight: 700; }

.tswb-rtg-status-toggle { position: relative; width: 44px; height: 24px; padding: 2px; border: 0; border-radius: 999px; cursor: pointer; background: #333643; transition: background 0.15s ease; }
.tswb-rtg-status-toggle span { display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: margin-left 0.2s ease, box-shadow 0.2s ease; }
.tswb-rtg-status-toggle.active { background: linear-gradient(90deg,#ffb300,#ffd632); box-shadow: 0 0 8px rgba(255,192,21,0.25); }
.tswb-rtg-status-toggle.active span { margin-left: 20px; box-shadow: 0 0 6px rgba(255,255,255,0.6); }

/* Road to Glory — horizontally scrollable path preview of all 9
   Superstar reward cards, ending in the Immortal "event card" */
.tswb-road-path-scroll { display: flex; gap: 0.9rem; overflow-x: auto; padding: 0.3rem 0.2rem 0.8rem; margin-bottom: 0.8rem; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.tswb-road-path-item { flex: 0 0 auto; width: 165px; scroll-snap-align: start; text-align: center; }
.tswb-road-path-item .tswb-card { width: 165px; }
.tswb-road-path-rarity-label { font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: #a9adda; margin-bottom: 0.3rem; }
.tswb-road-path-item.current .tswb-road-path-rarity-label { color: #d4c44a; }
.tswb-road-path-item.current .tswb-card { outline: 3px solid #d4c44a; outline-offset: 2px; }
.tswb-road-path-item.earned .tswb-road-path-rarity-label { color: #48dd92; }
.tswb-road-path-item.earned .tswb-card { opacity: 0.75; }
.tswb-road-path-item.event-card { width: 185px; }
.tswb-road-path-item.event-card .tswb-card { width: 185px; outline: 3px solid #f3f4f6; outline-offset: 2px; box-shadow: 0 0 16px rgba(243,244,246,0.5); }
.tswb-road-path-event-label { font-size: 0.6rem; font-weight: 900; color: #f3f4f6; letter-spacing: 0.05em; margin-bottom: 0.2rem; text-shadow: 0 0 6px rgba(243,244,246,0.6); }

/* ============================
   BATTLE INTRO — first-visit welcome + starter pack claim
   Reuses .tswb-hero-eyebrow/-chip/-rules/-rule* for visual consistency
   with the hero above it; only the panel chrome and reveal step are new.
============================ */
.tswb-intro-panel {
  position: relative; overflow: hidden; isolation: isolate; width: 100%; max-width: 380px;
  max-height: 85vh; overflow-y: auto; padding: 1.4rem 1.3rem; border-radius: 20px;
  border: 2px solid rgba(221,70,255,0.7);
  background:
    radial-gradient(circle at 80% 15%, rgba(207,38,255,0.18), transparent 34%),
    linear-gradient(125deg, #030619, #050720 55%, #0a041d);
  box-shadow: 0 0 22px rgba(204,44,255,0.28), inset 0 0 0 1px rgba(255,255,255,0.04);
}
.tswb-intro-fx { position: absolute; pointer-events: none; z-index: 0; }
.tswb-intro-fx-1 {
  width: 260px; height: 130px; right: -50px; top: 10px; transform: rotate(-18deg);
  background: repeating-linear-gradient(90deg, transparent 0 16px, rgba(208,29,255,0.13) 17px 19px); opacity: 0.7;
}
.tswb-intro-fx-2 {
  width: 200px; height: 200px; right: 0; top: -40px; border-radius: 50%;
  background: radial-gradient(circle, rgba(208,31,255,0.18), transparent 62%); filter: blur(10px);
}
.tswb-intro-panel > #tswbIntroStepWelcome { position: relative; z-index: 2; }

.tswb-intro-title {
  margin: 0.6rem 0 0.3rem; font-family: "Arial Narrow", Impact, sans-serif;
  font-size: 1.7rem; font-style: italic; font-weight: 1000; line-height: 0.95; letter-spacing: -0.03em;
  padding-right: 0.15em;
  background: linear-gradient(180deg,#ffffff 0%,#f5edff 35%,#bc55ff 80%,#8d25e7 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 3px 10px rgba(169,59,255,0.3);
}
.tswb-intro-lede { margin: 0 0 1rem; color: #d3d6e2; font-size: 0.8rem; line-height: 1.4; }

.tswb-intro-claim-btn {
  width: 100%; margin-top: 1.1rem; padding: 0.75rem 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  border: 2px solid #d12dff; border-radius: 12px; cursor: pointer; color: #fff;
  background: linear-gradient(90deg,#260c4a,#421260 50%,#12072d);
  box-shadow: 0 0 14px rgba(211,46,255,0.5), inset 0 0 14px rgba(219,53,255,0.12);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.tswb-intro-claim-btn span { font-size: 0.9rem; font-style: italic; font-weight: 900; letter-spacing: 0.02em; }
.tswb-intro-claim-btn small { color: rgba(255,255,255,0.75); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.02em; }
.tswb-intro-claim-btn:active { transform: scale(0.98); filter: brightness(1.1); }
.tswb-intro-claim-btn:disabled { opacity: 0.6; cursor: default; }

@media (min-width: 460px) {
  .tswb-intro-panel { padding: 1.7rem 1.6rem; }
  .tswb-intro-title { font-size: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tswb-intro-claim-btn { transition: none; }
}

/* Site-wide animated background now lives in animated-bg.css (loaded separately) - see that file for the .tsw-bg/.tsw-aurora/.tsw-particle system, previously defined here for Battle only. */

/* ============================================================
   HANDSTATLESS VARIANT — the compact Battle-hand footballer card:
   rating, position, rarity, level, club, name and nationality
   flag, but no stat tiles (those live in the shared matrix under
   the row instead). Same tswbCardHtml() component, just rescaled
   and thinned out via a modifier class - appended after the base
   rarity rules so it wins the cascade without !important.
   ============================================================ */
.tswb-card-handstatless {
  aspect-ratio: 0.64; overflow: hidden; /* fixed footprint - every hand card is identically sized regardless of name length or other content */
}
.tswb-card-handstatless .tswb-card-inner { padding: 0.3rem 0.2rem 0.28rem; }
.tswb-card-handstatless .tswb-card-inner::after { display: none; } /* shine sweep - too busy this small */
.tswb-card-handstatless .tswb-card-flag { opacity: 0.16; }
.tswb-card-handstatless .tswb-rarity-notch { padding: 0.05rem 0.26rem 0.04rem; }
.tswb-card-handstatless .tswb-rarity-notch span { font-size: 0.3rem; }
.tswb-card-handstatless .tswb-card-top { margin-top: 0.3rem; }
.tswb-card-handstatless .ovr { font-size: 1.15rem; }
/* Once placed, the headline number IS the competing stat, not the
   general rating - a gold treatment (matching the active-stat badge)
   makes clear it means something different from the usual white OVR. */
.tswb-card-handstatless .ovr.competing { color: #ffd63d; text-shadow: 0 0 8px rgba(255,214,61,0.5), 0 3px 2px rgba(0,0,0,0.55); }
.tswb-card-handstatless .pos { font-size: 0.36rem; margin-top: 0.02rem; }
.tswb-card-handstatless .club { font-size: 0.3rem; padding: 0.1rem 0.12rem; margin: 0.22rem 0; gap: 0.14rem; border-radius: 3px; }
.tswb-card-handstatless .tswb-club-dot { width: 6px; height: 6px; }
.tswb-card-handstatless .stats,
.tswb-card-handstatless .tswb-divider,
.tswb-card-handstatless .rarity-label,
.tswb-card-handstatless .tswb-card-dots,
.tswb-card-handstatless .tswb-card-corner { display: none; } /* the shared stat matrix under the row covers this now */
.tswb-card-handstatless .name { font-size: 0.42rem; line-height: 1.1; margin-top: 0.3rem; }
.tswb-card-handstatless .tswb-levelpill-row { margin-top: 0.22rem; }
.tswb-card-handstatless .tswb-levelpill { padding: 0.05rem 0.26rem; font-size: 0.26rem; border-width: 1px; }
.tswb-card-handstatless .tswb-mini-xp-track { height: 2px; margin: 0.12rem 0.14rem 0; }
.tswb-card-handstatless .level-badge { font-size: 0.3rem; padding: 0.05rem 0.2rem 0.05rem 0.15rem; }

/* Which stat(s) this card is competing on this round - the compact
   card hides the full stat grid, so without this there'd be no way to
   tell just by looking at a card. Hidden by default; only the
   handstatless variant shows it (every other variant already
   highlights the relevant tile(s) directly in its own stat grid). */
.tswb-card-activestat { display: none; }
.tswb-card-handstatless .tswb-card-activestat {
  display: flex; align-items: center; gap: 2px;
  position: absolute; top: 0.4rem; left: -0.05rem; z-index: 2;
  background: #ffd63d; color: #1a1400;
  padding: 0.12rem 0.22rem 0.12rem 0.16rem;
  clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
  box-shadow: 0 0 6px rgba(255,214,61,0.55);
}
.tswb-card-activestat-icon { width: 8px; height: 8px; display: inline-flex; flex-shrink: 0; }
.tswb-card-activestat-icon svg { width: 100%; height: 100%; }

/* ============================================================
   BATTLESIDE VARIANT — the support card flanking the footballer
   row, sized to sit comfortably in the narrow side column.
   ============================================================ */
.tswb-support-card-battleside {
  padding: 0.3rem 0.2rem; gap: 0.1rem; border-radius: 4px;
  border: 2px solid #c13eff;
  background:
    radial-gradient(circle at 50% 55%, rgba(189,54,255,0.22), transparent 42%),
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,0.03) 14px 15px),
    linear-gradient(150deg, #35104a, #18051f);
  box-shadow: 0 0 9px rgba(193,62,255,0.28);
}
.tswb-support-card-battleside .tswb-support-card-icon { font-size: 0.85rem; }
.tswb-support-card-battleside .tswb-support-card-name { font-size: 0.32rem; }
.tswb-support-card-battleside .tswb-support-card-effect { font-size: 0.28rem; color: #ffd63d; }
.tswb-support-card-battleside .tswb-support-card-type { display: none; }
.tswb-support-card-battleside .tswb-support-card-rarity { font-size: 0.26rem; margin-top: 0.04rem; color: #d6a8fc; }

.tswb-support-card-battleside.armed {
  outline: 3px solid #fff; outline-offset: -3px;
  box-shadow: 0 0 16px rgba(193,62,255,0.65);
  animation: tswbSupportPulse 1.2s ease-in-out infinite;
}
.tswb-support-card-battleside.inactive,
.tswb-support-card-battleside.used { opacity: 0.4; filter: grayscale(0.55); cursor: default; }
.tswb-support-card-battleside.used .tswb-support-card-name { text-decoration: line-through; }

@media (prefers-reduced-motion: reduce) {
  .tswb-support-card-battleside.armed { animation: none; }
}


/* ============================================================
   QUICK GAME — dense, angular, game-like pre-match screen.
   Replaces the hub hero/statbar entirely (hidden via JS) with its
   own fixed-height layout, sized to fit one viewport with no
   scrolling: header, deck summary, compact deck strip, two action
   buttons, then the opponent list filling whatever's left.
   ============================================================ */
.tswb-qm-screen {
  display: flex; flex-direction: column; gap: 0.4rem;
  height: calc(100vh - var(--tswb-qm-chrome-height, 176px) - 1rem);
  min-height: 420px;
  color: #fff;
}

.tswb-qm-header { flex: 0 0 36px; display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; }
.tswb-qm-header-btn {
  width: 36px; height: 36px; display: grid; place-items: center;
  background: linear-gradient(155deg, #2a3390, #12163f); border: 1px solid #4a54c0;
  color: #dce0ff; cursor: pointer;
}
.tswb-qm-header-btn svg { width: 18px; height: 18px; }
.tswb-qm-title { text-align: center; font-weight: 900; font-size: 1.15rem; letter-spacing: 0.04em; color: #fff; text-shadow: 0 0 12px rgba(103,232,255,0.35); }

.tswb-qm-summary { flex: 0 0 38px; display: flex; align-items: center; gap: 0.6rem; }
.tswb-qm-rank { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.4rem; }
.tswb-qm-rank-badge {
  flex-shrink: 0; width: 34px; height: 38px; display: grid; place-items: center;
  clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  background: linear-gradient(155deg, var(--tier-hi, #fdb073), var(--tier-lo, #c2410c));
  box-shadow: 0 0 8px var(--tier-glow, rgba(253,176,115,0.5));
}
.tswb-qm-rank-badge svg { width: 16px; height: 16px; color: #1a0f00; }
.tswb-qm-rank-bar {
  position: relative; flex: 1; min-width: 0; height: 22px;
  background: linear-gradient(180deg, #2a2e3d, #12141c); border: 1px solid rgba(255,255,255,0.18);
  overflow: hidden;
}
.tswb-qm-rank-fill {
  position: absolute; inset: 0; width: 0%;
  background: linear-gradient(90deg, var(--tier-lo, #c2410c), var(--tier-hi, #fdb073));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
}
.tswb-qm-rank-label {
  position: relative; z-index: 2; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 0.64rem; font-weight: 900; letter-spacing: 0.06em; color: #fff; text-shadow: 0 1px 3px #000;
  white-space: nowrap;
}
.tswb-qm-record { flex-shrink: 0; text-align: right; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap; }
.tswb-qm-record .w { color: #4ee88a; }
.tswb-qm-record .l { color: #ff6978; }

.tswb-qm-deckstrip {
  display: flex; gap: 0.3rem; flex: 0 0 92px; min-height: 0; overflow: hidden;
  background: linear-gradient(155deg, #141c6a 0%, #0a0e35 100%); border: 1px solid rgba(103,232,255,0.18);
  padding: 0.3rem;
}
.tswb-qm-statlabels { flex: 0 0 24px; display: flex; flex-direction: column; }
.tswb-qm-statlabels::before { content: ''; display: block; flex: 0 0 14px; } /* spacer - matches .tswb-qm-minicard-name's height so rows below line up */
.tswb-qm-statlabel {
  flex: 1; display: flex; align-items: center; justify-content: flex-end; padding-right: 0.15rem;
  font-size: 0.42rem; font-weight: 800; color: rgba(230,233,255,0.55); letter-spacing: 0.02em;
}
.tswb-qm-deckcards { flex: 1 1 auto; min-width: 0; display: flex; gap: 0.22rem; }
.tswb-qm-minicard {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
  background: linear-gradient(155deg, var(--rarity-hi, #8fc0f5), var(--rarity-lo, #1d4ed8));
  border: 1px solid rgba(255,255,255,0.25); overflow: hidden;
}
.tswb-qm-minicard-name {
  flex: 0 0 14px; display: flex; align-items: center; justify-content: center;
  font-size: 0.4rem; font-weight: 900; text-transform: uppercase; text-align: center; color: #fff;
  padding: 0 0.1rem; background: rgba(0,0,0,0.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tswb-qm-minicard-stats { flex: 1; display: flex; flex-direction: column; background: rgba(4,8,26,0.55); }
.tswb-qm-minicard-stat {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-size: 0.48rem; font-weight: 900; color: #fff; line-height: 1;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.tswb-qm-minicard-stat:first-child { border-top: none; }
.tswb-qm-supportcards { flex: 0 0 52px; display: flex; flex-direction: column; gap: 0.22rem; }
.tswb-qm-minisupport {
  flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: linear-gradient(155deg, #3a2a6e, #160f2e); border: 1px solid rgba(186,66,255,0.4);
  padding: 0.1rem; line-height: 1.15; overflow: hidden; gap: 0.06rem;
}
.tswb-qm-minisupport .name { font-size: 0.36rem; font-weight: 800; color: #e3d4ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tswb-qm-minisupport .effect { font-size: 0.4rem; font-weight: 900; color: #fff; }

.tswb-qm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; flex: 0 0 32px; }
.tswb-qm-action-btn {
  background: #0a0c14; border: 1px solid #3a3f5c; color: #fff; cursor: pointer;
  font-weight: 900; font-size: 0.66rem; letter-spacing: 0.06em; padding: 0.55rem 0.4rem;
}
.tswb-qm-action-btn:active { background: #14172a; }

.tswb-qm-choose-heading {
  text-align: center; font-weight: 900; font-size: 1rem; letter-spacing: 0.03em; color: #fff;
  flex: 0 0 24px; text-shadow: 0 0 10px rgba(255,255,255,0.15);
}

.tswb-qm-opponent-list { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0.35rem; overflow: hidden; }
.tswb-qm-opponent-row {
  position: relative; flex: 1 1 0; min-height: 0; display: flex; align-items: center; gap: 0.5rem;
  background: linear-gradient(180deg, #161b3a 0%, #161b3a 48%, #2a1030 52%, #2a1030 100%);
  border: 1px solid #454b66;
  padding: 0 0.6rem 0 0; cursor: pointer; overflow-x: visible; overflow-y: hidden;
}
.tswb-qm-opponent-row:active { filter: brightness(1.15); }
.tswb-qm-opp-portrait {
  flex-shrink: 0; width: 58px; height: 66px; margin-left: -1px; display: grid; place-items: center;
  clip-path: polygon(0 0, 72% 0, 100% 50%, 72% 100%, 0 100%);
  background: linear-gradient(155deg, #3a3f5c, #12141c); border: 1px solid #6a70a0;
  font-size: 1.4rem; font-weight: 900; color: #dce0ff; box-shadow: 3px 0 10px rgba(0,0,0,0.5);
}
.tswb-qm-opp-info { flex: 1; min-width: 0; align-self: stretch; display: flex; flex-direction: column; }
.tswb-qm-opp-name {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 900; color: #fff; line-height: 1.1; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; text-shadow: 0 1px 3px #000;
}
.tswb-qm-opp-stats { flex: 1; display: flex; align-items: center; justify-content: center; gap: 1rem; }
.tswb-qm-opp-stat { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.tswb-qm-opp-stat .l { font-size: 0.42rem; font-weight: 800; letter-spacing: 0.05em; color: rgba(230,233,255,0.6); margin-bottom: 0.08rem; }
.tswb-qm-opp-stat .v { font-size: 1.05rem; font-weight: 900; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.tswb-qm-opp-stat.w .v { color: #4ee88a; }
.tswb-qm-opp-stat.l .v { color: #ff6978; }
.tswb-qm-opp-badge {
  flex-shrink: 0; width: 46px; height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  background: linear-gradient(155deg, var(--tier-hi, #fdb073), var(--tier-lo, #c2410c));
  box-shadow: 0 0 8px var(--tier-glow, rgba(253,176,115,0.5));
  overflow: hidden;
}
.tswb-qm-opp-badge-tier {
  width: 32px; font-size: 0.36rem; font-weight: 900; color: #1a0f00; text-transform: uppercase;
  line-height: 1.05; text-align: center; overflow-wrap: break-word; word-break: break-word; hyphens: auto;
}

@media (min-width: 900px) {
  .tswb-qm-screen { max-width: 720px; margin: 0 auto; }
}

/* ============================================================
   SUPPORT CARD BOOST ANIMATION — a spark travels from the used
   support card over to my played card once the opponent's card is
   already revealed, then that card's own number counts up live to
   the boosted value already decided by tswBattlePlayRound.
   ============================================================ */
.tswb-support-spark {
  position: fixed; z-index: 999; font-size: 1.3rem; line-height: 1; pointer-events: none;
  transform: translate(0, 0) scale(1); opacity: 1;
  transition: transform 0.5s cubic-bezier(.2,.7,.3,1), opacity 0.5s ease-in;
  filter: drop-shadow(0 0 6px #ffd63d);
}
.tswb-support-firing {
  animation: tswbSupportFiring 0.5s ease-in-out;
}
@keyframes tswbSupportFiring {
  0%, 100% { filter: none; transform: none; }
  40% { filter: drop-shadow(0 0 8px #ffd63d) brightness(1.3); transform: scale(1.08); }
}
.tswb-boost-pulse {
  color: #ffd63d !important;
  text-shadow: 0 0 10px rgba(255,214,61,0.9), 0 2px 4px rgba(0,0,0,0.5);
  animation: tswbBoostPulse 0.55s ease-out;
}
@keyframes tswbBoostPulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .tswb-support-spark { transition: none; opacity: 0; }
  .tswb-support-firing, .tswb-boost-pulse { animation: none; }
}