@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400..700&family=IBM+Plex+Sans:wght@400;500;600&family=Fredoka:wght@500;600;700&display=swap');

@font-face {
  font-family: 'Lobster Two';
  src: url('fonts/LobsterTwo-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Lobster Two';
  src: url('fonts/LobsterTwo-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Lobster Two';
  src: url('fonts/LobsterTwo-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'Lobster Two';
  src: url('fonts/LobsterTwo-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

:root {
  --malt: #1B1108;
  --malt-light: #241807;
  --card: #2B1D0E;
  --amber: #E8A33D;
  --amber-deep: #C77A22;
  --foam: #F5EFDD;
  --muted: #B8A788;
  --line: #3E2D16;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--malt);
  color: var(--foam);
  font-family: 'IBM Plex Sans', sans-serif;
  line-height: 1.5;
}

main {
  max-width: 920px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}

.hero {
  text-align: center;
  padding: 40px 0 56px;
  position: relative;
}

.brand-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2.5vw, 18px);
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.brand-title {
  font-family: 'Lobster Two', 'Fraunces', cursive;
  font-weight: 700;
  font-size: clamp(2rem, 7vw, 3.4rem);
  margin: 0;
  letter-spacing: 0.005em;
  color: var(--amber);
  text-shadow:
    1px 1px 0 var(--amber-deep),
    2px 2px 0 var(--amber-deep),
    3px 3px 0 var(--amber-deep),
    4px 4px 0 var(--malt-light),
    5px 5px 0 var(--malt-light),
    6px 6px 0 var(--malt),
    8px 9px 14px rgba(0, 0, 0, 0.55);
}

.brand-mug {
  width: clamp(58px, 13vw, 108px);
  height: clamp(58px, 13vw, 108px);
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4));
}
.brand-mug-left { transform: scaleX(-1); }

.brand-row.toast .brand-mug-left {
  animation: brand-toast-left 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.brand-row.toast .brand-mug-right {
  animation: brand-toast-right 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes brand-toast-left {
  0%   { transform: scaleX(-1) translateX(0) rotate(0deg); }
  45%  { transform: scaleX(-1) translateX(min(30vw, 92px)) rotate(16deg); }
  60%  { transform: scaleX(-1) translateX(min(25vw, 76px)) rotate(7deg); }
  100% { transform: scaleX(-1) translateX(0) rotate(0deg); }
}
@keyframes brand-toast-right {
  0%   { transform: translateX(0) rotate(0deg); }
  45%  { transform: translateX(min(-30vw, -92px)) rotate(-16deg); }
  60%  { transform: translateX(min(-25vw, -76px)) rotate(-7deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

.eyebrow {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0 0 6px;
}

.big-number {
  font-family: 'Fredoka', 'Fraunces', sans-serif;
  font-weight: 600;
  font-size: clamp(3.5rem, 12vw, 6.5rem);
  margin: 0;
  color: var(--amber);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.goal-line {
  color: var(--muted);
  margin: 0 0 28px;
  font-size: 1.05rem;
}

.progress-track {
  max-width: 480px;
  height: 26px;
  margin: 0 auto;
  background: var(--malt-light);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(245, 239, 221, 0.05);
}

.progress-fill {
  height: 100%;
  width: 0%;
  min-width: 26px;
  background: linear-gradient(180deg, var(--amber) 0%, var(--amber-deep) 100%);
  border-radius: 999px 0 0 999px;
  transition: width 0.8s ease;
  position: relative;
  overflow: hidden;
}

.progress-foam {
  position: absolute;
  top: 0; right: -1px; bottom: 0;
  width: 10px;
  background: var(--foam);
  opacity: 0.75;
  border-radius: 999px;
}

.bubble {
  position: absolute;
  bottom: -6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(245, 239, 221, 0.55);
  animation: bubble-rise 3.2s ease-in infinite;
}
.bubble-1 { left: 20%; animation-delay: 0s; }
.bubble-2 { left: 52%; width: 3px; height: 3px; animation-delay: 1.1s; }
.bubble-3 { left: 78%; width: 5px; height: 5px; animation-delay: 2s; }

@keyframes bubble-rise {
  0%   { transform: translateY(0); opacity: 0; }
  15%  { opacity: 0.8; }
  90%  { opacity: 0.3; }
  100% { transform: translateY(-28px); opacity: 0; }
}

.progress-pct {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--foam);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65), 0 0 3px rgba(0, 0, 0, 0.45);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.sub {
  margin-top: 16px;
  color: var(--muted);
  font-size: 0.95rem;
}

.cheers {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
}

.cheers-burst {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--foam) 0%, rgba(245, 239, 221, 0) 70%);
  opacity: 0;
}

.cheers.active .cheers-burst {
  animation: cheers-burst 1.5s ease-out both;
}
.cheers.active {
  animation: cheers-fade 1.5s ease both;
}

@keyframes cheers-burst {
  0%, 50%  { opacity: 0; transform: scale(0.4); }
  62%      { opacity: 0.9; transform: scale(1.6); }
  100%     { opacity: 0; transform: scale(2.2); }
}
@keyframes cheers-fade {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bubble { animation: none; opacity: 0; }
  .cheers.active,
  .cheers.active .cheers-burst,
  .brand-row.toast .brand-mug-left,
  .brand-row.toast .brand-mug-right {
    animation-duration: 0.01ms !important;
  }
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 24px;
}

.card.wide { grid-column: 1 / -1; }

.card h2 {
  font-family: 'Fredoka', 'Fraunces', sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  margin: 0 0 16px;
  color: var(--foam);
}

.search-box {
  width: 100%;
  padding: 9px 12px;
  margin-bottom: 14px;
  background: var(--malt-light);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--foam);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.92rem;
}
.search-box::placeholder { color: var(--muted); }
.search-box:focus {
  outline: none;
  border-color: var(--amber);
}
.search-hint {
  color: var(--muted);
  font-size: 0.82rem;
  margin: 10px 0 0;
}

/* table-layout: fixed + explicit rank/count widths keeps the leaderboard
   from ever growing wider than its card. Without it, a long name (or a
   name plus an emoji, e.g. "Cristian Manola 🍻") sitting inside a flex
   name-cell can't shrink below its own content width, so the browser
   quietly makes the whole table wider than 100% to fit it -- which
   pushes the table (and with it the card, .grid, and the whole page)
   into horizontal overflow. On mobile that shows up as a stray sliver of
   horizontal scrollbar near the bottom of the page and a general
   "everything looks slightly off" feeling, since the viewport is no
   longer exactly the page width. */
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; table-layout: fixed; }
table td { padding: 6px 4px; border-bottom: 1px solid var(--line); }
table td.rank { color: var(--muted); width: 26px; }
table td.count { text-align: right; color: var(--amber); font-variant-numeric: tabular-nums; width: 52px; }

.name-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.name-cell span { min-width: 0; overflow-wrap: anywhere; }
.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.avatar-fallback {
  color: var(--foam);
  font-size: 0.8rem;
  font-weight: 600;
}

.health { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; }
.health li { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; padding: 6px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.health li span:last-child { color: var(--foam); }

.hour-bars {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hour-row {
  display: grid;
  grid-template-columns: 44px 1fr 34px;
  align-items: center;
  gap: 8px;
}
.hour-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}
.hour-track {
  height: 10px;
  background: var(--malt-light);
  border-radius: 4px;
  overflow: hidden;
}
.hour-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--amber-deep), var(--amber));
  border-radius: 4px;
  min-width: 2px;
}
.hour-count {
  color: var(--muted);
  font-size: 0.78rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.chart-caption {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}

.pace-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pace-nav {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--malt-light);
  border: 1px solid var(--line);
  color: var(--foam);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.pace-nav:hover { border-color: var(--amber-deep); }
.pace-nav:active { background: var(--amber-deep); color: var(--malt); }

.pace-scroll {
  flex: 1;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pace-scroll::-webkit-scrollbar { display: none; }

.pace-track {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 150px;
  padding: 0 4px;
}

/* ---- Responsive day-column width ----
   Previously a fixed 40px per day: fine on desktop, but on a phone that
   crammed far more days into view than is comfortable to read, making the
   whole strip look dense even though each count genuinely sits above its
   own bar. app.js now measures the scroller's actual width and sets
   --pace-day-w so roughly the same number of days is always visible
   regardless of screen size -- the 46px fallback only applies before that
   JS has run once (or in a no-JS edge case). */
.pace-day {
  flex: 0 0 var(--pace-day-w, 46px);
  min-width: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  scroll-snap-align: end;
}
.pace-bar-track {
  width: 100%;
  height: 96px;
  display: flex;
  align-items: flex-end;
}
.pace-bar-fill {
  width: 100%;
  min-height: 3px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--amber), var(--amber-deep));
}
.pace-day-count {
  font-size: 0.68rem;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
  white-space: nowrap;
}
.pace-day-label {
  font-size: 0.62rem;
  color: var(--muted);
  white-space: nowrap;
  margin-top: 2px;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 24px 0 12px;
  flex-wrap: wrap;
  gap: 10px;
}
.calendar-title {
  font-family: 'Fredoka', 'Fraunces', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--foam);
}
.year-toggle {
  display: flex;
  gap: 6px;
}
.year-btn {
  background: var(--malt-light);
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 5px 12px;
  border-radius: 999px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.year-btn:hover {
  border-color: var(--amber-deep);
  color: var(--foam);
}
.year-btn.active {
  background: var(--amber-deep);
  border-color: var(--amber-deep);
  color: var(--malt);
  font-weight: 600;
}

.calendar-scroll {
  overflow-x: auto;
  padding-bottom: 6px;
}
.calendar {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  min-width: max-content;
}
.calendar-months {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 13px;
  gap: 3px;
  font-size: 0.72rem;
  color: var(--muted);
  height: 14px;
}
.calendar-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 13px;
  grid-template-rows: repeat(7, 13px);
  gap: 3px;
}
.cal-cell {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: var(--malt-light);
}
.cal-cell.empty { background: transparent; }

