/* alessIA-2026 — base: reset, tokens, bg, shell */

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

html, body {
  min-height: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

:root {
  --ink:        #2d2d5f;
  --ink-soft:   #444;
  --ink-mute:   #666;
  --accent:     #e91e63;
  --star-a:     #ffd93d;
  --star-b:     #ff9500;
  --star-shadow:#c76c00;

  --grad-c1: linear-gradient(135deg, #ff6b9d, #feca57);
  --grad-c2: linear-gradient(135deg, #48dbfb, #0abde3);
  --grad-c3: linear-gradient(135deg, #1dd1a1, #10ac84);
  --grad-c4: linear-gradient(135deg, #feca57, #ff9f43);
  --grad-c5: linear-gradient(135deg, #a55eea, #8854d0);
  --grad-c6: linear-gradient(135deg, #ff7675, #d63031);

  --depth-c1: 0 5px 0 #d04d79, 0 8px 15px rgba(255,107,157,0.3);
  --depth-c2: 0 5px 0 #0a8ab1, 0 8px 15px rgba(72,219,251,0.3);
  --depth-c3: 0 5px 0 #0a7a5c, 0 8px 15px rgba(29,209,161,0.3);
  --depth-c4: 0 5px 0 #c96f1c, 0 8px 15px rgba(254,202,87,0.3);
  --depth-c5: 0 5px 0 #5f3a94, 0 8px 15px rgba(165,94,234,0.3);
  --depth-c6: 0 5px 0 #a42020, 0 8px 15px rgba(255,118,117,0.3);

  --font-body:    'Fredoka', sans-serif;
  --font-display: 'Bubblegum Sans', cursive;

  --r-card:   24px;
  --r-panel:  20px;
  --r-chip:   30px;
  --r-button: 18px;
  --tap-min:  48px;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: linear-gradient(135deg, #ffd3e0 0%, #b4e5f5 50%, #d4b5f7 100%);
  min-height: 100vh;
  min-height: 100svh;
  position: relative;
  padding:
    max(12px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(20px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
  overscroll-behavior-y: contain;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.bg-deco {
  position: fixed;
  pointer-events: none;
  opacity: 0.35;
  width: 42px;
  height: 42px;
  object-fit: contain;
  animation: floaty 8s ease-in-out infinite;
  z-index: 0;
}

@keyframes floaty {
  0%, 100% { transform: translateY(0)    rotate(0); }
  50%      { transform: translateY(-20px) rotate(10deg); }
}

.app {
  width: min(100%, var(--app-max, 500px));
  margin: 0 auto;
  position: relative;
  z-index: 1;
  padding-bottom: 8px;
}

.screen { animation: slideIn 0.35s ease; }

button,
[role="button"] {
  touch-action: manipulation;
}

button {
  appearance: none;
  -webkit-appearance: none;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .bg-deco, .screen { animation: none; }
}

@media (min-width: 720px) {
  body[data-view="menu"] {
    --app-max: 720px;
  }

  body[data-view="lesson"][data-lesson-type="body-explorer"] {
    --app-max: 760px;
  }
}

@media (min-width: 980px) {
  body[data-view="menu"] {
    --app-max: 820px;
  }
}