/* MostPops skin: Scoreboard. Colors and fonts first (light, then dark), layout changes below. */
[data-skin="scoreboard"] {
  --paper: #e8ebef;
  --card: #15181d;
  --ink: #15181d;
  --muted: #58606b;
  --cobalt: #c97c00;
  --gold: #ffb020;
  --line: #cfd4db;
  --tileInk: #f4f6f8;
  --tileMuted: #98a1ad;
  --tileLine: #2a2f37;
  --field: #ffffff;
  --display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius-lg: 8px;
  --radius-sm: 6px;
}
@media (prefers-color-scheme: dark) {
  [data-skin="scoreboard"]:not([data-mode="light"]) {
  --paper: #0b0d10;
  --card: #15181d;
  --ink: #eef1f4;
  --muted: #98a1ad;
  --cobalt: #ffb020;
  --gold: #ffb020;
  --line: #262b33;
  --tileInk: #f4f6f8;
  --tileMuted: #98a1ad;
  --tileLine: #2a2f37;
  --field: #15181d;
  }
}
[data-skin="scoreboard"][data-mode="dark"] {
  --paper: #0b0d10;
  --card: #15181d;
  --ink: #eef1f4;
  --muted: #98a1ad;
  --cobalt: #ffb020;
  --gold: #ffb020;
  --line: #262b33;
  --tileInk: #f4f6f8;
  --tileMuted: #98a1ad;
  --tileLine: #2a2f37;
  --field: #15181d;
}
[data-skin="scoreboard"][data-mode="light"] { color-scheme: light; }
[data-skin="scoreboard"][data-mode="dark"] { color-scheme: dark; }

