.tcg {
  --ink: #271e43;
  --muted: #665d8e;
  --pink: #ff78bd;
  --hot: #ff5aaf;
  --purple: #7141c6;
  --violet: #4d289e;
  --gold: #ffd15d;
  --green: #8be58c;
  --panel: rgba(255, 255, 255, 0.78);
  --shadow: 0 18px 40px rgba(66, 45, 140, 0.22);
}
.tcg * { box-sizing: border-box; }
.tcg { min-height: 100%; }
.tcg button, .tcg input { font: inherit; }
.tcg button {
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(180deg, #ffb3dd, var(--hot));
  box-shadow: 0 5px 0 #c43d86, 0 12px 20px rgba(90, 40, 140, 0.2);
}
.tcg button:hover { transform: translateY(-1px); }
.tcg button, .tcg .slot { touch-action: manipulation; }
.tcg button:disabled { opacity: 0.45; cursor: default; transform: none; }
.tcg button.good {
  color: #17331c;
  background: linear-gradient(180deg, #d9ffc8, var(--green));
  box-shadow: 0 5px 0 #3d9a52, 0 12px 20px rgba(40, 90, 60, 0.15);
}
.tcg button.ghost {
  color: var(--violet);
  background: #fff;
  box-shadow: 0 5px 0 #e4d4ff, 0 12px 20px rgba(90, 40, 140, 0.12);
}
.tcg input {
  border: 0;
  border-radius: 999px;
  padding: 12px 16px;
  background: #fff;
  color: var(--ink);
  box-shadow: inset 0 0 0 2px #eadfff;
  min-width: 0;
}
.tcg h1, .tcg h2, .tcg h3 { font-family: "Rubik Bubbles", "Trebuchet MS", sans-serif; font-weight: 400; letter-spacing: 0.02em; }
.tcg h1 { margin: 0; font-size: clamp(1.45rem, 4.6vw, 2.7rem); color: #fffcef; text-shadow: 0 3px 0 #ffb8e8, 0 6px 0 #e848a8, 0 10px 18px rgba(70, 35, 120, 0.35); }
.tcg h2 { margin: 0 0 8px; color: var(--violet); font-size: 1.7rem; }
.tcg h3 { margin: 0 0 8px; color: var(--purple); font-size: 1rem; }
.tcg .top { display: flex; align-items: center; gap: 14px; width: 100%; margin: 0 0 8px; }
.tcg .logo { width: 92px; height: auto; filter: drop-shadow(0 8px 16px rgba(70, 35, 120, 0.28)); }
.tcg .eyebrow { margin: 0; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--violet); font-size: 12px; }
.tcg .wrap { width: 100%; margin: 0 auto 28px; }
.tcg .home { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 900px) {
  .tcg .home { grid-template-columns: minmax(280px, 0.9fr) 1.3fr; }
}
.tcg .panel { background: var(--panel); border-radius: 28px; padding: 18px; box-shadow: var(--shadow); }
.tcg .row, .tcg .actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.tcg .status, .tcg .fine { color: var(--muted); font-size: 15px; }
.tcg #play-status { font-size: 16px; font-weight: 800; color: var(--ink); background: rgba(255, 255, 255, 0.9); border-radius: 14px; padding: 10px 12px; }
.tcg .hero { font-size: 16px; }
.tcg .hero .fine { font-size: 14px; color: var(--ink); }
.tcg .status:empty { display: none; }
.tcg details { margin-top: 8px; }
.tcg summary { cursor: pointer; font-weight: 800; color: var(--violet); }
.tcg .tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.tcg .tabs button.on { color: #fff; background: linear-gradient(180deg, #ffb3dd, var(--hot)); box-shadow: 0 5px 0 #c43d86; }
.tcg .pond-tables { display: grid; gap: 10px; }
.tcg .pond-table { background: rgba(255, 255, 255, 0.72); border-radius: 18px; padding: 10px 12px; }
.tcg .pond-table.busy { box-shadow: inset 0 0 0 2px var(--pink); }
.tcg .pond-table h3 { margin-bottom: 6px; }
.tcg .seats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tcg .seat, .tcg button.seat { text-align: center; border-radius: 14px; padding: 10px; background: #f6ecff; color: var(--violet); font-weight: 800; box-shadow: none; }
.tcg .seat.taken { background: #efe4ff; }
.tcg .bracket { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; }
.tcg .round { min-width: 210px; display: flex; flex-direction: column; gap: 12px; }
.tcg .match { display: grid; gap: 6px; background: rgba(255, 255, 255, 0.72); border-radius: 18px; padding: 8px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.8); }
.tcg .tag { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; color: var(--purple); }
.tcg .seed { border-radius: 12px; padding: 8px 10px; background: linear-gradient(180deg, #fff, #f6ecff); }
.tcg .seed b { display: block; }
.tcg .seed small { color: var(--muted); }
.tcg .seed.empty { opacity: 0.72; }
.tcg .seed.champ { background: linear-gradient(180deg, #fff6d4, #ffe08a); }
.tcg .round.winner { background: linear-gradient(180deg, #fff4c2, #f5c542); border-radius: 22px; padding: 12px; box-shadow: inset 0 0 0 3px #e0a31a, 0 10px 20px rgba(160, 110, 20, 0.25); }
.tcg .round.winner h3 { color: #7a4e00; text-align: center; }
.tcg .round.winner .match { background: rgba(255, 255, 255, 0.55); box-shadow: none; }
.tcg .round.winner .seed.empty { opacity: 1; }
@media (max-width: 860px) {
  .tcg .bracket { flex-wrap: wrap; }
  .tcg .round { min-width: 0; flex: 1 1 calc(50% - 14px); }
  .tcg .round.winner { flex: 1 1 100%; }
}
.tcg .showcase { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; }
.tcg .showcase.scene-check { flex-wrap: wrap; overflow: visible; }
.tcg .showcase { align-items: flex-start; }
.tcg .showcase .frame-card, .tcg .showcase figure, .tcg .showcase img { width: 168px; flex: 0 0 168px; }
.tcg .showcase figure { margin: 0; }
.tcg .showcase img { height: auto; aspect-ratio: 1060 / 1484; object-fit: contain; border-radius: 10px; display: block; }
.tcg .showcase figcaption { text-align: center; font-size: 12px; font-weight: 800; color: var(--violet); }
.tcg .table { display: grid; gap: 8px; }
.tcg .lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: start; justify-items: center; }
.tcg .lane-label { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--violet); }
.tcg .support { display: flex; gap: 8px; overflow-x: auto; min-height: 28px; padding-bottom: 4px; }
.tcg button.slot { width: 168px; max-width: 168px; min-width: 0; min-height: 0; padding: 0; border-radius: 12px; background: transparent; color: inherit; box-shadow: none; overflow: hidden; }
.tcg button.slot:hover, .tcg button.frame-wrap:hover, .tcg button.art-wrap:hover { transform: none; }
.tcg button.slot.empty { aspect-ratio: 5 / 3; background: rgba(255, 255, 255, 0.28); box-shadow: inset 0 0 0 2px rgba(113, 65, 198, 0.35); }
.tcg button.slot.ready { box-shadow: 0 0 0 3px var(--gold); }
.tcg button.slot.sick { filter: saturate(0.85); }
.tcg .hero { display: flex; justify-content: space-between; gap: 8px; align-items: center; background: var(--panel); border-radius: 18px; padding: 8px 12px; box-shadow: var(--shadow); }
.tcg .hp { font-size: 28px; font-weight: 800; color: var(--violet); text-align: right; }
.tcg .hand { display: flex; gap: 8px; overflow-x: auto; padding: 8px 2px 12px; }
.tcg .backs { justify-content: flex-end; }
.tcg .card-back { width: 48px; height: auto; border-radius: 6px; display: block; box-shadow: 0 6px 10px rgba(40, 20, 80, 0.22); }
.tcg .backs .card-back { width: 34px; }
.tcg .deckpile { position: relative; width: 48px; flex: 0 0 auto; }
.tcg .deckpile b { position: absolute; right: 4px; bottom: 4px; background: rgba(39, 30, 67, 0.82); color: #fff; border-radius: 8px; padding: 1px 6px; font-size: 13px; }
.tcg .log { max-height: 140px; overflow: auto; font-size: 13px; background: rgba(255, 255, 255, 0.72); border-radius: 16px; padding: 8px 12px; }
.tcg .mid { justify-self: center; text-align: center; font-size: 13px; letter-spacing: 0.08em; font-weight: 800; color: var(--violet); background: var(--gold); border-radius: 999px; padding: 6px 14px; box-shadow: 0 4px 0 #e2b43a; }
.tcg .dock { background: rgba(255, 255, 255, 0.94); border-radius: 18px; padding: 8px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; }
.tcg .dock .actions { margin: 0; }
.tcg .dock #play-status { margin: 0; padding: 6px 8px; }
.tcg #choices { display: flex; flex-wrap: wrap; gap: 6px; max-height: 28vh; overflow: auto; }
.tcg #choices[hidden] { display: none; }
.tcg #choices button { flex: 1 1 160px; min-height: 40px; }
body.playing .tcg .dock { position: fixed; z-index: 4; left: 50%; bottom: max(6px, env(safe-area-inset-bottom)); width: min(980px, calc(100% - 12px)); transform: translateX(-50%); }
body.playing .tcg { padding-bottom: 148px; }
.tcg button.frame-wrap, .tcg button.art-wrap { padding: 0; background: transparent; border-radius: 12px; width: 168px; max-width: 168px; min-width: 0; box-shadow: none; overflow: hidden; }
.tcg button.frame-wrap.sel .frame-card, .tcg button.art-wrap.sel { outline: 3px solid var(--hot); }
.tcg .frame-card { position: relative; width: 100%; max-width: 168px; display: block; container-type: inline-size; border-radius: 8px; overflow: hidden; background: transparent; }
.tcg .frame-card.attack, .tcg .frame-card.utility { aspect-ratio: 1060 / 1484; }
.tcg .slot .frame-card, .tcg .slot .pal-art { width: 100%; height: auto; display: block; border-radius: 8px; aspect-ratio: 1060 / 1484; object-fit: cover; }
.tcg .frame-card .art { position: absolute; left: 8%; top: 9%; width: 84%; height: 34%; background: transparent center / cover no-repeat; }
.tcg .frame-card.utility .art { left: 6.89%; top: 6.40%; width: 88.02%; height: 40.36%; background-color: #000; background-repeat: no-repeat; background-position: center; background-size: cover; }
.tcg .frame-card.attack .art { left: 2.55%; top: 6.00%; width: 90.85%; height: 41.37%; background-color: #000; background-repeat: no-repeat; background-position: center; background-size: cover; }
.tcg .frame-card .overlay { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; }
.tcg .frame-card .badge, .tcg .frame-card .read-name, .tcg .frame-card .read-row, .tcg .frame-card .num { position: absolute; z-index: 2; pointer-events: none; }
.tcg .frame-card .badge { left: 50%; top: 42%; transform: translateX(-50%); background: var(--gold); color: #3a2a08; font-style: normal; font-size: 3.6cqi; font-weight: 800; border-radius: 999px; padding: 0.1em 0.4em; white-space: nowrap; }
.tcg .frame-card .read-name { left: 14.5%; width: 71%; top: 50.05%; height: 6.9%; display: flex; align-items: center; justify-content: center; color: #fff; font-family: "Arial Black", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif; font-size: 5.3cqi; font-weight: 900; line-height: 1; text-align: center; text-shadow: 0 1px 0 #021; border-radius: 10px; padding: 0 2%; }
.tcg .frame-card.attack .read-name { background: linear-gradient(180deg, #1a6ef2, #083eb8); }
.tcg .frame-card.utility .read-name { background: linear-gradient(180deg, #14944a, #076b30); }
.tcg .frame-card .read-name span { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.tcg .frame-card .read-row { left: 25.5%; width: 48%; color: #071018; font-family: "Arial Rounded MT Bold", "Arial Black", "Trebuchet MS", sans-serif; font-size: 4.15cqi; font-weight: 900; line-height: 1.02; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.tcg .frame-card .read-row.one { top: 57.95%; height: 9.9%; }
.tcg .frame-card .read-row.two { top: 68.35%; height: 11.35%; }
.tcg .frame-card .read-row span { display: block; width: 100%; overflow: hidden; text-align: center; }
.tcg .frame-card .num { left: 81.9%; width: 8.3%; height: 4.5%; display: flex; align-items: center; justify-content: center; color: #071018; font-family: "Arial Black", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif; font-size: 6.1cqi; font-weight: 900; line-height: 1; text-align: center; overflow: hidden; }
.tcg .frame-card .num.one { top: 61.85%; }
.tcg .frame-card .num.two { top: 72.85%; }
.tcg .frame-card.utility .num.one { left: 82.64%; width: 8.3%; top: 60.51%; height: 3.91%; font-size: 5cqi; }
.tcg .lane-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 72px; padding: 8px; border-radius: 14px; background: #fff; text-align: left; color: var(--ink); box-shadow: none; }
.tcg .lane-card b { font-size: 14px; }
.tcg .lane-card span, .tcg .lane-card small { font-size: 12px; color: #3c3454; }
.tcg .lane-card small { color: var(--muted); }
.tcg .hand .art-wrap, .tcg .hand .frame-wrap, .tcg .support .art-wrap, .tcg .support .frame-wrap { flex: 0 0 auto; width: 168px; }
.tcg button.slot { width: 168px; }
.tcg button.slot.empty { aspect-ratio: 1060 / 1484; }
.tcg .art-wrap img, .tcg .slot .pal-art { width: 100%; aspect-ratio: 1060 / 1484; object-fit: cover; object-position: center; display: block; border-radius: 8px; }
.tcg .scores { display: flex; gap: 8px; align-items: center; }
.tcg .hp { min-width: 52px; }
.tcg button.hp { background: transparent; color: var(--violet); box-shadow: none; border-radius: 12px; padding: 0 4px; }
.tcg button.hp:hover { transform: none; }
.tcg .leave-match { margin: 4px 0 12px; }
.tcg button.slot,
.tcg button.art-wrap,
.tcg button.frame-wrap,
.tcg .showcase figure,
.tcg .showcase .frame-card {
  width: 168px;
  height: 235px;
  max-width: 168px;
  flex: 0 0 168px;
  overflow: hidden;
}
.tcg .frame-card,
.tcg .slot .frame-card,
.tcg .art-wrap img,
.tcg .slot .pal-art,
.tcg .showcase img {
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
}
.tcg #choices button { font-size: 13px; background: #fff; color: var(--violet); box-shadow: 0 4px 0 #e4d4ff; }
.tcg #table { display: none; }
body.playing .tcg #home { display: none; }
body.playing .tcg .top { margin-top: 8px; }
body.playing .tcg .logo { width: 52px; }
body.playing .tcg h1 { font-size: clamp(1.15rem, 4.2vw, 1.7rem); }
body.playing .tcg .wrap { width: min(1100px, calc(100% - 12px)); }
body.playing .tcg #table {
  display: grid;
  padding: 10px 10px 96px;
  border-radius: 28px;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(125, 214, 196, 0.55), transparent 58%),
    rgba(255, 255, 255, 0.34);
  box-shadow: var(--shadow);
}
@media (max-width: 860px) {
  .tcg .lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; overflow: visible; }
  .tcg button.slot,
  .tcg .hand .art-wrap, .tcg .hand .frame-wrap,
  .tcg .support .art-wrap, .tcg .support .frame-wrap,
  .tcg .showcase .frame-card, .tcg .showcase figure, .tcg .showcase img { width: min(30vw, 168px); max-width: none; flex-basis: min(30vw, 168px); }
  .tcg .dock button { min-height: 42px; padding: 8px 12px; }
.tcg .logo { width: 64px; }
.tcg .dock { bottom: max(8px, env(safe-area-inset-bottom, 0px)); }
.tcg .dock button { min-height: 44px; }
.tcg .hero { padding: 6px 8px; }
.tcg .hp { font-size: 22px; }
.tcg .backs .card-back { width: 36px; }
.tcg .deckpile, .tcg .card-back { width: 52px; }
.tcg .log { max-height: 88px; }
.tcg .lane-label { font-size: 10px; }
  .tcg button.slot,
  .tcg button.art-wrap,
  .tcg button.frame-wrap,
  .tcg .hand .art-wrap, .tcg .hand .frame-wrap,
  .tcg .support .art-wrap, .tcg .support .frame-wrap,
  .tcg .showcase figure, .tcg .showcase .frame-card {
    width: min(30vw, 168px);
    height: auto;
    aspect-ratio: 1061 / 1482;
  }
  .tcg .frame-card,
  .tcg .art-wrap img,
  .tcg .slot .pal-art,
  .tcg .showcase img {
    width: 100%;
    height: 100%;
  }
}

body.playing .site-footer { display: none; }

.tcg .seat-name { margin: 2px 0 0; text-align: center; font-weight: 800; color: #fff; text-shadow: 0 2px 0 #6a3cae, 0 6px 14px rgba(40, 20, 80, 0.45); }
.tcg .coin { background: rgba(255, 255, 255, 0.96); border-radius: 22px; padding: 14px; text-align: center; box-shadow: var(--shadow); }
.tcg .coin p { margin: 0 0 8px; font-weight: 800; color: var(--violet); }
.tcg .coin[hidden] { display: none; }
.tcg .mat { position: relative; width: min(1100px, 100%); margin: 0 auto; aspect-ratio: 1536 / 1024; }
.tcg .mat-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; border-radius: 18px; }
.tcg .mat button.slot,
.tcg .mat button.readout {
  position: absolute;
  width: auto;
  height: auto;
  max-width: none;
  min-width: 0;
  min-height: 0;
  flex: none;
  aspect-ratio: auto;
  margin: 0;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}
.tcg .mat button.slot.empty { background: transparent; box-shadow: none; }
.tcg .mat button.slot.open,
.tcg .mat button.slot.empty:hover { box-shadow: inset 0 0 0 3px var(--gold); }
.tcg .mat button.slot .frame-card,
.tcg .mat button.slot .pal-art,
.tcg .mat button.slot img {
  width: 100%;
  height: 100%;
  max-width: none;
  flex: none;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 860px) {
  .tcg .mat button.slot,
  .tcg .mat button.slot .frame-card,
  .tcg .mat button.slot .pal-art,
  .tcg .mat button.slot img {
    border-radius: 0;
  }
}
.tcg .mat button.slot.spun .frame-card,
.tcg .mat button.slot.spun .pal-art { transform: rotate(180deg); }
.tcg .mat .readout {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 6px rgba(0, 16, 32, 0.9);
  pointer-events: none;
  background: transparent;
  box-shadow: none;
}
.tcg .mat button.readout { pointer-events: auto; cursor: pointer; }
.tcg .mat .readout b { font-size: clamp(18px, 2.6vw, 36px); line-height: 1; }
.tcg .mat .readout small { font-size: clamp(9px, 1.05vw, 13px); font-weight: 800; letter-spacing: 0.04em; max-width: 92%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcg .mat .readout .card-back {
  width: 92%;
  height: 94%;
  max-width: none;
  object-fit: contain;
  object-position: center;
  box-shadow: 0 6px 12px rgba(0, 20, 40, 0.35);
}
.tcg .mat .readout.deck b,
.tcg .mat .readout.discard b { position: absolute; right: 8%; bottom: 8%; z-index: 2; background: rgba(8, 24, 48, 0.82); border-radius: 8px; padding: 0 6px; text-shadow: none; font-size: clamp(12px, 1.4vw, 18px); }
.tcg .mat .readout.discard .pile {
  width: 92%;
  height: 94%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tcg .mat .readout.discard .pile .card-back,
.tcg .mat .readout.discard .pile .pal-art,
.tcg .mat .readout.discard .pile .frame-card {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1060 / 1484;
  object-fit: contain;
  object-position: center;
  box-shadow: 0 6px 12px rgba(0, 20, 40, 0.35);
}
.tcg .mat .readout.ripple { flex-direction: row; gap: 6px; }
.tcg .mat.opp .readout { transform: rotate(180deg); }
.tcg .hand .fine { align-self: center; }

html:has(body.page-collection) { overflow-x: hidden; overflow-y: auto; height: auto; }
body.page-collection { overflow-x: hidden; overflow-y: auto; height: auto; min-height: 100%; }
body.page-collection .page-shell,
body.page-collection main,
body.page-collection .hero-header-wrap { max-width: 100%; overflow: visible; }
body.page-collection .hero-header-wrap { width: 100%; margin-left: 0; margin-right: 0; }
@media (max-width: 860px) {
  body.page-collection main { padding-top: calc(env(safe-area-inset-top, 0px) + 168px); }
  body.page-collection .header-nav-pill.premium-nav-bar .premium-nav-links {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }
  .tcg .panel { min-width: 0; }
  .tcg .cup-panel { order: -1; }
  .tcg .tabs {
    position: sticky;
    top: calc(env(safe-area-inset-top, 0px) + 148px);
    z-index: 30;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 16px;
    padding: 6px;
  }
  .tcg .tabs button { flex: 1 1 0; min-width: 0; padding: 10px 8px; font-size: 13px; }
  .tcg .mat { width: 100%; }
}