/* =====================================================================
   SCREEN COMPONENTS
   ===================================================================== */

/* ---------- stepper (players) ---------- */
.stepper{display:flex;align-items:center;justify-content:center;gap:22px;margin:6px 0 26px}
.step-btn{width:46px;height:46px;border-radius:50%;font-family:var(--f-head);font-size:24px;
  color:var(--accent);border:1px solid var(--hair);background:color-mix(in oklch,var(--fg) 4%,transparent);
  display:flex;align-items:center;justify-content:center;transition:.2s var(--ease)}
.step-btn:hover:not([disabled]){border-color:var(--accent);transform:translateY(-2px)}
.step-btn[disabled]{opacity:.3;cursor:default}
.step-val{text-align:center;min-width:70px}
.step-val span{font-family:var(--f-display);font-weight:700;font-size:38px;color:var(--accent);line-height:1}
.step-val small{display:block;font-family:var(--f-head);text-transform:uppercase;letter-spacing:.2em;font-size:10px;color:var(--fg-faint);margin-top:3px}

.player-list{display:flex;flex-direction:column;gap:12px;max-width:380px;margin:0 auto}
.player-row{display:flex;align-items:center;gap:14px}
.player-seal{flex:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-head);font-weight:700;color:var(--navy-900);
  background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 10px -4px rgba(200,164,92,.6)}
.player-input{flex:1;font-family:var(--f-body);font-size:18px;color:var(--on-parch);
  padding:12px 16px;border-radius:3px;border:1px solid var(--hair);
  background:var(--card-parch);box-shadow:inset 0 1px 3px rgba(0,0,0,.12)}
.player-input::placeholder{color:var(--on-parch-dim);font-style:italic}
.player-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in oklch,var(--accent) 30%,transparent)}
[data-dir="jewel"] .player-input,[data-dir="jewel"] .step-btn{border-radius:999px}

/* ---------- all topics bar ---------- */
.all-topics{width:100%;display:flex;align-items:center;gap:16px;text-align:left;
  padding:16px 20px;border-radius:4px;border:1px solid var(--hair-soft);
  background:var(--surface-2);color:var(--fg);transition:.25s var(--ease)}
.all-topics:hover{border-color:var(--gold);transform:translateY(-2px)}
.all-topics.sel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.all-topics>span:first-child{color:var(--gold);flex:none}
.all-topics strong{font-family:var(--f-head);font-size:17px;display:block}
.all-topics small{font-family:var(--f-body);color:var(--fg-faint);font-size:14px}
.all-topics .all-check{margin-left:auto;color:var(--gold);width:22px;height:22px}
[data-dir="jewel"] .all-topics{border-radius:14px}

/* ---------- topic cards ---------- */
.topic-grid{margin-top:16px}
.topic{text-align:center;display:flex;flex-direction:column;justify-content:flex-start}
.topic h3,.topic p{text-align:center}
.topic p{min-height:2.7em;margin-bottom:14px}
.topic-emblem{height:116px;display:grid;place-items:center;margin:2px 0 12px}
.topic-emblem img{max-height:116px;max-width:84%;object-fit:contain;
  filter:drop-shadow(0 12px 16px rgba(0,0,0,.55))}
.topic-emblem .tile-icon{margin:0}
.gem-dot.tr{position:absolute;top:13px;right:13px;z-index:3}
.gem-dot{width:14px;height:14px;border-radius:50%;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.55),0 0 8px -1px currentColor;opacity:.9}
.topic.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 20px 40px -20px rgba(0,0,0,.7)}

/* ---------- count select ---------- */
.count-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.count-opt{min-width:108px;padding:20px 14px;border-radius:4px;border:1px solid var(--hair-soft);
  background:var(--surface-2);transition:.22s var(--ease);text-align:center}
.count-opt:hover{border-color:var(--accent);transform:translateY(-3px)}
.count-opt.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.count-num{display:block;font-family:var(--f-display);font-weight:700;font-size:30px;color:var(--accent)}
.count-opt small{font-family:var(--f-head);text-transform:uppercase;letter-spacing:.16em;font-size:10px;color:var(--fg-faint)}
[data-dir="jewel"] .count-opt{border-radius:14px}

