/* =============================================================================
   COMING ATTRACTIONS: THE FANS' PAGE LOOK (ca.css)
   -----------------------------------------------------------------------------
   Sits on top of the site's own look (purple gradient, white text, white-
   bordered rounded panels, Super-Golden / Coiny / Finalnew fonts) and adds a
   movie-theatre feel:
     I.     Colours + fonts (family colours)
     II.    Admin preview switcher
     III.   The marquee: a lit sign with chasing rainbow bulbs + gold title
     IV.    The "your votes" bar + the "show only" / sort controls
     V.     The poster grid and each theme card (frames: wide / landscape / portrait / tall)
     VI.    Vote buttons, counts and the "+1" pop
     VII.   Released themes (+ the outlined heading with a neon divider)
     VIII.  Pitch form
     IX.    Buttons, notes, the pop-up message
     X.     Pop-up boxes: the "already filmed" heads-up + the admin editor
     XI.    Phones + "reduce motion"
   Frames are locked to one shape (set in Settings, separately for "coming
   up" and "Released"); the picture inside is stretched to fill it by default
   (never cropped), or shown whole / filled, per Settings.
   ============================================================================= */

/* =============================================================================
   I. COLOURS + FONTS
   ============================================================================= */
.ca-page {
	--ca-gold:   #E4BD18;   /* Galactic Entertainment Gold */
	--ca-pink:   #EC36D4;   /* Precocious Piggy Pink */
	--ca-teal:   #18EC69;   /* Techy-Techno Teal */
	--ca-lav:    #825DEF;   /* Lay-Me-Down Lavender */
	--ca-blue:   #3A4BFF;   /* Big Hero Blue, brightened */
	--ca-red:    #C61515;   /* Rising Phoenix Red */
	--ca-silver: #A6969E;   /* Simpson Family Silver */
	--ca-ink:    #1b0547;   /* dark text on bright buttons */
	--ca-panel:  rgba(27, 4, 74, .45);
	--ca-metal:  linear-gradient(180deg, #FFFFFF 0%, #FFE9A3 28%, #E4BD18 55%, #A07C05 72%, #FFE27A 100%);
	--ca-title:  'Super-Golden', 'Coiny-Cyrillic', 'Finalnew', sans-serif;
	--ca-head:   'Coiny-Cyrillic', 'Finalnew', sans-serif;
	--ca-body:   'Finalnew', 'Segoe UI', sans-serif;
	color: #fff;
	font-family: var(--ca-body);
	max-width: 1180px;
	margin: 0 auto;
	padding: 8px 0 40px;
}
.ca-page *, .ca-page *::before, .ca-page *::after { box-sizing: border-box; }
/* The site styles every paragraph in a post/page (20px, big spacing). Inside
   this page, paragraphs follow the sizes set below instead. The "#ca-page"
   (an ID) outranks the site's rule; each p.class below outranks this one. */
#ca-page p { font-size: inherit; line-height: inherit; margin: 0; }
.ca-page [hidden] { display: none !important; }

/* =============================================================================
   II. ADMIN PREVIEW SWITCHER (only admins see it)
   ============================================================================= */
.ca-preview { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; margin: 0 0 14px; font-size: 13px; }
.ca-preview span { opacity: .8; }
.ca-preview a { color: #fff !important; text-decoration: none; padding: 4px 12px; border: 2px solid rgba(255,255,255,.6); border-radius: 999px; }
.ca-preview a[aria-current] { background: var(--ca-gold); color: var(--ca-ink) !important; border-color: var(--ca-gold); }

/* =============================================================================
   III. THE MARQUEE
   -----------------------------------------------------------------------------
   A. The sign: dark stage, white border like the site's panels, gold edge glow
   B. The bulbs: a dotted gold ring that slowly cycles through the rainbow
   C. "NOW VOTING" in teal neon, the title in shiny gold
   ============================================================================= */
.ca-marquee {
	position: relative;
	text-align: center;
	padding: 42px clamp(22px, 5vw, 60px) 34px;
	border: 6.4px solid #fff;
	border-radius: 25px;
	background:
		radial-gradient(ellipse 70% 60% at 50% 0%, rgba(236, 54, 212, .32), transparent 70%),
		radial-gradient(ellipse 60% 50% at 50% 110%, rgba(24, 236, 105, .18), transparent 70%),
		linear-gradient(180deg, #2a0866 0%, #14022f 100%);
	box-shadow: 0 0 0 3px rgba(228, 189, 24, .55), 0 0 42px rgba(236, 54, 212, .35);
	overflow: hidden;
	margin-bottom: 22px;
}
.ca-bulbs {
	position: absolute;
	inset: 10px;
	border: 9px dotted #FFE27A;
	border-radius: 18px;
	pointer-events: none;
	filter: drop-shadow(0 0 3px #FFE27A) drop-shadow(0 0 9px rgba(236, 54, 212, .9));
	animation: ca-rainbow 7s linear infinite, ca-twinkle 1.1s steps(2, jump-none) infinite;
}
@keyframes ca-rainbow { to { filter: drop-shadow(0 0 3px #FFE27A) drop-shadow(0 0 9px rgba(236, 54, 212, .9)) hue-rotate(360deg); } }
@keyframes ca-twinkle { 50% { opacity: .72; } }
#ca-page p.ca-kicker {
	position: relative;
	margin: 0 0 6px;
	font: 400 17px/1 var(--ca-head);   /* 0.2.0: a notch bigger (was 14px) */
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--ca-teal) !important;
	text-shadow: 0 0 6px rgba(24, 236, 105, .9), 0 0 18px rgba(24, 236, 105, .5);
}
.ca-page .ca-title {
	position: relative;
	margin: 0;
	font: 400 clamp(36px, 7vw, 72px)/1.05 var(--ca-title);
	letter-spacing: .02em;
	background: var(--ca-metal);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
	filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .45)) drop-shadow(0 0 14px rgba(236, 54, 212, .55));
}
#ca-page p.ca-intro { position: relative; max-width: 640px; margin: 14px auto 0; font-size: 17px; line-height: 1.5; color: #f1e8ff !important; }
#ca-page p.ca-intro em { font-style: italic; color: #fff; padding-right: .18em; }   /* the slant needs a hair of room before the next word */

/* =============================================================================
   IV. THE "YOUR VOTES" BAR + "SHOW ONLY" / SORT CONTROLS
   ============================================================================= */
.ca-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
	padding: 16px 22px;
	margin-bottom: 24px;
	border: 5px solid #fff;
	border-radius: 25px;
	background: var(--ca-panel);
}
.ca-me p { margin: 0; }
#ca-page p.ca-me-line { font-size: 17px; }
.ca-left { font: 400 26px/1 var(--ca-title); color: var(--ca-gold) !important; vertical-align: -2px; }
.ca-prem { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 999px; background: var(--ca-metal); color: var(--ca-ink) !important; font: 700 12px/1.5 var(--ca-body); letter-spacing: .08em; text-transform: uppercase; }
#ca-page p.ca-pips { margin-top: 6px !important; letter-spacing: 2px; font-size: 18px; }
.ca-pip { filter: grayscale(1); opacity: .35; transition: opacity .3s, filter .3s; }
.ca-pip-on { filter: none; opacity: 1; }
#ca-page p.ca-me-plug { margin-top: 6px !important; font-size: 14px; opacity: .92; }
#ca-page p.ca-me-plug a { color: var(--ca-gold) !important; font-weight: 700; }
#ca-page p.ca-me-btns { margin-top: 10px !important; display: flex; flex-wrap: wrap; gap: 8px; }
.ca-bar .ca-add { flex-shrink: 0; }
/* A. The controls row: stage buttons on the left, the Sort menu on the right */
.ca-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: -8px 0 22px; }
.ca-filters { display: flex; flex-wrap: wrap; gap: 8px; }
/* a. Each stage button: outlined in its status colour, filled in when picked */
.ca-filters button {
	--ca-c: #fff;
	display: inline-flex; align-items: center; gap: 7px;
	padding: 7px 8px 7px 14px;
	border: 2px solid var(--ca-c); border-radius: 999px;
	background: rgba(12, 2, 32, .45); color: #fff;
	font: 700 13px/1 var(--ca-body); letter-spacing: .06em; text-transform: uppercase; cursor: pointer;   /* body font: the title font draws "/" backwards */
	box-shadow: 0 0 8px color-mix(in srgb, var(--ca-c) 45%, transparent);
	transition: background .2s, box-shadow .2s, transform .12s;
}
.ca-filters button:hover { transform: translateY(-1px); box-shadow: 0 0 14px color-mix(in srgb, var(--ca-c) 75%, transparent); }
.ca-filters button:focus-visible { outline: 3px solid var(--ca-gold); outline-offset: 2px; }
.ca-filters button span { color: inherit; min-width: 24px; padding: 3px 7px; border-radius: 999px; background: rgba(255, 255, 255, .18); font: 700 12px/1 var(--ca-body); text-align: center; }
.ca-filters button[aria-pressed="true"] { background: var(--ca-c); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
.ca-filters button[data-filter=""][aria-pressed="true"] { background: var(--ca-metal); color: var(--ca-ink); text-shadow: none; }
.ca-filters button[data-filter="postprod"][aria-pressed="true"],
.ca-filters button[data-filter="released"][aria-pressed="true"] { color: var(--ca-ink); text-shadow: none; }   /* dark words on gold + teal */
.ca-filters button[aria-pressed="true"] span { background: rgba(0, 0, 0, .22); }
/* b. The Sort menu */
.ca-sortby { display: inline-flex; align-items: center; gap: 8px; font: 400 14px/1 var(--ca-head); letter-spacing: .04em; }
.ca-sortby select {
	padding: 8px 34px 8px 14px; border: 2px solid rgba(255, 255, 255, .7); border-radius: 999px;
	background: rgba(12, 2, 32, .6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23E4BD18' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 13px center;
	color: #fff; font: 15px/1.2 var(--ca-body); cursor: pointer;
	-webkit-appearance: none; appearance: none;
}
.ca-sortby select:focus { outline: none; border-color: var(--ca-gold); box-shadow: 0 0 0 3px rgba(228, 189, 24, .35); }
.ca-sortby select, .ca-ed select { color-scheme: dark; }   /* 1.0.1: the open list is dark too, so options never vanish */
.ca-sortby option, .ca-sortby optgroup { background-color: #1b0547 !important; color: #fff !important; }

/* =============================================================================
   V. THE POSTER GRID + THEME CARDS
   ============================================================================= */
.ca-page .ca-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));   /* portrait frames: ~4 across */
	gap: 24px;
}
.ca-page .ca-grid.ca-shape-landscape,
.ca-page .ca-grid.ca-shape-wide { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }   /* wide + landscape frames: ~3 across */
.ca-card {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	border: 5px solid #fff;
	border-radius: 22px;
	background: var(--ca-panel);
	overflow: hidden;
	box-shadow: 0 0 18px color-mix(in srgb, var(--ca-c) 55%, transparent);
	transition: transform .2s ease, box-shadow .2s ease;
}
.ca-card:hover { transform: translateY(-4px); box-shadow: 0 0 28px color-mix(in srgb, var(--ca-c) 80%, transparent); }
/* A. Rank badge: #1 gold, #2 silver, #3 pink, the rest lavender */
.ca-rank {
	position: absolute; top: 10px; left: 10px; z-index: 2;
	min-width: 44px; height: 44px; padding: 0 8px;
	display: grid; place-items: center;
	border-radius: 999px; border: 3px solid #fff;
	background: var(--ca-lav); color: #fff;
	font: 400 18px/1 var(--ca-title);
	box-shadow: 0 3px 10px rgba(0, 0, 0, .45);
}
.ca-rank[data-rank="1"] { background: var(--ca-metal); color: var(--ca-ink); }
.ca-rank[data-rank="2"] { background: linear-gradient(180deg, #fff, #d9cfd6 40%, #A6969E 70%, #eee); color: var(--ca-ink); }
.ca-rank[data-rank="3"] { background: var(--ca-pink); }
/* B. Poster frame: locked to one shape (Settings), whatever the picture's
      own shape. The picture is stretched to fill it by default.
        wide 16:9 · landscape 3:2 · portrait 2:3 (the fallback) · tall 9:16 */
.ca-poster { position: relative; margin: 0; aspect-ratio: 2 / 3; background: #14022f; border-bottom: 4px solid #fff; overflow: hidden; box-sizing: content-box; }   /* content-box: the ratio applies to the picture area itself, so the white line under it doesn't nudge the shape */
.ca-shape-landscape .ca-poster { aspect-ratio: 3 / 2; }
.ca-shape-wide .ca-poster { aspect-ratio: 16 / 9; }
.ca-shape-tall .ca-poster { aspect-ratio: 9 / 16; }
.ca-poster img { display: block; width: 100%; height: 100%; object-fit: fill; }   /* "stretch" */
.ca-fit-whole .ca-poster img { object-fit: contain; }                             /* "show the whole picture" */
.ca-fit-fill .ca-poster img { object-fit: cover; }                                /* "fill the frame" */
/* a. Episode number, bottom-left of the picture */
.ca-ep {
	position: absolute; left: 10px; bottom: 10px; z-index: 1;
	padding: 5px 12px; border: 2px solid #fff; border-radius: 999px;
	background: rgba(12, 2, 32, .78); color: var(--ca-gold) !important;
	font: 400 14px/1 var(--ca-head); letter-spacing: .05em;
	box-shadow: 0 0 10px rgba(228, 189, 24, .5);
}
/* b. Admin-only ✎ Edit button, top-right (top-left on Released, clear of the ribbon) */
.ca-edit {
	position: absolute; top: 10px; right: 10px; z-index: 3;
	padding: 6px 12px; border: 2px solid #fff; border-radius: 999px;
	background: rgba(12, 2, 32, .8); color: #fff;
	font: 700 13px/1 var(--ca-body); cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}
.ca-edit:hover, .ca-edit:focus-visible { background: var(--ca-gold); color: var(--ca-ink); outline: none; }
.ca-card-done .ca-edit { right: auto; left: 10px; }
.ca-poster-none {
	position: absolute; inset: 0; display: grid; place-items: center; padding: 18px; text-align: center;
	font: 400 clamp(24px, 3vw, 34px)/1.1 var(--ca-title);
	background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--ca-c) 70%, transparent), transparent 60%), linear-gradient(160deg, #3c00b5, #14022f);
	background-clip: border-box;
	color: #fff !important;
	text-shadow: 0 0 12px color-mix(in srgb, var(--ca-c) 90%, transparent);
}
/* C. The words */
.ca-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 1; }
.ca-badge {
	align-self: flex-start;
	padding: 3px 11px;
	border: 2px solid #fff;
	background: var(--ca-c);             /* filled with the status colour… */
	color: #fff !important;               /* …white words on the darker ones… */
	font: 700 12px/1.4 var(--ca-body);
	letter-spacing: .06em;
	text-transform: uppercase;
	max-width: 100%;                      /* long stage names (1.0) wrap inside the card… */
	border-radius: 14px;                  /* …and still look like a rounded tag on two lines */
	text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
	box-shadow: 0 0 10px color-mix(in srgb, var(--ca-c) 70%, transparent);
}
.ca-st-postprod .ca-badge, .ca-st-released .ca-badge { color: var(--ca-ink) !important; text-shadow: none; }   /* …dark words on gold + teal */
.ca-page .ca-name { margin: 0; font: 400 24px/1.15 var(--ca-head); color: #fff !important; }
.ca-details { font-size: 15px; line-height: 1.45; color: #f1e8ff; max-height: 5.8em; overflow: hidden; }   /* exactly 4 lines, then "More" */
.ca-details.ca-open { max-height: none; }
#ca-page .ca-details p { margin: 0 0 .6em; }
#ca-page .ca-details p:last-child { margin-bottom: 0; }   /* so short descriptions don't get a needless "More" */
.ca-more { align-self: flex-start; background: none; border: 0; padding: 0; color: var(--ca-gold); cursor: pointer; font: 700 13px var(--ca-body); text-decoration: underline; }
#ca-page p.ca-by { margin: 0; font-size: 13px; font-style: italic; color: #d9cfd6 !important; }

/* =============================================================================
   VI. VOTE BUTTONS, COUNTS, "+1"
   ============================================================================= */
.ca-vote { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: auto; padding-top: 8px; }
.ca-thumb {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 9px 18px 9px 14px;
	border: 3px solid #fff;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--ca-pink), var(--ca-lav));
	color: #fff !important;
	font: 400 16px/1 var(--ca-head);
	cursor: pointer;
	box-shadow: 0 0 14px rgba(236, 54, 212, .65);
	transition: transform .12s ease, box-shadow .2s ease, filter .2s;
}
.ca-thumb:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 0 22px rgba(236, 54, 212, .9); }
.ca-thumb:active { transform: scale(.94); }
.ca-thumb:focus-visible { outline: 3px solid var(--ca-gold); outline-offset: 3px; }
.ca-thumb:disabled { filter: grayscale(.9); opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.ca-thumb-icon { font-size: 20px; }
.ca-count { font-size: 14px; color: #f1e8ff !important; }
.ca-count b { font: 400 26px/1 var(--ca-title); background: var(--ca-metal); -webkit-background-clip: text; background-clip: text; color: transparent !important; vertical-align: -3px; }
.ca-mine { font-size: 13px; color: var(--ca-teal) !important; }
.ca-plus {
	position: absolute; left: 30px; top: -6px;
	font: 400 24px/1 var(--ca-title); color: var(--ca-gold) !important;
	text-shadow: 0 0 10px rgba(228, 189, 24, .9);
	pointer-events: none;
	animation: ca-plus .9s ease-out forwards;
}
@keyframes ca-plus { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-46px) scale(1.4); } }
.ca-card.ca-bump { animation: ca-bump .35s ease; }
@keyframes ca-bump { 50% { transform: scale(1.03); } }

/* =============================================================================
   VII. RELEASED THEMES (bottom of the page)
   ============================================================================= */
/* A. "✓ Released! Thanks for voting!": teal words with a crisp white outline
      (eight thin white shadows around each letter + a teal glow), sitting
      on a full-width rainbow neon divider line. */
.ca-page .ca-done-h {
	position: relative;
	margin: 48px 0 20px; padding-bottom: 16px;
	text-align: center;
	font: 400 32px/1.2 var(--ca-head);
	letter-spacing: .04em;                 /* a little air so the outlines don't merge */
	color: var(--ca-teal) !important;
	text-shadow:
		-1px -1px 0 #fff, 0 -1.5px 0 #fff, 1px -1px 0 #fff,
		-1.5px 0  0 #fff,                  1.5px 0  0 #fff,
		-1px  1px 0 #fff, 0  1.5px 0 #fff, 1px  1px 0 #fff,
		0 0 14px rgba(24, 236, 105, .9), 0 0 28px rgba(24, 236, 105, .45);
}
.ca-page .ca-done-h span { color: inherit !important; }   /* the site paints every <span> white; keep the teal */
.ca-page .ca-done-h::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: 0;
	height: 4px; border-radius: 4px;
	background: linear-gradient(90deg, transparent, var(--ca-pink) 12%, var(--ca-gold) 32%, var(--ca-teal) 50%, var(--ca-blue) 68%, var(--ca-lav) 88%, transparent);
	box-shadow: 0 0 10px rgba(236, 54, 212, .8), 0 0 22px rgba(24, 236, 105, .45);
}
/* B. The Released grid: smaller cards */
.ca-page .ca-grid-done { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; }
.ca-page .ca-grid-done.ca-shape-landscape,
.ca-page .ca-grid-done.ca-shape-wide { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ca-page .ca-grid-done.ca-shape-tall { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }   /* tall frames: ~6 across */
.ca-card-done { opacity: .9; }
.ca-card-done .ca-poster img { filter: saturate(.75); }
.ca-card-done .ca-name { font-size: 20px; }
.ca-ribbon {
	position: absolute; top: 18px; right: -44px; transform: rotate(35deg);
	padding: 6px 48px;
	background: var(--ca-teal); color: var(--ca-ink) !important;
	font: 700 13px/1 var(--ca-body); letter-spacing: .08em; text-transform: uppercase;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}

/* =============================================================================
   VIII. PITCH FORM
   ============================================================================= */
.ca-pitch { margin-top: 40px; padding: 22px clamp(18px, 4vw, 34px) 26px; border: 5px solid #fff; border-radius: 25px; background: var(--ca-panel); }
.ca-page .ca-pitch-h { margin: 0 0 8px; font: 400 26px/1.2 var(--ca-title); background: var(--ca-metal); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
#ca-page .ca-pitch p { margin: 0 0 12px; }
.ca-pitch { font-size: 16px; line-height: 1.45; }
.ca-pitch-form { display: grid; gap: 8px; max-width: 640px; }
.ca-pitch-form label { font-size: 14px; letter-spacing: .02em; }
.ca-pitch-form input[type="text"], .ca-pitch-form input:not([type]), .ca-pitch-form textarea {
	width: 100%; padding: 11px 14px;
	border: 2px solid rgba(255, 255, 255, .7); border-radius: 14px;
	background: rgba(12, 2, 32, .55); color: #fff;
	font: 16px/1.4 var(--ca-body);
}
.ca-pitch-form input:focus, .ca-pitch-form textarea:focus { outline: none; border-color: var(--ca-gold); box-shadow: 0 0 0 3px rgba(228, 189, 24, .35); }
.ca-check { display: flex; align-items: center; gap: 8px; }
.ca-pitch-form .ca-btn { justify-self: start; margin-top: 6px; }

/* =============================================================================
   IX. BUTTONS, NOTES, POP-UP MESSAGE
   ============================================================================= */
.ca-page .ca-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	padding: 10px 20px; border-radius: 999px; border: 3px solid #fff;
	font: 400 15px/1 var(--ca-head); letter-spacing: .03em; text-decoration: none; cursor: pointer;
	transition: transform .12s ease, box-shadow .2s ease;
}
.ca-page .ca-btn:hover { transform: translateY(-2px); }
.ca-page .ca-btn-hot { background: linear-gradient(135deg, var(--ca-pink), var(--ca-lav)); color: #fff !important; box-shadow: 0 0 14px rgba(236, 54, 212, .6); }
.ca-page .ca-btn-ghost { background: transparent; color: #fff !important; }
.ca-page .ca-btn-gold { background: var(--ca-metal); color: var(--ca-ink) !important; border-color: #fff; box-shadow: 0 0 14px rgba(228, 189, 24, .55); }
.ca-page .ca-btn-watch { background: var(--ca-teal); color: var(--ca-ink) !important; padding: 8px 16px; font-size: 14px; }
.ca-page .ca-btn-sm { padding: 7px 14px; font-size: 13px; border-width: 2px; }
.ca-page .ca-btn:disabled { opacity: .6; cursor: wait; transform: none; }
.ca-page .ca-link { background: none; border: 0; padding: 4px 0; color: #d9cfd6; font: 600 13px var(--ca-body); text-decoration: underline; cursor: pointer; }
.ca-page .ca-link:hover { color: #fff; }
.ca-page .ca-link-danger { color: #ff8fa3; margin-left: auto; }
.ca-page .ca-link-danger:hover { color: #ffc2cd; }
#ca-page p.ca-note { padding: 10px 14px; border: 2px solid var(--ca-gold); border-radius: 14px; background: rgba(0, 0, 0, .25); }
#ca-page p.ca-note-ok { border-color: var(--ca-teal); }
#ca-page p.ca-empty { text-align: center; font-size: 18px; padding: 30px 10px; }
.ca-toast {
	position: fixed; left: 50%; bottom: 24px; z-index: 99999;
	transform: translateX(-50%) translateY(20px); opacity: 0;
	max-width: min(92vw, 520px); padding: 12px 20px;
	border: 3px solid #fff; border-radius: 999px;
	background: #2a0866; color: #fff; text-align: center;
	font: 15px/1.35 'Finalnew', 'Segoe UI', sans-serif;   /* outside .ca-page, so no shared variables */
	box-shadow: 0 0 24px rgba(236, 54, 212, .6);
	transition: opacity .25s, transform .25s;
}
.ca-toast.ca-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* =============================================================================
   X. POP-UP BOXES (0.2.0)
   -----------------------------------------------------------------------------
   A. The dark see-through backdrop covering the page
   B. The box itself (a lit panel like the rest of the page)
   C. The admin editor's fields
   ============================================================================= */
html.ca-modal-open { overflow: hidden; }   /* the page behind stops scrolling */
.ca-modal {
	position: fixed; inset: 0; z-index: 100000;
	display: grid; place-items: center;
	padding: 16px;
	background: rgba(8, 0, 24, .72);
	-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
	animation: ca-fade .18s ease;
}
@keyframes ca-fade { from { opacity: 0; } }
.ca-modal-box {
	width: min(100%, 520px); max-height: calc(100vh - 32px); overflow: auto;
	padding: 24px clamp(18px, 4vw, 30px);
	border: 5px solid #fff; border-radius: 25px;
	background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(236, 54, 212, .28), transparent 70%), linear-gradient(180deg, #2a0866, #14022f);
	box-shadow: 0 0 0 3px rgba(228, 189, 24, .55), 0 0 42px rgba(236, 54, 212, .45);
	color: #fff; font-size: 16px; line-height: 1.45;
}
.ca-page .ca-modal-box h3 { margin: 0 0 12px; font: 400 24px/1.2 var(--ca-head); color: var(--ca-gold) !important; }
#ca-page .ca-modal-box p { margin: 0 0 12px; }
.ca-warn-name { color: var(--ca-gold); }
.ca-modal-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
/* C. The editor */
.ca-modal-box.ca-ed { width: min(100%, 780px); }
.ca-ed-grid { display: grid; grid-template-columns: 200px 1fr; gap: 18px; }
.ca-ed-label { display: block; font-size: 14px; margin-bottom: 6px; }
.ca-ed-poster { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ca-ed-pic { position: relative; width: 100%; aspect-ratio: 3 / 2; border: 3px solid #fff; border-radius: 12px; overflow: hidden; background: #14022f; display: grid; place-items: center; }
.ca-ed-pic img { width: 100%; height: 100%; object-fit: contain; }
.ca-ed-pic span { font-size: 13px; opacity: .7; }
.ca-ed-fields { display: grid; gap: 10px; }
.ca-ed-fields label { display: grid; gap: 4px; font-size: 14px; letter-spacing: .02em; }
.ca-ed-fields small { opacity: .75; }
.ca-ed-row { display: grid; grid-template-columns: 1fr 140px; gap: 10px; }
.ca-ed input, .ca-ed textarea, .ca-ed select {
	width: 100%; padding: 9px 12px;
	border: 2px solid rgba(255, 255, 255, .7); border-radius: 12px;
	background: rgba(12, 2, 32, .6); color: #fff;
	font: 15px/1.4 var(--ca-body);
}
.ca-ed textarea { resize: vertical; min-height: 96px; font-family: 'Segoe UI', system-ui, sans-serif; }   /* the site font has no < > signs, and details may hold <em> tags */
.ca-ed option, .ca-ed optgroup { background-color: #1b0547 !important; color: #fff !important; }   /* 1.0.1 */
.ca-ed input:focus, .ca-ed textarea:focus, .ca-ed select:focus { outline: none; border-color: var(--ca-gold); box-shadow: 0 0 0 3px rgba(228, 189, 24, .35); }
#ca-page p.ca-ed-msg { min-height: 1.4em; margin: 12px 0 0; font-size: 14px; color: var(--ca-teal) !important; }
#ca-page p.ca-ed-msg.ca-bad { color: #ff8fa3 !important; }

/* =============================================================================
   XI. PHONES + "REDUCE MOTION"
   ============================================================================= */
@media (max-width: 640px) {
	.ca-marquee { padding: 34px 18px 26px; }
	.ca-bulbs { inset: 7px; border-width: 7px; }
	.ca-bar { padding: 14px 16px; }
	.ca-page .ca-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.ca-page .ca-grid-done { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ca-page .ca-grid.ca-shape-landscape,
	.ca-page .ca-grid.ca-shape-wide { grid-template-columns: minmax(0, 1fr); }   /* wide frames: one per row */
	.ca-controls { margin-top: -10px; }
	/* one swipeable row of stage buttons instead of four stacked rows */
	.ca-filters { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding: 4px 2px 8px; scrollbar-width: none; }
	.ca-filters::-webkit-scrollbar { display: none; }
	.ca-filters button { flex-shrink: 0; font-size: 12px; padding: 6px 6px 6px 11px; }
	.ca-ed-grid, .ca-ed-row { grid-template-columns: minmax(0, 1fr); }
	.ca-ed-pic { max-width: 240px; }
	.ca-page .ca-done-h { font-size: 24px; }
	.ca-ep { font-size: 12px; padding: 4px 9px; left: 6px; bottom: 6px; }
	.ca-card { border-width: 4px; border-radius: 18px; }
	.ca-body { padding: 10px 10px 12px; gap: 6px; }
	.ca-page .ca-name { font-size: 18px; }
	.ca-details { font-size: 13.5px; }
	.ca-thumb { padding: 8px 12px 8px 10px; font-size: 14px; }
	.ca-thumb-word { display: none; }
	.ca-rank { min-width: 34px; height: 34px; font-size: 14px; top: 6px; left: 6px; }
	.ca-ribbon { font-size: 10px; right: -50px; top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.ca-bulbs { animation: none; }
	.ca-card, .ca-thumb, .ca-page .ca-btn { transition: none; }
	.ca-plus, .ca-card.ca-bump, .ca-modal { animation: none; }
}