/* KFFART V7.8: 16:9 Life scene selected by the user.
   Replace V7.7 enlarged floating-island composition; other worlds unchanged. */
#detail-view.life-view .life-scene,
#life-flight.life-flight .life-flight-interior {
 background-image:url("life-scene-16x9-v78.webp")!important;
 background-size:cover!important;
 background-position:center center!important;
 background-repeat:no-repeat!important;
 background-color:#1f3740!important;
}
#detail-view.life-view .life-scene {min-height:670px;}
#detail-view.life-view .life-horizon {display:none!important;}
#detail-view.life-view .life-scene::before {
 z-index:1;
 opacity:1!important;
 background:linear-gradient(90deg,rgba(6,21,28,.32),transparent 41%)!important;
}
#detail-view.life-view .life-scene::after {
 background:
  linear-gradient(90deg,rgba(6,22,27,.36),rgba(6,22,27,.12) 24%,transparent 55%),
  linear-gradient(0deg,rgba(6,20,26,.44),transparent 18%,transparent 86%,rgba(6,17,25,.16))!important;
}
#detail-view.life-view .life-island-frame {
 inset:0!important;
 position:absolute!important;
 top:0!important;
 left:0!important;
 right:0!important;
 bottom:0!important;
 transform:none!important;
 width:100%!important;
 height:100%!important;
 max-width:none!important;
 aspect-ratio:auto!important;
 pointer-events:none;
 z-index:2;
}
#detail-view.life-view .life-island-frame::after {display:none!important;}
#detail-view.life-view .life-island {
 width:100%!important;height:100%!important;
 inset:0!important;
 object-fit:cover!important;
 object-position:center center!important;
 max-width:none!important;
 filter:none!important;
 transform:none!important;
 animation:none!important;
}
#life-flight.life-flight .life-flight-interior::before {display:none!important;}
#detail-view.life-view .life-hero {
 width:min(445px,34vw);
 background:linear-gradient(145deg,rgba(7,32,39,.77),rgba(8,27,33,.65));
 border-color:rgba(255,238,203,.38);
 box-shadow:0 18px 55px rgba(6,21,28,.27),inset 0 1px rgba(255,255,235,.1);
}
#detail-view.life-view .life-hero h1 {font-size:clamp(47px,4.4vw,76px);}
#detail-view.life-view .life-hero h1 span {font-size:clamp(30px,3.4vw,51px);}
#detail-view.life-view .life-scene-foot {
 color:#faf3dcd9;
 text-shadow:0 2px 9px #0a242bd4;
}
#detail-view.life-view .life-hotspot {
 pointer-events:auto!important;
 width:48px!important;height:48px!important;
}
#detail-view.life-view .life-hotspot .star {
 color:#fff4c2;
 text-shadow:0 0 9px #fff8e7,0 0 22px #f5c664;
}
#detail-view.life-view .life-spot-label {display:none;}
@media (min-width:731px) and (max-width:1120px) {
 #detail-view.life-view .life-hero {width:min(395px,43vw);}
 #detail-view.life-view .life-hero h1{font-size:clamp(42px,5vw,62px);}
}
@media (max-width:730px) {
 #detail-view.life-view .life-scene {
  min-height:720px;
  background-position:50% 50%!important;
 }
 #detail-view.life-view .life-scene::before {
  background:linear-gradient(180deg,rgba(9,29,34,.81),rgba(9,29,34,.57) 26%,transparent 49%)!important;
 }
 #detail-view.life-view .life-scene::after {
  background:
   linear-gradient(180deg,rgba(5,19,27,.73) 0%,rgba(5,19,27,.55) 22%,rgba(5,19,27,.25) 36%,transparent 53%),
   linear-gradient(0deg,rgba(7,25,30,.73),transparent 24%)!important;
 }
 #detail-view.life-view .life-island {object-position:center center!important;}
 #detail-view.life-view .life-hero {
  top:clamp(21px,4svh,42px);
  width:calc(100% - 38px)!important;
  bottom:auto;left:19px;
  border:0!important;background:none!important;
  box-shadow:none!important;backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  padding:0;
  text-shadow:0 2px 15px #092028c9;
 }
 #detail-view.life-view .life-hero h1 {font-size:clamp(43px,12vw,61px);margin:11px 0 3px;}
 #detail-view.life-view .life-hero h1 span {font-size:clamp(29px,7.9vw,40px);}
 #detail-view.life-view .life-tagline{margin:8px 0 3px;}
 #detail-view.life-view .life-intro{font-size:11px;line-height:1.55;}
 #detail-view.life-view .life-actions{margin-top:10px;}
 /* Mobile landmark crop cannot hold all three star coordinates simultaneously:
    retain all three actions as visible titled markers across the bottom. */
 #detail-view.life-view .life-hotspot{
  position:absolute!important;
  top:auto!important;
  bottom:73px!important;
  height:44px!important;
  width:calc((100vw - 52px)/3)!important;
  transform:none!important;
  border-radius:25px!important;
  background:rgba(12,42,44,.75)!important;
  border:1px solid rgba(255,244,204,.6)!important;
  box-shadow:0 4px 16px rgba(2,15,19,.4)!important;
  display:flex;gap:6px;align-items:center;justify-content:center;
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  z-index:8;
 }
 #detail-view.life-view .life-hotspot::before{display:none;}
 #detail-view.life-view .life-hotspot .star{
  animation:none!important;
  display:inline-block;
  flex:0 0 auto;
  width:auto;height:auto;
  font-size:16px;
 }
 #detail-view.life-view .life-spot-label {
  display:inline-block;
  white-space:nowrap;
  font-size:11px;
  font-weight:700;
  color:#f6efd9;
 }
 #detail-view.life-view .life-hotspot--travel{left:14px!important;}
 #detail-view.life-view .life-hotspot--moments{left:calc(50% - (100vw - 52px)/6)!important;}
 #detail-view.life-view .life-hotspot--photos{right:14px!important;left:auto!important;}
 #detail-view.life-view .life-panel {
  bottom:130px!important;
  right:14px;left:14px;
  max-height:min(32svh,235px);
  overflow-y:auto;
 }
 #detail-view.life-view .life-scene-foot {
  left:17px;bottom:24px;right:17px;
  font-size:8px;letter-spacing:.04em;
 }
}
@media (max-width:360px) {
 #detail-view.life-view .life-hero h1{font-size:43px;}
 #detail-view.life-view .life-spot-label{font-size:10px;}
 #detail-view.life-view .life-hotspot{width:calc((100vw - 42px)/3)!important;}
 #detail-view.life-view .life-hotspot--travel{left:9px!important;}
 #detail-view.life-view .life-hotspot--photos{right:9px!important;}
 #detail-view.life-view .life-hotspot--moments{left:calc(50% - (100vw - 42px)/6)!important;}
}