/* --- THEME & VARIABLES --- */
:root {
  /* Colors */
  --color-primary: #00ff41;
  --color-primary-darker: #00dd41;
  --color-background: #000;
  --color-panel-bg: #080808;
  --color-danger: #ff0000;
  --color-special: #ffc107;

  /* --- Palettes --- */
  --speaker-narrator: #00bfff;
  --speaker-system: #adff2f;
  --speaker-you: var(--color-primary); /* Player character uses the primary theme color */
  --speaker-entity: #e0b0ff; /* For Jake, Reflection, etc. */
  --speaker-clerk: #ff8c00;
  --speaker-ranger: #bdb76b;
  --speaker-guard: #87ceeb;  
  --speaker-freddy: saddlebrown;
  --speaker-jeff: #ffffff;
  --speaker-toby: #a0522d;
  --speaker-watcher: #ffd700;
  --speaker-slappy: #c71585;
  --speaker-document: #f5f5dc; /* For notes, files, etc. */
  --speaker-static: #a9a9a9; /* For TV, radio */
  --fnaf-text: #fff;
  --fnaf-static: rgba(255, 255, 255, 0.1);
  --fnaf-bg: #000;
  --fnaf-border: #444;
  --fnaf-map-bg: #111;
  --fnaf-button: #333;
  --fnaf-button-active: #ff4500;

  /* Fonts */
  --font-main: 'Courier Prime', 'Courier New', monospace;
  --font-narrator: 'Special Elite', cursive;
  --font-display: 'VT323', monospace;
}

/* --- BASE & LAYOUT --- */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-background);
  color: var(--color-primary-darker);
  font-family: var(--font-main);
  font-size: 1.2rem;
  text-shadow: 0 0 3px var(--color-primary), 0 0 5px rgba(0, 255, 65, 0.5);
  margin: 0;
}

.game-container {
  padding: 1rem;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  box-sizing: border-box;
}

.main-layout {
  display: grid;
  grid-template-columns: 3fr 2fr; /* Left column is larger */
  grid-template-rows: auto 1fr; /* Header, Content (no fixed footer row) */
  gap: 1rem;
  height: calc(100vh - 2rem);
  max-width: 1920px; /* Max width for large screens */
  margin: 0 auto; /* Center the layout */
}

.left-column {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Prevents flex items from overflowing */
}

.right-column {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  display: flex; /* Use flexbox to stack children */
  flex-direction: column;
  gap: 1rem;
  min-height: 0;
}

.terminal-panel {
  flex: 1; /* Takes up most of the space */
  min-height: 0;
}

.character-panel {
  flex-basis: 300px; /* Give it a larger base size */
  flex-shrink: 0;
  overflow: hidden; /* Hide overflow, child will scroll */
}

.character-panel-tabs {
  display: flex;
  border-bottom: 2px solid var(--color-primary);
  margin-bottom: 1rem;
}

.tab-button {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent; /* For active state */
  color: var(--color-primary-darker);
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
}

.tab-button.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.character-panel-column {
  flex: 1; /* Each column takes up half the space */
  display: flex;
  flex-direction: column;
  min-height: 0; /* Prevents flexbox overflow */
}

.character-panel-content {
  flex-grow: 1;
  overflow-y: auto;
}

/* --- VISUAL EFFECTS --- */

/* NEW: Death Animation Visual Effects */
@keyframes screen-flicker {
  0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100% { opacity: 1; }
  5%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% { opacity: 0.3; }
}

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

@keyframes screen-shake {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(-5px) rotate(0.5deg); }
  50% { transform: translateX(5px) rotate(-0.5deg); }
  75% { transform: translateX(-5px) rotate(0.5deg); }
}

@keyframes red-flash {
  0%, 100% { background-color: transparent; }
  50% { background-color: rgba(255, 0, 0, 0.2); }
}