/* ===================================================================
   GAME SCREEN
   =================================================================== */
.game-wrap{position:relative}
.game-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.topic-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-head);font-weight:600;
  font-size:13px;letter-spacing:.06em;padding:8px 14px;border-radius:999px;border:1px solid;
  background:color-mix(in oklch,var(--accent) 10%,transparent)}
.qcount{font-family:var(--f-head);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint)}
.qcount strong{color:var(--fg);font-size:16px}
.score-badge{display:flex;flex-direction:column;align-items:flex-end;line-height:1.05}
.score-badge small{font-family:var(--f-head);text-transform:uppercase;letter-spacing:.16em;font-size:9px;color:var(--fg-faint)}
.score-badge strong{font-family:var(--f-display);font-weight:700;font-size:22px;color:var(--gold)}

/* progress with gold shimmer */
.progress{height:7px;border-radius:999px;background:color-mix(in oklch,var(--fg) 9%,transparent);
  overflow:hidden;border:1px solid var(--hair-soft)}
.progress-fill{height:100%;border-radius:999px;transition:width .5s var(--ease);
  background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-bright),var(--gold));
  background-size:200% 100%;animation:shimmerbar 2.6s linear infinite}
@keyframes shimmerbar{from{background-position:200% 0}to{background-position:0 0}}

