/* ==========================================================================
   Ottered marketing site
   ========================================================================== */

:root {
  --navy-900: #07123F;
  --navy-800: #0D1D5C;
  --navy-700: #142873;
  --royal: #2348E0;
  --royal-600: #1B3BC0;
  --royal-300: #8FA8FF;
  --yellow: #FFC928;
  --yellow-600: #F2B100;
  --ink: #F4F6FF;
  --muted: #B8C3EC;
  --soft-ink: #DCE3FF;   /* secondary text on cards (the seasonal themes change it) */
  --line: rgba(143, 168, 255, 0.2);
  --correct: #3DDC97;
  --wrong: #FF7A7A;

  --font-display: "Bricolage Grotesque", "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-body: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-y: clamp(64px, 9vw, 112px);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  background: var(--navy-900);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }
img { max-width: 100%; display: block; }
a { color: var(--yellow); }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.05; margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--yellow); color: var(--navy-900);
  padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 600;
}
.skip-link:focus { top: 16px; }

/* Buttons ---------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  border: 2px solid transparent;
  border-radius: 999px;
  font: 600 1rem/1.2 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn:active { transform: translateY(2px); }
.btn-lg { padding: 16px 28px; font-size: 1.0625rem; }
.btn-sm { padding: 9px 16px; font-size: .9375rem; }
.btn-block { width: 100%; }

.btn-yellow {
  background: var(--yellow); color: var(--navy-900);
  box-shadow: 0 4px 0 var(--yellow-600);
}
.btn-yellow:hover { background: #FFD45A; }
.btn-yellow:active { box-shadow: 0 2px 0 var(--yellow-600); }

.btn-outline { border-color: var(--royal-300); color: var(--ink); background: transparent; }
.btn-outline:hover { background: rgba(143, 168, 255, .12); }

.btn-ghost { color: var(--ink); background: transparent; }
.btn-ghost:hover { background: rgba(143, 168, 255, .12); }

.btn-navy { background: var(--navy-900); color: var(--ink); box-shadow: 0 4px 0 #030A26; }
.btn-navy:hover { background: var(--navy-800); }

/* Header ----------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7, 18, 63, .9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 24px; min-height: 72px; }

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-name { font: 800 1.5rem/1 var(--font-display); letter-spacing: -.01em; white-space: nowrap; }
/* iPhone Safari can start a new line next to an image, which put the logo's O above "ttered".
   Keep the wordmark on one line, and don't let the header squeeze it narrower than it is. */
.brand { flex-shrink: 0; }

.site-nav { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.site-nav ul { display: flex; gap: 4px; }
.site-nav ul a {
  display: block; padding: 8px 12px; border-radius: 999px; white-space: nowrap;
  color: var(--muted); text-decoration: none; font-size: .9688rem;
}
.site-nav ul a:hover { color: var(--ink); background: rgba(143, 168, 255, .1); }
.nav-actions { display: flex; gap: 8px; }
.nav-actions .btn { white-space: nowrap; }

.nav-toggle {
  display: none; margin-left: auto;
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid var(--line); color: var(--ink); cursor: pointer;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block; width: 20px; height: 2px; margin-inline: auto;
  background: currentColor; border-radius: 2px; position: relative;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

/* Hero ------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(48px, 7vw, 96px) 0;
  background:
    radial-gradient(1000px 520px at 85% 10%, rgba(35, 72, 224, .55), transparent 65%),
    var(--navy-900);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.hero h1 {
  font-size: clamp(3rem, 7.4vw, 5.75rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: .95;
  max-width: 10ch;
}
/* "fights back." in the homepage heading: the letters punch up one by one, then the
   words throw a jab every few seconds. Still for reduced-motion users. */
.fights-back { position: relative; display: inline-block; color: var(--yellow); white-space: nowrap; }
/* A hand-drawn yellow underline that draws itself in once the letters have landed */
.fb-scribble { position: absolute; left: 0; bottom: -.16em; width: 100%; height: .26em; overflow: visible; pointer-events: none; }
.fb-scribble path { fill: none; stroke: var(--yellow); stroke-width: 5; stroke-linecap: round; opacity: .85; vector-effect: non-scaling-stroke; }
.fights-back span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .fights-back { animation: fb-jab 1.8s 1.8s ease-in-out 2; transform-origin: 20% 80%; }
  /* Revealed left to right with a clip, so it draws fully at any width (a stroke dash measured with
     pathLength comes out short once the line is stretched wide with a non-scaling stroke) */
  .fb-scribble { clip-path: inset(-20% 100% -20% -2%); animation: fb-draw .7s 1.15s ease-out forwards; }
  .fights-back span { animation: fb-pop .55s calc(.25s + var(--i) * .06s) cubic-bezier(.3, 1.6, .5, 1) both; }
}
@keyframes fb-pop {
  0% { opacity: 0; transform: translateY(.45em) scale(.6) rotate(-8deg); }
  100% { opacity: 1; transform: none; }
}
/* Two jabs, then it rests */
@keyframes fb-jab {
  0%, 55%, 100% { transform: none; }
  65% { transform: translateX(-.06em) rotate(-2deg); }
  78% { transform: translateX(.14em) scale(1.06) rotate(1.5deg); }
  90% { transform: translateX(-.02em) rotate(-.5deg); }
}
@keyframes fb-draw { to { clip-path: inset(-20% -2% -20% -2%); } }
.lede { margin-top: 24px; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: var(--muted); max-width: 46ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero-note { margin-top: 16px; font-size: .9375rem; color: var(--muted); }

.boards-line {
  margin-top: clamp(56px, 7vw, 88px);
  padding-block: 28px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .9688rem;
}
.boards-line strong { color: var(--ink); font-weight: 600; }

/* Arena demo ------------------------------------------------------------- */

.arena {
  position: relative;
  overflow: hidden;
  padding: 22px;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--royal) 0%, var(--royal-600) 45%, var(--navy-800) 100%);
  border: 2px solid rgba(255, 201, 40, .55);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55), 0 0 0 8px rgba(35, 72, 224, .18);
}
.arena.is-hit { animation: shake .35s ease; }

.arena-top { display: flex; justify-content: space-between; align-items: center; font-size: .875rem; }
.arena-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(7, 18, 63, .45); font-weight: 600;
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 4px rgba(255, 201, 40, .25); }
.arena-round { color: var(--soft-ink); }
.arena-top-right { display: flex; align-items: center; gap: 10px; }
.arena-end { min-height: 32px; padding: 4px 12px; font-size: .8125rem; white-space: nowrap; }

.arena-players {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
  margin-top: 18px;
}
.player { display: flex; align-items: center; gap: 10px; min-width: 0; }
.player-right { justify-content: flex-end; text-align: right; }
.player-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.player-name { font-weight: 600; font-size: .9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-elo { font-size: .8125rem; color: var(--soft-ink); }
.avatar {
  flex: none; width: 44px; height: 44px; border-radius: 14px;
  display: grid; place-items: center;
  font: 800 .8125rem/1 var(--font-display);
}
.avatar-you { background: var(--yellow); color: var(--navy-900); }
.avatar-rival { background: var(--navy-900); color: var(--royal-300); border: 2px solid var(--royal-300); }
.versus { font: 800 1.125rem/1 var(--font-display); color: var(--yellow); }

.meter { height: 8px; margin-top: 6px; border-radius: 999px; background: rgba(7, 18, 63, .55); overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--yellow); border-radius: inherit; transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.meter-rival span { background: var(--royal-300); margin-left: auto; }

.arena-question {
  margin-top: 18px; padding: 18px;
  border-radius: var(--radius-md);
  background: rgba(7, 18, 63, .55);
}
.q-meta { font-size: .8125rem; color: var(--royal-300); }
.q-text { margin-top: 6px; font: 600 clamp(1.1875rem, 2vw, 1.375rem)/1.3 var(--font-display); }
.timer { margin-top: 14px; height: 6px; border-radius: 999px; background: rgba(143, 168, 255, .2); overflow: hidden; }
.timer span { display: block; height: 100%; width: 100%; background: var(--yellow); transform-origin: left; }
.timer span.is-low { background: var(--wrong); }

.answers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.answer {
  min-height: 56px; padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 2px solid rgba(143, 168, 255, .35);
  background: rgba(7, 18, 63, .4);
  color: var(--ink);
  font: 600 1rem/1.25 var(--font-body);
  text-align: left; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.answer:hover:not(:disabled) { border-color: var(--yellow); background: rgba(255, 201, 40, .12); }
.answer:disabled { cursor: default; }
.answer.is-correct { background: var(--correct); border-color: var(--correct); color: var(--navy-900); }
.answer.is-wrong { background: var(--wrong); border-color: var(--wrong); color: var(--navy-900); }
.answer.is-dim { opacity: .5; }

.arena-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; min-height: 40px; }
.arena-status { font-size: .9375rem; color: var(--soft-ink); }

/* Splash effect on a correct answer */
.splash { position: absolute; inset: 0; pointer-events: none; }
.splash i {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: var(--royal-300);
  animation: droplet .9s ease-out forwards;
}
@keyframes droplet {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* Example player profile (hero) */
.profile-main { display: flex; align-items: center; gap: 22px; margin-top: 18px; }
.profile-otter {
  flex: none; width: 168px; aspect-ratio: 240 / 230;
  border-radius: var(--radius-md); background: rgba(7, 18, 63, .45); overflow: hidden;
}
.profile-otter svg { width: 100%; height: 100%; }
.profile-id { min-width: 0; }
.profile-name { font: 800 clamp(1.5rem, 2.6vw, 1.875rem)/1.1 var(--font-display); overflow-wrap: anywhere; }
.profile-banner { margin-top: 10px; }
.profile-tier { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: .9375rem; color: var(--soft-ink); }
.profile-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 20px 0 0; }
.profile-stats div { padding: 12px 10px; border-radius: var(--radius-sm); background: rgba(7, 18, 63, .55); text-align: center; }
.profile-stats dt { font-size: .8125rem; color: var(--royal-300); }
.profile-stats dd { margin: 2px 0 0; font: 800 1.5rem var(--font-display); }
.profile-stats div:first-child dd { color: var(--correct); }
.profile-stats div:nth-child(2) dd { color: var(--wrong); }
.profile-stats div:last-child dd { color: var(--yellow); }
.profile-foot { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.profile-foot p { font-size: .875rem; color: var(--soft-ink); }
.profile-foot a:not(.btn) { color: var(--yellow); }
.profile-foot .btn { flex: none; }
@media (max-width: 520px) {
  .profile-main { flex-direction: column; text-align: center; }
  .profile-tier { justify-content: center; }
  .profile-stats { grid-template-columns: repeat(2, 1fr); }
  .profile-foot { flex-direction: column; text-align: center; }
}

/* Sections --------------------------------------------------------------- */

.section { padding-block: var(--section-y); }
.section-band { background: var(--navy-800); }

.section-head { max-width: 640px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head h2 { font-size: clamp(2.25rem, 4.6vw, 3.5rem); font-weight: 800; letter-spacing: -.03em; }
.section-head p { margin-top: 14px; color: var(--muted); font-size: 1.125rem; }

/* How it works */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 48px); counter-reset: none; }
.step { position: relative; padding-top: 28px; border-top: 2px solid var(--line); }
.step-num {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--yellow); color: var(--navy-900);
  font: 800 1.5rem/1 var(--font-display);
}
.step h3 { margin-top: 20px; font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; }
.step p { margin-top: 10px; color: var(--muted); max-width: 36ch; }

/* Game modes bento */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.mode {
  padding: 26px;
  border-radius: var(--radius-md);
  background: var(--navy-900);
  border: 1px solid var(--line);
}
.mode h3 { font-size: 1.375rem; font-weight: 800; }
.mode p { margin-top: 8px; color: var(--muted); font-size: .9688rem; }
.mode-icon {
  width: 36px; height: 36px; margin-bottom: 18px;
  fill: none; stroke: var(--yellow); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.mode-arena {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center;
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--royal) 0%, var(--navy-700) 100%);
  border: 2px solid rgba(255, 201, 40, .5);
}
.mode-arena h3 { font-size: clamp(2rem, 4vw, 2.75rem); letter-spacing: -.02em; }
.mode-arena p { color: var(--soft-ink); font-size: 1.0625rem; max-width: 52ch; margin-top: 14px; }
.mode-points { margin-top: 20px; display: grid; gap: 8px; }
.mode-points li { display: flex; gap: 10px; align-items: baseline; }
.mode-points li::before {
  content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px;
  background: var(--yellow); transform: translateY(-1px);
}
.mode-art img { width: 100%; max-width: 320px; margin-inline: auto; }

/* Subjects picker */
.picker { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.stage-tabs {
  display: inline-flex; padding: 6px; gap: 4px;
  border-radius: 999px; background: var(--navy-800); border: 1px solid var(--line);
}
.stage-tab {
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 22px; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted);
  font: 600 1.0625rem/1.2 var(--font-body); cursor: pointer;
}
.stage-tab span { font-weight: 400; font-size: .75rem; margin-top: 2px; }
.stage-tab:hover { color: var(--ink); }
.stage-tab[aria-selected="true"] { background: var(--yellow); color: var(--navy-900); }

.board-select { display: flex; flex-direction: column; gap: 6px; font-size: .875rem; color: var(--muted); }
.board-select select {
  min-width: 220px; padding: 12px 40px 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--navy-800) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23FFC928' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center;
  color: var(--ink); font: 500 1rem var(--font-body);
  appearance: none; cursor: pointer;
}
.board-select select:disabled { opacity: .7; cursor: default; }

.subject-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.subject {
  padding: 20px 22px;
  border-radius: var(--radius-md);
  background: var(--navy-800);
  border-left: 4px solid var(--royal-300);
}
.subject.is-core { border-left-color: var(--yellow); }
.subject h3 { font: 600 1.1875rem/1.2 var(--font-display); }
.subject p { margin-top: 8px; color: var(--muted); font-size: .9063rem; line-height: 1.5; }
.subject-empty { color: var(--muted); }

/* Teachers */
.teachers-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.teachers-copy h2 { font-size: clamp(2.25rem, 4.6vw, 3.5rem); font-weight: 800; letter-spacing: -.03em; }

.ticks { display: grid; gap: 12px; margin-top: 28px; }
.ticks li { position: relative; padding-left: 32px; color: var(--muted); }
.ticks li strong { color: var(--ink); font-weight: 600; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%2307123F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
}

.lobby {
  padding: 26px;
  border-radius: var(--radius-lg);
  background: var(--navy-900);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .6);
}
.lobby-head { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.lobby-label { font-size: .875rem; color: var(--muted); }
.lobby-code { font: 800 clamp(2.25rem, 5vw, 3rem)/1.1 var(--font-display); color: var(--yellow); letter-spacing: .04em; margin-top: 4px; }
.lobby-count { padding: 6px 12px; border-radius: 999px; background: rgba(61, 220, 151, .16); color: var(--correct); font-weight: 600; font-size: .875rem; white-space: nowrap; }
.lobby-quiz { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); font-weight: 600; }
.lobby-players { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 22px; }
.lobby-players li {
  padding: 7px 12px; border-radius: 10px;
  background: var(--navy-800); font-size: .875rem;
}

/* Pricing */
.billing-toggle {
  display: inline-flex; gap: 4px; padding: 6px; margin-bottom: 32px;
  border-radius: 999px; background: var(--navy-800); border: 1px solid var(--line);
}
.billing-toggle button {
  padding: 10px 20px; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted);
  font: 600 .9688rem var(--font-body); cursor: pointer;
}
.billing-toggle button[aria-checked="true"] { background: var(--royal); color: var(--ink); }
.save { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--yellow); color: var(--navy-900); font-size: .75rem; }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.plan {
  display: flex; flex-direction: column;
  padding: 30px;
  border-radius: var(--radius-lg);
  background: var(--navy-800);
  border: 1px solid var(--line);
}
.plan h3 { font-size: 1.5rem; font-weight: 800; }
.plan-price { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; }
.amount { font: 800 3rem/1 var(--font-display); letter-spacing: -.03em; }
.amount-text { font-size: 2.25rem; }
.per { color: var(--muted); }
.plan-desc { margin-top: 12px; color: var(--muted); }
.plan .ticks { margin-block: 24px 30px; flex: 1; }
.plan .ticks li { color: var(--ink); }

.plan-featured {
  background: linear-gradient(170deg, var(--royal) 0%, var(--navy-700) 100%);
  border: 2px solid var(--yellow);
  transform: translateY(-12px);
}
.plan-featured .plan-desc,
.plan-featured .per { color: var(--soft-ink); }
.plan-flag {
  align-self: flex-start; margin-bottom: 14px;
  padding: 4px 12px; border-radius: 999px;
  background: var(--yellow); color: var(--navy-900);
  font-weight: 600; font-size: .8125rem;
}