@keyframes fade-to-black {
  0% { opacity: 1; }
  100% { opacity: 0; background-color: #000; }
}

/* Death animation class for Operator */
.death-operator {
  animation: screen-glitch 3.2s ease-in-out;
}

/* Death animation class for Rake */
.death-rake {
  animation: screen-flicker 2.8s ease-in-out, red-flash 2.8s ease-in-out;
}

/* Death animation class for Mold Monster */
.death-mold {
  animation: screen-shake 3.5s ease-in-out;
  color: #90EE90;
}

/* Death animation class for Pizzeria */
.death-pizzeria {
  animation: screen-glitch 3s ease-in-out;
  filter: invert(1);
}

/* Death animation class for Time Out */
.death-time {
  animation: fade-to-black 2.6s ease-in-out forwards;
}

/* Death animation class for Madness */
.death-madness {
  animation: screen-flicker 3.4s ease-in-out;
  filter: saturate(0) brightness(1.5);
}

/* Death animation class for Terrible Fate */
.death-terrible-fate {
  animation: screen-glitch 4s ease-in-out;
  filter: hue-rotate(180deg);
}

/* Death animation class for Stalker */
.death-stalker {
  animation: screen-shake 3.1s ease-in-out;
  filter: brightness(0.7) contrast(1.5);
}

/* NEW: Madness Progression Visual Effects */

/* Madness 0-40%: Normal */
.game-container.madness-0 {
  /* No effect */
}

/* Madness 40-60%: Slight desaturation and color shift */
.game-container.madness-1 {
  filter: saturate(0.85) hue-rotate(5deg);
  transition: filter 0.5s ease;
}

/* Madness 60-80%: More desaturation, rotation */
.game-container.madness-2 {
  filter: saturate(0.65) hue-rotate(15deg) brightness(0.95);
  transition: filter 0.5s ease;
  transform: perspective(1000px) rotateZ(0.5deg);
}

/* Madness 80-100%: Heavy distortion, screen tilt, low brightness */
.game-container.madness-3 {
  filter: saturate(0.3) hue-rotate(25deg) brightness(0.8) contrast(1.3);
  transition: filter 0.3s ease;
  transform: perspective(1000px) rotateZ(1deg) rotateX(0.5deg);
  text-shadow: 0 0 10px rgba(255, 0, 0, 0.3), 0 0 20px rgba(0, 0, 255, 0.2);
}

/* Madness 100%: Full reality fracture */
.game-container.madness-4 {
  filter: saturate(0) hue-rotate(45deg) brightness(0.6) invert(0.1);
  animation: screen-glitch 0.3s infinite;
  transform: perspective(1000px) rotateZ(2deg) rotateX(1deg) scale(1.02);
  text-shadow: 0 0 15px rgba(255, 0, 0, 0.5), 0 0 25px rgba(0, 255, 0, 0.3);
}

/* Reality fracture text effect at maximum madness */
@keyframes zalgo-text {
  0%, 100% { text-shadow: 0 0 5px rgba(255, 0, 0, 0.3); }
  50% { text-shadow: 0 0 15px rgba(0, 255, 0, 0.5), 0 0 20px rgba(255, 0, 0, 0.4); }
}

.madness-4 .dialogue-text {
  animation: zalgo-text 0.5s infinite;
}

.glitch-effect {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 999;
}

.madness-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle, transparent 60%, rgba(50, 0, 100, 0.4) 100%);
  box-shadow: inset 0 0 100px rgba(50, 0, 100, 0.5);
  animation: pulse 4s infinite ease-in-out;
  pointer-events: none;
  z-index: 997;
}

.confrontation-effect {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle, transparent 50%, rgba(100, 0, 0, 0.5) 100%);
  animation: pulse 2s infinite;
  pointer-events: none;
  z-index: 998;
}

.fnaf-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(rgba(255,255,255,0.05) 2px, transparent 2px), linear-gradient(90deg, rgba(255,255,255,0.05) 2px, transparent 2px);
  background-size: 100% 4px, 4px 100%;
  pointer-events: none;
  z-index: 996;
}

