:root {
  color-scheme: dark;
  font-family: Georgia, "Times New Roman", serif;
  background: #111816;
  color: #eee3cd;
  line-height: 1.5;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #111816; }
button, select { font: inherit; }
button, select, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid #e3bd78; outline-offset: 3px; }

.topbar {
  position: sticky;
  z-index: 5;
  top: 0;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1rem;
  align-items: center;
  padding: .7rem clamp(1rem, 3vw, 2.5rem);
  border-bottom: 1px solid #e3bd7838;
  background: #111816ed;
  backdrop-filter: blur(12px);
}

.brand { color: #f0d7a4; text-decoration: none; letter-spacing: .08em; text-transform: uppercase; }
.connection { margin: 0; color: #aca28f; font: .75rem system-ui, sans-serif; }
.mode-control { display: flex; align-items: center; gap: .5rem; color: #aca28f; font: .75rem system-ui, sans-serif; }
select { padding: .35rem .5rem; border: 1px solid #e3bd7866; border-radius: .25rem; background: #1c2723; color: #eee3cd; }
.stale { padding: .7rem 1rem; background: #7b5425; text-align: center; font: .85rem system-ui, sans-serif; }

main { width: min(1180px, 100%); margin: 0 auto; padding-bottom: 3rem; }
.journey { position: relative; height: min(55vh, 34rem); min-height: 22rem; overflow: hidden; border-inline: 1px solid #e3bd7824; background: #273832; }
.landscape { width: 100%; height: 100%; }
.sun { fill: #f1d59b; opacity: .75; }
.travelers { transform-origin: center; animation: breathe 5s ease-in-out infinite alternate; }
.time-tint { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; transition: background 3s ease; }
body[data-phase="dawn"] .time-tint { background: #b95e4c33; }
body[data-phase="day"] .time-tint { background: #f0bd6520; }
body[data-phase="dusk"] .time-tint { background: #68446a66; }
body[data-phase="night"] .time-tint { background: #102a588f; }
.place { position: absolute; top: 1.2rem; left: 1.2rem; display: flex; gap: 1rem; padding: .5rem .7rem; border: 1px solid #e3bd7844; background: #101714c9; letter-spacing: .08em; text-transform: uppercase; }
.place span:last-child { color: #b9ad96; font: .7rem system-ui, sans-serif; }
.journey-note { position: absolute; right: 1.2rem; bottom: 1rem; margin: 0; padding: .5rem .7rem; background: #101714c9; color: #d8c8aa; font-style: italic; }

.game { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; padding: 1rem; }
.panel { border: 1px solid #e3bd7833; border-radius: .35rem; background: linear-gradient(135deg, #1a2420, #171e1b); padding: 1.25rem; box-shadow: 0 1rem 2.5rem #0004; }
.panel h1, .panel h2 { margin: .2rem 0 .75rem; font-weight: normal; line-height: 1.15; }
.panel p { max-width: 65ch; }
.eyebrow { margin: 0; color: #cda766; font: .68rem system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.onboarding { margin: -2rem 1rem 2rem; position: relative; z-index: 2; }
.hero-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .7rem; }
.hero-card, .chip, .option, .delegate { border: 1px solid #d1aa6670; border-radius: .3rem; background: #24312c; color: #f0e1c5; cursor: pointer; text-align: left; }
.hero-card { min-height: 8rem; padding: 1rem; }
.hero-card strong { display: block; margin-bottom: .45rem; color: #e8c883; font-size: 1.12rem; }
.hero-card:hover, .chip:hover, .option:hover, .delegate:hover { background: #304039; border-color: #e8c883; }
.decision { grid-column: 1 / -1; border-color: #e8c88388; background: linear-gradient(125deg, #30291f, #1d2521); }
.decision .options { display: flex; flex-wrap: wrap; gap: .65rem; }
.option, .delegate { padding: .7rem .85rem; }
.delegate { color: #c9beaa; border-color: #b5aa9560; background: transparent; }
.guidance { grid-column: span 5; }
.summary { grid-column: span 7; }
.journal { grid-column: span 7; }
.party { grid-column: span 5; }
.mementos { grid-column: 1 / -1; }
.chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.chip { padding: .55rem .7rem; }
button:disabled { cursor: not-allowed; opacity: .5; }
ol, ul { margin: 0; padding: 0; list-style: none; }
#journal-entries li, #party-list li, #memento-list li, #summary-content article { padding: .7rem 0; border-top: 1px solid #eee3cd18; }
#journal-entries time { margin-right: .7rem; color: #9f957f; font: .7rem system-ui, sans-serif; }
#summary-content article.major { color: #f2dba8; }
#memento-list { display: flex; flex-wrap: wrap; gap: .6rem; }
#memento-list li { min-width: 10rem; padding: .75rem; border: 1px solid #e3bd783d; background: #11181588; text-transform: capitalize; }
footer { padding: 2rem 1rem; color: #8e887b; text-align: center; font: .72rem system-ui, sans-serif; }

@keyframes breathe { from { transform: translateY(0); } to { transform: translateY(-4px); } }
body[data-mode="reduced"] *, body[data-mode="battery"] * { scroll-behavior: auto; animation: none !important; transition: none !important; }
body[data-mode="battery"] .sun { opacity: .55; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

@media (max-width: 720px) {
  .topbar { grid-template-columns: 1fr auto; }
  .connection { grid-column: 1 / -1; grid-row: 2; }
  .journey { height: 18rem; min-height: 18rem; }
  .journey-note { left: 1rem; right: auto; }
  .game { display: flex; flex-direction: column; }
  .decision { order: -3; }
  .summary { order: -2; }
  .guidance { order: -1; }
}