/* The Time Machine — theme overrides.
   css/game.css is the pristine TIFE Core stylesheet and is not edited.
   Everything here is an override layered on top of it. */

body.tm {
  --primary: #e8b661;   /* brass */
  --bright:  #ffe9b8;   /* polished nickel highlight */
  --dim:     #96773f;
  --line:    #6b4d1c;
  --bg:      #000;
  --panel:   #140d04;
  --panel2:  #1b1207;
  --warn:    #ffd479;
  --danger:  #ff9a76;
  --font: Consolas, "Courier New", monospace;
}

body.tm .shell {
  background: radial-gradient(circle at 50% 32%, #1a1206 0, #0a0703 52%, #000 100%);
}
body.tm .topbar { background: #0d0904; }
body.tm .panel {
  background: linear-gradient(180deg, rgba(26, 17, 6, .96), rgba(8, 5, 2, .96));
  box-shadow: inset 0 0 22px rgba(232, 182, 97, .03);
}
body.tm .panel h2 { border-bottom: 1px solid #4d3714; }
body.tm .panel p { color: #cbae7c; }
body.tm .panel .row { border-bottom: 1px solid #362508; }
body.tm .progress { background: #241804; }
body.tm .locked { color: #7d6a4a; }
body.tm .terminal {
  text-shadow: 0 0 calc(6px * var(--glow)) rgba(232, 182, 97, .34);
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .010) 0, rgba(255, 255, 255, .010) 1px, transparent 1px, transparent 4px), #000;
}
body.tm .topbar button, body.tm .footerbar button,
body.tm .command-entry button, body.tm .button-row button,
body.tm dialog button { background: #171005; }
body.tm .topbar button:hover, body.tm .footerbar button:hover,
body.tm .button-row button:hover { background: #3a2809; color: var(--bright); }
body.tm .logo { text-shadow: 0 0 calc(10px * var(--glow)) var(--primary); }

/* the era chart drawn by js/map.js */
body.tm .panel[data-panel="map"] pre.map {
  line-height: 1.32;
  font-size: 10.5px;
  color: #d9b878;
  margin: 0;
  white-space: pre;
  overflow-x: auto;
}
body.tm .tm-era {
  display: block;
  letter-spacing: .14em;
  font-size: 10px;
  color: var(--bright);
  border-bottom: 1px solid #4d3714;
  padding-bottom: 5px;
  margin-bottom: 7px;
}
body.tm .tm-strip {
  display: block;
  font-size: 9.5px;
  color: var(--dim);
  margin-top: 8px;
  border-top: 1px solid #362508;
  padding-top: 6px;
}
body.tm .tm-strip b { color: var(--bright); font-weight: normal; }
body.tm .tm-here { color: var(--bright); }
body.tm .tm-unseen { color: #6a5530; }

/* ---------------------------------------------------------- cover art */
body.tm .cover-art {
  background:
    radial-gradient(circle at 70% 26%, rgba(255, 233, 184, .20), transparent 15%),
    linear-gradient(180deg, #1c1307 0%, #0a0603 60%, #000 100%);
}
body.tm .cover-moon {
  /* the sun smeared into a band of fire by travelling */
  width: 260px; height: 34px; right: 8%; top: 20%;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, #ffcf7a 18%, #fff3d4 50%, #ffcf7a 82%, transparent);
  box-shadow: 0 0 70px rgba(255, 190, 90, .45);
}
body.tm .ridge-one { background: #2b1d08; opacity: .85; }
body.tm .ridge-two { background: #100a03; }
body.tm .cover-cave {
  /* the white sphinx on its pedestal */
  left: 34%; bottom: 0; width: 32%; height: 46%;
  background:
    radial-gradient(ellipse at 50% 26%, #e8dcc4 0 24%, transparent 25%),
    linear-gradient(180deg, transparent 0 36%, #d8cbb0 36% 56%, transparent 57%),
    linear-gradient(180deg, transparent 0 58%, #6d5c3d 58% 100%);
  filter: drop-shadow(0 -10px 20px rgba(255, 200, 120, .12));
}
body.tm .cover-dial {
  position: absolute; left: 9%; bottom: 12%;
  width: 118px; height: 118px; border-radius: 50%;
  border: 2px solid rgba(255, 233, 184, .55);
  box-shadow: 0 0 26px rgba(255, 200, 120, .22), inset 0 0 18px rgba(255, 200, 120, .12);
  background: repeating-conic-gradient(from 0deg, rgba(255, 233, 184, .30) 0 2deg, transparent 2deg 30deg);
}
body.tm .cover-dial:after {
  content: ""; position: absolute; left: 50%; top: 12%;
  width: 2px; height: 40%; background: var(--bright);
  transform-origin: bottom center; transform: rotate(38deg);
}
body.tm .cover-content { background: linear-gradient(135deg, rgba(28, 19, 7, .98), #060402); }
body.tm .cover-content h1 { text-shadow: 0 0 26px rgba(232, 182, 97, .28); }
body.tm .cover-content p { color: #ddc59a; }
body.tm .start-story {
  background: #4a3310; border: 1px solid var(--bright); color: var(--bright);
  box-shadow: 0 0 18px rgba(232, 182, 97, .14);
}
body.tm .start-story:hover, body.tm .start-story:focus { background: #6b4a16; outline: 2px solid var(--bright); }

/* high-contrast profile stays legible against the brass palette */
body.tm.high-contrast {
  --primary: #ffffff; --bright: #ffffff; --dim: #d8d8d8; --line: #ffffff; --glow: 0;
}