/* Idle Stories — web reader. Theme colors are injected onto :root from the game's
   theme.json at runtime; these are the fallbacks (After Us palette). */
:root {
  --bg: #07090C;
  --surface: #11151B;
  --text: #C2CAD2;
  --text-dim: #5C6773;
  --accent: #B5895A;
  --danger: #9C4A3A;
  --measure: min(92vw, 60ch);
  --page: clamp(18px, 5vw, 40px);
  --body-size: 17px;
  --mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --serif: Georgia, "Times New Roman", serif;
  --font: var(--serif);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--body-size);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* --- background image layers (crossfade) --- */
#stage, #stage-next {
  position: fixed; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.1s ease;
  will-change: opacity;
}
#stage.show, #stage-next.show { opacity: 1; }

#scrim {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 1;
  transition: opacity .6s ease;
  background:
    radial-gradient(120% 80% at 50% 12%, transparent 0%, rgba(7,9,12,0.55) 62%, var(--bg) 100%),
    linear-gradient(180deg, rgba(7,9,12,0.72) 0%, rgba(7,9,12,0.82) 55%, rgba(7,9,12,0.94) 100%);
}

/* --- background art preview --- */
#app { transition: opacity .5s ease; }
body.preview #scrim { opacity: 0.1; }
body.preview #app { opacity: 0; pointer-events: none; }
#preview-layer {
  position: fixed; inset: 0; z-index: 6; display: none;
  align-items: flex-end; justify-content: center; padding-bottom: 44px; cursor: pointer;
}
body.preview #preview-layer { display: flex; }
#preview-layer span {
  font-family: var(--mono); font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--text-dim); background: rgba(7,9,12,0.45); padding: 8px 15px; border-radius: 3px;
  backdrop-filter: blur(2px);
}
/* CRT scanline veil — only shown for games whose theme.surface === "crt" */
#crt {
  position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.16) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
body.crt #crt { opacity: 0.5; }

/* --- app shell --- */
#app {
  position: relative; z-index: 3;
  min-height: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: max(env(safe-area-inset-top), 24px) var(--page) 96px;
  display: flex; flex-direction: column;
}
.loading { margin: auto; color: var(--text-dim); font-family: var(--mono); letter-spacing: .3em; }

/* --- top bar --- */
.topbar {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-dim);
  padding-bottom: 18px; margin-bottom: 8px;
}
.topbar .spacer { flex: 1; }
.topbar button {
  background: none; border: 0; color: var(--text-dim); cursor: pointer;
  font: inherit; letter-spacing: inherit; padding: 4px 6px;
}
.topbar button:hover { color: var(--text); }
.topbar .langs button.on { color: var(--accent); }
.topbar [data-act="art"] { font-size: 15px; color: var(--accent); }
.topbar .ost-btn { font-size: 15px; }
.topbar .ost-btn.on { color: var(--accent); }

/* --- soundtrack (OST) picker --- */
#ost-overlay {
  position: fixed; inset: 0; z-index: 7; display: flex; align-items: center; justify-content: center;
  background: rgba(7,9,12,0.72); padding: var(--page); backdrop-filter: blur(3px);
}
.ost {
  width: 100%; max-width: 420px; max-height: 82vh; overflow-y: auto;
  background: var(--surface); border: 1px solid rgba(194,202,210,0.14); border-radius: 4px;
  padding: 22px; display: flex; flex-direction: column; gap: 8px;
}
.ost__head { font-family: var(--mono); font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; }
.ost__opt, .ost__track {
  display: block; width: 100%; text-align: left; background: none; cursor: pointer;
  border: 1px solid rgba(194,202,210,0.12); border-radius: 3px; color: var(--text);
  font-family: var(--mono); font-size: 13px; padding: 11px 13px; transition: border-color .2s ease, background .2s ease;
}
.ost__opt i { color: var(--text-dim); font-style: normal; font-size: 11px; }
.ost__opt:hover, .ost__track:hover { border-color: var(--accent); }
.ost__opt.on, .ost__track.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ost__opt.on::after, .ost__track.on::after { content: " ♪"; color: var(--accent); }
.ost__tracks { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.ost__track { display: flex; flex-direction: column; gap: 3px; }
.ost__track .ost__t { font-size: 13px; letter-spacing: .04em; }
.ost__track .ost__m { font-family: var(--serif); font-style: italic; font-size: 12px; color: var(--text-dim); line-height: 1.35; }
.ost .ost__close { margin-top: 8px; align-self: flex-end; }

/* --- catalog / picker --- */
.catalog { padding: 8px 0 40px; }
.catalog .lede { color: var(--text-dim); max-width: 46ch; margin: 10px 0 30px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 20px 18px; }
.card { display: block; text-align: left; background: none; border: 0; color: inherit; padding: 0; cursor: pointer; }
.card .cover {
  display: block; aspect-ratio: 3 / 4; background: var(--surface) center/cover no-repeat;
  border: 1px solid rgba(194,202,210,0.12); border-radius: 3px; position: relative;
  transition: border-color .2s ease, transform .2s ease;
}
.card:hover .cover { border-color: var(--accent); transform: translateY(-2px); }
.card .cover .dot { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(7,9,12,0.6); }
.card .ct { display: block; font-family: var(--mono); font-size: 13px; letter-spacing: .06em; margin-top: 11px; color: var(--text); }
.card .cs { display: block; font-style: italic; color: var(--text-dim); font-size: 12.5px; margin-top: 2px; }
.card .cm { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); margin-top: 6px; opacity: .8; }

