/* 3.4.2 — loaded last. Phase 1: small functional bits. The redesign lands here in phase 2. */

/* Host filter: show that the list scrolls (fade + "▾ more"), one height limit only. */
#season-picker:has(.host-picker-wrap){max-height:none;overflow:visible}
.host-picker-wrap{position:relative}
.host-picker-wrap .host-picker{max-height:min(320px,56vh);overflow:auto;overscroll-behavior:contain}
.host-picker-wrap .host-more{position:absolute;left:0;right:0;bottom:0;height:46px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px;font-size:11px;letter-spacing:1px;color:#a7f3d0;pointer-events:none;opacity:0;transition:opacity .2s;background:linear-gradient(transparent,#141c35 70%)}
.host-picker-wrap.has-more .host-more{opacity:1}

/* Ranking editor: tagged + extra. */
.rank-split{font-size:11px;opacity:.75;display:block;margin-top:2px}

/* Ideas: shared ideas show who added them; "+ New subject" in the add dialog. */
.idea-by{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;font-size:11px;opacity:.8}
.idea-by .text{min-height:44px;padding:0 6px}
.new-idea-subjects .new-subject{min-height:44px;border:1px dashed #a7f3d066;border-radius:14px;background:transparent;color:#a7f3d0;font:inherit;font-size:12px}

/* Calendar: creator-only switch in Suggest a date. */
.plan-mode{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;margin:0 0 14px;border-radius:18px;background:#0b1020;border:1px solid #ffffff1c}
.plan-mode button{min-height:44px;border:0;border-radius:14px;background:transparent;color:#cfd6f5;font:inherit;font-size:12px}
.plan-mode button.on{background:#a7f3d0;color:#0b1020}
.plan-one[hidden],.plan-dates[hidden]{display:none!important}
.cal-top{justify-content:flex-end;min-height:44px}

/* Round 2. Calendar: the 3-way switch is three equal thirds; each label sits in the middle of its own third. */
.calendar-view-tabs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.calendar-view-tabs button{justify-content:center;text-align:center;padding-left:4px;padding-right:4px}
.calendar-view-tabs button span{width:min-content;max-width:100%}

/* Round 2. Hosted by: creator-only Delete switch top right; the × only shows while it is on. */
.host-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.host-head h2{margin:0}
.creator-switch.small{min-height:44px;gap:8px;font-size:11px}
.creator-switch.small i{width:38px;height:22px}
.creator-switch.small i::after{width:16px;height:16px}
.creator-switch.small.on i::after{transform:translateX(16px)}
.del-switch.on i{background:#fca5a5}
.host-chip-wrap .host-x{animation:hostx .18s ease-out}
@keyframes hostx{from{transform:scale(.6);opacity:0}}

/* Round 2. Participation: no Edit; a tucked-away creator switch at the bottom for manual extras. */
.rank-extras{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:22px;padding-top:10px;border-top:1px dashed #ffffff22;opacity:.8}
.rank-extras small{font-size:11px;opacity:.75;text-align:right}
.rank-list.extras-on .rank-row{grid-template-columns:44px minmax(0,1fr) auto}
.rank-inline{display:inline-flex;align-items:center;gap:4px}
.rank-inline .step{min-width:44px;min-height:44px;border-radius:12px;border:1px solid #ffffff2a;background:#ffffff10;color:inherit;font:inherit}
.rank-inline output{min-width:22px;text-align:center;font-size:12px}
@media (prefers-reduced-motion:reduce){.host-chip-wrap .host-x{animation:none}}

/* ======================= 3.4.2 Game 3 · Deeper Rooms ======================= */
.arcade-game3 img,.g3-art,.g3-choice img{image-rendering:pixelated}
.arcade-game3{--card-bg:url('game3/room-wall-1.png')!important}
.g3-hero{position:relative}
.g3-hero .g3-art{width:112px;height:112px;object-fit:contain;display:block;margin:0 auto 8px;filter:drop-shadow(0 8px 14px #0008)}
.g3-hero .g3-shake{position:absolute;width:64px;height:64px;left:calc(50% - 104px);top:44px;margin:0}
body.g3-playing{overflow:hidden}
body.g3-playing .app-header,body.g3-playing #nav{visibility:hidden}
.g3-stage{position:fixed;inset:0;z-index:200;background:#000;touch-action:none;user-select:none;-webkit-user-select:none;overscroll-behavior:none}
.g3-stage canvas{display:block;width:100%;height:100%;touch-action:none;outline:0}
.g3-ctl{position:absolute;inset:0;pointer-events:none}
.g3-ctl>*{pointer-events:auto}
.g3-tr{position:absolute;right:max(10px,env(safe-area-inset-right));top:10px;display:flex;gap:10px}
.g3-pix{width:72px;height:44px;border:0;border-radius:0;padding:0;background:transparent 0 0/200% 100% no-repeat;image-rendering:pixelated}
.g3-pix:active{background-position:100% 0}
.g3-nuke{position:absolute;left:50%;top:8px;width:112px;height:63px;margin-left:-56px;border:0;padding:0;background:transparent 0 0/200% 100% no-repeat;image-rendering:pixelated;transform:scale(0);opacity:0;pointer-events:none;transition:transform .35s cubic-bezier(.3,1.6,.5,1),opacity .2s}
.g3-nuke.on{transform:scale(1);opacity:1;pointer-events:auto;animation:g3nuke 1.4s ease-in-out .4s infinite}
.g3-nuke:active{background-position:100% 0}
@keyframes g3nuke{50%{transform:scale(1.07)}}
.g3-jump{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:18px;width:84px;height:84px;border-radius:50%;border:2px solid #ffffff66;background:#ffffff1c;color:#fff;font:12px Zen,system-ui,sans-serif;letter-spacing:1px}
.g3-jump.held{background:#86efac40;border-color:#86efac;transform:scale(.94)}
.g3-hint{position:absolute;left:0;right:0;bottom:22px;display:flex;justify-content:space-around;pointer-events:none;font:11px Zen,system-ui,sans-serif;color:#ffffffb0;letter-spacing:1px;transition:opacity .4s}
.g3-hint.gone{opacity:0}
.g3-rot{display:none;position:absolute;left:0;right:0;top:64px;text-align:center;font:12px Zen,system-ui,sans-serif;color:#ffd84a;pointer-events:none}
@media (orientation:portrait){.g3-rot{display:block}}
.g3-overlay{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:16px;background:#000a;overflow:auto}
.g3-card{width:min(520px,100%);padding:18px 20px;border-radius:24px;text-align:center;background:linear-gradient(180deg,var(--dlg,#141032),#0b0920);border:1px solid #86efac55;box-shadow:0 30px 60px -20px #000}
.g3-card h2{font-size:22px;margin:6px 0 4px}
.g3-card p{margin:4px 0 10px}
.g3-card .flight-final-score{display:block;font-size:44px}
.g3-acts{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin:8px 0}
.g3-acts .primary{min-width:180px}
.g3-acts .text{min-height:44px}
.g3-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.g3-choice{min-height:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border-radius:18px;border:2px solid #86efac;background:#1d1638;color:#86efac;font:12px Zen,system-ui,sans-serif}
.g3-choice img{width:32px;height:32px}
.g3-card .fg-music{margin-top:8px}
@media (prefers-reduced-motion:reduce){.g3-nuke.on{animation:none}}

/* ======================= 3.4.2 redesign: the fixed base theme (owner's pick: 5 · Cosmic purple-green) =======================
   Every screen and dialog uses it. Season colours stay only on Watch (body[data-season-theme]) and the Player.
   Motion = transform/opacity only, stops with reduced motion; no blur over scrolling lists. */
:root{--t0:#0a0820;--t1:#130f33;--g1:#6d3fe0;--g2:#22c07a;--g3:#2b4fd0;--glow:.9;--ta:#86efac;--ta2:#c4b5fd;--card:#b4a0ff14;--cardb:#86efac33;--dlg:#141032;
 --bg:#0a0820;--lime:#86efac;--glass:linear-gradient(180deg,var(--card),#b4a0ff08)}
html,body{background:var(--t0)!important}
body{background-image:none!important}
body:before{z-index:0;opacity:.5}
.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:linear-gradient(170deg,var(--t0),var(--t1) 70%);transition:opacity .4s}
.aurora::before{content:"";position:absolute;inset:-20%;opacity:var(--glow);will-change:transform;
 background:radial-gradient(45% 30% at 18% 12%,#6d3fe0bf,#0000 70%),radial-gradient(40% 28% at 88% 32%,#22c07a99,#0000 70%),radial-gradient(55% 32% at 30% 78%,#2b4fd073,#0000 70%),radial-gradient(35% 22% at 80% 92%,#6d3fe066,#0000 70%);
 animation:aurora 38s ease-in-out infinite alternate}
.aurora::after{content:"";position:absolute;inset:0;opacity:.5;background:radial-gradient(#fff 1px,#0000 1.3px) 0 0/53px 47px,radial-gradient(#dfe6ff 1px,#0000 1.3px) 23px 31px/71px 67px}
@keyframes aurora{50%{transform:translate(4%,3%) scale(1.06)}to{transform:translate(-3%,5%) scale(1.03)}}
body[data-season-theme] .aurora{opacity:0}
.app-header{background:color-mix(in srgb,var(--t0) 82%,#0000)!important;border-bottom:1px solid var(--cardb)!important;backdrop-filter:none!important}
.header-icon,.header-refresh{background:#ffffff0d!important;border:1px solid #ffffff26!important;color:#e9e4ff!important}
nav#nav{background:color-mix(in srgb,var(--t0) 90%,#0000)!important;border-color:var(--cardb)!important;backdrop-filter:none!important}
nav#nav button.active{color:var(--ta)!important}
nav#nav button.active:before{background:color-mix(in srgb,var(--ta) 16%,#0000)!important}
nav#nav button.active:after{background:var(--ta)!important;box-shadow:0 0 10px var(--ta)!important}
/* glass cards */
.card-dark,.crew-tile,.arcade-card,.quote-card,.crew-card,.orbit-card,.mp-plan,.crew-update,.crew-empty,.fg-board,.fg-new,.arcade-section,.stats-entry,
.month-card,.calendar-agenda,.upcoming-plan,.next-episode-card,.plans-empty,.calendar-empty,.agenda-item,.ufo-list li,.rank-row,.siege-rules li,.idea,.ph-daymode,.creator-card,.about-card,.conn-card{
 background:var(--glass)!important;border-color:var(--cardb)!important}
.arcade-card{background:linear-gradient(90deg,color-mix(in srgb,var(--t1) 92%,#0000),color-mix(in srgb,var(--t1) 55%,#0000)),var(--card-bg) center/cover!important}
#schedule-dialog,#modal,#season-picker,.sound-dialog,#ask-dialog{background:linear-gradient(180deg,var(--dlg),color-mix(in srgb,var(--dlg) 80%,#000))!important;border:1px solid var(--cardb)!important}
dialog::backdrop{background:#05031acc!important;backdrop-filter:none!important}
.primary,.fg-start-btn{background:var(--ta)!important;color:#062010!important;box-shadow:0 8px 24px -10px var(--ta)!important}
.secondary{background:#ffffff0d!important;border:1px solid #ffffff2a!important;color:#ece8ff!important}
.text{color:var(--ta)}
.eyebrow,.ph-eyebrow,.fg-eyebrow{color:var(--ta2)!important}
.watch-tabs,.idea-status-tabs,.calendar-view-tabs,.plan-filters{background:color-mix(in srgb,var(--t0) 70%,#0000)!important;border:1px solid var(--cardb)!important}
.watch-tabs button.active,.idea-status-tabs button.active,.calendar-view-tabs button.active,.plan-filters button.active{background:color-mix(in srgb,var(--ta) 22%,#0000)!important;color:#fff!important;border:1px solid var(--ta)!important;box-shadow:none!important}
.chip.on,.subject-tab.active{background:var(--ta)!important;border-color:var(--ta)!important;color:#062010!important}
.creator-switch.on i,.sound-row .creator-switch.on i{background:var(--ta)}
@media (prefers-reduced-motion:reduce){.aurora::before{animation:none}}

/* ---------- Home ---------- */
.ph-ticker{position:relative;margin:-6px -22px 12px;overflow:hidden;border-block:1px solid var(--cardb);background:#00000026;height:34px;display:flex;align-items:center;contain:paint}
.ph-ticker::before,.ph-ticker::after{content:"";position:absolute;top:0;bottom:0;width:28px;z-index:2;pointer-events:none}
.ph-ticker::before{left:0;background:linear-gradient(90deg,var(--t0),#0000)}.ph-ticker::after{right:0;background:linear-gradient(270deg,var(--t0),#0000)}
.ph-tick-track{display:flex;width:max-content;flex:none;animation:tick var(--tick,30s) linear infinite;will-change:transform;backface-visibility:hidden;transform:translate3d(0,0,0)}
.ph-tick-half{display:flex;align-items:center;gap:14px;padding-right:14px;flex:none;white-space:nowrap}
.ph-tick{font-size:11px;color:#e9e4ff}.ph-tick b{color:var(--ta);font-weight:400;margin-right:7px;letter-spacing:1px}
.ph-ticker i{font-style:normal;color:var(--ta2);font-size:11px}
@keyframes tick{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.ph-top.ph-top2{display:flex!important;align-items:center;gap:14px;min-height:0!important;padding:4px 0 2px!important;margin:0 0 14px!important}
.ph-top2 .ph-greeting{min-width:0;flex:1}
.ph-top2 .ph-eyebrow{display:block;white-space:nowrap;font-size:11px!important;letter-spacing:.4px!important}
.ph-top2 h1{font-size:23px!important;line-height:1.15!important;margin:6px 0 0!important}
.ph-me{position:relative;flex:none;width:64px;height:64px;padding:0;border-radius:20px;border:2px solid var(--ta);box-shadow:0 0 22px -6px var(--ta);background:#ffffff0d;color:var(--ta);display:grid;place-items:center}
.ph-me .av{width:100%;height:100%;border-radius:18px;font-size:26px}
.ph-me.is-empty{border-style:dashed;border-color:#ffffff55;box-shadow:none}
.ph-me-plus{font-size:28px;line-height:1;color:#e9e4ff}
.ph-me em{position:absolute;right:-6px;bottom:-6px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--t1);border:1px solid #ffffff44;color:#fff}
.ph-me em svg{width:12px;height:12px}
.av{display:inline-grid;place-items:center;width:var(--av,32px);height:var(--av,32px);border-radius:50%;object-fit:cover;flex:none;background:var(--avc,#c4b5fd);color:#120a24;font-size:calc(var(--av,32px)*.42);line-height:1;border:2px solid var(--t1)}
/* NEXT EPISODE ticket */
.ph-next.ph-ticket{position:relative;display:grid!important;grid-template-columns:90px minmax(0,1fr) 20px;align-items:center;gap:14px!important;width:100%;padding:12px 14px 12px 12px!important;min-height:0!important;text-align:left;border-radius:24px!important;overflow:visible;
 background:linear-gradient(120deg,color-mix(in srgb,var(--ta) 20%,var(--t1)),color-mix(in srgb,var(--t1) 92%,#0000) 60%)!important;border:1px solid color-mix(in srgb,var(--ta) 50%,#ffffff20)!important;box-shadow:0 16px 40px -22px var(--ta)!important;color:#fff}
.ph-ticket::before,.ph-ticket::after{content:"";position:absolute;left:108px;width:16px;height:16px;border-radius:50%;background:var(--t0);border:1px solid color-mix(in srgb,var(--ta) 50%,#ffffff20)}
.ph-ticket::before{top:-9px;clip-path:inset(50% 0 0 0)}.ph-ticket::after{bottom:-9px;clip-path:inset(0 0 50% 0)}
.ph-stub{position:relative;width:90px;height:88px;box-sizing:border-box;display:flex!important;flex-direction:column;align-items:center;justify-content:center;border-right:1px dashed #ffffff33;padding:0!important;background:none!important;border-radius:0!important;box-shadow:none!important;min-height:0!important}
.ph-stub b{position:relative;font-size:19px;font-weight:400;line-height:1;color:#fff;text-shadow:0 0 14px var(--ta);max-width:62px;text-align:center}
.ph-stub small{position:relative;font-size:11px;letter-spacing:.5px;color:#d9d3f5;margin-top:2px}
.ph-stub.is-today b{font-size:12px;color:var(--ta);letter-spacing:0}
.ph-stub.is-today small{font-size:11px}
.ph-stub b.d3{font-size:15px}
.ph-stub.is-empty b{font-size:18px;white-space:nowrap;max-width:none;line-height:1.05;color:var(--ta);letter-spacing:1px}
.ph-ring{position:absolute;left:calc(50% + .5px);top:50%;width:80px;height:80px;margin:-40px 0 0 -40px;transform:rotate(-90deg)}
.ph-ring circle{fill:none;stroke-width:4}.ph-ring-bg{stroke:#ffffff1a}.ph-ring-fg{stroke:var(--ta);stroke-linecap:round;filter:drop-shadow(0 0 4px var(--ta))}
.ph-ticket .ph-next-copy{min-width:0;display:grid;gap:4px}
.ph-ticket .ph-label{font-size:11px;letter-spacing:1.5px;color:var(--ta)}
.ph-ticket .ph-next-copy>b{font-size:14px!important;font-weight:400;line-height:1.3;overflow-wrap:normal;word-break:normal;hyphens:none;white-space:normal!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:clip!important}
.ph-ticket .ph-next-meta{font-size:11px;color:#d9d3f5;white-space:normal!important;line-height:1.4}
.ph-ticket>svg{width:20px;height:20px;color:var(--ta)}
.ph-daymode-row{margin-top:12px}
/* Day mode: the old big-number card, richer */
.ph-day{position:relative;overflow:hidden;padding:18px!important;border-radius:26px!important;background:linear-gradient(160deg,color-mix(in srgb,var(--ta) 24%,var(--t1)),var(--t1) 70%)!important;border:1px solid color-mix(in srgb,var(--ta) 70%,#0000)!important;box-shadow:0 20px 50px -24px var(--ta)!important}
.ph-day::before{content:"";position:absolute;right:-60px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(#c4b5fd55,#0000 70%);pointer-events:none}
.ph-day>*{position:relative}
.ph-day h1{font-size:20px!important;line-height:1.2!important;margin:12px 0 8px!important}
.ph-day-clock{display:flex!important;flex-direction:column;align-items:center;gap:8px;margin:18px 0 16px!important;padding:18px 8px!important;border-radius:22px!important;background:#00000038!important;border:1px solid #ffffff1a!important}
.ph-digits{display:flex;align-items:flex-start;gap:6px}
.ph-digits span{display:flex;flex-direction:column;align-items:center;min-width:70px;padding:10px 4px 8px;border-radius:16px;background:linear-gradient(180deg,#ffffff14,#ffffff05);border:1px solid #ffffff1f}
.ph-digits b{font-size:36px;font-weight:400;line-height:1;color:var(--ta);text-shadow:0 0 22px var(--ta);font-variant-numeric:tabular-nums}
.ph-digits small{font-size:11px!important;letter-spacing:1.5px;opacity:.75;margin-top:6px}
.ph-digits i{font-style:normal;font-size:28px;margin-top:8px;opacity:.6}
.ph-day-clock>small{font-size:11px!important;opacity:.85}
.ph-day-clock .ph-big{font-size:52px!important;font-weight:400;line-height:1}
.ph-day.is-live{border-color:#ff6b8b!important}.ph-day.is-live .ph-big{color:#ff6b8b;text-shadow:0 0 26px #ff4f6d}
.ph-day.is-done .ph-big{color:var(--ta2);text-shadow:0 0 22px var(--ta2)}
.ph-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:370px){.ph-ring{width:78px;height:78px;margin:-39px 0 0 -39px}.ph-stub b{font-size:18px}.ph-stub b.d3{font-size:13px}.ph-digits span{min-width:60px}.ph-digits b{font-size:30px}.ph-top2 h1{font-size:20px!important}.ph-next.ph-ticket{grid-template-columns:86px minmax(0,1fr) 18px;gap:10px!important}.ph-stub{width:86px;height:86px}.ph-ticket::before,.ph-ticket::after{left:100px}}
@media (prefers-reduced-motion:reduce){.ph-tick-track{animation:none}}

/* ---------- Season pop-up B (text first; the season colour is only its accent) ---------- */
#season-picker.is-season-pop{width:min(360px,calc(100vw - 28px))!important;max-width:none!important;max-height:calc(100vh - 120px)!important;overflow:auto;padding:16px!important;border:1px solid var(--sacc,#86efac)!important;border-radius:26px!important;box-shadow:0 30px 60px -20px #000,0 0 40px -18px var(--sacc,#86efac)}
.season-pop{position:relative;text-align:center;padding:6px 2px 2px}
.season-pop .picker-close{position:absolute;right:-4px;top:-4px;width:44px;height:44px;border-radius:50%;background:#ffffff12;color:#fff;font-size:22px}
.sp-label{display:block;font-size:11px;letter-spacing:2px;color:var(--sacc)}
.sp-num{display:block;font-size:68px;font-weight:400;line-height:1;margin-top:6px;color:var(--sacc);text-shadow:0 0 30px var(--sacc)}
.season-pop h2{font-size:21px;font-weight:400;margin:6px 0 14px!important}
.sp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sp-stats span{padding:10px 4px;border-radius:16px;background:#ffffff0a;border:1px solid #ffffff1a}
.sp-stats b{display:block;font-size:19px;font-weight:400;color:var(--sacc)}
.sp-stats small{font-size:11px;opacity:.8}
.sp-span{font-size:11px!important;opacity:.8;line-height:1.5!important;margin:12px 0!important;color:#e9e4ff!important}
.sp-rows{display:grid;gap:8px;margin-top:12px}
.sp-rows button{display:flex;align-items:center;gap:10px;min-height:50px;padding:0 14px;border-radius:16px;background:#ffffff0c;border:1px solid #ffffff1e;font-size:13px;color:#fff;text-align:left}
.sp-rows button em{margin-left:auto;font-style:normal;color:var(--sacc);font-size:12px}
.sp-rows button svg{width:18px;height:18px;flex:none}
.sp-rows button:disabled em{color:#b4afce}

/* ---------- Watch (season colours stay here): cards blend with their season, still stand apart ---------- */
body[data-season-theme="1"]{--sacc:#ffa24c}body[data-season-theme="2"]{--sacc:#86f05a}body[data-season-theme="3"]{--sacc:#ff4fd8}body[data-season-theme="4"]{--sacc:#ffd84a}body[data-season-theme="5"]{--sacc:#3ef0dd}
body[data-season-theme] .chip.on{background:var(--sacc)!important;border-color:var(--sacc)!important;color:#140a20!important}
body[data-season-theme] .watch-tabs button.active{background:color-mix(in srgb,var(--sacc) 22%,#0000)!important;border-color:var(--sacc)!important}
body[data-season-theme] .eyebrow{color:var(--sacc)!important}
.episode.watch-card{border-radius:22px!important;margin-top:14px!important;border:1px solid color-mix(in srgb,var(--sacc,var(--ta)) 40%,#ffffff14)!important;
 background:linear-gradient(180deg,color-mix(in srgb,var(--sacc,var(--ta)) 13%,#120f22ee),color-mix(in srgb,var(--sacc,var(--ta)) 6%,#0c0a18ee))!important;box-shadow:0 12px 26px -18px #000,inset 0 1px 0 #ffffff1c!important;transform-origin:50% 50%}
.watch-card .wc-label{background:color-mix(in srgb,var(--sacc,var(--ta)) 45%,#1a1030)!important;border-color:color-mix(in srgb,var(--sacc,var(--ta)) 70%,#fff0)!important;color:#fff}
.watch-card .wc-top .wc-season{color:color-mix(in srgb,var(--sacc,var(--ta)) 75%,#fff)}
.wc-top .save.wc-star,.wc-top .wc-flip{position:relative!important;width:44px!important;height:44px!important;min-width:44px;margin:-6px -6px -6px 0;padding:0;background:none!important;border:0!important;display:grid;place-items:center;color:#e9e4ff}
.wc-top .save.wc-star{margin-left:auto}
.wc-top .wc-star svg,.wc-top .wc-flip svg{width:16px;height:16px;padding:7px;box-sizing:content-box;border-radius:10px;background:#ffffff0d;border:1px solid #ffffff1f}
.wc-top .wc-star svg{fill:none}
.wc-top .wc-star.on svg{fill:#140a20;background:var(--sacc,var(--ta));border-color:var(--sacc,var(--ta));color:#140a20}
.wc-top .wc-flip{margin-left:4px}
.wc-back{position:absolute;inset:0;z-index:3;display:none;flex-direction:column;gap:10px;padding:12px;border-radius:inherit;background:linear-gradient(180deg,color-mix(in srgb,var(--sacc,var(--ta)) 20%,#120f22),#0c0a18);overflow:hidden}
.watch-card.flipped .wc-back{display:flex}
.wc-back .wc-flip{margin-left:auto!important}
.wc-people{display:flex;align-items:center;gap:12px;margin-top:6px}
.wc-stack{display:flex}.wc-stack .av{margin-right:-8px;border-color:#120f22}
.wc-people b{font-size:22px;font-weight:400;color:var(--sacc,var(--ta));margin-left:10px}
.wc-names{font-size:12px!important;line-height:1.5!important;margin:0!important;color:#ece8ff!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.wc-none{color:#b4afce!important}
.wc-people-edit{margin-top:auto;min-height:44px!important;align-self:flex-start;font-size:12px!important}
.people-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.people-chip{display:inline-flex;align-items:center;gap:8px;padding:0 14px 0 6px!important}
.people-chip .av{border:0}
.host-chip.on{background:var(--ta)!important;border-color:var(--ta)!important;color:#062010!important}
/* Continue: time left, tinted with the page's season */
.continue-play{background:color-mix(in srgb,var(--sacc,var(--ta)) 12%,#100d1ee6)!important;border-color:color-mix(in srgb,var(--sacc,var(--ta)) 40%,#0000)!important}
.continue-copy span{color:var(--sacc,var(--ta))!important}

/* ---------- Info: K tractor beam on a starry sky; the tiles float out of step ---------- */
.kscene{position:relative;margin:-10px -22px 0;padding:0 22px 8px;text-align:center;overflow:hidden;isolation:isolate}
.ksky{position:absolute;inset:0;z-index:-1;background:radial-gradient(#fff 1px,#0000 1.4px) 0 0/41px 37px,radial-gradient(#cfe 1px,#0000 1.3px) 17px 23px/59px 53px;opacity:.75}
.ksaucer{position:relative;z-index:3;display:block;width:150px;height:120px;object-fit:contain;margin:6px auto 0;filter:drop-shadow(0 10px 18px #0009);animation:kbob 5s ease-in-out infinite}
@keyframes kbob{50%{transform:translateY(7px) rotate(-1.5deg)}}
.kbeam{position:absolute;left:50%;top:104px;width:330px;height:430px;margin-left:-165px;z-index:0;clip-path:polygon(41% 0,59% 0,100% 100%,0 100%);
 background:linear-gradient(#86efacb3,#86efac38 55%,#0000),repeating-linear-gradient(0deg,#ffffff16 0 2px,#0000 2px 10px);animation:kshim 1.8s linear infinite}
@keyframes kshim{to{background-position:0 0,0 -20px}}
.kbeam b{position:absolute;bottom:20%;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff;animation:kup 3s linear infinite}
.kbeam b:nth-child(1){left:32%}.kbeam b:nth-child(2){left:46%;animation-delay:-.7s}.kbeam b:nth-child(3){left:58%;animation-delay:-1.4s}.kbeam b:nth-child(4){left:68%;animation-delay:-2.1s}.kbeam b:nth-child(5){left:52%;animation-delay:-2.6s}
@keyframes kup{to{transform:translateY(-240px);opacity:0}}
.kscene .about-hero{position:relative;z-index:3;background:none!important;border:0!important;padding:4px 0 0!important;overflow:visible;border-radius:0}
.kscene .about-hero::before{display:none}
.kscene .about-hero h1{font-size:30px!important;margin:6px 0!important}
.kscene .about-hero h1 span{color:var(--ta)!important}
.kscene .about-stats3{position:relative;z-index:3;margin-top:24px!important}
.kscene .about-stat{min-height:112px;border-radius:20px!important;text-align:left;display:flex;flex-direction:column;justify-content:flex-end;
 background:linear-gradient(180deg,color-mix(in srgb,var(--st-ink) 26%,#0000),color-mix(in srgb,var(--t0) 80%,#0000))!important;border:1px solid color-mix(in srgb,var(--st-ink) 65%,#fff3)!important;box-shadow:0 -14px 30px -18px var(--ta);animation:kfloat 7s ease-in-out infinite}
.kscene .about-stat-clips{animation-delay:-3.5s}.kscene .about-stat-gaming{animation-delay:-.6s}
.about-stat-episodes{--st-ink:#86f05a!important}.about-stat-clips{--st-ink:#ff8fd8!important}.about-stat-gaming{--st-ink:#7dd3fc!important}
@keyframes kfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.youtube-channel-card{background:var(--glass)!important;border:1px solid var(--cardb)!important}
@media (prefers-reduced-motion:reduce){.ksaucer,.kbeam,.kbeam b,.kscene .about-stat{animation:none}}

/* ---------- Crew corner: Quotes = comic speech bubbles with the speaker's crew-card photo ---------- */
.quote-wall{gap:0!important}
.quote-card.qb{position:relative;margin:24px 26px 0 0;padding:16px 18px 14px!important;border-radius:22px!important;background:#fff6e6!important;color:#1a1326!important;border:2.5px solid #0b0614!important;box-shadow:5px 5px 0 var(--c)!important}
.quote-card.qb::after{content:"";position:absolute;left:26px;bottom:-15px;width:22px;height:16px;background:#fff6e6;border:2.5px solid #0b0614;border-top:0;border-right:0;transform:skewX(-25deg);border-radius:0 0 0 6px}
.quote-card.qb.r{margin:24px 0 0 26px}
.quote-card.qb.r::after{left:auto;right:60px;transform:skewX(25deg) scaleX(-1)}
.quote-card.qb p{font-size:15px!important;line-height:1.35!important;padding-right:30px;color:#1a1326!important}
.quote-card.qb .quote-foot{color:#1a1326!important}
.quote-card.qb .quote-foot>span{font-size:11px}
.quote-card.qb .quote-play{min-height:40px;padding:0 12px;border-radius:99px;background:#1a1326!important;color:#fff6e6!important;font-size:11px}
.quote-card.qb .quote-by{color:#5b4f6e!important}
.quote-card.qb .quote-by .icon-button{background:#1a1326;border-color:#1a1326}
.quote-card.qb .qav{position:absolute;right:-16px;top:-16px;box-shadow:0 0 0 3px #0b0614;border:0}
.quote-card.qb .pow{position:absolute;left:-12px;top:-16px;padding:4px 10px;font-size:11px;color:#1a1326;background:#ffd84a;border:2px solid #0b0614;transform:rotate(-8deg);clip-path:polygon(0 20%,12% 0,30% 14%,50% 0,68% 14%,88% 0,100% 22%,92% 50%,100% 80%,86% 100%,66% 86%,48% 100%,30% 86%,12% 100%,0 80%,8% 50%)}
.crew-tabs.watch-tabs{overflow-x:auto;scrollbar-width:none}

/* ---------- Calendar: the confirmed agenda item ---------- */
.agenda-item.agenda2{position:relative;display:flex!important;gap:14px;padding:14px!important;border-radius:24px!important;overflow:hidden;background:linear-gradient(120deg,#86f05a24,color-mix(in srgb,var(--t1) 90%,#0000) 55%)!important;border:1px solid #86f05a88!important;box-shadow:0 16px 40px -24px #86f05a}
.agenda2 .aglow{position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(#86f05a40,#0000 70%);pointer-events:none}
.agenda2 .adate{flex:none;align-self:flex-start;width:68px!important;height:auto!important;min-height:0!important;gap:2px;padding:10px 0!important;display:flex!important;flex-direction:column;align-items:center;border-radius:18px!important;background:linear-gradient(180deg,#86f05a,#3fae6b)!important;color:#062010!important;border:0!important;box-shadow:0 0 24px -6px #86f05a}
.agenda2 .adate b{font-size:30px;font-weight:400;line-height:1.05;color:#062010!important}.agenda2 .adate small{font-size:11px;letter-spacing:1px;color:#062010}
.agenda2 .agenda-content{position:relative;flex:1;min-width:0}
.agenda2 .achip{border:0!important;padding:0!important;font-size:11px!important;letter-spacing:1px;color:#86f05a!important}
.agenda2 h3{font-size:15px!important;font-weight:400;line-height:1.25;margin:5px 0 8px!important}
.agenda2 .ameta{display:flex;flex-wrap:wrap;gap:6px}
.agenda2 .ameta span{font-size:11px;padding:5px 9px;border-radius:99px;background:#ffffff10;border:1px solid #ffffff22}
.agenda2 .awhen{display:block;margin-top:10px;font-size:11px;color:#86f05a}
.calendar-day.confirmed{background:#163a26!important;border-color:#86f05aaa!important;color:#b7f7a0!important}
.calendar-day.selected{background:color-mix(in srgb,var(--ta2) 25%,var(--t1))!important;border-color:var(--ta2)!important}
.calendar-day{background:#ffffff08!important;border-color:#ffffff1c!important}
.month-controls button{background:#ffffff0d!important;border-color:#ffffff2a!important}

/* ---------- Sound panel: moving sound bars next to each slider (direction O); height follows the volume ---------- */
.sound-row-ctl{display:flex;align-items:center;gap:10px}
.sound-row-ctl input[type=range]{flex:1;min-width:0}
.sbars{flex:none;display:flex;align-items:flex-end;gap:3px;width:34px;height:24px}
.sbars i{flex:1;height:100%;border-radius:2px;background:var(--ta);transform-origin:50% 100%;transform:scaleY(calc(.15 + var(--lvl,0)*.85));animation:sbar 1.1s ease-in-out infinite;opacity:.9}
.sbars i:nth-child(2){animation-delay:-.3s}.sbars i:nth-child(3){animation-delay:-.6s;background:var(--ta2)}.sbars i:nth-child(4){animation-delay:-.15s}.sbars i:nth-child(5){animation-delay:-.45s;background:var(--ta2)}
@keyframes sbar{50%{transform:scaleY(calc(.1 + var(--lvl,0)*.35))}}
.sbars.off i{animation:none;transform:scaleY(.12);opacity:.35}
.sound-dialog input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--ta) 0 var(--p,0%),#ffffff22 var(--p,0%))!important}
.sound-dialog input[type=range]::-webkit-slider-thumb{background:var(--ta)!important}
@media (prefers-reduced-motion:reduce){.sbars i{animation:none}}
.wc-backcode{padding:5px 10px;border-radius:999px;flex:none}

/* ======================= 3.4.3 Watch = design A (owner: "nice blending") ======================= */
/* The page: the season's art, heavily blurred, fills the screen behind everything (static layer, no animation). */
body[data-season-theme] .season-atmosphere::before{inset:-80px!important;background-position:center!important;filter:blur(38px) saturate(1.5) brightness(.42)!important;opacity:1!important}
body[data-season-theme] .season-atmosphere::after{background:linear-gradient(180deg,#07060c00 0,#07060c40 35%,#07060cb8 90%)!important}
body[data-season-theme]{background:#07060c!important}
body[data-season-theme] .app-header{background:#07060c66!important;border-bottom-color:#ffffff14!important}
body[data-season-theme] nav#nav{background:#07060ccc!important;border-color:color-mix(in srgb,var(--sacc) 30%,#ffffff14)!important}
body[data-season-theme] nav#nav button.active{color:var(--sacc)!important}
body[data-season-theme] nav#nav button.active:after{background:var(--sacc)!important;box-shadow:0 0 10px var(--sacc)!important}
body[data-season-theme] nav#nav button.active:before{background:color-mix(in srgb,var(--sacc) 18%,#0000)!important}
/* The hero: background art fading down, the alien on the right, SEASON 0n in the season colour */
.season-hero{position:relative;height:230px;margin:-27px -22px 0;overflow:hidden;isolation:isolate}
.sh-art{position:absolute;inset:0;background:var(--bgart) center/cover;-webkit-mask:linear-gradient(#000 45%,#0000);mask:linear-gradient(#000 45%,#0000)}
.sh-alien{position:absolute;right:-6px;bottom:-26px;width:200px;height:200px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 12px 24px #000a);animation:shfloat 6s ease-in-out infinite}
@keyframes shfloat{50%{transform:translateY(-8px) rotate(-2deg)}}
.sh-copy{position:absolute;left:22px;bottom:10px;z-index:2;text-shadow:0 2px 12px #000c}
.sh-copy small{display:block;font-size:11px;letter-spacing:3px;color:#fff;opacity:.85}
.sh-copy b{display:block;font-size:58px;font-weight:400;line-height:1;color:var(--sacc);text-shadow:0 0 30px var(--sacc)}
.sh-copy span{display:block;font-size:15px;color:#fff;margin-top:2px}
/* Round season buttons with each season's own art */
.season-dots{display:flex!important;align-items:center;gap:10px!important;padding:16px 2px 12px!important;overflow-x:auto}
.season-dots .chip{flex:none}
body .season-dots .chip.sdot{position:relative;width:52px!important;height:52px!important;min-width:52px;padding:0!important;border-radius:50%!important;border:0!important;background:var(--dot) center/cover!important;box-shadow:0 0 0 2px #ffffff33!important;color:transparent!important;transition:box-shadow .25s,transform .25s}
.season-dots .sdot span{position:absolute;right:-2px;bottom:-2px;min-width:20px;height:20px;padding:0 5px;border-radius:99px;display:grid;place-items:center;font-size:11px;color:#140a20;background:var(--dacc);border:2px solid #07060c}
body .season-dots .chip.sdot.on{box-shadow:0 0 0 3px var(--dacc),0 0 18px var(--dacc)!important;transform:scale(1.06)}
.season-dots .chip:not(.sdot){min-height:46px}
/* Tabs, search and chips on a season page sit on glass so the colours show through */
body[data-season-theme] .watch-tabs,body[data-season-theme] .search input,body[data-season-theme] .host-filter{background:#ffffff10!important;border-color:#ffffff24!important}
@media (max-width:370px){.season-hero{height:210px;margin:-23px -17px 0}.sh-alien{width:176px;height:176px}.sh-copy b{font-size:50px}.season-dots .sdot{width:46px!important;height:46px!important;min-width:46px}}
@media (prefers-reduced-motion:reduce){.sh-alien{animation:none}}

/* 3.4.3 Ideas: Subjects / Shortlist / Filmed get the same rounded pill as Watch, never a square box */
.idea-status-tabs{border-radius:18px!important;padding:4px!important;gap:4px!important;overflow:hidden}
.idea-status-tabs button{border-radius:14px!important;border:1px solid transparent!important;min-height:44px;outline:0}
.idea-status-tabs button.active{border-color:var(--ta)!important;background:color-mix(in srgb,var(--ta) 22%,#0000)!important;box-shadow:none!important}
.idea-status-tabs button:focus-visible{outline:2px solid var(--ta);outline-offset:-2px}
.idea-status-tabs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))}
.idea-status-tabs button{display:flex!important;align-items:center;justify-content:center;gap:6px;padding:0 6px!important;min-width:0;font-size:11px!important;white-space:nowrap}