header{background:var(--site-color-1)}main{width:100%;background:#fffbf0;display:flex;flex-direction:column;min-height:calc(100vh - var(--header-height))}#quiz-section{height:calc(100vh - var(--header-height));width:100%;flex:1;display:flex;flex-direction:column;align-items:center}#intro-screen{display:flex;flex-direction:column;align-items:center;gap:20px;padding:36px 20px 24px;width:min(560px,96vw);margin:auto;text-align:center}.subtitle{font-size:24px;color:#444;line-height:1.65;word-break:keep-all}#saved-notice{display:none;font-size:24px;color:#2e7d32;background:#e8f5e9;border:1px solid #a5d6a7;border-radius:10px;padding:8px 18px}#count-menu{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;width:100%}.count-btn{padding:clamp(14px,3.5vw,22px) 10px;border:none;border-radius:20px;font-size:clamp(16px, 5vw, 26px);font-weight:800;font-family:inherit;background:#2aaa8e;color:#fff;cursor:pointer;box-shadow:0 5px 0 rgba(0,0,0,.22),0 7px 14px rgba(0,0,0,.12);transition:transform .12s,box-shadow .12s,filter .12s;line-height:1.3}.count-btn:hover{filter:brightness(1.07);transform:translateY(-2px);box-shadow:0 7px 0 rgba(0,0,0,.22),0 10px 18px rgba(0,0,0,.15)}.count-btn:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(0,0,0,.22)}#quiz-screen{display:none;flex-direction:column;align-items:center;width:100%;flex:1;min-height:calc(100vh - var(--header-height));padding:20px;background:#fffbf0}#top-bar{display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:6px}#progress{flex:1;font-size:clamp(16px, 4vw, 28px);font-weight:700;color:#333}#restart-btn{background:rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.15);color:#555;font-size:clamp(13px, 3vw, 18px);padding:6px 16px;border-radius:20px;cursor:pointer;font-family:inherit;transition:background .15s}#restart-btn:hover{background:rgba(0,0,0,.1)}#hearts-group{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:8px}#hearts{font-size:clamp(16px, 4vw, 28px);font-weight:700;color:#e74c3c}#zoom-bar{display:flex;gap:8px;margin-bottom:6px}#zoom-in,#zoom-out{width:clamp(28px,5.5vw,38px);height:clamp(28px,5.5vw,38px);font-size:clamp(15px, 3.5vw, 22px);font-weight:700;border:1px solid rgba(0,0,0,.2);border-radius:50%;background:rgba(255,255,255,.85);color:#444;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}#zoom-in:hover,#zoom-out:hover{background:#fff}#hint-btn{background:rgba(255,200,0,.12);border:1px solid rgba(255,200,0,.45);color:#7a5f00;font-size:clamp(13px, 3vw, 18px);padding:5px 8px;border-radius:20px;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:4px;transition:background .15s}#hint-btn:hover{background:rgba(255,200,0,.26)}.hint-icon{font-size:1.15em;line-height:1}#hint-count{display:inline-flex;align-items:center;justify-content:center;width:1.35em;height:1.35em;background:#f1c40f;color:#fff;font-size:clamp(11px, 2.5vw, 15px);font-weight:800;border-radius:50%;line-height:1}.syllable-box.hinted{color:rgba(0,0,0,.35)}.syllable-box.hinted::after{display:none}#zoom-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;transform-origin:top center}#quiz-area{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%;padding-bottom:16px}#syllable-display{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center}.syllable-box{display:flex;align-items:center;justify-content:center;width:220px;height:220px;font-size:114px;border-radius:18px;border:dotted rgba(0,0,0,.2);background:rgba(255,255,255,.7);font-family:SchoolSafetyNotification,sans-serif;font-weight:800;color:#1a1a2e;transition:.18s}.syllable-box.empty::after{content:'···';font-size:.3em;color:rgba(0,0,0,.25)}.syllable-box.active{border:solid #f39c12;background:rgba(255,255,255,.97);animation:1.4s ease-in-out infinite pulse-border}@keyframes pulse-border{0%,100%{box-shadow:0 0 0 0 rgba(243,156,18,.4)}50%{box-shadow:0 0 0 8px rgba(243,156,18,.1)}}.syllable-box.complete{border:none;color:#fff;text-shadow:2px 2px 1px rgba(0,0,0,.3);box-shadow:0 5px 14px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.25)}@keyframes shake{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-7deg)}40%,80%{transform:rotate(7deg)}}.syllable-box.shake{animation:.45s shake;transform-origin:center}@keyframes pop{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}.syllable-box.pop{animation:.35s cubic-bezier(.34,1.56,.64,1) pop}#jamo-keyboard{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.key{display:flex;align-items:center;justify-content:center;width:220px;height:220px;font-size:101px;border-radius:14px;background:rgba(255,255,255,.95);color:#1a1a2e;font-family:SchoolSafetyNotification,sans-serif;font-weight:800;cursor:pointer;box-shadow:0 5px 0 rgba(0,0,0,.25),0 6px 10px rgba(0,0,0,.12);transition:filter .1s;position:relative;top:0;user-select:none}.key:hover:not(.used){filter:brightness(.97)}.key:active:not(.used){top:5px;box-shadow:0 0 0 rgba(0,0,0,.25),0 1px 4px rgba(0,0,0,.12)}.key.used{opacity:.12;cursor:not-allowed;pointer-events:none}@keyframes correct-flash{0%,100%{transform:scale(1)}40%{transform:scale(1.25) translateY(-4px);background:#d5f5e3;color:#27ae60}}.key.correct-flash{animation:.35s forwards correct-flash}@keyframes wrong-flash{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px);background:#fadbd8;color:#e74c3c}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}.key.wrong-flash{animation:.42s wrong-flash}#celebration{display:none;position:fixed;inset:0;align-items:center;justify-content:center;z-index:200;background:#2b2b43}#canvas{position:absolute;inset:0;width:100%;height:100%}#celebration-content{position:relative;z-index:201;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;pointer-events:none}#celebration-emoji{font-size:clamp(160px, 40vw, 240px);animation:.65s cubic-bezier(.175,.885,.32,1.275) forwards celeb-pop;will-change:transform;backface-visibility:hidden}@keyframes celeb-pop{0%{transform:scale(0) rotate(-15deg);opacity:0}60%{transform:scale(1.15) rotate(5deg)}80%{transform:scale(.95) rotate(-2deg)}100%{transform:scale(1) rotate(0);opacity:1}}#celebration-word{font-size:clamp(60px, 10vw, 80px);font-weight:900;color:#fff;text-shadow:0 3px 12px rgba(0,0,0,.4);font-family:SchoolSafetyNotification,sans-serif;animation:.4s .35s both fade-up}@keyframes fade-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}#result-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);align-items:center;justify-content:center;z-index:300;backdrop-filter:blur(3px)}.result-card{background:#fff;border-radius:24px;padding:clamp(24px,5vw,40px) clamp(20px,6vw,52px);text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.25);animation:.3s cubic-bezier(.34,1.56,.64,1) card-pop}@keyframes card-pop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}#result-emoji{font-size:clamp(2rem, 7vw, 3.5rem);margin-bottom:10px}#result-title{font-size:clamp(20px, 5.5vw, 34px);font-weight:800;color:#333;margin-bottom:8px}#result-msg{font-size:clamp(14px, 3.5vw, 22px);color:#666;margin-bottom:28px}.result-btns{display:flex;gap:12px;justify-content:center}.result-btns button{font-size:clamp(14px, 3.5vw, 22px);font-weight:700;padding:12px 26px;border:none;border-radius:50px;cursor:pointer;font-family:inherit;transition:transform .15s}.result-btns button:hover{transform:scale(1.06)}#btn-again{background:linear-gradient(135deg,#e67e22,#e74c3c);color:#fff}#btn-menu{background:#efefef;color:#555}@media (max-width:880px){.syllable-box{width:17vw;height:17vw;font-size:calc(17vw * .52)}.key{width:17vw;height:17vw;font-size:calc(17vw * .46)}#celebration-emoji{font-size:150px}}