.calendar-legend {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.78rem;
}
.legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}
.legend-swatch[data-level="0"] { background: var(--malt-light); }
.legend-swatch[data-level="1"] { background: rgba(232, 163, 61, 0.25); }
.legend-swatch[data-level="2"] { background: rgba(232, 163, 61, 0.45); }
.legend-swatch[data-level="3"] { background: rgba(232, 163, 61, 0.68); }
.legend-swatch[data-level="4"] { background: rgba(232, 163, 61, 0.95); }

@media (max-width: 680px) {
  .grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  main { padding: 28px 16px 56px; }
  .card { padding: 18px 16px; }

  /* ---- Brand row fix ----
     On narrow phones the old layout (mug + title + mug, all as separate
     flex items with flex-wrap: wrap) didn't shrink to fit one line, so
     the three items wrapped onto three separate centered lines -- mug,
     then title, then the other mug -- which read as misaligned/broken
     rather than as a deliberate stack. Fix: drop to a single mug, stack
     it above the title on purpose (column layout), and let the title
     wrap naturally as normal centered text at a size that's still big
     and readable instead of being squeezed to fit a single row. */
  .brand-row {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 4px;
    margin-bottom: 14px;
  }
  .brand-mug-right { display: none; }
  .brand-mug-left {
    width: 44px;
    height: 44px;
    transform: none; /* the mirror-flip was meant to face the right-hand mug; solo, keep it upright */
  }
  .brand-title {
    font-size: clamp(1.7rem, 8.5vw, 2.3rem);
    line-height: 1.25;
  }

  /* ---- Bigger, more legible body content ----
     Bumping up the smallest text on the page (leaderboard rows, hour
     bars, per-day pace labels) so it's comfortable to read at arm's
     length on a phone, not just technically visible. */
  table { font-size: 0.95rem; }
  table td { padding: 8px 4px; }
  .avatar, .avatar-fallback { width: 28px; height: 28px; }
  .avatar-fallback { font-size: 0.85rem; }

  .hour-row { grid-template-columns: 40px 1fr 36px; }
  .hour-label, .hour-count { font-size: 0.82rem; }
  .hour-track { height: 12px; }

  .pace-day-count { font-size: 0.76rem; }
  .pace-day-label { font-size: 0.7rem; }
  .pace-nav { width: 36px; height: 36px; font-size: 1.1rem; }

  .health { font-size: 0.95rem; }

  .cal-cell { width: 11px; height: 11px; }
  .calendar-grid, .calendar-months { grid-auto-columns: 11px; }

  /* iOS Safari auto-zooms the page on focusing any input/select whose
     font-size is under 16px -- the search box was 0.92rem (~15px), just
     under that threshold, so tapping it visibly "jumped" the whole page
     in a way that looked like a layout bug. 16px is the fix, not a
     stylistic choice. */
  .search-box { font-size: 16px; padding: 11px 12px; }

  /* Footer credits: give it real breathing room and a touch-friendly
     line height instead of sitting cramped against the bottom edge. */
  .site-footer {
    margin-top: 36px;
    padding: 20px 12px 0;
    font-size: 0.9rem;
    line-height: 1.6;
  }
}