.progress-bar-fill {
  height: 100%;
  background-color: var(--color-danger);
  box-shadow: 0 0 8px var(--color-danger);
  transition: width 0.5s linear;
}

.progress-bar-label {
  position: absolute;
  width: 100%;
  text-align: center;
}

.operator-mark-overlay {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-family: var(--font-main);
  color: var(--color-danger);
  text-shadow: 0 0 8px var(--color-danger);
  z-index: 990; /* Below other overlays but above content */
  pointer-events: none; /* Allows clicks to pass through */
  opacity: 0.4; /* Make it slightly transparent so it's not too distracting */
}

.operator-mark-overlay pre {
  font-size: 1.2rem;
  line-height: 0.8;
}

/* --- PANELS & HEADERS --- */
.panel {
  border: 2px solid var(--color-primary);
  padding: 1rem;
  background: var(--color-panel-bg);
}

.header {
  border-bottom: 2px solid #00ff41;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  grid-column: 1 / 3; /* Span both columns */
  grid-row: 1 / 2;
}

.header-title {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--color-danger);
  text-shadow: 0 0 8px var(--color-danger);
}

.header-actions {
    display: flex;
    gap: 1rem;
}

.status-items-container {
    display: flex;
    gap: 1.5rem;
}

.status-item {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-primary-darker);
  white-space: nowrap; /* Prevent wrapping */
}

.quick-save-button {
    border-color: var(--color-special);
    color: var(--color-special);
}

.quick-save-button:disabled {
    border-color: #555;
    color: #777;
    cursor: not-allowed;
    opacity: 0.6;
}

.network-status {
    font-size: 1.1rem;
}

.network-online {
    color: #5cff8f;
}

.network-offline {
    color: #ff5c5c;
    animation: flicker 2s infinite;
}

@keyframes flicker {
    0%, 89%, 91%, 100% { opacity: 1; }
    90% { opacity: 0.4; }
}

.panel {
  display: flex;
  flex-direction: column;
  position: relative; /* For child positioning */
}

.progress-bar-container {
    width: 200px; /* Give the progress bar a fixed width */
    background-color: var(--color-panel-bg);
    border: 1px solid var(--color-primary);
    position: relative; /* For positioning the text */
    height: 20px;
    display: flex;
    align-items: center;
}

.progress-bar-fill {
    height: 10px;
    background-color: var(--color-special);
    box-shadow: 0 0 8px var(--color-special);
    transition: width 0.5s ease-in-out;
    text-align: center;
    line-height: 10px;
}

.location-name {
  font-family: var(--font-display);
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  color: var(--color-primary);
  font-weight: bold;
}

.location-ascii {
  font-size: 0.9rem;
  line-height: 1.2;
  margin: 1rem 0;
  white-space: pre;
  overflow: hidden; /* The map itself should not scroll */
}

.map-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.map-toggle-button {
  padding: 0.2rem 0.6rem;
  font-size: 0.9rem;
  border-color: var(--color-special);
  color: var(--color-special);
}

.location-description {
  font-size: 1.1rem;
  font-style: italic;
  opacity: 0.8;
  margin-bottom: 0.5rem;
}

.actions-header, .move-header {
  margin-bottom: 0.5rem;
  font-weight: bold;
  margin-top: 1rem;
}

.actions-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* --- BUTTONS --- */
.action-button, .move-button, .confrontation-button {
  background: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  transition: all 0.2s ease;
  text-shadow: 0 0 3px var(--color-primary);
}

.text-input-container {
    margin-top: 1rem;
    border: 1px solid var(--color-special);
    padding: 0.5rem;
}


.text-input {
    background: transparent;
    border: none;
    color: var(--color-special);
    font-family: var(--font-main);
    font-size: 1.2rem;
    width: calc(100% - 100px);
    outline: none;
    padding: 0.5rem;
}

.submit-button {
    width: 90px;
    border-color: var(--color-special);
    color: var(--color-special);
}