/* FAQ */
.faq-wrap { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.faq { display: grid; gap: 12px; }
.faq details {
  border-radius: var(--radius-md);
  background: var(--navy-900);
  border: 1px solid var(--line);
}
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 22px;
  font-weight: 600; font-size: 1.0625rem;
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 12px; height: 12px;
  border-right: 2.5px solid var(--yellow); border-bottom: 2.5px solid var(--yellow);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq details p { padding: 0 22px 22px; color: var(--muted); max-width: 64ch; }

/* Final CTA */
.cta-band { background: var(--yellow); color: var(--navy-900); padding-block: clamp(56px, 8vw, 96px); }
.cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.cta-inner h2 { font-size: clamp(2rem, 4.4vw, 3.25rem); font-weight: 800; letter-spacing: -.03em; max-width: 18ch; }

/* Footer */
.site-footer { padding-top: 64px; background: var(--navy-900); border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.footer-note { margin-top: 12px; color: var(--muted); font-size: .9375rem; }
.site-footer h3 { font: 600 1rem var(--font-body); margin-bottom: 12px; }
.site-footer nav ul { display: grid; gap: 8px; }
.site-footer nav a { color: var(--muted); text-decoration: none; font-size: .9375rem; }
.site-footer nav a:hover { color: var(--ink); }
.footer-base { margin-top: 48px; padding-block: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: .8125rem; }

/* Reviews */
.reviews-title {
  max-width: 16ch; margin-inline: auto; text-align: center;
  font-size: clamp(2.25rem, 5.5vw, 4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05;
}
.wavy { position: relative; display: inline-block; }
.wavy svg {
  position: absolute; left: -2%; bottom: -0.08em; width: 104%; height: 0.32em;
  fill: none; stroke: var(--yellow); stroke-width: 3.5; stroke-linecap: round;
  overflow: visible; pointer-events: none;
}
.reviews-note { margin-top: 14px; text-align: center; font-size: .875rem; color: var(--muted); }
.reviews-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: clamp(36px, 5vw, 56px); }
.review {
  display: flex; flex-direction: column; margin: 0;
  padding: clamp(26px, 3.5vw, 40px); border-radius: var(--radius-lg);
  background: var(--navy-800); border: 1px solid var(--line);
}
.review-doodle { width: 60px; height: 60px; margin-bottom: 22px; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.review-doodle .d-ink { stroke: var(--ink); }
.review-doodle .d-yellow { stroke: var(--yellow); }
.review-doodle .d-blue { stroke: var(--royal-300); }
.review-doodle .d-blue-fill { fill: var(--royal); stroke: var(--ink); }
.review-doodle .d-yellow-fill { fill: var(--yellow); stroke: var(--ink); }
.review blockquote { margin: 0; font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.55; }
.review figcaption { display: grid; gap: 2px; margin-top: auto; padding-top: 24px; }
.review figcaption strong { font: 600 1.125rem var(--font-display); }
.review figcaption span { color: var(--muted); font-size: .9375rem; }
@media (max-width: 760px) {
  .reviews-grid { grid-template-columns: 1fr; }
}
/* Rolling reviews (js/home.js): one strip that loops; the second half is a copy of the first */
.reviews-grid.is-rolling {
  display: block; overflow: hidden;
  padding-block: 4px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.reviews-track { display: flex; width: max-content; animation: reviews-roll var(--roll-time, 54s) linear infinite; }
.reviews-track .review { width: min(380px, 78vw); margin-right: 20px; flex: none; }
.reviews-grid.is-rolling:hover .reviews-track,
.reviews-grid.is-rolling:focus-within .reviews-track,
.reviews-grid.is-paused .reviews-track { animation-play-state: paused; }
@keyframes reviews-roll { to { transform: translateX(-50%); } }
.reviews-pause { display: block; margin: 18px auto 0; color: var(--muted); font-size: .875rem; }
@media (prefers-reduced-motion: reduce) {
  .reviews-track { animation: none; }
}

/* Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.contact-intro h2 { font-size: clamp(2.25rem, 4.6vw, 3.5rem); font-weight: 800; letter-spacing: -.03em; }
.contact-intro p { margin-top: 14px; color: var(--muted); font-size: 1.125rem; max-width: 40ch; }
.contact-intro .contact-site { color: var(--ink); font-size: 1rem; }
.contact-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-card {
  display: flex; flex-direction: column;
  padding: 26px; border-radius: var(--radius-lg);
  background: var(--navy-900); border: 1px solid var(--line);
}
.contact-card-schools { border: 2px solid rgba(255, 201, 40, .5); }
.contact-card h3 { font-size: 1.375rem; font-weight: 800; }
.contact-card p { margin-top: 8px; color: var(--muted); font-size: .9688rem; }
.contact-email {
  margin-top: auto; padding-top: 20px;
  font: 600 1.125rem var(--font-display); color: var(--yellow);
  overflow-wrap: anywhere;
}
.footer-contact { display: grid; gap: 4px; margin-top: 16px; font-style: normal; font-size: .9375rem; color: var(--muted); }
.footer-contact a { color: var(--ink); }

/* Shared page pieces ----------------------------------------------------- */

.site-nav ul a[aria-current="page"] { color: var(--navy-900); background: var(--yellow); }

.page-hero {
  padding-block: clamp(40px, 6vw, 72px) clamp(28px, 4vw, 40px);
  background:
    radial-gradient(900px 420px at 90% 0%, rgba(35, 72, 224, .5), transparent 65%),
    var(--navy-900);
}
.page-hero h1 { font-size: clamp(2.75rem, 6.5vw, 4.75rem); font-weight: 800; letter-spacing: -.035em; }
.page-hero .lede { margin-top: 14px; }

/* Our story (about.html) */
.story-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.story-photo { margin: 0; justify-self: center; max-width: 440px; transform: rotate(-2.5deg); }
.story-photo img {
  display: block; width: 100%; height: auto; border-radius: 6px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .25);
}
.story-photo figcaption { margin-top: 14px; text-align: center; font-size: .9375rem; color: var(--muted); transform: rotate(2.5deg); }
.story-copy p { margin-top: 16px; font-size: 1.125rem; line-height: 1.65; color: var(--soft-ink, var(--ink)); }
.story-copy .story-lead { margin-top: 0; font: 600 clamp(1.375rem, 2.4vw, 1.75rem)/1.35 var(--font-display); color: var(--ink); }
.story-points { display: grid; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
.story-points li { padding: 16px 20px; border-radius: var(--radius-md); background: var(--navy-800); border: 1px solid var(--line); border-left: 4px solid var(--yellow); line-height: 1.55; }
.story-points strong { color: var(--yellow); }
.story-copy .hero-ctas { margin-top: 28px; }
@media (max-width: 860px) {
  .story-grid { grid-template-columns: 1fr; }
  .story-photo { max-width: 360px; }
}
@media (prefers-reduced-motion: reduce) { .story-photo, .story-photo figcaption { transform: none; } }

.seg {
  display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 6px;
  border-radius: 999px; background: var(--navy-800); border: 1px solid var(--line);
}
.seg-btn {
  padding: 10px 20px; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted);
  font: 600 1rem/1.2 var(--font-body); cursor: pointer;
}
.seg-btn:hover { color: var(--ink); }
.seg-btn[aria-selected="true"],
.seg-btn[aria-checked="true"] { background: var(--yellow); color: var(--navy-900); }

.field { display: flex; flex-direction: column; gap: 6px; font-size: .875rem; color: var(--muted); }
.field select {
  min-width: 190px; padding: 11px 40px 11px 14px;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--navy-800) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23FFC928' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;
  color: var(--ink); font: 500 .9688rem var(--font-body);
  appearance: none; cursor: pointer;
}

.link-btn {
  padding: 4px 0; border: 0; background: none; cursor: pointer;
  color: var(--royal-300); font: 500 .9375rem var(--font-body);
  text-decoration: underline; text-underline-offset: 3px;
}
.link-btn:hover { color: var(--ink); }

.footer-split { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.site-footer:has(> .footer-base:only-child) { padding-top: 0; }
.site-footer > .footer-base:only-child { margin-top: 0; border-top: 0; }

/* Social media links in the footer. The brand icons come from Simple Icons and take the link colour. */
.footer-base:has(.footer-social) { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; }
.footer-split .footer-social { order: 1; margin-left: auto; }
.footer-split .footer-social ~ * { order: 2; }
.footer-social { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.footer-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--muted); border: 1px solid var(--line); transition: color .15s, border-color .15s; }
.footer-social a:hover, .footer-social a:focus-visible { color: var(--ink); border-color: currentColor; }
.footer-social a::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.social-tiktok { --icon: url("https://cdn.jsdelivr.net/npm/simple-icons@13.0.0/icons/tiktok.svg"); }
.social-instagram { --icon: url("https://cdn.jsdelivr.net/npm/simple-icons@13.0.0/icons/instagram.svg"); }
.social-x { --icon: url("https://cdn.jsdelivr.net/npm/simple-icons@13.0.0/icons/x.svg"); }
.social-youtube { --icon: url("https://cdn.jsdelivr.net/npm/simple-icons@13.0.0/icons/youtube.svg"); }

/* Leaderboards ----------------------------------------------------------- */

.lb-board { margin: 4px 0 20px; }
.lb-table.is-elo .col-change { display: none; }   /* Elo never resets, so there's nothing to compare */
.lb-controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; margin-top: 32px; }
.lb-filters { display: flex; flex-wrap: wrap; gap: 12px; }
.lb-reset { margin-top: 16px; color: var(--muted); font-size: .9375rem; min-height: 1.5em; }

.lb-section { padding-top: clamp(32px, 4vw, 48px); padding-bottom: 0; }

/* Podium is this page's one loud moment */
.podium {
  display: grid; grid-template-columns: repeat(3, 1fr); align-items: end;
  gap: clamp(10px, 2vw, 24px);
  max-width: 820px; margin: 0 auto clamp(32px, 4vw, 48px);
}
.podium-spot { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.podium-avatar { width: clamp(72px, 12vw, 120px); aspect-ratio: 1; }
.podium-1 .podium-avatar { width: clamp(96px, 16vw, 160px); }
.podium-avatar svg { width: 100%; height: 100%; }
.podium-name {
  margin-top: 10px; max-width: 100%;
  font: 600 clamp(.9375rem, 1.6vw, 1.125rem)/1.2 var(--font-display);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.podium-xp { color: var(--muted); font-size: .875rem; }
.podium-block {
  width: 100%; margin-top: 12px;
  display: grid; place-items: start center; padding-top: 14px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  font: 800 clamp(2rem, 5vw, 3.25rem)/1 var(--font-display);
}
.podium-1 .podium-block { height: clamp(110px, 16vw, 170px); background: var(--yellow); color: var(--navy-900); }
.podium-2 .podium-block { height: clamp(80px, 11vw, 120px); background: var(--royal); }
.podium-3 .podium-block { height: clamp(60px, 8vw, 90px); background: var(--navy-700); color: var(--royal-300); }

.lb-table-wrap { border-radius: var(--radius-lg); background: var(--navy-800); border: 1px solid var(--line); overflow: hidden; }
.lb-table { width: 100%; border-collapse: collapse; }
.lb-table th {
  padding: 14px 18px; text-align: left;
  font: 500 .8125rem var(--font-body); color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.lb-table td { padding: 10px 18px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.lb-table tbody tr:last-child td { border-bottom: 0; }
.lb-table tbody tr:hover { background: rgba(143, 168, 255, .06); }
.lb-table tr.is-you { background: rgba(255, 201, 40, .14); }
.lb-table tr.is-you .lb-name { color: var(--yellow); }
.col-rank { width: 64px; font: 800 1.125rem var(--font-display); color: var(--muted); }
.col-xp { text-align: right !important; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.col-change { width: 150px; text-align: right !important; }

.lb-player { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lb-avatar {
  flex: none; width: 44px; height: 44px; border-radius: 14px;
  background: var(--navy-700); overflow: hidden;
}
.lb-avatar svg { width: 100%; height: 100%; }
.lb-name-wrap { display: flex; flex-direction: column; min-width: 0; }
.lb-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-sub { font-size: .8125rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tier { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.tier-master { background: var(--yellow); color: var(--navy-900); }
.tier-gold { background: rgba(255, 201, 40, .18); color: var(--yellow); }
.tier-river { background: rgba(35, 72, 224, .35); color: var(--soft-ink); }
.tier-kelp { background: rgba(61, 220, 151, .16); color: var(--correct); }
.tier-reed, .tier-pebble { background: rgba(143, 168, 255, .14); color: var(--muted); }

.chg { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: .9375rem; }
.chg svg { width: 10px; height: 10px; fill: currentColor; }
.chg-up { color: var(--correct); }
.chg-down { color: var(--wrong); }
.chg-same, .chg-none { color: var(--muted); }
.chg-new { padding: 2px 8px; border-radius: 999px; background: var(--royal); color: var(--ink); font-size: .75rem; }

.you-bar {
  position: sticky; bottom: 0; z-index: 20;
  margin-top: 32px; padding-block: 12px;
  background: rgba(13, 29, 92, .96); backdrop-filter: blur(10px);
  border-top: 2px solid var(--yellow);
}
.you-inner { display: flex; align-items: center; gap: 14px; }
.you-rank { font: 800 1.5rem/1 var(--font-display); color: var(--yellow); min-width: 64px; }
.you-cta { margin-left: auto; }

/* Shop ------------------------------------------------------------------- */

.shop-hero { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; }
.balance {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 20px; border-radius: 999px;
  background: var(--navy-800); border: 2px solid rgba(255, 201, 40, .5);
}
.balance strong { font: 800 1.5rem/1 var(--font-display); color: var(--yellow); }
.balance a { font-size: .875rem; color: var(--royal-300); }
.shell-icon { width: 26px; height: 26px; fill: var(--yellow); stroke: var(--navy-900); stroke-width: 1.4; stroke-linecap: round; }

.shop-section { padding-top: clamp(24px, 3vw, 40px); }
.shop-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }

.preview {
  position: sticky; top: 96px;
  padding: 24px; text-align: center;
  border-radius: var(--radius-lg);
  background: linear-gradient(170deg, var(--royal) 0%, var(--navy-700) 100%);
  border: 2px solid rgba(255, 201, 40, .55);
}
.preview-art { aspect-ratio: 240 / 230; }
.preview-art svg { width: 100%; height: 100%; }
.preview-label { margin-top: 14px; font-size: .875rem; color: var(--soft-ink); }
.preview-name { margin-top: 2px; font: 800 1.5rem/1.15 var(--font-display); }
.preview-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.preview-actions:empty { display: none; }
.preview .link-btn { margin-top: 12px; color: var(--soft-ink); }
.need { flex-basis: 100%; font-size: .8125rem; color: var(--soft-ink); }

.items {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px; margin-top: 24px;
}
/* Shop tiers: each tab is split by price into Basic, Bronze, Silver, Gold, Platinum and Legendary */
.shop-tiers { margin-top: 8px; }
.shop-tier { --tier: var(--muted); margin-top: 28px; }
.shop-tier .items { margin-top: 12px; }
.shop-tier .item { border-color: color-mix(in srgb, var(--tier) 22%, transparent); }
.shop-tier .item.is-previewing { border-color: var(--yellow); }
.shop-tier .item.is-equipped { border-color: rgba(61, 220, 151, .6); }
.shop-tier-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font: 800 1.25rem/1.2 var(--font-display); color: var(--tier); }
.shop-tier-gem { width: 14px; height: 14px; border-radius: 4px; transform: rotate(45deg); background: var(--tier); box-shadow: 0 0 10px color-mix(in srgb, var(--tier) 55%, transparent); }
.shop-tier-range { font: 500 .8125rem var(--font-body); color: var(--muted); }
.shop-tier-basic { --tier: #B8C3EC; }
.shop-tier-bronze { --tier: #E0975A; }
.shop-tier-silver { --tier: #D3DAE8; }
.shop-tier-gold { --tier: #FFC928; }
.shop-tier-platinum { --tier: #8EE8F2; }
.shop-tier-legendary { --tier: #F08CFF; }
.shop-tier-legendary .shop-tier-gem { background: linear-gradient(135deg, #FFC928, #F08CFF 55%, #8EE8F2); }
.shop-tier-legendary .shop-tier-head { background: linear-gradient(90deg, #FFC928, #F08CFF 60%, #8EE8F2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.shop-tier-legendary .shop-tier-head .shop-tier-range { -webkit-text-fill-color: var(--muted); }
.shop-tier-empty { margin-top: 24px; color: var(--muted); }
.item {
  display: flex; flex-direction: column;
  border-radius: var(--radius-md);
  background: var(--navy-800);
  border: 2px solid transparent;
  transition: border-color .15s ease;
}
.item.is-previewing { border-color: var(--yellow); }
.item.is-equipped { border-color: rgba(61, 220, 151, .6); }
.item-try {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 14px 14px 10px; border: 0; background: none; color: var(--ink);
  text-align: left; cursor: pointer; border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.item-art {
  align-self: stretch; aspect-ratio: 1; margin-bottom: 10px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm); background: var(--navy-700);
}
.item-art svg { width: 82%; height: 82%; }
.item-try:hover .item-art { background: #1A3088; }
.item-type { font-size: .75rem; color: var(--muted); }
.item-name { font: 600 1.0625rem/1.2 var(--font-display); }
.item-buy { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 14px; margin-top: auto; }
.item-buy .btn { flex: 1 1 auto; padding-inline: 12px; }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn-equipped { background: rgba(61, 220, 151, .16); color: var(--correct); opacity: 1 !important; cursor: default !important; }

.earn-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.earn-list li {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px; border-radius: var(--radius-md);
  background: var(--navy-900); border: 1px solid var(--line); color: var(--muted);
}
.earn-list strong { font: 800 1.5rem/1 var(--font-display); color: var(--yellow); min-width: 52px; }

.modal {
  width: min(420px, calc(100% - 32px)); padding: 28px;
  border: 2px solid rgba(255, 201, 40, .55); border-radius: var(--radius-lg);
  background: var(--navy-800); color: var(--ink); text-align: center;
}
.modal::backdrop { background: rgba(3, 8, 30, .7); backdrop-filter: blur(3px); }
.modal-art { width: 180px; margin: 0 auto 12px; }
.modal-art svg { width: 100%; height: auto; }
.modal h2 { font-size: 1.625rem; font-weight: 800; }
.modal p { margin-top: 10px; color: var(--muted); }
.modal-actions { display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }

/* Study tools dropdown --------------------------------------------------- */

.nav-drop { position: relative; }
.nav-drop-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted);
  font: 400 .9688rem var(--font-body); white-space: nowrap; cursor: pointer;
}
.nav-drop-btn svg { width: 10px; height: 8px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .2s ease; }
.nav-drop-btn:hover,
.nav-drop-btn[aria-expanded="true"] { color: var(--ink); background: rgba(143, 168, 255, .1); }
.nav-drop-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-drop-btn.is-current { color: var(--navy-900); background: var(--yellow); }

.nav-drop-panel {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  width: 340px; padding: 8px; display: grid; gap: 2px;
  background: var(--navy-800); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .6);
}
.site-nav .drop-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 12px; border-radius: var(--radius-sm);
  color: var(--ink); white-space: normal; font-size: 1rem;
}
.site-nav .drop-item:hover,
.site-nav .drop-item[aria-current="page"] { background: rgba(143, 168, 255, .12); color: var(--ink); }
.drop-item svg {
  flex: none; width: 24px; height: 24px; margin-top: 2px;
  fill: none; stroke: var(--yellow); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.drop-item strong { display: block; font-weight: 600; }
.drop-item span span { display: block; font-size: .875rem; color: var(--muted); }

/* Homepage study tools section ------------------------------------------ */

.section-river {
  background:
    radial-gradient(800px 420px at 10% 0%, rgba(35, 72, 224, .35), transparent 70%),
    var(--navy-900);
}
.tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.tool-panel {
  display: flex; flex-direction: column;
  padding: 28px; border-radius: var(--radius-lg);
  background: var(--navy-800); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
  transition: border-color .15s ease;
}
.tool-panel:hover { border-color: var(--yellow); }
.tool-panel h3 { font-size: 1.5rem; font-weight: 800; }
.tool-panel p { margin-top: 8px; color: var(--muted); }
.tool-panel-cards {
  background: linear-gradient(160deg, var(--royal) 0%, var(--navy-700) 100%);
  border: 2px solid rgba(255, 201, 40, .55);
}
.tool-panel-cards p { color: var(--soft-ink); }
.tool-link { margin-top: auto; padding-top: 22px; color: var(--yellow); font-weight: 600; }
.mini-card {
  display: grid; gap: 6px; margin-top: 20px; padding: 16px 18px;
  border-radius: 14px; background: var(--ink); color: var(--navy-900);
  box-shadow: 6px 6px 0 rgba(255, 201, 40, .9);
}
.mini-card-q { font: 600 1.0625rem/1.3 var(--font-display); }
.mini-card-a { font-size: .875rem; color: var(--royal-600); }

/* Study pages: shared ---------------------------------------------------- */

.study-meta { color: var(--royal-300); font-size: .9688rem; min-height: 1.5em; }
.study-hero h1 { margin-top: 4px; }
.study-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; margin-top: 28px; }
.topic-field select { min-width: 300px; }
/* Flashcards picker: Your sets, then subjects that open to show their topics */
.fc-picker { position: relative; display: grid; gap: 6px; min-width: 320px; }
.fc-picker-label { font-size: .875rem; font-weight: 600; color: var(--muted); }
.fc-picker-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  padding: 12px 16px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--navy-800);
  color: var(--ink); font: 600 1rem var(--font-body); text-align: left; cursor: pointer;
}
.fc-picker-btn:hover, .fc-picker-btn[aria-expanded="true"] { border-color: var(--yellow); }
.fc-picker-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-picker-btn svg, .fc-picker-subject svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--yellow); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.fc-picker-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.fc-picker-panel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; max-height: min(70vh, 520px); overflow-y: auto;
  padding: 10px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--navy-800);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.fc-picker-head { margin: 8px 8px 6px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--royal-300); }
.fc-picker-head:first-child { margin-top: 2px; }
.fc-picker-sets, .fc-picker-subjects, .fc-picker-topics { margin: 0; padding: 0; list-style: none; }
.fc-picker-sets { padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.fc-picker-panel a, .fc-picker-subject {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: var(--radius-sm); background: none;
  color: var(--ink); font: 500 .9375rem var(--font-body); text-align: left; text-decoration: none; cursor: pointer;
}
.fc-picker-panel a:hover, .fc-picker-subject:hover { background: var(--navy-700); }
.fc-picker-panel a[aria-current="page"] { background: rgba(255, 201, 40, .14); color: var(--yellow); }
.fc-picker-panel a span { color: var(--muted); font-size: .8125rem; white-space: nowrap; }
.fc-picker-new { justify-content: flex-start !important; color: var(--yellow) !important; font-weight: 700 !important; }
.fc-picker-new span { color: var(--yellow) !important; font-size: 1.125rem !important; }
.fc-picker-note { padding: 6px 10px; color: var(--muted); font-size: .875rem; }
.fc-picker-panel .fc-picker-note a { display: inline; width: auto; padding: 0; color: var(--yellow); text-decoration: underline; font-size: inherit; }
.fc-picker-panel .fc-picker-note a:hover { background: none; }
.fc-picker-subject { font-weight: 600; }
.fc-picker-stage { list-style: none; }
.fc-picker-stage .fc-picker-head { margin-top: 12px; }
.fc-picker-subject[aria-expanded="true"] svg { transform: rotate(90deg); }
.fc-picker-topics { margin: 2px 0 6px 12px; padding-left: 10px; border-left: 2px solid var(--line); }
.fc-picker-topics a { font-size: .875rem; padding: 7px 10px; }
.tool-switch .seg-btn { text-decoration: none; display: inline-block; }
.tool-switch .seg-btn[aria-current="page"] { background: var(--yellow); color: var(--navy-900); }
.study-section { padding-top: clamp(32px, 4vw, 48px); }

.field textarea,
.q-input input,
.q-written textarea {
  width: 100%; padding: 12px 14px;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--navy-900); color: var(--ink);
  font: 400 1rem/1.5 var(--font-body);
}
.field textarea, .q-written textarea { resize: vertical; }
.field textarea::placeholder, .q-input input::placeholder, .q-written textarea::placeholder { color: #7D8BBF; }

.notes-next {
  margin-top: 48px; padding: 28px;
  border-radius: var(--radius-lg); background: var(--navy-800); border: 1px solid var(--line);
}
.notes-next h2 { font-size: 1.5rem; font-weight: 800; }
.notes-next p { margin-top: 8px; color: var(--muted); }
.notes-next .hero-ctas { margin-top: 20px; }

/* Revision notes */
.notes-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.notes-side { position: sticky; top: 96px; }
.notes-grid.no-toc { grid-template-columns: minmax(0, 1fr); }
.side-label { font-size: .8125rem; color: var(--muted); margin-bottom: 10px; }
.notes-side ol { border-left: 2px solid var(--line); }
.notes-side a {
  display: block; padding: 7px 0 7px 16px; margin-left: -2px;
  border-left: 2px solid transparent;
  color: var(--muted); text-decoration: none; font-size: .9375rem;
}
.notes-side a:hover { color: var(--ink); border-left-color: var(--yellow); }

.notes { max-width: 760px; }
.notes-summary { font-size: 1.25rem; color: var(--muted); }
.note-block { padding-top: 36px; }
.note-block h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -.02em; }
.note-block > p, .note-block > ul, .note-block > table, .note-block > .worked { margin-top: 14px; }
.note-block ul { list-style: disc; padding-left: 1.25em; }
.note-block li { margin-top: 8px; }
.note-block li::marker { color: var(--yellow); }
.note-block strong { color: var(--ink); }
.note-block table { width: 100%; border-collapse: collapse; border-radius: var(--radius-sm); overflow: hidden; }
.note-block th, .note-block td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.note-block th { background: var(--navy-800); font-weight: 600; font-size: .9375rem; }
.note-block td:first-child { font-weight: 600; white-space: nowrap; }
.note-block .bits th, .note-block .bits td { text-align: center; font-variant-numeric: tabular-nums; padding-inline: 4px; }
.note-block .bits td { color: var(--yellow); font-size: 1.125rem; }
.formula {
  display: inline-block; padding: 12px 18px;
  border-radius: var(--radius-sm); background: var(--navy-800); border-left: 4px solid var(--yellow);
  font: 600 1.125rem var(--font-display);
}
.worked { padding: 18px 20px; border-radius: var(--radius-md); background: rgba(35, 72, 224, .18); border: 1px solid var(--line); }
.worked p + p { margin-top: 6px; }
.exam-tip {
  margin-top: 40px; padding: 22px 24px;
  border-radius: var(--radius-md); background: rgba(255, 201, 40, .1); border: 2px solid rgba(255, 201, 40, .5);
}
.exam-tip h2 { font-size: 1.25rem; font-weight: 800; color: var(--yellow); }
.exam-tip p { margin-top: 8px; }

/* Flashcards */
.fc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 4vw, 48px); align-items: start; }
.fc-progress { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: .9375rem; color: var(--muted); }
.fc-tally { display: flex; gap: 16px; }
.tally-known strong { color: var(--correct); }
.tally-learning strong { color: var(--yellow); }
.meter.fc-meter { margin: 10px 0 22px; background: rgba(143, 168, 255, .18); }

.flashcard {
  display: block; width: 100%; aspect-ratio: 3 / 2; min-height: 280px;
  padding: 0; border: 0; background: transparent; color: inherit; font: inherit;
  perspective: 1400px; cursor: pointer;
}
.flashcard:focus-visible { outline-offset: 6px; border-radius: var(--radius-lg); }
.fc-inner {
  position: relative; display: block; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.2, .8, .2, 1);
}
.flashcard.is-flipped .fc-inner { transform: rotateY(180deg); }
.fc-face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 32px; text-align: center;
  border-radius: var(--radius-lg);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.fc-front { background: linear-gradient(160deg, var(--royal) 0%, var(--navy-700) 100%); border: 2px solid rgba(255, 201, 40, .55); }
.fc-back { background: var(--yellow); color: var(--navy-900); transform: rotateY(180deg); }
.fc-label { font-size: .8125rem; font-weight: 600; color: var(--royal-300); }
.fc-back .fc-label { color: var(--navy-700); }
.flashcard.is-mine .fc-label::after { content: " (your card)"; }
.fc-text { font: 600 clamp(1.375rem, 2.6vw, 2rem)/1.25 var(--font-display); max-width: 26ch; }
.fc-hint { font-size: .8125rem; color: var(--soft-ink); }
.fc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.fc-keys { margin-top: 12px; text-align: center; font-size: .8125rem; color: var(--muted); }
.fc-done {
  padding: 40px 32px; text-align: center;
  border-radius: var(--radius-lg); background: var(--navy-800); border: 2px solid rgba(61, 220, 151, .5);
}
.fc-done h2 { font-size: 2rem; font-weight: 800; }
.fc-done p { margin-top: 10px; color: var(--muted); }
.fc-done .hero-ctas { justify-content: center; margin-top: 22px; }
.fc-tools { display: flex; justify-content: center; gap: 24px; margin-top: 18px; }

.fc-make { padding: 26px; border-radius: var(--radius-lg); background: var(--navy-800); border: 1px solid var(--line); }
.fc-make h2 { font-size: 1.5rem; font-weight: 800; }
.fc-make > p { margin-top: 6px; color: var(--muted); font-size: .9375rem; }
.fc-make form { display: grid; gap: 14px; margin-top: 18px; }
.fc-make h3 { margin-top: 28px; font: 600 1.125rem var(--font-display); }
.my-cards { display: grid; gap: 8px; margin-top: 12px; }
.my-cards li { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--navy-900); }
.my-front { font-weight: 600; }
.my-back { color: var(--muted); font-size: .9375rem; }
.my-cards .link-btn { justify-self: start; font-size: .8125rem; margin-top: 4px; }
.my-cards .my-empty { background: none; padding: 0; color: var(--muted); font-size: .9375rem; }
/* Flashcards: Study / Make cards, and writing on the card itself */
.fc-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.fc-mode { max-width: 360px; }
.fc-board .seg-btn { padding-inline: 14px; }
.fc-mode .seg-btn, .fc-board .seg-btn { white-space: nowrap; }
.fc-board-note { margin: 10px 0 22px; font-size: .875rem; color: var(--muted); }
.fc-toolbar:has(+ .fc-board-note[hidden]) { margin-bottom: 22px; }   /* your own sets: no board line */
.fc-edit { cursor: pointer; }
.fc-edit .fc-face { gap: 10px; }
.fc-input {
  width: 100%; max-width: 30ch; flex: 1 1 auto; min-height: 0; max-height: 9em; resize: none;
  padding: 10px 14px; border: 2px dashed currentColor; border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .06); color: inherit; text-align: center;
  font: 600 clamp(1.125rem, 2.2vw, 1.625rem)/1.3 var(--font-display); cursor: text;
}
.fc-front .fc-input { border-color: rgba(255, 255, 255, .35); }
.fc-back .fc-input { border-color: rgba(7, 18, 63, .35); background: rgba(255, 255, 255, .35); }
.fc-input::placeholder { color: inherit; opacity: .55; }
.fc-input:focus { outline: none; border-style: solid; }
.fc-list-title { margin-top: 30px; font: 600 1.125rem var(--font-display); }

/* Saved flashcard sets */
.fc-sets { margin-top: 28px; padding-top: 4px; border-top: 1px solid var(--line); }
.fc-sets .field-help { margin-top: 6px; }
.fc-sets .field-help:empty { display: none; }
.fc-make .fc-sets form { margin-top: 12px; }
.fc-set-list { display: grid; gap: 8px; margin-top: 12px; padding: 0; list-style: none; }
.fc-set-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--navy-900); border: 1px solid transparent; }
.fc-set-list li.is-open { border-color: var(--yellow); }
.fc-set-list a { display: grid; gap: 2px; min-width: 0; color: var(--ink); text-decoration: none; }
.fc-set-list a strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-set-list a span { color: var(--muted); font-size: .8125rem; }
.fc-set-list a:hover strong { color: var(--yellow); }
.set-tag {
  justify-self: start; display: inline-block; margin: 2px 0; padding: 1px 8px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.set-tag.is-notes { border-color: transparent; background: rgba(61, 220, 151, .16); color: var(--correct); }
.fc-set-list a span.set-tag { font-size: .75rem; }
.fc-set-list a span.set-tag.is-notes { color: var(--correct); }
.fc-picker-sets .set-tag { margin: 0 4px; vertical-align: .05em; }
.fc-save-msg { margin-top: 8px; text-align: center; font-size: .875rem; color: var(--muted); }
.fc-save-msg:empty { display: none; }
.fc-set-list .link-btn { flex: none; font-size: .8125rem; }

/* Exam questions */
.q-wrap { max-width: 860px; }
.q-score-bar {
  position: sticky; top: 84px; z-index: 10;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 20px; border-radius: var(--radius-md);
  background: rgba(13, 29, 92, .96); backdrop-filter: blur(8px); border: 1px solid var(--line);
}
.q-score strong { font: 800 1.5rem var(--font-display); color: var(--yellow); }
.q-score span { margin-left: 10px; font-size: .875rem; color: var(--muted); }
.q-list { display: grid; gap: 18px; margin-top: 24px; }
.q-card { padding: 26px; border-radius: var(--radius-lg); background: var(--navy-800); border: 1px solid var(--line); }
.q-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.q-head h2 { font: 600 1.0625rem var(--font-body); color: var(--royal-300); }
.q-marks { font-size: .875rem; color: var(--muted); white-space: nowrap; }
.q-prompt { margin-top: 10px; font: 600 1.25rem/1.35 var(--font-display); }
.q-options { display: grid; gap: 10px; margin: 18px 0 16px; padding: 0; border: 0; }
.q-option {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-radius: var(--radius-sm);
  border: 2px solid rgba(143, 168, 255, .3); cursor: pointer;
}
.q-option input { width: 18px; height: 18px; accent-color: var(--yellow); flex: none; }
.q-option:has(input:checked) { border-color: var(--yellow); background: rgba(255, 201, 40, .08); }
.q-option.is-correct { border-color: var(--correct); background: rgba(61, 220, 151, .14); }
.q-option.is-wrong { border-color: var(--wrong); background: rgba(255, 122, 122, .12); }
.q-option:has(input:disabled) { cursor: default; }
.q-input { display: flex; align-items: center; gap: 10px; margin: 18px 0 16px; }
.q-input input { max-width: 240px; font-size: 1.0625rem; }
.q-unit { font-weight: 600; color: var(--muted); }
.q-written { display: block; margin: 18px 0 16px; }
.q-feedback:empty { display: none; }
.q-feedback { margin-top: 16px; padding: 16px 18px; border-radius: var(--radius-sm); }
.q-feedback.is-right { background: rgba(61, 220, 151, .14); border-left: 4px solid var(--correct); }
.q-feedback.is-wrong { background: rgba(255, 122, 122, .12); border-left: 4px solid var(--wrong); }
.q-feedback.is-hint { padding: 0; color: var(--yellow); }
.q-feedback.is-scheme { background: rgba(35, 72, 224, .2); border-left: 4px solid var(--royal-300); }
.mark-points { display: grid; gap: 8px; margin-top: 12px; }
.mark-points label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.mark-points input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--yellow); flex: none; }
.self-mark { margin-top: 12px; font-weight: 600; color: var(--yellow); }

/* Notes library ---------------------------------------------------------- */

.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; font-size: .9375rem; }
.crumbs li { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.crumbs li + li::before { content: "/"; color: var(--line); color: rgba(143, 168, 255, .45); }
.crumbs a { color: var(--royal-300); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs + h1 { margin-top: 6px; }

.library-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 24px; }
.search-field input {
  width: 300px; padding: 11px 14px 11px 40px;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--navy-800) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238FA8FF' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 13px center;
  color: var(--ink); font: 400 1rem var(--font-body);
}
.search-field input::placeholder { color: #7D8BBF; }

.subject-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.subject-card {
  display: flex; flex-direction: column; gap: 6px; height: 100%;
  padding: 18px 20px; border-radius: var(--radius-md);
  background: var(--navy-800); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.subject-card:hover { border-color: var(--yellow); background: #12256B; }
.sc-name { font: 600 1.1875rem/1.2 var(--font-display); }
.sc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .875rem; color: var(--muted); }
.sc-ready { padding: 2px 9px; border-radius: 999px; background: rgba(61, 220, 151, .16); color: var(--correct); font-weight: 600; font-size: .8125rem; }
.library-empty { color: var(--muted); padding: 24px 0; }
.missing-note { max-width: 860px; margin-top: 24px; color: var(--muted); font-size: .9375rem; }
.missing-note a { color: var(--yellow); font-weight: 600; }
#subjects .missing-note { max-width: none; text-align: center; }

.topic-list { display: grid; gap: 10px; max-width: 860px; }
.topic-row {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center;
  padding: 18px 22px; border-radius: var(--radius-md);
  background: var(--navy-800); border: 1px solid var(--line); border-left: 4px solid var(--yellow);
  color: var(--ink); text-decoration: none;
}
.topic-row:hover { border-color: var(--yellow); }
.topic-row.is-soon { border-left-color: rgba(143, 168, 255, .35); }
.topic-row.is-soon .tr-title { color: var(--muted); }
.topic-row.is-soon:hover .tr-title { color: var(--ink); }
.tr-title { font: 600 1.125rem/1.3 var(--font-display); }
.tr-summary { grid-column: 1; font-size: .9375rem; color: var(--muted); }
.tr-by { grid-column: 2; grid-row: 1; font-size: .8125rem; color: var(--royal-300); text-align: right; }
.tr-soon { font-size: .8125rem; color: var(--muted); white-space: nowrap; }

/* Topic progress: a tick once the notes are read and the exam questions answered */
.topic-tick {
  display: inline-grid; place-items: center; width: 1.4em; height: 1.4em; margin-right: 10px;
  border-radius: 50%; background: var(--correct); color: var(--navy-900);
  font: 800 .8em/1 var(--font-body, sans-serif); vertical-align: .1em;
}
.topic-row.is-done { border-left-color: var(--correct); }
.sc-done { padding: 2px 9px; border-radius: 999px; background: rgba(61, 220, 151, .16); color: var(--correct); font-weight: 600; font-size: .8125rem; }
.topic-status {
  margin-top: 24px; padding: 14px 18px; border-radius: var(--radius-md);
  background: var(--navy-800); border: 1px solid var(--line); color: var(--muted);
}
.topic-status.is-done { border-color: var(--correct); color: var(--ink); }
.topic-status strong { color: var(--correct); }

.teacher-cta {
  max-width: 860px; margin-top: 32px; padding: 24px 26px;
  border-radius: var(--radius-lg); border: 2px dashed rgba(255, 201, 40, .5);
}
.teacher-cta h2 { font-size: 1.375rem; font-weight: 800; }
.teacher-cta p { margin-top: 8px; color: var(--muted); max-width: 56ch; }
.teacher-cta .btn { margin-top: 16px; }

.notes-soon { padding: 28px; border-radius: var(--radius-lg); background: var(--navy-800); border: 1px solid var(--line); }
.notes-soon h2 { font-size: 1.625rem; font-weight: 800; }
.notes-soon p { margin-top: 10px; color: var(--muted); }

/* Author credit at the bottom of each note */
.note-author {
  display: flex; align-items: center; gap: 16px;
  margin-top: 40px; padding: 20px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.note-author:empty { display: none; }
.author-avatar {
  flex: none; width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center;
  background: var(--yellow); color: var(--navy-900);
  font: 800 1.125rem var(--font-display);
}
.author-avatar.is-otter { width: 64px; height: 64px; background: var(--navy-700); border: 2px solid rgba(255, 201, 40, .55); overflow: hidden; }
.author-avatar.is-otter svg { width: 100%; height: 100%; }
.author-line { font-size: 1.0625rem; }
.author-line strong { font-weight: 600; }
.author-updated { margin-top: 2px; font-size: .875rem; color: var(--muted); }
.note-author.is-sample .author-line { font-size: .9375rem; color: var(--muted); }

/* Game mode pages -------------------------------------------------------- */

.game-section { padding-top: clamp(28px, 4vw, 44px); }
.field input:not([type="radio"]):not([type="checkbox"]) {
  width: 100%; padding: 11px 14px;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--navy-900); color: var(--ink);
  font: 400 1rem var(--font-body);
}
.field input::placeholder { color: #7D8BBF; }
.field input[type="date"] { color-scheme: dark; }

.setup-card {
  padding: clamp(22px, 3vw, 30px);
  border-radius: var(--radius-lg);
  background: var(--navy-800); border: 1px solid var(--line);
}
.setup-card h2 { font-size: 1.5rem; font-weight: 800; }
.setup-card > p { margin-top: 8px; color: var(--muted); }
.setup-fields { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; margin: 20px 0 24px; }
.setup-fields .field select { min-width: 240px; }
/* Number of questions slider (Solo Learn) */
.range-field { flex: 1 1 auto; min-width: min(100%, 260px); max-width: 420px; }
.range-field output { color: var(--yellow); font-weight: 800; font-size: 1rem; }
.range-row { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.range-step {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--navy-900); color: var(--ink);
  font: 700 1.25rem/1 var(--font-body); cursor: pointer;
}
.range-step:hover { border-color: var(--yellow); color: var(--yellow); }
.field .range-row input[type="range"] {
  flex: 1; min-width: 0; height: 8px; padding: 0; border: 0; border-radius: 999px;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background: linear-gradient(to right, var(--yellow) var(--fill, 10%), var(--navy-700) var(--fill, 10%));
}
.range-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--yellow); border: 3px solid var(--navy-900); box-shadow: 0 0 0 1px var(--yellow);
}
.range-row input[type="range"]::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--yellow); border: 3px solid var(--navy-900); box-shadow: 0 0 0 1px var(--yellow);
}
.range-row input[type="range"]:focus-visible { outline: 2px solid var(--yellow); outline-offset: 6px; }
/* Swim! game length: a minutes box between − and + */
.field .tl-minutes-row input[type="number"] { width: 5.5em; flex: none; text-align: center; font-weight: 700; -moz-appearance: textfield; }
.tl-minutes-row input[type="number"]::-webkit-inner-spin-button, .tl-minutes-row input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.setup-stack { flex-direction: column; align-items: stretch; }
.setup-stack .field select { min-width: 0; width: 100%; }
.setup-note { margin-top: 14px; font-size: .875rem; color: var(--muted); }
.form-msg { margin-top: 12px; font-size: .9375rem; color: var(--royal-300); min-height: 1.4em; }
.form-msg:empty { display: none; }
.form-msg.is-error { color: var(--wrong); }

