/* Agility Check, version 1. Fonts and colours follow the console (vertex-console/styles.css)
   so the page matches the surface it will eventually sit inside. Never a macOS system font. */

@font-face{font-family:Poppins;src:url(fonts/Poppins-Regular.ttf) format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/Poppins-Medium.ttf) format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/Poppins-SemiBold.ttf) format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:Oswald;src:url(fonts/Oswald-Medium.ttf) format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:Oswald;src:url(fonts/Oswald-SemiBold.ttf) format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Barlow Semi Condensed';src:url(fonts/BarlowSemiCondensed-SemiBold.ttf) format('truetype');font-weight:600;font-display:swap}

:root{
  --green:#3A7D44; --green-lt:#6AAF72; --green-tint:#EDF4EE;
  --ink:#0a0a0a; --body:#1f2937; --muted:#6b7280; --faint:#9ca3af;
  --line:#e5e7eb; --bg:#ffffff; --panel:#f7f7f5;
  --dark:#0a0a0a; --on-dark:#d1d5db;
  --crit:#A32E27; --crit-bg:#FBECEA;
  --body-font:Poppins,sans-serif;
  --head-font:Oswald,sans-serif;
  --display-font:'Barlow Semi Condensed',sans-serif;
}

*{box-sizing:border-box}
/* The screens and the demo drawings set their own display, which would otherwise
   beat the hidden attribute; this keeps hidden meaning hidden. */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--body);
  font-family:var(--body-font); font-size:16px; line-height:1.6;
  display:flex; flex-direction:column;
  height:100dvh; overflow:hidden; overscroll-behavior:none;
  -webkit-text-size-adjust:100%;
}

