/* =====================================================================
   RIDDLE KINGDOM — THE APP
   A game by Aadvika

   Screens, shell and components. theme.css owns colour and type; this
   file owns everything you can point at.

   The game is a phone first — it was drawn as one and it reads best as
   one. It is not a phone stuck on a monitor, though: the column grows
   with the screen, and on a real desktop the quiz spreads into two
   columns. One layout that adapts, never a second design.
   ===================================================================== */


/* =====================================================================
   SHELL
   ===================================================================== */
.app{
  position: relative;
  z-index: 5;
  width: min(var(--phone), 100%);
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* On anything wider than a phone the app gets a soft edge, so it reads
   as an object on a table rather than a column floating in the void. */
@media (min-width: 520px){
  .app{
    box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 60px 120px -50px #000;
    background: linear-gradient(180deg, rgba(255,255,255,.018), transparent 40%);
  }
}

.view{
  flex: 1;
  padding: 0 var(--gutter) calc(var(--nav-h) + var(--safe-b) + 18px);
  display: none;
  animation: viewIn .42s var(--ease) both;
}
.view.on{ display: block; }
@keyframes viewIn{
  from{ opacity: 0; transform: translateY(14px) }
  to  { opacity: 1; transform: none }
}

/* Going somewhere has a direction.

   Deeper into the app slides in from the right; coming back slides in
   from the left. A move between two screens at the same depth keeps the
   plain fade above. The child never has to work out whether she went
   forwards or backwards, because the movement already said so — and it
   makes the back arrow feel like it undoes something rather than being
   just another way to navigate. ui.js decides which, from one table. */
.view.on.fwd{ animation: viewFwd .38s var(--ease) both; }
.view.on.bwd{ animation: viewBwd .38s var(--ease) both; }
@keyframes viewFwd{
  from{ opacity: 0; transform: translateX(26px) }
  to  { opacity: 1; transform: none }
}
@keyframes viewBwd{
  from{ opacity: 0; transform: translateX(-26px) }
  to  { opacity: 1; transform: none }
}
/* the quiz has its own footer, so it does not need to clear the nav */
.view.full{ padding-bottom: calc(var(--safe-b) + 18px); }

.hide{ display: none !important; }


/* =====================================================================
   HOME — the greeting bar
   ===================================================================== */
.greet{
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 18px 0 4px;
}
.avatar{
  width: 46px; height: 46px;
  flex: none;
  display: grid; place-items: center;
  font-size: 25px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 26%, hsl(var(--h) 92% 70%), hsl(var(--h) 84% 44%) 64%, hsl(var(--h) 76% 30%));
  box-shadow:
    0 0 0 2px rgba(255,255,255,.22) inset,
    0 0 0 3px rgba(255,255,255,.09),
    0 8px 20px -8px var(--tint-glow);
  transition: transform .2s var(--spring);
}
.avatar:active{ transform: scale(.93); }

.greet-txt{ flex: 1; min-width: 0; }
.greet-hi{
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.greet-sub{ font-size: 11.5px; color: var(--muted); font-weight: 700; line-height: 1.35; }

.gems{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 8px 13px 8px 10px;
  border-radius: var(--r-full);
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  background: linear-gradient(180deg, var(--surface-3), var(--surface));
  border: 1px solid var(--stroke-2);
  box-shadow: 0 6px 16px -8px #000, inset 0 1px 0 rgba(255,255,255,.14);
}
.gems i{ font-style: normal; font-size: 15px; line-height: 1; }
.gems.pop{ animation: gemPop .5s var(--spring); }
@keyframes gemPop{
  0%{ transform: none }
  40%{ transform: scale(1.16); filter: brightness(1.3) }
  100%{ transform: none }
}


/* =====================================================================
   HOME — the castle and the wordmark
   ===================================================================== */
.hero{
  position: relative;
  text-align: center;
  padding: 6px 0 2px;
}
.castle{
  font-size: 58px;
  line-height: 1;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.6));
  animation: bob 4.2s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-9px) } }

.wordmark{
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(38px, 11vw, 50px);
  line-height: .95;
  letter-spacing: -.035em;
  margin-top: -6px;
}
/* words never break apart: letters animate, the word holds them together */
.wordmark .wd{ display: inline-block; white-space: nowrap; }
.wordmark .ltr{
  display: inline-block;
  animation: drop .6s var(--spring) both;
  text-shadow: 0 4px 0 rgba(0,0,0,.28), 0 10px 26px rgba(0,0,0,.5);
}
@keyframes drop{
  from{ opacity: 0; transform: translateY(-30px) rotate(-10deg) }
  to  { opacity: 1; transform: none }
}

.tagline{
  display: inline-block;
  margin-top: 10px;
  padding: 6px 18px;
  border-radius: var(--r-full);
  font-family: var(--display);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: .1em;
  color: var(--text-2);
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
  border: 1px solid var(--stroke-2);
}


/* =====================================================================
   HOME — the three ways to play
   ===================================================================== */
.modes{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 18px;
}
.mode{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
  padding: 15px 8px 12px;
  border-radius: var(--r-lg);
  border: 1px solid var(--stroke-2);
  background:
    radial-gradient(120% 90% at 50% 0%, hsl(var(--mh) 88% 58% / .55), transparent 66%),
    linear-gradient(180deg, var(--surface-2), var(--surface-lo));
  box-shadow: 0 14px 30px -18px #000, inset 0 1px 0 rgba(255,255,255,.14);
  overflow: hidden;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s;
}
.mode::after{
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(90% 70% at 50% 118%, hsl(var(--mh) 92% 62% / .5), transparent 70%);
  opacity: 0; transition: opacity .25s;
  pointer-events: none;
}
.mode:hover{
  transform: translateY(-4px);
  border-color: hsl(var(--mh) 90% 70% / .75);
  box-shadow: 0 22px 40px -20px hsl(var(--mh) 90% 50% / .9);
}
.mode:hover::after{ opacity: 1; }
.mode:active{ transform: translateY(-1px) scale(.985); }
.mode > *{ position: relative; z-index: 1; }

.mode-emoji{ font-size: 30px; line-height: 1; filter: drop-shadow(0 5px 10px rgba(0,0,0,.5)); }
.mode-name{
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.mode-note{
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--text-2);
  font-weight: 700;
  opacity: .85;
  flex: 1;
}
.mode-cta{
  margin-top: 4px;
  padding: 6px 14px;
  border-radius: var(--r-full);
  font-family: var(--display);
  font-weight: 600;
  font-size: 11.5px;
  color: #fff;
  background: linear-gradient(180deg, hsl(var(--mh) 90% 58%), hsl(var(--mh) 88% 44%));
  box-shadow: 0 4px 0 hsl(var(--mh) 80% 28%), 0 8px 18px -8px hsl(var(--mh) 90% 50% / .9);
}
.mode:active .mode-cta{ transform: translateY(2px); box-shadow: 0 2px 0 hsl(var(--mh) 80% 28%); }


/* =====================================================================
   HOME — the three shelves
   ===================================================================== */
.shelves{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.shelf{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 13px 6px 11px;
  border-radius: var(--r-md);
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, var(--surface), var(--surface-lo));
  transition: transform .16s var(--ease), background .2s, border-color .2s;
}
.shelf:hover{ transform: translateY(-3px); background: linear-gradient(180deg, var(--surface-2), var(--surface)); border-color: var(--stroke-2); }
.shelf:active{ transform: translateY(0) scale(.97); }
.shelf i{ font-style: normal; font-size: 20px; line-height: 1; }
.shelf span{
  font-family: var(--display);
  font-weight: 600;
  font-size: 10px;
  text-align: center;
  line-height: 1.2;
}


/* =====================================================================
   HOME — the seven day streak
   ===================================================================== */
.streak-card{
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: var(--r-lg);
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, var(--surface), var(--surface-lo));
}
.streak-head{ flex: none; }
.streak-flame{ font-size: 22px; line-height: 1; }
.streak-title{
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
}
.streak-note{ font-size: 10.5px; color: var(--muted); font-weight: 700; }

.streak-days{
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: flex-end;
}
.day{
  width: 24px; height: 24px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 12px;
  border: 1.5px solid var(--stroke-2);
  background: rgba(255,255,255,.05);
  color: var(--muted-2);
}
.day.done{
  border-color: transparent;
  background: linear-gradient(180deg, var(--win), var(--win-d));
  color: #fff;
  box-shadow: 0 4px 12px -4px rgba(46,213,115,.8);
}
.day.today{
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(255,198,75,.18);
}
.day.gift{
  border-color: transparent;
  background: linear-gradient(180deg, var(--pink-2), var(--pink-d));
  font-size: 13px;
}


/* =====================================================================
   BOTTOM NAVIGATION
   ===================================================================== */
.nav{
  position: fixed;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  width: min(var(--phone), 100%);
  height: calc(var(--nav-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  background: linear-gradient(180deg, rgba(25,9,48,.86), rgba(14,4,28,.98));
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border-top: 1px solid var(--stroke);
  box-shadow: 0 -18px 40px -20px #000;
}
.nav.hide{ display: none !important; }

.nav-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 0;
  color: var(--muted-2);
  transition: color .2s, transform .16s var(--ease);
}
.nav-item i{ font-style: normal; font-size: 20px; line-height: 1; opacity: .72; transition: opacity .2s, transform .2s var(--spring); }
.nav-item span{ font-family: var(--display); font-weight: 600; font-size: 10px; }
.nav-item:active{ transform: scale(.9); }
.nav-item.on{ color: var(--text); }
.nav-item.on i{ opacity: 1; transform: translateY(-2px) scale(1.1); }

/* the crown, lifted out of the bar */
.nav-fab{
  position: relative;
  display: grid; place-items: center;
  justify-self: center;
  width: 58px; height: 58px;
  margin-top: -26px;
  border-radius: 50%;
  font-size: 26px;
  background: linear-gradient(180deg, var(--pink-2), var(--pink-d));
  border: 3px solid #180830;
  box-shadow: 0 10px 26px -8px var(--pink-glow), inset 0 2px 0 rgba(255,255,255,.4);
  transition: transform .18s var(--spring), box-shadow .2s;
}
.nav-fab:hover{ box-shadow: 0 14px 34px -8px var(--pink-glow), inset 0 2px 0 rgba(255,255,255,.4); }
.nav-fab:active{ transform: scale(.9); }
.nav-fab::before{
  content: "";
  position: absolute; inset: -7px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,46,147,.28);
  animation: pulseRing 2.6s var(--ease) infinite;
}
@keyframes pulseRing{
  0%  { transform: scale(.9);  opacity: .9 }
  70% { transform: scale(1.25); opacity: 0 }
  100%{ transform: scale(1.25); opacity: 0 }
}


/* =====================================================================
   SCREEN HEADER — back arrow, title, mascot
   ===================================================================== */
.top{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 0 14px;
}
.back{
  width: 40px; height: 40px;
  flex: none;
  display: grid; place-items: center;
  font-size: 18px;
  border-radius: var(--r-md);
  background: var(--fill);
  border: 1px solid var(--stroke-2);
  transition: background .18s, transform .16s var(--ease);
}
.back:hover{ background: var(--fill-2); }
.back:active{ transform: scale(.92); }

