:root {
    --bg-deep: #0a0806;
    --accent-primary: #ffffff;
    /* Gold ramp: --accent-gold is the interactive/brand tone (9.6:1 on --bg-deep),
       --accent-gold-bright the highlight end, --accent-gold-deep the pressed/border end.
       Anything sitting ON gold uses --ink-on-accent (9.1:1), never white. */
    --accent-gold: #e0ab53;
    --accent-gold-bright: #f6d79a;
    --accent-gold-deep: #a8792c;
    --ink-on-accent: #17110a;
    --bloom-color: rgba(224, 171, 83, 0.4);
    --bezier-magnetic: cubic-bezier(0.19, 1, 0.22, 1);
    /* Strong UI easings: built-in CSS easings lack the punch that reads as intentional */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);      /* entering/exiting, presses */
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* on-screen movement */
    --gutter: 5%;
    --shelf-pad: 9%; /* side inset for poster rows + hero, so they line up */
}

* { margin: 0; padding: 0; box-sizing: border-box; scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }
html, body { height: 100%; }
body { background-color: var(--bg-deep); color: var(--accent-primary); font-family: 'Plus Jakarta Sans', sans-serif; overflow: hidden; }
button { font-family: inherit; }

/* Entry Animation */
@keyframes fadeInSlide {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeInSlide 0.8s var(--bezier-magnetic) forwards; }

/* Shimmer / skeletons */
@keyframes shimmer { 0% { background-position: -700px 0; } 100% { background-position: 700px 0; } }
.skeleton { background: #171310 linear-gradient(90deg, #171310 0px, #2a2318 80px, #171310 160px); background-size: 700px 100%; animation: shimmer 1.4s linear infinite; }
.skel-card { width: var(--card-w, 360px); aspect-ratio: 2/3; border-radius: 8px; flex-shrink: 0; }
.skel-line { height: 22px; width: 220px; border-radius: 6px; margin-bottom: 20px; }

/* ---------- Brand Splash (first-load intro) ---------- */
#brand-splash {
    position: fixed; inset: 0; z-index: 20000; background: var(--bg-deep);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    transition: opacity 0.7s ease, visibility 0.7s ease;
}
#brand-splash.hide { opacity: 0; visibility: hidden; }
#brand-splash .splash-glow {
    position: absolute; width: 90vw; height: 90vw; max-width: 720px; max-height: 720px;
    background: radial-gradient(circle, var(--bloom-color) 0%, transparent 62%);
    filter: blur(70px); opacity: 0; animation: splashGlow 2.6s var(--bezier-magnetic) forwards;
}
.splash-inner { position: relative; text-align: center; transition: transform 0.7s var(--bezier-magnetic), opacity 0.7s ease; }
#brand-splash.hide .splash-inner { transform: scale(1.08); }
.splash-brand {
    font-size: clamp(42px, 9vw, 92px); font-weight: 800; letter-spacing: 8px; line-height: 1;
    background: linear-gradient(110deg, #a8792c 0%, var(--accent-gold-bright) 28%, #fff3d4 50%, var(--accent-gold-bright) 72%, #a8792c 100%);
    background-size: 220% auto; -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    opacity: 0; transform: translateY(16px);
    animation: splashIn 1s var(--bezier-magnetic) forwards, splashShimmer 3.2s linear infinite;
}
.splash-tagline {
    margin-top: 16px; font-size: clamp(11px, 1.4vw, 13px); font-weight: 600; letter-spacing: 5px;
    text-transform: uppercase; color: rgba(255,255,255,0.5);
    opacity: 0; animation: splashFade 0.9s ease 0.35s forwards;
}
.splash-bar {
    width: 170px; max-width: 50vw; height: 3px; margin: 30px auto 0; border-radius: 3px;
    background: rgba(255,255,255,0.12); overflow: hidden; position: relative;
    opacity: 0; animation: splashFade 0.9s ease 0.5s forwards;
}
.splash-bar::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: -45%; width: 45%; border-radius: 3px;
    background: linear-gradient(90deg, transparent, var(--accent-gold) 40%, var(--accent-gold-bright) 60%, transparent);
    animation: loaderBar 1.4s cubic-bezier(0.65,0,0.35,1) infinite;
}
@keyframes splashIn { to { opacity: 1; transform: translateY(0); } }
@keyframes splashFade { to { opacity: 1; } }
@keyframes splashGlow { 0% { opacity: 0; transform: scale(0.8); } 100% { opacity: 0.85; transform: scale(1); } }
@keyframes splashShimmer { to { background-position: 220% center; } }
@media (prefers-reduced-motion: reduce) {
    .splash-brand { animation: splashIn 0.6s ease forwards; background-position: 0 center; }
    #brand-splash .splash-glow { animation: none; opacity: 0.7; }
}

/* Ambient Engine */
.ambient-engine { position: absolute; top: 0; left: 0; right: 0; height: 78vh; z-index: 0; pointer-events: none; }
/* Poster shows only at the top (behind hero buttons), then fades out, rest is black */
.backdrop-canvas {
    position: absolute; top: 0; left: 0; right: 0; height: 78vh;
    background-size: cover; background-position: center top; transition: background-image 0.8s ease; opacity: 1;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 32%, transparent 78%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 32%, transparent 78%);
}
/* Slight darken under nav/hero text for legibility; everything below stays black (body bg) */
.ambient-engine::after {
    content: ''; position: absolute; inset: 0;
    background:
        linear-gradient(to bottom, rgba(10,8,6,0.7) 0%, rgba(10,8,6,0.2) 18%, rgba(10,8,6,0) 40%),
        linear-gradient(to right, rgba(10,8,6,0.55) 0%, rgba(10,8,6,0) 55%);
}
.bloom-layer { display: none; }

