/* THE QUIET WHEEL — skin.
   css/game.css ships byte-identical from TIFE Core 2.3.0. Every visual change
   this story needs is an override here: cold station white-blue instead of the
   stock phosphor green, plus the map-chart and cover styling. */

:root {
  --primary: #cfe4f2;
  --bright:  #ffffff;
  --dim:     #6d8798;
  --line:    #1d3948;
  --bg:      #01060a;
  --panel:   #04101a;
  --panel2:  #061722;
  --warn:    #ffcf6b;
  --danger:  #ff9a94;
  --amber:   #ffb545;
  --font: Consolas, "Courier New", monospace;
  --glow: 0.55;
}

html, body { background: #01060a; }

.shell {
  background:
    radial-gradient(circle at 50% 20%, rgba(46, 96, 128, 0.20) 0, rgba(2, 9, 15, 0.9) 55%, #01060a 100%);
}

.topbar { background: #03101a; border-color: var(--line); }
.logo { color: #ffffff; text-shadow: 0 0 calc(9px * var(--glow)) #7fc7f5; }
.product span { color: var(--dim); }
.game-title strong { color: #ffffff; letter-spacing: 0.24em; }
.game-title small { color: var(--amber); letter-spacing: 0.08em; }

.terminal {
  text-shadow: 0 0 calc(5px * var(--glow)) rgba(150, 205, 240, 0.35);
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0, rgba(255,255,255,.014) 1px,
                              transparent 1px, transparent 4px),
    #01060a;
}
.output.title  { color: var(--amber); letter-spacing: 0.06em; }
.output.system { color: #9fc6dc; }
.output.warning{ color: var(--warn); }
.output.error  { color: var(--danger); }
.output.command{ color: #5e93b3; }

.panel {
  background: linear-gradient(180deg, rgba(6, 22, 34, .96), rgba(1, 7, 12, .96));
  box-shadow: inset 0 0 20px rgba(120, 190, 235, .035);
}
.panel h2 { border-bottom-color: #17323f; color: #dceaf4; }
.panel p  { color: #8fadc0; }
.panel .row { border-bottom-color: #122935; }
.panel button.link { color: #ffffff; }
.progress { background: #0a1c26; }
.progress i { background: linear-gradient(90deg, #4fa8d8, #9fd8ff); }
.complete { color: #9fe3b4; }
.locked   { color: #4e6675; }

.topbar button, .footerbar button, .command-entry button, .button-row button, dialog button {
  background: #06202e; border-color: var(--line); color: #cfe4f2;
}
.topbar button:hover, .footerbar button:hover, .button-row button:hover {
  background: #0d3a51; color: #ffffff;
}
.button-row button.selected { background: #14506f; color: #ffffff; }

/* the eight story verbs read as a second class of control */
.button-row button[data-story-verb] {
  border-color: #5a4212;
  background: #1c1405;
  color: var(--amber);
  letter-spacing: 0.08em;
}
.button-row button[data-story-verb]:hover { background: #3a2a08; color: #ffdca0; }

/* ------------------------------------------------------- the map chart */
.qw-chart { font-size: 11px; line-height: 1.45; }
.qw-clock {
  border: 1px solid #4a3a12; background: #150f04; padding: 6px 8px; margin-bottom: 9px;
}
.qw-clock span { display: block; font-size: 9px; letter-spacing: 0.16em; color: #a68b4d; }
.qw-clock b { display: block; font-size: 19px; color: var(--amber); letter-spacing: 0.05em; }
.qw-clock .progress { height: 4px; background: #2a1f06; margin: 5px 0 0; }
.qw-clock .progress i { background: linear-gradient(90deg, #a8641c, #ffc169); }

.qw-region {
  margin: 9px 0 3px; padding-bottom: 2px; border-bottom: 1px solid #143040;
  color: #7fb6d6; font-size: 10px; letter-spacing: 0.12em;
}
.qw-region.locked { color: #3d5462; border-bottom-color: #0c1d26; }
.qw-room { color: #a9c6d8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qw-room.unseen { color: #3d5462; }
.qw-room.here { color: #ffffff; background: #0e2f43; }
.qw-exits { float: right; color: #4e7a92; font-size: 9px; letter-spacing: 0.12em; }
.qw-legend { margin-top: 10px; padding-top: 6px; border-top: 1px solid #143040;
             color: var(--dim); font-size: 10px; }

/* -------------------------------------------------------- cover overlay */
.story-cover { background: #01060a; }
.cover-art { background: linear-gradient(180deg, #02121d 0%, #01060a 70%); }
.cover-content h1 { color: #ffffff; letter-spacing: 0.10em; }
.cover-kicker { color: var(--amber); letter-spacing: 0.22em; }
.cover-credit { color: var(--dim); }
.start-story {
  background: #123c55; border: 1px solid #2f7ba3; color: #ffffff; letter-spacing: 0.14em;
}
.start-story:hover { background: #1b5a7d; }

/* the station ring, drawn with the cover's stock decorative elements */
.cover-moon {
  background: radial-gradient(circle at 40% 38%, #16394d 0, #071a26 62%, transparent 66%);
  box-shadow: 0 0 90px rgba(80, 160, 210, .18);
}
.cover-ridge { background: linear-gradient(180deg, #0a2231, #01060a); }
.cover-cave  { background: radial-gradient(ellipse at 50% 0%, #ffb545 0, rgba(255,181,69,0) 62%); }

body.high-contrast .qw-room.here { background: #ffffff; color: #000000; }
body.high-contrast .qw-clock b { color: #ffffff; }