/* Journey to the Center of the Earth — story skin.
 *
 * css/game.css is the TIFE Core 2.3.0 stylesheet and ships byte-identical.
 * Everything below is override only: the palette of a Ruhmkorff lamp burning
 * in a shaft of black porphyry, with the pale electric aurora of the central
 * sea for the highlights.
 */

:root {
  --primary: #93d6e6;
  --bright: #e8fbff;
  --dim: #567f8d;
  --line: #1c4553;
  --bg: #000;
  --panel: #030d13;
  --panel2: #05131b;
  --warn: #f0c987;
  --danger: #ff9a8c;
  --brass: #d8b877;
}

body.high-contrast {
  --primary: #ffffff;
  --bright: #ffffff;
  --dim: #cfd8dc;
  --line: #ffffff;
  --panel: #000;
  --panel2: #000;
}

.shell {
  background: radial-gradient(circle at 50% 30%, #06202b 0, #020a10 52%, #000 100%);
}

.topbar { background: #01080c; border-color: var(--line); }
.logo { color: var(--brass); text-shadow: 0 0 calc(11px * var(--glow)) rgba(216, 184, 119, .55); }
.game-title strong { color: var(--bright); }

.terminal {
  text-shadow: 0 0 calc(6px * var(--glow)) rgba(147, 214, 230, .40);
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .012) 0, rgba(255, 255, 255, .012) 1px, transparent 1px, transparent 4px),
    radial-gradient(ellipse at 50% 0%, rgba(147, 214, 230, .045) 0, transparent 62%),
    #000;
}

.output.title { color: var(--brass); letter-spacing: .04em; }
.output.system { color: #a9d9c9; }
.output.command { color: var(--bright); opacity: .85; }
.output.warning { color: var(--warn); }
.output.error { color: var(--danger); }

.panel {
  background: linear-gradient(180deg, rgba(4, 20, 28, .96), rgba(1, 6, 9, .96));
  box-shadow: inset 0 0 24px rgba(147, 214, 230, .03);
}
.panel h2 { border-bottom-color: #143a47; color: var(--bright); }
.panel p { color: #9db9c3; }
.panel .row { border-bottom-color: #0d2c36; }
.progress { background: #0a1f27; }
.progress i { background: linear-gradient(90deg, var(--primary), var(--brass)); }

.topbar button, .footerbar button, .command-entry button, .button-row button, dialog button {
  background: #03141c;
  border-color: var(--line);
}
.topbar button:hover, .footerbar button:hover, .button-row button:hover {
  background: #0d3a48;
  color: var(--bright);
}
.button-row button.selected { background: #14505f; color: var(--bright); }

pre.story-map {
  color: var(--primary);
  line-height: 1.25;
  letter-spacing: .02em;
  white-space: pre;
  overflow: auto;
  margin: 0;
}

/* ---- Story cover -------------------------------------------------- */
.story-cover {
  position: fixed; inset: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr minmax(340px, 520px);
  background: #000; color: var(--primary);
  transition: opacity .45s ease;
}
.story-cover.closing { opacity: 0; pointer-events: none; }

.cover-art {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #071c26 0%, #04121a 38%, #000 100%);
}
.cover-aurora {
  position: absolute; left: -10%; right: -10%; top: 6%; height: 34%;
  background: radial-gradient(ellipse at 50% 100%, rgba(147, 214, 230, .30) 0, rgba(147, 214, 230, .07) 45%, transparent 72%);
  filter: blur(2px);
}
.cover-glacier {
  position: absolute; left: 0; right: 0; top: 30%; height: 26%;
  background: linear-gradient(180deg, #cfe9f1 0%, #7ea9b7 45%, #2b4c58 100%);
  clip-path: polygon(0 100%, 12% 46%, 27% 74%, 41% 22%, 56% 62%, 70% 34%, 84% 70%, 100% 40%, 100% 100%);
  opacity: .92;
}
.cover-shaft {
  position: absolute; left: 38%; right: 38%; top: 52%; bottom: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .2) 0, #000 60%);
  border-left: 1px solid rgba(147, 214, 230, .25);
  border-right: 1px solid rgba(147, 214, 230, .25);
}
.cover-lamp {
  position: absolute; left: 50%; top: 62%; width: 220px; height: 220px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(232, 251, 255, .55) 0, rgba(147, 214, 230, .15) 34%, transparent 70%);
}
.cover-sea {
  position: absolute; left: 0; right: 0; bottom: 0; height: 18%;
  background: linear-gradient(180deg, rgba(147, 214, 230, .18), rgba(0, 0, 0, .9));
}

.cover-content {
  padding: 46px 44px; display: flex; flex-direction: column; gap: 13px;
  justify-content: center; border-left: 1px solid var(--line); background: #01070b;
}
.cover-kicker { color: var(--brass); letter-spacing: .28em; font-size: 11px; }
.cover-content h1 {
  margin: 0; font-size: 34px; line-height: 1.12; letter-spacing: .06em; color: var(--bright);
}
.cover-content p { color: #a9c6d0; font-size: 13px; line-height: 1.55; margin: 0; }
.cover-credit { color: var(--dim); font-size: 11px; }
.cover-option { display: block; font-size: 12px; color: var(--primary); }
.start-story {
  margin-top: 8px; padding: 13px 18px; letter-spacing: .18em;
  color: #02141c; background: var(--brass); border: 0; cursor: pointer; font-weight: 700;
}
.start-story:hover { background: var(--bright); }
.cover-content small { color: var(--dim); font-size: 10px; }

@media (max-width: 1180px) {
  .story-cover { grid-template-columns: 1fr; }
  .cover-art { display: none; }
}