/* ==========================================================
   Sir GI Joe Arcade — shared styles for every game page
   Colors live here so the whole arcade can be re-themed at once.
   ========================================================== */
:root {
  --bg: #06061a;          /* page background */
  --bg-2: #0d0d2b;        /* panels */
  --line: #24245a;        /* borders */
  --cyan: #2ef2ff;        /* main neon */
  --pink: #ff3df2;        /* accent neon */
  --purple: #8a5cff;
  --yellow: #ffd23f;
  --green: #3dff9a;
  --red: #ff4d6d;
  --text: #e8e8ff;
  --muted: #9a9ad0;
  --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(138, 92, 255, .25), transparent 60%),
    radial-gradient(900px 500px at 100% 110%, rgba(255, 61, 242, .12), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: var(--sans);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--cyan); }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Header ---------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(6, 6, 26, .7);
  backdrop-filter: blur(6px);
}
.site-header .back {
  font-family: var(--mono); font-size: .85rem; text-decoration: none; color: var(--muted);
  border: 1px solid var(--line); padding: 6px 10px; border-radius: 8px; white-space: nowrap;
}
.site-header .back:hover { color: var(--cyan); border-color: var(--cyan); }
.site-header h1 {
  margin: 0; font-family: var(--mono); font-size: clamp(1rem, 3.4vw, 1.5rem); letter-spacing: .12em;
  text-transform: uppercase; color: var(--cyan);
  text-shadow: 0 0 8px rgba(46, 242, 255, .7), 0 0 22px rgba(46, 242, 255, .35);
}
.header-btns { display: flex; gap: 8px; }
.icon-btn {
  font: 600 .85rem var(--mono); color: var(--text); background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; cursor: pointer; min-width: 40px;
}
.icon-btn:hover { border-color: var(--pink); color: var(--pink); }

/* ---------- Game area ---------- */
.game-wrap { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; padding: 14px 10px 6px; }
.stage {
  position: relative;
  width: 100%;
  max-width: 960px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #2c2c70;
  box-shadow: 0 0 0 1px rgba(46, 242, 255, .12), 0 0 40px rgba(46, 242, 255, .12), 0 20px 60px rgba(0, 0, 0, .6);
  background: #030312;
  touch-action: none;           /* we handle swipes/drags ourselves */
  user-select: none; -webkit-user-select: none;
}
.stage canvas { display: block; width: 100%; height: 100%; }
.help { font: .82rem var(--mono); color: var(--muted); text-align: center; margin: 10px 0 0; max-width: 960px; }
.help kbd { font: inherit; color: var(--text); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; background: var(--bg-2); }

