/* ============================================
   TypePup - Children's ABC Typing PWA
   Visual Redesign - "Sunny Meadow" Theme
   Crafted with love for young learners
   ============================================ */

/* ============================================
   Design System - CSS Custom Properties
   ============================================ */
:root {
  /* === Primary Palette - Warm & Inviting === */
  --color-primary: #FF8B6A;          /* Warm Coral - main brand color */
  --color-primary-light: #FFB8A3;    /* Light coral for hover states */
  --color-primary-dark: #E86B4A;     /* Deeper coral for pressed states */
  --color-primary-glow: rgba(255, 139, 106, 0.3);

  /* === Secondary - Magical Lavender === */
  --color-secondary: #9B8CD9;        /* Soft lavender */
  --color-secondary-light: #C4B8F0;  /* Light lavender */
  --color-secondary-dark: #7A6BC0;   /* Deep lavender */

  /* === Feedback Colors - Friendly & Clear === */
  --color-success: #6DD5A0;          /* Fresh mint green */
  --color-success-light: #B8F0D3;    /* Light mint */
  --color-success-dark: #4DB87F;     /* Deep mint */
  --color-success-glow: rgba(109, 213, 160, 0.4);

  --color-error: #FF7B7B;            /* Soft coral-red (not scary) */
  --color-error-light: #FFBDBD;      /* Light error */
  --color-error-dark: #E85555;       /* Deep error */

  --color-warning: #FFCF4D;          /* Golden yellow */
  --color-warning-light: #FFE599;    /* Light gold */
  --color-warning-dark: #E5B32E;     /* Deep gold */
  --color-star: #FFD93D;             /* Star gold */
  --color-star-glow: rgba(255, 217, 61, 0.5);

  /* === Streak & Special === */
  --color-streak: #FF7B4A;           /* Orange flame */
  --color-badge-locked: #D4D1E0;     /* Muted lavender-gray */

  /* === Avatar Colors - Playful Rainbow === */
  --avatar-coral: #FF8B6A;
  --avatar-lavender: #9B8CD9;
  --avatar-mint: #6DD5A0;
  --avatar-gold: #FFD06A;
  --avatar-sky: #6BB8E8;
  --avatar-rose: #F0A0B8;

  /* === Keyboard Finger Colors - Soft Pastels === */
  --finger-pinky-left: #FFCEC9;      /* Soft coral */
  --finger-ring-left: #FFE4C9;       /* Soft peach */
  --finger-middle-left: #FFF4C9;     /* Soft yellow */
  --finger-index-left: #D4F5E0;      /* Soft mint */
  --finger-index-right: #D4E8F5;     /* Soft sky */
  --finger-middle-right: #E8D4F5;    /* Soft lavender */
  --finger-ring-right: #FFE4C9;      /* Soft peach */
  --finger-pinky-right: #FFCEC9;     /* Soft coral */
  --finger-thumb: #E8E4E0;           /* Warm gray */

  /* === Backgrounds - Warm & Sunny === */
  --color-background: #FFF9F5;       /* Warm cream */
  --color-background-gradient: linear-gradient(
    180deg,
    #FFF9F5 0%,        /* Warm cream top */
    #FFF4ED 40%,       /* Peachy cream middle */
    #FFE8DC 100%       /* Soft peach bottom */
  );
  --color-card: #FFFFFF;
  --color-card-shadow: rgba(139, 90, 70, 0.08);
  --color-keyboard-bg: #FFF5F0;
  --color-key-bg: #FFFFFF;
  --color-key-shadow: #E8D4CC;
  --color-key-border: #F0E0D8;

  /* === Text Colors === */
  --color-text: #4A3F3A;             /* Warm dark brown */
  --color-text-light: #7A6A60;       /* Medium brown */
  --color-text-muted: #A89890;       /* Light brown */
  --color-text-on-primary: #FFFFFF;

  /* === Typography === */
  --font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-letter: clamp(7rem, 18vw, 11rem);
  --font-size-key: clamp(0.875rem, 2vw, 1.125rem);
  --font-size-ui: 1.125rem;
  --font-size-small: 0.875rem;
  --font-size-large: 1.5rem;
  --font-size-xl: 2rem;
  --font-weight-normal: 400;
  --font-weight-medium: 600;
  --font-weight-bold: 700;
  --font-weight-extra-bold: 800;

  /* === Sizing & Spacing === */
  --border-radius: 1rem;
  --border-radius-sm: 0.625rem;
  --border-radius-lg: 1.5rem;
  --border-radius-xl: 2rem;
  --border-radius-key: 0.625rem;
  --border-radius-round: 50%;
  --key-size: clamp(2.25rem, 6vw, 3rem);
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;

  /* === Shadows - Soft & Layered === */
  --shadow-xs: 0 1px 2px rgba(139, 90, 70, 0.06);
  --shadow-sm: 0 2px 8px rgba(139, 90, 70, 0.08);
  --shadow-md: 0 4px 16px rgba(139, 90, 70, 0.10);
  --shadow-lg: 0 8px 32px rgba(139, 90, 70, 0.12);
  --shadow-xl: 0 16px 48px rgba(139, 90, 70, 0.15);
  --shadow-key: 0 4px 0 var(--color-key-shadow);
  --shadow-key-pressed: 0 2px 0 var(--color-key-shadow);
  --shadow-glow-success: 0 0 20px var(--color-success-glow);
  --shadow-glow-primary: 0 0 20px var(--color-primary-glow);
  --shadow-glow-star: 0 0 15px var(--color-star-glow);

  /* === Transitions === */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s ease;
  --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* === Z-index Layers === */
  --z-background: -1;
  --z-decorations: 1;
  --z-content: 10;
  --z-keyboard: 20;
  --z-overlay: 100;
  --z-modal: 200;
  --z-celebration: 300;
}

/* ============================================
   Base Reset & Typography
   ============================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-ui);
  font-weight: var(--font-weight-normal);
  color: var(--color-text);
  background: var(--color-background-gradient);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  line-height: 1.5;
}

/* ============================================
   Decorative Background Elements - Illustrated Scene
   ============================================ */
.scene-background {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: var(--z-background);
}

/* === Sky-to-Ground Fade === */
.scene-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 55%,
    rgba(200, 230, 201, 0.15) 70%,
    rgba(165, 214, 167, 0.25) 85%,
    rgba(129, 199, 132, 0.3) 100%
  );
  pointer-events: none;
}

/* === Sun with Playful Rays === */
.scene-sun {
  position: absolute;
  top: -30px;
  left: -30px;
  width: 180px;
  height: 180px;
  animation: sunPulse 6s ease-in-out infinite;
  filter: drop-shadow(0 0 30px rgba(255, 224, 130, 0.5));
}

.sun-rays {
  animation: sunRaysSpin 40s linear infinite;
  transform-origin: 70px 70px;
}

.sun-rays-outer {
  animation: sunRaysOuterPulse 8s ease-in-out infinite;
  transform-origin: 70px 70px;
}

@keyframes sunPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

@keyframes sunRaysSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes sunRaysOuterPulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(1.05); }
}

/* === Illustrated Fluffy Clouds === */
.cloud {
  position: absolute;
  animation: cloudFloat 40s linear infinite;
  filter: drop-shadow(0 6px 12px rgba(139, 90, 70, 0.08));
}

.cloud-1 {
  top: 6%;
  left: -260px;
  width: 260px;
  height: 120px;
  animation-duration: 70s;
}

.cloud-2 {
  top: 16%;
  left: -220px;
  width: 220px;
  height: 110px;
  animation-delay: -30s;
  animation-duration: 85s;
}

.cloud-3 {
  top: 32%;
  left: -180px;
  width: 180px;
  height: 90px;
  animation-delay: -50s;
  animation-duration: 65s;
  opacity: 0.75;
}

@keyframes cloudFloat {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(100vw + 320px)); }
}

/* === Parallax Hills === */
.scene-hills {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 180px;
}

.hill-distant {
  opacity: 0.5;
}

.hill-mid {
  opacity: 0.65;
}

.hill-front {
  opacity: 0.8;
}

/* === Vegetation Layer === */
.scene-vegetation {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  pointer-events: none;
}

.mini-tree {
  position: absolute;
  bottom: 30px;
  opacity: 0.7;
}

.tree-1 {
  left: 8%;
  width: 35px;
  height: 48px;
  animation: treeSway 6s ease-in-out infinite;
}

.tree-2 {
  right: 12%;
  width: 30px;
  height: 42px;
  animation: treeSway 7s ease-in-out infinite;
  animation-delay: -2s;
}

.tree-3 {
  left: 25%;
  width: 28px;
  height: 38px;
  opacity: 0.5;
  animation: treeSway 5s ease-in-out infinite;
  animation-delay: -3.5s;
}

.mini-bush {
  position: absolute;
  bottom: 20px;
  opacity: 0.6;
}

