/* Puck Party — app mockups for the marketing pages and the homepage.
   Phone frames that redraw screens of the consumer app in its citrus design
   system (puckparty-app apps/web/DESIGN.md): graphite ground, bone for the
   answer, citrus for the one thing to tap. Archivo for anything you read,
   Bebas Neue only for numbers, clocks and club codes. Flat surfaces, hairline
   rules, no shadows. Static HTML + CSS; the strings live in tools/site/mocks.mjs. */

:root {
  --pp-canvas: #08090a;
  --pp-ground: #121311;
  --pp-raise-1: #1a1d17;
  --pp-raise-2: #1e2219;
  --pp-raise-3: #23281c;
  --pp-line: #23281c;
  --pp-line-strong: #2e3425;
  --pp-ink-1: #f4f6f0;
  --pp-ink-2: #c9cdc2;
  --pp-ink-3: #9aa094;
  --pp-ink-4: #8a9084;
  --pp-ink-code: #e4e8dc;
  --pp-ink-on-light: #14170a;
  --pp-citrus: #e9ff4d;
  --pp-citrus-tonal: rgba(233, 255, 77, 0.12);
  --pp-ui: 'Archivo', system-ui, sans-serif;
  --pp-num: 'Bebas Neue', 'Archivo', sans-serif;
}

@keyframes pp-sweep { from { transform: translateX(-120%); } to { transform: translateX(320%); } }

/* ---- Phone frame ---- */
.phone {
  width: 300px; max-width: 100%;
  background: var(--pp-canvas);
  border: 1px solid var(--pp-line-strong);
  border-radius: 34px;
  padding: 8px;
  flex-shrink: 0;
}
.screen {
  position: relative; overflow: hidden;
  background: var(--pp-ground);
  border-radius: 26px;
  min-height: 580px;
  display: flex; flex-direction: column;
  font-family: var(--pp-ui); color: var(--pp-ink-1);
  text-align: left;
}
.screen .kicker {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--pp-ui); font-weight: 700; font-size: 9.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--pp-ink-3);
}
.screen .note { font-size: 11px; line-height: 1.45; color: var(--pp-ink-3); margin-top: 10px; }
.m-glow {
  position: absolute; top: -110px; right: -70px; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(233,255,77,.08), rgba(233,255,77,0) 68%); pointer-events: none;
}

/* ---- Card header: CALL n / 5, lock meter, progress ticks ---- */
.m-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 16px 10px; }
.m-call { font-family: var(--pp-num); font-size: 16px; letter-spacing: 0.06em; }
.m-call .dim { color: var(--pp-ink-3); }
.m-back { color: var(--pp-ink-3); font-family: var(--pp-ui); margin-right: 8px; font-size: 16px; }
.m-lock { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.m-lock-l { font-family: var(--pp-num); font-size: 14px; letter-spacing: 0.04em; color: var(--pp-ink-2); }
.m-lock-t { width: 64px; height: 4px; border-radius: 2px; background: var(--pp-line); overflow: hidden; }
.m-lock-t span { display: block; height: 100%; background: var(--pp-ink-2); }
.m-ticks { display: flex; gap: 4px; padding: 0 16px 14px; }
.m-ticks span { flex: 1; height: 3px; border-radius: 2px; background: var(--pp-line); }
.m-ticks span.on { background: var(--pp-ink-1); }

.m-body { padding: 4px 16px 12px; flex: 1; }
.m-eyebrow { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 4px 0 10px; }

/* ---- Badges and chips ---- */
.screen .badge {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-family: var(--pp-ui); font-weight: 700; font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase;
}
.screen .badge-scored { background: var(--pp-raise-3); color: var(--pp-ink-1); border-radius: 6px; padding: 4px 7px; }
.screen .badge-scored::before { content: '+'; color: var(--pp-citrus); font-size: 11px; line-height: 1; }
.screen .badge-neutral { border: 1px solid var(--pp-line-strong); color: var(--pp-ink-2); border-radius: 999px; padding: 3px 8px; }
.chip-inv {
  display: inline-block; vertical-align: 2px; margin-left: 6px;
  font-family: var(--pp-num); font-size: 12px; letter-spacing: 0.06em; line-height: 1;
  background: var(--pp-ink-1); color: var(--pp-ink-on-light); border-radius: 5px; padding: 3px 6px 1px;
}
.dotpill {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  border: 1px solid var(--pp-line-strong); border-radius: 999px; padding: 5px 9px 4px;
  font-size: 10px; font-weight: 700; color: var(--pp-ink-2);
}
.dotpill i { width: 6px; height: 6px; border-radius: 50%; background: var(--pp-citrus); }

/* ---- Question ---- */
.q-title {
  font-family: var(--pp-ui); font-weight: 800; font-size: 22px; line-height: 1.08;
  letter-spacing: -0.035em; margin: 0 0 14px; text-wrap: balance;
}
.q-title em { font-style: italic; }
.q-sub { font-size: 16px; font-weight: 700; letter-spacing: -0.025em; margin-bottom: 10px; }

/* Answer rows: Bebas numeral, label, ring. Selected = bone fill + dark disc. */
.opts { display: grid; gap: 8px; }
.opt {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 14px; border-radius: 14px; border: 1.5px solid var(--pp-line-strong);
}
.opt-n { font-family: var(--pp-num); font-size: 24px; line-height: 1; width: 34px; letter-spacing: 0.02em; }
.opt-l { flex: 1; font-size: 14px; font-weight: 600; letter-spacing: -0.02em; }
.opt-r, .plr .opt-r { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--pp-line-strong); flex-shrink: 0; position: relative; }
.opt.sel, .plr.sel { background: var(--pp-ink-1); border-color: var(--pp-ink-1); color: var(--pp-ink-on-light); }
.opt.sel .opt-l, .plr.sel .plr-n { font-weight: 700; }
.opt.sel .opt-r, .plr.sel .opt-r { background: var(--pp-ink-on-light); border-color: var(--pp-ink-on-light); }
.opt.sel .opt-r::after, .plr.sel .opt-r::after {
  content: '✓'; position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--pp-ink-1); font-size: 11px; font-weight: 800;
}

