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:10px;padding:36px 20px 24px;width:min(560px,96vw);min-height:calc(100vh - var(--header-height));margin:auto;text-align:center}.subtitle{font-size:24px;color:#444;line-height:1.65;word-break:keep-all}#count-menu{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;width:100%}#count-menu .count-btn:last-child{grid-column:1/-1}.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}#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}#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:20px;width:min(500px,92vw);padding-bottom:16px}#play-btn{font-size:clamp(16px, 3.5vw, 22px);font-weight:700;padding:10px 30px;border:none;border-radius:50px;background:linear-gradient(135deg,#4fc3f7,#0288d1);color:#fff;cursor:pointer;box-shadow:0 4px 16px rgba(2,136,209,.4);transition:transform .15s;font-family:inherit}#play-btn:hover{transform:scale(1.05)}#play-btn:active{transform:scale(.96)}#syllable-display{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%}.syllable-box{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:clamp(24px, 8vw, 54px);border-radius:14px;border:3px 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.active{border:3px 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 6px 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 4px 12px rgba(0,0,0,.2)}.syllable-box.revealed{border:none;background:#bbb!important;color:#fff;opacity:.75}@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.12)}}.syllable-box.pop{animation:.35s cubic-bezier(.34,1.56,.64,1) pop}#jamo-keyboard{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%}.key{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:clamp(26px, 9vw, 62px);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}#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}