/* ===========================================================================
   THE THREE MUSKETEERS — css/theme.css

   css/game.css ships byte-identical to the TIFE Core 2.3.0 kit. Every visual
   choice for this story is an override here: oxblood, tarnished gold, candle
   wax and steel.
   ======================================================================== */

:root {
  --m3-ink: #efe6d2;
  --m3-parch: #d8c9a6;
  --m3-oxblood: #6d1620;
  --m3-oxblood-lit: #a3242f;
  --m3-gold: #c9a349;
  --m3-gold-dim: #8a6f2e;
  --m3-steel: #7d8996;
  --m3-night: #14100f;
  --m3-night-2: #1e1917;
  --m3-night-3: #2a2320;
}

body {
  background:
    radial-gradient(circle at 18% 8%, rgba(201, 163, 73, 0.10), transparent 45%),
    radial-gradient(circle at 82% 92%, rgba(109, 22, 32, 0.16), transparent 50%),
    var(--m3-night);
  color: var(--m3-ink);
}

/* ------------------------------------------------------------- top bar */
.topbar {
  background: linear-gradient(180deg, var(--m3-night-3), var(--m3-night-2));
  border-bottom: 1px solid var(--m3-gold-dim);
}
.topbar .logo {
  background: var(--m3-oxblood);
  color: var(--m3-gold);
  border: 1px solid var(--m3-gold-dim);
  letter-spacing: 0.14em;
}
.topbar .product { color: var(--m3-steel); letter-spacing: 0.10em; }
.topbar .game-title strong { color: var(--m3-gold); letter-spacing: 0.06em; }
.topbar .game-title small { color: var(--m3-steel); }
.topbar .metric small { color: var(--m3-steel); }
.topbar .metric b { color: var(--m3-ink); }

