/* Dedicated small-screen presentation. The link's media query is shared with mobile.js. */
:root {
  --mobile-bg: #101014;
  --mobile-panel: #1b1b22;
  --mobile-line: #ffffff12;
  --mobile-text: #f5f1f3;
  --mobile-muted: #a9a6b1;
  --mobile-red: #ed3556;
  --mobile-top: calc(58px + env(safe-area-inset-top, 0px));
  --mobile-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
}
html { scroll-padding-top: calc(var(--mobile-top) + 60px); }
body, body.fd-page { height: auto; min-height: 100dvh; overflow: visible; background: var(--mobile-bg); color: var(--mobile-text); font-family: Inter, system-ui, sans-serif; }
body > .navbar, body > .footer, body > .background-animation { display: none !important; }
body .content-wrapper, body.fd-page .content-wrapper { display: block; flex: none; overflow: visible; min-height: calc(100dvh - var(--mobile-top)); padding: 0 env(safe-area-inset-right, 0px) calc(var(--mobile-bottom) + 24px) env(safe-area-inset-left, 0px); margin: 0; }
.mobile-only { display: block; }
[hidden], .mobile-only[hidden] { display: none !important; }
body :focus-visible { outline: 2px solid #ff9aaf; outline-offset: 3px; }
body input:not([type=checkbox]):not([type=radio]):not([type=range]), body select, body textarea { font-size: 16px !important; min-height: 48px; max-width: 100%; }
body button, body .btn, body summary { touch-action: manipulation; }
body .btn, body .form-control, body .form-select { border-radius: 12px; }
body .btn { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; white-space: normal; }
body .container, body .container-fluid { max-width: 100%; }
body h1, body h2, body h3, body strong { text-shadow: none; }
body a, body button, .mobile-index-meta { -webkit-tap-highlight-color: transparent; }
.desktop-list-instruction { display: none; }
.mw-shell h2, .mw-shell h3 { font-family: Inter, sans-serif; font-weight: 650; text-transform: none; letter-spacing: -.025em; }
body .hero-title { font: 750 30px/1.15 Inter, sans-serif; letter-spacing: -.04em; text-transform: none; margin: 24px 0 12px; overflow-wrap: anywhere; }
body .lead { font-size: 14px; line-height: 1.65; color: var(--mobile-muted); }
.mobile-header { height: var(--mobile-top); padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 500; background: #101014f5; border-bottom: 1px solid var(--mobile-line); backdrop-filter: blur(18px); }
.mobile-brand { display: inline-flex; align-items: center; }
.mobile-page-title { flex: 1; font-size: 15px; font-weight: 650; letter-spacing: -.02em; }
.mobile-icon-button { width: 44px; height: 44px; flex: 0 0 44px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 50%; color: var(--mobile-text); text-decoration: none; font-size: 19px; }
.mobile-nav { position: fixed; bottom: 0; inset-inline: 0; z-index: 600; height: var(--mobile-bottom); padding: 6px max(8px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-left)); background: #15151bef; backdrop-filter: blur(20px); border-top: 1px solid #ffffff14; display: grid; grid-template-columns: repeat(4, 1fr); }
.mobile-nav a, .mobile-nav button { color: #96939f; border: 0; background: transparent; text-decoration: none; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; font: 550 10px/1.2 Inter, sans-serif; min-height: 54px; border-radius: 12px; }
.mobile-nav i { font-size: 19px; }
.mobile-nav [aria-current=page], .mobile-nav [aria-expanded=true] { color: #ff6480; }
.mobile-nav [aria-current=page] i { background: #ed35561a; box-shadow: 0 0 0 7px #ed35561a; border-radius: 6px; }
body.mobile-keyboard .mobile-nav { display: none; }
.mobile-primary, .mobile-secondary, .mobile-filter-button { display: inline-flex; justify-content: center; align-items: center; gap: 10px; min-height: 48px; padding: 12px 16px; border-radius: 12px; border: 1px solid #ffffff1a; font: 650 14px/1.3 Inter, sans-serif; text-decoration: none; color: white; background: #24232b; cursor: pointer; }
.mobile-primary { background: #c82040; border-color: #da2c4d; }
.mobile-muted { color: var(--mobile-muted); font-size: 12px; line-height: 1.6; }
.mobile-eyebrow { color: #f06a84; font: 700 10px/1.4 Inter, sans-serif; letter-spacing: .14em; margin: 0 0 9px; }
.mobile-sheet { padding: 0; position: fixed; inset: auto 0 0; margin: 0 auto; width: 100%; max-width: 680px; max-height: calc(100dvh - max(env(safe-area-inset-top), 16px)); border-radius: 24px 24px 0 0; border: 1px solid #ffffff1d; background: #19191f; color: var(--mobile-text); overflow: hidden; box-shadow: 0 -20px 70px #0007; }
.mobile-sheet[open] { display: flex; flex-direction: column; }
.mobile-sheet { bottom: var(--mobile-keyboard-inset, 0px); max-height: calc(var(--mobile-visible-height, 100dvh) - 16px); }
.mobile-sheet::backdrop { background: #060609b8; backdrop-filter: blur(4px); }
.mobile-sheet-grip { height: 4px; width: 36px; flex-shrink: 0; background: #77717d; border-radius: 4px; margin: 10px auto 0; }
.mobile-sheet > header { display: flex; align-items: center; justify-content: space-between; padding: 8px 18px; gap: 16px; }
.mobile-sheet h2 { margin: 0; font: 700 21px/1.3 Inter, sans-serif; letter-spacing: -.03em; overflow-wrap: anywhere; }
.mobile-sheet-content { overflow-y: auto; overscroll-behavior: contain; padding: 8px 20px 24px; min-height: 0; }
.mobile-sheet > footer { padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--mobile-line); background: #19191f; }
.mobile-sheet > footer button { width: 100%; }
.mobile-menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mobile-menu-grid a { display: grid; gap: 7px; padding: 17px 14px; border: 1px solid var(--mobile-line); border-radius: 16px; background: #23232b; color: var(--mobile-text); text-decoration: none; }
.mobile-menu-grid i { color: #f26b85; margin-bottom: 7px; font-size: 19px; }
.mobile-menu-grid strong { font-size: 14px; }.mobile-menu-grid span { color: var(--mobile-muted); font-size: 11px; line-height: 1.5; }
.mobile-menu-links { margin-top: 20px; }.mobile-menu-links a { display: flex; justify-content: space-between; align-items: center; min-height: 49px; padding: 12px 3px; border-bottom: 1px solid var(--mobile-line); color: #e3dee7; text-decoration: none; font-size: 14px; }
.mobile-menu-links i { color: #8f8997; }.mobile-menu-social { display: flex; gap: 25px; padding: 22px 0 0; font-size: 12px; }.mobile-menu-social a { color: #b9b1c2; }

/* Discover is a dedicated mobile page, with the original search/results nodes moved into it. */
.mobile-ready .desktop-home { display: none; }
.mobile-discover { padding: 22px 0 0; }
.mobile-discover-intro { padding: 0 20px; }
.mobile-discover-intro h1 { font: 760 clamp(36px, 10.5vw, 50px)/1.08 Inter, sans-serif; text-transform: none; letter-spacing: -.055em; margin: 0 0 14px; }
.mobile-discover-intro h1 span { color: #f66682; }
.mobile-discover-intro > p:not(.mobile-eyebrow) { font-size: 14px; color: #ada6b5; max-width: 300px; line-height: 1.6; margin: 0 0 21px; }
#mobile-home-search .search-wrap { width: 100%; margin: 0; }
#mobile-home-search .search-bar { width: 100%; background: #202028; border: 1px solid #ffffff16; padding: 15px 48px 15px 16px; border-radius: 14px; box-shadow: none; height: 52px; }
#mobile-home-search .search-icon { width: 48px; height: 48px; right: 3px; top: 2px; transform: none; color: #bfb5c9; }
#mobile-home-search .suggestions-container { z-index: 450; max-height: min(340px, 48dvh); border-radius: 14px; }
#mobile-home-search .suggestion-item { min-height: 48px; white-space: normal; text-align: left; font-size: 14px; }
.mobile-discover-shortcuts { display: grid; grid-template-columns: 1fr; gap: 9px; margin: 17px 20px 25px; }
.mobile-discover-shortcuts a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--mobile-line); border-radius: 14px; background: #1b1b23; color: #ede7f0; text-decoration: none; font-size: 13px; font-weight: 550; }
.mobile-discover-shortcuts a > i:first-child { color: #ef6c84; }.mobile-discover-shortcuts a > i:last-child { margin-left: auto; color: #89838f; font-size: 12px; }
.mobile-discover-section { margin: 30px 0; }
.mobile-section-heading { display: flex; justify-content: space-between; gap: 12px; align-items: end; margin: 0 20px 16px; }
.mobile-section-heading h2 { margin: 0; font: 700 22px/1.3 Inter, sans-serif; letter-spacing: -.035em; }.mobile-section-heading .mobile-eyebrow { margin-bottom: 5px; }.mobile-section-heading > a { color: #f2869b; font-size: 12px; text-decoration: none; }.mobile-section-heading > span { font-size: 10px; }
.mobile-film-shelf { display: flex; gap: 13px; overflow-x: auto; padding: 0 20px 10px; scroll-snap-type: x mandatory; scroll-padding: 20px; scrollbar-width: none; }
.mobile-film-shelf::-webkit-scrollbar { display: none; }
.mobile-film-tile { flex: 0 0 132px; color: #ece7ef; text-decoration: none; scroll-snap-align: start; min-width: 0; }
.mobile-tile-art { position: relative; width: 132px; height: 198px; background: #24212b; border-radius: 12px; overflow: hidden; border: 1px solid #ffffff12; margin-bottom: 11px; }
.mobile-tile-art img { width: 100%; height: 100%; object-fit: cover; }
.mobile-tile-score { position: absolute; bottom: 8px; right: 7px; padding: 6px 7px; background: #17111cee; border: 1px solid #ffffff25; border-radius: 7px; font-size: 12px; font-weight: 750; color: #ff96ab; }.mobile-tile-score small { font-size: 8px; color: #d0c0cf; }
.mobile-film-tile > strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; line-height: 1.5; }.mobile-film-tile > span { display: block; font-size: 10px; color: #9e94a8; margin-top: 5px; }
#mobile-home-top { margin: 0 20px; }#mobile-home-top .top10-card { background: #191920; border: 1px solid var(--mobile-line); border-radius: 16px; overflow: hidden; }
#mobile-home-top .top10-item { padding: 15px 14px; gap: 13px; min-height: 70px; }#mobile-home-top .top10-rank { width: 22px; font: 600 15px/1 Inter,sans-serif; color: #af8a96; }#mobile-home-top .top10-film-title { font-size: 13px; white-space: normal; line-height: 1.5; }#mobile-home-top .top10-film-year { font-size: 11px; margin-top: 4px; }#mobile-home-top .top10-score-badge { font-size: 14px; min-width: 47px; padding: 7px; }
.mobile-taste-card { margin: 26px 20px; padding: 22px; border: 1px solid #7a344344; background: radial-gradient(ellipse at top right,#54182c66,transparent),#211a24; border-radius: 18px; }.mobile-taste-card > i { color: #ed7892; font-size: 26px; margin-bottom: 18px; }.mobile-taste-card h2 { font: 700 22px/1.3 Inter,sans-serif; letter-spacing: -.035em; }.mobile-taste-card p { color: #b7a8bc; font-size: 13px; line-height: 1.7; }.mobile-taste-card a { width: 100%; margin-top: 7px; }

/* Index: one film per card; the original sort/filter inputs live in a sheet. */
body[data-page=the_index] .index-hero { text-align: left; padding: 22px 4px 12px; }.index-hero h1 { font: 750 32px/1.2 Inter,sans-serif; color: #f4edf4; letter-spacing: -.045em; }.index-hero .subtitle { font-size: 12px; letter-spacing: 0; text-transform: none; margin: 7px 0; }.index-stats { gap: 14px; font-size: 11px; margin-top: 3px; }.index-stats span strong { font-size: 13px; }
.mobile-ready body[data-page=the_index] .controls-strip, .mobile-ready body[data-page=the_index] .index-table-wrap { display: none; }
.mobile-index-toolbar { display: grid; grid-template-columns: 1fr; gap: 10px; padding-bottom: 5px; }.mobile-search-field { display: flex; align-items: center; gap: 10px; background: #202028; border: 1px solid var(--mobile-line); border-radius: 13px; padding: 0 14px; }.mobile-search-field i { color: #a49aaa; }.mobile-search-field input { width: 100%; background: none; border: 0; color: #f8f0f9; padding: 12px 0; outline: none; min-width: 0; }
.mobile-filter-button { justify-content: flex-start; min-height: 45px; font-size: 13px; background: #1b1b22; }.mobile-filter-button span { margin-left: auto; color: #f594a8; }.mobile-index-toolbar > p { margin: 3px 2px 10px; font-size: 11px; }
.mobile-index-results { display: grid; gap: 10px; }.mobile-index-card { display: grid; grid-template-columns: 22px 46px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 13px 11px; background: #1a1a22; border: 1px solid var(--mobile-line); border-radius: 15px; text-decoration: none; color: #eee8f2; }
.mobile-index-rank { font-size: 12px; color: #a9909c; text-align: center; font-weight: 600; }.mobile-index-poster { width: 46px; height: 69px; border-radius: 7px; background: #2a222f; object-fit: cover; }.mobile-index-meta { min-width: 0; }.mobile-index-meta strong { display: block; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }.mobile-index-meta small { display: block; color: #9f95aa; font-size: 10px; margin-top: 5px; line-height: 1.5; }.mobile-index-score { text-align: right; min-width: 41px; align-self: center; }.mobile-index-score b { display: block; color: #ff7894; font-size: 19px; line-height: 1.4; font-variant-numeric: tabular-nums; }.mobile-index-score small { display: block; color: #b6a1b4; font-size: 9px; max-width: 74px; overflow-wrap: anywhere; }
.mobile-empty { padding: 32px 18px; border: 1px dashed #774457; border-radius: 15px; text-align: center; color: #b8a8bd; font-size: 14px; line-height: 1.7; }
body[data-page=the_index] #index-weights-status:empty { display: none; }
.mobile-sheet .controls-inner { display: flex; flex-direction: column; align-items: stretch; gap: 22px; }.mobile-sheet .controls-inner > div { display: flex; flex-direction: column; align-items: stretch !important; gap: 9px; width: 100%; }.mobile-sheet .ctrl-label { font-size: 12px; text-transform: none; letter-spacing: 0; }.mobile-sheet .sort-select { min-width: 0; width: 100%; padding: 12px; border-radius: 10px; }.mobile-sheet .filter-dropdown summary { min-width: 0; padding: 13px; font-size: 15px; border-radius: 10px; }.mobile-sheet .filter-menu { position: static; margin: 8px 0 0; box-shadow: none; width: 100%; max-height: 270px; border-radius: 10px; }.mobile-sheet .filter-option { min-height: 44px; font-size: 14px; }.mobile-sheet .filter-option input { width: 19px; height: 19px; }.mobile-sheet .filter-clear { min-height: 44px; font-size: 13px; }

/* Film detail: a shared cover/score header, sticky sections and vertical score disclosures. */
body.fd-page .fd-page-frame { display: block; overflow: visible; }.fd-page-frame .fd-shell { display: block; overflow: visible; }.fd-page-frame .fd-main { display: block; overflow: visible; min-height: 0; width: 100%; }.mobile-ready .fd-page-frame > .fd-shared-header, .mobile-ready .fd-page-frame .fd-left { display: none !important; }
.mobile-film-hero { display: grid; grid-template-columns: 94px minmax(0,1fr); gap: 18px; padding: 24px 20px 18px; align-items: start; }
#mobile-film-art .fd-card-wrap { margin: 0; width: 94px; max-width: none; height: auto; padding: 0; border-radius: 10px; }#mobile-film-art .fd-card-wrap img { border-radius: 10px; }
#mobile-film-heading { min-width: 0; }#mobile-film-heading .fd-title-group { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }#mobile-film-heading .fd-title { flex: 1 0 100%; font: 750 24px/1.22 Inter,sans-serif; white-space: normal; overflow: visible; text-transform: none; letter-spacing: -.045em; overflow-wrap: anywhere; }#mobile-film-heading .fd-year { font: 12px/1.5 Inter,sans-serif; color: #ab9caf; }#mobile-film-heading .fd-info-tip { display: none; }#mobile-film-heading .fd-original-title { font: 11px/1.5 Inter,sans-serif; }
#mobile-film-heading .fd-score-summary { display: flex; flex-wrap: wrap; justify-content: flex-start; padding: 10px 0 0; gap: 10px; }#mobile-film-heading .fd-rsi-score-wrap { display: flex; flex-direction: column-reverse; gap: 0; align-items: flex-start; }#mobile-film-heading .fd-rsi-score { font: 750 29px/1.15 Inter,sans-serif; color: #ff6484; }#mobile-film-heading .fd-rsi-score-label { font: 10px/1.5 Inter,sans-serif; color: #b49bb2; }#mobile-film-heading .fd-rp-wrap { font-size: 11px; }
#mobile-film-heading .fd-rp-label { font: 10px/1.5 Inter,sans-serif; }#mobile-film-heading .fd-rp-value { font: 650 15px/1.5 Inter,sans-serif; }
#mobile-film-heading .fd-shared-generation { margin-top: 11px; gap: 7px; flex-wrap: wrap; }#mobile-film-heading .fd-shared-generation label { font-size: 10px; }#mobile-film-heading select { font-size: 16px !important; min-height: 44px; max-width: 155px; border-radius: 8px; }
.mobile-film-actions { padding: 0 16px 15px; }.mobile-film-actions .fd-title-actions { display: grid; grid-template-columns: 1fr 1fr 1fr 44px; gap: 7px; }.mobile-film-actions button { min-height: 44px; padding: 8px 4px; font: 550 10px/1.3 Inter,sans-serif; letter-spacing: 0; border-radius: 10px; }.mobile-film-actions #fd-list-status { font-size: 12px; white-space: normal; }
.fd-page-frame > .fd-tab-switch { position: sticky; top: var(--mobile-top); z-index: 400; padding: 0 8px; background: #14141bf5; border-top: 1px solid var(--mobile-line); border-bottom: 1px solid var(--mobile-line); backdrop-filter: blur(15px); display: grid; grid-template-columns: repeat(4,1fr); gap: 0; }.fd-page-frame > .fd-tab-switch .fd-tab-btn { padding: 15px 3px; min-height: 48px; font: 600 11px/1.4 Inter,sans-serif; }.fd-tab-btn i { display: none; }
.fd-page-frame .fd-panel-score { display: block; }.fd-page-frame .fd-param-grid { display: grid; grid-template-columns: 1fr; padding: 8px 16px 20px; gap: 11px; }.fd-page-frame .fd-col { border: 1px solid #ffffff12; border-radius: 14px; overflow: hidden; width: 100%; background: #1a1921; }.fd-col.mobile-category > .fd-col-hdr { display: none; }
.mobile-category-toggle { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; background: transparent; color: #efe7f0; border: 0; padding: 17px 16px; width: 100%; min-height: 63px; text-align: left; font: 650 15px/1.3 Inter,sans-serif; }.mobile-category-toggle span small { display: block; font-size: 10px; font-weight: 450; color: #ac98af; margin-top: 5px; }.mobile-category-toggle b { color: #ff7996; font: 650 20px/1 Inter,sans-serif; }.mobile-category-toggle > i { color: #b59cb6; font-size: 11px; transition: transform .2s; }.mobile-category-toggle[aria-expanded=true] > i { transform: rotate(180deg); }
.mobile-category-content { padding: 0 7px 8px; }.fd-page-frame .fd-prow { width: 100%; min-height: 64px; max-height: none; height: auto; padding: 12px 9px; gap: 9px; }.fd-prow-name { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.5; font-size: 13px; }.fd-prow-num { display: none; }.fd-prow-score { font-size: 15px; flex-shrink: 0; }.sentiment-indicator { font-size: 10px; margin-top: 4px; }.fd-page-frame .fd-col-avg { display: none; }
.fd-page-frame .fd-genre-strip { justify-content: flex-start; padding: 14px 16px; gap: 9px; flex-wrap: nowrap; overflow-x: auto; }.fd-page-frame .fd-genre-pill { border-radius: 12px; min-width: 91px; height: auto; min-height: 62px; padding: 10px 14px; }.fd-genre-pill-name { font-size: 10px; }.fd-genre-pill-score { font-size: 18px; }
.fd-my-weights { margin: 16px 16px 0; padding: 15px; border-radius: 13px; }.fd-my-weights > span { margin: 9px 0 0; line-height: 1.6; }.fd-my-weights summary { font-size: 13px; }.fd-my-weights-result { gap: 18px; }.fd-my-weights-note { line-height: 1.6; }.fd-page-frame .fd-bottom-bar { margin: 0 16px 20px; padding: 12px; font-size: 10px; line-height: 1.7; }
.fd-page-frame .fd-panel-details, .fd-page-frame .fd-panel-dna { padding: 18px 16px 24px; }.fd-page-frame .fd-panel-details h2, .fd-page-frame .fd-panel-dna h2 { font-family: Inter,sans-serif; letter-spacing: -.03em; }.fd-details-grid, .fd-details-row { grid-template-columns: 1fr; }
#fd-param-backdrop { align-items: end; padding: 0; z-index: 1500; }#fd-param-backdrop > div { width: 100%; max-width: 680px; max-height: calc(100dvh - 20px); border-radius: 22px 22px 0 0; padding-bottom: max(20px,env(safe-area-inset-bottom)); }.fd-param-close { width: 44px; height: 44px; }.vote-buttons .vote-button { flex: 1; min-height: 48px; font-size: 14px; }
#cardModal { z-index: 1600; }
#fd-panel-score > .fd-shimmer-cta { margin: 0 16px 20px; }
.fd-param-modal .fd-param-close { top: 10px; right: 10px; background: #28212d; border-radius: 50%; color: #eed7e9; z-index: 2; }
.fd-param-modal .fd-pm-header { padding-top: 40px; gap: 15px; }.fd-pm-name { font: 700 19px/1.4 Inter,sans-serif; }.fd-pm-score { font: 750 27px/1.2 Inter,sans-serif; }.fd-param-modal { background: #19161f; }.fd-param-modal p { font-size: 13px; line-height: 1.75; }
body.mobile-overlay-open, body:has(dialog[open]) { overflow: hidden; }
.fd-info-bar { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 16px; background: #1b1822; border-radius: 14px; }
.fd-info-bar .fd-info-sec { max-width: none !important; min-width: 0; }.fd-info-sec-val { white-space: normal; font-size: 13px; line-height: 1.6; }.fd-info-sec-lbl { font-size: 10px; }.fd-detail-block { padding: 18px 0; }.fd-detail-synopsis { font-size: 14px; line-height: 1.8; }.fd-drawer-text { font-size: 12px; line-height: 1.7; }
.fd-panel-dna > .discussion-note { font-size: 12px; line-height: 1.65; padding: 0 0 12px !important; color: #b7a5bd; }
.fp-sub-tab-wrap { display: grid; grid-template-columns: 1fr 1fr; padding: 5px; gap: 5px; background: #24202b; border-radius: 12px; margin-bottom: 16px; }.fp-sub-tab-btn { min-height: 44px; font: 650 13px/1.3 Inter,sans-serif; letter-spacing: 0; border-radius: 9px; }.fp-sub-tab-btn.active { background: #613149; color: #ffbdce; border-color: transparent; }
.fp-dna-grid { display: block; overflow: visible; }.fp-top-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.fp-top-row .fp-stat-box { padding: 14px 12px; min-width: 0; min-height: 110px; width: auto; border-radius: 14px; background: #1d1923; }.fp-stat-box-side .fp-stat-num { font: 750 29px/1.2 Inter,sans-serif; }.fp-stat-eyebrow { font: 600 9px/1.5 Inter,sans-serif; letter-spacing: .04em; }.fp-stat-foot { font-size: 10px; }.fp-stat-box-4 { grid-column: 2; grid-row: 1; }.fp-cta-box { grid-column: 1/-1; grid-row: 2; border-radius: 15px; padding: 18px; }.fp-cta-title { font: 700 19px/1.3 Inter,sans-serif; letter-spacing: -.03em; }.fp-cta-sub { font-size: 12px; line-height: 1.65; }.fp-cta-btn { font: 650 13px/1.4 Inter,sans-serif; min-height: 46px; border-radius: 11px; letter-spacing: 0; padding: 12px 18px; box-shadow: none; }.fp-react-compact { display: grid; gap: 6px; }.fp-react-pill { min-height: 44px; justify-content: center; font-size: 12px; }.fp-save-btn-new { min-height: 44px; font-size: 12px; border-radius: 9px; }
.fp-slider-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 17px; }.fp-cat-card { border-radius: 14px; padding: 16px; background: #1c1922; }.fp-cat-head { font: 650 12px/1.5 Inter,sans-serif; letter-spacing: .03em; padding-bottom: 12px; }.fp-cat-slider { padding: 12px 0; }.fp-cat-slider-meta { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 9px; gap: 5px; }.fp-cat-slider-name { grid-row: 1; grid-column: 1/-1; text-align: left; font-size: 13px; color: #e4d6e7; }.fp-cat-slider-end { grid-row: 2; font-size: 10px; white-space: normal; }.fp-taste-tags-grid { grid-template-columns: 1fr; }.fp-taste-tag-pill { font-size: 11px; padding: 7px 9px; }.fp-taste-tag-label { font-size: 12px; }
.discussion-shell { max-width: 680px; }.fd-panel-discussion { padding: 23px 16px; }.discussion-header h2 { font-size: 24px; }.discussion-header p { font-size: 13px; }.discussion-header .discussion-note { font-size: 11px; }.discussion-header > label { font-size: 12px; }.discussion-write { border-radius: 14px; }.discussion-write > summary { min-height: 54px; font-size: 14px; }.discussion-body { font-size: 14px; line-height: 1.8; }.discussion-shell button { min-height: 44px; }.discussion-actions > button { padding: 8px; font-size: 12px; }.discussion-replies { padding-left: 12px; margin-left: 0; }.discussion-comment-head time { font-size: 10px; }.discussion-spoiler { flex-wrap: wrap; }

/* Personal library: films first, with editing tools in sheets. */
.profile-workspace { padding: 22px 16px 35px; }.profile-hero { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding-bottom: 0; border: 0; align-items: center; }.profile-hero h1 { font: 750 28px/1.15 Inter,sans-serif; letter-spacing: -.04em; margin: 7px 0; overflow-wrap: anywhere; }.profile-hero p { font-size: 12px; line-height: 1.6; }.profile-hero .eyebrow { font-size: 9px; }.profile-hero > .mobile-secondary { min-width: 44px; font-size: 11px; padding: 10px; flex-direction: column; }.mobile-ready .profile-hero > .hero-actions { display: none; }
.profile-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); position: sticky; top: var(--mobile-top); z-index: 350; padding: 6px; margin: 20px 0 10px; gap: 3px; border: 1px solid #ffffff10; border-radius: 13px; background: #1d1b23f5; backdrop-filter: blur(15px); }.profile-tab { padding: 13px 3px; font: 600 11px/1.3 Inter,sans-serif; letter-spacing: 0; text-transform: none; min-height: 44px; }.profile-tab[aria-selected=true] { background: #44303d; border-radius: 8px; }.profile-tab[aria-selected=true]::after { display: none; }.profile-tab .count { margin-left: 3px; font-size: 10px; }.feedback { font-size: 12px; min-height: 0; }.feedback:empty { margin: 0; }
.mobile-library-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 17px 0; }.mobile-library-actions button { font-size: 13px; }
.mobile-ready #panel-top100 > .add-form, .mobile-ready #panel-top100 > .bulk-launch, .mobile-ready #panel-top100 > .bulk-panel, .mobile-ready #panel-top100 > .panel-header .panel-actions { display: none; }.panel-header { margin: 14px 0; }.panel-header h2 { font: 700 20px/1.3 Inter,sans-serif; }.panel-header p { font-size: 12px; line-height: 1.7; }.film-block { display: block; }.film-block-rail { justify-content: flex-start; padding: 0; margin: 8px 0; }.film-block-bracket { display: none; }.block-lock { min-height: 44px; width: auto; flex-direction: row; padding: 8px 12px; gap: 10px; border-radius: 9px; background: #201b24; }.block-lock b { font: 650 13px/1 Inter,sans-serif; }.block-lock span { font-size: 10px; text-transform: none; letter-spacing: 0; }
.film-row { grid-template-columns: 22px 44px minmax(0,1fr) 36px; gap: 9px; padding: 12px 9px; border-radius: 12px; background: #211b24; min-height: 89px; }.film-row .poster { width: 44px; height: 66px; border-radius: 6px; }.film-row .rank { font: 650 13px/1 Inter,sans-serif; }.film-title { font-size: 13px; line-height: 1.5; white-space: normal; }.film-line { font-size: 10px; white-space: normal; line-height: 1.6; }.rated { font-size: 9px; letter-spacing: 0; margin-top: 3px; }.film-row > .row-actions { display: none; }.mobile-row-actions { background: none; border: 0; color: #cfbbd0; width: 36px; min-height: 48px; padding: 0; font-size: 18px; }.mobile-sheet .row-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }.mobile-sheet .row-actions .drag-handle { display: none; }.mobile-sheet .row-actions button { width: 100%; min-height: 48px; border-radius: 10px; font-size: 14px; }.mobile-sheet .row-actions .move-button::after { content: attr(aria-label); margin-left: 10px; font: 550 14px/1 Inter,sans-serif; }
.mobile-sheet .hero-actions, .mobile-sheet .panel-actions { display: grid; grid-template-columns: 1fr; align-items: stretch; justify-content: stretch; gap: 10px; }.mobile-sheet .pw-button { min-height: 48px; font: 600 13px/1.4 Inter,sans-serif; text-transform: none; letter-spacing: 0; border-radius: 10px; }.mobile-sheet .progress-wrap { text-align: left; padding-bottom: 10px; }.mobile-sheet .add-form { grid-template-columns: minmax(0,1fr) 85px; padding: 0; background: none; border: 0; }.mobile-sheet .add-form button { grid-column: 1/-1; }.mobile-sheet .add-form input { border-radius: 10px; }.mobile-sheet .bulk-launch { display: block; }.mobile-sheet .bulk-launch span { display: block; margin-top: 8px; font-size: 12px; }.mobile-sheet .bulk-panel { border-radius: 12px; padding: 14px; }.account-drawer { margin-top: 23px; font-size: 12px; }.account-drawer .pw-button { min-height: 44px; }
.rank-dialog { width: 100%; max-width: 680px; height: 100dvh; max-height: 100dvh; margin: 0 auto; inset: 0; border: 0; border-radius: 0; background: #17131b; }.rank-dialog-inner { padding: max(16px,env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); }.rank-dialog-header { align-items: center; position: sticky; top: -16px; background: #17131bf5; z-index: 10; padding: 10px 0 14px; }.rank-dialog-header h2 { font: 700 23px/1.25 Inter,sans-serif; letter-spacing: -.035em; }.rank-dialog .pw-button { min-height: 44px; font: 600 12px/1.4 Inter,sans-serif; letter-spacing: 0; text-transform: none; border-radius: 10px; }.rank-mode-choice { grid-template-columns: 1fr; }.rank-mode-card { border-radius: 14px; padding: 18px; }.rank-quintet { display: flex; flex-direction: column; overflow: visible; gap: 9px; }.rank-quintet .rank-movie { display: grid; grid-template-columns: 46px minmax(0,1fr) auto; grid-template-rows: auto auto; min-height: 92px; padding: 10px; column-gap: 12px; border-radius: 12px; text-align: left; align-items: center; }.rank-quintet .rank-movie img, .rank-quintet .rank-movie-poster { width: 46px; height: 69px; grid-column: 1; grid-row: 1/3; }.rank-quintet .rank-movie h3 { grid-column: 2; grid-row: 1; font: 650 13px/1.4 Inter,sans-serif; letter-spacing: 0; text-transform: none; margin: 0; align-self: end; line-height: 1.4; }.rank-quintet .rank-movie p { grid-column: 2; grid-row: 2; font-size: 11px; align-self: start; margin-top: 5px; }.rank-quintet .rank-reorder-controls { grid-column: 3; grid-row: 1/3; flex-direction: column; padding: 0; gap: 5px; }.rank-reorder-controls button { min-height: 40px !important; width: 40px; }.rank-order-actions { position: sticky; bottom: 0; background: #17131bee; padding: 12px 0; }.rank-order-actions button { flex: 1; }.rank-pair { gap: 10px; }.rank-pair .rank-movie { border-radius: 13px; padding: 12px 6px; }.rank-pair .rank-movie img { width: 90px; height: 135px; }.rank-triplet { grid-template-columns: 1fr; gap: 10px; }.rank-triplet .rank-movie { display: grid; grid-template-columns: 60px 1fr; min-height: 105px; padding: 12px; gap: 5px 15px; border-radius: 12px; }.rank-triplet .rank-movie img { width: 60px; grid-column: 1; grid-row: 1/4; }.rank-triplet .rank-movie h3 { font-size: 14px; margin: 0; }.rank-triplet .rank-pick { margin: 0; }

/* Personal tools and reports retain their full controls, in a readable mobile flow. */
.mw-shell { padding: 22px 16px 30px; }.mw-header { display: block; }.mw-header h1 { font: 750 32px/1.2 Inter,sans-serif; letter-spacing: -.04em; }.mw-header p { font-size: 13px; }.mw-header > a.mw-button { min-height: 44px; }.mw-favourite { display: block; padding: 17px; margin: 20px 0; border-radius: 16px; }.mw-favourite p { font-size: 13px; }.mw-film-controls { gap: 8px; }.mw-workspace { display: flex; flex-direction: column; gap: 22px; }.mw-preview, .mw-assignments { width: 100%; }.mw-preview { position: static; max-height: none; overflow: visible; border-radius: 16px; padding: 18px; }.mw-board { grid-template-columns: 1fr; }.mw-category { border-radius: 14px; padding: 16px; }.mw-param { border-radius: 10px; padding: 14px; }.mw-param strong { font-size: 14px; }.mw-param .mw-param-info { font-size: 11px; }.mw-category h3 { font-size: 16px; }.mw-score-pair strong { font: 750 30px/1.3 Inter,sans-serif; }.mw-save-bar { position: static; display: block; padding: 18px; margin-bottom: 0; }.mw-save-actions { display: grid; grid-template-columns: 1fr; margin-top: 12px; }.mw-save-actions .mw-button { min-height: 48px; }.mw-mobile-preview { display: flex; position: sticky; bottom: var(--mobile-bottom); inset-inline: auto; border-radius: 12px; border: 1px solid #955165; margin-top: 15px; padding: 14px; font-size: 12px; z-index: 300; }
.dna-shell { padding: 18px 16px 30px; }.dna-hero { padding: 23px 18px; border-radius: 18px; }.dna-hero h1 { font: 750 34px/1.2 Inter,sans-serif; letter-spacing: -.05em; }.dna-hero p { font-size: 13px; }.dna-actions { display: grid; grid-template-columns: 1fr; }.dna-button { min-height: 46px; border-radius: 10px; display: inline-flex; justify-content: center; align-items: center; font-size: 12px; letter-spacing: 0; text-transform: none; }.dna-grid { grid-template-columns: 1fr; gap: 12px; }.dna-card, .dna-card.wide, .dna-card.half, .dna-card.full, .dna-grid .report-part { grid-column: 1; border-radius: 16px; padding: 18px; }.dna-card h2 { font: 700 21px/1.3 Inter,sans-serif; }.dna-grid .report-part h2 { font: 700 26px/1.3 Inter,sans-serif; letter-spacing: -.03em; text-transform: none; }.dna-note { font-size: 12px; line-height: 1.7; }.dna-card .film-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 12px; }.dna-card .film-chip { flex: 0 0 128px; scroll-snap-align: start; }.metric-row { grid-template-columns: minmax(85px,1fr) 1fr auto; gap: 8px; font-size: 12px; }.dna-card .genre-table { display: block; overflow-x: auto; max-width: 100%; }.dna-card .genre-table th, .dna-card .genre-table td { min-width: 60px; }.dna-card .genre-table th:first-child { min-width: 100px; }.slider-row { grid-template-columns: 1fr !important; gap: 8px; padding: 12px 0; }.slider-direction { text-align: left; }.example-grid, .archetype-parts { grid-template-columns: 1fr !important; }.mobile-report-jump { display: block; position: sticky; top: var(--mobile-top); z-index: 350; padding: 9px 0; background: #101014f5; }.mobile-report-jump select { width: 100%; padding: 12px; border-radius: 10px; background: #25202c; color: #eee4f1; border: 1px solid #ffffff25; }

/* Supporting journeys: forms, discovery tools, comparisons and account screens. */
body[data-page=movie_night] .content-wrapper > .container, body[data-page=compare_films] .content-wrapper > .container { padding: 0 16px; }
body[data-page=movie_night] .col-md-3, body[data-page=movie_night] .col-md-9 { width: 100%; }
body[data-page=movie_night] .card { background: #1b1922; border-radius: 15px; border-color: var(--mobile-line); box-shadow: none; }.mobile-night-launch { display: block; margin: 0 12px 20px; width: calc(100% - 24px); }.mobile-ready body[data-page=movie_night] .col-md-3 { display: none; }body[data-page=movie_night] .film-card .card-body { padding: 18px; }body[data-page=movie_night] .film-card .card-title { font-size: 18px; }body[data-page=movie_night] .film-card .d-flex > span:first-child { font-size: 12px; max-width: 72%; }.mobile-sheet #parameterForm label { font-size: 13px; }.mobile-sheet #parameterForm .text-muted { font-size: 12px; }
body[data-page=compare_films] .search-container, body[data-page=compare_films] .search-box { padding: 15px; width: 100%; border-radius: 15px; }.search-row { flex-direction: column; gap: 16px; }.search-field { width: 100%; min-width: 0; }.compare-button { width: 100%; }.search-results { max-height: 45dvh; }.search-results > * { min-height: 44px; }body[data-page=compare_films] #comparison-container > .row.g-3 > .col-lg-5 { width: 50%; }body[data-page=compare_films] #comparison-container > .row.g-3 > .col-lg-2 { display: none !important; }body[data-page=compare_films] .film-card { padding: 15px 10px; border-radius: 14px; }body[data-page=compare_films] .film-title { font: 650 15px/1.4 Inter,sans-serif; }body[data-page=compare_films] .overall-score { font-size: 30px; }.stats-summary { padding: 16px; }.stat-category { padding: 15px 0; }.parameter-comparison { overflow-x: auto; }.comparison-container table { font-size: 11px; }.comparison-container th, .comparison-container td { padding: 9px 5px; white-space: normal; }
body[data-page=login] .card, body[data-page=signup] .card, body[data-page=edit_profile] .card, body[data-page=forgot_password] .card, body[data-page=change_password] .card { border: 1px solid var(--mobile-line); border-radius: 18px; background: #1b1822; box-shadow: none; }body[data-page=login] .container, body[data-page=signup] .container, body[data-page=edit_profile] .container { padding: 24px 18px; }body[data-page=login] .card-body, body[data-page=signup] .card-body, body[data-page=edit_profile] .card-body { padding: 22px; }body[data-page=login] h1, body[data-page=signup] h1, body[data-page=edit_profile] h1 { font: 750 29px/1.2 Inter,sans-serif; letter-spacing: -.035em; }body[data-page=login] .form-label, body[data-page=signup] .form-label { font-size: 13px; }
@media (max-width: 360px) { .mobile-film-hero { grid-template-columns: 76px minmax(0,1fr); gap: 12px; padding-inline: 16px; }#mobile-film-art .fd-card-wrap { width: 76px; }#mobile-film-heading .fd-title { font-size: 21px; }.mobile-index-card { grid-template-columns: 18px 38px minmax(0,1fr) auto; gap: 7px; padding-inline: 9px; }.mobile-index-poster { width: 38px; height: 57px; }.mobile-index-score b { font-size: 17px; }.mobile-index-meta strong { font-size: 12px; }.mobile-film-actions .fd-title-actions { grid-template-columns: 1fr 1fr 1fr 40px; gap: 4px; } }
@media (orientation: landscape) and (max-height: 500px) { .mobile-film-hero { grid-template-columns: 65px minmax(0,1fr); padding-top: 15px; }#mobile-film-art .fd-card-wrap { width: 65px; }.mobile-discover-intro h1 { font-size: 34px; }.mobile-sheet { max-height: 100dvh; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }