/* =============================================
   LE PROJET N.E.O.N. — Styles Cyberpunk Premium
   ============================================= */

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

/* ===== VARIABLES ===== */
:root {
  --bg:        #080b12;
  --bg2:       #0d1117;
  --bg3:       #111827;
  --cyan:      #00ffcc;
  --cyan-dim:  #00b49e;
  --blue:      #00b4ff;
  --purple:    #7b2fff;
  --red:       #ff003c;
  --red-dim:   #cc0030;
  --yellow:    #ffd700;
  --green:     #00ff88;
  --white:     #e0e8ff;
  --grey:      #4a5568;
  --grey2:     #2d3748;
  --font-t:    'Orbitron', monospace;
  --font-m:    'Share Tech Mono', monospace;
  --font-b:    'Rajdhani', sans-serif;
  --glow-c:    0 0 10px var(--cyan), 0 0 30px var(--cyan);
  --glow-r:    0 0 10px var(--red), 0 0 30px var(--red);
  --glow-p:    0 0 10px var(--purple), 0 0 30px var(--purple);
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%;
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-b);
  overflow: hidden;
  user-select: none;
}
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input { font-family: var(--font-m); }

/* ===== SCREENS ===== */
.screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: opacity 0.6s ease;
}
.screen.hidden { opacity: 0; pointer-events: none; }
.screen.active { opacity: 1; pointer-events: all; }
.hidden { display: none !important; }

/* ===== SCANLINES ===== */
.scanlines {
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.12) 2px,
    rgba(0,0,0,0.12) 4px
  );
  pointer-events: none;
  z-index: 999;
}

/* ===== PARTICLES BG ===== */
#bg-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.particle {
  position: absolute;
  border-radius: 50%;
  animation: floatUp linear infinite;
  opacity: 0;
}
@keyframes floatUp {
  0%   { transform: translateY(0) scale(1);  opacity: 0; }
  10%  { opacity: 0.8; }
  90%  { opacity: 0.4; }
  100% { transform: translateY(-100vh) scale(0.3); opacity: 0; }
}

/* ===== TITLE SCREEN ===== */
#title-screen {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(123,47,255,0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 30%, rgba(0,255,204,0.10) 0%, transparent 60%),
    linear-gradient(180deg, #080b12 0%, #0a0f1e 100%);
  flex-direction: column;
}
.title-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 20px;
  max-width: 700px;
  width: 100%;
}
.title-top-bar {
  font-family: var(--font-m);
  font-size: 0.65rem;
  color: var(--cyan-dim);
  letter-spacing: 6px;
  text-transform: uppercase;
  opacity: 0.7;
  animation: blink 2s step-end infinite;
}
@keyframes blink { 50% { opacity: 0.3; } }

.neon-line-h {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--purple), transparent);
  box-shadow: 0 0 8px var(--cyan);
  margin: 6px 0;
}
.title-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 0;
}
.title-pre {
  font-family: var(--font-t);
  font-size: 0.9rem;
  letter-spacing: 14px;
  color: var(--white);
  opacity: 0.7;
}
.game-title {
  font-family: var(--font-t);
  font-size: clamp(3.5rem, 10vw, 7rem);
  font-weight: 900;
  color: var(--cyan);
  text-shadow: var(--glow-c);
  letter-spacing: 0.1em;
  line-height: 1;
  animation: titlePulse 3s ease-in-out infinite;
}
@keyframes titlePulse {
  0%, 100% { text-shadow: 0 0 10px var(--cyan), 0 0 30px var(--cyan); }
  50%       { text-shadow: 0 0 20px var(--cyan), 0 0 60px var(--cyan), 0 0 100px var(--cyan); }
}
.game-title .dot { color: var(--purple); text-shadow: var(--glow-p); }
.title-post {
  font-family: var(--font-m);
  font-size: 0.75rem;
  letter-spacing: 6px;
  color: var(--grey);
  text-transform: uppercase;
}
.title-story {
  text-align: center;
  font-size: 1.05rem;
  color: #8899bb;
  line-height: 1.7;
  font-family: var(--font-b);
}
.title-story strong.highlight { color: var(--yellow); font-family: var(--font-m); }

