/* style.css — atmospheric arcade title screen + HUD overlays.
   Direction: Dark + warm action accent (orange/amber), grain, oversized
   condensed display type. Canvas draws the game; this sheet styles the
   chrome (logo, menu, weapon gallery, pause/game-over/victory). */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Black+Ops+One&family=ZCOOL+KuaiLe&display=swap');

:root {
  --bg:        #07090f;
  --bg-2:      #0d1018;
  --surface:   #11151f;
  --surface-2: #161b27;
  --text:      #e9edf4;
  --muted:     #8a93a3;
  --accent:    #ff8a1f;
  --accent-2:  #ffc44d;
  --danger:    #ff4a3a;
  --line:      rgba(255,255,255,0.08);
  --ease:      cubic-bezier(0.23, 1, 0.32, 1);
}

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

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Rajdhani', system-ui, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* atmospheric gradient-mesh backdrop for the whole page */
body {
  background:
    radial-gradient(ellipse 70% 60% at 18% 12%, rgba(255, 120, 40, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 60% 70% at 85% 90%, rgba(180, 40, 40, 0.16) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(255, 180, 70, 0.05) 0%, transparent 60%),
    var(--bg);
}
/* film grain */
body::after {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

#app {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
#app > * { pointer-events: auto; }

/* ---- stage / canvas ---- */
#stage {
  position: relative;
  width: min(100vw, calc(100vh * (1280 / 720)));
  height: min(100vh, calc(100vw * (720 / 1280)));
  display: flex; align-items: center; justify-content: center;
}
#game {
  display: block;
  background: #05070c;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 30px 80px rgba(0,0,0,0.6),
    0 0 120px rgba(255, 120, 40, 0.08);
  border-radius: 4px;
  cursor: crosshair;
  /* prevent the browser from hijacking touches (scroll/zoom/swipe) over the canvas */
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}

/* ---- overlay base ---- */
.overlay {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  z-index: 20;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
}
.overlay.show {
  display: flex;
  opacity: 1;
  pointer-events: auto;
  animation: ovIn 0.4s var(--ease);
}
@keyframes ovIn { from { opacity: 0; } to { opacity: 1; } }

/* =====================================================================
   LOGO — 劳俊霖的枪战  /  GAME OF LIN
   ===================================================================== */
.logo {
  position: relative;
  margin-bottom: 8px;
  user-select: none;
}
/* crosshair accent above the title */
.logo .scope {
  width: 86px; height: 86px;
  margin: 0 auto 6px;
  position: relative;
}
.logo .scope svg { width: 100%; height: 100%; display: block; }
.logo .scope::before,
.logo .scope::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
}
.logo .scope::before { width: 70px; height: 2px; }
.logo .scope::after  { width: 2px; height: 70px; }

.logo .cn {
  font-family: 'ZCOOL KuaiLe', 'Rajdhani', sans-serif;
  font-size: clamp(46px, 7.4vw, 96px);
  line-height: 0.92;
  letter-spacing: 0.02em;
  color: var(--text);
  text-shadow:
    0 0 1px rgba(255,255,255,0.4),
    4px 4px 0 #7a1f00,
    6px 6px 0 rgba(0,0,0,0.6);
  position: relative;
  display: inline-block;
}
/* slash of accent color through the title */
.logo .cn .hot { color: var(--accent-2); }
.logo .cn::after {
  content: '';
  position: absolute; left: -6px; right: -6px; bottom: -2px; height: 5px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.5;
}

.logo .en {
  font-family: 'Black Ops One', 'Rajdhani', sans-serif;
  font-size: clamp(16px, 2.2vw, 26px);
  letter-spacing: 0.42em;
  color: var(--accent);
  margin-top: 10px;
  text-indent: 0.42em;
  opacity: 0.92;
}
.logo .tag {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: clamp(12px, 1.4vw, 15px);
  letter-spacing: 0.28em;
  color: var(--muted);
  margin-top: 14px;
  text-transform: uppercase;
}
.logo .tag b { color: var(--accent-2); font-weight: 700; }

/* ---- menu layout ---- */
#menu { padding: 5vh 4vw; overflow-y: auto; }
.menu-inner {
  max-width: 1100px; width: 100%;
  display: flex; flex-direction: column; align-items: center;
}

.tagline {
  max-width: 640px;
  color: var(--muted);
  font-size: clamp(13px, 1.4vw, 16px);
  line-height: 1.6;
  margin: 10px 0 26px;
}

.cta-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; }

.btn {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 14px 34px;
  border: none;
  cursor: pointer;
  color: #1a0d00;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  border-radius: 3px;
  box-shadow: 0 6px 0 #a64a00, 0 10px 24px rgba(255, 138, 31, 0.35);
  transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease);
  position: relative;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #a64a00, 0 14px 30px rgba(255, 138, 31, 0.45); }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #a64a00, 0 4px 10px rgba(255, 138, 31, 0.3); }

.btn.ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: none;
}
.btn.ghost:hover { background: rgba(255,255,255,0.05); transform: translateY(-1px); box-shadow: none; }
.btn.ghost:active { transform: translateY(0); box-shadow: none; }

