@import url('./film-friends.css');
@import url('./movie-video-cover.css');
.film-desktop-detail{display:none}
@media(min-width:720px){
html[data-viewport="desktop"] .library-dialog.library-film-dialog{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#101010;box-shadow:none;overflow-y:auto;overflow-x:hidden}
html[data-viewport="desktop"] .library-film-dialog>.library-sheet{display:none}
html[data-viewport="desktop"] .film-desktop-detail{display:block;box-sizing:border-box;width:min(832px,calc(100% - 48px));margin:0 auto;padding:16px 0 64px;color:#fff;font-family:"Medeo Sans",Arial,sans-serif}
.film-desktop-detail *{box-sizing:border-box}
.film-desktop-header{height:56px;margin-bottom:32px;position:relative;z-index:1}
.film-desktop-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:56px;padding:16px;border:0;border-radius:28px;background:#1e1e1e;color:#fff;font:600 14px/20px "Medeo Sans",Arial,sans-serif;cursor:pointer;box-shadow:inset 0 0 0 1px #ffffff0b;transition:background .3s ease,color .3s ease,box-shadow .3s ease}
.film-desktop-button>img{width:24px;height:24px;flex:none}
.film-desktop-header .film-desktop-button{width:111px;flex:none;gap:2px;color:#fff;padding:16px;border:1px solid transparent;background:linear-gradient(#1e1e1e,#1e1e1e) padding-box,linear-gradient(135deg,#ffffff2e,#ffffff03) border-box}
.film-desktop-header .film-desktop-button>span{padding-inline:4px;opacity:.6}
.film-desktop-hero{display:grid;grid-template-columns:256px minmax(0,328px) minmax(0,184px);gap:32px;align-items:start}
.film-desktop-art{position:relative;min-width:0}
.film-desktop-poster{display:block;position:relative;width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:33px;border:1px solid #ffffff29}
.film-desktop-glow{position:absolute;inset:-32px -21px;width:calc(100% + 42px);height:calc(100% + 64px);object-fit:cover;filter:blur(50px);opacity:.5;pointer-events:none}
.film-desktop-copy{position:relative;min-width:0}
.film-desktop-copy h1{margin:0 0 16px;font-size:32px;line-height:40px;font-weight:700;letter-spacing:0;overflow-wrap:anywhere}
.film-desktop-rating{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.film-desktop-rating>strong{display:flex;align-items:center;gap:4px;padding:8px;border-radius:70px;background:#ffcc001f;color:#fc0;font-size:16px;line-height:20px}
.film-desktop-rating>strong>img{width:16px;height:16px}
.film-desktop-rating>span{font-size:14px;line-height:20px;font-weight:600}
.film-desktop-rating small{display:block;color:#fff9;font-family:"Medeo Mono",monospace;font-size:12px;line-height:16px;font-weight:500}
.film-desktop-overview{margin-bottom:24px;font-size:14px;line-height:20px}
.film-desktop-overview>p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden;margin:0;line-height:20px;white-space:pre-line;overflow-wrap:anywhere}
.film-desktop-overview.is-expanded>p{display:block}
.film-desktop-overview>button{display:block;margin-top:4px;padding:0;border:0;background:none;color:#fff9;font:inherit;cursor:pointer}
.film-desktop-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.film-desktop-round{width:56px;padding:16px;flex:none}
.film-desktop-watched[aria-pressed="true"]{background:#3bb33b29;color:#3bb33b;box-shadow:none}
.film-desktop-watched:not([aria-pressed="true"])>img{opacity:1}
.film-desktop-notice{font-size:12px;color:#fff9;margin:8px 0 0}
.film-desktop-facts{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:0;min-width:0;font-size:14px;line-height:20px}
.film-desktop-facts>div{min-width:0}
.film-desktop-facts dt{color:#fff9;margin-bottom:2px;font-weight:400}
.film-desktop-facts dd{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400}
.film-desktop-facts .film-desktop-genres dd{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.film-desktop-state-message{display:flex;flex-wrap:wrap;align-items:center;gap:10px;color:#fff9;font-size:14px;line-height:20px}
.film-desktop-state-message p{flex-basis:100%;margin:0}
.film-desktop-state .library-loading-mark{width:22px;height:22px;flex:none;border:2px solid #ffffff15;border-top-color:#ff5500;border-radius:50%;animation:library-loading-turn .8s linear infinite}
.film-desktop-skeleton,.film-desktop-skeleton-lines i{background:#1e1e1e}
.film-desktop-skeleton-lines{display:grid;gap:10px;margin-top:24px}
.film-desktop-skeleton-lines i{display:block;height:12px;border-radius:6px}
.film-desktop-skeleton-lines i:last-child{width:65%}
.film-desktop-cast{position:relative;margin-top:32px}
.film-desktop-cast h2{margin:0 0 12px;font-size:20px;line-height:24px;font-weight:700}
.film-desktop-cast h2>button{display:flex;align-items:center;gap:4px;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.film-desktop-cast h2 img{width:24px;height:24px;transform:rotate(180deg)}
.film-desktop-cast-rail{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;padding:8px 4px 12px;margin:-8px -4px -4px}
.film-desktop-cast-rail::-webkit-scrollbar{display:none}
.film-desktop-actor{flex:0 0 calc((100% - 84px)/8);min-width:0;scroll-snap-align:start}
.film-desktop-actor-portrait,.film-desktop-portrait-empty{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border:1px solid #ffffff29;border-radius:20px;background:#1e1e1e}
.film-desktop-actor h3,.film-desktop-actor p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:6px 8px 0;font-size:14px;line-height:20px;font-weight:600}
.film-desktop-actor p{margin-top:0;font-size:12px;line-height:16px;font-weight:500;color:#fff9}
.film-desktop-detail button:focus-visible,.film-desktop-cast-rail:focus-visible{outline:2px solid #ff6500;outline-offset:4px}
@media(hover:hover) and (pointer:fine){.film-desktop-button:hover{background:#303030;box-shadow:inset 0 0 0 1px #ffffff14}.film-desktop-watched[aria-pressed="true"]:hover{background:#3bb33b40}.film-desktop-overview>button:hover,.film-desktop-cast h2>button:hover{color:#fff}}
@media(max-width:879px){.film-desktop-hero{grid-template-columns: minmax(180px,256px) minmax(0,1fr) 140px;gap:20px}.film-desktop-copy h1{font-size:28px;line-height:34px}.film-desktop-actor{flex-basis:calc((100% - 60px)/6)}}
@media(prefers-reduced-motion:reduce){.film-desktop-button{transition:none}.film-desktop-state .library-loading-mark{animation:none}}
}