[data-skin="scoreboard"] .logo { font-stretch: 75%; font-weight: 800; letter-spacing: .01em; }
[data-skin="scoreboard"] .logo-8 { border-radius: 4px; background: var(--gold); color: #15181d; font-family: var(--mono); }
[data-skin="scoreboard"] .hero h1 { font-stretch: 75%; font-weight: 800; letter-spacing: -.01em; }
[data-skin="scoreboard"] .grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
[data-skin="scoreboard"] .tile { flex-direction: row; align-items: center; min-height: 0; padding: .75rem 1rem .75rem .75rem; gap: 1rem; color: var(--tileInk); border-color: var(--tileLine); }
[data-skin="scoreboard"] .rank { font-family: var(--mono); font-weight: 800; font-size: 2rem; line-height: 1; min-width: 3.4rem; padding: .45rem 0; text-align: center; color: var(--gold); background: #0b0d10; border-radius: 4px; text-shadow: 0 0 14px rgba(255, 176, 32, .45); }
[data-skin="scoreboard"] .is-first { border-color: var(--gold); box-shadow: none; }
[data-skin="scoreboard"] .is-first .rank { background: var(--gold); color: #15181d; text-shadow: none; }
[data-skin="scoreboard"] .tile img { position: static; order: 3; margin-left: auto; width: 44px; height: 44px; border-radius: 4px; }
[data-skin="scoreboard"] .tile-text { margin-top: 0; }
[data-skin="scoreboard"] .tile-text a, [data-skin="scoreboard"] .tile-text span { font-weight: 700; font-size: 1.05rem; color: var(--tileInk); }
[data-skin="scoreboard"] .tile-text small { color: var(--tileMuted); }
[data-skin="scoreboard"] .section { font-stretch: 75%; font-weight: 800; }
[data-skin="scoreboard"] .card { color: var(--tileInk); border-color: var(--tileLine); }
[data-skin="scoreboard"] .card h3, [data-skin="scoreboard"] .card h3 a { color: var(--tileInk); font-stretch: 75%; }
[data-skin="scoreboard"] .compact li { border-bottom: 1px solid var(--tileLine); padding: .15rem 0; }
[data-skin="scoreboard"] .compact .n { font-family: var(--mono); color: var(--gold); }
[data-skin="scoreboard"] .more { color: var(--gold); }
[data-skin="scoreboard"] .places a { border-radius: 4px; background: var(--field); }
[data-skin="scoreboard"] .search input, [data-skin="scoreboard"] .search-pop, [data-skin="scoreboard"] .mode-toggle { background: var(--field); }
[data-skin="scoreboard"] .mode-toggle { border-radius: 6px; }
[data-skin="scoreboard"] .mode-toggle:hover { border-color: var(--gold); color: var(--ink); }

/* Movement badges, LED style */
[data-skin="scoreboard"] .move { order: 2; margin-left: auto; align-self: center; font-family: var(--mono); border-radius: 4px; background: #0b0d10; --up: #4ade80; --down: #f87171; }
[data-skin="scoreboard"] .move-up { color: var(--up); } [data-skin="scoreboard"] .move-down { color: var(--down); } [data-skin="scoreboard"] .move-same { color: var(--tileMuted); }
[data-skin="scoreboard"] .move-new { color: #15181d; background: var(--gold); }
[data-skin="scoreboard"] .tile img { margin-left: .75rem; }
[data-skin="scoreboard"] .tile:not(:has(.move)) img { margin-left: auto; }

/* Split-flap rank boxes: a hairline through the middle, flipping in one after another */
[data-skin="scoreboard"] .tile { perspective: 600px; transition: border-color .2s, transform .2s; animation: sb-in .45s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
[data-skin="scoreboard"] .tile:hover { border-color: var(--gold); transform: translateY(-2px); }
[data-skin="scoreboard"] .rank { position: relative; overflow: hidden; animation: sb-flip .65s cubic-bezier(.3, .6, .3, 1) both; animation-delay: calc(var(--i, 0) * 70ms + 150ms); }
[data-skin="scoreboard"] .rank::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .6); }
[data-skin="scoreboard"] .is-first { animation: sb-in .45s cubic-bezier(.2, .7, .2, 1) both, sb-glow 2.4s ease-in-out .8s 3; }
@keyframes sb-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes sb-flip { 0% { transform: rotateX(90deg); } 65% { transform: rotateX(-18deg); } 100% { transform: rotateX(0); } }
@keyframes sb-glow { 50% { box-shadow: 0 0 0 1px var(--gold), 0 0 28px rgba(255, 176, 32, .35); } }

/* Ticker as an LED strip, dark in both modes */
[data-skin="scoreboard"] .ticker { background: #0b0d10; border-color: #262b33; font-family: var(--mono); font-size: .85rem; }
[data-skin="scoreboard"] .tk-label { background: var(--gold); color: #15181d; font-family: var(--display); font-stretch: 75%; font-size: .95rem; }
[data-skin="scoreboard"] .tk-list a b { color: var(--gold); font-weight: 700; text-shadow: 0 0 10px rgba(255, 176, 32, .35); }
[data-skin="scoreboard"] .tk-where { color: #98a1ad; }
[data-skin="scoreboard"] .tk-list li::before { background: var(--gold); box-shadow: 0 0 8px rgba(255, 176, 32, .6); border-radius: 50%; }

/* Faint LED dot grid behind the page */
[data-skin="scoreboard"] body { background-image: radial-gradient(color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1.4px); background-size: 16px 16px; }

[data-skin="scoreboard"] .compact li { transition: background .15s; }
[data-skin="scoreboard"] .insight .row-ctx, [data-skin="scoreboard"] .insight-note { color: var(--tileMuted); }
[data-skin="scoreboard"] .rows li { border-top-color: var(--tileLine); }
[data-skin="scoreboard"] .pill { font-family: var(--mono); color: var(--gold); background: #0b0d10; border-radius: 4px; }
[data-skin="scoreboard"] .tops a { background: var(--card); border-color: var(--tileLine); color: var(--tileInk); border-radius: 6px; }
[data-skin="scoreboard"] .tops-place { color: var(--tileMuted); font-family: var(--mono); font-size: .78rem; }
[data-skin="scoreboard"] .tops-item { color: var(--gold); }
[data-skin="scoreboard"] .tops a:hover { border-color: var(--gold); }
[data-skin="scoreboard"] .card:hover { border-color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  [data-skin="scoreboard"] .tile, [data-skin="scoreboard"] .rank, [data-skin="scoreboard"] .is-first { animation: none; }
  [data-skin="scoreboard"] .tile:hover { transform: none; }
}
@media (max-width: 860px) { [data-skin="scoreboard"] .grid { grid-template-columns: 1fr; } [data-skin="scoreboard"] .rank { font-size: 1.6rem; min-width: 2.9rem; } }