.btn.small { font-size: 14px; padding: 10px 22px; }

/* ---- info panels (how to play / weapons / levels) ---- */
.panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  width: 100%;
  margin-top: 38px;
  text-align: left;
}
@media (max-width: 820px) { .panels { grid-template-columns: 1fr; } }

.panel {
  background: linear-gradient(180deg, rgba(22,27,39,0.7), rgba(13,16,24,0.7));
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 20px 22px;
  backdrop-filter: blur(2px);
}
.panel h3 {
  font-family: 'Black Ops One', sans-serif;
  font-size: 15px;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.panel h3::before {
  content: ''; width: 18px; height: 2px; background: var(--accent);
}

.kv { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.kv:last-child { border-bottom: none; }
.kv b { color: var(--accent-2); font-weight: 700; font-family: 'Rajdhani'; }
.kv span:first-child { color: var(--muted); }

/* weapon gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}
.wcard {
  background: rgba(13,16,24,0.7);
  border: 1px solid var(--line);
  border-left: 3px solid var(--wc);
  border-radius: 5px;
  padding: 11px 12px;
  transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease);
}
.wcard:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.4); }
.wcard-top { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.wchip {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Black Ops One', sans-serif; font-size: 15px;
  color: #0a0a0a; border-radius: 4px;
  box-shadow: 0 0 12px var(--wg);
}
.wname { font-weight: 700; font-size: 14px; color: var(--text); }
.wname + .wrarity { font-size: 11px; letter-spacing: 0.1em; color: var(--wc); text-transform: uppercase; }
.wdesc { font-size: 12px; line-height: 1.45; color: var(--muted); margin-bottom: 8px; min-height: 34px; }
.wstats { display: flex; gap: 10px; font-size: 11px; color: var(--muted); flex-wrap: wrap; }
.wstats span { background: rgba(255,255,255,0.05); padding: 2px 7px; border-radius: 3px; }

/* level list */
.lvlrow {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: baseline;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
}
.lvlrow:last-child { border-bottom: none; }
.lvlno { font-family: 'Black Ops One', sans-serif; color: var(--accent); font-size: 16px; }
.lvlname { font-weight: 700; font-size: 15px; }
.lvlsub { display:block; font-size: 11px; color: var(--muted); letter-spacing: 0.1em; }
.lvlboss { grid-column: 1 / -1; font-size: 11px; color: var(--danger); letter-spacing: 0.08em; }

/* ---- top bar (sound) ---- */
.topbar {
  position: absolute; top: 12px; right: 14px; z-index: 30;
  display: flex; gap: 8px;
}
.btn-sound {
  font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 12px;
  letter-spacing: 0.08em;
  background: rgba(13,16,24,0.8); color: var(--text);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 7px 12px; cursor: pointer;
  transition: background 0.12s var(--ease);
}
.btn-sound:hover { background: rgba(255,255,255,0.07); }
.btn-sound.off { color: var(--muted); }

/* ---- touch-only UI ---- */
/* Hidden on desktop (no fine pointer / no touch); shown on touch devices */
.touch-only { display: none; }
@media (pointer: coarse), (hover: none) {
  .touch-only { display: inline-flex; }
}
.btn-pause {
  width: 40px; height: 38px;
  align-items: center; justify-content: center;
  font-size: 18px; line-height: 1;
  background: rgba(13,16,24,0.8); color: var(--text);
  border: 1px solid var(--line); border-radius: 4px;
  cursor: pointer;
}
.btn-pause:active { background: rgba(255,255,255,0.12); }

/* ---- generic overlay content (pause / gameover / victory) ---- */
.ov-title {
  font-family: 'ZCOOL KuaiLe', sans-serif;
  font-size: clamp(40px, 6vw, 72px);
  letter-spacing: 0.04em;
  text-shadow: 4px 4px 0 rgba(0,0,0,0.6);
}
.ov-title.red { color: var(--danger); }
.ov-title.gold { color: var(--accent-2); }
.ov-sub {
  font-family: 'Black Ops One', sans-serif;
  letter-spacing: 0.3em; color: var(--muted);
  font-size: clamp(12px, 1.6vw, 16px); margin-top: 8px;
}
.ov-stats {
  display: flex; gap: 36px; margin: 26px 0;
}
.ov-stat { text-align: center; }
.ov-stat .n { font-family: 'Black Ops One'; font-size: 34px; color: var(--accent-2); }
.ov-stat .l { font-size: 12px; letter-spacing: 0.16em; color: var(--muted); text-transform: uppercase; margin-top: 4px; }

.ov-hint { color: var(--muted); font-size: 13px; margin-top: 22px; letter-spacing: 0.08em; }
.ov-hint kbd {
  font-family: 'Rajdhani'; font-weight: 700;
  background: rgba(255,255,255,0.08); border: 1px solid var(--line);
  border-radius: 3px; padding: 1px 7px; color: var(--text);
}

/* pause specific */
#pause .ov-title { color: var(--text); }

/* scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}