@import url("./tokens.css");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");

/* Fazer is a licensed brand face. Drop the .woff2 files into /assets/fonts/
   and these rules pick them up; until then Poppins carries the display role. */
@font-face { font-family:"Fazer"; src:url("./fonts/Fazer-Medium.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Fazer"; src:url("./fonts/Fazer-Bold.woff2")   format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"Fazer"; src:url("./fonts/Fazer-Heavy.woff2")  format("woff2"); font-weight:900; font-display:swap; }

*,*::before,*::after { box-sizing:border-box; }
html,body { height:100%; }
body {
  margin:0; background:#c9ecf4; color:var(--ink);
  font-family:var(--font-body); font-size:var(--fs-base); line-height:var(--lh-base);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none; touch-action:manipulation;
}
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:var(--fw-bold);
  letter-spacing:var(--ls-display); line-height:var(--lh-tight); margin:0; }

/* ---------------- shell ---------------- */
.app { min-height:100dvh; display:grid; grid-template-rows:auto 1fr auto; }
.masthead, .footbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-md); padding:var(--sp-lg) var(--sp-xl);
}
.wordmark { font-family:var(--font-display); font-weight:var(--fw-heavy);
  font-size:var(--fs-h6); letter-spacing:.02em; color:var(--accent); text-transform:lowercase; }
.wordmark::after { content:"·"; margin-left:.4em; color:var(--neuro-cyan); }
.masthead .eyebrow { font-size:var(--fs-xs); letter-spacing:var(--ls-caps);
  text-transform:uppercase; color:var(--ink-muted); font-weight:var(--fw-medium); }
.footbar { font-size:var(--fs-xs); color:var(--ink-muted); letter-spacing:var(--ls-caps); text-transform:uppercase; }

.stage { display:grid; place-items:center; grid-template-columns:minmax(0,1fr);
  padding:0 var(--sp-xl) var(--sp-xl); }
.screen { width:100%; min-width:0; max-width:var(--maxw-card); margin:0 auto; display:none; animation:rise var(--dur-medium) var(--ease-out) both; }
.screen[data-active] { display:block; }
@keyframes rise { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .screen{animation:none} }

/* ---------------- buttons ---------------- */
.btn {
  font-family:var(--font-body); font-size:var(--fs-lg); font-weight:var(--fw-regular);
  border-radius:var(--radius-pill); padding:20px 32px; border:1px solid transparent;
  cursor:pointer; text-transform:capitalize;
  transition:background var(--dur-default) var(--ease-default),
             color var(--dur-default) var(--ease-default),
             transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform:scale(.97); }
.btn--primary   { background:var(--accent); color:var(--accent-on); border-color:var(--accent); }
.btn--primary:hover  { background:var(--neuro-blue-deep); border-color:var(--neuro-blue-deep); }
.btn--tertiary  { background:var(--neuro-white); color:var(--accent); border-color:var(--accent); }
.btn--tertiary:hover { background:var(--neuro-grey-100); }
.btn--sm { font-size:var(--fs-sm); padding:10px 16px; }
.btn:focus-visible { outline:3px solid var(--neuro-info); outline-offset:2px; }