.action-button:hover, .move-button:hover, .confrontation-button:hover {
  background: var(--color-primary);
  color: var(--color-background);
  box-shadow: 0 0 10px var(--color-primary);
}

.dialogue-log-header, .inventory-header {
  margin-bottom: 0.5rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* --- DIALOGUE & TEXT --- */
.dialogue-log {
  overflow-y: auto;
  flex-grow: 1;
}

.dialogue-line {
  margin-bottom: 0.5rem;
  font-size: 1.05rem;
  word-wrap: break-word;
}

.dialogue-line.glitch {
  color: var(--color-danger);
}

@keyframes flicker {
  0% { opacity: 1; }
  50% { opacity: 0.8; }
  100% { opacity: 1; }
}

/* --- Data-Driven Speaker Palette --- */
.dialogue-line[data-speaker] {
  color: var(--speaker-color);
  text-shadow: 0 0 5px var(--speaker-color);
}

.dialogue-line[data-speaker="narrator"] {
  --speaker-color: var(--speaker-narrator);
  font-family: var(--font-narrator);
  font-style: italic;
}
.dialogue-line[data-speaker="system"] {
  --speaker-color: var(--speaker-system);
}
.dialogue-line[data-speaker="you"] {
  --speaker-color: var(--speaker-you);
}
.dialogue-line[data-speaker="jake"],
.dialogue-line[data-speaker="reflection"],
.dialogue-line[data-speaker="audrey iv"] {
  --speaker-color: var(--speaker-entity);
}
.dialogue-line[data-speaker="freddy"]   { --speaker-color: var(--speaker-freddy); }
.dialogue-line[data-speaker="jeff"]     { --speaker-color: var(--speaker-jeff); text-shadow: 0 0 8px var(--color-danger); }
.dialogue-line[data-speaker="toby"]     { --speaker-color: var(--speaker-toby); }
.dialogue-line[data-speaker="watcher"],
.dialogue-line[data-speaker="slappy"] {
  font-style: italic;
}
.dialogue-line[data-speaker="watcher"]  { --speaker-color: var(--speaker-watcher); }
.dialogue-line[data-speaker="slappy"]   { --speaker-color: var(--speaker-slappy); }
.dialogue-line[data-speaker="scp-079"]  { --speaker-color: #00ffff; font-family: var(--font-display); }
.dialogue-line[data-speaker="note"],
.dialogue-line[data-speaker="diary"],
.dialogue-line[data-speaker="file"],
.dialogue-line[data-speaker="plaque"],
.dialogue-line[data-speaker="flyer"] {
  --speaker-color: var(--speaker-document);
  font-style: italic;
}
.dialogue-line[data-speaker="marybeth (clerk)"] { --speaker-color: var(--speaker-clerk); }
.dialogue-line[data-speaker="park ranger"] { --speaker-color: var(--speaker-ranger); }
.dialogue-line[data-speaker="school security guard"] { --speaker-color: var(--speaker-guard); }
.dialogue-line[data-speaker="scp agent"] { --speaker-color: var(--speaker-ranger); }
.dialogue-line[data-speaker="tv"], .dialogue-line[data-speaker="radio"] { --speaker-color: var(--speaker-static); }
.dialogue-line[data-speaker="operator"] .dialogue-speaker {
  display: none; /* Hide the [OPERATOR] speaker tag for jumpscares */
}

.dialogue-speaker {
  font-weight: bold;
}

/* --- INVENTORY --- */
.inventory-container {
  display: flex;
  flex-grow: 1;
  overflow: hidden; /* Prevent scrollbars within the flex container */
  gap: 1rem;
}

.inventory-list-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
  padding-right: 0.5rem; /* Space for scrollbar */
}

.inventory-item-button {
  background: transparent;
  border: 1px solid rgba(0, 255, 65, 0.5);
  color: var(--color-primary);
  padding: 0.5rem;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  width: 100%;
  transition: all 0.2s ease;
}

.inventory-item-button:hover, .inventory-item-button.selected {
  background: var(--color-primary);
  color: var(--color-background);
  box-shadow: 0 0 10px var(--color-primary);
}

.inventory-empty {
  opacity: 0.6;
}

/* --- ACHIEVEMENTS --- */
.achievements-header {
  margin-bottom: 0.5rem;
  font-weight: bold;
}

.achievements-grid {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 0.5rem;
}

.achievement-item {
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid var(--color-special);
  color: var(--color-special);
  padding: 0.3rem 0.6rem;
  font-size: 0.9rem;
  text-align: center;
  cursor: help;
  text-shadow: 0 0 5px var(--color-special);
}

.goosebumps-item {
  border-color: var(--speaker-slappy) !important;
  color: var(--speaker-slappy) !important;
  text-shadow: 0 0 8px var(--speaker-slappy) !important;
  box-shadow: 0 0 5px var(--speaker-slappy);
}

/* --- UI STATES (CONFRONTATION, TITLE, WIN) --- */
.confrontation-ui {
  border: 2px solid var(--color-danger);
  padding: 1rem;
  margin-top: 1rem;
  background: rgba(255, 0, 0, 0.1);
}

.special-ui-panel {
    /* This panel is now absolutely positioned by default when active */
    border-color: var(--color-special);
    box-shadow: 0 0 10px var(--color-special);
}

.confrontation-button {
  width: 100%;
  margin-bottom: 0.5rem;
  border-color: var(--color-danger);
  color: var(--color-danger);
}
.confrontation-button.special {
  border-color: var(--color-special);
  color: var(--color-special);
}

/* --- FNAF UI --- */
.fnaf-ui-container {
  border: 2px solid var(--fnaf-border);
  background: var(--fnaf-bg);
  color: var(--fnaf-text);
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}

.fnaf-camera-view {
  flex-grow: 1;
  background: #111;
  border: 1px solid var(--fnaf-border);
  position: relative;
  overflow: hidden;
}

.fnaf-camera-ascii {
  white-space: pre;
  font-family: var(--font-main);
  font-size: 1rem;
  line-height: 1.1;
  color: var(--fnaf-text);
  text-shadow: 0 0 5px var(--fnaf-static);
  animation: fnaf-static 0.1s infinite;
  padding: 0.5rem;
}

.fnaf-camera-label {
  position: absolute;
  bottom: 5px;
  left: 10px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--fnaf-text);
  text-shadow: 0 0 8px #000;
}

