:root {
  --bg: #ffffff;
  --fg: #0a0a0a;
  --muted: #6b7280;
  --muted-2: #9ca3af;
  --border: #e5e7eb;
  --soft: #f6f7f8;
  --soft-2: #eef0f2;
  --rail: #d1d5db;
  --correct: #16a34a;
  --correct-bg: #ecfdf5;
  --wrong: #dc2626;
  --wrong-bg: #fef2f2;
  --shadow-sticker:
    0 1px 2px rgba(0, 0, 0, 0.05),
    0 6px 14px rgba(0, 0, 0, 0.07),
    0 22px 36px rgba(0, 0, 0, 0.10);
  --shadow-sticker-lift:
    0 2px 4px rgba(0, 0, 0, 0.06),
    0 10px 22px rgba(0, 0, 0, 0.10),
    0 32px 60px rgba(0, 0, 0, 0.16);
  --shadow-flying:
    0 6px 12px rgba(0, 0, 0, 0.10),
    0 24px 48px rgba(0, 0, 0, 0.20);
  --radius: 16px;
  --radius-sm: 14px;
  --font-body: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  --font-display: "Sora", "Avenir Next", -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { height: 100%; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.layout { flex: 1 0 auto; }
.footer { flex-shrink: 0; }
:root { --topbar-h: 64px; }

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 10px 32px 10px 26px;
  border-bottom: 1px solid var(--fg);
  position: sticky;
  top: 0;
  background: var(--fg);
  color: white;
  z-index: 10;
}
.topbar .brand-name { color: white; }
.topbar .score-label { color: rgba(255,255,255,0.6); }
.topbar .score-value { color: white; }
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.brand-logo {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: block;
}
.brand-name {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 800;
  letter-spacing: -0.035em;
  margin: 0;
  line-height: 1.05;
}
.score { display: flex; gap: 12px; align-items: baseline; }
.score-label {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0;
  font-weight: 600;
}
.score-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

.layout {
  display: flex;
  align-items: stretch;
}

/* Desktop: sidebar is fixed to the left edge so it doesn't inflate the
   layout's height (which used to push the footer below the fold). The
   layout and footer are offset right by the sidebar's width. */
.sidebar {
  width: 300px;
  position: fixed;
  top: var(--topbar-h);
  bottom: var(--footer-h, 0px);
  left: 0;
  padding: 20px 14px;
  border-right: 1px solid var(--border);
  background: var(--bg);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 5;
}
.layout { margin-left: 300px; }

.main {
  --main-gap: 14px;
  flex: 1;
  min-width: 0;
  padding: 18px 32px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--main-gap);
}

.pool, .timeline, .actions {
  width: 100%;
  max-width: 1400px;
  margin: 0 !important;
}
.team-btn {
  --team-color: var(--fg);
  --team-text: white;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.05s;
}
.team-btn:hover:not(.active) {
  background: color-mix(in srgb, var(--team-color) 14%, white);
}
.team-btn:active { transform: translateY(1px); }
.team-btn.active {
  background: var(--team-color);
  color: var(--team-text);
}
.team-logo {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex-shrink: 0;
}
.team-name {
  flex: 1;
  min-width: 0;
  margin-left: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.team-btn .team-score {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--soft-2);
  color: var(--muted);
  padding: 2px 9px;
  border-radius: 999px;
  flex-shrink: 0;
}
.team-btn.active .team-score {
  background: white;
  color: var(--team-color);
}

/* ---------------- POOL ---------------- */
/* Grid: each logo gets a fixed cell on render, so dragging one out doesn't
   reflow the others. Cols + height are set by JS. */