.top-txt{ flex: 1; min-width: 0; text-align: center; }
.top-title{
  font-family: var(--display);
  font-weight: 600;
  font-size: 17.5px;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.top-sub{ font-size: 11.5px; color: var(--muted); font-weight: 700; margin-top: 1px; }
.top-mascot{
  width: 40px; height: 40px;
  flex: none;
  display: grid; place-items: center;
  font-size: 27px;
  animation: bob 4s ease-in-out infinite;
}


/* =====================================================================
   PANELS AND SECTION LABELS
   ===================================================================== */
.panel{
  padding: 14px;
  border-radius: var(--r-lg);
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, var(--surface), var(--surface-lo));
  box-shadow: 0 16px 34px -24px #000, inset 0 1px 0 rgba(255,255,255,.08);
}
.panel + .panel{ margin-top: 11px; }

.label{
  font-family: var(--display);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text-2);
  margin-bottom: 10px;
}


/* =====================================================================
   GRADE PILLS
   ===================================================================== */
.grades{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
}
.grade{
  position: relative;
  padding: 13px 0;
  border-radius: var(--r-md);
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  border: 1px solid var(--stroke-2);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-lo));
  transition: transform .16s var(--ease), background .2s, box-shadow .2s;
}
.grade:hover:not(.locked){ transform: translateY(-3px); }
.grade.on{
  border-color: transparent;
  background: linear-gradient(180deg, var(--pink), var(--pink-d));
  box-shadow: 0 10px 24px -10px var(--pink-glow), inset 0 1px 0 rgba(255,255,255,.35);
}
.grade.locked{ opacity: .34; cursor: not-allowed; }
.grade.locked::after{
  content: "🔒";
  position: absolute; top: 4px; right: 6px;
  font-size: 9px;
}


/* =====================================================================
   SUBJECT GRID — a clean three by three
   ===================================================================== */
.subjects{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}
.subject{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 6px;
  min-height: 92px;
  border-radius: var(--r-md);
  border: 1px solid var(--stroke-2);
  background:
    radial-gradient(120% 100% at 50% 0%, hsl(var(--ch) 84% 56% / .38), transparent 68%),
    linear-gradient(180deg, var(--surface-2), var(--surface-lo));
  overflow: hidden;
  transition: transform .16s var(--ease), border-color .2s, box-shadow .2s;
}
.subject::after{
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(90% 80% at 50% 120%, hsl(var(--ch) 90% 60% / .5), transparent 70%);
  opacity: 0; transition: opacity .25s;
}
.subject:hover{
  transform: translateY(-4px);
  border-color: hsl(var(--ch) 88% 70% / .8);
  box-shadow: 0 20px 36px -20px hsl(var(--ch) 90% 52% / .95);
}
.subject:hover::after{ opacity: 1; }
.subject:active{ transform: translateY(-1px) scale(.97); }
.subject > *{ position: relative; z-index: 1; }
.subject.on{
  border-color: hsl(var(--ch) 92% 72%);
  box-shadow: 0 0 0 2px hsl(var(--ch) 92% 66% / .5), 0 18px 34px -18px hsl(var(--ch) 90% 52%);
}
.subject-emoji{ font-size: 26px; line-height: 1; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.subject-name{
  font-family: var(--display);
  font-weight: 600;
  font-size: 11.5px;
  line-height: 1.2;
  text-align: center;
}


/* =====================================================================
   RECENT CHIPS
   ===================================================================== */
.chips{ display: flex; flex-wrap: wrap; gap: 7px; }
.chip{
  padding: 6px 12px;
  border-radius: var(--r-full);
  font-family: var(--display);
  font-weight: 500;
  font-size: 11.5px;
  color: var(--text-2);
  background: var(--fill);
  border: 1px solid var(--stroke-2);
  transition: background .18s, transform .14s var(--ease);
}
.chip:hover{ background: var(--fill-2); }
.chip:active{ transform: scale(.94); }
.chip-empty{ color: var(--muted-2); font-size: 12px; font-weight: 700; }


/* =====================================================================
   TOPIC LIST
   ===================================================================== */
.topics{ display: grid; gap: 8px; }
.topic{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--stroke-2);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-lo));
  text-align: left;
  transition: transform .14s var(--ease), border-color .2s, background .2s;
}
.topic:hover{ transform: translateX(3px); background: linear-gradient(180deg, var(--surface-3), var(--surface)); }
.topic:active{ transform: scale(.99); }
.topic.on{
  border-color: hsl(var(--h) 92% 70%);
  background:
    linear-gradient(90deg, hsl(var(--h) 88% 52% / .35), transparent 70%),
    linear-gradient(180deg, var(--surface-3), var(--surface));
  box-shadow: 0 0 0 1px hsl(var(--h) 90% 66% / .45);
}
.topic i{ font-style: normal; font-size: 21px; line-height: 1; flex: none; }
.topic-name{
  flex: 1;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14.5px;
}
.topic-count{ font-size: 11px; color: var(--muted-2); font-weight: 800; flex: none; }
.topic-tick{
  width: 23px; height: 23px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 12px;
  background: linear-gradient(180deg, var(--win), var(--win-d));
  color: #fff;
  opacity: 0;
  transform: scale(.5);
  transition: opacity .2s, transform .25s var(--spring);
}
.topic.on .topic-tick{ opacity: 1; transform: none; }
.topic.on .topic-count{ display: none; }

.viewall{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  width: 100%;
  margin-top: 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 12.5px;
  color: hsl(var(--h) 92% 76%);
}
.viewall:hover{ filter: brightness(1.15); }


/* =====================================================================
   DIFFICULTY
   ===================================================================== */
.diffs{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}
.diff{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 12px 6px 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--stroke-2);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-lo));
  transition: transform .16s var(--ease), box-shadow .2s, border-color .2s;
}
.diff:hover{ transform: translateY(-3px); }
.diff:active{ transform: translateY(0) scale(.97); }
.diff i{ font-style: normal; font-size: 18px; line-height: 1; }
.diff-name{ font-family: var(--display); font-weight: 600; font-size: 13.5px; }
.diff-pts{ font-size: 10.5px; font-weight: 800; color: var(--muted); }
.diff.on{
  border-color: transparent;
  background: linear-gradient(180deg, hsl(var(--dh) 74% 44%), hsl(var(--dh) 78% 26%));
  box-shadow: 0 10px 24px -10px hsl(var(--dh) 82% 48% / .95), inset 0 1px 0 rgba(255,255,255,.28);
}
.diff.on .diff-pts{ color: rgba(255,255,255,.86); }


/* =====================================================================
   QUESTION COUNT
   ===================================================================== */
.counts{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
}
.count{
  padding: 12px 0;
  border-radius: var(--r-md);
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  border: 1px solid var(--stroke-2);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-lo));
  transition: transform .16s var(--ease), border-color .2s, box-shadow .2s;
}
.count:hover{ transform: translateY(-3px); }
.count:active{ transform: translateY(0) scale(.96); }
.count.on{
  border-color: var(--pink);
  background: linear-gradient(180deg, rgba(255,46,147,.24), rgba(255,46,147,.08));
  box-shadow: 0 0 0 1px var(--pink), 0 10px 24px -12px var(--pink-glow);
}
.count.short{ opacity: .4; cursor: not-allowed; }


/* =====================================================================
   BUTTONS
   ===================================================================== */
.btn{
  position: relative;
  display: block;
  width: 100%;
  padding: 16px 20px;
  border-radius: var(--r-full);
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  color: #fff;
  background: linear-gradient(180deg, var(--pink-2), var(--pink));
  overflow: hidden;
  box-shadow:
    0 5px 0 var(--pink-d),
    0 16px 30px -12px var(--pink-glow),
    inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), filter .2s;
}
.btn::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.42) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .75s var(--ease);
}
.btn:hover::after{ transform: translateX(120%); }
.btn:hover{ filter: brightness(1.06); }
.btn:active{
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--pink-d), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn:disabled{ opacity: .42; cursor: default; box-shadow: 0 5px 0 var(--pink-d); }
.btn:disabled::after{ display: none; }

.btn.violet{
  background: linear-gradient(180deg, #A05CF5, var(--violet));
  box-shadow: 0 5px 0 var(--violet-d), 0 16px 30px -12px rgba(139,63,232,.5), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn.violet:active{ box-shadow: 0 1px 0 var(--violet-d), inset 0 1px 0 rgba(255,255,255,.3); }

.btn.ghost{
  color: var(--text);
  background: var(--fill);
  border: 1px solid var(--stroke-2);
  box-shadow: none;
  font-weight: 500;
  font-size: 15px;
  padding: 13px 18px;
}
.btn.ghost:hover{ background: var(--fill-2); }
.btn.ghost:active{ transform: translateY(2px); box-shadow: none; }

.stack > * + *{ margin-top: 10px; }
.row{ display: flex; gap: 9px; }
.row > *{ flex: 1; }

.link{
  font-family: var(--display);
  font-weight: 500;
  font-size: 14px;
  color: var(--muted);
  padding: 8px 4px;
}
.link:hover{ color: var(--text); }

.sticky-cta{
  position: sticky;
  bottom: calc(var(--nav-h) + var(--safe-b) + 10px);
  margin-top: 14px;
  z-index: 20;
}


/* =====================================================================
   QUIZ — the top rail
   ===================================================================== */
.qtop{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 0 10px;
}
.quit{
  width: 40px; height: 40px;
  flex: none;
  display: grid; place-items: center;
  font-size: 17px;
  border-radius: var(--r-md);
  background: var(--fill);
  border: 1px solid var(--stroke-2);
  transition: background .18s, transform .16s var(--ease);
}
.quit:hover{ background: var(--fill-2); }
.quit:active{ transform: scale(.92); }

.qtop-right{ display: flex; align-items: center; gap: 8px; flex: none; }

.streak-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: var(--r-full);
  background: linear-gradient(180deg, rgba(255,140,40,.28), rgba(255,90,20,.14));
  border: 1px solid rgba(255,160,60,.4);
  opacity: 0;
  transform: scale(.7);
  transition: opacity .25s, transform .3s var(--spring);
}
.streak-chip.on{ opacity: 1; transform: none; }
.streak-chip i{ font-style: normal; font-size: 15px; line-height: 1; }
.streak-chip b{
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.1;
}
.streak-chip small{ display: block; font-size: 9px; color: var(--text-2); font-weight: 800; }


/* =====================================================================
   QUIZ — THE PEEPHOLE

   Aadvika's signature, and the thing worth keeping from the first
   version. A round window into the locked gate. The timer drains as a
   ring around it, and the moment the question is answered it swings
   open and the picture behind the gate appears.

   In this version it doubles as the timer at the top of the quiz, so
   one object does both jobs.
   ===================================================================== */
.peep-wrap{
  position: relative;
  width: var(--peep); height: var(--peep);
  flex: none;
  display: grid; place-items: center;
  transition: transform .5s var(--spring);
}
.peep-wrap.big{ transform: scale(1.34); }

.ring{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}
.ring .track{
  fill: none;
  stroke: rgba(255,255,255,.12);
  stroke-width: 7;
}
.ring .live{
  fill: none;
  stroke: url(#ringGrad);
  stroke-width: 7;
  stroke-linecap: round;
  filter: drop-shadow(0 0 7px var(--tint-glow));
  transition: stroke-dashoffset 1s linear, stroke .3s;
}
.ring.low .live{ stroke: var(--lose); filter: drop-shadow(0 0 9px rgba(255,91,127,.9)); }
.ring.win  .live{ stroke: var(--win); stroke-dashoffset: 0 !important; filter: drop-shadow(0 0 11px rgba(46,213,115,.95)); }
.ring.lose .live{ stroke: var(--lose); stroke-dashoffset: 0 !important; }

.peep{
  position: relative;
  width: calc(var(--peep) * .732); height: calc(var(--peep) * .732);
  border-radius: 50%;
  display: grid; place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 34% 26%, hsl(var(--h) 70% 26%), #150829 72%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,.16),
    inset 0 8px 18px rgba(0,0,0,.75);
}
.peep .orb{
  position: absolute;
  font-size: calc(var(--peep) * .134);
  opacity: .5;
  animation: orbit 3.4s ease-in-out infinite;
  transition: opacity .4s;
}
@keyframes orbit{
  0%,100%{ transform: translateY(0) scale(1); opacity: .5 }
  50%    { transform: translateY(-5px) scale(1.14); opacity: .9 }
}

.face{
  position: relative;
  z-index: 2;
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(var(--peep) * .317);
  line-height: 1;
  color: hsl(var(--h) 92% 80%);
  text-shadow: 0 0 18px var(--tint-glow);
}
.face.num{ font-size: calc(var(--peep) * .305); color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.face.low{ color: var(--lose); animation: pulseNum .9s ease-in-out infinite; }
@keyframes pulseNum{ 0%,100%{ transform: scale(1) } 50%{ transform: scale(1.16) } }

.face.reveal{
  font-size: calc(var(--peep) * .415);
  color: #fff;
  text-shadow: none;
  animation: swing .65s var(--spring) both;
}
@keyframes swing{
  0%  { opacity: 0; transform: rotateY(-95deg) scale(.5) }
  60% { opacity: 1; transform: rotateY(12deg)  scale(1.14) }
  100%{ opacity: 1; transform: none }
}


/* =====================================================================
   QUIZ — progress
   ===================================================================== */
.qprog-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 4px;
}
.qprog-label{ font-family: var(--display); font-weight: 600; font-size: 12.5px; color: var(--text-2); }
.qprog-score{ font-family: var(--display); font-weight: 600; font-size: 12.5px; color: var(--gold); }

.qbar{
  height: 8px;
  margin-top: 7px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.09);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.5);
}
.qbar-fill{
  height: 100%;
  width: 0%;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--violet), var(--pink));
  box-shadow: 0 0 12px var(--pink-glow);
  transition: width .5s var(--ease);
}


