.tcard { display: block; text-decoration: none; color: inherit; transition: transform .12s, border-color .12s; overflow: hidden; padding: 0; }
.tcard-img { display: block; aspect-ratio: 16 / 10; background: #111 center / cover no-repeat; }
.tcard-body { padding: 12px 14px 14px; }
.tcard-prize { display: flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 700; margin: 4px 0 0; }
.tcard-mode { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); font-weight: 700; }
.bracket { display: flex; gap: 22px; overflow-x: auto; padding-bottom: 8px; }
.bracket-round { display: flex; flex-direction: column; gap: 14px; justify-content: space-around; min-width: 160px; }
.bracket-head { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.bracket-match { background: var(--card); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.trn-planned { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tp-hero { position: relative; overflow: hidden; border-radius: 22px; margin-bottom: 18px; border: 1px solid rgba(255, 176, 32, .35); background: #0b0e1a; color: #fff; box-shadow: var(--shadow); }
.tp-bg { position: absolute; inset: -30px; background: center / cover no-repeat; filter: blur(18px) saturate(1.3); opacity: .55; transform: scale(1.05); }
.tp-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8, 10, 22, .96) 0%, rgba(8, 10, 22, .82) 48%, rgba(8, 10, 22, .35) 100%); }
.tp-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: center; padding: 30px 30px 26px; }
.tp-main h1 { margin: 6px 0 8px; font-size: clamp(1.7rem, 3.6vw, 2.8rem); line-height: 1.08; color: #fff; }
.tp-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: rgba(63, 209, 138, .18); color: #7ff0b8; border: 1px solid rgba(63, 209, 138, .45); }
.tp-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.tp-hero[data-st="running"] .tp-badge::before { animation: tp-pulse 1.2s infinite; }
.tp-kick { display: flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--accent); font-weight: 700; font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; }
.tp-kick svg { width: 18px; height: 18px; }
.tp-lead { font-size: 1.12rem; color: #d7dcf0; margin: 0 0 16px; max-width: 56ch; }
.tp-count { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 12px 18px; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); margin-bottom: 16px; }
.tp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tp-cta form { display: inline; }
.tp-in-tag { display: inline-flex; align-items: center; padding: 12px 18px; border-radius: 12px; font-weight: 800; background: rgba(63, 209, 138, .16); color: #7ff0b8; border: 1px solid rgba(63, 209, 138, .45); }
.tp-my { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: rgba(255, 207, 63, .12); border: 1px solid rgba(255, 207, 63, .35); color: #ffe7a3; font-weight: 600; }
.tp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #d7dcf0; font-size: .88rem; }
.tp-chip svg { width: 16px; height: 16px; }
.tp-art { display: block; text-align: center; color: #fff; text-decoration: none; }
.tp-cover { width: 100%; max-width: 420px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, .55), 0 0 0 3px rgba(255, 176, 32, .5); transform: rotate(2deg); transition: transform .2s; }
.tp-art:hover .tp-cover { transform: rotate(0) scale(1.02); }
.tp-total { display: flex; flex-direction: column; align-items: center; line-height: 1.05; margin-bottom: 14px; }
.tp-total span { font-weight: 800; color: var(--accent); }
.tp-pod { display: flex; justify-content: center; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.tp-step { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 130px; padding: 14px 16px 12px; border-radius: 16px 16px 8px 8px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.tp-step.p3 { min-height: 130px; justify-content: flex-end; }
.tp-step .medal { width: 34px; height: 34px; font-size: 1rem; }
.tp-amt { font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.tp-unit { font-size: .8rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.tp-winner { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 6px; font-weight: 700; }
.tp-more { margin: 12px 0 0; }
.tp-extra { margin: 12px 0 0; }
.tp-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tp-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.tp-row.idle { opacity: .6; }
.tp-rank { width: 34px; text-align: center; font-weight: 800; color: var(--muted); flex: none; }
.tp-name { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tp-row.danger .tp-name small { color: var(--bad); }
.tp-val { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.tp-match { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 6px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); }
.tp-match > span.r { justify-content: flex-end; }
.tp-match > span.lead a { color: var(--ok); }
.tp-vs { font-size: 1.15rem; font-variant-numeric: tabular-nums; padding: 4px 12px; border-radius: 10px; background: rgba(255, 255, 255, .06); white-space: nowrap; }
.tp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.tp-field { min-width: 0; }
.tp-steps ol { list-style: none; margin: 0 0 12px; padding: 0; counter-reset: tps; }
.tp-steps li::before { content: counter(tps); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: rgba(255, 255, 255, .08); border: 2px solid var(--line); }
.tp-steps li:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 36px; bottom: 2px; width: 2px; background: var(--line); }
.tp-steps li.now::before { background: var(--accent); color: #221a08; border-color: var(--accent); box-shadow: 0 0 0 5px rgba(255, 176, 32, .2); }
.tp-steps li.done::before { content: "✓"; background: rgba(63, 209, 138, .2); color: var(--ok); border-color: var(--ok); }
.tp-steps li b { font-size: 1.05rem; }
.tp-steps li span { color: var(--muted); }
.tp-rulebox summary { cursor: pointer; font-weight: 700; color: var(--accent); }
.tp-rulebox ul { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.tp-bar { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; margin: 4px 0 6px; }
.tp-pls { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.tp-pl { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 72px; color: inherit; text-decoration: none; font-size: .82rem; }
.tp-pl span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-pl.out { opacity: .45; }
@media (max-width: 820px) {
  .tp-in { grid-template-columns: 1fr; padding: 22px 18px; gap: 18px; }
  .tp-art { order: -1; }
  .tp-cover { max-width: 100%; transform: none; }
  .tp-grid { grid-template-columns: 1fr; }
  .tp-step { min-width: 0; flex: 1 1 28%; padding: 10px 8px; }
  .tp-amt { font-size: 1.5rem; }
  .tp-step.p1 .tp-amt { font-size: 1.9rem; }
  .tp-match { grid-template-columns: 1fr; text-align: center; }
  .tp-match > span, .tp-match > span.r { justify-content: center; }
}
:where([data-theme="light"]) .tp-hero .btn.ghost { box-shadow: none; }
:where([data-theme="light"]) .tp-hero .btn.ghost:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .4); }
:where([data-theme="light"]) :is(.tp-step, .tp-row, .tp-match) { background: var(--glass); }
:where([data-theme="light"]) :is(.tp-vs, .tp-steps li::before) { background: var(--glass2); }
:where([data-theme="light"]) .tp-total b { background-image: linear-gradient(135deg, #8a5a00, #b03a0a); }