/* ================================================================
   DERELICT — visual design
   Palette: void #05060a, panel #0d1117, cyan #3ff0e0, danger #ff3b5c,
            warning #ffb347, ai-violet #b26bff, ink #dfefee, muted #7e93a0
   Type: Orbitron (logo/display), Rajdhani (HUD/UI), Share Tech Mono (data/terminal)
   Signature: angled "cut-corner" console panels + a persistent CRT scanline sweep
   ================================================================ */

:root{
  --void:#05060a;
  --panel:#0d1117;
  --panel2:#11161f;
  --cyan:#3ff0e0;
  --danger:#ff3b5c;
  --warn:#ffb347;
  --ai:#b26bff;
  --ink:#dfefee;
  --muted:#7e93a0;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; width:100%; height:100%; overflow:hidden; background:var(--void); }
body{ font-family:'Rajdhani',sans-serif; color:var(--ink); user-select:none; }

#gameCanvas{ position:fixed; inset:0; display:block; }

/* persistent CRT scanline sweep — the signature atmospheric touch */
body::after{
  content:'';
  position:fixed; inset:0; pointer-events:none; z-index:5;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 2px, transparent 3px);
  mix-blend-mode:overlay;
}
body.alarm-flash::before{
  content:''; position:fixed; inset:0; z-index:6; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(255,59,92,0) 40%, rgba(255,59,92,0.35) 100%);
  animation:alarmPulse 0.5s ease-in-out infinite alternate;
}
@keyframes alarmPulse{ from{ opacity:0.4; } to{ opacity:1; } }

/* ---------------- angled console panel mixin (used across HUD) ---------------- */
.panel-cut{
  background:linear-gradient(160deg, var(--panel) 0%, var(--panel2) 100%);
  border:1px solid rgba(63,240,224,0.35);
  clip-path:polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}

/* ================= MINIMAP ================= */
#minimapCanvas{
  position:fixed; top:16px; right:16px; z-index:4;
  background:rgba(5,8,12,0.75);
  border:1px solid rgba(63,240,224,0.4);
  clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  box-shadow:0 0 18px rgba(63,240,224,0.15);
}

/* ================= HUD ================= */
#hud{ position:fixed; inset:0; z-index:4; pointer-events:none; }
#hud > *{ pointer-events:auto; }

#missionBanner{
  position:fixed; top:16px; left:16px; width:min(340px, 60vw);
  padding:12px 16px; z-index:4;
  background:linear-gradient(160deg, rgba(13,17,23,0.92) 0%, rgba(17,22,31,0.92) 100%);
  border:1px solid rgba(63,240,224,0.35);
  clip-path:polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  box-shadow:0 0 20px rgba(63,240,224,0.08);
}
.mission-row{ display:flex; align-items:baseline; gap:8px; }
.mission-label{ font-family:'Share Tech Mono',monospace; font-size:10px; letter-spacing:2px; color:var(--cyan); opacity:0.8; }
#missionTitle{ font-family:'Orbitron',sans-serif; font-size:15px; font-weight:700; }
#missionDesc{ font-size:14px; color:var(--muted); margin-top:4px; }
#missionDots{ display:flex; gap:5px; margin-top:10px; }
.dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.12); }
.dot.done{ background:var(--cyan); }
.dot.active{ background:var(--warn); box-shadow:0 0 8px var(--warn); }

#roomBanner{
  position:fixed; top:20px; left:50%; transform:translate(-50%,-30px);
  font-family:'Orbitron',sans-serif; font-size:22px; font-weight:700;
  padding:10px 28px; opacity:0; transition:all 0.4s ease;
  background:rgba(5,8,12,0.7); border:1px solid rgba(63,240,224,0.3);
  clip-path:polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%);
  z-index:4; pointer-events:none;
}
#roomBanner.show{ opacity:1; transform:translate(-50%,0); }
.room-icon{ margin-right:8px; }

#interactPrompt{
  position:fixed; bottom:120px; left:50%; transform:translateX(-50%);
  font-family:'Share Tech Mono',monospace; font-size:15px;
  background:rgba(5,8,12,0.85); border:1px solid var(--cyan); color:var(--cyan);
  padding:8px 18px; z-index:4; border-radius:4px;
  animation:promptPulse 1.4s ease-in-out infinite;
}
@keyframes promptPulse{ 0%,100%{ box-shadow:0 0 6px rgba(63,240,224,0.3); } 50%{ box-shadow:0 0 16px rgba(63,240,224,0.7); } }

