/* MindSpring — shared minigame boot/gate/form/timer/report styling.

   Used by quiz.html, blast.html, tf.html, cloze.html. Element ids stay
   page-specific (bzBoot/czBoot/quizBoot etc — assets/minigame.js takes
   them as passed-in refs), but these class names are now literally shared
   markup, not just parallel copy-pasted rules with a different prefix.
   match.html and each game's own card/option widgets are NOT here — see
   assets/minigame.js's header comment for what stays page-specific. */

/* boot / gate / loading (all four games) */
.mg-boot{text-align:center;padding:40px 0;}
.mg-spinner{width:40px;height:40px;border-radius:50%;border:3px solid rgba(62,156,108,.22);border-top-color:var(--spring);margin:0 auto 20px;animation:mg-spin .8s linear infinite;}
.mg-mascot-slot{width:40px;margin:0 auto 20px;}
.mg-mascot-slot svg{display:block;}
.mg-boot h2{font-family:"Bricolage Grotesque",sans-serif;font-size:1.4rem;color:var(--ink);letter-spacing:-.01em;}
.mg-boot p{margin-top:10px;color:var(--ink-soft);font-size:15px;line-height:1.6;}
.mg-boot .actions{margin-top:24px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
@keyframes mg-spin{to{transform:rotate(360deg);}}

/* standalone topic-entry form (blast/tf/cloze — quiz has no form, it always
   arrives via ?topic=) */
.mg-eyebrow{font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--spring-deep);display:flex;align-items:center;gap:10px;justify-content:center;}
.mg-eyebrow::before,.mg-eyebrow::after{content:"";width:22px;height:1px;background:var(--spring-deep);opacity:.6;}
.mg-form{text-align:center;padding:20px 0;}
.mg-form h1{font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(1.7rem,3.6vw,2.3rem);line-height:1.1;letter-spacing:-.01em;color:var(--ink);margin-top:14px;}
.mg-form p{margin-top:11px;color:var(--ink-soft);font-size:15.5px;line-height:1.6;max-width:44ch;margin-left:auto;margin-right:auto;}
.mg-form-row{margin-top:26px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.mg-input{flex:1;min-width:220px;max-width:360px;padding:14px 17px;border:1.5px solid var(--line-strong);border-radius:13px;background:var(--card);color:var(--ink);font-family:inherit;font-size:15.5px;}
.mg-input:focus{outline:none;border-color:var(--spring);box-shadow:0 0 0 3px rgba(62,156,108,.15);}
.mg-cost{margin-top:14px;font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-soft);}

/* difficulty picker (Easy / Medium / Hard) on the practice start forms */
.mg-diff{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:18px;}
.mg-diff-lbl{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);}
.mg-diff-opts{display:inline-flex;background:var(--card);border:1px solid var(--line-strong);border-radius:100px;padding:3px;gap:2px;}
.mg-diff-opt{font-family:"Inter",sans-serif;font-size:13.5px;font-weight:600;color:var(--ink-soft);background:none;border:none;cursor:pointer;padding:8px 17px;border-radius:100px;transition:background .15s ease,color .15s ease;}
.mg-diff-opt:hover{color:var(--ink);}
.mg-diff-opt.sel{background:var(--evergreen);color:#f4f2e8;}
html[data-theme="dark"] .mg-diff-opt.sel{background:var(--spring-deep);color:#0c1d15;}

/* 60s countdown + streak HUD (blast/tf only) */
.mg-hud{margin-bottom:20px;display:flex;align-items:center;gap:14px;}
.mg-clock{flex:none;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.5rem;color:var(--ink);min-width:44px;text-align:center;}
.mg-clockbar{flex:1;height:10px;border-radius:100px;background:var(--sage);overflow:hidden;}
.mg-clockbar > span{display:block;height:100%;border-radius:100px;background:var(--spring);width:100%;transition:width 1s linear;}
.mg-clockbar > span.low{background:var(--danger);}
.mg-streakbox{flex:none;display:flex;align-items:center;gap:6px;font-family:"IBM Plex Mono",monospace;font-size:12.5px;font-weight:700;color:var(--honey);}
.mg-streakbox svg{width:15px;height:15px;}
.mg-streakbox.hot{animation:mg-pulse 1s ease infinite;}
@keyframes mg-pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.12);}}
.mg-meta{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--ink-soft);}
.mg-mult{color:var(--spring-deep);font-weight:700;}

/* report tail (all four — score hero, XP badge, actions). The entrance
   animation on the report's outer wrap (.bz-report/.cz-report/.qz-report)
   stays page-local — each page already has its own card-entrance keyframe
   of the same shape, no need for a second shared one. */
.rep-hero{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-md);padding:clamp(24px,4vw,34px);text-align:center;}
.rep-eyebrow{font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--spring-deep);}
.rep-score{margin-top:14px;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:clamp(2.6rem,8vw,3.6rem);line-height:1;color:var(--ink);}
.rep-score small{font-size:.42em;font-weight:600;color:var(--ink-soft);}
.rep-stats{margin-top:16px;display:flex;justify-content:center;gap:24px;flex-wrap:wrap;}
.rep-stat{text-align:center;}
.rep-stat b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:1.3rem;color:var(--ink);}
.rep-stat span{font-family:"IBM Plex Mono",monospace;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);}
.rep-msg{margin-top:18px;font-family:"Bricolage Grotesque",sans-serif;font-size:1.2rem;font-weight:700;color:var(--ink);}
.rep-xp{margin:14px auto 0;display:inline-block;padding:7px 15px;border-radius:100px;background:rgba(62,156,108,.14);border:1px solid rgba(62,156,108,.4);font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:14px;color:var(--spring-deep);letter-spacing:.01em;}
.rep-actions{margin-top:24px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

@media(prefers-reduced-motion:reduce){
  .mg-spinner{animation:none;}
  .mg-streakbox.hot{animation:none;}
  .mg-clockbar > span{transition:none;}
}