* { margin: 0; padding: 0; box-sizing: border-box; }
        :root {
            --bg-dark: #0a0a0f;
            --bg-card: #1a1a22;
            --bg-input: #2a2a35;
            --accent-gold: #f0a030;
            --accent-green: #00cc66;
            --accent-blue: #4da6ff;
            --text-primary: #ffffff;
            --text-secondary: #a0a0b0;
            --border: #3a3a45;
        }
        body {
            font-family: 'Inter', sans-serif;
            background: var(--bg-dark);
            color: var(--text-primary);
            line-height: 1.6;
        }
        a { color: var(--accent-gold); text-decoration: none; }
        a:hover { text-decoration: underline; }

        .breadcrumb {
            max-width: 1000px;
            margin: 0 auto;
            padding: 16px 20px;
            font-size: 0.85rem;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }
        .breadcrumb a { color: var(--accent-gold); }
        .breadcrumb > span { min-width: 0; word-break: break-word; overflow-wrap: anywhere; }   /* the title in it may be one long word */
        .breadcrumb-search {
            display: flex;
            align-items: center;
            background: var(--bg-input);
            border: 1px solid #6f6f80;   /* was var(--border): 1.8 to 1 against the page, where a field's edge needs 3 */
            border-radius: 6px;
            overflow: hidden;
            flex-shrink: 0;
        }
        .breadcrumb-search input {
            background: transparent;
            border: none;
            color: var(--text-primary);
            font-size: 0.8rem;
            padding: 6px 10px;
            width: 140px;
            outline: none;
            font-family: 'Inter', sans-serif;
        }
        /* Visible keyboard-focus indicator (a11y/WCAG 2.4.7) — outline:none above
           removed the default with no replacement. */
        .breadcrumb-search:focus-within { box-shadow: 0 0 0 2px var(--accent-gold); border-radius: 6px; }
        .breadcrumb-search input:focus-visible { outline: none; }
        .breadcrumb-search input::placeholder { color: var(--text-secondary); opacity: 1; }
        .critics-tooltip-trigger:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 2px; border-radius: 4px; }
        .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
        .breadcrumb-search button {
            background: transparent;
            border: none;
            color: var(--text-secondary);
            padding: 6px 8px;
            cursor: pointer;
            font-size: 0.85rem;
            line-height: 1;
        }
        .breadcrumb-search button:hover { color: var(--accent-gold); }
        /* 16px on phones: iOS zooms the whole page when a field under 16px is focused (QA, 13 Oct) */
        @media (max-width: 768px) {
            .breadcrumb-search input { font-size: 16px; }
        }
        @media (max-width: 480px) {
            .breadcrumb-search input { width: 124px; }
        }

        .movie-page {
            max-width: 1000px;
            margin: 0 auto;
            padding: 0 20px 60px;
        }

        .movie-hero {
            display: flex;
            gap: 30px;
            margin-bottom: 30px;
        }

        .movie-poster-wrap {
            flex-shrink: 0;
            width: 280px;
        }
        .movie-poster {
            width: 100%;
            border-radius: 12px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.5);
        }

        .movie-details {
            flex: 1;
            min-width: 0;           /* may be narrower than its longest word: a title like "Window.Water.Raining.Moving.Landscape." made the page 462px wide on a 390px phone */
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .movie-title {
            font-family: 'Poppins', sans-serif;
            font-size: clamp(1.5rem, 3vw, 2.2rem);
            font-weight: 700;
            line-height: 1.2;
            word-break: break-word;  /* older iPhones */
            overflow-wrap: anywhere;
        }
        .movie-original-title {
            font-size: 0.95rem;
            color: var(--text-secondary);
            font-style: italic;
            word-break: break-word;
            overflow-wrap: anywhere;
        }
        .movie-tagline {
            font-size: 1rem;
            color: var(--accent-gold);
            font-style: italic;
            word-break: break-word;  /* beside the poster on a phone its column is 154 to 224 px: a long tagline made the */
            overflow-wrap: anywhere; /* page 462 px wide on a 390 px phone (Vanilla Sky; a review, 17 Oct) */
        }

        .scores-row {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }
        .score-box {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 16px 20px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            min-width: 140px;
        }
        .score-label {
            font-size: 0.75rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: 0.5px;
        }
        .score-number {
            font-family: 'Poppins', sans-serif;
            font-size: 1.8rem;
            font-weight: 700;
        }
        .score-number.thumbscore { color: var(--accent-green); }
        .score-number.critics { color: #ff6b6b; }
        .score-number.tmdb { color: var(--accent-blue); }
        .score-number.empty { color: var(--text-secondary); }
        .score-breakdown {
            font-size: 0.75rem;
            color: var(--text-secondary);
            font-weight: 400;
        }
        .critics-tooltip-trigger {
            position: relative;
            cursor: help;
        }
        .critics-tooltip-icon {
            font-size: 1em;            /* the caption's own size: at 0.9em it drew under 12px on a phone (14 Oct) */
            color: var(--text-secondary);
            transition: color 0.2s;
        }
        .critics-tooltip-trigger:hover .critics-tooltip-icon {
            color: var(--accent-gold);
        }
        .critics-tooltip-box {
            display: none;
            position: absolute;
            bottom: 130%;
            left: 50%;
            transform: translateX(-50%);
            background: #1a1a2e;
            color: #c0c0c8;
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 10px 14px;
            font-size: 0.8rem;
            line-height: 1.5;
            width: 280px;
            z-index: 100;
            box-shadow: 0 4px 16px rgba(0,0,0,0.6);
            font-weight: 400;
            font-style: normal;
            white-space: normal;
        }
        .critics-tooltip-trigger:hover .critics-tooltip-box,
        .critics-tooltip-trigger.active .critics-tooltip-box {
            display: block;
        }

        .trailer-section {
            margin-top: 12px;
        }
        .trailer-btn {
            background: linear-gradient(135deg, #ff0000, #cc0000);
            color: #fff;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all 0.2s;
        }
        .trailer-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(255, 0, 0, 0.3);
        }
        .trailer-play {
            font-size: 1.2rem;
        }
        .trailer-wrap {
            position: relative;
            padding-bottom: 56.25%;
            height: 0;
            border-radius: 12px;
            overflow: hidden;
            margin-top: 12px;
        }
        .trailer-wrap iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .streaming-section {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 20px 24px;
        }
        .streaming-title {
            font-family: 'Poppins', sans-serif;
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 12px;
            color: var(--accent-gold);
        }
        .streaming-pills {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        .wp-pill {
            display: inline-flex;
            align-items: center;
            padding: 10px 18px;
            border-radius: 8px;
            font-size: 0.9rem;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.2s;
            cursor: pointer;
        }
        .wp-pill:hover {
            transform: translateY(-2px);
            text-decoration: none;
            filter: brightness(1.2);
        }
        .wp-free {
            background: rgba(0, 204, 102, 0.15);
            color: #00cc66;
            border: 1px solid rgba(0, 204, 102, 0.3);
        }
        .wp-sub {
            background: rgba(77, 166, 255, 0.1);
            color: #7ab8ff;
            border: 1px solid rgba(77, 166, 255, 0.25);
        }
        .wp-rent {
            background: rgba(240, 160, 48, 0.1);
            color: var(--accent-gold);
            border: 1px solid rgba(240, 160, 48, 0.25);
        }

        .meta-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 16px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 20px;
        }
        .meta-item {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .ranks-note {
            font-size: 0.8rem;
            color: var(--text-secondary);
            margin: 8px 0 0;
        }
        .meta-label {
            font-size: 0.75rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: 0.5px;
        }
        .meta-value {
            font-size: 0.95rem;
        }
        /* a link inside a line of text is underlined, so it is told apart without its colour (WCAG 1.4.1; the
           gold on grey was 2.14:1 against the text around it, under the 3:1 a colour alone needs; 16 Oct) */
        .meta-value a {
            text-decoration: underline;
            text-underline-offset: 2px;
        }

        .cast-section {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 20px 24px;
        }
        .cast-title {
            font-family: 'Poppins', sans-serif;
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 12px;
            color: var(--accent-gold);
        }
        .cast-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px 24px;
        }
        .cast-member {
            font-size: 0.9rem;
            line-height: 1.4;
        }
        .cast-actor {
            color: var(--accent-gold);
            font-weight: 500;
            text-decoration: none;
        }
        a.cast-actor:hover {
            text-decoration: underline;
        }
        .cast-name {
            font-weight: 500;
        }
        .cast-character {
            color: var(--text-secondary);
        }
        @media (max-width: 680px) {
            .cast-grid {
                grid-template-columns: 1fr;
            }
        }

        .overview-section {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 24px;
        }
        .overview-title {
            font-family: 'Poppins', sans-serif;
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 10px;
            color: var(--accent-gold);
        }
        .overview-text {
            color: var(--text-secondary);
            font-size: 0.95rem;
            line-height: 1.7;
        }
        .overview-text p {
            margin: 0 0 1em 0;
        }
        .overview-text p:last-child {
            margin-bottom: 0;
        }

        .genre-tags {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }
        .film-tag {
            background: rgba(240, 160, 48, 0.15);
            color: var(--accent-gold);
            padding: 4px 12px;
            border-radius: 6px;
            font-weight: 500;
            font-size: 0.8rem;
        }

        .ext-links {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        .ext-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            border-radius: 8px;
            font-size: 0.85rem;
            font-weight: 600;
            transition: all 0.2s;
        }
        .wiki-link {
            background: rgba(255, 255, 255, 0.1);
            color: #e0e0e0;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .wiki-link:hover { background: rgba(255, 255, 255, 0.2); text-decoration: none; }

        .rate-cta {
            display: block;
            margin: 4px 0 16px;
            padding: 12px 16px;
            border: 1px solid var(--accent-gold);
            border-radius: 10px;
            background: rgba(240, 160, 48, 0.07);
            color: inherit;
            text-decoration: none;
            max-width: 520px;
        }
        .rate-cta:hover { background: rgba(240, 160, 48, 0.15); text-decoration: none; }
        .rate-cta strong { display: block; color: var(--accent-gold); font-size: 0.95rem; }
        .rate-cta span { display: block; color: #b8b8c0; font-size: 0.8rem; margin-top: 3px; line-height: 1.4; }
        .rate-cta.mine strong { font-size: 1.05rem; }
        .rate-cta em { display: block; font-style: normal; color: var(--accent-gold); font-size: 0.78rem; margin-top: 6px; }
        .rate-cta button { margin-top: 10px; background: var(--accent-gold); color: #111; border: 0; border-radius: 7px; padding: 8px 16px; font-weight: 700; cursor: pointer; }

        .share-row {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            align-items: center;
        }
        .share-btn {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 6px 14px;
            border-radius: 6px;
            font-size: 0.78rem;
            font-weight: 600;
            border: 1px solid var(--border);
            background: var(--bg-input);
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.2s;
            text-decoration: none;
            font-family: 'Inter', sans-serif;
            line-height: 1;
        }
        .share-btn:hover {
            background: rgba(255,255,255,0.12);
            color: var(--text-primary);
            text-decoration: none;
        }
        .share-btn svg {
            width: 14px;
            height: 14px;
            fill: currentColor;
            flex-shrink: 0;
        }

        .similar-section {
            margin-top: 30px;
        }
        .similar-title {
            font-family: 'Poppins', sans-serif;
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--accent-gold);
            margin-bottom: 14px;
        }
        .similar-row {
            display: flex;
            gap: 14px;
            overflow-x: auto;
            padding-bottom: 10px;
            scrollbar-width: thin;
            scrollbar-color: var(--border) transparent;
        }
        .similar-row::-webkit-scrollbar { height: 6px; }
        .similar-row::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
        .similar-card {
            flex: 0 0 120px;
            text-decoration: none;
            color: var(--text-primary);
            transition: transform 0.2s;
        }
        .similar-card:hover {
            transform: translateY(-4px);
            text-decoration: none;
        }
        .similar-card img {
            width: 120px;
            height: 180px;
            object-fit: cover;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.4);
        }
        .similar-card .similar-card-title {
            font-size: 0.75rem;
            margin-top: 6px;
            line-height: 1.3;
            color: var(--text-secondary);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .similar-card .similar-card-score {
            font-size: 0.75rem;
            color: var(--accent-green);
            font-weight: 600;
            margin-top: 2px;
        }
        @media (min-width: 681px) {
            .similar-row {
                flex-wrap: wrap;
                overflow-x: visible;
            }
        }

        .back-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: var(--accent-gold);
            font-weight: 600;
            font-size: 0.9rem;
            margin-top: 20px;
        }

        @media (max-width: 680px) {
            /* a phone: the poster small at the left with the title beside it, then the scores, the tags and the rating
               box the page's full width (17 Oct: the 200 px poster stacked above everything put the one-tap thumbs at
               954 px on a 390x844 phone, below the first screen; this puts them about 380 px higher). The details'
               own box gives way (display: contents) so its parts join the poster's grid; it carries no meaning of
               its own for a screen reader, so nothing is lost there. */
            .movie-hero {
                display: grid;
                grid-template-columns: 112px minmax(0, 1fr);
                column-gap: 14px;
                row-gap: 14px;
                align-items: start;
                text-align: left;
            }
            .movie-poster-wrap { width: 112px; grid-column: 1; grid-row: 1 / span 3; }
            .movie-details { display: contents; }
            .movie-details > * { grid-column: 1 / -1; min-width: 0; }
            .movie-details > .movie-title, .movie-details > .movie-original-title, .movie-details > .movie-tagline { grid-column: 2; }
            .movie-title { font-size: 1.4rem; }
            .movie-tagline { font-size: 0.95rem; }
            /* the breadcrumb, one line: a long title in it wrapped one way in the phone's font and another in Inter,
               and the whole page under it moved 22 px when the fonts arrived (0.19 on Crouching Tiger at 390 px). The
               title is the page's heading just below, so cutting it short here with "..." loses nothing */
            .breadcrumb > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 12px 4px; margin: -12px -4px; }
            /* (the padding, taken back by the margin, keeps the ThumbScore link's own 12 px of tap area and its focus
               ring inside what the clipping shows: without it the link was 22 px tall; a review, 17 Oct) */
            .breadcrumb-search { height: 34px; }
            /* the cookie notice, one row on a phone (its words and its two controls as they are): two rows, about 90 px,
               sat over the rating box's first thumbs on a 375x667 phone's first visit (17 Oct). Its styles are inline,
               hence !important */
            #cookie-banner { padding: 8px 14px !important; }
            #cookie-banner > div { flex-wrap: nowrap !important; gap: 10px !important; }
            #cookie-banner > div > div { flex-shrink: 0; align-items: center; }
            /* the two scores share one row whatever font is showing (17 Oct: drawn first in the phone's font they fit
               side by side; Inter and Poppins, arriving about 1.6 s later on a slow phone, are wider, the second box
               wrapped, and everything under it, the rating box too, dropped 151 px: a layout shift of 0.061 on every
               film page, and the rating box pushed below the first screen) */
            .scores-row { flex-wrap: nowrap; gap: 12px; }
            .score-box { flex: 1 1 0; min-width: 0; padding: 14px 12px; }
            /* the critics note's 280 px box, centred on its "i" in the right-hand box, would hang off the screen: on a
               phone it takes the row's own width, above the row */
            .scores-row { position: relative; }
            .critics-tooltip-trigger { position: static; }
            .critics-tooltip-box { left: 0; right: 0; width: auto; transform: none; bottom: calc(100% + 8px); }
            .genre-tags, .share-row, .ext-links { justify-content: flex-start; }
            .meta-grid { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 389px) {
            /* under each score its small caption ("Google users liked it", the critics' breakdown) fits one line in a
               phone's own font at 375 px but takes two in Inter, so the row grew 19 px when the fonts arrived: below
               390 px it keeps room for two lines in either font */
            .score-box > span:not(.score-number) { min-height: 3.5em; }
        }

        /* Reddit discussions section */
        .reddit-section {
            margin: 20px 0;
        }
        .reddit-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 16px;
        }
        .reddit-header h2 {
            font-family: 'Poppins', sans-serif;
            font-size: 1.3rem;
            font-weight: 700;
            color: #fff;
            margin: 0;
        }
        .reddit-icon {
            width: 28px;
            height: 28px;
            background: #d93a00;      /* Reddit's orange darkened to 4.61:1 with the white "r/" (it was 3.44:1; 16 Oct) */
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
            color: #fff;
            font-weight: 700;
        }
        .reddit-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 16px 20px;
            margin-bottom: 12px;
            transition: border-color 0.2s;
            overflow-wrap: anywhere;   /* a long word or address from Reddit breaks, not the page (21 Oct) */
        }
        .reddit-card:hover {
            border-color: #ff4500;
        }
        .reddit-card-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
            flex-wrap: wrap;
        }
        .reddit-subreddit {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 600;
            background: rgba(255, 69, 0, 0.12);
            color: #ff6a33;
            border: 1px solid rgba(255, 69, 0, 0.25);
        }
        .reddit-meta {
            font-size: 0.75rem;
            color: #a0a0b0;
            display: flex;
            gap: 12px;
        }
        .reddit-meta span { display: flex; align-items: center; gap: 4px; }
        .reddit-post-title {
            font-family: 'Poppins', sans-serif;
            font-size: 0.95rem;
            font-weight: 600;
            color: #fff;
            margin-bottom: 6px;
            line-height: 1.4;
        }
        .reddit-teaser {
            font-size: 0.85rem;
            color: var(--text-secondary);
            line-height: 1.5;
            margin-bottom: 10px;
        }
        .reddit-link {
            font-size: 0.82rem;
            font-weight: 600;
            color: #ff4500;
            text-decoration: none;
            transition: color 0.2s;
        }
        .reddit-link:hover { color: #ff6a33; }
        .reddit-top-comment {
            font-size: 0.8rem;
            color: #a0a0b0;
            line-height: 1.4;
            padding: 8px 12px;
            background: rgba(255, 255, 255, 0.03);
            border-left: 2px solid #ff4500;
            border-radius: 0 6px 6px 0;
            margin-top: 6px;
        }
    .skip-link { position:absolute;top:-40px;left:0;background:#f0a030;color:#000;padding:8px 16px;z-index:10000;font-size:0.85rem;font-weight:600;transition:top 0.3s; }
    .skip-link:focus { top:0!important; }
    .wp-row {display:flex;justify-content:space-between;align-items:center;padding:6px 12px;border-bottom:1px solid var(--border-light);}
    .wp-info {display:flex;align-items:center;gap:6px;}
    .wp-name {font-weight:500;font-size:0.85rem;}
    .wp-badge {font-size:0.75rem;padding:2px 6px;border-radius:3px;font-weight:600;}
    .wp-btn {color:#fff;padding:4px 10px;border-radius:5px;text-decoration:none;font-size:0.78rem;font-weight:600;}
    @media(max-width:768px) { nav a, .breadcrumb a { padding:12px 8px!important; } nav a { margin:0 1px!important; } }
    /* the footer on a phone: two columns, links tall enough to tap (16px tall in one column; QA, 14 Oct) */
    @media(max-width:600px) { .ts-foot-grid { grid-template-columns:1fr 1fr!important; gap:20px 16px!important; } .ts-foot-grid li { margin-bottom:0!important; } .ts-foot-grid a { display:inline-block; padding:12px 0; } }