/* A sunlit, painted world. Story and progress remain owned by the existing game. */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&family=Lora:ital,wght@0,400;0,500;0,600;1,400&display=swap');
:root {
  --forest: #e4f0db;
  --pine: #39755c;
  --paper: #fffdf5;
  --ground: #edf6ed;
  --ink: #284b45;
  --muted: #526e62;
  --line: #d3e4cf;
  --gold: #b57924;
  --accent: #438065;
  --serif: 'Lora', Georgia, serif;
  --sans: 'Nunito', system-ui, sans-serif;
}
body { background: linear-gradient(165deg, #e5f3fb 0%, #f4f8e8 42%, #e8f2dc 100%) fixed; }
.sidebar { background: linear-gradient(175deg, #edf7e5, #daeccc); color: var(--ink); border-right: 1px solid #cfdfc6; }
.brand-mark { color: #c38e2b; }
.brand small, .side-label, .sidebar-bottom > p, .character-link small { color: #506e58; }
.side-rule { background: #bfd6b4; }
.nav-item { color: #496b55; border-radius: 13px; }
.nav-item.active { background: #fffdf1; color: #32674e; box-shadow: 0 3px 12px #6d9b4c12; }
.nav-dot { background: #df9558; }
.camp-symbol { color: #d39839; }
.character-link { color: var(--ink); border-color: #bed5b4; }
.topbar { background: #f7fcf580; border-color: #d6e7d1; }
.paper { border-radius: 17px; box-shadow: 0 5px 22px #6597640b; }
.eyebrow { color: #557352; }
.page-heading .eyebrow { color: #4d7763; }
h1 { font-weight: 500; letter-spacing: -1px; }
h2, h3 { font-weight: 500; }
.quiet { background: #fffdf5; border-radius: 10px; }
.quiet[aria-pressed=true] { background: #fff0ca; border-color: #dfc589; }
.primary, .add-button { background: #3f7b5e; border-radius: 10px; }
button:hover:not(:disabled) { filter: none; transform: translateY(-1px); }
input, select { background: #fffef8; border-color: #d1e0c8; border-radius: 9px; }
input::placeholder { color: #607562; }
.scene { height: 380px; border-radius: 20px; background: #afd9e9; }
.scene-image { background-image: url('/static/art/watchtower-sunlit.png'); background-position: center 35%; }
.scene::after { background: linear-gradient(180deg, transparent 42%, #244e4220 66%, #163f36b8 100%); }
.scene-title { bottom: 25px; }
.scene-title h2 { color: #fffef4; text-shadow: 0 2px 5px #123c3a70; }
.scene-title .eyebrow { color: #fff0bb; text-shadow: 0 1px 3px #183d32; }
.scene-title p:last-child { color: #fffef5; text-shadow: 0 1px 4px #143a31; }
.chapter-badge { background: #fff8dedf; color: #3c654e; border-radius: 8px; padding: 7px 11px; }
.location-badge { background: #fff9e5e8; color: #416857; text-shadow: none; border-radius: 8px; padding: 7px 10px; }
.scene[data-theme="1"] .scene-image { filter: saturate(1.07) hue-rotate(7deg); }
.scene[data-theme="2"] .scene-image { filter: saturate(1.05) sepia(.08); }
.mist { background: radial-gradient(ellipse at 50% 50%, #fffde92b, transparent 60%); }
.beacon { top: 23%; right: 24%; }
.passage > p { color: #435f52; font-size: 14px; }
.section-number { color: #778f68; }
.choice { background: #eff6e5; border-color: #cedfbd; border-radius: 12px; padding-top: 14px; padding-bottom: 14px; }
.choice b { font-size: 12px; }
.choice small { font-size: 10px; }
.choice.ready { background: #e2f1d4; border-color: #91b87c; }
.choice:disabled { background: #f5f6e9; color: #5e7557; }
.choice:disabled small { color: #5f735b; }
.choice::after { color: #4f8060; }
.story-foot { color: #4d7159; }
.count-pill { background: #fff0c9; border-color: #e9d493; color: #766022; border-radius: 9px; }
.route-nodes { padding-top: 28px; }
.route-node::before { height: 2px; background: #cbdcb8; }
.route-node .node { background: #fffdf3; border-color: #b9d2a5; }
.route-node.current .node { background: #56966a; border-color: #56966a; outline-color: #e2efd4; }
.route-node.visited .node { background: #e3f0ca; color: #416c4c; }
.task-form > input { background: #f5f9ed; }
.task-row { border-color: #e1ead7; }
.task-title { font-size: 13px; }
.task-meta { color: #58704f; }
.task-row.done .task-title { color: #5f7457; }
.task-check { border-color: #9fbd86; }
.task-row.done .task-check { background: #def1cc; color: #3e7149; }
.text-button { color: #47704c; }
.habit-day button { background: #f0f7e5; border-color: #c7dbb5; }
.habit-day button.on { background: #639452; border-color: #639452; color: #fffef4; }
.habit-day button.today { outline-color: #d7bd6c; }
.character-mini { background: linear-gradient(125deg, #edf5d8, #e0f0de); border-color: #ccdfb6; border-radius: 17px; }
.discipline-list { border-color: #c8ddaf; }
.discipline-list div { color: #4d6944; }
.discipline-bar { background: #ccdfb6; }
.discipline-bar i { background: #77a366; }
.portrait { background-image: url('/static/art/portraits-sunlit.png'); }
.portrait.personal, .avatar-options .portrait.personal { background-image: url('/static/art/ys-wayfarer-sunlit.png'); background-size: cover; background-position: center 30%; }
.avatar-options .portrait { border-radius: 22px; }
.avatar-options input:checked + .portrait { outline-color: #92b970; }
.lodge-hero { background: #fff9df; border-color: #e3dfb2; }
.lodge-drawing { width: 300px; height: 210px; background: url('/static/art/lodge-sunlit.png') center / cover; border-radius: 16px; overflow: hidden; }
.lodge-roof, .lodge-house, .lodge-ground { display: none; }
.lodge-hero.lit .lodge-drawing::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 49% 60%, #ffe09b55, transparent 42%); }
.room-card.locked { background: #f1f6e6; color: #506c4a; }
.room-icon { color: #779c56; }
.timeline li { border-color: #bfd5a6; }
.timeline li::before { background: #e0a260; }
.welcome { background: #fff4d1; border-color: #e4d391; border-radius: 14px; }
.small-note { color: #607440; }
.toast { background: #3d7357; border-color: #8aab6b; border-radius: 14px; color: #fffbed; }
.footer { color: #526c59; }
.footer-star { color: #ae7d29; }
dialog { background: #fffdf3; border-radius: 22px; border-color: #d6e0bd; }
dialog::backdrop { background: #447b6a75; }
@media (max-width: 1100px) { .scene { height: 350px; } }
@media (max-width: 850px) { .scene { height: 360px; } .lodge-drawing { width: 220px; transform: none; margin: 0; } }
@media (max-width: 560px) {
  .scene { height: 310px; }
  .scene-image { background-position: 64% center; }
  .scene-title h2 { font-size: 27px; }
  .passage > p { font-size: 13px; }
  .choice b { font-size: 11px; }
  .choice small { font-size: 9px; }
  .sidebar { border-top: 1px solid #bad2ac; }
  .nav-item.active { background: #fffbee; }
  .lodge-drawing { width: 100%; max-width: 300px; height: 200px; }
}
/* Music and the action chart. */
.music-player { position: relative; font-size: 11px; }
.music-player summary { cursor: pointer; border: 1px solid var(--line); border-radius: 10px; padding: 7px 12px; background: var(--paper); }
.music-popover { position: absolute; top: 42px; right: 0; width: 260px; padding: 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 35px #35634d25; z-index: 15; }
.music-popover p { margin-bottom: 10px; }
.music-popover label { display: block; margin-top: 14px; }
.music-popover input { display: block; width: 100%; margin: 8px 0; accent-color: var(--pine); }
.music-popover small { color: var(--muted); }
.hero-stats { display: flex; width: 100%; flex-wrap: wrap; gap: 12px; font-size: 10px; margin: 10px 0; }
.hero-stats b { font-size: 13px; }
.inventory-item { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.inventory-item > div { flex: 1; }
.inventory-item b { font-size: 13px; }
.inventory-item p, .inventory-item small { display: block; font-size: 11px; color: var(--muted); }
.inventory-item.locked { opacity: .75; }
#tonicControls { padding: 15px 0; }
#tonicControls button { margin-top: 8px; }
.encounter-panel { padding: 23px; background: #fff8e4; }
.encounter-panel h3 { margin: 8px 0; font-size: 20px; }
.encounter-panel > p { margin-bottom: 10px; }
.encounter-actions { display: flex; gap: 10px; margin: 15px 0; flex-wrap: wrap; }
@media(max-width:560px) { .music-player summary { padding: 5px 8px; font-size: 10px; } .music-popover { right: -100px; width: 250px; } .breadcrumb { font-size: 7px; letter-spacing: .5px; } }
.music-popover select { display: block; width: 100%; margin: 7px 0 12px; font-size: 11px; }
.youtube-panel { display: flex; gap: 24px; padding: 20px; align-items: center; margin-bottom: 24px; }
.youtube-video { width: 360px; min-width: 200px; min-height: 220px; flex-shrink: 0; background: #e4ecd9; border-radius: 8px; overflow: hidden; }
.youtube-video iframe { display: block; width: 100%; height: 220px; border: 0; }
.youtube-panel h2 { margin: 8px 0; }
.youtube-panel p { margin: 8px 0; font-size: 12px; }
.youtube-panel a { font-size: 12px; text-underline-offset: 3px; }
@media(max-width:850px) { .youtube-panel { flex-direction: column; align-items: stretch; } .youtube-video { width: 100%; } }
@media(max-width:560px) { .youtube-panel { padding: 15px; gap: 12px; } }