:root{--violet:#6657e8;--blue:#3b82f6;--ink:#25304b;--muted:#667085;--paper:#fff;--green:#20b979;--red:#ee5965;--yellow:#ffd447;--shadow:0 16px 40px rgba(52,58,120,.16);--soft-shadow:0 8px 22px rgba(52,58,120,.12)}
*{box-sizing:border-box}html{min-height:100%;background:#eef4ff}body{margin:0;min-height:100vh;color:var(--ink);font-family:"Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif;background:radial-gradient(circle at 15% 8%,#fff1b7 0,transparent 25%),radial-gradient(circle at 88% 20%,#d8f8ff 0,transparent 28%),linear-gradient(145deg,#f5f4ff,#eefaff 52%,#fff5df);overflow-x:hidden}button{border:0;font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:4px solid #2457d6;outline-offset:3px}.hidden{display:none!important}
.decor{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}.decor i{position:absolute;font-style:normal;color:#6657e81a;font-size:55px;animation:drift 8s ease-in-out infinite}.decor i:nth-child(1){left:6%;top:13%}.decor i:nth-child(2){right:8%;top:18%;animation-delay:-2s}.decor i:nth-child(3){left:12%;bottom:10%;animation-delay:-4s}.decor i:nth-child(4){right:12%;bottom:8%;animation-delay:-6s}
.app-header{position:fixed;z-index:20;top:0;left:0;right:0;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 max(18px,calc((100vw - 1120px)/2));background:#ffffffd9;backdrop-filter:blur(12px);border-bottom:1px solid #fff;box-shadow:0 4px 20px #27306b12}.icon-btn{display:grid;place-items:center;min-width:48px;height:48px;padding:0 12px;border-radius:16px;background:#fff;color:#4e48b5;font-size:26px;box-shadow:var(--soft-shadow);transition:.18s}.icon-btn:hover{transform:translateY(-2px);background:#f4f1ff}.mini-logo{font-weight:900;color:#574ed0;letter-spacing:.5px}.mini-logo span{color:#ffb703}
#app{position:relative;z-index:1;min-height:100vh;display:grid;place-items:center;padding:92px 24px 30px}.screen{display:none;width:min(1100px,100%);opacity:0;transform:translateY(12px)}.screen.active{display:block;animation:screen-in .35s ease forwards}.screen#home{padding-top:0;text-align:center}
.logo{display:flex;align-items:center;justify-content:center;gap:20px}.logo-star{display:grid;place-items:center;width:120px;height:120px;border-radius:36px;color:#fff;font-size:78px;background:linear-gradient(145deg,#ffd94f,#ffac2f);box-shadow:0 13px 0 #e69328,0 24px 45px #df9d3650;transform:rotate(-6deg)}h1{font-size:clamp(50px,7vw,84px);line-height:.8;letter-spacing:-3px;text-align:left;margin:0;color:#3e4797;text-shadow:0 4px #fff}h1 strong{color:var(--violet);letter-spacing:2px}.tagline{font-size:clamp(20px,2.3vw,28px);margin:28px 0;color:#5e6682}
.home-menu{display:grid;grid-template-columns:repeat(2,minmax(250px,360px));justify-content:center;gap:16px}.menu-btn{min-height:94px;display:grid;grid-template-columns:62px 1fr;grid-template-rows:1fr 1fr;text-align:left;align-items:center;padding:14px 20px;background:#fff;border:2px solid #fff;border-radius:25px;box-shadow:var(--soft-shadow);transition:.2s}.menu-btn>span{grid-row:1/3;font-size:36px}.menu-btn b{font-size:20px;color:#443f9f}.menu-btn small{font-family:Arial,sans-serif;color:var(--muted);font-size:14px}.menu-btn:hover{transform:translateY(-4px);border-color:#c9c5ff;box-shadow:var(--shadow)}.menu-btn.play{background:linear-gradient(135deg,#7267ec,#5045cd);color:#fff;box-shadow:0 10px 0 #3e37a6,0 18px 30px #554bd54a}.menu-btn.play b,.menu-btn.play small{color:#fff}.menu-btn.play>span{display:grid;place-items:center;width:51px;height:51px;border-radius:50%;background:#ffffff2b}
.page-title{text-align:center;margin-bottom:25px}.page-title>span{display:inline-block;padding:8px 15px;border-radius:30px;background:#ece9ff;color:#554ccb;font-size:14px;font-weight:bold;letter-spacing:1.5px}.page-title h2,.level-hero h2,.result-card h2{font-size:clamp(34px,5vw,54px);margin:9px 0 4px}.page-title p{margin:0;color:var(--muted);font-size:18px}
.level-path{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;padding:35px 0}.level-path:before{content:"";position:absolute;left:8%;right:8%;top:91px;height:7px;border-radius:9px;background:#d9dcf0}.level-node{position:relative;text-align:center;z-index:1}.level-orb{position:relative;display:grid;place-items:center;margin:auto;width:112px;height:112px;border-radius:36px;background:var(--level-color);color:white;font-size:40px;font-weight:900;box-shadow:0 9px 0 color-mix(in srgb,var(--level-color),#000 22%),var(--shadow);transition:.2s}.level-node:not(.locked) .level-orb:hover{transform:translateY(-5px)}.level-node.locked .level-orb{background:#c9ccda;box-shadow:0 9px 0 #aeb2c2;filter:saturate(.3);cursor:not-allowed}.level-lock{position:absolute;right:-7px;top:-8px;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:white;font-size:20px;box-shadow:var(--soft-shadow)}.node-stars{height:27px;margin-top:15px;color:#f7b500;font-size:23px;letter-spacing:2px}.level-node h3{font-size:17px;margin:7px 0 2px}.level-node p{font:14px Arial,sans-serif;color:var(--muted);margin:0}
.level-hero{text-align:center;padding:25px;border-radius:32px;color:#fff;background:linear-gradient(140deg,var(--level-color),color-mix(in srgb,var(--level-color),#333 18%));box-shadow:var(--shadow)}.level-hero span{font-size:16px;font-weight:bold;letter-spacing:2px}.level-hero p{font-size:20px;margin:5px}.level-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:20px auto;width:min(700px,100%)}.stat{background:#fff;text-align:center;border-radius:22px;padding:17px;box-shadow:var(--soft-shadow)}.stat b{display:block;font-size:27px;color:#5149c1}.stat small{color:var(--muted)}.level-actions{display:flex;justify-content:center;gap:15px}
.btn{min-height:56px;min-width:180px;padding:15px 24px;border-radius:19px;font-weight:900;font-size:18px;box-shadow:0 7px 0 #00000020;transition:.15s}.btn:hover{transform:translateY(-3px)}.btn:active{transform:translateY(3px);box-shadow:0 3px 0 #0002}.btn.primary{color:#fff;background:linear-gradient(#7368ef,#5549d2)}.btn.secondary{color:#4840b4;background:#fff;border:2px solid #cbc7ff}.btn.ghost{color:#596174;background:#edf0f7}
.game-screen{text-align:center}.game-hud,.quiz-top{display:flex;align-items:center;gap:18px;margin:0 auto 12px;width:min(780px,100%)}.game-hud .bar{flex:1}.bar{height:14px;background:#fff;border-radius:20px;overflow:hidden;box-shadow:inset 0 2px 5px #0002}.bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#30cc87,#5d66e9);transition:width .35s}.flashcard{position:relative;width:min(480px,100%);margin:0 auto 17px;padding:19px;background:#fff;border-radius:34px;box-shadow:var(--shadow)}.word-visual{display:grid;place-items:center;width:min(280px,65vw);height:min(280px,65vw);margin:auto;border-radius:30px;overflow:hidden;background:#f5f7ff}.word-visual img,.question-image img,.vocab-picture img,.choice.image img{width:100%;height:100%;object-fit:contain}.visual-fallback{display:grid;place-items:center;width:100%;height:100%;border-radius:inherit;background:linear-gradient(145deg,#fff,#eef1ff);font-size:clamp(64px,12vw,115px);color:var(--word-color);font-weight:900}.flashcard h2{margin:7px 0 0;font-size:45px;color:#4d48b8;text-transform:lowercase}.flashcard p{margin:3px 0 13px;color:var(--muted);font-size:20px}.audio-btn{min-height:50px;padding:11px 19px;border-radius:18px;background:#fff1b8;color:#725500;font-size:18px;box-shadow:0 5px 0 #e5c65a;transition:.15s}.audio-btn:hover{transform:translateY(-2px)}
.quiz-top{justify-content:space-between}.quiz-top .icon-btn{font-size:21px}.game-type{display:inline-block;margin-top:10px;padding:6px 13px;border-radius:20px;background:#ece9ff;color:#554dcc;font-size:13px;font-weight:bold}.game-screen>h2{font-size:clamp(24px,4vw,36px);margin:12px 0}.audio-btn.target{font-size:25px}.question-image{width:180px;height:180px;margin:5px auto;border-radius:24px;overflow:hidden;background:#fff;box-shadow:var(--soft-shadow)}.feedback{min-height:29px;margin:9px;color:var(--muted);font-size:22px;font-weight:bold}.feedback.good{color:#14985e}.feedback.try{color:#d64b58}.choices{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:auto;width:min(900px,100%)}.choice{position:relative;min-height:105px;padding:10px;border:4px solid transparent;border-radius:25px;background:#fff;box-shadow:var(--soft-shadow);font-size:24px;font-weight:900;color:#4842ab;transition:.16s}.choice.image{aspect-ratio:1}.choice-visual{width:100%;height:100%;overflow:hidden;border-radius:16px}.choice-visual img{width:100%;height:100%;object-fit:contain}.choice:hover{transform:translateY(-3px);border-color:#cbc7ff}.choice.correct{border-color:var(--green);background:#eafff5}.choice.correct:after{content:"✓";position:absolute;right:7px;top:7px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--green);color:#fff}.choice.wrong{border-color:var(--red);animation:shake .35s}.choice:disabled{cursor:default}
.result-card{width:min(610px,100%);margin:auto;text-align:center;padding:25px;background:#fff;border-radius:35px;box-shadow:var(--shadow)}.trophy{font-size:66px;animation:bob 2s ease-in-out infinite}.stars{font-size:50px;color:#ffc928;letter-spacing:6px;text-shadow:0 3px #d79217}.result-score{font-size:30px;color:#554dcc;font-weight:900}.result-details{display:flex;justify-content:center;gap:12px}.result-details span{padding:10px 15px;border-radius:15px;background:#f1f3fb}.stack-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:11px}
.filters{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}.filter{min-height:43px;padding:9px 16px;border-radius:30px;background:#fff;box-shadow:var(--soft-shadow)}.filter.active{background:var(--violet);color:#fff}.vocab-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.vocab-card{position:relative;background:#fff;border-radius:22px;padding:12px;text-align:center;box-shadow:var(--soft-shadow)}.vocab-picture{height:130px;border-radius:17px;overflow:hidden;background:#f4f6ff}.vocab-card h3{margin:9px 0 2px;font-size:21px;color:#4c45b5}.vocab-card p{margin:0;color:var(--muted);font:14px Arial,sans-serif}.vocab-card .audio-btn{position:absolute;right:7px;top:7px;min-height:40px;padding:6px 10px;border-radius:13px}
.summary-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:auto auto 20px;width:min(750px,100%)}.summary{padding:20px;text-align:center;background:#fff;border-radius:23px;box-shadow:var(--soft-shadow)}.summary b{display:block;font-size:35px;color:#544ccc}.summary span{color:var(--muted)}.progress-list{display:grid;gap:10px;width:min(750px,100%);margin:auto}.progress-row{display:grid;grid-template-columns:55px 1fr auto;align-items:center;gap:15px;padding:14px 20px;border-radius:20px;background:#fff;box-shadow:var(--soft-shadow)}.progress-row>span:first-child{display:grid;place-items:center;width:50px;height:50px;border-radius:15px;background:var(--level-color);color:#fff;font-size:22px;font-weight:bold}.progress-row h3{margin:0}.progress-row p{margin:3px 0 0;color:var(--muted)}.progress-row .stars{font-size:25px}
.settings-card{width:min(580px,100%);margin:auto;padding:10px 23px;background:#fff;border-radius:28px;box-shadow:var(--shadow)}.settings-card>div{display:grid;grid-template-columns:50px 1fr auto;align-items:center;gap:14px;min-height:92px;border-bottom:1px solid #e8eaf2}.settings-card>div:last-child{border:0}.settings-card>div>span{font-size:29px}.settings-card label{display:grid}.settings-card label small{margin-top:5px;color:var(--muted)}.toggle{position:relative;width:58px;height:32px;border-radius:30px;background:#c9ccda}.toggle:after{content:"";position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 5px #0003;transition:.2s}.toggle.on{background:var(--green)}.toggle.on:after{left:30px}
#confetti{position:fixed;inset:0;z-index:50;pointer-events:none}.confetti{position:absolute;left:50%;top:45%;font-size:20px;animation:burst .8s ease-out forwards}
@keyframes screen-in{to{opacity:1;transform:none}}@keyframes drift{50%{transform:translateY(-18px) rotate(10deg)}}@keyframes bob{50%{transform:translateY(-7px)}}@keyframes shake{25%{transform:translateX(-8px)}50%{transform:translateX(7px)}75%{transform:translateX(-4px)}}@keyframes burst{to{transform:translate(var(--x),var(--y)) rotate(250deg);opacity:0}}
@media(max-width:900px){.vocab-grid{grid-template-columns:repeat(3,1fr)}.level-path{grid-template-columns:repeat(3,1fr)}.level-path:before{display:none}.choices{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){#app{display:block;padding:82px 14px 20px}.app-header{height:64px;padding:0 13px}.mini-logo{font-size:14px}.screen#home{padding-top:2vh}.logo{flex-direction:column;gap:17px}.logo-star{width:82px;height:82px;border-radius:25px;font-size:54px}.logo h1{text-align:center;font-size:49px}.tagline{margin:22px 0}.home-menu{grid-template-columns:1fr;gap:11px}.menu-btn{min-height:74px;grid-template-columns:52px 1fr;padding:9px 16px;border-radius:21px}.menu-btn>span{font-size:29px}.menu-btn.play>span{width:43px;height:43px}.level-path{grid-template-columns:repeat(2,1fr);gap:25px 12px;padding-top:10px}.level-orb{width:88px;height:88px;border-radius:27px;font-size:32px}.level-node:last-child{grid-column:1/3}.level-stats{grid-template-columns:1fr 1fr}.level-stats .stat:last-child{grid-column:1/3}.level-actions{flex-direction:column;align-items:center}.level-actions .btn{width:min(330px,100%)}.flashcard{padding:13px}.word-visual{width:min(230px,62vw);height:min(230px,62vw)}.flashcard h2{font-size:38px}.choices{gap:9px}.choice{min-height:86px;border-radius:20px;font-size:21px}.choice.image{aspect-ratio:1}.vocab-grid{grid-template-columns:repeat(2,1fr);gap:9px}.vocab-picture{height:120px}.summary-cards{grid-template-columns:1fr 1fr}.summary-cards .summary:last-child{grid-column:1/3}.progress-row{grid-template-columns:45px 1fr;padding:11px}.progress-row>span:first-child{width:43px;height:43px}.progress-row>.stars{grid-column:2}.result-details{flex-direction:column}.stack-actions{flex-direction:column}.stack-actions .btn{width:100%}}
@media(max-height:760px) and (min-width:621px){#app{padding-top:78px}.word-visual{width:220px;height:220px}.flashcard{padding:10px}.flashcard h2{font-size:36px}.question-image{width:135px;height:135px}.choice.image{max-height:200px}.page-title{margin-bottom:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.screen.active{opacity:1;transform:none}}
body.no-motion *,body.no-motion *:before,body.no-motion *:after{animation:none!important;transition:none!important}

/* Version 0.4 course navigation and learning controls */
.world-progress{display:block;margin-top:10px;color:#554dcc}.world-nav,.progress-actions{display:flex;justify-content:center;gap:12px;margin:18px auto}.world-nav button:disabled{opacity:.45;cursor:not-allowed;transform:none}
.world-nav.hidden{display:flex!important;visibility:visible!important;opacity:1!important}
.reset-card{width:min(580px,100%);margin:18px auto;padding:18px 22px;text-align:center;background:#fff8f3;border:2px solid #ffd8c4;border-radius:24px}.reset-card h3{margin:0 0 6px}.reset-card p{margin:0 0 13px;color:var(--muted);font:14px Arial,sans-serif}.btn.danger{min-height:50px;color:#9d2831;background:#ffe1dc}
.loading-overlay{position:fixed;inset:0;z-index:100;display:grid;place-content:center;gap:12px;text-align:center;background:#f3f6ffdf;backdrop-filter:blur(5px);color:#554dcc}.loading-overlay div{font-size:56px;animation:bob 1s ease-in-out infinite}
@media(max-width:620px){.world-nav{flex-direction:column;align-items:center}.world-nav .btn{width:min(330px,100%)}.progress-actions .btn{width:100%}}

/* Version 0.3 audio-first refinements */
.audio-btn{min-width:52px;min-height:52px}.audio-btn.playing{animation:speaker-pulse .7s ease-in-out infinite;background:#ffe071}.audio-btn.needs-tap{outline:4px solid #ffb703;animation:speaker-pulse .9s ease-in-out infinite}
.vocab-card[role="button"]{cursor:pointer}.vocab-card[role="button"]:focus-visible{outline:4px solid #2457d6;outline-offset:3px}
.settings-card>div{min-height:82px}.toggle{height:44px}.toggle:after{top:10px}.volume-setting input{width:170px;min-height:44px;accent-color:var(--violet)}.version-label{text-align:center;color:var(--muted);font-size:13px;margin:18px}.human-test-info{display:grid;gap:4px;width:min(580px,100%);margin:16px auto 0;padding:12px 16px;border:1px solid #d9d5ff;border-radius:16px;background:#f8f7ff;color:var(--muted);font:13px Arial,sans-serif;text-align:center}.human-test-info strong{color:#554dcc}.human-test-info code{font:inherit;color:#3d378f}
@keyframes speaker-pulse{50%{transform:scale(1.07);box-shadow:0 5px 0 #e5c65a,0 0 0 8px #ffd44733}}
@media(max-width:620px){.choice{min-height:96px}.vocab-card{min-height:190px}.settings-card{padding:8px 14px}.settings-card>div{grid-template-columns:42px 1fr auto;gap:8px}.volume-setting input{width:110px}}
@media(max-height:520px) and (orientation:landscape){#app{padding-top:72px}.question-image{width:105px;height:105px}.game-screen>h2{margin:6px 0;font-size:23px}.feedback{margin:4px}.choices{grid-template-columns:repeat(4,1fr)}.choice{min-height:82px}.audio-btn{min-height:46px}.flashcard{display:grid;grid-template-columns:190px 1fr;align-items:center;width:min(700px,100%)}.flashcard .word-visual{grid-row:1/5;width:180px;height:180px}.flashcard h2{font-size:34px}}