/* Dragon Games: the Aster page's look, with the Academy's violet banners and gold */
html{background:#f3ecf8}
body.dg{background:linear-gradient(180deg,#f3ecf8 0%,#efe4f3 45%,#f9ede4 100%)}
.dg .eyebrow{font-weight:700;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.dg blockquote,.dg .accent{margin:14px 0 0;padding:2px 0 2px 16px;border-left:3px solid var(--gold);font-family:'Cormorant Garamond','GFS Didot',Georgia,serif;font-style:italic;font-weight:600;font-size:1.25rem;line-height:1.45;color:var(--plum)}
.dg .card p+p{margin-top:10px}

.dg-hero{position:relative;background:#1c1528;overflow:hidden}
.dg-hero video{display:block;width:100%;height:auto;max-height:86vh;aspect-ratio:16/9;object-fit:cover}
.dg-hero .back{position:absolute;top:16px;left:18px;font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-decoration:none;background:rgba(45,34,64,.45);padding:7px 14px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.dg-hero .back:hover{background:rgba(45,34,64,.7)}

.dg-open{padding-top:26px}
.dg-intro{display:grid;grid-template-columns:1.6fr 1fr;gap:22px;margin-top:22px}
.song .play:disabled{opacity:.6;cursor:default;background:linear-gradient(90deg,#b9a3d9,#e3a6c9)}

/* the six gates, lit as they are reached */
.gates-bar{position:sticky;top:8px;z-index:20;display:flex;justify-content:center;gap:8px;margin:8px auto 0;padding:8px 10px;width:max-content;max-width:100%;background:rgba(45,34,64,.82);border-radius:999px;box-shadow:0 8px 22px rgba(45,34,64,.25);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.gates-bar a{display:flex;flex-direction:column;align-items:center;min-width:58px;padding:4px 6px;border-radius:999px;text-decoration:none;color:rgba(255,250,245,.55);transition:color .4s,background .4s}
.gates-bar b{font-family:'Cinzel','GFS Didot',serif;font-size:.95rem;line-height:1.1}
.gates-bar span{font-size:.58rem;letter-spacing:.12em;text-transform:uppercase}
.gates-bar a.lit{color:var(--gold)}
.gates-bar a.now{background:rgba(217,168,91,.2);color:#fff3d6;text-shadow:0 0 10px rgba(255,215,140,.9)}

.scene,.gate,.board{display:grid;grid-template-columns:1.25fr 1fr;gap:22px;align-items:center}
.scene.flip,.gate.flip{grid-template-columns:1fr 1.25fr}
.scene.flip>img,.gate.flip>img{order:2}
.scene>img,.gate>img,.board>img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:18px;box-shadow:0 12px 30px rgba(74,53,96,.2)}
.gate{scroll-margin-top:90px}
.gate .num{font-family:'Cinzel','GFS Didot',serif;font-weight:700;color:var(--gold);letter-spacing:.14em;text-transform:uppercase;font-size:.9rem}
.gate h2{font-size:1.5rem;margin:2px 0 4px}
.gate .virtue{display:inline-block;margin-bottom:10px;padding:3px 12px;border-radius:999px;background:linear-gradient(90deg,rgba(169,139,214,.22),rgba(227,166,201,.28));color:var(--plum);font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.gate .card,.scene .card,.board .card,.bridge .card{position:relative}
.gate .card::after{content:"";position:absolute;top:18px;right:20px;width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(217,168,91,.2),0 0 18px rgba(217,168,91,.8)}
.final .card{background:linear-gradient(160deg,rgba(255,250,245,.92),rgba(236,226,250,.92))}

.board{grid-template-columns:1.6fr 1fr}
.five{list-style:none;display:flex;flex-direction:column;gap:6px;margin-top:6px}
.five li{padding-left:22px;position:relative;color:var(--ink)}
.five li::before{content:"\2726";position:absolute;left:0;color:var(--gold)}

.chorus{text-align:center}
.chorus p{position:relative;display:inline-block;padding:34px 52px 30px;border-radius:24px;font-family:'Cormorant Garamond','GFS Didot',Georgia,serif;font-style:italic;font-weight:600;font-size:clamp(1.35rem,3.2vw,1.85rem);line-height:1.45;letter-spacing:.01em;color:#4a2f5e;background:radial-gradient(ellipse at 15% 0%,rgba(255,255,255,.75),transparent 55%),radial-gradient(ellipse at 90% 100%,rgba(255,226,240,.8),transparent 60%),linear-gradient(120deg,#e9d8fb 0%,#f2d3ee 45%,#fbd7e3 75%,#fde4d6 100%);border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 0 0 6px rgba(255,255,255,.35),inset 0 0 0 7px rgba(217,168,91,.45),0 18px 40px rgba(169,120,190,.28)}
.chorus p::before{content:"\2726";position:absolute;top:-13px;left:50%;transform:translateX(-50%);width:26px;height:26px;line-height:26px;border-radius:50%;font-style:normal;font-size:.8rem;color:#fff;background:linear-gradient(135deg,#c9a6ec,#f0a9cf 60%,#f3c98a);box-shadow:0 0 14px rgba(240,169,207,.75)}

.bridge .pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.bridge .pair img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:16px;box-shadow:0 10px 26px rgba(74,53,96,.18)}
.bridge .card{max-width:760px;margin:0 auto;text-align:center}
.bridge blockquote{border-left:0;padding-left:0}

.dg-gallery .grid{grid-template-columns:repeat(3,1fr)}
.dg-gallery .grid img{aspect-ratio:16/9}

.behold{text-align:center}
.behold img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 14px 36px rgba(74,53,96,.22)}
.behold p{margin-top:18px;font-family:'Cinzel','GFS Didot',serif;font-weight:700;font-size:clamp(1.2rem,3vw,1.6rem);letter-spacing:.08em;color:var(--plum)}
.dg footer a{color:inherit;text-decoration:none}

/* sections rise into view */
.js-reveal .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s ease}
.js-reveal .reveal.shown{opacity:1;transform:none}

@media (max-width:760px){
  .chorus p{padding:26px 16px 22px;font-size:min(1.3rem,4.4vw)}
  .dg-intro,.scene,.scene.flip,.gate,.gate.flip,.board{grid-template-columns:1fr}
  .scene.flip>img,.gate.flip>img{order:0}
  .gates-bar{gap:2px;padding:6px}
  .gates-bar a{min-width:0;padding:3px 7px}
  .gates-bar span{display:none}
  .bridge .pair{grid-template-columns:1fr}
  .dg-gallery .grid{grid-template-columns:repeat(2,1fr)}
}

.story-head{text-align:center;padding-bottom:0}
.story-head h2{font-size:clamp(1.6rem,4vw,2.2rem)}
.dg .card h2{font-size:1.4rem}

/* the story cards: a soft pastel ombre, lavender into blush */
.dg .card{background:linear-gradient(135deg,rgba(247,239,255,.96) 0%,rgba(253,240,248,.96) 55%,rgba(255,244,238,.96) 100%);border:1px solid rgba(214,180,232,.55);box-shadow:0 12px 30px rgba(169,120,190,.14),inset 0 1px 0 rgba(255,255,255,.9)}
.dg .final .card{background:linear-gradient(135deg,rgba(236,224,252,.97) 0%,rgba(248,226,244,.97) 60%,rgba(255,236,232,.97) 100%)}

/* Terms of Access, in the Dragon Games colors */
.terms{max-width:860px}
.terms .back-link{margin:18px 0 14px}
.terms .back-link a{font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--plum);text-decoration:none}
.terms h1{font-size:clamp(1.6rem,4.5vw,2.2rem);margin-top:2px}
.terms .sub{font-family:'Cormorant Garamond','GFS Didot',Georgia,serif;font-style:italic;font-size:1.2rem;color:var(--plum)}
.terms .card+.card{margin-top:18px}
.terms .body h2{font-size:.92rem;letter-spacing:.06em;margin:24px 0 8px;color:var(--ink)}
.terms .body h2:first-child{margin-top:0}
.terms .body p{font-size:.92rem;line-height:1.75;color:var(--soft);overflow-wrap:anywhere}

.dg-hero .back.right{left:auto;right:18px}
.dg-intro a{color:var(--plum);font-weight:700}