/* =====================================================================
   Info button, rules overlay, and footer credits.
   ===================================================================== */

.info-btn {
  position: absolute;
  top: 8px;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--malt-light);
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 7px 14px;
  border-radius: 999px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.15s ease;
  z-index: 6;
}
.info-btn:hover {
  border-color: var(--amber-deep);
  color: var(--foam);
}
.info-icon {
  font-size: 0.95rem;
}

.site-footer {
  text-align: center;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.85rem;
}
.site-footer p { margin: 4px 0; }
.site-footer strong { color: var(--foam); }

.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.overlay[hidden] { display: none; }

.overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.overlay-panel {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  max-width: 620px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 32px 28px;
}

.overlay-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--malt-light);
  border: 1px solid var(--line);
  color: var(--foam);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.overlay-close:hover { border-color: var(--amber-deep); }

.overlay-panel h2 {
  font-family: 'Fraunces', serif;
  font-size: 1.4rem;
  margin: 0 0 16px;
  padding-right: 32px;
  color: var(--foam);
}
.overlay-panel h3 {
  font-family: 'Fraunces', serif;
  font-size: 1.15rem;
  margin: 0 0 14px;
  color: var(--foam);
}

.info-block {
  font-size: 0.92rem;
  color: var(--foam);
}
.info-block p { margin: 0 0 12px; }
.info-block ul {
  margin: 0 0 14px;
  padding-left: 20px;
}
.info-block li {
  margin-bottom: 8px;
  color: var(--foam);
}
.info-block code {
  background: var(--malt-light);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.88em;
  color: var(--amber);
}

.info-divider {
  border: none;
  border-top: 1px solid var(--line);
  margin: 24px 0;
}

.rules-block {
  color: var(--muted);
  font-size: 0.88rem;
}
.rules-block p { margin: 0 0 10px; }
.rules-block strong { color: var(--foam); }
.rules-block ul { margin: 0 0 10px; padding-left: 20px; }
.rules-example {
  background: var(--malt-light);
  border-left: 3px solid var(--amber-deep);
  padding: 10px 14px;
  border-radius: 0 6px 6px 0;
  font-style: italic;
}

@media (max-width: 480px) {
  .overlay-panel { padding: 24px 18px; max-height: 90vh; }
  .info-btn {
    position: static;
    margin: 0 auto 18px;
    font-size: 0.82rem;
    padding: 10px 16px; /* ~40px tall tap target instead of ~26px */
  }
}