/* Luxury Player */
.lux-player { position: fixed; inset: 0; background: #000; z-index: 6000; display: none; }
.lux-player.active { display: block; }
#playerFrameWrap { position: absolute; inset: 0; }
/* ---------- Cinematic Player Loader ---------- */
.player-loader {
    position: absolute; inset: 0; z-index: 5; overflow: hidden;
    display: flex; align-items: center; justify-content: center; background: #000;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.player-loader.show { opacity: 1; visibility: visible; }
/* Blurred backdrop of the title fills the frame behind the loader content */
.player-loader-bg {
    position: absolute; inset: -60px; background-size: cover; background-position: center;
    filter: blur(34px) saturate(1.25) brightness(0.55); transform: scale(1.08);
    opacity: 0; transition: opacity 1s ease;
}
.player-loader.show .player-loader-bg { opacity: 0.5; }
.player-loader::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(10,8,6,0.35) 0%, rgba(10,8,6,0.92) 100%);
}
.player-loader-content {
    position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: 0 24px; max-width: 460px;
    animation: fadeInSlide 0.6s var(--bezier-magnetic) both;
}
/* Floating poster artwork with glow halo + sheen sweep */
.player-loader-art {
    position: relative; width: 124px; aspect-ratio: 2/3; border-radius: 12px; margin-bottom: 30px;
    background: #171310;
    box-shadow: 0 24px 60px rgba(0,0,0,0.65), 0 0 55px -8px var(--bloom-color);
    animation: loaderFloat 4s ease-in-out infinite;
}
.player-loader-art::before {
    content: ''; position: absolute; inset: -28%; z-index: -1; border-radius: 50%;
    background: radial-gradient(circle, var(--bloom-color) 0%, transparent 68%);
    filter: blur(22px); animation: loaderGlow 3s ease-in-out infinite;
}
.player-loader-art img, .player-loader-art .ph {
    width: 100%; height: 100%; border-radius: 12px; display: block; object-fit: cover;
}
.player-loader-art .ph {
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.55);
}
.player-loader-art::after {
    content: ''; position: absolute; inset: 0; border-radius: 12px;
    background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.22) 50%, transparent 65%);
    background-size: 250% 100%; background-position: 150% 0;
    animation: loaderSheen 2.6s ease-in-out infinite;
}
@keyframes loaderFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes loaderGlow { 0%,100% { opacity: 0.45; transform: scale(0.9); } 50% { opacity: 0.85; transform: scale(1.06); } }
@keyframes loaderSheen { 0% { background-position: 150% 0; } 55%,100% { background-position: -150% 0; } }
.player-loader-eyebrow { color: var(--accent-gold); font-weight: 800; font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 10px; }
.player-loader-title { font-size: clamp(21px, 3.2vw, 30px); font-weight: 800; line-height: 1.15; margin-bottom: 26px; max-width: 18ch; }
/* Indeterminate progress bar */
.player-loader-bar { width: 230px; max-width: 64vw; height: 4px; border-radius: 4px; background: rgba(255,255,255,0.12); position: relative; overflow: hidden; }
.player-loader-bar::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: -45%; width: 42%; border-radius: 4px;
    background: linear-gradient(90deg, transparent, var(--accent-gold) 35%, var(--accent-gold-bright) 65%, transparent);
    animation: loaderBar 1.5s cubic-bezier(0.65,0,0.35,1) infinite;
}
@keyframes loaderBar { 0% { left: -45%; } 100% { left: 100%; } }
.player-loader-log { margin-top: 14px; width: 260px; max-width: 78vw; max-height: 132px; overflow-y: auto; text-align: left; font-size: 12px; scrollbar-width: none; }
.player-loader-log::-webkit-scrollbar { display: none; }
.ll-row { display: flex; align-items: center; gap: 9px; padding: 3px 0; color: rgba(255,255,255,0.55); }
.ll-name { font-weight: 700; color: rgba(255,255,255,0.85); }
.ll-detail { margin-left: auto; font-size: 11px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-mark { width: 12px; height: 12px; flex: none; border-radius: 50%; border: 2px solid rgba(255,255,255,0.25); border-top-color: var(--accent-gold-bright); animation: ll-spin 0.8s linear infinite; }
.ll-row.ok .ll-mark { animation: none; border: 0; background: #5fd38a; }
.ll-row.ok .ll-detail { color: #5fd38a; }
.ll-row.failed .ll-mark { animation: none; border: 0; background: #e0615f; }
.ll-row.failed .ll-detail { color: #e0615f; }
@keyframes ll-spin { to { transform: rotate(360deg); } }
.player-loader-status { margin-top: 16px; font-size: 13px; font-weight: 600; letter-spacing: 0.3px; color: rgba(255,255,255,0.6); min-height: 18px; transition: opacity 0.3s ease; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } }
@media (prefers-reduced-motion: reduce) {
    .player-loader-art, .player-loader-content { animation: none; }
    .player-loader-art::before, .player-loader-art::after { animation: none; opacity: 0.6; }
}

.player-top {
    position: absolute; top: 0; left: 0; right: 0;
    padding: 24px var(--gutter) 70px; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.5) 45%, transparent 100%);
    z-index: 10; pointer-events: none;  /* let clicks reach the video; re-enabled on controls */
    transition: opacity 0.45s ease, transform 0.45s ease;
}
.player-top button, .player-top .dropdown-container { pointer-events: auto; }
/* Auto-hide player chrome after mouse inactivity (toggled by wakePlayer + idle timer) */
#player-idle-catch { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.lux-player.idle .player-top { opacity: 0; transform: translateY(-14px); pointer-events: none; }
.lux-player.idle .player-top button, .lux-player.idle .player-top .dropdown-container { pointer-events: none; }
.lux-player.idle #player-idle-catch { pointer-events: auto; }
.lux-player.idle { cursor: none; }
.player-head { display: flex; gap: 16px; align-items: flex-start; min-width: 0; }
.player-headtext { min-width: 0; }
.player-back, .player-close, .player-fullscreen {
    width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%;
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); color: #fff;
    display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(8px);
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.18s var(--ease-out);
}
.player-close { font-size: 26px; line-height: 1; }
.player-back:hover { background: rgba(255,255,255,0.22); transform: translateX(-2px); }
.player-fullscreen:hover { background: rgba(255,255,255,0.22); transform: scale(1.05); }
.player-close:hover { background: rgba(229,9,20,0.9); border-color: transparent; transform: scale(1.05); }
.player-back:active, .player-fullscreen:active, .player-close:active { transform: scale(0.92); }
.player-eyebrow { color: var(--accent-gold); font-weight: 800; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 5px; }
.player-eyebrow.live { display: inline-flex; align-items: center; gap: 7px; color: #ff4747; }
.player-eyebrow.live::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #ff4747; box-shadow: 0 0 8px #ff4747; animation: livePulse 1.4s ease-in-out infinite; }
@keyframes livePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } }
.player-title { font-size: clamp(20px, 3vw, 30px); font-weight: 800; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70vw; }
.player-controls { display: flex; gap: 14px; align-items: flex-end; margin-top: 18px; flex-wrap: wrap; }
.control-cluster { display: flex; gap: 12px; }
.control { display: flex; flex-direction: column; gap: 6px; }
.control-label { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.5); padding-left: 4px; }

