: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);
  --color-eye: #2a6fdb;
  --color-face: rgba(127, 214, 255, 0.35);
  --color-cube-line: rgba(255, 255, 255, 0.45);
  --color-axis-guide: rgba(255, 255, 255, 0.55);
  --touch-btn: 64px;
  --touch-btn-jump: 88px;
  --touch-btn-rot: 52px;
  --touch-btn-small: 48px;
  --touch-gap: 14px;
  --touch-gap-rot: 8px;
  --orient-size: 150px;
  --orient-size-touch: 74px;
  --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__subtitle {
  color: var(--color-hud-muted);
  font-size: 12px;
  font-weight: 600;
}

.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;
}

.orient {
  position: fixed;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 1;
  width: var(--orient-size);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--color-hud-bg);
  color: var(--color-hud-muted);
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
}

.orient__svg {
  display: block;
  width: 100%;
  height: auto;
}

.orient__face {
  fill: var(--color-face);
}

.orient__edge {
  stroke: var(--color-cube-line);
  stroke-width: 1.2;
}

.orient__axis {
  fill: var(--color-hud-muted);
  font-size: 8px;
  text-anchor: middle;
  dominant-baseline: central;
}

.orient__arrow {
  stroke: var(--color-accent);
  stroke-width: 3;
  stroke-linecap: round;
}

.orient__head {
  fill: var(--color-accent);
}

.orient__eye {
  fill: var(--color-hud-text);
  stroke: var(--color-eye);
  stroke-width: 2;
}

.orient__eye-line {
  stroke: var(--color-hud-text);
  stroke-width: 1.5;
  stroke-dasharray: 2 2;
}

.orient__caption {
  margin: var(--space-sm) 0 0;
}

.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 .orient {
  top: calc(var(--space-sm) + var(--safe-top));
  right: calc(var(--space-sm) * 2 + var(--touch-btn-small) + var(--safe-right));
  width: var(--orient-size-touch);
  padding: 4px;
}

body.touch .hud__title,
body.touch .hud__keys,
body.touch .orient__caption,
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: flex;
  align-items: flex-end;
  gap: var(--touch-gap);
}

/* Rotazioni: una riga per asse (Q/E su, Z/C roll, T/G beccheggio) */
.touch-controls__rot {
  display: grid;
  grid-template-columns: repeat(2, var(--touch-btn-rot));
  gap: var(--touch-gap-rot);
}

.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,
.tbtn__stroke .tbtn__dot {
  fill: currentColor;
  stroke: none;
}

.tbtn__stroke .tbtn__axis {
  stroke: var(--color-axis-guide);
  stroke-width: 1.5;
  stroke-dasharray: 2 2.5;
}

.tbtn--rot {
  width: var(--touch-btn-rot);
  height: var(--touch-btn-rot);
  border-width: 2px;
}

.tbtn--rot svg {
  width: 72%;
  height: 72%;
}

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

.tbtn--jump {
  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;
  border-radius: var(--radius-md);
}

@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: 76px;
    --touch-btn-rot: 46px;
    --touch-gap: 10px;
    --touch-gap-rot: 6px;
    --touch-margin: 12px;
  }
}

.is-hidden {
  display: none;
}