html,body,#root{width:100%;height:100%;margin:0;overflow:hidden}body{background:#fff;font-family:Arial,sans-serif}.container{width:100vw;height:100vh;height:100dvh;box-sizing:border-box;padding:8px;text-align:center;display:flex;flex-direction:column;align-items:center;overflow:hidden}h1{margin:0 0 6px;font-size:clamp(18px,3vh,32px);line-height:1.1;flex-shrink:0}.word-card{width:min(90vw,420px);padding:8px 14px;margin:4px 0 10px;border-radius:20px;background:#fef3c7;box-shadow:0 6px 18px #0000001f;cursor:pointer;flex-shrink:0}.word-image{font-size:clamp(38px,7vh,70px);line-height:1}.word-card h2{font-size:clamp(18px,3vh,28px);margin:4px 0 0;color:#92400e;line-height:1.1}.word-card p{font-size:clamp(12px,2vh,16px);margin:4px 0 0;color:#78350f}.alphabet-grid{width:min(96vw,720px);flex:1;display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:1fr;gap:8px;overflow:hidden}.alphabet-btn{min-width:0;min-height:0;font-size:clamp(18px,3vh,32px);font-weight:700;border:none;border-radius:14px;background:#e0f2fe;color:#0369a1;cursor:pointer;transition:all .2s ease}.alphabet-btn:active{transform:scale(.95);background:#bae6fd}.active-letter{background:#2563eb;color:#fff;transform:scale(1.03);box-shadow:0 0 14px #2563eb73}@media (max-width: 600px){.container{padding:6px}h1{font-size:clamp(16px,3vh,24px);margin-bottom:5px}.word-card{width:min(92vw,330px);padding:6px 10px;margin-bottom:8px;border-radius:16px}.word-image{font-size:clamp(34px,6vh,55px)}.word-card h2{font-size:clamp(16px,2.6vh,22px)}.word-card p{font-size:12px}.alphabet-grid{width:100%;grid-template-columns:repeat(5,1fr);gap:6px}.alphabet-btn{font-size:clamp(17px,3vh,24px);border-radius:12px}}@media (max-height: 680px){h1{font-size:16px}.word-card{padding:5px 10px;margin-bottom:6px}.word-image{font-size:34px}.word-card h2{font-size:16px}.word-card p{display:none}.alphabet-grid{gap:5px}.alphabet-btn{font-size:16px;border-radius:10px}}