/* Tokens y base: estética Wii Sports Resort (blanco, celeste, rayas finas, gris carbón).
   Todo color, radio, sombra y movimiento sale de aquí. */
@font-face {
  font-family: 'WSR Rounded';
  src: url('/fonts/mplus-rounded-500.woff2') format('woff2');
  font-weight: 400 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'WSR Rounded';
  src: url('/fonts/mplus-rounded-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'WSR Rounded';
  src: url('/fonts/mplus-rounded-800.woff2') format('woff2');
  font-weight: 800 900; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light;
  --font: 'WSR Rounded', 'M PLUS Rounded 1c', 'Nunito', ui-rounded, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Color */
  --sky-50: #f3fbff;
  --sky-100: #e2f5fd;
  --sky-200: #bfe8fb;
  --sky-300: #8fd6f7;
  --sky-400: #45bdee;
  --sky-500: #14a5e3;
  --sky-600: #0a87c4;
  --sky-700: #08679a;
  --sun: #ffb02e;
  --sun-soft: #fff1cf;
  --leaf: #3dbb5c;
  --coral: #ff6f5b;
  --ink: #26292d;
  --ink-2: #565e67;
  --ink-3: #87919b;
  --paper: #ffffff;
  --paper-2: #f6f8fa;
  --line: #d6e0e8;
  --line-2: #e8eef3;
  --stripe: rgba(170, 190, 205, .16);
  --ok: #23a455;
  --ok-bg: #e5f7ec;
  --err: #d93b30;
  --err-bg: #fdecea;
  --focus: #5fd0ff;

  /* Botón negro redondeado (como los diálogos de la Wii) */
  --btn-top: #4a4f55;
  --btn-bottom: #1d2024;
  --btn-edge: #0e1012;

  /* Forma */
  --r-xs: 10px;
  --r-s: 14px;
  --r-m: 20px;
  --r-l: 28px;
  --r-pill: 999px;
  --tap: 48px;

  /* Espaciado (rejilla de 4) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;

  /* Sombras suaves, tono celeste */
  --sh-1: 0 1px 2px rgba(20, 70, 110, .08), 0 2px 8px rgba(20, 70, 110, .06);
  --sh-2: 0 2px 4px rgba(20, 70, 110, .08), 0 10px 28px rgba(20, 70, 110, .12);
  --sh-3: 0 4px 10px rgba(20, 70, 110, .10), 0 22px 60px rgba(20, 70, 110, .18);

  /* Movimiento: resortes con linear() (aproximan un spring con rebote leve) */
  --spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.4%, 1.067, 1.099 24.3%, 1.108 26%, 1.1, 1.078 30.1%, 1.049 32.5%, 0.994 37.3%, 0.981 40.2%, 0.974 43.4%, 0.975 50.2%, 0.997 61.3%, 1.002 70.5%, 1);
  --spring-soft: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --t-fast: 140ms;
  --t-med: 260ms;
  --t-slow: 520ms;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100%;
  min-height: 100dvh;
  font: 500 16px/1.5 var(--font);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

/* Fondo de la Wii: rayas horizontales finas sobre cielo de Resort */
.wii-bg {
  background-color: var(--sky-50);
  background-image:
    repeating-linear-gradient(180deg, transparent 0 3px, var(--stripe) 3px 5px),
    radial-gradient(120% 70% at 50% -10%, #c9eeff 0%, rgba(201, 238, 255, 0) 60%),
    linear-gradient(180deg, #e4f6ff 0%, #f7fcff 45%, #ffffff 100%);
  background-attachment: fixed;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--sky-700); text-underline-offset: 3px; }
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; line-height: 1.2; font-weight: 800; letter-spacing: 0; }
p { margin: 0; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

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

/* Raíz de la app: una pantalla a la vez */
#app {
  position: relative;
  min-height: 100dvh;
  isolation: isolate;
}
.screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: calc(var(--s4) + var(--safe-t)) calc(var(--s4) + var(--safe-r)) calc(var(--s6) + var(--safe-b)) calc(var(--s4) + var(--safe-l));
  view-transition-name: pantalla;
}
@media (min-width: 720px) {
  .screen { padding-left: calc(var(--s8) + var(--safe-l)); padding-right: calc(var(--s8) + var(--safe-r)); }
}

/* Transición entre pantallas (View Transitions; con respaldo CSS) */
::view-transition-old(pantalla) { animation: vt-out 180ms var(--ease-out) both; }
::view-transition-new(pantalla) { animation: vt-in 420ms var(--spring-soft) both; }
@keyframes vt-out { to { opacity: 0; transform: scale(.985); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.screen.enter { animation: vt-in 420ms var(--spring-soft) both; }

/* Entradas escalonadas: cada hijo con --i */
.stagger > * { animation: pop-in 520ms var(--spring) both; animation-delay: calc(var(--i, 0) * 45ms + 60ms); }
@keyframes pop-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  ::view-transition-old(pantalla), ::view-transition-new(pantalla) { animation: none; }
}