/* =====================================================================
   QUIZ — the question
   ===================================================================== */
.qcard{
  position: relative;
  margin-top: 14px;
  padding: 18px 16px;
  border-radius: var(--r-lg);
  border: 1px solid var(--stroke-2);
  background:
    radial-gradient(120% 90% at 100% 0%, hsl(var(--h) 82% 46% / .35), transparent 62%),
    linear-gradient(180deg, var(--surface-2), var(--surface-lo));
  box-shadow: 0 18px 36px -24px #000, inset 0 1px 0 rgba(255,255,255,.12);
}
.qtext{
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.42;
  letter-spacing: -.01em;
}
.qtopic{
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-family: var(--display);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: hsl(var(--h) 92% 80%);
  background: hsl(var(--h) 80% 50% / .2);
  border: 1px solid hsl(var(--h) 80% 62% / .35);
}


/* =====================================================================
   QUIZ — the options
   ===================================================================== */
.options{ display: grid; gap: 9px; margin-top: 12px; }

.opt{
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  border-radius: var(--r-md);
  text-align: left;
  border: 1px solid var(--stroke-2);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-lo));
  transition: transform .14s var(--ease), border-color .2s, background .2s, opacity .3s;
  animation: optIn .35s var(--ease) both;
}
@keyframes optIn{
  from{ opacity: 0; transform: translateX(-10px) }
  to  { opacity: 1; transform: none }
}
.opt:hover:not(:disabled){
  transform: translateX(4px);
  border-color: hsl(var(--h) 88% 68% / .8);
  background: linear-gradient(180deg, var(--surface-3), var(--surface));
}
.opt:active:not(:disabled){ transform: scale(.99); }

.opt-key{
  width: 27px; height: 27px;
  flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-xs);
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-2);
  background: rgba(255,255,255,.09);
  border: 1px solid var(--stroke);
}
.opt-text{
  flex: 1;
  font-family: var(--display);
  font-weight: 500;
  font-size: 15.5px;
  line-height: 1.3;
}
.opt-mark{
  width: 24px; height: 24px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 12px;
  opacity: 0;
  transform: scale(.5);
  transition: opacity .2s, transform .3s var(--spring);
}
.opt.right .opt-mark,
.opt.wrong .opt-mark{ opacity: 1; transform: none; }

.opt.right{
  border-color: transparent;
  background: linear-gradient(180deg, var(--win), var(--win-d));
  box-shadow: 0 10px 24px -12px rgba(46,213,115,.9);
}
.opt.right .opt-key{ background: rgba(0,0,0,.25); color: #fff; }
.opt.right .opt-mark{ background: rgba(255,255,255,.95); color: var(--win-d); }

.opt.wrong{
  border-color: transparent;
  background: linear-gradient(180deg, var(--lose), #A81438);
  box-shadow: 0 10px 24px -12px rgba(255,91,127,.9);
  animation: shake .42s var(--ease);
}
.opt.wrong .opt-key{ background: rgba(0,0,0,.25); color: #fff; }
.opt.wrong .opt-mark{ background: rgba(255,255,255,.95); color: #A81438; }
@keyframes shake{
  0%,100%{ transform: translateX(0) }
  20%{ transform: translateX(-7px) } 40%{ transform: translateX(6px) }
  60%{ transform: translateX(-4px) } 80%{ transform: translateX(3px) }
}

.opt.picked{
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
}
.opt.dim{ opacity: .34; }
.opt.gone{
  opacity: 0;
  transform: scale(.9);
  pointer-events: none;
  animation: none;
}
.opt:disabled{ cursor: default; }


/* =====================================================================
   QUIZ — hint and verdict
   ===================================================================== */
.hint{
  margin-top: 10px;
  padding: 0 13px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  border-radius: var(--r-md);
  font-size: 14px;
  line-height: 1.55;
  color: #FFEFC4;
  background: rgba(255,198,75,.12);
  border: 1px solid rgba(255,198,75,0);
  transition: max-height .4s var(--ease), opacity .3s, padding .4s var(--ease), border-color .3s;
}
.hint.on{
  max-height: 200px;
  opacity: 1;
  padding: 12px 13px;
  border-color: rgba(255,198,75,.34);
}

.verdict{
  margin-top: 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.45;
  text-align: center;
  min-height: 21px;
}
.verdict.good{ color: var(--win); }
.verdict.bad { color: var(--lose); }
.verdict.wait{ color: var(--muted); }


/* =====================================================================
   QUIZ — lifelines
   ===================================================================== */
.lifelines{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 12px;
}
.life{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 4px 9px;
  border-radius: var(--r-md);
  border: 1px solid var(--stroke-2);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-lo));
  transition: transform .16s var(--ease), border-color .2s, opacity .25s;
}
.life:hover:not(:disabled){ transform: translateY(-3px); border-color: var(--stroke-3); }
.life:active:not(:disabled){ transform: translateY(0) scale(.96); }
.life i{ font-style: normal; font-size: 17px; line-height: 1; }
.life-name{ font-family: var(--display); font-weight: 600; font-size: 11.5px; }
.life-cost{
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 800;
  color: var(--gem);
}
.life:disabled{ opacity: .34; cursor: default; }
.life.spent{ opacity: .34; cursor: default; }
.life.spent .life-cost::after{ content: " used"; color: var(--muted-2); }
.life.poor .life-cost{ color: var(--lose); }


/* =====================================================================
   RESULT
   ===================================================================== */
.banner{
  position: relative;
  margin: 8px auto 4px;
  padding: 11px 30px;
  width: fit-content;
  border-radius: var(--r-md);
  font-family: var(--display);
  font-weight: 700;
  font-size: 23px;
  letter-spacing: -.01em;
  color: #fff;
  background: linear-gradient(180deg, var(--pink-2), var(--pink-d));
  box-shadow: 0 14px 30px -14px var(--pink-glow), inset 0 2px 0 rgba(255,255,255,.35);
  animation: bannerIn .7s var(--spring) both;
}
/* the two ribbon tails */
.banner::before, .banner::after{
  content: "";
  position: absolute; top: 50%;
  width: 20px; height: 26px;
  transform: translateY(-50%);
  background: var(--pink-d);
  z-index: -1;
}
.banner::before{ left: -13px;  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 34% 50%); }
.banner::after { right: -13px; clip-path: polygon(0 0, 100% 0, 66% 50%, 100% 100%, 0 100%); }
@keyframes bannerIn{
  0%  { opacity: 0; transform: scale(.5) rotate(-6deg) }
  100%{ opacity: 1; transform: none }
}

.result-sub{
  text-align: center;
  font-family: var(--display);
  font-weight: 500;
  font-size: 15px;
  color: var(--text-2);
  margin-top: 10px;
}

/* the two players, or one player and the trophy */
.versus{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.player{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 16px 8px 13px;
  border-radius: var(--r-lg);
  border: 1px solid var(--stroke-2);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-lo));
}
.player.won{
  border-color: var(--gold);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,198,75,.28), transparent 66%),
    linear-gradient(180deg, var(--surface-3), var(--surface-lo));
  box-shadow: 0 0 0 1px rgba(255,198,75,.45), 0 20px 40px -20px rgba(255,198,75,.5);
}
.player-crown{
  position: absolute;
  top: -13px;
  font-size: 21px;
  animation: bob 2.6s ease-in-out infinite;
}
.player-face{
  width: 52px; height: 52px;
  display: grid; place-items: center;
  font-size: 29px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 26%, hsl(var(--ph) 92% 70%), hsl(var(--ph) 84% 42%) 66%, hsl(var(--ph) 76% 28%));
  box-shadow: 0 0 0 2px rgba(255,255,255,.2) inset, 0 8px 20px -8px rgba(0,0,0,.8);
}
.player-name{
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.player-score{
  font-family: var(--display);
  font-weight: 700;
  font-size: 21px;
  color: var(--gold);
  line-height: 1;
}
.player-score small{ font-size: 11px; font-weight: 600; color: var(--muted); }

.vs{
  display: grid;
  place-items: center;
  gap: 2px;
}
.vs-cup{ font-size: 34px; filter: drop-shadow(0 8px 16px rgba(0,0,0,.6)); animation: bob 3.4s ease-in-out infinite; }
.vs-word{
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  color: var(--muted);
  letter-spacing: .04em;
}

/* three numbers in a row */
.stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 11px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--stroke);
  border: 1px solid var(--stroke);
}
.stat{
  padding: 12px 4px;
  text-align: center;
  background: var(--surface-lo);
}
.stat b{
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  color: var(--gold);
  line-height: 1.2;
}
.stat span{ font-size: 10.5px; color: var(--muted); font-weight: 800; }