.fnaf-controls {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding-top: 0.5rem;
  gap: 0.5rem;
}

.fnaf-door-controls {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.fnaf-door-button {
  background: var(--fnaf-button);
  border: 1px solid var(--fnaf-border);
  color: var(--fnaf-text);
  padding: 1rem;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.2rem;
}

.fnaf-door-button.closed {
  background: var(--fnaf-button-active);
  color: var(--fnaf-bg);
}

.fnaf-power-meter {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fnaf-map-bg);
  padding: 1rem;
  border: 1px solid var(--fnaf-border);
}

.fnaf-power-label {
  font-family: var(--font-display);
  font-size: 1.5rem;
}

.fnaf-map-container {
  position: relative;
  width: 150px;
  height: 100px;
}

.fnaf-map-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100"><rect width="150" height="100" fill="%23111" /><path d="M 20 20 H 50 V 50 H 80 V 20 H 110" stroke="%23444" fill="none" stroke-width="2" /></svg>');
  z-index: 1;
}

.fnaf-map {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  padding: 5px;
}

.map-button {
  flex-grow: 1;
  background: transparent;
  border: 1px solid var(--color-primary-darker);
  color: var(--color-primary-darker);
}
.map-button.active {
  background: var(--color-primary);
  color: var(--color-background);
}

.title-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
}

.title-header {
  font-family: var(--font-display);
  font-size: 4rem;
  text-shadow: 0 0 15px var(--color-primary);
  margin-bottom: 2rem;
}