.bush-1 {
  left: 15%;
  width: 28px;
  height: 18px;
}

.bush-2 {
  right: 22%;
  width: 24px;
  height: 16px;
}

@keyframes treeSway {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(1.5deg); }
  75% { transform: rotate(-1.5deg); }
}

/* === SVG Floating Decorative Elements === */
.floating-decor {
  position: absolute;
  pointer-events: none;
}

/* Butterflies - custom SVG with wing animation */
.floating-butterfly-1 {
  top: 18%;
  right: 10%;
  width: 45px;
  height: 36px;
  animation: butterflyFloat1 14s ease-in-out infinite;
  filter: drop-shadow(0 3px 6px rgba(156, 39, 176, 0.2));
}

.floating-butterfly-1 .butterfly-wings {
  animation: butterflyWingFlap 0.3s ease-in-out infinite;
  transform-origin: 20px 16px;
}

.floating-butterfly-2 {
  top: 42%;
  left: 6%;
  width: 38px;
  height: 30px;
  animation: butterflyFloat2 16s ease-in-out infinite;
  animation-delay: -6s;
  filter: drop-shadow(0 3px 6px rgba(25, 118, 210, 0.2));
}

.floating-butterfly-2 .butterfly-wings {
  animation: butterflyWingFlap 0.25s ease-in-out infinite;
  animation-delay: -0.1s;
  transform-origin: 18px 14px;
}

/* Flowers - custom SVG with gentle bob */
.floating-flower-1 {
  bottom: 20%;
  left: 10%;
  width: 38px;
  height: 38px;
  animation: flowerBob 5s ease-in-out infinite;
  filter: drop-shadow(0 2px 4px rgba(233, 30, 99, 0.15));
}

.floating-flower-1 .flower-petals {
  animation: flowerPetalPulse 4s ease-in-out infinite;
  transform-origin: 16px 16px;
}

.floating-flower-2 {
  bottom: 24%;
  right: 15%;
  width: 32px;
  height: 32px;
  animation: flowerBob 6s ease-in-out infinite;
  animation-delay: -2.5s;
  filter: drop-shadow(0 2px 4px rgba(255, 193, 7, 0.15));
}

.floating-flower-2 .flower-petals {
  animation: flowerPetalPulse 5s ease-in-out infinite;
  animation-delay: -1s;
  transform-origin: 14px 14px;
}

/* Bee - custom SVG with buzzy movement */
.floating-bee {
  top: 28%;
  left: 22%;
  width: 42px;
  height: 32px;
  animation: beeFloat 10s ease-in-out infinite;
  filter: drop-shadow(0 2px 5px rgba(253, 216, 53, 0.3));
}

/* Stars / Sparkles - custom SVG */
.floating-star-1 {
  top: 10%;
  right: 22%;
  width: 26px;
  height: 26px;
  animation: starTwinkle 3.5s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(255, 213, 79, 0.5));
}

.floating-star-2 {
  top: 28%;
  left: 18%;
  width: 22px;
  height: 22px;
  animation: starTwinkle 4.5s ease-in-out infinite;
  animation-delay: -1.8s;
  filter: drop-shadow(0 0 6px rgba(255, 224, 130, 0.5));
}

.floating-star-3 {
  top: 52%;
  right: 8%;
  width: 28px;
  height: 28px;
  animation: starTwinkle 4s ease-in-out infinite;
  animation-delay: -2.5s;
  filter: drop-shadow(0 0 10px rgba(255, 202, 40, 0.5));
}

/* === Animation Keyframes === */
@keyframes butterflyFloat1 {
  0%, 100% {
    transform: translate(0, 0) rotate(-3deg);
  }
  20% {
    transform: translate(25px, -30px) rotate(5deg);
  }
  40% {
    transform: translate(45px, -15px) rotate(-2deg);
  }
  60% {
    transform: translate(20px, -45px) rotate(6deg);
  }
  80% {
    transform: translate(-15px, -20px) rotate(-4deg);
  }
}

@keyframes butterflyFloat2 {
  0%, 100% {
    transform: translate(0, 0) rotate(3deg);
  }
  20% {
    transform: translate(-20px, -25px) rotate(-4deg);
  }
  40% {
    transform: translate(15px, -45px) rotate(5deg);
  }
  60% {
    transform: translate(35px, -30px) rotate(-3deg);
  }
  80% {
    transform: translate(10px, -10px) rotate(4deg);
  }
}

@keyframes butterflyWingFlap {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(0.7); }
}

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

@keyframes flowerPetalPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes starTwinkle {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.15) rotate(180deg);
  }
}

@keyframes beeFloat {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  15% {
    transform: translate(50px, -15px) rotate(8deg);
  }
  30% {
    transform: translate(30px, -40px) rotate(-5deg);
  }
  45% {
    transform: translate(-20px, -50px) rotate(3deg);
  }
  60% {
    transform: translate(-45px, -25px) rotate(-8deg);
  }
  75% {
    transform: translate(-25px, 5px) rotate(5deg);
  }
  90% {
    transform: translate(15px, -10px) rotate(-3deg);
  }
}

/* === Responsive: Optimize decorations on mobile === */
@media (max-width: 767px) {
  .scene-sun {
    width: 130px;
    height: 130px;
    top: -25px;
    left: -25px;
  }

  .scene-hills {
    height: 120px;
  }

  .scene-vegetation {
    display: none;
  }

  .scene-fade {
    background: linear-gradient(
      180deg,
      transparent 0%,
      transparent 65%,
      rgba(200, 230, 201, 0.1) 80%,
      rgba(165, 214, 167, 0.2) 100%
    );
  }

  .floating-butterfly-1 {
    width: 35px;
    height: 28px;
  }

  .floating-butterfly-2,
  .floating-star-2,
  .floating-bee {
    display: none;
  }

  .floating-flower-1,
  .floating-flower-2 {
    width: 26px;
    height: 26px;
    opacity: 0.7;
  }

  .floating-star-1,
  .floating-star-3 {
    width: 20px;
    height: 20px;
  }

  .cloud-3 {
    display: none;
  }
}

/* Small mobile optimization */
@media (max-width: 480px) {
  .scene-sun {
    width: 100px;
    height: 100px;
    top: -20px;
    left: -20px;
  }

  .scene-hills {
    height: 80px;
    opacity: 0.7;
  }

  .floating-flower-2,
  .floating-star-3 {
    display: none;
  }
}

/* ============================================
   Flying Birds - Ambient Animation
   ============================================ */
.flying-bird {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.1));
}

.bird-1 {
  width: 26px;
  height: 13px;
  top: 8%;
  animation: birdFly1 45s linear infinite;
  animation-delay: 5s;
}

.bird-2 {
  width: 22px;
  height: 11px;
  top: 15%;
  animation: birdFly2 55s linear infinite;
  animation-delay: 20s;
}

.bird-3 {
  width: 20px;
  height: 10px;
  top: 11%;
  animation: birdFly3 50s linear infinite;
  animation-delay: 35s;
}

/* Wing flap using transform (better browser support than path morphing) */
.bird-wing-left {
  animation: wingFlapLeft 0.45s ease-in-out infinite;
  transform-origin: 100% 100%;
}

.bird-wing-right {
  animation: wingFlapRight 0.45s ease-in-out infinite;
  transform-origin: 0% 100%;
  animation-delay: 0.2s;
}

@keyframes birdFly1 {
  0% {
    left: -30px;
    opacity: 0;
    transform: translateY(0);
  }
  5% { opacity: 0.5; }
  50% { transform: translateY(-15px); }
  95% { opacity: 0.5; }
  100% {
    left: calc(100% + 30px);
    opacity: 0;
    transform: translateY(5px);
  }
}

@keyframes birdFly2 {
  0% {
    left: -25px;
    opacity: 0;
    transform: translateY(0);
  }
  5% { opacity: 0.4; }
  30% { transform: translateY(10px); }
  70% { transform: translateY(-12px); }
  95% { opacity: 0.4; }
  100% {
    left: calc(100% + 25px);
    opacity: 0;
    transform: translateY(3px);
  }
}

@keyframes birdFly3 {
  0% {
    left: -22px;
    opacity: 0;
    transform: translateY(0);
  }
  5% { opacity: 0.35; }
  40% { transform: translateY(-10px); }
  80% { transform: translateY(8px); }
  95% { opacity: 0.35; }
  100% {
    left: calc(100% + 22px);
    opacity: 0;
    transform: translateY(-5px);
  }
}

@keyframes wingFlapLeft {
  0%, 100% {
    transform: rotate(-15deg) scaleY(1);
  }
  50% {
    transform: rotate(8deg) scaleY(0.85);
  }
}

@keyframes wingFlapRight {
  0%, 100% {
    transform: rotate(15deg) scaleY(1);
  }
  50% {
    transform: rotate(-8deg) scaleY(0.85);
  }
}