/* Custom Dropdown Styling */
.dropdown-container { position: relative; display: inline-block; }
.dropdown-trigger {
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: #fff;
    padding: 11px 40px 11px 16px; border-radius: 10px; cursor: pointer; position: relative;
    display: flex; align-items: center; min-width: 140px; font-weight: 600; backdrop-filter: blur(10px);
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.16s var(--ease-out);
}
.dropdown-trigger:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.28); }
.dropdown-trigger:active { transform: scale(0.97); }
.dropdown-trigger::after {
    content: ''; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px;
    border-right: 2px solid rgba(255,255,255,0.65); border-bottom: 2px solid rgba(255,255,255,0.65);
    transform: translateY(-65%) rotate(45deg); transition: transform 0.25s;
}
.dropdown-trigger:has(+ .dropdown-menu.active)::after { transform: translateY(-35%) rotate(225deg); }
.dropdown-menu {
    position: absolute; top: calc(100% + 8px); left: 0; background: #0b131c; border: 1px solid #1d2b38;
    border-radius: 10px; display: none; min-width: 180px; max-width: 340px; max-height: 320px; overflow-y: auto; z-index: 1000;
    box-shadow: 0 24px 50px rgba(0,0,0,0.7); padding: 6px;
}
.dropdown-menu.active { display: block; transform-origin: top center; animation: ddIn 0.18s var(--ease-out); }
@keyframes ddIn { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.dropdown-item { padding: 10px 14px; cursor: pointer; transition: background 0.2s ease; font-size: 14px; border-radius: 7px; }
.dropdown-item:hover { background: rgba(255,255,255,0.1); }
.dropdown-item:active { background: rgba(255,255,255,0.16); }

/* Layout & UI */
.viewport { position: relative; z-index: 10; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow-y: auto; overflow-x: clip; -webkit-overflow-scrolling: touch; }
/* Glass navbar (liquid-glass SVG filter) */
.nav-wrap { position: sticky; top: 0; z-index: 200; display: flex; justify-content: center; padding: 16px var(--gutter) 0; pointer-events: none; }
.glass-nav {
    position: relative; pointer-events: auto; border-radius: 999px; isolation: isolate;
    /* outer shadow: blur 24 */
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
/* glass tint (white 3%) + inner shadow (white, blur 20, spread -15), above the refracted backdrop */
.glass-nav::before {
    content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
    background: rgba(255, 255, 255, 0.03);
}
/* the liquid-glass refraction (Chrome/Chromium); other browsers just see ::before */
.glass-nav::after {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    -webkit-backdrop-filter: blur(2px) var(--lg-filter); backdrop-filter: blur(2px) var(--lg-filter);
}
.glass-nav__inner { position: relative; z-index: 2; display: flex; align-items: center; gap: 4px; padding: 7px 12px; }
.nav-brand { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 14px; border-radius: 999px; text-decoration: none; transition: background 0.2s ease, transform 0.16s var(--ease-out); }
.nav-brand:hover { background: rgba(255,255,255,0.1); }
.nav-brand:active { transform: scale(0.9); }
.nav-brand-text { font-weight: 800; font-size: 15px; letter-spacing: 1.5px; color: var(--accent-gold-bright); white-space: nowrap; }
.nav-brand img { width: 24px; height: 24px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
.nav-links { display: flex; align-items: center; gap: 2px; margin: 0 4px; }
.nav-link { color: rgba(255,255,255,0.72); font-weight: 600; font-size: 15px; padding: 8px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; text-decoration: none; transition: color 0.2s ease, background 0.2s ease, transform 0.16s var(--ease-out); }
.nav-link:hover { color: #fff; background: rgba(255,255,255,0.08); }
.nav-link:active { transform: scale(0.95); }
.nav-link.active { color: #fff; font-weight: 800; }
/* FOX nav removed */
.nav-link-pop { position: relative; }
.nav-sep { width: 1px; align-self: stretch; margin: 8px 8px; background: rgba(255,255,255,0.14); }
.nav-icons { display: flex; align-items: center; gap: 1px; }
.nav-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: none; border: none; color: rgba(255,255,255,0.82); cursor: pointer; text-decoration: none; transition: color 0.2s ease, background 0.2s ease, transform 0.16s var(--ease-out); }
.nav-icon:hover { color: #fff; background: rgba(255,255,255,0.1); }
.nav-icon:active { transform: scale(0.9); }
.nav-icon svg { width: 19px; height: 19px; }
.glass-nav .profile-bundle { position: relative; }
@media (max-width: 820px) { .nav-links, .nav-sep { display: none; } }
.brand { font-weight: 800; font-size: 22px; letter-spacing: 1px; color: var(--accent-gold-bright); white-space: nowrap; }

/* Hero */
.hero-container { padding: max(96px, 8vh) var(--shelf-pad) 0; margin-bottom: 40px; }
.hero-title {
    font-size: clamp(38px, 8vw, 80px); font-weight: 800; line-height: 1.05;
    background: linear-gradient(to bottom, #ffffff 0%, #aaaaaa 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    transition: opacity 0.3s ease;
}
.hero-title { min-height: 120px; display: flex; align-items: flex-end; margin-bottom: 8px; }
.hero-title.has-logo { background: none; -webkit-text-fill-color: initial; }
.hero-logo-img { display: block; max-width: min(380px, 52vw); max-height: 120px; width: auto; height: auto; object-fit: contain; object-position: left bottom; filter: drop-shadow(0 4px 18px rgba(0,0,0,0.6)); }
.hero-meta { display: flex; gap: 20px; flex-wrap: wrap; font-size: 16px; color: rgba(255,255,255,0.7); margin: 15px 0; }
.hero-meta span { display: inline-flex; align-items: center; }
.hero-meta .rating, .detail-meta .rating { display: inline-flex; align-items: center; gap: 5px; }
.hero-meta .rating svg, .detail-meta .rating svg { color: #ffc83d; }
.hero-desc { font-size: clamp(15px, 1.6vw, 18px); color: rgba(255,255,255,0.75); max-width: 600px; line-height: 1.6; height: 4.8em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.hero-actions { display: flex; gap: 15px; margin-top: 30px; flex-wrap: wrap; }
.player-action-btn {
    background: var(--accent-gold); color: var(--ink-on-accent); border: none;
    padding: 14px 32px; border-radius: 50px; cursor: pointer;
    font-weight: 800; font-size: 16px; white-space: nowrap;
    transition: transform 0.18s var(--ease-out), background 0.2s ease;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
}
.player-action-btn svg { flex-shrink: 0; }
.player-action-btn.secondary { background: rgba(255,255,255,0.14); color: white; backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.22); }
@media (hover: hover) and (pointer: fine) {
    .player-action-btn:hover { transform: scale(1.05); background: var(--accent-gold-bright); }
    .player-action-btn.secondary:hover { background: rgba(255,255,255,0.2); }
}
.player-action-btn:active { transform: scale(0.96); background: var(--accent-gold-deep); }
.player-action-btn.secondary:active { background: rgba(255,255,255,0.14); }

/* Cards & Profile */
.lux-card {
    width: var(--card-w, 360px); aspect-ratio: 2/3; background: #171310; flex-shrink: 0; cursor: pointer;
    border-radius: 14px; overflow: hidden; position: relative; transition: transform 0.4s var(--bezier-magnetic), box-shadow 0.4s ease;
}
@media (hover: hover) and (pointer: fine) {
    .lux-card:hover { transform: scale(1.06); z-index: 100; box-shadow: 0 14px 32px rgba(0,0,0,0.7); }
    .lux-card:hover img { transform: scale(1.05); }
}
.lux-card:active { transform: scale(1.02); }
.lux-card:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 3px; }
/* hover scrim: black at the bottom fading to transparent toward the top */
.lux-card::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.45) 30%, rgba(0,0,0,0) 60%);
    opacity: 0; transition: opacity 0.35s ease;
}
.lux-card:hover::after, .lux-card:focus-visible::after { opacity: 1; }
.card-name-tag {
    position: absolute; bottom: 12px; left: 14px; right: 14px; z-index: 2;
    color: white; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; text-shadow: 0 2px 8px rgba(0,0,0,0.9);
    display: flex; flex-direction: column; gap: 3px;
}
.card-name-tag .card-name { font-size: 16px; font-weight: 800; line-height: 1.2; }
.card-name-tag .card-meta { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.8); }
.lux-card:hover .card-name-tag { opacity: 1; }
.lux-card img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.4s var(--bezier-magnetic); }
.card-ph { display: flex; align-items: center; justify-content: center; height: 100%; padding: 10px; text-align: center; color: rgba(255,255,255,0.45); font-weight: 800; line-height: 1.3; }
.card-info-btn, .card-remove-btn, .card-add-btn {
    position: absolute; top: 10px; width: 30px; height: 30px; border-radius: 50%;
    background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.25); color: white; cursor: pointer;
    display: flex; align-items: center; justify-content: center; opacity: 0; font-weight: 800;
    transition: opacity 0.25s ease, background 0.25s ease, transform 0.16s var(--ease-out);
    backdrop-filter: blur(4px); z-index: 3; font-size: 16px; line-height: 1;
}
.card-info-btn { right: 10px; font-style: italic; font-family: Georgia, serif; }
.card-add-btn { right: 46px; }
.card-remove-btn { left: 10px; font-size: 20px; line-height: 0; }
.card-add-btn .ic-check { display: none; }
.card-add-btn.added { background: var(--accent-gold); border-color: var(--accent-gold); color: var(--ink-on-accent); }
.card-add-btn.added .ic-plus { display: none; }
.card-add-btn.added .ic-check { display: block; }
.lux-card:hover .card-info-btn, .lux-card:hover .card-remove-btn, .lux-card:hover .card-add-btn,
.card-info-btn:focus-visible, .card-remove-btn:focus-visible, .card-add-btn:focus-visible { opacity: 1; }
.card-add-btn.added { opacity: 1; }
.card-info-btn:hover, .card-remove-btn:hover, .card-add-btn:hover { background: var(--accent-gold); border-color: var(--accent-gold); color: var(--ink-on-accent); }
.card-info-btn:active, .card-remove-btn:active, .card-add-btn:active { transform: scale(0.88); }
.card-progress { position: absolute; bottom: 0; left: 0; height: 4px; background: var(--accent-gold); z-index: 2; }

.profile-bundle { display: flex; align-items: center; gap: 8px; cursor: pointer; color: white; position: relative; }
.list-dropdown {
    position: absolute; top: 50px; width: 300px; max-height: 60vh; overflow-y: auto;
    background: rgba(10, 8, 6, 0.95); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1);
    padding: 10px; border-radius: 12px; display: none; flex-direction: column; z-index: 10000;
}
.list-dropdown.active { display: flex; }
.icon-btn { color: white; background: none; border: none; cursor: pointer; padding: 6px; border-radius: 8px; transition: background 0.2s ease, transform 0.16s var(--ease-out); display: flex; }
.icon-btn:hover { background: rgba(255,255,255,0.1); }
.icon-btn:active { transform: scale(0.9); }
.empty-state { color: rgba(255,255,255,0.45); font-size: 14px; padding: 20px 6px; text-align: center; }

/* Shelf */
/* Wider side padding than the global gutter: shrinks cards back toward their
   previous size and gives the row symmetric margins (centered look) while the
   carousel still scrolls from the left edge. */