/* Game Winner tiles: the selected tile takes the club's colour. */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.tile {
  position: relative; min-height: 100px; border-radius: 16px; border: 2px solid var(--pp-line-strong);
  padding: 11px; display: flex; flex-direction: column; justify-content: flex-end;
}
.tile .venue {
  position: absolute; top: 10px; left: 10px;
  font-size: 7.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid #3a4034; border-radius: 999px; padding: 3px 7px; color: var(--pp-ink-2);
}
.tile .code { font-family: var(--pp-num); font-size: 36px; line-height: 0.85; color: #d8dcd4; letter-spacing: 0.02em; }
.tile .city { font-size: 12.5px; font-weight: 600; margin-top: 3px; }
.tile.sel { background: var(--club); border-color: var(--pp-ink-1); }
.tile.sel .code, .tile.sel .city { color: #fff; }
.tile.sel .venue { border-color: rgba(255,255,255,.45); color: #fff; }
.tick {
  position: absolute; top: 9px; right: 9px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--pp-ink-1); color: var(--pp-ink-on-light); display: grid; place-items: center;
  font-size: 11px; font-weight: 800;
}
.m-hearts { display: flex; gap: 6px; flex-wrap: wrap; }
.m-hearts span {
  font-size: 12px; font-weight: 600; padding: 8px 11px; border-radius: 11px;
  border: 1.5px solid var(--pp-line-strong); color: var(--pp-ink-1);
}
.m-hearts span.sel { background: var(--pp-ink-1); border-color: var(--pp-ink-1); color: var(--pp-ink-on-light); font-weight: 700; }

/* Players */
.plrs { display: grid; gap: 7px; }
.plr { display: flex; align-items: center; gap: 11px; padding: 9px 12px 9px 9px; border-radius: 13px; border: 1.5px solid var(--pp-line-strong); }
.plr-ph { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(160deg, #2f332b, #1e221a); flex-shrink: 0; }
.plr-ph.big { width: 58px; height: 58px; border-radius: 14px; margin-bottom: 8px; }
.plr-t { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.plr-n { font-size: 13.5px; font-weight: 600; letter-spacing: -0.02em; }
.plr-m { font-size: 10.5px; color: var(--pp-ink-3); font-weight: 600; }
.plr.sel .plr-m { color: #4a4f40; }
.plr.sel .plr-ph { background: linear-gradient(160deg, #cfd3c8, #b6bbae); }

/* Matchup */
.vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-bottom: 14px; }
.vs-side {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 14px 8px 12px; border-radius: 16px; border: 1.5px solid var(--pp-line-strong);
}
.vs-side .plr-n { font-size: 13px; font-weight: 700; }
.vs-side.sel { background: var(--pp-ink-1); border-color: var(--pp-ink-1); color: var(--pp-ink-on-light); }
.vs-side.sel .plr-m { color: #4a4f40; }
.vs-side.sel .plr-ph { background: linear-gradient(160deg, #cfd3c8, #b6bbae); }
.vs-side .tick { background: var(--pp-ink-on-light); color: var(--pp-ink-1); top: 8px; right: 8px; }
.vs-or { font-size: 11px; font-weight: 700; color: var(--pp-ink-3); }

/* Worth knowing */
.worth { border: 1px solid var(--pp-line); border-radius: 13px; padding: 11px 13px 12px; margin-top: 14px; }
.worth p { margin: 6px 0 0; font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--pp-ink-1); }

/* Pinned action: one citrus fill per screen. */
.m-action { padding: 12px 16px 18px; border-top: 1px solid var(--pp-line); margin-top: auto; }
.m-cta {
  position: relative; overflow: hidden; display: block; text-align: center;
  background: var(--pp-citrus); color: var(--pp-ink-on-light);
  font-family: var(--pp-ui); font-weight: 800; font-size: 14px; letter-spacing: -0.01em;
  border-radius: 14px; padding: 14px 0;
}
.m-cta.live::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  animation: pp-sweep 2.6s cubic-bezier(.2,.7,.3,1) infinite;
}
@media (prefers-reduced-motion: reduce) { .m-cta.live::after { animation: none; display: none; } }

/* ---- Tonight hub ---- */
.m-page { position: relative; padding: 18px 16px 10px; }
.m-pagehead { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; margin-bottom: 14px; }
.m-title { font-weight: 800; font-size: 28px; letter-spacing: -0.035em; line-height: 1; margin-top: 4px; }
.m-title.sm { font-size: 21px; margin: 4px 0 12px; }
.m-hero { border: 1px solid var(--pp-line-strong); border-radius: 16px; padding: 13px; display: flex; flex-direction: column; gap: 11px; }
.m-hero-top { display: flex; justify-content: space-between; align-items: center; }
.tape { width: 4px; height: 12px; border-radius: 2px; display: inline-block; }
.m-net { font-family: var(--pp-num); font-size: 13px; letter-spacing: 0.06em; color: var(--pp-ink-3); }
.m-board { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.m-side { display: flex; flex-direction: column; gap: 5px; }
.m-side:last-child { align-items: flex-end; text-align: right; }
.m-side .code { font-family: var(--pp-num); font-size: 46px; line-height: 0.8; letter-spacing: 0.02em; }
.m-side.dimmed .code { color: var(--pp-ink-4); }
.m-side .rec { font-size: 10px; color: var(--pp-ink-4); }
.m-mid { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.m-mid .time { font-family: var(--pp-num); font-size: 22px; letter-spacing: 0.04em; }
.m-mid .kicker { font-size: 8px; }
.m-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.m-quick span { text-align: center; border: 1.5px solid var(--pp-line-strong); border-radius: 12px; padding: 10px 0; font-size: 12.5px; font-weight: 600; }
.m-lockline { text-align: right; font-size: 10.5px; color: var(--pp-ink-3); margin-top: -4px; }
.m-slate { margin-top: 12px; }
.m-row { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 8px; padding: 11px 0; border-bottom: 1px solid var(--pp-line); }
.m-when { font-size: 10px; color: var(--pp-ink-4); font-weight: 600; }
.m-match { font-family: var(--pp-num); font-size: 18px; letter-spacing: 0.04em; color: var(--pp-ink-code); }
.m-match i, .m-matchup i { font-style: normal; color: var(--pp-ink-3); font-size: 0.8em; }
.m-pick { background: var(--pp-citrus-tonal); color: var(--pp-citrus); font-weight: 800; font-size: 11.5px; border-radius: 10px; padding: 7px 11px; }
.m-in { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--pp-ink-2); }
.m-in b { width: 16px; height: 16px; border-radius: 50%; background: var(--pp-ink-1); color: var(--pp-ink-on-light); display: grid; place-items: center; font-size: 9px; }

/* ---- Your card recap ---- */
.m-matchup { font-family: var(--pp-num); font-size: 38px; line-height: 0.95; letter-spacing: 0.02em; margin: 4px 0 8px; }
.group { border: 1px solid var(--pp-line); border-radius: 15px; margin-top: 14px; }
.g-row { padding: 11px 13px; border-bottom: 1px solid var(--pp-line); }
.g-row:last-child { border-bottom: 0; }
.g-row .kicker { font-size: 8.5px; }
.g-v { font-size: 14.5px; font-weight: 700; letter-spacing: -0.02em; margin: 3px 0 2px; }
.g-s { font-size: 10.5px; font-weight: 600; color: var(--pp-ink-2); }

/* ---- Leaderboard and team roster ---- */
.subtabs { display: flex; gap: 5px; margin-bottom: 16px; }
.subtabs span { font-size: 9.5px; font-weight: 700; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--pp-line-strong); color: var(--pp-ink-2); }
.subtabs span.on { background: var(--pp-ink-1); border-color: var(--pp-ink-1); color: var(--pp-ink-on-light); }
.ranks { display: flex; flex-direction: column; }
.rank { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--pp-line); }
.rank .r { font-family: var(--pp-num); font-size: 18px; width: 22px; color: var(--pp-ink-3); }
.rank.top .r { color: var(--pp-ink-1); }
.rank .h { flex: 1; font-size: 12.5px; font-weight: 600; }
.rank .h em { font-style: normal; font-size: 8.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pp-ink-3); margin-left: 6px; }
.rank .gp { font-size: 9.5px; font-weight: 600; color: var(--pp-ink-4); }
.rank .p { font-family: var(--pp-num); font-size: 19px; letter-spacing: 0.02em; min-width: 38px; text-align: right; }
.rank .p.est { font-family: var(--pp-ui); font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pp-ink-3); }
.rank.you { background: var(--pp-ink-1); color: var(--pp-ink-on-light); border-radius: 12px; margin: 3px 10px; padding: 9px 6px; border: 0; }
.rank.you .r, .rank.you .gp { color: #4a4f40; }
.rank.you .h { font-weight: 800; }
.av {
  width: 26px; height: 26px; border-radius: 50%; background: var(--pp-raise-3); color: var(--pp-ink-2);
  display: grid; place-items: center; font-size: 9.5px; font-weight: 700; flex-shrink: 0;
}
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 8px; }
.stats div { border-top: 2px solid var(--pp-line-strong); padding-top: 7px; display: flex; flex-direction: column; gap: 2px; }
.stats .v { font-family: var(--pp-num); font-size: 24px; line-height: 1; letter-spacing: 0.02em; }
.stats .l { font-size: 8.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pp-ink-3); }

.m-teammeta { display: flex; align-items: center; gap: 8px; margin: -4px 0 14px; }
.btn-quiet { font-size: 10.5px; font-weight: 700; border: 1px solid var(--pp-line-strong); border-radius: 9px; padding: 5px 10px; color: var(--pp-ink-1); }
.invite { border: 1px solid var(--pp-line); border-radius: 15px; padding: 13px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.invite .code { font-family: var(--pp-num); font-size: 30px; letter-spacing: 0.08em; line-height: 1; margin-top: 4px; }
.invite .note { margin: 0 0 6px; }
.m-btn-outline { text-align: center; border: 1.5px solid var(--pp-line-strong); border-radius: 13px; padding: 11px 0; font-size: 12.5px; font-weight: 700; }

/* ---- Inline (non-phone) versions for article bodies ---- */
.inline-card {
  background: var(--pp-ground); border: 1px solid var(--pp-line-strong); border-radius: 18px;
  padding: 18px; margin: 18px 0 24px; font-family: var(--pp-ui); color: var(--pp-ink-1);
}
.inline-card .kicker {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pp-ink-3);
}
.inline-card .worth p { font-size: 15px; }
.inline-card .worth-foot { margin: 10px 0 0; padding-top: 9px; border-top: 1px solid var(--pp-line); font-size: 12.5px; color: var(--pp-ink-3); }