/* Theme "young" — «Академия юных волшебников», ages 7–10.
   Saturday-morning cartoon sticker book: every surface is a die-cut sticker on
   bright paper — 3px ink outline, hard offset shadow, slightly uneven corners,
   chunky buttons that squash when pressed, oversized emoji. The page itself is
   a soft sky with CSS-only cartoon clouds.

   Every rule is scoped under body[data-tier="young"], plus a few under
   body[data-tier="none"] .tier-card[data-tier="young"] for the landing-page
   preview card. Selectors stay at prefix + one class (plus state) so screen
   CSS can extend them. */

/* ---------- tokens ---------- */
body[data-tier="young"] {
  --young-sky: #7CC6F5;
  --young-sun: #FFD23F;
  --young-grass: #7ED957;
  --young-berry: #FF6B9D;
  --young-paper: #FFFDF7;
  --young-ink: #2B2140;

  --bg: #CFEAFB;
  --bg-elev: #FFFDF7;
  --bg-sunken: #DCEFFB;
  --ink: #2B2140;
  --ink-soft: #5B5080;
  --line: #2B2140;
  --accent: #FFD23F;          /* sunshine: primary buttons, ink text on top (10.5:1) */
  --accent-ink: #2B2140;
  --accent-2: #C2185B;        /* deep berry: links, focus ring, timer (5.8:1 on paper) */
  --good: #1E7F37;            /* text-safe green; bright grass is used on fills below */
  --bad: #D0314B;             /* 4.9:1 with white text and on paper */
  --warn: #FFD23F;
  --radius: 20px;
  --radius-sm: 14px;
  --shadow: 4px 4px 0 #2B2140;
  --font-display: 'Balsamiq Sans', 'Comic Neue', 'Trebuchet MS', system-ui, sans-serif;
  --font-body: 'Balsamiq Sans', 'Comic Neue', 'Trebuchet MS', system-ui, sans-serif;

  /* uneven sticker corners, two flavours so neighbours never match */
  --sticker-r: 18px 22px 16px 24px;
  --sticker-r2: 22px 16px 24px 18px;
  --sticker-r3: 14px 18px 12px 20px;

  font-size: 18px;
  line-height: 1.45;
  /* soft sky: two tiled cloud layers over a vertical sky gradient */
  background-color: #CFEAFB;
  background-image:
    radial-gradient(circle at 12% 28%, rgba(255, 255, 255, 0.75) 0 46px, transparent 47px),
    radial-gradient(circle at 20% 24%, rgba(255, 255, 255, 0.75) 0 60px, transparent 61px),
    radial-gradient(circle at 29% 30%, rgba(255, 255, 255, 0.75) 0 44px, transparent 45px),
    radial-gradient(circle at 66% 72%, rgba(255, 255, 255, 0.6) 0 36px, transparent 37px),
    radial-gradient(circle at 73% 68%, rgba(255, 255, 255, 0.6) 0 50px, transparent 51px),
    radial-gradient(circle at 81% 73%, rgba(255, 255, 255, 0.6) 0 34px, transparent 35px),
    radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.45) 0 26px, transparent 27px),
    radial-gradient(circle at 93% 16%, rgba(255, 255, 255, 0.45) 0 34px, transparent 35px),
    radial-gradient(circle at 46% 92%, rgba(255, 255, 255, 0.45) 0 24px, transparent 25px),
    radial-gradient(circle at 51% 90%, rgba(255, 255, 255, 0.45) 0 32px, transparent 33px),
    radial-gradient(circle, rgba(255, 255, 255, 0.5) 1.5px, transparent 2.5px),
    linear-gradient(180deg, #BFE3FB 0, #D6EEFC 100%);
  background-size:
    1100px 760px, 1100px 760px, 1100px 760px,
    1100px 760px, 1100px 760px, 1100px 760px,
    1100px 760px, 1100px 760px,
    1100px 760px, 1100px 760px,
    34px 34px,
    100% 100%;
  background-repeat: repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, no-repeat;
}
body[data-tier="young"] h1,
body[data-tier="young"] h2,
body[data-tier="young"] h3,
body[data-tier="young"] h4 { font-weight: 700; }
body[data-tier="young"] h2 { font-size: 1.8rem; }
body[data-tier="young"] h3 { font-size: 1.3rem; }
body[data-tier="young"] a { font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 2px; }
body[data-tier="young"] :focus-visible { outline: 4px solid var(--accent-2); outline-offset: 3px; }