#bagBtn, #pauseBtn{
  position:fixed; right:16px; z-index:4;
  width:54px; height:54px; font-size:22px;
  background:rgba(13,17,23,0.85); border:1px solid rgba(63,240,224,0.4); color:var(--ink);
  clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  cursor:pointer;
}
/* stacked well above the mobile action button (bottom:26 to 110px) so the
   Interact / Inventory / Pause controls can never overlap each other */
#pauseBtn{ bottom:120px; }
#bagBtn{ bottom:182px; }
#bagBtn:active, #pauseBtn:active{ background:rgba(63,240,224,0.25); }

/* ================= NOTIFICATIONS ================= */
#notifications{ position:fixed; top:90px; right:16px; z-index:20; display:flex; flex-direction:column; gap:8px; width:min(300px,70vw); }
.toast{
  font-family:'Rajdhani',sans-serif; font-size:14px; font-weight:600;
  padding:10px 14px; background:rgba(13,17,23,0.95); border-left:4px solid var(--cyan);
  opacity:0; transform:translateX(30px); transition:all 0.35s ease;
}
.toast.show{ opacity:1; transform:translateX(0); }
.toast-granted{ border-color:var(--cyan); }
.toast-denied{ border-color:var(--danger); }
.toast-item{ border-color:var(--warn); }
.toast-mission{ border-color:var(--ai); }
.toast-log{ border-color:var(--muted); font-family:'Share Tech Mono',monospace; font-size:12px; }
.toast-info{ border-color:var(--muted); }

#achievementLayer{ position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:25; display:flex; flex-direction:column; gap:8px; align-items:center; }
.achievement-toast{
  display:flex; align-items:center; gap:12px; font-size:13px;
  background:linear-gradient(90deg, rgba(178,107,255,0.25), rgba(13,17,23,0.95));
  border:1px solid var(--ai); padding:10px 18px;
  opacity:0; transform:translateY(-20px); transition:all 0.4s ease;
}
.achievement-toast.show{ opacity:1; transform:translateY(0); }
.ach-icon{ font-size:26px; }

#debugOverlay{
  display:none; position:fixed; bottom:16px; left:16px; z-index:30;
  font-family:'Share Tech Mono',monospace; font-size:11px; color:#7fffb0;
  background:rgba(0,0,0,0.75); padding:10px 12px; margin:0; white-space:pre; border:1px solid #7fffb0;
}

/* ================= INVENTORY (centered modal) ================= */
#inventoryBackdrop{
  position:fixed; inset:0; z-index:14; background:rgba(3,4,7,0.65);
  opacity:0; pointer-events:none; transition:opacity 0.25s ease;
}
#inventoryBackdrop.open{ opacity:1; pointer-events:auto; }
#inventoryPanel{
  position:fixed; top:50%; left:50%; width:min(420px,92vw); max-height:78vh;
  transform:translate(-50%,-50%) scale(0.94); opacity:0; pointer-events:none;
  background:rgba(11,15,20,0.98); border:1px solid rgba(63,240,224,0.4);
  clip-path:polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  z-index:15; padding:18px; overflow-y:auto; transition:all 0.25s ease;
  box-shadow:0 0 40px rgba(0,0,0,0.6);
}
#inventoryPanel.open{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
.panel-header{ font-family:'Orbitron',sans-serif; font-size:14px; margin-bottom:12px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.hint{ font-family:'Rajdhani',sans-serif; font-size:11px; color:var(--muted); font-weight:400; }
#invCloseBtn{
  background:rgba(255,59,92,0.12); border:1px solid var(--danger); color:var(--danger);
  width:30px; height:30px; font-size:15px; line-height:1; cursor:pointer; flex-shrink:0;
}
#invCloseBtn:hover{ background:rgba(255,59,92,0.25); }
#inventoryGrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:10px; }
.inv-slot{
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 4px;
  background:var(--panel2); border:1px solid rgba(63,240,224,0.2); min-height:70px; justify-content:center;
}
.inv-slot.empty{ border-style:dashed; border-color:rgba(255,255,255,0.12); opacity:0.5; }
.inv-icon{ font-size:26px; }
.inv-name{ font-size:11px; text-align:center; color:var(--muted); }

/* ================= TOUCH CONTROLS ================= */
#touchControls{ position:fixed; inset:0; z-index:4; pointer-events:none; }
#joystickBase{
  position:fixed; left:26px; bottom:26px; width:120px; height:120px; border-radius:50%;
  background:rgba(63,240,224,0.08); border:2px solid rgba(63,240,224,0.35); pointer-events:auto;
}
#joystickKnob{
  position:absolute; left:50%; top:50%; width:52px; height:52px; margin:-26px 0 0 -26px; border-radius:50%;
  background:rgba(63,240,224,0.4); border:1px solid var(--cyan);
}
#actionBtn{
  position:fixed; right:26px; bottom:26px; width:84px; height:84px; border-radius:50%; pointer-events:auto;
  background:rgba(255,179,71,0.18); border:2px solid var(--warn); color:var(--ink);
  font-size:20px; line-height:1.1;
}
#actionBtn span{ font-size:10px; display:block; }