.streak-row{display:flex;align-items:center;gap:8px;height:24px;margin:12px 0 4px}
.streak-label{font-family:var(--f-head);text-transform:uppercase;letter-spacing:.18em;font-size:10px;color:var(--gold)}
.streak-hint{font-family:var(--f-body);font-style:italic;color:var(--fg-faint);font-size:13px}
.flame{color:var(--gold-deep);opacity:.3;transition:.3s var(--ease)}
.flame.lit{color:var(--gold-bright);opacity:1;filter:drop-shadow(0 0 5px rgba(230,199,122,.6));animation:flamePop .4s var(--ease)}
@keyframes flamePop{0%{transform:scale(.4)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
.streak-n{font-family:var(--f-display);font-weight:700;color:var(--gold);font-size:15px;margin-left:2px}

/* ---------- flip card (tilt + fade — never edge-on/invisible) ---------- */
.qcard-perspective{margin-top:6px}
.qcard{position:relative;border-radius:6px;padding:clamp(20px,3.2vw,34px);
  background:var(--surface);box-shadow:var(--shadow-card);border:1px solid var(--hair-soft);
  overflow:hidden;transform-origin:center;
  transition:transform .28s var(--ease-out), opacity .28s var(--ease-out)}
.qcard.flip-out{opacity:0;transform:perspective(1400px) rotateY(-13deg) scale(.965)}
.qcard.flip-in{opacity:0;transform:perspective(1400px) rotateY(13deg) scale(.965);transition:none}
[data-dir="jewel"] .qcard{border-radius:18px}

.qimg{margin-bottom:18px}
/* ---- Question image fallback (scene illustration not ready yet) ----
   Shown instead of a blank/broken slot. The topic artifact sits as a faded
   watermark with a gold "coming soon" caption — reads as intentional. */
.qfallback{position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;padding:24px;
  border-radius:5px;overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 6%, color-mix(in oklch,var(--accent) 16%,transparent), transparent 62%),
    linear-gradient(168deg,#16213a,#0e1730);
  border:1px solid var(--hair-soft);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.qfallback-art{width:min(58%,190px);aspect-ratio:1;display:grid;place-items:center}
.qfallback-art img{max-width:100%;max-height:100%;object-fit:contain;
  opacity:.3;filter:saturate(.55) drop-shadow(0 10px 22px rgba(0,0,0,.5))}
.qfallback-cap{display:flex;flex-direction:column;align-items:center;gap:9px;
  max-width:92%;text-align:center;text-wrap:balance;line-height:1.55;
  font-family:var(--f-head);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold)}
.qfallback-cap::before{content:"";width:34px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
@media (max-width:720px){
  .qfallback{padding:16px;gap:10px}
  .qfallback-art{width:min(46%,120px)}
  .qfallback-cap{font-size:10.5px;letter-spacing:.14em}
}
/* Question photo — never crop the image. Fill the frame on desktop, but show the
   WHOLE landscape photo on a navy matte once the frame turns portrait/short. */
.qimg img,.qfigure img{width:100%;height:100%;object-fit:cover;display:block}
.question{font-family:var(--f-head);font-weight:600;color:var(--fg);
  font-size:clamp(20px,2.9vw,27px);line-height:1.32;margin:0 0 22px;text-wrap:balance}

.answers{display:grid;gap:11px}
.answer{display:flex;align-items:center;gap:14px;text-align:left;width:100%;
  padding:14px 16px;border-radius:4px;border:1px solid var(--hair-soft);
  background:color-mix(in oklch,var(--fg) 3%,transparent);transition:.2s var(--ease);position:relative}
.answer:hover:not([disabled]){border-color:var(--accent);transform:translateX(3px);
  background:color-mix(in oklch,var(--accent) 8%,transparent)}
.answer-seal{flex:none;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-head);font-weight:700;font-size:15px;color:var(--fg-dim);
  border:1px solid var(--hair);background:color-mix(in oklch,var(--fg) 5%,transparent);transition:.2s}
.answer:hover:not([disabled]) .answer-seal{color:var(--accent);border-color:var(--accent)}
.answer-txt{flex:1;font-family:var(--f-body);font-size:18px;color:var(--fg)}
.answer-mark{flex:none;width:22px;height:22px}
[data-dir="jewel"] .answer{border-radius:12px}
[data-dir="jewel"] .answer-seal{border-radius:12px}

.answer.correct{border-color:var(--gem-acts);background:color-mix(in oklch,var(--gem-acts) 16%,transparent)}
.answer.correct .answer-seal{background:var(--gem-acts);color:#fff;border-color:var(--gem-acts)}
.answer.correct .answer-mark{color:var(--gem-acts)}
.answer.wrong{border-color:var(--gem-kings);background:color-mix(in oklch,var(--gem-kings) 14%,transparent)}
.answer.wrong .answer-seal{background:var(--gem-kings);color:#fff;border-color:var(--gem-kings)}
.answer.wrong .answer-mark{color:var(--gem-kings)}
.answer.dim{opacity:.5}

/* back face */
.qback{text-align:center}
.qback-corners .corner{width:38px;height:38px}
.verdict{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:14px}
.verdict-seal{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);animation:sealIn .5s var(--ease-out) both}
.verdict-seal svg{width:34px;height:34px;color:#fff}
.verdict.ok .verdict-seal{background:linear-gradient(180deg,#3FA876,#256b49)}
.verdict.no .verdict-seal{background:linear-gradient(180deg,#b14457,#7c2433)}
@keyframes sealIn{from{transform:scale(.5) rotate(-12deg)}to{transform:none}}
.verdict h3{font-family:var(--f-display);font-weight:700;font-size:24px;margin:0;color:var(--fg)}
.reveal-answer{margin:0 0 16px}
.reveal-answer small{display:block;font-family:var(--f-head);text-transform:uppercase;letter-spacing:.2em;font-size:10px;color:var(--fg-faint);margin-bottom:3px}
.reveal-answer strong{font-family:var(--f-body);font-size:21px;color:var(--gold)}
.fact{text-align:left;background:var(--card-parch);border:1px solid var(--hair);border-radius:4px;
  padding:16px 18px;margin-bottom:20px;position:relative}
.fact-label{font-family:var(--f-head);text-transform:uppercase;letter-spacing:.2em;font-size:10px;color:var(--gold-deep);display:block;margin-bottom:6px}
.fact p{margin:0;font-family:var(--f-body);font-size:16px;line-height:1.6;color:var(--on-parch)}
[data-dir="jewel"] .fact{border-radius:12px}

/* ===================================================================
   RESULTS
   =================================================================== */
.plate{margin:8px 0 4px}
.plate-medal{width:78px;height:78px;margin:0 auto 6px;color:var(--gold);
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.4));animation:sealIn .6s var(--ease-out) both}
.plate-medal svg{width:100%;height:100%}
.stars{display:flex;justify-content:center;gap:8px;margin:12px 0}
.star{color:var(--gold-deep);opacity:.3}
.star.lit{color:var(--gold-bright);opacity:1;filter:drop-shadow(0 0 6px rgba(230,199,122,.55));animation:starPop .5s var(--ease-out) both}
.star.lit:nth-child(2){animation-delay:.08s}.star.lit:nth-child(3){animation-delay:.16s}
.star.lit:nth-child(4){animation-delay:.24s}.star.lit:nth-child(5){animation-delay:.32s}
@keyframes starPop{0%{transform:scale(.4) rotate(-30deg)}70%{transform:scale(1.2)}100%{transform:none}}
.tier-note{font-family:var(--f-body);font-style:italic;font-size:18px;color:var(--fg-dim);margin:6px auto 0;max-width:34ch}

.result-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(16px,5vw,44px);margin:8px 0 28px}
.rstat{text-align:center}
.rstat .n{font-family:var(--f-display);font-weight:700;font-size:clamp(26px,4vw,38px);color:var(--gold)}
.rstat .n small{font-size:.5em;color:var(--fg-dim)}
.rstat .l{font-family:var(--f-head);text-transform:uppercase;letter-spacing:.16em;font-size:10px;color:var(--fg-faint);margin-top:4px}
.result-actions{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap}

/* podium */
.podium{display:flex;align-items:flex-end;justify-content:center;gap:14px;margin:18px 0 6px}
.podium-col{display:flex;flex-direction:column;align-items:center;gap:6px;width:120px}
.podium-name{font-family:var(--f-head);font-weight:600;font-size:16px;color:var(--fg);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.podium-score{font-family:var(--f-display);font-weight:700;color:var(--gold);font-size:20px}
.podium-block{width:100%;border-radius:5px 5px 0 0;display:flex;align-items:flex-start;justify-content:center;padding-top:10px;
  background:var(--surface-2);border:1px solid var(--hair);border-bottom:0;position:relative}
.podium-block.r0{background:linear-gradient(180deg,color-mix(in oklch,var(--gold) 30%,var(--surface-2)),var(--surface-2));border-color:var(--gold)}
.podium-rank{font-family:var(--f-display);font-weight:700;font-size:28px;color:var(--gold);opacity:.85}
.rank-list{max-width:360px;margin:18px auto 0;display:flex;flex-direction:column;gap:8px}
.rank-row{display:flex;align-items:center;gap:14px;padding:10px 16px;border-radius:4px;
  border:1px solid var(--hair-soft);background:var(--surface-2);font-family:var(--f-body)}
.rank-row span:first-child{font-family:var(--f-head);color:var(--fg-faint);width:18px}
.rank-row strong{margin-left:auto;color:var(--gold);font-family:var(--f-display)}

/* ===================================================================
   TOP CHROME (toggles)
   =================================================================== */
.chrome{width:100%;max-width:920px;margin:0 auto 6px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.chrome .brand{font-family:var(--f-head);letter-spacing:.24em;text-transform:uppercase;font-size:11px;color:var(--fg-faint);display:flex;align-items:center;gap:10px}
.chrome .brand .bp{color:var(--gold)}
.toggles{display:flex;gap:8px}
.tgl{width:40px;height:40px;border-radius:50%;border:1px solid var(--hair);color:var(--fg-dim);
  display:flex;align-items:center;justify-content:center;background:color-mix(in oklch,var(--fg) 3%,transparent);transition:.2s var(--ease)}
.tgl:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-1px)}
.tgl svg{width:18px;height:18px}
.tgl.dir{width:auto;border-radius:999px;padding:0 16px;font-family:var(--f-head);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;gap:8px}

@media (max-width:560px){
  .game-head{flex-wrap:wrap}
  .qcount{order:3;width:100%;text-align:center}
  .result-stats{gap:20px}
  .podium-col{width:92px}
}
/* ===== answer polish (front) ===== */
.answer{background:linear-gradient(180deg,color-mix(in oklch,var(--fg) 5%,transparent),transparent)}
.answer::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:0;border-radius:0 2px 2px 0;background:var(--accent);transition:height .26s var(--ease)}
.answer:hover:not([disabled])::before{height:62%}
.answer-seal{color:var(--gold-deep);border-color:color-mix(in oklch,var(--gold) 40%,transparent);
  background:radial-gradient(circle at 50% 36%,color-mix(in oklch,var(--gold) 16%,transparent),transparent 72%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.answer.correct::before{height:62%;background:var(--gem-acts)}
.answer.wrong::before{height:62%;background:var(--gem-kings)}

/* ===== reveal / back face (rich) ===== */
.qback{position:relative;text-align:center;overflow:hidden}
.bp-mark{position:absolute;right:-20px;bottom:-26px;color:var(--gold);opacity:.06;
  transform:rotate(-10deg);pointer-events:none}
.verdict{margin:0 0 10px;animation:sealIn .55s var(--ease-out) both}
.verdict-seal{width:78px;height:78px;position:relative}
.verdict-seal svg{width:38px;height:38px}
.verdict-seal::after{content:"";position:absolute;inset:-7px;border-radius:50%;
  border:1px solid currentColor;opacity:.32}
.verdict.ok .verdict-seal::after{color:var(--gem-acts)}
.verdict.no .verdict-seal::after{color:var(--gem-kings)}
.verdict-title{font-family:var(--f-display);font-weight:700;margin:0;color:var(--fg);
  font-size:clamp(23px,3.6vw,31px)}
.pts{font-family:var(--f-head);text-transform:uppercase;letter-spacing:.16em;font-size:12px;
  color:var(--gold-deep);margin:7px 0 18px}
.pts strong{font-family:var(--f-display);font-size:21px;color:var(--gold);letter-spacing:0;margin-right:4px}
.pts.zero{color:var(--fg-faint);font-style:normal}

.reveal-band{display:flex;align-items:center;gap:16px;margin:0 0 22px}
.reveal-band .rb-rule{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--hair),transparent)}
.rb-mid{display:flex;flex-direction:column;align-items:center;gap:5px;flex:none;max-width:60%}
.rb-label{font-family:var(--f-head);text-transform:uppercase;letter-spacing:.26em;font-size:10px;color:var(--fg-faint)}
.rb-ans{font-family:var(--f-display);font-weight:700;line-height:1.1;font-size:clamp(22px,3.4vw,30px);
  background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;text-wrap:balance}
[data-theme="light"] .rb-ans{-webkit-text-stroke:.5px var(--navy-800)}

.fact-stack{display:flex;flex-direction:column;gap:12px;margin-bottom:20px;text-align:left}
.fact{display:flex;gap:14px;align-items:flex-start;background:var(--card-parch);
  border:1px solid var(--hair);border-radius:5px;padding:15px 17px;position:relative;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 8px 20px -14px rgba(0,0,0,.5);
  animation:factIn .5s var(--ease-out) both}
.fact:nth-child(2){animation-delay:.09s}
@keyframes factIn{from{transform:translateY(12px)}to{transform:none}}
.fact-ic{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--gold-deep);
  background:radial-gradient(circle at 50% 36%,color-mix(in oklch,var(--gold) 28%,transparent),transparent 72%);
  box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--gold) 50%,transparent)}
.fact-ic svg{width:21px;height:21px}
.fact-body{flex:1}
.fact-body .fact-label{display:block;margin-bottom:5px}
.fact-stack .fact:first-child .fact-body p::first-letter{
  font-family:var(--f-display);font-weight:700;font-size:2.5em;line-height:.78;float:left;
  margin:3px 9px 0 0;color:var(--gold-deep)}
.fact.fun{background:linear-gradient(160deg,#eef3f4,#e2ecef 70%);border-color:color-mix(in oklch,var(--gem-gospel) 30%,var(--hair))}
[data-theme="dark"] .fact.fun{background:linear-gradient(160deg,#1a2a33,#15222b)}
.fact.fun .fact-ic{color:var(--gem-gospel);
  background:radial-gradient(circle at 50% 36%,color-mix(in oklch,var(--gem-gospel) 26%,transparent),transparent 72%);
  box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--gem-gospel) 50%,transparent)}
.fact.fun .fact-label{color:var(--gem-gospel)}
[data-theme="dark"] .fact.fun p{color:#d6e4ea}

@media (prefers-reduced-motion:reduce){
  .qcard{transition:none}.progress-fill{animation:none}
  .verdict,.verdict-seal,.star.lit,.flame.lit,.plate-medal,.fact{animation:none}
}

/* ===================================================================
   v3 UPGRADES
   =================================================================== */

/* ---- premium topic emblems (SVG) ---- */
.topic-emblem.svg{height:116px}
.topic-emblem.svg svg{width:100px;height:100px}

/* ---- difficulty card spacing fix ---- */
.tile.level p{min-height:2.7em}
.tile.level .count-chip{margin-top:16px}

/* ---- question screen: two-column ---- */
.qfront{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  gap:clamp(16px,2.4vw,28px);align-items:stretch}
.qfigure{position:relative;min-height:280px;border-radius:5px}
.qfigure .slot-frame{position:absolute;inset:0;padding:6px;height:100%}
.qfigure image-slot{width:100%;height:100%;display:block}
.qbody{display:flex;flex-direction:column;justify-content:center;min-width:0}
.qbody .question{margin-top:0}
@media (max-width:720px){
  .qfront{grid-template-columns:1fr;gap:16px}
  /* Give the photo a natural landscape frame instead of a forced-tall box, and
     contain (not cover) so horizontal images are shown in full, not cropped. */
  .qfigure{min-height:0;height:auto;aspect-ratio:3/2;
    background:var(--navy-800);border-radius:5px;overflow:hidden}
  .qfigure img,.qimg img{object-fit:contain}
  .qfigure .slot-frame{padding:0}
}
/* Portrait phones held upright — the case where landscape crops hurt most */
@media (max-width:720px) and (orientation:portrait){
  .qfigure{aspect-ratio:16/10}
}

/* ---- On Your Journey card (branded travel tie-in) ---- */
.fact.journey{background:linear-gradient(160deg,#15293d,#102031);
  border-color:color-mix(in oklch,var(--gold) 38%,var(--hair))}
[data-theme="light"] .fact.journey{background:linear-gradient(160deg,#fbf3df,#f3e7c6)}
.fact.journey .fact-ic{color:var(--gold);
  background:radial-gradient(circle at 50% 34%,color-mix(in oklch,var(--gold) 32%,transparent),transparent 72%);
  box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--gold) 58%,transparent)}
.fact.journey .fact-label{color:var(--gold)}
[data-theme="dark"] .fact.journey p{color:#ecdfc4}
.journey-brand{display:block;margin-top:9px;padding-top:8px;border-top:1px solid var(--hair-soft);
  font-family:var(--f-head);text-transform:uppercase;letter-spacing:.14em;font-size:10px;color:var(--gold-deep)}

/* ---- results: medal achievement plate ---- */
.medal-plate{position:relative;width:172px;margin:2px auto 6px;animation:sealIn .6s var(--ease-out) both}
.medal-img{width:100%;filter:drop-shadow(0 12px 20px rgba(0,0,0,.5))}
.medal-core{position:absolute;left:50%;top:49.5%;transform:translate(-50%,-50%);text-align:center;width:60%}
.medal-acc{font-family:var(--f-display);font-weight:700;font-size:36px;line-height:1;color:#5a4319;
  text-shadow:0 1px 0 rgba(255,247,225,.5)}
.medal-acc small{font-size:.48em;opacity:.8}
.medal-lbl{font-family:var(--f-head);text-transform:uppercase;letter-spacing:.2em;font-size:9px;color:#6e5424;margin-top:3px}

/* ---- podium upgrades ---- */
.podium-medal{width:56px;margin:0 auto -4px;display:block;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));animation:sealIn .6s var(--ease-out) both}
.podium-block{background:linear-gradient(180deg,color-mix(in oklch,var(--fg) 8%,transparent),color-mix(in oklch,var(--fg) 3%,transparent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.podium-block.r0{background:linear-gradient(180deg,color-mix(in oklch,var(--gold) 34%,var(--surface-2)),color-mix(in oklch,var(--gold) 10%,var(--surface-2)));
  border-color:var(--gold);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 -6px 24px -10px color-mix(in oklch,var(--gold) 60%,transparent)}

@media (max-width:560px){
  .qfront{gap:12px}
}

/* ---- mode-select polish ---- */
.mode-grid{gap:18px}
.mode-tile{text-align:center;display:flex;flex-direction:column;align-items:center;
  padding-top:30px;padding-bottom:26px}
.mode-tile h3,.mode-tile p{text-align:center}
.mode-tile p{min-height:2.7em;margin-bottom:2px}
.mode-emblem{width:72px;height:72px;display:grid;place-items:center;margin-bottom:14px}
.mode-emblem svg{width:72px;height:72px}
.mode-emblem.photo{width:auto;height:118px;margin-bottom:16px}
.mode-emblem.photo img{max-height:118px;max-width:200px;width:auto;object-fit:contain;
  filter:drop-shadow(0 12px 16px rgba(0,0,0,.5))}
.mode-chip{margin-top:14px;color:var(--gold);border-color:color-mix(in oklch,var(--gold) 38%,transparent)}

/* ---- difficulty emblem ---- */
.level-emblem{width:60px;height:60px;display:grid;place-items:center;margin-bottom:12px}
.level-emblem svg{width:60px;height:60px}
.level-emblem.photo{width:auto;height:96px;margin-bottom:14px}
.level-emblem.photo img{max-height:96px;max-width:120px;width:auto;object-fit:contain;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.5))}
.tile.level{display:flex;flex-direction:column}

/* =====================================================================
   v2 UPDATE — 12-topic grid, timer mode, quit, share
   ===================================================================== */

/* ---- topic grid: 4 × 3 ---- */
.topic-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:16px}
.topic-grid .topic{padding:18px 16px 20px}
@media (max-width:860px){ .topic-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:620px){ .topic-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:380px){ .topic-grid{grid-template-columns:1fr} }

/* ---- timer toggle (count screen) ---- */
.timer-toggle{display:flex;align-items:center;gap:14px;width:100%;max-width:440px;margin:24px auto 0;
  text-align:left;padding:14px 18px;border-radius:5px;border:1px solid var(--hair-soft);
  background:color-mix(in oklch,var(--fg) 3%,transparent);transition:.22s var(--ease)}
.timer-toggle:hover{border-color:var(--accent);transform:translateY(-1px)}
.timer-toggle.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 22px -8px color-mix(in oklch,var(--accent) 60%,transparent)}
[data-dir="jewel"] .timer-toggle{border-radius:14px}
.tt-box{flex:none;width:24px;height:24px;border-radius:5px;border:1.5px solid var(--hair);
  display:flex;align-items:center;justify-content:center;color:var(--navy-900)}
.timer-toggle.on .tt-box{background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep));border-color:var(--gold)}
.tt-box svg{width:16px;height:16px}
.tt-ic{flex:none;width:24px;height:24px;color:var(--accent)}
.tt-ic svg{width:24px;height:24px}
.tt-text strong{display:block;font-family:var(--f-head);font-size:16px;color:var(--fg)}
.tt-text small{font-family:var(--f-body);font-size:14px;color:var(--fg-faint)}

/* ---- quit (X) during gameplay ---- */
.game-wrap{position:relative}
.quit-btn{position:absolute;top:-6px;right:-4px;z-index:6;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--fg-faint);
  border:1px solid var(--hair-soft);background:color-mix(in oklch,var(--fg) 4%,transparent);transition:.2s var(--ease)}
.quit-btn:hover{color:var(--gem-kings);border-color:var(--gem-kings);transform:rotate(90deg)}
.quit-btn svg{width:17px;height:17px}
@media (max-width:560px){ .quit-btn{top:-2px;right:0} }

/* ---- per-question timer bar ---- */
.timer-wrap{display:flex;align-items:center;gap:10px;margin-top:10px}
.timer-ic{flex:none;width:16px;height:16px;color:var(--accent)}
.timer-ic svg{width:16px;height:16px}
.timer-track{flex:1;height:6px;border-radius:999px;overflow:hidden;
  background:color-mix(in oklch,var(--fg) 9%,transparent);border:1px solid var(--hair-soft)}
.timer-bar{display:block;height:100%;width:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-bright));
  transition:width 1s linear}
