@font-face{font-family:"PS2P";src:url(../assets/PressStart2P.ttf) format("truetype");font-display:swap}
*{box-sizing:border-box}
html,body{margin:0;touch-action:manipulation;height:100%;background:#000;color:#eee;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow:hidden;
  -webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
#app{position:fixed;inset:0;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
#stage{flex:1;min-height:0;position:relative;overflow:hidden;background:#000}
#view{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);image-rendering:pixelated;image-rendering:crisp-edges;display:block;touch-action:none}
kbd{display:inline-block;min-width:18px;padding:1px 5px;margin:0 1px;border-radius:4px;background:#f5f5f5;color:#111;font:800 11px ui-monospace,Menlo,Consolas,monospace;text-align:center;line-height:15px}
/* touch controls */
#touch{display:none}
body.is-touch.playing:not(.kbd) #touch{display:block}
#touch{position:relative;flex:1 1 auto;min-height:210px;background:#0b0b0d;border-top:2px solid #ff6600;touch-action:none;user-select:none;-webkit-user-select:none;padding-bottom:env(safe-area-inset-bottom)}
#stick{display:none;position:fixed;z-index:6;width:112px;height:112px;border-radius:50%;background:rgba(255,255,255,.10);border:2px solid rgba(255,102,0,.85);pointer-events:none}
#stick.on{display:block}
#knob{position:absolute;left:50%;top:50%;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;background:rgba(255,102,0,.8);pointer-events:none}
#touch .hint{position:absolute;left:0;right:0;top:44%;text-align:center;font:8px "PS2P",monospace;color:#444;pointer-events:none}
.rotate{display:none;font-size:.8rem;color:#ffb27a}
@media (orientation:portrait){body.is-touch:not(.kbd) .rotate{display:block}}
body.playing,body.playing *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.playing #app{touch-action:none}
#touch .tb{position:absolute;right:10px;bottom:calc(16px + env(safe-area-inset-bottom));display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;gap:8px;pointer-events:none}
.sets{text-align:left;font-size:.85rem;color:#ddd;margin:8px 0;display:grid;gap:8px}
.sets input[type=range]{width:150px;vertical-align:middle;accent-color:#ff6600}
.sets input[type=checkbox]{accent-color:#ff6600;width:18px;height:18px;vertical-align:middle}
.tbtn{pointer-events:auto;appearance:none;border:2px solid #ff6600;background:rgba(20,20,20,.85);color:#fff;font:12px "PS2P",monospace;border-radius:14px;touch-action:none}
.tbtn.on{background:#ff6600;color:#000}
.tbtn.fire{grid-column:2;grid-row:1/3;width:104px;height:140px;border-radius:48px;font-size:14px;background:rgba(160,30,0,.75)}
.tbtn.use{grid-column:1;grid-row:2;width:78px;height:61px}
.tbtn.wpn{grid-column:1;grid-row:1;width:78px;height:61px}
.tbtn.pz{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:54px;height:36px;font-size:10px}
/* landscape phones: overlay the controls on the view */
@media (orientation:landscape) and (max-height:560px){
  #touch{position:fixed;inset:0;height:auto;background:transparent;border:0;pointer-events:none}
  .tbtn{pointer-events:auto}
  #touch .hint{display:none}
  .tbtn.fire{height:120px;width:84px}
  .tbtn.use,.tbtn.wpn{height:50px;width:70px}
  .tbtn.fire{height:120px;width:96px}
  .tbtn.pz{top:8px}
}
/* laptop key-labeled bar */
#keysbar{display:none;flex:0 0 auto;gap:6px;flex-wrap:wrap;align-items:center;justify-content:center;padding:6px 8px;background:#0b0b0d;border-top:2px solid #ff6600}
body.kbd.playing #keysbar{display:flex}
#keysbar .kl{font:600 12px system-ui;color:#bbb}
#keysbar .kb{appearance:none;border:1px solid #ff6600;background:#151515;color:#fff;font:700 12px system-ui;border-radius:8px;padding:5px 8px;cursor:pointer}
#keysbar .kb.on{background:#ff6600;color:#000}
/* overlays */
.ov{position:fixed;inset:0;z-index:10;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;background:radial-gradient(ellipse at top,#2a1408 0%,#000 70%);padding:calc(env(safe-area-inset-top) + 14px) 12px calc(env(safe-area-inset-bottom) + 20px);-webkit-overflow-scrolling:touch}
.ov[hidden]{display:none}
#pauseOverlay,#levelOverlay{background:rgba(0,0,0,.78);align-items:center}
.card{width:100%;max-width:440px;margin:auto;text-align:center;background:#111;border:2px solid #ff6600;border-radius:14px;padding:16px 16px 14px;box-shadow:0 0 30px rgba(255,102,0,.25)}
.card.small{max-width:380px}
.card h1{font:20px/1.3 "PS2P",monospace;color:#ff6600;margin:6px 0 8px;text-shadow:3px 3px 0 #000}
.card h1 span{color:#fff}
.card h2{font:12px "PS2P",monospace;color:#ffb27a;margin:14px 0 6px}
.logo{width:88px;height:auto;display:block;margin:0 auto}
#overOverlay:not(.won) .winonly{display:none}
.tag{color:#ddd;font-size:.95rem;line-height:1.4;margin:4px 0 8px}
.dim{color:#9a9a9a;font-size:.85rem}
.btn{display:inline-block;appearance:none;border:2px solid #ff6600;background:#1a1a1a;color:#fff;font:13px "PS2P",monospace;padding:12px 16px;border-radius:10px;margin:6px 4px;cursor:pointer;text-decoration:none}
.btn.primary{background:#ff6600;color:#000;width:100%;margin:8px 0}
.btn.primary kbd{display:none}
body.kbd .btn.primary kbd{display:inline-block;background:#000;color:#fff;margin-left:8px}
.btn.muted{opacity:.6}
.row{display:flex;justify-content:center;flex-wrap:wrap}
.how{text-align:left;font-size:.85rem;color:#ccc;margin:6px 0;background:#0b0b0b;border-radius:8px;padding:6px 10px}
.how summary{cursor:pointer;color:#ffb27a;font-weight:700}
body.kbd .howTouch{display:none} body:not(.kbd) .howKeys{display:none}
.lb{list-style:none;counter-reset:r;margin:0;padding:0;text-align:left}
.lb li{counter-increment:r;display:flex;gap:8px;padding:5px 8px;border-bottom:1px solid #222;font:11px "PS2P",monospace}
.lb li::before{content:counter(r) ".";color:#ff6600;min-width:28px}
.lb li .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb li.me{background:#2a1408}
.stats{margin:8px auto;font:11px/1.9 "PS2P",monospace;border-collapse:collapse}
.stats td{padding:0 10px;text-align:left}.stats td+td{text-align:right;color:#ffcf6a}
.score{font:14px "PS2P",monospace;margin:10px 0 4px}.score b{color:#ffcf6a}
.fine{font-size:.75rem;margin:10px 0 0}
.ca{appearance:none;background:#0b0b0b;border:1px dashed #ff6600;color:#ffb27a;font:600 11px ui-monospace,Menlo,monospace;padding:6px 8px;border-radius:8px;word-break:break-all;cursor:pointer}
#toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);background:#ff6600;color:#000;padding:8px 14px;border-radius:8px;font-weight:700;opacity:0;transition:opacity .2s;z-index:20;pointer-events:none}
#toast.show{opacity:1}

.tbtn.fire{position:relative;overflow:visible;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:8px 0}
.tbtn.fire .fl,.tbtn.fire .fl2{pointer-events:none}
.tbtn.fire .stripe{position:absolute;left:-16px;right:-8px;top:33%;height:34%;display:flex;align-items:center;justify-content:center;background:linear-gradient(#26c6f0,#0e8db3);color:#03141c;font:9px "PS2P",monospace;letter-spacing:-.5px;border:2px solid #e8faff;border-radius:8px;box-shadow:0 0 0 2px rgba(0,0,0,.5);white-space:nowrap;z-index:2;touch-action:none}
.tbtn.fire .stripe.on{background:linear-gradient(#7fe3ff,#26b2dd)}
.chk{display:flex;gap:6px;align-items:center}

#stick .sa{position:absolute;color:rgba(255,255,255,.45);font-size:12px;line-height:1;pointer-events:none}
#stick .u{top:6px;left:50%;transform:translateX(-50%)}#stick .d{bottom:6px;left:50%;transform:translateX(-50%)}
#stick .l{left:7px;top:50%;transform:translateY(-50%)}#stick .r{right:7px;top:50%;transform:translateY(-50%)}
#stick .slab{position:absolute;left:0;right:0;top:-16px;text-align:center;font:7px "PS2P",monospace;color:rgba(255,255,255,.5);pointer-events:none}
body.fixstick.playing.is-touch:not(.kbd) #stick{display:block;left:calc(22px + env(safe-area-inset-left));top:auto;bottom:calc(30px + env(safe-area-inset-bottom));width:130px;height:130px;background:rgba(255,255,255,.07);border-color:rgba(255,102,0,.6)}
body.fixstick #stick.on{background:rgba(255,255,255,.14);border-color:rgba(255,102,0,.95)}
body.fixstick #knob{width:56px;height:56px;margin:-28px 0 0 -28px}
@media (orientation:landscape) and (max-height:560px){body.fixstick.playing.is-touch:not(.kbd) #stick{bottom:calc(22vh + 8px);width:120px;height:120px;left:calc(18px + env(safe-area-inset-left))}}
body.fixstick #touch .hint{display:none}

.tbtn,#stick{scale:var(--bs,1)}
.tbtn{opacity:var(--bo,.85)}
body.fixstick.playing.is-touch:not(.kbd) #stick{opacity:var(--bo,.85)}
.tbtn.slap{position:absolute;right:4px;top:-50px;width:70px;height:40px;font-size:10px;border-color:#e8faff;background:rgba(30,60,90,.85)}
#layBar{position:fixed;left:50%;top:calc(8px + env(safe-area-inset-top));transform:translateX(-50%);z-index:20;display:flex;gap:8px;align-items:center;background:rgba(0,0,0,.85);border:2px solid #ff6600;border-radius:10px;padding:8px 10px;font:8px "PS2P",monospace;color:#fff}
#layBar[hidden]{display:none}
body.editlay #touch,body.editlay #stick{display:block!important}
body.editlay [data-lay]{outline:2px dashed #ffd23a;outline-offset:3px;pointer-events:auto!important;cursor:move}
body.editlay [data-lay].dragging{outline-color:#39ff6a}
body.editlay #stick{position:fixed;left:22px;bottom:30px;width:130px;height:130px}
.layrow{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.sets .dim{opacity:.5}
.ov .card{max-height:94vh;overflow-y:auto}