.pool {
  --pool-logo: 110px;
  --pool-gap: 28px;
  --pool-pad: 18px;
  --pool-hint-h: 16px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--pool-cols, 5), var(--pool-logo));
  gap: var(--pool-gap);
  padding: var(--pool-pad) var(--pool-pad) calc(var(--pool-pad) + var(--pool-hint-h));
  background: transparent;
  border: none;
  border-radius: 0;
  margin-bottom: 28px;
  justify-content: center;
  align-content: center;
}
.pool:has(.result:not([hidden])) .pool-hint { display: none; }
.pool-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  margin: 0;
  text-align: center;
  font-size: 12px;
  color: var(--muted-2);
  font-weight: 500;
  pointer-events: none;
  letter-spacing: 0.01em;
}
.pool-hint b { font-weight: 700; color: var(--fg); }
.pool .logo {
  width: var(--pool-logo);
  height: var(--pool-logo);
  justify-self: center;
  align-self: center;
}

/* ---------------- LOGO ---------------- */
/* Drop-shadow filter sits on the IMG (so it follows the transparent PNG's
   silhouette). The .logo div is free to host a hover background card without
   coercing the shadow into a rectangle. */
.logo {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
  flex-shrink: 0;
  touch-action: none;
  box-shadow: none;
  transition:
    transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1),
    background 0.18s ease,
    box-shadow 0.18s ease,
    border-radius 0.18s ease;
}
.logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
  /* Per-logo size correction: some source PNGs have lots of transparent
     padding or wide aspect ratios that make them read smaller than peers in
     the same slot. data.js can set `scale: 1.4` to compensate. */
  transform: scale(var(--logo-scale, 1));
  transform-origin: center;
  filter:
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.06))
    drop-shadow(0 8px 18px rgba(0, 0, 0, 0.10))
    drop-shadow(0 24px 40px rgba(0, 0, 0, 0.10));
  transition: filter 0.18s ease;
}
.logo:hover img {
  filter:
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.08))
    drop-shadow(0 14px 28px rgba(0, 0, 0, 0.14))
    drop-shadow(0 36px 60px rgba(0, 0, 0, 0.16));
}
.logo:hover {
  transform: translateY(-3px) scale(1.04);
}
.pool .logo:hover {
  transform: translateY(-4px) scale(1.7);
  z-index: 50;
}
.pool .logo:hover img {
  filter:
    drop-shadow(0 4px 10px rgba(0, 0, 0, 0.10))
    drop-shadow(0 18px 36px rgba(0, 0, 0, 0.16))
    drop-shadow(0 44px 80px rgba(0, 0, 0, 0.18));
}
.logo.dragging {
  cursor: grabbing;
  z-index: 1000;
  transform: scale(1.04) rotate(-1.5deg);
  transition: none;
}
.logo.dragging img {
  filter:
    drop-shadow(0 6px 12px rgba(0, 0, 0, 0.14))
    drop-shadow(0 24px 48px rgba(0, 0, 0, 0.22));
}

/* (sizes now driven by --pool-logo on .pool) */

/* In timeline: smaller, no card, just PNG with shape-following shadow.
   Size is driven by --era-logo-size (set by JS based on viewport + bucket
   width) so logos shrink to fit narrow buckets on iPhone. */
.era .logo {
  width: var(--era-logo-size, 84px);
  height: var(--era-logo-size, 84px);
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.era .logo img {
  filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.06))
    drop-shadow(0 4px 10px rgba(0, 0, 0, 0.10))
    drop-shadow(0 12px 22px rgba(0, 0, 0, 0.10));
}
.era .logo:hover {
  transform: translateX(-50%);
}
.era .logo:hover img {
  filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.06))
    drop-shadow(0 4px 10px rgba(0, 0, 0, 0.10))
    drop-shadow(0 12px 22px rgba(0, 0, 0, 0.10));
}

/* ---------------- TIMELINE ---------------- */
.timeline {
  position: relative;
  display: flex;
  align-items: stretch;
  margin-bottom: 28px;
  /* height set by JS to fit the team that needs the most rows, then locked
     across all teams so the layout never jumps. */
  --logo-h: 84px;
  --logo-gap: 12px;
  --bar-h: 34px;        /* tall enough to hold the date label */
  --label-h: 0px;       /* dates now live INSIDE the bar */
  --logo-bar-gap: 10px;
}