.game-setup-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: stretch; }
.rank-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 24px; border-radius: var(--radius-lg);
  background: linear-gradient(170deg, var(--royal) 0%, var(--navy-700) 100%);
  border: 2px solid rgba(255, 201, 40, .55);
}
.rank-avatar { width: 96px; height: 96px; }
.rank-avatar svg { width: 100%; height: 100%; }
.rank-name { margin-top: 8px; font: 800 1.25rem var(--font-display); }
.rank-tier { color: var(--yellow); font-weight: 600; font-size: .9375rem; }
.rank-elo { margin-top: 10px; color: var(--soft-ink); }
.rank-elo strong { font: 800 1.75rem var(--font-display); color: var(--ink); }
.meter.rank-meter { width: 100%; margin-top: 10px; background: rgba(7, 18, 63, .55); }
.rank-next { margin-top: 6px; font-size: .8125rem; color: var(--soft-ink); }
.rank-card .link-btn { margin-top: 10px; color: var(--soft-ink); }

.match-root { margin-top: 28px; scroll-margin-top: 96px; }
.match-root:empty { display: none; }

/* The match itself reuses the homepage .arena styles */
.game-arena { max-width: 760px; margin-inline: auto; }
.game-avatar { flex: none; width: 52px; height: 52px; border-radius: 16px; overflow: hidden; background: rgba(7, 18, 63, .5); }
.game-avatar svg { width: 100%; height: 100%; }
.game-avatar.avatar-you { border: 2px solid var(--yellow); }
.game-avatar.avatar-rival { border: 2px solid var(--royal-300); }
.rival-flag { padding: 1px 8px; border-radius: 999px; background: var(--royal-300); color: var(--navy-900); font-size: .6875rem; font-weight: 600; }
.answer { display: flex; align-items: center; gap: 12px; }
.answer-key {
  flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 8px;
  background: rgba(143, 168, 255, .2); font-size: .8125rem;
}
.answer.is-correct .answer-key, .answer.is-wrong .answer-key { background: rgba(7, 18, 63, .2); }
.solo-progress {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 16px; font-size: .9375rem; color: var(--soft-ink);
}
.solo-progress strong { font: 800 1.5rem var(--font-display); color: var(--yellow); }

.game-end { margin-top: 18px; padding: 22px; border-radius: var(--radius-md); background: rgba(7, 18, 63, .55); }
.game-end h3 { font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 800; }
.game-end > p { margin-top: 6px; color: var(--soft-ink); }
.game-end-note { font-size: .875rem; }
.game-review { display: grid; gap: 8px; margin-top: 18px; }
.game-review li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-sm); background: rgba(13, 29, 92, .7); font-size: .9375rem; color: var(--soft-ink); }
.game-review strong { color: var(--ink); font-weight: 600; }
.review-mark { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-weight: 800; font-size: .8125rem; color: var(--navy-900); }
.game-review .is-right .review-mark { background: var(--correct); }
.game-review .is-wrong .review-mark { background: var(--wrong); }
/* "Your answers" at the end of Swim!, Yellow Submarine and Knockout */
.answer-review { margin-top: 16px; text-align: left; }
.answer-review summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.answer-review .ar-right { color: var(--correct); }
.answer-review .ar-wrong { color: var(--wrong); }
.answer-review .game-review { margin-top: 10px; max-height: min(40vh, 360px); overflow-y: auto; padding-right: 4px; }
.game-end-actions { margin-top: 20px; }

/* Matchmaking */
.matchmaking {
  max-width: 560px; margin-inline: auto; padding: 36px 28px; text-align: center;
  border-radius: var(--radius-lg); background: var(--navy-800); border: 2px solid rgba(255, 201, 40, .45);
}
.mm-ripple { position: relative; width: 140px; height: 140px; margin: 0 auto 18px; display: grid; place-items: center; }
.mm-ripple > span {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--royal-300); opacity: 0;
  animation: ripple 2.4s ease-out infinite;
}
.mm-ripple > span:nth-child(2) { animation-delay: .8s; }
.mm-ripple > span:nth-child(3) { animation-delay: 1.6s; }
.matchmaking.is-done .mm-ripple > span { animation: none; }
.mm-otter { width: 84px; height: 84px; border-radius: 26px; overflow: hidden; background: var(--navy-700); position: relative; }
.mm-otter svg { width: 100%; height: 100%; }
@keyframes ripple {
  0% { transform: scale(.55); opacity: .9; }
  100% { transform: scale(1.15); opacity: 0; }
}
.matchmaking h2 { font-size: 1.625rem; font-weight: 800; }
.matchmaking p { margin-top: 8px; color: var(--muted); }
.mm-time { font: 600 1.25rem var(--font-display); color: var(--yellow) !important; font-variant-numeric: tabular-nums; }
/* Classic Battle against people (solo.html): the friend-code box and the "you're playing" screen */
.friend-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.friend-make, .friend-join { display: grid; gap: 12px; align-content: start; padding: 18px; border-radius: var(--radius-md); background: var(--navy-900); border: 1px solid var(--line); }
.friend-make p { color: var(--soft-ink); }
.friend-join input { text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }
.duel-code .lobby-code { margin: 4px 0 6px; }
.duel-vs { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 14px; }
.duel-vs .mm-otter { width: 96px; height: 96px; }
.duel-vs .versus { font: 800 1.5rem var(--font-display); color: var(--yellow); }
@media (max-width: 700px) { .friend-box { grid-template-columns: 1fr; } }
/* Classic Battle rooms (up to 40 players): the room before it starts, and the live leaderboard */
.battle-room .lobby-player span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby-remove {
  flex: none; margin-left: auto; width: 26px; height: 26px; border: 0; border-radius: 8px;
  background: transparent; color: var(--muted); font: 600 1.125rem/1 inherit; cursor: pointer;
}
.lobby-remove:hover, .lobby-remove:focus-visible { background: var(--navy-700); color: var(--ink); }
.arena-players.arena-group { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.group-board { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: .875rem; }
.group-board li {
  display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 4px 10px; border-radius: var(--radius-sm); background: var(--navy-900);
}
.group-board li.is-me { box-shadow: inset 0 0 0 2px var(--yellow); }
.gb-rank { font-weight: 800; color: var(--yellow); font-variant-numeric: tabular-nums; }
.gb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.gb-points { font-variant-numeric: tabular-nums; color: var(--soft-ink); }
.group-final { max-width: 420px; margin: 16px auto 4px; max-height: min(40vh, 360px); overflow-y: auto; text-align: left; }
@media (max-width: 700px) { .arena-players.arena-group { grid-template-columns: 1fr; } }
.matchmaking.is-done .mm-time { display: none; }
.matchmaking.is-done .mm-time.is-shown { display: block; }   /* countdowns: "Starting in 3…" */
.matchmaking .hero-ctas { justify-content: center; margin-top: 20px; }

/* Solo Learn */
.step-title { display: flex; align-items: center; gap: 12px; margin: 8px 0 16px; font-size: 1.5rem; font-weight: 800; }
.step-title .step-num { width: 36px; height: 36px; border-radius: 11px; font-size: 1.125rem; }
.step-title ~ .step-title { margin-top: 36px; }
.mode-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mode-option {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 22px; border-radius: var(--radius-md); text-align: left;
  background: var(--navy-800); border: 2px solid var(--line); color: var(--ink);
  font: inherit; cursor: pointer;
}
.mode-option:hover:not(:disabled) { border-color: var(--royal-300); }
.mode-option.is-selected { border-color: var(--yellow); background: linear-gradient(160deg, var(--royal) 0%, var(--navy-700) 100%); }
.mode-option:disabled { cursor: default; opacity: .65; }
.mode-option-name { font: 800 1.25rem var(--font-display); }
.mode-option-desc { font-size: .9375rem; color: var(--muted); }
.mode-option.is-selected .mode-option-desc { color: var(--soft-ink); }
.soon-tag { margin-top: 6px; padding: 2px 10px; border-radius: 999px; background: rgba(143, 168, 255, .16); color: var(--royal-300); font-size: .75rem; font-weight: 600; }
.setup-wide .setup-fields { margin-top: 0; }

/* Host a Lobby */
.host-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; }
.join-card form, .join-card .field { margin-top: 16px; }
.join-card .btn { margin-top: 16px; }
.code-input { font: 600 1.375rem var(--font-display) !important; letter-spacing: .12em; text-align: center; }
.code-input-lg { font-size: 2rem !important; padding: 14px !important; text-transform: uppercase; }