/* a highlighter stroke under section titles */
body[data-tier="young"] .section-title {
  display: inline-block;
  padding: 0 6px;
  background-image: linear-gradient(transparent 58%, var(--young-sun) 58%, var(--young-sun) 92%, transparent 92%);
}
body[data-tier="young"] .section-lead { font-size: 1.05rem; }

/* ---------- top bar ---------- */
body[data-tier="young"] .topbar {
  background: var(--young-paper);
  border-bottom: 3px solid var(--young-ink);
  box-shadow: 0 4px 0 var(--young-ink);
  padding: 8px 16px;
}
body[data-tier="young"] .brand {
  flex-direction: row; align-items: baseline; gap: 8px;
  padding: 4px 14px 6px;
  background: var(--young-berry);
  border: 3px solid var(--young-ink);
  border-radius: var(--sticker-r3);
  box-shadow: 3px 3px 0 var(--young-ink);
  transform: rotate(-2deg);
}
body[data-tier="young"] .brand-name { font-size: 1.3rem; font-weight: 700; letter-spacing: 0.01em; }
body[data-tier="young"] .brand-sub { color: var(--young-ink); font-weight: 700; font-size: 0.75rem; }
body[data-tier="young"] .resources { gap: 6px 8px; }
body[data-tier="young"] .resource {
  padding: 2px 10px 2px 6px;
  background: var(--young-paper);
  border: 2px solid var(--young-ink);
  border-radius: 99px;
  box-shadow: 2px 2px 0 var(--young-ink);
  font-size: 0.95rem;
  font-weight: 700;
  min-height: 32px;
}
body[data-tier="young"] .resource-icon { font-size: 1.25em; }
body[data-tier="young"] .calendar {
  font-weight: 700; color: var(--ink-soft);
  padding: 2px 10px; border: 2px dashed var(--young-ink); border-radius: 99px;
}
body[data-tier="young"] .nav { gap: 8px; }
body[data-tier="young"] .nav a {
  min-width: 56px; min-height: 52px; padding: 4px 8px; justify-content: center;
  background: var(--young-paper);
  border: 3px solid var(--young-ink);
  border-radius: var(--sticker-r3);
  box-shadow: 3px 3px 0 var(--young-ink);
  font-weight: 700; font-size: 0.78rem; line-height: 1.1;
  transition: transform 0.08s, box-shadow 0.08s, background 0.15s;
}
body[data-tier="young"] .nav a .nav-icon { font-size: 1.5rem; }
body[data-tier="young"] .nav a:hover { background: var(--bg-sunken); }
body[data-tier="young"] .nav a:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--young-ink); }
body[data-tier="young"] .nav a.active { background: var(--young-sun); transform: rotate(-3deg); }