/* what you took home */
.rewards{
  margin-top: 11px;
  padding: 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--stroke-2);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-lo));
}
.rewards-label{
  text-align: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--text-2);
  margin-bottom: 10px;
}
.reward-row{ display: flex; gap: 9px; }
.reward{
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--stroke);
  animation: rewardIn .5s var(--spring) both;
}
@keyframes rewardIn{
  from{ opacity: 0; transform: scale(.8) }
  to  { opacity: 1; transform: none }
}
.reward-icon{
  width: 32px; height: 32px;
  flex: none;
  display: grid; place-items: center;
  font-size: 17px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold), var(--gold-d));
  box-shadow: 0 5px 14px -5px rgba(255,198,75,.8);
}
.reward-icon.badge{ background: linear-gradient(180deg, var(--pink-2), var(--pink-d)); box-shadow: 0 5px 14px -5px var(--pink-glow); }
.reward-icon.gem{ background: linear-gradient(180deg, #C78BFF, #6D28C9); box-shadow: 0 5px 14px -5px rgba(178,107,255,.8); }
.reward-txt{ min-width: 0; }
.reward-big{ font-family: var(--display); font-weight: 700; font-size: 15px; line-height: 1.1; }
.reward-small{ font-size: 10.5px; color: var(--muted); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* =====================================================================
   REPORT ROWS — used on the result and in My Kingdom
   ===================================================================== */
.report{
  margin-top: 11px;
  border-radius: var(--r-md);
  border: 1px solid var(--stroke);
  overflow: hidden;
}
.report-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted);
  background: var(--surface-lo);
}
.report-row + .report-row{ border-top: 1px solid var(--stroke); }
.report-row b{
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  text-align: right;
}


/* =====================================================================
   BADGES
   ===================================================================== */
.badges{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}
.badge{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 13px 7px;
  border-radius: var(--r-md);
  text-align: center;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, var(--surface), var(--surface-lo));
  transition: transform .16s var(--ease);
}
.badge.got{
  border-color: rgba(255,198,75,.45);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,198,75,.2), transparent 68%),
    linear-gradient(180deg, var(--surface-2), var(--surface-lo));
  box-shadow: 0 12px 26px -18px rgba(255,198,75,.8);
}
.badge:hover{ transform: translateY(-3px); }
.badge-icon{
  width: 42px; height: 42px;
  display: grid; place-items: center;
  font-size: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--stroke);
  filter: grayscale(1);
  opacity: .38;
  transition: filter .3s, opacity .3s;
}
.badge.got .badge-icon{
  filter: none;
  opacity: 1;
  background: linear-gradient(180deg, rgba(255,198,75,.35), rgba(201,138,12,.2));
  border-color: rgba(255,198,75,.5);
  box-shadow: 0 6px 16px -6px rgba(255,198,75,.7);
}
.badge-name{ font-family: var(--display); font-weight: 600; font-size: 11px; line-height: 1.2; }
.badge-desc{ font-size: 9.5px; color: var(--muted-2); font-weight: 700; line-height: 1.3; }


/* =====================================================================
   HALL OF FAME  (best scores kept on this device)
   ===================================================================== */
.fame{ display: grid; gap: 8px; }
.fame-row{
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border-radius: var(--r-md);
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, var(--surface), var(--surface-lo));
}
.fame-rank{
  width: 26px; height: 26px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--stroke);
}
.fame-row.top1 .fame-rank{ background: linear-gradient(180deg, var(--gold), var(--gold-d)); color: #3B2400; border-color: transparent; }
.fame-row.top2 .fame-rank{ background: linear-gradient(180deg, #D8D8E8, #9A9AB4); color: #23233A; border-color: transparent; }
.fame-row.top3 .fame-rank{ background: linear-gradient(180deg, #E0A46A, #A9713C); color: #2C1706; border-color: transparent; }
.fame-icon{ font-size: 20px; flex: none; }
.fame-txt{ flex: 1; min-width: 0; }
.fame-name{ font-family: var(--display); font-weight: 600; font-size: 14px; }
.fame-note{ font-size: 10.5px; color: var(--muted); font-weight: 800; }
.fame-score{
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  color: var(--gold);
  flex: none;
}


/* =====================================================================
   EMPTY STATES — an empty screen should still say something kind
   ===================================================================== */
.empty{
  text-align: center;
  padding: 34px 20px;
}
.empty-emoji{ font-size: 42px; opacity: .6; animation: bob 4s ease-in-out infinite; }
.empty-title{
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  margin-top: 10px;
}
.empty-note{ font-size: 13px; color: var(--muted); font-weight: 700; margin-top: 5px; line-height: 1.55; }


/* =====================================================================
   FORM FIELDS
   ===================================================================== */
.field{ margin-top: 12px; }
.field label{
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
  letter-spacing: .04em;
}
.field input{
  width: 100%;
  padding: 14px 15px;
  border-radius: var(--r-md);
  font-family: var(--display);
  font-weight: 500;
  font-size: 16.5px;
  color: var(--text);
  background: rgba(0,0,0,.3);
  border: 1px solid var(--stroke-2);
  transition: border-color .2s, box-shadow .2s;
}
.field input::placeholder{ color: var(--muted-2); }
.field input:focus{
  outline: none;
  border-color: hsl(var(--h) 90% 66%);
  box-shadow: 0 0 0 3px hsl(var(--h) 90% 60% / .22);
}
.field input.code{
  text-align: center;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: .3em;
  text-indent: .3em;
}

.notice{
  margin-top: 11px;
  padding: 11px 13px;
  border-radius: var(--r-md);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.55;
  color: #FFD9E2;
  background: rgba(255,91,127,.14);
  border: 1px solid rgba(255,91,127,.34);
}


/* =====================================================================
   AVATAR PICKER
   ===================================================================== */
.faces{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.face-pick{
  aspect-ratio: 1;
  display: grid; place-items: center;
  font-size: 22px;
  border-radius: var(--r-sm);
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  transition: transform .16s var(--spring), border-color .2s, background .2s;
}
.face-pick:hover{ transform: scale(1.1); background: var(--fill-2); }
.face-pick.on{
  border-color: var(--pink);
  background: rgba(255,46,147,.2);
  box-shadow: 0 0 0 1px var(--pink);
  transform: scale(1.06);
}


/* =====================================================================
   LOBBY — two player
   ===================================================================== */
.codebox{
  text-align: center;
  padding: 18px 14px;
  border-radius: var(--r-lg);
  border: 1px dashed var(--stroke-3);
  background: rgba(0,0,0,.24);
}
.code-digits{
  font-family: var(--display);
  font-weight: 700;
  font-size: 46px;
  letter-spacing: .16em;
  text-indent: .16em;
  line-height: 1;
  background: linear-gradient(180deg, #fff, hsl(var(--h) 92% 74%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.joinlink{
  font-size: 11px;
  font-weight: 700;
  color: var(--muted-2);
  margin-top: 8px;
  word-break: break-all;
  line-height: 1.5;
}

.seats{ display: grid; gap: 8px; margin-top: 12px; }
.seat{
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border-radius: var(--r-md);
  border: 1px solid var(--stroke-2);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-lo));
}
.seat.empty{ border-style: dashed; opacity: .6; }
.pip{
  width: 34px; height: 34px;
  flex: none;
  display: grid; place-items: center;
  font-size: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 26%, hsl(var(--ph) 92% 68%), hsl(var(--ph) 84% 42%) 66%, hsl(var(--ph) 76% 28%));
  box-shadow: 0 0 0 2px rgba(255,255,255,.18) inset;
}
.seat-name{ flex: 1; font-family: var(--display); font-weight: 600; font-size: 14.5px; }
.seat-tag{
  font-size: 10.5px;
  font-weight: 800;
  color: var(--win);
  padding: 3px 9px;
  border-radius: var(--r-full);
  background: rgba(46,213,115,.15);
  border: 1px solid rgba(46,213,115,.3);
}


/* =====================================================================
   TWO PLAYER — the live scoreboard during a battle
   ===================================================================== */
.duo{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 9px;
  border-radius: var(--r-md);
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.24);
}
.duo-side{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  transition: border-color .25s, background .25s;
  min-width: 0;
}
.duo-side.ready{ border-color: rgba(46,213,115,.4); background: rgba(46,213,115,.1); }
.duo-side.lead { border-color: rgba(255,198,75,.45); background: rgba(255,198,75,.1); }
.duo-side .pip{ width: 27px; height: 27px; font-size: 14px; }
.duo-meta{ min-width: 0; }
.duo-name{
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.duo-score{ font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--gold); line-height: 1.1; }
.duo-state{ font-size: 9.5px; color: var(--muted); font-weight: 800; }
.duo-vs{ font-family: var(--display); font-weight: 700; font-size: 11px; color: var(--muted-2); }


/* =====================================================================
   TOAST — small, brief, never blocking
   ===================================================================== */
.toast-wrap{
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-h) + var(--safe-b) + 18px);
  transform: translateX(-50%);
  z-index: 80;
  display: grid;
  gap: 8px;
  width: min(calc(var(--phone) - 32px), calc(100% - 32px));
  pointer-events: none;
}
.toast{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  border-radius: var(--r-full);
  font-family: var(--display);
  font-weight: 600;
  font-size: 13.5px;
  color: #fff;
  background: linear-gradient(180deg, rgba(58,25,105,.98), rgba(32,12,60,.98));
  border: 1px solid var(--stroke-2);
  box-shadow: 0 18px 40px -18px #000;
  animation: toastIn .4s var(--spring) both;
}
.toast.out{ animation: toastOut .3s var(--ease) both; }
.toast i{ font-style: normal; font-size: 17px; line-height: 1; flex: none; }
@keyframes toastIn{
  from{ opacity: 0; transform: translateY(18px) scale(.9) }
  to  { opacity: 1; transform: none }
}
@keyframes toastOut{
  to{ opacity: 0; transform: translateY(-10px) scale(.96) }
}


/* =====================================================================
   SOUND TOGGLE
   ===================================================================== */
/* Bottom left, not top right.

   The gems pill sits at the top right of every screen, and a fixed
   button there landed straight on top of it — on the phone and on the
   desktop. Down here it collides with nothing, and it is still an easy
   reach for a thumb. It lifts above the bottom bar where that is
   showing, and drops back down during a quiz where it is not. */
.mute{
  position: fixed;
  left: 14px;
  bottom: calc(var(--nav-h) + var(--safe-b) + 14px);
  z-index: 45;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  font-size: 15px;
  border-radius: 50%;
  background: rgba(20,7,40,.72);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: .55;
  transition: opacity .2s, transform .16s var(--ease);
}
.mute:hover{ opacity: 1; }
.mute:active{ transform: scale(.9); }
/* the bottom bar is hidden during a quiz, so the button can sit lower */
body.in-quiz .mute{ bottom: calc(var(--safe-b) + 14px); }

/* once the app is a centred column, the button follows its left edge
   rather than the edge of the screen */
@media (min-width: 520px){
  .mute{ left: calc(50% - var(--phone) / 2 + 14px); }
}


/* =====================================================================
   WELCOME — the first thirty seconds
   ===================================================================== */
.ob-top{ text-align: center; padding: 26px 0 16px; }
.ob-castle{
  font-size: 54px;
  line-height: 1;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.6));
  animation: bob 4.2s ease-in-out infinite;
}
.ob-title{
  font-family: var(--display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -.02em;
  margin-top: 8px;
}
.ob-lede{
  font-size: 14px;
  color: var(--text-2);
  font-weight: 700;
  line-height: 1.5;
  margin-top: 6px;
}

.ob-dots{ display: flex; justify-content: center; gap: 7px; margin-top: 16px; }
.ob-dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--fill-2);
  transition: width .3s var(--spring), background .3s;
}
.ob-dot.past{ background: var(--win); }
.ob-dot.on{ width: 24px; border-radius: 99px; background: var(--pink); }

