/* ============================================================
   THEME: NEO-RETRO CONSOLE
   ============================================================ */
:root {
  --bg-body: #121214;
  --screen-bg: #1a1b26; /* Bleu nuit profond */
  
  /* Palette Gameboy Advance Moderne */
  --c-black: #0f0f12;
  --c-white: #e0e0e0;
  --c-accent: #7aa2f7;  /* Bleu doux */
  --c-highlight: #bb9af7; /* Violet */
  --c-success: #9ece6a; /* Vert */
  --c-alert: #f7768e;   /* Rouge */
  
  --font-header: 'Press Start 2P', cursive;
  --font-text: 'VT323', monospace;
}

* { box-sizing: border-box; user-select: none; }

html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  background: var(--bg-body);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-text);
  overflow: hidden;
}

/* --- LE DEVICE (CONTENEUR ÉCRAN) --- */
.device-container {
  position: relative;
  width: 100%; max-width: 800px; /* Un peu plus large */
  height: 100%; max-height: 600px;
  padding: 20px;
  display: flex; align-items: center; justify-content: center;
}

.screen {
  position: relative;
  width: 100%; height: 100%;
  background: var(--screen-bg);
  border-radius: 20px;
  border: 8px solid #2a2b36;
  box-shadow: 
    0 0 0 2px #000,
    0 20px 50px rgba(0,0,0,0.6),
    inset 0 0 60px rgba(0,0,0,0.5);
  overflow: hidden;
  image-rendering: pixelated;
}

/* --- EFFETS CRT & SCANLINES --- */
.scanlines {
  position: absolute; inset: 0; pointer-events: none; z-index: 100;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.2));
  background-size: 100% 4px;
}

.crt-overlay {
  position: absolute; inset: 0; pointer-events: none; z-index: 101;
  background: radial-gradient(circle, rgba(0,0,0,0) 50%, rgba(0,0,0,0.4) 100%);
  box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
}

/* ============================================================
   1. BOOT SEQUENCE (GLITCH)
   ============================================================ */
.layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity 0.5s;
}

/* Classe utilitaire pour cacher les éléments */
.hidden { 
  opacity: 0 !important; 
  pointer-events: none !important; 
  visibility: hidden !important; 
}

.boot-layer { 
  background: #000; 
  z-index: 50; 
  color: var(--c-white); 
  opacity: 1; /* Visible par défaut */
}

