:root {
  --green: #32ff32;
  --green-dim: #1a661a;
  --green-dark: #0d330d;
  --cyan: #5fd7f5;
  --magenta: #f0f;
  --bg: #0a0a0a;
}

/* --- Layout --- */

body {
  background-color: var(--bg);
  color: var(--green);
  font-family: "Courier New", monospace;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
}

.wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 784px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --- Header --- */

header {
  border: 1px solid var(--green);
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 0 12px rgba(50, 255, 50, 0.2);
}

header h1 {
  font-size: 0.85rem;
  letter-spacing: 0.15em;
}

header a {
  color: #888;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  transition: color 0.2s;
  background: none;
}

header a:hover {
  color: var(--green);
  background: none;
}

/* --- Main row --- */

.main-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr auto;
  gap: 8px;
  height: 60vh;
  max-width: 800px;
}

.story-panel {
  grid-column: 2;
  grid-row: 1 / 3;
  min-height: 0;
}

/* --- Game panel --- */

.game-panel {
  border: 1px solid var(--green);
  background: #000;
  padding: 8px;
  box-shadow: 0 0 20px rgba(50, 255, 50, 0.15);
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#stats {
  font-size: 0.75rem;
  color: #aaa;
  margin-bottom: 6px;
  letter-spacing: 0.08em;
}

#stats span {
  color: var(--green);
  text-shadow: 0 0 6px var(--green);
}

#game-map {
  font-family: 'VT323', 'Courier New', monospace;
  background: #000;
  color: var(--green-dark);
  line-height: 1;
  user-select: none;
  font-size: 0.9rem;
  overflow: hidden;
}

#log {
  margin-top: 6px;
  font-size: 0.7rem;
  color: var(--green);
  letter-spacing: 0.05em;
  flex: 1;
  min-height: 0;
  overflow-y: scroll;
  overflow-wrap: break-word;
  word-break: break-word;
  scrollbar-width: thin;
  scrollbar-color: var(--green-dim) transparent;
}

#log::-webkit-scrollbar { width: 4px; }
#log::-webkit-scrollbar-track { background: #000; }
#log::-webkit-scrollbar-thumb { background: var(--green-dim); }

#integrity-bar {
  letter-spacing: 0.05em;
}

/* --- Help panel --- */

.help-panel {
  border: 1px solid var(--green-dim);
  padding: 6px 10px;
  font-size: 0.68rem;
  color: #555;
  letter-spacing: 0.06em;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px 8px;
  max-height: 4rem;
}

.help-panel span:not([class]) { color: var(--green); }

.help-player   { color: var(--magenta); font-weight: bold; }
.help-stairs   { color: var(--green); font-weight: bold; }
.help-enemy    { color: var(--green); font-weight: bold; }
.help-medpack  { color: #ffff00; }
.help-fragment { color: #00ffff; font-weight: bold; }
.help-secret   { color: var(--magenta); font-weight: bold; text-shadow: 0 0 8px var(--magenta); }

/* --- Story panel --- */

.story-panel {
  border: 1px solid var(--green);
  background: #000;
  padding: 10px 12px;
  overflow-y: auto;
  box-shadow: 0 0 20px rgba(50, 255, 50, 0.15);
  scrollbar-width: thin;
  scrollbar-color: var(--green-dim) transparent;
  /* grid placement in .main-row above */
}

.story-panel::-webkit-scrollbar { width: 4px; }
.story-panel::-webkit-scrollbar-track { background: #000; }
.story-panel::-webkit-scrollbar-thumb { background: var(--green-dim); }

.story-header {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--green);
  border-bottom: 1px solid var(--green-dim);
  padding-bottom: 6px;
  margin-bottom: 10px;
}

/* --- Chapters --- */

.chapter {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--green-dark);
}

.chapter:last-child { border-bottom: none; margin-bottom: 0; }

.chapter-label {
  font-size: 0.6rem;
  color: #555;
  letter-spacing: 0.15em;
  margin-bottom: 2px;
}

.chapter-title {
  font-size: 0.75rem;
  color: var(--green);
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

.chapter-body {
  font-size: 0.68rem;
  color: #777;
  line-height: 1.5;
}

.chapter.locked .chapter-title { color: #333; }
.chapter.locked .chapter-body  { color: #2a2a2a; font-style: italic; }

.chapter.current .chapter-title {
  color: var(--green);
  text-shadow: 0 0 6px var(--green);
}
.chapter.current .chapter-body { color: #999; }

.chapter.classified .chapter-label { color: #600; }
.chapter.classified .chapter-title { color: #922; font-style: italic; }
.chapter.classified .chapter-body  { color: #511; font-style: italic; }

.chapter.undetermined .chapter-title { color: #665500; }
.chapter.undetermined .chapter-body  { color: #443300; font-style: italic; }

/* --- Portal tile --- */

.omega-tile {
  color: var(--magenta);
  font-weight: bold;
  animation: omega-pulse 1.2s ease-in-out infinite alternate;
}

@keyframes omega-pulse {
  from { text-shadow: 0 0 4px var(--magenta); }
  to   { text-shadow: 0 0 16px var(--magenta), 0 0 30px var(--magenta); }
}

@media (max-width: 640px) {
  .main-row {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .story-panel {
    grid-column: 1;
    grid-row: 3;
    max-height: 280px;
  }
}