/* QuestPick 5.9.1 | Prominent brand, reliable iPhone status-bar clearance.
   Additive UI-only layer. Player data, the draw engine, and existing screens
   intentionally remain unchanged. */

/* A distinctive wordmark rather than a generic small navigation label. */
.pn-topbrand>div,.qp53-brandline>div{min-width:0}
.pn-topbrand b{
  display:inline-block;
  position:relative;
  font-weight:950;
  letter-spacing:-1.35px;
  line-height:1.06;
  color:#fff;
  text-shadow:0 2px 22px rgba(202,100,255,.27),0 1px 0 #fff2;
}
.pn-topbrand b span,.brand strong em{
  background:linear-gradient(110deg,#f197ff 0%,#d055ff 43%,#a649ff 72%,#8de5fb 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.pn-topbrand b::after{
  content:"";position:absolute;left:2px;bottom:-5px;width:73%;height:2px;
  border-radius:99px;background:linear-gradient(90deg,#e9acff,#a43cff 65%,transparent);
  box-shadow:0 0 12px #c04aff87;pointer-events:none;
}
.qp53-wordmark{
  display:inline-block;
  max-width:100%;
  font-size:clamp(39px,4.3vw,60px);
  font-weight:950;letter-spacing:-2.55px;line-height:1.06;
  white-space:nowrap;overflow-wrap:normal;
  color:#fff;text-shadow:0 2px 27px #c065fa35,0 3px 7px #090310b5;
  position:relative;
}
.qp53-wordmark span{
  background:linear-gradient(115deg,#f194ff,#c647fc 42%,#9239ee 78%,#83d9ff);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.qp53-wordmark::after{
  content:"";display:block;width:48%;height:3px;margin:8px 0 0 3px;
  border-radius:99px;background:linear-gradient(90deg,#edb1ff,#c846ff 57%,transparent);
  box-shadow:0 0 13px #c13aff86;pointer-events:none;
}
.qp53-mark{box-shadow:0 10px 30px #ba3cff59,0 0 0 1px #c765fa2e}
.qp53-brandline p{font-style:normal;color:#e9d6f8;font-weight:530;letter-spacing:.16px;margin-top:6px}

@media(max-width:740px){
  /* v5.4 mistakenly overwrote the previous safe-area padding with just
     12px when env(safe-area-inset-top) was unavailable. Keep a fallback
     clearance even in older iPhone standalone WebKit versions. */
  .pn-topbar{
    position:sticky;top:0;z-index:32;
    min-height:132px;
    padding: max(72px, calc(env(safe-area-inset-top, 0px) + 27px)) 15px 16px!important;
    margin:0 -13px 18px!important;
    background:linear-gradient(180deg,#0b0714 0%,#120b20 56%,rgba(22,13,36,.97) 100%);
    border-bottom:1px solid #b568ed6d;
    box-shadow:0 10px 28px #0007;
  }
  .pn-topbrand{display:flex;align-items:center;gap:12px;min-width:0;max-width:calc(100% - 53px)}
  .pn-topbrand img{width:45px;height:45px;border-radius:13px;box-shadow:0 0 15px #a43bfa68}
  .pn-topbrand b{font-size:clamp(22px,6.3vw,27px);letter-spacing:-1.55px;white-space:nowrap}
  .pn-topbrand small{margin-top:8px;font-size:10.5px;line-height:1.3;letter-spacing:.09px;font-weight:550;color:#d9c2e9}
  .pn-header-avatar{width:44px;height:44px;flex:none}
  .pn-top-avatar{width:38px;height:38px}
  .qp53-masthead{min-height:198px;padding:23px 18px 20px}
  .qp53-brandline{align-items:center;gap:11px}
  .qp53-mark{width:54px;height:54px;flex:none}
  .qp53-wordmark{font-size:clamp(32px,10vw,43px);letter-spacing:-2.1px;line-height:1.04}
  .qp53-wordmark::after{height:2.5px;margin-top:6px}
  .qp53-brandline p{font-size:12.5px;line-height:1.42;margin:8px 0 0}
  .qp53-mast-bottom{margin-top:22px}
  html{scroll-padding-top:160px}
}
@media(max-width:375px){
  .pn-topbrand{gap:10px}
  .pn-topbrand img{width:42px;height:42px}
  .pn-topbrand b{font-size:22px}
  .pn-topbrand small{font-size:9.5px}
  .qp53-masthead{padding-inline:15px}
  .qp53-mark{width:48px;height:48px}
  .qp53-wordmark{font-size:clamp(30px,9.4vw,36px);letter-spacing:-1.9px}
}
@media(max-width:330px){
  .pn-topbar{margin-inline:-10px!important;padding-inline:11px!important}
  .pn-topbrand img{width:39px;height:39px}
  .pn-topbrand b{font-size:21px}
  .pn-topbrand small{font-size:8.7px}
  .pn-header-avatar{width:39px;height:39px}
  .pn-top-avatar{width:33px;height:33px}
  .qp53-mark{width:43px;height:43px}
  .qp53-brandline{gap:8px}
  .qp53-wordmark{font-size:30px;letter-spacing:-1.8px}
}

/* QuestPick 5.9.1: The player identity is the visual focus of the masthead. */
.qp53-masthead{min-height:277px}
.qp53-masthead::before{background-image:linear-gradient(100deg,rgba(11,7,22,.97) 0%,rgba(24,9,46,.82) 49%,rgba(12,9,34,.17) 100%),url('./assets/atmosphere/vista.webp')}
.qp53-mast-bottom{align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:nowrap}
.qp56-player{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;
  flex:1 1 auto;min-width:0;max-width:100%;margin:0;padding:1px 0 0 16px;
  border:0;border-radius:0;background:transparent;color:inherit;
  text-align:left;cursor:pointer;box-shadow:none;
}
.qp56-player::before{content:"";position:absolute;left:0;top:4px;bottom:6px;width:3px;
  border-radius:5px;background:linear-gradient(180deg,#edafff,#ab38f6 70%,#6bd7ff);
  box-shadow:0 0 14px rgba(185,64,255,.6)}
.qp56-player:focus-visible{outline:2px solid #f0acff;outline-offset:5px;border-radius:6px}
.qp56-player-kicker{
  display:flex;align-items:center;gap:7px;
  font-size:10px;line-height:1.3;letter-spacing:2px;font-weight:860;
  color:#dd9dff;text-shadow:0 1px 13px #380d60;
}
.qp56-player-signal{width:6px;height:6px;flex:none;border-radius:50%;background:#d55cff;box-shadow:0 0 12px #c957ff}
.qp56-player-name{
  display:block;max-width:100%;margin-top:3px;
  font-size:clamp(39px,4.8vw,62px);line-height:1.09;
  letter-spacing:-1.65px;font-weight:950;
  overflow-wrap:anywhere;word-break:normal;
  color:#fff;
  background:linear-gradient(110deg,#fff 0%,#fff 30%,#e8b0ff 71%,#ba60fc 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 3px 12px rgba(161,66,220,.35));
}
.qp56-player-detail{display:block;margin-top:5px;font-size:12px;line-height:1.35;font-weight:550;color:#ddd1ef}
.qp53-library-pill{flex:none;align-self:flex-end;margin-bottom:4px}
@media(max-width:740px){
  .qp53-masthead{min-height:255px;padding:22px 18px 23px}
  .qp53-mast-bottom{margin-top:25px;gap:9px;align-items:flex-end}
  .qp56-player{padding-left:13px}
  .qp56-player-name{font-size:clamp(36px,10.5vw,46px);letter-spacing:-1.5px}
  .qp56-player-kicker{font-size:9.5px;letter-spacing:1.75px}
  .qp56-player-detail{font-size:11px}
  .qp53-library-pill{margin-bottom:2px}
}
@media(max-width:375px){
  .qp53-masthead{min-height:244px;padding-inline:15px}
  .qp56-player-name{font-size:clamp(32px,10vw,38px)}
  .qp56-player-kicker{font-size:9px;letter-spacing:1.2px}
  .qp56-player-detail{font-size:10px}
  .qp53-library-pill{font-size:10px;padding:6px 8px}
}
@media(max-width:340px){
  .qp53-mast-bottom{flex-wrap:wrap;gap:6px}
  .qp53-library-pill{margin-left:auto}
  .qp56-player{flex-basis:100%}
}
@media(prefers-reduced-motion:reduce){.qp56-player{transition:none}}

/* QuestPick 5.9.1: Home banner belongs to the player, not duplicate app branding.
   Main top bar retains the QuestPick brand; player state & navigation unchanged. */
.qp53-masthead.qp57-player-welcome{
  min-height:226px;
  justify-content:center;
  padding:30px 31px;
}
.qp57-player-welcome::before{
  background-image:linear-gradient(98deg,rgba(11,7,22,.97) 0%,rgba(24,9,46,.84) 43%,rgba(12,9,34,.17) 100%),url('./assets/atmosphere/vista.webp');
  background-position:center,70% 55%;
}
.qp57-player-welcome .qp53-mast-bottom{
  width:100%;margin-top:0;gap:18px;align-items:flex-end;
}
.qp57-player-welcome .qp56-player-name{
  font-size:clamp(48px,5.5vw,72px);letter-spacing:-2.3px;margin-top:5px;
}
.qp57-player-welcome .qp56-player-kicker{font-size:12px;letter-spacing:2.3px}
.qp57-player-welcome .qp56-player-detail{font-size:14px;margin-top:9px}
.qp57-player-welcome .qp53-library-pill{margin-bottom:5px}
@media(max-width:740px){
  .qp53-masthead.qp57-player-welcome{min-height:215px;padding:28px 21px}
  .qp57-player-welcome .qp53-mast-bottom{margin-top:0;gap:11px}
  .qp57-player-welcome .qp56-player-name{font-size:clamp(42px,12.7vw,56px);letter-spacing:-1.8px}
  .qp57-player-welcome .qp56-player-kicker{font-size:10px;letter-spacing:1.8px}
  .qp57-player-welcome .qp56-player-detail{font-size:11.5px;line-height:1.4;margin-top:7px}
  .qp57-player-welcome .qp53-library-pill{margin-bottom:3px}
}
@media(max-width:375px){
  .qp53-masthead.qp57-player-welcome{min-height:207px;padding:24px 15px}
  .qp57-player-welcome .qp56-player-name{font-size:clamp(39px,12vw,46px)}
  .qp57-player-welcome .qp56-player-kicker{font-size:9px;letter-spacing:1.45px}
  .qp57-player-welcome .qp56-player-detail{font-size:10.5px}
}
@media(max-width:340px){
  .qp53-masthead.qp57-player-welcome{padding-inline:13px}
  .qp57-player-welcome .qp53-mast-bottom{flex-wrap:wrap;gap:12px}
  .qp57-player-welcome .qp56-player{flex-basis:100%}
  .qp57-player-welcome .qp53-library-pill{margin-left:auto}
}