/* ================= CINEMATIC OVERLAY ================= */
/* ================= END-OF-GAME FADE ================= */
#fadeOverlay{
  position:fixed; inset:0; z-index:60; background:#000;
  opacity:0; pointer-events:none; transition:opacity 1.1s ease;
}
#fadeOverlay.show{ opacity:1; pointer-events:auto; }

#cinematicOverlay{
  position:fixed; inset:0; z-index:40; display:flex; align-items:center; justify-content:center;
  background:#000; opacity:0; pointer-events:none; transition:opacity 0.4s ease;
}
#cinematicOverlay.open{ opacity:1; pointer-events:auto; }
#cinematicBox{ max-width:720px; padding:0 40px; text-align:center; }
#cinematicText{
  font-family:'Share Tech Mono',monospace; font-size:clamp(16px,2.6vw,26px); line-height:1.6; color:var(--cyan);
  min-height:4em;
}
.cine-hack #cinematicText{ color:#7fffb0; }
.cine-ai #cinematicText{ color:var(--ai); }
.cine-ending #cinematicText{ color:var(--warn); }
.cine-teaser #cinematicText{ font-family:'Orbitron',sans-serif; color:var(--ink); }
#cinematicSkip{
  margin-top:24px; background:transparent; border:1px solid rgba(255,255,255,0.3); color:var(--muted);
  padding:8px 20px; font-family:'Rajdhani',sans-serif; cursor:pointer;
}
#cinematicSkip:hover{ border-color:var(--cyan); color:var(--cyan); }

/* ================= MENUS ================= */
.fullscreen-menu{
  position:fixed; inset:0; z-index:50; display:none; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at center, #0d1117 0%, #05060a 100%);
}
.fullscreen-menu.open{ display:flex; }
.menu-panel{
  width:min(420px,88vw); padding:36px 32px; text-align:center;
  background:rgba(13,17,23,0.7); border:1px solid rgba(63,240,224,0.3);
  clip-path:polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}
.menu-panel.wide{ width:min(680px,92vw); text-align:left; }
.title-logo{
  font-family:'Orbitron',sans-serif; font-weight:900; font-size:clamp(36px,7vw,56px);
  letter-spacing:6px; margin:0; color:var(--ink);
  text-shadow:0 0 24px rgba(63,240,224,0.5);
}
.subtitle{ font-family:'Share Tech Mono',monospace; color:var(--cyan); letter-spacing:4px; margin:6px 0 30px; }
.menu-btn{
  display:block; width:100%; margin:10px 0; padding:13px; font-family:'Rajdhani',sans-serif; font-weight:600;
  font-size:16px; letter-spacing:1px; background:transparent; border:1px solid rgba(63,240,224,0.4); color:var(--ink);
  cursor:pointer; transition:all 0.2s ease;
}
.menu-btn:hover{ background:rgba(63,240,224,0.1); border-color:var(--cyan); }
.menu-btn.primary{ background:rgba(63,240,224,0.15); border-color:var(--cyan); color:var(--cyan); }
.settings-row{ display:flex; justify-content:center; gap:24px; margin-top:20px; font-size:13px; color:var(--muted); }
.settings-row label{ display:flex; align-items:center; gap:6px; }

.instructions-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:20px 0; }
.instructions-grid h3{ color:var(--cyan); font-family:'Orbitron',sans-serif; font-size:14px; }
.instructions-grid ul{ margin:0; padding-left:18px; color:var(--muted); font-size:14px; line-height:1.7; }
.instructions-grid p{ color:var(--muted); font-size:14px; line-height:1.6; }
.credits-text{ color:var(--muted); line-height:1.9; font-size:15px; }

#pauseMenu{
  position:fixed; inset:0; z-index:45; display:none; align-items:center; justify-content:center;
  background:rgba(5,6,10,0.85);
}
#pauseMenu.open{ display:flex; }

@media (max-width: 640px){
  .instructions-grid{ grid-template-columns:1fr; }
  #missionBanner{ width:min(260px,58vw); padding:10px 12px; }
  #missionTitle{ font-size:13px; }
  #missionDesc{ font-size:12px; }
}