:root {
  --ui-focus: #095df2;
  --ui-focus-ring: rgba(9, 93, 242, .2);
  --ui-ease: cubic-bezier(.22, .8, .24, 1);
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--ui-focus-ring);
  outline-offset: 3px;
}

:where(button, a, select) { touch-action: manipulation; }

.site-header,
.game-header {
  transition: box-shadow .24s ease, border-color .24s ease, background-color .24s ease;
}

.site-header.is-scrolled,
.game-header.is-scrolled {
  border-bottom-color: rgba(165, 174, 191, .4);
  box-shadow: 0 10px 30px rgba(24, 33, 54, .08);
}

.ui-menu-toggle {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: none;
  place-items: center;
  gap: 4px;
  padding: 10px;
  border: 1px solid #dfe3ea;
  border-radius: 11px;
  background: rgba(255, 255, 255, .96);
  cursor: pointer;
}

.ui-menu-toggle span {
  width: 18px;
  height: 2px;
  display: block;
  border-radius: 999px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}

.ui-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.ui-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ui-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.ui-mobile-nav {
  position: absolute;
  left: 14px;
  right: 14px;
  top: calc(100% + 8px);
  z-index: 80;
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid #e0e4eb;
  border-radius: 16px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 22px 50px rgba(24, 33, 54, .16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.98);
  transform-origin: top;
  transition: opacity .2s ease, transform .2s var(--ui-ease), visibility .2s;
}

.ui-mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.ui-mobile-nav a {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 13px;
  border-radius: 10px;
  color: #343a46;
  font-size: 14px;
  font-weight: 720;
}

.ui-mobile-nav a:hover,
.ui-mobile-nav a[aria-current="page"] {
  color: #095df2;
  background: #edf4ff;
}

.ui-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s ease, transform .7s var(--ui-ease);
}

.ui-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
  :where(.card, .content-panel, .content-card, .help-card, .feature-card) {
    transition: transform .24s var(--ui-ease), box-shadow .24s ease, border-color .24s ease;
  }

  :where(.card, .content-panel, .content-card, .help-card, .feature-card):hover {
    transform: translateY(-2px);
    border-color: rgba(125, 157, 211, .45);
    box-shadow: 0 18px 46px rgba(24, 33, 54, .08);
  }
}

@media (max-width: 920px) {
  .site-header .ui-menu-toggle { display: grid; }
  .site-header .header-actions { margin-left: auto; }
  .site-header .header-actions .ui-menu-toggle { order: 10; }
}

@media (max-width: 680px) {
  .game-header .ui-menu-toggle { display: grid; }
  .game-header .game-header-inner { position: relative; }
  .game-header .header-home { margin-left: auto; }
  .game-header .ui-mobile-nav { left: 12px; right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .ui-reveal,
  .ui-reveal.is-visible { opacity: 1; transform: none; transition: none; }
  .ui-mobile-nav,
  .ui-menu-toggle span { transition: none; }
}

.mini-lesson{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:32px;align-items:center;padding:28px;border:1px solid #dbe8fb;border-radius:22px;background:linear-gradient(145deg,#f7fbff,#edf4ff);box-shadow:0 14px 40px rgba(24,33,54,.06)}.mini-lesson h2{margin:6px 0 9px;font-size:clamp(25px,3vw,36px);letter-spacing:-.045em}.mini-lesson-copy>p{max-width:610px;margin:0;color:#59616e;line-height:1.6}.mini-lesson-choices{display:flex;gap:8px;margin-top:18px}.mini-lesson-choices button{width:52px;height:46px;border:1px solid #bdd0ee;border-radius:11px;background:#fff;color:#17345f;font-size:20px;font-weight:850;cursor:pointer}.mini-lesson-choices button:hover{border-color:#095df2;background:#edf4ff}.mini-lesson-choices button.is-wrong{animation:ui-lesson-shake .28s ease;border-color:#d5485d;background:#fff0f2;color:#b52d42}.mini-lesson-message{min-height:22px;margin-top:10px!important;font-size:13px}.mini-lesson.is-complete .mini-lesson-message{color:#238c70}.mini-lesson-grid{aspect-ratio:1;display:grid;grid-template-columns:repeat(3,1fr);border:3px solid #1b2130;background:#fff}.mini-lesson-grid>*{display:grid;place-items:center;border:0;border-right:1px solid #b9c1ce;border-bottom:1px solid #b9c1ce;background:#fff;color:#172033;font-size:26px;font-weight:800}.mini-lesson-grid>*:nth-child(3n){border-right:0}.mini-lesson-grid>*:nth-child(n+7){border-bottom:0}.mini-lesson-grid button{color:#095df2;cursor:default}.mini-lesson-grid button.is-solved{animation:ui-lesson-pop .55s cubic-bezier(.2,.82,.3,1);background:#e8f7f2;color:#238c70}
@keyframes ui-lesson-shake{25%{transform:translateX(-3px)}50%{transform:translateX(3px)}75%{transform:translateX(-2px)}}@keyframes ui-lesson-pop{0%,100%{transform:scale(1)}50%{transform:scale(1.1);box-shadow:inset 0 0 0 3px #5fc4a7}}
@media(max-width:680px){.mini-lesson{grid-template-columns:1fr;padding:22px}.mini-lesson-grid{width:min(240px,100%);justify-self:center}}
@media(prefers-reduced-motion:reduce){.mini-lesson-choices button.is-wrong,.mini-lesson-grid button.is-solved{animation:none}}

/* Netlify injects a preview-only drawer that can render as a broken grey bar.
   Hide only that named preview iframe; production content and ad slots are untouched. */
iframe[title="Netlify Drawer"],
div:has(> iframe[title="Netlify Drawer"]) {
  display: none !important;
}