/* --- HUD --- */
.hud { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; }
.hud .stat { min-width: 92px; }
.hud .stat .k {
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 5px;
}
.hud .stat .bar { height: 3px; background: rgba(194,202,210,0.12); position: relative; }
.hud .stat .bar > i { position: absolute; inset: 0 auto 0 0; background: var(--accent); transition: width .5s ease; }

/* --- combat --- */
.combat { margin-bottom: 18px; }
.combat__row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 7px; }
.combat__enemy { font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--danger); }
.combat__round { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--text-dim); }
.combat__hp { height: 4px; background: rgba(156,74,58,0.18); position: relative; }
.combat__hp > i { position: absolute; inset: 0 auto 0 0; background: var(--danger); transition: width .35s ease; }
.prose.combat-log p { color: var(--text-dim); font-style: italic; margin-bottom: .7em; }
.prose.combat-log p:last-child { color: var(--text); font-style: normal; }

/* --- prose --- */
.prose { flex: 1; }
.prose p { margin: 0 0 1.25em; text-wrap: pretty; overflow-wrap: break-word; hyphens: auto; }
.prose.ending p:first-child::first-letter { color: var(--accent); }

/* --- choices --- */
.choices { margin-top: 30px; display: flex; flex-direction: column; gap: 2px; padding-bottom: 20px; }
.choice {
  display: block; width: 100%; text-align: left;
  background: none; color: var(--text);
  border: 1px solid rgba(194,202,210,0.14); border-radius: 3px;
  font-family: var(--mono); font-size: 15px; line-height: 1.5;
  padding: 14px 16px; cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.choice:hover:not(.disabled) { border-color: var(--accent); background: rgba(181,137,90,0.06); }
.choice::before { content: "› "; color: var(--accent); }
.choice.disabled { color: var(--text-dim); cursor: default; opacity: .55; border-color: rgba(194,202,210,0.06); }
.choice.disabled::before { content: "· "; color: var(--text-dim); }

/* --- title / ending screens --- */
.centered { margin: auto 0; padding: 8vh 0; }
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var(--text-dim); }
.title { font-family: var(--mono); font-size: clamp(30px, 8vw, 46px); font-weight: 700; letter-spacing: .04em; margin: 14px 0 6px; color: var(--text); }
.subtitle { color: var(--accent); font-style: italic; margin-bottom: 24px; }
.summary { color: var(--text); max-width: 48ch; margin-bottom: 34px; }
.btn {
  display: inline-block; background: none; color: var(--text);
  border: 1px solid var(--accent); border-radius: 3px;
  font-family: var(--mono); font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  padding: 13px 22px; cursor: pointer; transition: background .2s ease;
}
.btn:hover { background: rgba(181,137,90,0.12); }
.btn.ghost { border-color: rgba(194,202,210,0.2); color: var(--text-dim); }
.row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.end-mark { font-family: var(--mono); font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var(--text-dim); margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
  #stage, #stage-next, .hud .stat .bar > i { transition: none; }
}