/* ── The saga layer: breakthrough preparation, fates, fellows, letters, the shelf, the beast, the dharma form ── */
.saga-prep,.saga-life,.saga-fates-offer,.saga-roster,.saga-fellow-dialog,.saga-news,.saga-letter,.saga-shelf,.saga-pack,.saga-beast-dialog,.saga-marks,.saga-chips,.saga-form{--gold:#d9b871;--gold2:#f3dca6;--paper:#e9e2d1;--mute:#a9b7b1;--line:rgba(217,184,113,.24)}
.saga-prep,.saga-life{margin:14px 0;padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:rgba(0,0,0,.18)}
.saga-prep h3,.saga-life h3,.saga-pack h3,.saga-roster h2,.saga-fellow-dialog h3,.saga-shelf h3{margin:0 0 6px;font-family:"Noto Serif TC",serif;color:var(--gold2);font-weight:500}
.saga-field{display:flex;flex-direction:column;gap:5px;margin:10px 0;font-size:13px;color:var(--mute)}
.saga-field select{font:inherit;font-size:15px;color:var(--paper);background:#0f1b1c;border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-height:44px;max-width:100%}
.saga-odds{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:4px 10px;margin:12px 0 6px}.saga-odds b{font:600 34px/1 "Noto Serif TC",serif;color:var(--gold2)}.saga-odds span{font-size:13px;color:var(--mute)}.saga-odds .dao-bar{grid-column:1/-1;height:8px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden}.saga-odds .dao-bar i{display:block;height:100%;background:linear-gradient(90deg,#b78f43,var(--gold2))}
.saga-parts{list-style:none;margin:8px 0;padding:0;display:grid;gap:3px;font-size:13px}.saga-parts li{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border-bottom:1px dashed rgba(255,255,255,.08)}.saga-parts b{font-variant-numeric:tabular-nums;color:var(--paper)}
.saga-parts .up,.saga-fate .up,.saga-chip .up,.saga-mark .up{color:#9fdcae}.saga-parts .down,.saga-fate .down,.saga-chip .down,.saga-mark .down{color:#f0a48e}
.saga-quality{margin:8px 0;font-size:14px}.saga-quality b{color:var(--gold2)}.saga-quality small{color:var(--mute)}
.saga-life p{margin:.35em 0;font-size:14px}.saga-life b{color:var(--gold2);margin-right:6px}
/* fates */
.saga-fates-offer{padding:20px 22px;border-radius:16px;border:1px solid var(--gold);background:radial-gradient(circle at 50% 0,rgba(243,220,166,.16),transparent 70%),#111b1d}
.saga-fates-offer h2{margin:.2em 0;font-family:"Noto Serif TC",serif;font-weight:500;color:var(--gold2)}
.saga-fates{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:12px}
.saga-fate{font:inherit;text-align:left;color:var(--paper);display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:12px;border:1px solid var(--line);background:#0f1a1b;cursor:pointer;min-height:44px}.saga-fate:hover,.saga-fate:focus-visible{border-color:var(--gold2);transform:translateY(-2px)}.saga-fate strong{font:500 18px "Noto Serif TC",serif;color:var(--gold2)}.saga-fate span{font-size:13px;color:#cfd6cf}.saga-fate em,.saga-mark em{font-style:normal;display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px}
.saga-chips{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}.saga-chip{display:flex;flex-wrap:wrap;align-items:center;gap:3px 8px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(0,0,0,.25);font-size:12px}.saga-chip b{color:var(--gold2);font-weight:500}.saga-chip.mark{border-style:dashed}
/* fellows */
.saga-roster{display:flex;flex-direction:column;gap:10px}.saga-roster header h2{font-size:22px}
.saga-fellows{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.saga-fellow{--el:#d9b871;font:inherit;width:100%;text-align:left;color:var(--paper);display:flex;gap:12px;align-items:center;padding:12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--el) 40%,transparent);background:#0f191b;cursor:pointer;min-height:64px}.saga-fellow:hover{border-color:var(--el)}
.saga-fellow.unmet{opacity:.5;cursor:default;filter:grayscale(.7)}
.saga-fellow-mark{flex:0 0 40px;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;font:600 18px "Noto Serif TC",serif;color:#0d1416;background:radial-gradient(circle at 35% 30%,#fff8,transparent 50%),var(--el)}
.saga-fellow div{display:flex;flex-direction:column;min-width:0}.saga-fellow strong{font-size:15px}.saga-fellow small{font-size:12px;color:var(--mute);overflow-wrap:anywhere}
.saga-fellow-dialog h2{margin:.1em 0 .3em;font-family:"Noto Serif TC",serif;color:var(--el,var(--gold2))}.saga-fellow-dialog .map-say{margin:12px 0;padding:8px 14px;border-left:3px solid var(--el,var(--gold));color:var(--gold2)}
.saga-ties{margin:6px 0;padding-left:20px;display:grid;gap:6px}.saga-ties li{font-size:14px}.saga-ties small{display:block;font-size:11.5px;color:var(--mute)}
.saga-news ul{list-style:none;margin:6px 0;padding:0;display:grid;gap:4px}.saga-news li{font-size:13.5px;line-height:1.5}.saga-news li small{margin-left:6px;color:#b9c9b9;font-size:11px}.saga-news>div{flex:1;min-width:0}.saga-news>div>small{color:#b9c9b9;font-size:12px}
/* letters and the shelf */
.saga-letter{padding:22px 24px;border-radius:6px;background:linear-gradient(180deg,#f3ead2,#e8dbb9);color:#3a2e1d;font-family:"Noto Serif TC",serif;line-height:1.9;box-shadow:inset 0 0 40px #c7b083}.saga-letter .dao-eyebrow{color:#8a6a24;font-family:inherit}.saga-letter p{margin:.5em 0}.saga-letter-date{text-align:right;font-size:13px;color:#7a6440}
.saga-shelf h2{font-family:"Noto Serif TC",serif;font-weight:500;color:var(--gold2)}
.saga-curios,.saga-letters{list-style:none;margin:8px 0;padding:0;display:grid;gap:8px}.saga-curios li{display:flex;flex-direction:column;padding:10px 12px;border-radius:10px;background:rgba(0,0,0,.22);border:1px solid var(--line)}.saga-curios strong{color:var(--gold2);font-weight:500}.saga-curios span{font-size:13.5px}.saga-curios small{font-size:11.5px;color:var(--mute)}
.saga-letters .text-button{min-height:44px;text-align:left}
/* expedition pack */
.saga-pack{margin:18px 0;padding:16px 18px;border-radius:16px;border:1px solid #c1b77c52;background:#1c3531a8;color:#e4ddc2}.saga-pack .dao-note{color:#b9c9b9;font-size:12.5px}.saga-pack .secondary{margin-top:8px}
.saga-herb-voice{display:block;margin:4px 0;font-size:12.5px;font-style:italic;color:#b6dcb0;quotes:"「" "」"}
/* beast */
.saga-beast-art{display:inline-block;width:var(--s,44px);height:var(--s,44px)}.saga-beast-art svg{width:100%;height:100%;display:block;filter:drop-shadow(0 3px 4px #0007)}
.saga-beast-dialog{text-align:center}.saga-beast-dialog h2{font-family:"Noto Serif TC",serif;color:var(--gold2)}.saga-beast-dialog form{text-align:left;margin-top:12px}
/* the dharma form card and its fight */
.saga-form.done{border-style:dashed}.saga-form-page .trib-sky{background:radial-gradient(circle at 50% 10%,rgba(160,220,190,.25),transparent 60%),linear-gradient(180deg,#141f2c,#0b1016)}
/* rebirth marks */
.saga-marks{margin:14px 0;padding:12px 14px;border-radius:12px;border:1px solid var(--line);display:grid;gap:8px}.saga-marks legend{padding:0 6px;color:var(--gold2)}
.saga-mark{display:grid;grid-template-columns:24px 1fr;gap:2px 8px;align-items:start;padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.2);cursor:pointer;min-height:44px}.saga-mark input{grid-row:1/4;margin-top:4px;width:18px;height:18px}.saga-mark strong{color:var(--gold2);font-weight:500}.saga-mark span{font-size:13px;color:#cfd6cf}.saga-mark:has(input:checked){outline:1px solid var(--gold2)}
/* the rite gains a grade and what the realm adds */
.rite-pin{display:block;font:500 26px "Noto Serif TC",serif;font-style:normal;color:#ffe6a4;letter-spacing:.3em;margin-top:6px}.rite-life{display:block;margin-top:12px;letter-spacing:.1em!important;font-size:14px!important;color:#e9e2d1!important}
/* the look of a realm around the companion */
.companion-model-wrap .saga-aura{position:absolute;left:50%;bottom:8%;width:62%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;pointer-events:none;z-index:0;opacity:0;background:radial-gradient(circle,color-mix(in srgb,var(--aura,#b9b4a7) 38%,transparent),transparent 65%)}
.companion-model-wrap[data-ladder="2"] .saga-aura,.companion-model-wrap[data-ladder="3"] .saga-aura{opacity:.45}
.companion-model-wrap[data-ladder="4"] .saga-aura,.companion-model-wrap[data-ladder="5"] .saga-aura{opacity:.7;box-shadow:0 0 0 2px color-mix(in srgb,var(--aura) 30%,transparent)}
.companion-model-wrap[data-ladder="6"] .saga-aura,.companion-model-wrap[data-ladder="7"] .saga-aura,.companion-model-wrap[data-ladder="8"] .saga-aura,.companion-model-wrap[data-ladder="9"] .saga-aura{opacity:.9;box-shadow:0 0 0 2px color-mix(in srgb,var(--aura) 45%,transparent),0 0 40px color-mix(in srgb,var(--aura) 40%,transparent);animation:saga-breathe 6s ease-in-out infinite}
@keyframes saga-breathe{50%{transform:translateX(-50%) scale(1.06)}}
.companion-model-wrap .saga-faxiang{position:absolute;left:50%;top:0;height:92%;transform:translateX(-50%);color:color-mix(in srgb,var(--aura,#d9b871) 55%,transparent);opacity:.32;pointer-events:none;z-index:0;filter:blur(1px) drop-shadow(0 0 18px var(--aura,#d9b871))}.companion-model-wrap .saga-faxiang svg{height:100%;width:auto}
.companion-model-wrap .saga-beast-follow{position:absolute;right:8%;bottom:6%;z-index:3;pointer-events:none}
.companion-model-wrap model-viewer,.companion-model-wrap .hamster-portrait{z-index:1}
/* new spots in the home scene */
.spot-letter{right:17%;top:100px;width:64px}.spot-shelf{right:2.5%;top:96px;width:92px}.spot-beast{right:28%;bottom:12px;width:64px}
@media(max-width:680px){.spot-letter{right:auto;left:41%;top:70px;width:46px}.spot-shelf{right:auto;left:40%;top:70px;width:62px}.scene-room:has(.spot-letter) .spot-shelf{left:3%;top:189px;width:40px}.spot-beast{right:31%;bottom:auto;top:360px;width:48px}.saga-fates{grid-template-columns:1fr}.saga-odds b{font-size:28px}.saga-letter{padding:18px}}
.motion-off .companion-model-wrap .saga-aura{animation:none!important}
@media(prefers-reduced-motion:reduce){.companion-model-wrap .saga-aura{animation:none!important}.saga-fate:hover{transform:none}}
/* The phone tab bar holds five tabs since the map was added; keep them on one row. */
@media(max-width:680px){body .site-header nav{grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;padding-left:6px;padding-right:6px}body .site-header nav .nav-button{font-size:12.5px;padding-left:2px;padding-right:2px;white-space:nowrap}}
/* health check: phone tap targets of at least 44px */
@media(max-width:680px){.rift-top .rift-deck-btn,.rift-top .rift-leave{min-height:44px;min-width:44px}.exp-panel summary,.rift summary{min-height:44px;display:flex;align-items:center}.dao-field select{min-height:44px}}
/* tablet and small laptop: the speech bubble takes the top-right, so the shelf and letter sit between the rift and the bubble */
@media(min-width:681px) and (max-width:1279px){.spot-shelf{right:auto;left:33%;top:96px;width:80px}.spot-letter{right:auto;left:33%;top:96px;width:56px}.scene-room:has(.spot-letter) .spot-shelf{left:46%;width:64px}}