.shelf-container { margin-bottom: 30px; }
.shelf-title { margin-bottom: 16px; opacity: 0.75; font-size: 20px; font-weight: 800; }
/* Inset on the direct child of the shelf so it lines up with the first poster.
   margin-% resolves against the full-width section (not the inline-flex head). */
.shelf-container > .shelf-title, .shelf-container > .shelf-head { margin-left: var(--shelf-pad); }
/* Cards are sized so a whole number (--cols) fills the row exactly at any width:
   no card is ever sliced at the right edge. Extra titles scroll into view. */
/* Rows run edge-to-edge with gutter-width side padding, so a hover-scaled
   first/last card expands into that padding instead of being clipped. */
.shelf-row { --cols: 7; --card-w: calc((100% - (var(--cols) - 1) * 18px) / var(--cols)); display: flex; flex-direction: row; gap: 18px; padding: 32px 0; margin: 0 var(--shelf-pad); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 0; }
.shelf-row .lux-card, .shelf-row .skel-card { scroll-snap-align: start; }
/* grab-to-scroll: mouse drag pans the row horizontally */
.shelf-row, .cast-row { cursor: grab; }
.shelf-row.drag-scrolling, .cast-row.drag-scrolling { scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.shelf-row.kinetic, .cast-row.kinetic { scroll-snap-type: none; scroll-behavior: auto; }   /* momentum glide after release */
.shelf-row.drag-scrolling, .shelf-row.drag-scrolling *, .cast-row.drag-scrolling, .cast-row.drag-scrolling * { cursor: grabbing !important; }
.shelf-row img, .cast-row img { -webkit-user-drag: none; user-select: none; }
@media (max-width: 1500px) { .shelf-row { --cols: 6; } }
@media (max-width: 1100px) { .shelf-row { --cols: 4; } }
@media (max-width: 760px)  { .shelf-row { --cols: 3.2; } }
@media (max-width: 480px)  { .shelf-row { --cols: 2.2; } }

/* Search Page (/search): solid background, no ambient glow, no sidebar */
#search-modal {
    position: fixed; inset: 0; z-index: 150; background: var(--bg-deep);
    display: none; flex-direction: column; overflow-y: auto;
    padding: 150px var(--shelf-pad) 60px;
}
#search-modal.active { display: flex; }
.search-page { width: 100%; max-width: 1180px; margin: 0 auto; }
.search-heading { text-align: center; font-size: clamp(26px, 4vw, 40px); font-weight: 800; letter-spacing: -0.5px; }
.search-toggle { display: flex; justify-content: center; gap: 10px; margin: 26px 0 22px; }
.search-tab {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.6);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 999px;
    padding: 10px 18px; font-size: 14px; font-weight: 700;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.16s var(--ease-out);
}
.search-tab:hover { color: #fff; background: rgba(255,255,255,0.08); }
.search-tab:active { transform: scale(0.96); }
.search-tab.active { color: #fff; background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.22); }
.search-bar {
    display: flex; align-items: center; gap: 12px; max-width: 600px; margin: 0 auto;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px; padding: 0 18px; transition: border-color 0.2s, background 0.2s;
}
.search-bar:focus-within { border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.06); }
.search-bar-icon { color: rgba(255,255,255,0.45); flex-shrink: 0; }
.search-input { width: 100%; background: transparent; border: none; color: white; font-size: 16px; font-weight: 500; padding: 16px 0; outline: none; font-family: inherit; }
.search-input::placeholder { color: rgba(255,255,255,0.4); }
.search-filters { display: flex; align-items: center; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
.search-count { font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.55); white-space: nowrap; }
.filter-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.filter-sort { margin-left: auto; }
.filter-chip {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.65);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 999px;
    padding: 9px 16px; font-size: 14px; font-weight: 700; white-space: nowrap;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.16s var(--ease-out);
}
.filter-chip:hover { color: #fff; background: rgba(255,255,255,0.08); }
.filter-chip:active { transform: scale(0.96); }
.filter-chip.active { color: #fff; background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.24); }
.filter-sort { position: relative; }
.sort-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 50; min-width: 180px;
    background: #161616; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px;
    padding: 6px; display: none; box-shadow: 0 16px 40px rgba(0,0,0,0.6);
}
.sort-menu.active { display: block; transform-origin: top right; animation: ddIn 0.18s var(--ease-out); }
.sort-item { padding: 11px 14px; border-radius: 8px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.75); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.sort-item:hover { background: rgba(255,255,255,0.07); color: #fff; }
.sort-item:active { background: rgba(255,255,255,0.12); }
.sort-item.active { background: rgba(255,255,255,0.12); color: #fff; }
.search-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 22px; margin-top: 28px; padding-bottom: 40px; align-items: start; }

/* ---------- pages / router ---------- */
.page { display: none; }
.page.active { display: block; }

/* Discover page */
#page-discover { padding: 130px var(--shelf-pad) 60px; min-height: 100vh; }
.discover-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.discover-title { font-size: clamp(30px, 4vw, 44px); font-weight: 800; letter-spacing: -0.5px; }
.discover-head-actions { display: flex; align-items: center; gap: 10px; }
.disc-surprise { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.16); border-radius: 10px; padding: 9px 16px; font-size: 14px; font-weight: 700; transition: background 0.2s ease, transform 0.16s var(--ease-out); }
.disc-surprise:hover { background: rgba(255,255,255,0.18); }
.disc-surprise:active { transform: scale(0.96); }
.disc-surprise:active svg { transform: rotate(-25deg); }
.disc-surprise svg { transition: transform 0.3s var(--ease-out); }
.discover-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.disc-select {
    appearance: none; -webkit-appearance: none; cursor: pointer;
    background: rgba(255,255,255,0.05) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 13px center;
    color: #fff; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px;
    padding: 10px 34px 10px 14px; font-size: 14px; font-weight: 600; font-family: inherit; transition: border-color 0.2s;
}
.disc-select:hover { border-color: rgba(255,255,255,0.28); }
.disc-select option { background: #161616; color: #fff; }
.disc-more-wrap { display: flex; justify-content: center; margin-top: 10px; }
.disc-more { cursor: pointer; background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; padding: 12px 28px; font-size: 14px; font-weight: 700; transition: background 0.2s ease, transform 0.16s var(--ease-out); }
.disc-more:hover { background: rgba(255,255,255,0.16); }
.disc-more:active { transform: scale(0.97); }

/* List page */
#page-list { padding: 130px var(--shelf-pad) 60px; min-height: 100vh; }
.list-page-title { font-size: clamp(30px, 4vw, 44px); font-weight: 800; margin-bottom: 26px; }
.list-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 60vh; color: rgba(255,255,255,0.85); }
.list-empty svg { color: rgba(255,255,255,0.92); margin-bottom: 22px; }
.list-empty h2 { font-size: 26px; font-weight: 800; margin-bottom: 10px; }
.list-empty p { font-size: 15px; color: rgba(255,255,255,0.5); }

/* Shelf header "All Results →" */
.shelf-head { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; background: none; border: none; color: inherit; padding: 0; white-space: nowrap; font-family: inherit; text-align: left; }
.shelf-head .shelf-title { white-space: nowrap; }
.shelf-seeall { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.45); opacity: 0; transform: translateX(-4px); transition: opacity 0.2s, transform 0.2s, color 0.2s; }
.shelf-seeall svg { transition: transform 0.2s; }
.shelf-head:hover .shelf-seeall { opacity: 1; transform: translateX(0); color: rgba(255,255,255,0.85); }
.shelf-head:hover .shelf-seeall svg { transform: translateX(3px); }
.shelf-head:hover .shelf-title { color: #fff; }
.search-grid .lux-card, .search-grid .person-card { width: 100%; aspect-ratio: 2/3; min-height: 0; min-width: 0; }
.site-footer { text-align: center; color: rgba(255,255,255,0.4); font-size: 13px; line-height: 1.6; padding: 40px var(--gutter) 48px; margin-top: 30px; border-top: 1px solid rgba(255,255,255,0.07); }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 26px; margin-bottom: 16px; }
.footer-links a { color: rgba(255,255,255,0.6); text-decoration: none; font-size: 14px; font-weight: 600; transition: color 0.2s ease; }
.footer-links a:hover { color: #fff; }
.footer-copy { color: rgba(255,255,255,0.4); }

#back-to-top {
    position: fixed; right: 26px; bottom: 26px; z-index: 9000;
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(18,28,40,0.7); border: 1px solid rgba(255,255,255,0.16); color: #fff;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: translateY(12px); pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
}
#back-to-top.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
#back-to-top:hover { background: rgba(42,35,24,0.92); }
#back-to-top:active { transform: scale(0.94); }
.modal-close { background: none; border: none; color: white; cursor: pointer; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 5px; border-radius: 50%; transition: background 0.2s ease, transform 0.16s var(--ease-out); }
.modal-close:hover { background: rgba(255,255,255,0.12); }
.modal-close:active { transform: scale(0.9); }