/* ============================================
   Grass Blades - Wind Animation
   ============================================ */
.grass-blades {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  pointer-events: none;
  overflow: hidden;
}

.grass-blade {
  position: absolute;
  bottom: 5px;
  transform-origin: bottom center;
}

.blade-1 {
  left: 5%;
  width: 10px;
  height: 35px;
  animation: grassWave 3s ease-in-out infinite;
}

.blade-2 {
  left: 12%;
  width: 9px;
  height: 28px;
  animation: grassWave 3.5s ease-in-out infinite;
  animation-delay: -0.5s;
}

.blade-3 {
  left: 20%;
  width: 10px;
  height: 32px;
  animation: grassWave 2.8s ease-in-out infinite;
  animation-delay: -1s;
}

.blade-4 {
  right: 18%;
  width: 9px;
  height: 25px;
  animation: grassWave 3.2s ease-in-out infinite;
  animation-delay: -1.5s;
}

.blade-5 {
  right: 10%;
  width: 10px;
  height: 30px;
  animation: grassWave 3s ease-in-out infinite;
  animation-delay: -2s;
}

.blade-6 {
  right: 3%;
  width: 9px;
  height: 27px;
  animation: grassWave 3.4s ease-in-out infinite;
  animation-delay: -0.8s;
}

.blade-7 {
  left: 30%;
  width: 8px;
  height: 23px;
  animation: grassWave 2.9s ease-in-out infinite;
  animation-delay: -0.3s;
}

.blade-8 {
  left: 42%;
  width: 9px;
  height: 28px;
  animation: grassWave 3.1s ease-in-out infinite;
  animation-delay: -1.2s;
}

.blade-9 {
  right: 28%;
  width: 8px;
  height: 25px;
  animation: grassWave 3.3s ease-in-out infinite;
  animation-delay: -0.6s;
}

.blade-10 {
  right: 38%;
  width: 9px;
  height: 29px;
  animation: grassWave 2.7s ease-in-out infinite;
  animation-delay: -1.8s;
}

/* ============================================
   Ground Flowers - Tiny sprouting flowers
   ============================================ */
.ground-flowers {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  pointer-events: none;
}

.ground-flower {
  position: absolute;
  bottom: 8px;
  animation: flowerSprout 4s ease-in-out infinite;
}

.gf-1 {
  left: 8%;
  width: 14px;
  height: 16px;
  animation-delay: 0s;
}

.gf-2 {
  left: 22%;
  width: 12px;
  height: 14px;
  animation-delay: -1s;
}

.gf-3 {
  right: 25%;
  width: 12px;
  height: 14px;
  animation-delay: -2s;
}

.gf-4 {
  right: 12%;
  width: 14px;
  height: 16px;
  animation-delay: -0.5s;
}

.gf-5 {
  left: 48%;
  width: 12px;
  height: 14px;
  animation-delay: -1.5s;
}

@keyframes flowerSprout {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-2px) rotate(3deg);
  }
  75% {
    transform: translateY(-1px) rotate(-2deg);
  }
}

@keyframes grassWave {
  0%, 100% {
    transform: rotate(0deg) skewX(0deg);
  }
  25% {
    transform: rotate(8deg) skewX(3deg);
  }
  50% {
    transform: rotate(-3deg) skewX(-1deg);
  }
  75% {
    transform: rotate(5deg) skewX(2deg);
  }
}

/* ============================================
   Particle System - Leaves & Dandelion Seeds
   ============================================ */
.particle-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.particle {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
}

/* Floating Leaf - larger and more visible */
.particle-leaf {
  width: 24px;
  height: 24px;
  opacity: 0.85;
  filter: drop-shadow(0 2px 3px rgba(76, 175, 80, 0.3));
}

.particle-leaf svg {
  width: 100%;
  height: 100%;
}

/* Dandelion Seed - larger and more visible */
.particle-dandelion {
  width: 28px;
  height: 28px;
  opacity: 0.75;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.particle-dandelion svg {
  width: 100%;
  height: 100%;
}

/* Sparkle burst on correct answer */
.particle-sparkle {
  width: 14px;
  height: 14px;
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(255, 213, 79, 0.6));
}

@keyframes leafFloat {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0;
  }
  8% { opacity: 0.85; }
  92% { opacity: 0.85; }
  100% {
    transform: translate(var(--drift-x, 100px), var(--drift-y, 300px)) rotate(var(--rotation, 360deg));
    opacity: 0;
  }
}

@keyframes dandelionFloat {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0;
  }
  8% { opacity: 0.75; }
  50% { transform: translate(var(--mid-x, 50px), var(--mid-y, -100px)) scale(1.15); }
  92% { opacity: 0.75; }
  100% {
    transform: translate(var(--drift-x, 150px), var(--drift-y, -250px)) scale(0.85);
    opacity: 0;
  }
}

@keyframes sparkleExplode {
  0% {
    transform: translate(0, 0) scale(0) rotate(0deg);
    opacity: 1;
  }
  50% {
    opacity: 1;
    transform: translate(var(--dx), var(--dy)) scale(1.2) rotate(180deg);
  }
  100% {
    transform: translate(calc(var(--dx) * 1.5), calc(var(--dy) * 1.5)) scale(0) rotate(360deg);
    opacity: 0;
  }
}

/* ============================================
   Mascot Idle & Reaction Animations
   ============================================ */
.logo-icon {
  animation: mascotIdle 4s ease-in-out infinite;
}

.logo-icon.mascot-happy {
  animation: mascotHappy 0.6s ease;
}

.logo-icon.mascot-excited {
  animation: mascotExcited 0.8s ease;
}

.logo-icon.mascot-thinking {
  animation: mascotThinking 1.5s ease-in-out infinite;
}

.logo-icon.mascot-sad {
  animation: mascotSad 0.5s ease;
}

.logo-icon.mascot-celebrate {
  animation: mascotCelebrate 1s ease;
}

@keyframes mascotIdle {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  20% {
    transform: translateY(-4px) rotate(-2deg) scale(1.02);
  }
  40% {
    transform: translateY(-2px) rotate(1deg) scale(1.01);
  }
  60% {
    transform: translateY(-5px) rotate(-1deg) scale(1.02);
  }
  80% {
    transform: translateY(-2px) rotate(2deg) scale(1.01);
  }
}

@keyframes mascotHappy {
  0% { transform: translateY(0) scale(1); }
  25% { transform: translateY(-8px) scale(1.1) rotate(-5deg); }
  50% { transform: translateY(-4px) scale(1.05) rotate(3deg); }
  75% { transform: translateY(-6px) scale(1.08) rotate(-2deg); }
  100% { transform: translateY(0) scale(1) rotate(0deg); }
}

@keyframes mascotExcited {
  0% { transform: translateY(0) scale(1) rotate(0deg); }
  15% { transform: translateY(-12px) scale(1.15) rotate(-8deg); }
  30% { transform: translateY(-6px) scale(1.1) rotate(6deg); }
  45% { transform: translateY(-10px) scale(1.12) rotate(-5deg); }
  60% { transform: translateY(-4px) scale(1.08) rotate(4deg); }
  75% { transform: translateY(-7px) scale(1.1) rotate(-3deg); }
  100% { transform: translateY(0) scale(1) rotate(0deg); }
}

@keyframes mascotThinking {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-2px) rotate(5deg); }
  75% { transform: translateY(-2px) rotate(-5deg); }
}

@keyframes mascotSad {
  0% { transform: translateY(0); }
  25% { transform: translateY(3px) rotate(-3deg); }
  50% { transform: translateY(2px); }
  100% { transform: translateY(0); }
}

@keyframes mascotCelebrate {
  0% { transform: scale(1) rotate(0deg); }
  10% { transform: scale(1.2) rotate(-10deg); }
  20% { transform: scale(1.15) rotate(10deg); }
  30% { transform: scale(1.2) rotate(-8deg); }
  40% { transform: scale(1.18) rotate(8deg); }
  50% { transform: scale(1.15) rotate(-5deg); }
  60% { transform: scale(1.1) rotate(5deg); }
  70% { transform: scale(1.08) rotate(-3deg); }
  80% { transform: scale(1.05) rotate(3deg); }
  90% { transform: scale(1.02) rotate(-1deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* Mascot eye blink (controlled via JS) */
.mascot-eyes-closed .mascot-eye {
  transform: scaleY(0.1);
}

/* === Responsive: Hide ambient on mobile === */
@media (max-width: 767px) {
  .flying-bird,
  .grass-blades,
  .ground-flowers {
    display: none;
  }

  .logo-icon {
    animation: mascotIdleMobile 5s ease-in-out infinite;
  }

  @keyframes mascotIdleMobile {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
  }
}

@media (max-width: 480px) {
  .particle-container {
    display: none;
  }
}

/* ============================================
   App Container
   ============================================ */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-md);
  position: relative;
  z-index: var(--z-content);
}

/* ============================================
   Header Styles
   ============================================ */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-card);
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
  gap: var(--spacing-md);
  border: 2px solid rgba(255, 139, 106, 0.1);
}

