/* A Princess of Mars - theme skin for TIFE Core 2.3.0.
 *
 * css/game.css ships byte-identical to the engine package. Everything the
 * story changes about the look lives here and is loaded after it.
 *
 * The palette is the planet's own: oxidised iron, the ochre moss of a dead
 * sea, the marble of Korad, and exactly one cold colour - radium, kept for
 * the things that work.
 */

:root {
  --primary: #d8c8ac;   /* marble, the body text of the terminal */
  --bright: #f4e9d2;    /* struck light on marble */
  --dim: #96805f;       /* moss in shadow */
  --line: #6d2418;      /* oxide, every rule and border */
  --bg: #0b0806;
  --panel: #150e09;
  --panel2: #1d130c;
  --warn: #e0a133;      /* ochre */
  --danger: #d2553c;
  --radium: #57d6c1;    /* the one cold colour on a red planet */
  --font: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --mono: Consolas, "Courier New", ui-monospace, monospace;
}

body {
  background:
    radial-gradient(120% 80% at 78% -10%, rgba(109, 36, 24, .40) 0%, rgba(11, 8, 6, 0) 62%),
    radial-gradient(70% 50% at 12% 110%, rgba(224, 161, 51, .16) 0%, rgba(11, 8, 6, 0) 70%),
    var(--bg);
}

/* the story is a book; the interface is a machine */
.terminal { font-family: var(--font); font-size: calc(1.02em * var(--scale)); line-height: 1.6; }
.topbar, .footerbar, .palette, .panel h2, .command-entry, .stack, .metric, .map {
  font-family: var(--mono);
}

.topbar { border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #1b1009, #100a06); }
.logo { color: var(--warn); letter-spacing: .28em; }
.product span { color: var(--radium); }

.output.title { color: var(--bright); border-top: 1px solid var(--line); padding-top: .7em; }
.output.command { color: var(--warn); font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.output.system { color: var(--radium); font-family: var(--mono); font-size: .86em; }
.output.caption { color: var(--radium); font-family: var(--mono); font-size: .82em; opacity: .85; }
.output.error { color: var(--danger); }
.output.warning { color: var(--warn); }

.panel { border: 1px solid var(--line); background: var(--panel); }
.panel h2 { color: var(--warn); border-bottom: 1px solid var(--line); letter-spacing: .16em; }
.panel .row.complete { color: var(--radium); }
.panel .progress i { background: var(--warn); }

button { font-family: var(--mono); letter-spacing: .08em; }
button:hover { border-color: var(--warn); color: var(--bright); }
button.selected { border-color: var(--radium); color: var(--radium); }

/* the eight Barsoomian verbs read as the planet's own vocabulary */
button[data-story-verb] { border-color: rgba(87, 214, 193, .40); color: var(--radium); }
button[data-story-verb]:hover { border-color: var(--radium); background: rgba(87, 214, 193, .10); }

/* the engine stylesheet leans on the browser default here */
:focus-visible { outline: 2px solid var(--radium); outline-offset: 2px; }

/* ------------------------------------------------------------------ cover */
.story-cover { background: #0b0806; color: var(--primary); }
.cover-kicker { color: var(--warn); letter-spacing: .24em; }
#cover-title { font-family: var(--font); color: var(--bright); letter-spacing: -.01em; }
.cover-credit { color: var(--dim); }
.start-story { border-color: var(--warn); color: var(--bright); background: rgba(224, 161, 51, .12); }
.start-story:hover { background: rgba(224, 161, 51, .24); }

/* Thuria and Cluros, the near moon and the far one */
.cover-moon {
  width: 150px; height: 150px; right: 14%; top: 9%;
  background: radial-gradient(circle at 38% 35%, #f6ecd8, #c9b48f 55%, #4b3a28 72%, transparent 74%);
  box-shadow: 0 0 55px rgba(224, 161, 51, .22);
}
.cover-moon-far {
  width: 62px; height: 62px; right: 8%; top: 32%;
  background: radial-gradient(circle at 40% 36%, #d9cbb0, #9d8a69 55%, #3a2c1e 72%, transparent 74%);
  box-shadow: 0 0 26px rgba(224, 161, 51, .16);
}
/* the dead sea bottom, and the towers of Korad standing out of it */
.cover-ridge.ridge-one { background: linear-gradient(180deg, rgba(109, 36, 24, .55), rgba(11, 8, 6, 0)); }
.cover-ridge.ridge-two { background: linear-gradient(180deg, rgba(150, 128, 58, .45), rgba(11, 8, 6, 0)); }
.cover-cave {
  background: radial-gradient(ellipse at 50% 95%, #000 0 42%, #1d130c 43% 58%, transparent 59%);
  filter: drop-shadow(0 -12px 18px rgba(224, 161, 51, .10));
}

/* ------------------------------------------------------------------- chart */
.tife-chart { font-family: var(--mono); font-size: .78em; line-height: 1.5; }
.tife-chart .chart-region { color: var(--warn); letter-spacing: .14em; margin-top: .6em; }
.tife-chart .chart-room { color: var(--dim); padding-left: .5em; }
.tife-chart .chart-room.seen { color: var(--primary); }
.tife-chart .chart-room.here { color: var(--radium); }
.tife-chart .chart-room.here::before { content: "\25B8 "; }
.tife-chart .chart-link { color: var(--line); padding-left: 1.4em; }
.tife-chart .chart-legend { color: var(--dim); border-top: 1px solid var(--line); margin-top: .7em; padding-top: .5em; }

.high-contrast {
  --primary: #ffffff; --bright: #ffffff; --dim: #d8d2c8;
  --bg: #000000; --panel: #0a0a0a; --panel2: #101010; --line: #b4593f;
}