/* «Башенная среда» — живая сетка нокаут-турнира Arcomage (#/tournament/arcomage).
   Колонки раундов с горизонтальным скроллом на узких экранах, золотой LIVE у
   играющихся пар, чипы зрителей 👀, стеклянные карточки поверх общих токенов. */

.ta-view { display: flex; flex-direction: column; gap: 14px; }

.ta-header, .ta-me, .ta-prizes, .ta-players { position: relative; overflow: hidden; }
.ta-header::before {
  content: "";
  position: absolute;
  inset: -40% 30% auto -10%;
  height: 220px;
  background: radial-gradient(closest-side, rgba(241, 193, 82, 0.14), transparent);
  pointer-events: none;
}

.ta-title { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.2px; }

.ta-badge {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--gold); border: 1px solid rgba(241, 193, 82, 0.35); border-radius: var(--r-pill);
  padding: 3px 10px;
}
.ta-badge-live { color: #ff5d7a; border-color: rgba(255, 93, 122, 0.45); }
.ta-badge-done { color: var(--text-soft); border-color: var(--stroke); }

.ta-count { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; }
.ta-count-label { color: var(--text-soft); font-size: 13px; }
.ta-count-value { font-size: 26px; font-weight: 800; color: var(--gold); font-family: var(--font-display); }
.ta-sub { color: var(--text-soft); font-size: 13px; margin-top: 6px; }
.ta-empty { color: var(--text-soft); padding: 8px 0; }

.ta-champion { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.ta-crown { font-size: 28px; }
.ta-champion-name { font-size: 18px; font-weight: 800; font-family: var(--font-display); }

.ta-me { border-color: rgba(241, 193, 82, 0.3); }
.ta-me-line { font-weight: 700; margin: 4px 0; }
.tw-deadline { color: var(--gold); font-size: 13px; }
.ta-me-deadline { color: var(--text-soft); font-size: 13px; margin-top: 6px; }
.ta-cta { margin-top: 8px; }

.ta-columns { display: flex; gap: 14px; align-items: flex-start; }
.ta-bracket { flex: 1 1 auto; min-width: 0; max-width: 100%; }
.ta-sidecol { flex: 0 0 280px; display: flex; flex-direction: column; gap: 14px; }

.ta-rounds { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; min-width: 0; max-width: 100%; }
.ta-round { display: flex; flex-direction: column; gap: 10px; min-width: 220px; }
.ta-round-name {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-soft); text-align: center;
}

.ta-match {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--panel); border: 1px solid var(--stroke); border-radius: var(--r-md);
  padding: 10px 12px;
}
.ta-match.is-live { border-color: rgba(255, 93, 122, 0.5); box-shadow: 0 0 18px rgba(255, 93, 122, 0.15); }
.ta-match.is-checkin { border-color: rgba(241, 193, 82, 0.45); }

.ta-side-row { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ta-side-row.is-loser .ta-player { color: var(--text-faint); text-decoration: line-through; }
.ta-side-row.is-winner .ta-player { color: var(--gold); font-weight: 700; }
.ta-check { width: 14px; color: var(--ok, #4ade80); font-weight: 800; }
.ta-player { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-winmark { margin-left: auto; }

.ta-status {
  margin-top: 4px; font-size: 12px; color: var(--text-soft);
  display: inline-flex; align-items: center; gap: 6px;
}
.ta-status-live {
  color: #ff5d7a; font-weight: 700; background: none; border: none; padding: 0;
  cursor: pointer; font-size: 12px;
}
.ta-status-dim { color: var(--text-faint); }

.ta-prize-row { display: flex; gap: 8px; align-items: center; margin-top: 6px; font-size: 13px; }
.ta-prize-icon { width: 22px; text-align: center; }

.ta-count-pill {
  font-size: 12px; font-weight: 800; color: var(--gold);
  border: 1px solid rgba(241, 193, 82, 0.35); border-radius: var(--r-pill); padding: 2px 10px;
}
.ta-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ta-chip {
  font-size: 12px; padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--panel); border: 1px solid var(--stroke);
}

.ta-pulse {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #ff5d7a; box-shadow: 0 0 10px rgba(255, 93, 122, 0.8);
  animation: taPulse 1.6s ease-in-out infinite;
}
@keyframes taPulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }

.mono { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }
.grow { flex: 1; }

@media (max-width: 900px) {
  .ta-columns { flex-direction: column; }
  .ta-sidecol { flex: 1 1 auto; width: 100%; }
}

/* ── Bo3-серия и waiting-room ────────────────────────────────────────────── */
.ta-wins { margin-left: auto; font-weight: 800; color: var(--gold); }
.ta-status-score { font-size: 15px; font-weight: 800; color: var(--gold); }

.ta-series { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 6px 0; }
.ta-series-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-soft); }
.ta-series-score { font-size: 24px; font-weight: 800; color: var(--gold); font-family: var(--font-display); }
.ta-series-game { color: var(--text-soft); font-size: 13px; }