.boot-logo {
  font-family: var(--font-header); font-size: 40px;
  position: relative; color: var(--c-white);
  animation: glitch 1s infinite;
}
.boot-logo::before, .boot-logo::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000;
}
.boot-logo::before { left: 2px; text-shadow: -1px 0 #ff00c1; clip: rect(44px, 450px, 56px, 0); animation: glitch-anim 5s infinite linear alternate-reverse; }
.boot-logo::after { left: -2px; text-shadow: -1px 0 #00fff9; clip: rect(44px, 450px, 56px, 0); animation: glitch-anim2 5s infinite linear alternate-reverse; }

.boot-sub { margin-top: 20px; font-size: 20px; opacity: 0; animation: fadeIn 0.5s forwards 1s; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
   2. TITLE SCREEN
   ============================================================ */
.title-layer { z-index: 40; background: var(--screen-bg); overflow: hidden; }

.scrolling-bg {
  position: absolute; inset: -50%;
  background-image: 
    linear-gradient(transparent 90%, rgba(122, 162, 247, 0.1) 50%),
    linear-gradient(90deg, transparent 90%, rgba(122, 162, 247, 0.1) 50%);
  background-size: 40px 40px;
  transform: perspective(500px) rotateX(60deg);
  animation: gridScroll 5s linear infinite;
}

.title-content { text-align: center; z-index: 2; text-shadow: 4px 4px 0px #000; }

.game-title {
  font-family: var(--font-header); font-size: 42px; color: var(--c-highlight);
  line-height: 1.2; margin: 0;
  transform: skew(-5deg);
}
.sub-title { color: var(--c-white); font-size: 24px; letter-spacing: 10px; display: block; margin-top: 10px; }

.press-start {
  margin-top: 50px; font-size: 24px; color: var(--c-success);
  animation: blink 1s step-end infinite;
}

/* ============================================================
   3. SCENE (PROF & DIALOGUE)
   ============================================================ */
.scene-layer { z-index: 30; background: var(--screen-bg); }

/* Le Prof */
.professor-container {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  height: 85%; width: 100%;
  display: flex; align-items: flex-end; justify-content: center;
  pointer-events: none;
}
.prof-sprite img {
  width: auto; height: 90%; 
  image-rendering: pixelated;
  filter: drop-shadow(0 0 10px rgba(0,0,0,0.5));
  animation: breathe 4s ease-in-out infinite;
}

/* --- POPUP D'APPEL --- */
.call-popup {
  position: absolute; top: 15%; left: 50%; transform: translateX(-50%) scale(0);
  background: rgba(15, 15, 18, 0.95);
  border: 2px solid var(--c-white);
  border-radius: 8px;
  width: 280px; padding: 10px;
  box-shadow: 0 10px 20px #000;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 60;
}
.call-popup.active { transform: translateX(-50%) scale(1); }

.call-header { display: flex; gap: 6px; padding-bottom: 6px; border-bottom: 2px dashed #333; }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.red { background: #f7768e; } .yellow { background: #e0af68; } .green { background: #9ece6a; }

.call-body { display: flex; align-items: center; gap: 15px; }
.caller-avatar {
  width: 50px; height: 50px; background: #222; border: 2px solid var(--c-white);
  display: grid; place-items: center; position: relative;
}
.avatar-pulse {
  position: absolute; inset: -4px; border: 2px solid var(--c-success);
  animation: ripple 1.5s infinite;
}
.icon { font-size: 24px; }
.caller-info { display: flex; flex-direction: column; }
.caller-info .label { font-size: 14px; color: #666; }
.caller-info .name { font-size: 20px; color: var(--c-white); font-weight: bold; }

.btn-rpg {
  width: 100%; background: var(--c-white); border: none; padding: 8px;
  font-family: var(--font-text); font-size: 18px; cursor: pointer;
  border: 2px solid #000; box-shadow: 4px 4px 0 #000;
  transition: transform 0.1s;
}
.btn-rpg:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #000; }
.btn-rpg.accept { background: var(--c-success); color: #000; }
.blink { animation: blink 1s infinite; }

/* --- DIALOGUE BOX --- */
.dialogue-box {
  position: absolute; bottom: 20px; left: 20px; right: 20px;
  height: 140px;
  background: rgba(0, 0, 0, 0.9); 
  border: 4px solid var(--c-white); border-radius: 4px;
  padding: 20px;
  color: var(--c-white);
  display: flex; flex-direction: column;
  box-shadow: 0 10px 0 rgba(0,0,0,0.5);
  z-index: 55;
}
.dialogue-name {
  background: var(--c-white); color: #000;
  display: inline-block; padding: 4px 8px;
  font-family: var(--font-header); font-size: 12px;
  position: absolute; top: -15px; left: 10px;
  border: 2px solid #000;
}
.dialogue-content {
  font-size: 24px; line-height: 1.2; flex: 1; position: relative; margin-top: 5px;
}
.next-cursor {
  position: absolute; bottom: 0; right: 0;
  animation: bounce 1s infinite;
  font-size: 20px;
}

/* --- MENU DE CHOIX --- */
.menu-overlay {
  position: absolute; bottom: 180px; right: 20px;
  z-index: 60;
}
.menu-box {
  background: rgba(0,0,0,0.95); border: 4px solid var(--c-white);
  padding: 10px; width: 280px;
  box-shadow: 8px 8px 0 rgba(0,0,0,0.5);
}
.menu-header {
  background: var(--c-accent); color: #000; text-align: center;
  font-family: var(--font-header); font-size: 12px; padding: 5px;
  margin-bottom: 10px;
}
.menu-options { list-style: none; padding: 0; margin: 0; }
.menu-item {
  padding: 8px; color: #888; font-size: 22px; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
}
.menu-item .cursor { opacity: 0; }
.menu-item.selected { color: var(--c-white); background: rgba(255,255,255,0.1); }
.menu-item.selected .cursor { opacity: 1; }

/* --- ANIMATIONS --- */
@keyframes glitch { 0% { transform: translate(0) } 20% { transform: translate(-2px, 2px) } 40% { transform: translate(-2px, -2px) } 60% { transform: translate(2px, 2px) } 80% { transform: translate(2px, -2px) } 100% { transform: translate(0) } }
@keyframes glitch-anim { 0% { clip: rect(20px, 9999px, 10px, 0); } 100% { clip: rect(80px, 9999px, 100px, 0); } }
@keyframes gridScroll { 0% { background-position: 0 0; } 100% { background-position: 0 40px; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes breathe { 0%, 100% { transform: scaleY(1) translateX(-50%); } 50% { transform: scaleY(1.02) translateX(-50%); } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes ripple { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2); opacity: 0; } }