/* ---------- stickers: panel, card ---------- */
body[data-tier="young"] .panel {
  background: var(--young-paper);
  border: 3px solid var(--young-ink);
  border-radius: var(--sticker-r);
  box-shadow: 0 0 0 3px var(--young-paper), 6px 6px 0 3px var(--young-ink);
  padding: 20px 22px;
  margin-bottom: 26px;
}
body[data-tier="young"] .panel.error { border-color: var(--bad); background: #FFF0F2; }
body[data-tier="young"] .card {
  background: var(--young-paper);
  border: 3px solid var(--young-ink);
  border-radius: var(--sticker-r2);
  box-shadow: 0 0 0 3px var(--young-paper), 5px 5px 0 3px var(--young-ink);
  padding: 16px 18px;
  gap: 10px;
}
body[data-tier="young"] .grid { gap: 26px 24px; }
body[data-tier="young"] .card-icon { font-size: 3rem; }
body[data-tier="young"] .card-title { font-size: 1.3rem; }
body[data-tier="young"] .card.locked { opacity: 1; background: #EEF4F8; border-style: dashed; box-shadow: 0 0 0 3px var(--young-paper); }
body[data-tier="young"] .card.locked > * { opacity: 0.7; }

/* ---------- buttons ---------- */
body[data-tier="young"] .btn {
  min-height: 52px;
  padding: 8px 20px;
  background: var(--young-paper);
  color: var(--ink);
  border: 3px solid var(--young-ink);
  border-radius: var(--sticker-r3);
  box-shadow: 4px 4px 0 var(--young-ink);
  font-weight: 700;
  font-size: 1.05rem;
  transition: transform 0.08s, box-shadow 0.08s, background 0.15s;
}
body[data-tier="young"] .btn:hover { background: var(--bg-sunken); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--young-ink); }
body[data-tier="young"] .btn:active { transform: translate(4px, 4px) scale(0.97); box-shadow: 0 0 0 var(--young-ink); }
body[data-tier="young"] .btn:disabled { opacity: 0.55; transform: none; box-shadow: 4px 4px 0 var(--young-ink); background: var(--young-paper); }
body[data-tier="young"] .btn-primary { background: var(--young-sun); color: var(--young-ink); }
body[data-tier="young"] .btn-primary:hover { background: #FFDC63; filter: none; }
body[data-tier="young"] .btn-primary:disabled { background: var(--young-sun); }
body[data-tier="young"] .btn-danger { background: var(--young-paper); color: var(--bad); border-color: var(--bad); box-shadow: 4px 4px 0 var(--bad); }
body[data-tier="young"] .btn-danger:hover { background: #FFF0F2; box-shadow: 5px 5px 0 var(--bad); }
body[data-tier="young"] .btn-ghost { background: transparent; border-style: dashed; box-shadow: none; }
body[data-tier="young"] .btn-ghost:hover { background: rgba(255, 255, 255, 0.6); transform: none; box-shadow: none; }
body[data-tier="young"] .btn-ghost:active { transform: scale(0.96); }
body[data-tier="young"] .btn-ghost:disabled { box-shadow: none; background: transparent; }
body[data-tier="young"] .btn-big { min-height: 64px; font-size: 1.3rem; padding: 12px 30px; }
body[data-tier="young"] .btn-small { min-height: 44px; font-size: 0.95rem; padding: 4px 14px; box-shadow: 3px 3px 0 var(--young-ink); }
body[data-tier="young"] .btn-choice { min-height: 64px; font-size: 1.45rem; padding: 10px 14px; border-radius: var(--sticker-r); }
body[data-tier="young"] .btn-choice.is-right { background: var(--young-grass); border-color: var(--young-ink); color: var(--young-ink); opacity: 1; transform: rotate(-2deg); }
body[data-tier="young"] .btn-choice.is-wrong { background: var(--bad); border-color: var(--young-ink); color: #fff; opacity: 1; }
body[data-tier="young"] .btn-stat { min-height: 120px; padding: 14px; gap: 6px; }
body[data-tier="young"] .btn-stat .stat-icon { font-size: 2.6rem; }
body[data-tier="young"] .btn-stat small { color: var(--ink-soft); font-size: 0.85rem; }
body[data-tier="young"] .link { color: var(--accent-2); font-weight: 700; }

/* ---------- inputs ---------- */
body[data-tier="young"] .input,
body[data-tier="young"] .task-input {
  min-height: 52px;
  padding: 8px 14px;
  background: #fff;
  border: 3px solid var(--young-ink);
  border-radius: var(--sticker-r3);
  box-shadow: inset 3px 3px 0 rgba(43, 33, 64, 0.12);
  font-size: 1.1rem;
}
body[data-tier="young"] .task-input { font-size: 1.5rem; font-weight: 700; text-align: center; }
body[data-tier="young"] .input:focus,
body[data-tier="young"] .task-input:focus { background: #FFFBE6; }
body[data-tier="young"] label { font-weight: 700; }

/* ---------- progress, tags ---------- */
body[data-tier="young"] .progress {
  height: 18px;
  background: var(--young-paper);
  border: 3px solid var(--young-ink);
  border-radius: 99px;
  box-shadow: 2px 2px 0 var(--young-ink);
}
body[data-tier="young"] .progress-fill {
  background-color: var(--young-grass);
  background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.35) 0 6px, transparent 6px 12px);
  border-radius: 99px;
  box-shadow: inset 0 -3px 0 rgba(43, 33, 64, 0.18);
}
body[data-tier="young"] .progress.xp .progress-fill { background-color: var(--young-sun); }
body[data-tier="young"] .progress.hp .progress-fill { background-color: var(--bad); }
body[data-tier="young"] .progress.mana .progress-fill { background-color: var(--young-sky); }
body[data-tier="young"] .tag {
  padding: 3px 10px;
  background: var(--young-sun);
  color: var(--young-ink);
  border: 2px solid var(--young-ink);
  border-radius: 99px;
  box-shadow: 2px 2px 0 var(--young-ink);
  font-size: 0.82rem;
  font-weight: 700;
}
body[data-tier="young"] .tag.good { background: var(--young-grass); color: var(--young-ink); }
body[data-tier="young"] .tag.bad { background: var(--bad); color: #fff; }
body[data-tier="young"] .tag.warn { background: var(--young-berry); color: var(--young-ink); }
body[data-tier="young"] .stat { font-weight: 700; }

/* ---------- modal ---------- */
body[data-tier="young"] .overlay { background: rgba(43, 33, 64, 0.5); }
body[data-tier="young"] .modal {
  background: var(--young-paper);
  border: 3px solid var(--young-ink);
  border-radius: 26px 30px 24px 32px;
  box-shadow: 0 0 0 3px var(--young-paper), 8px 8px 0 3px var(--young-ink);
  padding: 24px 26px;
}
body[data-tier="young"] .modal-title { font-size: 1.7rem; }
body[data-tier="young"] .modal-close {
  top: 10px; right: 10px;
  width: 44px; height: 44px; padding: 0;
  background: var(--young-paper);
  color: var(--young-ink);
  border: 3px solid var(--young-ink);
  border-radius: 50%;
  box-shadow: 2px 2px 0 var(--young-ink);
  font-weight: 700;
}
body[data-tier="young"] .modal-close:hover { background: var(--young-berry); }
body[data-tier="young"] .modal-buttons { gap: 12px; margin-top: 20px; }

/* ---------- task prompt ---------- */
body[data-tier="young"] .task-head { align-items: center; margin-bottom: 14px; margin-right: 44px; }
body[data-tier="young"] .task-title {
  display: inline-block;
  padding: 4px 14px;
  background: var(--young-berry);
  border: 3px solid var(--young-ink);
  border-radius: var(--sticker-r3);
  box-shadow: 3px 3px 0 var(--young-ink);
  font-size: 1.1rem;
  transform: rotate(-2deg);
}
body[data-tier="young"] .task-context {
  padding: 2px 10px;
  border: 2px dashed var(--young-ink);
  border-radius: 99px;
  font-weight: 700;
  font-size: 0.9rem;
}
body[data-tier="young"] .task-timer {
  height: 16px;
  background: var(--young-paper);
  border: 3px solid var(--young-ink);
  border-radius: 99px;
  margin-bottom: 18px;
}
body[data-tier="young"] .task-timer-fill {
  background-color: var(--young-grass);
  background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.35) 0 6px, transparent 6px 12px);
  border-radius: 99px;
}
body[data-tier="young"] .task-timer.low .task-timer-fill { background-color: var(--bad); }
body[data-tier="young"] .task-question { font-size: 1.75rem; font-weight: 700; margin: 10px 0 20px; }
body[data-tier="young"] .task-question table { font-size: 1.15rem; border: 3px solid var(--young-ink); border-radius: 12px; overflow: hidden; }
body[data-tier="young"] .task-question td,
body[data-tier="young"] .task-question th { border: 2px solid var(--young-ink); padding: 6px 12px; }
body[data-tier="young"] .task-choices { gap: 14px; }
body[data-tier="young"] .task-input-row { gap: 12px; }
body[data-tier="young"] .task-tools { margin-top: 14px; gap: 10px; }
body[data-tier="young"] .task-hint {
  margin-top: 14px;
  padding: 12px 14px;
  background: #FFF4C2;
  border: 3px dashed var(--young-ink);
  border-radius: var(--sticker-r2);
  font-size: 1.02rem;
}
body[data-tier="young"] .task-feedback { border-top: 3px dashed var(--young-ink); margin-top: 18px; padding-top: 16px; gap: 12px; }
body[data-tier="young"] .task-verdict {
  display: inline-block;
  padding: 6px 16px;
  border: 3px solid var(--young-ink);
  border-radius: var(--sticker-r);
  box-shadow: 3px 3px 0 var(--young-ink);
  font-size: 1.25rem;
  transform: rotate(-1.5deg);
}
body[data-tier="young"] .modal.is-right .task-verdict { background: var(--young-grass); color: var(--young-ink); }
body[data-tier="young"] .modal.is-wrong .task-verdict { background: var(--bad); color: #fff; }
body[data-tier="young"] .task-explain { font-size: 1.02rem; }

/* ---------- lesson ---------- */
body[data-tier="young"] .lesson-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
body[data-tier="young"] .lesson-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; flex: none;
  font-size: 2.6rem; line-height: 1;
  background: var(--young-sun);
  border: 3px solid var(--young-ink);
  border-radius: 50%;
  box-shadow: 3px 3px 0 var(--young-ink);
}
body[data-tier="young"] .lesson-spell { font-size: 1.4rem; font-weight: 700; }
body[data-tier="young"] .lesson-text { font-size: 1.08rem; }
body[data-tier="young"] .lesson-examples {
  margin-top: 14px;
  padding: 14px 18px;
  background: var(--bg-sunken);
  border: 3px dashed var(--young-ink);
  border-radius: var(--sticker-r2);
}
body[data-tier="young"] .lesson-examples h3 { margin-bottom: 8px; }
body[data-tier="young"] .lesson-examples ul { margin: 0; padding-left: 4px; list-style: none; }
body[data-tier="young"] .lesson-examples li { margin: 4px 0; font-size: 1.08rem; }
body[data-tier="young"] .lesson-examples li::before { content: '✨ '; }
body[data-tier="young"] .week-event {
  padding: 10px 14px;
  background: var(--young-sun);
  border: 3px solid var(--young-ink);
  border-radius: var(--sticker-r3);
  font-weight: 700;
}

/* ---------- toasts ---------- */
body[data-tier="young"] .toast {
  padding: 12px 20px;
  background: var(--young-paper);
  color: var(--young-ink);
  border: 3px solid var(--young-ink);
  border-radius: var(--sticker-r3);
  box-shadow: 4px 4px 0 var(--young-ink);
  font-size: 1.05rem;
  transform: translateY(14px) scale(0.9);
}
body[data-tier="young"] .toast.show { transform: none; }
body[data-tier="young"] .toast-success { background: var(--young-grass); color: var(--young-ink); }
body[data-tier="young"] .toast-error { background: var(--bad); color: #fff; }

/* ---------- landing (returning player) ---------- */
body[data-tier="young"] .hero-banner { padding: 36px 0 26px; }
body[data-tier="young"] .hero-kicker {
  display: inline-block;
  padding: 4px 14px;
  background: var(--young-paper);
  color: var(--young-ink);
  border: 3px solid var(--young-ink);
  border-radius: 99px;
  box-shadow: 3px 3px 0 var(--young-ink);
  font-weight: 700;
  transform: rotate(-1.5deg);
}
body[data-tier="young"] .hero-title {
  color: var(--young-sun);
  -webkit-text-stroke: 2px var(--young-ink);
  paint-order: stroke fill;
  text-shadow: 6px 6px 0 var(--young-ink);
  letter-spacing: 0;
  margin: 12px 0 18px;
}
body[data-tier="young"] .hero-title .semi { color: var(--young-berry); }
body[data-tier="young"] .hero-lead { font-size: 1.2rem; }
body[data-tier="young"] .how-step {
  padding: 16px 18px;
  background: var(--young-paper);
  border: 3px solid var(--young-ink);
  border-radius: var(--sticker-r2);
  box-shadow: 0 0 0 3px var(--young-paper), 5px 5px 0 3px var(--young-ink);
}
body[data-tier="young"] .how-icon { font-size: 3rem; line-height: 1; margin-bottom: 6px; }
body[data-tier="young"] .how-grid { gap: 26px 24px; }
body[data-tier="young"] .tier-grid { gap: 26px 24px; }
body[data-tier="young"] .site-footer { font-weight: 700; }
body[data-tier="young"] .portrait {
  width: 60px; height: 60px;
  font-size: 2rem;
  background: var(--young-paper);
  border: 3px solid var(--young-ink);
  border-radius: var(--sticker-r3);
  box-shadow: 3px 3px 0 var(--young-ink);
}
body[data-tier="young"] .portrait[aria-pressed="true"] { background: var(--young-sun); border-color: var(--young-ink); transform: rotate(-5deg); }

/* ---------- the landing preview card (body tier is still "none") ---------- */
body[data-tier="none"] .tier-card[data-tier="young"],
body[data-tier="young"] .tier-card[data-tier="young"] {
  font-family: 'Balsamiq Sans', 'Comic Neue', 'Trebuchet MS', system-ui, sans-serif;
  color: #2B2140;
  background-color: #BFE3FB;
  background-image:
    radial-gradient(circle at 78% 22%, rgba(255, 255, 255, 0.85) 0 22px, transparent 23px),
    radial-gradient(circle at 86% 18%, rgba(255, 255, 255, 0.85) 0 30px, transparent 31px),
    radial-gradient(circle at 94% 24%, rgba(255, 255, 255, 0.85) 0 20px, transparent 21px),
    radial-gradient(circle at 10% 86%, rgba(255, 255, 255, 0.7) 0 18px, transparent 19px),
    radial-gradient(circle at 18% 82%, rgba(255, 255, 255, 0.7) 0 26px, transparent 27px),
    radial-gradient(circle at 27% 88%, rgba(255, 255, 255, 0.7) 0 16px, transparent 17px),
    radial-gradient(circle, rgba(255, 255, 255, 0.55) 1.5px, transparent 2.5px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 30px 30px;
  border: 3px solid #2B2140;
  border-radius: 24px 30px 20px 28px;
  box-shadow: 0 0 0 3px #FFFDF7, 7px 7px 0 3px #2B2140;
  transform: rotate(-1.2deg);
}
body[data-tier="none"] .tier-card[data-tier="young"] .tier-ages,
body[data-tier="young"] .tier-card[data-tier="young"] .tier-ages {
  align-self: flex-start;
  padding: 3px 12px;
  background: #FFD23F;
  color: #2B2140;
  border: 3px solid #2B2140;
  border-radius: 99px;
  box-shadow: 3px 3px 0 #2B2140;
  font-size: 0.95rem;
  font-weight: 700;
  transform: rotate(-3deg);
}
body[data-tier="none"] .tier-card[data-tier="young"] .tier-title,
body[data-tier="young"] .tier-card[data-tier="young"] .tier-title {
  font-family: inherit;
  font-size: 1.7rem;
  font-weight: 700;
  color: #2B2140;
  margin-top: 6px;
}
body[data-tier="none"] .tier-card[data-tier="young"] .tier-blurb,
body[data-tier="young"] .tier-card[data-tier="young"] .tier-blurb { font-size: 1.05rem; }
body[data-tier="none"] .tier-card[data-tier="young"] .tier-list,
body[data-tier="young"] .tier-card[data-tier="young"] .tier-list { list-style: none; padding-left: 0; }
body[data-tier="none"] .tier-card[data-tier="young"] .tier-list li,
body[data-tier="young"] .tier-card[data-tier="young"] .tier-list li { margin: 4px 0; padding-left: 1.7em; text-indent: -1.7em; }
body[data-tier="none"] .tier-card[data-tier="young"] .tier-list li::before,
body[data-tier="young"] .tier-card[data-tier="young"] .tier-list li::before { content: '⭐'; display: inline-block; width: 1.7em; text-indent: 0; }
body[data-tier="none"] .tier-card[data-tier="young"] .btn,
body[data-tier="young"] .tier-card[data-tier="young"] .btn {
  min-height: 56px;
  padding: 8px 26px;
  font-family: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  color: #2B2140;
  background: #FFD23F;
  border: 3px solid #2B2140;
  border-radius: 14px 18px 12px 20px;
  box-shadow: 4px 4px 0 #2B2140;
  transition: transform 0.08s, box-shadow 0.08s, background 0.15s;
}
body[data-tier="none"] .tier-card[data-tier="young"] .btn:hover,
body[data-tier="young"] .tier-card[data-tier="young"] .btn:hover { background: #FFDC63; filter: none; transform: translate(-1px, -1px); box-shadow: 5px 5px 0 #2B2140; }
body[data-tier="none"] .tier-card[data-tier="young"] .btn:active,
body[data-tier="young"] .tier-card[data-tier="young"] .btn:active { transform: translate(4px, 4px) scale(0.97); box-shadow: 0 0 0 #2B2140; }
body[data-tier="none"] .create-hero[data-tier="young"] .portrait {
  width: 60px; height: 60px; font-size: 2rem;
  background: #FFFDF7; border: 3px solid #2B2140; border-radius: 14px 18px 12px 20px; box-shadow: 3px 3px 0 #2B2140;
}
body[data-tier="none"] .create-hero[data-tier="young"] .portrait[aria-pressed="true"] { background: #FFD23F; border-color: #2B2140; transform: rotate(-5deg); }

/* ---------- mobile ---------- */
@media (max-width: 720px) {
  body[data-tier="young"] { font-size: 17px; }
  body[data-tier="young"] .topbar { padding: 8px 10px; }
  body[data-tier="young"] .brand { padding: 2px 10px 4px; transform: rotate(-1.5deg); }
  body[data-tier="young"] .brand-name { font-size: 1.15rem; }
  body[data-tier="young"] .nav { gap: 6px; }
  body[data-tier="young"] .nav a { min-width: 50px; min-height: 48px; padding: 3px 5px; box-shadow: 2px 2px 0 var(--young-ink); }
  body[data-tier="young"] .nav a .nav-icon { font-size: 1.35rem; }
  body[data-tier="young"] .nav .nav-label { font-size: 0.68rem; }
  body[data-tier="young"] .resource { font-size: 0.88rem; min-height: 30px; padding: 1px 8px 1px 5px; }
  body[data-tier="young"] .panel { padding: 16px 16px; box-shadow: 0 0 0 3px var(--young-paper), 5px 5px 0 3px var(--young-ink); }
  body[data-tier="young"] .card { padding: 14px 14px; }
  body[data-tier="young"] .modal { padding: 20px 16px; border-radius: 20px 24px 18px 26px; box-shadow: 0 0 0 3px var(--young-paper), 6px 6px 0 3px var(--young-ink); }
  body[data-tier="young"] .task-question { font-size: 1.5rem; }
  body[data-tier="young"] .btn-choice { font-size: 1.3rem; min-height: 60px; }
  body[data-tier="young"] .hero-title { text-shadow: 4px 4px 0 var(--young-ink); }
  body[data-tier="none"] .tier-card[data-tier="young"],
  body[data-tier="young"] .tier-card[data-tier="young"] { transform: rotate(-0.8deg); box-shadow: 0 0 0 3px #FFFDF7, 5px 5px 0 3px #2B2140; }
}

/* ---------- reduced motion: keep stickers, drop the wobble ---------- */
@media (prefers-reduced-motion: reduce) {
  body[data-tier="young"] .btn:hover,
  body[data-tier="young"] .nav a:hover { transform: none; }
  body[data-tier="young"] .toast { transform: none; }
}