.ta-wait-row { margin-top: 6px; }
.ta-wait-match {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: var(--panel); border: 1px solid var(--stroke); border-radius: var(--r-md);
  padding: 8px 12px; cursor: pointer; text-align: left; color: var(--text);
}
.ta-wait-match:disabled { cursor: default; opacity: 0.85; }
@media (hover: hover) {
  .ta-wait-match:not(:disabled):hover { border-color: var(--stroke-strong); }
}
.ta-wait-vs { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-wait-state { margin-left: auto; font-size: 12px; color: var(--text-soft); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.ta-wait-state.is-live { color: #ff5d7a; font-weight: 700; }

.ta-champions { display: flex; flex-wrap: wrap; gap: 10px; }
.ta-champions .card-title { width: 100%; }
.ta-champions .btn { white-space: normal; text-align: left; max-width: 100%; overflow-wrap: anywhere; }

/* Tournament navigation stays with the viewer across existing game routes. */
.tw-panel { display:flex; flex-direction:column; gap:14px; min-width:0; border:1px solid rgba(229,186,78,.4); }
.tw-home { margin-bottom:12px; min-width:0; }
.tw-back { width:100%; white-space:normal; text-align:center; }
.tw-me { display:flex; flex-direction:column; gap:8px; padding:12px; border-radius:12px; background:rgba(221,181,65,.08); }
.tw-me.is-urgent { border:2px solid var(--gold); background:rgba(221,181,65,.16); }
.tw-details > summary, .tw-archive > summary { cursor:pointer; font-weight:700; padding:10px 0; color:var(--gold); }
.tw-list { display:flex; flex-direction:column; gap:8px; max-height:55vh; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.tw-match { display:flex; flex-direction:column; gap:7px; padding:12px; border:1px solid rgba(166,139,223,.28); border-radius:12px; background:rgba(27,20,45,.8); color:var(--text); text-decoration:none; }
.tw-match:hover, .tw-match:focus-visible { border-color:var(--gold); background:rgba(98,70,132,.35); }
.tw-match.is-current { border-color:#75ddba; background:rgba(67,143,115,.15); }
.tw-match strong { overflow-wrap:anywhere; }
.tw-round { font-size:12px; color:#c6bdd7; }
.tw-match-bottom { display:flex; justify-content:space-between; gap:12px; color:#9be7cd; }
.tw-feeder { font-size:12px; color:var(--gold); }
.tw-archive .tw-match { margin-bottom:8px; }
.tw-error { display:flex; flex-direction:column; gap:8px; color:#ffd0ce; }
#ctx:has(> .tw-panel) > .ctx-shell { display:none; }
#ctx > .tw-panel { order:-1; margin:12px; flex:none; }
@media (max-width:1099px) {
  .tw-panel { padding:10px 14px; gap:8px; }
  .tw-me { padding:8px; }
  .tw-list { max-height:42vh; }
}
@media (max-width:599px) {
  .tw-wait-hint { display:none; }
  .tw-me { font-size:12px; }
  .tw-panel { gap:4px; }
  .tw-back { min-height:40px; padding:8px; }
  .tw-home { margin-bottom:4px; }
}

/* The series scoreboard belongs to the board, never the collapsible picker. */
.tw-scoreboard { flex:none; width:100%; min-width:0; padding:8px 14px; border:1px solid rgba(229,186,78,.45); border-radius:14px; background:linear-gradient(115deg,rgba(54,39,69,.98),rgba(19,15,30,.98)); text-align:center; }
.tw-score-meta { color:#f0d998; font-size:12px; line-height:1.35; overflow-wrap:anywhere; }
.tw-score-row { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:14px; }
.tw-score-name { color:#f4efff; font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tw-score-name:first-child { text-align:right; }
.tw-score-name:last-child { text-align:left; }
.tw-score-value { font-size:28px; line-height:1.3; color:#ffda79; letter-spacing:2px; }
.tw-score-foot { color:#c6bdd7; font-size:11px; line-height:1.35; }
@media(max-width:599px) {
  .tw-scoreboard { padding:5px 9px; border-radius:10px; }
  .tw-score-meta { font-size:10px; }
  .tw-score-name { font-size:11px; }
  .tw-score-row { gap:8px; }
  .tw-score-value { font-size:23px; }
  .tw-score-foot { font-size:10px; }
}

.ta-bronze { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(205, 145, 89, .4); }
.ta-bronze .ta-round-name { color: #e9b67f; }

/* A brief title over the battlefield, never a modal or an input blocker. */
.tw-round-intro { position:absolute; inset:0; z-index:40; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; pointer-events:none; text-align:center; isolation:isolate; animation:tw-intro-arrive 2.4s both; }
.tw-round-intro::before { content:""; position:absolute; inset:15% 0; z-index:-1; background:radial-gradient(ellipse,rgba(22,8,38,.94),rgba(35,15,55,.72) 35%,transparent 72%); }
.tw-intro-stage { color:#f7ddb0; font-size:clamp(11px,1.5vw,16px); font-weight:700; letter-spacing:.22em; text-transform:uppercase; text-shadow:0 2px 6px #10091b; }
.tw-intro-title { font-family:Georgia,"Times New Roman",serif; font-size:clamp(42px,7vw,92px); font-weight:900; line-height:1.1; letter-spacing:.06em; color:#ffe8ac; text-shadow:0 2px 0 #855329,0 4px 14px #10091b,0 0 32px #ca883e99,0 0 64px #9b61d377; }
.tw-intro-caption { color:#f3e7ff; font-size:clamp(11px,1.5vw,16px); letter-spacing:.07em; text-shadow:0 2px 6px #10091b; }
@keyframes tw-intro-arrive { 0% { opacity:0; transform:scale(1.12); } 15%,72% { opacity:1; transform:scale(1); } 100% { opacity:0; transform:scale(.98); } }
@media (prefers-reduced-motion:reduce) { .tw-round-intro { animation:none; } }

/* Portal outside the scene scroller: check-in remains reachable at any scroll. */
.tw-ready { position:fixed; left:50%; transform:translateX(-50%); z-index:55; width:min(680px,calc(100% - 24px)); box-sizing:border-box; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 18px; border:2px solid #ffe49a; border-radius:16px; color:#fff3cc; background:linear-gradient(115deg,#3a224f,#1b142b); box-shadow:0 6px 26px #0009,0 0 24px #ffcc6755; }
.tw-ready-copy { display:flex; flex-direction:column; gap:3px; min-width:0; }
.tw-ready-copy strong { font-size:16px; line-height:1.3; }
.tw-ready-time { font-size:13px; color:#ffe09a; }
.tw-ready-button { position:relative; flex-shrink:0; overflow:hidden; color:#291706; background:linear-gradient(110deg,#e5ab30,#ffec9a,#efbd4e); font-weight:800; border:1px solid #fff1b4; min-height:46px; animation:tw-ready-glow 1.8s ease-in-out infinite alternate; }
.tw-ready-button::after { content:""; position:absolute; inset:-50% -100%; pointer-events:none; background:linear-gradient(110deg,transparent 43%,#fff9 49%,transparent 55%); animation:tw-ready-spark 2.8s ease-in-out infinite; }
@keyframes tw-ready-glow { to { box-shadow:0 0 12px #ffda79,0 0 28px #e7ad4a99; } }
@keyframes tw-ready-spark { from { transform:translateX(-40%); } to { transform:translateX(40%); } }
@media(max-width:540px) { .tw-ready { gap:9px; padding:10px 12px; flex-wrap:wrap; } .tw-ready-copy { flex:1 1 100%; } .tw-ready-copy strong { font-size:14px; } .tw-ready-button { width:100%; } }
@media(prefers-reduced-motion:reduce) { .tw-ready-button,.tw-ready-button::after { animation:none; } }