.lobby-room {
  padding: clamp(22px, 3vw, 32px); border-radius: var(--radius-lg);
  background: var(--navy-800); border: 2px solid rgba(255, 201, 40, .5);
}
.lobby-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; align-items: end; }
.lobby-code-xl { font-size: clamp(3rem, 9vw, 5rem) !important; line-height: 1; margin-top: 8px; }
.lobby-info { text-align: right; color: var(--muted); }
.lobby-info strong { color: var(--ink); font-size: 1.125rem; }
.lobby-bar, .lobby-started {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px;
  margin-top: 24px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.lobby-bar strong { font: 800 1.5rem var(--font-display); color: var(--yellow); }
.lobby-started { display: block; }
.lobby-started h2 { font-size: 1.5rem; font-weight: 800; }
.lobby-started p { margin-top: 8px; color: var(--muted); max-width: 64ch; }
.lobby-started .btn { margin-top: 14px; }
.lobby-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-top: 20px; }
.lobby-player {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px;
  border-radius: var(--radius-sm); background: var(--navy-900); font-weight: 600; font-size: .9375rem;
  animation: pop-in .35s cubic-bezier(.2, .8, .2, 1);
}
.lobby-avatar { flex: none; width: 36px; height: 36px; border-radius: 11px; overflow: hidden; background: var(--navy-700); }
.lobby-avatar svg { width: 100%; height: 100%; }
@keyframes pop-in { from { transform: scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
.lobby-wait { margin-top: 20px; color: var(--muted); }
.demo-note { margin-top: 20px; font-size: .8125rem; color: var(--muted); }

.lobby-player.is-real, .lobby-player.is-me { box-shadow: inset 0 0 0 2px var(--yellow); }
.real-tag { margin-left: auto; padding: 1px 8px; border-radius: 999px; background: var(--yellow); color: var(--navy-900); font-size: .6875rem; font-weight: 600; }

/* Join a game */
.join-room {
  max-width: 720px; margin: 0 auto; padding: clamp(22px, 3vw, 32px);
  border-radius: var(--radius-lg); background: var(--navy-800); border: 2px solid rgba(255, 201, 40, .5);
}
.join-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.join-mode { color: var(--muted); }
.join-mode strong { color: var(--ink); }
.join-me { display: flex; align-items: center; gap: 20px; margin-top: 24px; }
.join-avatar { flex: none; width: 104px; height: 104px; border-radius: 28px; overflow: hidden; background: var(--navy-700); border: 2px solid var(--yellow); }
.join-avatar svg { width: 100%; height: 100%; }
.join-label { font-size: .875rem; color: var(--muted); }
.join-name { font: 800 clamp(1.75rem, 5vw, 2.5rem)/1.1 var(--font-display); color: var(--yellow); margin: 2px 0 6px; overflow-wrap: anywhere; }
.join-room .hero-ctas { margin-top: 22px; }
.join-status { margin-top: 22px; padding: 20px; border-radius: var(--radius-md); background: linear-gradient(160deg, var(--royal) 0%, var(--navy-700) 100%); }
.join-status h2 { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 800; }
.join-status p { margin-top: 6px; color: var(--soft-ink); }
.join-count { margin-top: 20px; color: var(--muted); }
.join-count strong { font: 800 1.25rem var(--font-display); color: var(--yellow); }

/* Revision homework */
.code-card { max-width: 520px; margin-inline: auto; text-align: center; }
.code-card .field { margin-top: 18px; }
.code-card .btn { margin-top: 16px; width: 100%; }
.hw-intro {
  max-width: 620px; margin: 24px auto 0; padding: 28px; text-align: center;
  border-radius: var(--radius-lg); background: linear-gradient(170deg, var(--royal) 0%, var(--navy-700) 100%);
  border: 2px solid rgba(255, 201, 40, .55);
}
.hw-code-tag { display: inline-block; padding: 3px 12px; border-radius: 999px; background: rgba(7, 18, 63, .5); font-size: .8125rem; letter-spacing: .06em; }
.hw-intro h2 { margin-top: 12px; font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 800; }
.hw-meta { margin-top: 6px; color: var(--soft-ink); }
.hw-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 22px; }
.hw-facts li { padding: 6px 14px; border-radius: 999px; background: rgba(7, 18, 63, .45); font-size: .9375rem; }
.hw-facts .is-late { background: rgba(255, 122, 122, .25); }

.builder { display: grid; gap: 24px; }
.builder-details { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.builder-add { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.builder-panel {
  margin: 0; padding: 22px; border-radius: var(--radius-lg);
  background: var(--navy-900); border: 1px solid var(--line);
}
.builder-panel legend { padding: 0 6px; font: 800 1.125rem var(--font-display); }
.builder-panel .setup-fields { margin: 8px 0 18px; }
.builder-panel > .field { margin-top: 8px; }
.field-hint { margin-top: 14px; font-size: .875rem; color: var(--muted); }
.own-options { display: grid; gap: 8px; margin-bottom: 16px; }
.own-opt { display: flex; align-items: center; gap: 10px; }
.own-opt input[type="radio"] { width: 18px; height: 18px; accent-color: var(--yellow); flex: none; }
.own-text {
  flex: 1; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--navy-800); color: var(--ink); font: 400 .9688rem var(--font-body);
}
.builder-list h3, .hw-mine h3 { font: 600 1.25rem var(--font-display); }
.hw-questions { display: grid; gap: 8px; margin-top: 12px; counter-reset: hwq; }
.hw-questions li {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 12px 16px; border-radius: var(--radius-sm); background: var(--navy-900);
}
.hwq-text { font-weight: 600; }
.hwq-answer { font-size: .875rem; color: var(--correct); }
.hwq-answer span { color: var(--muted); }
.hwq-empty { color: var(--muted); background: none !important; padding: 0 !important; }
.builder > .btn { justify-self: start; }
.hw-created {
  margin-top: 28px; padding: 28px; text-align: center;
  border-radius: var(--radius-lg); background: var(--navy-900); border: 2px solid var(--correct);
}
.hw-created p:not(.lobby-code) { margin-top: 8px; color: var(--muted); }
.hw-created .hero-ctas { justify-content: center; }
.hw-mine { margin-top: 40px; }
.hw-mine-list { display: grid; gap: 8px; margin-top: 12px; }
.hw-mine-list li { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--navy-900); }
.hw-mine-code { font: 800 1.25rem var(--font-display); color: var(--yellow); letter-spacing: .08em; min-width: 92px; }
.hw-mine-info { flex: 1; font-size: .9375rem; color: var(--muted); }
.hw-mine-info strong { color: var(--ink); }
.hw-mine-actions { display: flex; gap: 14px; }

/* Catch phrase banners: rounded bar, squiggle pattern, outlined lettering */

.otter-banner {
  --outline: #07123F;
  display: inline-block; max-width: 100%; min-width: 11em;
  padding: 9px 22px; border-radius: 12px;
  color: #FFFFFF; text-align: center;
  font: 800 .9375rem/1.2 var(--font-display); letter-spacing: .01em;
  text-shadow:
    -1.5px -1.5px 0 var(--outline), 1.5px -1.5px 0 var(--outline),
    -1.5px 1.5px 0 var(--outline), 1.5px 1.5px 0 var(--outline),
    0 2.5px 0 var(--outline);
  box-shadow: inset 0 -4px 0 rgba(7, 18, 63, .18), 0 3px 0 rgba(7, 18, 63, .35);
  overflow-wrap: anywhere;
}
.otter-banner.is-lg { min-width: 13em; padding: 16px 30px; border-radius: 16px; font-size: 1.1875rem; }
.otter-banner.is-sm { min-width: 0; padding: 5px 12px; border-radius: 8px; font-size: .75rem; box-shadow: inset 0 -3px 0 rgba(7, 18, 63, .18); }
.otter-banner.is-sm { background-size: 38px 15px, auto !important; background-position: -3px 0, 0 0 !important; }

/* Accounts --------------------------------------------------------------- */

.account-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 14px 4px 4px; border-radius: 999px;
  background: var(--navy-800); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.account-chip:hover { border-color: var(--yellow); }
.account-chip-otter { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--navy-700); flex: none; }
.account-chip-otter svg { width: 100%; height: 100%; }
.account-chip-name { font-weight: 600; font-size: .9375rem; }
.account-wrap { position: relative; display: flex; flex-direction: column; align-items: center; }
.shell-ico { width: 13px; height: 13px; flex: none; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2c-4.9 0-8.8 3.8-8.8 8.6 0 1.6.5 3.1 1.3 4.3L12 20.8l7.5-4.7c.8-1.2 1.3-2.7 1.3-4.3 0-4.8-3.9-8.6-8.8-8.6z' fill='%23FFC928'/%3E%3Cpath d='M12 6.2v13.2M8.3 7.4l2.4 11.3M15.7 7.4l-2.4 11.3M5.4 10.3l5 8.4M18.6 10.3l-5 8.4' fill='none' stroke='%23C98A00' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.account-chip-plan { padding: 2px 8px; border-radius: 999px; background: rgba(143, 168, 255, .16); color: var(--royal-300); font-size: .6875rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.account-chip-plan.is-plus { background: var(--yellow); color: var(--navy-900); }
/* The profile button's menu: Settings, Classes (or Teach) and Log out (js/account.js) */
.account-area { position: relative; }
.account-chip { cursor: pointer; font: inherit; }
.account-caret { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; margin-left: -2px; }
.account-chip[aria-expanded="true"] { border-color: var(--yellow); }
.account-chip[aria-expanded="true"] .account-caret { transform: rotate(180deg); }
.account-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 200px;
  display: grid; gap: 2px; padding: 6px; border-radius: var(--radius-md);
  background: var(--navy-800); border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.account-menu a, .account-menu button {
  display: block; width: 100%; padding: 10px 14px; border: 0; border-radius: var(--radius-sm); background: none;
  color: var(--ink); font: 600 .9375rem var(--font-body); text-align: left; text-decoration: none; cursor: pointer;
}
.account-menu a:hover, .account-menu button:hover, .account-menu a:focus-visible, .account-menu button:focus-visible { background: var(--navy-700); }
.account-menu [data-logout] { color: #FF9AA8; }
.account-menu .account-menu-admin { color: #3DDC84; }   /* only admins see it */
html[data-theme="light"] .account-menu .account-menu-admin, html[data-theme="easter"] .account-menu .account-menu-admin,
html[data-theme="christmas"] .account-menu .account-menu-admin { color: #138A4B; }
.account-menu-rule { margin: 4px 6px; border: 0; border-top: 1px solid var(--line); }
/* Classes (or Teach) stands out: bold yellow with a soft glow that gently pulses */
.nav-classes a, .account-menu .account-menu-classes {
  font-weight: 800 !important; color: var(--yellow) !important;
  text-shadow: 0 0 10px rgba(255, 201, 40, .55), 0 0 22px rgba(255, 201, 40, .3);
}
@media (prefers-reduced-motion: no-preference) {
  .nav-classes a, .account-menu .account-menu-classes { animation: classes-glow 2.4s ease-in-out infinite; }
}
@keyframes classes-glow {
  0%, 100% { text-shadow: 0 0 8px rgba(255, 201, 40, .45), 0 0 18px rgba(255, 201, 40, .2); }
  50% { text-shadow: 0 0 14px rgba(255, 201, 40, .8), 0 0 30px rgba(255, 201, 40, .45); }
}
/* Classes (or Teach): in the profile menu on desktop; in the main menu after Study tools on phones and tablets */
.nav-classes { display: none; }
@media (max-width: 1240px) {
  .nav-classes { display: list-item; }
  .account-menu .account-menu-classes { display: none; }
}

.auth-hero { padding-bottom: 8px; }
.auth-section { padding-top: 24px; }
.auth-card {
  display: grid; gap: 6px;
  max-width: 520px; margin-inline: auto; padding: clamp(22px, 4vw, 34px);
  border-radius: var(--radius-lg); background: var(--navy-800); border: 1px solid var(--line);
}
.auth-card > .field { margin-top: 12px; }
.auth-card > .btn { margin-top: 18px; }
.auth-card h2 { font-size: 1.5rem; font-weight: 800; }
.auth-card > p { color: var(--muted); }
.field-help { font-size: .8125rem; color: var(--muted); }
.field-status { font-size: .875rem; min-height: 1.3em; }
.field-status.is-ok, .form-msg.is-ok { color: var(--correct); }
.field-status.is-error { color: var(--wrong); }
.check { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; font-size: .9375rem; color: var(--muted); cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--yellow); flex: none; }
.dob { margin: 12px 0 0; padding: 0; border: 0; }
.dob legend { padding: 0; margin-bottom: 6px; font-size: .875rem; color: var(--muted); }
.dob-row { display: grid; grid-template-columns: .8fr 1.5fr 1fr; gap: 10px; }
.dob .field select { min-width: 0; width: 100%; }
.under13 {
  margin-top: 14px; padding: 16px 18px; border-radius: var(--radius-md);
  background: rgba(255, 201, 40, .1); border: 2px solid rgba(255, 201, 40, .5);
}
.under13 h2 { font-size: 1.125rem; color: var(--yellow); }
.under13 p { margin-top: 6px; font-size: .9375rem; }
.auth-alt { text-align: center; font-size: .9375rem; margin-top: 6px; }
.auth-done .btn { justify-self: start; margin-top: 12px; }
.auth-demo {
  margin-bottom: 8px; padding: 14px 16px; border-radius: var(--radius-sm);
  background: rgba(143, 168, 255, .12); border-left: 4px solid var(--royal-300);
  font-size: .9375rem; color: var(--ink) !important;
}
.auth-demo-wide { max-width: 720px; }
#verify-box { text-align: center; }
.verify-otter { display: block; width: 200px; margin: 0 auto 16px; }
.verify-otter svg { width: 100%; height: auto; }
.verify-ctas { justify-content: center; margin-top: 20px; }

.account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.account-card { padding: 26px; border-radius: var(--radius-lg); background: var(--navy-800); border: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
.account-card h2 { font-size: 1.375rem; font-weight: 800; }
.account-card > p { color: var(--muted); }
.account-card .btn { justify-self: start; }
.account-hero { grid-column: 1 / -1; display: flex; align-items: center; gap: 28px; background: linear-gradient(160deg, var(--royal) 0%, var(--navy-700) 100%); border: 2px solid rgba(255, 201, 40, .55); }
.account-hero h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
.account-hero .btn { margin-top: 12px; }
.account-otter { width: 180px; flex: none; }
.account-otter svg { width: 100%; height: auto; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stats div, .details div { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--navy-900); }
.stats dt, .details dt { font-size: .8125rem; color: var(--muted); }
.stats dd { margin: 2px 0 0; font: 800 1.5rem var(--font-display); color: var(--yellow); }
.details { display: grid; gap: 8px; }
.details dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.live-note { margin-top: 10px; font-size: .875rem; color: var(--muted); }
.report-btn { margin-left: 8px; font-size: .75rem; }

/* Responsive ------------------------------------------------------------- */

@media (max-width: 1240px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none; flex-direction: column; align-items: stretch; gap: 16px;
    padding: 16px var(--gutter) 24px;
    background: var(--navy-900); border-bottom: 1px solid var(--line);
  }
  .site-nav.is-open { display: flex; }
  .site-nav ul { flex-direction: column; }
  .site-nav ul a { padding: 12px; font-size: 1.0625rem; }
  .nav-actions .btn { flex: 1; }
}

@media (max-width: 960px) {
  .hero-grid,
  .teachers-grid,
  .faq-wrap { grid-template-columns: 1fr; }
  .hero h1 { max-width: 12ch; }
  .arena { max-width: 560px; }
  .bento { grid-template-columns: 1fr 1fr; }
  .mode-arena { grid-template-columns: 1fr; }
  .mode-art { display: none; }
  .plans { grid-template-columns: 1fr; max-width: 480px; }
  .plan-featured { transform: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  .steps { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .stage-tabs { width: 100%; }
  .stage-tab { flex: 1; padding-inline: 8px; }
  .board-select, .board-select select { width: 100%; }
}

@media (max-width: 420px) {
  .answers { grid-template-columns: 1fr; }
  .arena { padding: 16px; }
  .player-elo { font-size: .75rem; }
  .avatar { width: 36px; height: 36px; border-radius: 11px; }
  .hero-ctas .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Leaderboard and shop at smaller sizes */
@media (max-width: 900px) {
  .shop-grid { grid-template-columns: 1fr; }
  .preview { position: static; max-width: 420px; width: 100%; margin-inline: auto; }
}

@media (max-width: 680px) {
  .lb-controls { flex-direction: column; align-items: stretch; }
  .seg { display: flex; }
  .seg-btn { flex: 1; padding-inline: 8px; }
  .lb-filters { display: grid; grid-template-columns: 1fr 1fr; }
  .field select { min-width: 0; width: 100%; }
  .col-tier { display: none; }
  .lb-table th, .lb-table td { padding-inline: 10px; }
  .lb-table { table-layout: fixed; }
  .lb-table th:nth-child(1) { width: 44px; }
  .lb-table th:nth-child(4) { width: 76px; }
  .lb-table th:nth-child(5) { width: 52px; }
  .lb-avatar { display: none; }
  .you-bar .lb-avatar { display: block; }
  #change-head { font-size: 0; }
  #change-head::after { content: "+/-"; font-size: .8125rem; }
  .lb-avatar { width: 36px; height: 36px; border-radius: 11px; }
  .you-rank { min-width: 0; font-size: 1.25rem; }
  .you-cta { display: none; }
  .items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .item-buy { flex-direction: column; }
  .shop-hero { align-items: stretch; flex-direction: column; }
  .balance { border-radius: var(--radius-md); }
}

/* Study tools at smaller sizes */
@media (max-width: 1240px) {
  .nav-drop-btn { width: 100%; padding: 12px; font-size: 1.0625rem; justify-content: space-between; }
  .nav-drop-panel {
    position: static; transform: none; width: auto;
    margin: 4px 0 8px 12px; padding: 0;
    background: none; border: 0; box-shadow: none;
  }
}

@media (max-width: 960px) {
  .tools { grid-template-columns: 1fr; }
  .notes-grid, .fc-grid { grid-template-columns: 1fr; }
  .notes-side { position: static; }
}

@media (max-width: 680px) {
  .study-bar { flex-direction: column; align-items: stretch; }
  .topic-field select { min-width: 0; width: 100%; }
  .fc-picker { min-width: 0; width: 100%; }
  .tool-switch { display: flex; }
  .tool-switch .seg-btn { flex: 1; padding-inline: 6px; font-size: .875rem; text-align: center; }
  .flashcard { aspect-ratio: 4 / 5; max-height: 420px; }
  .fc-face { padding: 24px; }
  .q-score-bar { top: 76px; padding: 12px 16px; }
  .q-score span { display: block; margin-left: 0; }
  .q-card { padding: 20px; }
}

/* Notes library at smaller sizes */
@media (max-width: 680px) {
  .library-bar { flex-direction: column; align-items: stretch; }
  .library-bar .seg { display: flex; }
  .library-bar .seg-btn { flex: 1; }
  .search-field input { width: 100%; }
  .subject-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .subject-card { padding: 14px 16px; }
  .sc-name { font-size: 1.0625rem; }
  .topic-row { grid-template-columns: 1fr; padding: 16px 18px; }
  .tr-by { grid-column: 1; grid-row: auto; text-align: left; }
}

/* Contact at smaller sizes */
@media (max-width: 960px) {
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .contact-cards { grid-template-columns: 1fr; }
}

/* Game mode pages at smaller sizes */
@media (max-width: 960px) {
  .game-setup-grid, .host-grid, .builder-add { grid-template-columns: 1fr; }
  .mode-picker { grid-template-columns: 1fr; }
  .builder-details { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .setup-fields { flex-direction: column; align-items: stretch; }
  .setup-fields .seg { display: flex; }
  .setup-fields .seg-btn { flex: 1; }
  .setup-fields .field select { min-width: 0; width: 100%; }
  .setup-card > .btn-lg { width: 100%; }
  .builder-details { grid-template-columns: 1fr; }
  .lobby-info { text-align: left; }
  .hw-mine-list li { flex-wrap: wrap; }
  .game-avatar { width: 40px; height: 40px; border-radius: 12px; }
}

/* Accounts at smaller sizes */
@media (max-width: 760px) {
  .account-grid { grid-template-columns: 1fr; }
  .account-hero { flex-direction: column; text-align: center; }
  .account-hero .btn { justify-self: center; }
}
@media (max-width: 1240px) {
  /* Open menu on phones and tablets: account (or Log in / Start free) first, just under the menu button */
  .site-nav .nav-actions { order: -1; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
  /* The account pill hugs the otter, name and plan (and grows with longer names), on its own row */
  .site-nav .nav-actions .account-area { flex-basis: 100%; }
  .site-nav .nav-actions .account-wrap { align-items: flex-start; }
  .site-nav .nav-actions .account-chip { max-width: 100%; }
  .site-nav .nav-actions .account-chip-name { overflow: hidden; text-overflow: ellipsis; }
  .site-nav .nav-actions .account-wrap { margin-bottom: 4px; }
  .site-nav .nav-actions .account-menu { position: static; margin-top: 4px; box-shadow: none; }
}

/* Live leaderboard states */
.lb-empty { padding: 28px 18px !important; text-align: center; color: var(--muted); }
.podium-spot.is-open .podium-name, .podium-spot.is-open .podium-xp { color: var(--muted); }
.podium-open { border: 2px dashed rgba(143, 168, 255, .4); border-radius: 50%; }
.you-inner .btn-ghost { margin-left: auto; }
.you-inner .btn-ghost + .btn-yellow { margin-left: 0; }

/* Logged-in header: keep everything on one line */
.site-nav { gap: 16px; }
@media (max-width: 1440px) {
  .site-nav ul a, .nav-drop-btn { padding-inline: 10px; }
}
@media (min-width: 1241px) {
  .brand { flex: none; }
}

/* Banners in the shop */
.banner-thumb { display: grid; place-items: center; width: 100%; height: 100%; padding: 10px; }
.preview-art { position: relative; }
/* The banner sits under the otter and its splash, not over them */
.preview-banner { display: flex; justify-content: center; margin-top: 10px; padding: 0 8px; }
.preview-banner:empty { display: none; }

/* Banners on the podium and account page */
.podium-banner { margin: 6px 0 2px; max-width: 100%; }
.podium-banner .otter-banner { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.account-hero .profile-banner { margin: 10px 0 4px; }
.otter-banner.is-sm {
  text-shadow: -1px -1px 0 var(--outline), 1px -1px 0 var(--outline), -1px 1px 0 var(--outline), 1px 1px 0 var(--outline);
}

/* Desktop header: menu sits a short way after the logo; Log in / Start free stay on the right */
@media (min-width: 1241px) {
  .site-nav { flex: 1; margin-left: 24px; }
  .nav-actions { margin-left: auto; }
}

/* Ranked Revision panel: crossed swords emoji */
.mode-art .mode-emoji { width: 100%; max-width: 220px; height: auto; margin-inline: auto; filter: drop-shadow(0 10px 18px rgba(3, 8, 30, .45)); }

/* Header brand name: the whiskered "O" logo stands in for the first letter */
.brand-o {
  display: inline-block;
  height: 0.86em; width: auto;     /* the O is 70% of the image's width, so this matches a typed O (0.61em wide) */
  margin: 0 -0.1em;                /* same spacing as the typed O; whiskers reach into the gaps */
  vertical-align: -0.075em;        /* bottom of the O (68/800 up from the image edge) sits on the baseline */
}

/* Header wordmark: no tile, just a larger "Ottered" with the whiskered O */
.site-header .brand-name { font-size: 2.125rem; }
/* The header logo: the vector wordmark (assets/ottered-wordmark.svg), sized like the old 34px text
   (the file is 0.807em tall at that size: tuft of the O to the baseline of "ttered", plus a little room) */
.brand-logo { display: block; height: calc(2.125rem * .807); width: auto; }
.site-footer .footer-logo { height: calc(1.5rem * .807); }   /* the footer's 24px "Ottered", next to the O tile */
@media (max-width: 680px) {
  .site-header .brand-name { font-size: 1.75rem; }
  .brand-logo { height: calc(1.75rem * .807); }
}

/* All game modes page and the individual game mode pages */
.mode-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.mode-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; height: 100%;
  padding: 20px; border-radius: var(--radius-md);
  background: var(--navy-800); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.mode-card:hover { border-color: var(--yellow); background: #12256B; }
.mode-card-ready { border: 2px solid rgba(255, 201, 40, .6); background: linear-gradient(160deg, var(--royal) 0%, var(--navy-700) 100%); }
.mode-card-name { font: 800 1.25rem/1.2 var(--font-display); }
.mode-tile {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px;
  color: #FFFFFF; font: 800 1.75rem/1 var(--font-display);
  text-shadow: 0 2px 0 rgba(7, 18, 63, .35);
  box-shadow: inset 0 -4px 0 rgba(7, 18, 63, .18);
}
.mode-tile-lg { width: 120px; height: 120px; border-radius: 32px; font-size: 3.75rem; flex: none; }
.ready-tag { margin-top: 6px; padding: 2px 10px; border-radius: 999px; background: var(--yellow); color: var(--navy-900); font-size: .75rem; font-weight: 600; }
.mode-card .soon-tag { margin-top: 6px; }
/* A mode card with a picture instead of a letter tile */
.mode-card-art { padding: 12px 12px 18px; }
.mode-thumb { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 12px; margin-bottom: 4px; }
.mode-card-art .mode-card-name, .mode-card-art .mode-card-desc, .mode-card-art .ready-tag { margin-inline: 6px; }
/* 1v1 Ranked Revision has no picture, so its thumbnail is a trophy drawn in CSS */
.mode-thumb-ranked {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: radial-gradient(circle at 50% 40%, var(--royal) 0%, var(--navy-900) 75%);
  color: var(--yellow); font: 800 2.5rem/1 var(--font-display);
}
.mode-thumb-ranked svg { width: 56px; height: 56px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mode-card-desc { font-size: .875rem; color: var(--muted); line-height: 1.4; }

.mode-ways-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 32px; }
.mode-way {
  display: grid; gap: 4px; padding: 18px 20px; border-radius: var(--radius-md);
  background: var(--navy-900); border: 1px solid var(--line); color: var(--ink); text-decoration: none;
}
.mode-way:hover { border-color: var(--royal-300); }
.mode-way span { font-size: .9375rem; color: var(--muted); }

.mode-page { max-width: 860px; }
.mode-soon {
  display: flex; align-items: flex-start; gap: 28px;
  padding: clamp(24px, 4vw, 36px); border-radius: var(--radius-lg);
  background: var(--navy-800); border: 1px solid var(--line);
}
.mode-soon h2 { margin-top: 12px; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; }
.mode-soon > div > p { margin-top: 10px; color: var(--muted); max-width: 56ch; }
.mode-ways { display: grid; gap: 8px; margin-top: 18px; }
.mode-ways li { color: var(--muted); }
.mode-ways strong { color: var(--ink); }
.mode-soon .hero-ctas { margin-top: 24px; }
.game-root:empty { display: none; }

@media (max-width: 680px) {
  .mode-ways-row { grid-template-columns: 1fr; }
  .mode-soon { flex-direction: column; }
  .mode-tile-lg { width: 88px; height: 88px; border-radius: 24px; font-size: 2.75rem; }
}

/* Otter Plus line in "How to earn shells" */
.earn-list .earn-plus { border: 2px solid rgba(255, 201, 40, .55); background: linear-gradient(160deg, var(--royal) 0%, var(--navy-700) 100%); color: var(--soft-ink); }

/* Homepage subjects: on phones, fold the list behind a dropdown button */
.subjects-toggle { display: none; }
@media (max-width: 680px) {
  .subjects-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; padding: 14px 18px; margin-bottom: 12px;
    border-radius: var(--radius-md); border: 1px solid var(--line);
    background: var(--navy-800); color: var(--ink);
    font: 600 1.0625rem var(--font-body); cursor: pointer;
  }
  .subjects-toggle svg { width: 14px; height: 10px; fill: none; stroke: var(--yellow); stroke-width: 2; transition: transform .2s ease; }
  .subjects-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .subject-grid { display: none; }
  .subject-grid.is-open { display: grid; gap: 10px; }
  .subject-grid.is-open .subject { padding: 14px 16px; }
}

/* Settings page ---------------------------------------------------------- */
.settings-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.settings-nav { position: sticky; top: 96px; display: grid; gap: 4px; }
.settings-nav a {
  padding: 10px 14px; border-radius: var(--radius-sm);
  color: var(--muted); text-decoration: none; font-weight: 500;
}
.settings-nav a:hover { color: var(--ink); background: rgba(143, 168, 255, .1); }
.settings-body { display: grid; gap: 18px; min-width: 0; }
.settings-card {
  padding: clamp(22px, 3vw, 30px); border-radius: var(--radius-lg);
  background: var(--navy-800); border: 1px solid var(--line);
  scroll-margin-top: 12px;   /* on top of the page's own allowance for the header */
}
.settings-card > h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: 14px; }
.settings-card > p { color: var(--muted); }
.settings-signin { color: var(--muted); }

.profile-row { display: flex; align-items: center; gap: 24px; }
.settings-otter { width: 170px; flex: none; border-radius: var(--radius-md); background: var(--navy-700); overflow: hidden; }
.settings-otter svg { width: 100%; height: auto; display: block; }
.settings-name { font: 800 clamp(1.5rem, 3vw, 2rem)/1.1 var(--font-display); overflow-wrap: anywhere; }
.settings-stats { margin-top: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.settings-stats dd { font-size: 1.25rem; }
/* Second row: Answered Correctly and Incorrectly under Shells and XP; Games played and
   Questions answered under Items owned and Joined. */
#set-profile .settings-stats div:nth-child(5) { grid-area: 2 / 3; }
#set-profile .settings-stats div:nth-child(6) { grid-area: 2 / 4; }
#set-profile .settings-stats div:nth-child(7) { grid-area: 2 / 1; }
#set-profile .settings-stats div:nth-child(8) { grid-area: 2 / 2; }
#set-profile .settings-stats div:nth-child(7) dd { color: var(--correct); }
#set-profile .settings-stats div:nth-child(8) dd { color: var(--wrong); }
#set-profile .settings-stats .stat-streak { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: linear-gradient(90deg, rgba(255, 159, 67, .16), rgba(7, 18, 63, .55)); border: 1px solid rgba(255, 159, 67, .4); }
#set-profile .settings-stats .stat-streak dd { display: flex; align-items: center; gap: 8px; margin: 0; color: #FF9F43; }
.stat-flame { width: 22px; height: 22px; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.5 2c.8 3.6 5.5 5.3 5.5 10.4A6 6 0 0 1 6 12.6c0-2.3 1.2-4 2.4-5 0 2.2 1 3.4 2.2 3.4 0-3.3-.8-5.6 1.9-9z' fill='%23FF9F43'/%3E%3Cpath d='M12 21a3.4 3.4 0 0 1-3.4-3.4c0-1.6 1-2.6 1.9-3.3.2 1.2.9 1.9 1.6 1.9.1-1.6.3-2.8 1.7-4 .5 2.1 2.2 3.1 2.2 5.4A3.6 3.6 0 0 1 12 21z' fill='%23FFC928'/%3E%3C/svg%3E"); }

.plan-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.plan-badge { padding: 4px 12px; border-radius: 999px; background: rgba(143, 168, 255, .16); color: var(--royal-300); font-weight: 600; font-size: .875rem; }
.plan-badge.is-plus { background: var(--yellow); color: var(--navy-900); }
#set-membership .ticks { margin: 14px 0 18px; }
#set-membership .ticks li { color: var(--ink); }

.edit-forms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.edit-form { display: grid; gap: 8px; align-content: start; padding: 18px; border-radius: var(--radius-md); background: var(--navy-900); }
.edit-form .btn { justify-self: start; margin-top: 4px; }

.social-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.social-link {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border-radius: var(--radius-md); background: var(--navy-900); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
}
.social-link:hover { border-color: var(--yellow); }
.social-link svg { width: 36px; height: 36px; flex: none; }
.social-link span span { display: block; font-size: .875rem; color: var(--muted); }

.support-list, .privacy-list { display: grid; gap: 10px; }
.support-list li, .privacy-list li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: center;
  padding: 14px 16px; border-radius: var(--radius-sm); background: var(--navy-900);
}
.support-list strong, .privacy-list strong { grid-column: 1; }
.support-list span, .privacy-list span { grid-column: 1; font-size: .9375rem; color: var(--muted); }
.support-list a { grid-column: 2; grid-row: 1 / span 2; color: var(--yellow); font-weight: 600; white-space: nowrap; }
.privacy-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.privacy-links { margin-top: 14px; }

@media (max-width: 900px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav { position: static; display: flex; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  .settings-nav a { white-space: nowrap; background: var(--navy-800); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; }
  .social-list { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .edit-forms { grid-template-columns: 1fr; }
  .profile-row { flex-direction: column; align-items: flex-start; }
  .settings-stats { grid-template-columns: 1fr 1fr; }
  #set-profile .settings-stats div:nth-child(n+5):not(.stat-streak) { grid-area: auto; }
  .support-list li { grid-template-columns: 1fr; }
  .support-list a { grid-column: 1; grid-row: auto; }
}

/* Homepage demo battle ----------------------------------------------------- */
.hero-battle { min-width: 0; }
.hero-battle .game-arena { max-width: none; }

/* Admin page ------------------------------------------------------------- */
.btn-danger { background: transparent; color: var(--wrong); border: 2px solid rgba(255, 122, 122, .6); }
.btn-danger:hover { background: rgba(255, 122, 122, .12); border-color: var(--wrong); }
.admin-count { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--wrong); color: var(--navy-900); font-size: .75rem; font-weight: 600; }
.admin-search { display: flex; align-items: flex-end; gap: 10px; }
.admin-search .field { flex: 1; min-width: 0; }
.admin-players, .admin-reports, .admin-log { display: grid; gap: 10px; margin-top: 14px; padding: 0; list-style: none; }
.admin-player { border-radius: var(--radius-md); background: rgba(7, 18, 63, .55); border: 1px solid var(--line); }
.admin-player.is-open { border-color: rgba(255, 201, 40, .55); }
.admin-player-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr) auto; align-items: center; gap: 16px; padding: 14px 16px; }
.admin-player-name { font-weight: 600; overflow-wrap: anywhere; }
.admin-player-email { margin-top: 2px; font-size: .875rem; color: var(--muted); overflow-wrap: anywhere; }
.admin-player-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.admin-player-stats dt { font-size: .75rem; color: var(--royal-300); }
.admin-player-stats dd { margin: 0; font-size: .875rem; }
.admin-badge { display: inline-block; margin: 2px 0 0 4px; padding: 1px 8px; border-radius: 999px; background: rgba(143, 168, 255, .16); color: var(--royal-300); font-size: .75rem; font-weight: 600; vertical-align: 2px; }
.admin-badge.is-plus { background: rgba(255, 201, 40, .16); color: var(--yellow); }
.admin-badge.is-admin { background: rgba(61, 220, 151, .16); color: var(--correct); }
.admin-badge.is-warn { background: rgba(255, 122, 122, .16); color: var(--wrong); }
.admin-edit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding: 4px 16px 16px; }
.admin-edit .check, .admin-edit-actions, .admin-edit .form-msg { grid-column: 1 / -1; }
.admin-edit-actions { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.admin-report { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius-md); background: rgba(7, 18, 63, .55); border: 1px solid var(--line); }
.admin-report-reason { margin-top: 4px; color: var(--muted); overflow-wrap: anywhere; }
.admin-report-actions { display: flex; gap: 8px; flex: none; }
.admin-log li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; font-size: .9375rem; color: var(--muted); }
.admin-log strong { color: var(--ink); }
.admin-log-time { color: var(--royal-300); font-size: .875rem; }
.admin-empty { color: var(--muted); }
.admin-dialog { text-align: left; }
.admin-dialog .field { margin-top: 16px; }
@media (max-width: 900px) {
  .admin-player-row { grid-template-columns: minmax(0, 1fr) auto; }
  .admin-player-stats { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-report { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .admin-search { flex-direction: column; align-items: stretch; }
  .admin-edit { grid-template-columns: minmax(0, 1fr); }
  .admin-log li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
.settings-nav a.settings-admin-link { color: var(--correct); }

/* Settings > Progress reports */
.report-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.report-settings .seg { justify-self: start; }
.report-settings .seg-btn { padding: 8px 16px; font-size: .9375rem; }
.report-recipients { display: grid; gap: 8px; padding: 0; list-style: none; }
.report-recipients:empty { display: none; }
.report-recipients li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: rgba(143, 168, 255, .08); }
.report-recipients strong { display: block; font-size: .9375rem; overflow-wrap: anywhere; }
.report-status { display: block; font-size: .8125rem; color: var(--muted); }
.report-status.is-active { color: var(--correct); }
.report-status.is-pending { color: var(--yellow); }
.report-actions { display: flex; gap: 12px; flex: none; }
.report-preview { width: min(640px, calc(100% - 32px)); text-align: left; }
.report-preview iframe { width: 100%; height: min(62vh, 640px); margin-top: 14px; border: 0; border-radius: var(--radius-md); background: #07123F; }
@media (max-width: 900px) { .report-settings { grid-template-columns: minmax(0, 1fr); } }
.prefs-card p strong { color: var(--ink); }
.prefs-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.prefs-actions:empty { display: none; }

/* Teachers and classes ----------------------------------------------------- */
.teach-school { color: var(--muted); margin-bottom: 14px; }
.teach-school strong { color: var(--yellow); }
.teach-links { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.teach-h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: 14px; }
.class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; padding: 0; list-style: none; }
.class-card {
  display: grid; gap: 6px; width: 100%; height: 100%; padding: 18px 20px; text-align: left;
  border-radius: var(--radius-md); background: var(--navy-800); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font: inherit; cursor: pointer;
}
.class-card:hover, .class-card:focus-visible { border-color: var(--yellow); }
.class-card.is-archived { opacity: .7; }
.class-card-name { font: 800 1.25rem/1.2 var(--font-display); overflow-wrap: anywhere; }
.class-card-meta { font-size: .875rem; color: var(--muted); }
.class-card-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; font-size: .875rem; color: var(--muted); }
.class-card-stats strong { color: var(--ink); }
.class-card-code { font-size: .8125rem; color: var(--royal-300); }
.class-card-code strong { color: var(--yellow); letter-spacing: .08em; }
.live-pill { display: inline-flex; align-items: center; gap: 6px; padding: 1px 10px; border-radius: 999px; background: rgba(255, 122, 122, .16); color: var(--wrong); font-weight: 600; }
.teach-new { margin-top: 24px; }
.teach-new h2 { font-size: 1.375rem; font-weight: 800; }
.teach-new-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; margin: 12px 0 8px; }
.teach-archived { margin-top: 24px; color: var(--muted); }
.teach-archived summary { cursor: pointer; margin-bottom: 12px; }

.join-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; border-color: rgba(255, 201, 40, .45); }
.join-label { font-size: .9375rem; color: var(--muted); }
.join-label strong { color: var(--ink); }
.join-code { font: 800 clamp(2.25rem, 5vw, 3rem)/1 var(--font-display); letter-spacing: .12em; color: var(--yellow); margin-top: 4px; }
.join-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.join-card .form-msg { flex-basis: 100%; margin-top: 0; }

.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.card-head h2 { margin: 0; font-size: 1.5rem; font-weight: 800; }
.field-inline { flex-direction: row; align-items: center; gap: 8px; }
.field-inline select { width: auto; }
.card-h3 { font-size: 1.125rem; font-weight: 800; margin: 22px 0 6px; }
.heatmap { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; padding: 0; list-style: none; }
.heat { display: grid; gap: 2px; padding: 12px; border-radius: var(--radius-sm); border: 1px solid transparent; }
.heat.is-good { background: rgba(61, 220, 151, .16); border-color: rgba(61, 220, 151, .4); }
.heat.is-ok { background: rgba(255, 201, 40, .12); border-color: rgba(255, 201, 40, .35); }
.heat.is-weak { background: rgba(255, 159, 67, .16); border-color: rgba(255, 159, 67, .45); }
.heat.is-bad { background: rgba(255, 122, 122, .2); border-color: rgba(255, 122, 122, .55); }
.heat-topic { font-weight: 600; font-size: .9375rem; overflow-wrap: anywhere; }
.heat-pct { font: 800 1.5rem/1.1 var(--font-display); }
.heat.is-good .heat-pct { color: var(--correct); }
.heat.is-ok .heat-pct { color: var(--yellow); }
.heat.is-weak .heat-pct { color: #FF9F43; }
.heat.is-bad .heat-pct { color: var(--wrong); }
.heat-meta { font-size: .75rem; color: var(--muted); }
.missed-list { display: grid; gap: 10px; margin-top: 8px; padding-left: 22px; }
.missed-list li { color: var(--ink); }
.missed-list li span { display: block; font-size: .875rem; }
.missed-answer { color: var(--correct); }
.missed-meta { color: var(--muted); }
.missed-list .admin-empty { list-style: none; margin-left: -22px; }

.table-wrap { overflow-x: auto; margin-top: 12px; }
.roster { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.roster th, .roster td { padding: 10px 8px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.roster thead th { font-size: .8125rem; font-weight: 500; color: var(--royal-300); }
.roster tbody th { font-weight: 600; }
.roster-name { display: block; }
.roster-user { font-size: .8125rem; font-weight: 400; color: var(--muted); }
.roster-actions { white-space: nowrap; text-align: right; }
.roster-actions .link-btn + .link-btn { margin-left: 12px; }
.roster tr.is-quiet td, .roster tr.is-quiet th { color: var(--muted); }

.hw-form { margin-bottom: 16px; }
.hw-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.hw-list { display: grid; gap: 10px; padding: 0; list-style: none; }
.hw-item { border-radius: var(--radius-md); background: var(--navy-900); border: 1px solid var(--line); }
.hw-item summary { display: grid; gap: 4px; padding: 14px 16px; cursor: pointer; }
.hw-item details[open] summary { border-bottom: 1px solid var(--line); }
.hw-title { font-weight: 600; }
.hw-meta { display: block; font-size: .875rem; color: var(--muted); }
.hw-done { font-size: .875rem; color: var(--muted); }
.hw-done strong { color: var(--yellow); }
.hw-results { margin: 6px 16px; width: calc(100% - 32px); }
.hw-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 12px 16px 16px; }
.hw-student { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; }
.hw-status { display: inline-block; margin-top: 6px; font-size: .8125rem; font-weight: 600; color: var(--yellow); }
.hw-status.is-done { color: var(--correct); }
.hw-status.is-late { color: var(--wrong); }

.source { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
.source legend { padding: 0; margin-bottom: 6px; font-size: .875rem; color: var(--muted); }
.source .seg { justify-self: start; }
.source .seg-btn { padding: 8px 14px; font-size: .875rem; }
.source .seg-btn:disabled { opacity: .45; cursor: not-allowed; }
.topic-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 14px; }
.topic-pick .field-help { grid-column: 1 / -1; margin-top: 4px; }
.topic-pick .check { margin-top: 8px; }
.topic-count { font-size: .75rem; color: var(--royal-300); }

.live-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 14px 0; }
.live-title { display: flex; align-items: center; gap: 8px; font: 800 1.375rem var(--font-display); }
.live-timer { font: 800 1.375rem var(--font-display); color: var(--yellow); margin-right: auto; }
.live-scores { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; padding: 0; list-style: none; counter-reset: live; }
.live-scores li { display: flex; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--navy-900); border: 1px solid var(--line); font-size: .9375rem; }
.live-scores li span:last-child { color: var(--muted); white-space: nowrap; }
.live-scores li.is-done { border-color: rgba(61, 220, 151, .5); }
.live-scores li.is-done span:last-child { color: var(--correct); font-weight: 600; }
.live-scores li.is-playing span:last-child { color: var(--yellow); }
.live-scores li.is-waiting { opacity: .65; }
.live-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; padding: 16px 20px; border-radius: var(--radius-md); background: rgba(255, 122, 122, .12); border: 1px solid rgba(255, 122, 122, .45); }
.live-banner p { display: flex; align-items: center; gap: 8px; }

.class-lb { display: grid; gap: 6px; padding: 0; list-style: none; counter-reset: lb; }
.class-lb li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--navy-900); counter-increment: lb; }
.class-lb li::before { content: counter(lb); min-width: 1.5em; color: var(--royal-300); font-weight: 600; }
.class-lb li > span { flex: 1; }
.class-lb li strong { color: var(--yellow); white-space: nowrap; }
.class-lb li.is-me { outline: 2px solid var(--yellow); }
.class-lb .admin-empty { background: none; counter-increment: none; }
.class-lb .admin-empty::before { content: none; }

.cs-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; grid-column: 1 / -1; }
.award-amounts { margin-top: 16px; }
.back-link { color: var(--royal-300); }
.k-layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.k-leave { margin-top: 18px; text-align: right; }

.qs-editor { display: grid; gap: 14px; }
.qs-import { padding: 14px 16px; border-radius: var(--radius-md); background: var(--navy-900); }
.qs-import summary { cursor: pointer; font-weight: 600; }
.qs-import > * + * { margin-top: 10px; }
.qs-questions { display: grid; gap: 12px; padding-left: 26px; }
.qs-q { padding: 16px; border-radius: var(--radius-md); background: var(--navy-900); border: 1px solid var(--line); }
.qs-q::marker { color: var(--royal-300); font-weight: 600; }
.qs-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; padding: 0; border: 0; }
.qs-options legend { padding: 0; margin-bottom: 6px; font-size: .8125rem; color: var(--muted); }
.qs-option { display: flex; align-items: center; gap: 8px; }
.qs-option input[type="radio"] { width: 18px; height: 18px; flex: none; accent-color: var(--correct); }
.qs-option input[data-option] { flex: 1; min-width: 0; padding: 9px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--navy-800); color: var(--ink); font: inherit; font-size: .9375rem; }
.qs-q-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; }
.qs-q textarea { width: 100%; }

