/* Mobile First UX: лише представлення; дані та ігрові механізми незмінні. */
html { box-sizing:border-box; }
*, *::before, *::after { box-sizing:inherit; }
body {
  min-height:100vh; min-height:100svh;
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right))
          max(20px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
}
.mindlab-layout, #game-shell, #xp-profile, .menu-hero > *, .menu-kartky > * { min-width:0; }
button { touch-action:manipulation; }
.mode-button, #game-shell .mode-button, .xp-compact-panel .mode-button {
  min-width:44px; min-height:48px; font-size:16px; line-height:1.4; white-space:normal;
}
button:focus-visible { outline:3px solid #23f2ff; outline-offset:4px; }
#game-shell .answer, #game-shell .vidpovid-trenuvannya {
  min-height:52px; white-space:normal; overflow-wrap:anywhere;
}
#game-shell :is(.question,.feedback,#result-box,#training-result) { min-width:0; overflow-wrap:anywhere; }
#game-shell :is(.description,.result-label) { font-size:16px; }
#game-shell :is(.footer,.calibration) { line-height:1.65; }
.xp-compact-panel #xp-compact { min-width:0; overflow-wrap:anywhere; }
.xp-panel p { font-size:16px; }
.svyato {
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right))
          max(16px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  overscroll-behavior:contain;
}
.svyato-zmist { min-width:0; }
.svyato-knopky button { min-height:48px; font-size:16px; }
@media (max-width:600px) {
  .mode-switch { gap:8px; }
  .mode-switch .mode-button { flex:1 1 40%; padding:12px 8px; }
  .mode-switch #menu-return { flex-basis:100%; }
  .xp-compact-panel { padding:12px; gap:8px; margin-bottom:12px; }
  .xp-compact-panel p { margin:0; font-size:14px; line-height:1.5; }
  #neon-menu { padding:18px 14px; }
  #menu-title { font-size:clamp(25px,7.2vw,36px); line-height:1.2; overflow-wrap:anywhere; }
  .menu-hero { min-height:0; }
  .menu-kartka { min-width:0; padding:22px 18px; min-height:220px; }
  .menu-kartka strong { font-size:26px; overflow-wrap:anywhere; }
  .menu-prymitka { font-size:14px; line-height:1.6; }
  #game-shell { padding:18px 12px; }
  #game-shell .question { font-size:19px; line-height:1.55; padding:16px 12px; margin-bottom:18px; }
  #game-shell :is(.answer,.vidpovid-trenuvannya) { padding:14px 12px; font-size:17px; line-height:1.5; }
  #game-shell .feedback { padding:16px 12px; font-size:16px; line-height:1.65; }
  #game-shell #result-box { font-size:16px; line-height:1.8; }
  #game-shell .main-button { padding:14px 12px; font-size:16px; min-height:52px; }
  #game-shell .top-line { font-size:14px; gap:8px; }
}
@media (pointer:coarse) {
  .menu-kartka:hover, .main-button:hover, .answer:hover, .vidpovid-trenuvannya:hover { transform:none; }
  .menu-mozok img { filter:none; }
  .menu-orbita { display:none; }
  .menu-sitka { opacity:.2; }
  .menu-kartka { box-shadow:0 8px 24px #0005; }
}
@media (max-height:500px) and (orientation:landscape) {
  .svyato-zmist { padding:16px; }
  .svyato-holograma { height:90px; }
  .svyato-holograma img { width:110px; height:85px; }
  .svyato h2 { font-size:24px; }
  #svyato-description { margin:12px auto; }
  .svyato-knopky button { width:auto; flex:1; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; }
  .menu-mozok img { filter:none; }
}