/* Compounds — all styling. Palette:
   cream #F5F3E9 · panel #EEEBDE · ink #170E27 · navy #001F61 · deep #041F5E · mid #15568F
   rounds: 1 #5C8B1F · 2 #097B84 · 3 #17548F · 4 #041F5E                                  */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #E4E1D4;
  color: #170E27;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex;
  justify-content: center;
  padding: 24px 12px;
  min-height: 100vh;
}
button { font: inherit; color: inherit; border: none; background: none; cursor: pointer; }
a { color: #15568F; }
a:hover { color: #001F61; }
img { display: block; }

.shell {
  width: 390px;
  /* A fixed frame, not one that grows with its content. Overlays are absolute
     to this box, so a shell taller than the window put every bottom sheet below
     the fold — the results screen has been that tall since the leaderboard
     landed. The screen inside scrolls instead. */
  height: calc(100vh - 48px);
  max-height: 780px;
  background: #F5F3E9;
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(0, 31, 97, .14);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
@media (max-width: 520px) {
  body { padding: 0; }
  .shell { width: 100%; border-radius: 0; box-shadow: none; height: 100vh; height: 100dvh; max-height: none; }
}

/* ---------- header ---------- */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(0, 31, 97, .09);
}
.header__icons { display: flex; align-items: center; gap: 5px; }
.iconbtn {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  opacity: .85; transition: background .15s ease, opacity .15s ease;
}
.iconbtn:hover { background: rgba(0, 31, 97, .07); opacity: 1; }
.logotype { height: 24px; width: auto; }

/* ---------- shared ---------- */
.screen {
  flex: 1; min-height: 0;            /* min-height:0 or a flex child will not shrink to scroll */
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; background: #F5F3E9;
}
.spacer { flex: 1 1 0; }
.pill {
  border-radius: 999px; background: #041F5E; color: #fff;
  font-size: 15px; font-weight: 700; padding: 16px 34px;
  transition: transform .15s ease, background .15s ease;
}
.pill:hover { background: #17548F; }
.pill:active { transform: scale(.97); }
.pill--wide { width: 100%; }
.pill--ghost { background: none; border: 2px solid #dfe3ea; color: #041F5E; }
.pill--ghost:hover { background: none; border-color: #041F5E; }
.kicker { font-size: 11.5px; font-weight: 700; letter-spacing: 1.3px; color: #8a90a0; }
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---------- start ---------- */
.start {
  align-items: center; text-align: center;
  padding: 36px 34px 26px;
  animation: fadeIn .3s ease both;
}
.start__type { height: 30px; width: auto; margin-top: 14px; }
.start h1 {
  margin: 40px 0 0; font-size: 21px; line-height: 1.28; font-weight: 700;
  letter-spacing: -.5px; color: #001F61; text-wrap: balance;
}
.start p {
  margin: 18px 0 0; max-width: 300px; font-size: 16.5px; line-height: 1.5;
  font-weight: 500; color: #15568F; text-wrap: pretty;
}
.start__cta { margin-top: 28px; padding: 16px 46px; font-size: 15.5px; background: #001F61; }
.start__cta:hover { background: #15568F; }
.start__note { margin-top: 14px; font-size: 13px; font-weight: 500; color: #7b8296; text-align: center; max-width: 280px; }
.start__meta { font-size: 13px; line-height: 1.55; font-weight: 500; color: #15568F; }
.start__meta a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- tutorial ---------- */
.tut { padding: 26px 26px 28px; animation: fadeIn .25s ease both; }
.tut__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 26px; }
.tut h2 {
  margin: 0; font-size: 18px; line-height: 1.3; font-weight: 800;
  letter-spacing: -.4px; color: #001F61;
}
.tut p {
  margin: 8px 0 0; font-size: 15px; line-height: 1.5; font-weight: 500;
  color: #15568F; text-wrap: pretty;
}
.tut p + p { margin-top: 16px; }
.tut__card {
  margin-top: 24px; background: #fff; border-radius: 20px; padding: 20px 18px;
  box-shadow: 0 10px 26px rgba(0, 31, 97, .06);
}
.dots { display: flex; justify-content: center; align-items: center; gap: 8px; }
.dots button {
  appearance: none;
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  min-width: 10px;
  min-height: 10px;
  padding: 0;
  flex: 0 0 10px;
  border-radius: 50%;
  background: #cfd3c6;
  transition: background .2s ease, transform .2s ease;
}
.dots button:hover { transform: scale(1.35); }
.dots button[aria-current="true"] { background: #001F61; }
.tut__nav { display: flex; justify-content: center; margin-top: 22px; }
.tut__nav .pill { min-width: 156px; }

.demo-clue { display: flex; justify-content: center; }
.demo-clue span {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px 7px 11px; border-radius: 999px; background: #CFE0B0;
  font-size: 15px; font-weight: 700; color: #170E27;
}
.demo-clue em {
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.1px;
  color: rgba(23, 14, 39, .5); font-style: normal;
}
.demo-slots { display: flex; align-items: center; margin-top: 16px; position: relative; }
.demo-slots div:not(.demo-plus) {
  flex: 1; height: 44px; border-radius: 999px; border: 2.5px solid #5C8B1F;
  background: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #001F61;
  position: relative; z-index: 1;
}
.demo-plus {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 24px; height: 24px; border-radius: 50%;
  border: 2.5px solid #5C8B1F; background: #fff; color: #5C8B1F;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; line-height: 1; z-index: 2;
  pointer-events: none;
}
.demo-cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.demo-cloud div {
  height: 38px; padding: 0 14px; white-space: nowrap;
  border-radius: 999px; background: #5C8B1F; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.demo-cloud div.dim { background: #DCE8C9; }
.demo-clock { display: flex; align-items: baseline; justify-content: center; gap: 9px; }
.demo-clock b { font-size: 30px; font-weight: 800; letter-spacing: -1px; color: #001F61; }
.demo-clock span { font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; color: #9aa0ae; }
.demo-banked { text-align: center; margin-top: 4px; font-size: 12.5px; font-weight: 700; color: #15568F; }
.demo-rounds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 16px; }
.demo-rounds div { border-radius: 14px; padding: 10px 6px; text-align: center; }
.demo-rounds span { display: block; font-size: 9px; font-weight: 700; letter-spacing: .8px; color: #9aa0ae; }
.demo-rounds b { font-size: 17px; font-weight: 800; letter-spacing: -.5px; color: #170E27; }
.demo-math { display: flex; flex-direction: column; gap: 10px; }
.demo-math > div { display: flex; align-items: center; gap: 12px; }
.demo-math i {
  width: 28px; height: 28px; flex: none; border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; font-style: normal;
}
.demo-math span { flex: 1; font-size: 13px; font-weight: 600; color: #15568F; }
.demo-math b { font-size: 15px; font-weight: 800; color: #001F61; }
.demo-badges { display: flex; justify-content: center; gap: 12px; }

/* ---------- play ---------- */
.play { padding: 20px 20px 24px; }
.scoreline { display: flex; align-items: center; justify-content: center; gap: 10px; }
.scoreline b { font-size: 22px; font-weight: 800; letter-spacing: -.5px; color: #041F5E; }
.badges { display: flex; justify-content: center; gap: 12px; margin-top: 16px; }
.badges > div { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; }
.badges__idle {
  width: 52px; height: 52px; border-radius: 50%; border: 3px solid #e8eaf0;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: #c3c8d4; background: #fff;
}
.badges__idle.is-current { color: #fff; }
.cluerow { display: flex; justify-content: center; margin-top: 18px; }
.clue {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 18px 8px 12px; border-radius: 999px; color: #fff;
}
.clue span { font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; color: rgba(255, 255, 255, .82); }
.clue b { font-size: 17px; font-weight: 700; letter-spacing: -.3px; }
.slots { display: flex; align-items: center; margin-top: 22px; position: relative; }
.slots.is-wrong { animation: shakeX .38s ease; }
.slot {
  flex: 1; height: 56px; border-radius: 999px; background: #fff;
  font-size: 15px; font-weight: 700; color: #aeb4c2; padding: 0 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  position: relative; z-index: 1;
}
.slot.is-filled { color: #041F5E; }
.slots__plus {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 34px; height: 34px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; line-height: 1; z-index: 2;
  pointer-events: none;
}
.timerow { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 20px; }
.timerow b { font-size: 22px; font-weight: 800; letter-spacing: -.5px; width: 58px; text-align: left; }
/* Tiles flow as a cloud rather than a grid. Two equal columns read as
   "one from each side", which is not the rule — words are unordered and
   both picks can come from anywhere. Letting each pill size to its own
   word breaks the column illusion. */
.tiles {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px; margin-top: 16px;
}
.tile {
  height: 50px; padding: 0 20px; border-radius: 999px; color: #fff; font-size: 15px;
  font-weight: 700; letter-spacing: -.2px; white-space: nowrap;
  transition: transform .12s ease, opacity .15s ease;
}
.tile:hover { transform: scale(1.04); }
.tile:active { transform: scale(.97); }
.tile.is-used { opacity: .28; }
.tile.is-dimmed { opacity: .22; }
.tile.is-answer { background: #041F5E !important; opacity: 1; }
.revealbar {
  margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #EEEBDE; border-radius: 14px; padding: 10px 14px;
  animation: popIn .25s ease both;
}
.revealbar span { font-size: 13.5px; font-weight: 700; color: #001F61; }

/* ---------- results ---------- */
.done { padding: 32px 26px 28px; animation: fadeIn .35s ease both; }
.done__verdict { margin-top: 6px; font-size: 26px; font-weight: 800; letter-spacing: -.8px; color: #041F5E; }
.finalcard {
  margin-top: 22px; border-radius: 22px; background: #041F5E; padding: 24px;
  color: #fff; text-align: center;
  animation: riseA .45s cubic-bezier(.2, .85, .25, 1) .06s both;
}
.finalcard__kicker { font-size: 11.5px; font-weight: 700; letter-spacing: 1.4px; color: rgba(255, 255, 255, .6); }
.finalcard__score { font-size: 54px; font-weight: 800; letter-spacing: -2px; line-height: 1.05; margin-top: 4px; }
.finalcard__sub { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .75); }
.recap { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.recap__row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: 16px; background: #EEEBDE;
}
.recap__row > div { flex: 1; min-width: 0; }
.recap__answer { font-size: 15px; font-weight: 700; color: #041F5E; letter-spacing: -.2px; }
.recap__detail { font-size: 12px; font-weight: 500; color: #7b8296; }
.recap__points { font-size: 15px; font-weight: 800; }
.done__share { margin-top: 20px; background: #5C8B1F; font-size: 16px; }
.done__share:hover { background: #4E7719; }
.done__next { text-align: center; font-size: 11.5px; font-weight: 500; color: #9aa0ae; }

/* How the day went for everyone else. Starts empty and is filled in place when
   the numbers land, so the results screen never replays its entry animations. */
.standing:empty { display: none; }
.standing { margin-top: 14px; animation: fadeIn .3s ease both; }
.standing__stats { display: flex; gap: 10px; }
.standing__stats > div {
  flex: 1; background: #EEEBDE; border-radius: 16px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.standing__stats b { font-size: 20px; font-weight: 800; letter-spacing: -.6px; color: #041F5E; }
.standing__stats span { font-size: 11.5px; font-weight: 600; color: #7b8296; }
.standing__place {
  margin-top: 10px; text-align: center; font-size: 13.5px; font-weight: 700;
  color: #5C8B1F; background: #E9F0DC; border-radius: 999px; padding: 9px 14px;
}

.done__feedback {
  display: block; margin-top: 10px; padding: 14px 24px; text-align: center;
  text-decoration: none; font-size: 15px;
}
.done__feedback:hover { color: #041F5E; }
.done__feednote { margin: 8px 0 0; text-align: center; font-size: 12px; font-weight: 500; color: #9aa0ae; }
.done__meta {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid #e3e0d2;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}

/* Re-deals the same words. Quiet on purpose — it changes nothing that scores. */
.shuffle {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 16px auto 0; padding: 9px 18px; border-radius: 999px;
  border: 1.5px solid #dfe3ea; color: #7b8296;
  font-size: 13px; font-weight: 700; letter-spacing: -.1px;
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.shuffle:hover { border-color: #041F5E; color: #041F5E; }
.shuffle:active { transform: scale(.97); }

/* ---------- overlays ---------- */
.overlay {
  position: absolute; inset: 0; z-index: 50; isolation: isolate;
  background: rgba(0, 31, 97, .5); display: flex;
  animation: fadeIn .18s ease both;
}
.overlay--center { align-items: center; justify-content: center; padding: 30px; }
.overlay--bottom { align-items: flex-end; }
.sheet {
  width: 100%; background: #fff; border-radius: 26px 26px 0 0;
  padding: 26px 24px 24px; max-height: 90%; overflow: auto;
  animation: slideUp .34s cubic-bezier(.2, .85, .25, 1) both;
}
.sheet__head { display: flex; align-items: center; justify-content: space-between; }
.sheet__title { font-size: 22px; font-weight: 800; letter-spacing: -.6px; color: #041F5E; }
.closebtn {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.closebtn:hover { background: #f2f4f8; }
.modal {
  width: 100%; background: #fff; border-radius: 24px; padding: 30px 26px;
  text-align: center; animation: popIn .22s ease both;
}
.modal__answer { font-size: 30px; font-weight: 800; letter-spacing: -1px; margin-top: 6px; }
.modal__detail { font-size: 14px; font-weight: 600; color: #4a5164; margin-top: 10px; line-height: 1.45; }
.modal .pill { margin-top: 20px; width: 100%; }

.statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 18px; }
.statgrid > div { text-align: center; background: #EEEBDE; border-radius: 16px; padding: 14px 6px; }
.statgrid b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.5px; color: #041F5E; }
.statgrid b.small { font-size: 19px; white-space: nowrap; }
.statgrid span { font-size: 10.5px; font-weight: 600; color: #7b8296; }
.statgrid > div.is-best { background: #041F5E; }
.statgrid > div.is-best b { color: #fff; }
.statgrid > div.is-best span { color: rgba(255, 255, 255, .65); }
.history { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.history__row {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  border-radius: 14px; background: #EEEBDE;
}
.history__bar { width: 4px; height: 30px; border-radius: 4px; flex: none; }
.history__day { min-width: 54px; flex: none; }
.history__day b { display: block; font-size: 13.5px; font-weight: 700; color: #041F5E; }
.history__day span { font-size: 11px; font-weight: 500; color: #9aa0ae; }
.history__marks { flex: 1; font-size: 13px; letter-spacing: 1px; }
.history__score { text-align: right; }
.history__score b { display: block; font-size: 14px; font-weight: 800; color: #041F5E; }
.history__score span { font-size: 11px; font-weight: 600; color: #9aa0ae; }
.empty {
  margin-top: 10px; padding: 18px 16px; border-radius: 14px; background: #EEEBDE;
  font-size: 13px; line-height: 1.5; color: #7b8296; text-align: center;
}
.menu { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.menu button {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 15px 16px; border-radius: 16px; background: #EEEBDE;
  font-size: 14.5px; font-weight: 600; color: #041F5E;
  transition: background .15s ease;
}
.menu button:hover { background: #E6E2D3; }
.menu button.is-danger { color: #c2452c; }
.menu button.is-danger:hover { background: #fbeeeb; }
.sheet__foot { text-align: center; font-size: 11.5px; font-weight: 500; color: #9aa0ae; margin-top: 18px; }
.menu button small { font-weight: 500; color: #7b8296; margin-left: 8px; font-size: 12.5px; }

/* ---------- account ---------- */
/* "Log in or Sign up to save your stats" — sits under the CTA on the intro and
   under Share on the results screen. Links, not buttons: it is an aside. */
.acct {
  margin-top: 28px; text-align: center; font-size: 13.5px; font-weight: 600;
  color: #7b8296; max-width: 300px;
  animation: fadeIn .25s ease both;
}
/* Held invisible, at full size, until we know whether anyone is signed in —
   otherwise the anonymous prompt paints first and then flips. */
.acct.is-pending { visibility: hidden; animation: none; }
.acct a { color: #5C8B1F; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.acct a:hover { color: #4a7217; }
.acct b { color: #041F5E; font-weight: 700; }
.acct a.acct__me { color: #7b8296; text-decoration: none; }
.acct a.acct__me b { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }

/* Signed-in marker in the header: a disc with the first letter of the address.
   Sits to the right of the icons and opens the account sheet. */
.avatar {
  width: 30px; height: 30px; border-radius: 50%; background: #041F5E; color: #fff;
  font-size: 13px; font-weight: 800; letter-spacing: .3px; line-height: 30px; text-align: center;
  margin-left: 4px; transition: transform .12s ease;
}
.avatar:hover { transform: scale(1.06); }
.avatar:active { transform: scale(.95); }
.acct-email { margin: 0 0 14px; text-align: center; font-size: 14px; color: #4a5068; }
.acct-email b { color: #041F5E; word-break: break-all; }
.start .acct { margin-top: 36px; }   /* .start p sets 18px and outranks .acct on specificity */
.done .acct { margin: 24px auto 0; }

.acct-copy { font-size: 14px; line-height: 1.5; color: #4a5068; margin: 0; }
.acct-copy b { color: #041F5E; }
.acct-form { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.acct-form input {
  height: 50px; padding: 0 16px; border-radius: 14px; border: 2px solid #D9D5C6;
  background: #fff; font-size: 16px; color: #041F5E; outline: none;
  transition: border-color .15s ease;
}
.acct-form input:focus { border-color: #041F5E; }
.acct-form input:disabled { opacity: .6; }
.acct-error { margin: 0; font-size: 13px; font-weight: 600; color: #c2452c; }
.acct-dev {
  margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: #FFF3B0;
  font-size: 12.5px; line-height: 1.5; color: #4a4a2a; word-break: break-all;
}
.acct-dev a { color: #041F5E; }
.acct-foot { margin: 16px 0 0; text-align: center; font-size: 12px; color: #9aa0ae; }
.acct-foot b { color: #7b8296; font-weight: 600; }
.sharecard {
  margin-top: 18px; border: 1.5px solid #E4E1D4; border-radius: 22px; background: #fff;
  padding: 26px 20px; text-align: center;
  animation: riseA .4s cubic-bezier(.2, .85, .25, 1) .08s both;
}
.sharecard__title { font-size: 21px; font-weight: 800; letter-spacing: -.6px; color: #170E27; }
.sharecard__marks { font-size: 24px; letter-spacing: 4px; margin-top: 12px; line-height: 1.1; }
.sharecard__line { font-size: 16px; font-weight: 600; color: #170E27; margin-top: 14px; }
.sharecard__url { font-size: 15px; font-weight: 500; color: #A8ADB8; margin-top: 6px; }

/* ---------- motion ---------- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes riseA { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tileIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes shakeX {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
@keyframes solveDraw { to { stroke-dashoffset: 0; } }
@keyframes solveSpring {
  0% { opacity: 0; transform: scale(.4); }
  55% { opacity: 1; transform: scale(1.14); }
  78% { transform: scale(.97); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes solveSpark {
  0% { opacity: 0; transform: translateY(10px) scaleY(.4); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-8px) scaleY(1); }
}

.rise { animation: riseA .5s cubic-bezier(.2, .85, .25, 1) both; }
/* Round-solved badge: the disc springs in while sparks throw outward, then the
   check draws itself. Sparks carry their own per-element delay inline. */
.solve__badge { transform-origin: 60px 60px; animation: solveSpring .56s cubic-bezier(.2, 1.5, .4, 1) both; }
.solve__check { stroke-dasharray: 58; stroke-dashoffset: 58; animation: solveDraw .3s .2s ease-out forwards; }
.solve__spark { animation-name: solveSpark; animation-duration: .42s; animation-timing-function: ease-out; animation-fill-mode: both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .solve__check { stroke-dashoffset: 0 !important; }
  .solve__spark { opacity: 0 !important; }
}

/* ---------- kickoff (variant b opener) ---------- */
.kick__banner {
  margin: 10px auto 0; max-width: 320px; text-align: center;
  font-size: 10.5px; font-weight: 800; letter-spacing: 1px; color: #5C8B1F; line-height: 1.4;
}
.kick .scoreline { margin-top: 12px; position: relative; }
.tnum.pop { animation: scorePop .4s cubic-bezier(.2,1.5,.4,1); }
@keyframes scorePop { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }
.kick__plus {
  position: absolute; right: -6px; top: -2px; font-size: 20px; font-weight: 800; color: #5C8B1F;
  pointer-events: none; animation: flyUp .75s ease-out forwards;
}
@keyframes flyUp { 0% { opacity: 0; transform: translateY(6px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-26px); } }
.kick__meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding: 0 2px;
}
.kick__count { font-size: 14px; font-weight: 700; color: #7b8296; }
.kick__count b { color: #041F5E; font-size: 17px; }
.kick__time { display: inline-flex; align-items: baseline; gap: 8px; }
.kick__time .tnum { font-size: 20px; }
.kick .tiles { margin-top: 16px; }
.kick__found {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 16px;
}
.kick__chip {
  padding: 6px 12px; border-radius: 999px; background: #E9F0DC; color: #3f6114;
  font-size: 13px; font-weight: 700; animation: popIn .28s ease both;
}

/* Denser clue boards in variant b — keep 20/25 tiles in one viewport. */
.tiles.t-lg { gap: 8px; }
.tiles.t-lg .tile { height: 44px; padding: 0 16px; font-size: 14px; }
.tiles.t-xl { gap: 7px; }
.tiles.t-xl .tile { height: 40px; padding: 0 13px; font-size: 13px; letter-spacing: -.3px; }
.modal--intro .kick__introbadge { margin: 0 auto 12px; }
.modal--intro .modal__detail { margin-top: 10px; }

/* One-time survey over the results */
.modal--survey .survey__opts { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.survey__opt { background: #041F5E; }
.survey__opt--muted { background: #EEEBDE; color: #041F5E; }
.survey__opt--muted:hover { background: #E6E2D3; }

/* A gate before a round starts — fully opaque so the clue underneath can't be read. */
.overlay--solid { background: #F5F3E9; }

/* ---------- dev bar ---------- */
/* Only ever rendered outside production (it exists iff /api/dev answers).
   Pinned to the foot of the shell, under whatever screen is showing. Sized to
   fit the shell's fixed 390px in one row — the viewport is no guide here. */
.devbar {
  margin-top: auto; flex: none; min-width: 0;
  display: flex; align-items: center; gap: 5px;
  padding: 10px 10px; background: #041F5E;
  position: relative; z-index: 60;   /* above every overlay: the bar must work mid-modal */
}
.devbar__tag { flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: 1.3px; color: rgba(255, 255, 255, .45); margin-right: 2px; }
.devbar__btn {
  flex: none; padding: 8px 9px; border-radius: 11px; background: rgba(255, 255, 255, .1);
  color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: -.1px; white-space: nowrap;
  transition: background .12s ease, transform .12s ease;
}
.devbar__btn:hover { background: rgba(255, 255, 255, .18); }
.devbar__btn:active { transform: scale(.96); }
.devbar__btn--go { color: #9BD65B; }
.devbar__btn--stop { color: #F4A582; }
.devbar__btn--icon { padding: 8px 9px; font-size: 15px; line-height: 1; }
.devbar__spacer { flex: 1; min-width: 4px; }
.devbar__day { flex: none; font-size: 12.5px; font-weight: 700; color: #fff; white-space: nowrap; padding: 0 2px; }
.devbar__day.is-override { color: #F4D35E; }   /* an override is on: tap to return to the calendar */

/* Score against the day's best possible, on the final card. */
.best { margin-top: 16px; }
.best__bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.best__bar i { display: block; height: 100%; border-radius: 999px; background: #9BD65B; animation: growBar .9s cubic-bezier(.2,.85,.25,1) .35s both; transform-origin: left; }
.best__label { margin-top: 8px; font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .75); }
.best__label b { color: #fff; font-weight: 800; }
@keyframes growBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- leaderboard ---------- */
/* The day's field, with the player's row highlighted. The middle collapses to
   a "···" unless the player is standing in it. */
.board { margin-top: 22px; }
.board__head { margin-bottom: 8px; }
.board__row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 12px; border-radius: 12px;
  font-size: 14px; font-weight: 600; color: #4a5164;
}
.board__row.is-you { background: #E9F0DC; color: #041F5E; font-weight: 800; }
.board__rank { flex: none; width: 22px; font-size: 12.5px; font-weight: 700; color: #9aa0ae; }
.board__row.is-you .board__rank { color: #5C8B1F; }
.board__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board__score { font-size: 15px; font-weight: 800; color: #041F5E; letter-spacing: -.3px; }
.board__gap { text-align: center; font-size: 13px; letter-spacing: 2px; color: #c3c8d4; padding: 2px 0; }

/* The dev bar sits above overlays so Solve and Time out work mid-modal — but a
   bottom sheet must not slide underneath it. Only ever applies in dev. */
#app:has(.devbar) .overlay--bottom .sheet { margin-bottom: 64px; }

/* The sign-in nudge on the results screen. Sits under the board, where the
   player has just seen their own row among named ones. */
.joincard {
  margin-top: 20px; padding: 18px 18px 16px; border-radius: 18px;
  background: #EEEBDE; text-align: center;
  animation: riseA .4s cubic-bezier(.2,.85,.25,1) .5s both;
}
.joincard__title { font-size: 16px; font-weight: 800; letter-spacing: -.3px; color: #041F5E; }
.joincard__copy { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; font-weight: 500; color: #4a5164; text-wrap: pretty; }
.joincard .pill { margin-top: 14px; padding: 13px 24px; font-size: 14.5px; background: #5C8B1F; }
.joincard .pill:hover { background: #4E7719; }

/* The account record: a second rank of figures, and what the rounds did. */
.statgrid--sub { margin-top: 10px; }
.statgrid--sub b { font-size: 20px; }
.statgrid--sub b.small { font-size: 16px; }
.statline { margin-top: 12px; font-size: 13px; font-weight: 600; color: #4a5164; text-align: center; }
.statline b { color: #041F5E; }
.rounds { margin-top: 10px; display: flex; flex-direction: column; gap: 7px; }
.rounds__row { display: flex; align-items: center; gap: 10px; }
.rounds__n { flex: none; width: 12px; font-size: 13px; font-weight: 800; }
.rounds__track { flex: 1; height: 8px; border-radius: 999px; background: #EEEBDE; overflow: hidden; }
.rounds__track i { display: block; height: 100%; border-radius: 999px; transition: width .4s cubic-bezier(.2,.85,.25,1); }
.rounds__pct { flex: none; width: 36px; text-align: right; font-size: 12.5px; font-weight: 700; color: #4a5164; }
.rounds__note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; font-weight: 500; color: #7b8296; text-wrap: pretty; }