.title-prompt {
  font-size: 1.5rem;
  animation: pulse-text 2s infinite ease-in-out;
}

.boot-up-text {
  opacity: 0;
  animation: fade-in 1s forwards;
  animation-delay: 1s;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.title-drop-container {
  display: flex;
  flex-direction: column;
  line-height: 0.8; /* Close the vertical spacing */
  align-items: center;
  justify-content: center;
  height: 100%;
}

.title-drop {
  font-family: var(--font-display);
  font-size: 14rem; /* Increased font size to better utilize screen space */
  font-weight: bold;
  text-shadow: 0 0 20px var(--color-danger), 0 0 30px var(--color-danger);
  color: var(--color-danger);
  opacity: 0;
  animation: drop-in 1s forwards, shake 0.5s 1s infinite;
  margin: 0; /* Remove default h1 margins to tighten vertical spacing */
}

@keyframes drop-in {
  from { transform: translateY(-100px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px) skewX(-3deg); }
  75% { transform: translateX(5px) skewX(3deg); }
}

.win-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.win-message {
  margin-top: 2rem;
  line-height: 1.6;
}

.win-ascii {
  margin-top: 3rem;
  font-size: 0.8rem;
  opacity: 0.6;
}

/* --- ANIMATIONS & KEYFRAMES --- */
@keyframes glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-3px, 3px); }
  40% { transform: translate(-3px, -3px); }
  60% { transform: translate(3px, 3px); }
  80% { transform: translate(3px, -3px); }
  100% { transform: translate(0); }
}

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

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

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.4); }
  70% { box-shadow: 0 0 20px 30px rgba(255, 0, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
}

.text-insane {
  display: inline-block;
  filter: blur(0.5px);
  text-shadow: 0 0 8px var(--color-danger), 0 0 12px var(--color-danger);
  animation: insane-text-anim 0.15s infinite;
}

@keyframes insane-text-anim {
  50% { transform: skew(-2deg, 1deg); }
}

/* --- SCROLLBAR --- */
::-webkit-scrollbar {
  width: 8px;
  background: var(--color-background);
}
::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  box-shadow: 0 0 5px var(--color-primary);
}

/* Music Panel */
.music-panel {
  position: fixed; /* Use fixed to keep it on screen */
  bottom: 1rem; /* Positioned at the bottom of the screen */
  right: 1rem;
  width: 300px;
  padding: 0; /* Remove padding to let content fill it */
  border: 2px solid var(--color-primary);
  background-color: var(--color-panel-bg);
  z-index: 100;
  color: var(--color-primary);
  transition: transform 0.4s ease-in-out;
  box-shadow: 0 0 10px var(--color-primary);
  /* Start mostly hidden, revealing only the tab width */
  transform: translateX(calc(100% - 40px));
}

.music-panel:hover {
  /* On hover, slide fully into view */
  transform: translateX(0);
}

.music-panel-tab {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 40px;
  background: var(--color-primary);
  color: var(--color-background);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  text-shadow: none;
}

.music-panel-content {
  padding: 1rem;
  margin-left: 40px; /* Offset content to make space for the tab */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.music-controls {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.music-controls input {
  width: 100%;
  background: transparent;
  border: 1px solid var(--color-primary-darker);
  color: var(--color-primary);
  padding: 0.4rem;
  font-family: inherit;
  font-size: 0.9rem;
}

.music-controls button {
  /* Inherits from .action-button */
  width: 100%;
}

/* --- Item Detail Overlay --- */
.item-detail-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 2rem;
}

.item-detail-panel {
  max-width: 600px;
  width: 100%;
  border-color: var(--color-special);
  box-shadow: 0 0 15px var(--color-special);
}

.inventory-detail-header {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--color-special);
  margin-bottom: 0.5rem;
}

.inventory-item-ascii {
  font-size: 1.2rem;
  color: var(--color-primary-darker);
  margin-bottom: 1rem;
  text-align: center;
}

.inventory-detail-description {
  font-size: 1.1rem;
  line-height: 1.6;
}