.header-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.header-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.logo-icon {
  width: 52px;
  height: 52px;
  filter: drop-shadow(0 2px 4px rgba(139, 90, 70, 0.15));
  transition: transform var(--transition-bounce);
}

.logo-icon:hover {
  transform: scale(1.05) rotate(-3deg);
}

.logo-text {
  font-size: 1.75rem;
  font-weight: var(--font-weight-extra-bold);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
}

/* Icon Buttons */
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: linear-gradient(180deg, #FFF 0%, #FFF5F0 100%);
  border: 2px solid var(--color-key-border);
  border-radius: var(--border-radius-round);
  cursor: pointer;
  transition: all var(--transition-fast);
  color: var(--color-primary);
  position: relative;
  box-shadow: var(--shadow-sm);
}

.icon-btn:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.icon-btn:active {
  transform: translateY(0) scale(0.95);
  box-shadow: var(--shadow-xs);
}

/* Back Button */
.back-btn {
  color: var(--color-primary);
}

/* Profile Indicator */
.profile-indicator {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-md) var(--spacing-xs) var(--spacing-xs);
  background: linear-gradient(180deg, #FFF 0%, #FFF5F0 100%);
  border: 2px solid var(--color-key-border);
  border-radius: 28px;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.profile-indicator:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  transform: translateY(-1px);
}

.profile-avatar {
  width: 38px;
  height: 38px;
  border-radius: var(--border-radius-round);
  background: var(--avatar-coral);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: var(--font-weight-bold);
  font-size: 1rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.profile-name {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

/* Sound Toggle */
.sound-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: linear-gradient(180deg, #FFF 0%, #FFF5F0 100%);
  border: 2px solid var(--color-key-border);
  border-radius: var(--border-radius-round);
  cursor: pointer;
  transition: all var(--transition-fast);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.sound-toggle:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.sound-toggle:active {
  transform: scale(0.95);
}

.sound-icon {
  width: 24px;
  height: 24px;
}

.sound-toggle.muted { opacity: 0.6; }
.sound-toggle.muted .sound-on { display: none; }
.sound-toggle.muted .sound-off { display: block; }
.sound-toggle:not(.muted) .sound-off { display: none; }

/* ============================================
   Start Screen Styles
   ============================================ */
.start-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
}

.start-content {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xl);
}

/* Stats Row */
.stats-row {
  display: flex;
  gap: var(--spacing-md);
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-card);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  min-width: 100px;
  border: 2px solid transparent;
  transition: all var(--transition-fast);
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-light);
}

.stat-card .stat-icon {
  font-size: 1.75rem;
  margin-bottom: var(--spacing-xs);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.1));
}

.stat-card .stat-value {
  font-size: 1.75rem;
  font-weight: var(--font-weight-extra-bold);
  color: var(--color-primary);
  line-height: 1;
}

.stat-card .stat-label {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  margin-top: var(--spacing-xs);
}

/* Streak Display */
.streak-display .streak-flame {
  transition: transform var(--transition-normal);
  display: inline-block;
}

.streak-display.has-streak .streak-flame {
  animation: flamePulse 1s ease-in-out infinite;
}

.streak-display.has-streak .stat-value {
  color: var(--color-streak);
}

@keyframes flamePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15) rotate(5deg); }
}

/* Daily Goal */
.daily-goal {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
}

.daily-goal-bar {
  width: 100%;
  height: 14px;
  background: var(--color-card);
  border-radius: 7px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
  border: 2px solid var(--color-key-border);
}

.daily-goal-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-success) 0%, var(--color-success-light) 100%);
  border-radius: 7px;
  transition: width var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.daily-goal-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 100%);
}

.daily-goal-text {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

/* Type Toggle (ABC/123) */
.type-toggle {
  display: flex;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs);
  background: var(--color-card);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  border: 2px solid var(--color-key-border);
}

.type-btn {
  padding: var(--spacing-sm) var(--spacing-xl);
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--font-family);
  font-size: var(--font-size-ui);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-light);
  background: transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  min-height: 48px;
}

.type-btn:hover {
  background: var(--color-background);
  color: var(--color-text);
}

.type-btn.active {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: white;
  box-shadow: var(--shadow-sm);
}

/* Mode Buttons */
.mode-buttons {
  display: flex;
  gap: var(--spacing-lg);
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}

.mode-btn-large {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xl) var(--spacing-lg);
  background: var(--color-card);
  border: 3px solid transparent;
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: all var(--transition-bounce);
  min-width: 155px;
  min-height: 130px;
  position: relative;
  overflow: hidden;
}

.mode-btn-large::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.mode-btn-large:hover {
  border-color: var(--color-primary-light);
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--shadow-lg);
}

.mode-btn-large:hover::before {
  opacity: 1;
}

.mode-btn-large:active {
  transform: translateY(-2px) scale(1);
}

.mode-btn-icon {
  font-size: 2.75rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
  transition: transform var(--transition-bounce);
}

.mode-btn-large:hover .mode-btn-icon {
  transform: scale(1.1);
}

.mode-btn-text {
  font-size: var(--font-size-ui);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.mode-btn-desc {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

/* Tricky Letters Button */
.tricky-letters-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-xl);
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
  border: none;
  border-radius: var(--border-radius-lg);
  color: white;
  font-family: var(--font-family);
  font-size: var(--font-size-ui);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: all var(--transition-bounce);
  box-shadow: var(--shadow-md);
  min-height: 52px;
}

.tricky-letters-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--shadow-lg);
}

.tricky-letters-btn:active {
  transform: translateY(0);
}

.tricky-icon {
  font-size: 1.5rem;
}

.tricky-count {
  background: rgba(255, 255, 255, 0.25);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: 12px;
  font-size: var(--font-size-small);
}

/* Action Row */
.action-row {
  display: flex;
  gap: var(--spacing-md);
}

/* Badge Button */
.badge-btn {
  position: relative;
}

.badge-icon-emoji {
  font-size: 1.5rem;
}

.badge-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: white;
  font-size: 0.7rem;
  font-weight: var(--font-weight-bold);
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-card);
}

/* ============================================
   Game Area Styles
   ============================================ */
.game-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  padding: var(--spacing-md);
}

.game-header {
  width: 100%;
  display: flex;
  justify-content: center;
}

.stats {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
  flex-wrap: wrap;
  justify-content: center;
}

.stat {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-card);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
}

.stat-stars .stat-icon {
  filter: drop-shadow(var(--shadow-glow-star));
}

.stat-icon {
  width: 28px;
  height: 28px;
}

.stat-value {
  font-size: 1.25rem;
  font-weight: var(--font-weight-extra-bold);
  color: var(--color-text);
  min-width: 2ch;
}

.progress-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.progress-bar {
  width: 160px;
  height: 14px;
  background: var(--color-card);
  border-radius: 7px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
  border: 2px solid var(--color-key-border);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  border-radius: 7px;
  transition: width var(--transition-normal);
  position: relative;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, transparent 100%);
}

.progress-label {
  font-size: var(--font-size-small);
  color: var(--color-text-light);
  text-align: center;
  font-weight: var(--font-weight-medium);
}

/* ============================================
   Letter Display - The Star of the Show
   ============================================ */
.letter-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
}

.letter-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(180deg, #FFFFFF 0%, #FFF8F5 100%);
  border-radius: var(--border-radius-xl);
  box-shadow:
    var(--shadow-lg),
    0 0 0 4px var(--color-card),
    0 0 0 6px var(--color-primary-light),
    inset 0 2px 4px rgba(255, 255, 255, 0.8),
    inset 0 -2px 6px rgba(139, 90, 70, 0.04);
  padding: var(--spacing-xl) calc(var(--spacing-xl) * 2.5);
  min-width: 220px;
  min-height: 220px;
  transition: all var(--transition-bounce);
  overflow: hidden;
}

/* Subtle paper texture overlay */
.letter-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--border-radius-xl);
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.6) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(255, 245, 240, 0.4) 0%, transparent 40%);
  pointer-events: none;
  z-index: 1;
}

.letter-card::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: calc(var(--border-radius-xl) + 3px);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 50%, var(--color-primary-light) 100%);
  z-index: -1;
  opacity: 0.5;
}

.letter {
  font-size: var(--font-size-letter);
  font-weight: var(--font-weight-extra-bold);
  color: var(--color-primary);
  line-height: 1;
  user-select: none;
  text-shadow:
    0 4px 8px rgba(255, 139, 106, 0.2),
    0 2px 0 rgba(255, 139, 106, 0.1);
  transition: all var(--transition-fast);
}

