:root{--bg:#2B2560;--indigo:#3B2F8F;--purple:#6C5CE7;--cream:#FFF4D6;--yellow:#FFC93C;--coral:#FF7A6B;--mint:#5ED6B0;--ink:#241f52;--white:#fff;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body,#app{margin:0;width:100%;height:100%;height:100dvh;overflow:hidden;background:var(--bg);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#fff;touch-action:none;overscroll-behavior:none}
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button{font:inherit;min-width:44px;min-height:44px;border:0;border-radius:16px;cursor:pointer;font-weight:800;color:var(--ink);background:var(--cream);box-shadow:0 5px 0 rgba(20,15,60,.28);touch-action:none}
button:active{transform:translateY(2px);box-shadow:0 3px 0 rgba(20,15,60,.28)}
button:focus-visible{outline:4px solid var(--yellow);outline-offset:3px}
#game{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.hidden{display:none!important}
.screen{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:max(12px,var(--safe-t)) max(12px,var(--safe-r)) max(12px,var(--safe-b)) max(12px,var(--safe-l));background:radial-gradient(circle at 50% 25%,#5046a4 0,#2B2560 56%);overflow:auto;touch-action:pan-y}
.card{width:min(680px,100%);max-height:100%;overflow:auto;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.16);border-radius:28px;padding:clamp(16px,4vw,28px);box-shadow:0 18px 55px rgba(0,0,0,.25);backdrop-filter:blur(8px)}
h1,h2,p{margin:0 0 12px}h1{font-size:clamp(30px,8vw,58px);line-height:.95;color:var(--yellow);text-shadow:0 4px 0 #3b2f8f}h2{font-size:clamp(22px,5vw,34px)}
.tag{font-weight:800;color:var(--cream);font-size:clamp(15px,3.5vw,19px)}
.teach{padding:10px 13px;border-radius:16px;background:rgba(94,214,176,.18);border:1px solid var(--mint);font-weight:700}
.hero{display:flex;gap:18px;align-items:center}.owlLogo{position:relative;flex:0 0 108px;height:94px;border-radius:50% 50% 44% 44%;background:linear-gradient(145deg,var(--purple),var(--indigo));border:5px solid #241f52}.owlLogo:before,.owlLogo:after{content:"";position:absolute;top:17px;width:42px;height:42px;border-radius:50%;background:var(--cream);border:4px solid #241f52}.owlLogo:before{left:9px}.owlLogo:after{right:9px}.owlLogo i{position:absolute;z-index:2;left:45px;top:47px;width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:15px solid var(--yellow)}.owlLogo b,.owlLogo em{position:absolute;z-index:3;top:31px;width:12px;height:12px;background:#241f52;border-radius:50%}.owlLogo b{left:26px}.owlLogo em{right:26px}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.primary{background:var(--yellow);padding:12px 22px}.secondary{background:var(--mint);padding:12px 18px}.ghost{background:#fff;color:var(--ink);padding:12px 18px}
.controlsBox{margin-top:14px;padding:12px;border-radius:16px;background:rgba(0,0,0,.14);line-height:1.45}
.levels{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-top:14px}.levelBtn{aspect-ratio:1;min-width:0;padding:5px;background:#fff}.levelBtn.locked{opacity:.35}.levelBtn .stars{display:block;font-size:11px;color:#c79200}.levelBtn.done{background:var(--mint)}
#hud{position:absolute;z-index:10;left:max(8px,var(--safe-l));right:max(8px,var(--safe-r));top:max(8px,var(--safe-t));height:48px;display:flex;gap:7px;align-items:center;pointer-events:none}
#hud>*{pointer-events:auto;background:rgba(43,37,96,.82);border:2px solid rgba(255,255,255,.18);color:#fff;border-radius:14px;padding:8px 10px;font-weight:800;min-height:44px;display:flex;align-items:center;justify-content:center}#levelLabel{flex:1}
#touchControls{position:absolute;z-index:12;left:max(10px,var(--safe-l));right:max(10px,var(--safe-r));bottom:max(10px,var(--safe-b));display:flex;align-items:flex-end;justify-content:space-between;pointer-events:none}
.dpad{display:flex;gap:10px}.actionPad{display:flex;flex-direction:column;align-items:center;gap:8px}
.dpad button,#jumpBtn,#useBtn{pointer-events:auto;border:2px solid rgba(255,255,255,.6)}
.dpad button{width:68px;height:68px;border-radius:22px;background:rgba(255,244,214,.9);font-size:25px}
#jumpBtn{width:82px;height:82px;border-radius:24px;background:rgba(255,201,60,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;font-size:25px}
#useBtn{width:68px;height:52px;border-radius:18px;background:rgba(94,214,176,.95);display:flex;align-items:center;justify-content:center;gap:4px;font-size:15px}
#jumpBtn small,#useBtn small{font-size:10px;margin-top:4px}#useBtn span{font-size:14px}
.hint{color:var(--yellow);font-weight:800}.mini{font-size:13px;opacity:.9}.result{font-size:clamp(42px,12vw,70px);text-align:center}.starsBig{font-size:36px;color:var(--yellow);letter-spacing:4px}
@media(max-width:480px){.hero{align-items:flex-start}.owlLogo{flex-basis:80px;height:72px;border-width:4px}.owlLogo:before,.owlLogo:after{width:32px;height:32px;top:12px}.owlLogo:before{left:7px}.owlLogo:after{right:7px}.owlLogo b,.owlLogo em{top:23px;width:9px;height:9px}.owlLogo b{left:20px}.owlLogo em{right:20px}.owlLogo i{left:32px;top:37px}.levels{gap:6px}.levelBtn{border-radius:12px}.dpad button{width:60px;height:60px}.dpad{gap:7px}#jumpBtn{width:74px;height:74px}#useBtn{width:64px;height:48px}}
@media(max-height:430px) and (min-width:540px){.screen{padding:7px}.startCard{padding:10px 14px;border-radius:20px;overflow:hidden}.startCard .hero{gap:10px;align-items:center}.startCard .owlLogo{flex-basis:58px;height:52px;border-width:3px}.startCard .owlLogo:before,.startCard .owlLogo:after{width:22px;height:22px;top:8px;border-width:2px}.startCard .owlLogo:before{left:5px}.startCard .owlLogo:after{right:5px}.startCard .owlLogo b,.startCard .owlLogo em{top:15px;width:6px;height:6px}.startCard .owlLogo b{left:14px}.startCard .owlLogo em{right:14px}.startCard .owlLogo i{left:22px;top:27px;border-left-width:6px;border-right-width:6px;border-top-width:9px}.startCard h1{font-size:30px;margin-bottom:3px}.startCard .tag{font-size:13px;margin:0}.startCard .teach{font-size:13px;padding:6px 9px;margin:6px 0}.startCard .controlsBox{font-size:12px;line-height:1.25;margin-top:6px;padding:7px 9px}.startCard .mini{font-size:11px}.startCard .row{margin-top:7px;gap:7px;flex-wrap:nowrap}.startCard .row button{min-height:42px;padding:7px 14px;border-radius:13px}.card:not(.startCard){padding:12px 16px;border-radius:20px}#hud{top:max(5px,var(--safe-t));height:42px}#hud>*{min-height:40px;padding:5px 8px;font-size:13px}.dpad button{width:54px;height:54px;border-radius:18px}#jumpBtn{width:64px;height:64px;border-radius:20px}#useBtn{width:58px;height:46px}.actionPad{gap:5px}}
@media(pointer:fine){#touchControls{display:none!important}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

@media(max-width:360px) and (min-height:500px){.startCard{padding:12px 14px;border-radius:20px;overflow:hidden}.startCard .hero{gap:10px;align-items:center}.startCard .owlLogo{flex-basis:64px;height:58px;border-width:3px}.startCard .owlLogo:before,.startCard .owlLogo:after{width:26px;height:26px;top:9px;border-width:2px}.startCard .owlLogo:before{left:5px}.startCard .owlLogo:after{right:5px}.startCard .owlLogo b,.startCard .owlLogo em{top:18px;width:7px;height:7px}.startCard .owlLogo b{left:16px}.startCard .owlLogo em{right:16px}.startCard .owlLogo i{left:25px;top:31px;border-left-width:6px;border-right-width:6px;border-top-width:10px}.startCard h1{font-size:34px;margin-bottom:4px}.startCard .tag{font-size:13px;margin-bottom:4px}.startCard .teach{font-size:13px;padding:7px 9px;margin-bottom:7px}.startCard .controlsBox{font-size:12px;line-height:1.3;margin-top:7px;padding:8px}.startCard .mini{font-size:11px}.startCard .row{margin-top:8px;gap:6px}.startCard .row button{min-height:44px;padding:8px 11px;border-radius:13px;font-size:13px}}