/* one step visible at a time */
.ob-step{ display: none; }
.ob-step.on{ display: block; animation: viewFwd .34s var(--ease) both; }

.ob-or{
  text-align: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 12px 0 10px;
}


/* =====================================================================
   HOME — the Daily Challenge

   It sits above the three ways to play because it is the only thing on
   this screen that expires, and that is exactly why she comes back
   tomorrow. Gold while it is waiting, quiet green once it is done.
   ===================================================================== */
.daily{
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 16px;
  padding: 13px 14px;
  border-radius: var(--r-lg);
  text-align: left;
  border: 1px solid rgba(255,198,75,.42);
  background:
    radial-gradient(110% 130% at 0% 50%, rgba(255,198,75,.26), transparent 62%),
    linear-gradient(180deg, var(--surface-2), var(--surface-lo));
  box-shadow: 0 14px 30px -20px rgba(255,198,75,.7), inset 0 1px 0 rgba(255,255,255,.12);
  overflow: hidden;
  transition: transform .16s var(--ease), border-color .2s, box-shadow .2s;
}
.daily::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.16) 50%, transparent 62%);
  transform: translateX(-120%);
  animation: sheen 4.5s var(--ease) 1.2s infinite;
  pointer-events: none;
}
@keyframes sheen{
  0%{ transform: translateX(-120%) } 55%,100%{ transform: translateX(120%) }
}
.daily:hover{ transform: translateY(-3px); border-color: var(--gold); }
.daily:active{ transform: translateY(0) scale(.99); }

.daily-ico{
  width: 42px; height: 42px;
  flex: none;
  display: grid; place-items: center;
  font-size: 22px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(255,198,75,.3), rgba(201,138,12,.16));
  border: 1px solid rgba(255,198,75,.4);
}
.daily-txt{ flex: 1; min-width: 0; }
.daily-name{ font-family: var(--display); font-weight: 600; font-size: 14.5px; line-height: 1.2; }
.daily-note{ font-size: 11px; color: var(--muted); font-weight: 700; line-height: 1.4; margin-top: 2px; }
.daily-cta{
  flex: none;
  padding: 8px 15px;
  border-radius: var(--r-full);
  font-family: var(--display);
  font-weight: 600;
  font-size: 12.5px;
  color: #3B2400;
  background: linear-gradient(180deg, var(--gold), var(--gold-d));
  box-shadow: 0 4px 0 #8F6100;
}
.daily:active .daily-cta{ transform: translateY(2px); box-shadow: 0 2px 0 #8F6100; }

/* done for today: still there, clearly finished, no longer shouting */
.daily.done{
  border-color: rgba(46,213,115,.4);
  background:
    radial-gradient(110% 130% at 0% 50%, rgba(46,213,115,.2), transparent 62%),
    linear-gradient(180deg, var(--surface), var(--surface-lo));
  box-shadow: none;
}
.daily.done::after{ animation: none; opacity: 0; }
.daily.done .daily-ico{
  background: linear-gradient(180deg, rgba(46,213,115,.3), rgba(18,131,63,.18));
  border-color: rgba(46,213,115,.45);
}
.daily.done .daily-cta{
  color: var(--muted);
  background: var(--fill);
  box-shadow: none;
  border: 1px solid var(--stroke-2);
}


/* =====================================================================
   HOME — put it right

   The mistake bank. Hidden until there is something in it, so it never
   nags a child who has nothing to fix.
   ===================================================================== */
.fixme{
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 9px;
  padding: 12px 14px;
  border-radius: var(--r-lg);
  text-align: left;
  border: 1px solid rgba(178,107,255,.36);
  background:
    radial-gradient(110% 130% at 0% 50%, rgba(178,107,255,.22), transparent 62%),
    linear-gradient(180deg, var(--surface-2), var(--surface-lo));
  transition: transform .16s var(--ease), border-color .2s;
}
.fixme:hover{ transform: translateY(-3px); border-color: var(--gem); }
.fixme:active{ transform: translateY(0) scale(.99); }
.fixme-ico{
  width: 38px; height: 38px;
  flex: none;
  display: grid; place-items: center;
  font-size: 19px;
  border-radius: var(--r-md);
  background: rgba(178,107,255,.18);
  border: 1px solid rgba(178,107,255,.34);
}
.fixme-txt{ flex: 1; min-width: 0; }
.fixme-name{ font-family: var(--display); font-weight: 600; font-size: 13.5px; line-height: 1.2; }
.fixme-note{ font-size: 10.5px; color: var(--muted); font-weight: 700; line-height: 1.4; margin-top: 2px; }
.fixme-cta{
  flex: none;
  padding: 7px 14px;
  border-radius: var(--r-full);
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  background: linear-gradient(180deg, #C78BFF, #6D28C9);
  box-shadow: 0 4px 0 #4A1A8C;
}
.fixme:active .fixme-cta{ transform: translateY(2px); box-shadow: 0 2px 0 #4A1A8C; }


/* =====================================================================
   HOME — the streak at risk, and the install offer
   ===================================================================== */
/* A streak that vanishes overnight with no warning feels like a
   punishment. While there is still time to save it, say so. */
.streak-card.risk{
  border-color: rgba(255,198,75,.45);
  background:
    radial-gradient(120% 140% at 0% 50%, rgba(255,198,75,.16), transparent 60%),
    linear-gradient(180deg, var(--surface), var(--surface-lo));
}
.streak-card.risk .streak-flame{ animation: flicker 1.6s ease-in-out infinite; }
@keyframes flicker{
  0%,100%{ transform: scale(1) rotate(0); opacity: 1 }
  50%    { transform: scale(1.14) rotate(-5deg); opacity: .8 }
}

.install{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  text-align: left;
  border: 1px dashed var(--stroke-3);
  background: rgba(0,0,0,.2);
  transition: background .2s, border-color .2s;
}
.install:hover{ background: var(--fill); border-color: var(--pink); }
.install i{ font-style: normal; font-size: 18px; flex: none; }
.install span{ font-family: var(--display); font-weight: 500; font-size: 12.5px; color: var(--text-2); }


/* =====================================================================
   QUIZ — the segmented progress strip

   One pip per question, green for right and red for wrong. A single bar
   at 70% never says *which* seven, and the shape of the round at a
   glance is worth more to her than a percentage.
   ===================================================================== */
.qseg{
  display: flex;
  gap: 3px;
  margin-top: 7px;
}
.seg{
  flex: 1;
  height: 6px;
  border-radius: 99px;
  background: rgba(255,255,255,.1);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.4);
  transition: background .3s, transform .3s var(--spring), box-shadow .3s;
}
.seg.ok{
  background: linear-gradient(90deg, var(--win), var(--win-d));
  box-shadow: 0 0 8px rgba(46,213,115,.6);
}
.seg.no{
  background: linear-gradient(90deg, var(--lose), #A81438);
  box-shadow: 0 0 8px rgba(255,91,127,.5);
}
.seg.now{
  background: hsl(var(--h) 90% 62%);
  transform: scaleY(1.7);
  box-shadow: 0 0 10px var(--tint-glow);
}

/* with the strip carrying the detail, the old bar becomes a thin
   underline rather than the main event */
.qbar{ height: 4px; margin-top: 5px; opacity: .55; }


/* =====================================================================
   QUIZ — why that is the answer

   The most important panel in the game. Before it existed, a wrong
   answer was told "the answer was 42" and the question was never seen
   again, which teaches nothing. Now every answer is followed by the
   reason, whether she got it right or not.
   ===================================================================== */
.why{
  margin-top: 10px;
  padding: 0 14px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  transition: max-height .45s var(--ease), opacity .3s, padding .45s var(--ease),
              border-color .3s, background .3s;
}
.why.on{
  max-height: 340px;
  opacity: 1;
  padding: 13px 14px;
}
.why.good{
  background: rgba(46,213,115,.11);
  border-color: rgba(46,213,115,.34);
}
.why.bad{
  background: rgba(178,107,255,.13);
  border-color: rgba(178,107,255,.36);
}

.why-head{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}
.why-head i{ font-style: normal; font-size: 15px; line-height: 1; flex: none; }
.why-head b{
  font-family: var(--display);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--text-2);
}
.why-body{
  font-size: 14.5px;
  line-height: 1.6;
  font-weight: 600;
  color: #fff;
}
.why-clue{
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--stroke);
  font-size: 12.5px;
  line-height: 1.55;
  font-weight: 700;
  color: var(--muted);
}


/* =====================================================================
   QUIZ — the peephole with the clock switched off
   ===================================================================== */
.face.gate{
  font-size: calc(var(--peep) * .3);
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.7);
  animation: bob 3.2s ease-in-out infinite;
}
/* a calm ring: still a ring, but going nowhere, because nothing is
   running out */
.ring.calm .live{
  stroke: hsl(var(--h) 60% 40%);
  stroke-dashoffset: 0 !important;
  opacity: .5;
  filter: none;
}


/* =====================================================================
   THINGS THAT FLY

   The points leaving the answer she tapped and landing on the score.
   Purely decoration — it is drawn on top of everything and catches no
   taps, so if it ever misbehaves the game is unaffected.
   ===================================================================== */
.flier{
  position: fixed;
  z-index: 95;
  pointer-events: none;
  transform: translate(-50%, -50%);
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  color: var(--gold);
  text-shadow: 0 3px 12px rgba(0,0,0,.8), 0 0 20px rgba(255,198,75,.7);
  will-change: transform, opacity;
}
.flier.gem{
  font-size: 19px;
  color: var(--gem);
  text-shadow: 0 3px 12px rgba(0,0,0,.8);
}


/* =====================================================================
   THE GUARD — the kingdom's owl

   Drawn entirely in CSS. Four moods, set by a class from ui.js: he
   breathes while she reads, leans in and narrows his eyes while the
   clock runs, throws his wings up when she gets it, and looks down when
   she does not.

   He only appears during a quiz, and he holds perfectly still when the
   motion setting asks him to.
   ===================================================================== */
.guard{
  position: fixed;
  right: 12px;
  bottom: calc(var(--safe-b) + 12px);
  z-index: 44;
  width: 62px; height: 66px;
  display: none;
  pointer-events: none;
}
body.in-quiz .guard{ display: block; }

@media (min-width: 900px){
  /* follow the wide quiz column rather than the edge of the screen */
  body.in-quiz .guard{ right: calc(50% - var(--wide) / 2 + 12px); }
}

