:root {
  --bg:#f7f9ff;
  --surface:#fff;
  --text:#17213b;
  --muted:#7986a2;
  --primary:#536df0;
  --violet:#8c78e9;
  --success:#39bba8;
  --danger:#e97777;
  --border:#e8ecf3;
  --shadow:0 5px 22px #19223804,0 1px 3px #19223803;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:var(--bg);
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
}

* {
  box-sizing:border-box;
}

html {
  min-width:280px;
  min-height:100%;
}

body {
  min-height:100dvh;
  margin:0;
}

button,a {
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

button {
  font:inherit;
  cursor:pointer;
  transition:background 180ms,border-color 180ms,box-shadow 180ms,transform 180ms;
}

button:disabled {
  cursor:default;
  opacity:.5;
}

button:focus-visible,a:focus-visible {
  outline:3px solid #5672e880;
  outline-offset:4px;
}

a {
  color:inherit;
  text-decoration:none;
}

h1,h2,p {
  margin:0;
}

.icon {
  width:22px;
  height:22px;
  flex:none;
  vertical-align:middle;
}

.shell {
  max-width:1080px;
  min-height:100dvh;
  margin:0 auto;
  padding:env(safe-area-inset-top) max(28px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(28px,env(safe-area-inset-left));
  display:flex;
  flex-direction:column;
}

.topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:30px 0 24px;
  border-bottom:1px solid var(--border);
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:11px;
  font-size:22px;
  font-weight:750;
  letter-spacing:-.7px;
  white-space:nowrap;
}

.brand-mark {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:14px;
  background:#eef1ff;
  color:var(--primary);
}

.brand-mark .icon {
  width:27px;
  height:27px;
}

.brand-accent {
  color:var(--primary);
}

.topbar-right {
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:12px;
}

.topbar-right .icon {
  width:16px;
  height:16px;
  color:var(--primary);
}

.version {
  margin-left:7px;
  padding:4px 7px;
  border:1px solid var(--border);
  border-radius:6px;
  font-size:10px;
  letter-spacing:.5px;
}

main {
  flex:1;
  width:100%;
  min-width:0;
}

.footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:#8792a6;
  font-size:11px;
  line-height:1.6;
  margin-top:40px;
  padding:20px 0 12px;
  border-top:1px solid var(--border);
}

.footer span:last-child {
  display:flex;
  align-items:center;
  gap:5px;
}

.eyebrow {
  color:var(--primary);
  font-size:10px;
  font-weight:700;
  letter-spacing:1.8px;
  line-height:1.6;
}

.hero {
  display:grid;
  grid-template-columns:1fr 280px;
  align-items:center;
  gap:48px;
  padding:52px 0 48px;
}

.hero h1 {
  margin:16px 0 17px;
  font-size:clamp(40px,4.7vw,58px);
  line-height:1.12;
  letter-spacing:-2.4px;
  font-weight:750;
}

.hero h1 span {
  color:var(--primary);
}

.hero-sub {
  color:#5b6781;
  font-size:18px;
  line-height:1.6;
}

.hero-detail {
  margin-top:11px;
  color:var(--muted);
  font-size:13px;
  line-height:1.8;
}

.best-card {
  text-align:center;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:24px;
  box-shadow:var(--shadow);
  padding:25px 22px 0;
}

.best-icon {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:13px;
  background:#f1edfc;
  color:#947ad7;
  margin:0 auto 14px;
}

.best-card-label {
  font-size:12px;
  color:var(--muted);
}

.best-card-score {
  color:var(--text);
  font-size:58px;
  line-height:1.2;
  letter-spacing:-2px;
  font-weight:750;
  margin-top:5px;
}

.best-card-score span {
  margin-left:8px;
  font-size:16px;
  font-weight:550;
  letter-spacing:0;
  color:#9aa4b7;
}

.best-card-note {
  margin-top:5px;
  font-size:11px;
  color:var(--muted);
}

.best-card-bottom {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:22px;
  padding:14px 0;
  border-top:1px solid #f0f2f7;
  color:#9a8cbd;
  font-size:10px;
}

.best-card-bottom .icon {
  width:14px;
  height:14px;
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:19px;
}

.section-heading h2 {
  font-size:20px;
  letter-spacing:-.5px;
  font-weight:650;
}

.section-note {
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}

.mode-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.mode-card {
  position:relative;
  min-width:0;
  min-height:242px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  padding:25px 24px 21px;
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:var(--shadow);
}

.mode-card.featured {
  border-color:#c1cbf7;
}

.mode-icon {
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:15px;
  background:#fff4e8;
  color:#d1a267;
  margin-bottom:22px;
}

.mode-icon .icon {
  width:24px;
  height:24px;
}

.featured .mode-icon {
  color:var(--primary);
  background:#eef1ff;
}

.mode-card[data-mode="daily"] .mode-icon {
  color:#3aa38d;
  background:#eaf7f2;
}

.mode-tag {
  position:absolute;
  right:19px;
  top:28px;
  color:var(--primary);
  background:#f0f3ff;
  padding:6px 8px;
  border-radius:6px;
  font-size:8px;
  font-weight:650;
  letter-spacing:.5px;
}

.mode-title {
  font-size:19px;
  font-weight:650;
  letter-spacing:-.5px;
}

.mode-description {
  color:var(--muted);
  font-size:12px;
  line-height:1.75;
  margin-top:9px;
}

.mode-bottom {
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-top:auto;
  padding-top:22px;
  font-size:10px;
  color:#8c96a9;
}

.dot {
  margin:0 3px;
  color:#b1b9c7;
}

.arrow {
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:#f6f8fc;
  color:#8391b0;
}

.arrow .icon {
  width:17px;
  height:17px;
}

.featured .arrow {
  background:var(--primary);
  color:#fff;
}

.leaderboard-button {
  width:100%;
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:22px;
  padding:19px 24px;
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--surface);
  color:var(--text);
  box-shadow:var(--shadow);
  text-align:left;
  font-size:14px;
  font-weight:650;
}

.leaderboard-button-icon {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:13px;
  background:#f6f1ff;
  color:#9a83d2;
}

.leaderboard-button small {
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:11px;
  font-weight:400;
}

.leaderboard-button>.icon {
  margin-left:auto;
  color:#9ba7c0;
  width:18px;
  height:18px;
}

.tip-line {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin-top:21px;
  color:#929bb0;
  font-size:11px;
  line-height:1.6;
  text-align:center;
}

.tip-line .icon {
  width:16px;
  height:16px;
  color:#9b91bd;
}

.resume-button {
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  margin:0 0 26px;
  padding:16px 20px;
  border-radius:16px;
  background:#eef1ff;
  border:1px solid #dce3ff;
  color:var(--primary);
  text-align:left;
  font-weight:650;
}

.resume-button small {
  display:block;
  color:var(--muted);
  margin-top:4px;
  font-size:11px;
  font-weight:400;
}

.resume-button>.icon:last-child {
  margin-left:auto;
}

.primary-button,.ghost,.muted-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:46px;
  padding:13px 18px;
  border-radius:14px;
  font-size:13px;
  font-weight:600;
  line-height:1.5;
}

.primary-button {
  background:var(--primary);
  color:#fff;
  border:1px solid var(--primary);
  box-shadow:0 4px 10px #5672e81a;
}

.ghost {
  background:#fff;
  border:1px solid var(--border);
  color:var(--text);
}

.muted-button {
  background:transparent;
  color:var(--muted);
  border:0;
  padding:10px 0;
}

.primary-button .icon,.ghost .icon,.muted-button .icon {
  width:18px;
  height:18px;
}

@media(hover:hover) {
  .mode-card:hover {
    transform:translateY(-3px);
    border-color:#b4c1f8;
    box-shadow:0 10px 28px #19223809;
  }
  .leaderboard-button:hover,.ghost:hover {
    background:#f5f7fe;
    border-color:#c9d2f5;
  }
  .primary-button:hover {
    background:#4964d6;
  }
  .muted-button:hover {
    color:var(--primary);
  }
}

.game-container {
  max-width:720px;
  margin:32px auto 0;
}

.game-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
  margin-bottom:17px;
}

.game-top:first-child {
  margin-bottom:25px;
}

.game-time {
  color:#9aa5b9;
  margin-left:5px;
  font-variant-numeric:tabular-nums;
}

.progress-track {
  height:4px;
  background:#e9edf7;
  border-radius:10px;
  overflow:hidden;
  margin-bottom:25px;
}

.progress-fill {
  height:100%;
  background:var(--primary);
  border-radius:inherit;
  transition:width 200ms;
}

.game-card {
  padding:32px;
  border-radius:24px;
  border:1px solid var(--border);
  background:#fff;
  box-shadow:var(--shadow);
}

.question-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.category-pill {
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#f0f3ff;
  color:var(--primary);
  font-size:11px;
  font-weight:600;
  padding:7px 10px;
  border-radius:9px;
}

.category-pill .icon {
  width:15px;
  height:15px;
}

.difficulty {
  display:inline-flex;
  gap:4px;
  align-items:flex-end;
}

.difficulty span {
  width:5px;
  height:8px;
  border-radius:2px;
  background:#e9edf4;
}

.difficulty span:nth-child(2) {
  height:12px;
}

