/* G-INTEL — HUD design tokens & shared styles */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700;800;900&family=Rajdhani:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&display=swap');

:root {
  /* RX-78-2 palette */
  --rx-red: #e63946;
  --rx-red-dim: #a11a26;
  --rx-blue: #1e6feb;
  --rx-blue-dim: #0f3f8f;
  --rx-yellow: #ffb400;
  --rx-white: #f5f5f7;

  /* System */
  --bg-void: #05070c;
  --bg-panel: #0c1220;
  --bg-panel-2: #131a2e;
  --line: #1c2540;
  --line-hot: #2b3d70;
  --text: #e6ebf5;
  --text-dim: #8b95a7;
  --text-mute: #556074;
  --success: #00d97e;
  --danger: var(--rx-red);
  --warn: var(--rx-yellow);
  --info: var(--rx-blue);

  --f-display: 'Orbitron', 'Rajdhani', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  --f-body: 'Rajdhani', 'Noto Sans JP', -apple-system, system-ui, sans-serif;
  --f-jp: 'Noto Sans JP', -apple-system, system-ui, sans-serif;
}

/* Corner brackets — used to give panels the HUD "targeting reticle" feel */
.hud-corners {
  position: relative;
}
.hud-corners::before,
.hud-corners::after,
.hud-corners > .hud-c1,
.hud-corners > .hud-c2 {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--rx-yellow);
  pointer-events: none;
}
.hud-corners::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.hud-corners::after  { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.hud-corners > .hud-c1 { bottom: -1px; left: -1px; border-right: none; border-top: none; }
.hud-corners > .hud-c2 { bottom: -1px; right: -1px; border-left: none; border-top: none; }

/* Scanline shimmer for image tiles */
.hud-scan {
  position: relative;
  overflow: hidden;
}
.hud-scan::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.02) 0px,
    rgba(255,255,255,0.02) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
}

/* Pulsing dot */
@keyframes hud-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.25); }
}
.hud-pulse {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--success);
  box-shadow: 0 0 8px currentColor;
  animation: hud-pulse 1.8s ease-in-out infinite;
}
.hud-pulse.red   { background: var(--rx-red); }
.hud-pulse.blue  { background: var(--rx-blue); }
.hud-pulse.yellow{ background: var(--rx-yellow); }

/* Radar sweep animation */
@keyframes hud-sweep {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.hud-sweep { animation: hud-sweep 4s linear infinite; transform-origin: center; }

/* Scroll — hide scrollbars but keep scrollable */
.scroll-clean::-webkit-scrollbar { display: none; }
.scroll-clean { -ms-overflow-style: none; scrollbar-width: none; }

/* Marquee shimmer for "LIVE" pill */
@keyframes hud-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.hud-shimmer {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,180,0,0.35) 50%,
    transparent 100%);
  background-size: 200% 100%;
  animation: hud-shimmer 3s linear infinite;
}

/* Body reset inside iOS content region */
.gi-app {
  font-family: var(--f-body);
  background: var(--bg-void);
  color: var(--text);
  min-height: 100%;
  position: relative;
}
.gi-app * { box-sizing: border-box; }

/* Grid backdrop */
.gi-grid-bg {
  background-image:
    linear-gradient(rgba(30,111,235,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,111,235,0.055) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* Placeholder color blocks per "images" key */
.mecha-red    { background: linear-gradient(135deg, #e63946 0%, #6a121b 100%); }
.mecha-blue   { background: linear-gradient(135deg, #1e6feb 0%, #0a2a5c 100%); }
.mecha-gray   { background: linear-gradient(135deg, #4a5468 0%, #1a2030 100%); }
.mecha-gold   { background: linear-gradient(135deg, #ffb400 0%, #6b4a00 100%); }
.mecha-white  { background: linear-gradient(135deg, #f5f5f7 0%, #7a7a80 100%); }

/* utility text sizes */
.mono { font-family: var(--f-mono); letter-spacing: 0.02em; }
.disp { font-family: var(--f-display); letter-spacing: 0.06em; }
.jp   { font-family: var(--f-jp); }

/* auto-monitor: newly added store rail pulse */
@keyframes giPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
@keyframes giBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(1.35); }
}