.letter-underline {
  width: 75%;
  height: 8px;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 50%, var(--color-primary-light) 100%);
  border-radius: 4px;
  margin-top: var(--spacing-md);
  box-shadow: 0 2px 4px rgba(155, 140, 217, 0.2);
}

/* Word Hint */
.word-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-xl);
  background: var(--color-card);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateY(10px);
  transition: all var(--transition-normal);
}

.word-hint.visible {
  opacity: 1;
  transform: translateY(0);
}

.word-emoji {
  font-size: 3rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.word-text {
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.instruction {
  font-size: clamp(1.25rem, 4vw, 1.75rem);
  font-weight: 700;
  color: var(--color-primary-dark);
  text-align: center;
  /* Visual pill background for emphasis */
  padding: 0.75rem 1.5rem;
  background: var(--color-card);
  border-radius: 2rem;
  box-shadow: var(--shadow-xs);
  /* Gentle attention animation */
  animation: subtlePulse 2s ease-in-out infinite;
  margin-top: var(--spacing-md);
}

.instruction strong {
  color: var(--color-primary);
  font-weight: var(--font-weight-extra-bold);
  font-size: 1.1em;
}

@keyframes subtlePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.02); opacity: 0.95; }
}

/* Animated pointing arrow */
.instruction-arrow {
  display: inline-block;
  animation: bounceArrow 1s ease-in-out infinite;
  font-size: 1.2em;
}

@keyframes bounceArrow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .instruction {
    animation: none;
  }
  .instruction-arrow {
    animation: none;
  }
}

/* ============================================
   Keyboard Styles
   ============================================ */
.keyboard {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  background: linear-gradient(180deg, var(--color-keyboard-bg) 0%, #FFF0E8 100%);
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-lg);
  max-width: 100%;
  overflow-x: auto;
  border: 2px solid rgba(255, 139, 106, 0.15);
}

.keyboard-row {
  display: flex;
  justify-content: center;
  gap: var(--spacing-xs);
}

.keyboard-row-top {
  display: none;
}

.keyboard-row-numbers {
  justify-content: center;
  gap: 8px; /* Minimum 8px gap to prevent mis-taps */
  margin-bottom: var(--spacing-sm);
}

.keyboard-row-numbers .key-number {
  min-width: 44px; /* WCAG 2.5.5 minimum touch target */
  min-height: 44px; /* WCAG 2.5.5 minimum touch target */
  font-size: calc(var(--font-size-key) * 1.6);
  background: linear-gradient(180deg, var(--color-warning-light) 0%, var(--color-warning) 100%);
  border-color: var(--color-warning-dark);
  color: var(--color-text);
}

@media (min-width: 768px) {
  .keyboard-row-top {
    display: flex;
  }
}

/* Individual Keys */
.key {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--key-size);
  height: var(--key-size);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: linear-gradient(180deg, #FFFFFF 0%, #F8F4F2 100%);
  border: 2px solid var(--color-key-border);
  border-radius: var(--border-radius-key);
  font-family: var(--font-family);
  font-size: var(--font-size-key);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  text-transform: uppercase;
  cursor: default;
  user-select: none;
  box-shadow: var(--shadow-key);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast);
  position: relative;
}

/* Key Sizes */
.key-small {
  min-width: calc(var(--key-size) * 0.8);
  font-size: calc(var(--font-size-key) * 0.8);
}
.key-letter { min-width: var(--key-size); }
.key-number { min-width: var(--key-size); }
.key-tab, .key-backslash { min-width: calc(var(--key-size) * 1.5); }
.key-caps, .key-enter { min-width: calc(var(--key-size) * 1.75); }
.key-backspace { min-width: calc(var(--key-size) * 2); }
.key-shift-left, .key-shift-right { min-width: calc(var(--key-size) * 2.25); }
.key-ctrl, .key-alt, .key-fn {
  min-width: calc(var(--key-size) * 1.25);
  font-size: calc(var(--font-size-key) * 0.75);
}
.key-space { min-width: calc(var(--key-size) * 6); }