/* Detail Modal */
.detail-modal { position: fixed; inset: 0; z-index: 9000; display: none; }
.detail-modal.active { display: block; }
.detail-backdrop { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.35; }
.detail-scrim { position: absolute; inset: 0; background: linear-gradient(to top, var(--bg-deep) 10%, rgba(10,8,6,0.85) 60%, rgba(10,8,6,0.6)); backdrop-filter: blur(10px); }
.detail-inner { position: relative; height: 100%; overflow-y: auto; padding: 80px var(--gutter) 60px; }
.detail-body { max-width: 820px; }
.detail-title { font-size: clamp(30px, 6vw, 56px); font-weight: 800; line-height: 1.05; margin-bottom: 14px; }
.detail-meta { display: flex; gap: 14px; flex-wrap: wrap; color: rgba(255,255,255,0.7); font-size: 15px; margin-bottom: 18px; align-items: center; }
.detail-pill { border: 1px solid rgba(255,255,255,0.2); padding: 3px 12px; border-radius: 50px; font-size: 13px; }
.detail-overview { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,0.85); margin-bottom: 18px; max-width: 680px; }
.detail-fact { font-size: 15px; color: rgba(255,255,255,0.65); margin-bottom: 10px; }
.detail-fact b { color: white; font-weight: 600; }
.detail-actions { display: flex; gap: 14px; margin: 26px 0; flex-wrap: wrap; }
.detail-loading { color: rgba(255,255,255,0.6); font-size: 18px; padding: 80px 40px; text-align: center; }

/* ---------- Info drawer (poster click) ---------- */
.detail-drawer { position: fixed; inset: 0; z-index: 9000; visibility: hidden; transition: visibility 0s linear 0.5s; }
.detail-drawer.active { visibility: visible; transition: visibility 0s; }
.detail-drawer-scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity 0.4s var(--ease-out); }
.detail-drawer.active .detail-drawer-scrim { opacity: 1; }
.detail-drawer-panel {
    position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 100%);
    width: min(1150px, 100%); height: 94vh;
    background: #0c0a08; border: 1px solid rgba(255,255,255,0.08); border-bottom: none;
    border-radius: 22px 22px 0 0; overflow: hidden;
    box-shadow: 0 -30px 90px rgba(0,0,0,0.7);
    transition: transform 0.55s var(--bezier-magnetic); will-change: transform;
}
.detail-drawer.active .detail-drawer-panel { transform: translate(-50%, 0); }
.detail-drawer.dragging .detail-drawer-panel { transition: none; }
.detail-drawer .sheet-handle { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 6; margin: 0; }
.detail-drawer-close { position: absolute; top: 16px; right: 18px; z-index: 6; width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: none; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease, transform 0.16s var(--ease-out); }
.detail-drawer-close:hover { background: rgba(0,0,0,0.75); }
.detail-drawer-close:active { transform: scale(0.9); }
.detail-drawer-scroll { height: 100%; overflow-y: auto; }

