/* =========================================================================
GeeKPress Limelight — geekui-movie.css
SKELETON BREAK Layer 2 (structural skin for #geekui-root-movie / -tv /
-episode).
Moves:
· .geekui-title-header recomposed as a THEATRICAL STAGE: the backdrop
dims under a spotlight mask, the poster shrinks to a playbill panel
bottom-anchored beside a giant champagne serif title; a curtain
scallop closes the band.
· .geekui-tabs become a centred ticket strip (mono, one-line scroll).
· Right-rail .geekui-title-card boxes, critics, episodes, epnav, rc
countdown, galleries and the write form all take the limelight motif:
double hairline panels, beams, ACT-style labels, gold actives.
Colors/fonts come ONLY from the --geekui-* tokens (vars file).
========================================================================= */
/* NOTE: no overflow-x clip on the roots — the hero breaks out to 100vw
(full-bleed backdrop); the page-level clip lives on html/body. */
#geekui-root-movie, #geekui-root-tv, #geekui-root-episode { font-family: var(--geekui-font-base); }
/* page-private champagne ink — re-binds for light (matinée) mode.
The hex score badges keep their own plate/ink tokens so light palettes
(Sunwood) can keep the badge DARK while the page ink flips. */
#geekui-root-movie, #geekui-root-tv, #geekui-root-episode {
--lmlx-champagne: var(--lml-cream);
--lmlx-champagne-line: rgba(var(--lml-cream-rgb), 0.35);
--lml-hex-1: #142a21;
--lml-hex-2: #0c1b15;
--lml-hex-3: #081311;
--lml-hex-ink: var(--lml-text);
--lml-hex-num: var(--lmlx-champagne, #f0e3c4);
}
body[data-theme="light"] #geekui-root-movie,
body[data-theme="light"] #geekui-root-tv,
body[data-theme="light"] #geekui-root-episode { --lmlx-champagne: #4f421d; --lmlx-champagne-line: rgba(110, 88, 32, 0.45); }
/* plugin base ships `.geekui a{color:#619184!important}` — out-specify it */
#geekui-root-movie a, #geekui-root-tv a, #geekui-root-episode a { color: var(--geekui-accent) !important; }
#geekui-root-movie a:hover, #geekui-root-tv a:hover, #geekui-root-episode a:hover { color: var(--geekui-accent-2) !important; }
#geekui-root-movie a.geekp-link-style-ignore, #geekui-root-movie .geekp-link-style-ignore a,
#geekui-root-tv a.geekp-link-style-ignore, #geekui-root-tv .geekp-link-style-ignore a,
#geekui-root-episode a.geekp-link-style-ignore, #geekui-root-episode .geekp-link-style-ignore a { color: inherit !important; }
/* ---------- title header: the stage ---------- */
/* FULL-BLEED backdrop hero — ROBUST version: the header STAYS IN FLOW at
the content width (single coordinate system → no drift at any browser
zoom); only its ::before/::after paint edge-to-edge. The plugin puts the
backdrop as an inline background-image on the header: we hide it on the
element itself (background-size 0) and repaint it on ::before via
`background: inherit`, stretched to the full viewport. ::after carries
the vertical ramp that melts it into the page background. */
#geekui-root-movie .geekui-title-header,
#geekui-root-tv .geekui-title-header,
#geekui-root-episode .geekui-title-header {
position: relative;
z-index: 0; /* own stacking context so the z:-1 pseudos stay inside */
border: 0 !important;
border-radius: 0 !important;
background-color: transparent;
background-size: 0 0 !important; /* hide the inline image on the box itself */
overflow: visible;
}
#geekui-root-movie .geekui-title-header::before,
#geekui-root-tv .geekui-title-header::before,
#geekui-root-episode .geekui-title-header::before {
content: '';
position: absolute;
top: 0; bottom: 0;
left: calc(50% - 50vw);
width: 100vw;
z-index: -1;
background: inherit; /* picks up the plugin's inline backdrop image */
background-color: var(--geekui-bg);
background-size: cover !important;
background-position: center top !important;
background-repeat: no-repeat !important;
pointer-events: none;
}
#geekui-root-movie .geekui-title-header::after,
#geekui-root-tv .geekui-title-header::after,
#geekui-root-episode .geekui-title-header::after {
content: '';
position: absolute;
top: 0; bottom: 0;
left: calc(50% - 50vw);
width: 100vw;
z-index: -1;
background: linear-gradient(180deg,
rgba(var(--lml-bg-rgb), 0.34) 0%,
rgba(var(--lml-bg-rgb), 0.44) 32%,
rgba(var(--lml-bg-rgb), 0.60) 58%,
rgba(var(--lml-bg-rgb), 0.84) 80%,
var(--geekui-bg) 97%);
pointer-events: none;
}
/* the plugin's own mask div is replaced by the ::after ramp */
#geekui-root-movie .geekui-title-header-mask,
#geekui-root-tv .geekui-title-header-mask,
#geekui-root-episode .geekui-title-header-mask { display: none !important; }
/* curtain scallop — removed by request (no scallop decorations in the theme) */
/* content regrid — IMAGE SPEC: framed poster card LEFT, masthead RIGHT,
and the rating widget stretched into a full-width SCORE BAND below. */
/* TWO-COLUMN SPEC: the left column is exactly as wide as the side-rail
cards (260px) and runs poster → favourite/watchlist/watched → write a
review → add to list, then continues into the BOX OFFICE / DETAILS rail
below (same 260px column in .geekui-title-content). The right column is
the masthead, then the score band directly under the crew lines.
Gutters use the full-bleed pattern so the inner 1224px column lines up
with .lml-site-content's content box. */
#geekui-root-movie .geekui-title-header-content,
#geekui-root-tv .geekui-title-header-content,
#geekui-root-episode .geekui-title-header-content {
grid-template-columns: 260px minmax(0, 1fr);
/* the rating stack (hexes → stars → actions → write → add-to-list) is
CONFINED to the poster column; col2 row2 stays empty so the tab
strip below can pull up right under the crew lines. */
grid-template-areas:
"media masthead"
"rate .";
gap: 14px 26px;
align-items: start;
max-width: none;
margin: 0;
/* header is IN FLOW at content width — no gutter calc needed */
padding: 48px 0 16px;
}
#geekui-root-movie .geekui-title-header-media,
#geekui-root-tv .geekui-title-header-media,
#geekui-root-episode .geekui-title-header-media {
grid-area: media;
align-self: start;
background: linear-gradient(180deg, var(--geekui-surface) 0%, var(--geekui-bg-2) 100%);
border: 1px solid var(--geekui-border-strong);
border-radius: var(--geekui-radius-lg);
padding: 10px;
box-shadow: var(--geekui-card-shadow);
}
#geekui-root-movie .geekui-title-header-content > div:nth-child(2),
#geekui-root-tv .geekui-title-header-content > div:nth-child(2),
#geekui-root-episode .geekui-title-header-content > div:nth-child(2) {
grid-area: masthead;
text-align: left;
display: block;
padding-top: 4px;
}
/* "NOW SHOWING" etiquette — removed by request */
#geekui-root-movie .geekui-title-header-sum,
#geekui-root-tv .geekui-title-header-sum,
#geekui-root-episode .geekui-title-header-sum { max-width: 64ch; }
/* crew rows: mono gold labels (image: DIRECTOR / WRITERS) */
#geekui-root-movie .geekui-title-header-crew span,
#geekui-root-tv .geekui-title-header-crew span,
#geekui-root-episode .geekui-title-header-crew span {
font-family: var(--geekui-font-mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--geekui-accent);
opacity: 1;
}
/* READ MORE pill links (Details / Cast / Filmmakers) — removed by request */
#geekui-root-movie .geekui-title-header-readmore,
#geekui-root-tv .geekui-title-header-readmore,
#geekui-root-episode .geekui-title-header-readmore { display: none !important; }
/* the rating widget becomes the SCORE BAND.
TRAP: the plugin wraps .geekui-rating in a BARE div — that wrapper is
the actual grid item, so the grid-area must go on the wrapper
(grid-area on .geekui-rating itself is inert → the wrapper auto-flowed
into the 230px poster column and the whole panel clipped). */
#geekui-root-movie .geekui-title-header-content > div:nth-child(3),
#geekui-root-tv .geekui-title-header-content > div:nth-child(3),
#geekui-root-episode .geekui-title-header-content > div:nth-child(3) {
grid-area: rate;
min-width: 0;
}
/* the rating widget is a single 260px stack under the poster:
hexes → vote stars → actions → write → add-to-list */
#geekui-root-movie .geekui-rating,
#geekui-root-tv .geekui-rating,
#geekui-root-episode .geekui-rating {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"stats"
"stars"
"actions"
"write"
"addlist";
gap: 12px;
align-items: start;
/* the whole stack lives in ONE gilt card (user spec) */
background: linear-gradient(180deg, var(--geekui-surface) 0%, var(--geekui-bg-2) 100%) !important;
border: 1px solid rgba(var(--lml-lime-rgb), 0.26) !important;
border-radius: 12px !important;
box-shadow: var(--geekui-card-shadow) !important;
padding: 16px 14px !important;
}
/* vote stars — poster-width row under the hexes */
#geekui-root-movie .geekui-rating-star,
#geekui-root-tv .geekui-rating-star,
#geekui-root-episode .geekui-rating-star {
width: 100%;
justify-content: center;
margin-bottom: 0 !important;
gap: 4px;
}
#geekui-root-movie .geekui-rating-star .geekui-write-stars,
#geekui-root-tv .geekui-rating-star .geekui-write-stars,
#geekui-root-episode .geekui-rating-star .geekui-write-stars {
font-size: 19px;
letter-spacing: 1px;
white-space: nowrap;
}
#geekui-root-movie .geekui-rating-statistic,
#geekui-root-tv .geekui-rating-statistic,
#geekui-root-episode .geekui-rating-statistic {
grid-area: stats;
display: flex !important;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0;
border: 0;
padding: 0;
min-width: 0;
}
/* hexagon badges (user / critic) — reference art: UPRIGHT pointy-top hex,
double luminous gold line with corner sparkles (inline-SVG background),
deep-green inner glow, GP eyebrow, big serif score, mono uppercase label */
#geekui-root-movie .geekui-rating-statistic > div,
#geekui-root-tv .geekui-rating-statistic > div,
#geekui-root-episode .geekui-rating-statistic > div {
position: relative;
width: 130px;
aspect-ratio: 0.866; /* regular pointy-top hexagon */
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
background:
url("data:image/svg+xml;utf8,") center / 100% 100% no-repeat,
radial-gradient(58% 46% at 50% 36%, var(--lml-hex-1) 0%, var(--lml-hex-2) 48%, var(--lml-hex-3) 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 0 14px;
text-align: center;
/* the label line under the number reads as mono micro-caps */
font-family: var(--geekui-font-mono);
font-size: 8.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--lml-hex-ink);
filter: drop-shadow(0 0 14px rgba(var(--lml-lime-rgb), 0.22)) drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45));
}
/* critic hexagon a notch smaller than the user one */
#geekui-root-movie .geekui-rating-statistic > div:last-child,
#geekui-root-tv .geekui-rating-statistic > div:last-child,
#geekui-root-episode .geekui-rating-statistic > div:last-child {
width: 112px;
font-size: 8px;
}
/* the big serif score — champagne with a soft gold halo; star hidden
(the reference badge carries no star glyph) */
#geekui-root-movie .geekui-rating-statistic .geekui-rating-statistic-star,
#geekui-root-tv .geekui-rating-statistic .geekui-rating-statistic-star,
#geekui-root-episode .geekui-rating-statistic .geekui-rating-statistic-star { display: none !important; }
#geekui-root-movie .geekui-rating-statistic-rating,
#geekui-root-tv .geekui-rating-statistic-rating,
#geekui-root-episode .geekui-rating-statistic-rating {
font-size: 32px !important;
line-height: 1 !important;
letter-spacing: 0.01em;
color: var(--lml-hex-num) !important;
text-shadow: 0 0 18px rgba(var(--lml-lime-rgb), 0.45), 0 2px 8px rgba(0, 0, 0, 0.5);
}
#geekui-root-movie .geekui-rating-statistic-critic,
#geekui-root-tv .geekui-rating-statistic-critic,
#geekui-root-episode .geekui-rating-statistic-critic {
font-size: 25px !important;
line-height: 1 !important;
color: var(--lml-hex-num) !important;
text-shadow: 0 0 14px rgba(var(--lml-lime-rgb), 0.4), 0 2px 8px rgba(0, 0, 0, 0.5);
}
#geekui-root-movie .geekui-title-header-poster,
#geekui-root-tv .geekui-title-header-poster,
#geekui-root-episode .geekui-title-header-poster {
width: 100%;
height: auto;
aspect-ratio: 2 / 3;
border: 1px solid var(--geekui-border);
border-radius: calc(var(--geekui-radius-lg) - 4px);
background-color: var(--geekui-surface);
}
/* IMDb chip — mute the hardcoded yellow into a champagne etiquette */
#geekui-root-movie .geekui-title-header-imdb a,
#geekui-root-tv .geekui-title-header-imdb a,
#geekui-root-episode .geekui-title-header-imdb a {
display: flex !important;
justify-content: center;
width: 100%;
background: rgba(var(--lml-cream-rgb), 0.07) !important;
border: 1px solid var(--lmlx-champagne-line);
color: var(--lmlx-champagne) !important;
font-family: var(--geekui-font-mono);
font-size: 11px !important;
letter-spacing: 0.16em;
text-transform: uppercase;
border-radius: 4px !important;
}
#geekui-root-movie .geekui-title-header-title,
#geekui-root-tv .geekui-title-header-title,
#geekui-root-episode .geekui-title-header-title {
font-family: var(--geekui-font-title) !important;
font-weight: 400 !important;
font-size: clamp(34px, 4.6vw, 64px);
line-height: 1.08;
letter-spacing: 0.005em;
color: var(--lmlx-champagne);
text-shadow: var(--geekui-hero-text-shadow);
text-wrap: balance;
}
#geekui-root-movie .geekui-title-header-info,
#geekui-root-tv .geekui-title-header-info,
#geekui-root-episode .geekui-title-header-info {
font-family: var(--geekui-font-mono);
font-size: 12.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--geekui-text-dim);
}
#geekui-root-movie .geekui-title-header-sum,
#geekui-root-tv .geekui-title-header-sum,
#geekui-root-episode .geekui-title-header-sum {
color: var(--geekui-text-dim);
max-width: 64ch;
line-height: 1.7;
}
#geekui-root-movie .geekui-title-header-crew,
#geekui-root-tv .geekui-title-header-crew,
#geekui-root-episode .geekui-title-header-crew { color: var(--geekui-text-dim); }
#geekui-root-movie .geekui-title-header-crew b,
#geekui-root-tv .geekui-title-header-crew b { color: var(--geekui-text); }
#geekui-root-movie .geekui-title-header-imdb,
#geekui-root-tv .geekui-title-header-imdb,
#geekui-root-episode .geekui-title-header-imdb {
border: 1px solid var(--geekui-border-strong) !important;
border-radius: 4px !important;
background: rgba(var(--lml-cream-rgb), 0.08) !important;
color: var(--lmlx-champagne) !important;
font-family: var(--geekui-font-mono) !important;
}
/* (readmore typography removed with the pills) */
/* ---------- rating playbill panel (third header column) ---------- */
/* — left lane — */
#geekui-root-movie .geekui-rating-actions,
#geekui-root-tv .geekui-rating-actions,
#geekui-root-episode .geekui-rating-actions {
grid-area: actions;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
width: 100%;
}
#geekui-root-movie .geekui-rating-write,
#geekui-root-tv .geekui-rating-write,
#geekui-root-episode .geekui-rating-write {
grid-area: write;
display: flex !important;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
margin: 0 !important;
padding: 11px 14px;
border: 1px solid rgba(var(--lml-lime-rgb), 0.34) !important;
border-radius: 8px !important;
background: rgba(var(--lml-surface-rgb), 0.72) !important;
}
#geekui-root-movie .geekui-rating-write:hover,
#geekui-root-tv .geekui-rating-write:hover,
#geekui-root-episode .geekui-rating-write:hover { border-color: var(--geekui-accent) !important; color: var(--geekui-accent) !important; }
#geekui-root-movie .geekui-rating > div:last-child,
#geekui-root-tv .geekui-rating > div:last-child,
#geekui-root-episode .geekui-rating > div:last-child {
grid-area: addlist;
height: auto !important;
margin-bottom: 0 !important;
width: 100%;
}
/* — score lane: stars row + hexagon user/critic ratings side by side — */
#geekui-root-movie .geekui-rating-star,
#geekui-root-tv .geekui-rating-star,
#geekui-root-episode .geekui-rating-star {
grid-area: stars;
display: flex;
align-items: center;
min-height: 0;
}
#geekui-root-movie .geekui-rating-statistic-star,
#geekui-root-tv .geekui-rating-statistic-star,
#geekui-root-episode .geekui-rating-statistic-star { color: var(--lmlx-champagne); }
#geekui-root-movie .geekui-rating-statistic-rating,
#geekui-root-movie .geekui-rating-statistic-critic,
#geekui-root-tv .geekui-rating-statistic-rating,
#geekui-root-tv .geekui-rating-statistic-critic,
#geekui-root-episode .geekui-rating-statistic-rating,
#geekui-root-episode .geekui-rating-statistic-critic {
font-family: var(--geekui-font-title);
font-weight: 400;
color: var(--geekui-text);
}
#geekui-root-movie .geekui-rating-statistic-info,
#geekui-root-tv .geekui-rating-statistic-info,
#geekui-root-episode .geekui-rating-statistic-info { font-family: var(--geekui-font-mono); font-size: 11px; }
#geekui-root-movie .geekui-rating-write,
#geekui-root-tv .geekui-rating-write,
#geekui-root-episode .geekui-rating-write {
font-family: var(--geekui-font-mono);
font-size: 11.5px;
color: var(--geekui-text-dim) !important;
}
#geekui-root-movie .geekui-rating-actions > div,
#geekui-root-tv .geekui-rating-actions > div,
#geekui-root-episode .geekui-rating-actions > div {
border: 1px solid rgba(var(--lml-lime-rgb), 0.34) !important;
border-radius: 8px !important;
background: rgba(var(--lml-surface-rgb), 0.72) !important;
backdrop-filter: blur(3px);
color: var(--geekui-text-dim);
transition: border-color 0.15s, color 0.15s;
}
#geekui-root-movie .geekui-rating-actions > div:hover,
#geekui-root-tv .geekui-rating-actions > div:hover,
#geekui-root-episode .geekui-rating-actions > div:hover { border-color: var(--geekui-accent) !important; }
#geekui-root-movie .geekui-rating-actions > div.active,
#geekui-root-tv .geekui-rating-actions > div.active,
#geekui-root-episode .geekui-rating-actions > div.active {
border-color: var(--geekui-accent) !important;
color: var(--geekui-accent);
background: rgba(var(--lml-lime-rgb), 0.08) !important;
}
#geekui-root-movie .geekui-rating-list,
#geekui-root-tv .geekui-rating-list,
#geekui-root-episode .geekui-rating-list {
justify-content: center;
gap: 8px;
padding: 10px 18px;
border: 1px solid var(--geekui-accent) !important;
border-radius: 4px !important;
background: rgba(var(--lml-lime-rgb), 0.06) !important;
color: var(--geekui-accent) !important;
font-family: var(--geekui-font-mono);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
font-size: 11.5px;
cursor: pointer;
}
#geekui-root-movie .geekui-rating-list:hover,
#geekui-root-tv .geekui-rating-list:hover,
#geekui-root-episode .geekui-rating-list:hover { background: rgba(var(--lml-lime-rgb), 0.14) !important; }
#geekui-root-movie .geekui-write-cancel-rate,
#geekui-root-tv .geekui-write-cancel-rate,
#geekui-root-episode .geekui-write-cancel-rate {
border: 1px solid var(--geekui-border-strong);
border-radius: 50%;
background: var(--geekui-bg-2);
color: var(--geekui-text-dim);
cursor: pointer;
}
/* mobile header (≤800px swaps in .geekui-title-header-mobile) */
#geekui-root-movie .geekui-title-header-mobile .geekui-title-header-poster,
#geekui-root-tv .geekui-title-header-mobile .geekui-title-header-poster,
#geekui-root-episode .geekui-title-header-mobile .geekui-title-header-poster { width: 100%; height: auto; aspect-ratio: 2 / 3; }
/* ---------- tabs: centred ticket strip ---------- */
/* the tab strip is the TOP SECTION of the content card — same gilt frame,
rounded top corners; the content panel below continues it seamlessly */
#geekui-root-movie .geekui-tabs,
#geekui-root-tv .geekui-tabs,
#geekui-root-episode .geekui-tabs {
position: sticky;
top: 0;
z-index: 6;
display: flex;
flex-wrap: nowrap;
justify-content: safe center;
gap: 4px;
overflow-x: auto;
scrollbar-width: none;
scroll-snap-type: x proximity;
border: 1px solid rgba(var(--lml-lime-rgb), 0.26);
border-bottom: 1px solid rgba(var(--lml-lime-rgb), 0.16) !important;
border-radius: 12px 12px 0 0;
background: linear-gradient(180deg, var(--geekui-surface) 0%, var(--geekui-bg-2) 140%);
padding: 0 12px;
}
#geekui-root-movie .geekui-tabs::-webkit-scrollbar,
#geekui-root-tv .geekui-tabs::-webkit-scrollbar,
#geekui-root-episode .geekui-tabs::-webkit-scrollbar { display: none; }
/* tab CONTENT lives in a gilt card (reference layout) — the strip sits on
top, the panel below carries cast/videos/gallery/etc. */
#geekui-root-movie .geekui-tab-content,
#geekui-root-tv .geekui-tab-content,
#geekui-root-episode .geekui-tab-content {
background: linear-gradient(180deg, var(--geekui-surface) 0%, var(--geekui-bg-2) 100%);
border: 1px solid rgba(var(--lml-lime-rgb), 0.26);
border-top: 0;
border-radius: 0 0 12px 12px;
box-shadow: var(--geekui-card-shadow);
padding: 22px 24px;
margin-top: 0;
}
#geekui-root-movie .geekui-tab-title,
#geekui-root-tv .geekui-tab-title,
#geekui-root-episode .geekui-tab-title {
flex: none;
scroll-snap-align: start;
white-space: nowrap;
font-family: var(--geekui-font-mono) !important;
font-size: 12px !important;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--geekui-text-dim);
padding: 14px 16px !important;
border-bottom: 2px solid transparent;
transition: color 0.15s, border-color 0.15s;
}
#geekui-root-movie .geekui-tab-title:hover,
#geekui-root-tv .geekui-tab-title:hover,
#geekui-root-episode .geekui-tab-title:hover { color: var(--geekui-text); }
#geekui-root-movie .geekui-tab-title.current,
#geekui-root-tv .geekui-tab-title.current,
#geekui-root-episode .geekui-tab-title.current {
color: var(--geekui-accent) !important;
border-bottom: 2px solid var(--geekui-accent) !important;
text-shadow: 0 0 18px var(--geekui-glow);
}
/* ---------- BODY FLIP — playbill rail moves LEFT and sticks; tab content right ---------- */
/* fixed height of the rating stack (hexes+stars+actions+write+addlist):
used to pull the tab strip up into the hero's empty right area so the
tabs start right under the crew lines. All stack elements are fixed
height, so this constant holds across titles. */
#geekui-root-movie, #geekui-root-tv, #geekui-root-episode { --lml-rate-pull: 496px; }
#geekui-root-movie .geekui-title-content,
#geekui-root-tv .geekui-title-content,
#geekui-root-episode .geekui-title-content {
grid-template-columns: 260px minmax(0, 1fr) !important;
gap: 26px;
/* columns line up with the hero lanes (poster ↔ rail, masthead ↔ tabs) */
padding: 0 !important;
position: relative;
z-index: 3;
margin-top: calc(-1 * var(--lml-rate-pull));
/* the pulled-up container overlays the hero's rating card with an
invisible box — let clicks fall through; children re-enable */
pointer-events: none;
}
#geekui-root-movie .geekui-title-content-left,
#geekui-root-tv .geekui-title-content-left,
#geekui-root-episode .geekui-title-content-left,
#geekui-root-movie .geekui-title-content-right,
#geekui-root-tv .geekui-title-content-right,
#geekui-root-episode .geekui-title-content-right { pointer-events: auto; }
/* the side rail waits below the rating stack it now overlaps */
#geekui-root-movie .geekui-title-content-right,
#geekui-root-tv .geekui-title-content-right,
#geekui-root-episode .geekui-title-content-right {
margin-top: var(--lml-rate-pull);
}
#geekui-root-movie .geekui-title-content-left,
#geekui-root-tv .geekui-title-content-left,
#geekui-root-episode .geekui-title-content-left { grid-column: 2; grid-row: 1; }
#geekui-root-movie .geekui-title-content-right,
#geekui-root-tv .geekui-title-content-right,
#geekui-root-episode .geekui-title-content-right {
grid-column: 1;
grid-row: 1;
align-self: start;
position: sticky;
top: 56px;
}
/* ---------- right rail: playbill panels ---------- */
#geekui-root-movie .geekui-title-card,
#geekui-root-tv .geekui-title-card,
#geekui-root-episode .geekui-title-card {
position: relative;
background: linear-gradient(180deg, var(--geekui-surface) 0%, var(--geekui-bg-2) 100%) !important;
border: 1px solid var(--geekui-border) !important;
outline: 1px solid rgba(var(--lml-lime-rgb), 0.16);
outline-offset: 3px;
border-radius: var(--geekui-radius) !important;
box-shadow: var(--geekui-card-shadow);
overflow: hidden;
}
#geekui-root-movie .geekui-title-card::before,
#geekui-root-tv .geekui-title-card::before,
#geekui-root-episode .geekui-title-card::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 50%;
background: radial-gradient(60% 100% at 50% 0%, rgba(var(--lml-lime2-rgb), 0.1), transparent 70%);
pointer-events: none;
}
#geekui-root-movie .geekui-title-card-title,
#geekui-root-tv .geekui-title-card-title,
#geekui-root-episode .geekui-title-card-title {
font-family: var(--geekui-font-mono) !important;
font-size: 11px !important;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--geekui-accent) !important;
}
#geekui-root-movie .geekui-title-card-info,
#geekui-root-tv .geekui-title-card-info,
#geekui-root-episode .geekui-title-card-info { color: var(--geekui-text-dim); }
/* ---------- cast ---------- */
/* overview slider — rectangular playbill cards (plugin geometry kept) */
#geekui-root-movie .geekui-title-front-cast-item,
#geekui-root-tv .geekui-title-front-cast-item,
#geekui-root-episode .geekui-title-front-cast-item {
background: linear-gradient(180deg, var(--geekui-surface) 0%, var(--geekui-bg-2) 100%) !important;
border: 1px solid var(--geekui-border) !important;
border-radius: var(--geekui-radius) !important;
transition: border-color 0.15s, transform 0.15s;
}
#geekui-root-movie .geekui-title-front-cast-item:hover,
#geekui-root-tv .geekui-title-front-cast-item:hover,
#geekui-root-episode .geekui-title-front-cast-item:hover { border-color: var(--geekui-border-strong) !important; transform: translateY(-2px); }
#geekui-root-movie .geekui-title-front-cast-item > .geekui-avatar-initial,
#geekui-root-tv .geekui-title-front-cast-item > .geekui-avatar-initial,
#geekui-root-episode .geekui-title-front-cast-item > .geekui-avatar-initial {
background: radial-gradient(70% 50% at 50% 0%, rgba(var(--lml-cream-rgb), 0.1), transparent 70%), var(--geekui-bg-2);
color: var(--lmlx-champagne);
font-family: var(--geekui-font-title);
display: grid;
place-items: center;
}
/* cast / filmmakers tabs — plugin already renders round 90px chips; ring them */
#geekui-root-movie .geekui-title-cast-item img,
#geekui-root-movie .geekui-title-cast-item .geekui-avatar-initial,
#geekui-root-tv .geekui-title-cast-item img,
#geekui-root-tv .geekui-title-cast-item .geekui-avatar-initial,
#geekui-root-episode .geekui-title-cast-item img,
#geekui-root-episode .geekui-title-cast-item .geekui-avatar-initial {
border-radius: 50%;
border: 1px solid var(--geekui-border-strong);
outline: 1px solid rgba(var(--lml-lime-rgb), 0.2);
outline-offset: 3px;
background-color: var(--geekui-surface);
color: var(--lmlx-champagne);
font-family: var(--geekui-font-title);
}
#geekui-root-movie .geekui-title-front-cast-item-content-name,
#geekui-root-tv .geekui-title-front-cast-item-content-name,
#geekui-root-episode .geekui-title-front-cast-item-content-name { color: var(--geekui-text); font-weight: 600; }
#geekui-root-movie .geekui-title-front-cast-item-content-char,
#geekui-root-tv .geekui-title-front-cast-item-content-char,
#geekui-root-episode .geekui-title-front-cast-item-content-char { color: var(--geekui-accent); font-size: 12.5px; }
#geekui-root-movie .geekui-title-front-cast-item-content-char a,
#geekui-root-tv .geekui-title-front-cast-item-content-char a,
#geekui-root-episode .geekui-title-front-cast-item-content-char a { color: var(--geekui-accent) !important; }
.geekui-cast-arrow {
width: 38px !important; height: 38px !important;
display: grid !important; place-items: center;
border-radius: 50% !important;
background: var(--geekui-bg-2) !important;
border: 1px solid var(--geekui-border-strong) !important;
color: var(--geekui-accent) !important;
}
.geekui-cast-arrow:hover { border-color: var(--geekui-accent) !important; }
/* ---------- critics: quote bills ---------- */
.geekui-critic-card {
position: relative;
background: linear-gradient(180deg, var(--geekui-surface) 0%, var(--geekui-bg-2) 100%) !important;
border: 1px solid var(--geekui-border) !important;
outline: 1px solid rgba(var(--lml-lime-rgb), 0.16);
outline-offset: 3px;
border-radius: var(--geekui-radius) !important;
box-shadow: var(--geekui-card-shadow);
}
.geekui-critic-title { font-family: var(--geekui-font-title) !important; color: var(--geekui-text) !important; }
.geekui-critic-quote-icon { color: rgba(var(--lml-cream-rgb), 0.22) !important; font-family: var(--geekui-font-title); }
.geekui-critic-content { color: var(--geekui-text-dim) !important; }
.geekui-critic-rating-badge {
font-family: var(--geekui-font-title) !important;
background: rgba(var(--lml-cream-rgb), 0.1) !important;
color: var(--lmlx-champagne) !important;
border: 1px solid var(--lmlx-champagne-line) !important;
border-radius: 4px !important;
}
.geekui-critic-meta, .geekui-critic-meta-item { font-family: var(--geekui-font-mono); color: var(--geekui-text-mute) !important; font-size: 12px; }
.geekui-critic-divider { background: var(--geekui-border) !important; }
.geekui-critics-heading-title {
font-family: var(--geekui-font-mono) !important;
font-size: 11.5px !important;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--geekui-accent) !important;
}
.geekui-critics-heading-line {
height: 1px !important;
background: linear-gradient(90deg, var(--geekui-border-strong), transparent) !important;
opacity: 0.8;
}
/* ---------- episodes: programme rows ---------- */
#geekui-root-tv .geekui-episode-card,
#geekui-root-episode .geekui-episode-card {
background: linear-gradient(180deg, var(--geekui-surface) 0%, var(--geekui-bg-2) 100%) !important;
border: 1px solid var(--geekui-border) !important;
border-radius: var(--geekui-radius) !important;
transition: border-color 0.15s, transform 0.15s;
}
#geekui-root-tv .geekui-episode-card:hover,
#geekui-root-episode .geekui-episode-card:hover { border-color: var(--geekui-border-strong) !important; transform: translateY(-2px); }
#geekui-root-tv .geekui-episode-name,
#geekui-root-episode .geekui-episode-name { font-family: var(--geekui-font-title); color: var(--geekui-text); }
#geekui-root-tv .geekui-episode-thumb,
#geekui-root-episode .geekui-episode-thumb { border-radius: 4px; overflow: hidden; border: 1px solid var(--geekui-border); }
#geekui-root-tv .geekui-episode-meta, #geekui-root-episode .geekui-episode-meta,
#geekui-root-tv .geekui-episode-meta-item, #geekui-root-episode .geekui-episode-meta-item {
font-family: var(--geekui-font-mono); font-size: 12px; color: var(--geekui-text-mute);
}
#geekui-root-tv .geekui-episodes-season-label,
#geekui-root-tv .geekui-episodes-title {
font-family: var(--geekui-font-mono) !important;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--geekui-accent) !important;
font-size: 12px !important;
}
#geekui-root-tv .geekui-episodes-select,
#geekui-root-episode .geekui-episodes-select {
background: var(--geekui-bg-2) !important;
border: 1px solid var(--geekui-border-strong) !important;
border-radius: 999px !important;
color: var(--geekui-text) !important;
font-family: var(--geekui-font-mono) !important;
}
#geekui-root-tv .geekui-episodes-divider { background: var(--geekui-border) !important; }
/* episode navigator — a glassy bar FLOATING over the hero backdrop: the
epnav no longer pushes the backdrop down; the hero slides beneath it
(negative bottom margin) so the image reaches the menu, episode style. */
#geekui-root-episode .geekui-epnav {
position: relative;
z-index: 6;
/* inner bar ≈ 76px thumb + 2×20px padding + border — pull the hero up under it */
margin-bottom: -132px;
background: none !important;
border-radius: 0 !important;
overflow: visible !important;
padding-top: 14px;
}
#geekui-root-episode .geekui-epnav-mask { display: none !important; }
#geekui-root-episode .geekui-epnav-inner {
position: relative;
border: 1px solid rgba(var(--lml-lime-rgb), 0.32) !important;
outline: none;
border-radius: 12px !important;
background: rgba(var(--lml-surface-rgb), 0.74) !important;
backdrop-filter: blur(6px);
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
overflow: hidden;
}
/* hero content clears the floating bar */
#geekui-root-episode .geekui-title-header-content { padding-top: 168px; }
#geekui-root-episode .geekui-epnav-show-title { font-family: var(--geekui-font-title) !important; color: var(--lmlx-champagne) !important; }
#geekui-root-episode .geekui-epnav-ep-label { font-family: var(--geekui-font-mono) !important; letter-spacing: 0.2em; color: var(--geekui-accent) !important; }
#geekui-root-episode .geekui-epnav-btn {
border: 1px solid var(--geekui-border-strong) !important;
border-radius: 999px !important;
font-family: var(--geekui-font-mono) !important;
letter-spacing: 0.1em;
background: var(--geekui-bg-2) !important;
color: var(--geekui-text) !important;
}
#geekui-root-episode .geekui-epnav-btn:hover { border-color: var(--geekui-accent) !important; color: var(--geekui-accent) !important; }
#geekui-root-episode .geekui-epnav-btn--disabled { opacity: 0.45; }
#geekui-root-episode .geekui-epnav-poster-wrap { border: 1px solid var(--geekui-border-strong); border-radius: var(--geekui-radius); overflow: hidden; }
/* ---------- release countdown: COMPACT band above the tabs ----------
The plugin prints between the hero and
.geekui-title-content. We shrink it to a fixed 88px single-row band
and pull it into the right lane (above the tab strip). Its negative
margin already shifts the following flow up, so when it is present
the title-content pull is cancelled via :has(). */
#geekui-root-movie .geekui-rc,
#geekui-root-tv .geekui-rc,
#geekui-root-episode .geekui-rc {
position: relative;
z-index: 4;
height: 88px;
box-sizing: border-box;
/* extra 44px lift — tightens the gap under the crew lines */
margin: calc(-1 * var(--lml-rate-pull) - 44px) 0 14px 286px;
padding: 0 22px;
display: flex;
align-items: center;
background: linear-gradient(180deg, var(--geekui-surface) 0%, var(--geekui-bg-2) 100%);
border: 1px solid rgba(var(--lml-lime-rgb), 0.26);
border-radius: 12px;
box-shadow: var(--geekui-card-shadow);
text-align: left;
overflow: hidden;
}
/* rc present → the flow is already pulled up by the rc itself */
#geekui-root-movie .geekui-movie-container:has(.geekui-rc) .geekui-title-content,
#geekui-root-tv .geekui-movie-container:has(.geekui-rc) .geekui-title-content,
#geekui-root-episode .geekui-movie-container:has(.geekui-rc) .geekui-title-content { margin-top: 0; }
#geekui-root-movie .geekui-movie-container:has(.geekui-rc) .geekui-title-content-right,
#geekui-root-tv .geekui-movie-container:has(.geekui-rc) .geekui-title-content-right,
#geekui-root-episode .geekui-movie-container:has(.geekui-rc) .geekui-title-content-right { margin-top: calc(var(--lml-rate-pull) - 58px); }
/* single-row interior */
.geekui-rc-frame {
position: relative;
flex: 1 1 auto;
min-width: 0;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between;
gap: 20px;
border: 0 !important;
outline: none !important;
background: none !important;
}
.geekui-rc-eyebrow { flex: none; }
.geekui-rc-eyebrow .geekui-rc-rule { display: none !important; }
.geekui-rc-eyebrow-text, .geekui-rc-label, .geekui-rc-unit-label {
font-family: var(--geekui-font-mono) !important;
letter-spacing: 0.22em !important;
text-transform: uppercase;
color: var(--geekui-accent) !important;
}
.geekui-rc-eyebrow-text { font-size: 10.5px !important; }
.geekui-rc-unit-label { font-size: 9px !important; letter-spacing: 0.14em !important; }
.geekui-rc-headline { font-family: var(--geekui-font-title) !important; color: var(--lmlx-champagne) !important; }
.geekui-rc-date {
font-family: var(--geekui-font-title) !important;
font-size: 19px !important;
color: var(--lml-hex-num) !important;
white-space: nowrap;
}
.geekui-rc-timer { gap: 8px !important; }
.geekui-rc-digit {
font-family: var(--geekui-font-title) !important;
font-size: 17px !important;
min-width: 24px;
padding: 4px 5px !important;
color: var(--geekui-text) !important;
background: var(--geekui-bg) !important;
border: 1px solid var(--geekui-border-strong) !important;
border-radius: 5px !important;
}
.geekui-rc-sep { color: var(--geekui-accent) !important; }
.geekui-rc-rule {
height: 1px !important;
background: linear-gradient(90deg, transparent, var(--geekui-border-strong), transparent) !important;
border: 0 !important;
opacity: 0.8;
}
@media (max-width: 1100px) {
#geekui-root-movie .geekui-rc,
#geekui-root-tv .geekui-rc,
#geekui-root-episode .geekui-rc { margin: 18px 0 0; height: auto; padding: 14px 18px; }
#geekui-root-movie .geekui-movie-container:has(.geekui-rc) .geekui-title-content-right,
#geekui-root-tv .geekui-movie-container:has(.geekui-rc) .geekui-title-content-right,
#geekui-root-episode .geekui-movie-container:has(.geekui-rc) .geekui-title-content-right { margin-top: 0; }
.geekui-rc-frame { flex-wrap: wrap; justify-content: center; }
}
/* ---------- galleries & videos ---------- */
.geekui-front-gallery-item, .geekui-front-video, .geekui-front-video-strip-item, .geekui-videogallery-image {
border: 1px solid var(--geekui-border) !important;
border-radius: var(--geekui-radius) !important;
overflow: hidden;
background: var(--geekui-surface);
transition: border-color 0.15s, transform 0.15s;
}
.geekui-front-gallery-item:hover, .geekui-front-video-strip-item:hover { border-color: var(--geekui-border-strong) !important; transform: translateY(-2px); }
.geekui-front-video-strip-item { aspect-ratio: 16 / 9; }
.geekui-videogallery-image { aspect-ratio: 16 / 9; }
/* "+N more photos" is a NORMAL grid tile in the plugin layout (flex column
sibling of the gallery items) — absolute/inset here floats it over the
cast strip. Keep it a tile, just re-ink it. */
.geekui-front-gallery-more {
gap: 6px;
text-align: center;
font-family: var(--geekui-font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--geekui-text-dim) !important;
background: var(--geekui-surface-2) !important;
border: 1px solid var(--geekui-border-strong) !important;
}
.geekui-front-gallery-more:hover { border-color: var(--geekui-accent) !important; color: var(--geekui-accent) !important; }
.geekui-front-gallery-more span { font-family: var(--geekui-font-title); font-weight: 400; color: var(--lmlx-champagne, var(--lml-cream)); }
#geekui-root-movie .geekui-link, #geekui-root-tv .geekui-link, #geekui-root-episode .geekui-link { white-space: nowrap; }
#geekui-root-movie .geekui-link a, #geekui-root-tv .geekui-link a, #geekui-root-episode .geekui-link a {
font-family: var(--geekui-font-mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.geekui-front-gallery-num {
font-family: var(--geekui-font-mono) !important;
color: var(--lmlx-champagne) !important;
background: rgba(var(--lml-deep-rgb), 0.8) !important;
border: 1px solid var(--geekui-border-strong) !important;
border-radius: 3px !important;
}
.geekui-front-video-title { font-family: var(--geekui-font-title); color: var(--geekui-text); }
.geekui-front-videos-header, .geekui-front-gallery-more {
font-family: var(--geekui-font-mono) !important;
letter-spacing: 0.18em;
text-transform: uppercase;
font-size: 12px;
}
.geekui-media-filter-chip {
border: 1px solid var(--geekui-border-strong) !important;
border-radius: 999px !important;
background: var(--geekui-bg-2) !important;
color: var(--geekui-text-dim) !important;
font-family: var(--geekui-font-mono) !important;
}
.geekui-media-filter-chip:hover { border-color: var(--geekui-accent) !important; color: var(--geekui-accent) !important; }
/* PLAY BUTTONS — the circular badge styling applies ONLY to the gallery
featured player + mediaviewer button. The overview .geekui-player is a
FULL-COVER hover overlay in the plugin (inset:0) — forcing it to 58px
pinned it broken at the top-left corner. */
.geekui-videogallery-featured .geekui-player, .gx-mv-play-btn {
width: 58px !important; height: 58px !important;
display: grid !important; place-items: center;
border-radius: 50% !important;
background: rgba(var(--lml-deep-rgb), 0.8) !important;
border: 1px solid var(--geekui-accent) !important;
color: var(--geekui-accent) !important;
box-shadow: 0 0 0 5px rgba(var(--lml-lime-rgb), 0.16), 0 10px 24px rgba(0, 0, 0, 0.5);
}
.geekui-video-icon-big { width: 58px !important; height: 58px !important; }
/* overview featured video: always-visible centred gold play badge — the
overlay element stays full-cover (plugin layout), the badge ring is
drawn on the icon itself */
.geekui-front-video .geekui-player {
opacity: 1 !important;
background: transparent !important;
color: var(--geekui-accent) !important;
}
.geekui-front-video .geekui-player svg {
width: 64px;
height: 64px;
padding: 17px;
box-sizing: border-box;
border-radius: 50%;
background: rgba(var(--lml-deep-rgb), 0.74);
border: 1px solid var(--geekui-accent);
box-shadow: 0 0 0 5px rgba(var(--lml-lime-rgb), 0.16), 0 10px 24px rgba(0, 0, 0, 0.5);
transition: transform 0.2s ease, background 0.2s ease;
}
.geekui-front-video a:hover .geekui-player { background: rgba(0, 0, 0, 0.28) !important; }
.geekui-front-video a:hover .geekui-player svg { transform: scale(1.08); background: rgba(var(--lml-deep-rgb), 0.88); }
/* strip thumbnails keep the plugin's hover overlay, just inked gold */
.geekui-front-video-strip-item .geekui-player { color: var(--geekui-accent) !important; font-size: 32px; }
/* ---------- reviews + write form ---------- */
.geekui-title-review {
background: linear-gradient(180deg, var(--geekui-surface) 0%, var(--geekui-bg-2) 100%) !important;
border: 1px solid var(--geekui-border) !important;
border-radius: var(--geekui-radius) !important;
}
.geekui-title-review-title { font-family: var(--geekui-font-title) !important; color: var(--geekui-text) !important; }
.geekui-title-review-quote { color: rgba(var(--lml-cream-rgb), 0.2) !important; }
.geekui-title-review-username { color: var(--lmlx-champagne) !important; }
.geekui-title-review-stat { font-family: var(--geekui-font-mono); color: var(--geekui-text-mute); }
.geekui-review-star--on, .geekui-write-star--on, .geekui-rating-statistic-star { color: var(--lmlx-champagne) !important; }
.geekui-review-star--off, .geekui-write-star--off { color: var(--geekui-border-strong) !important; }
.geekui-review-star-score, .geekui-write-score-num { font-family: var(--geekui-font-title) !important; color: var(--geekui-accent) !important; }
.geekui-write-laurel { color: var(--geekui-accent) !important; }
.geekui-write-header { font-family: var(--geekui-font-title) !important; color: var(--lmlx-champagne) !important; }
.geekui-write-rating-box {
border: 1px solid var(--geekui-border-strong) !important;
border-radius: var(--geekui-radius) !important;
background: var(--geekui-bg-2) !important;
}
.geekui-write-rating-label { font-family: var(--geekui-font-mono) !important; letter-spacing: 0.2em; text-transform: uppercase; color: var(--geekui-text-mute) !important; }
.geekui-write-field, .geekui-form input[type="text"], .geekui-form textarea {
background: var(--geekui-bg) !important;
border: 1px solid var(--geekui-border-strong) !important;
border-radius: 5px !important;
color: var(--geekui-text) !important;
}
.geekui-write-field:focus-within, .geekui-form input:focus, .geekui-form textarea:focus { border-color: var(--geekui-accent) !important; outline: none; }
.geekui-write-btn-save {
background: linear-gradient(180deg, var(--lml-btn-hi) 0%, var(--lml-btn-lo) 100%) !important;
border: 1px solid var(--geekui-accent) !important;
border-radius: 999px !important;
color: var(--lml-ink-on-gold) !important;
font-family: var(--geekui-font-mono) !important;
font-weight: 700 !important;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.geekui-write-btn-save:hover { filter: brightness(1.07); }
.geekui-write-btn-delete {
border: 1px solid var(--geekui-danger) !important;
border-radius: 999px !important;
color: var(--geekui-danger) !important;
background: transparent !important;
}
.geekui-write-return-btn, .geekui-write-cancel-rate { font-family: var(--geekui-font-mono) !important; color: var(--geekui-text-dim) !important; }
/* generic buttons */
#geekui-root-movie .geekui-btn, #geekui-root-tv .geekui-btn, #geekui-root-episode .geekui-btn {
font-family: var(--geekui-font-mono) !important;
letter-spacing: 0.1em;
text-transform: uppercase;
border-radius: 999px !important;
border: 1px solid var(--geekui-border-strong) !important;
}
#geekui-root-movie .geekui-primary, #geekui-root-tv .geekui-primary, #geekui-root-episode .geekui-primary {
background: linear-gradient(180deg, var(--lml-btn-hi) 0%, var(--lml-btn-lo) 100%) !important;
border-color: var(--geekui-accent) !important;
color: var(--lml-ink-on-gold) !important;
}
/* messages + loaders */
.geekui-msg { border: 1px solid var(--geekui-border-strong) !important; border-radius: var(--geekui-radius) !important; background: var(--geekui-surface) !important; }
.geekfp-spinner:not(.geekfp-rotating) { display: grid; place-items: center; min-height: 160px; }
/* ---------- responsive ---------- */
@media (max-width: 1100px) {
#geekui-root-movie .geekui-title-header-content,
#geekui-root-tv .geekui-title-header-content,
#geekui-root-episode .geekui-title-header-content { grid-template-columns: 200px minmax(0, 1fr); gap: 22px; padding: 36px 0 24px; }
#geekui-root-movie .geekui-rating,
#geekui-root-tv .geekui-rating,
#geekui-root-episode .geekui-rating {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "stars" "stats" "actions" "write" "addlist";
}
#geekui-root-movie .geekui-title-content,
#geekui-root-tv .geekui-title-content,
#geekui-root-episode .geekui-title-content { grid-template-columns: minmax(0, 1fr) !important; margin-top: 0; padding: 14px 0 0 !important; }
#geekui-root-movie .geekui-title-content-left,
#geekui-root-tv .geekui-title-content-left,
#geekui-root-episode .geekui-title-content-left { grid-column: 1; grid-row: auto; }
#geekui-root-movie .geekui-title-content-right,
#geekui-root-tv .geekui-title-content-right,
#geekui-root-episode .geekui-title-content-right { grid-column: 1; grid-row: auto; position: static; margin-top: 0; }
}
@media (max-width: 680px) {
#geekui-root-movie .geekui-title-header-content,
#geekui-root-tv .geekui-title-header-content,
#geekui-root-episode .geekui-title-header-content { grid-template-columns: minmax(0, 1fr); align-items: start; }
#geekui-root-movie .geekui-title-header-poster,
#geekui-root-tv .geekui-title-header-poster,
#geekui-root-episode .geekui-title-header-poster { max-width: 168px; }
#geekui-root-movie .geekui-tabs, #geekui-root-tv .geekui-tabs, #geekui-root-episode .geekui-tabs { justify-content: flex-start; }
}
@media (max-width: 400px) {
#geekui-root-movie .geekui-title-header-title,
#geekui-root-tv .geekui-title-header-title,
#geekui-root-episode .geekui-title-header-title { font-size: clamp(28px, 9vw, 38px); }
}