:root {
  --color-sky: #8fd3f4;
  --color-hud-bg: rgba(20, 28, 48, 0.78);
  --color-hud-text: #f4f6fb;
  --color-hud-muted: #b9c3d9;
  --color-accent: #ffd34d;
  --color-debug: #ff8a65;
  --color-key-bg: rgba(255, 255, 255, 0.14);
  --color-key-border: rgba(255, 255, 255, 0.35);
  --radius-md: 10px;
  --radius-sm: 4px;
  --space-sm: 6px;
  --space-md: 12px;
  --space-lg: 20px;
  --font-main: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --color-btn-bg: rgba(255, 255, 255, 0.2);
  --color-btn-border: rgba(255, 255, 255, 0.6);
  --color-btn-text: #ffffff;
  --color-btn-pressed-bg: rgba(255, 211, 77, 0.55);
  --color-btn-pressed-border: var(--color-accent);
  --touch-btn: 64px;
  --touch-btn-jump: 96px;
  --touch-btn-small: 48px;
  --touch-gap: 14px;
  --touch-margin: 18px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--color-sky);
  font-family: var(--font-main);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

canvas {
  display: block;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
}

.hud {
  position: fixed;
  top: var(--space-md);
  left: var(--space-md);
  z-index: 1;
  max-width: 290px;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--color-hud-bg);
  color: var(--color-hud-text);
  font-size: 13px;
  line-height: 1.5;
  pointer-events: none;
}

.hud__title {
  margin: 0 0 var(--space-sm);
  font-size: 16px;
}

.hud__view {
  margin: 0;
  color: var(--color-accent);
  font-weight: 600;
}

.hud__debug {
  margin: var(--space-sm) 0 0;
  color: var(--color-debug);
  font-weight: 600;
}

.hud__keys {
  margin: var(--space-sm) 0 0;
  padding: 0;
  list-style: none;
  color: var(--color-hud-muted);
}

kbd {
  display: inline-block;
  min-width: 1.6em;
  margin-right: 2px;
  padding: 0 4px;
  border: 1px solid var(--color-key-border);
  border-radius: var(--radius-sm);
  background: var(--color-key-bg);
  color: var(--color-hud-text);
  font-family: inherit;
  font-size: 12px;
  text-align: center;
}

.message {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  padding: var(--space-lg) calc(var(--space-lg) * 2);
  border-radius: var(--radius-md);
  background: var(--color-hud-bg);
  color: var(--color-hud-text);
  text-align: center;
  pointer-events: none;
}

.message__title {
  margin: 0 0 var(--space-sm);
  color: var(--color-accent);
  font-size: 28px;
  font-weight: 700;
}

.message__hint {
  margin: 0;
  font-size: 15px;
}

.message__hint--touch,
.touch-controls,
.rotate-hint {
  display: none;
}

.message__icon {
  color: var(--color-accent);
  font-weight: 700;
}

/* Controlli touch: attivi solo con body.touch (pointer: coarse o primo tocco) */

body.touch .hud {
  top: calc(var(--space-sm) + var(--safe-top));
  left: calc(var(--space-sm) + var(--safe-left));
  padding: var(--space-sm) var(--space-md);
  font-size: 12px;
}

body.touch .hud__title,
body.touch .hud__keys,
body.touch .hud__debug,
body.touch .message__hint--keys {
  display: none;
}

body.touch .message__hint--touch {
  display: block;
}

body.touch .touch-controls {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.touch-controls__pad {
  position: absolute;
  left: calc(var(--touch-margin) + var(--safe-left));
  bottom: calc(var(--touch-margin) + var(--safe-bottom));
  display: flex;
  gap: var(--touch-gap);
}

.touch-controls__actions {
  position: absolute;
  right: calc(var(--touch-margin) + var(--safe-right));
  bottom: calc(var(--touch-margin) + var(--safe-bottom));
  display: grid;
  grid-template-columns: repeat(2, var(--touch-btn));
  gap: var(--touch-gap);
  justify-items: center;
}

.tbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-btn);
  height: var(--touch-btn);
  border: 3px solid var(--color-btn-border);
  border-radius: 50%;
  background: var(--color-btn-bg);
  color: var(--color-btn-text);
  font: 900 15px var(--font-main);
  letter-spacing: 1px;
  pointer-events: auto;
  touch-action: none;
}

.tbtn svg {
  width: 55%;
  height: 55%;
  fill: currentColor;
}

.tbtn__stroke path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}

.tbtn__stroke .tbtn__head {
  fill: currentColor;
  stroke: none;
}

.tbtn.is-pressed {
  border-color: var(--color-btn-pressed-border);
  background: var(--color-btn-pressed-bg);
}

.tbtn--jump {
  grid-column: 1 / -1;
  width: var(--touch-btn-jump);
  height: var(--touch-btn-jump);
}

.tbtn--reset {
  position: absolute;
  top: calc(var(--space-sm) + var(--safe-top));
  right: calc(var(--space-sm) + var(--safe-right));
  width: var(--touch-btn-small);
  height: var(--touch-btn-small);
  border-width: 2px;
}

@media (orientation: portrait) {
  body.touch .rotate-hint {
    display: block;
    position: fixed;
    left: 50%;
    bottom: calc(var(--space-lg) + var(--safe-bottom));
    z-index: 4;
    transform: translateX(-50%);
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    background: var(--color-hud-bg);
    color: var(--color-hud-text);
    font-size: 13px;
    white-space: nowrap;
    pointer-events: none;
  }

  body.touch .touch-controls__pad,
  body.touch .touch-controls__actions {
    bottom: calc(var(--space-lg) * 3 + var(--safe-bottom));
  }
}

@media (max-height: 360px) {
  :root {
    --touch-btn: 56px;
    --touch-btn-jump: 84px;
    --touch-gap: 10px;
    --touch-margin: 12px;
  }
}

.is-hidden {
  display: none;
}