/* Little Words — core design tokens + shared platform UI
   FROZEN API — see /core/README.md. Games and stories consume READ-ONLY.
   Brand: warm cream ground, coral primary, deep navy ink.
   Fonts are the site's own (local files, no third-party requests). */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/assets/fonts/bricolage-var-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/dmsans-var-latin.woff2') format('woff2');
  font-weight: 100 1000;
  font-display: swap;
}

:root {
  /* color */
  --lw-bg: #FFFBF5;
  --lw-bg-warm: #FFF0E8;
  --lw-surface: #FFFFFF;
  --lw-ink: #1E2A4A;
  --lw-ink-soft: #4A4A4A;
  --lw-ink-faint: #8A8177;
  --lw-line: #EFE9DF;
  --lw-line-strong: #CFC7B9;
  --lw-primary: #F28B6E;
  --lw-primary-deep: #BE4327;
  --lw-primary-pressed: #C24E36;
  --lw-sun: #FFC94D;
  --lw-leaf: #6FBF8E;
  --lw-sky: #6FA8DC;
  --lw-berry: #B76FB4;
  --lw-focus: #1E2A4A;

  /* type */
  --lw-font-display: 'Bricolage Grotesque', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --lw-font-body: 'DM Sans', system-ui, -apple-system, sans-serif;

  /* shape + space */
  --lw-radius-sm: 10px;
  --lw-radius: 16px;
  --lw-radius-lg: 24px;
  --lw-radius-round: 999px;
  --lw-shadow: 0 6px 24px rgba(30, 42, 74, 0.10);
  --lw-shadow-soft: 0 2px 10px rgba(30, 42, 74, 0.07);
  --lw-tap-min: 44px; /* minimum touch target */
  --lw-space-1: 4px;
  --lw-space-2: 8px;
  --lw-space-3: 12px;
  --lw-space-4: 16px;
  --lw-space-5: 24px;
  --lw-space-6: 32px;

  /* motion */
  --lw-ease-pop: cubic-bezier(.34, 1.56, .64, 1); /* springy overshoot */
  --lw-ease-out: cubic-bezier(.22, .61, .36, 1);
  --lw-dur-quick: 140ms;
  --lw-dur: 240ms;
  --lw-dur-slow: 420ms;
}

/* ---- base ---- */
.lw-app, .lw-app * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.lw-app {
  font-family: var(--lw-font-body);
  color: var(--lw-ink);
  background: var(--lw-bg);
  line-height: 1.45;
}
.lw-app h1, .lw-app h2, .lw-app h3 { font-family: var(--lw-font-display); line-height: 1.12; margin: 0; }
.lw-app :focus-visible { outline: 3px solid var(--lw-focus); outline-offset: 3px; border-radius: 6px; }
.lw-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---- buttons ---- */
.lw-btn {
  font-family: var(--lw-font-display);
  font-weight: 640;
  font-size: 1rem;
  color: #fff;
  background: var(--lw-primary-deep);
  border: none;
  border-radius: var(--lw-radius-round);
  min-height: var(--lw-tap-min);
  min-width: var(--lw-tap-min);
  padding: 10px 22px;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--lw-primary-pressed), var(--lw-shadow-soft);
  transition: transform var(--lw-dur-quick) var(--lw-ease-pop), box-shadow var(--lw-dur-quick);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.lw-btn:active { transform: translateY(2px) scale(.98); box-shadow: 0 1px 0 var(--lw-primary-pressed); }
.lw-btn[disabled] { opacity: .38; cursor: default; transform: none; }
.lw-btn--ghost {
  background: var(--lw-surface); color: var(--lw-ink);
  border: 2px solid var(--lw-line-strong);
  box-shadow: 0 3px 0 var(--lw-line-strong);
}
.lw-btn--round {
  width: 56px; height: 56px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.45rem;
}
.lw-btn--big { font-size: 1.2rem; padding: 14px 30px; }

/* ---- chips / cards ---- */
.lw-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 4px 12px;
  border-radius: var(--lw-radius-round);
  background: var(--lw-bg-warm); color: var(--lw-primary-deep);
  font-weight: 600; font-size: .85rem;
}
.lw-card-surface {
  background: var(--lw-surface);
  border: 1px solid var(--lw-line);
  border-radius: var(--lw-radius-lg);
  box-shadow: var(--lw-shadow-soft);
}

/* ---- level dial (3-position) ---- */
.lw-dial {
  display: inline-flex; align-items: stretch; position: relative;
  background: var(--lw-bg-warm);
  border: 2px solid var(--lw-line);
  border-radius: var(--lw-radius-round);
  padding: 4px; gap: 2px;
}
.lw-dial__opt {
  position: relative; z-index: 1;
  font-family: var(--lw-font-display); font-weight: 620; font-size: .92rem;
  color: var(--lw-ink-soft);
  background: transparent; border: none; cursor: pointer;
  min-height: var(--lw-tap-min); min-width: 74px; padding: 6px 14px;
  border-radius: var(--lw-radius-round);
  transition: color var(--lw-dur-quick);
  touch-action: manipulation;
}
.lw-dial__opt[aria-checked="true"] { color: #fff; }
.lw-dial__thumb {
  position: absolute; z-index: 0; top: 4px; bottom: 4px;
  background: var(--lw-primary-deep);
  border-radius: var(--lw-radius-round);
  box-shadow: var(--lw-shadow-soft);
  transition: left var(--lw-dur) var(--lw-ease-pop), width var(--lw-dur) var(--lw-ease-pop);
}
@media (max-width: 420px) {
  .lw-dial__opt { min-width: 0; flex: 1; font-size: .85rem; padding: 6px 10px; }
  .lw-dial { width: 100%; }
}

/* ---- shared animations ---- */
@keyframes lw-pop-in {
  0% { transform: scale(.6); opacity: 0; }
  70% { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes lw-bounce-tap {
  0% { transform: scale(1); } 40% { transform: scale(.92); } 100% { transform: scale(1); }
}
@keyframes lw-wiggle {
  0%, 100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); }
}
@keyframes lw-pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(217, 95, 69, .45); }
  100% { box-shadow: 0 0 0 16px rgba(217, 95, 69, 0); }
}
@keyframes lw-float-up {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-90px) scale(1.4); opacity: 0; }
}
.lw-anim-pop { animation: lw-pop-in var(--lw-dur-slow) var(--lw-ease-pop) both; }
.lw-anim-tap { animation: lw-bounce-tap 220ms var(--lw-ease-pop); }
.lw-anim-audio { animation: lw-pulse-ring 900ms ease-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .lw-app *, .lw-app *::before, .lw-app *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}