/* ============================================================
   XENORUN — FULL CINEMATIC CSS
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700;900&display=swap');

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

:root{
  --neon: #22d3ee;
  --neon2: #7c3aed;
  --neon3: #f472b6;
  --accent: #facc15;
  --bg: #03000f;
  --panel: rgba(2,0,20,0.85);
  --font-mono: 'Share Tech Mono', 'Courier New', monospace;
  --font-display: 'Orbitron', 'Courier New', monospace;
}

html, body{
  width:100%; height:100%;
  overflow:hidden;
  font-family: var(--font-mono);
  background: var(--bg);
  color: var(--neon);
}

/* ===== ANIMATED BG CANVAS ===== */
#bgCanvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  opacity:0.6;
}

/* ===== SCANLINES (global) ===== */
body::after{
  content:'';
  position:fixed;
  inset:0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.06) 3px,
    rgba(0,0,0,0.06) 4px
  );
  pointer-events:none;
  z-index:999;
}

/* ===== CHROME TOP ===== */
.chrome-top{
  position:fixed;
  top:0; left:0; right:0;
  height:38px;
  background: linear-gradient(90deg, rgba(0,0,30,0.95), rgba(10,0,40,0.95), rgba(0,0,30,0.95));
  border-bottom:1px solid rgba(34,211,238,0.25);
  display:flex;
  align-items:center;
  padding:0 20px;
  gap:16px;
  z-index:50;
  box-shadow: 0 2px 20px rgba(34,211,238,0.1);
}

.chrome-logo{
  font-family: var(--font-display);
  font-size:14px;
  font-weight:900;
  letter-spacing:4px;
  color: var(--neon);
  text-shadow: 0 0 10px var(--neon);
}

.chrome-sub{
  font-size:9px;
  letter-spacing:3px;
  color: rgba(196,181,253,0.5);
  text-transform:uppercase;
}

.chrome-lights{
  margin-left:auto;
  display:flex;
  gap:8px;
  align-items:center;
}

.light{
  width:8px; height:8px;
  border-radius:50%;
  animation: blink 2s infinite;
}
.l1{ background:#22d3ee; box-shadow:0 0 6px #22d3ee; animation-delay:0s; }
.l2{ background:#7c3aed; box-shadow:0 0 6px #7c3aed; animation-delay:0.7s; }
.l3{ background:#f472b6; box-shadow:0 0 6px #f472b6; animation-delay:1.4s; }

@keyframes blink{
  0%,100%{ opacity:1; }
  50%{ opacity:0.2; }
}

/* ===== CHROME BOTTOM ===== */
.chrome-bottom{
  position:fixed;
  bottom:0; left:0; right:0;
  height:32px;
  background: linear-gradient(90deg, rgba(0,0,30,0.95), rgba(10,0,40,0.95), rgba(0,0,30,0.95));
  border-top:1px solid rgba(34,211,238,0.2);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:50;
}

.credit-bar{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:9px;
  letter-spacing:2px;
  color: rgba(34,211,238,0.5);
}

.credit-sep{ color:rgba(124,58,237,0.6); }

.zone-indicator{
  color: var(--accent);
  font-size:9px;
  letter-spacing:2px;
  transition: color 0.5s;
}

/* ===== GAME WRAPPER ===== */
.game-wrapper{
  position:fixed;
  inset:38px 0 32px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10;
}

/* ===== ARCADE FRAME ===== */
.arcade-frame{
  position:relative;
  border-radius:14px;
  padding:10px;
  background: rgba(4,0,22,0.7);
  box-shadow:
    0 0 0 1px rgba(34,211,238,0.2),
    0 0 30px rgba(124,58,237,0.5),
    0 0 80px rgba(124,58,237,0.25),
    0 0 120px rgba(34,211,238,0.1),
    inset 0 0 40px rgba(0,0,0,0.6);
  backdrop-filter: blur(10px);
  transition: box-shadow 0.3s;
}

.arcade-frame:hover{
  box-shadow:
    0 0 0 1px rgba(34,211,238,0.4),
    0 0 50px rgba(124,58,237,0.7),
    0 0 100px rgba(124,58,237,0.4),
    0 0 160px rgba(34,211,238,0.15),
    inset 0 0 40px rgba(0,0,0,0.6);
}

/* Corner LEDs */
.led{
  position:absolute;
  width:10px; height:10px;
  border-radius:50%;
  background: var(--neon);
  box-shadow:0 0 8px var(--neon), 0 0 20px var(--neon);
  animation: ledPulse 3s infinite;
}
.led.tl{ top:6px; left:6px; animation-delay:0s; }
.led.tr{ top:6px; right:6px; animation-delay:0.75s; background:var(--neon2); box-shadow:0 0 8px var(--neon2); }
.led.bl{ bottom:6px; left:6px; animation-delay:1.5s; background:var(--neon3); box-shadow:0 0 8px var(--neon3); }
.led.br{ bottom:6px; right:6px; animation-delay:2.25s; background:var(--accent); box-shadow:0 0 8px var(--accent); }

@keyframes ledPulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:0.3; transform:scale(0.7); }
}

/* Scanlines on frame */
.scanlines{
  position:absolute;
  inset:10px;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 3px
  );
  pointer-events:none;
  border-radius:8px;
  z-index:5;
}

