* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; color: #fff; }
canvas { display: block; }

#start-screen, #win-screen {
  position: fixed; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 10, 30, 0.92);
}
#win-screen { display: none; }
.overlay-content { text-align: center; max-width: 420px; padding: 2rem; }
.title-block { display: flex; align-items: center; gap: 1rem; justify-content: center; margin-bottom: 0.75rem; }
.title-logo { flex-shrink: 0; }
h1 { font-size: 1.8rem; font-weight: 300; letter-spacing: 0.05em; }
.subtitle { color: #8899aa; margin-bottom: 1.5rem; font-size: 0.95rem; }
.controls-info { color: #667788; font-size: 0.8rem; line-height: 1.6; margin-bottom: 2rem; }
.key-icon { display: inline-block; background: rgba(255,255,255,0.08); padding: 0.1rem 0.5rem; border-radius: 4px; font-family: monospace; }

button {
  background: #e94560; color: #fff; border: none; padding: 0.85rem 2.5rem;
  font-size: 1rem; border-radius: 6px; cursor: pointer;
  letter-spacing: 0.05em; transition: background 0.2s;
}
button:hover { background: #ff6b81; }
button:active { transform: scale(0.97); }

#hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; justify-content: center; padding: 1rem;
  pointer-events: none;
}
#timer {
  background: rgba(0,0,0,0.5); padding: 0.4rem 1rem; border-radius: 6px;
  font-size: 1.1rem; font-variant-numeric: tabular-nums;
}

#joystick-zone {
  position: fixed; left: 0; bottom: 0; width: 50%; height: 50%;
  z-index: 6; display: none; touch-action: none;
}
#joystick-zone .joystick-base {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 100px; height: 100px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
}
#joystick-zone .joystick-knob {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(233,69,96,0.5); border: 2px solid rgba(233,69,96,0.7);
  transition: none;
}

#look-zone {
  position: fixed; right: 0; top: 0; width: 50%; height: 100%;
  z-index: 6; display: none; touch-action: none;
}

@media (pointer: coarse) {
  #joystick-zone { display: block; }
  #look-zone { display: block; }
}

/* Keep the primary action reachable inside the short embedded viewport used by
   phones in landscape orientation. */
@media (pointer: coarse) and (orientation: landscape), (max-height: 420px) {
  .overlay-content { max-width: 100%; padding: 0.5rem 1rem; }
  .title-block { gap: 0.5rem; margin-bottom: 0.25rem; }
  .title-logo { width: 42px; height: 42px; }
  h1 { font-size: 1.15rem; }
  .subtitle { margin-bottom: 0.5rem; font-size: 0.8rem; }
  .controls-info { display: none; }
  button { padding: 0.6rem 1.5rem; font-size: 0.85rem; }
}