/* Dreamridge Kids brand shell + the interactive treehouse home. */
:root{--dr-night:#1c1233;--dr-plum:#3b2463;--dr-gold:#f6cf72;--dr-cream:#fff8ea;--dr-ink:#34204f}
header{background:linear-gradient(100deg,#2c1a52,#1f1440 60%,#2d1d55);padding:12px 4vw;box-shadow:0 2px 0 #f6cf7240}
header a#brand{color:var(--dr-gold);font-family:Georgia,'Times New Roman',serif;font-size:24px;letter-spacing:.3px;text-shadow:0 0 14px #f6cf7255}
header a#brand span:not(.brand-star){display:inline;margin:0 0 0 10px;font:600 12px ui-rounded,'Segoe UI',sans-serif;color:#d9c9f5;letter-spacing:1px}
.brand-star{display:inline-block;color:#fff1b8}
.prototype{background:#ffffff14;color:#d9c9f5}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

body.home-mode{background:var(--dr-night);color:#f3eaff}
body.home-mode .sun{display:none}
body.home-mode main{max-width:none;margin:0;padding:0}
body.home-mode footer{color:#b7a6d6}
body.home-mode footer #audio-status{color:var(--dr-gold)}

/* Stage: the artwork keeps its 1672 × 940 shape; everything inside is sized in container units. */
.dreamridge{--h:min(calc(100vw / 1.7787),calc(100svh - 58px));position:relative}
.stage-scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;background:url(art/dreamridge-scene-blur.webp) center/cover,var(--dr-night)}
.stage-scroll::-webkit-scrollbar{display:none}
.stage{--px:0;--py:0;position:relative;height:var(--h);width:calc(var(--h) * 1.7787);margin:0 auto;container-type:size;overflow:hidden;box-shadow:0 0 60px #0008}
.scene-art{position:absolute;inset:-1.5%;background:url(art/dreamridge-scene.webp) center/cover;translate:calc(var(--px) * -1.4cqw) calc(var(--py) * -1.2cqh);transition:translate .8s ease-out}
.fx{position:absolute;inset:0;pointer-events:none;translate:calc(var(--px) * -.6cqw) calc(var(--py) * -.5cqh);transition:translate .8s ease-out}

.lantern-glow{position:absolute;width:var(--size);height:var(--size);translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,#ffd27a88,#ffb34f33 55%,transparent);mix-blend-mode:screen;animation:flicker 3.4s var(--d) ease-in-out infinite}
.twinkle{position:absolute;translate:-50% -50%}
.twinkle::before{content:'✦';display:block;font-size:calc(var(--s) * 1.3cqw);color:#fffbe6;text-shadow:0 0 .7cqw #fff3b0;animation:twinkle 3.6s var(--d) ease-in-out infinite}
.firefly{position:absolute;width:.45cqw;height:.45cqw;border-radius:50%;background:#fff3b5;box-shadow:0 0 .8cqw .35cqw #ffd76b99;animation:drift var(--t) var(--d) ease-in-out infinite}
.book-spark{position:absolute;width:.42cqw;height:.42cqw;border-radius:50%;background:#fffbe0;box-shadow:0 0 .7cqw .3cqw #ffe28a;opacity:0;animation:rise 4.2s var(--d) ease-out infinite}
.burst{position:absolute;pointer-events:none;translate:-50% -50%;font-style:normal;z-index:6}
.burst::before{content:'✦';font-size:1.6cqw;color:#ffe49a;text-shadow:0 0 .8cqw #fff}
.burst{animation:burst .8s ease-out forwards}

/* Glowing places */
.hotspot{position:absolute;translate:-50% -50%;border:0;padding:0;background:transparent;border-radius:50%;cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent}
.hotspot-glow{position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side,#fff0b066,#ffcf6f2a 60%,transparent);animation:pulse 3.2s ease-in-out infinite;transition:scale .3s,filter .3s}
.hotspot:hover .hotspot-glow,.hotspot:focus-visible .hotspot-glow{filter:brightness(1.6);scale:1.12}
.hotspot-label{position:absolute;left:50%;top:92%;translate:-50% 0;white-space:nowrap;display:flex;align-items:center;gap:.5cqw;padding:.55cqw 1.2cqw;border-radius:99px;background:#2a1850d9;border:.18cqw solid var(--dr-gold);color:var(--dr-cream);font:800 1.45cqw/1.1 ui-rounded,'Segoe UI Rounded','Segoe UI',sans-serif;box-shadow:0 0 1.2cqw #f6cf7266;transition:scale .25s,background .25s}
.hotspot-label span{font-size:1.8cqw}
.hotspot:hover .hotspot-label,.hotspot:focus-visible .hotspot-label{scale:1.1;background:#4a2b86}
.hotspot:focus-visible{outline:.35cqw solid #fff;outline-offset:.3cqw}
.hotspot[data-place="breaks"] .hotspot-label{top:auto;bottom:62%}
.hotspot.label-left .hotspot-label{left:auto;right:72%;top:50%;translate:0 -50%}
.hotspot.small .hotspot-label{opacity:0;scale:.8;top:96%}
.hotspot.small:hover .hotspot-label,.hotspot.small:focus-visible .hotspot-label{opacity:1;scale:1}

/* Dragon guide */
.dragon{position:absolute;left:1%;bottom:0;height:46%;aspect-ratio:593/760;border:0;padding:0;background:none;cursor:pointer;z-index:4;translate:calc(var(--px) * .8cqw) 0;transition:translate .8s ease-out;-webkit-tap-highlight-color:transparent}
.dragon img{position:relative;z-index:1;height:100%;width:100%;transform-origin:50% 100%;animation:breathe 4.5s ease-in-out infinite;filter:drop-shadow(0 .4cqw .8cqw #0006)}
.dragon.hop img{animation:hop .7s cubic-bezier(.3,1.6,.5,1),breathe 4.5s .7s ease-in-out infinite}
.dragon-shadow{position:absolute;left:12%;right:8%;bottom:-1.5%;height:7%;border-radius:50%;background:radial-gradient(closest-side,#1a0e2a99,transparent)}
.dragon:focus-visible{outline:.35cqw solid #fff;outline-offset:.2cqw;border-radius:2cqw}

.bubble{--w:calc(var(--h) * 1.7787);position:absolute;left:calc(50% - var(--w) / 2 + var(--w) * .195);bottom:calc(var(--h) * .06);width:calc(var(--w) * .23);z-index:5;padding:calc(var(--w) * .011) calc(var(--w) * .014);border-radius:calc(var(--w) * .018);background:var(--dr-cream);border:calc(var(--w) * .0025) solid var(--dr-gold);box-shadow:0 8px 24px #0007;color:var(--dr-ink);font:700 calc(var(--w) * .0142)/1.35 ui-rounded,'Segoe UI Rounded','Segoe UI',sans-serif;opacity:0;scale:.85;transform-origin:0 0;transition:opacity .3s,scale .3s;pointer-events:none}
.bubble::before{content:'';position:absolute;left:calc(var(--w) * -.016);top:calc(var(--w) * .014);border:calc(var(--w) * .01) solid transparent;border-right:calc(var(--w) * .014) solid var(--dr-gold);border-left:0}
.bubble p{margin:0}
.dreamridge.talking .bubble{opacity:1;scale:1}

/* First visit: a softly lit doorway into the room */
.entry-veil{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:radial-gradient(circle at 50% 55%,#1c123300 0,#1c123399 45%,#140c26ee)}
.dreamridge.entered .entry-veil{display:none}
.entry-button{margin-top:58cqh;border:.3cqw solid #fff3c4;border-radius:99px;padding:1.6cqw 3.6cqw;background:linear-gradient(180deg,#ffe08f,#f0b14a);color:#3b2160;font:900 2.6cqw/1 ui-rounded,'Segoe UI Rounded','Segoe UI',sans-serif;cursor:pointer;box-shadow:0 0 0 .8cqw #f6cf7233,0 0 3cqw #ffd77acc,0 .6cqw 0 #b97a22;animation:pulse 2.4s ease-in-out infinite}
.entry-button:focus-visible{outline:.4cqw solid #fff;outline-offset:.5cqw}
.entry-spark{display:inline-block;animation:twinkle 2s infinite}
.dreamridge:not(.entered) .hotspot,.dreamridge:not(.entered) .bubble{visibility:hidden}
.dreamridge:not(.entered) .dragon{opacity:0}
.dreamridge.arriving .scene-art{animation:arrive 1.6s cubic-bezier(.2,.8,.2,1)}
.dreamridge.arriving .dragon img{animation:rise-in 1.1s .35s cubic-bezier(.3,1.4,.5,1) both}
.dreamridge.arriving .hotspot{animation:fade-in .8s .9s both}

/* Narrow and portrait screens: swipe around the room, or use the big buttons below it. */
.realm-dock{display:none}
@media (max-aspect-ratio:1/1){
 .dreamridge{--h:min(calc(100svh - 58px - 104px),165vw)}
 .stage{margin:0}
 .bubble{left:16px;right:16px;top:12px;bottom:auto;width:auto;font-size:17px;padding:12px 16px;border-radius:18px;border-width:3px;transform-origin:50% 0}
 .bubble::before{display:none}
 .realm-dock{display:flex;gap:10px;padding:12px 16px;background:linear-gradient(#24164a,var(--dr-night))}
 .realm-dock button{flex:1;min-height:76px;border-radius:20px;border:2px solid var(--dr-gold);background:linear-gradient(180deg,#4a2b86,#2c1a52);color:var(--dr-cream);font:800 14px/1.15 ui-rounded,'Segoe UI',sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer}
 .realm-dock button span{font-size:26px}
 header{padding:10px 16px}
 header a#brand{font-size:20px}
 header a#brand span:not(.brand-star){display:none}
}

/* Realm panels */
.realm-panel{border:0;padding:0;background:transparent;width:min(980px,calc(100vw - 32px));max-width:none;max-height:calc(100svh - 32px);overflow:visible;color:var(--dr-ink)}
.realm-panel::backdrop{background:#140c26c4}
.realm-inner{--accent:#5b3a9c;max-height:calc(100svh - 32px);overflow:auto;border-radius:30px;padding:26px;background:radial-gradient(circle at 92% 0,#ffe9b0 0,transparent 30%),linear-gradient(180deg,#fffaf0,#fbefd7);border:4px solid var(--dr-gold);box-shadow:0 0 0 8px #f6cf7230,0 30px 80px #0009}
.realm-panel[open] .realm-inner{animation:realm-in .45s cubic-bezier(.2,.9,.3,1.25)}
.realm-breaks .realm-inner{--accent:#1f7a72}
.realm-tools .realm-inner{--accent:#2b4f8f}
.realm-head{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;margin-bottom:20px}
.realm-icon{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;font-size:40px;background:var(--accent);box-shadow:0 0 0 5px #fff,0 0 0 8px var(--dr-gold)}
.realm-kicker{font-size:12px;letter-spacing:2px;font-weight:800;text-transform:uppercase;color:var(--accent)}
.realm-head h2{font-family:Georgia,'Times New Roman',serif;font-size:clamp(26px,4vw,40px);margin:2px 0;color:var(--dr-plum);outline:none}
.realm-head p{margin:0;color:#6b5a80}
.realm-close{width:56px;height:56px;border-radius:50%;border:2px solid #e6d3a6;background:#fff;color:var(--dr-plum);font-size:22px;cursor:pointer;align-self:start}
.realm-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.realm-tile{position:relative;display:flex;flex-direction:column;gap:6px;text-align:left;padding:16px 18px 18px;min-height:230px;border-radius:24px;border:3px solid #f0dfb5;background:#fff;color:var(--dr-ink);font:inherit;cursor:pointer;box-shadow:0 6px 0 #ead7ab;transition:translate .2s,box-shadow .2s,border-color .2s}
.realm-tile:hover,.realm-tile:focus-visible{translate:0 -4px;border-color:var(--dr-gold);box-shadow:0 10px 0 #e2c47e,0 0 24px #f6cf7277}
.realm-tile.feature{grid-column:1/-1;min-height:0;display:grid;grid-template-columns:1fr auto;grid-template-areas:'tag art' 'title art' 'text art' 'go art';column-gap:20px;align-items:start;background:linear-gradient(135deg,var(--accent),#2a1850);color:#fff;border-color:var(--dr-gold)}
.realm-tile.feature .tile-tag{color:var(--dr-gold)}
.realm-tile.feature .tile-text{color:#eadfff}
.realm-tile.feature .tile-art{grid-area:art;height:130px;align-self:center}.realm-tile.feature .tile-art svg{height:120px;max-width:none}.realm-tile.feature .tile-tag{grid-area:tag}.realm-tile.feature strong{grid-area:title;font-size:24px}.realm-tile.feature .tile-text{grid-area:text}.realm-tile.feature .tile-go{grid-area:go;margin-top:10px;justify-self:start}
.tile-art{height:96px;display:flex;align-items:flex-end;gap:6px;margin-bottom:4px}
.tile-art svg{height:88px;width:auto;max-width:46%}
.tile-emoji{font-size:64px;line-height:1}
.tile-tag{font-size:11px;letter-spacing:1.6px;font-weight:800;text-transform:uppercase;color:#a86b00}
.realm-tile strong{font-size:20px;line-height:1.2}
.tile-text{font-size:15px;color:#6b5a80;line-height:1.4}
.tile-go{margin-top:auto;align-self:flex-start;padding:9px 16px;border-radius:99px;background:var(--dr-gold);color:#3b2160;font-weight:900;font-size:15px}
.realm-section{display:flex;align-items:center;gap:8px;margin:22px 0 10px;font-family:Georgia,'Times New Roman',serif;font-size:24px;color:var(--dr-plum)}
.realm-tile.mystery{background:radial-gradient(circle at 80% 30%,#4a3a78,#0b1838 75%);color:#fff;border-color:var(--dr-gold)}
.realm-tile.mystery .tile-tag{color:var(--dr-gold)}.realm-tile.mystery .tile-text{color:#dcd2f2}
.tile-mystery{position:relative;display:block;width:min(230px,100%);height:120px}
.tile-mystery-shadow{position:absolute;right:0;top:0;width:min(200px,85%);filter:brightness(0) blur(1px);opacity:.75}
.tile-mystery-mouse{position:absolute;left:0;bottom:2px;width:46px;filter:drop-shadow(0 0 10px #ffe9a0)}
.tile-mystery-q{position:absolute;right:6px;top:-6px;font:900 34px Georgia,serif;color:var(--dr-gold);text-shadow:0 0 12px #f6cf72}
.realm-tile.mystery .tile-art{height:130px}
.realm-quests .realm-inner{--accent:#1f6f6a}
.tile-quest{position:relative;display:block;width:min(260px,100%);height:130px;border-radius:14px;overflow:hidden;box-shadow:0 0 0 3px #f6cf72}
.tile-quest img{width:100%;height:100%;object-fit:cover;object-position:62% 45%;display:block}
.tile-quest-glow{position:absolute;left:0;top:0;width:28%;height:100%;background:radial-gradient(ellipse at 20% 50%,#7ff7ec88,transparent 70%);animation:mx-pulse 2.4s ease-in-out infinite}
.tile-basket{position:relative;display:block;width:min(210px,100%);height:120px}
.tile-basket img{width:min(200px,100%);height:auto;position:absolute;left:0;bottom:0;filter:drop-shadow(0 0 10px #ffe9a066)}
.realm-soon{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:20px 0 6px;padding:14px;border-radius:18px;background:#ffffff99;border:2px dashed #e3cf9f}
.soon-label{font-weight:800;color:var(--dr-plum);margin-right:4px}
.soon-chip{padding:6px 12px;border-radius:99px;background:#f3ebff;color:#5d4a7a;font-size:13px;font-weight:700}
.realm-back{margin-top:12px;min-height:56px;padding:14px 22px;border-radius:18px;border:0;background:var(--dr-plum);color:#fff;font:800 17px ui-rounded,'Segoe UI',sans-serif;cursor:pointer;box-shadow:0 4px 0 #22133e}
@media (max-width:600px){.realm-inner{padding:18px}.realm-head{grid-template-columns:auto 1fr;gap:12px}.realm-close{grid-row:1;grid-column:2;justify-self:end;position:absolute;right:20px;top:20px}.realm-icon{width:56px;height:56px;font-size:30px}.realm-tile.feature{grid-template-columns:1fr;grid-template-areas:'art' 'tag' 'title' 'text' 'go'}.realm-tile.feature .tile-art{height:96px;align-self:start}.realm-tile.feature .tile-art svg{height:88px}.realm-head p{padding-right:0}}

/* Grown-up settings on the dark home */
.dreamridge-adults{max-width:1000px;margin:18px auto 0;padding:14px 22px;border-radius:18px;background:#ffffff0d;color:#d9cdee;font-size:14px}
.dreamridge-adults summary{cursor:pointer;font-weight:800;color:#e9dcff;min-height:32px}
.dreamridge-adults .settings label{color:#efe6ff}
.dreamridge-adults p{color:#bfb0dc}

@keyframes flicker{0%,100%{opacity:.75;scale:1}45%{opacity:1;scale:1.08}70%{opacity:.85;scale:.97}}
@keyframes twinkle{0%,100%{opacity:.25;scale:.6}50%{opacity:1;scale:1.1}}
@keyframes drift{0%,100%{transform:translate(0,0);opacity:.2}30%{opacity:1}50%{transform:translate(var(--dx),var(--dy));opacity:.9}80%{opacity:.3}}
@keyframes rise{0%{transform:translate(0,0);opacity:0}15%{opacity:1}100%{transform:translate(var(--dx),-14cqh);opacity:0}}
@keyframes burst{0%{transform:translate(0,0) scale(.4);opacity:1}100%{transform:translate(var(--bx),var(--by)) scale(1.2);opacity:0}}
@keyframes pulse{0%,100%{opacity:.75;scale:1}50%{opacity:1;scale:1.06}}
@keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.012,.988)}}
@keyframes hop{0%{transform:translateY(0) scale(1,1)}20%{transform:translateY(0) scale(1.06,.92)}50%{transform:translateY(-9%) scale(.97,1.04)}80%{transform:translateY(0) scale(1.04,.96)}100%{transform:translateY(0) scale(1,1)}}
@keyframes arrive{from{scale:1.14;filter:brightness(.5)}to{scale:1;filter:none}}
@keyframes rise-in{from{transform:translateY(60%);opacity:0}to{transform:none;opacity:1}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes realm-in{from{opacity:0;transform:translateY(30px) scale(.92)}to{opacity:1;transform:none}}

/* Reduce motion: keep the room glowing but still. */
:root[data-reduced="true"] .dreamridge *,:root[data-reduced="true"] .realm-inner{animation:none!important;transition:none!important}
:root[data-reduced="true"] .firefly,:root[data-reduced="true"] .book-spark{display:none}
@media (prefers-reduced-motion:reduce){.firefly,.book-spark{display:none}.stage{--px:0!important;--py:0!important}}