.difficulty span:nth-child(3) {
  height:16px;
}

.difficulty .lit {
  background:#a18aee;
}

.question-title {
  font-size:27px;
  letter-spacing:-.7px;
  font-weight:650;
  line-height:1.45;
  margin:26px 0;
  overflow-wrap:anywhere;
}

.visual-puzzle {
  display:grid;
  place-items:center;
  text-align:center;
  min-height:100px;
  padding:22px 14px;
  border:1px solid #edf0f7;
  background:#f8faff;
  border-radius:16px;
  font-size:clamp(18px,4.5vw,29px);
  font-weight:600;
  line-height:1.6;
  letter-spacing:1px;
  margin-bottom:24px;
  overflow-wrap:anywhere;
}

.answers {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.answer {
  display:flex;
  align-items:center;
  gap:13px;
  min-height:66px;
  min-width:0;
  padding:12px 15px;
  border:1px solid #e5e9f1;
  border-radius:14px;
  background:#fff;
  color:var(--text);
  font-size:14px;
  font-weight:550;
  line-height:1.5;
  text-align:left;
  overflow-wrap:anywhere;
}

.answer-label {
  display:grid;
  place-items:center;
  width:29px;
  height:29px;
  flex:none;
  background:#f3f5fa;
  color:#8c97ab;
  border-radius:9px;
  font-size:11px;
}

.answer:hover:not(:disabled) {
  border-color:#b2bff2;
  background:#f9faff;
}

.answer:disabled {
  opacity:1;
}

.answer.is-correct {
  background:#effaf6;
  border-color:#9fddce;
}

.answer.is-correct .answer-label {
  color:#22856f;
  background:#d5f1e7;
}

.answer.is-wrong {
  background:#fff5f5;
  border-color:#efb9b9;
}

.answer.is-wrong .answer-label {
  color:#b35454;
  background:#fbe1e1;
}

.answer.dimmed {
  opacity:.42;
}

.feedback {
  border:1px solid #ecdada;
  border-radius:14px;
  background:#fff7f7;
  color:#795858;
  font-size:13px;
  line-height:1.75;
  padding:16px 18px;
  margin-top:20px;
  overflow-wrap:anywhere;
}

.feedback strong {
  display:block;
  margin-bottom:4px;
  font-weight:650;
}

.feedback.good {
  color:#357764;
  background:#f2faf7;
  border-color:#d3ecdf;
}

.bottom-actions {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:24px;
  flex-wrap:wrap;
}

.bottom-actions .section-note {
  font-size:11px;
}

.pill {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  border-radius:10px;
  font-size:11px;
}

.safe-pill {
  color:#32856e;
  background:#eff9f5;
}

.safe-pill .icon {
  width:15px;
  height:15px;
}

.screen-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:22px 0;
  text-align:left;
}

.result {
  max-width:620px;
  margin:0 auto;
  text-align:center;
}

.score-card {
  padding:30px 32px 26px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:var(--shadow);
}

.result-badge {
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:15px;
  background:#eef1ff;
  color:var(--primary);
  margin:0 auto 16px;
}

.result-badge .icon {
  width:28px;
  height:28px;
}

.result .eyebrow {
  font-size:9px;
  letter-spacing:1.4px;
}

.score-caption {
  font-size:12px;
  font-weight:600;
  letter-spacing:2px;
  color:var(--muted);
  margin-top:24px;
}

.score-number {
  font-size:112px;
  font-weight:750;
  color:var(--primary);
  line-height:1.15;
  letter-spacing:-6px;
  margin-bottom:11px;
  font-variant-numeric:tabular-nums;
}

.result h1 {
  font-size:25px;
  font-weight:650;
  letter-spacing:-.6px;
}

.result-lead {
  max-width:360px;
  margin:10px auto;
  font-size:12px;
  line-height:1.7;
  color:var(--muted);
}

.score-out {
  font-size:12px;
  color:#59657d;
  margin-top:15px;
}

.result-stats {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  padding-top:23px;
  margin-top:23px;
  border-top:1px solid var(--border);
}

.stat+.stat {
  border-left:1px solid var(--border);
}

.stat-value {
  font-size:22px;
  font-weight:650;
  letter-spacing:-.5px;
}

.stat-name {
  font-size:10px;
  line-height:1.5;
  color:var(--muted);
  margin-top:5px;
}

.result-badge-mini {
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:23px;
  padding:7px 11px;
  border-radius:8px;
  background:#eff9f5;
  color:#32856e;
  font-size:11px;
}

.result-badge-mini .icon {
  width:15px;
  height:15px;
}

.rank-note {
  font-size:12px;
  color:var(--muted);
  margin-top:18px;
}

.result-actions {
  display:grid;
  gap:12px;
  margin-top:20px;
}

