*{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:#0a0720;overflow:hidden;font-family:"Trebuchet MS","Segoe UI",Roboto,Arial,sans-serif}
#stage{position:absolute;left:50%;top:50%;width:1280px;height:720px;transform-origin:center center;transform:translate(-50%,-50%);font-size:16px;overflow:hidden;background:#140f3a;border-radius:.6em;box-shadow:0 0 50px rgba(0,0,0,.6)}
#stage.portrait{font-size:23px}
#canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block;touch-action:none}
.hidden{display:none !important}

.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(8,5,30,.55);z-index:10}
#screen-menu{background:rgba(8,5,30,.18)}
.panel{position:relative;background:linear-gradient(160deg,rgba(60,44,140,.97),rgba(25,17,76,.97));border:.14em solid rgba(190,170,255,.45);border-radius:1.3em;padding:1.4em 2.2em;min-width:min(21em,94%);max-width:94%;text-align:center;color:#fff;box-shadow:0 .7em 2em rgba(0,0,0,.55),inset 0 .1em 0 rgba(255,255,255,.18);max-height:95%;overflow:auto;animation:rise .28s ease-out both}
.panel.wide{min-width:min(33em,94%)}
.panel.menu{min-width:min(22em,94%)}
@keyframes rise{from{transform:translateY(1.2em) scale(.96);opacity:0}to{transform:none;opacity:1}}
.logo{margin:0 0 .1em;font-size:3.3em;line-height:1;color:#fff;letter-spacing:.01em;text-shadow:0 .05em 0 #6b3fd6,0 .1em 0 #3a1c8a,0 .2em .4em rgba(0,0,0,.4);animation:bob 3s ease-in-out infinite}
.logo span{display:block;color:#ffd84a;text-shadow:0 .05em 0 #c47a08,0 .1em 0 #7a4700,0 .2em .4em rgba(0,0,0,.4)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.1em)}}
.tag{color:#d9ccff;margin:.5em 0 1.1em;font-size:1em}
h2{margin:0 0 .5em;color:#fff;font-size:2em;text-shadow:0 .06em 0 rgba(0,0,0,.35)}
p{color:#e6defc;font-size:1.05em;margin:.4em 0 .9em}
.kicker{color:#ffd84a;font-weight:bold;letter-spacing:.14em;text-transform:uppercase;margin:0 0 .1em;font-size:.95em}

.btn{display:block;width:100%;margin:.5em auto;padding:.65em 1.1em;font:inherit;font-size:1.15em;font-weight:bold;color:#fff;background:linear-gradient(#8c63ff,#5a35d8);border:.1em solid #3a1f99;border-radius:.8em;cursor:pointer;box-shadow:0 .22em 0 #2c1678;text-shadow:0 .06em 0 rgba(0,0,0,.35)}
.btn:hover{filter:brightness(1.12)}
.btn:active{transform:translateY(.16em);box-shadow:0 .06em 0 #2c1678}
.btn.big{font-size:1.5em;color:#3a2200;text-shadow:0 .05em 0 rgba(255,255,255,.35);background:linear-gradient(#ffe36b,#ffb81f);border-color:#b87400;box-shadow:0 .24em 0 #a86500;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.1)}}
.btn.small{display:inline-block;width:auto;min-width:6em;font-size:1em;padding:.4em .9em;margin:0}
.btn.danger{background:linear-gradient(#f06a6a,#c93636);border-color:#8e1f1f;box-shadow:0 .22em 0 #7d1a1a}
.btn[disabled]{opacity:.45;cursor:default;filter:grayscale(.4)}
.two{display:flex;gap:.6em}
.two .btn{width:50%}
.btn:focus-visible,.lvl:focus-visible{outline:.18em solid #fff;outline-offset:.12em}

.row{display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:1.1em;font-weight:bold;margin:.6em 0;gap:1em}
.help{list-style:none;padding:0;margin:0 0 1em;color:#efe9ff;font-size:.98em;text-align:left;line-height:1.5}
.help li{margin:.45em 0;padding-left:1.1em;position:relative}
.help li:before{content:"\25C6";position:absolute;left:0;color:#ffd84a;font-size:.7em;top:.35em}
.stats{margin:.6em 0 0;font-size:.9em;color:#cfc3ff}

.worldbar{display:flex;align-items:center;justify-content:space-between;gap:1em;margin-bottom:.2em}
.worldtitle{flex:1}
.worldtitle h2{margin:0;font-size:1.7em}
.worldtitle small{color:#ffe9a0;font-weight:bold;letter-spacing:.06em}
.worldstars{margin:.2em 0 .7em;color:#ffd84a;font-weight:bold}
#level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.55em;margin-bottom:.8em}
.lvl{padding:.45em 0;border-radius:.75em;border:.14em solid #3a1f99;background:linear-gradient(#f4efff,#cfc2ff);color:#2c1678;font:inherit;font-weight:bold;font-size:1.25em;cursor:pointer;box-shadow:0 .16em 0 #2c1678}
.lvl small{display:block;font-size:.55em;color:#d98e00;letter-spacing:.08em;min-height:1.3em;text-shadow:0 .04em 0 rgba(0,0,0,.15)}
.lvl small .off{color:#a99fcf}
.lvl.locked{background:#6a6296;color:#a79fd0;cursor:not-allowed;box-shadow:none}
.lvl:not(.locked):hover{filter:brightness(1.07);transform:translateY(-.08em)}
.lvl.current{outline:.15em solid #ffd84a}

.goalbox{display:flex;flex-direction:column;gap:.45em;margin:.6em 0 .8em;align-items:stretch}
.goal{display:flex;align-items:center;gap:.7em;background:rgba(255,255,255,.1);border-radius:.8em;padding:.35em .8em;text-align:left;font-weight:bold}
.goal canvas{width:2.1em;height:2.1em;flex:none}
.goal span{flex:1}
.goal em{font-style:normal;color:#ffd84a}
.tip{min-height:1.2em;color:#cfe7ff;font-style:italic;margin:.2em 0 .4em;font-size:.95em}
.meta{margin:.2em 0 .8em;color:#d9ccff;font-size:.95em}
.coinline{margin:0 0 .6em}
.coinline b{color:#ffd84a;font-size:1.2em}
.shoprow{display:flex;align-items:center;gap:.8em;background:rgba(255,255,255,.1);border-radius:.8em;padding:.5em .8em;margin:.45em 0;text-align:left}
.shoprow canvas{width:2.6em;height:2.6em;flex:none}
.shoprow div{flex:1;font-weight:bold}
.shoprow small{display:block;font-weight:normal;color:#cfc3ff}
.bigstars{font-size:3.2em;color:#ffd84a;text-shadow:0 .06em 0 #b8731a;letter-spacing:.08em;line-height:1.1}
.bigstars .off{color:#6a5fa0;text-shadow:none}
.bigstars span{display:inline-block;animation:pop .55s cubic-bezier(.2,1.6,.4,1) both}
.bigstars span:nth-child(2){animation-delay:.25s}
.bigstars span:nth-child(3){animation-delay:.5s}
@keyframes pop{0%{transform:scale(0) rotate(-60deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
.score{font-size:1.5em;font-weight:bold;color:#fff;margin:.2em 0}
.extra{color:#ffd84a;font-weight:bold;min-height:1.2em;margin:.1em 0 .8em}

#toast{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);z-index:30;background:rgba(20,12,60,.94);color:#fff;border:.1em solid rgba(255,255,255,.35);padding:.55em 1.2em;border-radius:2em;font-weight:bold;pointer-events:none;max-width:90%;text-align:center}

@media (prefers-reduced-motion: reduce){.logo,.panel,.btn.big,.bigstars span{animation:none !important}}

/* ---- v1.1 visual polish ---- */
.panel{box-shadow:0 1.2em 3em rgba(0,0,0,.55),0 0 2.2em rgba(140,99,255,.35),inset 0 .12em 0 rgba(255,255,255,.22),inset 0 -.8em 1.6em rgba(10,5,50,.35);backdrop-filter:blur(.25em);-webkit-backdrop-filter:blur(.25em)}
.panel:before{content:"";position:absolute;left:8%;right:8%;top:.18em;height:.14em;border-radius:1em;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);pointer-events:none}
.btn{position:relative;overflow:hidden;transition:transform .12s,filter .15s,box-shadow .12s;box-shadow:0 .24em 0 #2c1678,0 .5em .9em rgba(0,0,0,.3),inset 0 .1em 0 rgba(255,255,255,.35)}
.btn:after{content:"";position:absolute;left:0;top:0;width:100%;height:48%;background:linear-gradient(rgba(255,255,255,.28),rgba(255,255,255,0));pointer-events:none;border-radius:.7em .7em 0 0}
.btn:hover:not([disabled]){transform:translateY(-.06em)}
.btn.big{box-shadow:0 .24em 0 #a86500,0 .6em 1.2em rgba(255,170,0,.35),inset 0 .1em 0 rgba(255,255,255,.6)}
.btn.big:before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg);animation:shine 3.2s ease-in-out infinite;pointer-events:none}
@keyframes shine{0%,55%{left:-60%}100%{left:130%}}
.logo{filter:drop-shadow(0 0 .35em rgba(160,120,255,.55))}
.lvl{transition:transform .12s,filter .15s;background:linear-gradient(#ffffff,#d6c9ff 70%,#bfaeff);box-shadow:0 .16em 0 #2c1678,0 .3em .6em rgba(0,0,0,.25)}
.lvl.current{box-shadow:0 .16em 0 #2c1678,0 0 1em rgba(255,216,74,.8)}
.goal,.shoprow{border:.07em solid rgba(255,255,255,.12);box-shadow:inset 0 .08em 0 rgba(255,255,255,.12)}
.bigstars{filter:drop-shadow(0 0 .3em rgba(255,200,60,.7))}
@media (prefers-reduced-motion: reduce){.btn.big:before{animation:none !important}}