@media (max-width: 900px) {
  .teach-new-row { grid-template-columns: minmax(0, 1fr); }
  .k-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .qs-options { grid-template-columns: minmax(0, 1fr); }
  .hw-student { flex-direction: column; align-items: stretch; }
  .roster-actions { white-space: normal; }
}
.page-note { margin-top: 18px; max-width: 760px; padding: 14px 18px; border-radius: var(--radius-md); background: rgba(255, 201, 40, .1); border: 1px solid rgba(255, 201, 40, .4); color: var(--muted); }
.page-note strong { color: var(--ink); }
.page-note a { color: var(--yellow); }
/* Keep cards within the screen: wide tables scroll inside their own box instead. */
.settings-body { grid-template-columns: minmax(0, 1fr); }
.settings-body > * { min-width: 0; }
.hw-item details { overflow-x: auto; }
@media (max-width: 560px) {
  .join-actions .btn { flex: 1 1 auto; white-space: normal; }
  .join-label strong { overflow-wrap: anywhere; }
}
.qs-editor { grid-template-columns: minmax(0, 1fr); }
.qs-editor > *, .qs-q, .qs-q-foot .field { min-width: 0; }
.qs-q select, .qs-editor input[type="file"] { max-width: 100%; min-width: 0; }
.live-type { font-size: .875rem; color: var(--muted); }
.heatmap .admin-empty, .class-grid .admin-empty, .live-scores .admin-empty { grid-column: 1 / -1; }

