/* ==========================================================================
 * FIVE WEEKS IN A BALLOON — theme overrides
 * --------------------------------------------------------------------------
 * css/game.css ships byte-identical to the TIFE Core 2.3.0 kit.  Everything
 * below is an override loaded after it: a taffeta-and-brass skin over an
 * equatorial sky, plus styling for the two things the kit does not have — the
 * chart of the voyage with its water gauge, and the eight balloon verbs.
 * Only system fonts are named, so the package makes no network requests (§22).
 * ========================================================================== */

:root {
  --primary: #ecdcb6;
  --bright: #fff4d6;
  --dim: #a58f66;
  --line: #7d5f31;
  --bg: #070c18;
  --panel: #101728;
  --panel2: #0b1120;
  --warn: #f4c76a;
  --danger: #e79070;
  --font: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --mono: Consolas, "Courier New", monospace;
  --brass: #c79a4e;
  --sky: #16233d;
  --glow: 0;
}

html, body { background: #070c18; }

.shell {
  background:
    radial-gradient(circle at 50% 8%, rgba(244, 199, 106, .10) 0, rgba(244, 199, 106, 0) 46%),
    linear-gradient(180deg, #16233d 0, #0b1120 55%, #070c18 100%);
  background-color: #070c18;
}

.topbar, .footerbar { background: linear-gradient(180deg, #131c31, #0a1020); }
.logo { color: var(--brass); text-shadow: none; letter-spacing: .18em; }
.product { font-family: var(--mono); }

.panel {
  background: linear-gradient(180deg, rgba(16, 23, 40, .96), rgba(11, 17, 32, .96));
  box-shadow: inset 0 0 22px rgba(199, 154, 78, .05);
}
.panel h2 { border-bottom: 1px solid var(--line); color: var(--brass); letter-spacing: .09em; }
.panel p { color: #c3b493; }
.panel .row { border-bottom: 1px solid #26314b; }
.progress { background: #1d2740; }
.progress i { background: var(--brass); }

.center { background: #060a14; border-color: var(--line); }
.terminal {
  background: #060a14;
  text-shadow: none;
  font-size: calc(15px * var(--scale));
  line-height: 1.62;
  max-width: none;
}
.output { margin: 0 0 16px; }
.output.title { color: var(--brass); letter-spacing: .04em; }
.output.command { color: #9fb6d8; font-family: var(--mono); }
.output.system { color: #c9b78f; }

.command-entry { background: #0b1222; }
.command-entry span { color: var(--brass); }
.command-entry input { background: #050912; border-color: var(--line); color: var(--bright); font-family: var(--mono); }
.palette { background: linear-gradient(180deg, #0e1526, #070c18); }
.palette-label { color: var(--dim); font-family: var(--mono); }

.topbar button, .footerbar button, .command-entry button, .button-row button, dialog button {
  background: #17203a;
  border: 1px solid var(--line);
  color: var(--primary);
  font-family: var(--mono);
  letter-spacing: .04em;
}
.topbar button:hover, .footerbar button:hover, .button-row button:hover, dialog button:hover {
  background: #263352;
  color: var(--bright);
}
.button-row button.selected { background: #4a3718; border-color: var(--brass); color: var(--bright); }

/* The eight balloon verbs, appended to the ACTIONS band by js/interface.js. */
.button-row button.story-verb {
  border-color: var(--brass);
  color: var(--brass);
  background: #1b1608;
}
.button-row button.story-verb:hover { background: #3a2d10; color: var(--bright); }

/* The engine stylesheet relies on the browser default focus ring, which the
   dark skin swallows.  An explicit brass ring is drawn instead. */
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

/* ---------------- chart of the voyage ---------------- */

.chart-water { margin: 0 0 10px; }
.chart-water-label { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--dim); }
.chart-water-label b { color: var(--brass); font-size: 13px; }
.chart-gauge { display: flex; gap: 3px; margin: 5px 0 4px; }
.chart-gauge i { display: block; flex: 1; height: 10px; border: 1px solid var(--line); }
.chart-gauge i.full { background: var(--brass); }
.chart-gauge i.empty { background: #131b2e; }
.chart-water-note { font-size: 10px; color: var(--dim); font-style: italic; }

.chart-region { margin: 0 0 9px; padding: 0 0 7px; border-bottom: 1px solid #26314b; }
.chart-region:last-of-type { border-bottom: 0; }
.chart-region h3 {
  margin: 0 0 4px; font-size: 10px; font-family: var(--mono);
  letter-spacing: .09em; color: var(--dim); font-weight: normal;
}
.chart-region.active h3 { color: var(--brass); }
.chart-region.locked { opacity: .5; }
.chart-rooms { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.chart-room { font-size: 11px; padding: 2px 5px; border: 1px solid transparent; }
.chart-room.here { border-color: var(--brass); color: var(--bright); background: #2a2109; }
.chart-room.seen { color: #c3b493; }
.chart-room.unknown { color: #6c7691; font-style: italic; }
.chart-link { color: #47536f; font-size: 10px; }
.chart-progress { margin-top: 6px; font-family: var(--mono); font-size: 10px; color: var(--dim); }

/* ---------------- cover ---------------- */

.story-cover {
  position: fixed; inset: 0; z-index: 40; display: grid;
  grid-template-columns: 1fr 1fr; align-items: center;
  background: #070c18; color: var(--primary); font-family: var(--font);
}
.story-cover.closing { opacity: 0; transition: opacity .4s ease; }
.cover-art { position: relative; height: 100%; overflow: hidden; background: linear-gradient(180deg, #1d3a63 0, #4a6b8a 46%, #b58f5c 78%, #d8b483 100%); }
.cover-sun { position: absolute; left: 50%; top: 20%; width: 190px; height: 190px; margin-left: -95px; border-radius: 50%; background: radial-gradient(circle, #fff3cf 0, #f2c169 60%, rgba(242, 193, 105, 0) 72%); }
.cover-balloon { position: absolute; left: 50%; top: 26%; width: 210px; height: 250px; margin-left: -105px; border-radius: 50% 50% 46% 46%; background: linear-gradient(100deg, #f0e2c0 0, #d9c191 42%, #9d8355 100%); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.cover-basket { position: absolute; left: 50%; top: 63%; width: 62px; height: 42px; margin-left: -31px; background: linear-gradient(180deg, #8a6533, #5d431f); }
.cover-rope { position: absolute; left: 50%; top: 56%; width: 2px; height: 74px; background: rgba(60, 40, 18, .8); }
.cover-rope.left { margin-left: -30px; transform: rotate(9deg); }
.cover-rope.right { margin-left: 28px; transform: rotate(-9deg); }
.cover-land { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: linear-gradient(180deg, #a8823f 0, #6d5222 100%); }
.cover-river { position: absolute; left: 8%; right: -10%; bottom: 7%; height: 16px; background: rgba(120, 160, 170, .75); transform: rotate(-3deg); }
.cover-content { padding: 6vh 5vw; max-width: 640px; }
.cover-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .28em; color: var(--brass); }
.story-cover h1 { font-size: clamp(30px, 4.4vw, 56px); line-height: 1.04; margin: 12px 0 18px; color: var(--bright); letter-spacing: .02em; }
.story-cover p { max-width: 52ch; line-height: 1.6; color: #cdbf9d; }
.cover-credit { color: var(--dim); font-size: 13px; }
.cover-option { display: block; margin: 9px 0; font-size: 14px; }
.start-story {
  margin: 18px 0 10px; padding: 14px 26px; font-family: var(--mono);
  font-size: 15px; letter-spacing: .14em; cursor: pointer;
  color: #201703; background: var(--brass); border: 1px solid var(--bright);
}
.start-story:hover { background: var(--bright); }
.story-cover small { display: block; color: var(--dim); font-size: 12px; }

body.high-contrast { --brass: #fff; --sky: #000; }
body.high-contrast .chart-gauge i.full { background: #fff; }
body.high-contrast .cover-art { display: none; }
body.high-contrast .story-cover { grid-template-columns: 1fr; }

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