*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
html,body{margin:0;height:100%;background:#000;color:#ddd;font-family:"Courier New",monospace;overflow:hidden;overscroll-behavior:none;touch-action:manipulation}
body{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
#wrap{position:relative;width:min(100vw,calc(100dvh*16/9));aspect-ratio:16/9;max-height:100dvh}
canvas{width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges;background:#000;touch-action:none}
#help{position:fixed;left:0;right:0;bottom:2px;margin:0;font-size:11px;color:#778;text-align:center;pointer-events:none}
/* touch controls: Gauntlet-style flat round buttons in an arc, floating stick */
#touch{display:none;position:fixed;inset:0;z-index:10;pointer-events:none;touch-action:none;--u:clamp(42px,13dvh,58px);
  --r:max(14px,env(safe-area-inset-right));--bt:max(12px,env(safe-area-inset-bottom));--l:max(14px,env(safe-area-inset-left));--tp:max(10px,env(safe-area-inset-top))}
#zone{position:absolute;left:0;top:0;bottom:0;width:50%;pointer-events:auto}
#stick{position:absolute;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;border:2px solid rgba(255,230,170,.35);background:rgba(0,0,0,.18);display:none;pointer-events:none}
#knob{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(255,220,140,.45);border:2px solid rgba(255,240,200,.7)}
#btns{position:absolute;right:var(--r);bottom:var(--bt);width:calc(var(--u)*3.05);height:calc(var(--u)*3.05);pointer-events:none;transition:opacity .2s}
.b{position:absolute;pointer-events:auto;border-radius:50%;border:2px solid rgba(255,255,255,.55);color:#fff;font:bold calc(var(--u)*.2) "Trebuchet MS",sans-serif;letter-spacing:.3px;text-shadow:0 1px 2px #000;padding:0;display:flex;align-items:center;justify-content:center;touch-action:none}
.b.on{filter:brightness(1.6);transform:scale(.93)}
#btns .b{width:var(--u);height:var(--u)}
.at{width:calc(var(--u)*1.4)!important;height:calc(var(--u)*1.4)!important;right:calc(var(--u)*.1);bottom:calc(var(--u)*.1);background:rgba(200,50,30,.55);font-size:calc(var(--u)*.24)!important}
.jp{right:calc(var(--u)*2.023);bottom:calc(var(--u)*.604);background:rgba(70,90,230,.55)}
.hv{right:calc(var(--u)*1.425);bottom:calc(var(--u)*1.641);background:rgba(230,150,20,.6)}
.sp{right:calc(var(--u)*.3);bottom:calc(var(--u)*2.05);background:rgba(150,60,200,.55)}
.small{width:38px;height:38px;top:var(--tp);font-size:15px;background:rgba(0,0,0,.3);border-color:rgba(255,255,255,.4)}
.pause{right:var(--r)}
.mute{right:var(--r);top:calc(var(--tp) + 48px)}
body:not(.playing) #btns{opacity:0;pointer-events:none}
body:not(.playing) #btns .b{pointer-events:none}
@media (pointer:coarse){#touch{display:block}#help{display:none}}
body.touch #touch{display:block}body.touch #help{display:none}
body.cutscene .b.small{display:none}
/* menus (title / pause) are drawn on the canvas; tapping them goes to the canvas, so lift the game pads out of the way */
body.menu #zone{pointer-events:none}
body.menu #btns{opacity:0}body.menu #btns .b{pointer-events:none}
body.menu:not(.paused) .small.pause{display:none}
/* leaderboard name-entry overlay */
#lbPrompt{position:fixed;left:0;right:0;top:max(6px,env(safe-area-inset-top));z-index:30;display:flex;justify-content:center;pointer-events:auto;font-family:"Courier New",monospace}
#lbPrompt[hidden]{display:none}
#lbPrompt *{touch-action:manipulation;user-select:text;-webkit-user-select:text}
.lbbox{width:min(440px,94vw);padding:8px 10px 7px;border:2px solid #ff9ad8;border-radius:3px;background:linear-gradient(#2c2a78,#1a1850 50%,#0c0a2a);box-shadow:0 0 0 2px #05040f,0 6px 18px rgba(0,0,0,.6);text-align:center;color:#fff}
.lbt{font:bold 15px "Trebuchet MS",sans-serif;color:#ffe03a;letter-spacing:1px;text-shadow:0 2px 0 #000}
.lbs{font-size:12px;color:#8af;margin:2px 0 5px}
.lbrow{display:flex;gap:6px}
#lbPrompt input{flex:1;min-width:0;font:bold 16px "Courier New",monospace;text-transform:uppercase;letter-spacing:2px;padding:6px 8px;color:#fff;background:#05040f;border:2px solid #5a3a9a;border-radius:3px;outline:none;text-align:center}
#lbPrompt input:focus{border-color:#ffe03a}
#lbPrompt button{font:bold 13px "Trebuchet MS",sans-serif;color:#fff;padding:6px 10px;border-radius:3px;border:2px solid #ff9ad8;background:#5a3a9a;cursor:pointer;white-space:nowrap}
#lbPrompt .lbgo{background:#c8321e;border-color:#ffd0a0}
#lbPrompt button:disabled{opacity:.5}
.lbm{min-height:14px;margin-top:5px;font-size:11px;color:#c8d0e0}.lbm.bad{color:#ff8a8a}.lbm.ok{color:#9af0b0}
#lbPrompt .lbw{margin-top:5px}
#lbPrompt .lbwal{font-size:12px;letter-spacing:0;text-transform:none;padding:5px 8px}
.lbn{margin-top:4px;font-size:9px;line-height:1.25;color:#9a9ac8}

/* privacy link: title / menu only, stays clear of the canvas */
#privacy{display:none;position:fixed;left:10px;bottom:4px;z-index:5;font:11px "Courier New",monospace;color:#667;text-decoration:none;pointer-events:auto;touch-action:manipulation;user-select:auto;-webkit-user-select:auto}
#privacy:hover{color:#9af0b0}
body.menu:not(.paused) #privacy{display:block}