/* AROUND THE WORLD IN EIGHTY DAYS — story skin.
   Loaded after css/game.css, which ships byte-identical to TIFE Core 2.3.0.
   Everything here is an override; nothing in the core stylesheet is edited. */

:root {
  --primary: #e6c68a;   /* lamp-lit brass */
  --bright:  #fff2d4;   /* gaslight       */
  --dim:     #9b7f52;   /* tarnish        */
  --line:    #6d5027;   /* rule and edge  */
  --bg:      #0c0805;
  --panel:   #140d07;
  --panel2:  #1a110a;
  --warn:    #f3c15a;
  --danger:  #e07a5f;
  --font: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --mono: Consolas, "Courier New", monospace;
}

html, body { background: #0c0805; }

.shell {
  background:
    radial-gradient(circle at 50% 12%, rgba(120, 86, 38, .20) 0, rgba(12, 8, 5, 0) 62%),
    linear-gradient(180deg, #120c07 0, #0a0604 55%, #070403 100%);
}

.topbar { background: linear-gradient(180deg, #1a1108, #0e0904); border-color: var(--line); }
.logo { color: var(--bright); text-shadow: 0 0 calc(9px * var(--glow)) rgba(230, 198, 138, .55); }
.game-title strong { letter-spacing: .18em; }

.terminal {
  background:
    repeating-linear-gradient(0deg, rgba(255, 240, 210, .014) 0, rgba(255, 240, 210, .014) 1px, transparent 1px, transparent 5px),
    radial-gradient(ellipse at 50% 0, rgba(120, 86, 38, .10) 0, rgba(0, 0, 0, 0) 70%),
    #080503;
  text-shadow: 0 0 calc(5px * var(--glow)) rgba(230, 198, 138, .26);
  line-height: 1.62;
}
.output.title { color: var(--bright); letter-spacing: .04em; }
.output.warning { color: var(--warn); }
.output.command { color: #b08f5c; }

.panel {
  background: linear-gradient(180deg, rgba(24, 16, 9, .96), rgba(10, 6, 4, .96));
  box-shadow: inset 0 0 22px rgba(230, 198, 138, .035);
}
.panel h2 { border-bottom: 1px solid #5b4220; letter-spacing: .11em; }
.panel p { color: #cbb28a; }
.panel .row { border-bottom: 1px solid #3a2a14; }

.topbar button, .footerbar button, .command-entry button, .button-row button, dialog button {
  background: linear-gradient(180deg, #241708, #150d06);
  border-color: var(--line);
}
.topbar button:hover, .footerbar button:hover, .button-row button:hover {
  background: #3a2610; color: var(--bright);
}
.button-row button.journey-verb {
  border-color: #8a6528;
  background: linear-gradient(180deg, #2e1d0a, #1b1107);
  color: var(--bright);
}
.button-row button.journey-verb:hover { background: #4a3113; }

/* ------------------------------------------------ the itinerary chart panel */
.atw-clock { margin: 0 0 9px; padding-bottom: 8px; border-bottom: 1px solid #5b4220; }
.atw-clock-line { font-size: 11px; color: #cbb28a; letter-spacing: .05em; }
.atw-clock-line b { color: var(--bright); font-size: 14px; letter-spacing: .1em; }
.atw-meter { font-family: var(--mono); font-size: 12px; color: var(--primary); letter-spacing: .04em; margin: 3px 0; }
.atw-region { margin: 9px 0 4px; font-size: 10px; letter-spacing: .13em; color: var(--dim); text-transform: uppercase; }
.atw-stop { font-size: 11px; padding: 2px 0 2px 6px; color: #7d6743; }
.atw-stop.atw-been { color: #cbb28a; }
.atw-stop.atw-here { color: var(--bright); font-weight: bold; text-shadow: 0 0 8px rgba(230, 198, 138, .5); }
.atw-note { margin-top: 11px; font-size: 10px; color: var(--dim); font-style: italic; letter-spacing: .05em; }

/* ---------------------------------------------------------------- the cover */
.story-cover { background: #0a0604; }
.story-cover .cover-art {
  position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 50% 52%, rgba(230, 198, 138, .16) 0, rgba(10, 6, 4, 0) 58%),
    linear-gradient(180deg, #17100a 0, #0a0604 100%);
}
.cover-moon {
  position: absolute; left: 50%; top: 50%; width: 340px; height: 340px;
  margin: -170px 0 0 -170px; border-radius: 50%;
  border: 1px solid rgba(230, 198, 138, .55);
  background:
    radial-gradient(circle at 34% 30%, rgba(230, 198, 138, .16) 0, rgba(0, 0, 0, 0) 62%),
    repeating-linear-gradient(0deg, rgba(230, 198, 138, .13) 0, rgba(230, 198, 138, .13) 1px, transparent 1px, transparent 34px);
  box-shadow: 0 0 70px rgba(230, 198, 138, .16), inset 0 0 60px rgba(230, 198, 138, .06);
}
.cover-ridge {
  position: absolute; left: 50%; top: 50%; width: 340px; height: 340px;
  margin: -170px 0 0 -170px; border-radius: 50%;
  border: 1px solid rgba(230, 198, 138, .30);
  background: none;
}
.cover-ridge.ridge-one { transform: scaleX(.34); }
.cover-ridge.ridge-two { transform: scaleX(.68); }
.cover-cave {
  position: absolute; left: 50%; top: 50%; width: 420px; height: 0;
  margin: -1px 0 0 -210px;
  border-top: 1px dashed rgba(230, 198, 138, .5);
  background: none;
}
.cover-content { background: linear-gradient(180deg, #14100a 0, #0a0704 100%); }
.cover-kicker { color: var(--dim); letter-spacing: .3em; }
#cover-title { color: var(--bright); letter-spacing: .09em; line-height: 1.12; }
.cover-credit { color: var(--dim); font-style: italic; }
.start-story {
  background: linear-gradient(180deg, #3a2610, #201406) !important;
  border: 1px solid #8a6528 !important; color: var(--bright) !important;
  letter-spacing: .16em;
}

/* high-contrast profile must stay legible against the brass palette */
body.high-contrast {
  --primary: #ffe9bd; --bright: #ffffff; --dim: #d8bd8e; --line: #c39a4e; --glow: 0;
}