/* ============================================
   ArcadeVector — Shared Game CSS v1.0
   CRT effects, overlays, HUD, touch controls
   Include in every AV game page
   ============================================ */

/* --- CSS Variables (game-specific palette) --- */
:root {
  --vg: #33ff66;
  --vb: #4488ff;
  --vw: #ccddff;
  --vy: #ffee44;
  --vr: #ff4455;
  --bg: #000;
}

/* --- Reset --- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--vg);
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* --- CRT Overlay (scanlines) --- */
.crt {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 1px,
    rgba(0,0,0,0.12) 1px, rgba(0,0,0,0.12) 3px
  );
}

/* --- Bloom Vignette --- */
.bloom {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9998;
  box-shadow: inset 0 0 80px rgba(0,0,0,0.6),
              inset 0 0 200px rgba(0,0,0,0.35);
}

/* --- Top Bar --- */
.top {
  width: 100%; max-width: 95vw;
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 16px;
  font-size: 11px; letter-spacing: 2px;
  position: relative; z-index: 10;
}
.top a {
  color: #1a3322; text-decoration: none;
}
.top a:hover { color: var(--vg); }
.top .tt {
  color: var(--vg);
  font-family: 'Orbitron', sans-serif;
  font-weight: 700; font-size: 11px;
  letter-spacing: 3px;
  text-shadow: 0 0 8px rgba(51,255,102,0.4);
}
.top button {
  background: none;
  border: 1px solid rgba(51,255,102,0.15);
  color: #1a3322; font-size: 14px;
  padding: 3px 8px; border-radius: 4px;
  cursor: pointer; font-family: inherit;
}

/* --- Canvas Wrapper --- */
.cw {
  position: relative;
  max-width: 95vw;
  border: 1px solid rgba(51,255,102,0.06);
  overflow: hidden;
}
canvas {
  display: block; width: 100%; height: auto;
  background: #000;
}

/* --- Overlay System --- */
.ov {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,0.88);
  z-index: 20; text-align: center;
}
.ov[hidden] { display: none; }

.ov-t {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: clamp(1.1rem, 4vw, 1.6rem);
  letter-spacing: 4px;
  color: var(--vg);
  text-shadow: 0 0 15px rgba(51,255,102,0.4);
  margin-bottom: 8px;
}
.ov-sc {
  font-family: 'Orbitron', sans-serif;
  font-size: 2.2rem; font-weight: 900;
  color: var(--vy);
  text-shadow: 0 0 20px rgba(255,238,68,0.4);
  margin: 8px 0;
}
.ov-sub {
  color: rgba(51,255,102,0.5);
  font-size: 11px; margin-bottom: 12px;
  letter-spacing: 1px; line-height: 1.6;
}
.ov-tg {
  color: rgba(51,255,102,0.4);
  font-size: 12px; margin-bottom: 18px;
  max-width: 340px; line-height: 1.5;
}

/* --- Button Stack --- */
.bs {
  display: flex; flex-direction: column;
  gap: 8px; align-items: center;
}

/* --- Buttons --- */
.b {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 3px;
  padding: 10px 28px;
  cursor: pointer;
  transition: all .2s;
  text-decoration: none;
  text-align: center;
  min-width: 200px;
}
.bp {
  background: none;
  border: 1px solid var(--vg);
  color: var(--vg);
  box-shadow: 0 0 10px rgba(51,255,102,0.15);
}
.bp:hover {
  box-shadow: 0 0 25px rgba(51,255,102,0.3);
  text-shadow: 0 0 8px rgba(51,255,102,0.5);
}
.bsc {
  background: none;
  border: 1px solid rgba(51,255,102,0.2);
  color: rgba(51,255,102,0.5);
}
.bg {
  background: none;
  color: rgba(51,255,102,0.3);
  border: 1px solid rgba(51,255,102,0.08);
  font-size: 9px; padding: 7px 18px;
}

/* --- Hint --- */
.hn {
  font-size: 9px;
  color: rgba(51,255,102,0.25);
  margin-top: 12px; letter-spacing: 2px;
}

/* --- Score List --- */
.sl {
  list-style: none;
  margin: 6px 0 12px;
  width: 100%; max-width: 240px;
}
.sl li {
  display: flex; justify-content: space-between;
  padding: 3px 0; font-size: 11px;
  color: rgba(51,255,102,0.4);
  border-bottom: 1px solid rgba(51,255,102,0.05);
}

/* --- How To Play Panel --- */
.hp {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.95);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 20px; overflow-y: auto;
}
.hp[hidden] { display: none; }
.hp h2 {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900; font-size: 1rem;
  letter-spacing: 3px; color: var(--vg);
  margin-bottom: 16px;
}
.hpc { max-width: 420px; text-align: left; }
.hps { margin-bottom: 14px; }
.hps h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 10px; color: var(--vb);
  margin-bottom: 4px; letter-spacing: 2px;
}
.hps p, .hps li {
  font-size: 11px;
  color: rgba(51,255,102,0.45);
  line-height: 1.5;
}
.hps ul { padding-left: 16px; }
.hps li { margin-bottom: 3px; }
kbd {
  background: rgba(51,255,102,0.06);
  border: 1px solid rgba(51,255,102,0.12);
  border-radius: 2px;
  padding: 1px 5px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px; color: var(--vg);
}

/* --- Touch Controls --- */
.tc {
  display: none;
  gap: 8px; justify-content: center;
  padding: 8px; z-index: 10;
}
@media (pointer: coarse) {
  .tc { display: flex; }
}
.tb {
  width: 60px; height: 50px; font-size: 16px;
  background: none;
  border: 1px solid rgba(51,255,102,0.15);
  color: var(--vg); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Share Tech Mono', monospace;
  -webkit-tap-highlight-color: transparent;
}
.tb:active {
  background: rgba(51,255,102,0.08);
}
.tb.fire {
  border-color: rgba(255,68,85,0.3);
  color: var(--vr);
  width: 80px; letter-spacing: 2px; font-size: 10px;
}

/* --- Animations --- */
@keyframes av-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes av-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
@keyframes av-glow {
  0%, 100% { text-shadow: 0 0 8px rgba(51,255,102,0.4); }
  50% { text-shadow: 0 0 20px rgba(51,255,102,0.7); }
}

/* --- Responsive --- */
@media (max-width: 480px) {
  .top { padding: 4px 10px; font-size: 10px; }
  .top .tt { font-size: 9px; letter-spacing: 2px; }
  .ov-t { font-size: 1rem; }
  .ov-sc { font-size: 1.6rem; }
  .b { min-width: 160px; padding: 8px 20px; font-size: 10px; }
  .tb { width: 50px; height: 44px; font-size: 14px; }
  .tb.fire { width: 66px; font-size: 9px; }
}
@media (max-width: 360px) {
  .cw { max-width: 100vw; border: none; }
  .top .tt { font-size: 8px; }
}

/* Clickable game cards */
.game-card { cursor: pointer; }
.game-card:hover { transform: translateY(-2px); }