/* V18 Cinematic Legacy pass: preserve the illustrated shop, reduce HUD clutter, deepen focus. */
:root{--v18-gold:#dfb66f;--v18-panel:rgba(8,5,3,.72);--v18-line:rgba(218,171,99,.34)}

/* Let the room own the frame. */
.scene:before{background:radial-gradient(circle at 50% 45%,transparent 18%,rgba(0,0,0,.24) 62%,rgba(0,0,0,.78) 100%),linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.22));}
.topbar{background:linear-gradient(180deg,rgba(7,5,3,.80),rgba(7,5,3,.58));border-color:rgba(194,149,86,.28);box-shadow:0 10px 35px rgba(0,0,0,.34);backdrop-filter:blur(8px)}
.topbar .brand strong{letter-spacing:.12em}
.hudbtn{background:rgba(13,9,6,.60);border-color:rgba(186,142,84,.42)}

/* Objective is a compact compass by default, not a billboard. */
.objective-card{width:min(360px,calc(100vw - 28px));padding:12px 14px;background:linear-gradient(180deg,rgba(8,5,3,.80),rgba(8,5,3,.62));border-color:rgba(198,153,90,.30);box-shadow:0 16px 42px rgba(0,0,0,.34);backdrop-filter:blur(8px)}
.objective-card .label{opacity:.72}
.objective-card strong{font-size:clamp(1rem,2.2vw,1.22rem);line-height:1.12}
.objective-detail[hidden]{display:none!important}
.objective-card.expanded .objective-detail{display:block}
.objective-card:not(.expanded) .progress{margin-top:9px}
.objective-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:7px}
.objective-toggle{border:0;background:transparent;color:#d4ae74;cursor:pointer;padding:4px 0;font:9px ui-monospace,monospace;letter-spacing:.16em}
.objective-toggle:hover,.objective-toggle:focus-visible{color:#ffe0a4}

/* Hotspots exist without carpeting the image in labels. */
.hotspot{background:rgba(34,20,10,.18);border-color:rgba(222,176,103,.52);box-shadow:0 0 0 5px rgba(255,199,110,.055),0 0 19px rgba(255,158,44,.16)}
.hotspot span{opacity:0;transform:translate(-50%,4px);transition:opacity .18s ease,transform .18s ease;background:rgba(8,5,3,.86);border:1px solid rgba(211,166,98,.22);padding:5px 7px;border-radius:2px}
.hotspot:hover span,.hotspot:focus-visible span,.hotspot.guided span{opacity:1;transform:translate(-50%,0)}
.hotspot.secret-hotspot:not(.guided){opacity:.38}
.hotspot.secret-hotspot:hover,.hotspot.secret-hotspot:focus-visible{opacity:.88}
.hotspot.found{opacity:.24}
.hotspot.found:hover,.hotspot.found:focus-visible{opacity:.55}

/* Movement should feel like a threshold strip, not a second HUD. */
.scene-nav{background:linear-gradient(90deg,rgba(6,4,3,.60),rgba(13,8,4,.76),rgba(6,4,3,.60));border-color:rgba(201,155,89,.24);box-shadow:0 8px 28px rgba(0,0,0,.30);backdrop-filter:blur(7px)}
.scene-nav .nav-kicker{opacity:.7}
.scene-nav button{background:rgba(24,15,8,.64);border-color:rgba(215,169,99,.40)}

/* Dialogue is cinematic, readable, and smaller than the room. */
.vendor-bar{max-width:min(760px,calc(100vw - 28px));background:linear-gradient(180deg,rgba(7,4,3,.84),rgba(5,3,2,.76));border-color:rgba(198,149,84,.30);box-shadow:0 16px 48px rgba(0,0,0,.42);backdrop-filter:blur(10px)}
.vendor-bar p{max-width:58ch}
.talk{background:rgba(20,12,7,.64);border-color:rgba(192,145,81,.40)}
.inventory{opacity:.74;transition:opacity .2s ease}.inventory:hover,.inventory:focus-within{opacity:1}
.room-label{opacity:.68}

/* Cinematic inspection and ending choices. */
.panel::backdrop{background:rgba(0,0,0,.78);backdrop-filter:blur(5px)}
.panel-inner{background:linear-gradient(180deg,#130c08 0%,#090604 100%);box-shadow:0 30px 100px #000;border-color:#634728}
.ending-choices{display:grid;gap:10px;margin-top:20px}
.ending-choices button{display:grid;gap:5px;text-align:left;border:1px solid #5d4228;background:#100a06;color:#ead8bb;padding:16px;cursor:pointer}
.ending-choices button:hover,.ending-choices button:focus-visible{border-color:#d4a25d;background:#211309}
.ending-choices strong{font-size:.9rem;letter-spacing:.08em;color:#e5b976}.ending-choices span{font-size:.86rem;line-height:1.45;color:#bba98f}

/* Deeper phases subtly alter atmosphere without replacing the artwork. */
.phase-2 .film{opacity:.15}.phase-3 .film,.phase-4 .film{opacity:.22}
.phase-3 .scene-nav,.phase-4 .scene-nav{border-color:rgba(172,66,43,.34)}
.phase-3 .hotspot.guided,.phase-4 .hotspot.guided{box-shadow:0 0 0 8px rgba(255,194,98,.09),0 0 26px rgba(229,129,50,.58),0 0 64px rgba(112,14,9,.28)}

@media (hover:hover) and (pointer:fine){
  .topbar,.objective-card,.vendor-bar,.scene-nav{transition:opacity .22s ease,border-color .22s ease,background .22s ease}
  .topbar{opacity:.82}.topbar:hover,.topbar:focus-within{opacity:1}
  .objective-card{opacity:.84}.objective-card:hover,.objective-card:focus-within{opacity:1}
  .vendor-bar{opacity:.90}.vendor-bar:hover,.vendor-bar:focus-within{opacity:1}
}

@media (max-width:900px),(pointer:coarse){
  .topbar{background:rgba(7,5,3,.78)}
  .objective-card{top:calc(max(8px,env(safe-area-inset-top)) + 62px);max-height:none;overflow:visible}
  .objective-card strong{font-size:clamp(.98rem,4.25vw,1.18rem)}
  .objective-card:not(.expanded) #objectiveDetail{display:none!important}
  .objective-card.expanded #objectiveDetail{display:block!important}
  .objective-card.expanded{max-height:30svh;overflow:auto}
  .guide-copy{display:none}
  .hotspot span{display:none}
  .hotspot.guided span,.hotspot:focus-visible span{display:block;opacity:1;transform:translate(-50%,0)}
  .scene-nav{bottom:calc(27svh + 18px + env(safe-area-inset-bottom));min-height:46px}
  .vendor-bar{max-height:27svh;padding:11px 12px 9px}
  .vendor-bar p{font-size:clamp(.88rem,3.4vw,1rem);line-height:1.38}
  .talk{min-height:42px;margin-top:7px}
}

@media (max-width:560px){
  .objective-card{width:calc(100vw - 16px);left:8px}
  .objective-card .label{font-size:.58rem}.objective-foot small{font-size:.62rem}
  .scene-nav{bottom:calc(25svh + 16px + env(safe-area-inset-bottom))}
  .vendor-bar{max-height:25svh}
  .hotspot{width:54px;height:54px;min-width:54px;min-height:54px}
  .hotspot.guided{width:62px;height:62px}
}

@media(prefers-reduced-motion:reduce){
  .topbar,.objective-card,.vendor-bar,.scene-nav,.hotspot span{transition:none!important}
}

/* V20 Descent foundation: preserve the cinematic illustrated shop, collection, and labyrinth. */
.scene-spirits{background-image:url('/assets/images/scene_spirits.webp')}
.scene-exit{background-image:url('/assets/images/scene_exit.webp')}
.scene-descent{background-image:url('/assets/images/scene_descent.webp')}
.scene-labyrinth_gate{background-image:url('/assets/images/scene_labyrinth_gate.webp')}
.scene-labyrinth_west{background-image:url('/assets/images/scene_labyrinth_west.webp')}
.scene-labyrinth_east{background-image:url('/assets/images/scene_labyrinth_east.webp')}
.scene-labyrinth_well{background-image:url('/assets/images/scene_labyrinth_well.webp')}
.scene-labyrinth_heart{background-image:url('/assets/images/scene_labyrinth_heart.webp')}

/* Visited rooms recede. Unvisited rooms stay luminous. The guide overrides both. */
.scene-nav button.visited-room,.map-room.visited-room{filter:grayscale(.82);opacity:.48;border-color:rgba(148,137,120,.28);box-shadow:none;background:rgba(8,7,6,.62)}
.scene-nav button.unvisited-room,.map-room.unvisited-room{opacity:1;border-color:rgba(227,181,106,.72);box-shadow:0 0 20px rgba(218,151,64,.16);background:rgba(33,20,10,.72)}
.scene-nav button.guided{filter:none!important;opacity:1!important;border-color:#ffe2a1!important;box-shadow:0 0 0 7px rgba(255,201,106,.10),0 0 26px rgba(255,186,72,.70)!important}
.map-room.current{outline:2px solid rgba(237,188,103,.72);outline-offset:2px}
.map-room small{opacity:.72}

/* The collection feels alive without carpeting the frame in FX. */
.scene-spirits:before{background:radial-gradient(circle at 46% 40%,transparent 12%,rgba(17,3,5,.18) 56%,rgba(0,0,0,.82) 100%),linear-gradient(180deg,rgba(38,4,7,.08),rgba(0,0,0,.34))}
.scene-spirits .haunted-hotspot:not(.found){animation:spiritPulse 3.6s ease-in-out infinite}
.scene-spirits .haunted-hotspot:nth-child(2n){animation-delay:-1.4s}
.scene-spirits .haunted-hotspot:nth-child(3n){animation-delay:-2.3s}
.phase-5 .film,.phase-6 .film{opacity:.22;mix-blend-mode:screen}
.scene-descent:before,.scene-labyrinth_gate:before,.scene-labyrinth_west:before,.scene-labyrinth_east:before,.scene-labyrinth_well:before,.scene-labyrinth_heart:before{background:radial-gradient(circle at 50% 48%,transparent 8%,rgba(20,0,0,.30) 56%,rgba(0,0,0,.90) 100%),linear-gradient(180deg,rgba(0,0,0,.18),rgba(35,0,0,.22))}

/* Night Vendor may physically appear for a few seconds during authored visits. */
.scene.vendor-present:after{content:'';position:absolute;z-index:9;right:16%;bottom:16%;width:88px;height:48vh;max-height:410px;min-height:210px;pointer-events:none;opacity:.88;background:radial-gradient(ellipse at 50% 13%,rgba(5,4,4,.96) 0 17%,transparent 18%),linear-gradient(86deg,transparent 0 20%,rgba(3,3,3,.97) 22% 74%,transparent 77%);filter:blur(.6px) drop-shadow(0 0 18px rgba(80,0,0,.48));clip-path:polygon(35% 0,66% 0,73% 11%,78% 31%,91% 100%,9% 100%,24% 31%,28% 11%);animation:vendorVisit .55s ease-out both}
.scene-labyrinth_well.vendor-present:after{right:10%;opacity:.62;filter:blur(2px) drop-shadow(0 0 22px rgba(121,0,0,.5))}

/* Gentle paranormal light rolls through deeper rooms. */
.scene-spirits .film,.scene-labyrinth_gate .film,.scene-labyrinth_west .film,.scene-labyrinth_east .film,.scene-labyrinth_well .film,.scene-labyrinth_heart .film{animation:grain .8s steps(2) infinite,spiritBreath 7s ease-in-out infinite}

/* Do not let expansion become HUD soup. */
.phase-4 .objective-card,.phase-5 .objective-card,.phase-6 .objective-card{width:min(330px,calc(100vw - 28px))}
.phase-4 .inventory,.phase-5 .inventory,.phase-6 .inventory{opacity:.48}
.phase-6 .room-label{color:#c49b7f}

@keyframes spiritPulse{0%,100%{box-shadow:0 0 0 5px rgba(255,199,110,.05),0 0 17px rgba(255,158,44,.12);filter:brightness(.9)}48%{box-shadow:0 0 0 9px rgba(209,221,189,.08),0 0 30px rgba(186,213,177,.32);filter:brightness(1.15)}52%{transform:translateY(-2px)}56%{transform:translateY(0)}}
@keyframes vendorVisit{from{opacity:0;transform:translateX(14px) scale(.985)}to{opacity:.86;transform:none}}
@keyframes spiritBreath{0%,100%{filter:none}50%{filter:brightness(1.045) saturate(.92)}}

@media(max-width:900px),(pointer:coarse){
  .scene.vendor-present:after{right:8%;bottom:30%;width:62px;height:30vh;min-height:170px;max-height:300px;opacity:.72}
  .scene-nav button.visited-room{opacity:.34}
  .scene-nav button.unvisited-room{opacity:1}
  .phase-4 .objective-card,.phase-5 .objective-card,.phase-6 .objective-card{width:calc(100vw - 16px)}
  .scene-spirits,.scene-descent,.scene-labyrinth_gate,.scene-labyrinth_west,.scene-labyrinth_east,.scene-labyrinth_well,.scene-labyrinth_heart{background-position:center center}
}
@media(max-width:560px){
  .scene-nav button.visited-room{max-width:120px;color:#9c9388}
  .scene-nav button.unvisited-room{color:#f0d4a7}
  .phase-5 .vendor-bar,.phase-6 .vendor-bar{max-height:27svh}
  .phase-5 .scene-nav,.phase-6 .scene-nav{bottom:calc(27svh + 18px + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){
  .scene.vendor-present:after,.scene-spirits .haunted-hotspot,.scene-spirits .film,.scene-labyrinth_gate .film,.scene-labyrinth_west .film,.scene-labyrinth_east .film,.scene-labyrinth_well .film,.scene-labyrinth_heart .film{animation:none!important}
}