.era {
  position: relative;
  min-width: 0;
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.era:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.era:last-child {
  border-right: 1px solid var(--border);
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* Drop zone covers the area above the bar — confined to the bucket so
   the visual highlight matches the bucket's bounds. The gap above the
   timeline is still covered by findEraAt()'s snap-to-nearest fallback,
   so there's no dead zone for hit-testing. */
.era-drop {
  position: absolute;
  top: 0;
  left: 0; right: 0;
  bottom: calc(var(--label-h) + var(--bar-h));
  z-index: 1;
}

/* The bar area is just the label's anchor zone — no fill or hairline.
   Fills black on hover to indicate the active drop target. */
.era-bar {
  position: absolute;
  left: 0; right: 0;
  bottom: var(--label-h);
  height: var(--bar-h);
  background: transparent;
  transition: none;
}
.era:first-child .era-bar { border-bottom-left-radius: 9px; }
.era:last-child  .era-bar { border-bottom-right-radius: 9px; }
.era.over .era-bar { background: var(--team-color, var(--fg)); }
.era.over .era-drop {
  background: color-mix(in srgb, var(--team-color, var(--fg)) 8%, transparent);
}
.era.over .era-years { color: var(--team-text, white); }
.era-years { transition: none; }

/* Years label sits centered INSIDE the bar at the bottom of each bucket.
   Dark by default — the date row IS the timeline's axis. */
.era-years {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
}
.era.narrow .era-years { opacity: 0; transition: opacity 0.15s; }
.era.narrow:hover .era-years,
.era.narrow.over .era-years { opacity: 1; }

/* Logos sit at row N above the bar. Row 0 = closest to bar. */
.era .logo {
  position: absolute;
  left: 50%;
  bottom: calc(var(--label-h) + var(--bar-h) + var(--logo-bar-gap)
               + var(--row, 0) * (var(--logo-h) + var(--logo-gap)));
  transform: translateX(-50%);
  z-index: 2;
}

/* Verdict: thin colored underline at the bottom of the bar instead of a
   full fill — keeps the timeline visually quiet. */
.era.correct .era-bar { box-shadow: inset 0 -3px 0 var(--correct); }
.era.wrong   .era-bar { box-shadow: inset 0 -3px 0 var(--wrong); }

/* Verdict badge */
.era .badge {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: white;
  z-index: 3;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.era.correct .badge { background: var(--correct); }
.era.wrong   .badge { background: var(--wrong); }
.era.revealed .badge { opacity: 1; transform: scale(1); }

/* ---------------- ACTIONS ---------------- */
.actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 40px;
}
.btn {
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.08s, opacity 0.15s, background 0.15s;
  letter-spacing: 0.01em;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-primary {
  background: var(--team-color, var(--fg));
  color: var(--team-text, white);
}
.btn-primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--team-color, var(--fg)) 88%, black);
}
.btn-ghost { background: white; color: var(--fg); border-color: var(--border); }
.btn-ghost:hover {
  background: var(--team-color, var(--fg));
  color: var(--team-text, white);
  border-color: var(--team-color, var(--fg));
}

