/* ============================================================
   [FILE: core/css/base.css]
   Reset, структурные переменные, html/body, утилиты.
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --gap-xs:   clamp(4px, 0.8vw, 5px);
  --gap-sm: clamp(16px, 4vw, 28px);
  --gap-md:   clamp(6px, 1.8vw, 12px);
  --gap-lg:   clamp(10px, 2.5vw, 18px);

  --pad-panel-y: clamp(5px, 1.4vw, 9px);
  --pad-panel-x: clamp(8px, 2vw, 14px);

  --wrapper-pad:  clamp(4px, 1vw, 10px);
  --header-h: clamp(48px, 11vw, 80px);
  --bottom-pad-y: 6px;
  --safe-pad: clamp(10px, 3vw, 16px);

  --t-fast:   0.07s;
  --t-base:   0.3s;
  --t-pop:    0.4s;
}

html,
body {
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  position: fixed;
}

body {
  margin: 0;
  padding: 0;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.hidden { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible { outline: 2px solid; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  html { width: 100vh; height: 100vw; overflow: hidden; }
  body {
    width: 100vh; height: 100vw;
    transform: rotate(90deg) translateY(-100%);
    transform-origin: top left;
    overflow: hidden;
  }
}