/* Config */
.config-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.config-label {
  font-family: var(--font-m);
  font-size: 0.8rem;
  letter-spacing: 3px;
  color: var(--grey);
  text-transform: uppercase;
}
.time-options {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.time-btn {
  font-family: var(--font-m);
  font-size: 0.85rem;
  padding: 8px 18px;
  border: 1px solid var(--grey2);
  background: rgba(255,255,255,0.04);
  color: var(--grey);
  border-radius: 4px;
  transition: all 0.2s;
}
.time-btn:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(0,255,204,0.08); }
.time-btn.active {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(0,255,204,0.12);
  box-shadow: 0 0 8px rgba(0,255,204,0.3);
}
.time-btn small { font-size: 0.65rem; opacity: 0.7; }

/* Buttons */
.btn-primary {
  font-family: var(--font-t);
  font-size: 1rem;
  font-weight: 700;
  padding: 14px 40px;
  background: linear-gradient(135deg, var(--purple), var(--cyan));
  color: var(--bg);
  border: none;
  border-radius: 4px;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
  box-shadow: 0 0 20px rgba(0,255,204,0.3);
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 40px rgba(0,255,204,0.5), 0 6px 20px rgba(0,0,0,0.4);
}
.btn-primary:hover::before { opacity: 1; }
.btn-primary:active { transform: translateY(0); }
.btn-icon { margin-right: 8px; }

.title-credits {
  font-size: 0.7rem;
  color: var(--grey);
  letter-spacing: 2px;
  font-family: var(--font-m);
  opacity: 0.5;
}

/* ===== HUD ===== */
#hud {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 58px;
  background: linear-gradient(180deg, rgba(8,11,18,0.98), rgba(8,11,18,0.85));
  border-bottom: 1px solid rgba(0,255,204,0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 100;
  backdrop-filter: blur(10px);
}
#hud-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 200px;
}
#timer-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hud-label {
  font-family: var(--font-m);
  font-size: 0.55rem;
  letter-spacing: 3px;
  color: var(--grey);
}
#timer-value {
  font-family: var(--font-m);
  font-size: 1.4rem;
  color: var(--cyan);
  text-shadow: 0 0 10px var(--cyan);
  line-height: 1;
  transition: color 0.3s;
}
#timer-value.urgent { color: var(--red); text-shadow: var(--glow-r); animation: timerPulse 0.5s ease-in-out infinite; }
@keyframes timerPulse { 50% { opacity: 0.5; } }
#timer-bar-wrap {
  flex: 1;
  height: 6px;
  background: var(--bg3);
  border-radius: 3px;
  overflow: hidden;
  max-width: 120px;
  border: 1px solid var(--grey2);
}
#timer-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  border-radius: 3px;
  transition: width 1s linear, background 0.3s;
}
#timer-bar.urgent { background: linear-gradient(90deg, var(--red), #ff6600); }

#hud-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
#scene-title-hud {
  font-family: var(--font-t);
  font-size: 0.65rem;
  letter-spacing: 3px;
  color: var(--cyan);
  text-transform: uppercase;
}
#scene-dots { display: flex; gap: 8px; }
.sdot {
  font-size: 0.65rem;
  color: var(--grey2);
  cursor: default;
  transition: all 0.3s;
}
.sdot.done  { color: var(--green); }
.sdot.active { color: var(--cyan); text-shadow: 0 0 8px var(--cyan); font-size: 0.75rem; }

#hud-right {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 200px;
  justify-content: flex-end;
}
.hud-btn {
  font-family: var(--font-m);
  font-size: 0.75rem;
  padding: 6px 14px;
  border: 1px solid var(--grey2);
  background: rgba(255,255,255,0.04);
  color: var(--grey);
  border-radius: 3px;
  transition: all 0.2s;
  letter-spacing: 1px;
}
.hud-btn:hover { border-color: var(--yellow); color: var(--yellow); }
#hint-btn { font-size: 0.7rem; }

/* ===== SCENE CONTAINER ===== */
#scene-container {
  position: fixed;
  top: 58px;
  left: 0; right: 0;
  bottom: 72px;
  overflow: hidden;
}
.scene-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.scene-panel.hidden { display: none; }

.scene-bg-wrap {
  position: relative;
  width: 100%;
  height: calc(100% - 44px);
  overflow: hidden;
}
.scene-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.scene-surveillance .scene-bg {
  filter: sepia(0.5) hue-rotate(80deg) brightness(0.7) contrast(1.2);
}
.surveillance-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 40%, rgba(0,40,0,0.8) 100%),
    repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,80,0,0.04) 3px, rgba(0,80,0,0.04) 4px);
  pointer-events: none;
}

