:root{--bg: #2a1f18;--bg-warm: #3d2a1f;--sand: #e8c9a0;--cream: #f6e6d0;--amber: #d9772c;--amber-deep: #b85a18;--rose: #c45c5c;--green: #5a8f6a;--ink: #1a120e;--soft: rgba(246, 230, 208, .72);--hit: #f0d5a8;--shadow: rgba(0, 0, 0, .35);font-family:Segoe UI,Trebuchet MS,Avenir Next,system-ui,sans-serif}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--cream);overflow:hidden;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}#app{position:relative;height:100%;max-width:720px;margin:0 auto;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 0%,#4a3224 0%,transparent 55%),linear-gradient(180deg,#3a261c,#2a1f18 55%,#1c1410)}.baba-bar{display:flex;align-items:center;gap:.55rem;padding:.45rem .75rem;font-size:.78rem;letter-spacing:.04em;color:var(--soft);opacity:.85;z-index:5}.baba-label{text-transform:uppercase;font-size:.68rem}.mastery{font-variant-numeric:tabular-nums;font-weight:700;color:var(--sand)}.reset-btn{margin-left:auto;border:0;background:transparent;color:var(--soft);font:inherit;font-size:.68rem;text-decoration:underline;cursor:pointer;padding:.25rem}.stage{flex:1;display:flex;flex-direction:column;justify-content:center;padding:.5rem 1rem 1rem;min-height:0}.scene{position:relative;flex:1;min-height:220px;border-radius:18px;overflow:hidden;box-shadow:0 18px 40px var(--shadow);background:#4d3426}.caption{margin:.85rem 0 0;text-align:center;font-size:clamp(1.05rem,3.6vw,1.35rem);line-height:1.35;color:var(--cream);min-height:2.7em}.continue{appearance:none;border:0;margin:0 1rem 1.25rem;padding:1.05rem 1.2rem;border-radius:999px;background:linear-gradient(180deg,var(--amber) 0%,var(--amber-deep) 100%);color:#fff8ef;font:inherit;font-size:clamp(1.15rem,4vw,1.4rem);font-weight:700;letter-spacing:.02em;box-shadow:0 10px 24px #b85a1873;cursor:pointer}.continue:active{transform:scale(.98)}.prompt{padding:0 .85rem 1.1rem}.prompt.hidden,.continue.hidden,.end-card.hidden{display:none}.prompt-hint{margin:0 0 .65rem;text-align:center;color:var(--sand);font-size:1rem}.word-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.word-btn{appearance:none;border:3px solid transparent;min-height:22vw;min-height:clamp(5.5rem,22vw,7.5rem);border-radius:22px;background:linear-gradient(180deg,#f7e7cf,#e7c8a0);color:var(--ink);font:inherit;font-size:clamp(1.55rem,7vw,2.35rem);font-weight:800;letter-spacing:.08em;box-shadow:0 12px #b8905c,0 18px 28px var(--shadow);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,opacity .2s ease}.word-btn:active:not(:disabled){transform:translateY(6px);box-shadow:0 6px #b8905c,0 10px 18px var(--shadow)}.word-btn.dim{opacity:.28;pointer-events:none}.word-btn.pulse{border-color:var(--green);animation:pulse .9s ease-in-out infinite}.word-btn.locked{pointer-events:none}@keyframes pulse{0%,to{transform:scale(1);box-shadow:0 12px #b8905c,0 0 #5a8f6a73}50%{transform:scale(1.03);box-shadow:0 12px #b8905c,0 0 0 14px #5a8f6a00}}.end-card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1.5rem;background:#1a120ee0;text-align:center;z-index:8}.end-title{margin:0;font-size:clamp(2rem,8vw,2.8rem);font-weight:800;color:var(--sand)}.end-body{margin:0 0 1rem;color:var(--soft);font-size:1.15rem}.scene-art{position:absolute;inset:0;width:100%;height:100%}.sky{position:absolute;inset:0 0 38%;background:linear-gradient(180deg,#7eb7d8,#f0c58a 70%,#e8a56a)}.sky.dusk{background:linear-gradient(180deg,#3d4f7a,#c4785a 55%,#e0a060)}.sky.warm-room{background:linear-gradient(180deg,#6b4a36,#8a5a3c 55%,#a86b45)}.ground{position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(180deg,#6e8f4e,#4f6b38 40%,#3d5230)}.ground.road{background:linear-gradient(180deg,#8a7358,#6d5a45 45%,#554536)}.ground.floor{background:linear-gradient(180deg,#c4a27a,#a8845c,#8f6d48)}.sun{position:absolute;top:10%;right:12%;width:14%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff2c4,#f0b040 60%,#d9772c);box-shadow:0 0 40px #f0b0408c}.path{position:absolute;left:50%;bottom:0;width:28%;height:42%;transform:translate(-50%) perspective(120px) rotateX(18deg);background:linear-gradient(180deg,#c4a882,#9a7d5c);border-radius:40% 40% 0 0/12% 12% 0 0}.house{position:absolute;left:58%;bottom:34%;width:28%;height:34%;background:#c97858;border-radius:6px 6px 0 0;box-shadow:inset -10px 0 #0000001f}.house:before{content:"";position:absolute;left:-8%;right:-8%;top:-28%;height:42%;background:#7a3f32;clip-path:polygon(50% 0,100% 100%,0 100%)}.door{position:absolute;left:36%;bottom:0;width:28%;height:52%;background:#5a3428;border-radius:4px 4px 0 0}.door.open{width:10%;left:28%;background:#3d241c;box-shadow:12px 0 #6b4030}.name-plate{position:absolute;left:50%;top:18%;transform:translate(-50%);background:#f6e6d0;color:#1a120e;font-weight:800;letter-spacing:.1em;font-size:clamp(.7rem,2.8vw,1rem);padding:.2rem .45rem;border-radius:4px;box-shadow:0 2px #0003}.tree{position:absolute;bottom:36%;width:10%;height:22%;background:#3f6b3f;border-radius:50% 50% 40% 40%;box-shadow:inset -8px -4px #00000026}.tree.left{left:10%}.tree.right{right:8%;width:12%;height:26%}.tree:after{content:"";position:absolute;left:40%;bottom:-18%;width:18%;height:28%;background:#5a3a28}.person{position:absolute;bottom:10%;width:18%;height:46%;left:18%;transition:left 1.1s ease,bottom 1.1s ease,opacity .4s ease}.person .body{position:absolute;left:22%;bottom:18%;width:56%;height:48%;background:linear-gradient(180deg,#c45c5c,#9e3f4a);border-radius:40% 40% 18% 18%}.person .head{position:absolute;left:24%;top:4%;width:52%;aspect-ratio:1;border-radius:50%;background:linear-gradient(160deg,#c99262,#a86f42);box-shadow:inset -6px -4px #0000001f}.person .hair{position:absolute;left:14%;top:0;width:72%;height:42%;background:#2a1810;border-radius:50% 50% 40% 40%/70% 70% 30% 30%}.person .skirt{position:absolute;left:12%;bottom:0;width:76%;height:28%;background:#5a3d6e;border-radius:8% 8% 30% 30%}.person.center{left:41%}.person.at-door{left:62%;bottom:28%;width:14%;height:36%}.person.wave .body{animation:wave-body .8s ease-in-out 2}@keyframes wave-body{0%,to{transform:rotate(0)}50%{transform:rotate(-8deg)}}.market-stall{position:absolute;right:8%;bottom:34%;width:32%;height:28%;background:#b85a18;border-radius:4px}.market-stall:before{content:"";position:absolute;left:-6%;right:-6%;top:-22%;height:34%;background:repeating-linear-gradient(90deg,#d9772c 0 18%,#f0d5a8 18% 36%);border-radius:4px 4px 0 0}.card{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) scale(.92);width:42%;max-width:220px;aspect-ratio:1.4;background:#f6e6d0;color:#1a120e;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:900;letter-spacing:.14em;font-size:clamp(1.4rem,6vw,2.2rem);box-shadow:0 16px 32px #00000059;opacity:0;transition:opacity .5s ease,transform .5s ease}.card.show{opacity:1;transform:translate(-50%,-50%) scale(1)}.title-mark{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;background:radial-gradient(circle at 50% 40%,rgba(240,176,64,.25),transparent 55%),linear-gradient(180deg,#4a3224,#2a1f18)}.title-mark h1{margin:0;font-size:clamp(2rem,9vw,3rem);letter-spacing:.04em;color:var(--sand)}.title-mark p{margin:0;color:var(--soft);font-size:clamp(1rem,3.5vw,1.2rem)}.fade-in{animation:fade-in .55s ease both}@keyframes fade-in{0%{opacity:0}to{opacity:1}}