/* ============================================================
   Arcade menu - a SHARED title-screen "frame", themed per game
   by that game's own CSS variables. No game-specific colors live
   here: it reads --accent, --panel, --bg, --border, --fg, --muted
   plus --accent-ink for the primary (Play) icon.

   Layout: the game title sits large near the top (desktop) or
   centered (mobile); the Play + Multiplayer ICON buttons float in
   the bottom-right corner (desktop) or bottom-center (mobile).
   The live game keeps rendering behind it, darkened.

   Markup hooks (add these classes next to whatever a game already
   uses; keep the existing ids so game JS still finds them):
     .arcade-menu     -> the full-screen overlay (the backdrop)
     .arcade-panel    -> the title block (title + tagline)
     .arcade-title    -> the logo <h1> (its <span> = accent word)
     .arcade-tag      -> the one-line tagline under the title
     .arcade-actions  -> the icon-button cluster
     .arcade-btn.arcade-btn-primary  -> the Play icon button
     .arcade-btn.arcade-btn-mp       -> the Multiplayer icon button
   Give each button an aria-label; the glyph is drawn in CSS.
   ============================================================ */

.arcade-menu {
  position: absolute;
  inset: 0;
  z-index: 20; /* sit above in-game HUD (e.g. the zombies inventory bar at z-index 5) */
  display: grid;
  place-items: center;
  padding: 1rem;
  overflow: hidden;
  background:
    radial-gradient(125% 110% at 50% 26%,
      rgba(0, 0, 0, 0.42) 0%,
      rgba(0, 0, 0, 0.62) 55%,
      rgba(0, 0, 0, 0.8) 100%);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.arcade-menu[hidden] {
  display: none;
}

/* Slow accent light bloom drifting behind the title. */
.arcade-menu::before {
  content: "";
  position: absolute;
  inset: -40%;
  pointer-events: none;
  opacity: 0.55;
  background: radial-gradient(38% 38% at 50% 42%,
    color-mix(in srgb, var(--accent, #5ad1ff) 20%, transparent),
    transparent 70%);
  animation: arcade-drift 15s ease-in-out infinite;
}

/* The title block. No card: it floats over the darkened game. */
.arcade-panel {
  position: static;
  z-index: 1;
  width: min(640px, 92%);
  padding: 0;
  text-align: center;
  background: none;
  border: none;
  box-shadow: none;
  /* Must NOT be a scroll container: the game's own .mp-panel/.ski-panel set
     overflow-y:auto + max-height, and iOS Safari clips the absolutely-positioned
     .arcade-actions (a DOM descendant) even though its containing block is the
     overlay, hiding the Play/Multiplayer buttons. Chrome does not, which hid the
     bug in testing. Keep these overrides. */
  overflow: visible;
  max-height: none;
}

.arcade-title {
  margin: 0;
  font-weight: 900;
  line-height: 1.03;
  font-size: clamp(2.3rem, 11vw, 3.2rem);
  letter-spacing: 0.5px;
  color: var(--fg, #eef2f8);
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.6);
}

.arcade-title span {
  color: var(--accent, #5ad1ff);
}

.arcade-tag {
  margin: 0.6rem auto 0;
  max-width: 44ch;
  color: var(--muted, #9fb0c8);
  font-size: 1rem;
  line-height: 1.45;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}

/* Icon buttons live in a full-width bar pinned to the bottom of the overlay,
   so an optional left-hand button (e.g. the zombies map editor) shares the
   exact vertical center line as the Play / Multiplayer cluster on the right.
   DOM order is [aux?] [Multiplayer] [Play] so Play sits at the outer edge. */
.arcade-actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(20px, 5vh, 40px);
  z-index: 2;
  display: flex;
  flex-direction: row;    /* override any per-game column layout */
  align-items: center;    /* all buttons share one vertical center line */
  justify-content: center; /* mobile: the cluster sits centered */
  gap: 0.85rem;
  padding: 0 clamp(16px, 5vw, 60px);
}

/* Left-hand auxiliary button (same size as Multiplayer). Used by Zombies as the
   "Community Maps" button - shown on ALL sizes (a map-picker belongs on mobile
   too). Desktop moves it to the bottom-left; on mobile it joins the centered
   cluster. */
.arcade-btn.arcade-btn-aux {
  --arcade-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M20.5%203l-.16.03L15%205.1%209%203%203.36%204.9c-.21.07-.36.25-.36.48V20.5c0%20.28.22.5.5.5l.16-.03L9%2018.9l6%202.1%205.64-1.9c.21-.07.36-.25.36-.48V3.5c0-.28-.22-.5-.5-.5zM15%2019l-6-2.11V5l6%202.11V19z'/%3E%3C/svg%3E");
  width: 62px;
  height: 62px;
  color: var(--fg, #eef2f8);
}

/* -------- Control prompts (Kenney Input Prompts) in the middle -------------
   Two variants: .arcade-controls (keyboard/mouse, desktop) and
   .arcade-controls-touch (touch, mobile). Each holds .arcade-hint chips. */
.arcade-controls,
.arcade-controls-touch {
  z-index: 1;
  width: min(700px, 94%);
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(1rem, 3.5vw, 2.6rem);
  pointer-events: none; /* purely informational */
}

/* Keyboard set: desktop only, floated in the middle of the screen. */
.arcade-controls {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Touch set: mobile only, in normal flow just under the description so it never
   collides with the vertically-centered title block. */
.arcade-controls-touch {
  display: flex;
  position: static;
  margin: 1.4rem auto 0.25rem;
}

@media (min-width: 720px) {
  .arcade-controls {
    display: flex;
  }
  .arcade-controls-touch {
    display: none;
  }
}

.arcade-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.arcade-hint .keys {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 46px;
}

.arcade-hint img {
  height: 44px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.65));
}

.arcade-hint .label {
  color: var(--fg, #eef2f8);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
}

/* WASD arranged in the classic inverted-T cluster (kept within the chip's
   key-row height so its label stays aligned with the other chips). */
.arcade-hint .arcade-keys-wasd {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 3px;
  align-content: center;
  justify-content: center;
}
.arcade-keys-wasd img {
  height: 20px;
}
.arcade-keys-wasd img:nth-child(1) { grid-area: 1 / 2; } /* W */
.arcade-keys-wasd img:nth-child(2) { grid-area: 2 / 1; } /* A */
.arcade-keys-wasd img:nth-child(3) { grid-area: 2 / 2; } /* S */
.arcade-keys-wasd img:nth-child(4) { grid-area: 2 / 3; } /* D */

.arcade-btn {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  padding: 0;
  border-radius: 50%;
  color: var(--fg, #eef2f8);
  background: color-mix(in srgb, var(--panel, #161a22) 72%, black);
  border: 1px solid color-mix(in srgb, var(--accent, #5ad1ff) 34%, var(--border, #2a3550));
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  transition: transform 0.1s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.arcade-btn::before {
  content: "";
  width: 46%;
  height: 46%;
  background: currentColor;
  -webkit-mask: var(--arcade-icon) center / contain no-repeat;
  mask: var(--arcade-icon) center / contain no-repeat;
}

.arcade-btn:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent, #5ad1ff) 70%, transparent);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45),
    0 0 18px color-mix(in srgb, var(--accent, #5ad1ff) 22%, transparent);
}

.arcade-btn:active {
  transform: translateY(0);
}

.arcade-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent, #5ad1ff) 85%, white);
  outline-offset: 3px;
}

/* Play: filled with the game's accent color. */
.arcade-btn-primary {
  --arcade-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M8.5%205.5%20L19%2012%20L8.5%2018.5%20Z'/%3E%3C/svg%3E");
  width: 74px;
  height: 74px;
  color: var(--accent-ink, #08131f);
  border-color: transparent;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent, #5ad1ff) 90%, white),
    var(--accent, #5ad1ff));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent);
  animation: arcade-attract 2.6s ease-in-out infinite;
}

.arcade-btn-primary::before {
  width: 42%;
  height: 42%;
}

.arcade-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.46),
    0 0 28px color-mix(in srgb, var(--accent, #5ad1ff) 55%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent);
}

/* Multiplayer: outlined, accent on hover. */
.arcade-btn-mp {
  --arcade-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M16%2011c1.66%200%202.99-1.34%202.99-3S17.66%205%2016%205c-1.66%200-3%201.34-3%203s1.34%203%203%203zm-8%200c1.66%200%202.99-1.34%202.99-3S9.66%205%208%205C6.34%205%205%206.34%205%208s1.34%203%203%203zm0%202c-2.33%200-7%201.17-7%203.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8%200c-.29%200-.62.02-.97.05%201.16.84%201.97%201.97%201.97%203.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
  color: var(--fg, #eef2f8);
}

.arcade-btn-mp:hover {
  color: var(--accent, #5ad1ff);
}

/* Desktop: bigger title near the top, buttons in the bottom-right. */
@media (min-width: 720px) {
  .arcade-menu {
    align-items: start;
    justify-items: center;
    padding-top: clamp(6vh, 9vh, 120px);
  }
  .arcade-title {
    font-size: clamp(3.6rem, 7.5vw, 5.6rem);
  }
  .arcade-tag {
    margin-top: 0.9rem;
    max-width: 52ch;
    font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  }
  .arcade-actions {
    bottom: clamp(24px, 5vh, 60px);
    justify-content: flex-end; /* cluster hugs the bottom-right */
  }
  .arcade-btn.arcade-btn-aux {
    display: grid; /* revealed on desktop only */
    margin-right: auto; /* push the aux button to the bottom-left */
  }
}

@keyframes arcade-drift {
  0%, 100% { transform: translate(-6%, -4%) scale(1); }
  50%      { transform: translate(6%, 4%) scale(1.12); }
}

@keyframes arcade-attract {
  0%, 100% {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent);
  }
  50% {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4),
      0 0 24px color-mix(in srgb, var(--accent, #5ad1ff) 50%, transparent),
      inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .arcade-menu::before,
  .arcade-btn-primary {
    animation: none;
  }
}