/* Finger Color Coding - Soft Pastels */
.finger-pinky-left {
  background: linear-gradient(180deg, #FFF 0%, var(--finger-pinky-left) 100%);
  border-color: #F0B8B0;
}
.finger-ring-left {
  background: linear-gradient(180deg, #FFF 0%, var(--finger-ring-left) 100%);
  border-color: #E8CCA8;
}
.finger-middle-left {
  background: linear-gradient(180deg, #FFF 0%, var(--finger-middle-left) 100%);
  border-color: #E8DCA8;
}
.finger-index-left {
  background: linear-gradient(180deg, #FFF 0%, var(--finger-index-left) 100%);
  border-color: #A8D8B8;
}
.finger-index-right {
  background: linear-gradient(180deg, #FFF 0%, var(--finger-index-right) 100%);
  border-color: #A8C8E0;
}
.finger-middle-right {
  background: linear-gradient(180deg, #FFF 0%, var(--finger-middle-right) 100%);
  border-color: #C8A8E0;
}
.finger-ring-right {
  background: linear-gradient(180deg, #FFF 0%, var(--finger-ring-right) 100%);
  border-color: #E8CCA8;
}
.finger-pinky-right {
  background: linear-gradient(180deg, #FFF 0%, var(--finger-pinky-right) 100%);
  border-color: #F0B8B0;
}
.finger-thumb {
  background: linear-gradient(180deg, #FFF 0%, var(--finger-thumb) 100%);
  border-color: #D0C8C0;
}

/* Home Row Indicators */
.home-key::after {
  content: '';
  position: absolute;
  bottom: 5px;
  width: 10px;
  height: 3px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 2px;
}

.key-letter {
  position: relative;
}

/* Key States */
.key.pressed {
  transform: translateY(3px);
  box-shadow: var(--shadow-key-pressed);
}

.key.target {
  animation: keyPulse 1.2s ease-in-out infinite;
  border-color: var(--color-primary);
  box-shadow:
    0 0 0 3px var(--color-primary-glow),
    var(--shadow-key);
  z-index: 1;
}

.key.correct {
  background: linear-gradient(180deg, var(--color-success-light) 0%, var(--color-success) 100%) !important;
  border-color: var(--color-success-dark) !important;
  color: white;
  box-shadow: var(--shadow-glow-success);
  transform: scale(1.05);
}

.key.wrong {
  background: linear-gradient(180deg, var(--color-error-light) 0%, var(--color-error) 100%) !important;
  border-color: var(--color-error-dark) !important;
  color: white;
  animation: keyShake 0.4s ease;
}

/* ============================================
   Simplified Keyboard (Learn Mode)
   ============================================ */
.keyboard-simple {
  background: var(--color-keyboard-bg);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-md);
  max-width: 320px;
  margin: 0 auto;
}

.simple-key-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
  max-width: 280px;
  margin: 0 auto;
}

.simple-key {
  aspect-ratio: 1;
  min-height: 70px;
  min-width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-key-bg);
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--font-family);
  font-size: 2rem;
  font-weight: var(--font-weight-extra-bold);
  color: var(--color-text);
  cursor: pointer;
  box-shadow: var(--shadow-key);
  transition: all var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.simple-key:hover {
  background: var(--color-primary-light);
}

.simple-key:active,
.simple-key.pressed {
  transform: translateY(3px);
  box-shadow: var(--shadow-key-pressed);
}

.simple-key.target {
  animation: pulse-target 1s ease-in-out infinite;
  box-shadow: 0 0 0 4px var(--color-primary), var(--shadow-key);
  background: var(--color-primary-light);
}

.simple-key.correct {
  background: var(--color-success) !important;
  color: white;
  animation: none;
  box-shadow: var(--shadow-key);
}

.simple-key.wrong {
  background: var(--color-error) !important;
  color: white;
  animation: shake 0.4s ease;
}

/* Hide full keyboard when in simple mode */
.keyboard-mode-simple .keyboard-qwerty,
.keyboard-mode-simple .keyboard-qwertz {
  display: none !important;
}

.keyboard-mode-simple .keyboard-simple {
  display: block !important;
}

/* Responsive adjustments for simplified keyboard */
@media (max-width: 480px) {
  .simple-key {
    min-height: 60px;
    min-width: 60px;
    font-size: 1.75rem;
  }

  .simple-key-grid {
    gap: var(--spacing-sm);
  }

  .keyboard-simple {
    padding: var(--spacing-md);
  }
}

@keyframes keyPulse {
  0%, 100% {
    box-shadow: 0 0 0 3px var(--color-primary-glow), var(--shadow-key);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 6px var(--color-primary-glow), var(--shadow-key);
    transform: scale(1.03);
  }
}

@keyframes keyShake {
  0%, 100% { transform: translateX(0) translateY(3px); }
  20% { transform: translateX(-3px) translateY(3px); }
  40% { transform: translateX(3px) translateY(3px); }
  60% { transform: translateX(-3px) translateY(3px); }
  80% { transform: translateX(3px) translateY(3px); }
}

/* Hungarian QWERTZ Keyboard */
.keyboard-qwertz {
  --key-size: clamp(1.75rem, 5vw, 2.5rem);
}

.keyboard-qwertz .keyboard-row:nth-child(2) {
  padding-left: calc(var(--key-size) * 0.2);
}

.keyboard-qwertz .keyboard-row:nth-child(3) {
  padding-left: calc(var(--key-size) * 0.4);
}

.keyboard-row-extra {
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 2px dashed rgba(155, 140, 217, 0.3);
  padding-left: 0 !important;
}

/* Accented Keys */
.key.key-accented {
  background: linear-gradient(180deg, #FFF8F0 0%, #FFE8D8 100%);
  border-color: var(--color-warning-dark);
}

.key.key-accented.target {
  background: linear-gradient(180deg, #FFF0E0 0%, #FFD8C0 100%);
  box-shadow: 0 0 0 3px rgba(255, 207, 77, 0.4), var(--shadow-key);
}

/* Digraph Keys (CS, GY, NY, SZ, TY, ZS, DZ, DZS) */
.key.key-digraph {
  min-width: 48px;
  padding: 0 8px;
  background: linear-gradient(180deg, #E8F4FD 0%, #D1E8FA 100%);
  border-color: rgba(74, 144, 217, 0.3);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
}

.key.key-digraph.target {
  background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
  color: white;
  box-shadow: 0 0 0 4px var(--color-primary), var(--shadow-key);
}

.key.key-digraph-rare {
  background: linear-gradient(180deg, #F5E6F5 0%, #E8D6E8 100%);
  border-color: rgba(186, 104, 200, 0.3);
}

.key.key-digraph-rare.target {
  background: linear-gradient(180deg, #E8D6E8 0%, #BA68C8 100%);
  color: white;
  box-shadow: 0 0 0 4px #BA68C8, var(--shadow-key);
}

/* Digraph keyboard rows */
.keyboard-row-digraphs {
  gap: var(--spacing-xs);
  justify-content: center;
  margin-top: var(--spacing-xs);
}

/* ============================================
   Modal Styles
   ============================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(74, 63, 58, 0.5);
  backdrop-filter: blur(4px);
  z-index: var(--z-modal);
  animation: fadeIn var(--transition-normal);
  padding: var(--spacing-md);
}

.modal-overlay.hidden {
  display: none;
}

.modal {
  background: var(--color-card);
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-xl);
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalBounceIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 2px solid rgba(255, 139, 106, 0.1);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg);
  border-bottom: 2px solid var(--color-background);
}

.modal-title {
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-extra-bold);
  color: var(--color-text);
}

.close-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-background);
  border: 2px solid transparent;
  border-radius: var(--border-radius-round);
  font-size: 1.5rem;
  color: var(--color-text-light);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.close-btn:hover {
  background: var(--color-error-light);
  border-color: var(--color-error);
  color: var(--color-error);
}

/* ============================================
   Celebration Modal
   ============================================ */
.celebration-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-2xl);
  text-align: center;
  background: linear-gradient(180deg, #FFF 0%, #FFF8F5 100%);
}

.celebration-stars {
  display: flex;
  gap: var(--spacing-md);
  font-size: 3.5rem;
}

.celebration-star {
  animation: starBounce 0.6s ease infinite;
  filter: drop-shadow(var(--shadow-glow-star));
}

.celebration-star:nth-child(2) { animation-delay: 0.15s; }
.celebration-star:nth-child(3) { animation-delay: 0.3s; }

.celebration-title {
  font-size: 2.75rem;
  font-weight: var(--font-weight-extra-bold);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.celebration-message {
  font-size: 1.25rem;
  color: var(--color-text-light);
}

.celebration-score {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  padding: var(--spacing-md) var(--spacing-xl);
  background: var(--color-background);
  border-radius: var(--border-radius-lg);
}

.celebration-star-icon {
  width: 36px;
  height: 36px;
  filter: drop-shadow(var(--shadow-glow-star));
}

.weak-letters-hint {
  font-size: var(--font-size-small);
  color: var(--color-secondary-dark);
  background: var(--color-secondary-light);
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--border-radius);
}

.celebration-btn {
  margin-top: var(--spacing-md);
}

/* ============================================
   Settings Modal
   ============================================ */
.settings-modal {
  width: 100%;
  max-width: 420px;
}

.settings-content {
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.settings-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.settings-label {
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.settings-toggle {
  padding: var(--spacing-sm) var(--spacing-lg);
  background: var(--color-background);
  border: 2px solid var(--color-key-border);
  border-radius: var(--border-radius);
  font-family: var(--font-family);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
  min-height: 44px;
  min-width: 70px;
}

.settings-toggle.active {
  background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
  border-color: var(--color-success-dark);
  color: white;
}

.settings-options {
  display: flex;
  gap: var(--spacing-xs);
}

.settings-option {
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-background);
  border: 2px solid var(--color-key-border);
  border-radius: var(--border-radius-sm);
  font-family: var(--font-family);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-light);
  cursor: pointer;
  transition: all var(--transition-fast);
  min-height: 44px;
}

.settings-option:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.settings-option.active {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-color: var(--color-primary-dark);
  color: white;
}

.settings-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--color-background) 50%, transparent 100%);
  margin: var(--spacing-sm) 0;
}

.parent-area-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  width: 100%;
  padding: var(--spacing-md);
  background: var(--color-background);
  border: 2px dashed var(--color-key-border);
  border-radius: var(--border-radius-lg);
  font-family: var(--font-family);
  font-size: var(--font-size-ui);
  color: var(--color-text-light);
  cursor: pointer;
  transition: all var(--transition-normal);
  min-height: 52px;
}

.parent-area-btn:hover {
  border-color: var(--color-secondary);
  background: var(--color-secondary-light);
}

.parent-area-btn:active {
  background: var(--color-secondary);
  border-style: solid;
  color: white;
}

.parent-icon { font-size: 1.25rem; }

.parent-hint {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

/* Settings Footer - Privacy Link */
.settings-footer {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-border);
  text-align: center;
}

.privacy-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--font-size-small);
  border-radius: var(--border-radius-md);
  transition: all var(--transition-fast);
}

.privacy-link:hover {
  color: var(--color-primary);
  background: var(--color-primary-light);
}

.privacy-icon {
  font-size: 1rem;
}

/* ============================================
   Badge Modal
   ============================================ */
.badge-modal {
  width: 100%;
  max-width: 500px;
}

.badge-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
}

.badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-md);
  border-radius: var(--border-radius-lg);
  background: var(--color-background);
  transition: all var(--transition-bounce);
  position: relative;
  border: 2px solid transparent;
}

.badge-item:hover {
  transform: scale(1.08);
  border-color: var(--color-primary-light);
}

.badge-item.locked {
  opacity: 0.4;
}

.badge-item.locked .badge-icon {
  filter: saturate(0.2) brightness(0.9);
}

.badge-item.locked::after {
  content: '🔒';
  position: absolute;
  font-size: 0.875rem;
  bottom: 6px;
  right: 6px;
}

.badge-item .badge-icon {
  font-size: 2.5rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.badge-item .badge-name {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  text-align: center;
  margin-top: var(--spacing-sm);
  color: var(--color-text);
}

/* Badge Unlock Celebration */
.badge-unlock-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-2xl);
  text-align: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #FFF 0%, #FFF8F0 100%);
}

.badge-unlock-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, var(--color-warning-light) 0%, transparent 70%);
  animation: glowPulse 1s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.1); }
}

.new-badge-icon {
  font-size: 5.5rem;
  position: relative;
  z-index: 1;
  animation: badgePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}

@keyframes badgePop {
  0% { transform: scale(0) rotate(-20deg); }
  50% { transform: scale(1.3) rotate(10deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.new-badge-title {
  font-size: 1.75rem;
  font-weight: var(--font-weight-extra-bold);
  color: var(--color-warning-dark);
  margin-top: var(--spacing-lg);
  position: relative;
  z-index: 1;
}

.new-badge-name {
  font-size: var(--font-size-ui);
  color: var(--color-text);
  position: relative;
  z-index: 1;
  margin-top: var(--spacing-sm);
}

/* ============================================
   Daily Goal Modal
   ============================================ */
.daily-goal-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-2xl);
  text-align: center;
  background: linear-gradient(180deg, #FFF 0%, #F5FFF8 100%);
}

.goal-celebration-emoji {
  font-size: 4.5rem;
  animation: bounce 0.5s ease infinite;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}

.goal-title {
  font-size: 2rem;
  font-weight: var(--font-weight-extra-bold);
  background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-top: var(--spacing-lg);
}

.goal-streak {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-streak);
  margin-top: var(--spacing-md);
}

.streak-flame-large {
  font-size: 2rem;
  animation: flamePulse 1s ease-in-out infinite;
}

.goal-buttons {
  display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
  flex-wrap: wrap;
  justify-content: center;
}

/* ============================================
   Parent Dashboard Modal
   ============================================ */
.parent-modal {
  width: 100%;
  max-width: 520px;
}

.parent-content {
  padding: var(--spacing-lg);
}

.parent-section-title {
  font-size: var(--font-size-ui);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--color-background);
}