/* Levels and name colours (js/levels.js) ------------------------------------ */
.pname-white { color: var(--ink); }
.pname-green { color: #3DDC97; }
.pname-blue { color: #6E9BFF; }
.pname-pink { color: #FF8CC6; }
.pname-purple { color: #B98CFF; }
.pname-orange { color: #FF9F43; }
.pname-red { color: #FF6B6B; }
/* Sparkling names: a steady colour, with two small stars that twinkle. */
.pname-silver, .pname-gold { position: relative; }
.pname-silver { color: #DCE3EF; }
.pname-gold { color: #FFC928; }
.pname-silver::before, .pname-silver::after, .pname-gold::before, .pname-gold::after {
  content: "\2726"; position: absolute; font-size: .55em; line-height: 1; pointer-events: none;
  animation: name-twinkle 2.4s ease-in-out infinite;
}
.pname-silver::before, .pname-silver::after { color: #FFFFFF; }
.pname-gold::before, .pname-gold::after { color: #FFF1B8; }
.pname-silver::before, .pname-gold::before { top: -.45em; right: -.55em; }
.pname-silver::after, .pname-gold::after { bottom: -.25em; left: -.5em; font-size: .4em; animation-delay: 1.2s; }
@keyframes name-twinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(90deg); } }

/* Rainbow and Legendary scroll their colours. */
.pname-rainbow, .pname-legend {
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% 100%; animation: legend-shimmer 4s linear infinite;
}
.pname-rainbow { background-image: linear-gradient(90deg, #FF6B6B, #FF9F43, #FFC928, #3DDC97, #2DD4BF, #6E9BFF, #B98CFF, #FF8CC6, #FF6B6B); }
.pname-legend {
  background-image: linear-gradient(90deg, #FFC928, #FFF4C2, #FF8CC6, #B98CFF, #6E9BFF, #FFC928);
  text-shadow: 0 0 18px rgba(255, 201, 40, .25);
}
@keyframes legend-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .pname-legend, .pname-rainbow { animation: none; background-position: 50% 0; }
  .pname-silver::before, .pname-silver::after, .pname-gold::before, .pname-gold::after { animation: none; opacity: .8; }
}

.level-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 999px; background: rgba(110, 155, 255, .16); color: #C9D6FF; font-weight: 600; font-size: .875rem; }
.level-pill strong { color: var(--ink); font: 800 1rem var(--font-display); }
.level-bar { margin-top: 8px; max-width: 360px; }
.level-bar-track { height: 8px; border-radius: 999px; background: rgba(143, 168, 255, .16); overflow: hidden; }
.level-bar-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--royal), var(--yellow)); }
.level-bar-text { margin-top: 4px; font-size: .8125rem; color: var(--muted); }
.lb-level { color: var(--royal-300); font-weight: 600; }

.name-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.name-color {
  display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--radius-sm); text-align: left;
  background: var(--navy-900); border: 2px solid transparent; color: var(--ink); font: inherit; cursor: pointer;
}
.name-color:hover:not(:disabled) { border-color: rgba(255, 201, 40, .5); }
.name-color[aria-pressed="true"] { border-color: var(--yellow); }
.name-color:disabled { cursor: not-allowed; opacity: .55; }
.name-color .pname { font: 800 1.0625rem var(--font-display); overflow-wrap: anywhere; }
.name-color small { font-size: .75rem; color: var(--muted); }
.podium-level { margin-top: 2px; font-size: .8125rem; font-weight: 600; color: var(--royal-300); }

/* Game feel: top bar, streaks, effects and rewards (js/game.js) -------------- */
.game-arena { position: relative; }
.game-hud { margin-top: 12px; }
.hud-progress { height: 8px; border-radius: 999px; background: rgba(7, 18, 63, .5); overflow: hidden; }
.hud-progress span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--yellow), #FF9F43); transition: width .5s ease; }
.hud-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.hud-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 999px;
  background: rgba(7, 18, 63, .55); border: 1px solid rgba(143, 168, 255, .25); font-size: .875rem; color: var(--soft-ink);
}
.hud-chip strong { font: 800 1rem var(--font-display); color: var(--ink); }
.hud-chip svg { width: 18px; height: 18px; flex: none; }
.hud-streak svg { filter: grayscale(1) opacity(.5); transition: filter .3s; }
.hud-streak.is-hot { border-color: rgba(255, 159, 67, .7); box-shadow: 0 0 14px rgba(255, 159, 67, .35); }
.hud-streak.is-hot svg { filter: none; animation: flicker 1.2s ease-in-out infinite; }
.hud-streak.is-lost { animation: shake .35s ease; border-color: var(--wrong); }
.hud-mult.is-on { background: rgba(255, 201, 40, .16); border-color: rgba(255, 201, 40, .6); }
.hud-mult.is-on strong { color: var(--yellow); }
.hud-xp { background: rgba(61, 220, 151, .14); border-color: rgba(61, 220, 151, .45); }
.hud-xp strong { color: var(--correct); }
.hud-shells strong { color: var(--yellow); }
.hud-chip.bump { animation: bump .4s ease; }
@keyframes bump { 40% { transform: scale(1.15); } }
@keyframes flicker { 50% { transform: scale(1.12) rotate(-4deg); } }

.fx { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 5; }
.fx-p { position: absolute; display: block; margin: -8px 0 0 -8px; animation: fx-fly 1.3s cubic-bezier(.2, .7, .3, 1) forwards; }
.fx-p svg { width: 100%; height: 100%; display: block; }
.fx-drop { border-radius: 50%; background: currentColor; }
@keyframes fx-fly {
  0% { transform: translate(0, 0) scale(.4) rotate(0); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 60px)) scale(1) rotate(var(--r)); opacity: 0; }
}
.fx-float {
  position: absolute; transform: translate(-50%, 0); font: 800 1.25rem var(--font-display); color: var(--correct);
  text-shadow: 0 2px 10px rgba(7, 18, 63, .8); white-space: nowrap; animation: fx-rise 1.1s ease-out forwards;
}
@keyframes fx-rise { from { opacity: 0; transform: translate(-50%, 10px) scale(.8); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } to { opacity: 0; transform: translate(-50%, -60px) scale(1); } }

.streak-pop {
  position: absolute; left: 50%; top: 38%; z-index: 6; transform: translate(-50%, -50%);
  padding: 16px 26px; border-radius: var(--radius-lg); text-align: center; pointer-events: none;
  background: linear-gradient(135deg, #2348E0, #6B3FD6); border: 2px solid rgba(255, 201, 40, .7);
  box-shadow: 0 18px 50px rgba(3, 8, 30, .6);
}
.streak-pop.is-in { animation: pop-in 1.7s ease forwards; }
@keyframes pop-in {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  20%, 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(.96); }
}
.pop-word { font: 800 clamp(1.5rem, 4vw, 2rem)/1.1 var(--font-display); color: #FFF; white-space: nowrap; }
.pop-chips { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
.pop-chips span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: rgba(7, 18, 63, .45); font-size: .875rem; font-weight: 600; color: var(--yellow); }
.pop-chips svg { width: 16px; height: 16px; }

.game-rewards { margin-top: 14px; }
.reward-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.reward-tile { display: grid; justify-items: center; gap: 2px; padding: 14px 8px; border-radius: var(--radius-md); background: rgba(7, 18, 63, .6); border: 1px solid var(--line); }
.reward-tile svg { width: 26px; height: 26px; }
.reward-num { font: 800 clamp(1.5rem, 4vw, 2rem)/1 var(--font-display); }
.reward-xp .reward-num { color: var(--correct); }
.reward-shells .reward-num { color: var(--yellow); }
.reward-streak .reward-num { color: #FF9F43; }
.reward-label { font-size: .8125rem; color: var(--muted); }
.reward-level { margin-top: 12px; }
.reward-level-text { font-size: .9375rem; color: var(--soft-ink); }
.reward-level-text strong { font: 800 1.25rem var(--font-display); color: var(--ink); }
.reward-level .level-bar-fill { transition: width .9s cubic-bezier(.3, .7, .3, 1); }
.reward-level.is-up .reward-level-text { animation: bump .6s ease; }
.reward-level.is-up .reward-level-text strong { color: var(--yellow); }

@media (prefers-reduced-motion: reduce) {
  .hud-streak.is-hot svg, .hud-chip.bump, .streak-pop.is-in, .reward-level.is-up .reward-level-text { animation: none; }
  .streak-pop.is-in { opacity: 1; }
}
@media (max-width: 560px) {
  .hud-chip { padding: 3px 9px; font-size: .8125rem; }
  .reward-tiles { gap: 6px; }
}

/* Knockout (knockout.html) ------------------------------------------------ */
.ko { position: relative; }
.ko-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; }
.ko-round { font: 800 1.25rem var(--font-display); }
.ko-alive { color: var(--royal-300); }
.ko-time { font: 800 1.5rem var(--font-display); color: var(--yellow); min-width: 3ch; text-align: right; }
.ko-timer { height: 10px; margin: 10px 0 18px; border-radius: 999px; background: rgba(143, 168, 255, .16); overflow: hidden; }
.ko-timer span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--yellow), #FF9F43); transition: width .2s linear; }
.ko-timer span.is-low { background: var(--wrong); }
.ko-card { padding: clamp(18px, 4vw, 32px); border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--royal), #1A2FA0); border: 2px solid rgba(255, 201, 40, .45); text-align: center; }
.ko-big { font: 800 clamp(1.75rem, 5vw, 2.75rem)/1.1 var(--font-display); }
.ko-big strong { color: var(--yellow); }
.ko-card > p + p { margin-top: 10px; }
.ko-card p:not(.ko-q) { color: #E4E9FF; }
.ko-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.ko-hearts-big .heart { width: 34px; height: 34px; }
.heart { width: 20px; height: 20px; fill: #FF5C7A; filter: drop-shadow(0 1px 2px rgba(7, 18, 63, .5)); }
.heart.is-empty { fill: rgba(255, 255, 255, .18); filter: none; }
.ko-hearts { display: inline-flex; gap: 3px; }
.ko-hearts .heart { width: 26px; height: 26px; }
.ko-hearts.is-hit { animation: shake .45s ease; }
.ko-me { margin-bottom: 12px; }
.ko-q { font: 800 clamp(1.375rem, 3.5vw, 2rem)/1.25 var(--font-display); color: var(--ink); }
.ko-answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; text-align: left; }
.ko-answer.is-picked { outline: 3px solid var(--yellow); outline-offset: 2px; }
.ko-status { margin-top: 14px; font-weight: 600; min-height: 1.5em; }
.ko.is-host .ko-q { font-size: clamp(1.75rem, 4vw, 2.75rem); }
.ko.is-host .ko-answer { font-size: 1.125rem; }
.ko-out-tag { display: inline-block; padding: 2px 10px; border-radius: 999px; background: rgba(255, 92, 122, .2); color: #FF8CA0; font-size: .8125rem; font-weight: 700; }
.ko-out-tag.is-win { background: rgba(255, 201, 40, .2); color: var(--yellow); }
.ko-players-wrap { margin-top: 26px; }
.ko-h2 { font-size: 1.25rem; font-weight: 800; margin-bottom: 10px; }
.ko-players { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; padding: 0; list-style: none; }
.ko-player { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 8px 46px 8px 12px; border-radius: var(--radius-sm); background: var(--navy-800); border: 1px solid var(--line); transition: opacity .4s; }
.ko-player.is-me { border-color: var(--yellow); }
.ko-player.is-out { opacity: .5; }
.ko-player.is-hit { animation: shake .45s ease; border-color: rgba(255, 92, 122, .6); }
.ko-avatar { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 12px; overflow: hidden; background: var(--navy-700); }
.ko-avatar svg { width: 100%; height: 100%; }
.ko-pname { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ko-pname small { display: block; font-weight: 400; font-size: .75rem; color: var(--muted); }
.ko-plives { display: flex; gap: 2px; }
.ko-plives .heart { width: 15px; height: 15px; }
.ko-tick { position: absolute; top: 6px; right: 8px; color: var(--correct); font-weight: 800; }
.ko-res { position: absolute; top: 6px; right: 8px; font-weight: 800; font-size: .875rem; }
.ko-res.is-right { color: var(--correct); }
.ko-res.is-wrong { color: #FF8CA0; }
.ko-mine { font-size: 1.125rem; }
.ko-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 10px; margin: 22px auto 0; padding: 0; max-width: 560px; list-style: none; }
.ko-podium-spot { display: grid; justify-items: center; gap: 4px; }
.ko-podium-otter { width: 86px; height: 86px; }
.ko-place-1 .ko-podium-otter { width: 110px; height: 110px; }
.ko-podium-otter svg { width: 100%; height: 100%; }
.ko-podium-name { font-weight: 700; overflow-wrap: anywhere; }
.ko-podium-real { font-size: .75rem; color: #C9D3F7; }
/* Knockout rewards: XP (star) and Shells (shell) each player won */
.ko-won { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ko-won-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 6px; border-radius: 999px; font-weight: 700; font-size: .875rem; white-space: nowrap; background: rgba(7, 18, 63, .5); }
.ko-won-chip svg { width: 18px; height: 18px; flex: none; }
.ko-won-chip.is-xp { color: var(--correct); }
.ko-won-chip.is-shells { color: var(--yellow); }
.ko-my-won { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; font-weight: 600; }
.ko-my-won .ko-won-chip { font-size: 1rem; padding: 5px 12px 5px 8px; }
.ko-my-won .ko-won-chip svg { width: 22px; height: 22px; }
.ko-won-note { font-size: .8125rem; font-weight: 500; color: #C9D3F7; }
.ko-rewards { max-width: 560px; margin: 26px auto 0; text-align: left; }
.ko-rewards h3 { font: 800 1.25rem var(--font-display); }
.ko-rewards-note { margin-top: 4px; font-size: .875rem; color: #C9D3F7; }
.ko-rewards-list { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.ko-rewards-list li { display: grid; grid-template-columns: 44px 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: rgba(7, 18, 63, .4); }
.ko-rewards-list li.is-me { outline: 2px solid var(--yellow); }
.ko-rewards-list li.is-winner .ko-rw-place { color: var(--yellow); }
.ko-rw-place { font: 800 1.125rem var(--font-display); }
.ko-rewards-list .ko-avatar { grid-row: auto; width: 40px; height: 40px; }
.ko-rewards-list .ko-avatar svg { width: 100%; height: 100%; }
.ko-rw-name { font-weight: 700; overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .ko-rewards-list li { grid-template-columns: 36px 34px minmax(0, 1fr); }
  .ko-rewards-list .ko-won { grid-column: 2 / -1; justify-content: flex-start; }
}
.ko-podium-block { width: 100%; padding: 14px 0; border-radius: 12px 12px 0 0; font: 800 1.5rem var(--font-display); background: rgba(7, 18, 63, .45); }
.ko-place-1 .ko-podium-block { padding: 26px 0; background: var(--yellow); color: var(--navy-900); }
.ko-place-2 .ko-podium-block { padding: 18px 0; }
@media (max-width: 560px) {
  .ko-answers { grid-template-columns: minmax(0, 1fr); }
  .ko-players { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ko-podium-otter { width: 64px; height: 64px; }
  .ko-place-1 .ko-podium-otter { width: 80px; height: 80px; }
}
@media (prefers-reduced-motion: reduce) { .ko-player.is-hit, .ko-hearts.is-hit { animation: none; } }
.ko-landing-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 18px; align-items: start; }
.ko-landing-grid .settings-card { display: grid; gap: 12px; }
.ko-landing-grid h2 { font-size: 1.5rem; font-weight: 800; }
.ko-join-card { border-color: rgba(255, 201, 40, .45); }
.ko-landing-note { margin-top: 16px; text-align: center; }
.ko-join-label { font-size: .9375rem; }
.ko-card p.ko-join-code { font: 800 clamp(2.5rem, 7vw, 4rem)/1 var(--font-display); letter-spacing: .14em; color: var(--yellow); margin-top: 4px; }
.ko-kick { position: absolute; top: 4px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(255, 92, 122, .18); color: #FF8CA0; font: 700 1.125rem/1 var(--font-body); cursor: pointer; }
.ko-kick:hover { background: rgba(255, 92, 122, .35); }
@media (max-width: 900px) { .ko-landing-grid { grid-template-columns: minmax(0, 1fr); } }

/* Generate Report (report.html) ------------------------------------------- */
.rp-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 20px; }
.rp-tabs { display: inline-flex; margin-bottom: 18px; }
.rp-tabs .seg-btn { white-space: nowrap; }
.rp-hist-intro { margin-bottom: 14px; color: var(--muted); max-width: 70ch; }
.rp-weeks { display: grid; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.rp-week { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 18px; padding: 14px 18px;
  border-radius: var(--radius-md); background: var(--navy-800); border: 1px solid var(--line); border-left: 4px solid var(--yellow); }
.rp-week-date { display: grid; gap: 2px; min-width: 0; }
.rp-week-date span { font-size: .875rem; color: var(--muted); }
.rp-week-stat { font-size: .875rem; color: var(--muted); white-space: nowrap; }
.rp-week-stat strong { font: 800 1.125rem var(--font-display); color: var(--yellow); margin-right: 2px; }
@media (max-width: 640px) {
  .rp-week { grid-template-columns: repeat(2, auto) 1fr; gap: 8px 14px; }
  .rp-week-date { grid-column: 1 / -1; }
  .rp-week .btn { justify-self: end; }
}
.rp-controls .seg-btn { padding: 8px 14px; font-size: .9375rem; }
.rp-report { display: grid; gap: 18px; }
.rp-head { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--navy-800); }
/* The branded top of the report: logo on Ottered navy with a yellow stripe */
.rp-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px;
  background: radial-gradient(600px 160px at 90% 0%, rgba(35, 72, 224, .7), transparent 70%), var(--navy-900); border-bottom: 5px solid var(--yellow); }
.rp-logo { font-size: 2rem; color: #FFFFFF; }
.rp-banner-tag { padding: 5px 12px; border-radius: 999px; background: var(--yellow); color: var(--navy-900); font-weight: 700; font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; }
.rp-who { display: flex; align-items: center; gap: 18px; padding: 18px 22px; }
.rp-avatar { flex: none; width: 104px; height: 104px; border-radius: 22px; background: linear-gradient(160deg, var(--royal) 0%, var(--navy-700) 100%); border: 3px solid var(--yellow); overflow: hidden; }
.rp-avatar svg { display: block; width: 100%; height: 100%; }
.rp-head h2 { font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 800; }
.rp-section h3::after { content: ""; display: block; width: 40px; height: 4px; margin-top: 8px; border-radius: 999px; background: var(--yellow); }
.rp-stats div { border-top: 4px solid var(--yellow) !important; }
.rp-foot { display: flex; align-items: center; justify-content: center; gap: 6px; }
.rp-foot-logo { display: inline-block; width: 18px; height: 18px; }
.rp-period { color: var(--muted); }
.rp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; }
.rp-stats div { padding: 14px; border-radius: var(--radius-md); background: var(--navy-800); border: 1px solid var(--line); }
.rp-stats dt { font-size: .8125rem; color: var(--muted); }
.rp-stats dd { margin: 2px 0 0; font: 800 1.75rem var(--font-display); color: var(--yellow); }
.rp-section { padding: clamp(18px, 3vw, 26px); border-radius: var(--radius-lg); background: var(--navy-800); border: 1px solid var(--line); }
.rp-section h3 { font-size: 1.375rem; font-weight: 800; margin-bottom: 12px; }
.rp-section h4 { font-size: 1rem; font-weight: 700; margin: 16px 0 8px; color: var(--soft-ink); }
.rp-weak { display: grid; gap: 8px; padding: 0; list-style: none; }
.rp-weak li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--navy-900); }
.rp-weak li span { display: block; font-size: .875rem; color: var(--muted); }
.rp-strong { margin-top: 12px; color: var(--muted); }
.rp-strong strong { color: var(--correct); }
.rp-topics { display: grid; gap: 8px; padding: 0; list-style: none; }
.rp-topics li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr) auto; align-items: center; gap: 12px; font-size: .9375rem; }
.rp-bar { height: 10px; border-radius: 999px; background: rgba(143, 168, 255, .14); overflow: hidden; }
.rp-bar span { display: block; height: 100%; border-radius: inherit; }
.rp-bar.is-good span { background: var(--correct); }
.rp-bar.is-ok span { background: var(--yellow); }
.rp-bar.is-weak span { background: #FF9F43; }
.rp-bar.is-bad span { background: var(--wrong); }
.rp-topic-num { color: var(--muted); font-size: .875rem; white-space: nowrap; }
.rp-foot { font-size: .8125rem; color: var(--muted); text-align: center; }
.rp-empty { text-align: center; }
.rp-empty h2 { font-size: 1.5rem; font-weight: 800; }
.rp-empty p { margin-top: 10px; }
@media (max-width: 700px) {
  .rp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-topics li { grid-template-columns: minmax(0, 1fr) auto; }
  .rp-bar { grid-column: 1 / -1; grid-row: 2; }
  .rp-weak li { flex-direction: column; align-items: flex-start; }
}

/* Printing a report: just the report, on white, keeping the Ottered brand: the navy
   logo banner, yellow accents and royal-blue numbers. */
@media print {
  @page { margin: 14mm; }
  body:has(#rp-report) { background: #fff; color: #111; }
  body:has(#rp-report)::before, body:has(#rp-report)::after { display: none !important; }
  body:has(#rp-report) .site-header, body:has(#rp-report) .site-footer, body:has(#rp-report) .page-hero,
  body:has(#rp-report) .rp-controls, body:has(#rp-report) .skip-link, body:has(#rp-report) .rp-revise,
  body:has(#rp-report) .rp-tabs, body:has(#rp-report) .rp-weeks, body:has(#rp-report) .rp-hist-intro, body:has(#rp-report) #rp-gate { display: none !important; }
  body:has(#rp-report) .section { padding: 0; }
  .rp-report { gap: 12px; }
  .rp-report * { text-shadow: none !important; }
  .rp-report, .rp-report * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rp-section, .rp-stats div, .rp-weak li, .rp-head { background: #fff !important; border: 1px solid #D6DCF0 !important; break-inside: avoid; }
  .rp-section, .rp-section *, .rp-who, .rp-who *, .rp-stats dt, .rp-foot { color: #111 !important; -webkit-text-fill-color: currentColor; }
  .rp-banner { background: #07123F !important; border-bottom: 5px solid #FFC928 !important; }
  .rp-logo, .rp-logo * { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF; }
  .rp-banner-tag { background: #FFC928 !important; color: #07123F !important; -webkit-text-fill-color: #07123F; }
  .rp-avatar { border-color: #FFC928 !important; background: linear-gradient(160deg, #2348E0 0%, #0B1A5C 100%) !important; }
  .rp-stats div { border-top: 4px solid #FFC928 !important; }
  .rp-stats dd { color: #1B3BC0 !important; -webkit-text-fill-color: #1B3BC0; }
  .rp-section h3 { color: #07123F !important; -webkit-text-fill-color: #07123F; }
  .rp-section h3::after { background: #FFC928 !important; }
  .rp-section h4 { color: #1B3BC0 !important; -webkit-text-fill-color: #1B3BC0; }
  .rp-weak li span, .rp-topic-num, .missed-meta, .rp-period { color: #555 !important; -webkit-text-fill-color: #555; }
  .rp-strong strong, .missed-answer { color: #0A7A4B !important; -webkit-text-fill-color: #0A7A4B; }
  .rp-bar { background: #EEF1FA !important; }
  .rp-foot-logo { display: none; }   /* the white O doesn't show on paper */
}

/* Mind maps (mindmap.html) --------------------------------------------------- */
.mm-section { padding-top: 12px; }
.mm-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.mm-title { flex: 1 1 260px; }
.mm-top-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mm-status { flex-basis: 100%; margin-top: 0; }
.mm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 10px; padding: 8px; border-radius: var(--radius-md); background: var(--navy-800); border: 1px solid var(--line); }
.mm-spacer { flex: 1; }
.mm-icon { min-width: 40px; font-size: 1.125rem; }
.mm-colours { display: inline-flex; gap: 4px; margin-left: 6px; }
.mm-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); cursor: pointer; }
.mm-swatch:hover, .mm-swatch:focus-visible { border-color: #fff; }
.mm-board { position: relative; height: min(68vh, 640px); overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--line); cursor: grab; touch-action: none;
  background: radial-gradient(circle at 1px 1px, rgba(143, 168, 255, .18) 1px, transparent 0) 0 0 / 26px 26px, var(--navy-900); }
.mm-board:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.mm-board:active { cursor: grabbing; }
.mm-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.mm-links { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; }
.mm-node {
  position: absolute; transform: translate(-50%, -50%); width: max-content; max-width: 210px; padding: 9px 14px; border-radius: 14px;
  background: var(--navy-800); border: 2px solid var(--c); color: var(--ink); font-weight: 600; font-size: .9375rem;
  text-align: center; line-height: 1.3; cursor: pointer; user-select: none; overflow-wrap: anywhere; white-space: pre-wrap;
}
.mm-node.mm-d0 { background: var(--yellow); border-color: #FFE38A; color: var(--navy-900); font: 800 1.25rem/1.2 var(--font-display); padding: 14px 22px; max-width: 260px; }
.mm-node.mm-d1 { background: var(--c); border-color: var(--c); color: var(--navy-900); }
.mm-node.is-selected { box-shadow: 0 0 0 3px var(--navy-900), 0 0 0 6px #fff; }
.mm-text[contenteditable="true"] { outline: none; cursor: text; user-select: text; display: inline-block; min-width: 2ch; }
.mm-help { margin-top: 8px; }
.mm-start { margin-top: 18px; }
.mm-start summary { cursor: pointer; font-weight: 700; font-size: 1.125rem; }
.mm-start > * + * { margin-top: 12px; }
.mm-dialog { width: min(560px, calc(100% - 32px)); text-align: left; }
.mm-list { display: grid; gap: 8px; margin-top: 14px; padding: 0; list-style: none; max-height: 60vh; overflow-y: auto; }
.mm-list li, .bl-history li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--navy-900); }
.mm-open { display: grid; gap: 2px; flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.mm-open strong { overflow-wrap: anywhere; }
.mm-open span { font-size: .8125rem; color: var(--muted); }
.mm-open:hover strong { color: var(--yellow); }

/* Blurt (blurt.html) --------------------------------------------------------- */
.bl-step { display: grid; gap: 18px; }
#bl-setup { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
.bl-card { display: grid; gap: 12px; align-content: start; }
.bl-card h2 { font-size: 1.375rem; font-weight: 800; }
.bl-card .seg { justify-self: start; }
.bl-card .btn-lg { justify-self: start; }
.bl-clock { font: 800 1.375rem var(--font-display); color: var(--yellow); }
.bl-clock.is-up { color: var(--wrong); }
#bl-recall { min-height: 320px; font-size: 1.0625rem; line-height: 1.6; }
.bl-count { font-size: .875rem; color: var(--muted); }
.bl-card > .btn { justify-self: start; }
.bl-compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.bl-recall-view { padding: 14px; border-radius: var(--radius-md); background: var(--navy-900); line-height: 1.6; max-height: 340px; overflow-y: auto; overflow-wrap: anywhere; }
.bl-added-title { font-size: 1.125rem; font-weight: 800; color: var(--correct); }
.field textarea.bl-added, .bl-added-view { border: 1px solid rgba(61, 220, 151, .5); color: #B9F5DA; }
.bl-notes { max-height: 80vh; overflow-y: auto; }
.bl-notes h3 { font-size: 1.0625rem; font-weight: 800; margin-top: 10px; }
.bl-notes p, .bl-notes li { color: var(--soft-ink); line-height: 1.6; }
.bl-notes ul, .bl-notes ol { padding-left: 20px; }
.bl-tip { padding: 10px 12px; border-radius: var(--radius-sm); background: rgba(255, 201, 40, .1); }
.bl-cards { display: grid; gap: 6px; list-style: none; padding: 0 !important; }
.bl-cards li { padding: 8px 10px; border-radius: var(--radius-sm); background: var(--navy-900); }
.bl-history { display: grid; gap: 8px; padding: 0; list-style: none; }
.bl-view-body { display: grid; gap: 10px; margin-top: 12px; max-height: 60vh; overflow-y: auto; }
.bl-view-body h3 { font-size: 1rem; font-weight: 800; }
@media (max-width: 900px) {
  #bl-setup, .bl-compare { grid-template-columns: minmax(0, 1fr); }
  .mm-board { height: 60vh; }
}

/* Yellow Submarine (mode-yellow-submarine.html) ------------------------------- */
.ys-setup-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px; }
.ys-setup-grid h2 { font-size: 1.375rem; font-weight: 800; margin-bottom: 12px; }
.ys-setup-grid .field { margin: 14px 0; }
.ys-how ol { display: grid; gap: 8px; padding-left: 20px; color: var(--muted); }
.ys-how strong { color: var(--ink); }
/* The game shrinks to fit the screen height (header, HUD and help line included), keeping its shape */
.ys-game { --ys-chrome: 215px; max-width: max(320px, calc((100svh - var(--ys-chrome)) * 1.6)); margin-inline: auto; scroll-margin-top: 84px; }
/* While playing, the page title is hidden so the game sits right under the header */
body.ys-playing .page-hero { display: none; }
body.ys-playing .game-section { padding-top: 12px; }
.ys-hud { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 14px; border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--navy-800); border: 1px solid var(--line); border-bottom: 0; }
.ys-hud-item { display: inline-flex; align-items: center; gap: 6px; font-size: .9375rem; }
.ys-hud-item strong { font: 800 1.125rem var(--font-display); }
.ys-hud-label { font-size: .8125rem; color: var(--muted); }
.ys-lives span { color: #FF5C7A; font-size: 1.25rem; line-height: 1; }
.ys-lives span.is-lost { color: rgba(255, 255, 255, .2); }
.ys-coin { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFF1B8, #FFC928 45%, #C98A00); }
.ys-energy-track { width: 120px; height: 10px; border-radius: 999px; background: rgba(143, 168, 255, .18); overflow: hidden; }
.ys-energy-track span { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #3DDC97, #FFC928); transition: width .3s; }
.ys-energy-track span.is-low { background: var(--wrong); }
.ys-air-track span { background: linear-gradient(90deg, #5BC0FF, #B8E8FF); }
.ys-depth { font-variant-numeric: tabular-nums; }
.ys-depth.is-danger { color: var(--wrong); }
.ys-sea { color: var(--royal-300); font-weight: 600; }
.ys-hud-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.ys-hud-item[hidden] { display: none; }
.ys-shell { width: 18px; height: 18px; flex: none; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2c-4.9 0-8.8 3.8-8.8 8.6 0 1.6.5 3.1 1.3 4.3L12 20.8l7.5-4.7c.8-1.2 1.3-2.7 1.3-4.3 0-4.8-3.9-8.6-8.8-8.6z' fill='%23FFC928'/%3E%3Cpath d='M12 6.2v13.2M8.3 7.4l2.4 11.3M15.7 7.4l-2.4 11.3M5.4 10.3l5 8.4M18.6 10.3l-5 8.4' fill='none' stroke='%23C98A00' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ys-stage { position: relative; border: 1px solid var(--line); border-radius: 0 0 var(--radius-md) var(--radius-md); overflow: hidden; background: #0F4C9C; }
.ys-stage canvas { display: block; width: 100%; height: auto; aspect-ratio: 960 / 600; }
.ys-stage canvas:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; }
.ys-overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(4, 12, 40, .6); overflow-y: auto; }
.ys-panel { width: min(560px, 100%); max-height: 100%; overflow-y: auto; padding: clamp(18px, 3vw, 28px); border-radius: var(--radius-lg); background: var(--navy-800); border: 2px solid rgba(255, 201, 40, .55); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.ys-q-title { font: 800 clamp(1.25rem, 3vw, 1.625rem)/1.2 var(--font-display); color: var(--yellow); }
.ys-q-sub { margin-top: 6px; font-size: .9375rem; color: var(--muted); }
.ys-q-sub strong { color: var(--yellow); }
.ys-q-text { margin-top: 14px; font: 700 clamp(1.0625rem, 2.6vw, 1.25rem)/1.35 var(--font-body); }
.ys-answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.ys-q-result { margin-top: 12px; font-weight: 700; min-height: 1.4em; }
.ys-q-result.is-right { color: var(--correct); }
.ys-q-result.is-wrong { color: var(--wrong); }
.ys-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ys-shop { display: grid; gap: 8px; margin-top: 14px; padding: 0; list-style: none; }
.ys-shop-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--navy-900); }
.ys-shop-item span { display: block; font-size: .8125rem; color: var(--muted); }
.ys-results { margin-top: 14px; }
.ys-controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 10px; }
.ys-dive { min-width: 96px; height: 56px; font-size: 1.0625rem; }
.ys-touch { display: none; justify-content: center; gap: 10px; }
.ys-touch button { display: grid; place-items: center; width: 64px; height: 56px; border-radius: 16px; border: 1px solid var(--line); background: var(--navy-800); color: var(--ink); touch-action: none; }
.ys-touch button svg { width: 24px; height: 24px; fill: currentColor; pointer-events: none; }
/* Holding a control on a phone: no text selection, no copy / look-up menu, no grey tap flash */
.ys-touch, .ys-touch button, .ys-controls, .ys-controls button, #ys-canvas {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.ys-touch button.is-down { background: var(--royal); }
.ys-keys { margin-top: 12px; font-size: 1.125rem; line-height: 1.55; color: var(--ink); }
@media (hover: none), (max-width: 900px) { .ys-touch { display: flex; } .ys-game { --ys-chrome: 270px; } }
@media (max-width: 760px) {
  .ys-setup-grid { grid-template-columns: minmax(0, 1fr); }
  .ys-answers { grid-template-columns: minmax(0, 1fr); }
  .ys-hud-buttons { margin-left: 0; }
  .ys-energy-track { width: 80px; }
  /* The canvas is too short on phones, so questions and the shop cover the screen */
  .ys-overlay { position: fixed; z-index: 60; align-items: start; padding: 72px 12px 16px; background: rgba(4, 12, 40, .85); }
  .ys-panel { max-height: none; }
}

/* ===========================================================================
   Glossary: the highlighter on every page (glossary.js) and glossary.html
   =========================================================================== */

mark.gl-mark {
  background: rgba(255, 201, 40, .28); color: inherit;
  border-bottom: 2px solid var(--yellow); border-radius: 3px; padding: 0 1px;
  cursor: pointer;
}
mark.gl-mark:hover { background: rgba(255, 201, 40, .42); }

.gl-pop {
  position: absolute; z-index: 90; display: flex; align-items: center; gap: 4px; padding: 4px;
  max-width: calc(100vw - 16px);
  background: var(--yellow); color: var(--navy-900); border-radius: 999px;
  box-shadow: 0 8px 24px rgba(3, 10, 38, .45);
  font: 600 .875rem var(--font-body);
}
.gl-pop[hidden] { display: none; }
.gl-pop-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; min-height: 36px;
  border: 0; border-radius: 999px; background: transparent; color: inherit;
  font: inherit; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.gl-pop-btn:hover, .gl-pop-btn:focus-visible { background: rgba(7, 18, 63, .12); }
.gl-pop-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gl-pop-label { padding: 0 6px 0 12px; white-space: nowrap; opacity: .8; }
.gl-pop-remove { color: #8A1F1F; }

.gl-toast {
  position: fixed; z-index: 95; left: 50%; bottom: 20px; transform: translate(-50%, 20px);
  max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: var(--radius-sm);
  background: var(--navy-700); color: var(--ink); border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(3, 10, 38, .45); font-size: .9375rem;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.gl-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.gl-toast a { color: var(--yellow); margin-left: 6px; }

.gl-wrap { display: grid; gap: 20px; }
.gl-sync { color: var(--muted); font-size: .9375rem; }
.gl-sync a { color: var(--yellow); }
.gl-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; align-items: end; }
.gl-add { display: flex; gap: 10px; align-items: end; }
.gl-add .field { flex: 1; }
.gl-filter { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.gl-count { color: var(--muted); font-size: .9375rem; }
.gl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.gl-item {
  display: flex; flex-direction: column; gap: 12px; padding: 22px;
  background: var(--navy-800); border: 1px solid var(--line); border-radius: var(--radius-md);
  scroll-margin-top: 110px;
}
.gl-item.is-flash { animation: gl-flash 1.6s ease-out; }
@keyframes gl-flash { 0%, 30% { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255, 201, 40, .35); } }
@media (prefers-reduced-motion: reduce) { .gl-item.is-flash { animation: none; border-color: var(--yellow); } .gl-toast { transition: none; } }
.gl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.gl-word { font-size: 1.5rem; font-weight: 800; overflow-wrap: anywhere; }
.gl-phon { color: var(--royal-300); font-size: .9375rem; }
.gl-def { display: grid; gap: 12px; color: var(--soft-ink); }
.gl-pos { color: var(--yellow); font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.gl-meaning ol { margin: 4px 0 0; padding-left: 1.3em; display: grid; gap: 6px; }
.gl-eg { display: block; margin-top: 2px; color: var(--muted); font-style: italic; font-size: .9375rem; }
.gl-loading, .gl-none { color: var(--muted); font-size: .9375rem; }
.gl-foot { margin-top: auto; display: grid; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.gl-meta { color: var(--muted); font-size: .8125rem; }
.gl-meta a { color: var(--ink); }
.gl-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gl-retry { justify-self: start; }
.gl-empty a { color: var(--yellow); }
.gl-credit { color: var(--muted); font-size: .8125rem; }
.gl-credit a { color: var(--ink); }
@media (max-width: 760px) {
  .gl-tools { grid-template-columns: 1fr; }
}


/* The shop inside a game (shop.html?embed=1) */
.is-embed .skip-link, .is-embed .shop-hero h1, .is-embed .site-header, .is-embed .site-footer, .is-embed #earn, .is-embed .shop-hero .lede, .is-embed .balance a { display: none; }
.is-embed .page-hero { padding: 16px 0 0; }
.is-embed .shop-section { padding-top: 16px; }

/* Yellow Submarine: the shell shop in a full-screen dialog, so the game stays open */

/* Yellow Submarine finale: a giant kraken rises over the screen */
.kraken { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-rows: 1fr auto; overflow: hidden;
  background: radial-gradient(ellipse at 50% 110%, #1B4FA0 0%, #07123F 55%, #020717 100%); animation: kr-fade .5s ease-out both; }
.kraken-sea { grid-row: 1; min-height: 0; display: flex; align-items: flex-end; justify-content: center; padding-top: 16px; }
.kraken-art { overflow: visible; width: min(900px, 100%); height: 100%; max-height: 70vh; animation: kr-rise 1.6s cubic-bezier(.2, .8, .25, 1) both; }
.kr-tentacle { transform-box: view-box; animation: kr-wave 2.4s ease-in-out infinite alternate; }
.kr-body { transform-origin: 400px 540px; animation: kr-breathe 3s ease-in-out infinite alternate; }
.kr-eye { transform-box: fill-box; transform-origin: center; animation: kr-blink 4s infinite; }
.kraken-card { position: relative; grid-row: 2; margin: -24px auto 24px; width: min(560px, calc(100% - 32px)); padding: 22px 24px; text-align: center;
  border-radius: var(--radius-lg); background: rgba(7, 18, 63, .9); border: 2px solid var(--yellow); box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  animation: kr-card .6s 1.2s ease-out both; }
.kraken-card h2 { margin: 4px 0 8px; font: 800 clamp(1.75rem, 5vw, 2.5rem)/1.1 var(--font-display); color: var(--yellow); }
.kraken-card p { margin: 0 0 16px; line-height: 1.5; }
.kraken-kicker { margin: 0 !important; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: .8125rem; color: var(--royal-300); }
@keyframes kr-fade { from { opacity: 0; } }
@keyframes kr-rise { from { transform: translateY(70%) scale(.9); } }
@keyframes kr-wave { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes kr-breathe { to { transform: scale(1.03); } }
@keyframes kr-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes kr-card { from { opacity: 0; transform: translateY(24px); } }
@media (prefers-reduced-motion: reduce) {
  .kraken, .kraken-art, .kr-tentacle, .kr-body, .kr-eye, .kraken-card { animation: none; }
}
@media (max-width: 600px) { .kraken-art { width: 150%; max-height: 60vh; } }
.kraken-mini { display: flex; justify-content: center; margin-bottom: 4px; }
@media (prefers-reduced-motion: no-preference) { .kraken-mini svg { animation: kr-breathe 1.5s ease-in-out infinite alternate; transform-origin: 50% 100%; } }

/* Yellow Submarine: true or false quick-fire */
.tf-claim { margin-top: 8px; font-size: 1.0625rem; }
.tf-claim strong { color: var(--yellow); }
.tf-timer { height: 8px; margin-top: 12px; border-radius: 999px; background: rgba(143, 168, 255, .2); overflow: hidden; }
.tf-timer span { display: block; height: 100%; width: 100%; background: var(--yellow); border-radius: inherit; }
.ys-answers.tf-answers { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

/* Yellow Submarine: clam pairs */
.clam-board { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; margin-top: 14px; }
.clam-col { display: grid; gap: 8px; align-content: start; }
.clam-card { min-height: 52px; padding: 10px 12px; text-align: left; font: 500 .9375rem/1.35 var(--font-body); color: var(--ink);
  background: var(--navy-900); border: 2px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; transition: border-color .15s, background .15s; }
.clam-card:hover:not(:disabled) { border-color: var(--royal-300); }
.clam-card:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.clam-ans { font-weight: 600; }
.clam-card.is-picked { border-color: var(--yellow); background: rgba(255, 201, 40, .12); }
.clam-card.is-matched { border-color: var(--correct); background: rgba(61, 220, 151, .12); opacity: .75; cursor: default; }
.clam-card.is-wrong { border-color: var(--wrong); background: rgba(255, 122, 122, .14); }
@media (max-width: 560px) { .clam-board { grid-template-columns: minmax(0, 1fr); } }
.clam-head { margin: 0; font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

/* Yellow Submarine: the map menu */
.ys-maps-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.ys-kraken-count { margin-top: 4px; font-size: 1rem; color: var(--muted); }
.ys-kraken-count strong { color: var(--yellow); font: 800 1.25rem var(--font-display); }
.ys-maps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.ys-map-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: var(--radius-sm); background: var(--navy-900); border: 2px solid var(--line); }
.ys-map-row.is-here { border-color: var(--yellow); }
.ys-map-row.is-locked { opacity: .6; }
.ys-map-num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(143, 168, 255, .18); font: 800 1rem var(--font-display); }
.ys-map-info { display: grid; gap: 2px; min-width: 0; }
.ys-map-info strong { font-size: .9375rem; }
.ys-map-info span { font-size: .8125rem; color: var(--muted); }
.ys-map-count { display: grid; justify-items: center; font: 800 1.125rem/1 var(--font-display); color: var(--yellow); }
.ys-map-count small { font: 500 .6875rem var(--font-body); color: var(--muted); margin-top: 2px; }
.ys-map-art { display: flex; justify-content: center; margin-bottom: 6px; }
.kraken-bonus { font-size: 1.0625rem; }
.kraken-bonus strong { color: var(--correct); }
@media (max-width: 480px) {
  .ys-map-row { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .ys-map-row .btn { grid-column: 2 / -1; justify-self: start; }
}
.ys-map-info .ys-map-done { color: var(--correct); font-weight: 600; }
/* The chart of each voyage in the map menu: seabed, caves, chests and your safe depth */
.ys-map-preview { grid-column: 1 / -1; position: relative; height: 84px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.ys-map-preview svg { display: block; width: 100%; height: 100%; }
.ys-pin { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 2px rgba(7, 18, 63, .85); }
.ys-pin.is-got { background: transparent; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
.ys-pin.is-deep { box-shadow: 0 0 0 2px rgba(7, 18, 63, .85), 0 0 0 4px var(--wrong); }
.ys-map-safe { position: absolute; left: 0; right: 0; border-top: 2px dashed rgba(255, 92, 122, .9); }
.ys-map-safe span { position: absolute; left: 6px; bottom: 2px; padding: 0 6px; border-radius: 6px; font-size: .6875rem; line-height: 1.5; white-space: nowrap; background: rgba(7, 18, 63, .8); color: #FFD0D8; }
.ys-map-row .ys-map-legend { grid-column: 1 / -1; font-size: .8125rem; color: var(--muted); }
@media (max-width: 480px) { .ys-map-row .ys-map-preview, .ys-map-row .ys-map-legend { grid-column: 1 / -1; } }
/* Questions open with the panel focused, so no answer looks chosen before you pick */
.ys-panel:focus { outline: none; }
/* Show answers (admins only, every game mode): the right answer is highlighted in yellow */
.answer.is-reveal, .clam-card.is-reveal { border-color: var(--yellow); background: color-mix(in srgb, var(--yellow) 22%, transparent); box-shadow: inset 0 0 0 2px var(--yellow); }
.show-answers-btn { white-space: nowrap; }
.show-answers-btn[aria-pressed="true"] { border-color: var(--yellow); color: var(--yellow); }
.show-answers-btn[hidden] { display: none; }
.ys-reveal-tag { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; background: var(--yellow); color: #07123F; font: 800 .75rem var(--font-display); vertical-align: middle; }
/* The screen shakes as the battery drops into the yellow (and harder into the red, or past your safe depth) */
@media (prefers-reduced-motion: no-preference) {
  .ys-stage canvas.ys-shake { animation: ys-shake .4s linear; }
  .ys-stage canvas.ys-shake-big { animation: ys-shake-big .6s linear; }
}
@keyframes ys-shake {
  0%, 100% { transform: none; }
  20% { transform: translate(-4px, 2px); }
  40% { transform: translate(4px, -2px); }
  60% { transform: translate(-3px, 1px); }
  80% { transform: translate(2px, -1px); }
}
@keyframes ys-shake-big {
  0%, 100% { transform: none; }
  12% { transform: translate(-8px, 3px) rotate(-.4deg); }
  26% { transform: translate(7px, -4px) rotate(.4deg); }
  40% { transform: translate(-6px, 2px); }
  55% { transform: translate(5px, -2px); }
  70% { transform: translate(-3px, 1px); }
  85% { transform: translate(2px, -1px); }
}
@media (max-width: 420px) { .ys-controls, .ys-touch { gap: 8px; } .ys-touch button { width: 54px; } .ys-dive { min-width: 84px; padding-inline: 12px; } }

/* Swim! (the tl- classes are from its old name, Tails!) */
.tl-level { border: 0; padding: 0; margin: 14px 0; }
.tl-level legend { font-weight: 600; margin-bottom: 8px; }
.tl-soon { margin-top: 12px; }
.tl-game { --ys-chrome: 215px; max-width: max(320px, calc((100svh - var(--ys-chrome)) * 1.6)); margin-inline: auto; scroll-margin-top: 84px; }
.tl-stage { position: relative; }
.tl-stage canvas { cursor: crosshair; }
/* While playing on a computer, the game fills the page (js/tails.js sizes the river to fit) */
body.tl-full .game-section > .wrap { max-width: none; padding-inline: clamp(12px, 2vw, 24px); }
body.tl-full .tl-game { max-width: none; }
/* The end-of-round box is wide enough for its three buttons on one line */
.tl-stage .ys-panel { width: min(700px, 100%); }
.tl-question { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); width: min(620px, calc(100% - 24px)); padding: 14px 16px;
  border-radius: var(--radius-md); background: rgba(7, 18, 63, .92); border: 2px solid var(--yellow); box-shadow: 0 12px 40px rgba(0, 0, 0, .45); }
.tl-q-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.tl-q-title { margin: 0; font: 800 1.125rem var(--font-display); color: var(--yellow); }
.tl-q-note { font-size: .8125rem; color: var(--muted); }
.tl-q-text { margin: 6px 0 8px; font-weight: 600; font-size: 1.0625rem; }
.tl-q-timer { height: 6px; border-radius: 999px; background: rgba(143, 168, 255, .2); overflow: hidden; }
.tl-q-timer span { display: block; height: 100%; width: 100%; background: var(--yellow); border-radius: inherit; }
.tl-answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.tl-answers .answer { min-height: 44px; padding: 8px 10px; font-size: .9375rem; }
.tl-question .ys-q-result { margin-top: 8px; min-height: 1.2em; }
.tl-podium { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.tl-podium li { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--navy-900); border: 1px solid var(--line); }
.tl-podium li.is-me { border-color: var(--yellow); }
.tl-podium strong { color: var(--yellow); }
@media (max-width: 700px) {
  /* On phones the question card covers the bottom of the river too (everyone's frozen meanwhile). */
  .tl-question { bottom: 8px; width: calc(100% - 16px); padding: 10px 12px; }
  .tl-q-title { font-size: 1rem; }
  .tl-q-note { display: none; }
  .tl-q-text { margin: 4px 0 6px; font-size: .9375rem; }
  .tl-answers { gap: 6px; margin-top: 8px; }
  .tl-answers .answer { min-height: 40px; padding: 6px 8px; font-size: .8125rem; }
}

/* Swim! setup: the locked online lobby button */
/* Swim! multiplayer lobby */
.tl-lobby { margin-top: 16px; padding: 16px 18px; border-radius: var(--radius-md); background: var(--navy-900); border: 1px solid var(--line); }
.tl-lobby-title { font: 800 1.25rem var(--font-display); color: var(--yellow); }
.tl-lobby-sub { margin-top: 4px; color: var(--soft-ink); }
.tl-lobby-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; padding: 0; list-style: none; }
.tl-lobby-list li { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--navy-800); font-weight: 600; }
.tl-lobby-list li.is-me { outline: 2px solid var(--yellow); }
.tl-lobby-list img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--navy-700); }
.tl-modes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tl-locked { display: inline-flex; align-items: center; gap: 8px; opacity: .7; cursor: not-allowed; }
.tl-locked svg { width: 16px; height: 16px; flex: none; }

/* Homepage accents ------------------------------------------------------- */

/* Bubbles drifting up behind the hero */
.hero-bubbles { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero > .wrap { position: relative; z-index: 1; }
.hero-bubbles span { position: absolute; left: var(--x); bottom: -40px; width: var(--s); height: var(--s); border-radius: 50%;
  border: 1.5px solid rgba(143, 168, 255, .35); background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .28), rgba(143, 168, 255, .06) 60%); }
@media (prefers-reduced-motion: no-preference) {
  .hero-bubbles span { animation: bubble-rise var(--t) var(--d) linear infinite; opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
  /* A taller hero: the same gentle speed, and they start part-way up (a negative delay), so some are
     already above the demo battle when the page opens instead of all starting below it. */
  .hero-bubbles span { animation-duration: calc(var(--t) * 1.8); animation-delay: calc(var(--d) * -2.2 - 4s); }
}
@media (prefers-reduced-motion: reduce) { .hero-bubbles { display: none; } }
/* They rise the full height of the hero (bottom is a % of it), so they reach the top on phones too,
   where the hero is much taller than the screen. */
@keyframes bubble-rise {
  0% { bottom: -40px; transform: translateX(0); opacity: 0; }
  8% { opacity: 1; }
  50% { transform: translateX(14px); }
  92% { opacity: .8; }
  100% { bottom: 100%; transform: translateX(-6px); opacity: 0; }
}

/* Section headings rise gently into view as you scroll (js/home.js adds the classes) */
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease var(--rd, 0s), transform .6s cubic-bezier(.2, .8, .3, 1) var(--rd, 0s); }
  .reveal-ready .reveal.is-in { opacity: 1; transform: none; }
}
/* A short yellow accent bar above each section heading */
.home .section-head h2::before { content: ""; display: block; width: 44px; height: 5px; margin-bottom: 14px; border-radius: 999px; background: linear-gradient(90deg, var(--yellow), #FF9F45); }

/* More little homepage animations (all off for reduced-motion users) */
@media (prefers-reduced-motion: no-preference) {
  /* Step numbers bounce in as their step arrives */
  .home .step.is-in .step-num { animation: hm-pop .55s calc(var(--rd, 0s) + .2s) cubic-bezier(.3, 1.7, .5, 1) both; }
  /* Game mode cards lift on hover, and their icon gives a little wiggle */
  .home .mode { transition: transform .2s ease, border-color .2s ease, opacity .6s ease var(--rd, 0s); }
  .home .mode:hover { transform: translateY(-4px); border-color: rgba(255, 201, 40, .55); }
  .home .mode:hover .mode-icon { animation: hm-wiggle .5s ease; }
  /* Pricing plans lift on hover; the "Most popular" flag glows now and then */
  .home .plan { transition: transform .2s ease, box-shadow .2s ease, opacity .6s ease var(--rd, 0s); }
  .home .plan:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
  .home .plan-flag { animation: hm-glow 3.2s ease-in-out infinite; }
  /* The teacher's lobby: players pop in one by one, as if they're joining */
  .home .lobby.is-in .lobby-players li { animation: hm-pop .4s cubic-bezier(.3, 1.6, .5, 1) both; }
  .home .lobby.is-in .lobby-players li:nth-child(1) { animation-delay: 0.43s; }
  .home .lobby.is-in .lobby-players li:nth-child(2) { animation-delay: 0.61s; }
  .home .lobby.is-in .lobby-players li:nth-child(3) { animation-delay: 0.79s; }
  .home .lobby.is-in .lobby-players li:nth-child(4) { animation-delay: 0.97s; }
  .home .lobby.is-in .lobby-players li:nth-child(5) { animation-delay: 1.15s; }
  .home .lobby.is-in .lobby-players li:nth-child(6) { animation-delay: 1.33s; }
  .home .lobby.is-in .lobby-players li:nth-child(7) { animation-delay: 1.51s; }
  .home .lobby.is-in .lobby-players li:nth-child(8) { animation-delay: 1.69s; }
  .home .lobby-count { animation: hm-glow 2.4s ease-in-out infinite; }
  /* Review doodles draw themselves in */
  .home .review.is-in .review-doodle path, .home .review.is-in .review-doodle circle { stroke-dasharray: 1; stroke-dashoffset: 1; animation: hm-draw .9s calc(var(--rd, 0s) + .3s) ease-out forwards; }
  /* A shine sweeps across the main yellow buttons (once when the page opens, and on hover) */
  .home .hero-ctas .btn-yellow, .home .cta-band .btn { position: relative; overflow: hidden; }
  .home .hero-ctas .btn-yellow::after, .home .cta-band .btn::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
    transform: translateX(-120%); animation: hm-shine 1.1s 2.6s ease-in-out;
  }
  .home .hero-ctas .btn-yellow:hover::after, .home .cta-band .btn:hover::after { animation: hm-shine .8s ease-in-out; }
}
@keyframes hm-pop { 0% { opacity: 0; transform: scale(.4) rotate(-10deg); } 100% { opacity: 1; transform: none; } }
@keyframes hm-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 60% { transform: rotate(8deg); } }
@keyframes hm-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 201, 40, 0); } 50% { box-shadow: 0 0 0 6px rgba(255, 201, 40, .18); } }
@keyframes hm-draw { to { stroke-dashoffset: 0; } }
@keyframes hm-shine { from { transform: translateX(-120%); } to { transform: translateX(120%); } }

/* Wide screens: the content column widens a little, and the empty sides get faint
   doodles (fish, bubbles, ripples and sparkles) that fade out towards the content. */
@media (min-width: 1500px) {
  .wrap { max-width: 1280px; }
}
@media (min-width: 1560px) {
  body { position: relative; }
  body::before, body::after {
    content: ""; position: absolute; top: 0; bottom: 0; z-index: 2; pointer-events: none;
    width: calc((100% - 1280px) / 2 - 24px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22260%22 height=%22340%22 viewBox=%220 0 260 340%22 fill=%22none%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E %3Cg stroke=%22%238FA8FF%22 stroke-opacity=%22.22%22 stroke-width=%222.2%22%3E %3Cpath d=%22M30 60 q 18 -14 36 0 q -18 14 -36 0 z M30 60 l -12 -8 v 16 z%22/%3E%3Ccircle cx=%2258%22 cy=%2257%22 r=%221.6%22 fill=%22%238FA8FF%22 fill-opacity=%22.3%22/%3E %3Cpath d=%22M150 40 q 10 -8 20 0 t 20 0 t 20 0%22/%3E %3Ccircle cx=%22205%22 cy=%22110%22 r=%229%22/%3E%3Ccircle cx=%22222%22 cy=%2292%22 r=%225%22/%3E%3Ccircle cx=%22214%22 cy=%2276%22 r=%223%22/%3E %3Cpath d=%22M60 170 c 0 -18 26 -18 26 0 c 0 10 -13 16 -13 16 s -13 -6 -13 -16 z M73 154 v 30 M62 162 l 11 10 l 11 -10%22/%3E %3Cpath d=%22M150 210 q 22 -16 44 0 q -22 16 -44 0 z M150 210 l -14 -9 v 18 z%22/%3E%3Ccircle cx=%22184%22 cy=%22207%22 r=%221.8%22 fill=%22%238FA8FF%22 fill-opacity=%22.3%22/%3E %3Cpath d=%22M20 260 q 10 -8 20 0 t 20 0 t 20 0 t 20 0%22/%3E %3Ccircle cx=%22120%22 cy=%22300%22 r=%226%22/%3E%3Ccircle cx=%22134%22 cy=%22286%22 r=%223.5%22/%3E %3C/g%3E %3Cg stroke=%22%23FFC928%22 stroke-opacity=%22.28%22 stroke-width=%222.2%22%3E %3Cpath d=%22M120 120 v 14 M113 127 h 14%22/%3E%3Cpath d=%22M230 270 v 10 M225 275 h 10%22/%3E%3Cpath d=%22M30 120 l 6 6 M36 120 l -6 6%22/%3E %3C/g%3E %3C/svg%3E");
    background-size: 260px 340px;
    opacity: .3;   /* really faint: just a hint of texture */
  }
  body::before { left: 0; background-position: 12px 140px;
    -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent); mask-image: linear-gradient(90deg, #000 30%, transparent); }
  body::after { right: 0; background-position: right 12px top 300px;
    -webkit-mask-image: linear-gradient(270deg, #000 30%, transparent); mask-image: linear-gradient(270deg, #000 30%, transparent); }
}

/* Settings: membership buttons; the one that doesn't apply is locked */
.membership-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.membership-actions .is-locked { display: inline-flex; align-items: center; gap: 8px; opacity: .5; cursor: not-allowed; box-shadow: none; }
.membership-actions .is-locked svg { width: 15px; height: 15px; flex: none; }
#mem-note { margin-top: 10px; }
.hw-bonus { display: flex; width: fit-content; align-items: center; gap: 5px; margin-top: 4px; font-size: .8125rem; font-weight: 600; color: var(--yellow); }

/* Owned tab: a second, smaller row to pick which kind of item to look through */
.owned-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.owned-filter .chip {
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--navy-800);
  color: var(--ink); font: 600 .875rem var(--font-body); cursor: pointer;
}
.owned-filter .chip:hover { border-color: var(--yellow); }
.owned-filter .chip[aria-checked="true"] { background: rgba(255, 201, 40, .16); border-color: var(--yellow); color: var(--yellow); }
.owned-filter .chip:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

/* Shop filter tabs (All, Skins, Hats, Splashes, Banners, Owned): a tidy 3 x 2 grid on phones */
@media (max-width: 560px) {
  .catalogue > .seg[role="tablist"] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: var(--radius-lg); }
  .catalogue > .seg[role="tablist"] .seg-btn { padding-inline: 6px; text-align: center; }
}

/* River Rush (mode-river-rush.html): uses the Yellow Submarine game layout (ys-hud, ys-stage,
   ys-overlay, ys-touch) with these additions */
.rr-stage { background: #3A93BF; }
/* Swipes on the river change lane, so the browser mustn't scroll or select instead */
#rr-canvas { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.rr-fish-icon { width: 22px; height: 14px; flex: none; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 20'%3E%3Cellipse cx='18' cy='10' rx='12' ry='7' fill='%23F08A4B'/%3E%3Cpath d='M8 10L1 3v14z' fill='%23F08A4B'/%3E%3Ccircle cx='24' cy='8.5' r='1.8' fill='%2307123F'/%3E%3C/svg%3E"); }
/* River Rush class races: the join panel and the leaderboard (under the game, and in the results) */
.rr-live h2 { font-size: 1.375rem; font-weight: 800; margin-bottom: 10px; }
.rr-live p { margin-bottom: 14px; color: var(--muted); }
.rr-live-time strong { color: var(--yellow); font: 800 1.25rem var(--font-display); }
.rr-board { max-width: 720px; margin: 20px auto 0; padding: 18px; border-radius: var(--radius-md); background: var(--navy-800); border: 1px solid var(--line); }
.rr-board h2 { font-size: 1.25rem; font-weight: 800; margin-bottom: 10px; }
.rr-results { display: grid; gap: 6px; margin: 12px 0 0; padding-left: 0; list-style: none; counter-reset: rr; }
.rr-results li { counter-increment: rr; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius-sm); background: rgba(13, 29, 92, .7); }
.rr-results li::before { content: counter(rr) "."; min-width: 1.6em; color: var(--muted); font-weight: 600; }
.rr-results li span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rr-results li strong { font: 800 1.0625rem var(--font-display); }
.rr-results li.is-me { background: rgba(255, 201, 40, .16); outline: 1px solid var(--yellow); }
.rr-board.is-big { max-width: 900px; }
.rr-board.is-big li { padding: 12px 16px; font-size: 1.25rem; }
.rr-board.is-big li strong { font-size: 1.5rem; }

/* Spectating a live game (spectate.js): River Rush race screen, Knockout host, class page live game */
.spectate { display: grid; gap: 10px; padding: 14px; border-radius: var(--radius-md); background: var(--navy-800); border: 1px solid var(--line); }
.spec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.spec-title { font-weight: 600; color: var(--muted); }
.spec-title strong { color: var(--yellow); font: 800 1.125rem var(--font-display); }
.spec-auto[aria-pressed="true"] { background: rgba(255, 201, 40, .16); border-color: var(--yellow); color: var(--yellow); }
.spec-timer { height: 4px; border-radius: 999px; background: rgba(143, 168, 255, .18); overflow: hidden; }
.spec-timer span { display: block; height: 100%; width: 0; background: var(--yellow); transition: width .2s linear; }
.spec-slider { display: flex; align-items: center; gap: 8px; min-width: 0; }
.spec-arrow { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--navy-900, #06103a); color: var(--ink); cursor: pointer; }
.spec-arrow:hover { border-color: var(--yellow); }
.spec-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.spec-strip { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; padding: 2px; }
.spec-chip { flex: none; scroll-snap-align: center; display: grid; gap: 1px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--navy-900, #06103a); color: var(--ink); font: 600 .9375rem var(--font-body); text-align: center; cursor: pointer; }
.spec-chip small { font-size: .75rem; font-weight: 500; color: var(--muted); }
.spec-chip.is-done { opacity: .55; }
.spec-chip[aria-checked="true"] { background: var(--yellow); border-color: var(--yellow); color: var(--navy-900); opacity: 1; }
.spec-chip[aria-checked="true"] small { color: var(--navy-900); }
.spec-chip:focus-visible, .spec-arrow:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.spec-empty { color: var(--muted); padding: 8px 4px; }
.spec-info:empty { display: none; }
.spec-info { color: var(--soft-ink); }
.spec-q { font-weight: 700; color: var(--ink); margin: 6px 0 8px; }
.spec-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.spec-opts li { padding: 8px 12px; border-radius: var(--radius-sm); background: rgba(13, 29, 92, .7); border: 1px solid var(--line); }
.spec-opts li.is-picked { border-color: var(--yellow); }
.spec-opts li.is-correct { background: var(--correct); border-color: var(--correct); color: var(--navy-900); }
.spec-opts li.is-wrong { background: var(--wrong); border-color: var(--wrong); color: var(--navy-900); }
.spec-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.spec-stat strong { font: 800 1.125rem var(--font-display); color: var(--ink); }
.spec-tag { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8125rem; font-weight: 700; background: rgba(143, 168, 255, .2); }
.spec-tag.is-right { background: var(--correct); color: var(--navy-900); }
.spec-tag.is-wrong { background: var(--wrong); color: var(--navy-900); }
@media (max-width: 560px) { .spec-opts { grid-template-columns: minmax(0, 1fr); } }
/* River Rush: the teacher's screen follows a player down the river */
.rr-watching .ys-hud, .rr-watching .ys-controls, .rr-watching .ys-keys { display: none; }
.rr-watching .ys-stage { border-radius: var(--radius-md); }
#rr-watch { margin-bottom: 10px; }
.rr-live.is-compact { padding: 12px 16px; margin-bottom: 10px; }
.rr-watch-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.rr-watch-head h2, .rr-watch-head p { margin: 0; }
.rr-watch-head .btn { margin-left: auto; }
#live-watch, .ko-watch { margin-top: 14px; }

/* Games fill the page (OtterFull in common.js), like Blooket: no site header or footer,
   just a slim bar with the logo and the game taking up the rest of the page */
body.game-full { overflow: hidden; }
body.game-full .site-header, body.game-full .site-footer, body.game-full .skip-link, body.game-full .page-hero { display: none; }
.full-game {
  position: fixed; inset: 0; z-index: 50; overflow-y: auto; overscroll-behavior: contain;
  padding: 56px clamp(8px, 2vw, 24px) 12px; max-width: none; margin: 0;
  background: var(--navy-900, #06103a);
}
.full-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 55; height: 46px;
  display: flex; align-items: center; padding: 0 clamp(10px, 2vw, 24px);
  background: var(--navy-800); border-bottom: 1px solid var(--line);
}
.full-bar-logo { height: 22px; width: auto; }
/* Classic Battle stretches to fill the page: question on top, big answer tiles below */
.full-game > .game-arena { max-width: none; min-height: 100%; display: flex; flex-direction: column; }
.full-game > .game-arena > .game-stage { flex: 1; display: flex; flex-direction: column; }
.full-game > .game-arena .arena-question { padding: clamp(18px, 3vh, 36px); }
.full-game > .game-arena .q-text { font-size: clamp(1.25rem, 3.2vw, 2.25rem); }
.full-game > .game-arena .answers { flex: 1; grid-auto-rows: minmax(64px, 1fr); min-height: min(32vh, 300px); }
.full-game > .game-arena .answer { font-size: clamp(1rem, 1.8vw, 1.375rem); padding: 14px 18px; }
/* The canvas games keep their shape and fit the window under the bar */
.full-game .ys-game { --ys-chrome: 175px; }
@media (hover: none), (max-width: 900px) { .full-game .ys-game { --ys-chrome: 235px; } }
.full-bar-home { display: inline-flex; align-items: center; padding: 6px 4px; border-radius: 8px; }
.full-bar-home:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

/* ==========================================================================
   Seasonal themes (js/theme.js sets <html data-theme> by date)
   Halloween is dark like the default; Easter and Christmas are light pages, with the game
   cards (the demo battle, games and Knockout) kept as dark "islands" in the season's green.
   ========================================================================== */

/* --- Halloween: Berry Pop (deep purple, mint and pink) --- */
html[data-theme="halloween"] {
  --navy-900: #22103A; --navy-800: #34175A; --navy-700: #45207A;
  --royal: #7B2FBF; --royal-600: #5E2299; --royal-300: #FF7AC6;
  --yellow: #7CF2C4; --yellow-600: #3FCF97;
  --ink: #F8F0FF; --muted: #CDB9EA; --soft-ink: #E3D4F7; --line: rgba(205, 185, 234, .2);
}
html[data-theme="halloween"] .site-header { background: rgba(28, 12, 48, .92); }
html[data-theme="halloween"] .hero,
html[data-theme="halloween"] .page-hero { background: radial-gradient(1000px 520px at 85% 10%, rgba(123, 47, 191, .5), transparent 65%), var(--navy-900); }
html[data-theme="halloween"] .btn-yellow:hover { background: #A2F7D7; }
html[data-theme="halloween"] .arena { border-color: rgba(124, 242, 196, .7); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55), 0 0 0 8px rgba(123, 47, 191, .25); }

/* --- Easter: Spring (sky blue, grass green and sunny yellow) --- */
html[data-theme="easter"] {
  --navy-900: #DDEFFB; --navy-800: #FFFFFF; --navy-700: #EAF5FC;
  --royal: #2E8B57; --royal-600: #23704A; --royal-300: #2E7D32;
  --yellow: #2E7D32; --yellow-600: #1F5E24;
  --ink: #17324D; --muted: #4A6077; --soft-ink: #3E566D; --line: rgba(23, 50, 77, .14);
}
/* Easter's buttons stay sunny yellow; green is for headings and links */
html[data-theme="easter"] .btn-yellow { background: #FFC928; color: #17324D; box-shadow: 0 4px 0 #E0A800; }
html[data-theme="easter"] .btn-yellow:hover { background: #FFD45A; }
html[data-theme="easter"] .site-header { background: rgba(255, 255, 255, .94); }
html[data-theme="easter"] .hero { background: #DDEFFB; padding-bottom: 40px; }
html[data-theme="easter"] .page-hero { background: #DDEFFB; }
/* Rolling green hills along the bottom of the homepage's top section */
html[data-theme="easter"] .hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(160px, 30vw, 300px); z-index: 0; pointer-events: none;
  /* (on phones the demo battle sits under the text, so the hills start higher to put it on the grass) */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20' preserveAspectRatio='none'%3E%3Cpath d='M0 12 Q15 0 30 12 T60 12 T90 12 T120 12 V20 H0Z' fill='%237BC67B'/%3E%3C/svg%3E") top / 240px 34px repeat-x,
    linear-gradient(#7BC67B, #7BC67B) 0 33px / 100% 100% no-repeat;
}

/* --- Christmas: Candy Cane (cream, berry red and holly green) --- */
html[data-theme="christmas"] {
  --navy-900: #FFF8F2; --navy-800: #FFFFFF; --navy-700: #F8ECE3;
  --royal: #D7263D; --royal-600: #B01E31; --royal-300: #1F7A4D;
  --yellow: #D7263D; --yellow-600: #A51C2E;
  --ink: #2A1215; --muted: #6E5558; --soft-ink: #5B4346; --line: rgba(42, 18, 21, .12);
}
html[data-theme="christmas"] .btn-yellow { color: #FFFFFF; }
html[data-theme="christmas"] .btn-yellow:hover { background: #E8475B; }
html[data-theme="christmas"] .site-header { background: rgba(255, 255, 255, .95); }
/* A candy-cane stripe along the very top */
html[data-theme="christmas"] .site-header::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px;
  background: repeating-linear-gradient(-45deg, #D7263D 0 12px, #FFFFFF 12px 24px);
}
html[data-theme="christmas"] .hero,
html[data-theme="christmas"] .page-hero { background: radial-gradient(900px 480px at 90% 0%, rgba(215, 38, 61, .08), transparent 65%), #FFF8F2; }

/* --- Light themes: the logo goes dark on the white header, and the game cards are dark green islands --- */
html[data-theme="easter"] .brand-logo, html[data-theme="easter"] .full-bar-logo,
html[data-theme="christmas"] .brand-logo, html[data-theme="christmas"] .full-bar-logo { filter: brightness(0) opacity(.85); }
html[data-theme="easter"] .arena, html[data-theme="easter"] .ys-game, html[data-theme="easter"] .tl-game, html[data-theme="easter"] .ko-card {
  --navy-900: #164F2E; --navy-800: #1F7A44; --navy-700: #26894E;
  --royal: #1F7A44; --royal-600: #1A6A3B; --royal-300: #BFE8C9;
  --yellow: #FFC928; --yellow-600: #E0A800;
  --ink: #FFFFFF; --muted: #D5EEDC; --soft-ink: #E3F4E8; --line: rgba(255, 255, 255, .22);
  color: var(--ink);
}
html[data-theme="christmas"] .arena, html[data-theme="christmas"] .ys-game, html[data-theme="christmas"] .tl-game, html[data-theme="christmas"] .ko-card {
  --navy-900: #154A33; --navy-800: #1F6B4A; --navy-700: #26795A;
  --royal: #1F6B4A; --royal-600: #185B3E; --royal-300: #FFB3BD;
  --yellow: #FFC928; --yellow-600: #E0A800;
  --ink: #FFFFFF; --muted: #D3EADF; --soft-ink: #E4F2EB; --line: rgba(255, 255, 255, .22);
  color: var(--ink);
}
html[data-theme="easter"] .btn-yellow, html[data-theme="christmas"] .arena .btn-yellow { color: #17324D; }
html[data-theme="easter"] .arena { border-color: #164F2E; box-shadow: 0 8px 0 #12402A, 0 30px 60px -20px rgba(23, 50, 77, .35); }
html[data-theme="christmas"] .arena { border-color: #D7263D; box-shadow: 0 8px 0 #A51C2E, 0 30px 60px -20px rgba(42, 18, 21, .3); }
/* Light themes: white answer buttons on the green card */
html[data-theme="easter"] .arena .answer, html[data-theme="christmas"] .arena .answer { background: #FFFFFF; border-color: #FFFFFF; color: #17324D; }
html[data-theme="christmas"] .arena .answer { color: #2A1215; }
html[data-theme="easter"] .arena .answer:hover:not(:disabled) { background: #FFF6D6; border-color: #FFC928; }
html[data-theme="christmas"] .arena .answer:hover:not(:disabled) { background: #FFF0F2; border-color: #FFB3BD; }
html[data-theme="easter"] .arena .answer .answer-key { background: #FFF2C4; color: #17324D; }
html[data-theme="christmas"] .arena .answer .answer-key { background: #FFE3E7; color: #A51C2E; }
html[data-theme="easter"] .arena .answer.is-correct, html[data-theme="christmas"] .arena .answer.is-correct { background: var(--correct); border-color: var(--correct); color: #0B2A18; }
html[data-theme="easter"] .arena .answer.is-wrong, html[data-theme="christmas"] .arena .answer.is-wrong { background: var(--wrong); border-color: var(--wrong); color: #2A0B0B; }
html[data-theme="christmas"] .arena .timer span { background: repeating-linear-gradient(-45deg, #D7263D 0 6px, #FFFFFF 6px 12px); }

/* Light themes: the help line under Yellow Submarine and Swim! sits on the page, not the green card */
html[data-theme="easter"] .ys-game .ys-keys, html[data-theme="easter"] .tl-game .ys-keys { color: #4A6077; }
html[data-theme="christmas"] .ys-game .ys-keys, html[data-theme="christmas"] .tl-game .ys-keys { color: #6E5558; }

/* Light themes: bars that sit over the page (leaderboard "you" bar, exam questions score bar) go light too */
html[data-theme="easter"] .you-bar, html[data-theme="christmas"] .you-bar,
html[data-theme="easter"] .q-score-bar, html[data-theme="christmas"] .q-score-bar { background: rgba(255, 255, 255, .96); }

/* --- The homepage bubbles become snowflakes, Easter eggs or climbing spiders --- */
/* Christmas: snowflakes drifting down (the rising animation, played backwards) */
html[data-theme="christmas"] .hero-bubbles span {
  border: 0; border-radius: 0; width: calc(var(--s) * 1.4); height: calc(var(--s) * 1.4); animation-direction: reverse;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393B4D6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M20.7 7L3.3 17M9 4l3 2 3-2M9 20l3-2 3 2M4 10.5l3.5-.5-1-3.3M20 13.5l-3.5.5 1 3.3M4 13.5l3.5.5-1 3.3M20 10.5l-3.5-.5 1-3.3'/%3E%3C/svg%3E");
}
/* Easter: pastel eggs floating down */
html[data-theme="easter"] .hero-bubbles span {
  border: 0; width: calc(var(--s) * 1.3); height: calc(var(--s) * 1.65); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; animation-direction: reverse;
  background: linear-gradient(transparent 38%, rgba(255, 255, 255, .85) 38% 50%, transparent 50% 62%, rgba(255, 255, 255, .55) 62% 70%, transparent 70%), var(--egg, #FF8CC6);
  box-shadow: inset -3px -4px 0 rgba(0, 0, 0, .08);
}
html[data-theme="easter"] .hero-bubbles span:nth-child(5n + 1) { --egg: #FF8CC6; }
html[data-theme="easter"] .hero-bubbles span:nth-child(5n + 2) { --egg: #FFD84D; }
html[data-theme="easter"] .hero-bubbles span:nth-child(5n + 3) { --egg: #8FD3FF; }
html[data-theme="easter"] .hero-bubbles span:nth-child(5n + 4) { --egg: #B98CFF; }
html[data-theme="easter"] .hero-bubbles span:nth-child(5n + 5) { --egg: #7BE0A8; }
/* Halloween: little spiders let themselves down from the top of the hero on their threads, dangle,
   then climb back up. Each drops a different distance (--k, a share of --spider-max); js/theme.js
   sets --spider-max on each spider to just above whatever is below it (text, a button or the demo
   battle), and never lower than the "Start revising free" button. */
html[data-theme="halloween"] .hero-bubbles span {
  border: 0; border-radius: 0; width: max(20px, calc(var(--s) * 2)); height: max(20px, calc(var(--s) * 2));
  top: 0; bottom: auto;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='rotate(180 12 12)'%3E%3Cg stroke='%23EBDDFF' stroke-width='1.6' fill='none' stroke-linecap='round'%3E%3Cpath d='M9 10L4 6M9 12H3M9 14l-5 4M15 10l5-4M15 12h6M15 14l5 4'/%3E%3C/g%3E%3Cellipse cx='12' cy='13' rx='4' ry='5' fill='%23EBDDFF'/%3E%3Ccircle cx='12' cy='7' r='2.6' fill='%23EBDDFF'/%3E%3Ccircle cx='11' cy='6.6' r='.7' fill='%2322103A'/%3E%3Ccircle cx='13' cy='6.6' r='.7' fill='%2322103A'/%3E%3C/g%3E%3C/svg%3E");
}
/* each spider hangs from its silk thread, running up to the top of the hero */
html[data-theme="halloween"] .hero-bubbles span::after {
  content: ""; position: absolute; left: 50%; bottom: 85%; width: 1px; height: 2000px; transform: translateX(-50%);
  background: rgba(235, 221, 255, .45);
}
/* four spiders (the 3rd, 5th and 8th are left out), each dropping a different distance */
html[data-theme="halloween"] .hero-bubbles span:nth-child(1) { --k: .6; }
html[data-theme="halloween"] .hero-bubbles span:nth-child(4) { --k: 1; }
html[data-theme="halloween"] .hero-bubbles span:nth-child(7) { --k: .35; }
html[data-theme="halloween"] .hero-bubbles span:nth-child(9) { --k: .8; }
html[data-theme="halloween"] .hero-bubbles span:is(:nth-child(3), :nth-child(5), :nth-child(8)) { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html[data-theme="halloween"] .hero-bubbles span {
    opacity: 1; animation: spider-dangle calc(var(--t) * 1.3) calc(var(--d) * -1.7) ease-in-out infinite;
  }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
  html[data-theme="halloween"] .hero-bubbles span { animation-duration: calc(var(--t) * 1.3); animation-delay: calc(var(--d) * -1.7); }
}
/* the spider's bottom edge stops at --spider-max x --k below the top of the hero */
@keyframes spider-dangle {
  0%, 8%   { transform: translateY(-120%); }
  42%      { transform: translateY(calc(var(--spider-max, 220px) * var(--k, .6) - 100%)); }
  50%      { transform: translateY(calc(var(--spider-max, 220px) * var(--k, .6) - 100% - 8px)); }
  58%      { transform: translateY(calc(var(--spider-max, 220px) * var(--k, .6) - 100%)); }
  92%, 100% { transform: translateY(-120%); }
}
/* ... and every fourth one (2nd, 6th, 10th) is a little white ghost floating up (no thread), with flappy arms and
   a trailing tail; the middle one faces the other way */
html[data-theme="halloween"] .hero-bubbles span:nth-child(4n + 2) {
  filter: opacity(.7);   /* a little see-through (the rise animation sets opacity itself) */
  top: auto; bottom: -60px;   /* they rise from the bottom (the spiders hang from the top) */
  width: max(38px, calc(var(--s) * 2.8)); height: max(38px, calc(var(--s) * 2.8));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M15 19.5C14 10 19 4.5 24 4.5C29 4.5 34 10 33.5 19.5C35 17 38.5 16.5 39.5 20C40.5 24 40.5 28 39.5 30.5C38.5 31.5 37.5 30.5 37 29.5C36.5 31.5 34.5 32 34 30C32 37 26 42 18 44.5C16.5 45 16 44 17 43C20 40 21 37 19.5 35C18 33.5 16.5 34.5 15 33.5C13.5 33 14 31 12.5 30.5C11 31.5 9.5 31.5 9 30C8 27 8 23 9 20.5C10 17.5 13.5 17 15 19.5Z' fill='%23FFFFFF' stroke='%2322103A' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M15.4 27.5L15.6 32.8M33.4 27.5L33.8 30.5M36.6 26.5L37 29.5' stroke='%2322103A' stroke-width='1.4' stroke-linecap='round' fill='none'/%3E%3Cellipse cx='21' cy='13.8' rx='1.7' ry='2.4' transform='rotate(12 21 13.8)' fill='%2322103A'/%3E%3Cellipse cx='27.2' cy='13.8' rx='1.7' ry='2.4' transform='rotate(-12 27.2 13.8)' fill='%2322103A'/%3E%3C/svg%3E");
}
html[data-theme="halloween"] .hero-bubbles span:nth-child(6) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform='matrix(-1 0 0 1 48 0)'%3E%3Cpath d='M15 19.5C14 10 19 4.5 24 4.5C29 4.5 34 10 33.5 19.5C35 17 38.5 16.5 39.5 20C40.5 24 40.5 28 39.5 30.5C38.5 31.5 37.5 30.5 37 29.5C36.5 31.5 34.5 32 34 30C32 37 26 42 18 44.5C16.5 45 16 44 17 43C20 40 21 37 19.5 35C18 33.5 16.5 34.5 15 33.5C13.5 33 14 31 12.5 30.5C11 31.5 9.5 31.5 9 30C8 27 8 23 9 20.5C10 17.5 13.5 17 15 19.5Z' fill='%23FFFFFF' stroke='%2322103A' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M15.4 27.5L15.6 32.8M33.4 27.5L33.8 30.5M36.6 26.5L37 29.5' stroke='%2322103A' stroke-width='1.4' stroke-linecap='round' fill='none'/%3E%3Cellipse cx='21' cy='13.8' rx='1.7' ry='2.4' transform='rotate(12 21 13.8)' fill='%2322103A'/%3E%3Cellipse cx='27.2' cy='13.8' rx='1.7' ry='2.4' transform='rotate(-12 27.2 13.8)' fill='%2322103A'/%3E%3C/g%3E%3C/svg%3E");
}
html[data-theme="halloween"] .hero-bubbles span:nth-child(4n + 2)::after { content: none; }
/* The ghosts float up rather than climb: a steady rise that never stops, while a second animation
   sways them smoothly from side to side, tilting into each swing */
@media (prefers-reduced-motion: no-preference) {
  html[data-theme="halloween"] .hero-bubbles span:nth-child(4n + 2) {
    animation: ghost-rise var(--t) var(--d) linear infinite backwards, ghost-sway 3.4s calc(var(--d) * -1) ease-in-out infinite alternate;
  }
  html[data-theme="halloween"] .hero-bubbles span:nth-child(6) { animation-direction: normal, alternate-reverse; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
  html[data-theme="halloween"] .hero-bubbles span:nth-child(4n + 2) {
    animation-duration: calc(var(--t) * 1.8), 3.4s; animation-delay: calc(var(--d) * -2.2 - 4s), calc(var(--d) * -1);
  }
}
@keyframes ghost-rise {
  0% { bottom: -60px; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: .8; }
  100% { bottom: 100%; opacity: 0; }
}
@keyframes ghost-sway {
  from { transform: translateX(-18px) rotate(-6deg); }
  to   { transform: translateX(18px) rotate(6deg); }
}
@media (max-width: 960px) {
  html[data-theme="easter"] .hero::after { height: 44%; }
}

/* --- Settings > Theme: a radio card for each theme, with a little colour swatch --- */
.theme-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 16px 0 0; padding: 0; border: 0; }
.theme-option {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-md);
  border: 2px solid var(--line); background: var(--navy-900); cursor: pointer;
}
.theme-option:hover { border-color: var(--royal-300); }
.theme-option:has(input:checked) { border-color: var(--yellow); }
.theme-option:has(input:focus-visible) { outline: 2px solid var(--yellow); outline-offset: 2px; }
.theme-option input { position: absolute; opacity: 0; pointer-events: none; }
.theme-swatch { position: relative; flex: none; width: 52px; height: 40px; border-radius: 10px; background: var(--sw-bg); border: 1px solid rgba(128, 128, 160, .35); overflow: hidden; }
.theme-swatch i:first-child { position: absolute; left: 8px; right: 8px; top: 9px; bottom: 9px; border-radius: 6px; background: var(--sw-card); }
.theme-swatch i:last-child { position: absolute; right: 6px; bottom: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--sw-accent); }
.theme-text { display: grid; gap: 2px; min-width: 0; }
.theme-text strong { font-weight: 700; }
.theme-text span { font-size: .8125rem; color: var(--muted); }
.theme-option:has(input:checked) .theme-text strong::after { content: " ✓"; color: var(--yellow); }

/* ==========================================================================
   Light theme (Settings > Theme > Light): bright page, navy text, royal blue and yellow
   ========================================================================== */
html[data-theme="light"] {
  --navy-900: #F5F6FF; --navy-800: #FFFFFF; --navy-700: #EEF0FF;
  --royal: #2348E0; --royal-600: #1B3BC0; --royal-300: #2348E0;
  --yellow: #2348E0; --yellow-600: #1B3BC0;
  --ink: #0D1A4F; --muted: #4B5785; --soft-ink: #3D4A7A; --line: rgba(13, 26, 79, .13);
}
/* Buttons stay sunny yellow with navy text; blue is for headings, links and outlines */
html[data-theme="light"] .btn-yellow { background: #FFC928; color: #0D1A4F; box-shadow: 0 4px 0 #E0A800; }
html[data-theme="light"] .btn-yellow:hover { background: #FFD45A; }
html[data-theme="light"] .btn-outline { border-color: #2348E0; color: #2348E0; }
html[data-theme="light"] .site-header { background: rgba(255, 255, 255, .95); }
html[data-theme="light"] .brand-logo, html[data-theme="light"] .full-bar-logo { filter: brightness(0) opacity(.85); }
html[data-theme="light"] .hero,
html[data-theme="light"] .page-hero { background: radial-gradient(900px 460px at 90% 0%, rgba(35, 72, 224, .08), transparent 65%), #F5F6FF; }
html[data-theme="light"] .you-bar, html[data-theme="light"] .q-score-bar { background: rgba(255, 255, 255, .96); }
html[data-theme="light"] .hero-bubbles span { border-color: rgba(35, 72, 224, .3); background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .9), rgba(35, 72, 224, .08) 60%); }

/* "fights back." in blue with the usual underline, in yellow */
html[data-theme="light"] .fb-scribble path { stroke: #FFC928; opacity: 1; }

/* The battle card: white with a navy outline and a blue edge, and a blue question box */
html[data-theme="light"] .arena { background: #FFFFFF; border: 2px solid #0D1A4F; box-shadow: 0 8px 0 #2348E0, 0 30px 60px -24px rgba(13, 26, 79, .3); }
html[data-theme="light"] .arena-tag { background: #EEF0FF; }
html[data-theme="light"] .meter { background: #E3E7FA; }
html[data-theme="light"] .avatar-rival { background: #EEF0FF; color: #2348E0; border-color: #2348E0; }
html[data-theme="light"] .arena-question { background: #2348E0; color: #FFFFFF; }
html[data-theme="light"] .arena-question .q-meta { color: #D6DEFF; }
html[data-theme="light"] .arena-question .timer { background: rgba(255, 255, 255, .25); }
html[data-theme="light"] .arena-question .timer span { background: #FFC928; }
html[data-theme="light"] .arena .answer { background: #FFFFFF; border-color: #CDD3F5; color: #0D1A4F; }
html[data-theme="light"] .arena .answer:hover:not(:disabled) { border-color: #2348E0; background: #F5F7FF; }
html[data-theme="light"] .arena .answer .answer-key { background: #EEF0FF; color: #0D1A4F; }
html[data-theme="light"] .arena .answer.is-correct { background: var(--correct); border-color: var(--correct); color: #0B2A18; }
html[data-theme="light"] .arena .answer.is-wrong { background: var(--wrong); border-color: var(--wrong); color: #2A0B0B; }
html[data-theme="light"] .game-review li { background: #F2F4FF; }
/* Yellow Submarine, Swim! and Knockout keep the classic dark look inside their game cards */
html[data-theme="light"] .ys-game, html[data-theme="light"] .tl-game, html[data-theme="light"] .ko-card {
  --navy-900: #07123F; --navy-800: #0D1D5C; --navy-700: #142873;
  --royal: #2348E0; --royal-600: #1B3BC0; --royal-300: #8FA8FF;
  --yellow: #FFC928; --yellow-600: #F2B100;
  --ink: #F4F6FF; --muted: #B8C3EC; --soft-ink: #DCE3FF; --line: rgba(143, 168, 255, .2);
  color: var(--ink);
}
html[data-theme="light"] .ys-game .btn-yellow, html[data-theme="light"] .tl-game .btn-yellow, html[data-theme="light"] .ko-card .btn-yellow { color: #07123F; }
html[data-theme="light"] .ys-game .btn-outline, html[data-theme="light"] .tl-game .btn-outline, html[data-theme="light"] .ko-card .btn-outline { border-color: #8FA8FF; color: #F4F6FF; }
html[data-theme="light"] .ys-game .ys-keys, html[data-theme="light"] .tl-game .ys-keys { color: #4B5785; }
#tl-online { display: inline-flex; align-items: center; gap: 8px; }
#tl-online svg { width: 20px; height: 20px; flex: none; }

/* Leaderboard: everyone is listed, 100 at a time */
.lb-more { display: grid; justify-items: center; gap: 10px; margin-top: 18px; }
.lb-more-count { color: var(--muted); font-size: .875rem; }

/* A page heading with a button at the top right (e.g. Ranked: Play other game modes) */
.hero-split { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px 32px; }
.hero-split-btn { flex: none; display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; }
.hero-split-btn svg { width: 18px; height: 18px; }
@media (max-width: 760px) {
  .hero-split { flex-direction: column; }
  .hero-split-btn { margin-top: 0; }
}

/* XP and Shells pop-ups (OtterPop in js/common.js): a little firework at a random spot */
.pop-layer { position: fixed; inset: 0; z-index: 300; pointer-events: none; overflow: hidden; }
.pop-reward { position: absolute; transform: translate(-50%, -50%); animation: pop-rise 1.8s cubic-bezier(.2, .8, .3, 1) forwards; }
.pop-sparks { position: absolute; left: 50%; top: 50%; }
.pop-sparks i { position: absolute; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; animation: pop-spark .9s ease-out forwards; }
.pop-sparks i:nth-child(3n) { width: 5px; height: 5px; border-radius: 1px; }
.pop-chips { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.pop-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px 5px 8px; border-radius: 999px; white-space: nowrap;
  font: 800 1.125rem var(--font-display, sans-serif); background: rgba(7, 18, 63, .9);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35); border: 2px solid currentColor;
}
.pop-chip svg { width: 22px; height: 22px; flex: none; }
.pop-chip.is-xp { color: #3DDC97; }
.pop-chip.is-shells { color: #FFC928; }
@keyframes pop-rise {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  24% { transform: translate(-50%, -50%) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 46px)) scale(.95); }
}
@keyframes pop-spark {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); }
}
@media (prefers-reduced-motion: reduce) {
  .pop-reward { animation: pop-fade 1.8s ease forwards; }
  @keyframes pop-fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
}

/* Exam questions: collect XP and Shells once every question is answered */
.q-collect { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 20px; padding: 18px 22px; border-radius: var(--radius-md); background: var(--navy-800); border: 2px solid var(--yellow); }
.q-collect p { font-size: 1.0625rem; }
.q-collect a { color: var(--yellow); font-weight: 600; }
.q-collected strong { color: var(--correct); }

/* The Kraken Otter: a skin you win, not buy */
.btn-unlock { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn-unlock svg { width: 15px; height: 15px; flex: none; }
.item-unlock { color: #C77DFF; font-weight: 700; }
.kraken-skin { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 12px 16px; border-radius: 16px; background: rgba(126, 51, 153, .35); border: 2px solid #7FF0D4; text-align: left; }
.kraken-skin img { width: 84px; height: auto; flex: none; }
.kraken-skin-title { font: 800 1.25rem var(--font-display); color: #7FF0D4; }
.kraken-skin a { color: #FFC928; font-weight: 700; }

/* "You're already logged in" pop-up (js/account.js) */
#already-in .modal-close { display: block; margin: 16px auto 0; color: var(--muted); }

/* Flashcards on phones: the links under the deck wrap neatly, and keyboard hints give way to touch ones */
.fc-tools { flex-wrap: wrap; gap: 10px 24px; padding-inline: 8px; }
.hint-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .hint-pointer, .fc-keys-study { display: none; }
  .hint-touch { display: inline; }
}
@media (max-width: 420px) {
  .fc-tools { gap: 10px 18px; font-size: .9375rem; }
}