:root {
  --bg: #120d16;
  --panel: rgba(25, 20, 28, .92);
  --panel-2: rgba(48, 35, 43, .88);
  --gold: #ffd36a;
  --red: #d64b54;
  --cyan: #7ee7d8;
  --text: #fff0c8;
  --muted: #c7ad7a;
  --line: #ffd36a;
}
* { box-sizing: border-box; image-rendering: pixelated; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: "Courier New", "SimSun", monospace;
  font-size: 13px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(135deg, #08070d, var(--bg) 52%, #100a13);
  background-size: 8px 8px, 8px 8px, auto;
}
.hidden { display: none !important; }
button, input { font: inherit; }
button {
  border: 2px solid var(--line);
  color: var(--text);
  background: #2a1c24;
  border-radius: 0;
  padding: 5px 7px;
  cursor: pointer;
  box-shadow: 3px 3px 0 #000;
  text-shadow: 1px 1px 0 #000;
}
button:hover { transform: translate(-1px,-1px); background:#3a2731; box-shadow: 4px 4px 0 #000; }
input {
  width: 100%;
  border: 2px solid var(--line);
  border-radius: 0;
  padding: 6px 7px;
  color: var(--text);
  background: #0b0a10;
  outline: none;
  box-shadow: inset 2px 2px 0 #000;
}
input:focus { border-color: var(--cyan); }
#app { max-width: 1180px; margin: 0 auto; }
.menu-screen { min-height: 100vh; padding: 26px 16px; }
.menu-head { border: 3px solid var(--line); background: var(--panel); box-shadow: 5px 5px 0 #000; padding: 16px; margin-bottom: 14px; text-align: center; }
.series-logo { width: min(820px, 92vw); aspect-ratio: 35 / 9; display: block; margin: 0 auto 12px; border: 3px solid var(--line); background: #08070d; box-shadow: 5px 5px 0 #000; object-fit: cover; }
.menu-head h1 { margin: 0; font-size: 34px; letter-spacing: .12em; color: var(--gold); text-shadow: 3px 3px 0 #000; }
.menu-head p { max-width: 760px; margin-left: auto; margin-right: auto; }
.story-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.story-card { min-height: 430px; border: 3px solid var(--line); background: var(--panel); box-shadow: 5px 5px 0 #000; display: flex; flex-direction: column; }
.story-cover { height: 190px; background: center / cover no-repeat; border-bottom: 3px solid var(--line); position: relative; }
.story-cover::after { content:""; position:absolute; inset:0; background-image: linear-gradient(90deg, rgba(255,255,255,.16) 2px, transparent 2px), linear-gradient(rgba(255,255,255,.12) 2px, transparent 2px), linear-gradient(180deg, transparent, rgba(0,0,0,.58)); background-size: 14px 14px, 14px 14px, auto; }
.story-info { padding: 10px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.story-info h2 { margin: 0; color: var(--gold); font-size: 22px; text-shadow: 2px 2px 0 #000; }
.story-info p { margin: 0; color: var(--muted); line-height: 1.45; }
.story-tags { display:flex; flex-wrap:wrap; gap:5px; }
.story-tags span { border:2px solid var(--line); padding:2px 5px; background:#100b12; color:var(--cyan); box-shadow:2px 2px 0 #000; font-size:11px; }
.story-info button { margin-top:auto; width:100%; padding:8px; }
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 3px solid var(--line);
  background: #120d16;
}
h1 { margin: 0; font-size: 28px; letter-spacing: .35em; color: var(--gold); text-shadow: 2px 2px 0 #000; }
p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.status-grid { display: grid; grid-template-columns: repeat(4, minmax(76px, 1fr)); gap: 5px; min-width: 360px; }
.status-grid span, .chapter-box { border: 2px solid var(--line); border-radius: 0; padding: 4px 6px; background: #17111a; box-shadow: 2px 2px 0 #000; }
.status-grid i { font-style: normal; color: var(--muted); }
.status-grid b { color: var(--gold); }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 250px; grid-template-rows: auto 364px; gap: 8px; padding: 8px 10px 10px; }
.card { border: 3px solid var(--line); border-radius: 0; background: var(--panel); box-shadow: 4px 4px 0 #000; overflow: hidden; }
.stage { min-height: 290px; }
.scene-visual { position: relative; height: 210px; overflow: hidden; background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.45)), var(--cover) center 42% / cover no-repeat; }
.scene-visual::before { content: ""; position: absolute; inset: 0; opacity: .34; background-image: linear-gradient(90deg, rgba(255,255,255,.16) 2px, transparent 2px), linear-gradient(rgba(255,255,255,.12) 2px, transparent 2px); background-size: 14px 14px; }
.scene-title, .scene-subtitle { position: absolute; left: 14px; z-index: 1; text-shadow: 2px 2px 0 #000; }
.scene-title { bottom: 38px; font-size: 20px; color: var(--gold); font-weight: 700; }
.scene-subtitle { bottom: 18px; color: #f4d9a2; font-size: 12px; }
.cast-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(115px, 1fr)); gap: 6px; padding: 7px; }
.character-card { border: 2px solid rgba(255,211,106,.75); border-radius: 0; padding: 6px; background: #17111a; box-shadow: 2px 2px 0 #000; }
.character-card b { color: var(--gold); }
.character-card small { display: block; color: var(--muted); margin-top: 3px; line-height: 1.3; font-size: 11px; }
.side-panel { grid-row: span 2; padding: 8px; }
.side-panel h2 { margin: 7px 0; color: var(--gold); font-size: 16px; text-shadow: 2px 2px 0 #000; }
.wide-btn { width:100%; margin-bottom:3px; }
.meter { display: grid; grid-template-columns: 76px 1fr 24px; align-items: center; gap: 5px; margin: 6px 0; color: var(--muted); font-size: 12px; }
.meter div { height: 8px; border: 2px solid #000; border-radius: 0; background: #08070d; overflow: hidden; }
.meter i { display: block; height: 100%; width: 50%; border-radius: 0; background: linear-gradient(90deg, var(--red), var(--gold)); }
.chapter-box { margin: 8px 0; }
.chapter-box b { display: block; color: var(--cyan); margin-bottom: 4px; }
.chapter-box small { color: var(--muted); line-height: 1.35; }
.commands { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.novel-btn { color: var(--cyan); border-color: var(--cyan); }
.producer-credit { padding: 0 0 7px; text-align: center; color: rgba(255,255,255,.18); font-size: 11px; letter-spacing: .08em; text-shadow: 1px 1px 0 #000; pointer-events: none; }
.api-presets { display:grid; grid-template-columns:1fr; gap:5px; margin:6px 0; }
.api-status { margin:5px 0; border:2px solid var(--line); padding:4px 6px; background:#0b0a10; color:var(--cyan); box-shadow:2px 2px 0 #000; }
.api-status.ok { color:#9cff9c; }
.api-status.fail { color:var(--red); }
details { margin-top: 8px; color: var(--muted); font-size: 12px; }
details label { display: block; margin: 5px 0; }
details input { margin-top: 3px; padding: 5px; }
details small { display:block; margin-top:5px; line-height:1.3; }
.log-panel { height: 364px; min-height: 364px; display: flex; flex-direction: column; }
.story-log { flex: 1; height: 286px; overflow-y: scroll; overflow-x: hidden; padding: 8px; line-height: 1.55; scroll-behavior: smooth; scrollbar-color: var(--gold) #08070d; scrollbar-width: thin; font-size: 12px; }
.pending-hint { display:none; padding:4px 8px 6px; border-top:2px solid var(--line); color:var(--cyan); background:#0b0a10; font-size:12px; text-shadow:1px 1px 0 #000; }
.pending-hint.show { display:block; }
.pending-hint.show::after { content:""; display:block; height:6px; margin-top:4px; border:2px solid #000; background: linear-gradient(90deg, var(--gold) 0 45%, transparent 45% 100%); background-size: 42px 100%; animation: loadingBar 1.1s linear infinite; }
@keyframes loadingBar { to { background-position: 42px 0; } }
.story-log::-webkit-scrollbar { width: 8px; }
.story-log::-webkit-scrollbar-track { background: #08070d; }
.story-log::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 0; border:2px solid #000; }
.entry { margin: 0 0 7px; padding: 6px 7px; border-left: 4px solid var(--line); border-radius: 0; background: #120d16; white-space: pre-wrap; box-shadow: 2px 2px 0 #000; }
.entry.typing::after { content: "▌"; color: var(--gold); animation: blink .8s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.entry.oracle { border-left-color: var(--gold); background: #201915; }
.entry.system { border-left-color: var(--cyan); }
.entry.danger { border-left-color: var(--red); }
.name { color: var(--gold); font-weight: 700; text-shadow: 1px 1px 0 #000; }
.input-row { display: grid; grid-template-columns: 1fr 72px; gap: 6px; padding: 7px; border-top: 3px solid var(--line); background: #120d16; }
summary { cursor:pointer; color:var(--gold); text-shadow:1px 1px 0 #000; }
::selection { background: var(--gold); color:#000; }
@media (max-width: 980px) {
  body { font-size:12px; }
  .story-cards { grid-template-columns: 1fr; }
  .topbar { flex-direction: column; align-items: stretch; }
  .status-grid { min-width: 0; grid-template-columns: repeat(2, 1fr); }
  .layout { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .side-panel { grid-row: auto; }
}