@import"https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@400;700&display=swap";@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap";:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--background: #1a1a1a;--card-bg: #2d2d2d;--text: #ffffff;--accent: #b19cd9;--accent-hover: #c4a7e7;--border: #3d3d3d}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;width:100%;overflow:hidden;position:fixed}body{background-color:var(--background);color:var(--text);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:Roboto Flex,sans-serif}#root{height:100%;width:100%;overflow:hidden;display:flex;justify-content:center}.app-container{width:100%;max-width:800px;height:100%;overflow:hidden}.container{width:100%;max-width:500px;margin:0 auto;padding:1rem;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}select{padding:.8rem 1.2rem;font-size:1rem;margin:1rem 0;border-radius:8px;border:1px solid var(--border);background-color:var(--card-bg);color:var(--text);width:80%;max-width:300px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 1rem center;background-size:1em}select:focus{outline:none;border-color:var(--accent)}.game-cards{width:100%;max-width:480px;display:flex;flex-direction:column;gap:1.5rem;margin-top:0rem}.card{background:var(--card-bg);padding:1.5rem;border-radius:12px;cursor:pointer;transition:all .3s ease;border:1px solid var(--border);text-align:center}.card:hover{transform:translateY(-2px);background:var(--accent);border-color:var(--accent)}h1{margin-bottom:2rem;font-size:2rem;color:var(--accent)}h2{margin:0;font-size:1.2rem;color:var(--text)}@media (min-width: 768px){.container{max-width:600px;padding:2rem}.game-cards,select{max-width:400px}}.home-root{width:100%;height:100vh;background:var(--background);color:var(--text);display:flex;flex-direction:column;align-items:center;font-family:Roboto Flex,sans-serif;overflow:hidden}.scrollable-container{width:100%;height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;align-items:center;padding-bottom:2rem}.top-bar{width:100%;max-width:480px;display:flex;justify-content:space-between;align-items:center;padding:2rem 0 1.5rem}.category-section{width:100%;max-width:480px;margin-bottom:1.5rem;margin-top:1rem}.game-cards{width:100%;max-width:480px;display:flex;flex-direction:column;gap:1.5rem}.logo{font-size:2rem;font-weight:700;letter-spacing:1px;position:relative;padding-right:1.9rem;font-family:Roboto Flex,sans-serif}.logo-korean-group{position:static;top:auto;right:auto;transform:none;flex-direction:initial;align-items:initial;gap:initial}.logo-korean{display:inline-block;font-size:.5em;color:#ed9ba8;font-weight:900;margin-left:.4em;position:relative;top:-.2em;transform-origin:bottom left}.logo-korean:nth-child(1){transform:rotate(-5deg)}.logo-korean:nth-child(2){transform:rotate(5deg);margin-left:-.2em}.lang-selector{display:flex;align-items:center;gap:.5rem;font-size:1rem;background:transparent;border-radius:8px;padding:0;cursor:pointer;position:relative}.lang-selector-button{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:8px;transition:background-color .2s ease}.lang-selector-button:hover{background-color:#ffffff1a}.lang-selector span{color:#e0e0e0}.lang-icon{font-size:1rem;opacity:.8}.lang-selector-button:hover .lang-icon{transform:none}.category-title{font-size:1.2rem;font-weight:700;color:#fff;margin-bottom:0;font-family:Roboto Flex,sans-serif}.category-desc{font-size:.95rem;color:#e0e0e0;margin-bottom:1.5rem;font-family:Roboto Flex,sans-serif}.game-card{position:relative;border-radius:18px;min-height:220px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:0 4px 24px #0000001a;padding:0}.vowels-card{background:linear-gradient(135deg,#ff768f,#fea3aa,#f8a293 66%,#ff9572)}.consonants-card{background:linear-gradient(135deg,#a18cd1,#fbc2eb)}.mix-card{background:linear-gradient(135deg,#fbc2eb,#fd868c)}.card-bg-text{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;-webkit-user-select:none;user-select:none;overflow:visible;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(10,1fr);gap:.15rem;padding:.25rem}.bg-char{position:relative;font-size:1.8rem;font-weight:600;color:#fff3;animation:float 15s infinite ease-in-out;display:flex;justify-content:center;align-items:center}@keyframes float{0%{transform:translate(0) rotate(0)}25%{transform:translate(15%,15%) rotate(5deg)}50%{transform:translateY(25%) rotate(0)}75%{transform:translate(-15%,15%) rotate(-5deg)}to{transform:translate(0) rotate(0)}}@keyframes shake{0%{transform:translate(0)}25%{transform:translate(.5px,.5px)}50%{transform:translate(-.5px,-.5px)}75%{transform:translate(.5px,-.5px)}to{transform:translate(-.5px,.5px)}}@keyframes subtle-rotate-shake{0%{transform:rotate(0)}25%{transform:rotate(1.5deg)}50%{transform:rotate(-1.5deg)}75%{transform:rotate(1.5deg)}to{transform:rotate(0)}}.card-symbol{position:absolute;top:1.5rem;left:1.5rem;font-size:3.8rem;font-weight:700;color:#ffffffe6;z-index:2;animation:subtle-rotate-shake 2s ease-in-out infinite alternate}.mix-symbols{display:flex;align-items:center;gap:.2rem}.rotated{display:inline-block;transform:rotate(-18deg)}.progress-circle{position:absolute;top:1.5rem;right:1.5rem;z-index:2;width:50px;height:50px;display:flex;align-items:center;justify-content:center;transition:transform .3s ease}.progress-circle:hover{transform:scale(1.1)}.progress-circle svg{width:50px;height:50px;transition:transform .3s ease}.circle-bg{fill:none;stroke:#ffffff6b;stroke-width:6px;opacity:1}.circle{fill:none;stroke:#fff;stroke-width:6px;stroke-linecap:round;transition:stroke-dasharray .4s;opacity:1}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.68rem;font-weight:700;color:#fff;pointer-events:none;transition:transform .3s ease}.card-bottom{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;min-height:70px;background:var(--card-bg);border-top:1px solid rgba(255,255,255,.1);-webkit-mask-image:linear-gradient(to top,black 60%,transparent 100%);mask-image:linear-gradient(to top,black 60%,transparent 100%)}.card-bottom:before{content:"";position:absolute;top:-20px;left:0;right:0;height:20px;background:linear-gradient(to top,var(--card-bg),rgba(0,0,0,0));pointer-events:none}.card-title{font-size:1.25rem;font-weight:700;color:#fff;margin-bottom:0}.card-text-content{max-width:50%}.card-desc{font-size:.8rem;color:#fff;opacity:.92;font-weight:400}.start-btn{background:#fff;font-weight:700;border:none;border-radius:25px;padding:.7rem 1.8rem;font-size:1.05rem;cursor:pointer;box-shadow:0 2px 8px #00000014;transition:all .3s ease;margin-left:1.2rem;outline:none}.vowels-card .start-btn{color:#ff768f}.consonants-card .start-btn{color:#a18cd1}.mix-card .start-btn{color:#fd868c}.vowels-card .start-btn:hover{background:#fda3a5;color:#fff}.consonants-card .start-btn:hover{background:#b19cd9;color:#fff}.mix-card .start-btn:hover{background:#fbb9dd;color:#fff}.start-btn:focus{outline:none}.vowels-card .card-bottom{background:linear-gradient(135deg,#ff768f,#fea3aa,#f8a293,#ff9572)}.consonants-card .card-bottom{background:linear-gradient(135deg,#a18cd1,#fbc2eb)}.mix-card .card-bottom{background:linear-gradient(135deg,#fbc2eb,#fd868c)}@media (max-width: 600px){.scrollable-container{padding-bottom:1rem}.top-bar{width:100%;max-width:none;margin:0;padding:1.2rem 1.1rem .7rem}.category-section{width:100%;max-width:none;margin:0;padding:.7rem 1.1rem}.category-title,.category-desc{padding:0}.game-cards{width:100%;max-width:none;margin:0;box-sizing:border-box;display:flex;flex-direction:column;gap:1rem;padding-bottom:1rem;padding-left:1.1rem;padding-right:1.1rem}.game-card{width:100%;max-width:none;min-width:0;min-height:220px;height:220px;margin:0;border-radius:14px;padding:0}.card-bg-text{font-size:.95rem;padding:.8rem}.card-bottom{flex-direction:row;align-items:center;justify-content:space-between;padding:1rem 1.3rem;min-height:60px}.card-title{margin-bottom:0}.card-text-content{max-width:50%}.card-desc{font-size:.65rem}.start-btn{padding:.5rem 1.2rem;font-size:.95rem}.card-symbol{left:1.3rem;top:1.3rem}.progress-circle{right:1.3rem;left:auto;top:1.3rem}}@keyframes button-vibrate{0%{transform:scale(1.05) rotate(0)}25%{transform:scale(1.05) rotate(1deg)}50%{transform:scale(1.05) rotate(-1deg)}75%{transform:scale(1.05) rotate(1deg)}to{transform:scale(1.05) rotate(0)}}.start-button{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;padding:.5rem 1rem;border-radius:.5rem;cursor:pointer;font-size:.9rem;font-weight:500;letter-spacing:.5px;text-transform:uppercase;transition:transform .2s ease}.start-button:hover{background:#ffffff26;border-color:#ffffff4d;transform:scale(1.1)}@keyframes button-shake{0%,to{transform:scale(1.1) rotate(0)}25%{transform:scale(1.1) rotate(2deg)}75%{transform:scale(1.1) rotate(-2deg)}}.start-button:hover{animation:button-shake .3s ease-in-out}.bottom-spacer{height:100px;width:100%}@media (max-width: 600px){.bottom-spacer{height:150px}}.footer{width:100%;max-width:480px;text-align:left;padding:1rem 0;color:#fff9;font-size:.9rem;margin-top:1rem;display:flex;justify-content:space-between;align-items:center;position:relative}.footer:before{content:"";position:absolute;top:0;left:0;width:100%;height:1px;background-color:#ffffff1a;transform:translateY(-1rem)}.footer p{margin:0;font-size:.8rem;color:#fff6;font-family:Inter,sans-serif}.github-link{color:#fff9;text-decoration:none;display:flex;align-items:center;gap:.5rem;transition:color .2s ease}.github-link:hover{color:#ffffffe6}.github-link svg{color:currentColor;height:18px;width:18px}@media (max-width: 600px){.footer{font-size:.7rem;padding:.8rem 1.1rem;max-width:none}.footer:before{left:1.1rem;width:calc(100% - 2.2rem)}}