/* css/overrides.css: loaded after style.css. Put your own CSS tweaks here: updates never overwrite this file. */

:root{
  --side:max(12.5vw,64px);              /* width of the side photos on the splash screen */
  --soft:rgba(241,230,210,.82);         /* secondary text: 5.2:1 or better on every background we use (was .62) */
  --gold:#e4bf7c;                       /* a touch lighter, so gold text passes 4.5:1 even on the brightest glow */
}

/* ---- splash: bubbles are masked out over the side photos ---- */
#h-bubbles{
  -webkit-mask-image:linear-gradient(to right,transparent 0,transparent var(--side),#000 calc(var(--side) + 7vw),#000 calc(100% - var(--side) - 7vw),transparent calc(100% - var(--side)),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,transparent var(--side),#000 calc(var(--side) + 7vw),#000 calc(100% - var(--side) - 7vw),transparent calc(100% - var(--side)),transparent 100%);
}

/* ---- contrast ---- */
.ph{color:rgba(236,202,134,.92)}                                  /* placeholder tiles: was 3.4:1, now 6.7:1 */
#hint,.lhint,#scan-cap span,#scan-cap time,.tab{text-shadow:0 1px 8px #000,0 0 3px #000}   /* text that sits on top of a scene */

/* ---- fortune cookie: the halves end up beside the paper, nothing fades away ---- */
#cookie.crack #ck-l{transform:translate(calc(var(--ckx,46px) * -1),var(--cky,12px)) rotate(-17deg)}
#cookie.crack #ck-r{transform:translate(var(--ckx,46px),var(--cky,12px)) rotate(17deg)}
#cookie.crack #ck-fx g:nth-child(6) .sq{animation-delay:.25s}
#cookie.revealed #ck-note{opacity:1;box-shadow:0 14px 40px rgba(0,0,0,.5);transition:none}
#cookie.revealed #ck-quote{color:#1a1206;transition:none}

/* ---- fortune cookie: the pieces fade away, the paper stays ---- */
#cookie.gone #ck-l,#cookie.gone #ck-r{opacity:0;transition:opacity .9s ease,transform .9s var(--ease)}
#cookie.gone .sq{opacity:0}
.ck-actions button[aria-pressed=true]{color:var(--gold)}

/* ---- sound button in the 3D viewer ---- */
.sound{position:absolute;right:1.5rem;bottom:1.1rem;z-index:6;width:3.4rem;height:3.4rem;padding:.55rem;background:none;border:0;color:var(--soft);filter:drop-shadow(0 2px 8px rgba(0,0,0,.7));transition:color .2s,transform .25s var(--ease)}
.sound[hidden]{display:none}
.sound:hover{color:var(--gold);transform:scale(1.1) rotate(-6deg)}
.sound.playing{color:var(--gold);animation:spulse 1.2s ease-in-out infinite}
@keyframes spulse{50%{transform:scale(1.12)}}
.sicon{display:block;width:100%;height:100%;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.sicon.svg{background:none;-webkit-mask:none;mask:none}
.sicon svg{display:block;width:100%;height:100%;fill:currentColor}
#sound-cap{position:absolute;right:1.5rem;bottom:4.8rem;z-index:6;font-size:.95rem;color:var(--soft);text-shadow:0 1px 8px #000,0 0 3px #000;opacity:0;transition:opacity .4s;pointer-events:none}
#sound-cap.show{opacity:1}

/* ---- quotes collection page ---- */
body.route-quotes #hub,body.route-quotes #app,body.route-quotes #lightbox{display:none}
#qpage{display:none;position:fixed;inset:0;overflow-y:auto;background:radial-gradient(ellipse 60% 56% at 50% 40%,#5d4519 0%,#2a1e0d 38%,#000 100%)}
body.route-quotes #qpage{display:block}
#qrail{position:fixed;left:.9rem;top:50%;transform:translateY(-50%);z-index:20;display:block;width:46px;opacity:.78;transition:opacity .3s,transform .35s var(--ease)}
#qrail:hover{opacity:1;transform:translateY(-50%) scale(1.1) rotate(-4deg)}
#qrail svg{display:block;width:100%;height:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))}
#qrail::after{content:attr(data-label);position:absolute;left:calc(100% + .7rem);top:50%;transform:translateY(-50%);white-space:nowrap;padding:.2rem .6rem;background:rgba(0,0,0,.8);font-size:.85rem;color:var(--ink);opacity:0;pointer-events:none;transition:opacity .2s}
#qrail:hover::after{opacity:1}
.q-wrap{max-width:1180px;margin:0 auto;padding:3.2rem 1.5rem 4rem 5.2rem}
#q-title{margin:0;font-weight:300;font-size:clamp(1.9rem,3vw,2.8rem);line-height:1.15}
#q-sub{margin:.4rem 0 0;color:var(--gold);letter-spacing:.08em}
#q-count{margin:.2rem 0 0;color:var(--soft);font-size:.9rem}
#q-note{margin:1.2rem 0 0;max-width:62ch;color:var(--soft);font-size:.9rem;line-height:1.5}
#q-empty{margin:3rem 0;max-width:42ch;line-height:1.6;color:var(--soft)}
#q-empty[hidden]{display:none}
#q-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2.4rem 1.8rem;margin-top:2rem}
.qcard{position:relative;perspective:1100px;animation:rise .6s var(--ease) both;animation-delay:calc(var(--i,0) * 55ms)}
.qinner{position:relative;aspect-ratio:1/1.2;transform-style:preserve-3d;transform:rotate(var(--tilt,0deg));transition:transform .8s var(--ease);cursor:pointer;outline-offset:6px}
.qcard:hover .qinner{transform:rotate(0deg) translateY(-4px)}
.qcard.flip .qinner{transform:rotate(0deg) rotateY(180deg)}
.qface{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.qfront .polaroid{display:flex;flex-direction:column;height:100%;width:100%}
.qfront .media{flex:1;aspect-ratio:auto;min-height:0}
.qback{transform:rotateY(180deg);background:#efe3cc;box-shadow:0 14px 40px rgba(0,0,0,.55);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;padding:1.4rem 1.2rem;text-align:center;overflow:hidden}
.qtext{margin:0;font-family:'Caveat','Segoe Print','Bradley Hand','Comic Sans MS',cursive;font-style:normal;font-weight:600;font-size:clamp(1.35rem,1.9vw,1.75rem);line-height:1.18;color:#1a1206}
.qby{font-size:.78rem;line-height:1.3;color:#4a3a22}
.qstar{position:absolute;top:.55rem;right:.55rem;z-index:3;width:2.2rem;height:2.2rem;border-radius:50%;background:rgba(0,0,0,.5);border:0;color:var(--soft);font-size:1.15rem;line-height:1;transition:color .2s,transform .25s var(--ease)}
.qstar:hover{color:var(--gold);transform:scale(1.12)}
.qstar[aria-pressed=true]{color:var(--gold)}

@media (max-width:820px){
  .sound{right:.7rem;bottom:.5rem;width:3rem;height:3rem}
  #sound-cap{right:.8rem;bottom:3.6rem}
  #qrail{left:.55rem;top:.7rem;width:34px;transform:none}
  #qrail:hover{transform:none}
  .q-wrap{padding:3.4rem 1.1rem 3rem}
  #q-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1.8rem 1rem}
  .qtext{font-size:1.15rem}
}
@media (min-width:821px) {
    #companion {
        flex-direction: row-reverse
    }
}