.item-detail-actions {
  margin-top: 1.5rem;
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}

.use-button {
  border-color: var(--color-special);
  color: var(--color-special);
}

/* --- COMPLETION SUMMARY PANEL --- */
.completion-summary-panel {
  background-color: var(--color-panel-bg);
  border: 2px solid var(--color-primary);
  border-radius: 4px;
  padding: 1.5rem;
  margin: 1rem 0;
  max-height: 70vh;
  overflow-y: auto;
  font-family: var(--font-main);
  color: var(--color-primary);
}

.summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.summary-header h2 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--color-primary);
  text-shadow: 0 0 8px var(--color-primary);
}

.summary-close-btn {
  background: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 4px;
  transition: all 0.2s;
}

.summary-close-btn:hover {
  background-color: var(--color-primary);
  color: var(--color-background);
  box-shadow: 0 0 8px var(--color-primary);
}

.summary-section {
  margin-bottom: 1rem;
  border-left: 2px solid var(--color-special);
  padding-left: 1rem;
}

.summary-section-header {
  cursor: pointer;
  margin: 0.5rem 0;
  color: var(--color-special);
  text-shadow: 0 0 4px var(--color-special);
  font-weight: bold;
  user-select: none;
  transition: text-shadow 0.2s;
}

.summary-section-header:hover {
  text-shadow: 0 0 8px var(--color-special);
}

.section-content {
  padding: 1rem;
  background-color: rgba(8, 8, 8, 0.5);
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  margin-top: 0.5rem;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-primary);
}

.stat-item:last-child {
  border-bottom: none;
}

.stat-value {
  color: var(--color-special);
  font-weight: bold;
}

.completion-bar {
  width: 100%;
  height: 20px;
  border: 1px solid var(--color-primary);
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  overflow: hidden;
  margin: 1rem 0;
  position: relative;
}

.completion-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-danger), var(--color-special), var(--color-primary));
  transition: width 0.3s ease;
}

.completion-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--color-primary);
  font-weight: bold;
  text-shadow: 0 0 4px var(--color-background);
}

.location-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-top: 0.5rem;
}

.location-item {
  background-color: rgba(0, 255, 65, 0.1);
  border: 1px solid var(--color-primary);
  padding: 0.75rem;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.location-name {
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
  color: var(--color-primary);
}

.location-count {
  color: var(--color-special);
  font-weight: bold;
  font-size: 1.2rem;
}

.endings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-top: 0.5rem;
}

.ending-card {
  background-color: rgba(0, 255, 65, 0.1);
  border: 2px solid var(--color-primary);
  padding: 1rem;
  border-radius: 4px;
  text-align: center;
  position: relative;
  transition: all 0.3s;
}

.ending-card.completed {
  background-color: rgba(0, 255, 65, 0.2);
  box-shadow: 0 0 8px var(--color-primary);
}

.ending-card.locked {
  opacity: 0.6;
  background-color: rgba(100, 100, 100, 0.1);
  border-color: rgba(0, 255, 65, 0.4);
}

.ending-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 12px var(--color-primary);
}

.ending-name {
  font-weight: bold;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.ending-stars {
  color: var(--color-special);
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.ending-difficulty {
  font-size: 0.85rem;
  color: var(--color-primary);
  opacity: 0.8;
}

.ending-checkmark {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: var(--color-danger);
  color: var(--color-background);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1rem;
}

.no-data {
  text-align: center;
  color: var(--color-primary);
  opacity: 0.6;
  padding: 1rem;
  font-style: italic;
}

/* Scrollbar styling for summary panel */
.completion-summary-panel::-webkit-scrollbar {
  width: 8px;
}

.completion-summary-panel::-webkit-scrollbar-track {
  background: rgba(0, 255, 65, 0.1);
}

.completion-summary-panel::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 4px;
}

.completion-summary-panel::-webkit-scrollbar-thumb:hover {
  background: var(--color-special);
}