/* From the Earth to the Moon — story skin.
   css/game.css is the pristine TIFE Core stylesheet and is not edited; every
   change for this story is an override here. Palette: cast iron, gunmetal,
   Florida sand, and the white of aluminium and the moon. */

:root {
  --ftm-iron: #14171c;
  --ftm-iron-2: #1c2027;
  --ftm-gunmetal: #2b313a;
  --ftm-brass: #c8a24a;
  --ftm-brass-dim: #8d7231;
  --ftm-moon: #e9ecf1;
  --ftm-sand: #b9a582;
  --ftm-ember: #d4622a;
}

body {
  background:
    radial-gradient(1100px 620px at 78% -10%, rgba(233, 236, 241, .10), transparent 62%),
    radial-gradient(760px 520px at 8% 108%, rgba(200, 162, 74, .09), transparent 60%),
    linear-gradient(180deg, #0e1116 0%, #14171c 46%, #101318 100%);
  color: var(--ftm-moon);
}

.topbar {
  background: linear-gradient(180deg, rgba(43, 49, 58, .92), rgba(20, 23, 28, .92));
  border-bottom: 1px solid rgba(200, 162, 74, .34);
}

.topbar .logo {
  background: var(--ftm-brass);
  color: #16181d;
  letter-spacing: .16em;
}

.topbar .product span,
.topbar .metric b {
  color: var(--ftm-brass);
}

.topbar .game-title strong {
  letter-spacing: .10em;
}

.panel {
  background: linear-gradient(180deg, rgba(28, 32, 39, .88), rgba(18, 21, 26, .88));
  border: 1px solid rgba(200, 162, 74, .20);
}

.panel h2 {
  color: var(--ftm-brass);
  border-bottom: 1px solid rgba(200, 162, 74, .22);
  letter-spacing: .10em;
}

.panel .row.complete {
  color: var(--ftm-brass);
}

.panel .progress i {
  background: linear-gradient(90deg, var(--ftm-brass-dim), var(--ftm-brass));
}

.terminal {
  background: linear-gradient(180deg, rgba(10, 12, 16, .94), rgba(16, 19, 24, .94));
  border: 1px solid rgba(200, 162, 74, .18);
}

.output.title {
  color: var(--ftm-brass);
  letter-spacing: .04em;
}

.output.command {
  color: var(--ftm-sand);
}

.output.system {
  color: #9fb0c4;
}

.output.warning {
  color: var(--ftm-ember);
}

.command-entry {
  border: 1px solid rgba(200, 162, 74, .30);
  background: rgba(20, 23, 28, .90);
}

.command-entry input {
  color: var(--ftm-moon);
}

button,
.palette button,
.footerbar button {
  background: linear-gradient(180deg, #333a45, #22272f);
  border: 1px solid rgba(200, 162, 74, .30);
  color: var(--ftm-moon);
}

button:hover,
.palette button:hover {
  border-color: var(--ftm-brass);
  color: var(--ftm-brass);
}

.palette button.selected {
  background: linear-gradient(180deg, var(--ftm-brass), var(--ftm-brass-dim));
  color: #15181d;
  border-color: var(--ftm-brass);
}

/* Story verbs sit at the end of the ACTIONS row and are marked as such. */
.palette button.story-verb {
  border-color: rgba(212, 98, 42, .55);
  color: #f0c9b3;
  background: linear-gradient(180deg, #3a2e28, #241d19);
}

.palette button.story-verb:hover {
  border-color: var(--ftm-ember);
  color: #ffe3d2;
}

.palette-label {
  color: var(--ftm-brass-dim);
  letter-spacing: .16em;
}

pre.map,
pre.region-chart {
  color: var(--ftm-sand);
  line-height: 1.35;
  font-size: 11px;
  white-space: pre;
  overflow-x: auto;
}

.footerbar {
  background: linear-gradient(180deg, rgba(28, 32, 39, .94), rgba(16, 19, 24, .94));
  border-top: 1px solid rgba(200, 162, 74, .26);
}

/* ---------------- story cover ---------------- */
.story-cover {
  background:
    radial-gradient(900px 900px at 50% 116%, rgba(200, 162, 74, .16), transparent 58%),
    linear-gradient(180deg, #05070b 0%, #0b0f15 58%, #12161c 100%);
}

.story-cover .cover-moon {
  position: absolute;
  top: 7%;
  left: 50%;
  width: 210px;
  height: 210px;
  margin-left: -105px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 32%, #ffffff 0%, #e6e9ef 42%, #b9bfc9 74%, #8d949f 100%);
  box-shadow: 0 0 90px rgba(233, 236, 241, .30), inset -14px -10px 34px rgba(0, 0, 0, .34);
}

/* Reuse the shell's two ridge elements as the Florida horizon, and the cave
   element as the mouth of the Columbiad with its shot going up. */
.story-cover .cover-ridge {
  position: absolute;
  left: -10%;
  width: 120%;
  background: linear-gradient(180deg, #171b22, #0d1015);
  border-top: 1px solid rgba(185, 165, 130, .22);
}

.story-cover .ridge-one {
  bottom: 16%;
  height: 18%;
  transform: skewY(-1.1deg);
}

.story-cover .ridge-two {
  bottom: 0;
  height: 18%;
  background: linear-gradient(180deg, #0f1217, #070a0d);
}

.story-cover .cover-cave {
  position: absolute;
  bottom: 15%;
  left: 50%;
  width: 6px;
  height: 46%;
  margin-left: -3px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(233, 236, 241, 0) 0%, rgba(255, 224, 176, .55) 55%, rgba(212, 98, 42, .85) 100%);
  box-shadow: 0 0 26px rgba(212, 98, 42, .55);
}

.story-cover .cover-kicker {
  color: var(--ftm-brass);
  letter-spacing: .26em;
}

.story-cover h1 {
  color: var(--ftm-moon);
  letter-spacing: .07em;
  text-shadow: 0 0 34px rgba(233, 236, 241, .22);
}

.story-cover .cover-credit {
  color: var(--ftm-sand);
}

.story-cover .start-story {
  background: linear-gradient(180deg, var(--ftm-brass), var(--ftm-brass-dim));
  color: #15181d;
  border: 0;
  letter-spacing: .16em;
  font-weight: 700;
}

.story-cover .start-story:hover {
  filter: brightness(1.10);
}

/* Accessibility profiles set these on <body>; keep the story skin out of
   their way so contrast and motion preferences still win. */
body.high-contrast {
  background: #000;
  color: #fff;
}

body.high-contrast .panel,
body.high-contrast .terminal {
  background: #000;
  border-color: #fff;
}

body.high-contrast .output.title,
body.high-contrast .panel h2,
body.high-contrast pre.region-chart {
  color: #ffe98a;
}

body.reduced-motion .story-cover .cover-cave,
body.reduced-motion .story-cover .cover-moon {
  box-shadow: none;
}

/* --- keyboard focus (§26) -------------------------------------------------
   The engine stylesheet relies on the browser default, which the dark skin
   swallows. Everything focusable gets a brass ring that survives high
   contrast and does not move the layout. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--tife-brass, #c8a24a);
  outline-offset: 2px;
  border-radius: 2px;
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}
body.high-contrast :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}