:root {
  --bg: #0b0d12;
  --panel: #141824;
  --panel-2: #1b2130;
  --text: #eef2ff;
  --muted: #9aa3b5;
  --accent: #ff2e63;
  --accent-2: #00d1ff;
  --line: #2a3347;
  --good: #3ddc97;
  --warn: #ffc857;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: radial-gradient(1200px 600px at 10% -10%, #1a1030 0%, var(--bg) 45%), var(--bg);
  color: var(--text);
  min-height: 100vh;
}
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 24px 16px 48px; }
.topbar {
  display: flex; gap: 12px; justify-content: space-between; align-items: center;
  margin-bottom: 20px; flex-wrap: wrap;
}
.brand { font-weight: 800; letter-spacing: 0.02em; font-size: 1.15rem; }
.brand span { color: var(--accent); }
.nav { display: flex; gap: 12px; flex-wrap: wrap; }
.card {
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.muted { color: var(--muted); }
.grid-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.meta-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
}
.meta-item .k { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.meta-item .v { font-size: 0.98rem; margin-top: 4px; font-weight: 600; word-break: break-word; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
tr:hover td { background: rgba(255,255,255,0.02); }
.rank {
  font-weight: 800; color: var(--accent-2); width: 48px;
}
.pts { font-weight: 800; color: var(--good); }
.pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: rgba(255,46,99,0.12); color: #ffb3c5; font-size: 0.78rem; margin-right: 4px;
}
.games { display: flex; flex-wrap: wrap; gap: 8px; }
.game-chip {
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px;
  background: rgba(0,209,255,0.06);
}
.btn, button, input[type=submit] {
  appearance: none; border: 0; border-radius: 10px;
  background: var(--accent); color: white; font-weight: 700;
  padding: 10px 14px; cursor: pointer;
}
.btn.secondary, button.secondary { background: #2b3550; }
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--text); }
input, textarea {
  width: 100%; background: #0e1320; color: var(--text);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
}
label { display: block; font-size: 0.85rem; color: var(--muted); margin: 12px 0 6px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.alert {
  padding: 12px 14px; border-radius: 12px; margin-bottom: 12px;
  border: 1px solid var(--line);
}
.alert.ok { background: rgba(61,220,151,0.1); color: #b6f5d6; }
.alert.err { background: rgba(255,46,99,0.12); color: #ffc1d0; }
.alert.warn { background: rgba(255,200,87,0.12); color: #ffe2a8; }
.points-table input { max-width: 100px; }
.footer { margin-top: 24px; color: var(--muted); font-size: 0.85rem; }
.user { font-weight: 700; }
.sub { font-size: 0.8rem; color: var(--muted); }
h1 { margin: 0 0 8px; font-size: 1.6rem; }
h2 { margin: 0 0 12px; font-size: 1.15rem; }
@media (max-width: 700px) {
  .hide-sm { display: none; }
  th, td { padding: 8px 6px; font-size: 0.92rem; }
}

/* —— Visitor /top landing (QR target) —— */
.top-body { min-height: 100vh; }
.top-wrap { max-width: 980px; padding-top: 18px; }
.top-hero {
  text-align: center;
  margin-bottom: 18px;
  padding: 8px 8px 4px;
}
.top-hero-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.top-hero-title {
  margin: 6px 0 4px;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  background: linear-gradient(90deg, #ffe9a8 0%, #ffd56a 35%, #fff 55%, #00d1ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.top-hero-season {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--accent-2);
}
.top-hero-dates { font-size: 0.88rem; margin-top: 4px; }
.top-back { margin-top: 10px; font-weight: 700; }
.top-card { padding: 14px 16px; }
.top-section-label {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 800;
  margin-bottom: 10px;
}
.top-game-title { margin: 0 0 6px; font-size: 1.35rem; }
.top-games { gap: 10px; }
.top-games .game-chip {
  font-weight: 700;
  padding: 8px 14px;
}
.top-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.top-table th { white-space: nowrap; }
.top-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.top-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.15);
  background: #2a3347;
  flex-shrink: 0;
}
.top-places { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.top-places .pill {
  margin-right: 0;
  text-decoration: none;
  border: 1px solid transparent;
}
.top-places a.pill:hover { border-color: rgba(0,209,255,0.35); text-decoration: none; }
.pill.place-1 { background: rgba(255, 213, 106, 0.16); color: #ffe9a8; }
.pill.place-2 { background: rgba(201, 212, 232, 0.14); color: #e8eef8; }
.pill.place-3 { background: rgba(212, 149, 106, 0.16); color: #f0c19a; }
.medal-cell { white-space: nowrap; font-weight: 800; }
.medal-count.gold { color: #ffd56a; }
.medal-count.silver { color: #d7deea; }
.medal-count.bronze { color: #e0a878; }
.top-row-podium.rank-1 td { background: rgba(255, 213, 106, 0.06); }
.top-row-podium.rank-2 td { background: rgba(201, 212, 232, 0.05); }
.top-row-podium.rank-3 td { background: rgba(212, 149, 106, 0.05); }
.top-footer { text-align: center; }


/* /top title → TV */
.top-hero-title-link {
  text-decoration: none;
  background: linear-gradient(90deg, #ffe9a8 0%, #ffd56a 35%, #fff 55%, #00d1ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.top-hero-title-link:hover,
.top-hero-title-link:focus-visible {
  text-decoration: none;
  filter: brightness(1.1);
}

/* Points explained dropdown */
.top-points-card { padding: 0; overflow: hidden; }
.top-points-details { padding: 0; }
.top-points-summary {
  list-style: none;
  cursor: pointer;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.82rem;
  color: var(--accent-2);
  padding: 14px 16px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.top-points-summary::-webkit-details-marker { display: none; }
.top-points-summary::after { content: " ▾"; opacity: 0.7; }
details[open] > .top-points-summary::after { content: " ▴"; }
.top-points-body {
  padding: 0 16px 16px;
  border-top: 1px solid var(--line);
}
.top-points-intro { margin: 12px 0; font-size: 0.92rem; line-height: 1.45; }
.top-points-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.top-points-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  font-weight: 800;
  font-size: 0.9rem;
}
.top-points-item.podium-1 { border-color: rgba(255, 213, 106, 0.35); }
.top-points-item.podium-2 { border-color: rgba(201, 212, 232, 0.3); }
.top-points-item.podium-3 { border-color: rgba(212, 149, 106, 0.3); }
.top-points-pts { color: var(--good); font-variant-numeric: tabular-nums; }

/* TV flip: explicit days left (esp. mobile) */
.tv-flip-days-left {
  display: none;
  margin-top: 4px;
  font-size: clamp(0.62rem, 1.15vh, 0.82rem);
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #ffe9a8;
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  padding: 0 4px;
}
.tv-flip.ended .tv-flip-days-left { color: var(--accent); }

/* —— Vertical TV mode (portrait 1080×1920 kiosk, TOP 15) —— */
.tv-body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(900px 500px at 50% -5%, #2a1240 0%, transparent 55%),
    radial-gradient(700px 400px at 100% 100%, #0a2a3a 0%, transparent 50%),
    var(--bg);
  overflow-x: hidden;
}
.tv-screen {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(14px, 1.6vh, 28px) clamp(16px, 2.2vw, 32px) clamp(10px, 1.2vh, 20px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vh, 22px);
  box-sizing: border-box;
}
/* Exact portrait TV canvas */
.tv-screen.tv-portrait-1080x1920 {
  max-width: 1080px;
}

/* Matching corner widgets (flip clock left, QR right) */
.tv-corner {
  position: absolute;
  top: clamp(12px, 1.4vh, 22px);
  z-index: 5;
  width: clamp(108px, 12.5vh, 132px);
  min-height: clamp(108px, 12.5vh, 132px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  border-radius: 14px;
  box-sizing: border-box;
}
.tv-corner-left { left: clamp(12px, 1.6vw, 22px); }
.tv-corner-right { right: clamp(12px, 1.6vw, 22px); }

.tv-qr {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 209, 255, 0.25);
  touch-action: manipulation;
}
a.tv-qr:hover,
a.tv-qr:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
  text-decoration: none;
}
.tv-qr img {
  display: block;
  width: clamp(78px, 9vh, 100px);
  height: clamp(78px, 9vh, 100px);
}
.tv-qr-label {
  font-size: clamp(0.48rem, 0.85vh, 0.68rem);
  font-weight: 700;
  color: #1a1f2c;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Flip-clock day counter (same footprint as QR) */
.tv-flip {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 4px 8px;
  border-radius: 14px;
  background: linear-gradient(180deg, #1a2030 0%, #0e121c 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  box-sizing: border-box;
}
.tv-flip-digits {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}
.tv-flip-card {
  position: relative;
  width: clamp(34px, 4.2vh, 44px);
  height: clamp(48px, 5.8vh, 60px);
  border-radius: 8px;
  background: linear-gradient(180deg, #2a3144 0%, #151a26 48%, #0c1018 52%, #1a2030 100%);
  border: 1px solid rgba(255, 213, 106, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 6px 14px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.tv-flip-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, 0.55);
  z-index: 2;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}
.tv-flip-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.55rem, 3.6vh, 2.15rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #ffe9a8;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}
.tv-flip-card.flip .tv-flip-face {
  animation: tv-flip-pop 0.45s ease-out;
}
@keyframes tv-flip-pop {
  0% { transform: rotateX(70deg); opacity: 0.35; }
  100% { transform: rotateX(0deg); opacity: 1; }
}
.tv-flip-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  line-height: 1.05;
}
.tv-flip-label {
  font-size: clamp(0.42rem, 0.75vh, 0.58rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9aa3b5;
}
.tv-flip-unit {
  font-size: clamp(0.7rem, 1.25vh, 0.95rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.tv-flip.ended .tv-flip-face { color: var(--accent); }
.tv-flip.ended .tv-flip-unit { color: var(--accent); }

.tv-header {
  text-align: center;
  flex: 0 0 auto;
  padding: 0 clamp(120px, 14vh, 150px);
}
.tv-brand {
  font-size: clamp(0.75rem, 1.35vh, 1.05rem);
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}
.tv-title {
  font-size: clamp(1.7rem, 4.2vh, 3.2rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.05;
  margin: 4px 0 6px;
  background: linear-gradient(90deg, #ffe9a8 0%, #ffd56a 35%, #fff 55%, #00d1ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tv-sub {
  color: var(--muted);
  font-size: clamp(0.72rem, 1.25vh, 0.95rem);
}
.tv-list {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.15vh, 16px);
  justify-content: space-evenly;
  min-height: 0;
}
.tv-block {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: clamp(12px, 1.8vw, 20px);
  padding: clamp(10px, 1.15vh, 18px) clamp(14px, 1.8vw, 22px);
  border-radius: clamp(14px, 1.5vh, 20px);
  background: linear-gradient(105deg, rgba(20,24,36,0.95) 0%, rgba(27,33,48,0.92) 100%);
  border: 2px solid var(--line);
  box-shadow: 0 8px 22px rgba(0,0,0,0.3);
  min-height: clamp(72px, 7.6vh, 104px);
}
.tv-block.podium {
  border-width: 2px;
  border-color: rgba(0, 209, 255, 0.35);
  background: linear-gradient(105deg, rgba(28, 36, 58, 0.98) 0%, rgba(40, 22, 48, 0.95) 100%);
  padding: clamp(12px, 1.35vh, 20px) clamp(16px, 2vw, 24px);
  min-height: clamp(84px, 8.6vh, 118px);
}
.tv-block.rank-1 {
  border-color: #ffd56a;
  box-shadow: 0 0 0 1px rgba(255, 213, 106, 0.25), 0 12px 32px rgba(255, 180, 40, 0.16);
}
.tv-block.rank-2 {
  border-color: #c9d4e8;
  box-shadow: 0 0 0 1px rgba(201, 212, 232, 0.2), 0 10px 26px rgba(160, 180, 220, 0.12);
}
.tv-block.rank-3 {
  border-color: #d4956a;
  box-shadow: 0 0 0 1px rgba(212, 149, 106, 0.22), 0 10px 26px rgba(200, 120, 60, 0.12);
}
.tv-rank-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 2.4em;
  gap: 3px;
}
.tv-rank {
  font-size: clamp(1.55rem, 3.2vh, 2.7rem);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  color: var(--accent-2);
}
.tv-block.podium .tv-rank {
  font-size: clamp(1.85rem, 3.8vh, 3.2rem);
}
.tv-block.rank-1 .tv-rank { color: #ffd56a; }
.tv-block.rank-2 .tv-rank { color: #e8eef8; }
.tv-block.rank-3 .tv-rank { color: #e0a878; }
.tv-move {
  font-size: clamp(0.6rem, 1.05vh, 0.8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  min-height: 1em;
}
.tv-move.up { color: var(--good); }
.tv-move.down { color: var(--accent); }
.tv-move.new {
  color: #ffc857;
  font-size: clamp(0.5rem, 0.9vh, 0.7rem);
  letter-spacing: 0.08em;
}
.tv-move.flat { color: #3a4458; }
/* Stern avatars ~12% smaller than previous TOP-20 dense layout */
.tv-avatar-wrap {
  --avatar-bg: #2a3347;
  width: clamp(36px, 4.0vh, 52px);
  height: clamp(36px, 4.0vh, 52px);
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--avatar-bg);
  border: 2px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.tv-block.podium .tv-avatar-wrap {
  width: clamp(44px, 4.8vh, 62px);
  height: clamp(44px, 4.8vh, 62px);
  border-color: rgba(255, 213, 106, 0.35);
}
.tv-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tv-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: clamp(0.95rem, 2vh, 1.35rem);
  color: #fff;
  background: linear-gradient(145deg, #3a4a6a, #1c2438);
}
.tv-main { min-width: 0; }
.tv-name {
  font-size: clamp(1.2rem, 2.55vh, 2.05rem);
  font-weight: 800;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tv-block.podium .tv-name {
  font-size: clamp(1.35rem, 2.9vh, 2.35rem);
}
.tv-meta {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  color: var(--muted);
  font-size: clamp(0.7rem, 1.2vh, 0.95rem);
  font-weight: 600;
  align-items: center;
}
.tv-medal {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-weight: 800;
  white-space: nowrap;
}
.tv-medal.gold { color: #ffd56a; }
.tv-medal.silver { color: #d7deea; }
.tv-medal.bronze { color: #e0a878; }
.tv-pts {
  text-align: right;
  flex-shrink: 0;
}
.tv-pts-num {
  display: block;
  font-size: clamp(1.35rem, 2.9vh, 2.35rem);
  font-weight: 900;
  line-height: 1;
  color: var(--good);
  font-variant-numeric: tabular-nums;
}
.tv-block.podium .tv-pts-num {
  font-size: clamp(1.55rem, 3.3vh, 2.7rem);
}
.tv-pts-label {
  display: block;
  margin-top: 2px;
  font-size: clamp(0.55rem, 0.95vh, 0.8rem);
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 700;
}
.tv-footer {
  flex: 0 0 auto;
  text-align: center;
  color: var(--muted);
  font-size: clamp(0.6rem, 1.05vh, 0.85rem);
  opacity: 0.9;
}
.tv-error, .tv-empty {
  padding: 24px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 16px;
  color: #ffc1d0;
  font-size: clamp(1rem, 2.5vh, 1.4rem);
}
.tv-empty { color: var(--muted); }

/* Portrait TV / phone-tall */
@media (orientation: portrait) {
  .tv-screen { max-width: 100%; }
}
/* Full-size portrait kiosk (1080×1920 class of displays) */
@media (orientation: portrait) and (min-height: 1600px) {
  .tv-screen {
    padding: 22px 28px 16px;
    gap: 18px;
  }
  .tv-list { gap: 14px; }
  .tv-block { min-height: 96px; }
  .tv-block.podium { min-height: 110px; }
}
@media (max-height: 900px) and (orientation: portrait) {
  .tv-games { display: none; }
  .tv-qr-label { display: none; }
}
/* Phones / short portrait: show clear "N days left" under flip digits */
@media (max-width: 700px), (max-height: 900px) and (orientation: portrait) {
  .tv-flip-caption-desktop { display: none; }
  .tv-flip-days-left { display: block; }
  .tv-corner-left {
    width: clamp(112px, 30vw, 148px);
    min-height: auto;
    height: auto;
  }
  .tv-flip {
    min-height: clamp(112px, 30vw, 148px);
    padding-bottom: 10px;
    justify-content: center;
  }
}
@media (max-height: 720px) and (orientation: portrait) {
  .tv-brand, .tv-sub { display: none; }
  .tv-corner { padding: 4px; }
}