:root{
  --btn-size: clamp(42px, 9vmin, 64px);
  --stick-size: clamp(110px, 24vmin, 160px);
  --handle-size: calc(var(--stick-size) * 0.46);
  --gap: clamp(10px, 2.8vmin, 18px);
  --panel-scale: clamp(0.80, 1.0vmin, 1.0);
  --safe-l: max(10px, env(safe-area-inset-left));
  --safe-r: max(10px, env(safe-area-inset-right));
  --safe-t: env(safe-area-inset-top);
  --safe-b: env(safe-area-inset-bottom);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0f0f12;color:#e9eaed;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;touch-action:manipulation}
#ui{position:fixed;left:0;right:0;top:0;display:flex;justify-content:center;pointer-events:none;z-index:5;padding-top:calc(var(--safe-t) + 6px)}
.panel{margin:6px;padding:8px 10px;background:rgba(20,20,28,.75);backdrop-filter:blur(6px);border:1px solid #2a2d37;border-radius:10px;pointer-events:auto;transform:scale(var(--panel-scale));transform-origin:top center;transition:opacity .25s ease}
.panel h1{font-size:15px;margin:0 0 4px 0}
.panel p{margin:2px 0 0 0;font-size:13px;opacity:.9}

#game{position:fixed;left:0;top:0;width:100vw;height:100svh;display:block}

.touch{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;padding-left:var(--safe-l);padding-right:var(--safe-r);padding-bottom:calc(var(--safe-b) + 10px);gap:var(--gap);pointer-events:none;z-index:4;transition:opacity .25s ease}
.touch.dim{opacity:.35}
.touch.hidden{opacity:0;pointer-events:none}
#stick{position:relative;width:var(--stick-size);height:var(--stick-size);border-radius:50%;border:1px solid #2b2f3a;background:rgba(30,32,40,.55);pointer-events:auto;touch-action:none}
#stick-handle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:var(--handle-size);height:var(--handle-size);border-radius:50%;background:#d5d7de;border:2px solid #121318}
.buttons{display:flex;gap:var(--gap);pointer-events:auto}
.buttons button{width:var(--btn-size);height:var(--btn-size);border-radius:50%;border:1px solid #2b2f3a;background:#e1e3ea;color:#111;font-weight:700;font-size:clamp(14px, 3.2vmin, 20px);touch-action:manipulation}
.buttons button:active{transform:scale(.96)}

@media (max-height: 540px){
  :root{ --stick-size: clamp(90px, 22vmin, 130px); --btn-size: clamp(38px, 8vmin, 56px); }
  .buttons{flex-direction:column}
}
@media (pointer: fine){ .touch{opacity:.1} }