/* VISUAL PASS V0.3.2 — phone UI realism + live screenshot corrections */

/* Phone is an in-world close-up. Remove app chrome while the player is looking at it. */
.stage[data-type="phone_ui"] header{opacity:0;pointer-events:none;}
.stage[data-type="phone_ui"] .scene{padding:0;align-items:stretch;justify-content:stretch;text-align:left;}
.stage[data-type="phone_ui"] .stack{display:none!important;}
.stage[data-type="phone_ui"] .hint{bottom:calc(24px + env(safe-area-inset-bottom));}

/* The OS status belongs at the TOP of the phone screen, not in a pill in the lower half. */
.phone-os{position:absolute;z-index:8;left:50%;top:calc(17% + 18px);width:174px;height:365px;transform:translateX(-50%);pointer-events:none;color:#dde4e6;text-shadow:none;}
.phone-statusbar{height:22px;display:flex;align-items:center;justify-content:space-between;padding:0 8px;font-size:8px;line-height:1;letter-spacing:.01em;font-weight:600;color:#cbd3d6;}
.phone-status-left{display:flex;align-items:center;gap:5px;max-width:108px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.phone-status-right{display:flex;align-items:center;gap:4px;white-space:nowrap;}
.phone-signal{display:inline-flex;align-items:flex-end;gap:1px;height:8px;}
.phone-signal i{display:block;width:2px;border-radius:1px;background:#cbd3d6;opacity:.28;}
.phone-signal i:nth-child(1){height:3px}.phone-signal i:nth-child(2){height:5px}.phone-signal i:nth-child(3){height:7px}
.phone-signal.has-one i:nth-child(1){opacity:.95}
.phone-battery{position:relative;width:17px;height:8px;border:1px solid rgba(203,211,214,.74);border-radius:2px;display:inline-block;}
.phone-battery:after{content:"";position:absolute;right:-3px;top:2px;width:2px;height:4px;border-radius:0 1px 1px 0;background:rgba(203,211,214,.58);}
.phone-battery-fill{position:absolute;left:1px;top:1px;bottom:1px;width:4%;min-width:1px;background:#b95249;border-radius:1px;}
.phone-lock{position:absolute;left:0;right:0;top:64px;text-align:center;color:#e9edef;}
.phone-lock .phone-time{font-size:43px;font-weight:200;letter-spacing:-.055em;opacity:.9;}
.phone-lock .phone-date{margin-top:4px;font-size:9px;letter-spacing:.08em;color:#899397;}
.phone-homebar{position:absolute;left:50%;bottom:9px;width:68px;height:3px;border-radius:5px;background:rgba(231,235,236,.45);transform:translateX(-50%);}

/* Phone shell proportions/readability tuned against the live mobile screenshots. */
.stage[data-type="phone_ui"] .bg:before{top:17%!important;width:205px!important;height:405px!important;background:linear-gradient(165deg,#20282c 0%,#101619 18%,#080b0d 70%,#050708 100%)!important;border-color:rgba(188,205,211,.3)!important;box-shadow:0 30px 90px #000,inset 0 0 0 5px #0d1214,inset 0 0 50px rgba(124,158,170,.045)!important;}
.stage[data-type="phone_ui"] .bg:after{top:calc(17% + 7px)!important;height:13px!important;background:#040607!important;}

/* Title card should not collide visually with seat silhouettes. */
.stage[data-type="title"] .stack{max-width:82%;transform:translateY(-22px);}
.stage[data-type="title"] .copy.title_large{font-size:47px;line-height:.96;letter-spacing:-.04em;}

@media(max-width:360px){
  .phone-os{width:164px;}
  .stage[data-type="phone_ui"] .bg:before{width:195px!important;height:390px!important;}
  .stage[data-type="phone_ui"] .bg:after{top:calc(17% + 7px)!important;}
  .phone-lock .phone-time{font-size:39px;}
}