/* ===== HOTSPOT LAYER ===== */
.hotspot-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hs {
  position: absolute;
  pointer-events: all;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(0,255,204,0.4);
  border-radius: 8px;
  background: rgba(0,255,204,0.05);
  transition: all 0.3s;
  font-size: 1.4rem;
  backdrop-filter: blur(2px);
}
.hs:hover {
  border-color: var(--cyan);
  background: rgba(0,255,204,0.15);
  box-shadow: 0 0 20px rgba(0,255,204,0.4), inset 0 0 15px rgba(0,255,204,0.1);
  transform: scale(1.03);
}
.hs span { pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8)); }
.hs::after {
  content: attr(data-label);
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-m);
  font-size: 0.7rem;
  color: var(--cyan);
  background: rgba(8,11,18,0.9);
  padding: 2px 8px;
  border-radius: 3px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s;
  border: 1px solid rgba(0,255,204,0.3);
  pointer-events: none;
}
.hs:hover::after { opacity: 1; }
.hs.completed {
  border-color: var(--green);
  background: rgba(0,255,136,0.08);
  box-shadow: 0 0 12px rgba(0,255,136,0.3);
}
.hs.completed::before {
  content: '✓';
  position: absolute;
  top: -10px; right: -10px;
  background: var(--green);
  color: var(--bg);
  border-radius: 50%;
  width: 20px; height: 20px;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

/* Pulse animation */
.pulse-hs {
  animation: hotspotPulse 2.5s ease-in-out infinite;
}
@keyframes hotspotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,255,204,0.4); }
  50%       { box-shadow: 0 0 0 8px rgba(0,255,204,0); }
}

/* Scene objective bar */
.scene-objective {
  height: 44px;
  width: 100%;
  background: rgba(0,0,0,0.7);
  border-top: 1px solid rgba(0,255,204,0.15);
  display: flex;
  align-items: center;
  padding: 0 20px;
  font-size: 0.9rem;
  color: #8899bb;
  font-family: var(--font-b);
  font-weight: 400;
  flex-shrink: 0;
}
.scene-objective strong { color: var(--cyan); margin-right: 6px; font-family: var(--font-m); }

/* ===== INVENTAIRE ===== */
#inventory-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 72px;
  background: rgba(8,11,18,0.95);
  border-top: 1px solid rgba(0,255,204,0.15);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  z-index: 100;
  backdrop-filter: blur(10px);
}
.inv-label {
  font-family: var(--font-m);
  font-size: 0.6rem;
  letter-spacing: 3px;
  color: var(--grey);
  white-space: nowrap;
  text-transform: uppercase;
}
#inventory-items {
  display: flex;
  gap: 12px;
  align-items: center;
  flex: 1;
  overflow-x: auto;
}
.inv-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 12px;
  border: 1px solid rgba(0,255,204,0.3);
  border-radius: 6px;
  background: rgba(0,255,204,0.06);
  cursor: default;
  font-size: 1.3rem;
  white-space: nowrap;
  transition: all 0.2s;
  animation: itemAppear 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes itemAppear {
  from { transform: scale(0) rotate(-10deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg);   opacity: 1; }
}
.inv-item-label {
  font-family: var(--font-m);
  font-size: 0.6rem;
  color: var(--cyan);
  letter-spacing: 1px;
}
.inv-empty {
  font-family: var(--font-m);
  font-size: 0.7rem;
  color: var(--grey2);
  letter-spacing: 2px;
  font-style: italic;
}

/* ===== MODAL ===== */
#modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  transition: opacity 0.3s;
}
#modal-overlay.hidden { opacity: 0; pointer-events: none; }
#modal-box {
  position: relative;
  background: var(--bg2);
  border: 1px solid rgba(0,255,204,0.3);
  border-radius: 8px;
  max-width: 700px;
  width: 95vw;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 0 60px rgba(0,255,204,0.15), 0 30px 60px rgba(0,0,0,0.5);
  animation: modalIn 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes modalIn {
  from { transform: scale(0.85) translateY(30px); opacity: 0; }
  to   { transform: scale(1) translateY(0);       opacity: 1; }
}
#modal-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--purple), var(--cyan), var(--blue));
}
#modal-close {
  position: sticky;
  top: 12px;
  float: right;
  margin: 12px 12px 0 0;
  width: 32px; height: 32px;
  border: 1px solid var(--grey2);
  border-radius: 4px;
  background: rgba(255,255,255,0.05);
  color: var(--grey);
  font-size: 1rem;
  z-index: 10;
  transition: all 0.2s;
}
#modal-close:hover { border-color: var(--red); color: var(--red); }
#modal-content {
  padding: 24px;
  clear: both;
}

