@layer reset, tokens, base, components, scene, play, screens, modals, puzzles, fx, seasons, overrides;
/* ==========================================================
   VUELVA USTED MAÑANA — Base
   Reinicio, lienzo, tipografía base, foco, accesibilidad y movimiento.
   Los bloques de pantallas, sala, ventanilla, modales y puzles viven en
   ui-*.css (ver spec de rediseño §4). Todo va dentro de @layer.
   ========================================================== */

/* Transición entre páginas del mismo sitio (juego ↔ páginas legales) */
@view-transition { navigation: auto; }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  img, svg, video, canvas, picture { display: block; max-width: 100%; }
  svg { flex: none; }
  button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
  button { cursor: pointer; }
  button:disabled, [aria-disabled="true"] { cursor: not-allowed; }
  a { color: inherit; }
  table { border-collapse: collapse; }
  dialog { color: inherit; }
  [hidden] { display: none !important; }
}

@layer base {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background: var(--canvas);
    scrollbar-color: color-mix(in srgb, var(--ink-3) 70%, transparent) transparent;
    /* El foco nunca queda debajo de la barra superior ni del talón / café */
    scroll-padding-top: calc(var(--topH, 48px) + 16px);
    scroll-padding-bottom: max(96px, calc(var(--cc-h, 0px) + 16px));   /* ni tapado por el aviso de cookies */
    overflow-x: clip;
  }
  body {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--ui);
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    font-synthesis: none;
    font-kerning: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    overflow-x: clip;
  }
  * { font-synthesis: none; }

  /* Zona segura (viewport-fit=cover): el contenido no entra en la muesca */
  main {
    display: block;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  h1, h2, h3 { line-height: var(--lh-head); }
  /* Ajuste de líneas (spec §3): titulares equilibrados, párrafos sin viudas */
  :is(h1, h2, h3, .sc-title, .modal-head h2) { text-wrap: balance; }
  :is(p, li, dd, .dlg-text, .intro-text) { text-wrap: pretty; }
  /* Nombres largos en casillas estrechas: se cortan con guion, nunca desbordan */
  :is(.slot-name, .lvl-t, .p-name) { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
  b, strong { font-weight: 700; }
  small { font-size: max(12px, .8125em); }
  code, kbd, samp, pre { font-family: var(--mono); }
  /* Cifras de ancho fijo: cronómetro, contadores, códigos, teclado, estadísticas */
  :is(time, .num, .timer, #timer, .lvl-n, .tb-badge, .kp-box, .kp-key, .res-stats, .end-stats, .sc-best, code) { font-variant-numeric: tabular-nums; }

  a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
  a:hover { text-decoration-thickness: 2px; }

  ::selection { background: var(--marker-soft); color: var(--ink); }

  /* Foco visible: anillo azul de 3 px en todo lo interactivo */
  :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  :focus:not(:focus-visible) { outline: none; }

  /* Solo para lectores de pantalla (nunca display:none) */
  .sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Sprite de iconos: presente en el DOM, invisible */
  .sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

  /* Sin retardo de doble toque ni zoom accidental al pulsar */
  button, a, label, select, input, textarea, summary, .hs, .slot, .kp-key { touch-action: manipulation; }

  /* Táctil: campos a 16 px como mínimo para que iOS no amplíe al enfocarlos.
     !important en base gana a cualquier capa posterior (también a las temporadas). */
  @media (pointer: coarse) {
    input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: max(16px, 1em) !important; }
  }

  /* Movimiento reducido: todo llega a su estado final al instante.
     Excepción: .shake y .flash-bad se convierten en un destello rojo de 2 px. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      animation-delay: 0s !important;
      transition-duration: .01ms !important;
      transition-delay: 0s !important;
      scroll-behavior: auto !important;
    }
    .shake, .flash-bad { animation: k-flash-bad .4s 1 !important; }
  }
  /* Sin scroll-behavior:smooth global: el motor decide (RM() ? 'auto' : 'smooth')
     y el scrollTo(0,0) de cada cambio de pantalla debe ser instantáneo. */

  /* Transparencia reducida: fuera desenfoques */
  @media (prefers-reduced-transparency: reduce) {
    *, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  }

  /* Colores forzados (Windows, alto contraste) */
  @media (forced-colors: active) {
    :focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
    ::selection { background: Highlight; color: HighlightText; }
    button, .btn, [role="button"] { forced-color-adjust: auto; }
  }
}