/* ===== Phone frame ===== */
#frame-wrap{ position:relative; width:100%; max-width:420px; }
#frame-glow{ position:absolute; inset:-15% -18%; z-index:0; pointer-events:none; background:radial-gradient(ellipse 55% 50% at 50% 42%, rgb(var(--accent-rgb) / 0.55) 0%, rgb(var(--accent-rgb) / 0.22) 45%, transparent 72%); filter:blur(38px); }
#frame{
  width:100%; max-width:420px; background:var(--charcoal); border-radius:34px; border:1px solid var(--line);
  box-shadow:0 40px 100px -30px rgb(var(--shade-rgb) / calc(0.8 * var(--shade-k))), 0 0 0 8px rgba(255,255,255,0.02);
  overflow:hidden; position:relative; z-index:1; height:min(860px, calc(100vh - 110px)); min-height:600px;
}
#notch{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:120px; height:22px; background:var(--black); border-radius:0 0 16px 16px; z-index:90; }

/* App shell: one screen visible at a time, plus pushed artist pages */
#app{ position:absolute; inset:0; overflow:hidden; border-radius:inherit; view-transition-name:app; }
.screen{ position:absolute; inset:0; display:none; flex-direction:column; overflow:hidden; background:var(--black); }
.screen.active{ display:flex; }
.scr{ flex:1; overflow-y:auto; overflow-x:hidden; position:relative; scrollbar-width:none; overscroll-behavior:contain; padding-bottom:100px; }
.scr::-webkit-scrollbar{ display:none; }
.hscroll{ display:flex; overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain; }
.hscroll::-webkit-scrollbar{ display:none; }

/* Directional screen transitions (View Transitions API, progressive enhancement) */
::view-transition-old(root),::view-transition-new(root){ animation:none; }
::view-transition-group(app){ animation-duration:.34s; animation-timing-function:var(--ease-out); }
::view-transition-group(nav){ animation:none; }
@keyframes vt-out-left{ to{ transform:translateX(-36px); opacity:0; } }
@keyframes vt-in-right{ from{ transform:translateX(36px); opacity:0; } }
@keyframes vt-out-right{ to{ transform:translateX(36px); opacity:0; } }
@keyframes vt-in-left{ from{ transform:translateX(-36px); opacity:0; } }
html:active-view-transition-type(forward)::view-transition-old(app){ animation:.34s var(--ease-out) both vt-out-left; }
html:active-view-transition-type(forward)::view-transition-new(app){ animation:.34s var(--ease-out) both vt-in-right; }
html:active-view-transition-type(backward)::view-transition-old(app){ animation:.34s var(--ease-out) both vt-out-right; }
html:active-view-transition-type(backward)::view-transition-new(app){ animation:.34s var(--ease-out) both vt-in-left; }