/* ═══ BASE ═══ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #0e1014;
  color: #e8eaed;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── Design picker ── */
.design-picker {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
}
.design-picker-btn {
  padding: 12px 20px;
  border: 1px solid #444;
  border-radius: 8px;
  background: #1a1d24;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 32px #0008;
}
.design-picker-panel {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  width: 300px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 14px;
  border: 1px solid #333;
  border-radius: 10px;
  background: #161920;
  box-shadow: 0 20px 60px #000a;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: 0.2s;
}
.design-picker.is-open .design-picker-panel { opacity: 1; visibility: visible; transform: none; }
.design-picker-label {
  margin: 0 0 10px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #888;
}
.design-list { display: flex; flex-direction: column; gap: 6px; }
.design-opt {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 2px solid #2a2e38;
  border-radius: 8px;
  background: #1e222c;
  color: #ddd;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s;
}
.design-opt:hover { border-color: #555; }
.design-opt.active { border-color: #00d4ff; background: #0e1820; }
.design-opt strong { display: block; font-size: 0.88rem; margin-bottom: 2px; color: #fff; }
.design-opt span { font-size: 0.72rem; color: #888; }

/* ═══ SHARED BRACKET ═══ */
.tb-tree { display: flex; justify-content: center; min-width: 780px; height: 360px; }
.tb-round { display: flex; flex-direction: column; justify-content: space-around; width: 200px; height: 100%; flex-shrink: 0; }
.tb-lines { width: 44px; height: 100%; display: flex; flex-direction: column; flex-shrink: 0; }
.tb-line-pair { position: relative; flex: 1; }
.tb-line-pair::before, .tb-line-pair::after { content: ""; position: absolute; right: 0; width: 22px; height: 1px; background: currentColor; opacity: 0.35; }
.tb-line-pair::before { top: 25%; }
.tb-line-pair::after { bottom: 25%; }
.tb-line-pair .tb-vline { position: absolute; right: 22px; top: 25%; bottom: 25%; width: 1px; background: currentColor; opacity: 0.35; }
.tb-line-pair .tb-mid { position: absolute; right: 0; top: 50%; width: 22px; height: 1px; background: currentColor; opacity: 0.35; transform: translateY(-50%); }
.tb-match { width: 200px; overflow: hidden; }
.tb-slot { display: flex; align-items: center; height: 34px; padding: 0 10px; font-size: 0.8rem; font-weight: 500; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-slot + .tb-slot { border-top: 1px solid; border-color: inherit; opacity: 0.9; }
.tb-slot .sc { margin-left: auto; padding-left: 6px; font-weight: 700; flex-shrink: 0; }
.tb-slot.empty { font-style: italic; opacity: 0.45; cursor: default; }
.bracket-scroll { overflow-x: auto; }

/* ═══════════════════════════════════════
   DESIGN — ARENA (классический дашборд)
   ═══════════════════════════════════════ */
[data-design="arena"] body { background: #12141a; color: #eceef2; }
.d-arena { width: 100%; padding: 0 40px 80px; }
.d-arena .bar { display: flex; justify-content: space-between; align-items: center; margin: 0 -40px; padding: 18px 40px; background: #1a1d25; border-bottom: 1px solid #282c36; }
.d-arena .bar b { font-family: "Libre Franklin", sans-serif; font-size: 1.1rem; letter-spacing: 0.06em; }
.d-arena h1 { font-family: "Libre Franklin", sans-serif; font-size: 2.2rem; margin: 40px 0 8px; }
.d-arena .sub { color: #8a909c; margin-bottom: 24px; }
.d-arena .stats { display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; background: #282c36; border: 1px solid #282c36; margin-bottom: 32px; }
.d-arena .stats div { padding: 14px 16px; background: #1a1d25; }
.d-arena .stats label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: #6b7280; }
.d-arena .stats span { display: block; font-weight: 600; margin-top: 4px; }
.d-arena .tabs { display: flex; gap: 0; margin: 0 -40px 28px; padding: 0 40px; border-bottom: 1px solid #282c36; }
.d-arena .tabs a { padding: 12px 20px; color: #6b7280; text-decoration: none; font-weight: 600; font-size: 0.88rem; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.d-arena .tabs a.on { color: #fff; border-bottom-color: #c8cdd8; }
.d-arena .sec { margin-bottom: 48px; scroll-margin-top: 20px; }
.d-arena .sec h2 { font-size: 0.95rem; margin: 0 0 14px; color: #a8adb8; }
.d-arena .clan-row { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; padding: 14px 18px; border-bottom: 1px solid #282c36; cursor: pointer; }
.d-arena .clan-row:hover { background: #22262f; }
.d-arena .clan-row.open { background: #22262f; }
.d-arena .clan-box { border: 1px solid #282c36; background: #1a1d25; }
.d-arena .players { display: none; grid-column: 1/-1; padding-left: 54px; gap: 6px; flex-wrap: wrap; }
.d-arena .clan-row.open .players { display: flex; }
.d-arena .players span { padding: 4px 8px; background: #2a2f3a; font-size: 0.78rem; border-radius: 4px; }
.d-arena .bracket-wrap { margin: 0 -40px; padding: 24px 40px; background: #1a1d25; border-top: 1px solid #282c36; border-bottom: 1px solid #282c36; }
.d-arena .tb-match { background: #12141a; border: 1px solid #333945; border-radius: 6px; }
.d-arena .tb-slot { color: #a8adb8; border-color: #282c36; }
.d-arena .tb-slot.win { color: #fff; background: #22262f; }
.d-arena .tb-slot.win .sc { color: #8b9a6b; }
.d-arena .podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 12px; margin-bottom: 16px; }
.d-arena .pod { text-align: center; padding: 18px; background: #1a1d25; border: 1px solid #282c36; }
.d-arena .pod.big { padding-top: 26px; }
.d-arena .table { border: 1px solid #282c36; }
.d-arena .tr { display: grid; grid-template-columns: 40px 1fr 70px 70px 1fr; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #282c36; font-size: 0.88rem; }
.d-arena .tr.hd { background: #22262f; font-size: 0.65rem; text-transform: uppercase; color: #6b7280; }

/* ═══════════════════════════════════════
   DESIGN 2 — SIDEBAR (приложение)
   ═══════════════════════════════════════ */
[data-design="sidebar"] body { background: #0c0e12; }
.d-sidebar { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.d-sidebar .side { background: #141820; border-right: 1px solid #252a34; padding: 28px 0; position: sticky; top: 0; height: 100vh; }
.d-sidebar .side .logo { padding: 0 24px 28px; font-family: "Libre Franklin", sans-serif; font-weight: 800; font-size: 1rem; letter-spacing: 0.08em; }
.d-sidebar .side .logo small { display: block; font-size: 0.65rem; color: #666; font-weight: 500; letter-spacing: 0; margin-top: 4px; }
.d-sidebar .side nav a { display: block; padding: 12px 24px; color: #7a8290; text-decoration: none; font-weight: 600; font-size: 0.88rem; border-left: 3px solid transparent; }
.d-sidebar .side nav a:hover { color: #ccc; background: #1a2030; }
.d-sidebar .side nav a.on { color: #6ba3f0; border-left-color: #6ba3f0; background: #1a2438; }
.d-sidebar .side .status-box { margin: 24px; padding: 14px; background: #1a2030; border-radius: 8px; font-size: 0.8rem; color: #888; }
.d-sidebar .side .status-box b { color: #6ba3f0; }
.d-sidebar .main { padding: 32px 40px 60px; }
.d-sidebar .main h1 { margin: 0 0 6px; font-size: 1.6rem; }
.d-sidebar .main .sub { color: #666; margin-bottom: 28px; }
.d-sidebar .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.d-sidebar .card { background: #141820; border: 1px solid #252a34; border-radius: 10px; padding: 18px; cursor: pointer; transition: border-color 0.15s; }
.d-sidebar .card:hover { border-color: #3a4560; }
.d-sidebar .card .seed { font-size: 0.7rem; color: #555; font-weight: 700; }
.d-sidebar .card h3 { margin: 6px 0 4px; font-size: 1rem; }
.d-sidebar .card .tag { font-size: 0.72rem; color: #6ba3f0; font-weight: 700; }
.d-sidebar .card .pl { margin-top: 10px; font-size: 0.75rem; color: #666; }
.d-sidebar .card.open .pl-full { display: block; margin-top: 8px; font-size: 0.78rem; color: #999; }
.d-sidebar .card .pl-full { display: none; }
.d-sidebar .sec { margin-bottom: 40px; scroll-margin-top: 20px; }
.d-sidebar .sec-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: #555; margin-bottom: 16px; }
.d-sidebar .bracket-box { background: #141820; border: 1px solid #252a34; border-radius: 10px; padding: 24px; }
.d-sidebar .tb-match { background: #0c0e12; border: 1px solid #252a34; border-radius: 6px; color: #aaa; border-color: #252a34; }
.d-sidebar .tb-slot.win .sc { color: #6ba3f0; }
.d-sidebar .standings { width: 100%; border-collapse: collapse; }
.d-sidebar .standings th, .d-sidebar .standings td { padding: 12px 14px; text-align: left; border-bottom: 1px solid #252a34; font-size: 0.88rem; }
.d-sidebar .standings th { font-size: 0.68rem; text-transform: uppercase; color: #555; background: #141820; }

/* ═══════════════════════════════════════
   DESIGN 3 — PANELS (вкладки, один экран)
   ═══════════════════════════════════════ */
[data-design="panels"] body { background: #0f1116; color: #eceef2; }
.d-panels { min-height: 100vh; display: flex; flex-direction: column; }
.d-panels .top { padding: 28px 40px 20px; border-bottom: 1px solid #252a34; }
.d-panels .brand { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; color: #6b7280; margin-bottom: 8px; }
.d-panels h1 { margin: 0; font-family: "Libre Franklin", sans-serif; font-size: 1.8rem; }
.d-panels .meta { margin-top: 6px; color: #8a909c; font-size: 0.88rem; }
.d-panels .panel-tabs { display: flex; gap: 8px; padding: 16px 40px; border-bottom: 1px solid #252a34; }
.d-panels .panel-tabs button {
  padding: 12px 24px; border: 1px solid #2e3440; border-radius: 8px;
  background: #1a1d25; color: #8a909c; font-family: inherit; font-weight: 600; font-size: 0.88rem; cursor: pointer;
}
.d-panels .panel-tabs button.on { background: #eceef2; color: #0f1116; border-color: #eceef2; }
.d-panels .panel-body { flex: 1; padding: 28px 40px 80px; }
.d-panels .panel { display: none; }
.d-panels .panel.on { display: block; }
.d-panels .panel h2 { margin: 0 0 20px; font-size: 0.9rem; color: #8a909c; }
.d-panels .clan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.d-panels .clan-tile {
  padding: 18px; background: #1a1d25; border: 1px solid #2e3440; border-radius: 10px; cursor: pointer;
}
.d-panels .clan-tile:hover { border-color: #4a5568; }
.d-panels .clan-tile .seed { font-size: 0.7rem; color: #6b7280; font-weight: 700; }
.d-panels .clan-tile h3 { margin: 6px 0 4px; font-size: 0.95rem; }
.d-panels .clan-tile .cap { font-size: 0.78rem; color: #6b7280; }
.d-panels .clan-tile .roster { display: none; margin-top: 10px; flex-wrap: wrap; gap: 6px; }
.d-panels .clan-tile.open .roster { display: flex; }
.d-panels .clan-tile .roster span { padding: 3px 8px; background: #2a2f3a; border-radius: 4px; font-size: 0.72rem; }
.d-panels .tb-match { background: #1a1d25; border: 1px solid #2e3440; border-radius: 6px; }
.d-panels .tb-slot { color: #a8adb8; border-color: #2e3440; }
.d-panels .tb-slot.win { background: #22262f; color: #fff; }
.d-panels .tb-slot.win .sc { color: #8ab4f8; }
.d-panels .rank-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.d-panels .rank-card {
  display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center;
  padding: 16px; background: #1a1d25; border: 1px solid #2e3440; border-radius: 8px;
}
.d-panels .rank-card .place { font-size: 1.6rem; font-weight: 800; color: #4a5568; }
.d-panels .rank-card .prize { font-size: 0.75rem; color: #6b7280; margin-top: 4px; }
.d-panels .rank-card .pts { font-weight: 700; color: #8ab4f8; }

/* ═══════════════════════════════════════
   DESIGN 4 — CINEMA (scroll-snap)
   ═══════════════════════════════════════ */
[data-design="cinema"] body { background: #0a0c10; color: #eceef2; overflow: hidden; }
.d-cinema { height: 100vh; overflow-y: auto; scroll-snap-type: y mandatory; scroll-behavior: smooth; }
.d-cinema .dots {
  position: fixed; right: 24px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 10px; z-index: 100;
}
.d-cinema .dots a {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid #333; background: #141820; color: #666;
  text-decoration: none; font-size: 0.72rem; font-weight: 700;
}
.d-cinema .dots a.on { background: #eceef2; color: #0a0c10; border-color: #eceef2; }
.d-cinema .slide {
  min-height: 100vh; scroll-snap-align: start; display: flex; align-items: center;
  padding: 60px 80px 60px 48px; border-bottom: 1px solid #1a1d25;
}
.d-cinema .slide.dark { background: #12151c; }
.d-cinema .inner { width: 100%; max-width: 1100px; margin: 0 auto; }
.d-cinema .inner.wide { max-width: 100%; }
.d-cinema .eyebrow { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: #6b7280; margin-bottom: 16px; }
.d-cinema h1 { font-family: "Libre Franklin", sans-serif; font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 800; margin: 0 0 16px; line-height: 1.05; }
.d-cinema h2 { font-family: "Libre Franklin", sans-serif; font-size: 1.6rem; margin: 0 0 28px; }
.d-cinema .slide > .inner > p { font-size: 1.1rem; color: #8a909c; max-width: 520px; margin-bottom: 32px; }
.d-cinema .facts { display: flex; flex-wrap: wrap; gap: 28px; }
.d-cinema .facts div span { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: #6b7280; }
.d-cinema .facts div b { display: block; font-size: 1.2rem; margin-top: 4px; }
.d-cinema .clan-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.d-cinema .chip {
  padding: 16px; background: #141820; border: 1px solid #252a34; border-radius: 10px; cursor: pointer;
}
.d-cinema .chip:hover { border-color: #4a5568; }
.d-cinema .chip .tag { font-size: 0.7rem; color: #8ab4f8; font-weight: 700; }
.d-cinema .chip b { display: block; margin: 4px 0; font-size: 0.9rem; }
.d-cinema .chip small { color: #6b7280; font-size: 0.75rem; }
.d-cinema .chip .pl { display: none; margin-top: 8px; font-size: 0.72rem; color: #8a909c; }
.d-cinema .chip.open .pl { display: block; }
.d-cinema .tb-match { background: #0a0c10; border: 1px solid #2e3440; border-radius: 6px; }
.d-cinema .tb-slot { color: #a8adb8; border-color: #2e3440; }
.d-cinema .tb-slot.win { background: #1a1f2a; color: #fff; }
.d-cinema .tb-slot.win .sc { color: #8ab4f8; }
.d-cinema .final-list { list-style: none; margin: 0; padding: 0; }
.d-cinema .final-list li {
  display: grid; grid-template-columns: 48px 1fr auto 1fr; gap: 16px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid #252a34; font-size: 0.9rem;
}
.d-cinema .final-list .n { font-size: 1.4rem; font-weight: 800; color: #4a5568; }
.d-cinema .final-list .pts { font-weight: 700; color: #8ab4f8; }
.d-cinema .final-list .prize { color: #6b7280; font-size: 0.82rem; text-align: right; }

/* ═══════════════════════════════════════
   DESIGN 5 — SPLIT (master-detail)
   ═══════════════════════════════════════ */
[data-design="split"] body { background: #0c0e12; color: #e4e6eb; }
.d-split { min-height: 100vh; display: flex; flex-direction: column; }
.d-split .bar {
  display: flex; align-items: center; gap: 20px; padding: 16px 24px;
  background: #141820; border-bottom: 1px solid #252a34; font-size: 0.88rem;
}
.d-split .bar b { font-family: "Libre Franklin", sans-serif; font-size: 1rem; }
.d-split .bar span { color: #6b7280; }
.d-split .bar .prize { margin-left: auto; color: #8ab4f8; font-weight: 600; }
.d-split .layout { display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); flex: 1; min-height: 0; }
.d-split .clan-pane { border-right: 1px solid #252a34; background: #10141c; overflow-y: auto; max-height: calc(100vh - 54px); }
.d-split .pane-title { padding: 16px 20px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #555; border-bottom: 1px solid #252a34; }
.d-split .clan-item {
  display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center;
  width: 100%; padding: 12px 20px; border: 0; border-bottom: 1px solid #1a1f28;
  background: transparent; color: inherit; font-family: inherit; text-align: left; cursor: pointer;
}
.d-split .clan-item:hover { background: #1a2030; }
.d-split .clan-item.active { background: #1a2438; border-left: 3px solid #6ba3f0; padding-left: 17px; }
.d-split .clan-item .seed { font-weight: 800; color: #555; font-size: 0.85rem; }
.d-split .clan-item b { display: block; font-size: 0.88rem; }
.d-split .clan-item small { color: #666; font-size: 0.72rem; }
.d-split .clan-item .cnt { font-size: 0.72rem; color: #555; }
.d-split .clan-detail { display: none; padding: 0 20px 12px 62px; flex-wrap: wrap; gap: 6px; }
.d-split .clan-detail.open { display: flex; }
.d-split .clan-detail span { padding: 3px 8px; background: #1a2030; border-radius: 4px; font-size: 0.72rem; color: #999; }
.d-split .view-pane { padding: 24px 32px 60px; overflow-y: auto; max-height: calc(100vh - 54px); }
.d-split .view-tabs { display: flex; gap: 8px; margin-bottom: 24px; }
.d-split .view-tabs button {
  padding: 10px 20px; border: 1px solid #252a34; border-radius: 6px;
  background: #141820; color: #888; font-family: inherit; font-weight: 600; cursor: pointer;
}
.d-split .view-tabs button.on { background: #6ba3f0; color: #0c0e12; border-color: #6ba3f0; }
.d-split .view { display: none; }
.d-split .view.on { display: block; }
.d-split .view h2 { margin: 0 0 20px; font-size: 0.85rem; color: #666; text-transform: uppercase; letter-spacing: 0.1em; }
.d-split .tb-match { background: #10141c; border: 1px solid #252a34; border-radius: 6px; }
.d-split .tb-slot { color: #aaa; border-color: #252a34; }
.d-split .tb-slot.win .sc { color: #6ba3f0; }
.d-split .stand-table { width: 100%; border-collapse: collapse; }
.d-split .stand-table th, .d-split .stand-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid #252a34; font-size: 0.88rem; }
.d-split .stand-table th { font-size: 0.68rem; text-transform: uppercase; color: #555; }

/* ═══════════════════════════════════════
   DESIGN 6 — TIMELINE (хронология)
   ═══════════════════════════════════════ */
[data-design="timeline"] body { background: #111318; color: #e8eaed; }
.d-timeline { padding: 0 40px 80px; }
.d-timeline .head { padding: 48px 0 40px; text-align: center; border-bottom: 1px solid #252a34; margin-bottom: 48px; }
.d-timeline .head .eyebrow { font-size: 0.68rem; letter-spacing: 0.14em; color: #6b7280; margin-bottom: 12px; }
.d-timeline .head h1 { font-family: "Libre Franklin", sans-serif; font-size: 2.4rem; margin: 0 0 8px; }
.d-timeline .head p { color: #8a909c; margin: 0; }
.d-timeline .track { position: relative; max-width: 720px; margin: 0 auto; padding-left: 40px; }
.d-timeline .track::before {
  content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px; background: #2e3440;
}
.d-timeline .node { position: relative; margin-bottom: 36px; }
.d-timeline .dot {
  position: absolute; left: -33px; top: 18px; width: 14px; height: 14px;
  border-radius: 50%; background: #8ab4f8; border: 3px solid #111318; box-shadow: 0 0 0 2px #2e3440;
}
.d-timeline .card {
  background: #1a1d25; border: 1px solid #2e3440; border-radius: 12px; padding: 20px 24px;
}
.d-timeline .card.wide { max-width: none; }
.d-timeline .stage { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #8ab4f8; margin-bottom: 10px; }
.d-timeline .card h3 { margin: 0 0 8px; font-size: 1.1rem; }
.d-timeline .card p { margin: 0; color: #8a909c; font-size: 0.9rem; }
.d-timeline .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.d-timeline .tags span { padding: 4px 10px; background: #22262f; border-radius: 999px; font-size: 0.75rem; color: #a8adb8; }
.d-timeline .tl-match {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid #252a34; font-size: 0.88rem;
}
.d-timeline .tl-match:last-child { border-bottom: 0; }
.d-timeline .tl-match.live { color: #8ab4f8; }
.d-timeline .tl-match em { font-style: normal; font-weight: 700; color: #6b7280; min-width: 40px; text-align: center; }
.d-timeline .tl-match span:last-child { text-align: right; }
.d-timeline .bracket-mini { margin-top: 20px; padding-top: 16px; border-top: 1px solid #252a34; }
.d-timeline .tb-match { background: #111318; border: 1px solid #2e3440; border-radius: 6px; }
.d-timeline .tb-slot { color: #a8adb8; border-color: #2e3440; font-size: 0.75rem; height: 30px; }
.d-timeline .tb-slot.win .sc { color: #8ab4f8; }
.d-timeline .clan-pick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 20px; }
.d-timeline .pick {
  padding: 10px 12px; background: #22262f; border-radius: 8px; cursor: pointer; font-size: 0.82rem;
}
.d-timeline .pick:hover { background: #2a2f3a; }
.d-timeline .pick .s { font-size: 0.7rem; color: #6b7280; margin-right: 6px; }
.d-timeline .pick .pl { display: none; margin-top: 6px; font-size: 0.72rem; color: #8a909c; }
.d-timeline .pick.open .pl { display: block; }
.d-timeline .standings-mini { border-top: 1px solid #252a34; padding-top: 12px; }
.d-timeline .st-row {
  display: grid; grid-template-columns: 32px 1fr 60px; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid #22262f; font-size: 0.85rem;
}
.d-timeline .st-row span:first-child { font-weight: 800; color: #555; }

@media (max-width: 900px) {
  .d-sidebar { grid-template-columns: 1fr; }
  .d-sidebar .side { position: relative; height: auto; border-right: 0; border-bottom: 1px solid #252a34; }
  .d-arena .stats { grid-template-columns: repeat(2, 1fr); }
  .d-arena .podium { grid-template-columns: 1fr; }
  .d-cinema .clan-strip { grid-template-columns: repeat(2, 1fr); }
  .d-cinema .slide { padding: 48px 56px 48px 24px; }
  .d-cinema .final-list li { grid-template-columns: 40px 1fr; }
  .d-cinema .final-list .pts, .d-cinema .final-list .prize { grid-column: 2; }
  .d-split .layout { grid-template-columns: 1fr; }
  .d-split .clan-pane, .d-split .view-pane { max-height: none; }
  .d-timeline .clan-pick { grid-template-columns: 1fr; }
  .d-panels .panel-tabs, .d-panels .panel-body, .d-panels .top { padding-left: 20px; padding-right: 20px; }
}