/* Project Chimera - Game Menu Styles */

/* Prevent horizontal scroll on all pages */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* === Menu Active Bar Enhancement === */
.chimera-menu { position:relative; }
#menuActiveBar { position:absolute; left:0; top:0; width:3px; height:40px; background:linear-gradient(180deg,#06b6d4,#3b82f6); border-radius:2px; box-shadow:0 0 6px #06b6d4,0 0 14px -4px #3b82f6; opacity:0; transition:top .3s cubic-bezier(.4,.2,.1,1),height .3s,opacity .3s; pointer-events:none; }
.chimera-menu:has(.item.selected) #menuActiveBar { opacity:1; }

/* === Credits Modal (Name-only cards) === */
.credits-shell { position:relative; }
.credits-noise-layer { position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(circle, rgba(255,255,255,0.15) 1px, transparent 1px); background-size:3px 3px; mix-blend-mode:overlay; opacity:.15; animation:noiseShift .45s steps(2) infinite; z-index:2; }
@keyframes noiseShift { 0%{transform:translate(0,0);} 50%{transform:translate(-1px,1px);} 100%{transform:translate(0,0);} }
.credits-divider { height:2px; width:100%; background:linear-gradient(90deg,transparent,#0ea5e9,#6366f1,#0ea5e9,transparent); box-shadow:0 0 12px -2px #0891b2; opacity:.55; margin-top:18px; }
.credits-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px; }
.credit-card { position:relative; display:flex; gap:14px; align-items:center; padding:14px 16px 16px 14px; text-decoration:none; background:linear-gradient(135deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02)); border:1px solid rgba(148,163,184,0.22); border-radius:18px; overflow:hidden; color:#e2e8f0; transition:all .3s cubic-bezier(.4,.2,.1,1); backdrop-filter:blur(6px); isolation:isolate; }
.credit-card:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 15%,rgba(14,165,233,0.18),transparent 65%); opacity:0; transition:opacity .4s; }
.credit-card:hover { transform:translateY(-5px) scale(1.018); box-shadow:0 10px 26px -8px rgba(14,165,233,0.35),0 4px 10px -3px rgba(0,0,0,0.6); border-color:rgba(56,189,248,0.55); }
.credit-card:hover:before { opacity:.85; }
.credit-card .avatar { flex:none; width:42px; height:42px; border-radius:14px; background:linear-gradient(145deg,#0ea5e9,#6366f1); display:flex; align-items:center; justify-content:center; font-weight:600; letter-spacing:.05em; font-size:13px; box-shadow:0 4px 14px -4px #0ea5e9,0 0 0 1px rgba(255,255,255,0.15) inset; color:#fff; }
.credit-card .name-only { font-weight:600; font-size:15px; letter-spacing:.02em; line-height:1.25; }
.credit-card .gh { position:absolute; top:8px; right:10px; color:#334155; transition:color .35s, transform .35s, opacity .35s; opacity:.55; }
.credit-card:hover .gh { color:#38bdf8; transform:scale(1.08); opacity:1; }
@media (max-width:640px){ .credits-grid { grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:14px;} .credit-card { padding:12px 12px 14px 12px;} .credit-card .avatar { width:36px; height:36px; font-size:11px;} .credit-card .name-only { font-size:14px;} }

/* Round slide-in banner (game page) */
.round-banner {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translate(-50%, -120%);
  z-index: 50;
  background: rgba(3, 7, 18, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  padding: 12px 28px;
  box-shadow: 0 10px 30px rgba(6, 182, 212, 0.2), inset 0 0 20px rgba(6, 182, 212, 0.08);
  backdrop-filter: blur(6px);
}

.round-banner--in {
  animation: roundBannerIn 600ms ease-out forwards;
}

.round-banner--out {
  animation: roundBannerOut 600ms ease-in forwards;
}

@keyframes roundBannerIn {
  0% { transform: translate(-50%, -120%); opacity: 0; }
  60% { transform: translate(-50%, 0%); opacity: 1; }
  100% { transform: translate(-50%, 0%); opacity: 1; }
}

@keyframes roundBannerOut {
  0% { transform: translate(-50%, 0%); opacity: 1; }
  100% { transform: translate(-50%, -120%); opacity: 0; }
}

/* FNAF-Style Menu Items */
.chimera-menu {
  position: relative;
}

.chimera-menu .item {
  position: relative;
  display: block;
  padding: 12px 24px 12px 40px;
  margin: 8px 0;
  color: #e2e8f0;
  font-size: 1.1rem;
  font-weight: 300;
  letter-spacing: 0.025em;
  cursor: pointer;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}

.chimera-menu .item:hover,
.chimera-menu .item.selected {
  color: #ffffff;
  background: rgba(6, 182, 212, 0.15);
  border-left-color: #06b6d4;
  transform: translateX(8px);
}

/* Chevron selector for active item */
.chimera-menu .item.selected::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  filter: drop-shadow(0 0 4px rgba(6, 182, 212, 0.6));
  animation: pulse 2s infinite;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2306b6d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
}

.chimera-menu .item.disabled {
  color: #64748b;
  cursor: not-allowed;
  opacity: 0.5;
}

.chimera-menu .item.disabled:hover {
  background: transparent;
  border-left-color: transparent;
  transform: none;
}

/* FNAF-style sweep bar animation */
.fnaf-sweep-bar {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    #06b6d4 45%, 
    #ffffff 50%, 
    #06b6d4 55%, 
    transparent 100%);
  animation: sweep 8s ease-in-out infinite;
  opacity: 0.6;
  top: 20%;
}

@keyframes sweep {
  0%, 100% { transform: translateX(-100%); }
  /* Use element-relative translation to avoid causing page overflow */
  50% { transform: translateX(100%); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* FNAF-style title */
.fnaf-title {
  text-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
  animation: titleGlow 4s ease-in-out infinite alternate;
}

@keyframes titleGlow {
  0% { text-shadow: 0 0 10px rgba(6, 182, 212, 0.3); }
  100% { text-shadow: 0 0 20px rgba(6, 182, 212, 0.7), 0 0 30px rgba(6, 182, 212, 0.3); }
}

/* Screen overlays for retro feel */
.fnaf-noise {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.03;
  background-image: 
    radial-gradient(circle, transparent 1px, rgba(255,255,255,0.15) 1px);
  background-size: 4px 4px;
  animation: noise 0.2s infinite;
  z-index: 1000;
}

.fnaf-scanlines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  background: linear-gradient(transparent 50%, rgba(0,255,0,0.03) 50%);
  background-size: 100% 4px;
  z-index: 1001;
}

@keyframes noise {
  0% { transform: translate(0px, 0px); }
  10% { transform: translate(-1px, -1px); }
  20% { transform: translate(1px, -2px); }
  30% { transform: translate(-1px, 1px); }
  40% { transform: translate(1px, 2px); }
  50% { transform: translate(-1px, -1px); }
  60% { transform: translate(1px, 1px); }
  70% { transform: translate(-1px, -2px); }
  80% { transform: translate(-1px, 1px); }
  90% { transform: translate(1px, -1px); }
  100% { transform: translate(0px, 0px); }
}

/* Corner labels */
.corner {
  position: fixed;
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 300;
  z-index: 1002;
  letter-spacing: 0.05em;
}

.corner-left {
  bottom: 20px;
  left: 20px;
}

.corner-right {
  bottom: 20px;
  right: 20px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .chimera-menu .item {
    font-size: 1rem;
    padding: 10px 20px 10px 35px;
  }
  
  .fnaf-title {
    text-align: center;
  }
  
  .corner {
    font-size: 0.6rem;
  }
  
  .corner-left {
    bottom: 10px;
    left: 10px;
  }
  
  .corner-right {
    bottom: 10px;
    right: 10px;
  }
}