/* THE MINT ui kit - stylized buttons + chips for the glunty academy.
 * Include once; theme-aware via the academy tokens; zero images, zero network.
 * Base feel: chunky toy button with a hard 3px "click" shadow that collapses
 * on press (the tactile arcade press). Never remove focus-visible styles. */
.mint-btn{
  --mb-ink:#191f3c; --mb-bg:#ffffff; --mb-fg:#191f3c; --mb-drop:#191f3c;
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  font-family:'SF Pro Rounded', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  font-weight:800; font-size:1rem; line-height:1; letter-spacing:.01em;
  padding:.78rem 1.35rem; border-radius:14px; cursor:pointer; text-decoration:none;
  color:var(--mb-fg); background:var(--mb-bg);
  border:2.5px solid var(--mb-ink);
  box-shadow:0 3px 0 var(--mb-drop);
  transform:translateY(0);
  transition:transform .08s ease, box-shadow .08s ease, filter .12s ease;
  -webkit-tap-highlight-color:transparent;
}
.mint-btn:hover{ filter:brightness(1.03); text-decoration:none; }
.mint-btn:active{ transform:translateY(3px); box-shadow:0 0 0 var(--mb-drop); }
.mint-btn:focus-visible{ outline:3px solid #7aa2ff; outline-offset:2px; }
.mint-btn[disabled], .mint-btn.is-disabled{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:0 3px 0 var(--mb-drop); }

/* variants */
.mint-btn--primary{ --mb-bg:#191f3c; --mb-fg:#ffffff; --mb-drop:#ffd166; }
.mint-btn--gold{ --mb-bg:linear-gradient(180deg,#ffe28a,#ffd166); --mb-fg:#191f3c; --mb-drop:#c98a13; background:linear-gradient(180deg,#ffe28a,#ffd166); }
.mint-btn--game{ --mb-bg:#6c5ce7; --mb-fg:#fff; }
.mint-btn--music{ --mb-bg:#ff9f68; --mb-fg:#191f3c; }
.mint-btn--comic{ --mb-bg:#c86bfa; --mb-fg:#fff; }
.mint-btn--brand{ --mb-bg:#ff6b9d; --mb-fg:#fff; }
.mint-btn--study{ --mb-bg:#2ec7a9; --mb-fg:#191f3c; }
.mint-btn--ghost{ --mb-bg:transparent; box-shadow:none; border-style:dashed; }
.mint-btn--ghost:active{ transform:none; }

/* sizes */
.mint-btn--lg{ font-size:1.15rem; padding:1rem 1.8rem; border-radius:16px; box-shadow:0 4px 0 var(--mb-drop); }
.mint-btn--lg:active{ transform:translateY(4px); }
.mint-btn--sm{ font-size:.85rem; padding:.5rem .9rem; border-radius:11px; border-width:2px; }

/* chip: selectable option (the taste-test pattern, upgraded) */
.mint-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:'SF Pro Rounded', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  font-weight:700; font-size:.95rem; padding:.5rem 1rem; border-radius:999px;
  background:#fff; color:#191f3c; border:2px solid #d6dcf2; cursor:pointer;
  transition:border-color .1s ease, transform .08s ease;
}
.mint-chip:hover{ border-color:#191f3c; }
.mint-chip:active{ transform:scale(.96); }
.mint-chip.on{ background:#191f3c; color:#fff; border-color:#191f3c; }
.mint-chip:focus-visible{ outline:3px solid #7aa2ff; outline-offset:2px; }

/* dark theme: flip inks (relies on the site's data-theme) */
@media (prefers-color-scheme: dark){
  .mint-btn{ --mb-ink:#e8ebfb; }
  .mint-btn:not(.mint-btn--primary):not(.mint-btn--gold):not(.mint-btn--game):not(.mint-btn--comic):not(.mint-btn--brand){ --mb-bg:#1c2247; --mb-fg:#e8ebfb; }
  .mint-chip{ background:#1c2247; color:#e8ebfb; border-color:#2a3160; }
  .mint-chip.on{ background:#e8ebfb; color:#191f3c; border-color:#e8ebfb; }
}
[data-theme="dark"] .mint-btn{ --mb-ink:#e8ebfb; }
[data-theme="dark"] .mint-btn:not(.mint-btn--primary):not(.mint-btn--gold):not(.mint-btn--game):not(.mint-btn--comic):not(.mint-btn--brand){ --mb-bg:#1c2247; --mb-fg:#e8ebfb; }
[data-theme="dark"] .mint-chip{ background:#1c2247; color:#e8ebfb; border-color:#2a3160; }
[data-theme="dark"] .mint-chip.on{ background:#e8ebfb; color:#191f3c; border-color:#e8ebfb; }
[data-theme="light"] .mint-btn{ --mb-ink:#191f3c; }
[data-theme="light"] .mint-chip{ background:#fff; color:#191f3c; border-color:#d6dcf2; }
[data-theme="light"] .mint-chip.on{ background:#191f3c; color:#fff; border-color:#191f3c; }

@media (prefers-reduced-motion: reduce){
  .mint-btn, .mint-chip{ transition:none; }
}

/* backdrop helpers */
.mint-bg-grid{ background-color:var(--surface,#eaeefb); background-image:url('/mint/backdrops/bg-grid.svg'); }
.mint-bg-dots{ background-image:url('/mint/backdrops/bg-dots.svg'); }
.mint-bg-music{ background-image:url('/mint/backdrops/scatter-music.svg'); }
.mint-bg-game{ background-image:url('/mint/backdrops/scatter-game.svg'); }
.mint-divider-eq{ display:block; width:100%; height:40px; background:url('/mint/backdrops/divider-eq.svg') repeat-x center / auto 40px; border:none; margin:1.5rem 0; }

/* ===== MINT ui kit, wave 2 (20 more control styles) ===== */
.mint-btn--sticker{ --mb-drop:transparent; box-shadow:0 0 0 4px #fff, 0 6px 14px -8px rgba(25,31,60,.5); transform:rotate(-1.5deg); }
.mint-btn--sticker:active{ transform:rotate(-1.5deg) scale(.97); box-shadow:0 0 0 4px #fff, 0 2px 6px -4px rgba(25,31,60,.5); }
.mint-btn--pill{ border-radius:999px; }
.mint-btn--square{ padding:.78rem; border-radius:14px; aspect-ratio:1; }
.mint-btn--danger{ --mb-bg:#fff; --mb-fg:#c81e3e; border-color:#c81e3e; --mb-drop:#c81e3e; }
.mint-btn--holo{ background:linear-gradient(120deg,#fef9ff,#c7d2fe 38%,#7dd3fc 64%,#f0abfc); --mb-fg:#191f3c; --mb-drop:#7c3aed; }
.mint-btn--paper{ --mb-bg:transparent; border-style:dashed; box-shadow:none; font-weight:700; }
.mint-btn--paper:active{ transform:none; }
.mint-btn--jumbo{ font-size:1.3rem; padding:1.2rem 2.2rem; border-radius:20px; border-width:3px; box-shadow:0 5px 0 var(--mb-drop); }
.mint-btn--jumbo:active{ transform:translateY(5px); }
.mint-btn--outline-game{ --mb-bg:transparent; --mb-fg:#6c5ce7; border-color:#6c5ce7; --mb-drop:#6c5ce7; }
.mint-btn--outline-music{ --mb-bg:transparent; --mb-fg:#e0713a; border-color:#ff9f68; --mb-drop:#ff9f68; }
.mint-btn--outline-comic{ --mb-bg:transparent; --mb-fg:#a94fe0; border-color:#c86bfa; --mb-drop:#c86bfa; }
.mint-btn--outline-brand{ --mb-bg:transparent; --mb-fg:#e04a7f; border-color:#ff6b9d; --mb-drop:#ff6b9d; }
.mint-btn--outline-study{ --mb-bg:transparent; --mb-fg:#1fa389; border-color:#2ec7a9; --mb-drop:#2ec7a9; }
.mint-btn--soft-game{ --mb-bg:#efeafe; --mb-fg:#4c3fc0; border-color:#efeafe; --mb-drop:#cabdf5; }
.mint-btn--soft-music{ --mb-bg:#ffe9e6; --mb-fg:#c05a26; border-color:#ffe9e6; --mb-drop:#f6c4ae; }
.mint-btn--soft-study{ --mb-bg:#e2f6ee; --mb-fg:#177f6b; border-color:#e2f6ee; --mb-drop:#b5e3d3; }
.mint-tab{ display:inline-flex; align-items:center; gap:.4rem; font-family:'SF Pro Rounded',ui-rounded,'Segoe UI',system-ui,sans-serif; font-weight:800; font-size:.92rem; padding:.55rem 1.1rem; border-radius:12px 12px 0 0; background:transparent; color:inherit; border:2.5px solid transparent; border-bottom:none; cursor:pointer; opacity:.65; }
.mint-tab:hover{ opacity:.9; }
.mint-tab.on{ background:#fff; color:#191f3c; border-color:#191f3c; opacity:1; }
.mint-toggle{ appearance:none; width:52px; height:30px; border-radius:999px; background:#d6dcf2; border:2.5px solid #191f3c; position:relative; cursor:pointer; transition:background .15s ease; }
.mint-toggle::after{ content:""; position:absolute; left:2px; top:2px; width:21px; height:21px; border-radius:50%; background:#fff; border:2px solid #191f3c; transition:left .15s ease; box-sizing:border-box; }
.mint-toggle:checked{ background:#2ec7a9; }
.mint-toggle:checked::after{ left:24px; }
.mint-toggle:focus-visible{ outline:3px solid #7aa2ff; outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ .mint-toggle, .mint-toggle::after{ transition:none; } }