/* The Seven Locks of AmazeLand: its own world inside the site.
   Night quest aesthetic: midnight indigo, old brass, glowing moon-runes, parchment, and one jewel per Lock.
   Titles in Lilita One (a bold, rounded game face that young children read easily), everything else in Nunito. */

.saga {
  --night: #121731; --dusk: #241E50; --deep: #1A1F44; --brass: #D4AE55; --brass-hi: #F6DC8E; --brass-lo: #7B5A1C; --bolt: #5B4214;
  --rune: #8FE8DA; --parch: #F2E6C8; --parch-2: #E6D3A8; --ink: #3B2A14; --ember: #FF8A4C; --mist: #B9B3CF; --text: #E9E3D0;
  --clan: #6B4BC4; --clan-ink: #3A2775; --clan-soft: #EFEAFB;
  --title: 'Lilita One', 'Fredoka', sans-serif; --tale: 'Nunito', system-ui, sans-serif;
  color: var(--text); min-height: 72vh;
  background-color: var(--night);
  background-image:
    radial-gradient(1.2px 1.2px at 20px 30px, rgba(255,255,255,.75) 50%, transparent 51%),
    radial-gradient(1px 1px at 90px 120px, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 160px 70px, rgba(255,246,214,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 230px 180px, rgba(143,232,218,.6) 50%, transparent 51%),
    radial-gradient(ellipse at 50% -10%, #2E2668 0, transparent 60%);
  background-size: 260px 220px, 260px 220px, 260px 220px, 260px 220px, 100% 900px;
  background-repeat: repeat, repeat, repeat, repeat, no-repeat;
}
.saga h1, .saga h2 { font-family: var(--title); font-weight: 700; color: var(--parch); letter-spacing: .01em; line-height: 1.12; }
.saga h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); }
.saga h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.saga p { color: #D9D3C2; }
.saga .lead { font-family: var(--tale); font-size: 1.22rem; line-height: 1.7; color: #E4DECB; }
.saga .eyebrow { font: 600 1.1rem var(--tale); color: var(--brass); text-transform: none; letter-spacing: 0; margin-bottom: 4px; }
.saga .fine { color: var(--mist); }
.saga a { color: var(--brass-hi); }
.saga .crumbs, .saga .crumbs a { color: var(--brass); }
.saga .section-soft { background: transparent; }
.saga .wrap.narrow { max-width: 780px; }

/* buttons: brass for the way forward, outlined for everything else */
.saga .btn-coral, .saga .sg-btn { background: linear-gradient(#F6DC8E, #D4AE55 55%, #A67A2C); color: #2B1D05; border: 2px solid var(--bolt); border-radius: 10px; box-shadow: 0 3px 0 var(--bolt), inset 0 1px 0 rgba(255,255,255,.6); }
.saga .btn-coral:hover { filter: brightness(1.06); color: #2B1D05; }
.saga .btn-ghost, .saga .btn-navy { background: rgba(18,23,49,.5); color: var(--parch); border: 2px solid var(--brass); border-radius: 10px; box-shadow: none; }
.saga .btn-ghost:hover, .saga .btn-navy:hover { background: rgba(212,174,85,.14); color: var(--parch); }
.saga .btn-link { color: var(--brass-hi); }
.saga .btn:focus-visible, .saga button:focus-visible, .saga a:focus-visible { outline: 3px solid var(--rune); outline-offset: 3px; }
.saga .pill { background: var(--deep); color: var(--parch); border-color: var(--brass-lo); }
.saga .pill.is-on { background: var(--brass); color: #2B1D05; border-color: var(--brass); }

/* panels: dark glass with a brass edge, and parchment for anything written in the story */
.sg-panel, .saga .saga-tile, .saga .reward-step, .saga .beast, .saga .ending-rewards > div, .saga .next-chapters, .saga .clan-pick {
  background: linear-gradient(180deg, rgba(36,30,80,.92), rgba(26,31,68,.92)); border: 1px solid var(--brass-lo); box-shadow: inset 0 0 0 3px rgba(18,23,49,.9), inset 0 0 0 4px rgba(212,174,85,.35), 0 10px 30px rgba(0,0,0,.35); border-radius: 14px; color: var(--text); }
.sg-parch, .saga .mission-story, .saga .ending-story, .saga .decode, .saga .glyph-cell {
  background: var(--parch) linear-gradient(135deg, rgba(255,255,255,.35), rgba(226,207,160,.35)); color: var(--ink); border-radius: 6px; box-shadow: 0 0 0 1px #C9AE74, 0 14px 34px rgba(0,0,0,.4); }
.sg-parch p, .saga .mission-story p, .saga .ending-story p, .saga .decode p { color: var(--ink); }

/* ---------- landing ---------- */
.sg-hero { position: relative; padding: 46px 0 64px; text-align: center; overflow: hidden; }
.sg-constellation { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: clamp(4px, 1.6vw, 18px); margin: 0 auto 10px; max-width: 980px; }
.sg-constellation .lk { position: relative; z-index: 1; }
.sg-constellation .lk-1 { margin-top: 0; }
.sg-constellation .lk-2, .sg-constellation .lk-7 { margin-top: 64px; }
.sg-constellation .lk-3, .sg-constellation .lk-6 { margin-top: 34px; }
.sg-constellation .lk-4 { margin-top: 0; }
.sg-constellation .lk-5 { margin-top: 18px; }
.sg-constellation .lk-1 { order: 0; }
.sg-thread { position: absolute; left: 0; right: 0; top: 30px; height: 160px; width: 100%; z-index: 0; }
.sg-title { margin: 6px 0 0; font-size: clamp(2.6rem, 7vw, 5.2rem) !important; line-height: 1 !important;
  background: linear-gradient(180deg, #FFF3C8 0%, #E9C46A 45%, #A67A2C 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; text-shadow: 0 2px 30px rgba(212,174,85,.25); }
.sg-title span { display: block; font-size: .45em; margin-top: 8px; }
.sg-tale { font: 400 1.25rem/1.75 var(--tale); color: #E4DECB !important; max-width: 60ch; margin: 18px auto 0; }
.sg-tale + .sg-tale { margin-top: 10px; }
.sg-ask { font: 600 1.5rem var(--tale); color: var(--brass-hi) !important; margin: 18px 0 22px; }
.sg-note { color: var(--mist) !important; margin-top: 14px; font-size: .95rem; }
.sg-aara { position: absolute; left: 6%; bottom: 40px; width: 120px; opacity: .95; filter: drop-shadow(0 10px 26px rgba(0,0,0,.5)); }
@media (prefers-reduced-motion: no-preference) {
  .lock-awake .lock-ring { animation: spin 26s linear infinite; transform-origin: 60px 58px; transform-box: view-box; }
  .lock-awake .lock-aura { animation: breathe 3.2s ease-in-out infinite; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { opacity: .25; } }

.sg-clans { padding: 40px 0 56px; }
.sg-clans .section-head p { color: var(--mist); font-family: var(--tale); font-size: 1.12rem; }
.sg-banners { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 26px; }
.sg-banner { position: relative; padding-top: 14px; text-align: center; }
.sg-banner::before { content: ""; position: absolute; left: -8px; right: -8px; top: 0; height: 12px; border-radius: 6px; background: linear-gradient(#F6DC8E, #A67A2C); box-shadow: 0 2px 0 var(--bolt); }
.sg-cloth { background: linear-gradient(180deg, var(--clan) 0%, var(--clan-ink) 100%); padding: 22px 16px 54px; clip-path: polygon(0 0, 100% 0, 100% 88%, 50% 100%, 0 88%); color: #fff; min-height: 100%; }
.sg-cloth .crest { display: block; margin: 0 auto 8px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.sg-cloth h3 { font: 700 1.6rem var(--title); color: #fff; margin: 4px 0 6px; }
.sg-cloth .motto { font: 600 1.12rem var(--tale); color: #fff !important; margin: 0 0 10px; }
.sg-cloth p { color: rgba(255,255,255,.88) !important; font-size: .98rem; }
.sg-cloth .power { font-weight: 800; color: #fff !important; margin-top: 10px; }

.sg-scroll { max-width: 880px; margin: 0 auto 56px; padding: 30px 36px; position: relative; }
.sg-scroll::before, .sg-scroll::after { content: ""; position: absolute; left: -10px; right: -10px; height: 18px; border-radius: 9px; background: linear-gradient(#E2CFA0, #B99B5C); box-shadow: 0 3px 6px rgba(0,0,0,.35); }
.sg-scroll::before { top: -9px; } .sg-scroll::after { bottom: -9px; }
.sg-scroll h2 { color: var(--ink) !important; text-align: center; margin: 0 0 18px; }
.sg-wonders { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 34px; list-style: none; padding: 0; margin: 0; }
.sg-wonders li { display: grid; grid-template-columns: 50px 1fr; gap: 12px; align-items: center; font-family: var(--tale); font-size: 1.08rem; line-height: 1.45; }
.sg-wonders b { display: block; font-weight: 600; }
.sg-wonders .ic { width: 50px; height: 50px; display: grid; place-items: center; }

/* ---------- gate, arrival, letter ---------- */
.saga .center-img { margin: 0 auto 8px; }
.saga-arrival .ari-fly { position: relative; width: 220px; height: 190px; margin: 0 auto; }
.saga-arrival .ari-fly img { position: absolute; left: 30px; top: 0; }
.envelope.small { position: absolute; right: 0; bottom: 6px; width: 96px; height: 64px; padding: 0; }
@media (prefers-reduced-motion: no-preference) { .is-arriving .ari-fly { animation: flyin 1.4s cubic-bezier(.2,.8,.3,1) both; } }
@keyframes flyin { from { transform: translate(-60vw, -40px) rotate(-12deg); } to { transform: none; } }
.envelope { position: relative; display: grid; place-items: center; width: min(460px, 100%); aspect-ratio: 1.55; margin: 18px auto; background: var(--parch); border: 0; border-radius: 6px; box-shadow: 0 20px 50px rgba(0,0,0,.5); cursor: pointer; overflow: hidden; }
.envelope::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 58%; background: var(--parch-2); clip-path: polygon(0 0, 100% 0, 50% 100%); transition: transform .6s ease; transform-origin: top; }
.envelope .seal { position: relative; z-index: 2; margin-top: 4%; transition: transform .5s ease, opacity .5s; }
.envelope:hover .seal { transform: scale(1.06) rotate(-6deg); }
.env-to { position: absolute; left: 0; right: 0; bottom: 12%; z-index: 1; font: 600 1.15rem/1.4 var(--tale); color: #5B4524; }
.envelope.is-open::before { transform: rotateX(180deg); }
.envelope.is-open .seal { transform: scale(1.4); opacity: 0; }
.envelope.small::before { height: 60%; }
.letter-wrap { animation: rise .6s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
.saga .sheet.letter { text-align: left; background: var(--parch) linear-gradient(135deg, rgba(255,255,255,.4), rgba(226,207,160,.4)); border: 0; box-shadow: 0 0 0 1px #C9AE74, 0 20px 50px rgba(0,0,0,.5); font: 400 1.14rem/1.75 var(--tale); color: var(--ink); max-width: 720px; margin: 0 auto; border-radius: 4px; }
.saga .sheet.letter p { color: var(--ink); }
.letter-top { display: flex; align-items: center; gap: 14px; border-bottom: 1px solid #C9AE74; padding-bottom: 10px; margin-bottom: 14px; }
.letter-from { font: 700 1.7rem/1.1 var(--title) !important; margin: 0; color: #5B4524 !important; }
.letter-from small { font: 600 .5em var(--tale); display: block; margin-top: 4px; }
.letter-glyphs { background: rgba(107,75,196,.08); border: 1px dashed rgba(107,75,196,.4); border-radius: 6px; padding: 10px; text-align: center; }
.letter-sign { margin-top: 18px; }
.letter-ps { font-size: .95rem; color: #6E5A3C !important; }
.glyph-line { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: center; }
.glyph-gap { display: inline-block; width: 16px; }
.saga-name { display: grid; gap: 8px; max-width: 360px; margin: 16px auto; text-align: left; }
.saga-name label { color: var(--parch); font-weight: 700; }
.saga-name input { font: 400 1.4rem var(--tale); padding: 12px 14px; border: 2px solid var(--brass); border-radius: 10px; background: var(--parch); color: var(--ink); }

/* ---------- Sorting Riddle ---------- */
.riddle-dots { display: flex; gap: 10px; justify-content: center; margin: 8px 0 18px; }
.riddle-dots span { width: 12px; height: 12px; transform: rotate(45deg); background: #2A2F52; border: 1px solid var(--brass-lo); }
.riddle-dots .on { background: var(--brass); }
.riddle-dots .now { background: var(--rune); box-shadow: 0 0 10px var(--rune); }
.saga .riddle-q { font-size: clamp(1.6rem, 3.6vw, 2.3rem); }
.riddle-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 22px 0; }
.riddle-a { font: 400 1.18rem/1.4 var(--tale); padding: 18px 18px; min-height: 84px; border-radius: 10px; cursor: pointer; color: var(--parch);
  background: linear-gradient(180deg, #262056, #1A1F44); border: 1px solid var(--brass-lo); box-shadow: inset 0 0 0 3px #161B3A, inset 0 0 0 4px rgba(212,174,85,.4); transition: box-shadow .15s, transform .15s; }
.riddle-a:hover, .riddle-a:focus-visible { transform: translateY(-2px); box-shadow: inset 0 0 0 3px #161B3A, inset 0 0 0 4px var(--rune), 0 0 24px rgba(143,232,218,.25); outline: none; }
.sorting-reveal { background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--clan) 45%, transparent), transparent 55%); }
.crest-pop { display: inline-block; filter: drop-shadow(0 0 30px color-mix(in srgb, var(--clan) 70%, transparent)); }
@media (prefers-reduced-motion: no-preference) { .crest-pop { animation: pop .9s cubic-bezier(.2,1.6,.4,1) both; } }
@keyframes pop { from { transform: scale(.2) rotate(-20deg); opacity: 0; } }
.saga .clan-motto { font: 600 1.3rem var(--tale); color: var(--brass-hi) !important; }
.clan-grid.small { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.saga .clan-pick { padding: 10px; cursor: pointer; }

/* ---------- Compass Shard ---------- */
.shard-card { border: 2px solid var(--brass); border-radius: 14px; overflow: hidden; background: var(--parch); text-align: left; max-width: 640px; margin: 0 auto; box-shadow: 0 20px 50px rgba(0,0,0,.5); color: var(--ink); }
.shard-card p { color: var(--ink); }
.shard-top { background: linear-gradient(90deg, var(--clan-ink), var(--clan)); color: #fff; font: 700 1.05rem var(--title); padding: 10px 18px; }
.shard-body { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 18px; }
.shard-body p { margin: 3px 0; font-family: var(--tale); font-size: 1.05rem; }
.shard-name { font: 700 2.1rem/1.1 var(--title) !important; }
.shard-motto { color: var(--clan-ink) !important; }
.shard-foot { border-top: 1px dashed #C9AE74; padding: 8px 18px; font: 600 .95rem var(--tale); color: #6E5A3C; }

/* ---------- the map and hub ---------- */
.saga-bar { background: linear-gradient(180deg, #2A2257, #1A1E3E); border-bottom: 2px solid var(--brass-lo); }
.saga-bar-inner { display: flex; align-items: center; gap: 16px; padding: 12px 0; flex-wrap: wrap; }
.saga-who { font: 700 1.6rem var(--title); margin: 0; color: var(--parch) !important; }
.saga-sub { margin: 0; font-family: var(--tale); color: var(--mist) !important; }
.saga-sub b { color: var(--brass-hi); }
.saga-locks-mini { display: flex; gap: 2px; margin-left: auto; align-items: flex-end; }
.saga-hub { display: grid; grid-template-columns: 1fr 310px; gap: 22px; align-items: start; }
.saga-map { width: 100%; height: auto; display: block; border-radius: 6px; box-shadow: 0 0 0 1px #C9AE74, 0 0 0 7px #3B2A14, 0 0 0 8px var(--brass-lo), 0 24px 60px rgba(0,0,0,.55); }
.map-node circle { fill: #9C8A66; stroke: #F2E6C8; stroke-width: 5; }
.map-node text { font: 700 26px var(--title); fill: #fff; }
.map-node.current circle { fill: #D2561F; }
.map-node.done circle { fill: #1F8A7A; }
@media (prefers-reduced-motion: no-preference) { .map-node.current circle { animation: nodepulse 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } }
@keyframes nodepulse { 50% { transform: scale(1.12); } }
.map-label { font: 600 19px var(--tale); fill: #3B2A14; paint-order: stroke; stroke: #F2E6C8; stroke-width: 5px; }
.saga-next { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.saga-side { display: grid; gap: 12px; }
.saga .saga-tile { display: block; padding: 14px 16px; text-decoration: none; }
.saga a.saga-tile:hover { box-shadow: inset 0 0 0 3px rgba(18,23,49,.9), inset 0 0 0 4px var(--rune), 0 10px 30px rgba(0,0,0,.35); color: var(--text); }
.saga-tile b { display: block; font: 600 1.15rem var(--tale); color: var(--parch); }
.saga-tile > span { display: block; color: var(--mist); font-size: .95rem; }
.glyph-peek, .sprite-peek { display: flex !important; gap: 4px; margin-top: 6px; }
.cup-row { display: grid; grid-template-columns: 96px 1fr 54px; gap: 8px; align-items: center; font-size: .92rem; margin-top: 6px; color: var(--text); }
.cup-row.mine { font-weight: 800; color: var(--brass-hi); }
.cup-bar { height: 10px; background: #2A2F52; border-radius: 5px; overflow: hidden; }
.cup-bar i { display: block; height: 100%; border-radius: 5px; }
.cup-row b { text-align: right; font: inherit; }

/* ---------- missions and rewards ---------- */
.saga .mission-story { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; padding: 22px 28px; margin-bottom: 22px; }
.saga .mission-story h1 { color: var(--ink); margin: 0 0 6px; }
.saga .mission-story .lead { color: var(--ink); }
.saga .mission-story .eyebrow { color: #8A6524; }
.saga .mission-grid { grid-template-columns: repeat(3, 1fr); }
.saga .mission-card { box-shadow: 0 0 0 2px var(--brass-lo), 0 14px 30px rgba(0,0,0,.4); }
.saga .mission-card .card-body b { color: var(--ink); }
.saga .mission-card.is-done { box-shadow: 0 0 0 3px var(--rune), 0 0 24px rgba(143,232,218,.35); outline: 0; }
.reward-steps { display: grid; gap: 12px; margin: 20px 0; }
.saga .reward-step { display: grid; grid-template-columns: 90px 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center; text-align: left; padding: 14px 18px; }
.reward-step > :first-child { grid-row: 1 / 3; justify-self: center; }
.reward-step b { font: 600 1.2rem var(--tale); color: var(--parch); align-self: end; }
.reward-step > span:not(:first-child) { color: var(--mist); align-self: start; }
.reward-step .btn { grid-column: 2; justify-self: start; margin-top: 8px; }
@media (prefers-reduced-motion: no-preference) { .reward-step { animation: rise .5s ease both; animation-delay: var(--d); } }
.reward-icon.fog-clear { width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle, #F2E6C8 30%, #9C8A66 31%, #3B2A14); display: block; }
.reward-glyphs { display: flex !important; gap: 8px; }
.reward-glyphs span { display: grid; justify-items: center; color: var(--rune); }
.reward-glyphs svg { filter: drop-shadow(0 0 6px rgba(143,232,218,.6)); }
.charm-mini, .frag-mini { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #121731; border: 2px solid var(--brass); color: var(--brass-hi); font: 700 2rem var(--title); }
.frag-mini { background: var(--clan); color: #fff; border: 0; border-radius: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); font-size: 1.6rem; }

/* ---------- glyph book, bestiary, charm ---------- */
.glyph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px; margin: 18px 0 26px; }
.saga .glyph-cell { padding: 10px 6px; display: grid; justify-items: center; gap: 4px; opacity: .6; }
.saga .glyph-cell.known { opacity: 1; box-shadow: 0 0 0 2px var(--brass), 0 0 18px rgba(212,174,85,.35); }
.saga .decode { padding: 22px; }
.saga .decode h2 { color: var(--ink); }
.decode-line { background: rgba(107,75,196,.08); border: 1px dashed rgba(107,75,196,.4); border-radius: 6px; padding: 12px; text-align: center; }
.decode-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.decode-form label { width: 100%; font-weight: 700; color: var(--ink); }
.decode-form input { font: 700 1.3rem var(--title); letter-spacing: .08em; padding: 10px 12px; border: 2px solid #C9AE74; border-radius: 8px; flex: 1; min-width: 200px; text-transform: uppercase; background: #fff; }
.decoded { font: 700 1.4rem var(--title); color: var(--clan-ink) !important; }
.beast-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 18px; }
.saga .beast { padding: 12px; text-align: center; display: grid; justify-items: center; gap: 4px; }
.saga .beast b { font-family: var(--tale); color: var(--parch); }
.saga .beast:not(.caught) { opacity: .55; }
.saga .beast span { font-size: .85rem; color: var(--mist); }
.charm-card { max-width: 560px; margin: 0 auto; text-align: left; background: linear-gradient(160deg, #1A1F44, #2E2466); color: #F4F1FF; border-radius: 14px; padding: 26px 30px; border: 2px solid var(--brass); box-shadow: inset 0 0 0 5px #1A1F44, inset 0 0 0 6px rgba(212,174,85,.5), 0 20px 50px rgba(0,0,0,.5); }
.charm-card h2 { color: var(--brass-hi) !important; margin: 4px 0 10px; }
.charm-card p { color: #E4DECB; font-family: var(--tale); font-size: 1.05rem; }
.charm-kicker { font: 600 1rem var(--tale); color: var(--mist) !important; margin: 0; }
.charm-sigil { font-size: 3.4rem; color: var(--brass-hi); text-align: center; line-height: 1; margin: 6px 0 12px; text-shadow: 0 0 20px rgba(246,220,142,.6); }
.charm-answer span { display: inline-block; transform: rotate(180deg); font-weight: 800; }
.charm-foot { font-size: .9rem; color: var(--mist) !important; border-top: 1px dashed #5B5F86; padding-top: 8px; }

/* ---------- the First Fragment ---------- */
.fragment-glow { display: inline-block; filter: drop-shadow(0 0 26px rgba(242,181,33,.9)); }
@media (prefers-reduced-motion: no-preference) { .fragment-glow { animation: pop 1.1s cubic-bezier(.2,1.6,.4,1) both; } }
.saga .ending-story { padding: 24px 30px; text-align: left; font: 400 1.16rem/1.75 var(--tale); margin: 20px 0; }
.saga .ending-story .muddle { color: #5B3FA8; }
.ending-rewards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0; }
.saga .ending-rewards > div { padding: 16px; display: grid; justify-items: center; gap: 6px; }
.ending-rewards b { font: 600 1.1rem var(--tale); color: var(--parch); }
.ending-rewards span:last-child { color: var(--mist); font-size: .92rem; }
.saga .next-chapters { padding: 22px 26px; margin-top: 30px; }
.chapter-list { text-align: left; columns: 2 260px; padding-left: 0; list-style: none; }
.chapter-list li { padding: 7px 12px; border-radius: 6px; margin-bottom: 6px; break-inside: avoid; font-family: var(--tale); }
.chapter-list li span { display: block; font-size: .85rem; color: var(--mist); }
.chapter-list li b { color: var(--parch); font-weight: 600; }
.chapter-list li.done { background: rgba(143,232,218,.12); }
.chapter-list li.fogged b { filter: blur(3.5px); }
.chapter-list li.fogged:nth-child(2) b { filter: none; }
.saga .sheets .sheet.cert { color: var(--ink); }
.saga .cert p { color: inherit; }

@media (max-width: 900px) {
  .saga-hub { grid-template-columns: 1fr; }
  .sg-banners { grid-template-columns: 1fr 1fr; }
  .saga .mission-grid { grid-template-columns: 1fr 1fr; }
  .sg-constellation .lock { width: 64px; height: auto; }
  .sg-constellation .lk-1 .lock { width: 104px; }
  .sg-aara { display: none; }
}
@media (max-width: 600px) {
  .riddle-answers, .ending-rewards, .saga .mission-grid, .sg-wonders { grid-template-columns: 1fr; }
  .clan-grid.small { grid-template-columns: 1fr 1fr; }
  .sg-banners { grid-template-columns: 1fr 1fr; gap: 14px; }
  .sg-cloth { padding: 16px 10px 44px; }
  .sg-cloth .crest { width: 84px; height: auto; }
  .sg-constellation { gap: 0; flex-wrap: nowrap; }
  .sg-constellation .lock { width: 40px; }
  .sg-constellation .lk-1 .lock { width: 76px; }
  .sg-constellation .lk-2, .sg-constellation .lk-7 { margin-top: 40px; }
  .sg-constellation .lk-3, .sg-constellation .lk-6 { margin-top: 22px; }
  .sg-scroll { padding: 24px 18px; }
  .shard-body { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .shard-gem { display: none; }
  .saga .mission-story { grid-template-columns: 1fr; text-align: center; }
  .saga .mission-story img { margin: 0 auto; }
  .saga-locks-mini { margin-left: 0; }
  .saga-locks-mini svg { width: 30px; height: auto; }
}
@media print {
  .saga { background: #fff !important; color: #000; }
  .saga-bar, .saga-map-wrap, .saga-side { display: none !important; }
  .charm-card, .shard-card, .sheet.letter { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.sg-clans .section-head { text-align: center; max-width: 720px; margin: 0 auto; }
.sg-banners { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .sg-banners { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .sg-cloth h3 { font-size: 1.15rem; } .sg-cloth p { font-size: .9rem; } .sg-cloth .motto { font-size: 1rem; } }
body:has([data-saga]) { background: #121731; }
.map-node .map-label { font: 600 19px var(--tale); fill: #3B2A14; }

/* ---------- Aara, the guide on every screen ---------- */
.saga { padding-bottom: 110px; }
.aara-guide { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: flex; align-items: flex-end; gap: 6px; max-width: 380px; transition: opacity .3s, transform .3s; }
.aara-guide.away { opacity: 0; transform: translateY(24px); pointer-events: none; }
.aara-say { background: var(--parch, #F2E6C8); color: #3B2A14 !important; font: 700 1.02rem/1.45 'Nunito', system-ui, sans-serif; padding: 12px 15px; border-radius: 18px 18px 4px 18px; margin: 0 0 34px; border: 2px solid #D4AE55; box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.aara-say b { color: #8A3F00; }
.aara-btn { flex: none; border: 0; padding: 0; cursor: pointer; border-radius: 50%; background: radial-gradient(circle at 50% 60%, rgba(143,232,218,.45), transparent 68%); }
.aara-btn img { width: 96px; height: auto; display: block; filter: drop-shadow(0 8px 16px rgba(0,0,0,.5)); }
.aara-guide.quiet .aara-say { display: none; }
@media (prefers-reduced-motion: no-preference) { .aara-say { animation: saypop .45s cubic-bezier(.2,1.5,.4,1) both; } }
@keyframes saypop { from { transform: scale(.6) translateY(10px); opacity: 0; transform-origin: bottom right; } }
.sg-hero-aara { position: relative; z-index: 2; align-self: flex-end; margin-right: 6px; display: flex; flex-direction: column; align-items: center; }
.sg-hero-aara img { width: 130px; height: auto; filter: drop-shadow(0 10px 24px rgba(0,0,0,.5)); }
.sg-hero-aara .aara-say { position: absolute; bottom: 100%; left: -10px; width: 230px; margin: 0 0 -6px; text-align: left; border-radius: 18px 18px 18px 4px; }
@media (max-width: 900px) { .sg-hero-aara img { width: 86px; } .sg-hero-aara .aara-say { width: 190px; font-size: .9rem; } }
@media (max-width: 600px) {
  .aara-guide { right: 10px; bottom: 10px; max-width: calc(100% - 20px); }
  .aara-btn img { width: 64px; }
  .aara-say { font-size: .92rem; padding: 10px 12px; margin-bottom: 22px; }
  .sg-constellation { flex-wrap: wrap; justify-content: center; row-gap: 6px; }
  .sg-hero-aara { order: -1; width: 100%; flex-direction: row; justify-content: center; gap: 8px; align-items: center; margin: 0 0 10px; }
  .sg-hero-aara .aara-say { position: static; width: auto; max-width: 220px; margin: 0; order: 2; }
  .sg-hero-aara img { width: 76px; }
}
.sg-constellation { padding-top: 70px; }
.sg-hero-aara { flex: none; width: 150px; }
.sg-hero-aara img { width: 140px; max-width: none; }
.sg-hero-aara .aara-say { left: -20px; bottom: calc(100% - 8px); }
@media (max-width: 900px) { .sg-hero-aara { width: 100px; } .sg-hero-aara img { width: 90px; } }
@media (max-width: 600px) { .sg-constellation { padding-top: 0; } .sg-hero-aara { width: 100%; } .sg-hero-aara img { width: 76px; } }