:root {
  color-scheme: dark;
  --ink: #24201c;
  --paper: #e8ddc5;
  --paper-deep: #cdbf9f;
  --gold: #bc9d5b;
  --gold-light: #e3cb8f;
  --night: #11141a;
  --panel: #1a1d23;
  --muted: #9c978c;
  --danger: #b55f57;
  font-family: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: #0d1015; color: #eee8dc; }
button, input { font: inherit; }
button { color: inherit; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 260px minmax(0, 1fr); background: radial-gradient(circle at 70% 10%, #292722 0, #14171d 42%, #0b0d11 100%); }
.reader-shell { min-height: calc(100vh - 69px); }
.reader-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: start; }
.reader-actions .quiet-button { margin-top: 0; }
.drafts { margin-top: 48px; padding-top: 28px; border-top: 1px solid #413a2e; }
.drafts h2 { margin: 0 0 8px; font-weight: 400; color: #f1e6cf; }
.drafts .shop-card { opacity: .92; }
.library { position: relative; display: flex; flex-direction: column; min-height: 100vh; padding: 28px 24px; border-right: 1px solid #413a2e; background: linear-gradient(90deg, #161619, #232126 85%, #121319); box-shadow: 14px 0 35px #0009; overflow: hidden; }
.library::before { content: ""; position: absolute; inset: 0; opacity: .22; pointer-events: none; background: repeating-linear-gradient(92deg, transparent 0 13px, #000 14px 15px); }
.brand { position: relative; display: flex; align-items: center; gap: 12px; color: var(--gold-light); font-variant: small-caps; letter-spacing: .08em; }
.brand-mark { display: grid; place-items: center; width: 38px; aspect-ratio: 1; border: 1px solid #9f864f; border-radius: 50%; font-size: .8rem; }
.eyebrow { margin: 32px 0 10px; color: var(--gold); font: 700 .68rem/1.2 system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.book { position: relative; width: 100%; min-height: 310px; margin-top: 4px; padding: 26px 18px; border: 1px solid #765e3a; border-radius: 5px 13px 13px 5px; background: linear-gradient(90deg, #2b1718 0 11%, #583032 13%, #3b2022 92%, #241416); box-shadow: inset 8px 0 14px #12090a99, inset -3px 0 5px #b8756550, 9px 12px 25px #0009; cursor: pointer; text-align: center; }
.book::before { content: "◆"; display: block; margin: 20px auto; color: #b99359; font-size: 1.25rem; }
.book-spine { display: block; color: #e2ca93; font-size: 1.65rem; line-height: 1.1; text-transform: uppercase; letter-spacing: .07em; }
.book-meta { position: absolute; inset: auto 18px 22px; color: #bba98e; font: .72rem system-ui, sans-serif; }
.library-shadow { height: 14px; margin: 12px -24px 0; background: linear-gradient(#4d3d2d, #211913 45%, #070707); box-shadow: 0 8px 20px #000; }
.quiet-button { position: relative; margin-top: 8px; padding: 10px 12px; border: 1px solid #5b554a; background: transparent; color: #c6bda9; cursor: pointer; text-decoration: none; display: block; text-align: center; }
#library-books { display: grid; gap: 8px; margin-bottom: 10px; }
#library-books .book { min-height: 92px; }
.quiet-button:hover { border-color: var(--gold); color: var(--gold-light); }
.reader { padding: 28px clamp(18px, 4vw, 64px) 48px; }
.reader-header { display: flex; align-items: start; justify-content: space-between; max-width: 1250px; margin: 0 auto 18px; }
.reader-header .eyebrow { margin-top: 0; }
.reader-header h1 { margin: 0; color: #f1e6cf; font-weight: 400; letter-spacing: .02em; }
.bookmark-ribbon { position: relative; padding: 15px 18px 25px; border: 0; background: #793b3c; box-shadow: 0 6px 14px #0008; cursor: pointer; font: 700 .75rem system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.bookmark-ribbon::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; border-left: 68px solid transparent; border-right: 68px solid transparent; border-bottom: 14px solid #17191e; }
.reading-layout { display: grid; grid-template-columns: minmax(0, 900px) 290px; gap: 26px; align-items: start; max-width: 1250px; margin: auto; }
.reading-layout:has(#character-sheet[hidden]) { grid-template-columns: minmax(0, 900px); justify-content: center; }
.page { position: relative; min-height: 690px; padding: clamp(32px, 6vw, 76px); overflow: hidden; color: var(--ink); background: radial-gradient(circle at 55% 35%, #f1e7d1, var(--paper) 65%, #c9ba98 120%); border-radius: 3px 12px 12px 3px; box-shadow: inset 18px 0 28px #574b3645, inset -1px 0 #fff8, 12px 18px 45px #000a; }
.page::after { content: ""; position: absolute; inset: 0; opacity: .13; pointer-events: none; background: repeating-radial-gradient(circle at 15% 20%, transparent 0 3px, #7a6f58 4px, transparent 5px 10px); mix-blend-mode: multiply; }
.page > * { position: relative; z-index: 1; }
.page-ornament { color: #806b43; text-align: center; }
.chapter-label { color: #846d45; font: 700 .65rem system-ui, sans-serif; letter-spacing: .17em; text-align: center; text-transform: uppercase; }
.page h2 { margin: 8px 0 28px; font-size: clamp(2rem, 5vw, 3.3rem); font-weight: 400; text-align: center; }
.paragraph-content { font-size: 1.12rem; line-height: 1.8; }
.interaction-token { padding: 0 2px; border: 0; border-bottom: 1px dashed #70472f; background: transparent; color: #6a2e2d; cursor: pointer; font-weight: 700; }
.interaction-token:hover:not(:disabled) { color: #a5473f; text-shadow: 0 0 12px #c79755; }
.interaction-token.completed { color: inherit; border-color: transparent; font-weight: inherit; }
.interaction-token.highlight-outline { outline: 1px solid #8a6337; outline-offset: 2px; }
.interaction-token.highlight-glow { color: #8b382f; text-shadow: 0 0 8px #b77535, 0 0 16px #cfa958; }
.interaction-token.highlight-pulse { animation: spot-pulse-text 1.6s ease-in-out infinite; }
.reference-token { color: #574272; border-bottom: 1px dotted currentColor; }
.story-image { position: relative; margin: 28px 0; border: 7px solid #4a4032; background: #17191d; box-shadow: 0 8px 20px #4b3c2d80; }
.story-image img { display: block; width: 100%; height: auto; }
.hotspot { position: absolute; border: 1px solid transparent; border-radius: 50%; background: transparent; cursor: crosshair; }
.hotspot:hover:not(:disabled), .hotspot:focus-visible { border-color: #e7d59c99; background: #dfcb7b20; box-shadow: 0 0 24px #d8bd68a6; outline: none; }
.hotspot.completed { cursor: default; }
.hotspot.highlight-outline { border-color: #e7d59ccc; }
.hotspot.highlight-glow { border-color: #f4db83; background: #dfcb7b25; box-shadow: 0 0 26px #d8bd68e6; }
.hotspot.highlight-pulse { border-color: #f4db83; animation: spot-pulse-area 1.6s ease-in-out infinite; }
.spot-checks { display: grid; gap: 8px; margin: -10px 0 20px; }
.spot-check-button { padding: 10px 14px; border: 1px dashed #876e43; background: #d9c8a4; color: #4a3928; cursor: pointer; text-align: left; }
.spot-check-button:hover:not(:disabled) { background: #cdb78a; }
.spot-check-button:disabled { opacity: .55; cursor: not-allowed; }
@keyframes spot-pulse-text { 50% { color: #a13e33; text-shadow: 0 0 13px #c59048; } }
@keyframes spot-pulse-area { 50% { background: #e7cc633d; box-shadow: 0 0 32px #d8bd68e6; } }
.minigame { margin: 28px 0; padding: 20px; border: 1px solid #88734c; background: #d8c9a8; box-shadow: inset 0 0 24px #695a3f26; }
.minigame h3 { margin: 0 0 8px; font-weight: 400; }
.minigame-sequence { display: block; min-height: 2.8em; margin: 14px 0; padding: 10px; border: 1px dashed #8d7851; background: #eee3ca; text-align: center; }
.minigame-tokens, .minigame-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.minigame-tokens button, .minigame-actions button { padding: 8px 12px; border: 1px solid #836d46; background: #eadcbd; color: #332b23; cursor: pointer; }
.minigame-tokens button:hover:not(:disabled), .minigame-actions button:hover:not(:disabled) { background: #cfbb91; }
.minigame-actions { justify-content: flex-end; margin-top: 14px; }
.notice { min-height: 2.7em; margin: 24px 0; padding: 10px 14px; border-left: 3px solid #9c7741; background: #8e73421a; color: #5a4934; font-style: italic; }
.choices { display: grid; gap: 9px; }
.ending-coda { display: grid; gap: 9px; margin-top: 8px; padding-top: 18px; border-top: 1px solid #b7a57d; }
.ending-coda .eyebrow { margin: 0 0 2px; text-align: center; }
.ending-label { margin: 0 0 8px; color: #5a4934; text-align: center; font-style: italic; }
.ending-coda.is-success .eyebrow { color: #5d6b3d; }
.ending-coda.is-failure .eyebrow { color: #8a3d36; }
.choice-button { display: flex; justify-content: space-between; gap: 18px; width: 100%; padding: 13px 16px; border: 1px solid #9b8765; background: #e3d5b8; color: #332b23; cursor: pointer; text-align: left; }
.choice-button:hover:not(:disabled) { border-color: #6d5632; background: #d8c59f; transform: translateX(3px); }
.choice-button:disabled { opacity: .45; cursor: not-allowed; }
.character-panel { display: grid; gap: 12px; }
.character-panel section { padding: 18px; border: 1px solid #4b4438; background: linear-gradient(145deg, #22252a, #17191e); box-shadow: 0 10px 25px #0007; }
.character-panel .eyebrow { margin-top: 0; }
.sheet-title { grid-column: 1 / -1; }
.sheet-capacity { margin: 0 0 10px; color: #8d887e; font: .72rem system-ui, sans-serif; }
.character-panel h3 { margin: 0 0 13px; color: #d1bb8b; font-size: 1rem; font-weight: 400; }
.stats { display: grid; gap: 12px; }
.stat-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; color: #c8c0b0; font: .8rem system-ui, sans-serif; }
.stat-row strong { color: #f0dcae; }
.stat-meter { grid-column: 1 / -1; height: 3px; background: #0d0f12; }
.stat-meter span { display: block; height: 100%; background: linear-gradient(90deg, #6e4438, #c39c5e); }
.inventory, .clues, .bookmarks, .achievements { display: grid; gap: 8px; }
.empty-state { color: #77746d; font: italic .78rem/1.4 system-ui, sans-serif; }
.shop-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 28px; border-bottom: 1px solid #413a2e; background: #12141a; }
.shop-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.shop-nav .quiet-button { margin-top: 0; }
.bookstore { max-width: 1180px; margin: 0 auto; padding: 36px 24px 72px; }
.bookstore-intro h1 { margin: 0 0 10px; font-weight: 400; color: #f1e6cf; }
.bookstore .lead { max-width: 46rem; color: #b7ae9d; font: 1rem/1.6 system-ui, sans-serif; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; margin-top: 28px; }
.shop-card { display: grid; grid-template-rows: 190px 1fr; border: 1px solid #5b4a32; background: linear-gradient(180deg, #221c18, #16141a); box-shadow: 0 16px 36px #0008; }
.shop-cover { overflow: hidden; background: #2a211c; }
.shop-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shop-cover-fallback { display: grid; place-items: center; height: 100%; color: #e3cb8f; font-size: 4rem; }
.shop-copy { display: grid; gap: 8px; align-content: start; padding: 18px; }
.shop-copy h2 { margin: 0; font-weight: 400; color: #f1e6cf; }
.shop-author, .shop-meta { margin: 0; color: #bba98e; font: .78rem system-ui, sans-serif; }
.shop-blurb { min-height: 3.4em; margin: 0; color: #cfc6b4; font: .92rem/1.5 Georgia, serif; }
.shop-meta { display: flex; gap: 12px; flex-wrap: wrap; }
.shop-price, .shop-card.is-paid .shop-price { color: #e3cb8f; }
.shop-copy .primary-button { justify-self: start; margin-top: 6px; cursor: pointer; }
.achievement-card { padding: 9px; border-left: 2px solid #bc9d5b; background: #16140f; font: .75rem system-ui, sans-serif; }
.inventory-card { display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: start; padding: 9px; background: #0f1115; font: .75rem system-ui, sans-serif; }
.inventory-card small, .clue-card small, .saved-bookmark small { display: block; margin-top: 3px; color: #8d887e; }
.item-glyph { color: var(--gold); }
.clue-card { padding: 9px; border-left: 2px solid #67557d; background: #121318; font: .75rem system-ui, sans-serif; }
.saved-bookmark { width: 100%; padding: 9px; border: 0; border-left: 7px solid #7c3c3e; background: #282126; cursor: pointer; text-align: left; font: .75rem system-ui, sans-serif; }
.saved-bookmark:hover { background: #33282d; }
dialog { width: min(440px, calc(100% - 32px)); padding: 28px; border: 1px solid #776748; color: #eee6d5; background: #1b1c20; box-shadow: 0 30px 90px #000; }
dialog::backdrop { background: #050608c9; backdrop-filter: blur(3px); }
dialog .eyebrow { margin-top: 0; }
dialog h2 { margin-top: 0; font-weight: 400; }
dialog label { display: block; margin-bottom: 7px; color: #b9aa8b; font: .75rem system-ui, sans-serif; }
dialog input { width: 100%; padding: 12px; border: 1px solid #5d5548; outline: none; color: #fff; background: #0f1114; }
dialog input:focus { border-color: var(--gold); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }
.dialog-actions .quiet-button { margin-top: 0; }
.primary-button { padding: 10px 16px; border: 1px solid #b99a5a; background: #8a6b36; cursor: pointer; }
.error-banner { position: fixed; right: 22px; bottom: 22px; z-index: 10; max-width: 360px; padding: 14px 18px; border-left: 4px solid var(--danger); background: #2a1718; box-shadow: 0 12px 35px #000b; font: .82rem system-ui, sans-serif; }

@media (max-width: 980px) {
  .shop-bar { padding: 12px 14px; }
  .bookstore { padding: 22px 14px 48px; }
  .app-shell { grid-template-columns: 1fr; }
  .library { min-height: auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 14px 18px; border-right: 0; border-bottom: 1px solid #413a2e; }
  .library > .eyebrow, .library-shadow { display: none; }
  .book { min-height: 0; margin: 0; padding: 10px 16px; text-align: left; }
  .book::before, .book-meta { display: none; }
  .book-spine { font-size: .9rem; }
  .quiet-button { margin-top: 0; }
  .reading-layout { grid-template-columns: 1fr; }
  .character-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .brand span:last-child { display: none; }
  .library { grid-template-columns: auto 1fr; }
  .library > .quiet-button { grid-column: 1 / -1; }
  .reader { padding-inline: 10px; }
  .reader-header { padding: 0 8px; }
  .reader-header h1 { font-size: 1.35rem; }
  .bookmark-ribbon { padding: 11px 10px 18px; font-size: .6rem; }
  .bookmark-ribbon::after { display: none; }
  .page { min-height: 0; padding: 28px 22px; }
  .character-panel { grid-template-columns: 1fr; }
}