.parent-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.parent-stat-item {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-md);
  background: var(--color-background);
  border-radius: var(--border-radius);
  border: 2px solid var(--color-key-border);
}

.parent-stat-label {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.parent-stat-value {
  font-size: 1.5rem;
  font-weight: var(--font-weight-extra-bold);
  color: var(--color-primary);
  margin-top: var(--spacing-xs);
}

.weak-letters-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xl);
}

.weak-letter-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-secondary-light);
  border-radius: var(--border-radius);
  border: 2px solid var(--color-secondary);
}

.weak-letter {
  font-size: 1.25rem;
  font-weight: var(--font-weight-extra-bold);
  color: var(--color-secondary-dark);
}

.weak-count {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.no-weak, .no-activity {
  color: var(--color-text-muted);
  font-style: italic;
  padding: var(--spacing-md);
  text-align: center;
}

.recent-activity {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.activity-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md);
  background: var(--color-background);
  border-radius: var(--border-radius);
  font-size: var(--font-size-small);
  gap: var(--spacing-md);
}

.activity-date {
  color: var(--color-text-muted);
}

.activity-score {
  font-weight: var(--font-weight-bold);
  color: var(--color-success-dark);
}

.activity-mistakes {
  color: var(--color-error);
}

/* ============================================
   Profile Picker Modal
   ============================================ */
.profile-picker-modal {
  width: 100%;
  max-width: 420px;
}

.profile-picker-hint {
  text-align: center;
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  padding: 0 var(--spacing-lg);
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
}

.profile-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xl) var(--spacing-md);
  background: var(--color-background);
  border: 3px solid transparent;
  border-radius: var(--border-radius-xl);
  cursor: pointer;
  transition: all var(--transition-bounce);
  min-height: 150px;
}

.profile-slot:hover {
  border-color: var(--color-primary-light);
  background: white;
  transform: translateY(-2px);
}

.profile-slot.active {
  border-color: var(--color-primary);
  background: white;
  box-shadow: var(--shadow-glow-primary);
}

.profile-avatar-large {
  width: 64px;
  height: 64px;
  border-radius: var(--border-radius-round);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.75rem;
  font-weight: var(--font-weight-bold);
  box-shadow: var(--shadow-md);
}

.add-avatar {
  background: var(--color-text-muted);
  font-size: 2.5rem;
  font-weight: var(--font-weight-normal);
}

.profile-slot-name {
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.profile-active-badge {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  background: var(--color-primary-light);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: 12px;
}

/* ============================================
   Profile Editor Modal
   ============================================ */
.profile-editor-modal {
  width: 100%;
  max-width: 400px;
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.profile-name-display {
  text-align: center;
  padding: var(--spacing-lg);
  background: var(--color-background);
  border-radius: var(--border-radius-lg);
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-key-border);
}

.name-display {
  font-size: 1.75rem;
  font-weight: var(--font-weight-extra-bold);
  color: var(--color-primary);
}

.profile-name-keyboard {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.name-keyboard-row {
  display: flex;
  justify-content: center;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.name-key {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #FFF 0%, #F8F4F2 100%);
  border: 2px solid var(--color-key-border);
  border-radius: var(--border-radius-key);
  font-family: var(--font-family);
  font-size: var(--font-size-key);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  cursor: pointer;
  box-shadow: var(--shadow-key);
  transition: all var(--transition-fast);
}

.name-key:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
}

.name-key:active {
  transform: translateY(2px);
  box-shadow: var(--shadow-key-pressed);
}

.name-key-wide {
  width: 56px;
}

.color-picker-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.color-label {
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  text-align: center;
}

.color-picker {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: center;
  flex-wrap: wrap;
}

.color-option {
  width: 48px;
  height: 48px;
  border-radius: var(--border-radius-round);
  border: 3px solid transparent;
  cursor: pointer;
  transition: all var(--transition-bounce);
  box-shadow: var(--shadow-sm);
}

.color-option:hover {
  transform: scale(1.15);
}

.color-option.active {
  border-color: var(--color-text);
  transform: scale(1.15);
  box-shadow: var(--shadow-md);
}

.profile-editor-buttons {
  display: flex;
  gap: var(--spacing-md);
  justify-content: flex-end;
}

/* ============================================
   Buttons
   ============================================ */
.btn {
  padding: var(--spacing-md) var(--spacing-xl);
  border: none;
  border-radius: var(--border-radius-lg);
  font-family: var(--font-family);
  font-size: var(--font-size-ui);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: all var(--transition-bounce);
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: white;
  box-shadow: var(--shadow-md);
}

.btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--shadow-lg);
}

.btn-primary:active {
  transform: translateY(0) scale(0.98);
}

.btn-secondary {
  background: var(--color-background);
  color: var(--color-text);
  border: 2px solid var(--color-key-border);
}

.btn-secondary:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
}

.btn-danger {
  background: linear-gradient(135deg, var(--color-error) 0%, var(--color-error-dark) 100%);
  color: white;
}

.btn-danger:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ============================================
   Animations
   ============================================ */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalBounceIn {
  0% { opacity: 0; transform: scale(0.8) translateY(20px); }
  50% { transform: scale(1.02) translateY(-5px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes bounce {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.05) translateY(-8px); }
}

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

@keyframes floatUp {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-120px) scale(1.5); }
}

@keyframes mascotBounce {
  0%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-6px) rotate(-3deg); }
  50% { transform: translateY(0) rotate(0); }
  75% { transform: translateY(-4px) rotate(3deg); }
}

@keyframes confettiFall {
  0% { transform: translateY(-10vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0); }
  50% { opacity: 1; transform: scale(1); }
}

/* Letter Card Animations */
.letter-card.bounce {
  animation: letterBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.letter-card.shake {
  animation: letterShake 0.4s ease;
}

@keyframes letterBounce {
  0% { transform: scale(1); }
  30% { transform: scale(1.08); }
  60% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

@keyframes letterShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px) rotate(-2deg); }
  40% { transform: translateX(8px) rotate(2deg); }
  60% { transform: translateX(-6px) rotate(-1deg); }
  80% { transform: translateX(6px) rotate(1deg); }
}

/* Floating Star Effect */
.floating-star {
  position: fixed;
  top: 40%;
  font-size: 3rem;
  pointer-events: none;
  text-shadow: 0 0 20px var(--color-star-glow);
  z-index: var(--z-celebration);
  animation: floatUp 1.2s ease-out forwards;
  filter: drop-shadow(var(--shadow-glow-star));
}

/* Confetti */
.confetti {
  position: fixed;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  pointer-events: none;
  z-index: var(--z-celebration);
  animation: confettiFall 2.5s ease-out forwards;
}

/* Mascot Animations */
.logo-icon {
  transition: transform var(--transition-bounce);
}

/* Sparkle Particles */
.sparkle-particle {
  position: fixed;
  pointer-events: none;
  z-index: var(--z-celebration);
  animation: sparkleFloat 0.8s ease-out forwards;
  text-shadow: 0 0 10px currentColor;
}

@keyframes sparkleFloat {
  0% {
    opacity: 1;
    transform: scale(0) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.2) rotate(180deg);
  }
  100% {
    opacity: 0;
    transform: scale(0.5) rotate(360deg) translateY(-30px);
  }
}

/* Success Glow Effect on Letter Card */
.letter-card.success-glow {
  box-shadow:
    var(--shadow-lg),
    0 0 0 4px var(--color-card),
    0 0 0 8px var(--color-success-light),
    0 0 40px var(--color-success-glow),
    0 0 60px rgba(109, 213, 160, 0.25),
    inset 0 0 20px rgba(109, 213, 160, 0.1);
  transform: scale(1.02);
}

.letter-card.success-glow .letter {
  color: var(--color-success);
  text-shadow:
    0 4px 8px rgba(109, 213, 160, 0.3),
    0 0 20px rgba(109, 213, 160, 0.4);
}

/* ============================================
   Letter Introduction System
   ============================================ */

/* Overlay Container */
.letter-intro-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(232, 244, 253, 0.98);
  z-index: var(--z-overlay);
  overflow: visible;
  padding: var(--spacing-xl) var(--spacing-md);
  padding-top: max(var(--spacing-xl), env(safe-area-inset-top, 24px));
  box-sizing: border-box;
}

