/* Zombie Survival — game styles, fully scoped under .zg so they never touch the site.
   All custom properties live on .zg (NOT :root) so the game can't restyle the whole page. */
.zg {
  --zg-text:#e9f1ff; --zg-muted:#9caeca; --zg-accent:#7dd3fc; --zg-good:#86efac;
  --zg-bad:#fb7185; --zg-warn:#fde68a; --zg-line:rgba(255,255,255,.12);
  --zg-panel:rgba(23,32,51,.86); --zg-panel2:#1f2b44;
  color:var(--zg-text);
}
.zg .zg-head { text-align:center; padding:2px 0 14px; }
.zg .zg-head h1 { margin:0; font-size:clamp(28px,5vw,48px); letter-spacing:-0.05em; line-height:1; }
.zg .zg-head p { max-width:740px; margin:12px auto 0; color:var(--zg-muted); font-size:15px; line-height:1.5; }

/* HUD */
.zg .zg-hud {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--zg-panel); border:1px solid var(--zg-line); border-radius:14px;
  padding:10px 14px; margin-bottom:12px; font-size:14px;
}
.zg .zg-hud b { color:var(--zg-text); font-weight:800; }
.zg .zg-hud > div { color:var(--zg-muted); white-space:nowrap; }
.zg .zg-hud .spacer { flex:1 1 auto; }
.zg .hp { display:flex; align-items:center; gap:8px; }
.zg .hp > span { color:var(--zg-muted); font-weight:800; font-size:12px; letter-spacing:.06em; }
.zg .bar { width:130px; height:12px; border-radius:999px; background:rgba(255,255,255,.10); overflow:hidden; border:1px solid var(--zg-line); }
.zg .bar > i { display:block; height:100%; width:100%; border-radius:999px;
  background:linear-gradient(90deg,#86efac,#22c55e); transition:width .12s linear; }
.zg .zg-btn {
  appearance:none; border:1px solid var(--zg-line); background:linear-gradient(145deg,var(--zg-panel2),#172033);
  color:var(--zg-text); border-radius:10px; padding:7px 11px; font-size:16px; cursor:pointer; line-height:1;
}
.zg .zg-btn:hover { border-color:rgba(125,211,252,.7); }

/* Audio settings popover — pinned to the top-right of the game stage */
.zg .zg-audio {
  position:absolute; top:10px; right:10px; z-index:8; width:200px;
  background:#0f1626; border:1px solid rgba(125,211,252,.25); border-radius:12px;
  padding:12px; box-shadow:0 18px 50px rgba(0,0,0,.5); display:grid; gap:10px;
}
.zg .zg-audio[hidden] { display:none; }
.zg .zg-audio label { display:grid; gap:6px; font-size:12px; font-weight:700; color:var(--zg-muted); }
.zg .zg-audio input[type=range] {
  -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px;
  background:rgba(255,255,255,.14); outline:none; cursor:pointer;
}
.zg .zg-audio input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%;
  background:linear-gradient(145deg,#7dd3fc,#38bdf8); border:1px solid rgba(0,0,0,.3); cursor:pointer;
}
.zg .zg-audio input[type=range]::-moz-range-thumb {
  width:16px; height:16px; border:none; border-radius:50%; background:#38bdf8; cursor:pointer;
}
.zg .zg-mute-all {
  appearance:none; border:1px solid var(--zg-line); background:var(--zg-panel2); color:var(--zg-text);
  border-radius:9px; padding:7px; font-weight:700; font-size:12px; cursor:pointer;
}
.zg .zg-mute-all:hover { border-color:rgba(125,211,252,.6); }
.zg .zg-mute-all.on { background:linear-gradient(145deg,#7a2a2a,#4c0519); color:#fecaca; }
.zg .zg-mute-all.off { opacity:.55; }

/* Stage + canvas */
.zg .zg-stage {
  position:relative; border:1px solid var(--zg-line); border-radius:16px; overflow:hidden;
  background:#0a0f1c; box-shadow:0 20px 55px rgba(0,0,0,.28);
}
.zg #cv { display:block; width:100%; height:auto; max-width:100%; touch-action:none; background:#0a0f1c; }

/* Overlays */
.zg .zg-overlay {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:18px; background:rgba(4,8,18,.74); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  z-index:5;
}
.zg .zg-overlay[hidden] { display:none; }
.zg .zg-card {
  width:min(560px,100%); background:#111827; border:1px solid rgba(255,255,255,.14);
  border-radius:18px; padding:22px; text-align:center; box-shadow:0 30px 90px rgba(0,0,0,.5);
}
.zg .zg-card h2 { margin:0 0 10px; font-size:clamp(24px,4vw,34px); }
.zg .zg-card p { color:var(--zg-muted); line-height:1.55; margin:0 0 12px; font-size:14px; }
.zg .zg-keys { font-size:13px; }
.zg .zg-keys b { color:var(--zg-accent); }

.zg .zg-go {
  appearance:none; border:1px solid rgba(255,255,255,.14); cursor:pointer; font:inherit; font-weight:800;
  color:#04121f; background:linear-gradient(145deg,#7dd3fc,#38bdf8); border-radius:12px;
  padding:12px 22px; font-size:16px; margin:6px 5px 0;
}
.zg .zg-go:hover { filter:brightness(1.06); }
.zg .zg-go.ghost { background:linear-gradient(145deg,var(--zg-panel2),#172033); color:var(--zg-text); }

/* End screen */
.zg .zg-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:8px 0 14px; }
.zg .zg-stats > div {
  background:rgba(255,255,255,.04); border:1px solid var(--zg-line); border-radius:12px; padding:10px 8px;
}
.zg .zg-stats span { display:block; color:var(--zg-muted); font-size:11px; text-transform:uppercase; letter-spacing:.07em; }
.zg .zg-stats b { display:block; margin-top:5px; font-size:22px; font-weight:800; }
.zg .zg-cardimg {
  display:block; width:100%; max-width:100%; height:auto; border-radius:12px;
  border:1px solid var(--zg-line); margin:0 auto 12px; background:#070b16;
}
.zg .zg-share { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.zg .zg-share-note { color:var(--zg-good); font-size:13px; min-height:18px; margin-top:10px; }

/* Overlays scroll so cards always fit on short / landscape-phone screens */
.zg .zg-overlay { align-items:safe center; overflow-y:auto; }

/* Touch controls — overlaid directly on the game window (round thumb buttons).
   Offsets use the safe-area insets and sit clear of the bottom edge so iOS browser
   chrome / the home indicator can't sit on top of the tap targets. */
.zg .zg-touch { position:absolute; inset:0; z-index:4; pointer-events:none; } /* below overlays (z5) so cards stay tappable */
.zg .zg-touch[hidden] { display:none; }
html.zg-cardopen .zg-touch { display:none; } /* clear the controls while a start/pause/results card is up */
.zg .zg-move { position:absolute; left:calc(env(safe-area-inset-left, 0px) + 16px); bottom:calc(env(safe-area-inset-bottom, 0px) + 22px); display:flex; gap:12px; }
.zg .zg-touch button {
  appearance:none; border:1px solid rgba(255,255,255,.2); background:rgba(23,32,51,.4); color:var(--zg-text);
  border-radius:50%; width:64px; height:64px; font-weight:800; font-size:22px; cursor:pointer;
  pointer-events:auto; touch-action:none; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
}
.zg .zg-touch button:active { filter:brightness(1.3); background:rgba(23,32,51,.62); border-color:rgba(125,211,252,.7); }
.zg .zg-touch #tcFire {
  position:absolute; right:calc(env(safe-area-inset-right, 0px) + 16px); bottom:calc(env(safe-area-inset-bottom, 0px) + 22px);
  width:84px; height:84px; font-size:15px;
  background:rgba(225,29,72,.42); color:#fff; border-color:rgba(251,113,133,.8);
}
.zg .zg-touch #tcFire:active { background:rgba(225,29,72,.66); }

/* Fullscreen toggle button (always visible in the HUD) */
.zg #btnExitFs { display:inline-flex; align-items:center; justify-content:center; }

/* Immersive / fullscreen play — cover the whole viewport (works even where the
   Fullscreen API doesn't, e.g. iOS). HUD on top, the stage fills the rest and the
   canvas (sized in JS to the screen's aspect) is centered with no black bars. */
html.zg-immersive, html.zg-immersive body { overflow:hidden !important; height:100%; }
html.zg-immersive .zg {
  position:fixed; inset:0; z-index:1000; margin:0; background:#05080f;
  display:flex; flex-direction:column; padding:6px; box-sizing:border-box;
}
html.zg-immersive .zg-head { display:none; }
html.zg-immersive .zg-hud { flex:0 0 auto; margin-bottom:6px; }
html.zg-immersive .zg-stage { flex:1 1 auto; display:flex; align-items:center; justify-content:center; min-height:0; background:#000; border-radius:0; }
html.zg-immersive .zg-stage #cv { width:auto; height:auto; max-width:100%; max-height:100%; }

/* Rotate-to-landscape prompt — only while actually playing (immersive), in portrait */
.zg .zg-rotate { display:none; }
@media (pointer:coarse) and (orientation:portrait) {
  html.zg-immersive .zg-rotate {
    position:absolute; inset:0; z-index:20; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:12px; background:rgba(4,8,18,.97); color:var(--zg-accent); font-weight:800; font-size:46px; text-align:center;
  }
  html.zg-immersive .zg-rotate span { font-size:16px; color:var(--zg-text); max-width:240px; line-height:1.4; }
}
.zg .zg-rotate button {
  margin-top:6px; appearance:none; border:1px solid var(--zg-line); background:var(--zg-panel2);
  color:var(--zg-text); border-radius:10px; padding:9px 18px; font-weight:700; font-size:14px; cursor:pointer; pointer-events:auto;
}

/* On touch, float the HUD as a compact panel OVER the game so the canvas fills
   the whole screen; hide it while a card is up so it can't clash. */
@media (pointer:coarse) {
  html.zg-immersive .zg { padding:0; }
  html.zg-immersive .zg-stage { position:absolute; inset:0; }
  html.zg-immersive .zg-hud {
    position:absolute; top:6px; left:6px; right:auto; width:auto; max-width:62%; z-index:7;
    flex:none; margin:0; padding:4px 8px; gap:3px 8px; font-size:11px; line-height:1.15;
    background:rgba(8,12,22,.6); border:1px solid var(--zg-line); border-radius:10px;
  }
  html.zg-immersive .zg-hud .spacer { display:none; }
  html.zg-immersive .zg-hud .hp .bar { width:60px; height:8px; }
  html.zg-immersive .zg-hud .zg-btn { padding:3px 7px; font-size:13px; }
  html.zg-immersive.zg-cardopen .zg-hud { display:none; }
  /* drop the keyboard/controller text on touch (on-screen controls instead) so
     the start/results cards stay short and fit without being cut off */
  .zg .zg-keys { display:none; }
}

/* Short / landscape-phone screens: compact the overlay cards so they fit */
@media (max-height:560px) {
  .zg .zg-card { padding:14px; }
  .zg .zg-card h2 { font-size:22px; margin-bottom:6px; }
  .zg .zg-card p { font-size:12px; margin:0 0 8px; }
  .zg .zg-go { padding:9px 16px; font-size:14px; }
  .zg .zg-stats { margin:6px 0 10px; }
  .zg .zg-cardimg { max-width:300px; margin-bottom:8px; }
}

@media (max-width:640px) {
  .zg .zg-hud { gap:10px; font-size:13px; padding:9px 11px; }
  .zg .bar { width:96px; }
}