/* ==========================================================================
   Zombie Games Hub — Game shell
   Canvas stage, HUD, state overlays, touch controls, game page layout.
   Loaded only on pages that embed a playable game.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shell
   -------------------------------------------------------------------------- */
.game-shell {
  --stage-max-h: 74vh;
  background: linear-gradient(180deg, var(--surface) 0%, #12171300 100%), var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  margin-bottom: var(--s-5);
}
.game-shell:fullscreen,
.game-shell:-webkit-full-screen {
  --stage-max-h: 100vh;
  border-radius: 0;
  border: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #07090800;
  background-color: #070908;
}

/* --------------------------------------------------------------------------
   2. HUD bar
   -------------------------------------------------------------------------- */
.game-bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 8px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  min-height: 50px;
}
.hud-group { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; flex: 1; min-width: 0; }

.hud {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 52px;
}
.hud__label {
  font-size: .62rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 700;
}
.hud__value {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.hud--score .hud__value { color: var(--green); }
.hud--best  .hud__value { color: var(--toxic); }
.hud--wave  .hud__value { color: var(--accent); }
.hud--time  .hud__value { color: var(--info); }

/* Health / ammo meters */
.meter {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 96px;
}
/* Both are <span> elements, so they need display:block for width/height
   to apply — the track is blockified by its flex parent, the fill is not. */
.meter__track {
  display: block;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
  border: 1px solid var(--line);
}
.meter__fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--green), var(--toxic));
  transition: width .16s linear, background-color .3s var(--ease);
}
.meter--low .meter__fill { background: linear-gradient(90deg, var(--danger), var(--accent)); }
.meter--ammo .meter__fill { background: linear-gradient(90deg, var(--info), #8fd8ec); }

.game-bar__tools { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.game-bar__tools .icon-btn { width: 38px; height: 38px; }
.game-bar__tools .icon-btn[aria-pressed="true"] { color: var(--accent); }

/* --------------------------------------------------------------------------
   3. Stage & canvas
   -------------------------------------------------------------------------- */
.game-stage {
  position: relative;
  width: 100%;
  background: #0a0d0b;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;                 /* stop page scroll/zoom over the play area */
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: contain;
}
.game-stage canvas {
  display: block;
  width: 100%;
  height: auto;
  max-height: var(--stage-max-h);
  aspect-ratio: var(--game-ar, 3 / 2);
  object-fit: contain;
  image-rendering: auto;
  background: #0a0d0b;
  cursor: default;
}
.game-stage[data-cursor="crosshair"] canvas { cursor: crosshair; }
.game-stage[data-cursor="pointer"] canvas { cursor: pointer; }

/* --------------------------------------------------------------------------
   4. State overlays (Loading / Ready / Paused / Game Over / Victory)
   -------------------------------------------------------------------------- */
.game-overlay {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-4);
  text-align: center;
  background: rgba(7, 10, 8, .86);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 5;
  overflow-y: auto;
}
.game-overlay[data-visible="true"] { display: flex; }
.game-overlay h2 {
  margin: 0;
  font-size: clamp(1.35rem, 1.1rem + 1.6vw, 2.1rem);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.game-overlay[data-screen="over"] h2 { color: var(--danger); }
.game-overlay[data-screen="win"] h2 { color: var(--green); }
.game-overlay[data-screen="paused"] h2 { color: var(--warning); }
.game-overlay p { margin: 0; color: var(--text-muted); max-width: 44ch; font-size: .95rem; }
.game-overlay__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }
.game-overlay__stats {
  display: flex;
  gap: var(--s-5);
  flex-wrap: wrap;
  justify-content: center;
  margin: 4px 0 2px;
}
.game-overlay__stats div { min-width: 76px; }
.game-overlay__stats b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--green);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.game-overlay__stats span { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.game-overlay__hint {
  font-size: .8rem;
  color: var(--text-dim);
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-top: 6px;
  max-width: 52ch;
}
.new-best {
  display: inline-block;
  padding: 3px 12px;
  border-radius: var(--r-pill);
  background: rgba(126, 211, 33, .16);
  border: 1px solid var(--green);
  color: var(--green);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.loader {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 3px solid var(--surface-3);
  border-top-color: var(--green);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   5. Touch controls — only rendered on touch-capable devices
   -------------------------------------------------------------------------- */
.touch-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  pointer-events: none;
}
.game-shell[data-touch="true"] .touch-layer { display: block; }
.game-shell[data-state="playing"] .touch-layer { opacity: 1; }
.touch-layer > * { pointer-events: auto; }

.tc-stick {
  position: absolute;
  left: 14px;
  bottom: 14px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  border: 2px solid rgba(126, 211, 33, .38);
  background: rgba(11, 14, 12, .34);
  touch-action: none;
}
.tc-stick__nub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: rgba(126, 211, 33, .5);
  border: 2px solid rgba(180, 240, 110, .8);
  transition: transform .04s linear;
}

.tc-buttons {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: flex-end;
  gap: 12px;
  max-width: 190px;
}
.tc-btn {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 2px solid rgba(255, 107, 44, .6);
  background: rgba(255, 107, 44, .24);
  color: #fff;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  padding: 0;
}
.tc-btn:active, .tc-btn[data-down="true"] { background: rgba(255, 107, 44, .5); transform: scale(.95); }
.tc-btn--wide { width: auto; min-width: 96px; border-radius: var(--r-pill); height: 60px; }
.tc-btn--alt { border-color: rgba(75, 179, 212, .6); background: rgba(75, 179, 212, .22); }
.tc-btn--alt:active, .tc-btn--alt[data-down="true"] { background: rgba(75, 179, 212, .46); }

.tc-hint {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: rgba(11, 14, 12, .6);
  border: 1px solid var(--line-strong);
  color: var(--text-muted);
  font-size: .78rem;
  white-space: nowrap;
}

@media (max-width: 420px) {
  .tc-stick { width: 100px; height: 100px; }
  .tc-stick__nub { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .tc-btn { width: 64px; height: 64px; font-size: .72rem; }
}

/* --------------------------------------------------------------------------
   6. Game page layout
   -------------------------------------------------------------------------- */
.game-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--s-6);
  align-items: start;
  padding-block: var(--s-5) var(--s-6);
}
/* Grid items default to min-width:auto, so a wide child (the controls table has
   a 460px minimum) would force the whole column past the viewport. */
.game-page > * { min-width: 0; }
@media (max-width: 1024px) {
  .game-page { grid-template-columns: 1fr; gap: var(--s-5); }
}

.game-intro { margin-bottom: var(--s-4); }
.game-intro h1 { margin-bottom: 8px; }
.game-intro__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: var(--s-3); }
.game-intro p { color: var(--text-muted); max-width: 72ch; margin-bottom: 0; }

