*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:#1a1620;color:#efe6dd;
  font-family:"Segoe UI",system-ui,sans-serif;user-select:none;-webkit-user-select:none;touch-action:none}
#app{position:relative;width:100vw;height:100vh}
.screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.screen.active{display:flex;animation:fade .3s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.logo{font-weight:900;font-size:clamp(56px,15vw,140px);letter-spacing:.12em;
  background:linear-gradient(120deg,#ff7a3c,#ffd23c);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px rgba(255,140,60,.4))}
.logo2{font-weight:900;font-size:clamp(24px,5vw,36px);letter-spacing:.14em;color:#ffd23c}
.tag{color:#a08c84;letter-spacing:.2em;text-transform:uppercase;font-size:13px}
.row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.btn{cursor:pointer;border:1px solid #ff8a3c;background:rgba(255,138,60,.1);color:#efe6dd;border-radius:10px;
  padding:12px 24px;font-size:14px;font-weight:700;letter-spacing:.08em;transition:.12s}
.btn:hover{background:rgba(255,138,60,.25);transform:translateY(-2px)}
.btn.sm{padding:8px 14px;font-size:12px}
.opts{display:flex;flex-direction:column;gap:14px;margin:6px 0 10px}
.opts label{display:flex;align-items:center;gap:12px;color:#efe6dd;font-size:14px;font-weight:700;letter-spacing:.04em}
.opts input[type=range]{width:220px;height:6px;-webkit-appearance:none;appearance:none;background:#3a2f33;border-radius:6px;outline:none;cursor:pointer}
.opts input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#ff8a3c;box-shadow:0 0 8px rgba(255,138,60,.6);cursor:pointer}
.opts input[type=range]::-moz-range-thumb{width:18px;height:18px;border:none;border-radius:50%;background:#ff8a3c;cursor:pointer}
.opts span{min-width:34px;text-align:right;color:#ffd23c;font-variant-numeric:tabular-nums}
.hint{color:#c3b4ab;max-width:560px;text-align:center;line-height:1.8;font-size:14px}
.hint b{color:#ffd23c}
.foot{color:#7a6c64;font-size:13px;letter-spacing:.1em}

#pager{display:flex;gap:8px;align-items:center;font-size:13px;color:#a08c84;margin-bottom:4px}
#pager input{width:66px;background:#241a1e;border:1px solid #3a2f33;color:#efe6dd;border-radius:8px;padding:7px 8px;font-size:13px}
#pgInfo{min-width:72px;text-align:center}
#levelGrid{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;max-width:720px;max-height:62vh;overflow-y:auto;justify-content:center;padding:4px}
.lvl{width:80px;border:1px solid #3a2f33;background:rgba(60,44,48,.5);border-radius:8px;padding:4px;cursor:pointer;transition:.1s}
.lvl:hover{transform:translateY(-2px);border-color:#ff8a3c;box-shadow:0 0 12px rgba(255,138,60,.3)}
.lvl .thumb{width:100%;display:block;border-radius:4px;image-rendering:pixelated;background:#efe6dd}
.lvl .lbl{display:flex;justify-content:space-between;align-items:center;font-size:11px;margin-top:2px;padding:0 2px}
.lvl .lbl .n{font-weight:800}
.lvl.locked{opacity:.4;cursor:not-allowed}

#skins{gap:8px;margin-top:6px}
.skin{width:30px;height:30px;border-radius:50%;border:2px solid #4a3a40;cursor:pointer;font-size:13px;line-height:1;
  color:#fff;display:flex;align-items:center;justify-content:center;transition:.12s;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.skin:hover{transform:scale(1.12)}
.skin.on{border-color:#ffd23c;box-shadow:0 0 10px rgba(255,210,60,.6)}
.skin.locked{opacity:.55;cursor:not-allowed;filter:grayscale(.5)}
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
#logo{cursor:pointer}
.gpfocus{outline:3px solid #ffd23c !important;outline-offset:2px;box-shadow:0 0 14px rgba(255,210,60,.7) !important;border-radius:10px}
.lvl.gpfocus{transform:translateY(-2px)}

#game{justify-content:flex-start;padding-top:48px;gap:8px}
#hud{position:absolute;top:8px;left:12px;right:12px;z-index:5}
#bar{position:relative;height:16px;background:#2a2228;border-radius:10px;overflow:hidden;border:1px solid #3a2f33}
#barFill{position:absolute;inset:0;width:0;background:linear-gradient(90deg,#ffd23c,#ff7a3c);transition:width .1s linear}
#bar.over #barFill{background:#ff3b3b;animation:barpulse .4s infinite alternate}
@keyframes barpulse{from{opacity:1}to{opacity:.45}}
#bar span{position:absolute;right:8px;top:0;font-size:11px;line-height:16px;font-weight:700;color:#1a1620;mix-blend-mode:difference}
#info{margin-top:6px;font-size:13px;color:#c3b4ab;letter-spacing:.04em}
#info b{color:#ffd23c}
canvas{image-rendering:auto;border-radius:10px;box-shadow:0 0 40px rgba(0,0,0,.5);background:#efe6dd;margin-top:18px}

.ctrlrow{display:flex;gap:10px;margin-top:6px}
#touch{position:absolute;inset:0;z-index:6;display:none;pointer-events:none}
body.touch #touch{display:block}
#touch .pad{position:absolute;left:14px;bottom:24px;display:flex;gap:10px;pointer-events:auto}
#touch .jbtn{position:absolute;right:18px;bottom:24px;pointer-events:auto}
#touch button{width:64px;height:64px;border-radius:16px;border:1px solid #ff8a3c;background:rgba(40,30,34,.7);color:#efe6dd;font-size:24px}
#touch button:active{background:rgba(255,138,60,.4)}

#winOv{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:rgba(20,16,22,.85);z-index:8}
#winOv.show{display:flex;animation:fade .3s}
#winOv h2{font-size:42px;color:#ffd23c;letter-spacing:.1em}
#winStat{font-size:17px;color:#c3b4ab}
#pauseOv{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:rgba(20,16,22,.82);z-index:9;backdrop-filter:blur(2px)}
#pauseOv.show{display:flex;animation:fade .2s}
#pauseOv h2{font-size:40px;color:#ffd23c;letter-spacing:.18em}