/* Master of the World — story skin.
   Overrides only. css/game.css is the unmodified TIFE Core stylesheet. */

:root {
  --mow-slate: #0b1016;
  --mow-slate-2: #121b25;
  --mow-brass: #c9962f;
  --mow-brass-dim: #8a6a24;
  --mow-flash: #e8f1ff;
  --mow-sea: #2c5468;
  --mow-rust: #9c4a2f;
}

body {
  background:
    radial-gradient(1200px 640px at 78% -12%, rgba(232, 241, 255, 0.10), transparent 62%),
    radial-gradient(900px 520px at 8% 108%, rgba(201, 150, 47, 0.10), transparent 60%),
    linear-gradient(178deg, var(--mow-slate) 0%, #070b0f 100%);
  color: #d7e2ec;
}

.topbar,
.footerbar {
  background: linear-gradient(180deg, rgba(18, 27, 37, 0.96), rgba(9, 14, 19, 0.96));
  border-color: rgba(201, 150, 47, 0.30);
}

.topbar .logo {
  color: var(--mow-slate);
  background: linear-gradient(160deg, var(--mow-brass), var(--mow-brass-dim));
  letter-spacing: .16em;
}

.topbar .product span { color: var(--mow-brass); }
.topbar .game-title strong { color: var(--mow-flash); letter-spacing: .10em; }
.topbar .metric b { color: var(--mow-brass); }

.panel {
  background: linear-gradient(180deg, rgba(18, 27, 37, 0.82), rgba(11, 16, 22, 0.82));
  border-color: rgba(201, 150, 47, 0.22);
}

.panel h2 {
  color: var(--mow-brass);
  border-bottom: 1px solid rgba(201, 150, 47, 0.25);
  letter-spacing: .12em;
}

.terminal {
  background:
    linear-gradient(180deg, rgba(7, 11, 15, 0.94), rgba(11, 16, 22, 0.94));
  border-color: rgba(201, 150, 47, 0.22);
}

.output.command { color: var(--mow-brass); }
.output.system { color: var(--mow-sea); }
.output.title {
  color: var(--mow-flash);
  border-left: 3px solid var(--mow-brass);
  padding-left: .7rem;
}
.output.error { color: var(--mow-rust); }
.output.warning { color: var(--mow-brass-dim); }

.command-entry {
  background: rgba(11, 16, 22, 0.9);
  border-color: rgba(201, 150, 47, 0.32);
}
.command-entry span { color: var(--mow-brass); }
.command-entry input { color: var(--mow-flash); }

button {
  background: linear-gradient(180deg, rgba(24, 35, 47, 0.95), rgba(14, 21, 29, 0.95));
  border: 1px solid rgba(201, 150, 47, 0.28);
  color: #cddae6;
}
button:hover { border-color: var(--mow-brass); color: var(--mow-flash); }
button.selected {
  background: linear-gradient(180deg, var(--mow-brass), var(--mow-brass-dim));
  color: #0b1016;
  border-color: var(--mow-brass);
}

/* The engine stylesheet leans on the browser default focus ring, which is
   invisible against this palette. */
button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible,
[data-story-verb]:focus-visible {
  outline: 2px solid var(--mow-brass);
  outline-offset: 2px;
}

button.story-verb {
  border-color: rgba(44, 84, 104, 0.75);
  color: var(--mow-sea);
  letter-spacing: .06em;
}
button.story-verb:hover { border-color: var(--mow-flash); color: var(--mow-flash); }

.progress i { background: linear-gradient(90deg, var(--mow-brass-dim), var(--mow-brass)); }
.row.complete { color: var(--mow-brass); }
.row.locked { opacity: .55; }
.link { color: var(--mow-sea); }
.link:hover { color: var(--mow-flash); }

/* Region chart (js/map.js) */
.mow-chart { font-size: .82rem; line-height: 1.5; }
.mow-chart .chart-region { margin-bottom: .55rem; }
.mow-chart .chart-region strong {
  display: block;
  color: var(--mow-brass);
  letter-spacing: .08em;
  font-size: .74rem;
  margin-bottom: .15rem;
}
.mow-chart .chart-room { white-space: pre; color: #9fb2c2; }
.mow-chart .chart-room.here { color: var(--mow-flash); }
.mow-chart .chart-exits {
  margin: .15rem 0 .35rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.mow-chart .chart-link { color: var(--mow-sea); font-size: .74rem; }
.mow-chart .chart-legend {
  margin-top: .5rem;
  padding-top: .35rem;
  border-top: 1px solid rgba(201, 150, 47, 0.18);
  color: var(--mow-brass-dim);
  font-size: .7rem;
}

/* Opening cover */
.story-cover {
  background:
    radial-gradient(1000px 600px at 50% 8%, rgba(232, 241, 255, 0.14), transparent 60%),
    linear-gradient(180deg, #05080b 0%, #0b1016 55%, #060a0e 100%);
}
.story-cover h1 {
  color: var(--mow-flash);
  letter-spacing: .10em;
  text-shadow: 0 0 26px rgba(232, 241, 255, 0.25);
}
.story-cover .cover-kicker { color: var(--mow-brass); letter-spacing: .28em; }
.story-cover .cover-credit { color: var(--mow-brass-dim); }
.story-cover .start-story {
  background: linear-gradient(180deg, var(--mow-brass), var(--mow-brass-dim));
  color: #0b1016;
  border-color: var(--mow-brass);
  letter-spacing: .12em;
}

body.high-contrast {
  --mow-brass: #ffd166;
  --mow-flash: #ffffff;
  --mow-sea: #7fd4ff;
}