/* CONDOR — remake Sidam 1981. Cornice cabinato + canvas verticale scalato. */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: #05060f;
  overflow: hidden;
  font-family: 'Courier New', monospace;
  touch-action: none;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, #10142e 0%, #05060f 70%);
}

#frame {
  position: relative;
  height: 100%;
  max-height: 100vh;
  aspect-ratio: 416 / 512;
  max-width: 100vw;
}

canvas#screen {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: auto;
  box-shadow: 0 0 60px rgba(60, 120, 255, .25), 0 0 12px rgba(0, 0, 0, .9);
  border-radius: 6px;
}

/* Controlli touch: visibili solo su dispositivi senza mouse */
#touch-ui { display: none; }
@media (pointer: coarse) {
  #touch-ui {
    display: flex;
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 22%;
    opacity: .92;
  }
  .tzone {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7vmin;
    color: rgba(255,255,255,.45);
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    user-select: none;
    -webkit-user-select: none;
  }
  .tzone:active { background: rgba(255,255,255,.14); }
}