.g-body{
  position: absolute;
  left: 6px; bottom: 4px;
  width: 50px; height: 54px;
  border-radius: 50% 50% 44% 44% / 56% 56% 44% 44%;
  background:
    radial-gradient(70% 60% at 50% 24%, #6E3AC0, #3B1A78 70%, #2A1156);
  box-shadow:
    inset 0 -6px 12px rgba(0,0,0,.45),
    inset 0 3px 0 rgba(255,255,255,.16),
    0 10px 22px -10px #000;
  transform-origin: 50% 100%;
  animation: gBreathe 3.6s ease-in-out infinite;
}
@keyframes gBreathe{
  0%,100%{ transform: scale(1) }
  50%    { transform: scale(1.045, .975) }
}

/* his ear tufts */
.g-tuft{
  position: absolute;
  top: -7px;
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 12px solid #4A2192;
}
.g-tuft.l{ left: 3px;  transform: rotate(-16deg); }
.g-tuft.r{ right: 3px; transform: rotate(16deg); }

/* the pale mask around his eyes */
.g-body::before{
  content: "";
  position: absolute;
  left: 5px; top: 8px;
  width: 40px; height: 26px;
  border-radius: 50%;
  background: radial-gradient(60% 60% at 50% 40%, #F3E6FF, #CDB4F0);
  opacity: .95;
}

.g-eye{
  position: absolute;
  top: 13px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: #FFFDF6;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
  overflow: hidden;
  transition: height .2s var(--ease), top .2s var(--ease);
}
.g-eye.l{ left: 8px; }
.g-eye.r{ right: 8px; }
.g-pupil{
  position: absolute;
  left: 50%; top: 52%;
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: #1A0733;
  animation: gLook 5.5s ease-in-out infinite;
}
@keyframes gLook{
  0%,44%,100%{ transform: translate(0,0) }
  50%,60%    { transform: translate(2.5px,1px) }
  72%,82%    { transform: translate(-2.5px,0) }
}

/* brows, which do most of the acting */
.g-brow{
  position: absolute;
  top: 9px;
  width: 15px; height: 3.5px;
  border-radius: 99px;
  background: #3A1470;
  opacity: 0;
  transition: opacity .2s, transform .25s var(--ease);
}
.g-brow.l{ left: 8px; }
.g-brow.r{ right: 8px; }

.g-beak{
  position: absolute;
  left: 50%; top: 27px;
  width: 0; height: 0;
  margin-left: -5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid var(--gold);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.4));
  transition: transform .25s var(--spring);
}

.g-wing{
  position: absolute;
  top: 22px;
  width: 13px; height: 26px;
  border-radius: 60% 40% 50% 50%;
  background: linear-gradient(180deg, #5A2AA8, #35167A);
  transition: transform .3s var(--spring);
  transform-origin: 50% 10%;
}
.g-wing.l{ left: -4px; }
.g-wing.r{ right: -4px; transform: scaleX(-1); }

.g-feet{
  position: absolute;
  left: 50%; bottom: -4px;
  width: 26px; height: 6px;
  margin-left: -13px;
  border-radius: 99px;
  background: var(--gold-d);
  box-shadow: 0 2px 6px rgba(0,0,0,.6);
}

/* ---- idle ----
   The base state above already is idle: breathing, eyes wandering, wings
   down. The class is written out anyway so that all four moods appear
   here, and so nobody later wonders whether one is missing. */
.guard.m-idle .g-body{ /* the breathing animation from .g-body */ }

/* ---- thinking: leaning in, eyes narrowed, brows down ---- */
.guard.m-think .g-body{ animation: gThink 2.4s ease-in-out infinite; }
@keyframes gThink{
  0%,100%{ transform: rotate(-4deg) }
  50%    { transform: rotate(4deg) }
}
.guard.m-think .g-eye{ height: 9px; top: 16px; }
.guard.m-think .g-brow{ opacity: 1; transform: translateY(3px) rotate(0); }
.guard.m-think .g-brow.l{ transform: translateY(4px) rotate(12deg); }
.guard.m-think .g-brow.r{ transform: translateY(4px) rotate(-12deg); }

/* ---- cheering: wings up, a hop, eyes wide ---- */
.guard.m-cheer .g-body{ animation: gHop .5s var(--spring) 2; }
@keyframes gHop{
  0%,100%{ transform: translateY(0) scale(1) }
  40%    { transform: translateY(-12px) scale(1.06, .94) }
}
.guard.m-cheer .g-wing.l{ transform: rotate(-62deg); }
.guard.m-cheer .g-wing.r{ transform: scaleX(-1) rotate(-62deg); }
.guard.m-cheer .g-eye{ height: 16px; top: 12px; }
.guard.m-cheer .g-beak{ transform: scale(1.2); }

/* ---- sad: sunk down, wings drooping, looking away ---- */
.guard.m-sad .g-body{
  animation: none;
  transform: translateY(4px) scale(.96);
}
.guard.m-sad .g-eye{ height: 5px; top: 19px; }
.guard.m-sad .g-brow{ opacity: 1; }
.guard.m-sad .g-brow.l{ transform: translateY(5px) rotate(-14deg); }
.guard.m-sad .g-brow.r{ transform: translateY(5px) rotate(14deg); }
.guard.m-sad .g-wing.l{ transform: rotate(14deg) translateY(3px); }
.guard.m-sad .g-wing.r{ transform: scaleX(-1) rotate(14deg) translateY(3px); }
.guard.m-sad .g-pupil{ animation: none; transform: translate(0, 3px); }

/* what he says, on the rare occasion he says anything */
.g-bubble{
  position: absolute;
  right: 0; bottom: 100%;
  margin-bottom: 6px;
  padding: 6px 10px;
  border-radius: var(--r-full);
  white-space: nowrap;
  font-family: var(--display);
  font-weight: 600;
  font-size: 11px;
  background: rgba(58,25,105,.96);
  border: 1px solid var(--stroke-2);
  opacity: 0;
  transform: translateY(4px) scale(.9);
  transition: opacity .25s, transform .3s var(--spring);
}
.g-bubble.on{ opacity: 1; transform: none; }

/* he holds still when asked to */
@media (prefers-reduced-motion: reduce){
  .g-body, .g-pupil{ animation: none !important; }
}


/* =====================================================================
   TOPIC CROWNS — mastery, shown where she chooses

   Three little circles beside a topic. Empty ones are an invitation, and
   the thin corners of the kingdom become obvious at a glance — which is
   the whole reason these live on the chooser and not only on a stats
   screen.
   ===================================================================== */
.topic-meta{ flex: 1; min-width: 0; }
.topic-crowns{ display: inline-flex; gap: 3px; margin-top: 3px; }
.cr{
  width: 13px; height: 13px;
  display: grid; place-items: center;
  font-size: 8px;
  line-height: 1;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--stroke);
}
.cr.got{
  background: linear-gradient(180deg, rgba(255,198,75,.42), rgba(201,138,12,.28));
  border-color: rgba(255,198,75,.6);
  box-shadow: 0 2px 6px -2px rgba(255,198,75,.9);
}
.topic.mastered{
  border-color: rgba(255,198,75,.45);
}
.topic.mastered .topic-name::after{
  content: " 👑";
  font-size: 12px;
}


/* =====================================================================
   RESULT — the order things arrive in
   ===================================================================== */
#v-result [data-step]{ opacity: 1; }
#v-result [data-step].stepped{ animation: stepIn .5s var(--spring) both; }
@keyframes stepIn{
  from{ opacity: 0; transform: translateY(16px) scale(.97) }
  to  { opacity: 1; transform: none }
}

.player-score b{ font-family: inherit; font-weight: 700; }
.reward-icon.crown{
  background: linear-gradient(180deg, var(--gold), var(--gold-d));
  box-shadow: 0 5px 14px -5px rgba(255,198,75,.9);
}


/* =====================================================================
   RESULT — the round, question by question

   Where the learning actually lands. Ten rows with a tick or a cross,
   and tapping one opens the answer and the reason. One row open at a
   time, so it never becomes a wall of text.
   ===================================================================== */
.review{
  margin-top: 11px;
  border-radius: var(--r-md);
  border: 1px solid var(--stroke);
  overflow: hidden;
}
.review-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--stroke);
}
.review-head b{ font-family: var(--display); font-weight: 600; font-size: 13px; }
.review-head span{ font-size: 11px; font-weight: 800; color: var(--muted); }

.rev + .rev{ border-top: 1px solid var(--stroke); }

.rev-row{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 13px;
  text-align: left;
  background: var(--surface-lo);
  transition: background .18s;
}
.rev-row:hover{ background: var(--surface); }

.rev-n{
  width: 20px;
  flex: none;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted-2);
}
.rev-mark{
  width: 22px; height: 22px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 11px;
  color: #fff;
}
.rev-mark.ok{ background: linear-gradient(180deg, var(--win), var(--win-d)); }
.rev-mark.no{ background: linear-gradient(180deg, var(--lose), #A81438); }

.rev-q{
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-2);
  /* two lines, then trail off — the whole question is one tap away */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rev-chev{
  flex: none;
  font-size: 17px;
  color: var(--muted-2);
  transition: transform .25s var(--ease);
}
.rev.open .rev-chev{ transform: rotate(90deg); }
.rev.open .rev-q{ -webkit-line-clamp: 6; }

.rev-open{
  max-height: 0;
  overflow: hidden;
  padding: 0 13px;
  background: rgba(0,0,0,.26);
  transition: max-height .4s var(--ease), padding .4s var(--ease);
}
.rev.open .rev-open{ max-height: 420px; padding: 12px 13px 14px; }

.rev-ans{
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 6px;
}
.rev-tag{
  flex: none;
  min-width: 62px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.rev-ans b{
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  color: var(--win);
}
.rev-ans.bad b{ color: var(--lose); font-weight: 500; }

.rev-why{
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--stroke);
  font-size: 13px;
  line-height: 1.6;
  font-weight: 600;
  color: var(--text-2);
}


/* =====================================================================
   THE GEM SHOP

   Gems used to buy nothing but lifelines, which meant the only thing to
   spend them on made the game easier. Something worth saving for is what
   makes a currency mean anything.
   ===================================================================== */
.bag{
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border-radius: var(--r-md);
  background: rgba(120,200,255,.1);
  border: 1px solid rgba(120,200,255,.3);
}
.bag-ico{ font-size: 22px; flex: none; }
.bag-txt b{ display: block; font-family: var(--display); font-weight: 600; font-size: 14px; }
.bag-txt small{ font-size: 11px; color: var(--muted); font-weight: 700; }

.wares{ display: grid; gap: 8px; }
.ware{
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 13px;
  border-radius: var(--r-md);
  text-align: left;
  border: 1px solid var(--stroke-2);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-lo));
  transition: transform .14s var(--ease), border-color .2s, background .2s, opacity .2s;
}
.ware:hover:not(:disabled){
  transform: translateX(3px);
  border-color: hsl(var(--h) 88% 66% / .7);
  background: linear-gradient(180deg, var(--surface-3), var(--surface));
}
.ware:active:not(:disabled){ transform: scale(.99); }

.ware-ico{
  width: 40px; height: 40px;
  flex: none;
  display: grid; place-items: center;
  font-size: 21px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.07);
  border: 1px solid var(--stroke);
}
.ware-txt{ flex: 1; min-width: 0; }
.ware-name{ display: block; font-family: var(--display); font-weight: 600; font-size: 14px; }
.ware-desc{ display: block; font-size: 10.5px; color: var(--muted); font-weight: 700; line-height: 1.4; margin-top: 1px; }
.ware-cost{
  flex: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--gem);
  padding: 6px 11px;
  border-radius: var(--r-full);
  background: rgba(178,107,255,.14);
  border: 1px solid rgba(178,107,255,.3);
}