/* ===== MODAL CONTENT STYLES ===== */
.modal-title {
  font-family: var(--font-t);
  font-size: 1.1rem;
  color: var(--cyan);
  letter-spacing: 3px;
  margin-bottom: 16px;
  text-shadow: 0 0 10px var(--cyan);
}
.modal-subtitle {
  font-family: var(--font-m);
  font-size: 0.8rem;
  color: var(--grey);
  margin-bottom: 20px;
  letter-spacing: 1px;
}
.modal-section { margin-bottom: 20px; }
.modal-section h4 {
  font-family: var(--font-m);
  font-size: 0.75rem;
  color: var(--purple);
  letter-spacing: 2px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

/* Password game */
.notebook-content {
  background: #f5f0e8;
  color: #333;
  border-radius: 8px;
  padding: 20px;
  font-family: 'Courier New', monospace;
  border: 3px solid #d4c9a8;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
}
.notebook-content h4 { color: #555; margin-bottom: 12px; font-size: 0.9rem; }
.pwd-bad {
  text-decoration: line-through;
  color: #cc0000;
  margin: 6px 0;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pwd-bad::before { content: '✗'; color: #cc0000; font-weight: bold; }
.pwd-why {
  font-size: 0.75rem;
  color: #888;
  font-style: italic;
}

.postit-content {
  background: #fef08a;
  color: #333;
  border-radius: 4px;
  padding: 16px 20px;
  font-family: 'Courier New', monospace;
  transform: rotate(-1deg);
  box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
  position: relative;
}
.postit-content::before {
  content: '';
  position: absolute;
  top: -8px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 16px;
  background: rgba(254,240,138,0.8);
  border-radius: 2px;
}
.postit-phrase { font-size: 1.1rem; margin-bottom: 8px; font-weight: bold; }
.postit-hint { font-size: 0.8rem; color: #666; }

.pc-login {
  background: #0a0a0a;
  border: 2px solid #333;
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  font-family: var(--font-m);
}
.pc-login-logo {
  color: var(--cyan);
  font-size: 0.8rem;
  letter-spacing: 3px;
  margin-bottom: 20px;
}
.pc-login h4 { color: #aaa; margin-bottom: 16px; font-size: 0.85rem; }
.pc-input-wrap {
  display: flex;
  gap: 8px;
  align-items: center;
  max-width: 360px;
  margin: 0 auto;
}
.pc-input-wrap input {
  flex: 1;
  background: #111;
  border: 1px solid #333;
  border-radius: 4px;
  padding: 10px 14px;
  color: var(--cyan);
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s;
}
.pc-input-wrap input:focus { border-color: var(--cyan); box-shadow: 0 0 8px rgba(0,255,204,0.3); }
.pc-input-wrap input.wrong { border-color: var(--red); animation: shake 0.4s ease; }
.pc-input-wrap input.correct { border-color: var(--green); }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%,60% { transform: translateX(-6px); }
  40%,80% { transform: translateX(6px); }
}
.btn-login {
  padding: 10px 20px;
  background: var(--cyan);
  color: var(--bg);
  border-radius: 4px;
  font-family: var(--font-m);
  font-weight: bold;
  font-size: 0.85rem;
  transition: all 0.2s;
}
.btn-login:hover { background: var(--blue); box-shadow: 0 0 12px var(--blue); }
.pc-msg { margin-top: 12px; font-size: 0.8rem; min-height: 20px; }
.pc-msg.err { color: var(--red); }
.pc-msg.ok  { color: var(--green); }

/* Phishing messages */
.phone-ui {
  background: #1a1a2e;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid #333;
  max-height: 500px;
}
.phone-topbar {
  background: #0d1b2a;
  padding: 10px 16px;
  font-family: var(--font-m);
  font-size: 0.75rem;
  color: #aaa;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #333;
}
.msg-list { overflow-y: auto; max-height: 420px; }
.msg-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
  transition: background 0.2s;
  position: relative;
}
.msg-item:hover { background: rgba(255,255,255,0.05); }
.msg-item.selected { background: rgba(0,255,204,0.08); border-left: 3px solid var(--cyan); }
.msg-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--grey2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.msg-body { flex: 1; min-width: 0; }
.msg-sender {
  font-family: var(--font-b);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--white);
  margin-bottom: 3px;
}
.msg-preview {
  font-size: 0.8rem;
  color: var(--grey);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-time { font-size: 0.7rem; color: var(--grey); font-family: var(--font-m); }

.msg-detail {
  background: var(--bg3);
  border-radius: 8px;
  padding: 16px;
  margin-top: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 0.88rem;
  line-height: 1.7;
}
.msg-detail .sender-field {
  font-family: var(--font-m);
  font-size: 0.75rem;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.msg-detail .sender-label { color: var(--grey); }
.msg-detail .sender-val { color: var(--white); }
.suspicious { color: var(--red) !important; text-shadow: 0 0 8px var(--red); }
.phishing-link {
  display: inline-block;
  color: var(--blue);
  background: rgba(0,180,255,0.1);
  border: 1px solid rgba(0,180,255,0.3);
  border-radius: 3px;
  padding: 2px 8px;
  font-family: var(--font-m);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}
.phishing-link:hover { background: rgba(0,180,255,0.2); box-shadow: 0 0 8px rgba(0,180,255,0.4); }
.phishing-warning {
  background: rgba(255,0,60,0.1);
  border: 1px solid rgba(255,0,60,0.4);
  border-radius: 6px;
  padding: 10px 14px;
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--red);
  font-family: var(--font-m);
}

.anomaly-trigger {
  transition: all 0.2s;
}
.anomaly-trigger:hover {
  background: rgba(255, 255, 255, 0.05);
  border-bottom-color: rgba(255, 255, 255, 0.3);
}
.anomaly-trigger.found {
  border: 1px solid var(--red) !important;
  background: rgba(255, 0, 60, 0.15) !important;
  color: #ff4d6d !important;
  box-shadow: 0 0 8px rgba(255, 0, 60, 0.3);
  border-radius: 4px;
  padding: 0 4px;
  display: inline-block;
  animation: anomalyGlow 0.3s ease-out;
}
@keyframes anomalyGlow {
  0% { transform: scale(1); box-shadow: 0 0 20px var(--red); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Drag & drop scene 3 */
.sort-arena {
  display: flex;
  gap: 16px;
  width: 100%;
}
.sort-pool {
  flex: 1;
}
.sort-pool-label {
  font-family: var(--font-m);
  font-size: 0.7rem;
  letter-spacing: 2px;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-radius: 4px;
  text-align: center;
}
.sort-pool-label.sensitive { color: var(--red); border: 1px solid rgba(255,0,60,0.4); background: rgba(255,0,60,0.08); }
.sort-pool-label.public    { color: var(--green); border: 1px solid rgba(0,255,136,0.4); background: rgba(0,255,136,0.08); }
.sort-dropzone {
  min-height: 180px;
  border: 2px dashed rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.2s;
}
.sort-dropzone.over { border-color: var(--cyan); background: rgba(0,255,204,0.05); }
.sort-dropzone.sensitive-zone.over { border-color: var(--red); background: rgba(255,0,60,0.05); }
.sort-dropzone.public-zone.over { border-color: var(--green); background: rgba(0,255,136,0.05); }

.sort-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  min-height: 50px;
  padding: 8px;
  border: 1px solid var(--grey2);
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
}
.data-tag {
  padding: 6px 14px;
  background: var(--bg3);
  border: 1px solid var(--grey2);
  border-radius: 20px;
  font-family: var(--font-m);
  font-size: 0.78rem;
  color: var(--white);
  cursor: grab;
  transition: all 0.2s;
  user-select: none;
}
.data-tag:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 10px rgba(0,255,204,0.2); }
.data-tag:active { cursor: grabbing; opacity: 0.7; }
.data-tag.dragging { opacity: 0.4; }
.data-tag.correct-place { border-color: var(--green); color: var(--green); background: rgba(0,255,136,0.1); cursor: default; }
.data-tag.wrong-place { border-color: var(--red); color: var(--red); animation: shake 0.4s ease; }
.sort-feedback { margin-top: 12px; font-family: var(--font-m); font-size: 0.8rem; min-height: 24px; text-align: center; }
.sort-feedback.ok  { color: var(--green); }
.sort-feedback.err { color: var(--red); }

/* Cable puzzle */
.cable-panel {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  background: #111;
  border-radius: 8px;
  padding: 20px;
  border: 2px solid #333;
  min-height: 300px;
}
.cable-col { display: flex; flex-direction: column; gap: 18px; align-items: center; }
.cable-port {
  width: 60px; height: 44px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-m);
  font-size: 0.7rem;
  cursor: pointer;
  border: 3px solid;
  transition: all 0.25s;
  position: relative;
  font-weight: bold;
}
.cable-port:hover { transform: scale(1.08); }
.cable-port.selected { box-shadow: 0 0 16px 4px currentColor; transform: scale(1.12); }
.cable-port.connected { opacity: 0.7; cursor: default; }
.cable-port.connected::after { content: '✓'; position: absolute; top: -8px; right: -8px; font-size: 0.7rem; background: var(--green); color: #000; border-radius: 50%; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; }

.cable-port.red    { color: #ff4444; border-color: #ff4444; background: rgba(255,68,68,0.15); }
.cable-port.blue   { color: #4488ff; border-color: #4488ff; background: rgba(68,136,255,0.15); }
.cable-port.green  { color: #44ff88; border-color: #44ff88; background: rgba(68,255,136,0.15); }
.cable-port.yellow { color: #ffdd44; border-color: #ffdd44; background: rgba(255,221,68,0.15); }
.cable-port.orange { color: #ffaa00; border-color: #ffaa00; background: rgba(255,170,0,0.15); }

.cable-svg-area {
  width: 180px;
  height: 280px;
  position: relative;
  flex-shrink: 0;
}
.cable-svg-area svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.cable-wire { stroke-width: 5; fill: none; stroke-linecap: round; opacity: 0.8; transition: opacity 0.3s; }
.cable-wire.active { opacity: 1; filter: drop-shadow(0 0 4px currentColor); }

/* AI scene */
.ai-full-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
}
#ai-eye-container {
  position: relative;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eye-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(255,0,60,0.6);
  animation: eyeSpin 6s linear infinite;
}
.eye-ring.r1 { width: 140px; height: 140px; animation-duration: 8s; }
.eye-ring.r2 { width: 100px; height: 100px; animation-duration: 5s; animation-direction: reverse; border-color: rgba(255,60,0,0.5); }
.eye-ring.r3 { width: 60px; height: 60px; animation-duration: 3s; border-color: rgba(255,120,0,0.4); }
@keyframes eyeSpin { to { transform: rotate(360deg); } }
.eye-core {
  position: absolute;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, #ff6600, #ff0000, #990000);
  box-shadow: 0 0 20px #ff0000, 0 0 40px #ff4400;
  animation: eyePulse 1.5s ease-in-out infinite;
}
@keyframes eyePulse {
  0%,100% { box-shadow: 0 0 20px #ff0000, 0 0 40px #ff4400; transform: scale(1); }
  50%      { box-shadow: 0 0 40px #ff0000, 0 0 80px #ff4400; transform: scale(1.1); }
}
.eye-pupil {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #000;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}
#ai-terminal-text {
  font-family: var(--font-m);
  font-size: 0.8rem;
  color: #ff6644;
  text-align: center;
  max-width: 500px;
  line-height: 1.6;
  text-shadow: 0 0 8px #ff4400;
  min-height: 60px;
}
.btn-ai {
  padding: 10px 28px;
  border: 2px solid var(--red);
  background: rgba(255,0,60,0.1);
  color: var(--red);
  font-family: var(--font-t);
  font-size: 0.75rem;
  letter-spacing: 2px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  animation: redPulse 2s ease-in-out infinite;
}
@keyframes redPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,0,60,0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(255,0,60,0); }
}
.btn-ai:hover { background: rgba(255,0,60,0.2); box-shadow: 0 0 20px rgba(255,0,60,0.4); }

/* AI dialogue choices */
.ai-choices { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.ai-choice {
  padding: 12px 16px;
  border: 1px solid var(--grey2);
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  font-family: var(--font-b);
  font-size: 0.92rem;
  color: var(--white);
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  line-height: 1.5;
}
.ai-choice:hover { border-color: var(--cyan); background: rgba(0,255,204,0.06); color: var(--cyan); }
.ai-choice.wrong  { border-color: var(--red); background: rgba(255,0,60,0.1); color: var(--red); cursor: default; animation: shake 0.4s ease; }
.ai-choice.correct { border-color: var(--green); background: rgba(0,255,136,0.1); color: var(--green); cursor: default; }

.ai-neon-dialog {
  font-family: var(--font-m);
  font-size: 0.85rem;
  color: var(--red);
  background: rgba(255,0,60,0.08);
  border: 1px solid rgba(255,0,60,0.3);
  border-radius: 6px;
  padding: 14px;
  margin-bottom: 16px;
  line-height: 1.7;
  text-shadow: 0 0 6px rgba(255,0,60,0.5);
}

/* ===== VICTORY SCREEN ===== */
#victory-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
}
#victory-box {
  background: linear-gradient(135deg, #0d2818, #0a1f12);
  border: 2px solid var(--green);
  border-radius: 12px;
  padding: 40px;
  text-align: center;
  max-width: 480px;
  box-shadow: 0 0 40px rgba(0,255,136,0.3);
  animation: victoryAppear 0.8s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes victoryAppear {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.v-title {
  font-family: var(--font-t);
  font-size: 1.4rem;
  color: var(--green);
  text-shadow: 0 0 20px var(--green);
  margin-bottom: 24px;
}
.v-lines { text-align: left; margin-bottom: 20px; }
.v-line {
  font-family: var(--font-b);
  font-size: 1.05rem;
  color: var(--white);
  margin-bottom: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.v-line::before { content: '●'; color: var(--green); font-size: 0.5rem; }
.acro-letter {
  font-family: var(--font-t);
  font-size: 1.1rem;
  color: var(--green);
  text-shadow: 0 0 10px var(--green);
}
.v-sub { font-size: 0.85rem; color: #7aaa7a; font-family: var(--font-m); }

/* ===== GLITCH OVERLAY ===== */
#glitch-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  background: transparent;
}
#glitch-overlay.active {
  animation: glitchEffect 0.8s steps(4) forwards;
}
@keyframes glitchEffect {
  0%  { background: transparent; }
  10% { background: rgba(255,0,60,0.3); clip-path: inset(20% 0 60% 0); }
  20% { background: rgba(0,255,204,0.2); clip-path: inset(60% 0 10% 0); }
  30% { background: rgba(255,0,60,0.4); clip-path: inset(5% 0 80% 0); }
  40% { background: rgba(0,180,255,0.3); clip-path: inset(40% 0 30% 0); }
  50% { background: rgba(255,0,60,0.5); clip-path: inset(0 0 0 0); }
  60% { background: rgba(0,0,0,0.8); clip-path: inset(0 0 0 0); }
  70% { background: transparent; }
  80% { background: rgba(0,255,204,0.1); clip-path: inset(30% 0 50% 0); }
  100%{ background: transparent; }
}

/* ===== HACKER CONSOLE ===== */
#hacker-console {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: rgba(0,0,0,0.97);
  display: flex;
  flex-direction: column;
  font-family: var(--font-m);
  animation: consoleSlideIn 0.5s ease;
}
#hacker-console.hidden { display: none; }
@keyframes consoleSlideIn {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}
#hc-header {
  background: rgba(255,0,60,0.1);
  border-bottom: 2px solid var(--red);
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.hc-title { color: var(--red); font-size: 0.9rem; letter-spacing: 2px; text-shadow: 0 0 10px var(--red); }
.red-blink { animation: blink 0.5s step-end infinite; }
#hc-timer-display {
  font-size: 2rem;
  color: var(--red);
  text-shadow: 0 0 20px var(--red);
  font-weight: bold;
  animation: timerPulse 0.5s ease-in-out infinite;
}
#hc-output {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  font-size: 0.85rem;
  line-height: 2;
  color: #ff4444;
}
.hc-line { display: block; animation: typeIn 0.1s ease; }
@keyframes typeIn { from { opacity:0; } to { opacity:1; } }
.hc-line.system { color: #aaa; }
.hc-line.progress { color: var(--red); }
#hc-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid rgba(255,0,60,0.3);
  background: rgba(255,0,60,0.05);
  flex-shrink: 0;
}
.hc-prompt { color: #ff4444; font-size: 0.85rem; white-space: nowrap; }
#hc-input {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,68,68,0.5);
  color: #ff4444;
  font-size: 1.1rem;
  padding: 4px 8px;
  outline: none;
  letter-spacing: 3px;
  text-transform: uppercase;
}
#hc-input::placeholder { color: rgba(255,68,68,0.3); letter-spacing: 1px; text-transform: none; font-size: 0.8rem; }
#hc-submit {
  padding: 8px 20px;
  border: 1px solid var(--red);
  background: rgba(255,0,60,0.15);
  color: var(--red);
  font-family: var(--font-m);
  font-size: 0.8rem;
  border-radius: 3px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.2s;
}
#hc-submit:hover { background: rgba(255,0,60,0.3); box-shadow: 0 0 10px rgba(255,0,60,0.4); }

/* ===== DÉBRIEF ===== */
#debrief-screen {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0,255,136,0.1) 0%, transparent 60%),
    linear-gradient(180deg, #080b12, #0a1a10);
  z-index: 600;
  align-items: flex-start;
  overflow-y: auto;
}
.debrief-wrap {
  max-width: 900px;
  width: 100%;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
.db-header { text-align: center; }
.db-badge { font-size: 3rem; margin-bottom: 10px; }
.db-title {
  font-family: var(--font-t);
  font-size: 1.8rem;
  color: var(--green);
  text-shadow: 0 0 20px var(--green);
  margin-bottom: 8px;
}
.db-subtitle { color: #8899bb; font-size: 1.05rem; }
.db-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  width: 100%;
}
.db-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(0,255,136,0.2);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  transition: transform 0.2s;
}
.db-card:hover { transform: translateY(-4px); }
.dbc-icon { font-size: 2rem; margin-bottom: 10px; }
.db-card h3 { font-family: var(--font-t); font-size: 0.75rem; color: var(--green); letter-spacing: 2px; margin-bottom: 10px; }
.db-card p { font-size: 0.88rem; color: #8899bb; line-height: 1.6; margin-bottom: 10px; }
.dbc-ex {
  font-family: var(--font-m);
  font-size: 0.75rem;
  color: var(--grey);
  background: rgba(0,0,0,0.3);
  border-radius: 4px;
  padding: 6px;
}
.dbc-ex code { color: var(--cyan); }
.db-actions { margin-top: 10px; }

/* ===== GAME OVER ===== */
#gameover-screen {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255,0,60,0.15) 0%, transparent 70%),
    linear-gradient(180deg, #080b12, #1a0808);
  flex-direction: column;
  gap: 20px;
  z-index: 600;
}
.go-wrap { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.go-icon { font-size: 4rem; animation: goShake 0.5s ease-in-out infinite alternate; }
@keyframes goShake { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.go-title {
  font-family: var(--font-t);
  font-size: 2rem;
  color: var(--red);
  text-shadow: var(--glow-r);
}
.go-msg { color: #8899bb; font-size: 1rem; max-width: 400px; line-height: 1.6; }

/* ===== SMS NOTIFICATION (Scene 1 twist) ===== */
.sms-popup {
  background: rgba(20,20,30,0.97);
  border: 1px solid rgba(255,0,60,0.5);
  border-radius: 12px;
  padding: 16px 20px;
  max-width: 340px;
  box-shadow: 0 0 30px rgba(255,0,60,0.3);
}
.sms-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-family: var(--font-m);
  font-size: 0.75rem;
  color: var(--grey);
}
.sms-sender { color: var(--red); font-weight: bold; }
.sms-text {
  font-size: 0.92rem;
  color: var(--white);
  line-height: 1.6;
  font-family: var(--font-b);
}

/* ===== NOTIFICATIONS ===== */
#notif-container {
  position: fixed;
  top: 68px;
  right: 16px;
  z-index: 800;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 320px;
}
.notif {
  padding: 12px 16px;
  border-radius: 6px;
  font-family: var(--font-m);
  font-size: 0.8rem;
  line-height: 1.5;
  border-left: 3px solid;
  background: rgba(13,17,23,0.97);
  backdrop-filter: blur(10px);
  animation: notifSlide 0.3s ease;
  transition: opacity 0.4s;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
@keyframes notifSlide {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.notif.success { border-color: var(--green); color: var(--green); }
.notif.error   { border-color: var(--red);   color: var(--red); }
.notif.info    { border-color: var(--cyan);  color: var(--cyan); }
.notif.warning { border-color: var(--yellow); color: var(--yellow); }
.notif.fading  { opacity: 0; }

/* ===== SCENE TRANSITION ===== */
.scene-transition {
  animation: sceneIn 0.5s ease;
}
@keyframes sceneIn {
  from { opacity: 0; filter: brightness(2) blur(3px); }
  to   { opacity: 1; filter: brightness(1) blur(0); }
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--grey2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--grey); }

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
  .game-title { font-size: 3rem; }
  #hud { height: 50px; padding: 0 10px; }
  #scene-container { top: 50px; bottom: 60px; }
  #inventory-bar { height: 60px; }
  .db-cards { grid-template-columns: 1fr; }
  .sort-arena { flex-direction: column; }
}