*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#5ec8ff;color:#1a1030;
  font-family:ui-rounded,"Nunito","Arial Rounded MT Bold",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;touch-action:none;user-select:none;-webkit-user-select:none}
#app{position:relative;width:100%;height:100%}
#game{display:block;width:100%;height:100%}
#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.3rem;color:#fff;
  text-shadow:2px 2px 0 #1a1030;background:#5ec8ff;z-index:30}
#loading.done{display:none}
#speed{pointer-events:none;position:absolute;inset:0;z-index:3;opacity:0;transition:opacity .15s;
  background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,0) 0deg 5deg,rgba(255,255,255,.55) 5.5deg 6deg,rgba(255,255,255,0) 6.5deg 11deg);
  -webkit-mask:radial-gradient(circle at 50% 50%,transparent 38%,#000 75%);mask:radial-gradient(circle at 50% 50%,transparent 38%,#000 75%)}
#speed.on{opacity:.55}
.screen{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:10;padding:1rem;
  background:radial-gradient(ellipse at 50% 15%,rgba(255,255,255,.35),transparent 60%),rgba(40,30,90,.45)}
.screen.active{display:flex}
.panel{max-width:26rem;width:100%;max-height:96vh;overflow:auto;text-align:center;padding:1.15rem 1.1rem 1.3rem;border-radius:22px;
  background:#fffaf0;border:4px solid #1a1030;box-shadow:8px 8px 0 #1a1030}
.badge{display:inline-block;font-size:.72rem;font-weight:900;letter-spacing:.12em;color:#fff;background:#ff3b5c;border:3px solid #1a1030;
  padding:.18rem .6rem;border-radius:999px;margin-bottom:.45rem;transform:rotate(-2deg)}
h1{font-size:2.3rem;font-weight:900;letter-spacing:.01em;color:#ffc21a;-webkit-text-stroke:2px #1a1030;text-shadow:4px 4px 0 #1a1030;margin:.1rem 0 .25rem;font-style:italic}
h2{font-size:1.45rem;font-weight:900;color:#1a1030;margin:.2rem 0 .4rem}
.tagline{color:#3d4a8a;font-size:.95rem;font-weight:700;margin-bottom:.25rem}
.ver{font-size:.7rem;color:#7a7f99;margin:.2rem 0 .55rem}
.howto{text-align:left;margin:.5rem auto .9rem;padding-left:1.2rem;color:#1a1030;font-size:.86rem;line-height:1.45;max-width:22rem}
.howto li{margin:.25rem 0}
.lang-picker{display:flex;gap:.35rem;justify-content:center;margin-bottom:.6rem}
.lang-btn,.btn,.btn-chip,.tbtn{appearance:none;cursor:pointer;font:inherit}
.lang-btn{padding:.25rem .55rem;border-radius:10px;background:#fff;color:#1a1030;border:3px solid #1a1030;font-weight:800}
.lang-btn.active{background:#5ec8ff}
.btn{display:inline-block;padding:.65rem 1.1rem;border-radius:14px;margin:.28rem .2rem;font-weight:900;letter-spacing:.02em;border:3px solid #1a1030;
  box-shadow:3px 3px 0 #1a1030;transition:transform .06s}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #1a1030}
.btn-play,.btn-primary{background:#ffc21a;color:#1a1030;font-size:1.08rem}
.btn-ghost{background:#fff;color:#1a1030}
.btn-tip{background:#7ee8a6;color:#1a1030;text-decoration:none}
.hint,.studio{font-size:.78rem;color:#5a5f7a;margin-top:.4rem}
.hud{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;flex-wrap:wrap;gap:.35rem;padding:.5rem .55rem;pointer-events:none;
  padding-top:max(.5rem,env(safe-area-inset-top))}
.hud .spacer{flex:1}
.hidden{display:none!important}
.chip{background:#fffaf0;border:3px solid #1a1030;color:#1a1030;padding:.2rem .5rem;border-radius:12px;font-size:.85rem;font-weight:900;box-shadow:2px 2px 0 #1a1030}
.btn-chip{pointer-events:auto;cursor:pointer}
#meter{position:absolute;right:.6rem;top:22%;bottom:22%;width:14px;border:3px solid #1a1030;border-radius:999px;background:#fffaf0;z-index:5;overflow:hidden}
#meter-fill{position:absolute;left:0;right:0;bottom:0;height:0;background:#ffc21a}
#meter-goo{position:absolute;left:0;right:0;bottom:0;height:0;background:#b44cff;opacity:.85}
#meter-me{position:absolute;left:-3px;right:-3px;height:6px;background:#ff3b5c;bottom:0}
#floats{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:hidden}
.float{position:absolute;font-weight:900;color:#ffc21a;-webkit-text-stroke:1.5px #1a1030;font-size:1.2rem;transform:translate(-50%,-50%);animation:fl .9s ease-out forwards;white-space:nowrap}
@keyframes fl{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}15%{opacity:1;transform:translate(-50%,-60%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-180%) scale(1)}}
#banner{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%) rotate(-3deg);z-index:7;display:flex;flex-direction:column;align-items:center;
  background:#ff3b5c;color:#fff;border:4px solid #1a1030;box-shadow:6px 6px 0 #1a1030;padding:.45rem 1.2rem;border-radius:16px;pointer-events:none;animation:bn 2.2s ease-out forwards}
#banner-num{font-size:.85rem;font-weight:900;letter-spacing:.15em}
#banner-name{font-size:1.5rem;font-weight:900;font-style:italic}
@keyframes bn{0%{opacity:0;transform:translate(-50%,-50%) rotate(-3deg) scale(.4)}12%{opacity:1;transform:translate(-50%,-50%) rotate(-3deg) scale(1.08)}20%{transform:translate(-50%,-50%) rotate(-3deg) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-70%) rotate(-3deg)}}
#toast,#coach,#quip{position:absolute;left:50%;transform:translateX(-50%);z-index:7;text-align:center;padding:.45rem .85rem;border-radius:14px;max-width:min(92vw,30rem);pointer-events:none;border:3px solid #1a1030;font-weight:800}
#toast{bottom:24%;background:#ffc21a;color:#1a1030;font-size:1.05rem;box-shadow:3px 3px 0 #1a1030}
#coach{top:4.2rem;background:#fff;color:#1a1030;font-size:.9rem;box-shadow:3px 3px 0 #1a1030}
#quip{bottom:12%;background:#3d4a8a;color:#fff;font-size:.86rem;font-style:italic}
#quip::before{content:"👔 ";font-style:normal}
#pause-overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:20;background:rgba(40,30,90,.55)}
#pause-overlay.show{display:flex}
.pause-panel{text-align:center;padding:1.2rem;border:4px solid #1a1030;border-radius:18px;background:#fffaf0;box-shadow:6px 6px 0 #1a1030;max-width:22rem}
.level-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem;margin:.7rem 0;max-height:52vh;overflow:auto;padding:.2rem}
.lvl{border-radius:12px;border:3px solid #1a1030;background:#5ec8ff;color:#1a1030;font-size:.68rem;font-weight:800;cursor:pointer;padding:.35rem .15rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;box-shadow:2px 2px 0 #1a1030;min-height:4.4rem;line-height:1.1}
.lvl b{font-size:1.15rem}
.lvl.locked{opacity:.4;cursor:not-allowed;background:#ccd}
.lvl.done{background:#7ee8a6}
.lvl .stars{color:#ff3b5c;letter-spacing:.03em;font-size:.8rem}
.result{font-size:1.6rem;margin:.3rem 0;color:#1a1030;font-weight:900}
.result-sub{color:#3d4a8a;margin:.2rem 0;font-size:.88rem;font-weight:700}
.verdict{margin:.5rem 0 .4rem;padding:.45rem .6rem;background:#3d4a8a;color:#fff;border-radius:12px;font-style:italic;font-size:.88rem}
.verdict:empty{display:none}
.stars-big{color:#ffc21a;-webkit-text-stroke:1.5px #1a1030;font-size:2rem;letter-spacing:.15em;margin:.2rem 0}
#touch{position:absolute;left:0;right:0;bottom:0;z-index:8;display:flex;justify-content:space-between;align-items:flex-end;padding:0 .8rem max(1rem,env(safe-area-inset-bottom));pointer-events:none}
.tleft{display:flex;gap:.6rem}
.tbtn{pointer-events:auto;width:4.6rem;height:4.6rem;border-radius:50%;border:4px solid #1a1030;background:rgba(255,250,240,.8);color:#1a1030;font-size:1.7rem;font-weight:900;box-shadow:3px 3px 0 #1a1030;touch-action:none}
.tbtn.on{background:#ffc21a;transform:translate(2px,2px);box-shadow:1px 1px 0 #1a1030}
.tjump{width:5.4rem;height:5.4rem;background:rgba(255,59,92,.85);color:#fff}
@media (max-height:520px){.howto{display:none}h1{font-size:1.8rem}}