:root{--ink:#183153;--blue:#1689df;--blue-dark:#0865ad;--cream:#fff9df;--yellow:#ffd64f;--red:#ef5d5d;--green:#42b96f;--shadow:0 10px 24px rgba(22,62,103,.2)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;font-family:system-ui,-apple-system,"Segoe UI","Noto Sans SC",sans-serif;background:#10243b;color:var(--ink)}
body{display:grid;place-items:center}
button,input{font:inherit}
button,a{touch-action:manipulation}
.phone{position:relative;width:min(100vw,calc(100vh * 9 / 16));height:min(100vh,calc(100vw * 16 / 9));min-height:560px;overflow:hidden;background:linear-gradient(#76d2ff 0 36%,#e8f8ff 36% 100%);box-shadow:0 22px 70px rgba(0,0,0,.45)}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:max(24px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom));overflow:auto}
.hidden{display:none!important}
h1{margin:7px 0;font-size:clamp(30px,8vw,44px);line-height:1.05;color:#0c62a6;text-align:center;text-shadow:0 2px #fff}
.subtitle,.student-line,.support-note{margin:7px 0 16px;text-align:center;font-weight:750;line-height:1.45}
.brand-icon{font-size:72px;filter:drop-shadow(0 8px 6px rgba(23,68,107,.18))}
.brand-icon{margin-top:8vh}
.ready-pet,.result-pet{position:relative;width:138px;height:138px;flex:0 0 auto;filter:drop-shadow(0 8px 6px rgba(23,68,107,.18))}.ready-pet{margin-top:3vh}.result-pet{margin-top:4vh}
.ready-dog-sprite,.result-dog-sprite{position:absolute;inset:0;background:url("./assets/dog-sprites-v2.webp") no-repeat 100% 100%/600% 400%}
.ready-dog-sprite,.result-dog.success .result-dog-sprite{animation:sprite-listen 1.5s linear infinite}.result-dog.tired .result-dog-sprite{background-position:80% 66.667%}
.result-icon{position:absolute;z-index:2;right:4px;top:-7px;font-size:42px;filter:drop-shadow(0 3px 2px rgba(23,68,107,.2))}
.card{width:100%;border:3px solid rgba(255,255,255,.92);border-radius:24px;padding:18px;background:rgba(255,255,255,.9);box-shadow:var(--shadow)}
.login-card{display:grid;gap:11px;margin-top:10px}
label{font-weight:900}
input{width:100%;border:2px solid #91c8ec;border-radius:14px;padding:13px 14px;font-size:20px;text-align:center;text-transform:uppercase;background:white;color:var(--ink);outline:none}
input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(22,137,223,.16)}
.primary,.secondary{width:100%;min-height:48px;border-radius:15px;display:grid;place-items:center;border:0;text-decoration:none;font-weight:950;cursor:pointer}
.primary{color:#fff;background:linear-gradient(#35a8ef,#0870bd);box-shadow:0 5px 0 #07558c}
.primary:active{transform:translateY(3px);box-shadow:0 2px 0 #07558c}
.primary:disabled{opacity:.5;cursor:not-allowed}
.secondary{color:#176aa4;background:#fff;border:2px solid #83bfe5}
.status{min-height:22px;margin:2px 0 0;text-align:center;font-size:13px;font-weight:750}.status.error{color:#b52f38}.status.success{color:#238451}
.rules{margin:12px 0}.rules p{margin:9px 0;font-size:14px;font-weight:800;line-height:1.35}
.support-note{min-height:40px;margin:0 0 10px;font-size:13px}.support-note.warning{color:#aa3b36}
.sound-button{position:absolute;top:max(18px,env(safe-area-inset-top));right:18px;width:44px;height:44px;border:0;border-radius:50%;background:#fff;box-shadow:var(--shadow);font-size:20px}
.hud{position:absolute;z-index:5;top:max(12px,env(safe-area-inset-top));left:12px;right:12px;display:flex;justify-content:space-between;gap:8px;color:#103d66;font-size:13px}
.hud>div{display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.9);box-shadow:0 4px 10px rgba(25,87,132,.16)}
.hud strong{max-width:105px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hud span{font-weight:900}
.leave-button{position:absolute;z-index:6;right:14px;top:60px;border:0;border-radius:999px;padding:6px 10px;background:rgba(19,67,101,.7);color:#fff;font-size:12px;font-weight:900}
.game-screen{padding:0;overflow:hidden;background:linear-gradient(#62c9ff 0 54%,#dff9ff 54%)}
.course{position:absolute;left:0;right:0;top:8%;height:45%;overflow:hidden;background:linear-gradient(#5cc8ff,#c9f1ff 68%,#8fdc66 69%)}
.ground{position:absolute;left:-30%;right:-30%;bottom:0;height:19%;background:linear-gradient(#6fd052,#3b9d42)}
.ground:after{content:"";position:absolute;inset:8px 0 auto;height:8px;background:repeating-linear-gradient(90deg,#fff0 0 17px,#f6e27c 18px 27px,#fff0 28px 42px)}
.cloud{position:absolute;width:72px;height:25px;border-radius:999px;background:rgba(255,255,255,.72)}.cloud:before,.cloud:after{content:"";position:absolute;border-radius:50%;background:inherit}.cloud:before{width:34px;height:34px;left:12px;bottom:5px}.cloud:after{width:27px;height:27px;right:9px;bottom:3px}.cloud-one{top:24%;left:8%}.cloud-two{top:12%;right:10%;transform:scale(.7)}
.pet{position:absolute;z-index:3;left:8%;bottom:10%;width:126px;height:126px;transform-origin:50% 88%;filter:drop-shadow(0 7px 3px rgba(23,72,35,.25));will-change:bottom,transform;backface-visibility:hidden}
.pet-sprite{position:absolute;inset:0;display:block;background-image:url("./assets/dog-sprites-v2.webp");background-repeat:no-repeat;background-size:600% 400%;background-position:0 0;will-change:background-position;backface-visibility:hidden;transform:translateZ(0)}
.pet.has-companion .pet-sprite{inset:-22px;animation:none!important;background-repeat:no-repeat;transform:translateZ(0) scale(var(--companion-scale,1));transform-origin:50% 64%}
.pet:after{content:"";position:absolute;z-index:-1;left:-18px;bottom:2px;width:10px;height:10px;border-radius:50%;background:rgba(255,248,195,.78);box-shadow:-13px 4px 0 -2px rgba(255,248,195,.62),-24px 1px 0 -3px rgba(255,248,195,.45);opacity:.8;transform-origin:right center}
.pet.running:after{animation:dust-puffs .45s ease-out infinite}
.pet.running{animation:run .3s ease-in-out infinite alternate}.pet.running .pet-sprite{animation:sprite-run .66s steps(1,end) infinite}
.pet.jump{animation:jump 1.35s linear forwards}.pet.jump .pet-sprite{animation:sprite-jump 1.35s steps(1,end) forwards}.pet.jump:after{opacity:0}
.pet.bump{animation:bump .72s ease}.pet.bump .pet-sprite{animation:sprite-bump .72s steps(1,end) forwards}.pet.bump:after{opacity:0}.pet.bump+.wall{animation:wall-shake .72s ease}
.pet.listen{animation:listen .72s ease-in-out infinite alternate}.pet.listen .pet-sprite{animation:sprite-listen 1.2s steps(1,end) infinite}.pet.listen:after{opacity:0}
@keyframes run{from{bottom:10%;transform:rotate(-1.5deg) translateY(0)}to{bottom:11.2%;transform:rotate(1.5deg) translateY(-2px)}}
@keyframes jump{0%{bottom:10%;transform:rotate(0)}8%{bottom:28%;transform:rotate(-4deg)}20%{bottom:58%;transform:rotate(-8deg)}38%{bottom:66%;transform:rotate(-6deg)}55%{bottom:58%;transform:rotate(1deg)}72%{bottom:27%;transform:rotate(5deg)}82%{bottom:10%;transform:rotate(0)}92%{bottom:8%;transform:scaleY(.9)}100%{bottom:10%;transform:scaleY(1)}}
@keyframes bump{0%,100%{transform:translateX(0)}45%{transform:translateX(75px) rotate(7deg)}62%{transform:translateX(51px) rotate(-9deg)}}
@keyframes wall-shake{0%,30%,100%{transform:translateX(-50%) rotate(0)}42%{transform:translateX(-46%) rotate(2deg)}55%{transform:translateX(-53%) rotate(-2deg)}68%{transform:translateX(-48%) rotate(1deg)}}
@keyframes listen{from{transform:scale(1)}to{transform:scale(1.04) rotate(-1deg)}}
@keyframes dust-puffs{0%{transform:translateX(7px) scale(.65);opacity:0}28%{opacity:.8}100%{transform:translateX(-9px) scale(1.25);opacity:0}}
@keyframes sprite-run{0%,15.9%{background-position:0 0}16%,31.9%{background-position:20% 0}32%,47.9%{background-position:40% 0}48%,63.9%{background-position:60% 0}64%,79.9%{background-position:80% 0}80%,100%{background-position:100% 0}}
@keyframes sprite-jump{0%,13.9%{background-position:0 33.333%}14%,27.9%{background-position:20% 33.333%}28%,45.9%{background-position:40% 33.333%}46%,63.9%{background-position:60% 33.333%}64%,82.9%{background-position:80% 33.333%}83%,100%{background-position:100% 33.333%}}
@keyframes sprite-bump{0%,15.9%{background-position:0 66.667%}16%,31.9%{background-position:20% 66.667%}32%,47.9%{background-position:40% 66.667%}48%,63.9%{background-position:60% 66.667%}64%,79.9%{background-position:80% 66.667%}80%,100%{background-position:100% 66.667%}}
@keyframes sprite-listen{0%,15.9%{background-position:0 100%}16%,31.9%{background-position:20% 100%}32%,47.9%{background-position:40% 100%}48%,63.9%{background-position:60% 100%}64%,79.9%{background-position:80% 100%}80%,100%{background-position:100% 100%}}
.wall{position:absolute;z-index:2;left:54%;bottom:17%;width:82px;height:64px;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;transform:translateX(-50%);filter:drop-shadow(0 5px 3px rgba(25,80,40,.2))}.wall i{border:2px solid #b65727;border-radius:5px;background:linear-gradient(#ff995e,#e66b34)}.wall i:nth-child(even){background:linear-gradient(#ffd153,#e9a927)}
.course.advance .wall{animation:next-wall 1.35s linear both}.course.advance .ground:after{animation:track-roll .32s linear infinite}.course.advance .cloud-one{animation:cloud-roll 1.35s linear both}.course.advance .cloud-two{animation:cloud-roll-small 1.35s linear both}
@keyframes next-wall{0%,18%{left:54%;opacity:1}48%{left:-24%;opacity:1}49%{left:-25%;opacity:0}50%{left:116%;opacity:0}60%{opacity:1}100%{left:54%;opacity:1}}
@keyframes track-roll{to{transform:translateX(-42px)}}
@keyframes cloud-roll{to{transform:translateX(-145px)}}
@keyframes cloud-roll-small{to{transform:translateX(-100px) scale(.7)}}
.word-panel{position:absolute;z-index:4;top:49%;left:7%;right:7%;height:20%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:3px solid #fff;border-radius:23px;background:rgba(255,255,255,.94);box-shadow:var(--shadow)}
.round-label{margin:0;font-size:12px;font-weight:900;color:#5081a4}.word-panel h2{margin:1px 0;font-size:clamp(40px,12vw,62px);line-height:1;color:#0b6dbc;letter-spacing:.02em}.word-panel>p:last-of-type{margin:3px 0 7px;font-weight:800;color:#557086}
.listen-button{border:0;border-radius:999px;padding:6px 12px;background:#e8f5ff;color:#176aa4;font-size:12px;font-weight:900}
.feedback{position:absolute;z-index:4;left:8%;right:8%;top:70%;min-height:46px;display:grid;place-items:center;text-align:center;font-size:14px;font-weight:850;color:#285a7d}
.feedback.success{color:#168346}.feedback.error{color:#ba3c3c}.feedback.retry{color:#a36c13}
.mic-button{position:absolute;z-index:4;left:14%;right:14%;bottom:max(24px,env(safe-area-inset-bottom));height:74px;border:0;border-radius:999px;color:#fff;background:linear-gradient(#36aaf0,#0873bf);box-shadow:0 7px 0 #07558c,0 13px 24px rgba(10,85,143,.3);font-weight:950;font-size:18px}.mic-button:disabled{opacity:.5;box-shadow:none}.mic-button.listening{background:linear-gradient(#ff7676,#dc3f4b);box-shadow:0 7px 0 #9a2931}.mic-icon{font-size:29px;margin-right:8px}
.demo-controls{position:absolute;z-index:10;left:8px;bottom:5px;display:flex;gap:4px}.demo-controls button{border:1px solid #aac;border-radius:5px;font-size:10px;padding:3px;background:#fff}
.result-card{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}.result-card div{display:flex;flex-direction:column;align-items:center;padding:10px;border-radius:14px;background:#e9f7ff}.result-card strong{font-size:28px;color:#0870bd}.result-card span{font-size:12px;font-weight:800;color:#52718a}
.result-pet.has-companion .result-dog-sprite{inset:-24px;animation:none!important;background-repeat:no-repeat;transform:scale(var(--companion-scale,1));transform-origin:50% 64%}
.reward-summary{min-height:43px;margin:0 0 12px;text-align:center;font-weight:800;font-size:14px;line-height:1.4}.result-screen>.primary,.result-screen>.secondary{margin-top:9px}.button-secondary{background:#fff}
.toast{position:absolute;z-index:20;left:50%;bottom:18px;max-width:82%;padding:9px 14px;border-radius:999px;background:rgba(17,47,72,.92);color:#fff;font-weight:850;font-size:13px;text-align:center;transform:translate(-50%,24px);opacity:0;pointer-events:none;transition:.2s}.toast.show{transform:translate(-50%,0);opacity:1}
@media(max-height:650px){.ready-pet,.result-pet{margin-top:1vh;width:110px;height:110px}.rules{padding:13px}.rules p{margin:6px 0}.brand-icon{margin-top:2vh}.phone{min-height:520px}}
@media(max-width:430px){.phone{width:100vw;height:100dvh;min-height:100dvh;box-shadow:none}}
@media(prefers-reduced-motion:reduce){.pet.running,.pet.jump,.pet.bump,.pet.listen,.pet-sprite,.ready-dog-sprite,.result-dog-sprite,.pet.bump+.wall,.course.advance .wall,.course.advance .ground:after,.course.advance .cloud-one,.course.advance .cloud-two{animation-duration:.01ms!important;animation-iteration-count:1!important}}