/* Cannot afford it yet — dimmed, but never hidden and never disabled.
   Something she is saving up for has to stay visible to be worth saving
   up for, and tapping it says how many gems short she is. */
.ware.poor{ opacity: .62; }
.ware.poor .ware-cost{ color: var(--lose); background: rgba(255,91,127,.12); border-color: rgba(255,91,127,.3); }

.ware.owned{
  opacity: .78;
  cursor: default;
  border-color: rgba(46,213,115,.35);
  background: linear-gradient(180deg, rgba(46,213,115,.09), var(--surface-lo));
}
.ware.owned .ware-cost{
  color: var(--win);
  background: rgba(46,213,115,.14);
  border-color: rgba(46,213,115,.32);
}


/* =====================================================================
   MY KINGDOM — the castle she has been building

   This is what the shop is for. A number going up in a corner is not a
   reward; a castle that visibly gains flags, a garden and eventually a
   big wheel outside the gate is one.
   ===================================================================== */
.myCastle{
  position: relative;
  text-align: center;
  padding: 22px 14px 16px;
  margin-bottom: 11px;
  border-radius: var(--r-xl);
  border: 1px solid var(--stroke-2);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 100%, hsl(var(--h) 74% 34% / .6), transparent 66%),
    linear-gradient(180deg, var(--surface-2), var(--surface-lo));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 18px 40px -26px #000;
}
.mc-sky{ position: absolute; inset: 0; pointer-events: none; }
.mc-bit{
  position: absolute;
  font-size: 20px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.6));
  animation: bob 4s ease-in-out infinite;
}
/* each decoration has its own spot, so the castle assembles rather than
   piling everything in one corner */
.mc-bit.b1{ left: 12%;  top: 22%; animation-delay: 0s }
.mc-bit.b2{ right: 14%; top: 18%; animation-delay: .5s }
.mc-bit.b3{ left: 22%;  bottom: 16%; animation-delay: 1s }
.mc-bit.b4{ right: 20%; bottom: 20%; animation-delay: 1.5s }
.mc-bit.b5{ left: 46%;  top: 8%;  animation-delay: 2s; font-size: 24px }
.mc-bit.b6{ right: 40%; bottom: 8%; animation-delay: 2.5s }

.mc-keep{
  position: relative;
  font-size: 60px;
  line-height: 1;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.7));
  animation: bob 4.6s ease-in-out infinite;
}
.mc-name{
  position: relative;
  margin-top: 6px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.01em;
}
.mc-note{
  position: relative;
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
}

/* what she has learnt, topic by topic */
.crowns{ display: grid; gap: 7px; }
.crow{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  border: 1px solid var(--stroke);
  background: var(--surface-lo);
}
.crow.done{
  border-color: rgba(255,198,75,.4);
  background: linear-gradient(90deg, rgba(255,198,75,.12), var(--surface-lo) 60%);
}
.crow-ico{ font-size: 17px; flex: none; }
.crow-txt{ flex: 1; min-width: 0; }
.crow-name{ display: block; font-family: var(--display); font-weight: 600; font-size: 13px; }
.crow-note{ display: block; font-size: 10px; color: var(--muted-2); font-weight: 800; }


/* =====================================================================
   PROFILE — her own picture

   The file never leaves the device: it is read in the browser, shrunk
   onto a canvas and kept in this device's own storage. A friend in a
   battle only ever sees her name.
   ===================================================================== */
.photo-row{ display: flex; align-items: center; gap: 13px; }
.photo-now{
  width: 76px; height: 76px;
  flex: none;
  display: grid; place-items: center;
  font-size: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 34% 26%, hsl(var(--h) 92% 70%), hsl(var(--h) 84% 44%) 64%, hsl(var(--h) 76% 30%));
  box-shadow:
    0 0 0 2px rgba(255,255,255,.22) inset,
    0 0 0 3px rgba(255,255,255,.09),
    0 10px 24px -10px var(--tint-glow);
}
.photo-side{ flex: 1; min-width: 0; }
.photo-side .btn{ font-size: 14px; padding: 11px 14px; }
.photo-side .btn + .btn{ margin-top: 8px; }

/* a photograph, wherever a face is drawn */
.has-photo{ font-size: 0 !important; overflow: hidden; }
.has-photo img,
.face-img{
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.face-pick.has-photo{ padding: 2px; }
.player-face{ overflow: hidden; }


/* =====================================================================
   WHY — naming her actual mistake, and the working

   Two additions to the explanation panel. The first names the option she
   chose, because the wrong answers were written to be tempting for
   particular reasons and saying which one she fell for is most of the
   teaching. The second is the working, one step per tap.
   ===================================================================== */
.why-yours{
  margin-bottom: 9px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--stroke);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 700;
  color: var(--text-2);
}
.why-yours b{ font-family: var(--display); font-weight: 600; }
.why.bad .why-yours b:first-of-type{ color: var(--lose); }
.why.bad .why-yours b:last-of-type{ color: var(--win); }

.why-steps{ margin-top: 11px; }
.why-more{
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--r-full);
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  background: var(--fill-2);
  border: 1px solid var(--stroke-2);
  transition: background .2s, opacity .2s;
}
.why-more:hover:not(:disabled){ background: var(--stroke); }
.why-more:disabled{ opacity: .5; cursor: default; }

/* The steps are all in the markup and revealed by counting. JS sets
   `shown-N` on the wrapper and the rules below open the first N. One step
   at a time, because a wall of four steps is not a teaching aid, and a
   child who only needed the first one should not have to read all four. */
.why-list{
  list-style: none;
  counter-reset: step;
  margin-top: 4px;
}
.why-list li{
  counter-increment: step;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 600;
  transition: max-height .35s var(--ease), opacity .3s, padding .35s var(--ease);
}
.why-list li::before{
  content: counter(step);
  flex: none;
  width: 21px; height: 21px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  color: #2A1150;
  background: var(--gold);
}
/* reveal the first N, where N is the shown-N class */
.why-steps.shown-1 .why-list li:nth-child(-n+1),
.why-steps.shown-2 .why-list li:nth-child(-n+2),
.why-steps.shown-3 .why-list li:nth-child(-n+3),
.why-steps.shown-4 .why-list li:nth-child(-n+4),
.why-steps.shown-5 .why-list li:nth-child(-n+5),
.why-steps.shown-6 .why-list li:nth-child(-n+6){
  max-height: 200px;
  opacity: 1;
  padding: 7px 0;
}


/* =====================================================================
   A CHALLENGE ARRIVED
   ===================================================================== */
.vs-card{
  position: relative;
  text-align: center;
  margin-top: 8px;
  padding: 26px 18px 22px;
  border-radius: var(--r-xl);
  border: 1px solid var(--stroke-2);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, hsl(var(--h) 82% 48% / .5), transparent 66%),
    linear-gradient(180deg, var(--surface-2), var(--surface-lo));
  box-shadow: 0 22px 46px -28px #000, inset 0 1px 0 rgba(255,255,255,.12);
}
.vs-from{
  width: 62px; height: 62px;
  margin: 0 auto;
  display: grid; place-items: center;
  font-size: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 26%, hsl(var(--ph) 92% 70%), hsl(var(--ph) 84% 42%) 66%, hsl(var(--ph) 76% 28%));
  box-shadow: 0 0 0 2px rgba(255,255,255,.2) inset, 0 10px 24px -10px #000;
  animation: bob 3.6s ease-in-out infinite;
}
.vs-who{
  margin-top: 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -.01em;
  /* a name arrives from a link, so it must never break the layout */
  overflow-wrap: anywhere;
}
.vs-score{ margin-top: 10px; }
.vs-score b{
  font-family: var(--display);
  font-weight: 700;
  font-size: 42px;
  line-height: 1;
  color: var(--gold);
  text-shadow: 0 4px 18px rgba(255,198,75,.4);
}
.vs-score span{
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--muted);
}
.vs-what{
  display: inline-block;
  margin-top: 14px;
  padding: 6px 14px;
  border-radius: var(--r-full);
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  background: var(--fill-2);
  border: 1px solid var(--stroke-2);
}
.vs-how{ margin-top: 7px; font-size: 11.5px; font-weight: 800; color: var(--muted); }


/* =====================================================================
   SENDING A CHALLENGE ON
   ===================================================================== */
.share{
  margin-top: 11px;
  padding: 13px 14px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(178,107,255,.36);
  background:
    radial-gradient(110% 130% at 0% 0%, rgba(178,107,255,.2), transparent 62%),
    linear-gradient(180deg, var(--surface-2), var(--surface-lo));
}
.share-head{ display: flex; align-items: center; gap: 9px; }
.share-head i{ font-style: normal; font-size: 18px; line-height: 1; flex: none; }
.share-head b{ font-family: var(--display); font-weight: 600; font-size: 14px; line-height: 1.3; }
.share-note{ font-size: 12px; color: var(--muted); font-weight: 700; line-height: 1.5; margin-top: 6px; }
.share-link{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: rgba(0,0,0,.32);
  border: 1px solid var(--stroke);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted-2);
  line-height: 1.5;
  /* a link is long and must never widen the page */
  word-break: break-all;
  max-height: 62px;
  overflow: hidden;
}


/* =====================================================================
   FOR GROWN-UPS

   Deliberately the plainest screen in the game. A parent wants to know
   what she is finding hard and what to do about it; dressing that up
   with gems and confetti would bury it.
   ===================================================================== */
.gu-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  margin-top: 4px;
}
.gu-cell{
  padding: 13px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, var(--surface), var(--surface-lo));
}
.gu-cell b{
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 25px;
  line-height: 1.1;
  color: var(--gold);
}
.gu-cell span{
  display: block;
  margin-top: 3px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 12.5px;
}
.gu-cell small{ display: block; margin-top: 2px; font-size: 10.5px; color: var(--muted-2); font-weight: 700; }

/* fourteen days, played or not */
.gu-days{ display: flex; gap: 4px; }
.gu-day{
  flex: 1;
  height: 30px;
  border-radius: var(--r-xs);
  background: rgba(255,255,255,.07);
  border: 1px solid var(--stroke);
}
.gu-day.on{
  background: linear-gradient(180deg, var(--win), var(--win-d));
  border-color: transparent;
}

/* accuracy per topic. The colour comes from the number, not the theme —
   this is the one place in the game where red genuinely means "look
   here", so it must not follow the subject tint. */
.gu-bars{ display: grid; gap: 9px; }
.gu-bar{ display: flex; align-items: center; gap: 10px; }
.gu-bar-ico{ font-size: 17px; flex: none; width: 22px; }
.gu-bar-txt{ flex: 1; min-width: 0; }
.gu-bar-name{
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 4px;
}
.gu-bar-track{
  display: block;
  height: 8px;
  border-radius: 99px;
  background: rgba(255,255,255,.09);
  overflow: hidden;
}
.gu-bar-fill{
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, hsl(var(--acc) 78% 42%), hsl(var(--acc) 82% 56%));
}
.gu-bar-pct{
  flex: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  min-width: 40px;
  text-align: right;
}