/* ===== CANVAS ===== */
canvas#game{
  display:block;
  width:100%;
  max-width:900px;
  height:auto;
  border-radius:8px;
  image-rendering: pixelated;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  position:relative;
  z-index:1;
}

/* ===== NAME INPUT ===== */
#nameInput{
  position:absolute;
  left:50%; top:52%;
  transform:translate(-50%,-50%);
  font-family: var(--font-display);
  font-size:20px;
  letter-spacing:4px;
  padding:12px 20px;
  border-radius:6px;
  border:1px solid var(--neon);
  outline:none;
  text-align:center;
  background: rgba(0,0,20,0.95);
  color: var(--neon);
  display:none;
  z-index:20;
  box-shadow: 0 0 20px rgba(34,211,238,0.3), inset 0 0 10px rgba(34,211,238,0.05);
  width:280px;
  text-transform:uppercase;
}

#nameInput::placeholder{ color:rgba(34,211,238,0.3); }
#nameInput:focus{ box-shadow: 0 0 30px rgba(34,211,238,0.5), inset 0 0 10px rgba(34,211,238,0.1); }

/* ===== MOBILE CONTROLS ===== */
.mobile-controls{
  position:fixed;
  bottom:40px;
  right:20px;
  z-index:60;
  display:none;
}

.mobile-btn{
  width:70px; height:70px;
  border-radius:50%;
  background: rgba(34,211,238,0.12);
  border:2px solid rgba(34,211,238,0.4);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  box-shadow: 0 0 20px rgba(34,211,238,0.2);
  transition: background 0.1s, transform 0.1s;
  user-select:none;
}

.mobile-btn:active{
  background: rgba(34,211,238,0.3);
  transform:scale(0.93);
}

.mobile-btn span{ font-size:22px; color:var(--neon); }
.mobile-btn small{ font-size:8px; letter-spacing:2px; color:rgba(34,211,238,0.6); margin-top:2px; }

/* ===== RESPONSIVE ===== */
@media (max-width:768px){
  .chrome-sub{ display:none; }
  .credit-bar .credit-item:not(.zone-indicator){ display:none; }
  .credit-sep{ display:none; }
  .arcade-frame{ padding:6px; border-radius:10px; }
  .mobile-controls{ display:flex; }
  canvas#game{ max-width:100vw; }
}

@media (max-width:480px){
  .chrome-top{ height:32px; }
  .chrome-logo{ font-size:11px; letter-spacing:2px; }
  .game-wrapper{ inset:32px 0 28px 0; }
  .chrome-bottom{ height:28px; }
  .arcade-frame{ padding:4px; }
  .led{ width:7px; height:7px; }
}

/* ===== ANIMATIONS ===== */
@keyframes neonPulse{
  0%,100%{ text-shadow:0 0 10px var(--neon), 0 0 20px var(--neon); }
  50%{ text-shadow:0 0 5px var(--neon); }
}

@keyframes glitch{
  0%{ clip-path:inset(0 0 98% 0); transform:translateX(-4px); }
  10%{ clip-path:inset(30% 0 50% 0); transform:translateX(4px); }
  20%{ clip-path:inset(70% 0 10% 0); transform:translateX(-2px); }
  30%{ clip-path:inset(10% 0 80% 0); transform:translateX(0); }
  100%{ clip-path:inset(0 0 0 0); transform:translateX(0); }
}