*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font-ui);
  background: var(--c-bg);
  background-image: var(--bg-abyss);
  color: var(--c-text);
}
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }

/* Reduced motion — one global kill-switch: shakes, pulses, infinite glows
   and slide-ins all collapse to (near-)instant. animationend/transitionend
   still fire, so JS flows that wait on them keep working. */
@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;
  }
}

/* ── Touch hardening ──
   A long press on a cell in WKWebView summons the selection loupe, and a
   scroll flicked past its end rubber-bands the whole body. Game surfaces
   are not text. */
.grid-wrap, .cell, .hud, .inv-slot, .combat__zone, .combat__btn,
.combat__enemy, .beat, .stick, .act-btn, .minimap {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.screen {
  overscroll-behavior: contain;
}

/* ── Honest tap targets ──
   Small-looking controls keep their visuals; an invisible halo brings the
   touchable area to ~44px (Apple HIG). Coarse pointers only — a mouse
   doesn't need the halo, and on desktop it could swallow neighbours. */
@media (pointer: coarse) {
  .lang-btn, .game-menu-btn, .quest-popup__close, .lb__tab,
  .altar-card__btn, .altar-track__btn, .bestiary__tab, .title__contracts-head {
    position: relative;
  }
  .lang-btn::after, .game-menu-btn::after, .quest-popup__close::after,
  .lb__tab::after, .altar-card__btn::after, .altar-track__btn::after,
  .bestiary__tab::after, .title__contracts-head::after {
    content: '';
    position: absolute;
    inset: -8px;
  }
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-surface-light); border-radius: 2px; }
@media (hover: hover) {
  ::-webkit-scrollbar-thumb:hover { background: var(--c-accent); }
}