.last-result { margin-top:20px; }
.celebrity-card {
  --celebrity-accent:#5672e8;
  --celebrity-tint:#eef1ff;
  margin-top:20px;
  padding:28px;
  text-align:left;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:var(--shadow);
  animation:celebrity-appear 320ms ease-out;
}
.celebrity-connections { --celebrity-accent:#32856e; --celebrity-tint:#eff9f5; }
.celebrity-discovery { --celebrity-accent:#8060c4; --celebrity-tint:#f4f0fc; }
.celebrity-exploration { --celebrity-accent:#486bab; --celebrity-tint:#eef4fc; }
.celebrity-kicker { font-size:9px; font-weight:650; letter-spacing:1.6px; color:var(--celebrity-accent); }
.celebrity-card h2 { margin:9px 0 24px; font-size:20px; line-height:1.35; letter-spacing:-.4px; }
.celebrity-person { display:flex; align-items:center; gap:16px; }
.celebrity-person>div:last-child { min-width:0; }
.celebrity-monogram { width:64px; height:72px; flex:none; display:grid; place-items:center; border-radius:18px; background:var(--celebrity-tint); color:var(--celebrity-accent); font-family:Georgia,serif; font-size:29px; letter-spacing:-2px; }
.celebrity-card { touch-action:pan-y; }
.celebrity-navigation { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:-8px 0 20px; color:#64718a; font-size:11px; }
.celebrity-navigation>div { display:flex; gap:8px; }
.celebrity-arrow { width:44px; height:44px; min-height:44px; padding:0; border-radius:12px; font-size:20px; }
.celebrity-portrait { position:relative; width:96px; height:112px; flex:none; overflow:hidden; border-radius:18px; background:var(--celebrity-tint); }
.celebrity-portrait>span { position:absolute; inset:0; display:grid; place-items:center; color:var(--celebrity-accent); font-size:26px; font-family:Georgia,serif; }
.celebrity-photo { position:relative; display:block; width:100%; height:100%; object-fit:cover; object-position:50% 25%; }
.celebrity-photo[hidden] { display:none; }
.iq-comparison-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:22px; }
.iq-comparison-pair>div { padding:16px; border:1px solid var(--border); border-radius:15px; background:#f8fafc; min-width:0; }
.iq-comparison-pair .iq-player { background:var(--celebrity-tint); border-color:transparent; }
.iq-comparison-pair span { display:block; color:#64718a; font-size:11px; line-height:1.5; }
.iq-comparison-pair strong { display:block; margin-top:8px; font-size:25px; line-height:1.25; color:var(--text); overflow-wrap:anywhere; }
.iq-comparison-pair small { display:block; font-size:10px; font-weight:500; color:#64718a; margin-top:4px; }
.iq-comparison-pair p { font-size:10px; color:#64718a; line-height:1.5; margin-top:8px; }
.iq-evidence { margin-top:16px; padding:14px 16px; background:#f6f8fc; border:1px solid #e8ecf3; border-radius:13px; }
.evidence-label { display:block; font-weight:650; font-size:11px; line-height:1.6; color:#48618b; }
.iq-evidence p { margin-top:5px; color:#526079; font-size:11px; line-height:1.7; }
.evidence-popular-estimate { border-color:#ecd8ad; background:#fff8e9; }
.evidence-popular-estimate .evidence-label { color:#896329; }
.evidence-self-reported { border-color:#e2d9f3; background:#f7f3fc; }
.evidence-self-reported .evidence-label { color:#77549b; }
.celebrity-card .evidence-historical-estimate { border-left:4px solid var(--world-accent,#8060c4); }
.celebrity-card .evidence-historical-estimate .evidence-label { font-size:12px; }
.celebrity-card .iq-evidence-date { margin-top:8px; font-size:10px; line-height:1.6; }
.portrait-credit { margin-top:14px; font-size:10px; color:#64718a; line-height:1.7; overflow-wrap:anywhere; }
.portrait-credit summary { cursor:pointer; padding:5px 0; }
.portrait-credit a { text-decoration:underline; text-underline-offset:2px; }
.number-matrix { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; width:min(100%,300px); margin:24px auto; }
.number-matrix-cell { display:grid; place-items:center; aspect-ratio:1; border:1px solid #e1e7f1; border-radius:14px; box-shadow:var(--shadow); background:#fff; color:#33415e; font-size:clamp(24px,7vw,34px); font-weight:650; font-variant-numeric:tabular-nums; }
.number-matrix-cell.is-missing { color:var(--primary); border-color:#cbd6fa; background:#eef1ff; }
.celebrity-person h3 { margin:0; font-size:23px; line-height:1.25; letter-spacing:-.5px; overflow-wrap:anywhere; }
.celebrity-profession { margin-top:6px; color:#64718a; font-size:12px; line-height:1.5; }
.celebrity-fact { margin-top:20px; font-size:14px; line-height:1.75; }
.celebrity-source { display:inline-flex; align-items:center; gap:7px; min-height:44px; color:var(--celebrity-accent); font-size:12px; font-weight:600; text-decoration:underline; text-underline-offset:4px; }
.celebrity-prompt { padding:16px 18px; margin-top:8px; border-radius:14px; background:var(--celebrity-tint); }
.celebrity-prompt strong { font-size:12px; color:var(--celebrity-accent); }
.celebrity-prompt p { margin-top:6px; font-size:12px; line-height:1.7; color:#526079; }
.celebrity-note { margin-top:16px; color:#64718a; font-size:10px; line-height:1.65; }
@keyframes celebrity-appear { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:650px) {
  .celebrity-card { padding:22px 20px; }
  .celebrity-card h2 { font-size:18px; margin-bottom:20px; }
  .celebrity-monogram { width:52px; height:60px; font-size:25px; border-radius:15px; }
  .celebrity-person { gap:12px; }
  .celebrity-person h3 { font-size:20px; }
  .celebrity-portrait { width:80px; height:96px; border-radius:15px; }
  .iq-comparison-pair { gap:8px; }
  .iq-comparison-pair>div { padding:13px 11px; }
  .iq-comparison-pair strong { font-size:23px; }
  .celebrity-fact { font-size:13px; }
}

.result-secondary {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.result-actions .primary-button {
  min-height:52px;
}

.notice {
  max-width:470px;
  margin:22px auto 0;
  color:var(--muted);
  font-size:11px;
  line-height:1.7;
}

.leaderboard-screen {
  max-width:720px;
  margin:0 auto;
}

.leaderboard-card {
  background:#fff;
  border:1px solid var(--border);
  border-radius:24px;
  padding:32px;
  box-shadow:var(--shadow);
}

.leaderboard-heading-icon {
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  border-radius:17px;
  background:#f3eefe;
  color:#9a83d2;
  margin-bottom:20px;
}

.leaderboard-heading-icon .icon {
  width:28px;
  height:28px;
}

.leaderboard-card h1 {
  font-size:34px;
  font-weight:650;
  letter-spacing:-1px;
}

.leaderboard-card>p {
  font-size:13px;
  color:var(--muted);
  margin-top:10px;
}

.leaderboard-columns {
  display:flex;
  justify-content:space-between;
  color:#96a0b2;
  font-size:9px;
  font-weight:600;
  letter-spacing:1px;
  margin:32px 0 14px;
}

.leaderboard-list {
  display:flex;
  flex-direction:column;
  gap:7px;
}

.leaderboard-row {
  display:grid;
  grid-template-columns:35px 36px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  border:1px solid transparent;
  padding:10px;
  border-radius:13px;
}

.leaderboard-row.is-me {
  background:#f0f3ff;
  border-color:#dce3ff;
}

.leaderboard-rank {
  color:#9da7ba;
  font-size:12px;
}

.leaderboard-row:nth-child(-n+3) .leaderboard-rank {
  color:#aa8d52;
}

.leaderboard-avatar {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:12px;
  background:#f0edf9;
  color:#9a88c4;
  font-size:13px;
}

.leaderboard-name {
  font-size:13px;
  font-weight:550;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.leaderboard-name small {
  display:block;
  margin-top:3px;
  font-size:9px;
  color:var(--primary);
}

.leaderboard-score {
  font-size:18px;
  font-weight:650;
  color:var(--primary);
  text-align:right;
}

.leaderboard-score small,.personal-record strong small {
  margin-left:5px;
  font-size:10px;
  font-weight:500;
  color:var(--muted);
}

.leaderboard-empty {
  text-align:center;
  padding:38px 20px;
  border-radius:16px;
  background:#fafbfe;
  border:1px dashed #e2e7f1;
}

.leaderboard-empty>.icon {
  color:#bac3db;
  width:36px;
  height:36px;
  margin-bottom:16px;
}

.leaderboard-empty strong {
  display:block;
  font-size:15px;
  font-weight:600;
}

.leaderboard-empty p {
  font-size:12px;
  color:var(--muted);
  max-width:350px;
  margin:10px auto 0;
  line-height:1.8;
}

.personal-record {
  display:flex;
  align-items:center;
  gap:13px;
  padding:18px;
  background:#f6f8fe;
  border:1px solid #e8ecf6;
  border-radius:16px;
  margin-top:24px;
  font-size:13px;
}

.personal-record .best-icon {
  width:36px;
  height:36px;
  margin:0;
  background:#eaf0ff;
  color:var(--primary);
}

.personal-record span>small {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:5px;
  line-height:1.5;
}

.personal-record strong {
  margin-left:auto;
  white-space:nowrap;
  font-size:25px;
  font-weight:650;
  color:var(--primary);
}

.ranking-actions {
  display:grid;
  gap:14px;
  margin-top:20px;
}

.share-screen {
  padding-bottom:10px;
}

.share-layout {
  display:grid;
  grid-template-columns:minmax(0,420px) minmax(0,1fr);
  gap:56px;
  align-items:center;
  padding:12px 25px 0;
}

.share-preview {
  padding:14px;
  border-radius:24px;
  background:#eef1f8;
  border:1px solid var(--border);
}

.share-preview canvas {
  display:block;
  width:100%;
  height:auto;
  border-radius:14px;
  box-shadow:0 8px 18px #19223808;
}

.share-controls {
  display:grid;
  gap:12px;
}

.share-controls h1 {
  font-size:30px;
  font-weight:650;
  letter-spacing:-1px;
  line-height:1.25;
  margin:5px 0 0;
}

.share-controls>p {
  color:var(--muted);
  font-size:13px;
  line-height:1.8;
  margin:2px 0 14px;
}

.share-controls .share-help {
  font-size:10px;
  text-align:center;
  margin-top:4px;
}

.toast {
  position:fixed;
  z-index:10;
  left:50%;
  transform:translateX(-50%);
  bottom:calc(20px + env(safe-area-inset-bottom));
  width:max-content;
  max-width:calc(100vw - 36px);
  color:#fff;
  background:#25304bea;
  box-shadow:0 8px 30px #19223820;
  padding:13px 20px;
  border-radius:14px;
  font-size:12px;
  text-align:center;
  line-height:1.7;
}

@media(max-width:900px) {
  .hero {
    grid-template-columns:1fr 245px;
    gap:24px;
  }
  .mode-card {
    padding:22px 18px 18px;
  }
  .mode-title {
    font-size:17px;
  }
  .mode-tag {
    font-size:7px;
    right:13px;
    padding:5px 6px;
  }
  .mode-description {
    font-size:11px;
  }
  .share-layout {
    gap:30px;
    padding:0;
  }
}

@media(max-width:650px) {
  .shell {
    padding-left:max(20px,env(safe-area-inset-left));
    padding-right:max(20px,env(safe-area-inset-right));
  }
  .topbar {
    padding:19px 0;
  }
  .brand {
    font-size:20px;
  }
  .brand-mark {
    width:36px;
    height:36px;
    border-radius:12px;
  }
  .brand-mark .icon {
    width:24px;
    height:24px;
  }
  .topbar-right {
    font-size:10px;
    gap:5px;
  }
  .topbar-right .icon,.version {
    display:none;
  }
  .hero {
    display:block;
    padding:30px 0 28px;
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:1.4px;
  }
  .hero h1 {
    font-size:42px;
    margin:13px 0 11px;
    letter-spacing:-1.8px;
    line-height:1.12;
  }
  .hero-sub {
    font-size:14px;
  }
  .hero-detail {
    display:none;
  }
  .best-card {
    position:relative;
    margin-top:25px;
    padding:15px 17px;
    border-radius:16px;
    display:grid;
    grid-template-columns:36px 1fr auto;
    grid-template-rows:auto auto;
    align-items:center;
    column-gap:12px;
    text-align:left;
  }
  .best-card .best-icon {
    width:36px;
    height:36px;
    border-radius:11px;
    margin:0;
    grid-row:1 / 3;
  }
  .best-card-label {
    font-size:11px;
    grid-column:2;
  }
  .best-card-note {
    grid-column:2;
    margin-top:4px;
    font-size:9px;
  }
  .best-card-score {
    grid-column:3;
    grid-row:1 / 3;
    font-size:32px;
    margin:0;
    letter-spacing:-1px;
  }
  .best-card-score span {
    font-size:10px;
    margin-left:4px;
  }
  .best-card-bottom {
    display:none;
  }
  .section-heading {
    margin-bottom:15px;
  }
  .section-heading h2 {
    font-size:18px;
  }
  .section-heading .section-note {
    font-size:10px;
  }
  .mode-grid {
    grid-template-columns:1fr;
    gap:12px;
  }
  .mode-card {
    display:grid;
    grid-template-columns:43px minmax(0,1fr) 25px;
    grid-template-rows:auto auto auto;
    min-height:121px;
    padding:17px;
    column-gap:13px;
    border-radius:18px;
  }
  .mode-icon {
    width:43px;
    height:43px;
    margin:0;
    border-radius:13px;
    grid-column:1;
    grid-row:1 / 3;
  }
  .mode-title {
    grid-column:2;
    grid-row:1;
    font-size:16px;
    padding:1px 0;
  }
  .mode-description {
    grid-column:2;
    grid-row:2;
    font-size:12px;
    line-height:1.6;
    margin-top:5px;
  }
  .mode-description br {
    display:none;
  }
  .mode-bottom {
    display:contents;
  }
  .mode-bottom>span:first-child {
    grid-column:2;
    grid-row:3;
    font-size:9px;
    padding-top:9px;
  }
  .mode-bottom .arrow {
    grid-column:3;
    grid-row:1 / 4;
    width:25px;
    height:25px;
  }
  .mode-tag {
    position:static;
    grid-column:1;
    grid-row:3;
    font-size:0;
    background:transparent;
    padding:0;
  }
  .mode-tag::after {
    content:'РЕЙТИНГ';
    display:block;
    font-size:6px;
    letter-spacing:.6px;
    text-align:center;
    margin-top:8px;
  }
  .leaderboard-button {
    margin-top:17px;
    padding:16px 17px;
    gap:12px;
    font-size:13px;
    border-radius:16px;
  }
  .leaderboard-button-icon {
    width:36px;
    height:36px;
    border-radius:11px;
  }
  .leaderboard-button small {
    font-size:9px;
    line-height:1.6;
    max-width:205px;
  }
  .tip-line {
    font-size:9px;
    padding:0 12px;
    margin-top:18px;
  }
  .footer {
    margin-top:28px;
    padding:18px 0 8px;
    font-size:9px;
  }
  .footer span:last-child {
    display:none;
  }
  .game-container {
    margin-top:19px;
  }
  .game-top {
    font-size:10px;
    gap:7px;
    margin-bottom:14px;
  }
  .game-top:first-child {
    margin-bottom:18px;
  }
  .game-top .muted-button {
    font-size:11px;
  }
  .progress-track {
    margin-bottom:18px;
  }
  .game-card {
    padding:21px 18px;
    border-radius:20px;
  }
  .question-title {
    font-size:22px;
    margin:21px 0;
    line-height:1.45;
  }
  .visual-puzzle {
    min-height:80px;
    padding:15px 10px;
    margin-bottom:20px;
  }
  .answers {
    grid-template-columns:1fr;
    gap:9px;
  }
  .answer {
    min-height:55px;
    padding:10px 12px;
    font-size:13px;
  }
  .answer-label {
    width:27px;
    height:27px;
  }
  .bottom-actions {
    margin-top:18px;
  }
  .bottom-actions .primary-button {
    width:100%;
  }
  .bottom-actions .section-note {
    font-size:9px;
  }
  .bottom-actions #hint {
    font-size:11px;
  }
  .feedback {
    padding:13px;
    font-size:12px;
  }
  .screen-header {
    margin:13px 0 18px;
    gap:10px;
  }
  .screen-header .section-note {
    font-size:10px;
    text-align:right;
  }
  .screen-header .muted-button {
    font-size:11px;
    flex:none;
  }
  .score-card {
    padding:25px 18px;
    border-radius:20px;
  }
  .score-number {
    font-size:100px;
  }
  .result h1 {
    font-size:23px;
  }
  .score-caption {
    margin-top:20px;
  }
  .stat-name {
    font-size:9px;
  }
  .stat-value {
    font-size:20px;
  }
  .result-secondary {
    gap:9px;
  }
  .result-secondary .ghost {
    padding:12px 8px;
    font-size:10px;
    gap:6px;
  }
  .result-secondary .icon {
    width:15px;
    height:15px;
  }
  .notice {
    font-size:11px;
  }
  .leaderboard-card {
    padding:24px 18px;
    border-radius:20px;
  }
  .leaderboard-card h1 {
    font-size:29px;
  }
  .leaderboard-card>p {
    font-size:12px;
  }
  .leaderboard-row {
    grid-template-columns:24px 30px minmax(0,1fr) auto;
    gap:8px;
    padding:9px 6px;
  }
  .leaderboard-avatar {
    width:30px;
    height:30px;
    border-radius:10px;
  }
  .leaderboard-name {
    font-size:12px;
  }
  .leaderboard-score {
    font-size:16px;
  }
  .personal-record {
    padding:13px 10px;
    gap:9px;
  }
  .personal-record strong {
    font-size:22px;
  }
  .personal-record span>small {
    font-size:9px;
  }
  .leaderboard-empty {
    padding:28px 13px;
  }
  .share-layout {
    grid-template-columns:1fr;
    gap:25px;
  }
  .share-preview {
    max-width:300px;
    width:100%;
    margin:0 auto;
    padding:10px;
    border-radius:20px;
  }
  .share-controls {
    max-width:360px;
    width:100%;
    margin:0 auto;
    text-align:center;
  }
  .share-controls h1 {
    font-size:26px;
  }
  .share-controls>p {
    font-size:12px;
  }
}

@media(max-width:350px) {
  .shell {
    padding-left:max(14px,env(safe-area-inset-left));
    padding-right:max(14px,env(safe-area-inset-right));
  }
  .hero h1 {
    font-size:36px;
  }
  .hero {
    padding-top:25px;
  }
  .hero-sub {
    font-size:12px;
  }
  .mode-card {
    padding:15px 13px;
    column-gap:10px;
  }
  .mode-title {
    font-size:15px;
  }
  .mode-description {
    font-size:11px;
  }
  .mode-bottom>span:first-child {
    font-size:8px;
  }
  .best-card {
    padding:13px;
    gap:9px;
  }
  .best-card-label {
    font-size:10px;
  }
  .best-card-note {
    font-size:8px;
  }
  .leaderboard-button {
    padding:15px 13px;
    gap:10px;
  }
  .leaderboard-button small {
    font-size:8px;
  }
  .leaderboard-button>.icon {
    width:15px;
    height:15px;
  }
  .game-card {
    padding:18px 14px;
  }
  .question-title {
    font-size:20px;
  }
  .bottom-actions .section-note {
    display:none;
  }
  .game-time {
    display:none;
  }
  .personal-record strong small {
    display:block;
    margin:0;
    text-align:right;
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    transition:none!important;
    animation:none!important;
    scroll-behavior:auto!important;
  }
}

/* v0.4: new content uses the same light palette and card system. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.quick-timer { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; color:var(--primary); background:#eef1ff; border-radius:10px; font-size:15px; font-weight:650; font-variant-numeric:tabular-nums; white-space:nowrap; }
.quick-timer .icon { width:17px; height:17px; }
.time-urgent { color:#ae5757!important; background:#fff0f0; border-radius:8px; }
.topbar-right .time-urgent { padding:5px 7px; }
.halfway-note { display:flex; align-items:center; gap:7px; margin-top:18px; color:#31866f; background:#f0faf6; padding:12px; border-radius:12px; font-size:12px; line-height:1.6; }
.halfway-note .icon { width:18px; height:18px; }
.legacy-run-note, .legacy-record { color:var(--muted); font-size:11px; line-height:1.7; margin:0 0 17px; }
.legacy-record { text-align:center; margin:17px 0 0; }
.mode-bottom small { display:block; margin-top:6px; color:var(--primary); font-size:10px; }
.result-timing { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:22px; padding-top:20px; border-top:1px solid var(--border); font-size:11px; color:var(--muted); }
.result-timing strong { display:block; color:var(--text); font-size:20px; font-weight:650; margin-top:5px; font-variant-numeric:tabular-nums; }
.unanswered-note { font-size:11px; color:var(--muted); line-height:1.7; margin-top:16px; }
.graphic-puzzle { display:flex; justify-content:center; padding:12px; margin:0 0 22px; background:#f8faff; border:1px solid #edf0f7; border-radius:16px; }
.puzzle-svg { display:block; max-width:340px; width:100%; height:auto; font-family:inherit; }
.graphic-single .puzzle-svg { width:128px; }
.graphic-net .puzzle-svg { max-width:216px; }
.graphic-matrix .puzzle-svg { max-width:300px; }
.graphic-analogy .puzzle-svg { max-width:254px; }
.graphic-sequence { padding:8px; }
.graphic-sequence .puzzle-svg { max-width:530px; }
.table-puzzle { padding:0; margin-bottom:23px; border:1px solid #e1e7f3; border-radius:13px; overflow:hidden; }
.puzzle-table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:13px; line-height:1.6; text-align:center; }
.puzzle-table th { background:#f0f4fc; font-size:11px; font-weight:600; color:#62718f; }
.puzzle-table th,.puzzle-table td { padding:10px 6px; border-right:1px solid #e5eaf4; border-bottom:1px solid #e5eaf4; overflow-wrap:anywhere; }
.puzzle-table tr:last-child td { border-bottom:0; }
.puzzle-table tr > :last-child { border-right:0; }
.puzzle-strip { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:center; font-size:23px; letter-spacing:1px; }
.puzzle-strip span { max-width:100%; overflow-wrap:anywhere; }
.answers.visual-answers { grid-template-columns:repeat(2,minmax(0,1fr)); }
.visual-answer { position:relative; padding:12px 8px 10px; justify-content:center; min-height:124px; }
.visual-answer .answer-label { position:absolute; left:8px; top:8px; width:23px; height:23px; font-size:10px; }
.choice-svg { width:94px; height:94px; max-width:100%; }
.category-pill { min-width:0; }
@media(max-width:650px) {
  .question-title { font-size:20px; }
  .category-pill { font-size:10px; line-height:1.5; }
  .category-pill .icon { width:14px; height:14px; }
  .difficulty { flex:none; }
  .puzzle-table { font-size:12px; }
  .puzzle-table th { font-size:10px; }
  .puzzle-table th,.puzzle-table td { padding:9px 4px; }
  .graphic-puzzle { padding:8px; }
  .puzzle-strip { font-size:21px; gap:10px; }
  .visual-answer { min-height:112px; }
  .choice-svg { width:84px; height:84px; }
  .quick-timer { font-size:14px; }
}


/* Premium Casual home: compact layout, one entry per mode, real saved results. */
.premium-home { --home-blue:#536df0; --home-violet:#8c78e9; padding-top:20px; }
.premium-home .home-hero { display:grid; grid-template-columns:minmax(0,1fr) 240px; grid-template-areas:"eyebrow art" "title art" "description art"; align-items:center; column-gap:32px; row-gap:12px; padding:28px 32px; border:1px solid #e4e9fa; border-radius:26px; background:radial-gradient(ellipse at 88% 38%,#e8e6ff 0,transparent 52%),linear-gradient(110deg,#eef4ff,#f7f6ff); animation:premiumAppear 220ms ease-out both; }
.premium-home .home-eyebrow { grid-area:eyebrow; display:flex; align-items:center; gap:6px; color:#8894b1; font-size:9px; line-height:1.5; letter-spacing:1.4px; font-weight:650; }
.premium-home .home-eyebrow .icon { width:13px; height:13px; color:var(--home-violet); }
.premium-home .home-hero h1 { grid-area:title; align-self:start; margin:0; font-size:48px; line-height:1.09; letter-spacing:-1.8px; font-weight:750; }
.premium-home .home-hero h1 span { color:var(--home-blue); }
.premium-home .home-hero-description { grid-area:description; align-self:start; color:#7986a2; font-size:13px; line-height:1.7; }
.premium-home .home-hero-art { grid-area:art; position:relative; width:240px; height:210px; }
.premium-home .home-hero-art img { display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:contain; filter:saturate(.84); }
.premium-home .home-art-decor { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.premium-home .home-decor-plus { animation:premiumDrift 3500ms ease-in-out 2; transform-origin:205px 43px; }
.premium-home .home-decor-square { animation:premiumDrift 4000ms ease-in-out 2; }
.premium-home .home-main-action { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:center; margin-top:14px; }
.premium-home .home-start { display:flex; align-items:center; justify-content:flex-start; gap:13px; min-height:61px; width:100%; padding:13px 20px; border:1px solid #4c66df; border-radius:18px; background:linear-gradient(110deg,#536df0,#6973e6); color:#fff; font-size:16px; font-weight:650; box-shadow:0 6px 15px #536df024; transition:background 200ms,box-shadow 200ms,transform 180ms; }
.premium-home .home-start-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:#ffffff1a; }
.premium-home .home-start-icon .icon { width:23px; height:23px; }
.premium-home .home-start > .icon { margin-left:auto; width:20px; height:20px; }
.premium-home .home-start-note { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:5px 10px; color:#7986a2; font-size:11px; }
.premium-home .home-main-tag { grid-column:1/3; justify-self:start; color:#8c78e9; font-size:8px; letter-spacing:.8px; text-transform:uppercase; font-weight:650; }
.premium-home .home-start-note strong { color:#5d6985; font-size:13px; font-weight:600; }
.premium-home .home-start-note i { color:#b7c1d7; padding:0 5px; font-style:normal; }
.premium-home .resume-button { margin:14px 0 0; padding:14px 17px; border-radius:18px; }
.premium-home .resume-button > span { flex:1; }
.premium-home .home-resume-meter { display:block; height:3px; max-width:210px; margin-top:8px; border-radius:4px; background:#e4eafa; overflow:hidden; }
.premium-home .home-resume-meter > span { display:block; height:100%; background:var(--home-blue); border-radius:4px; }
.premium-home .home-section-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:24px 0 12px; }
.premium-home .home-section-heading h2,.premium-home .home-results h2 { font-size:17px; font-weight:700; letter-spacing:-.4px; }
.premium-home .home-section-heading > span { color:#98a2b7; font-size:10px; }
.premium-home .mode-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.premium-home .mode-card { position:relative; display:grid; grid-template-columns:46px minmax(0,1fr) 26px; grid-template-areas:"icon title arrow" "icon description arrow"; align-content:center; column-gap:16px; row-gap:8px; min-height:112px; margin:0; padding:20px; border:1px solid #e0e8fc; border-radius:20px; background:linear-gradient(125deg,#fff,#f8faff); box-shadow:0 4px 14px #24365c03; text-align:left; transition:transform 180ms,border-color 200ms,box-shadow 200ms; }
.premium-home .home-mode-daily { border-color:#deefec; background:linear-gradient(125deg,#fff,#f7fcfb); }
.premium-home .home-mode-top { display:contents; }
.premium-home .mode-icon { grid-area:icon; display:grid; place-items:center; width:46px; height:46px; margin:0; border-radius:15px; background:#eef2ff; color:#7593e5; }
.premium-home .mode-icon .icon { width:24px; height:24px; }
.premium-home .home-mode-daily .mode-icon { background:#eaf8f4; color:#39bba8; }
.premium-home .home-mode-tag { position:absolute; right:20px; top:12px; font-size:8px; line-height:1.4; color:#8da4d7; font-weight:600; }
.premium-home .home-mode-daily .home-mode-tag { color:#5fae9d; }
.premium-home .mode-title { grid-area:title; display:block; margin:0; color:#344260; font-size:17px; line-height:1.25; font-weight:700; letter-spacing:-.4px; }
.premium-home .mode-description { grid-area:description; display:block; min-height:0; margin:0; color:#7986a2; font-size:11px; line-height:1.6; }
.premium-home .mode-description > span { color:#b5c3df; padding:0 4px; }
.premium-home .mode-card > .arrow { grid-area:arrow; display:grid; place-items:center; width:26px; height:26px; padding:0; border-radius:50%; background:#eef2ff; color:#8da4db; }
.premium-home .mode-card > .arrow .icon { width:15px; height:15px; }
.premium-home .home-mode-daily > .arrow { background:#e9f7f2; color:#81b9aa; }
.premium-home .home-results { margin-top:16px; padding:17px 20px; border:1px solid #e6eaf5; border-radius:20px; background:#fff; }
.premium-home .home-results-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.premium-home .home-results-heading > .icon { color:#a69aca; width:18px; height:18px; }
.premium-home .home-results-empty { display:flex; align-items:center; gap:12px; margin-top:14px; }
.premium-home .home-results-empty > span { display:grid; place-items:center; width:35px; height:35px; flex:none; border-radius:12px; background:#f4f1ff; color:#a18bd3; }
.premium-home .home-results-empty .icon { width:18px; height:18px; }
.premium-home .home-results-empty strong { display:block; color:#76829d; font-size:13px; font-weight:550; line-height:1.4; }
.premium-home .home-results-empty p { margin-top:4px; color:#9ca7bb; font-size:10px; line-height:1.5; }
.premium-home .home-results-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:14px; }
.premium-home .home-results-grid > div + div { border-left:1px solid #edf0f8; padding-left:24px; }
.premium-home .home-record-value { display:block; color:#536df0; font-size:28px; line-height:1.1; font-weight:700; letter-spacing:-.7px; animation:premiumRecord 200ms ease-out both; }
.premium-home .home-record-value small { color:#9aa8c2; font-size:11px; font-weight:500; letter-spacing:0; }
.premium-home .home-record-label { display:block; margin-top:6px; color:#8793ab; font-size:10px; line-height:1.5; }
.premium-home .last-result { display:flex; justify-content:space-between; width:100%; margin:14px 0 0; padding:12px 0 0; border-top:1px solid #edf0f8; color:#8392b0; font-size:11px; }
.premium-home .last-result .icon { width:15px; height:15px; }
.premium-home .leaderboard-button { min-height:70px; margin-top:14px; padding:15px 20px; border:1px solid #e8e3f6; border-radius:20px; background:linear-gradient(100deg,#fff,#f8f6ff); box-shadow:none; gap:13px; transition:background 200ms,border-color 200ms,transform 180ms; }
.premium-home .leaderboard-button-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:12px; background:#f1edfc; color:#a38acd; }
.premium-home .leaderboard-button-icon .icon { width:19px; height:19px; }
.premium-home .leaderboard-button > span:nth-child(2) { color:#586681; font-size:13px; font-weight:650; }
.premium-home .leaderboard-button small { display:block; margin-top:4px; color:#8c98af; font-size:10px; font-weight:400; line-height:1.5; }
.premium-home .leaderboard-button > .icon { margin-left:auto; width:18px; height:18px; color:#ab9cce; }
.premium-home .home-footnote { display:flex; align-items:center; justify-content:center; gap:6px; margin:18px 0 0; color:#a5aec1; font-size:9px; line-height:1.6; }
.premium-home .home-footnote .icon { width:13px; height:13px; }
@keyframes premiumAppear { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@keyframes premiumRecord { from { opacity:.5; transform:translateY(3px); } to { opacity:1; transform:translateY(0); } }
@keyframes premiumDrift { 50% { translate:0 -4px; } }
@media(hover:hover) {
  .premium-home .home-start:hover { background:linear-gradient(110deg,#4b63df,#666ed8); transform:translateY(-1px); box-shadow:0 8px 19px #536df030; }
  .premium-home .mode-card:hover { transform:translateY(-2px); border-color:#c8d7f5; box-shadow:0 6px 16px #536df00a; }
  .premium-home .home-mode-daily:hover { border-color:#bfe4db; }
  .premium-home .leaderboard-button:hover { background:#f5f2fd; border-color:#dbd3ef; }
}
.premium-home .home-start:active,.premium-home .mode-card:active,.premium-home .leaderboard-button:active { transform:scale(.985); }
@media(max-width:850px) and (min-width:651px) {
  .premium-home .home-hero { grid-template-columns:minmax(0,1fr) 210px; gap:12px 20px; padding:24px; }
  .premium-home .home-hero-art { width:210px; height:200px; }
  .premium-home .home-hero h1 { font-size:40px; }
  .premium-home .home-start-note { grid-template-columns:1fr; }
  .premium-home .home-main-tag { grid-column:auto; }
  .premium-home .mode-card { column-gap:12px; padding:20px 16px; }
  .premium-home .mode-title { font-size:15px; }
  .premium-home .mode-description { font-size:10px; }
}
@media(max-width:650px) {
  .premium-home { padding-top:16px; }
  .premium-home .home-hero { grid-template-columns:minmax(0,1fr) 116px; grid-template-areas:"eyebrow eyebrow" "title art" "description description"; column-gap:6px; row-gap:10px; padding:20px; border-radius:22px; }
  .premium-home .home-eyebrow { font-size:7px; letter-spacing:1px; }
  .premium-home .home-eyebrow .icon { width:11px; height:11px; }
  .premium-home .home-hero h1 { align-self:center; font-size:30px; line-height:1.1; letter-spacing:-1px; }
  .premium-home .home-hero-description { font-size:11px; line-height:1.65; }
  .premium-home .home-desktop-break { display:none; }
  .premium-home .home-hero-art { width:126px; height:116px; margin-right:-10px; }
  .premium-home .home-main-action { display:block; margin-top:12px; }
  .premium-home .home-start { min-height:57px; padding:12px 16px; gap:12px; border-radius:17px; font-size:15px; }
  .premium-home .home-start-icon { width:31px; height:31px; border-radius:10px; }
  .premium-home .home-start-icon .icon { width:21px; height:21px; }
  .premium-home .home-start-note { display:flex; justify-content:center; flex-wrap:wrap; gap:6px; margin-top:9px; font-size:10px; line-height:1.5; }
  .premium-home .home-start-note strong { display:none; }
  .premium-home .home-main-tag { font-size:9px; font-weight:500; text-transform:none; letter-spacing:0; }
  .premium-home .home-main-tag::after { content:'·'; padding-left:6px; color:#bac2d6; }
  .premium-home .home-start-note i { padding:0 3px; }
  .premium-home .home-section-heading { margin:21px 0 11px; }
  .premium-home .home-section-heading h2,.premium-home .home-results h2 { font-size:16px; }
  .premium-home .home-section-heading > span { display:none; }
  .premium-home .mode-grid { gap:12px; }
  .premium-home .mode-card { display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:0; min-height:160px; padding:15px 14px; border-radius:20px; }
  .premium-home .home-mode-top { display:flex; align-items:center; justify-content:space-between; gap:7px; width:100%; margin-bottom:14px; }
  .premium-home .mode-icon { width:33px; height:33px; border-radius:11px; }
  .premium-home .mode-icon .icon { width:19px; height:19px; }
  .premium-home .home-mode-tag { position:static; font-size:7px; line-height:1.4; }
  .premium-home .mode-title { font-size:14px; line-height:1.3; letter-spacing:-.3px; padding-right:0; }
  .premium-home .mode-description { max-width:100%; margin-top:7px; font-size:10px; line-height:1.5; padding-bottom:12px; }
  .premium-home .mode-description > span { padding:0 1px; }
  .premium-home .mode-card > .arrow { position:absolute; bottom:12px; right:13px; width:21px; height:21px; }
  .premium-home .mode-card > .arrow .icon { width:12px; height:12px; }
  .premium-home .home-results { margin-top:14px; padding:16px; border-radius:20px; }
  .premium-home .home-results-empty { gap:10px; margin-top:13px; }
  .premium-home .home-results-empty strong { font-size:11px; }
  .premium-home .home-results-empty p { font-size:9px; }
  .premium-home .home-results-empty > span { width:31px; height:31px; border-radius:10px; }
  .premium-home .home-results-grid { gap:12px; margin-top:13px; }
  .premium-home .home-results-grid > div + div { padding-left:18px; }
  .premium-home .home-record-value { font-size:25px; }
  .premium-home .home-record-label { font-size:9px; }
  .premium-home .last-result { font-size:10px; }
  .premium-home .leaderboard-button { min-height:68px; margin-top:12px; padding:14px 16px; border-radius:20px; gap:10px; }
  .premium-home .leaderboard-button > span:nth-child(2) { font-size:12px; }
  .premium-home .leaderboard-button small { font-size:9px; }
  .premium-home .leaderboard-button > .icon { width:16px; height:16px; }
  .premium-home .home-footnote { margin-top:15px; font-size:8px; }
}
@media(max-width:350px) {
  .premium-home .home-hero { padding:18px; grid-template-columns:minmax(0,1fr) 98px; }
  .premium-home .home-hero h1 { font-size:26px; letter-spacing:-.9px; }
  .premium-home .home-hero-art { width:108px; height:104px; }
  .premium-home .home-eyebrow { font-size:6px; letter-spacing:.8px; }
  .premium-home .home-hero-description { font-size:10px; }
  .premium-home .home-main-tag,.premium-home .home-start-note { font-size:9px; }
  .premium-home .mode-grid { gap:10px; }
  .premium-home .mode-card { padding:13px 12px; min-height:169px; }
  .premium-home .home-mode-tag { font-size:6px; }
  .premium-home .mode-title { font-size:13px; }
  .premium-home .mode-description { font-size:10px; }
  .premium-home .home-results { padding:14px; }
  .premium-home .home-results-empty strong { font-size:10px; }
  .premium-home .home-results-empty p { font-size:8px; }
  .premium-home .home-record-label { font-size:8px; }
}
@media(prefers-reduced-motion:reduce) {
  .premium-home .home-hero,.premium-home .home-record-value,.premium-home .home-decor-plus,.premium-home .home-decor-square { animation:none; }
  .premium-home button { transition:none; }
  .premium-home button:active { transform:none; }
}


/* Optional SDK rewarded hint; absent on localhost and when advertising is unavailable. */
.reward-hint { margin-top:18px; padding-top:14px; border-top:1px solid var(--border); }
.reward-hint .muted-button { min-height:44px; color:var(--primary); font-size:12px; line-height:1.5; text-align:left; }
.reward-hint .icon { width:18px; height:18px; }
.reward-hint small { display:block; margin-top:6px; color:var(--muted); font-size:10px; line-height:1.6; }
.hint-credit { margin-top:14px; color:var(--primary); font-size:11px; line-height:1.6; }
@media(max-width:350px) { .reward-hint .muted-button { font-size:11px; } }

/* Two current IQ tests. Historical modes have no menu entry. */
.two-mode-home .home-hero { min-height:180px; padding:26px 30px; grid-template-columns:minmax(0,1fr) 180px; row-gap:8px; }
.two-mode-home .home-hero h1 { font-size:58px; letter-spacing:-2.5px; line-height:1.12; margin:0; }
.two-mode-home .home-hero-description { max-width:100%; font-size:16px; }
.two-mode-home .home-hero-art { width:180px; height:150px; right:0; top:0; margin:0; }
.two-mode-home .home-section-heading { margin:20px 0 14px; }
.two-mode-home .two-mode-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.two-mode-home .two-mode-card { display:flex; flex-direction:column; align-items:stretch; text-align:left; gap:0; padding:25px; min-width:0; border-radius:24px; border:1px solid #e2e8f7; box-shadow:0 8px 28px #35487308; cursor:default; }
.two-mode-home .two-mode-card:hover { transform:none; }
.two-mode-home .two-mode-quick { background:linear-gradient(150deg,#fff 38%,#f2f7ff); }
.two-mode-home .two-mode-full { background:linear-gradient(150deg,#fff 38%,#f5f2ff); border-color:#e5def8; }
.two-mode-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:22px; }
.two-mode-home .mode-icon { position:static; width:48px; height:48px; border-radius:15px; background:#edf3ff; color:#5275db; flex:none; }
.two-mode-full .mode-icon { background:#f0ebff; color:#8866d6; }
.two-mode-home .home-mode-tag { position:static; display:inline-block; padding:5px 8px; border-radius:8px; font-size:10px; color:#65799f; background:#eaf1ff; white-space:normal; text-align:center; }
.two-mode-full .home-mode-tag { background:#f0eaff; color:#8464bd; }
.two-mode-home .mode-title { font-size:23px; margin:0 0 12px; line-height:1.25; }
.two-mode-home .mode-description { font-size:13px; line-height:1.7; margin:0 0 24px; color:var(--muted); }
.two-mode-home .two-mode-cta { width:100%; min-height:50px; border:0; border-radius:14px; margin-top:auto; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px; font:inherit; font-size:13px; font-weight:700; background:#e9f0ff; color:#456acb; box-shadow:none; cursor:pointer; transition:background .18s,transform .18s; }
.two-mode-home .two-mode-cta:hover { background:#dfe9ff; }
.two-mode-home .two-mode-cta:active { transform:scale(.985); }
.two-mode-home .two-mode-full .two-mode-cta { background:linear-gradient(115deg,#607ced,#8c6cdb); color:white; box-shadow:0 6px 15px #796ce52a; }
.two-mode-home .two-mode-full .two-mode-cta:hover { filter:brightness(1.04); }
.two-mode-home .home-results { margin-top:22px; padding:23px; }
.two-mode-home .home-results-grid { margin-top:18px; gap:18px; }
.two-mode-home .home-mode-record { min-width:0; display:flex; flex-direction:column; gap:9px; }
.two-mode-home .home-record-label { font-size:11px; }
.two-mode-home .home-record-value { font-size:28px; }
.home-record-caption,.home-completion-count { font-size:11px; color:var(--muted); line-height:1.5; margin:0; }
.home-completion-count { margin-top:18px; }
.two-mode-home .last-result { flex-wrap:wrap; text-align:left; line-height:1.6; }
@media(max-width:600px) {
  .two-mode-home .home-hero { min-height:158px; padding:20px; grid-template-columns:minmax(0,1fr) 100px; grid-template-areas:"eyebrow art" "title art" "description art"; column-gap:10px; row-gap:8px; }
  .two-mode-home .home-hero h1 { font-size:40px; letter-spacing:-1.5px; }
  .two-mode-home .home-eyebrow { font-size:9px; }
  .two-mode-home .home-hero-description { max-width:100%; font-size:12px; line-height:1.65; }
  .two-mode-home .home-hero-art { width:100px; height:112px; right:0; top:0; }
  .two-mode-home .two-mode-grid { grid-template-columns:1fr; gap:14px; }
  .two-mode-home .two-mode-card { padding:21px; border-radius:22px; }
  .two-mode-heading { margin-bottom:17px; }
  .two-mode-home .mode-title { font-size:23px; }
  .two-mode-home .mode-description { font-size:12px; margin-bottom:20px; }
  .two-mode-home .home-section-heading span { font-size:9px; }
  .two-mode-home .home-results { padding:21px; }
  .two-mode-home .home-record-label { font-size:10px; }
}
@media(max-width:350px) {
  .two-mode-home .home-hero { padding:18px; grid-template-columns:minmax(0,1fr) 86px; column-gap:8px; }
  .two-mode-home .home-hero h1 { font-size:32px; }
  .two-mode-home .home-hero-art { width:86px; height:108px; top:0; }
  .two-mode-home .home-hero-description { font-size:12px; }
  .two-mode-home .two-mode-card { padding:18px; }
  .two-mode-home .mode-title { font-size:21px; }
  .two-mode-home .home-mode-tag { font-size:9px; }
  .two-mode-home .two-mode-cta { font-size:12px; }
  .two-mode-home .home-section-heading span { display:none; }
}
@media(prefers-reduced-motion:reduce) { .two-mode-home .two-mode-cta { transition:none; } }

/* Mind Challenge question screen; other screens keep their existing theme. */
body.mind-active { background:#F8F9FE; }
.mind-active .topbar { width:100%; max-width:760px; margin-inline:auto; border-color:#E7EAF4; }
.mind-active .topbar-right { display:none; }
.mind-active .brand-accent { color:#6855DD; }
.mind-active .brand-mark { color:#6855DD; background:#EFECFF; }
.mind-game { --primary:#6855DD; --text:#17213B; --muted:#77849C; --border:#E7EAF4; max-width:760px; margin:20px auto 0; color:var(--text); }
.mind-game-header { margin-bottom:20px; }
.mind-game .game-top,.mind-game .game-top:first-child { gap:12px; margin:0 0 14px; font-size:13px; }
.mind-game #backHome { min-height:44px; padding:10px 0; color:#77849C; font-size:12px; }
.mind-game #backHome:hover { color:#6855DD; }
.mind-game .mode-name { font-size:12px; font-weight:600; color:#6855DD; text-align:right; }
.mind-game .question-counter { display:flex; align-items:center; gap:10px; color:#77849C; font-size:12px; }
.mind-game .question-counter strong { color:#17213B; font-size:20px; font-weight:750; letter-spacing:-.5px; }
.mind-game .question-counter small { color:#9BA4B8; font-size:14px; font-weight:500; letter-spacing:0; }
.mind-game .quick-timer { display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border:1px solid #E5DEF9; border-radius:12px; background:#F1EFFF; color:#6855DD; font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; }
.mind-game .quick-timer .icon { width:17px; height:17px; }
.mind-game .quick-timer.time-urgent { color:#B34454; border-color:#F2CDD2; background:#FFF0F2; }
.mind-game .mind-time-note { color:#77849C; font-size:11px; text-align:right; }
.mind-game .progress-track { height:5px; margin:0; background:#EAE7F5; border-radius:8px; }
.mind-game .progress-fill { background:linear-gradient(90deg,#6855DD,#8D7CF0); transition:width 180ms ease; }
.mind-game .game-card { padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.mind-game .question-panel { padding:24px; border:1px solid #E7E1FA; border-radius:24px; background:#F1EFFF; box-shadow:0 5px 20px #372B6F04; }
.mind-game .question-meta { align-items:center; gap:12px; }
.mind-game .category-pill { padding:0; border-radius:0; background:transparent; color:#6855DD; font-size:11px; line-height:1.5; }
.mind-game .category-pill .icon { width:17px; height:17px; flex:none; }
.mind-game .difficulty { gap:6px; align-items:center; color:#877CA7; font-size:10px; line-height:1.4; white-space:nowrap; flex:none; }
.mind-game .difficulty .difficulty-bars { display:flex; align-items:flex-end; gap:2px; width:auto; height:12px; border-radius:0; background:none; }
.mind-game .difficulty-bars i { display:block; width:3px; height:5px; border-radius:2px; background:#DCD5EF; }
.mind-game .difficulty-bars i:nth-child(2) { height:8px; }
.mind-game .difficulty-bars i:nth-child(3) { height:11px; }
.mind-game .difficulty-bars i.lit { background:#8D7CF0; }
.mind-game .question-title { font-size:26px; line-height:1.48; font-weight:700; letter-spacing:-.55px; margin:20px 0 0; color:#17213B; overflow-wrap:anywhere; }
.mind-game .question-title.question-long { font-size:23px; line-height:1.55; }
.mind-game .visual-puzzle,.mind-game .graphic-puzzle { margin:20px 0 0; padding:14px; min-height:0; border:1px solid #E5DFF5; border-radius:18px; background:#FBFAFF; }
.mind-game .graphic-puzzle .puzzle-svg { display:block; max-width:100%; margin-inline:auto; }
.mind-game .puzzle-strip { display:flex; flex-wrap:wrap; gap:8px; padding:0; border:0; background:transparent; line-height:1.3; letter-spacing:0; }
.mind-game .puzzle-strip span { display:grid; place-items:center; min-width:44px; min-height:48px; padding:8px 10px; border:1px solid #E6DFF7; border-radius:12px; background:#FFFFFF; color:#6855DD; font-size:22px; font-weight:650; box-shadow:0 3px 7px #43348204; }
.mind-game .number-matrix { gap:8px; width:min(100%,270px); margin:20px auto 0; }
.mind-game .number-matrix-cell { border-color:#E6DFF7; border-radius:14px; background:#FFF; box-shadow:0 3px 7px #43348204; color:#17213B; }
.mind-game .number-matrix-cell.is-missing { border-color:#BFB1EE; background:#E7E1FF; color:#6855DD; }
.mind-game .table-puzzle { margin:20px 0 0; max-width:100%; }
.mind-game .puzzle-table { background:#FFF; }
.mind-game .answers-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:20px 2px 10px; color:#77849C; font-size:11px; }
.mind-game .answer-keyboard-note { color:#9AA3B7; font-size:10px; }
.mind-game .answers,.mind-game .answers.visual-answers { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:stretch; }
.mind-game .answer { position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:0; min-width:0; min-height:94px; padding:34px 14px 15px; border:1px solid #E7EAF4; border-radius:18px; background:#FFF; color:#17213B; font-size:16px; font-weight:600; line-height:1.5; text-align:center; box-shadow:0 3px 12px #29365304; overflow-wrap:anywhere; white-space:normal; transition:background 140ms,border-color 140ms,box-shadow 140ms,opacity 160ms; }
.mind-game .answer-label { position:absolute; top:10px; left:11px; width:21px; height:21px; border-radius:7px; background:#F3F4F9; color:#929CB1; font-size:10px; font-weight:600; }
.mind-game .answer-content { display:block; max-width:100%; min-width:0; }
.mind-game .answer.answer-short { font-size:24px; }
.mind-game .answer.answer-long { font-size:14px; }
.mind-game .answer:hover:not(:disabled) { border-color:#B3A6EB; background:#FBFAFF; box-shadow:0 4px 14px #6855DD0A; }
.mind-game .answer:active:not(:disabled) { background:#EDE8FF; border-color:#8D7CF0; }
.mind-game .answer:focus-visible,.mind-game .hint-card button:focus-visible { outline:3px solid #C2B5F6; outline-offset:3px; }
.mind-game .answer.is-eliminated { opacity:.38; background:#F5F5FA; box-shadow:none; }
.mind-game .answer.is-correct { border-color:#27AD87; background:#EFFAF6; color:#166E57; }
.mind-game .answer.is-correct .answer-label { color:#21896C; background:#DDF4EB; }
.mind-game .answer.is-wrong { border-color:#E36B75; background:#FFF1F3; color:#A84D58; }
.mind-game .answer.is-wrong .answer-label { color:#AE4B59; background:#F9DDE2; }
.mind-game .answer.is-selected.is-correct { animation:mindCorrect 260ms ease-out both; }
.mind-game .answer.is-selected.is-wrong { animation:mindWrong 260ms ease-out both; }
.mind-game .visual-answer { min-height:154px; padding:33px 10px 12px; }
.mind-game .choice-svg { display:block; width:104px; height:104px; max-width:100%; aspect-ratio:1; flex:none; }
.mind-game .hint-card { display:grid; grid-template-columns:42px minmax(0,1fr); gap:13px; margin-top:18px; padding:19px; border:1px solid #F1DFAF; border-radius:20px; background:#FFF8E9; animation:mindHintAppear 180ms ease-out both; }
.mind-game .hint-bulb { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:#FCE9B9; color:#B78420; }
.mind-game .hint-bulb .icon { width:24px; height:24px; }
.mind-game .hint-copy { align-self:center; min-width:0; }
.mind-game .hint-heading { display:flex; align-items:center; flex-wrap:wrap; gap:7px 10px; }
.mind-game .hint-heading h2 { font-size:15px; line-height:1.4; font-weight:700; color:#674F27; letter-spacing:-.2px; margin:0; }
.mind-game .hint-badge { display:inline-flex; align-items:center; padding:3px 7px; border:1px solid #F0DCA8; border-radius:7px; color:#94702C; background:#FFFCF4; font-size:9px; line-height:1.45; white-space:normal; }
.mind-game .hint-copy p { margin:6px 0 0; color:#998057; font-size:11px; line-height:1.65; }
.mind-game .hint-action { grid-column:1/-1; min-width:0; }
.mind-game .hint-card button { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; min-height:48px; padding:12px 15px; border:1px solid #E6BB59; border-radius:13px; font:inherit; font-size:12px; line-height:1.5; font-weight:700; text-align:center; cursor:pointer; }
.mind-game .hint-use { background:#F3BA45; color:#563F16; box-shadow:0 3px 8px #C28C2510; }
.mind-game .hint-use:hover:not(:disabled) { background:#F5C65E; }
.mind-game .hint-use .icon { width:16px; height:16px; }
.mind-game .hint-card .hint-reward { border-color:#6855DD; background:#6855DD; color:#FFF; box-shadow:0 4px 10px #6855DD16; }
.mind-game .hint-reward:hover:not(:disabled) { background:#7562E7; }
.mind-game .hint-reward .icon { width:18px; height:18px; flex:none; }
.mind-game .hint-reward span { min-width:0; }
.mind-game .hint-card button:disabled { cursor:default; opacity:.58; box-shadow:none; }
.mind-game .hint-used,.mind-game .hint-unavailable { background:#FFFBF2; border-color:#EDE3CA; }
.mind-game .hint-used .hint-use,.mind-game .hint-unavailable .hint-use { background:#F4EBD6; border-color:#E5D6B6; }
.mind-game .hint-credit { margin:9px 0 0; color:#94702C; font-size:11px; line-height:1.5; text-align:center; }
.mind-game .feedback { display:flex; align-items:flex-start; gap:12px; margin-top:18px; padding:18px; border-radius:18px; border-color:#F2CDD3; background:#FFF1F3; color:#97505A; font-size:13px; line-height:1.7; }
.mind-game .feedback.good { border-color:#C9EADD; background:#EDF9F3; color:#35705F; }
.mind-game .feedback-icon { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#F9DDE2; color:#C45C69; flex:none; }
.mind-game .feedback.good .feedback-icon { background:#D5F0E4; color:#27AD87; }
.mind-game .feedback-icon .icon { width:17px; height:17px; }
.mind-game .feedback strong { margin:0 0 5px; font-size:15px; line-height:1.5; }
.mind-game .feedback p { margin:0; }
.mind-game .feedback .feedback-answer { margin:0 0 6px; font-weight:650; }
.mind-game .feedback > div { min-width:0; }
.mind-game .mind-bottom { flex-direction:column; align-items:stretch; gap:12px; margin-top:16px; }
.mind-game .safe-pill { align-self:center; background:transparent; color:#77849C; padding:0; font-size:11px; }
.mind-game #next { justify-content:center; width:100%; min-height:52px; padding:14px 18px; border-radius:16px; background:#6855DD; border:1px solid #6855DD; box-shadow:0 5px 14px #6855DD16; font-size:14px; }
.mind-game #next:hover:not(:disabled) { background:#7562E7; }
.mind-game .halfway-note { color:#6855DD; background:#F1EFFF; border-radius:12px; padding:12px; margin-top:16px; }
@keyframes mindHintAppear { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:none; } }
@keyframes mindCorrect { from { background:#EDE8FF; border-color:#8D7CF0; } to { background:#EFFAF6; border-color:#27AD87; } }
@keyframes mindWrong { from { background:#EDE8FF; border-color:#8D7CF0; } to { background:#FFF1F3; border-color:#E36B75; } }
@media(max-width:650px) {
  .mind-game { margin-top:8px; }
  .mind-game-header { margin-bottom:16px; }
  .mind-game .game-top,.mind-game .game-top:first-child { margin-bottom:10px; }
  .mind-game .mode-name { font-size:11px; }
  .mind-game .question-counter strong { font-size:19px; }
  .mind-game .mind-time-note { font-size:10px; }
  .mind-game .question-panel { padding:20px; border-radius:22px; }
  .mind-game .category-pill { font-size:10px; gap:5px; }
  .mind-game .category-pill .icon { width:15px; height:15px; }
  .mind-game .difficulty { font-size:9px; gap:5px; }
  .mind-game .question-title { font-size:23px; line-height:1.5; margin-top:18px; }
  .mind-game .question-title.question-long { font-size:20px; line-height:1.55; }
  .mind-game .answers,.mind-game .answers.visual-answers { gap:10px; }
  .mind-game .answer { min-height:94px; padding:34px 12px 14px; border-radius:17px; font-size:14px; }
  .mind-game .answer.answer-short { font-size:23px; }
  .mind-game .answer.answer-long { font-size:13px; }
  .mind-game .visual-answer { min-height:145px; padding:33px 9px 10px; }
  .mind-game .choice-svg { width:96px; height:96px; }
  .mind-game .answer-keyboard-note { display:none; }
  .mind-game .visual-puzzle,.mind-game .graphic-puzzle { margin-top:18px; padding:10px; }
  .mind-game .puzzle-strip { padding:0; gap:7px; }
  .mind-game .puzzle-strip span { min-width:38px; min-height:44px; padding:7px 9px; font-size:20px; }
  .mind-game .hint-card { padding:16px; gap:11px; margin-top:16px; border-radius:19px; }
  .mind-game .hint-heading h2 { font-size:14px; }
  .mind-game .hint-copy p { font-size:10px; }
  .mind-game .hint-card button { min-height:48px; padding:12px; font-size:12px; }
  .mind-game .feedback { padding:16px; gap:10px; font-size:12px; }
}
@media(max-width:350px) {
  .mind-game .question-panel { padding:17px; border-radius:20px; }
  .mind-game .question-meta { gap:8px; flex-wrap:wrap; }
  .mind-game .question-title { font-size:21px; }
  .mind-game .question-title.question-long { font-size:20px; }
  .mind-game .answer { padding-inline:10px; }
  .mind-game .answer.answer-long { font-size:12px; }
  .mind-game .hint-card { grid-template-columns:35px minmax(0,1fr); padding:14px; gap:10px; }
  .mind-game .hint-bulb { width:35px; height:35px; }
  .mind-game .hint-bulb .icon { width:22px; height:22px; }
  .mind-game .hint-heading h2 { font-size:13px; }
  .mind-game .hint-card button { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) {
  .mind-game .hint-card,.mind-game .answer.is-selected.is-correct,.mind-game .answer.is-selected.is-wrong { animation:none; }
  .mind-game .answer,.mind-game .progress-fill { transition:none; }
}