/* Full-screen artwork component. All previous card/stacked layout rules were removed. */
.account-showcase { position:fixed; z-index:0; inset:0; isolation:isolate; overflow:hidden; width:100%; height:100dvh; background:#20242a; color:#fff6ed; pointer-events:auto; }
.showcase-art,.showcase-frame { position:absolute; inset:0; overflow:hidden; }
.showcase-art { height:100lvh; }
.showcase-frame { opacity:0; transition:opacity .65s ease; }
.showcase-frame.is-current { opacity:1; }
.showcase-background { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.85); }
.showcase-portrait { position:absolute; left:0; bottom:0; width:75%; height:102%; object-fit:contain; object-position:center bottom; }
.showcase-frame[data-mode="full"] .showcase-portrait { inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--scene-focus,50% 28%); }
.showcase-frame[data-mode="wide-portrait"] .showcase-portrait { left:-4%; width:85%; height:96%; object-fit:contain; }
.account-showcase::after { content:""; position:absolute; z-index:1; inset:0; pointer-events:none; background:linear-gradient(90deg,#080c1410 25%,#080c1433 65%,#080c1466),linear-gradient(180deg,#080c1477 0%,transparent 24%,transparent 48%,#080c14ad 83%,#080c14d9 100%); }
.showcase-label { position:absolute; z-index:2; top:calc(100px + env(safe-area-inset-top)); left:45px; margin:0; color:#f0ddd1b5; font-size:10px; font-weight:500; letter-spacing:.08em; }
.showcase-copy { position:absolute; z-index:2; left:5vw; right:450px; bottom:116px; pointer-events:none; }
.showcase-copy .showcase-title { margin:0 0 12px; color:#f0c8b6; font-size:13px; font-weight:600; }
.showcase-headline { margin:0; font-size:clamp(30px,3.2vw,48px); font-weight:650; line-height:1.3; letter-spacing:-.055em; text-wrap:balance; text-shadow:0 2px 24px #0006; }
.showcase-headline span { display:block; }
.showcase-description { max-width:360px; margin:15px 0 0; color:#f0e5dcc2; font-size:12px; line-height:1.85; word-break:keep-all; }
.showcase-controls { position:absolute; z-index:2; display:flex; align-items:center; gap:16px; left:5vw; right:5vw; bottom:calc(23px + env(safe-area-inset-bottom)); }
.showcase-dots { display:flex; align-items:center; gap:7px; }
.showcase-dots button { position:relative; overflow:hidden; display:block; width:28px; min-height:44px; padding:0; border:0; border-radius:0; background:transparent; }
.showcase-dots button::before,.showcase-dots button::after { content:""; position:absolute; top:21px; left:0; width:100%; height:2px; border-radius:3px; }
.showcase-dots button::before { background:#ffffff40; }
.showcase-dots button::after { background:#f0c8b6; transform:scaleX(0); transform-origin:left; }
.showcase-dots button.is-current::after { animation:showcase-progress 8s linear both; }
.account-showcase[data-paused="true"] .showcase-dots button.is-current::after { animation-play-state:paused; }
.showcase-count { color:#eadfd6bf; font-size:10px; font-variant-numeric:tabular-nums; letter-spacing:.09em; white-space:nowrap; }
.showcase-navigation { display:flex; gap:2px; margin-left:auto; }
.showcase-navigation button { min-width:44px; min-height:44px; padding:0 8px; border:0; background:transparent; color:#fff6ed; font-size:20px; }
.showcase-navigation button:hover { background:#ffffff10; }
.showcase-state { position:absolute; z-index:2; right:5vw; bottom:calc(76px + env(safe-area-inset-bottom)); color:#f4e8dd8c; font-size:9px; }
.showcase-feedback { position:absolute; z-index:3; top:calc(125px + env(safe-area-inset-top)); left:45px; right:45px; margin:0; color:#f2dfd5; font-size:11px; }
.showcase-feedback:empty { display:none; }
@keyframes showcase-progress { to { transform:scaleX(1); } }
@media(prefers-reduced-motion:no-preference) {
  .showcase-frame.is-current .showcase-background { animation:showcase-drift 16s linear both; }
  .account-showcase[data-paused="true"] .showcase-background { animation-play-state:paused; }
  @keyframes showcase-drift { from { transform:scale(1.025); } to { transform:scale(1.075) translateX(-1%); } }
}
@media(max-width:860px) {
  .showcase-portrait { left:-30%; width:160%; height:102%; }
  .showcase-frame[data-mode="wide-portrait"] .showcase-portrait { left:-33%; width:166%; height:101%; object-fit:cover; object-position:50% top; }
  .showcase-frame[data-mode="full"] .showcase-portrait { object-position:var(--scene-mobile-focus,50% 24%); }
  .account-showcase::after { background:linear-gradient(180deg,#080c144d 0%,transparent 20%,#080c141f 35%,#080c1480 64%,#080c14bf 100%); }
  .showcase-label { top:calc(84px + env(safe-area-inset-top)); left:25px; font-size:9px; }
  .showcase-copy { left:27px; right:25px; bottom:calc(var(--account-panel-height,385px) + 103px + env(safe-area-inset-bottom)); }
  .showcase-copy .showcase-title { margin:0; font-size:12px; text-shadow:0 2px 10px #0009; }
  .showcase-headline,.showcase-description { display:none; }
  .showcase-controls { left:24px; right:19px; bottom:calc(14px + env(safe-area-inset-bottom)); gap:10px; }
  .showcase-dots { gap:5px; }
  .showcase-dots button { width:20px; }
  .showcase-state { right:24px; bottom:calc(62px + env(safe-area-inset-bottom)); font-size:8px; }
  .showcase-feedback { top:calc(106px + env(safe-area-inset-top)); left:25px; right:25px; font-size:10px; }
}
@media(max-width:350px) { .showcase-count { display:none; } .showcase-dots button { width:18px; } .showcase-controls { gap:6px; } }
@media(prefers-reduced-motion:reduce) { .showcase-frame { transition:none; } .showcase-dots button.is-current::after { animation:none; transform:scaleX(1); } }