/* Score lives inside the (now empty) pool after Guess. */
.result {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: var(--radius);
  background: transparent;
  pointer-events: none;
  animation: result-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.result[hidden] { display: none; }
.result .big {
  font-family: var(--font-display);
  font-size: clamp(56px, 8vw, 96px);
  font-weight: 800;
  display: block;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.result .sub {
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.result.perfect .big { color: var(--correct); }
.result.perfect .sub { color: var(--correct); }
@keyframes result-pop {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---------------- FOOTER ---------------- */
.footer {
  padding: 14px 32px;
  border-top: 1px solid var(--border);
  margin-top: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.footer p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.footer-left { justify-self: start; }
.footer-center { justify-self: center; text-align: center; }
.footer-right { justify-self: end; }
.footer a {
  color: var(--fg);
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.15s;
}
.footer a:hover { opacity: 0.7; }

@media (max-width: 900px) {
  .layout { flex-direction: column; margin-left: 0; }
  .sidebar {
    width: 100%;
    max-height: none;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: visible;
    border-right: none;
    border-bottom: 1px solid var(--border);
    /* Stay pinned below the topbar so the active team is always visible
       even after the user scrolls the page. */
    position: sticky;
    top: var(--topbar-h);
    bottom: auto;
    padding: 10px 14px;
    z-index: 4;
    -webkit-overflow-scrolling: touch;
  }
  .team-btn {
    border-radius: 999px;
    width: auto;
    white-space: nowrap;
    padding: 8px 12px;
    border: 1px solid var(--border);
    flex-shrink: 0;
  }
  .team-btn:hover { background: white; border-color: var(--fg); }
  /* Active pill: keep the team color so the user can clearly see what they
     pressed, with the team name still readable on top. */
  .team-btn.active {
    background: var(--team-color);
    color: var(--team-text);
    border-color: var(--team-color);
  }
  .team-btn.active .team-score {
    background: rgba(255, 255, 255, 0.85);
    color: var(--team-color);
  }
  .team-name { overflow: visible; }
}
@media (max-width: 1099px) {
  .pool { --pool-logo: 100px; --pool-gap: 20px; --pool-pad: 16px; }
}
@media (max-width: 720px) {
  .topbar { padding: 8px 16px; }
  .main { padding: 12px 16px; }
  .pool { --pool-logo: 88px; --pool-gap: 14px; --pool-pad: 14px; }
  .timeline {
    --logo-h: 72px;
    --logo-gap: 10px;
  }
  .footer { padding: 18px 20px; }
}

/* ---------------- iPhone (≤480px) ---------------- */
@media (max-width: 480px) {
  .topbar {
    padding: 8px 12px;
    gap: 10px;
  }
  .brand { gap: 8px; }
  .brand-logo { width: 24px; height: 24px; }
  .brand-name { font-size: 13px; line-height: 1.15; letter-spacing: -0.02em; }
  .score { gap: 6px; }
  .score-label { display: none; }
  .score-value { font-size: 18px; }

  .sidebar { padding: 8px 10px; gap: 6px; }
  .team-btn { padding: 6px 10px; font-size: 12.5px; gap: 4px; }
  .team-logo { width: 20px; height: 20px; }
  .team-btn .team-score {
    font-size: 11px;
    padding: 1px 7px;
  }

  .main {
    padding: 8px 10px 12px;
    --main-gap: 10px;
  }

  /* Pool: fit 4 narrow columns so even teams with many logos stay compact
     vertically on a phone. JS sets --pool-cols. */
  .pool {
    --pool-logo: 60px;
    --pool-gap: 10px;
    --pool-pad: 10px;
    --pool-hint-h: 14px;
    margin-bottom: 10px;
  }
  .pool-hint { font-size: 11px; bottom: 4px; }

  /* Timeline: shorter bar, smaller default logo. JS may further shrink
     --era-logo-size to fit narrow buckets when a team has many eras. */
  .timeline {
    --logo-h: 56px;
    --logo-gap: 8px;
    --bar-h: 26px;
    --logo-bar-gap: 6px;
    margin-bottom: 12px;
  }
  .era-years { font-size: 10px; letter-spacing: 0; }

  .actions { padding-top: 12px; gap: 8px; }
  .btn { font-size: 13px; padding: 8px 18px; }

  .result .big { font-size: 56px; }
  .result .sub { font-size: 12px; margin-top: 6px; }

  /* Footer collapses to a single centered line on phones — copyright is
     dropped to save space; the credit line is the meaningful one. */
  .footer {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 10px 14px;
    text-align: center;
  }
  .footer-left { display: none; }
  .footer-center, .footer-right {
    justify-self: center;
    text-align: center;
  }
  .footer p { font-size: 11px; line-height: 1.3; }
}