:root {
  --bg: #0f1420;
  --bg-elev: #171d2e;
  --text: #f2f4f8;
  --text-dim: #9aa3b8;
  --accent: #4f8cff;
  --accent-2: #ffb545;
  --good: #3ecf6e;
  --bad: #ff5d5d;
  --border: #2a3350;
  --tile-empty: #232b42;
  --radius: 14px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Skins ---------- */
/* Skins only change the accent palette. No team names or logos, just colors. */
body[data-skin="diamond"]     { --accent:#2fae66; --accent-2:#e8ffe0; }
body[data-skin="hardwood"]    { --accent:#ff7a1a; --accent-2:#151515; }
body[data-skin="gridiron"]    { --accent:#c7d0e0; --accent-2:#1b2540; }
body[data-skin="ice"]         { --accent:#5ad1ff; --accent-2:#e9fbff; }
body[data-skin="marquee"]     { --accent:#f2c94c; --accent-2:#181818; }
body[data-skin="neon"]        { --accent:#ff4fd8; --accent-2:#4fe1ff; }
body[data-skin="championship"]{ --accent:#b98cff; --accent-2:#f2c94c; }

/* Tier 2 — deeper unlocks get a textured finish. Pure CSS gradients only,
   no images/logos, so there's nothing here that infringes on anyone. */
body[data-skin="diamond-turf"] {
  --accent:#2fae66; --accent-2:#e8ffe0;
  background-image: repeating-linear-gradient(45deg, #16321f 0 22px, #1d4229 22px 44px);
}
body[data-skin="hardwood-floor"] {
  --accent:#ff7a1a; --accent-2:#ffe6cf;
  background-image: repeating-linear-gradient(90deg, #5c3818 0 26px, #6e451f 26px 28px, #6a431f 28px 52px);
}
body[data-skin="gridiron-turf"] {
  --accent:#c7d0e0; --accent-2:#1b2540;
  background-image: repeating-linear-gradient(180deg, #14351b 0 38px, #ffffff26 38px 40px, #1b4322 40px 78px, #ffffff26 78px 80px);
}
body[data-skin="ice-rink"] {
  --accent:#5ad1ff; --accent-2:#e9fbff;
  background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.10), transparent 40%),
                     radial-gradient(circle at 75% 65%, rgba(255,255,255,0.07), transparent 35%),
                     linear-gradient(180deg, #0e2433, #123449);
}
body[data-skin="marquee-lights"] {
  --accent:#f2c94c; --accent-2:#1c1c1c;
  background-image: radial-gradient(circle, #f2c94c 2px, transparent 3px);
  background-size: 24px 24px;
}
body[data-skin="neon-grid"] {
  --accent:#ff4fd8; --accent-2:#4fe1ff;
  background-image: linear-gradient(rgba(255,79,216,0.18) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(79,225,255,0.18) 1px, transparent 1px);
  background-size: 30px 30px;
}
body[data-skin="championship-foil"] {
  --accent:#b98cff; --accent-2:#f2c94c;
  background-image: repeating-linear-gradient(45deg, rgba(185,140,255,0.16) 0 12px, rgba(242,201,76,0.16) 12px 24px);
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  min-height: 100vh;
}

.site-header {
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
  position: sticky; top:0; background: var(--bg); z-index: 10;
  flex-wrap: wrap; gap: 10px;
}
.brand { display:flex; align-items:center; gap:8px; font-weight:800; letter-spacing:0.5px; }
.brand-mark { font-size:1.4rem; }
.brand-name { font-size:1.05rem; }

.tabs { display:flex; gap:6px; background: var(--bg-elev); padding:4px; border-radius: 999px; border:1px solid var(--border); }
.tab { border:none; background:transparent; color: var(--text-dim); padding:8px 18px; border-radius:999px; font-weight:600; cursor:pointer; font-size:0.9rem; }
.tab.active { background: var(--accent); color:#0f1420; }

.header-actions { display:flex; gap:6px; }
.icon-btn { background: var(--bg-elev); border:1px solid var(--border); color: var(--text); border-radius:10px; padding:8px 10px; cursor:pointer; font-size:1rem; }
.icon-btn:hover { border-color: var(--accent); }

.ad-slot {
  display:flex; align-items:center; justify-content:center;
  background: repeating-linear-gradient(45deg, var(--bg-elev), var(--bg-elev) 10px, #1c2338 10px, #1c2338 20px);
  border: 1px dashed var(--border); color: var(--text-dim);
  font-size: 0.75rem; margin: 14px auto; border-radius: 8px;
}
.ad-top, .ad-footer { max-width: 728px; height: 60px; }
.ad-mid { max-width: 300px; height: 100px; }

main { max-width: 900px; margin: 0 auto; padding: 20px; }
.view { display:none; }
.view.active { display:block; }

.tagline { color: var(--text-dim); margin: 4px 0 18px; font-size:0.95rem; }

.category-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 560px) { .category-grid { grid-template-columns: repeat(4, 1fr); } }

.category-card {
  background: var(--bg-elev); border:1px solid var(--border); border-radius: var(--radius);
  padding: 22px 12px; text-align:center; cursor:pointer; transition: transform .12s, border-color .12s;
  position: relative;
}
.category-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.category-card .cc-label { font-weight:800; font-size:1.05rem; }
.category-card .cc-mode { color: var(--text-dim); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.06em; margin-top:6px; display:block; }
.category-card .cc-done { position:absolute; top:8px; right:10px; font-size:0.85rem; }
.category-card .cc-streak { margin-top:8px; font-size:0.8rem; color: var(--accent-2); }

/* Streak hype — escalates in color/motion as the streak climbs, used on both
   the results screen and the category-card badges. */
.streak-hype { font-weight:800; transition: color .2s; }
.streak-hype.warm { color: var(--accent-2); }
.streak-hype.hot { color:#ff8a3d; animation: streakPulse 1.4s ease-in-out infinite; }
.streak-hype.epic { color:#ff5d5d; animation: streakPulse 1s ease-in-out infinite; }
.streak-hype.legend { color:#ffd54f; animation: streakPulse .8s ease-in-out infinite; text-shadow: 0 0 12px rgba(255,213,79,0.55); }
@keyframes streakPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

.back-btn { background:none; border:none; color: var(--accent); font-weight:700; cursor:pointer; padding:8px 0; font-size:0.95rem; }

.puzzle-card { background: var(--bg-elev); border:1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-top: 8px; }
.puzzle-header { display:flex; justify-content:space-between; align-items:center; margin-bottom: 14px; }
.puzzle-header h2 { margin:0; font-size:1.1rem; }
.mode-pill { background: var(--accent); color:#0f1420; font-weight:800; font-size:0.7rem; padding:4px 10px; border-radius:999px; text-transform:uppercase; }

.prompt-text { font-size:1.15rem; line-height:1.5; margin-bottom:18px; }

/* Timeline mode */
.year-input-row { display:flex; gap:8px; margin-bottom: 14px; }
.year-input-row input { flex:1; font-size:1.2rem; padding:10px 14px; border-radius:10px; border:1px solid var(--border); background: var(--bg); color: var(--text); }
.year-input-row button, .guess-btn { background: var(--accent); color:#0f1420; border:none; font-weight:800; padding:10px 18px; border-radius:10px; cursor:pointer; }
/* Score tiles — bullseye/green/yellow/red, used inline in guess reveals and
   anywhere else a quick "how'd that go" color needs to show up. Fixed colors
   on purpose (not tied to --accent) so the meaning stays readable no matter
   which skin is active. */
.tile { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:7px; font-size:0.95rem; vertical-align:middle; }
.tile.exact { background: linear-gradient(135deg, #ffe27a, #ffb545); color:#241800; }
.tile.green { background: var(--good); color:#06210f; }
.tile.yellow { background: #f2c94c; color:#241800; }
.tile.red { background: var(--bad); color:#2a0606; }

/* Moneyline mode */
.ml-item { border-top:1px solid var(--border); padding: 14px 0; }
.ml-item:first-child { border-top:none; }
.ml-prompt { margin-bottom:10px; }
.ml-line { color: var(--accent-2); font-weight:800; }
.ml-buttons { display:flex; gap:10px; }
.ml-buttons button { flex:1; padding:12px; border-radius:10px; border:1px solid var(--border); background: var(--bg); color: var(--text); font-weight:800; cursor:pointer; font-size:1rem; }
.ml-buttons button:hover { border-color: var(--accent); }
.ml-buttons button.correct { background: var(--good); color:#06210f; border-color: var(--good); }
.ml-buttons button.incorrect { background: var(--bad); color:#2a0606; border-color: var(--bad); }
.ml-buttons button:disabled { cursor:default; opacity:0.55; }
.ml-reveal { color: var(--text-dim); font-size:0.85rem; margin-top:6px; }
.ml-reveal-detail { display:inline-block; margin-top:4px; color: var(--text); }

/* Headline mode */
.clue-list { list-style:none; padding:0; margin:0 0 16px; display:flex; flex-direction:column; gap:8px; }
.clue-list li { background: var(--tile-empty); padding:10px 14px; border-radius:8px; opacity:0; transform: translateY(6px); animation: clueIn .3s forwards; }
@keyframes clueIn { to { opacity:1; transform: translateY(0); } }
.guess-form { display:flex; gap:8px; }
.guess-form input { flex:1; font-size:1.05rem; padding:10px 14px; border-radius:10px; border:1px solid var(--border); background: var(--bg); color: var(--text); }

.result-box { text-align:center; padding: 10px 0; }
.result-box .rb-title { font-size:1.3rem; font-weight:800; margin-bottom:6px; }
.result-box .rb-sub { color: var(--text-dim); margin-bottom:18px; }
.result-box .rb-sub.streak-hype { font-size:1.05rem; }
.share-grid { font-size:1.6rem; letter-spacing:4px; margin: 14px 0; }
.result-actions { display:flex; flex-direction:column; gap:12px; align-items:center; }
.result-actions button { border-radius:12px; border:none; cursor:pointer; }
.share-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#0f1420; font-weight:900; font-size:1.15rem; padding:18px 48px;
  width:100%; max-width:320px; box-shadow: 0 8px 24px -6px var(--accent);
  letter-spacing:0.02em; transition: transform .12s;
}
.share-btn:hover { transform: translateY(-2px); }
.share-btn:active { transform: translateY(0); }
.close-btn { background:none; color: var(--text-dim); font-weight:600; font-size:0.85rem; padding:6px 10px; }
.countdown { margin-top: 14px; color: var(--text-dim); font-size:0.85rem; }

.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); align-items:center; justify-content:center; z-index:100; padding:20px; }
.modal-overlay.show { display:flex; }
.modal { background: var(--bg-elev); border:1px solid var(--border); border-radius: var(--radius); padding:24px; max-width:420px; width:100%; max-height:80vh; overflow:auto; }
.modal h3 { margin-top:0; }
.modal .close-x { float:right; background:none; border:none; color: var(--text-dim); font-size:1.2rem; cursor:pointer; }
.skin-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px; }
.skin-swatch { border-radius:10px; padding:10px 4px; text-align:center; font-size:0.65rem; line-height:1.3; cursor:pointer; border:2px solid transparent; font-weight:700; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,0.6); }
.skin-swatch.locked { opacity:0.35; cursor:not-allowed; }
.skin-swatch.active { border-color: var(--text); }
.stat-row { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--border); font-size:0.9rem; }
.stat-row:last-child { border-bottom:none; }

/* First-visit landing-tab slider */
.onboard-slider { position:relative; display:flex; background:var(--bg); border:1px solid var(--border); border-radius:999px; padding:4px; margin-top:16px; cursor:pointer; user-select:none; }
.onboard-slider .os-thumb {
  position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px);
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-radius:999px;
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.onboard-slider.on-right .os-thumb { transform: translateX(100%); }
.onboard-slider .os-option {
  flex:1; text-align:center; padding:16px 10px; border-radius:999px; font-weight:800;
  position:relative; z-index:1; color: var(--text-dim); transition: color .2s;
}
.onboard-slider .os-option.active { color:#0f1420; }

.site-footer {
  max-width:900px; margin: 30px auto 6px; padding: 14px 20px; display:flex; justify-content:space-between;
  color: var(--text-dim); font-size:0.8rem; border-top:1px solid var(--border);
}
.agent-link { color: var(--text-dim); text-decoration:none; }
.agent-link:hover { color: var(--accent); }