:root {
  color-scheme: dark; /* stop the UA painting safe-area / overscroll white */
  --bg: #1a1030;
  --panel: rgba(20, 12, 40, 0.92);
  --accent: #ffd23f;
  --accent2: #4cc9f0;
  --text: #f4f0ff;
  --danger: #ff5d73;
  --ok: #5dd39e;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* solid dark on the root fills the bottom safe-area / home-indicator strip */
html { background-color: #0c0818; }

html, body {
  height: 100%;
  /* one continuous background behind the whole app (canvas + keys) */
  background: linear-gradient(180deg, #1a1030 0%, #0c0818 100%) #0c0818;
  background-attachment: fixed;
  color: var(--text);
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  user-select: none;
}

#app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}

/* The stage holds the canvas and gives it whatever space is left over after
   the controls. The canvas keeps its 640:440 ratio (no stretching). */
#stage {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

canvas#game {
  display: block;
  /* exact pixel size is set by JS (resizeCanvas) to fit the stage. */
  max-width: 100%;
  max-height: 100%;
  background: transparent; /* letterbox shows the page gradient -> seamless */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: none;
}

/* ---- Touch controls: retro keyboard-style arrow keys, below the field ---- */
/* Controls: a compact arrow cross below the field, on the SAME background
   (no panel) so the whole screen reads as one surface. Small portion of the
   screen, but keys stay big enough for a finger. */
#touch-controls {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 10px calc(8px + env(safe-area-inset-bottom));
}
#touch-controls.hidden { display: none; }

/* Cross:  . ↑ .  /  ← ❚❚ →  /  . ↓ . */
.keyboard {
  --key: min(19vw, 8.8vh);
  display: grid;
  grid-template-columns: repeat(3, var(--key));
  grid-template-rows: repeat(3, var(--key));
  grid-template-areas:
    ".    up    ."
    "left pause right"
    ".    down  .";
  gap: clamp(6px, 2vw, 12px);
  background: transparent;
}

.ctrl-hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
}
.key.up    { grid-area: up; }
.key.left  { grid-area: left; }
.key.down  { grid-area: down; }
.key.right { grid-area: right; }
.key.pause { grid-area: pause; }

/* Each button looks like a physical, retro keycap */
.key {
  width: var(--key);
  height: var(--key);
  font-family: "Courier New", monospace;
  font-size: calc(var(--key) * 0.4);
  font-weight: bold;
  line-height: 1;
  color: #2b2b33;
  border: none;
  border-radius: 11px;
  background: linear-gradient(#f6f3ea 0%, #ddd8c8 60%, #ccc6b4 100%);
  box-shadow:
    0 4px 0 #8d8a7e,
    0 6px 8px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 #ffffff;
  pointer-events: auto;
  transition: transform 0.04s ease, box-shadow 0.04s ease;
}
.key:active {
  transform: translateY(4px);
  box-shadow:
    0 0 0 #8d8a7e,
    0 2px 4px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 #ffffff;
}

/* Pause keycap tinted amber so it reads as a function key */
.key.pause {
  position: relative;
  font-size: calc(var(--key) * 0.3);
  color: #5a3d00;
  background: linear-gradient(#ffe9a8 0%, #f5d57a 60%, #e6c25a 100%);
  box-shadow:
    0 4px 0 #a8841f,
    0 6px 8px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 #fffefb;
}
.key.pause:active { box-shadow: 0 0 0 #a8841f, 0 2px 4px rgba(0,0,0,0.4), inset 0 1px 0 #fffefb; }
/* little house in the corner: long-press the pause key to reach the home menu */
.key.pause::after {
  content: "⌂";
  position: absolute;
  right: 5px;
  bottom: 1px;
  font-size: calc(var(--key) * 0.26);
  color: rgba(90, 61, 0, 0.75);
  pointer-events: none;
}
/* visual feedback while the long-press is building */
.key.pause.holding {
  background: linear-gradient(#fff6cf 0%, #ffd23f 100%);
  transform: translateY(3px);
}

/* ---- In-app high-score name entry ---- */
#name-entry {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 5, 18, 0.82);
  backdrop-filter: blur(3px);
  padding: 16px;
}
#name-entry.hidden { display: none; }

.ne-card {
  width: min(92vw, 360px);
  background: var(--panel);
  border: 2px solid var(--accent);
  border-radius: 18px;
  padding: 26px 22px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.ne-title {
  color: var(--accent);
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
}
.ne-score {
  color: var(--accent2);
  font-size: 17px;
  margin-bottom: 18px;
}
#ne-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 20px;
  text-align: center;
  border-radius: 10px;
  border: 2px solid rgba(76, 201, 240, 0.5);
  background: rgba(76, 201, 240, 0.10);
  color: var(--text);
  outline: none;
  margin-bottom: 16px;
}
#ne-input:focus { border-color: var(--accent); }
#ne-ok {
  width: 100%;
  padding: 13px;
  font-size: 19px;
  font-weight: bold;
  border: none;
  border-radius: 10px;
  background: var(--accent);
  color: #2a1c00;
  cursor: pointer;
}
#ne-ok:active { transform: scale(0.97); }