.game-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: var(--s-6);
}
.game-actions .best-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  font-size: .85rem;
  color: var(--text-muted);
}
.game-actions .best-chip b { color: var(--green); font-family: var(--font-display); font-variant-numeric: tabular-nums; }

.game-section { margin-bottom: var(--s-6); }
.game-section h2 { font-size: 1.35rem; margin-bottom: var(--s-3); }
.game-section h3 { font-size: 1.05rem; margin-bottom: 8px; }

.control-table { width: 100%; }
.control-table td:first-child { width: 42%; white-space: nowrap; }

.key-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.tips-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.tips-list li {
  position: relative;
  padding: 12px 14px 12px 44px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  margin: 0;
  font-size: .93rem;
}
.tips-list li::before {
  counter-increment: tip;
  content: counter(tip);
  position: absolute;
  left: 12px;
  top: 12px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(126, 211, 33, .16);
  color: var(--green);
  font-size: .74rem;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.tips-list { counter-reset: tip; }

.spec-list { list-style: none; padding: 0; margin: 0; }
.spec-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: .88rem;
  margin: 0;
}
.spec-list li:last-child { border-bottom: 0; }
.spec-list dt, .spec-list .k { color: var(--text-dim); }
.spec-list .v { color: var(--text); font-weight: 600; text-align: right; }

.game-page__aside { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: var(--s-4); }
@media (max-width: 1024px) { .game-page__aside { position: static; } }

.share-row { display: flex; gap: 8px; flex-wrap: wrap; }