/* ---------- Overlays (title / pause / game over) ---------- */
.overlay {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  padding: 14px;
  background: rgba(3, 3, 18, .78);
  backdrop-filter: blur(3px);
  overflow-y: auto;
}
.panel {
  width: min(560px, 100%);
  max-height: 100%;
  overflow-y: auto;
  text-align: center;
  background: linear-gradient(180deg, rgba(20, 20, 60, .95), rgba(10, 10, 34, .95));
  border: 1px solid #34348a;
  border-radius: 16px;
  padding: clamp(14px, 3vw, 26px);
  box-shadow: 0 0 30px rgba(138, 92, 255, .25);
}
.panel h2 {
  margin: 0 0 6px; font: 800 clamp(1.4rem, 5vw, 2.3rem) var(--mono); letter-spacing: .08em; color: var(--pink);
  text-shadow: 0 0 10px rgba(255, 61, 242, .7), 0 0 26px rgba(255, 61, 242, .3);
}
.panel .sub { margin: 0 0 14px; color: var(--muted); font-size: .92rem; }
.panel .big-score { font: 800 clamp(2rem, 8vw, 3.2rem) var(--mono); color: var(--yellow); text-shadow: 0 0 14px rgba(255, 210, 63, .5); margin: 4px 0; }
.stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 8px 0 14px; padding: 0; list-style: none; }
.stats li { font: .8rem var(--mono); color: var(--muted); border: 1px solid var(--line); border-radius: 30px; padding: 4px 10px; }
.stats li b { color: var(--text); }
.btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }
.btn {
  font: 700 .95rem var(--mono); letter-spacing: .06em; text-transform: uppercase;
  padding: 11px 18px; border-radius: 10px; cursor: pointer; border: 1px solid var(--cyan);
  color: #031018; background: var(--cyan);
  box-shadow: 0 0 16px rgba(46, 242, 255, .45);
}
.btn:hover { filter: brightness(1.12); }
.btn.alt { background: transparent; color: var(--cyan); box-shadow: none; }
.btn.pink { background: var(--pink); border-color: var(--pink); color: #1a0218; box-shadow: 0 0 16px rgba(255, 61, 242, .45); }
.how { text-align: left; font-size: .88rem; color: var(--muted); margin: 10px 0 0; padding-left: 18px; line-height: 1.55; }
.how b { color: var(--text); }

/* Name entry */
.name-form { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.name-form input {
  font: 700 1rem var(--mono); color: var(--text); background: #06061a; border: 1px solid var(--purple);
  border-radius: 10px; padding: 10px 12px; width: min(240px, 100%); text-align: center;
}
.name-form input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(46, 242, 255, .2); }
.note { font: .78rem var(--mono); color: var(--muted); margin: 8px 0 0; }
.note.ok { color: var(--green); }
.note.warn { color: var(--yellow); }

/* Leaderboard */
.lb { margin-top: 14px; text-align: left; }
.lb-tabs { display: flex; gap: 6px; justify-content: center; margin-bottom: 8px; flex-wrap: wrap; }
.lb-tabs button {
  font: 700 .78rem var(--mono); text-transform: uppercase; letter-spacing: .06em; cursor: pointer;
  background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 20px; padding: 5px 12px;
}
.lb-tabs button[aria-selected="true"] { color: #031018; background: var(--cyan); border-color: var(--cyan); }
.lb-list { list-style: none; margin: 0; padding: 0; max-height: 230px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; }
.lb-list li { display: grid; grid-template-columns: 38px 1fr auto auto; gap: 8px; align-items: center; padding: 6px 10px; font: .85rem var(--mono); border-bottom: 1px solid rgba(36, 36, 90, .6); }
.lb-list li:last-child { border-bottom: 0; }
.lb-list .rk { color: var(--muted); }
.lb-list li:nth-child(1) .rk { color: var(--yellow); }
.lb-list li:nth-child(2) .rk { color: #cfd8ff; }
.lb-list li:nth-child(3) .rk { color: #ffaa66; }
.lb-list .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-list .sc { color: var(--yellow); font-weight: 700; }
.lb-list .lv { color: var(--muted); font-size: .75rem; }
.lb-list li.me { background: rgba(255, 61, 242, .16); outline: 1px solid var(--pink); }
.lb-list li.empty { display: block; text-align: center; color: var(--muted); }
.lb-you { font: .8rem var(--mono); color: var(--pink); text-align: center; margin: 6px 0 0; }

/* Touch D-pad (shown on touch screens) */
.touch-pad { display: none; margin-top: 12px; gap: 6px; grid-template-columns: repeat(3, 62px); grid-template-rows: repeat(2, 54px); }
.touch-pad button {
  font: 700 1.3rem var(--mono); color: var(--cyan); background: var(--bg-2); border: 1px solid #34348a; border-radius: 12px;
  touch-action: manipulation;
}
.touch-pad button:active { background: #1d1d55; }
.touch-pad .up { grid-column: 2; grid-row: 1; }
.touch-pad .left { grid-column: 1; grid-row: 2; }
.touch-pad .down { grid-column: 2; grid-row: 2; }
.touch-pad .right { grid-column: 3; grid-row: 2; }
@media (pointer: coarse) { .touch-pad { display: grid; } }

/* ---------- Ad space (never overlaps the game) ---------- */
.ad-wrap { display: flex; justify-content: center; padding: 14px 10px; }
.ad-slot {
  position: relative;
  width: 728px; max-width: 100%; height: 90px;
  border: 1px dashed #2c2c66; border-radius: 8px;
  background: rgba(13, 13, 43, .6);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ad-label { position: absolute; top: 3px; left: 8px; font: .62rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #6c6ca8; }
.ad-placeholder { font: .78rem var(--mono); color: #4d4d88; }
@media (max-width: 740px) { .ad-slot { width: 320px; height: 100px; } }

/* ---------- Footer ---------- */
.site-footer { text-align: center; padding: 14px 10px 22px; font: .82rem var(--mono); color: var(--muted); border-top: 1px solid var(--line); }
.site-footer a { color: var(--cyan); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .sep { margin: 0 8px; color: #44447a; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(20px); opacity: 0;
  z-index: 50; background: #11113a; color: var(--text); border: 1px solid var(--cyan); border-radius: 30px;
  padding: 10px 18px; font: .85rem var(--mono); transition: opacity .25s, transform .25s; pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* HUD bar above the canvas */
.hud { width: 100%; max-width: 960px; display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: space-between; align-items: center;
  font: 600 .86rem var(--mono); color: var(--muted); padding: 0 4px 8px; }
.hud b { color: var(--text); font-weight: 700; }
.hud .hi b { color: var(--yellow); }
.hud .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.hud .chip { border: 1px solid #34348a; border-radius: 999px; padding: 1px 8px; font-size: .74rem; color: var(--cyan); }
.hud .chip.pink { color: var(--pink); border-color: #6a2a78; }
.hud .chip.yellow { color: var(--yellow); border-color: #6b5a1f; }
.panel .title-logo { font: 800 clamp(2rem, 7vw, 3rem) var(--mono); letter-spacing: .08em; margin: 0 0 4px;
  background: linear-gradient(90deg, var(--cyan), var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px rgba(46, 242, 255, .35)); }
.legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px 12px; text-align: left; margin: 10px 0 4px; padding: 0; list-style: none; font-size: .85rem; color: var(--muted); }
.legend li i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
/* On small screens, menus take the whole viewport so the leaderboard stays readable */
@media (max-width: 740px) { .overlay { position: fixed; z-index: 50; } }