/* ==========================================================================
   GAME: TRILL CITY (#game)
   Top-down pixel city rendered on a canvas by js/city-game.js.
   Header matches the retro arcade skin; the screen is a notched pixel frame.
   ========================================================================== */

.game-section {
  padding: 6rem 2rem;
  max-width: 1440px;
  margin: 0 auto;
}

#game .section-header-row {
  border-bottom: var(--px, 4px) dashed var(--border-color);
}

#game .section-title-large {
  font-family: var(--font-pixel);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.6vw, 2.75rem);
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-shadow: var(--px, 4px) var(--px, 4px) 0 var(--arcade-red, #ff3344);
}

#game .section-title-large::before {
  content: 'BONUS STAGE // FREE ROAM';
  display: block;
  margin-bottom: 1rem;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--arcade-red, #ff3344);
  text-shadow: none;
}

#game .section-title-large::after {
  content: '';
  display: inline-block;
  width: 0.55em;
  height: 0.8em;
  margin-left: 0.35em;
  background: var(--text-primary);
  animation: arcadeBlink 1s steps(1) infinite;
}

/* ---------- Screen ---------- */

.game-cabinet {
  --pixel-edge: var(--text-primary);
}

.game-screen {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  margin: 4px;
  background: #2b2d3c;
  overflow: hidden;
  outline: none;
  box-shadow:
    0 -4px 0 0 var(--pixel-edge),
    0 4px 0 0 var(--pixel-edge),
    -4px 0 0 0 var(--pixel-edge),
    4px 0 0 0 var(--pixel-edge),
    12px 12px 0 0 var(--arcade-red, #ff3344);
}

.game-screen.is-active {
  box-shadow:
    0 -4px 0 0 var(--arcade-cyan, #00f0ff),
    0 4px 0 0 var(--arcade-cyan, #00f0ff),
    -4px 0 0 0 var(--arcade-cyan, #00f0ff),
    4px 0 0 0 var(--arcade-cyan, #00f0ff),
    12px 12px 0 0 var(--arcade-red, #ff3344);
}

#gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

/* CRT scanlines */
.game-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 4px);
}

/* ---------- HUD ---------- */

.game-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: clamp(8px, 2%, 18px);
  z-index: 2;
}

.game-bars {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 8px;
  align-items: center;
  width: clamp(120px, 22%, 260px);
  padding: 6px 8px;
  background: rgba(10, 10, 12, 0.8);
  border: 2px solid #f5f5f7;
}

.game-heart {
  grid-row: span 2;
  color: var(--arcade-red, #ff3344);
  font-size: clamp(14px, 2vw, 24px);
  line-height: 1;
}

.game-bar {
  display: block;
  height: clamp(6px, 1vw, 10px);
  background: #000;
  border: 2px solid #5e5e68;
}

.game-bar i {
  display: block;
  height: 100%;
  width: 100%;
  transition: width 120ms steps(4);
}

.game-bar-hp i { background: var(--arcade-red, #ff3344); }
.game-bar-sp i { background: var(--arcade-cyan, #00f0ff); }

.game-minimap {
  width: clamp(90px, 16%, 170px);
  height: auto;
  aspect-ratio: 4 / 3;
  image-rendering: pixelated;
  background: #000;
  border: 2px solid #f5f5f7;
}

/* ---------- Dialog box ---------- */

.game-dialog {
  position: absolute;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  width: min(78%, 720px);
  min-height: 22%;
  padding: clamp(10px, 2vw, 22px) clamp(12px, 2.4vw, 28px);
  background: #06061a;
  border: 3px solid #f5f5f7;
  box-shadow: inset 0 0 0 3px #06061a, inset 0 0 0 5px #5e5e68;
  z-index: 3;
}

.game-dialog p {
  margin: 0;
  font-family: var(--font-crt, monospace);
  font-size: clamp(1rem, 2.4vw, 1.9rem);
  line-height: 1.15;
  color: #f5f5f7;
}

.game-dialog-caret {
  position: absolute;
  right: 14px;
  bottom: 8px;
  font-size: 12px;
  color: #f5f5f7;
  animation: arcadeBlink 0.8s steps(1) infinite;
}

/* ---------- Start overlay ---------- */

.game-start {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  border: 0;
  cursor: pointer;
  color: #f5f5f7;
  background: rgba(6, 6, 10, 0.62);
  font-family: var(--font-pixel, monospace);
}

.game-start-title {
  font-size: clamp(1.25rem, 4.5vw, 3.25rem);
  text-shadow: 4px 4px 0 var(--arcade-red, #ff3344);
}

.game-start-cta {
  font-size: clamp(9px, 1.3vw, 14px);
  letter-spacing: 0.2em;
  animation: arcadeBlink 1s steps(1) infinite;
}

.game-start:focus-visible {
  outline: 4px solid var(--arcade-cyan, #00f0ff);
  outline-offset: -8px;
}

.game-start[hidden],
.game-dialog[hidden] {
  display: none;
}

/* ---------- Controls legend ---------- */

.game-controls {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  margin: 2rem 0 0;
  padding: 0;
  font-family: var(--font-pixel, monospace);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
}

.game-controls kbd {
  display: inline-block;
  min-width: 2em;
  margin-right: 4px;
  padding: 5px 6px;
  text-align: center;
  font: inherit;
  color: var(--text-primary);
  border: 2px solid var(--text-primary);
  box-shadow: 2px 2px 0 var(--arcade-red, #ff3344);
}

/* ---------- Touch D-pad (only on touch devices) ---------- */

.game-dpad {
  display: none;
}

@media (hover: none) and (pointer: coarse) {
  .game-dpad {
    display: grid;
    grid-template-columns: repeat(3, 52px) 1fr 64px;
    grid-template-areas:
      '. w . . .'
      'a s d . e';
    gap: 6px;
    margin-top: 1.5rem;
  }

  .game-dpad button {
    height: 52px;
    font-family: var(--font-pixel, monospace);
    font-size: 12px;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 2px solid var(--text-primary);
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
  }

  .game-dpad button:active { background: var(--arcade-red, #ff3344); }
  .game-dpad [data-key="w"] { grid-area: w; }
  .game-dpad [data-key="a"] { grid-area: a; }
  .game-dpad [data-key="s"] { grid-area: s; }
  .game-dpad [data-key="d"] { grid-area: d; }
  .game-dpad [data-key="e"] { grid-area: e; height: 110px; margin-top: -58px; }

  .game-controls { display: none; }
}

@media (max-width: 600px) {
  .game-section { padding: 4rem 1rem; }
  .game-screen { aspect-ratio: 4 / 3; }
}