/* Top bar */
.bar{
  flex:0 0 auto; background:var(--dark); color:var(--on-dark);
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; padding-top:calc(10px + env(safe-area-inset-top));
}
.brand{display:flex; align-items:baseline; gap:10px}
.brand-name{font-family:var(--head-font); font-weight:600; font-size:15px; letter-spacing:.18em; text-transform:uppercase; color:#fff}
.brand-sub{font-size:12px; color:var(--on-dark)}
.bar-right{display:flex; align-items:baseline; gap:14px}
.part-label{font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--green-lt)}
.clock{font-family:var(--display-font); font-weight:600; font-size:22px; line-height:1; color:#fff; font-variant-numeric:tabular-nums; min-width:3.2em; text-align:right}

main{flex:1 1 auto; min-height:0; position:relative}

/* Text screens */
.screen{padding:28px 22px; max-width:560px; margin:0 auto; height:100%; overflow:auto}
.btn{
  display:block; width:100%; min-height:58px; padding:14px 30px;
  background:var(--green); color:#fff; border:0; border-radius:10px;
  font-family:var(--body-font); font-weight:600; font-size:18px; letter-spacing:.01em; cursor:pointer;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.btn:active{background:#2F6A38}
.spacer{flex:1 1 auto; min-height:16px}
.fine{font-size:13px; color:var(--muted); margin:12px 0 0}

/* Round title card: the round number is the headline, the move is drawn before it
   is described, one line of instruction and one short line under it, Start at the
   bottom where a thumb lands (Brandon, 10 September: "more like a game they're
   about to play, not a survey"). */
.brief{display:flex; flex-direction:column; padding-top:30px; padding-bottom:calc(22px + env(safe-area-inset-bottom))}
.chip{align-self:flex-start; font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; padding:6px 10px; border-radius:6px; background:var(--panel); color:var(--muted); margin:0 0 18px}
.chip b{color:var(--ink); margin-left:6px}
.round{font-family:var(--display-font); font-weight:600; font-size:88px; line-height:.9; letter-spacing:.02em; text-transform:uppercase; color:var(--ink); margin:0}
.name{font-family:var(--head-font); font-weight:500; font-size:22px; letter-spacing:.22em; text-transform:uppercase; color:var(--green); margin:10px 0 0}
.demo{display:block; width:100%; max-width:342px; height:auto; margin:34px 0 26px}
.line1{font-size:22px; font-weight:500; line-height:1.35; color:var(--ink); margin:0}
.line2{font-size:17px; color:var(--muted); margin:8px 0 0}

/* Play area */
.play{padding:0; max-width:none; overflow:hidden}
.board{
  position:absolute; inset:6px; bottom:calc(6px + env(safe-area-inset-bottom));
  touch-action:manipulation; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
  cursor:pointer;
}
.trail{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible}
.trail line{stroke:var(--green-lt); stroke-width:3; stroke-linecap:round; vector-effect:non-scaling-stroke}

.target{
  position:absolute; transform:translate(-50%,-50%);
  border-radius:50%; background:#fff; border:2px solid var(--ink); color:var(--ink);
  /* Poppins, not Oswald: the condensed face made 1, I and J hard to tell apart at
     a glance (Brandon, 10 September). Size is set per run as half the diameter. */
  font-family:var(--body-font); font-weight:600; line-height:1;
  display:flex; align-items:center; justify-content:center;
  padding:0; margin:0; cursor:pointer; touch-action:manipulation; pointer-events:none;
  -webkit-tap-highlight-color:transparent;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.target.done{background:var(--green); border-color:var(--green); color:#fff}
.target.wrong{background:var(--crit-bg); border-color:var(--crit); color:var(--crit); animation:shake .3s}
@keyframes shake{0%,100%{transform:translate(-50%,-50%)}25%{transform:translate(calc(-50% - 4px),-50%)}75%{transform:translate(calc(-50% + 4px),-50%)}}
@media (prefers-reduced-motion:reduce){.target.wrong{animation:none}}

/* Result: dark score panel, light body with one tile per number. Sized so the
   whole screen, Go again included, fits an iPhone with Safari's bars showing
   (about 375 by 600 usable); the sizes step down further on a short screen. */
.result{padding:0; display:flex; flex-direction:column}
.hero{background:var(--dark); color:#fff; padding:18px 22px 16px}
.eyebrow{font-size:11px; text-transform:uppercase; letter-spacing:.18em; font-weight:600; color:var(--green-lt); margin:0 0 6px}
.score{display:flex; align-items:baseline; gap:10px; margin:0}
.score b{font-family:var(--display-font); font-weight:600; font-size:clamp(60px, 11vh, 96px); line-height:.9; letter-spacing:-.01em; font-variant-numeric:tabular-nums}
.score span{font-size:15px; color:#B8BDC4}
.meaning{font-size:13.5px; line-height:1.45; color:#B8BDC4; margin:8px 0 0}
.body{flex:1 1 auto; display:flex; flex-direction:column; padding:10px 16px calc(14px + env(safe-area-inset-bottom))}
.tile{background:var(--panel); border-radius:10px; padding:9px 13px 9px; margin:0 0 7px}
.tile-top{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.tile-label{font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--green)}
.tile-value{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
.tile-value b{font-family:var(--display-font); font-weight:600; font-size:24px; line-height:1; color:var(--ink); margin-right:2px}
.tile-value small{font-size:11.5px; margin-left:4px}
.tile-text{font-size:12.5px; line-height:1.4; color:var(--body); margin:4px 0 0}
.result .btn{min-height:52px; margin-top:4px}
.result .fine{font-size:11px; margin:7px 0 0; line-height:1.35}
/* The ending (Brandon, 10 September: "something that plays to excite them"). The
   score counts up from zero, lands with a flash and a burst of green dots, and a
   run that beats the phone's remembered best turns the panel green with a stamp. */
.hero{position:relative; overflow:hidden; transition:background-color .35s ease}
.hero.land{animation:land .5s ease}
@keyframes land{0%{background-color:var(--dark)}30%{background-color:#1d3a22}100%{background-color:var(--dark)}}
.hero.best{background-color:var(--green)}
.hero.best .eyebrow{color:#DDF0DF}
.hero.best .score span,.hero.best .meaning,.hero.best .best-line{color:#EAF5EB}
.burst{position:absolute; inset:0; pointer-events:none}
.burst i{position:absolute; left:var(--x); top:var(--y); width:8px; height:8px; border-radius:50%; background:var(--green-lt); opacity:0; transform:translate(-50%,-50%)}
.hero.best .burst i{background:#fff}
.burst.go i{animation:fly .9s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes fly{0%{opacity:1; transform:translate(-50%,-50%) scale(1)}100%{opacity:0; transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.4)}}
.stamp{position:absolute; top:14px; right:16px; margin:0; font-family:var(--display-font); font-weight:600; font-size:30px; line-height:1; letter-spacing:.06em; text-transform:uppercase; color:#fff; border:3px solid #fff; border-radius:6px; padding:5px 9px 3px; transform:rotate(-8deg) scale(1); transform-origin:center}
.stamp.in{animation:slam .45s cubic-bezier(.2,1.2,.3,1) both}
@keyframes slam{0%{opacity:0; transform:rotate(-8deg) scale(2.2)}100%{opacity:1; transform:rotate(-8deg) scale(1)}}
.best-line{font-size:13.5px; line-height:1.45; color:var(--green-lt); margin:6px 0 0; min-height:1.45em; font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.hero.land,.burst.go i,.stamp.in{animation:none}.stamp.in{opacity:1}}
@media (max-height:640px){
  .hero{padding:12px 22px 12px}
  .score b{font-size:56px}
  .meaning{display:none}
  .stamp{font-size:22px; top:10px; right:12px}
  .tile-text{font-size:12px}
  .result .fine{display:none}
}

@media (min-width:700px){
  .screen{padding:44px 28px}
  .result{padding:0}
  .hero{padding:40px 28px 32px}
  .body{padding:22px 28px 28px}
  .round{font-size:110px}
}