.dd-hero { position: relative; width: 100%; aspect-ratio: 16/9; max-height: 64vh; min-height: 320px; background-size: cover; background-position: center 18%; background-color: #181410; }
.dd-hero-fade { position: absolute; inset: 0; background: linear-gradient(to top, #0c0a08 1%, rgba(10,10,12,0.45) 36%, rgba(10,10,12,0.08) 62%, rgba(10,10,12,0.35) 100%); }
.dd-hero-inner { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 clamp(20px, 4%, 48px) 26px; }
.dd-title { font-size: clamp(38px, 7vw, 86px); font-weight: 800; line-height: 0.95; letter-spacing: -1.5px; margin-bottom: 20px; text-shadow: 0 4px 30px rgba(0,0,0,0.55); }
.dd-logo { display: block; max-width: min(72%, 460px); max-height: clamp(70px, 13vw, 150px); width: auto; height: auto; object-fit: contain; object-position: left bottom; margin-bottom: 22px; filter: drop-shadow(0 4px 22px rgba(0,0,0,0.6)); }
.dd-meta { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-bottom: 20px; }
.dd-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 7px 13px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: #fff; white-space: nowrap; }
.dd-chip svg { width: 14px; height: 14px; opacity: 0.85; }
.dd-chip.star svg { color: #f5c518; opacity: 1; }
.dd-actions { display: flex; flex-wrap: wrap; gap: 11px; align-items: center; }
.dd-btn { display: inline-flex; align-items: center; gap: 9px; border: none; cursor: pointer; font-family: inherit; font-weight: 800; font-size: 15px; padding: 13px 22px; border-radius: 999px; background: rgba(255,255,255,0.14); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform 0.16s var(--ease-out), background 0.2s ease; }
.dd-btn svg { width: 18px; height: 18px; }
.dd-btn:hover { background: rgba(255,255,255,0.24); }
.dd-btn:active { transform: scale(0.96); }
.dd-btn.primary { background: #fff; color: #111; }
.dd-btn.primary:hover { background: #fff; }
.dd-btn.icon { padding: 13px; width: 48px; justify-content: center; }
.dd-dl-cluster { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 4px; }

.dd-content { padding: 24px clamp(20px, 4%, 48px) 64px; }
.dd-overview { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.8); max-width: 800px; }
.dd-section-title { font-size: 22px; font-weight: 800; margin: 30px 0 16px; }
.dd-row { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.dd-row .lux-card { width: var(--card-w, 170px); }
.dd-collection { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 8px; }
.dd-coll-item { width: 112px; flex-shrink: 0; cursor: pointer; }
.dd-coll-poster { width: 112px; aspect-ratio: 2/3; border-radius: 12px; overflow: hidden; background: #181410; border: 2px solid transparent; position: relative; transition: border-color 0.2s ease, transform 0.25s var(--ease-out); }
.dd-coll-item:hover .dd-coll-poster { transform: scale(1.04); }
.dd-coll-item.current .dd-coll-poster { border-color: #fff; }
.dd-coll-poster img { width: 100%; height: 100%; object-fit: cover; }
.dd-coll-badge { position: absolute; bottom: 0; left: 0; right: 0; background: #e50914; color: #fff; font-size: 10px; font-weight: 800; text-align: center; padding: 3px; letter-spacing: 0.6px; }
.dd-coll-name { font-size: 13px; font-weight: 700; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-coll-item:not(.current) .dd-coll-name { color: rgba(255,255,255,0.6); }
.dd-coll-year { font-size: 12px; color: rgba(255,255,255,0.45); }
@media (max-width: 600px) { .detail-drawer-panel { width: 100%; height: 96vh; } }

/* Admin Modal */
#admin-modal {
    position: fixed; inset: 0; z-index: 9500; background: rgba(10, 8, 6, 0.98);
    backdrop-filter: blur(50px); display: none; flex-direction: column; padding: 80px var(--gutter);
    overflow-y: auto;
}
#admin-modal.active { display: flex; }
.admin-title { font-size: 32px; font-weight: 800; margin-bottom: 30px; color: var(--accent-gold); letter-spacing: 1px; }
.admin-section { margin-bottom: 40px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 24px; }
.admin-prof-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 12px; }
.admin-prof-avatar { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 800; }
.admin-prof-name { font-size: 20px; font-weight: 800; }
.admin-watch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.admin-watch-item { background: rgba(0,0,0,0.3); border-radius: 8px; overflow: hidden; position: relative; aspect-ratio: 16/9; }
.admin-watch-item img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }
.admin-watch-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 8px; background: linear-gradient(transparent, rgba(0,0,0,0.9)); font-size: 12px; }
.admin-watch-title { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-watch-meta { color: rgba(255,255,255,0.6); font-size: 10px; text-transform: uppercase; }

/* Debug / data-reset panel (inside admin) */
.debug-section { border-color: rgba(229,9,20,0.3); }
.debug-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.debug-actions .player-action-btn { font-size: 14px; padding: 11px 22px; }
.player-action-btn.danger { background: rgba(229,9,20,0.92); color: #fff; }
.player-action-btn.danger:hover { background: #e50914; }
.debug-status { margin-top: 14px; font-size: 13px; font-weight: 700; color: #4ade80; min-height: 18px; opacity: 0; transition: opacity 0.3s ease; }

@media (max-width: 768px) {
    :root { --gutter: 20px; }
    .top-utility-bar { padding-top: 14px; }
    .hero-container { padding-top: 6vh; }
    .player-top { padding-bottom: 56px; }
    .player-title { max-width: 56vw; }
    .player-controls { gap: 10px; }
}
@media (max-width: 480px) {
    .brand { font-size: 18px; }
    .hero-meta { font-size: 14px; gap: 14px; }
    .player-action-btn { padding: 12px 26px; font-size: 15px; }
}
@media (hover: none) {
    .card-info-btn, .card-remove-btn, .card-name-tag { opacity: 1; }
    .lux-card::after { opacity: 1; }
}
/* ---------- Modal / page open animations ---------- */
@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalZoomIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
@keyframes modalRise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes playerIn { from { opacity: 0; transform: scale(1.035); } to { opacity: 1; transform: scale(1); } }
.lux-player.active { animation: playerIn 0.45s var(--bezier-magnetic); }
#search-modal.active { animation: modalFadeIn 0.35s ease; }
#search-modal.active .search-page { animation: modalRise 0.5s var(--bezier-magnetic); }
.detail-modal.active { animation: modalFadeIn 0.3s ease; }
.detail-modal.active .detail-inner { animation: modalRise 0.45s var(--bezier-magnetic); }
#admin-modal.active { animation: modalZoomIn 0.4s var(--bezier-magnetic); }
.auth-box { animation: modalZoomIn 0.4s var(--bezier-magnetic); }
@media (prefers-reduced-motion: reduce) {
    .lux-player.active, #search-modal.active, #search-modal.active .search-input,
    .detail-modal.active, .detail-modal.active .detail-inner, #admin-modal.active, .auth-box { animation: none; }
}

/* ---------- Cast row (clickable actors inside detail) ---------- */
.detail-section-title { font-size: 18px; font-weight: 800; margin: 8px 0 14px; }
.cast-row { display: flex; gap: 16px; overflow-x: auto; padding: 4px 0 16px; margin-bottom: 8px; }
.cast-chip { flex-shrink: 0; width: 92px; background: none; border: none; cursor: pointer; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 0; text-align: center; }
.cast-chip img, .cast-chip .cast-ph { width: 74px; height: 74px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.15); transition: transform 0.25s var(--ease-out), border-color 0.25s ease; background: #171310; }
.cast-chip .cast-ph { display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 26px; color: rgba(255,255,255,0.4); }
.cast-chip:hover img, .cast-chip:hover .cast-ph, .cast-chip:focus-visible img, .cast-chip:focus-visible .cast-ph { border-color: var(--accent-gold); transform: scale(1.07); }
.cast-chip:active img, .cast-chip:active .cast-ph { transform: scale(0.97); }
.cast-name { font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.cast-char { font-size: 11px; color: rgba(255,255,255,0.5); line-height: 1.2; }

/* ---------- Person (actor) profile modal ---------- */
.person-head { display: flex; gap: 30px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 34px; }
.person-photo { width: 160px; height: 240px; border-radius: 16px; object-fit: cover; flex-shrink: 0; background: #171310; box-shadow: 0 22px 55px rgba(0,0,0,0.55); }
.person-photo.ph { display: flex; align-items: center; justify-content: center; font-size: 56px; font-weight: 800; color: rgba(255,255,255,0.25); }
.person-headtext { flex: 1; min-width: 280px; }
.person-bio { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.82); max-width: 680px; }
.person-bio.clamped { display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.bio-toggle { background: none; border: none; color: var(--accent-gold); font-weight: 700; cursor: pointer; padding: 8px 0 0; font-size: 14px; font-family: inherit; }
.person-credits { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.person-credits .lux-card { width: 100%; }

/* ---------- Person card (search results) ---------- */
.person-card { width: 100%; aspect-ratio: 2/3; cursor: pointer; border-radius: 12px; overflow: hidden; background: #171310; position: relative; transition: transform 0.4s var(--bezier-magnetic), box-shadow 0.4s ease; }
@media (hover: hover) and (pointer: fine) {
    .person-card:hover { transform: scale(1.04); box-shadow: 0 14px 32px rgba(0,0,0,0.6); z-index: 2; }
}
.person-card:active { transform: scale(1.02); }
.person-card:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 3px; }
.person-card img { width: 100%; height: 100%; object-fit: cover; }
.person-card .person-card-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 56px; font-weight: 800; color: rgba(255,255,255,0.25); }
.person-card-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 12px 12px; background: linear-gradient(transparent, rgba(0,0,0,0.92)); pointer-events: none; }
.person-card-name { font-weight: 800; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-card-known { font-size: 10.5px; color: var(--accent-gold); font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================
   Bottom-sheet drawer (Account + Settings)
   ============================================================ */
.nav-account .nav-avatar { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font-weight: 800; font-size: 11.5px; line-height: 1; color: #fff; letter-spacing: 0.3px; }
.nav-account .nav-avatar svg { width: 19px; height: 19px; }

.sheet { position: fixed; inset: 0; z-index: 9500; visibility: hidden; transition: visibility 0s linear 0.5s; }
.sheet.open { visibility: visible; transition: visibility 0s; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity 0.4s var(--ease-out); }
.sheet.open .sheet-scrim { opacity: 1; }
.sheet-panel {
    position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 100%);
    width: min(680px, 100%); max-height: 92vh;
    background: #1a1611; border: 1px solid rgba(255,255,255,0.07); border-bottom: none;
    border-radius: 26px 26px 0 0; box-shadow: 0 -28px 80px rgba(0,0,0,0.6);
    display: flex; flex-direction: column; overflow: hidden;
    transition: transform 0.5s var(--bezier-magnetic); will-change: transform;
    padding-bottom: env(safe-area-inset-bottom);
}
.sheet.open .sheet-panel { transform: translate(-50%, 0); }
.sheet.dragging .sheet-panel { transition: none; }
.sheet-handle { width: 44px; height: 5px; border-radius: 999px; background: rgba(255,255,255,0.28); margin: 13px auto 4px; flex-shrink: 0; cursor: grab; touch-action: none; }
.sheet-handle:active { cursor: grabbing; }
.sheet-body { overflow-y: auto; padding: 16px clamp(20px, 7%, 56px) clamp(30px, 6%, 48px); }

/* ---- shared sheet bits ---- */
.sheet-title { font-size: 22px; font-weight: 800; margin: 6px 0 4px; }
.sheet-sub { font-size: 13.5px; color: rgba(255,255,255,0.5); line-height: 1.5; margin-bottom: 22px; }

/* ---- auth (Sign In / Create Account) ---- */
.auth-tabs { display: flex; gap: 4px; padding: 5px; background: rgba(255,255,255,0.06); border-radius: 999px; margin: 6px auto 30px; max-width: 440px; }
.auth-tab { flex: 1; border: none; background: none; color: rgba(255,255,255,0.55); font-family: inherit; font-weight: 700; font-size: 15px; padding: 11px 16px; border-radius: 999px; cursor: pointer; transition: background 0.25s var(--ease-out), color 0.25s ease; }
.auth-tab.active { background: rgba(255,255,255,0.16); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.auth-form { max-width: 440px; margin: 0 auto; }
.field { margin-bottom: 20px; }
.field-label { display: block; font-size: 14px; font-weight: 800; margin-bottom: 9px; }
.field-wrap { position: relative; }
.field-input { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); color: #fff; font-family: inherit; font-size: 15px; padding: 15px 17px; border-radius: 14px; outline: none; transition: border-color 0.2s ease, background 0.2s ease; }
.field-input::placeholder { color: rgba(255,255,255,0.35); }
.field-input:focus { border-color: var(--accent-gold); background: rgba(255,255,255,0.07); }
.field-wrap .field-input { padding-right: 50px; }
.pw-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: rgba(255,255,255,0.45); cursor: pointer; border-radius: 10px; }
.pw-eye:hover { color: #fff; background: rgba(255,255,255,0.08); }
.auth-error { color: #ff6b6b; font-size: 13.5px; font-weight: 600; min-height: 18px; margin: -6px 0 14px; }
.auth-submit { width: 100%; background: #f1f1f1; color: #111; border: none; font-family: inherit; font-weight: 800; font-size: 16px; padding: 16px; border-radius: 999px; cursor: pointer; margin-top: 8px; transition: transform 0.16s var(--ease-out), background 0.2s ease; }
.auth-submit:hover { background: #fff; }
.auth-submit:active { transform: scale(0.98); }
.auth-forgot { display: block; width: 100%; text-align: center; background: none; border: none; color: rgba(255,255,255,0.55); font-family: inherit; font-size: 14px; padding: 20px 0 4px; cursor: pointer; }
.auth-forgot:hover { color: #fff; }

/* ---- signed-in manager ---- */
.acct-head { display: flex; align-items: center; gap: 15px; padding: 8px 2px 22px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 20px; }
.acct-avatar { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 22px; flex-shrink: 0; color: #fff; }
.acct-meta { min-width: 0; }
.acct-name { font-size: 19px; font-weight: 800; line-height: 1.2; }
.acct-tag { font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 2px; }
.sheet-section-label { font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,0.4); margin: 22px 2px 12px; }
.prof-switch { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 12px; }
.prof-chip { display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: none; color: rgba(255,255,255,0.85); font-family: inherit; cursor: pointer; padding: 6px 2px; border-radius: 14px; transition: background 0.2s ease; }
.prof-chip:hover { background: rgba(255,255,255,0.05); }
.prof-chip .pc-av { width: 54px; height: 54px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; color: #fff; border: 2px solid transparent; transition: border-color 0.2s ease; }
.prof-chip.active .pc-av { border-color: #fff; }
.prof-chip.add .pc-av { background: rgba(255,255,255,0.06); border: 1.5px dashed rgba(255,255,255,0.3); color: rgba(255,255,255,0.6); }
.prof-chip { position: relative; }
.prof-chip .pc-name { font-size: 12.5px; font-weight: 700; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.sheet-head .sheet-title { margin: 0; }
.sheet-edit { background: none; border: none; color: var(--accent-gold); font-family: inherit; font-weight: 800; font-size: 15px; cursor: pointer; padding: 6px 4px; }
.sheet-edit:hover { opacity: 0.8; }
.pc-del { position: absolute; top: -3px; right: 10px; width: 22px; height: 22px; border-radius: 50%; background: #e50914; color: #fff; border: 2px solid #1a1611; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; padding: 0; }
.prof-chip.editing .pc-av { animation: chipWiggle 0.4s ease-in-out infinite alternate; }
@keyframes chipWiggle { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }

.sheet-row { display: flex; align-items: center; gap: 14px; width: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); color: #fff; font-family: inherit; font-size: 15px; font-weight: 600; text-align: left; padding: 15px 18px; border-radius: 14px; cursor: pointer; margin-top: 10px; transition: background 0.2s ease; }
.sheet-row:hover { background: rgba(255,255,255,0.08); }
.sheet-row svg { width: 19px; height: 19px; flex-shrink: 0; opacity: 0.8; }
.sheet-row.danger { color: #ff6b6b; }
.sheet-row .row-chev { margin-left: auto; opacity: 0.4; }

/* ---- settings ---- */
.set-group { margin-bottom: 26px; }
.set-group-title { font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,0.4); margin: 0 2px 12px; }
.set-row { display: flex; align-items: center; gap: 14px; padding: 14px 2px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.set-row:last-child { border-bottom: none; }
.set-row-text { min-width: 0; flex: 1; }
.set-row-name { font-size: 15px; font-weight: 700; }
.set-row-desc { font-size: 12.5px; color: rgba(255,255,255,0.45); margin-top: 3px; line-height: 1.45; }
.seg { display: flex; gap: 3px; padding: 4px; background: rgba(255,255,255,0.06); border-radius: 12px; flex-shrink: 0; }
.seg-btn { border: none; background: none; color: rgba(255,255,255,0.6); font-family: inherit; font-weight: 700; font-size: 13px; padding: 8px 13px; border-radius: 9px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.seg-btn.active { background: rgba(255,255,255,0.18); color: #fff; }
.setting-select { width: 100%; max-width: 280px; padding: 10px 14px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; color: #fff; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e0ab53' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; }
.setting-select:focus { outline: 2px solid var(--accent-gold); outline-offset: 2px; }
.setting-select option { background: var(--bg-deep); color: #fff; }
.switch { position: relative; width: 48px; height: 28px; flex-shrink: 0; border: none; border-radius: 999px; background: rgba(255,255,255,0.18); cursor: pointer; transition: background 0.25s var(--ease-out); }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform 0.25s var(--bezier-magnetic); }
.switch.on { background: var(--accent-gold); }
.switch.on::after { background: var(--ink-on-accent); }
.switch.on::after { transform: translateX(20px); }
.set-action { display: flex; align-items: center; gap: 12px; width: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); color: #fff; font-family: inherit; font-size: 14.5px; font-weight: 600; text-align: left; padding: 14px 16px; border-radius: 13px; cursor: pointer; margin-top: 9px; transition: background 0.2s ease; }
.set-action:hover { background: rgba(255,255,255,0.08); }
.set-action svg { width: 18px; height: 18px; opacity: 0.8; }
.set-action.danger { color: #ff6b6b; }
.set-action.danger:hover { background: rgba(229,9,20,0.14); }
.set-foot { text-align: center; font-size: 12px; color: rgba(255,255,255,0.32); margin-top: 22px; }
.sheet-toast { text-align: center; font-size: 13px; color: var(--accent-gold); font-weight: 700; min-height: 16px; margin-top: 12px; opacity: 0; transition: opacity 0.25s ease; }
.sheet-toast.show { opacity: 1; }


@media (max-width: 600px) {
    .sheet-panel { width: 100%; border-radius: 22px 22px 0 0; }
    .prof-switch { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
}
/* ============================================================
   Liquid Glass materials, focus, type and accessibility pass
   Later rules win: this layer restyles surfaces defined above.
   ============================================================ */
:root {
    --glass-thin: rgba(38, 31, 22, 0.42);     /* controls floating over artwork */
    --glass-thick: rgba(24, 19, 13, 0.72);    /* sheets, menus: bigger surface = thicker material */
    --glass-edge: rgba(255, 255, 255, 0.12);
    --glass-rim: inset 0 1px 0 rgba(255, 255, 255, 0.26), inset 0 0 0 1px var(--glass-edge);
    --glass-lift: 0 18px 50px rgba(0, 0, 0, 0.5);
}
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-optical-sizing: auto; }
:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* Type: tracking tightens as size grows; small caps labels open up */
.hero-title { letter-spacing: -0.03em; }
.search-heading, .discover-title, .list-page-title, .detail-title, .person-name { letter-spacing: -0.025em; }
.sheet-title, .shelf-title, .dd-section-title, .list-empty h2 { letter-spacing: -0.01em; }
.hero-desc, .dd-overview, .detail-overview, .person-bio { text-wrap: pretty; }

/* Nav: refraction in Chromium, true frosted glass everywhere else */
.glass-nav::before { background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03)); box-shadow: var(--glass-rim); }
.glass-nav:not(.lg-refract)::after { -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }
.nav-link.active { background: rgba(255,255,255,0.14); }

/* Thick glass: sheets, drawers, menus, dialogs */
.sheet-panel, .detail-drawer-panel {
    background: var(--glass-thick);
    -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%);
    box-shadow: var(--glass-rim), 0 -30px 90px rgba(0,0,0,0.6);
    opacity: 0; transition: transform 0.5s var(--bezier-magnetic), opacity 0.3s ease;
}
.sheet.open .sheet-panel, .detail-drawer.active .detail-drawer-panel { opacity: 1; }
.sheet.dragging .sheet-panel, .detail-drawer.dragging .detail-drawer-panel { transition: none; opacity: 1; }
.dropdown-menu, .sort-menu, .list-dropdown {
    background: var(--glass-thick);
    -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
    border: none; box-shadow: var(--glass-rim), var(--glass-lift);
}
#admin-modal { background: rgba(10,8,6,0.82); -webkit-backdrop-filter: blur(40px) saturate(160%); backdrop-filter: blur(40px) saturate(160%); }
.auth-box { background: var(--glass-thick) !important; border: none !important; box-shadow: var(--glass-rim), var(--glass-lift); -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%); }
.detail-drawer-scrim, .sheet-scrim { background: rgba(0,0,0,0.5); }

/* Thin glass: controls over artwork. Only one translucent layer deep. */
.player-action-btn.secondary, .dd-btn, .dd-chip, .filter-chip, .search-tab, .disc-surprise, .disc-more,
.player-back, .player-close, .player-fullscreen, .dropdown-trigger, #back-to-top, .detail-drawer-close,
.card-info-btn, .card-remove-btn, .card-add-btn {
    background: var(--glass-thin);
    -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
    border: none; box-shadow: var(--glass-rim);
}
.player-action-btn.secondary:hover, .dd-btn:hover, .filter-chip:hover, .search-tab:hover, .disc-surprise:hover, .disc-more:hover,
.dropdown-trigger:hover, #back-to-top:hover { background: rgba(255,255,255,0.18); }
.filter-chip.active, .search-tab.active { background: rgba(255,255,255,0.2); color: #fff; }
.dd-btn.primary { background: #fff; color: #111; }
.search-bar, .disc-select, .field-input {
    background-color: var(--glass-thin); border: none; box-shadow: var(--glass-rim);
    -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
}
.search-bar:focus-within, .field-input:focus { box-shadow: var(--glass-rim), 0 0 0 2px var(--accent-gold); }
.auth-tabs, .seg { background: rgba(0,0,0,0.28); box-shadow: inset 0 1px 2px rgba(0,0,0,0.35); }
.sheet-row, .set-action { border: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }

/* Touch: 44pt minimum targets, no hover-only affordances */
@media (pointer: coarse) {
    .nav-icon, .nav-brand, .modal-close, .player-back, .player-close, .player-fullscreen, .detail-drawer-close { min-width: 44px; min-height: 44px; }
    .card-info-btn, .card-remove-btn, .card-add-btn { width: 36px; height: 36px; }
    .card-add-btn { right: 52px; }
    .seg-btn, .sheet-edit { min-height: 44px; }
}
/* Sheet grab area: wide invisible hit target around the visible 5px pill */
.sheet-handle { position: relative; }
.sheet-handle::before { content: ''; position: absolute; inset: -16px -48px; }

/* Reduced transparency: solid frosted surfaces, no blur */
@media (prefers-reduced-transparency: reduce) {
    .sheet-panel, .detail-drawer-panel, .dropdown-menu, .sort-menu, .list-dropdown, .auth-box { background: #1a1611 !important; }
    .glass-nav::before { background: rgba(26,22,17,0.96); }
    #admin-modal { background: rgba(10,8,6,0.98); }
    .sheet-panel, .detail-drawer-panel, .dropdown-menu, .sort-menu, .list-dropdown, .auth-box, #admin-modal,
    .player-action-btn.secondary, .dd-btn, .dd-chip, .filter-chip, .search-tab, .disc-surprise, .disc-more, .player-back, .player-close,
    .player-fullscreen, .dropdown-trigger, #back-to-top, .detail-drawer-close, .card-info-btn, .card-remove-btn, .card-add-btn,
    .search-bar, .disc-select, .field-input, .sheet-scrim, .detail-drawer-scrim, .glass-nav::after { -webkit-backdrop-filter: none; backdrop-filter: none; }
    .player-action-btn.secondary, .dd-btn, .dd-chip, .filter-chip, .search-tab, .disc-surprise, .disc-more, .dropdown-trigger, #back-to-top { background: #2a2318; }
}
/* Increased contrast: defined edges, near-solid fills, brighter secondary text */
@media (prefers-contrast: more) {
    :root { --glass-thin: rgba(30,24,16,0.92); --glass-thick: rgba(20,16,11,0.97); --glass-edge: rgba(255,255,255,0.5); }
    .nav-link, .nav-icon, .set-row-desc, .sheet-sub, .card-meta { color: #fff; }
    .glass-nav::before { background: rgba(20,16,11,0.92); }
}
/* Reduced motion: keep feedback, drop travel. Sheets fade instead of slide. */
@media (prefers-reduced-motion: reduce) {
    .sheet-panel, .detail-drawer-panel { transform: translate(-50%, 0) !important; transition: opacity 0.2s ease !important; }
    .sheet-scrim, .detail-drawer-scrim { transition-duration: 0.2s; }
    .fade-in { animation: modalFadeIn 0.3s ease forwards; }
    .player-loader-art, .skeleton, .prof-chip.editing .pc-av { animation: none; }
    .lux-card:hover, .person-card:hover { transform: none; }
    .dropdown-menu.active, .sort-menu.active { animation: modalFadeIn 0.15s ease; }
}
body.reduce-motion .sheet-panel, body.reduce-motion .detail-drawer-panel { transform: translate(-50%, 0) !important; transition: opacity 0.2s ease !important; }
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
body.reduce-motion .sheet-panel, body.reduce-motion .detail-drawer-panel { transition: opacity 0.2s ease !important; }

/* ---------- Glass dialog (replaces alert / confirm / prompt) ---------- */
.gdialog { position: fixed; inset: 0; z-index: 10500; display: flex; align-items: center; justify-content: center; padding: 20px; animation: modalFadeIn 0.2s ease; }
.gdialog.leaving { opacity: 0; transition: opacity 0.16s ease; pointer-events: none; }
.gdialog-scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.gdialog-box {
    position: relative; width: min(380px, 100%); padding: 26px 24px 20px; border-radius: 26px; text-align: center;
    background: var(--glass-thick); box-shadow: var(--glass-rim), var(--glass-lift);
    -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%);
    animation: gdialogIn 0.38s var(--bezier-magnetic);
}
@keyframes gdialogIn { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }
.gdialog-title { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; }
.gdialog-msg { margin-top: 8px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.7); text-wrap: pretty; }
.gdialog-input { margin-top: 18px; text-align: center; }
.gdialog-actions { display: flex; gap: 10px; margin-top: 22px; }
.gdialog-btn { flex: 1; min-height: 46px; border: none; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 800; color: #fff; background: rgba(255,255,255,0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14); transition: transform 0.16s var(--ease-out), background 0.2s ease; }
.gdialog-btn:hover { background: rgba(255,255,255,0.2); }
.gdialog-btn:active { transform: scale(0.96); }
.gdialog-btn.primary { background: var(--accent-gold); color: var(--ink-on-accent); }
.gdialog-btn.primary:hover { background: var(--accent-gold-bright); }
.gdialog-btn.danger { background: #e50914; color: #fff; }
.gdialog-btn.danger:hover { background: #ff1e2b; }
.dropdown-item:focus-visible, .sort-item:focus-visible { outline: none; background: rgba(255,255,255,0.16); color: #fff; }
@media (prefers-reduced-motion: reduce) { .gdialog-box, .gdialog { animation: none; } }
@media (prefers-reduced-transparency: reduce) { .gdialog-box { background: #1a1611; } .gdialog-scrim { -webkit-backdrop-filter: none; backdrop-filter: none; } }
body.reduce-motion .gdialog-box { animation: none; }