/* V21: one responsive header and one connected mascot in both layout sizes. */
.topbar.menu-header-v20>.site-hamburger{order:-1;margin:0!important;flex-shrink:0}
.topbar.menu-header-v20>.brand{margin:0!important;margin-inline-end:auto!important;min-width:0;text-decoration:none}
.menu-header-v20>.brand>.site-brand-logo{flex-shrink:0}
.menu-header-v20>.brand>:is(strong,span){line-height:1.3}
/* The removed four-square topic shortcut stays absent; its destination remains
   available through the study call-to-action and the topic board. */
.topbar.menu-header-v20>.header-link[href="#topics"]{display:none!important}

.site-menu-drawer{will-change:transform,opacity}
.site-menu-backdrop{will-change:opacity}
#topics,#chooseGame,#exams{scroll-margin-top:22px}

/* All dimensions use one canvas/image coordinate space. Old V19 flex and arm
   positioning overrides cannot separate the artwork anymore. */
.games-page .world-companion{
  width:100%;min-height:310px;height:auto;display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr);gap:10px;
  align-items:center;justify-items:center;position:relative;direction:rtl;
  padding-block:18px 6px;
}
.games-page .world-companion #mascotGreeting{
  position:relative;inset:auto;margin:0;grid-column:1;grid-row:1;
  width:100%;max-width:275px;height:auto;aspect-ratio:275/325;
  padding:0;border:0;background:transparent;box-shadow:none;
  -webkit-tap-highlight-color:transparent;isolation:isolate;
}
.games-page #mascotGreeting:focus:not(:focus-visible){outline:none;box-shadow:none}
.games-page #mascotGreeting:focus-visible{outline:2px solid #c6952e;outline-offset:3px}
.games-page #mascotGreeting .mascot-rig{position:relative;display:block;width:100%;height:100%}
.games-page #mascotGreeting .mascot-rig>.mascot-complete-v21{
  position:relative;inset:auto;display:block;width:100%;height:auto;object-fit:contain;
  pointer-events:none;max-width:100%;
}
.games-page #mascotGreeting .mascot-rig>.mascot-wave-v21{
  display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
}
.games-page #mascotGreeting .mascot-wave-v21[hidden]{display:none!important}
.games-page .world-companion .hero-instrument{
  grid-column:2;grid-row:1;position:relative;inset:auto;
  width:100%;max-width:145px;height:auto;aspect-ratio:1;margin:0;
}
.games-page .world-companion .mascot-reply{top:-10px;right:0;max-width:min(220px,100%);box-sizing:border-box}

/* Matching native development placeholders for every upcoming study topic. */
.development-native-v21{margin-top:0}
.development-native-v21 .development-tabs-v21{
  width:fit-content;display:flex;align-items:center;gap:8px;margin:18px 0 24px auto;
  padding:5px;border:1px solid rgba(30,92,75,.14);border-radius:14px;
  background:rgba(244,249,247,.92);box-shadow:0 8px 24px rgba(32,75,64,.06);
}
.development-native-v21 .development-tabs-v21>button{
  flex:none;min-height:44px;font:700 14px/1.5 Rubik,Arial,sans-serif;
  padding:10px 18px;border-radius:10px;
}
.development-native-v21 .development-tabs-v21>button[aria-selected="true"]{background:#287b65}
.search-box:has(input:disabled){opacity:.6;cursor:not-allowed}
.topic-card[class*="topic-"] .development-topic-tag{font:700 14px/1.5 Rubik,Arial,sans-serif;color:inherit;white-space:nowrap}
.topic-general{--topic-color:#776e50}.topic-hydraulics{--topic-color:#426e80}.topic-metal{--topic-color:#6a7773}.topic-jet-engine{--topic-color:#a56544}

/* Isolate complete expressions; parentheses stay inside their group. Inline
   rather than fixed-width blocks lets longer explanations wrap naturally. */
bdi.bidi-expression{direction:inherit;unicode-bidi:isolate}
bdi.bidi-expression[dir="ltr"]{direction:ltr}
bdi.bidi-expression[dir="rtl"]{direction:rtl}
.games-page .game-answer,.games-page .game-question,.games-page .feedback-box p,
.quiz-shell .question-content,.quiz-shell .answer-copy{unicode-bidi:normal;direction:rtl;text-align:right}

/* Slow, perceptible screen/menu transitions without delaying answer evaluation. */
button,a,.topic-card,.game-card,.answer-option,.game-answer{transition-duration:.45s!important}
@media(max-width:680px){
  .topbar.menu-header-v20>.brand{font-size:clamp(12px,3.3vw,16px)}
  .games-page .world-companion{min-height:0;height:auto;max-width:400px;margin:0 auto;padding-block:22px 6px;gap:8px;}
  .games-page .world-companion #mascotGreeting{max-width:200px;}
  .games-page .world-companion .hero-instrument{max-width:130px;border-width:4px;}
  .development-native-v21 .development-tabs-v21{width:100%;box-sizing:border-box;}
  .development-native-v21 .development-tabs-v21>button{flex:1;}
}
@media(max-width:360px){
  .topbar.menu-header-v20{gap:4px}
  .topbar.menu-header-v20>.brand{font-size:11px;gap:5px}
  .topbar.menu-header-v20>.brand>.site-brand-logo{width:32px;height:24px}
  .games-page .world-companion{gap:5px}
  .games-page .world-companion .hero-instrument{max-width:108px}
}
@media(prefers-reduced-motion:reduce){
  html body :is(button,a,.topic-card,.game-card,.answer-option,.game-answer){transition-duration:.01ms!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}