/* ------------------------------------------------------------- panels */
.panel {
  background: linear-gradient(180deg, rgba(42, 35, 32, 0.92), rgba(20, 16, 15, 0.92));
  border: 1px solid rgba(201, 163, 73, 0.26);
  border-radius: 2px;
}
.panel h2 {
  color: var(--m3-gold);
  border-bottom: 1px solid rgba(201, 163, 73, 0.24);
  letter-spacing: 0.10em;
  font-size: 0.74rem;
}
.panel .row { border-bottom: 1px dotted rgba(125, 137, 150, 0.22); }
.panel .row.complete { color: var(--m3-gold); }
.panel .row.locked { color: #5d5650; }
.panel .progress { background: rgba(125, 137, 150, 0.20); }
.panel .progress i { background: linear-gradient(90deg, var(--m3-oxblood), var(--m3-gold)); }
.panel .link { color: var(--m3-parch); }
.panel .link:hover { color: var(--m3-gold); }

/* ------------------------------------------------------------ terminal */
.terminal {
  background:
    linear-gradient(180deg, rgba(30, 25, 23, 0.96), rgba(16, 13, 12, 0.98));
  border: 1px solid rgba(201, 163, 73, 0.22);
  color: var(--m3-ink);
  line-height: 1.62;
}
.output { margin: 0 0 0.85rem; }
.output.command {
  color: var(--m3-gold);
  border-left: 2px solid var(--m3-oxblood-lit);
  padding-left: 0.6rem;
  letter-spacing: 0.03em;
}
.output.title {
  color: var(--m3-gold);
  border-top: 1px solid var(--m3-gold-dim);
  border-bottom: 1px solid var(--m3-gold-dim);
  padding: 0.7rem 0;
  letter-spacing: 0.05em;
}
.output.system { color: var(--m3-parch); }
.output.warning { color: #d9a24c; }
.output.error { color: #c9707a; }

/* --------------------------------------------------------- command bar */
.command-entry {
  background: rgba(30, 25, 23, 0.95);
  border: 1px solid rgba(201, 163, 73, 0.30);
}
.command-entry span { color: var(--m3-oxblood-lit); }
.command-entry input { color: var(--m3-ink); }
.command-entry input::placeholder { color: #6b645d; }

/* ------------------------------------------------------------ palette */
.palette-label {
  color: var(--m3-gold-dim);
  letter-spacing: 0.16em;
  font-size: 0.62rem;
}
.button-row button,
.footerbar button,
.topbar button {
  background: linear-gradient(180deg, var(--m3-night-3), var(--m3-night-2));
  border: 1px solid rgba(201, 163, 73, 0.30);
  color: var(--m3-parch);
  border-radius: 2px;
  letter-spacing: 0.05em;
}
.button-row button:hover,
.footerbar button:hover,
.topbar button:hover {
  border-color: var(--m3-gold);
  color: var(--m3-gold);
}
.button-row button.selected {
  background: var(--m3-oxblood);
  border-color: var(--m3-gold);
  color: var(--m3-ink);
}

/* The eight story verbs are set apart from the standard action band so the
   player can see at a glance which verbs belong to this story. */
.button-row button.m3-verb {
  border-color: rgba(163, 36, 47, 0.72);
  color: #e7c98f;
  background: linear-gradient(180deg, #33211f, #241715);
}
.button-row button.m3-verb:hover {
  border-color: var(--m3-gold);
  color: #fff2d2;
}
.button-row button.m3-verb.selected {
  background: var(--m3-oxblood-lit);
  color: #fff6e2;
}

/* --------------------------------------------------------- region chart */
.m3-chart { font-size: 0.72rem; }
.m3-region { margin-bottom: 0.55rem; }
.m3-region h3 {
  margin: 0 0 0.2rem;
  font-size: 0.64rem;
  letter-spacing: 0.10em;
  color: var(--m3-gold-dim);
  text-transform: uppercase;
}
.m3-region.m3-unknown h3 { color: #4e4842; }
.m3-rooms { list-style: none; margin: 0; padding: 0 0 0 0.15rem; }
.m3-rooms li {
  padding: 0.08rem 0;
  color: var(--m3-parch);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m3-rooms li.m3-fog { color: #4e4842; }
.m3-rooms li.m3-here { color: var(--m3-gold); font-weight: 600; }
.m3-pip { display: inline-block; width: 1.1em; color: var(--m3-oxblood-lit); }
.m3-rooms li.m3-fog .m3-pip { color: #45403b; }
.m3-legend { margin: 0.4rem 0 0; font-size: 0.6rem; color: #6b645d; }

/* ------------------------------------------------------------- cover */
.story-cover {
  background:
    radial-gradient(circle at 50% 22%, rgba(201, 163, 73, 0.16), transparent 55%),
    linear-gradient(180deg, #100c0b 0%, #1d1513 55%, #2a1a19 100%);
}
.cover-content { color: var(--m3-ink); }
.cover-kicker { color: var(--m3-gold-dim); letter-spacing: 0.24em; }
#cover-title {
  color: var(--m3-gold);
  letter-spacing: 0.05em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.55);
}
.cover-credit { color: var(--m3-steel); }
.start-story {
  background: linear-gradient(180deg, var(--m3-oxblood-lit), var(--m3-oxblood));
  border: 1px solid var(--m3-gold);
  color: #fff4dd;
  letter-spacing: 0.14em;
}
.start-story:hover { background: var(--m3-oxblood-lit); }

/* Four crossed blades and a hat, drawn in CSS on the cover panel. */
.cover-art { overflow: hidden; }
.cover-moon {
  background: radial-gradient(circle, rgba(255, 246, 222, 0.85), rgba(255, 246, 222, 0) 68%);
}
.cover-ridge { background: linear-gradient(180deg, #2b1c1a, #150f0e); }
.cover-cave { background: linear-gradient(180deg, rgba(109, 22, 32, 0.55), rgba(0, 0, 0, 0.9)); }

/* --------------------------------------------------------- dialog etc. */
#dialog {
  background: var(--m3-night-2);
  color: var(--m3-ink);
  border: 1px solid var(--m3-gold-dim);
}
#dialog header { border-bottom: 1px solid rgba(201, 163, 73, 0.24); }
#dialog h2 { color: var(--m3-gold); }
.save-row { border-bottom: 1px dotted rgba(125, 137, 150, 0.24); }
.footerbar {
  background: linear-gradient(0deg, var(--m3-night-3), var(--m3-night-2));
  border-top: 1px solid var(--m3-gold-dim);
}
.caption-region {
  background: rgba(15, 11, 10, 0.94);
  border: 1px solid var(--m3-gold-dim);
  color: var(--m3-parch);
}

/* ------------------------------------------------------- accessibility */
/* The engine stylesheet leaves focus rings to the browser default, which is
   invisible against this palette. */
:focus-visible {
  outline: 2px solid var(--m3-gold);
  outline-offset: 2px;
}

/* [hidden] loses to any class that sets a display value, which is how the
   caption strip stays on screen after its timeout. */
.caption-region[hidden],
[data-panel][hidden],
.m3-chart[hidden] { display: none !important; }

body.high-contrast {
  --m3-ink: #ffffff;
  --m3-parch: #ffffff;
  --m3-gold: #ffd34d;
  --m3-gold-dim: #ffd34d;
  --m3-steel: #d7dde3;
  --m3-night: #000000;
  --m3-night-2: #000000;
  --m3-night-3: #101010;
}
body.high-contrast .terminal,
body.high-contrast .panel { background: #000; border-color: #ffd34d; }
body.high-contrast .output.system { color: #fff; }

body.large-controls .button-row button,
body.large-controls .footerbar button { min-height: 2.6rem; padding: 0.55rem 0.9rem; }

body.simplified-ui .stack.right .panel:not([data-panel="inventory"]) { display: none; }
body.simplified-ui .m3-legend { display: none; }

body.reduced-motion * { transition: none !important; animation: none !important; }

body.screen-reader-mode .m3-chart { display: none; }
body.screen-reader-mode .panel { border-color: #fff; }

/* --------------------------------------------------------------- narrow */
@media (max-width: 900px) {
  .m3-chart { font-size: 0.68rem; }
  .topbar .product { display: none; }
}