/* Mystery Box */
.intro-mystery-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mystery-box-svg {
  width: clamp(150px, 40vw, 200px);
  height: clamp(150px, 40vw, 200px);
  animation: boxBreathe 2s ease-in-out infinite;
  filter: drop-shadow(0 8px 16px rgba(255, 139, 106, 0.3));
}

.mystery-prompt {
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  animation: promptPulse 1.5s ease-in-out infinite;
}

/* Mystery Box Sparkles */
.mystery-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sparkle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--color-warning);
  border-radius: 50%;
  animation: sparkleFloat 2s ease-out forwards;
}

/* Box Lid Animation */
.box-lid {
  transform-origin: center bottom;
  transition: transform 0.3s ease;
}

.box-lid.opening {
  animation: boxLidPop 0.8s ease-out forwards;
}

/* Letter Reveal Container */
.intro-letter-reveal {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.intro-letter-svg {
  width: clamp(120px, 35vw, 180px);
  height: clamp(120px, 35vw, 180px);
  z-index: 2;
}

.intro-letter-svg path {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.intro-letter-svg.drawing path {
  stroke-dasharray: var(--path-length, 300);
  stroke-dashoffset: var(--path-length, 300);
  animation: drawLetter 1s ease-out forwards;
}

.intro-letter-svg.complete path {
  stroke-dashoffset: 0;
  fill: none;
  stroke-width: 10;
  filter: drop-shadow(0 0 8px var(--color-primary));
}

/* Light Rays Effect */
.intro-light-rays {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(200px, 50vw, 300px);
  height: clamp(200px, 50vw, 300px);
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg 30deg,
      rgba(255, 217, 61, 0.2) 30deg 35deg,
      transparent 35deg 60deg,
      rgba(255, 217, 61, 0.2) 60deg 65deg,
      transparent 65deg 90deg,
      rgba(255, 217, 61, 0.2) 90deg 95deg,
      transparent 95deg 120deg,
      rgba(255, 217, 61, 0.2) 120deg 125deg,
      transparent 125deg 150deg,
      rgba(255, 217, 61, 0.2) 150deg 155deg,
      transparent 155deg 180deg,
      rgba(255, 217, 61, 0.2) 180deg 185deg,
      transparent 185deg 210deg,
      rgba(255, 217, 61, 0.2) 210deg 215deg,
      transparent 215deg 240deg,
      rgba(255, 217, 61, 0.2) 240deg 245deg,
      transparent 245deg 270deg,
      rgba(255, 217, 61, 0.2) 270deg 275deg,
      transparent 275deg 300deg,
      rgba(255, 217, 61, 0.2) 300deg 305deg,
      transparent 305deg 330deg,
      rgba(255, 217, 61, 0.2) 330deg 335deg,
      transparent 335deg 360deg
    );
  border-radius: 50%;
  animation: lightRaysPulse 2s ease-in-out infinite;
  z-index: 1;
  opacity: 0;
}

.intro-light-rays.active {
  animation: lightRaysAppear 0.5s ease-out forwards, lightRaysPulse 2s ease-in-out 0.5s infinite;
}

/* Letter Glow Effect */
.intro-letter-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(100px, 30vw, 150px);
  height: clamp(100px, 30vw, 150px);
  background: radial-gradient(circle, rgba(74, 144, 217, 0.4) 0%, transparent 70%);
  border-radius: 50%;
  z-index: 0;
  opacity: 0;
  animation: glowPulse 1.5s ease-in-out infinite;
}

.intro-letter-glow.active {
  opacity: 1;
}

/* Intro Confetti */
.intro-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.intro-confetti-piece {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  animation: introConfettiBurst 1s ease-out forwards;
}

/* Word Hint in Intro */
.intro-word-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  opacity: 0;
  transform: translateY(20px);
}

.intro-word-hint.visible {
  animation: wordHintAppear 0.5s ease-out forwards;
}

.intro-word-emoji {
  font-size: 4rem;
  animation: emojiBounce 0.6s ease-out;
}

.intro-word-text {
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

/* Skip Button */
.intro-skip-btn {
  position: absolute;
  bottom: var(--spacing-lg);
  right: var(--spacing-lg);
  padding: var(--spacing-sm) var(--spacing-md);
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid var(--color-text-muted);
  border-radius: var(--border-radius);
  font-family: var(--font-family);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
  min-height: 44px;
  min-width: 80px;
  z-index: 10;
}

.intro-skip-btn:hover {
  background: var(--color-background);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.intro-skip-btn:active {
  transform: scale(0.95);
}

/* Rising Letter Animation */
.intro-letter-reveal.rising {
  animation: letterRiseFromBox 0.8s ease-out forwards;
}

/* ============================================
   Letter Introduction Keyframes
   ============================================ */

@keyframes boxBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes promptPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.02); }
}

@keyframes boxLidPop {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  30% {
    transform: translateY(-50px) rotate(-15deg);
  }
  60% {
    transform: translateY(-70px) rotate(10deg);
  }
  100% {
    transform: translateY(-90px) rotate(-5deg) scale(0.8);
    opacity: 0;
  }
}

@keyframes letterRiseFromBox {
  0% {
    transform: translateY(60px) scale(0);
    opacity: 0;
  }
  50% {
    transform: translateY(-15px) scale(1.15);
    opacity: 1;
  }
  70% {
    transform: translateY(8px) scale(0.95);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes drawLetter {
  to { stroke-dashoffset: 0; }
}

@keyframes lightRaysAppear {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes lightRaysPulse {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1) rotate(0deg);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1) rotate(15deg);
  }
}

@keyframes sparkleFloat {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-80px) scale(0);
    opacity: 0;
  }
}

@keyframes introConfettiBurst {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--confetti-x, 50px), var(--confetti-y, -100px)) rotate(var(--confetti-rotate, 360deg)) scale(0);
    opacity: 0;
  }
}

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

@keyframes emojiBounce {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

@keyframes introLetterPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* ============================================
   Utility Classes
   ============================================ */
.hidden {
  display: none !important;
}

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

/* ============================================
   Responsive Styles
   ============================================ */
@media (max-width: 767px) {
  :root {
    --key-size: 2.5rem;
    --font-size-key: 0.875rem;
  }

  .header {
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .header-left {
    gap: var(--spacing-sm);
  }

  .logo-text {
    display: none;
  }

  .profile-name {
    display: none;
  }

  .progress-bar {
    width: 100px;
  }

  .key-tab,
  .key-caps,
  .key-backslash,
  .key-enter,
  .key-backspace,
  .key-ctrl,
  .key-alt,
  .key-fn {
    display: none;
  }

  .key-shift-left,
  .key-shift-right {
    min-width: calc(var(--key-size) * 1.5);
  }

  .key-space {
    min-width: calc(var(--key-size) * 4);
  }

  .keyboard {
    padding: var(--spacing-md);
  }

  .stats-row {
    gap: var(--spacing-sm);
  }

  .stat-card {
    min-width: 90px;
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .stat-card .stat-value {
    font-size: 1.5rem;
  }

  .mode-btn-large {
    min-width: 140px;
    padding: var(--spacing-lg);
  }

  .badge-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .profile-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
  }

  .profile-slot {
    padding: var(--spacing-lg) var(--spacing-md);
    min-height: 130px;
  }
}

@media (max-width: 480px) {
  :root {
    --key-size: 2.75rem;
    --font-size-key: 0.875rem;
  }

  .app {
    padding: var(--spacing-sm);
  }

  /* Ensure number keys remain accessible at small sizes */
  .keyboard-row-numbers .key-number {
    min-width: 48px; /* Slightly larger for small fingers */
    min-height: 48px;
    font-size: 1.25rem;
  }

  .keyboard-row-numbers {
    gap: 6px; /* Tighter but still adequate spacing */
    flex-wrap: wrap; /* Allow wrapping if needed */
  }

  .letter-card {
    min-width: 180px;
    min-height: 180px;
    padding: var(--spacing-lg);
  }

  .letter {
    font-size: clamp(5rem, 15vw, 8rem);
  }

  .instruction {
    font-size: 1rem;
  }

  .mode-btn-large {
    min-width: 120px;
    min-height: 110px;
  }

  .mode-btn-icon {
    font-size: 2.25rem;
  }

  .badge-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
  }

  .badge-item .badge-icon {
    font-size: 2rem;
  }

  .parent-stat-grid {
    grid-template-columns: 1fr;
  }

  .goal-buttons {
    flex-direction: column;
    width: 100%;
  }

  .goal-buttons .btn {
    width: 100%;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  :root {
    --color-text: #000000;
    --color-primary: #CC4400;
    --shadow-key: 0 3px 0 #666666;
  }

  .key {
    border: 2px solid var(--color-text);
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .cloud {
    display: none;
  }
}

/* Print Styles */
@media print {
  .keyboard,
  .modal-overlay,
  .header {
    display: none;
  }
}