.alphabet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1.5rem;width:100%;padding:1rem}.alphabet-tile{border-radius:var(--radius-lg);aspect-ratio:1;display:flex;justify-content:center;align-items:center;cursor:pointer;box-shadow:var(--shadow-sm);border:4px solid rgba(255,255,255,.4);-webkit-user-select:none;user-select:none}.tile-letter{font-size:4rem;font-weight:700;color:var(--color-white);text-shadow:2px 2px 4px rgba(0,0,0,.2)}@media (max-width: 600px){.alphabet-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:1rem}.tile-letter{font-size:3rem}}.letter-detail-container{width:100%;max-width:800px;background-color:var(--color-white);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:2rem;display:flex;flex-direction:column;align-items:center;border:4px solid var(--tile-blue)}.detail-header{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.back-btn{background-color:var(--color-primary);color:#fff;border:none;width:56px;height:56px;border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer;box-shadow:var(--shadow-sm)}.letter-hero{display:flex;flex-direction:column;align-items:center;margin-bottom:3rem;cursor:pointer;-webkit-user-select:none;user-select:none}.giant-letter{font-size:8rem;font-weight:700;color:var(--color-text);margin-bottom:1rem}.sound-controls{display:flex;gap:1rem}.sound-btn{background-color:var(--tile-blue);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:var(--radius-pill);font-size:1.2rem;font-weight:600;font-family:inherit;display:flex;align-items:center;gap:.5rem;cursor:pointer;box-shadow:var(--shadow-sm)}.phonetic-btn{background-color:var(--tile-green)}.words-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;width:100%}.word-card{background-color:var(--color-bg);border-radius:var(--radius-md);padding:1.5rem;display:flex;flex-direction:column;align-items:center;gap:1rem;cursor:pointer;box-shadow:var(--shadow-sm);border:2px solid var(--color-tertiary);-webkit-user-select:none;user-select:none}.emoji-display{font-size:5rem;filter:drop-shadow(0 4px 6px rgba(0,0,0,.1))}.word-text{font-size:2rem;font-weight:600;color:var(--color-text)}@media (max-width: 600px){.giant-letter{font-size:6rem}.words-grid{grid-template-columns:1fr 1fr;gap:1rem}.emoji-display{font-size:3.5rem}.word-text{font-size:1.5rem}.letter-detail-container{padding:1rem}}:root{--color-bg: #fdf6e3;--color-primary: #ff6b6b;--color-secondary: #4ecdc4;--color-tertiary: #ffe66d;--color-text: #2d3436;--color-white: #ffffff;--tile-red: #ff7675;--tile-blue: #74b9ff;--tile-green: #55efc4;--tile-yellow: #ffeaa7;--tile-purple: #a29bfe;--tile-orange: #fab1a0;--font-main: "Fredoka", cursive, sans-serif;--shadow-sm: 0 4px 6px rgba(0,0,0,.1);--shadow-md: 0 8px 15px rgba(0,0,0,.1);--shadow-active: 0 2px 4px rgba(0,0,0,.1);--radius-lg: 24px;--radius-md: 16px;--radius-pill: 999px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-main);background-color:var(--color-bg);color:var(--color-text);overflow-x:hidden;-webkit-font-smoothing:antialiased}.app-container{min-height:100vh;display:flex;flex-direction:column;padding:2rem;max-width:1200px;margin:0 auto}.app-header{text-align:center;margin-bottom:2rem}.app-header h1{font-size:3rem;color:var(--color-primary);text-shadow:2px 2px 0px var(--color-tertiary);letter-spacing:2px}.app-main{flex-grow:1;display:flex;flex-direction:column;align-items:center}