*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:manipulation}
html,body{margin:0;padding:0;width:100%;height:100%;background:#0e2a3d;overflow:hidden;font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif}
#stage{position:absolute;left:50%;top:50%;width:1280px;height:720px;transform-origin:center center;font-size:16px;overflow:hidden;background:#8fd3f8;border-radius:.6em;box-shadow:0 0 40px rgba(0,0,0,.5)}
#canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.hidden{display:none !important}

.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(10,40,70,.55);z-index:10}
.panel{background:linear-gradient(#5fb4e6,#3b8fc7);border:.25em solid #1d5f8f;border-radius:1.2em;padding:1.6em 2.4em;min-width:21em;text-align:center;box-shadow:0 .6em 0 #174c73,0 1em 2em rgba(0,0,0,.35);max-height:94%;overflow:auto}
.panel.wide{min-width:34em}
.logo{margin:0 0 .1em;font-size:3.6em;color:#ffd84a;text-shadow:0 .06em 0 #b8731a,0 .12em 0 #7a4710,0 .2em .4em rgba(0,0,0,.35);letter-spacing:.02em}
.logo span{color:#fff}
.tag{color:#eaf7ff;margin:.2em 0 1.2em;font-size:1.05em}
h2{margin:0 0 .6em;color:#fff;font-size:2.2em;text-shadow:0 .08em 0 #1d5f8f}
h3{margin:1em 0 .4em;color:#fff;font-size:1.2em}
p{color:#fff;font-size:1.1em;margin:.4em 0 1em}

.btn{display:block;width:100%;margin:.55em auto;padding:.7em 1.2em;font:inherit;font-size:1.25em;font-weight:bold;color:#fff;background:linear-gradient(#ffb23f,#f08a14);border:.12em solid #b8650a;border-radius:.8em;cursor:pointer;box-shadow:0 .25em 0 #a85a08;text-shadow:0 .06em 0 rgba(0,0,0,.3)}
.btn:hover{filter:brightness(1.1)}
.btn:active{transform:translateY(.15em);box-shadow:0 .1em 0 #a85a08}
.btn.big{font-size:1.6em;background:linear-gradient(#7fe05a,#3fb02a);border-color:#2a7d1a;box-shadow:0 .25em 0 #26701a}
.btn.small{display:inline-block;width:auto;min-width:7em;font-size:1em;padding:.4em .9em;margin:0}
.btn.danger{background:linear-gradient(#f06a6a,#c93636);border-color:#8e1f1f;box-shadow:0 .25em 0 #7d1a1a}

.row{display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:1.15em;font-weight:bold;margin:.55em 0;gap:1em}
.help{list-style:none;padding:0;margin:0 0 1em;color:#fff;font-size:1.1em;text-align:left;line-height:1.7}

#level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.6em;margin-bottom:.8em}
.lvl{padding:.6em 0;border-radius:.7em;border:.12em solid #1d5f8f;background:#e9f6ff;color:#174c73;font:inherit;font-weight:bold;font-size:1.3em;cursor:pointer}
.lvl small{display:block;font-size:.6em;color:#e0a000;letter-spacing:.1em;min-height:1.2em}
.lvl.locked{background:#9fb6c6;color:#6b8191;cursor:not-allowed}

#hero-picker{display:flex;gap:.8em;justify-content:center;margin-bottom:.6em}
.hero{width:6.4em;padding:.4em;border-radius:.8em;border:.15em solid transparent;background:rgba(255,255,255,.25);cursor:pointer;color:#fff;font:inherit;font-weight:bold}
.hero canvas{width:4.4em;height:5.4em;display:block;margin:0 auto}
.hero.sel{border-color:#ffd84a;background:rgba(255,216,74,.35)}

.bigstars{font-size:3em;color:#ffd84a;text-shadow:0 .06em 0 #b8731a;letter-spacing:.1em;margin-bottom:.1em}
.bigstars .off{color:#8fb6cf;text-shadow:none}

#touch{position:absolute;inset:auto 0 0 0;height:30%;z-index:8;pointer-events:none}
.tgroup{position:absolute;bottom:1.4em;display:flex;gap:.8em;pointer-events:auto;align-items:flex-end}
.tgroup.left{left:1.4em}.tgroup.right{right:1.4em}
.tbtn{width:5em;height:5em;border-radius:50%;border:.15em solid rgba(255,255,255,.8);background:rgba(20,70,110,.55);color:#fff;font:inherit;font-size:1.3em;font-weight:bold;opacity:.85}
.tbtn.jump{width:6.4em;height:6.4em;background:rgba(240,138,20,.7);font-size:1.2em}
.tbtn.active{background:rgba(255,216,74,.85);color:#333}
#btn-pause{position:absolute;right:19.6em;top:1.1em;z-index:9;width:3em;height:3em;border-radius:.6em;border:.12em solid #1d5f8f;background:rgba(255,255,255,.75);color:#1d5f8f;font:inherit;font-weight:bold;cursor:pointer;display:none}
#btn-pause:not(.hidden){display:block}

/* ---- polish additions ---- */
.logo{animation:logoBob 2.4s ease-in-out infinite}
@keyframes logoBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.12em)}}
.panel{animation:panelIn .28s ease-out}
@keyframes panelIn{from{transform:translateY(1.2em) scale(.96);opacity:0}to{transform:none;opacity:1}}
.btn.big{animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.12)}}
#level-pager{display:flex;align-items:center;justify-content:center;gap:1em;margin:-.2em 0 .8em;color:#fff;font-weight:bold;font-size:1.1em}
#level-page{min-width:11em}
.lvl{border-width:.18em;border-style:solid}
.lvl small{font-size:.55em}
.bigstars span{display:inline-block;animation:starPop .5s cubic-bezier(.3,1.6,.5,1) both}
.bigstars span:nth-child(2){animation-delay:.2s}
.bigstars span:nth-child(3){animation-delay:.4s}
@keyframes starPop{from{transform:scale(0) rotate(-90deg)}to{transform:scale(1) rotate(0)}}
p.best{color:#ffe36b;font-weight:bold;margin-top:-.4em;min-height:1.2em}

/* ---- v2 additions ---- */
.logo{animation:bob 3s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.12em)}}
.stats{margin:.8em 0 0;font-size:.95em;color:#eaf7ff;opacity:.95}
.extra{color:#ffd84a;font-weight:bold;margin:-.4em 0 .8em;min-height:1.2em;text-shadow:0 .06em 0 #7a4710}
.worldbar{display:flex;align-items:center;justify-content:space-between;gap:1em;margin-bottom:.6em}
.worldtitle{flex:1}
.worldtitle h2{margin:0;font-size:1.9em}
.worldtitle small{color:#ffe9a0;font-weight:bold;font-size:1em;letter-spacing:.08em}
.btn.small[disabled]{opacity:.4;cursor:default;filter:none}
.lvl.locked small{font-size:.5em;letter-spacing:.05em}
.lvl:not(.locked):hover{filter:brightness(1.08);transform:translateY(-.1em)}
.lvl.current{outline:.15em solid #ffd84a}
.bigstars span{display:inline-block;animation:pop .55s cubic-bezier(.2,1.6,.4,1) both}
.bigstars span:nth-child(2){animation-delay:.2s}
.bigstars span:nth-child(3){animation-delay:.4s}
@keyframes pop{0%{transform:scale(0) rotate(-60deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
.panel{animation:rise .25s ease-out both}
@keyframes rise{0%{transform:translateY(1.2em) scale(.96);opacity:0}100%{transform:none;opacity:1}}

/* ---- v2.1 polish ---- */
.btn:focus-visible,.lvl:focus-visible,.hero:focus-visible,.tbtn:focus-visible{outline:.18em solid #fff;outline-offset:.12em}
#rotate{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:50;background:rgba(18,54,90,.92);color:#fff;font:600 14px/1.3 "Trebuchet MS",Arial,sans-serif;padding:10px 16px;border-radius:20px;pointer-events:none;text-align:center;max-width:90vw}
#rotate.hidden{display:none !important}
@media (prefers-reduced-motion: reduce){.logo,.panel,.bigstars span{animation:none !important}}