:root { font-family: "Arial", "Malgun Gothic", sans-serif; color: #173b68; background: #46bbed; }
* { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body { margin: 0; min-width: 320px; background: #3eb7ef; }
button { font: inherit; cursor: pointer; }
.app-shell { width: min(100%, 440px); height: 100svh; min-height: 100svh; margin: auto; overflow: hidden; position: relative; background: #5fc7f3 url("assets/kids-meadow-background.png") center / cover fixed; }
.bgm-control { position: absolute; z-index: 60; top: max(15px, env(safe-area-inset-top)); right: 16px; display: grid; justify-items: end; gap: 6px; }
.bgm-toggle { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 3px solid white; border-radius: 50%; background: linear-gradient(#48b9f0, #1762ae); box-shadow: 0 4px 0 #0d4785, 0 6px 12px rgba(18,69,116,.25); color: white; font-size: 1.55rem; font-weight: 900; text-shadow: 0 2px 0 #10487f; }
.bgm-volume { display: flex; align-items: center; gap: 5px; padding: 5px 8px; border: 2px solid white; border-radius: 12px; background: rgba(12,65,120,.86); color: white; font-size: .7rem; font-weight: 900; text-shadow: 0 1px 0 #0d3d73; }
.bgm-volume input { width: 74px; accent-color: #ffcf47; }
.bgm-toggle.is-off { background: linear-gradient(#9baec0, #65778a); color: #eaf3ff; }
.bgm-toggle:active { transform: translateY(3px); box-shadow: 0 1px 0 #0d4785; }
.install-app { padding: 6px 10px; border: 2px solid white; border-radius: 12px; background: linear-gradient(#ffcb5d, #ef7c2f); box-shadow: 0 3px 0 #b84e1d; color: white; font-size: .74rem; font-weight: 900; text-shadow: 0 1px 0 #9e3b13; }
.install-app:active { transform: translateY(2px); box-shadow: 0 1px 0 #b84e1d; }
.nickname-overlay { position: absolute; z-index: 100; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(9,73,114,.48); backdrop-filter: blur(3px); }
.nickname-card { position: relative; width: min(100%, 350px); padding: 32px 24px 21px; border: 5px solid white; border-radius: 30px; background: linear-gradient(180deg, #fefeff, #dff8ff); box-shadow: 0 12px 0 rgba(11,70,125,.48), 0 22px 45px rgba(3,41,77,.35); text-align: center; }
.nickname-star { position: absolute; top: -24px; left: 50%; display: grid; place-items: center; width: 52px; height: 52px; transform: translateX(-50%); border: 3px solid white; border-radius: 50%; background: #ffb43a; box-shadow: 0 4px 0 #d56c22; font-size: 1.45rem; }
.nickname-card h2 { margin: 0; color: #ec2c36; font-size: 1.55rem; font-weight: 900; line-height: 1.15; text-shadow: 0 2px 0 white, 1px 3px 0 #9e2940; }
.nickname-card > p { margin: 10px 0 15px; color: #17649f; font-size: .95rem; font-weight: 800; }
.nickname-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; }
.nickname-card label { display: block; color: #174d80; font-size: .85rem; font-weight: 900; text-align: left; }
.nickname-change-button { padding: 4px 8px; border: 2px solid #f17043; border-radius: 999px; background: white; color: #d54836; font-size: .75rem; font-weight: 900; }
.nickname-card input { width: 100%; padding: 12px 13px; border: 3px solid #62c8ec; border-radius: 14px; outline: none; background: white; color: #153d68; font: inherit; font-size: 1.08rem; font-weight: 900; text-align: center; }
.nickname-card input:focus { border-color: #ef573c; box-shadow: 0 0 0 3px rgba(255,202,74,.58); }
.nickname-hint { min-height: 1.2em; margin: 8px 0 !important; color: #5680a1 !important; font-size: .75rem !important; }
.nickname-save { width: 100%; padding: 12px; border: 0; border-radius: 14px; background: linear-gradient(#ffac55, #f35b3d); box-shadow: 0 4px 0 #c64736; color: white; font-size: 1.05rem; font-weight: 900; text-shadow: 0 2px 0 #b54032; }
.nickname-save:active { transform: translateY(3px); box-shadow: 0 1px 0 #c64736; }
.nickname-skip { margin-top: 12px; border: 0; background: transparent; color: #47759a; font-size: .83rem; font-weight: 800; text-decoration: underline; }
.nickname-change-dialog { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; padding: 22px; border-radius: 30px; background: rgba(4,51,88,.5); }
.nickname-change-card { width: min(100%, 275px); padding: 22px 18px 17px; border: 4px solid white; border-radius: 22px; background: #fffdf5; box-shadow: 0 7px 0 rgba(11,70,125,.45); text-align: center; }
.nickname-change-card h3 { margin: 0; color: #e9423d; font-size: 1.25rem; text-shadow: 0 1px 0 white; }
.nickname-change-card p { margin: 9px 0 15px; color: #285b88; font-size: .86rem; font-weight: 800; line-height: 1.35; }
.nickname-change-card div { display: flex; gap: 8px; }
.nickname-change-card button { flex: 1; padding: 9px 6px; border: 0; border-radius: 10px; color: white; font-weight: 900; }
#nickname-change-confirm { background: #f05b3f; box-shadow: 0 3px 0 #bb3d31; }
#nickname-change-cancel { background: #4d8fc1; box-shadow: 0 3px 0 #266790; }
.nickname-greeting { position: absolute; z-index: 8; top: 84px; left: 50%; margin: 0; padding: 7px 15px; transform: translateX(-50%); border: 3px solid white; border-radius: 999px; background: rgba(7,54,95,.88); box-shadow: 0 3px 0 rgba(7,42,73,.4); color: #fff56b; font-size: clamp(.9rem, 2vw, 1.15rem); font-weight: 900; white-space: nowrap; text-shadow: 0 2px 0 #a72c45; }
.nickname-back-button { position: absolute; z-index: 9; top: max(14px, env(safe-area-inset-top)); left: 16px; display: grid; place-items: center; width: 52px; height: 52px; padding: 0 0 5px; border: 3px solid white; border-radius: 50%; background: linear-gradient(#45aeee, #1762ac); box-shadow: 0 4px 0 #0e4b88; color: white; font-size: 2.5rem; font-weight: 400; line-height: 1; }
.nickname-back-button:active { transform: translateY(3px); box-shadow: 0 1px 0 #0e4b88; }
.intro-screen { inset: 0; z-index: 10; width: 100%; height: 100svh; min-height: 100svh; display: grid; place-items: center; position: absolute; background: #46bbed url("assets/kids-meadow-background.png") center bottom / cover; }
.intro-top-title { position: absolute; z-index: 6; top: max(18px, env(safe-area-inset-top)); right: 18px; left: 18px; margin: 0; color: #f52121; font-size: clamp(1.38rem, 5.3vw, 2.18rem); font-weight: 900; line-height: 1.12; letter-spacing: .015em; text-align: center; text-shadow: -2px -2px 0 white, 2px 2px 0 white; filter: drop-shadow(4px 5px 0 #111); }
.intro-top-title span { font-size: 1.1em; letter-spacing: .06em; }
.intro-video { display: none; }
.nero-video { mix-blend-mode: multiply; filter: brightness(1.12) saturate(1.06); }
.intro-board-video { position: absolute; z-index: 2; top: 17%; left: 50%; width: min(43vw, 430px); height: min(49svh, 310px); transform: translateX(-50%); border: 5px solid white; border-radius: 24px; background: linear-gradient(135deg, #65d9ed, #b9f58b); box-shadow: 0 8px 0 rgba(22,102,159,.42), 0 12px 24px rgba(24,96,110,.25); object-fit: contain; }
.intro-video-caption { position: absolute; z-index: 4; top: calc(17% + min(49svh, 310px) - 53px); left: 50%; width: max-content; max-width: 80vw; margin: 0; padding: 7px 13px; transform: translateX(-50%); border-radius: 12px; background: rgba(0,0,0,.65); color: #fff; font-size: clamp(1rem, 2.2vw, 1.45rem); font-weight: 900; line-height: 1.2; text-align: center; text-shadow: 0 2px 0 #bd2438; }
.intro-select-prompt { position: absolute; z-index: 5; top: calc(17% + min(49svh, 310px) + 4px); left: 50%; margin: 0; padding: 9px 22px; transform: translateX(-50%); border: 3px solid white; border-radius: 12px; background: #12376d; box-shadow: 0 4px 0 #0b254a; color: #fff56b; font-size: clamp(.95rem, 1.8vw, 1.22rem); font-weight: 900; white-space: nowrap; text-shadow: 0 2px 0 #a82c46; }
.intro-sound-button { position: absolute; z-index: 7; top: 18%; left: calc(50% - min(21.5vw, 215px) - 30px); display: grid; place-items: center; width: 54px; height: 54px; padding: 0; border: 3px solid white; border-radius: 50%; background: linear-gradient(#329ee9, #1867b7); box-shadow: 0 4px 0 #0d4a8a; color: white; font-size: 1.5rem; }
.intro-sound-button:active { transform: translateY(3px); box-shadow: 0 1px 0 #0d4a8a; }
.intro-master-nero { position: absolute; z-index: 2; top: 15%; left: 50%; width: min(31vw, 260px); height: min(53svh, 330px); transform: translateX(-50%); object-fit: contain; object-position: center bottom; filter: drop-shadow(0 8px 5px rgba(31,91,66,.28)); animation: nero-teacher-idle 2.8s ease-in-out infinite; }
.animal-strip { position: absolute; z-index: 3; inset: 0; }
.animal-choice { position: absolute; width: clamp(72px, 11vw, 108px); aspect-ratio: 1; padding: 0; border: 0; background: transparent; }
.animal-choice video { width: 100%; aspect-ratio: 1; border: 3px solid #f22932; border-radius: 50%; background: rgba(255,255,255,.2); object-fit: cover; mix-blend-mode: multiply; filter: saturate(1.12) contrast(1.05); }
.animal-level { position: absolute; z-index: 2; bottom: -25px; left: 50%; min-width: max-content; transform: translateX(-50%); padding: 3px 12px 4px; border: 2px solid #f22932; border-radius: 999px; background: #090909; color: #fff; font-size: clamp(.66rem, 1.35vw, .92rem); font-weight: 900; line-height: 1; white-space: nowrap; text-shadow: 0 1px 0 #333; box-shadow: 0 2px 0 rgba(105,12,20,.4); }
.animal-choice b { display: none; }
.animal-choice:active { transform: scale(.95); }
.chick { top: 23%; left: 11%; }.squirrel { top: 50%; left: 11%; }.rabbit { top: 76%; left: 11%; }.elephant { top: 23%; right: 11%; }.lion { top: 50%; right: 11%; }.tiger { top: 76%; right: 11%; }.fox { top: 76%; left: 37%; }.wolf { top: 76%; left: 56%; }
.screen { min-height: 100svh; padding: max(18px, env(safe-area-inset-top)) 16px 24px; position: relative; }
.start-screen { display: flex; flex-direction: column; align-items: center; }
.brand { color: #153c67; text-align: center; text-shadow: 0 2px 0 rgba(255,255,255,.45); animation: title-in .55s ease-out both; }
.brand p { margin: 0; font-weight: 800; font-size: .82rem; letter-spacing: .02em; }
.brand { position: relative; }
.voice-button { position: absolute; top: 89px; left: 3px; width: 38px; height: 38px; margin: 0; border: 2px solid rgba(255,255,255,.95); border-radius: 50%; background: #247dbe; box-shadow: 0 3px 0 rgba(18,72,117,.3); color: white; font-size: 1rem; }
.voice-button:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(18,72,117,.3); }
.brand .eyebrow { font-size: .72rem; letter-spacing: .16em; }
h1 { margin: 5px 0 4px; color: #ef493e; font-size: clamp(1.55rem, 7.2vw, 1.98rem); line-height: 1.1; text-shadow: -1px -1px 0 #172b42, 1px -1px 0 #172b42, -1px 1px 0 #172b42, 1px 1px 0 #172b42, 0 2px 0 #172b42; }
.brand > p:last-child { color: #9b5b00; font-size: 1.13rem; text-shadow: -1px -1px 0 rgba(255,255,255,.85), 1px 1px 0 rgba(255,255,255,.85); }
.nero-welcome { position: relative; width: 100%; height: 314px; max-height: 36svh; min-height: 274px; display: flex; justify-content: center; align-items: end; margin-top: 8px; padding-top: 79px; }
.nero { width: min(286px, 71vw); height: 230px; object-fit: contain; object-position: center bottom; transform-origin: center bottom; filter: brightness(1.1) saturate(1.06) drop-shadow(0 9px 7px rgba(19,79,60,.22)); animation: nero-enter .75s .38s cubic-bezier(.17,.92,.31,1.25) both, nero-hello 3.2s 1.2s ease-in-out infinite; }
.speech-bubble { position: absolute; z-index: 1; top: 8px; left: 50%; width: min(100% - 60px, 270px); transform: translateX(-50%); padding: 8px 10px; border: 0; border-radius: 18px; background: transparent; box-shadow: none; text-align: center; color: #2666a7; text-shadow: 0 2px 0 rgba(255,255,255,.95), 0 0 8px rgba(255,255,255,.9); animation: bubble-in .48s .95s ease-out both, bubble-breathe 2.6s 1.45s ease-in-out infinite; }
.speech-bubble::after { display: none; }
.speech-bubble strong, .speech-bubble span { display: block; font-size: .96rem; line-height: 1.2; }
.speech-bubble span { margin-top: 4px; color: #ff7956; font-size: .9rem; font-weight: 900; }
.speech-bubble.subtitle-changing { animation: subtitle-pop .22s ease-out; }
.level-panel { width: 100%; padding: 17px 13px 13px; border: 3px solid rgba(255,255,255,.92); border-radius: 27px; background: rgba(255,255,255,.93); box-shadow: 0 7px 0 rgba(26,93,138,.22); }
.level-heading { display: flex; align-items: center; justify-content: space-between; margin: 0 3px 10px; }
.level-heading h2 { margin: 0; font-size: 1.2rem; color: #195da9; }
.level-heading p { margin: 3px 0 0; color: #4e7596; font-size: .75rem; font-weight: 700; }
.sparkle { font-size: 2rem; color: #ffd14e; text-shadow: 1px 1px 0 #ed9a2e; }
.level-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.level-card { min-height: 66px; padding: 7px 5px; border: 2px solid #d9e9f5; border-radius: 16px; background: #f9fdff; color: #2a5987; text-align: left; position: relative; transition: transform .15s, border-color .15s, background .15s; }
.level-card:active { transform: scale(.97); }
.level-card span { font-size: 1.45rem; vertical-align: middle; margin-right: 3px; }
.level-card b { font-size: .88rem; }
.level-card small { display: block; padding-left: 4px; color: #67809a; font-size: .68rem; font-weight: 700; }
.level-card em { display: none; position: absolute; right: 5px; top: -8px; padding: 2px 6px; border-radius: 9px; background: #ff8b52; color: white; font-style: normal; font-size: .58rem; font-weight: 900; }
.level-card.selected { border-color: #ffb937; background: #fff8d9; box-shadow: 0 2px 0 #f6bd45; }
.level-card.selected em { display: block; }
.start-button { width: 100%; min-height: 51px; margin-top: 12px; border: 0; border-radius: 17px; background: linear-gradient(180deg, #ff9a5a, #f86f48); color: white; box-shadow: 0 5px 0 #c84f39; font-weight: 900; font-size: 1rem; text-shadow: 0 1px 0 rgba(128,35,18,.4); }
.start-button:active { transform: translateY(3px); box-shadow: 0 2px 0 #c84f39; }
.start-button span { font-size: 1.3rem; padding-left: 7px; }
.selection-message { margin: 10px 0 0; min-height: 1em; text-align: center; color: #5281a3; font-size: .74rem; font-weight: 700; }
.apple-screen { display: grid; place-items: center; align-content: center; gap: 14px; background-color: rgba(76,192,241,.24); }
.lesson-card { width: 100%; max-width: 350px; padding: 22px 20px 20px; border: 4px solid white; border-radius: 31px; background: rgba(255,255,255,.96); box-shadow: 0 10px 0 rgba(18,92,139,.23); text-align: center; }
.apple-screen .lesson-card > :not(.level-promo):not(.level-media-column) { display: none; }
.level-showcase { display: grid; grid-template-columns: minmax(150px, .7fr) minmax(0, 1fr); align-items: center; gap: 18px; max-width: 760px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: left; }
.level-media-column { width: 100%; }
.level-video-wrap { position: relative; width: 100%; }
.level-nero-video { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: none; border: 4px solid white; border-radius: 28px; background: linear-gradient(135deg, #ddf8ff, #8edffa); box-shadow: 0 7px 0 rgba(19,91,150,.35); object-fit: cover; object-position: center 43%; }
.level-sound-button { position: absolute; z-index: 2; top: 9px; right: 9px; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 3px solid white; border-radius: 50%; background: #176bb1; box-shadow: 0 3px 0 rgba(15,69,114,.35); color: white; font-size: 1.15rem; }
.level-promo { display: block; padding: 17px; border: 4px solid white; border-radius: 28px; background: rgba(255,255,255,.92); box-shadow: 0 9px 0 rgba(18,92,139,.23); }
.level-promo-title { margin: 0; color: #f2272b; font-size: clamp(1.65rem, 5.4vw, 2.45rem); font-weight: 900; line-height: 1.08; text-shadow: -1px -1px 0 white, 1px 2px 0 #ba2638; }
.level-promo-copy { margin: 10px 0 13px; color: #176db2; font-size: clamp(1rem, 3vw, 1.28rem); font-weight: 900; }
.level-promo-list { display: grid; gap: 6px; text-align: left; }
.level-animal-choice { display: grid; grid-template-columns: auto 34px minmax(0, 1fr); grid-template-rows: 1fr 1fr; width: 100%; column-gap: 6px; row-gap: 0; align-items: center; min-height: 42px; margin: 0; padding: 5px 10px; border: 2px solid transparent; border-radius: 12px; background: linear-gradient(90deg, #e8faff, #f9feff); color: #18568d; font: inherit; font-size: clamp(.78rem, 2.2vw, 1rem); font-weight: 900; text-align: left; }
.level-animal-choice:hover, .level-animal-choice:focus-visible, .level-animal-choice.is-selected { border-color: #ffb339; background: linear-gradient(90deg, #fff8c9, #fffdf2); box-shadow: 0 2px 0 #e99231; outline: 0; }
.level-promo-list b { grid-row: 1 / 3; color: #f32c38; font-size: 1.08em; }
.level-animal-video { grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 9px; background: #aeeeff; object-fit: cover; }
.level-class-name { grid-column: 3; grid-row: 1; min-width: 0; align-self: end; color: #18568d !important; white-space: nowrap; }
.level-class-name + span { grid-column: 3; grid-row: 2; align-self: start; color: #ed4e6d; font-size: .84em; white-space: nowrap; }
.level-promo .start-button { width: 100%; margin-top: 14px; }
.lesson-step { margin: 0; color: #4c78a3; font-size: .85rem; font-weight: 800; }
.lesson-card h2 { margin: 7px 0 0; color: #e3473b; font-size: clamp(2.6rem, 15vw, 4rem); letter-spacing: .06em; text-shadow: 0 3px 0 #ffd6a1; }
.alphabet-progress { display: flex; justify-content: center; gap: 8px; margin: 11px 0 2px; }
.alphabet-progress span { width: 28px; height: 8px; border-radius: 999px; background: #d8e7f4; }
.alphabet-progress .is-active { background: #ffb737; box-shadow: 0 2px 0 #df8a26; }
.letter-image { display: block; width: min(100%, 245px); height: 172px; margin: 7px auto 4px; border: 3px solid #dff7ff; border-radius: 21px; object-fit: cover; object-position: center 62%; box-shadow: 0 4px 0 rgba(58,158,193,.18); }
.lesson-emoji { height: 172px; margin: 7px auto 4px; font-size: 8.8rem; line-height: 1; filter: drop-shadow(0 6px 3px rgba(45,99,112,.2)); }
.letter-word { margin: 5px 0; font-size: 1.22rem; color: #1e5796; font-weight: 900; }
.letter-word strong { color: #df493e; }
.pronunciation { margin: 5px 0; font-size: 1.12rem; color: #1e5796; font-weight: 900; }
.pronunciation span { color: #79a1be; font-weight: 700; font-size: .82rem; }
.lesson-copy { margin: 13px 0 0; color: #3f6f93; font-weight: 700; line-height: 1.45; }
.lesson-copy strong { color: #df493e; }
.back-button { position: absolute; z-index: 2; top: max(15px, env(safe-area-inset-top)); left: 15px; width: 47px; height: 47px; border: 3px solid white; border-radius: 50%; background: #2679bb; color: white; box-shadow: 0 4px 0 rgba(15,69,114,.35); font-size: 2rem; line-height: 1; }
.lesson-nero { width: 150px; height: 125px; object-fit: contain; mix-blend-mode: normal; filter: brightness(1.12) saturate(1.08) drop-shadow(0 5px 4px rgba(19,79,60,.2)); }
.quiz-screen { display: flex; min-height: 100svh; flex-direction: column; align-items: center; padding-top: max(77px, calc(env(safe-area-inset-top) + 62px)); background: linear-gradient(rgba(33,176,245,.72), rgba(62,213,240,.42)); text-align: center; }
.quiz-brand { display: none; }
.quiz-progress { width: min(100%, 350px); height: 16px; overflow: hidden; border: 3px solid white; border-radius: 999px; background: #1766b5; box-shadow: 0 3px 0 rgba(8,65,126,.45); }
.quiz-progress span { display: block; width: 34%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #45d85f 0 25%, #f5e846 25% 48%, #ff9c3f 48% 74%, #ff5b78 74%); }
.quiz-step { margin: 19px 0 4px; color: #ffec54; font-weight: 900; font-size: .98rem; text-shadow: -1px -1px 0 #d7556c, 1px 1px 0 #d7556c, 0 3px 0 #994273; }
.quiz-screen h2 { margin: 0; color: #fff45b; font-size: clamp(1.65rem, 8vw, 2.15rem); text-shadow: -2px -2px 0 #ef4f87, 2px -2px 0 #ef4f87, -2px 2px 0 #ef4f87, 2px 2px 0 #ef4f87, 0 4px 0 #9c3e9e; }
.quiz-prompt { margin: 7px 0 16px; color: #fff; font-weight: 900; text-shadow: -1px -1px 0 #1e70bd, 1px 1px 0 #1e70bd, 0 3px 0 #1e70bd; }
.fruit-game { width: min(100%, 360px); height: min(50svh, 430px); min-height: 330px; overflow: hidden; position: relative; border: 6px solid white; border-radius: 28px; background: linear-gradient(180deg, #27c8f3 0%, #63e4e4 58%, #baf16a 100%); box-shadow: 0 8px 0 #1467b4, 0 13px 22px rgba(22,98,156,.32), inset 0 0 0 4px #1676c8; }
.alphabet-game { touch-action: none; }
.game-level-controls { position: absolute; z-index: 6; top: 10px; left: 10px; display: flex; gap: 4px; }
.game-level-controls button { padding: 7px 10px; border: 2px solid white; border-radius: 10px; background: linear-gradient(#2c9ce2, #1463ad); box-shadow: 0 2px 0 #0c4381; color: white; font-size: .9rem; font-weight: 900; line-height: 1; text-shadow: -1px -1px 0 #0d4c91, 1px 1px 0 #0d4c91; }
.game-level-controls #start-group { background: linear-gradient(#ffb74e, #f06a37); box-shadow: 0 2px 0 #bf4032; }
.game-level-controls #start-group.can-restart { background: linear-gradient(#ffdf4e, #ff7f2c); box-shadow: 0 2px 0 #bf4032, 0 0 10px #fff35b; animation: restart-glow .8s ease-in-out infinite alternate; }
.game-level-controls button:disabled { opacity: .7; cursor: default; }
.game-hud { position: absolute; z-index: 3; top: 10px; left: 50%; min-width: 172px; transform: translateX(-50%); padding: 7px 13px; border: 3px solid white; border-radius: 999px; background: linear-gradient(#8f58e9, #4f3cad); box-shadow: 0 4px 0 #34277e; color: #fff95f; font-size: .98rem; font-weight: 900; text-shadow: 0 2px 0 #673b9c; }
.game-hud b { margin-left: 10px; color: #fff16b; }
.letter-sound-pop { position: absolute; z-index: 9; top: 31%; left: 50%; min-width: 154px; transform: translateX(-50%); padding: 9px 22px; border: 5px solid white; border-radius: 28px; background: #ff5a72; color: #fff56b; font-size: clamp(3rem, 10vw, 5.2rem); font-weight: 900; line-height: 1; letter-spacing: .06em; text-align: center; text-shadow: -2px -2px 0 #d63263, 2px 2px 0 #d63263, 0 4px 0 #a82550; box-shadow: 0 7px 0 #bd3353; pointer-events: none; }
.letter-sound-pop.is-showing { animation: letter-pop 1.05s ease-out both; }
.animal-selection-prompt { position: absolute; z-index: 5; top: 37%; right: 8%; left: 8%; margin: 0; color: #f3212a; font-size: clamp(1.15rem, 3vw, 2rem); font-weight: 900; line-height: 1.25; text-align: center; text-shadow: -1px -1px 0 white, 1px 1px 0 white, 0 3px 0 #a81931; animation: praise-pop .3s ease-out both; }
.falling-fruit { position: absolute; z-index: 2; top: -104px; width: 112px; height: 112px; padding: 0; border: 0; background: transparent; font-size: 3.2rem; line-height: 1; filter: drop-shadow(0 4px 2px rgba(35,83,83,.25)); animation: fruit-fall var(--fall-time) linear forwards; }
.falling-letter { display: grid; place-items: center; position: absolute; isolation: isolate; border: 0; border-radius: 50%; background: transparent; box-shadow: none; color: white; font-family: Arial, sans-serif; font-weight: 900; text-shadow: 0 2px 0 rgba(255,255,255,.75); }
.falling-letter::before { position: absolute; inset: 22px; z-index: -1; border: 4px solid white; border-radius: 50%; background: #ffec4f; box-shadow: 0 5px 0 #d88720; content: ""; }
.falling-letter.target-drop::before { background: radial-gradient(circle at 34% 27%, #ffb97a, #ff5f65 62%); box-shadow: 0 5px 0 #c53d57; }
.falling-letter.is-dragging { z-index: 8; animation: none !important; transform: scale(1.12); cursor: grabbing; }
.drop-hint { position: absolute; z-index: 3; top: 64px; right: 12px; left: 12px; margin: 0; color: #ff4e81; font-size: 1rem; font-weight: 900; text-align: center; text-shadow: -1px -1px 0 white, 1px 1px 0 white, 0 2px 0 white; }
.drop-hint b { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-left: 3px; border-radius: 50%; background: #fff15a; color: #1c5791; box-shadow: 0 3px 0 #d99828; }
.lowercase-row { position: absolute; z-index: 4; right: 10px; bottom: 59px; left: 10px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.lowercase-slot { aspect-ratio: 1; min-width: 0; padding-top: .14em; border: 4px solid white; border-radius: 15px; background: #fff4a4; color: #f04b76; font-size: clamp(1.5rem, 8vw, 2.15rem); font-weight: 900; line-height: 1; text-shadow: 0 1px 0 white; box-shadow: 0 3px 0 #d89829; }
.lowercase-slot:nth-child(4n) { color: #6848cf; }
.lowercase-slot:nth-child(5n) { color: #139565; }
.lowercase-slot:nth-child(2n) { background: #ffb5d5; box-shadow: 0 3px 0 #d95488; }
.lowercase-slot:nth-child(3n) { background: #aef0b8; box-shadow: 0 3px 0 #46a962; }
.lowercase-slot.is-matched { border-style: solid; border-color: white; background: #67d96e; color: white; box-shadow: 0 3px 0 #278844; transform: scale(.96); }
.falling-fruit.caught { animation: fruit-caught .28s ease-out forwards; pointer-events: none; }
.quiz-feedback { position: absolute; z-index: 3; right: 10px; bottom: 31px; left: 10px; min-height: 1.5em; margin: 0; padding: 3px 10px; border: 0; border-radius: 0; background: transparent; color: #f21d25; font-size: .82rem; font-weight: 900; text-shadow: -.75px -.75px 0 #151515, .75px .75px 0 #151515; box-shadow: none; }
.class-name-row { position: absolute; z-index: 4; right: 9px; bottom: 4px; left: 9px; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; padding: 5px 4px; border: 2px solid white; border-radius: 12px; background: linear-gradient(90deg, #146bb8, #1f92cf); box-shadow: 0 3px 0 rgba(15,80,144,.4); }
.class-name-row button { min-width: 0; padding: 0; border: 0; background: transparent; color: white; font-size: clamp(.62rem, 1.25vw, .92rem); font-weight: 900; line-height: 1.1; text-align: center; text-shadow: 0 1px 0 #0c4b8b; }
.class-name-row button:focus-visible, .class-name-row button.is-selected { color: #fff15b; outline: 0; text-shadow: -1px -1px 0 #b82f4f, 1px 1px 0 #b82f4f, 0 2px 0 #7b2b77; transform: translateY(-1px); }
.quiz-animal-display { display: none; }
.quiz-nero { width: 125px; height: 98px; object-fit: contain; transform-origin: center bottom; filter: brightness(1.08) saturate(1.05) drop-shadow(0 5px 4px rgba(19,79,60,.2)); animation: nero-teacher-idle 2.8s ease-in-out infinite; }
.quiz-nero-reaction { position: absolute; z-index: 18; left: 1.5%; bottom: 10px; width: min(26vw, 290px); height: min(50svh, 285px); object-fit: contain; object-position: center bottom; mix-blend-mode: multiply; filter: contrast(1.08) saturate(1.12) drop-shadow(0 5px 4px rgba(19,79,60,.2)); }
.nero-praise-bubble { position: absolute; z-index: 19; left: 18px; bottom: 150px; margin: 0; padding: 10px 16px; border: 4px solid white; border-radius: 22px; background: #fff56d; color: #e84776; font-size: 1.08rem; font-weight: 900; text-shadow: 0 1px 0 white; box-shadow: 0 5px 0 #d8902d; animation: praise-pop .24s ease-out both; }
.nero-praise-bubble::after { position: absolute; bottom: -14px; left: 34px; width: 0; height: 0; border-top: 16px solid #fff56d; border-right: 10px solid transparent; border-left: 10px solid transparent; content: ""; }
@keyframes praise-pop { from { opacity: 0; transform: scale(.65) translateY(15px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes nero-teacher-idle { 0%, 100% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-8px) rotate(-1.4deg); } 68% { transform: translateY(-3px) rotate(1.2deg); } }
@keyframes letter-pop { 0% { opacity: 0; transform: translate(-50%, 22px) scale(.45); } 18%, 72% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -15px) scale(1.08); } }
@keyframes wiggle { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes fruit-fall { to { transform: translateY(calc(min(50svh, 430px) + 105px)); } }
@keyframes fruit-caught { to { opacity: 0; transform: scale(1.6) rotate(20deg); } }
@keyframes title-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bubble-in { from { opacity: 0; transform: translate(-50%, -14px) scale(.86); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes restart-glow { to { filter: brightness(1.16); } }
@keyframes bubble-breathe { 50% { transform: translate(-50%, -2px) scale(1.018); } }
@keyframes nero-enter { from { opacity: 0; transform: translateY(58px) scale(.7) rotate(-7deg); } to { opacity: 1; transform: translateY(0) scale(1) rotate(0); } }
@keyframes nero-hello { 0%, 100% { transform: translateY(0) rotate(0); } 26% { transform: translateY(-5px) rotate(-1.4deg); } 51% { transform: translateY(-9px) rotate(1.2deg); } 74% { transform: translateY(-4px) rotate(-.7deg); } }
@keyframes subtitle-pop { from { opacity: .25; transform: translateX(-50%) scale(.94); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }
[hidden] { display: none !important; }
@media (min-width: 700px) { body { padding: 18px; } .app-shell { border-radius: 28px; min-height: calc(100svh - 36px); box-shadow: 0 16px 50px rgba(11,79,119,.35); } }
@media (orientation: landscape) {
  body { padding: 0; }
  .app-shell { width: 100%; height: 100svh; max-width: none; border-radius: 0; box-shadow: none; }
  .intro-board-video { top: 17%; width: min(43vw, 430px); height: min(49svh, 310px); }
  .intro-video-caption { font-size: clamp(1.05rem, 2vw, 1.45rem); }
  .intro-top-title { top: 18px; right: 1%; left: 1%; font-size: clamp(1.9rem, 4vw, 3.2rem); letter-spacing: 0; white-space: nowrap; }
  .bgm-control { top: 72px; right: 2.5%; display: flex; flex-direction: row; align-items: center; gap: 6px; }
  .nickname-greeting { top: 72px; }
  .nickname-back-button { top: 14px; left: 16px; }
  .animal-choice { width: clamp(82px, 10.5vw, 108px); }
  .apple-screen { display: grid; grid-template-columns: 1fr; padding: 18px 5.5%; }
  .level-showcase { grid-template-columns: minmax(248px, 34%) minmax(0, 1fr); align-items: stretch; width: min(100%, 1050px); max-width: 1050px; gap: 28px; }
  .level-media-column { align-self: start; height: min(88svh, 550px); min-height: 0; }
  .level-video-wrap { min-height: 0; height: 100%; }
  .level-nero-video { height: 100%; min-height: 0; aspect-ratio: auto; border-radius: 30px; }
  .level-promo { padding: 22px 24px; }
  .level-promo-title { font-size: clamp(2rem, 3.6vw, 3rem); }
  .level-promo-copy { margin: 10px 0 16px; font-size: clamp(1.2rem, 2vw, 1.65rem); }
  .level-promo-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .level-animal-choice { padding: 10px 12px; font-size: clamp(.9rem, 1.5vw, 1.2rem); }
  .level-promo .start-button { margin-top: 17px; font-size: clamp(1.1rem, 1.8vw, 1.4rem); }
  .lesson-nero { display: none; }
  .lesson-nero { width: 185px; height: 190px; }
  .quiz-screen { display: grid; grid-template-columns: 28% minmax(470px, 1fr) 21%; grid-template-rows: 62px 1fr; align-items: center; column-gap: 18px; padding: 12px 4%; }
  .quiz-screen .back-button { top: 14px; left: 16px; }
  .quiz-brand { position: absolute; top: 13px; right: 6%; left: 9%; z-index: 4; display: block; color: #fff35f; font-weight: 900; text-shadow: -2px -2px 0 #e94d83, 2px 2px 0 #e94d83, 0 3px 0 #9b3b8b; }
  .quiz-brand b { position: absolute; top: 28px; left: -43px; color: #ff2424; font-size: clamp(3rem, 5.5vw, 4.3rem); line-height: .88; letter-spacing: .025em; text-shadow: -2px -2px 0 white, 2px 2px 0 white, 0 4px 0 #bd1c31; }
  .quiz-brand strong { position: absolute; top: 0; right: 1.4%; left: 36%; color: #ff2525; font-size: clamp(1.8rem, 3.5vw, 2.7rem); text-align: center; text-shadow: -2px -2px 0 white, 2px 2px 0 white, 0 3px 0 #bd1c31; }
  .quiz-progress { display: none; }
  .quiz-step { display: none; }
  .quiz-screen h2 { position: absolute; top: 68px; right: 1.4%; left: 36%; margin: 0; color: #fff45d; font-size: clamp(1.45rem, 2.65vw, 2.25rem); line-height: 1.16; text-align: center; text-shadow: -2px -2px 0 #ef4f87, 2px -2px 0 #ef4f87, -2px 2px 0 #ef4f87, 2px 2px 0 #ef4f87, 0 4px 0 #9d3e9d; }
  .quiz-prompt { position: absolute; top: 111px; right: 1.4%; left: 36%; margin: 0; color: #151515; font-size: clamp(1.1rem, 1.9vw, 1.48rem); line-height: 1.3; text-align: center; text-shadow: -1px -1px 0 white, 1px 1px 0 white, 0 2px 0 white; }
  .fruit-game { position: absolute; top: 150px; right: 1.4%; bottom: 18px; left: 36%; width: auto; height: auto; min-height: 0; margin: 0; }
  .quiz-nero { position: absolute; left: .5%; bottom: 2px; width: min(33vw, 340px); height: min(74svh, 430px); object-position: center bottom; }
  .quiz-animal-display { position: absolute; z-index: 12; top: 29%; left: 21.5%; display: grid; place-items: center; width: min(14vw, 138px); aspect-ratio: 1; overflow: hidden; border: 3px solid #f22932; border-radius: 50%; background: #080808; box-shadow: 0 4px 0 rgba(10,45,77,.34); }
  .quiz-animal-display video { display: none; width: 100%; height: 100%; object-fit: cover; transform: scale(1.34) translateY(-12%); }
  .quiz-animal-display.is-showing video { display: block; }
  .quiz-animal-display span { z-index: 1; color: #fff; font-size: clamp(.62rem, 1.2vw, .9rem); font-weight: 900; line-height: 1.25; text-align: center; text-shadow: 0 2px 0 #dc2845; }
  .quiz-animal-display.is-showing span { position: absolute; right: 7%; bottom: 7%; left: 7%; display: grid; gap: 1px; padding: 3px 2px; border-radius: 4px; background: rgba(0,0,0,.88); color: white; font-size: clamp(.54rem, .9vw, .7rem); line-height: 1.05; text-shadow: none; }
  .quiz-animal-display.is-showing span b { font-size: 1em; letter-spacing: .04em; }
  .quiz-animal-display.is-showing span small { color: #ffea5a; font-size: .9em; font-weight: 900; }
  .game-level-controls { top: 10px; left: 12px; }
  .game-hud { left: 42%; right: auto; min-width: 104px; padding: 7px 8px; transform: none; font-size: .9rem; }
  .game-hud b { margin-left: 5px; }
  .animal-selection-prompt { top: 38%; font-size: clamp(1.2rem, 2.4vw, 1.8rem); }
  .quiz-nero-reaction { left: .5%; bottom: 2px; width: min(33vw, 340px); height: min(74svh, 430px); }
  .nero-praise-bubble { left: 4%; bottom: min(59svh, 350px); font-size: clamp(1.1rem, 1.8vw, 1.5rem); }
  @keyframes fruit-fall { to { transform: translateY(calc(min(70svh, 390px) + 105px)); } }
}


/* Phones in landscape have plenty of width but very little height. Keep the welcome screen compact so the title, animals, and lesson card never overlap. */
@media (orientation: landscape) and (max-height: 560px) {
  .intro-top-title { top: max(7px, env(safe-area-inset-top)); right: 12%; left: 12%; font-size: clamp(1.05rem, 3.15vw, 1.85rem); line-height: 1.04; }
  .nickname-back-button { top: 8px; left: 12px; width: 43px; height: 43px; font-size: 2rem; }
  .bgm-control { top: 9px; right: 12px; transform: scale(.82); transform-origin: top right; }
  .nickname-greeting { top: 55px; font-size: clamp(.76rem, 1.7vw, 1rem); }
  .intro-board-video { top: 20%; width: min(36vw, 330px); height: min(47svh, 230px); border-width: 4px; border-radius: 18px; }
  .intro-video-caption { top: calc(20% + min(47svh, 230px) - 39px); padding: 5px 10px; font-size: clamp(.72rem, 1.55vw, 1rem); }
  .intro-select-prompt { top: calc(20% + min(47svh, 230px) + 3px); padding: 6px 13px; border-width: 2px; font-size: clamp(.7rem, 1.45vw, .95rem); }
  .intro-sound-button { top: 24%; left: calc(50% - min(18vw, 165px) - 22px); width: 42px; height: 42px; border-width: 2px; font-size: 1.12rem; }
  .animal-choice { width: clamp(56px, 8.4vw, 80px); }
  .animal-choice video { border-width: 2px; }
  .animal-level { bottom: -18px; padding: 2px 7px 3px; border-width: 1px; font-size: clamp(.5rem, 1.05vw, .7rem); }
  .chick, .elephant { top: 25%; }
  .squirrel, .lion { top: 52%; }
  .rabbit, .tiger, .fox, .wolf { top: 77%; }
}