.timer-bar.low{background:linear-gradient(90deg,#b14457,#d97a4a);animation:timerPulse .7s ease-in-out infinite}
@keyframes timerPulse{50%{opacity:.55}}
.timer-num{flex:none;min-width:22px;text-align:right;font-family:var(--f-display);font-weight:700;
  font-size:15px;color:var(--accent);font-variant-numeric:tabular-nums}

/* ---- share results button (blue) ---- */
.btn-share{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-head);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;font-size:13px;padding:14px 26px;border-radius:3px;
  color:#eaf6fb;background:linear-gradient(180deg,#3BA8C8,#2E7D9E);
  box-shadow:0 10px 24px -10px rgba(59,168,200,.7),inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.btn-share:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(59,168,200,.85),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-share.shared{background:linear-gradient(180deg,#3FA876,#256b49)}
[data-dir="jewel"] .btn-share{border-radius:999px}

/* =====================================================================
   SAMPLER ADDITIONS — decorative question panel, upgrade CTA, footer
   ===================================================================== */

/* ---- decorative question panel (replaces the photo in the sampler) ---- */
.qornament{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;padding:24px;border-radius:5px;overflow:hidden;height:100%;
  background:
    radial-gradient(120% 85% at 50% 8%, color-mix(in oklch,var(--accent) 18%,transparent), transparent 60%),
    var(--surface-2);
  border:1px solid var(--hair)}
.qornament-ring{position:absolute;inset:14px;border:1px solid var(--hair-soft);
  border-radius:4px;pointer-events:none}
[data-dir="jewel"] .qornament{border-radius:16px}
[data-dir="jewel"] .qornament-ring{border-radius:12px}
.qornament-art{width:min(62%,170px);aspect-ratio:1;display:grid;place-items:center;z-index:1}
.qornament-art img{max-width:100%;max-height:100%;object-fit:contain;
  opacity:.92;filter:drop-shadow(0 12px 22px rgba(0,0,0,.4))}
[data-theme="dark"] .qornament-art img{opacity:.85}
.qornament-topic{z-index:1;font-family:var(--f-head);font-weight:600;
  text-transform:uppercase;letter-spacing:.26em;font-size:12px;
  color:var(--accent);text-align:center}

/* ---- results: upgrade CTA ---- */
.sampler-cta{position:relative;margin:30px auto 6px;max-width:560px;
  padding:clamp(26px,4vw,38px) clamp(22px,4vw,40px);border-radius:6px;overflow:hidden;
  text-align:center;background:var(--surface-2);box-shadow:var(--shadow-card)}
.sampler-cta::after{content:"";position:absolute;inset:11px;border:1px solid var(--hair);
  border-radius:3px;pointer-events:none}
[data-dir="jewel"] .sampler-cta{border-radius:18px}
.sampler-cta .corner{width:42px;height:42px}
.cta-seal{display:flex;justify-content:center;color:var(--gold);margin-bottom:14px;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.4))}
.cta-title{font-family:var(--f-display);font-weight:700;
  font-size:clamp(24px,4.4vw,34px);line-height:1.08;margin:12px 0 8px;color:var(--fg)}
.cta-sub{font-family:var(--f-body);color:var(--fg-dim);max-width:40ch;margin:0 auto 22px;
  font-size:clamp(15px,2.1vw,17px);line-height:1.5;text-wrap:pretty}
.cta-btn{text-decoration:none}

/* ---- brand footer ---- */
.sampler-foot{margin-top:22px;text-align:center;font-family:var(--f-head);
  text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--fg-faint)}
.sampler-foot a{color:var(--gold-deep);text-decoration:none;border-bottom:1px solid var(--hair)}
.sampler-foot a:hover{color:var(--gold)}

/* header sampler tag */
.brand-tag{font-family:var(--f-head);font-weight:600;text-transform:uppercase;
  letter-spacing:.22em;font-size:10px;color:var(--gold-deep);
  padding:3px 9px;border:1px solid var(--hair);border-radius:3px;margin-left:4px;
  vertical-align:middle}