/* splash CTAs — white-on-blue pair from the Lock-In Challenge comp */
.btn--splash {
  background:#fff; color:#1125a9; border:1.5px solid #fff;
  font-weight:var(--fw-medium); font-size:18px; padding:19.5px 33px;
  text-transform:none;
}
.btn--splash:hover { background:#f1efdf; border-color:#f1efdf; }
.btn--ghost {
  background:transparent; color:#fff; border:1.5px solid #fff;
  font-weight:var(--fw-medium); font-size:18px; padding:19.5px 33px;
  text-transform:none;
}
.btn--ghost:hover { background:rgba(255,255,255,.14); }
.btn--splash:focus-visible, .btn--ghost:focus-visible { outline:3px solid #f6ea61; outline-offset:3px; }

/* ---------------- attract / splash ---------------- */
/* Breaks out of .stage so the blue runs full bleed. */
.screen.attract[data-active] {
  position:fixed; inset:0; z-index:20;
  max-width:none; margin:0; padding:0;
  display:grid; place-items:center;
  background:#00a1cd;
  overflow:hidden;
}

.attract__bg { position:absolute; inset:0; pointer-events:none; }

/* Scaled from height so the wave keeps its shape as the window widens.
   127% / centre-55.6% reproduces the Figma crop at 1440x810. */
.attract__waves {
  position:absolute; left:50%; top:55.6%;
  transform:translate(-50%,-50%);
  height:127%; width:auto; min-width:100%;
}

.cap { position:absolute; height:auto; will-change:transform; }
.cap--n { left:24.10%; top: 4.07%; width:11.53%; animation:bob-n 9s ease-in-out -1.5s infinite; }
.cap--r { left:11.61%; top:22.00%; width:13.19%; animation:bob-r 7s ease-in-out -4s   infinite; }
.cap--o { left:75.47%; top:80.00%; width:12.92%; animation:bob-o 8s ease-in-out -6.5s infinite; }

/* Larger caps read as nearer, so they travel further — that parallax
   difference is what stops the three reading as one flat layer. */
@keyframes bob-n { 50% { transform:translateY(-10px) rotate(-1.1deg); } }
@keyframes bob-r { 50% { transform:translateY(-18px) rotate( 1.4deg); } }
@keyframes bob-o { 50% { transform:translateY(-15px) rotate( 1.2deg); } }

@media (prefers-reduced-motion:reduce) { .cap { animation:none; } }

.attract__inner { position:relative; z-index:1; text-align:center; padding:0 var(--sp-lg); }

.attract__wordmark { width:clamp(130px, 16.2vw, 233px); height:auto; display:block; margin:0 auto; }

.attract__title {
  font-family:var(--font-display); font-weight:var(--fw-bold);
  font-size:clamp(46px, 10.73vw, 155px);
  line-height:.8; letter-spacing:-.02em;
  text-transform:uppercase; color:#fff;
  margin:clamp(4px, .6vw, 10px) 0 0;
}

.attract__sub {
  font-family:var(--font-body); font-size:clamp(15px, 1.36vw, 19.5px);
  line-height:1.3; color:#fff; max-width:660px;
  margin:clamp(14px, 1.8vw, 26px) auto 0;
}

.attract__actions {
  display:flex; gap:15px; justify-content:center; flex-wrap:wrap;
  margin-top:clamp(18px, 2.2vw, 32px);
}

.attract__rules {
  font-family:var(--font-body); font-weight:var(--fw-medium);
  font-size:clamp(10px, .78vw, 11.25px);
  letter-spacing:.06em; text-transform:uppercase;
  color:#fff; opacity:.82;
  margin:clamp(14px, 1.8vw, 26px) 0 0;
}

/* ---------------- HUD ---------------- */
.hud { display:flex; align-items:center; justify-content:center;
  gap:64px; margin-bottom:44px; flex-wrap:wrap; }
.timer { position:relative; width:132px; height:132px; display:grid; place-items:center; flex:0 0 auto; }
.timer svg { position:absolute; inset:0; transform:rotate(-90deg); }
.timer .track { stroke:var(--neuro-cream-light); }
.timer .fill  { stroke:var(--accent); stroke-linecap:round;
  transition:stroke-dashoffset 1s linear, stroke var(--dur-default); }
.timer.is-low .fill { stroke:var(--incorrect); }
.timer > div { text-align:center; }
.timer b { font-family:var(--font-display); font-weight:var(--fw-bold); font-size:28px;
  line-height:1; letter-spacing:-.56px; color:#1125a9; font-variant-numeric:tabular-nums; }
.timer span { display:block; font-size:9px; font-weight:var(--fw-medium); text-transform:uppercase;
  letter-spacing:.04em; color:#4a5cb8; margin-top:2px; }
.metrics { display:flex; gap:64px; }
.metric { text-align:center; width:150px; }
.metric b { display:block; font-family:var(--font-display); font-weight:var(--fw-bold);
  font-size:50px; line-height:1; letter-spacing:-1px; color:#1125a9;
  font-variant-numeric:tabular-nums; }
.metric span { display:block; margin-top:4px; font-size:11px; font-weight:var(--fw-medium);
  text-transform:uppercase; letter-spacing:.04em; color:#4a5cb8; }

/* ---------------- typing strip ---------------- */
.strip {
  position:relative; background:#fff; border-radius:28px;
  box-shadow:0 18px 52px rgba(17,37,169,.1); padding:52px 20px;
  max-width:1180px; margin:0 auto;
  display:flex; align-items:center; overflow:hidden; cursor:text;
  font-size:clamp(20px, 2.4vw, 30px); font-weight:var(--fw-medium);
}
.strip__half { flex:1 1 50%; min-width:0; overflow:hidden;
  white-space:nowrap; display:flex; align-items:center; }
.strip__done { justify-content:flex-end; color:#1125a9;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%);
  mask-image:linear-gradient(90deg, transparent, #000 12%); }
.strip__next {
  -webkit-mask-image:linear-gradient(90deg, #000 88%, transparent);
  mask-image:linear-gradient(90deg, #000 88%, transparent); }
.strip__done .w { padding:0 .28em; }
.strip__done .w.ok  { color:#00aa63; }
.strip__done .w.bad { color:#ff4712; text-decoration:line-through; }
.strip__live { color:#1125a9; font-weight:var(--fw-bold); padding-left:.28em; white-space:pre; }
.strip__live.bad { color:#ff4712; }
.strip__next .w { padding:0 .28em; color:#1125a9; }
.strip__next .w:first-child { color:#1125a9; font-weight:var(--fw-bold); padding-left:0; }
.caret { width:3px; height:44px; align-self:center; background:#1125a9; border-radius:2px;
  animation:blink 1.06s steps(2,start) infinite; flex:0 0 3px; }
@keyframes blink { 50% { opacity:0; } }
.strip.is-idle .caret { animation:none; }
.strip__hint { position:absolute; top:var(--sp-md); left:50%; transform:translateX(-50%);
  background:var(--highlight); border-radius:var(--radius-pill);
  padding:6px 16px; font-size:var(--fs-sm); font-weight:var(--fw-medium);
  animation:pulse 1.7s var(--ease-default) infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.55} }
.strip.is-running .strip__hint { display:none; }
#capture { position:absolute; inset:0; width:100%; height:100%;
  opacity:0; border:0; background:transparent; padding:0;
  font-size:16px; /* keeps iOS from zooming the page on focus */
  color:transparent; caret-color:transparent; }

/* ---------------- result ---------------- */
.result { text-align:center; }
.badge { display:inline-flex; align-items:center; gap:var(--sp-xs);
  background:var(--neuro-cyan-tint); color:var(--neuro-blue-deep);
  border-radius:var(--radius-pill); padding:8px 20px; font-size:var(--fs-sm);
  font-weight:var(--fw-medium); letter-spacing:var(--ls-caps); text-transform:uppercase;
  margin-bottom:var(--sp-lg); }
.score { font-family:var(--font-display); font-size:var(--fs-display); line-height:.9;
  letter-spacing:var(--ls-display); font-variant-numeric:tabular-nums; }
.score small { display:block; font-family:var(--font-body); font-size:var(--fs-h6);
  font-weight:var(--fw-medium); letter-spacing:var(--ls-caps);
  text-transform:uppercase; color:var(--ink-muted); }
.result h2 { font-size:var(--fs-h3); margin:var(--sp-lg) 0 var(--sp-xs); }
.result .line { color:var(--neuro-grey-700); font-size:var(--fs-lg); margin-bottom:var(--sp-2xl); }
.result .line b { background:var(--highlight); border-radius:var(--radius-sm); padding:2px 8px; }

.entry { background:var(--neuro-white); border-radius:var(--radius-xl); padding:var(--sp-xl);
  box-shadow:var(--shadow-md); max-width:520px; margin:0 auto; text-align:left; }
.entry label { display:block; font-size:var(--fs-sm); font-weight:var(--fw-medium);
  margin-bottom:var(--sp-xs); }
.field { width:100%; font-family:var(--font-body); font-size:var(--fs-lg);
  padding:16px; border:1px solid var(--neuro-grey-700); border-radius:var(--radius-md);
  background:var(--neuro-white); color:var(--ink); }
.field:focus { outline:2px solid var(--neuro-info); outline-offset:1px; border-color:var(--ink); }
.field::placeholder { color:var(--neuro-grey-500); }
.entry .row { display:flex; gap:var(--sp-sm); margin-top:var(--sp-lg); }
.entry .row .btn { flex:1; }
.consent { display:flex; gap:var(--sp-xs); align-items:flex-start; margin-top:var(--sp-md);
  font-size:var(--fs-xs); color:var(--ink-muted); line-height:var(--lh-base); }
.consent input { margin-top:2px; accent-color:var(--accent); width:16px; height:16px; }

/* ---------------- leaderboard ---------------- */
.board h2 { font-size:var(--fs-h2); text-align:center; margin-bottom:var(--sp-xl); }
.board__list { background:var(--neuro-white); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-md); overflow:hidden; }
.row { display:grid; grid-template-columns:64px 1fr auto auto;
  gap:var(--sp-md); align-items:center; padding:var(--sp-md) var(--sp-lg);
  border-bottom:1px solid var(--neuro-grey-100); }
.row:last-child { border-bottom:0; }
.row .rank { font-family:var(--font-display); font-size:var(--fs-h5);
  letter-spacing:var(--ls-display); color:var(--neuro-grey-400); font-variant-numeric:tabular-nums; }
.row .name { font-weight:var(--fw-medium); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row .acc { font-size:var(--fs-sm); color:var(--ink-muted); font-variant-numeric:tabular-nums; }
.row .wpm { font-family:var(--font-display); font-size:var(--fs-h5);
  letter-spacing:var(--ls-display); font-variant-numeric:tabular-nums; }
.row .wpm em { font-style:normal; font-family:var(--font-body); font-size:var(--fs-xs);
  color:var(--ink-muted); text-transform:uppercase; letter-spacing:var(--ls-caps); margin-left:4px; }
.row--1 .rank, .row--2 .rank, .row--3 .rank { color:var(--accent); }
.row--1 { background:linear-gradient(90deg, var(--neuro-lemon-tint), transparent 60%); }
.row--2 { background:linear-gradient(90deg, var(--neuro-cyan-tint), transparent 60%); }
.row--3 { background:linear-gradient(90deg, var(--neuro-cream), transparent 60%); }
.row--you { box-shadow:inset 3px 0 0 var(--accent); }
.board__empty { padding:var(--sp-2xl); text-align:center; color:var(--ink-muted); }
.board__actions { display:flex; gap:var(--sp-sm); justify-content:center; margin-top:var(--sp-xl); }

/* ---------------- admin ---------------- */
.admin { position:fixed; inset:auto var(--sp-lg) var(--sp-lg) auto;
  background:var(--neuro-grey-900); color:var(--neuro-white);
  border-radius:var(--radius-lg); padding:var(--sp-md); display:none;
  gap:var(--sp-xs); flex-direction:column; font-size:var(--fs-sm); z-index:99; }
.admin[data-open] { display:flex; }
.admin button { font-size:var(--fs-sm); }

@media (max-width:768px) {
  .masthead,.footbar,.stage { padding-left:var(--sp-md); padding-right:var(--sp-md); }
  .masthead__logo { width:110px; }
  .metrics { gap:var(--sp-lg); }
  .strip { padding:36px 12px; }
  .hud { gap:var(--sp-md); flex-direction:column; }
  .metrics { gap:var(--sp-lg); width:100%; justify-content:space-between; }
  .metric { min-width:0; flex:1; }
  .metric b { font-size:var(--fs-h4); }
  .timer { width:104px; height:104px; }
  .strip { padding:var(--sp-xl) var(--sp-sm); font-size:20px; }
  .entry { padding:var(--sp-lg); }
  .entry .row { flex-direction:column; }
  .row { grid-template-columns:44px 1fr auto; }
  .row .acc { display:none; }

  .cap--n { width:22%; left: 6%; top: 3%; }
  .cap--r { width:25%; left:62%; top:12%; }
  .cap--o { width:24%; left: 8%; top:84%; }
  .attract__actions { flex-direction:column; align-items:stretch; }
  .attract__actions .btn { width:100%; }
}