/* what she is answering instead — the most useful part of the screen */
.gu-miss{ display: grid; gap: 9px; }
.miss{
  padding: 11px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--stroke);
  background: var(--surface-lo);
}
.miss-q{ font-size: 13px; font-weight: 700; line-height: 1.5; color: var(--text-2); }
.miss-row{
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 9px;
  margin-top: 8px;
}
.miss-tag{
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.miss-row b{ font-family: var(--display); font-weight: 600; font-size: 14px; }
.miss-row b.bad, .miss-tag.bad{ color: var(--lose); }
.miss-row b.good{ color: var(--win); }
.miss-why{
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--stroke);
  font-size: 12.5px;
  line-height: 1.55;
  font-weight: 600;
  color: var(--muted);
}
.miss-meta{ margin-top: 7px; font-size: 10px; font-weight: 800; color: var(--muted-2); }

/* the five practice boxes */
.gu-boxes{ display: flex; gap: 6px; }
.gu-box{
  flex: 1;
  text-align: center;
  padding: 9px 2px;
  border-radius: var(--r-sm);
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  opacity: .5;
}
.gu-box.has{ opacity: 1; border-color: var(--stroke-2); background: rgba(255,255,255,.09); }
.gu-box b{ display: block; font-family: var(--display); font-weight: 700; font-size: 17px; }
.gu-box span{ display: block; font-size: 9.5px; font-weight: 800; color: var(--muted-2); margin-top: 1px; }


/* =====================================================================
   SETTINGS — a labelled row, and a segmented picker
   ===================================================================== */
.setting{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.setting-name{ font-family: var(--display); font-weight: 600; font-size: 13.5px; }

.seg-pick{
  display: inline-flex;
  padding: 3px;
  border-radius: var(--r-full);
  background: rgba(0,0,0,.3);
  border: 1px solid var(--stroke);
}
.seg-opt{
  padding: 7px 13px;
  border-radius: var(--r-full);
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  color: var(--muted);
  transition: background .2s, color .2s;
}
.seg-opt.on{
  color: #fff;
  background: linear-gradient(180deg, var(--pink-2), var(--pink));
  box-shadow: 0 3px 10px -4px var(--pink-glow);
}


/* =====================================================================
   READY FOR SOMETHING HARDER

   A quiet mark on the difficulty she has earned. It marks, it never
   moves the setting — being pushed up a level against her own judgement
   would be worse than never being asked.
   ===================================================================== */
.diff{ position: relative; }
.diff.ready{
  border-color: rgba(255,198,75,.6);
  box-shadow: 0 0 0 1px rgba(255,198,75,.35);
}
.diff-ready{
  position: absolute;
  top: -8px; left: 50%;
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-family: var(--display);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: .04em;
  color: #3B2400;
  background: linear-gradient(180deg, var(--gold), var(--gold-d));
  box-shadow: 0 3px 8px -2px rgba(255,198,75,.9);
  white-space: nowrap;
  animation: readyBob 2.4s ease-in-out infinite;
}
@keyframes readyBob{
  0%,100%{ transform: translateX(-50%) translateY(0) }
  50%    { transform: translateX(-50%) translateY(-3px) }
}


/* =====================================================================
   BIGGER SCREENS

   One layout that grows — not a second design. The column widens, the
   type comes up with it, and on a real desktop the quiz alone spreads
   into two columns: the question on the left, the answers on the right.
   That is how the first version of this game worked on a laptop, and it
   worked well.

   Everything else simply gets roomier. Aadvika plays on the family
   computer while her friend is on a tablet, so the desktop is not the
   fallback here — it is probably the screen she uses most.
   ===================================================================== */

/* ---- tablets and small laptops ---- */
@media (min-width: 620px){
  :root{
    --phone:  520px;
    --gutter: 20px;
    --peep:   92px;
  }

  .greet{ padding: 22px 0 6px; }
  .avatar{ width: 52px; height: 52px; font-size: 28px; }
  .greet-hi{ font-size: 16.5px; }
  .greet-sub{ font-size: 12.5px; }
  .gems{ font-size: 15px; padding: 9px 15px 9px 12px; }

  .castle{ font-size: 66px; }
  .wordmark{ font-size: 56px; }
  .tagline{ font-size: 13.5px; padding: 7px 20px; }

  .mode{ padding: 18px 10px 14px; }
  .mode-emoji{ font-size: 34px; }
  .mode-name{ font-size: 15.5px; }
  .mode-note{ font-size: 11.5px; }
  .mode-cta{ font-size: 12.5px; padding: 7px 16px; }

  .shelf{ padding: 15px 8px 13px; }
  .shelf i{ font-size: 24px; }
  .shelf span{ font-size: 12px; }

  .day{ width: 27px; height: 27px; font-size: 13px; }
  .streak-title{ font-size: 14px; }
  .streak-note{ font-size: 11.5px; }

  .top-title{ font-size: 19.5px; }
  .top-sub{ font-size: 12.5px; }
  .top-mascot{ font-size: 30px; }
  .label{ font-size: 14.5px; }

  .grade{ font-size: 21px; padding: 15px 0; }
  .subject{ min-height: 104px; }
  .subject-emoji{ font-size: 30px; }
  .subject-name{ font-size: 12.5px; }
  .topic{ padding: 14px 16px; }
  .topic i{ font-size: 23px; }
  .topic-name{ font-size: 15.5px; }
  .diff-name{ font-size: 14.5px; }
  .count{ font-size: 18.5px; padding: 14px 0; }
  .chip{ font-size: 12.5px; padding: 7px 14px; }

  .btn{ font-size: 18px; padding: 17px 22px; }
  .btn.ghost{ font-size: 16px; }

  .qtext{ font-size: 19.5px; }
  .qcard{ padding: 20px 18px; }
  .opt{ padding: 14px 16px; }
  .opt-text{ font-size: 16.5px; }
  .opt-key{ width: 29px; height: 29px; font-size: 14px; }
  .life i{ font-size: 19px; }
  .life-name{ font-size: 12.5px; }
  .hint.on{ font-size: 15px; }
  .verdict{ font-size: 15.5px; }

  .banner{ font-size: 26px; padding: 12px 34px; }
  .player-face{ width: 58px; height: 58px; font-size: 32px; }
  .player-name{ font-size: 15px; }
  .player-score{ font-size: 23px; }
  .stat b{ font-size: 19px; }
  .stat span{ font-size: 11.5px; }
  .badge-name{ font-size: 12px; }
  .badge-desc{ font-size: 10.5px; }
  .fame-name{ font-size: 15px; }
  .fame-score{ font-size: 18.5px; }

  .nav-item i{ font-size: 22px; }
  .nav-item span{ font-size: 11px; }

  /* the newer pieces grow with everything else */
  .daily-name{ font-size: 15.5px; }
  .daily-note{ font-size: 12px; }
  .daily-ico{ width: 46px; height: 46px; font-size: 24px; }
  .fixme-name{ font-size: 14.5px; }
  .fixme-note{ font-size: 11.5px; }
  .why-body{ font-size: 15.5px; }
  .why-clue{ font-size: 13.5px; }
  .seg{ height: 7px; }
  .rev-q{ font-size: 13.5px; }
  .rev-why{ font-size: 14px; }
  .ware-name{ font-size: 15px; }
  .ware-desc{ font-size: 11.5px; }
  .shelf i{ font-size: 22px; }
  .shelf span{ font-size: 11px; }
  .ob-title{ font-size: 31px; }
  .ob-lede{ font-size: 15px; }
  .mc-keep{ font-size: 70px; }
  .photo-now{ width: 86px; height: 86px; font-size: 46px; }
  .guard{ width: 72px; height: 76px; }
  .g-body{ width: 58px; height: 62px; left: 7px; }
}

/* ---- desktop ---- */
@media (min-width: 900px){
  :root{ --phone: 600px; }

  .wordmark{ font-size: 60px; }
  .castle{ font-size: 72px; }
  .subject{ min-height: 116px; }
  .subject-emoji{ font-size: 33px; }
  .subject-name{ font-size: 13px; }

  /* The quiz — and only the quiz — takes the extra room. */
  body.in-quiz{ --peep: 130px; }
  body.in-quiz .app{ width: min(var(--wide), 100%); }
  body.in-quiz .mute{ left: calc(50% - var(--wide) / 2 + 14px); }

  .qbody{
    display: grid;
    grid-template-columns: 1.02fr 1fr;
    column-gap: 24px;
    align-items: start;
    /* The verdict spans both columns because it is the one line she looks
       for first. The explanation then sits under the question it belongs
       to, with the lifelines and the Next button beside it. */
    grid-template-areas:
      "card    options"
      "hint    options"
      "verdict verdict"
      "why     lifelines"
      "why     next";
  }
  .qbody > .qcard    { grid-area: card; margin-top: 18px; }
  .qbody > .options  { grid-area: options; margin-top: 18px; }
  .qbody > .hint     { grid-area: hint; }
  .qbody > .verdict  { grid-area: verdict; }
  .qbody > .why      { grid-area: why; }
  .qbody > .lifelines{ grid-area: lifelines; }
  .qbody > .stack    { grid-area: next; }

  /* with the room to breathe, the question can carry more weight */
  body.in-quiz .qtext{ font-size: 23px; line-height: 1.4; }
  body.in-quiz .qcard{ padding: 24px 22px; }
  body.in-quiz .opt{ padding: 16px 18px; }
  body.in-quiz .opt-text{ font-size: 17.5px; }
  body.in-quiz .qprog-label,
  body.in-quiz .qprog-score{ font-size: 14px; }
  body.in-quiz .qbar{ height: 10px; }
}

/* ---- big desktop: stop growing, just centre ---- */
@media (min-width: 1400px){
  :root{ --phone: 640px; }
}


/* =====================================================================
   SMALL PHONES — everything still has to fit at 320px
   ===================================================================== */
@media (max-width: 359px){
  :root{ --gutter: 12px; }
  .wordmark{ font-size: 36px; }
  .mode{ padding: 12px 5px 10px; }
  .mode-emoji{ font-size: 25px; }
  .mode-name{ font-size: 12.5px; }
  .mode-note{ font-size: 9.5px; }
  .mode-cta{ font-size: 10.5px; padding: 5px 10px; }
  .subject{ min-height: 82px; }
  .subject-emoji{ font-size: 22px; }
  .subject-name{ font-size: 10.5px; }
  .qtext{ font-size: 16.5px; }
  .opt-text{ font-size: 14.5px; }
  .day{ width: 21px; height: 21px; font-size: 10px; }
  .code-digits{ font-size: 38px; }

  /* four shelves on a 320px screen need the labels to give way */
  .shelf{ padding: 11px 3px 9px; }
  .shelf i{ font-size: 18px; }
  .shelf span{ font-size: 8.5px; }

  .daily{ padding: 11px 11px; gap: 9px; }
  .daily-ico{ width: 36px; height: 36px; font-size: 19px; }
  .daily-name{ font-size: 13px; }
  .daily-note{ font-size: 9.5px; }
  .daily-cta{ font-size: 11px; padding: 6px 11px; }
  .fixme-note{ font-size: 9.5px; }

  .why-body{ font-size: 13.5px; }
  .photo-row{ gap: 10px; }
  .photo-now{ width: 62px; height: 62px; font-size: 32px; }

  /* the guard would crowd a small screen during a quiz */
  body.in-quiz .guard{ display: none; }
}

/* A short screen in landscape has no room for a mascot either — the
   question and the answers come first, always. */
@media (max-height: 520px){
  body.in-quiz .guard{ display: none; }
}