/* A real sky behind the camp, with calm, readable edges for the field journal. */
#app{background:#638ca7;isolation:isolate}
#app[data-time="night"],#app[data-time="dawn"]{background:#142b3a}
#sky-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-3}
/* Feather only the camera boundary. The camp itself stays opaque against the
   sky, while closeups no longer end at a hard rectangular clipping edge. */
.ritual-mode #scene canvas{mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(0deg,transparent,#000 4%,#000 97%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(0deg,transparent,#000 4%,#000 97%,transparent);-webkit-mask-composite:source-in}
.sky-glow{z-index:-2;background:linear-gradient(90deg,#112b2bd9 0%,#142d2bba 14%,#17313040 30%,transparent 46%,transparent 70%,#142c3370 100%),linear-gradient(0deg,#142f30de 0%,#18353173 12%,transparent 39%),linear-gradient(180deg,#132e3d9c 0%,#1d3a3e34 13%,transparent 25%)}
.topbar{border-bottom-color:#e5f2e328}
.brand small{color:#dae4d0;letter-spacing:2.8px}
.scene-hint,.edition{color:#c2d3bd}
.journal-title,.intro-title{color:#f4f0df}
.journey-meta,.journey-site,.intro-copy{color:#c4d5c0}
.chapter-label b{color:#9eb99d}
.chapter-label small{color:#7e9e86}
.chapter.current .chapter-label b{color:#fff0d0}
.chapter.done .chapter-label b{color:#d0debf}
.saved-notice,.save-status,.intro-note{color:#a6c1a6}
.scene-meta{align-items:flex-end}
.weather-pill{border:1px solid #edf5e436;border-radius:20px;padding:8px 12px;background:#16353659;color:#e9efdf;backdrop-filter:blur(8px);text-align:left;min-height:35px;transition:background .2s;cursor:pointer}
.weather-pill:hover{background:#24484099}
.weather-pill svg{color:#f2d9a3}
.weather-pill .weather-chevron{width:11px;height:11px;margin-left:2px;color:#d2dfce;transform:rotate(90deg)}
.weather-pill i{color:#bbd0bc}
.weather-pill b{font-size:9px;color:#c5d9c2}
.tool-btn,.ritual-mode .tool-btn{color:#d3e2c8;background:#163b3c40;backdrop-filter:blur(5px)}
.tool-btn:hover,.tool-btn.active{background:#234d46b3;color:#fff1cc}
.view-controls{background:#143b3b80;border-color:#d6e5cf35}
.ritual-stage{background:#173b3b86;border-color:#c4d3b92e;backdrop-filter:blur(10px)}
.ritual-stage.selected{background:#696c4cba;border-color:#f2deb47d}
.ritual-stage-text>b{color:#d5e0c9}
.ritual-stage-text>small{color:#acc3a7}
.ritual-stage:disabled{opacity:.45}
.ritual-rail-title{color:#c6d8bb}
.ritual-rail-title>small{color:#adc3a5}
.atmosphere-panel{width:358px;padding:22px 24px}
.atmosphere-panel .panel-intro{margin-bottom:16px}
.atmosphere-panel .panel-heading{position:sticky;top:-22px;z-index:3;background:var(--paper);margin-top:-2px;padding:6px 0 8px}
.atmosphere-panel .panel-section{margin:21px 0}
.atmosphere-current{position:relative;overflow:hidden;border-radius:12px;padding:17px 17px 14px;min-height:102px;background:linear-gradient(135deg,var(--sky-preview-top),var(--sky-preview-bottom));color:#fff8e5;isolation:isolate}
.atmosphere-current:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#163c507d,transparent);z-index:-1}
.atmosphere-current:after{content:"";width:45px;height:45px;position:absolute;right:27px;top:22px;border-radius:50%;background:#fff3cc;box-shadow:0 0 28px 14px #fff4cd35;opacity:var(--sky-preview-sun,1);z-index:-1}
.atmosphere-current.is-night:after{background:#e9ead7;box-shadow:0 0 24px 10px #d9e1dc26}
.atmosphere-current>small{font-size:8px;letter-spacing:2px;color:#ffffffc4}
.atmosphere-current>strong{display:block;font-family:"Songti SC","STSong",serif;font-size:23px;font-weight:400;letter-spacing:2px;margin:8px 0 4px}
.atmosphere-current>p{font-size:10px;line-height:1.7;color:#f2f2e4d9;margin:0;max-width:210px}
.sky-time-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.sky-time-grid button{border:1px solid #c4cbb551;border-radius:9px;background:#e4e8dc7a;padding:11px 5px;color:#7b8972;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10px;min-height:72px}
.sky-time-grid button>svg{width:20px;height:20px;stroke-width:1.2}
.sky-time-grid button>small{font-size:8px;letter-spacing:.7px;opacity:.65}
.sky-time-grid button.selected{background:#395746;border-color:#395746;color:#f8eed1}
.sky-time-grid button:hover{border-color:#698464}
.sky-follow{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;border:1px solid #c2ccb566;border-radius:9px;padding:11px 12px;margin-top:8px;color:#72846a;font-size:10px}
.sky-follow>span{display:flex;align-items:center;gap:8px}
.sky-follow svg{width:16px;height:16px}
.sky-follow>small{font-size:8px;opacity:.75}
.sky-follow.selected{background:#dce5d2;border-color:#9aad85;color:#435f3e}
.weather-grid{grid-template-columns:repeat(3,1fr);gap:7px}
.weather-grid .choice-card{padding:12px 3px 10px;gap:7px;min-height:76px;font-size:10px}
.weather-grid .choice-card svg{width:23px;height:23px}
.weather-grid .choice-card>small{font-size:8px;letter-spacing:0}
.weather-range{margin:20px 0 0}
.weather-range .slider-label{margin-bottom:12px;font-size:10px}
.weather-range .slider-label output{color:#79866b}
.weather-range input{height:20px;margin:0}
.weather-range .range-ends{display:flex;justify-content:space-between;color:#9ba38d;font-size:8px;margin-top:2px}
.atmosphere-panel .sound-enable{margin:16px 0 6px;padding:12px}
.atmosphere-panel .sound-enable b{font-size:10px}
.atmosphere-panel .sound-enable small{font-size:8px}
.atmosphere-panel .panel-note{font-size:9px;margin:10px 0 0}
.ambient .sky-glow{background:linear-gradient(0deg,#0e263d70,transparent 30%),linear-gradient(180deg,#10253522,transparent 22%)}
.ambient .ambient-caption p{color:#f4efd9;text-shadow:0 1px 16px #0c2833c9}
.ambient .ambient-caption span{color:#d1dec5}
.ambient .exit-ambient{background:#14383d70;backdrop-filter:blur(8px);border-color:#cdded342;color:#eff2df}
@media(max-width:760px){
  .sky-glow{background:linear-gradient(180deg,#102e36d9 0%,#193c3aab 15%,#1b3e361c 25%,transparent 40%,#173b348c 48%,#163a32ee 64%,#15382fff 100%)}
  .weather-pill{font-size:9px;padding:6px 8px;gap:5px;min-height:28px}
  .weather-pill b,.weather-pill .weather-chevron{display:none}
  .ritual-mode .scene-meta{top:81px}
  .ritual-mode .scene-tools{top:116px}
  .brand small{font-size:6px;letter-spacing:2px}
  .atmosphere-panel{width:auto;left:12px;right:12px;top:80px;bottom:14px;padding:20px 22px;border-radius:15px}
  .atmosphere-panel .panel-heading h2{font-size:22px}
  .atmosphere-panel .panel-heading{top:-20px}
  .atmosphere-current{min-height:93px;padding:14px 16px}
  .atmosphere-current>strong{font-size:21px}
  .sky-time-grid button{min-height:66px;padding:8px 5px}
  .weather-grid .choice-card{min-height:68px;padding:10px 3px 8px}
  .ambient .sky-glow{background:linear-gradient(0deg,#102b4194,transparent 34%)}
}
@media(prefers-reduced-motion:reduce){.weather-pill{transition:none}}

/* Weather is a live view of the camp, with three short, keyboard-friendly pages. */
:root{--serif:"Songti SC","STSong",Georgia,serif}
.panel-backdrop.weather-preview{background:transparent;backdrop-filter:none}
.weather-season{color:#eedbb1}
.atmosphere-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:10px;background:#e3e7db;margin:17px 0 18px}
.atmosphere-tabs>button{display:flex;align-items:center;justify-content:center;gap:7px;padding:10px 4px;border-radius:7px;color:#819077;font-size:11px;min-height:39px}
.atmosphere-tabs>button svg{width:15px;height:15px}
.atmosphere-tabs>button[aria-selected="true"]{background:#f8f5e9;color:#405d43;box-shadow:0 1px 5px #3a54331a}
.atmosphere-tabs>button:focus-visible,.season-choice:focus-visible,.wind-presets>button:focus-visible{outline:2px solid #68835a;outline-offset:3px}
#atmosphere-content{outline:none}
.atmosphere-section-intro{font-size:11px;color:#6f8166;line-height:1.8;margin:0 0 14px}
.season-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.season-choice{position:relative;overflow:hidden;border:1px solid #adb99e77;border-radius:10px;background:#f1f0e5;padding:0 0 10px;text-align:center;color:#6b7f61;transition:border-color .2s,background .2s}
.season-choice>svg{display:block;width:100%;height:auto;margin-bottom:10px}
.season-choice>b{font:400 15px var(--serif);display:block;letter-spacing:1px}
.season-choice>small{display:block;font-size:8px;line-height:1.6;margin-top:5px;white-space:nowrap;color:#839174}
.season-choice.selected{background:#e1e9d6;border-color:#789165;box-shadow:0 0 0 1px #789165}
.season-choice-check{display:none;position:absolute;right:4px;top:4px;width:16px;height:16px;place-items:center;border-radius:50%;color:#fff5dc;background:#506c48;box-shadow:0 1px 4px #3c533433}
.season-choice-check svg{width:11px;height:11px}.season-choice.selected .season-choice-check{display:grid}
.season-field-note{margin-top:19px;padding:18px 16px;border-radius:11px;background:#e5eadb88;border:1px solid #a6b79844}
.season-field-note>span{font-size:8px;letter-spacing:1.5px;color:#91a180}
.season-field-note>h3{font:400 20px var(--serif);letter-spacing:1px;line-height:1.5;color:#536e48;margin:9px 0 8px}
.season-field-note>p{font-size:11px;color:#788a6b;line-height:1.9;margin:0}
.season-field-note[data-season-note="autumn"]{background:#e8dfcb88;border-color:#c3ad794d}.season-field-note[data-season-note="autumn"]>h3{color:#8c7449}
.season-field-note[data-season-note="winter"]{background:#dee6e18c;border-color:#a5b5b44d}.season-field-note[data-season-note="winter"]>h3{color:#617a73}
.season-weather-note{font-size:10px;color:#929c87;line-height:1.9;margin:15px 1px 18px}
.weather-wind-block{border-top:1px solid #a7b79836;margin-top:19px;padding-top:0}
.wind-presets{display:flex;gap:7px;margin-top:8px}
.wind-presets>button{flex:1;border:1px solid #a5b59955;border-radius:7px;min-height:33px;font-size:10px;color:#819174}
.wind-presets>button.selected{background:#dce5d2;border-color:#9aae85;color:#496340}
.wind-detail{font-size:9px;color:#8a987e;line-height:1.8;min-height:17px;margin:8px 0 16px}
.atmosphere-done{display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid #a4b49666;width:100%;min-height:41px;border-radius:9px;font-size:11px;color:#58734d;margin-top:12px;background:#e0e8d659}
.atmosphere-done svg{width:16px;height:16px}.atmosphere-done svg:last-child{width:13px;margin-left:auto}.atmosphere-done svg:first-child{margin-right:auto}
@media(max-width:760px){
 .atmosphere-panel{left:12px;right:12px;top:auto;bottom:12px;max-height:48svh;padding:16px;border-radius:16px;box-shadow:0 -8px 45px #0c231c40}
 .atmosphere-panel .panel-heading{top:-16px;padding:4px 0 7px}.atmosphere-panel .panel-heading h2{font-size:20px;letter-spacing:1px}
 .atmosphere-panel .panel-intro{font-size:9px;line-height:1.7;margin-bottom:12px}
 .atmosphere-current{min-height:82px;padding:12px 14px}.atmosphere-current>strong{font-size:19px;margin-top:5px}.atmosphere-current>small{font-size:7px;letter-spacing:1.6px}
 .atmosphere-tabs{margin:12px 0 15px}.atmosphere-tabs>button{min-height:35px;padding:7px 4px}
 .season-grid{gap:6px}.season-choice>b{font-size:14px}.season-choice>small{font-size:7px}
 .season-field-note>h3{font-size:18px}.season-field-note{padding:15px}
 .atmosphere-panel .weather-trace-link{margin-top:14px}
 body:has(.atmosphere-panel:not([hidden])) #app .activity,body:has(.atmosphere-panel:not([hidden])) .ritual-rail,body:has(.atmosphere-panel:not([hidden])) .intro-start{visibility:hidden;pointer-events:none}
 .weather-pill{gap:4px;letter-spacing:0}.weather-pill .weather-season{font-size:8px}
}
@media(max-width:760px) and (max-height:500px) and (orientation:landscape){
 .atmosphere-panel{top:12px;bottom:12px;left:auto;right:12px;width:min(310px,48vw);max-height:calc(100svh - 24px)}
 body:has(.atmosphere-panel:not([hidden])) #app{min-height:100svh}
 body:has(.atmosphere-panel:not([hidden])) #scene{top:72px;right:calc(min(310px,48vw) + 24px)}
 body:has(.atmosphere-panel:not([hidden])) .topbar{right:calc(min(310px,48vw) + 24px);height:68px}
 body:has(.atmosphere-panel:not([hidden])) .journal,body:has(.atmosphere-panel:not([hidden])) .scene-meta,body:has(.atmosphere-panel:not([hidden])) .scene-tools,body:has(.atmosphere-panel:not([hidden])) .view-controls,body:has(.atmosphere-panel:not([hidden])) .scene-hint,body:has(.atmosphere-panel:not([hidden])) .header-actions{visibility:hidden;pointer-events:none}
}