:root{
  --bg:#0f1724;
  --panel:#0b1220;
  --accent:#22c1c3;
  --muted:#9aa8b2;
  --danger:#ff6b6b;
  --glass: rgba(255,255,255,0.04);
  --ui-radius:10px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, "Helvetica Neue", Arial; background:linear-gradient(180deg,var(--bg),#071021); color:#e6eef3}
.app{max-width:1100px;margin:24px auto;padding:16px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.topbar h1{margin:0;font-size:1.6rem;letter-spacing:0.5px}
.hud{display:flex;gap:10px;align-items:center}
.hud > div{background:var(--glass);padding:8px 12px;border-radius:8px;font-weight:600;color:var(--muted)}
button{background:transparent;border:1px solid rgba(255,255,255,0.06);color:inherit;padding:8px 10px;border-radius:8px;cursor:pointer}
button:hover{border-color:rgba(255,255,255,0.12)}
.game-area{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
canvas#game{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));border-radius:12px;box-shadow:0 8px 30px rgba(2,6,23,0.6);display:block;max-width:100%}
.panel{margin-top:12px;background:var(--panel);padding:12px;border-radius:12px;color:var(--muted)}
.touch-controls{display:none;flex-direction:row;gap:8px;margin-top:8px}
.touch-controls button{min-width:48px;font-size:18px;background:rgba(0,0,0,0.25);border-radius:8px}

/* dialog */
dialog#settings{border-radius:12px;padding:16px;background:#071826;color:inherit;border:none;max-width:420px}
dialog form{display:flex;flex-direction:column;gap:10px}
label{display:flex;justify-content:space-between;gap:8px;align-items:center}
input[type=range]{flex:1;margin-left:12px}
#settings menu{display:flex;justify-content:flex-end}

/* --- D-Pad touch controller styles (mobile) --- */
.controls.dpad {
  position: fixed;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: 200px;
  height: 200px;
  z-index: 9999;
  display: none;           /* visible on smaller screens via media query */
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
}

/* container */
.dpad-ring {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(3,10,18,0.66), rgba(2,6,20,0.45));
  box-shadow: 0 10px 30px rgba(2,6,23,0.6), inset 0 2px 0 rgba(255,255,255,0.02);
  display: block;
}

/* buttons */
.dpad-btn {
  position: absolute;
  width: 72px;
  height: 72px;
  min-width: 72px;
  min-height: 72px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.18));
  color: #e8f8f7;               /* icons use currentColor */
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px rgba(0,0,0,0.6);
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  transition: transform 0.06s ease, background 0.06s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* make SVG fill follow color reliably */
.dpad-btn .icon { display:block; width:28px; height:28px; }

/* pressed state */
.dpad-btn:active, .dpad-btn.pressed {
  transform: scale(0.92);
  background: linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.28));
}

/* positions */
.dpad-up    { top: 14px; left: 50%; transform: translateX(-50%); }
.dpad-down  { bottom: 14px; left: 50%; transform: translateX(-50%); }
.dpad-left  { left: 14px; top: 50%; transform: translateY(-50%); }
.dpad-right { right: 14px; top: 50%; transform: translateY(-50%); }

/* decorative center */
.dpad-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.03), rgba(0,0,0,0.25));
  box-shadow: inset 0 2px 6px rgba(255,255,255,0.02), 0 4px 16px rgba(1,6,12,0.55);
  pointer-events: none;
}

/* show D-pad on phones and adjust sizes */
@media (max-width: 960px) {
  .controls.dpad {
    display: block;
    width: 170px;
    height: 170px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .dpad-btn {
    width: 64px;
    height: 64px;
    font-size: 22px;
    border-radius: 12px;
  }
  .dpad-center { width: 56px; height: 56px; }
  /* make canvas scale nicely on narrow screens */
  canvas#game{width:92vw;height:92vw;max-width:640px;max-height:640px}
}

/* Hide the legacy linear touch-controls if present */
.controls.touch-controls { display: none !important; }

/* responsive adjustments */
@media (max-width:800px){
  .app{padding:12px}
  .game-area{flex-direction:column;align-items:center}
}