/* =====================================================================
   Drop In Plus looks: Midnight, Neon, Winter, Sunset (2026-10)
   Load after style.css. Each look is a class on <html>: theme-midnight,
   theme-neon, theme-winter, theme-sunset (like theme-christmas, the free seasonal one).
   Pictures live in public/themes/. Nothing here needs extra DOM: the start
   screen decorations are .landing's backgrounds and ::before / ::after.
   iPhone app (.native-call): the camera circle is drawn natively BEHIND the
   page, so the start screen paints no sky there (the app sets the sky color
   as the native backdrop) and keeps decorations away from the middle.
   ===================================================================== */

/* ---------- 1. Colors of each look ---------- */
html.theme-midnight {
  --yellow: #A9C6FF; --yellow-soft: #D3E2FF;
  --th-rgb: 169,198,255;                 /* the accent, for glows */
  --th-on: #0D1838;                      /* text on accent buttons */
  --th-edge: #5D79C2;                    /* pressed edge under accent buttons */
  --th-wave: #E3ECFF;                    /* the round wave button */
  --th-page: #0F1533;                    /* panel / Settings page */
  --th-label: rgba(206,219,255,.74);     /* small labels on the page */
  --th-band: linear-gradient(180deg, #C3D6FF 0%, #A9C6FF 55%, #98B6F6 100%);
}
html.theme-neon {
  --yellow: #FF5AB0; --yellow-soft: #FF9DD0;
  --ink-soft: #3A1531; --muted: rgba(0,0,0,.64);
  --th-rgb: 255,63,164;
  --th-cyan: #2CF2FF;
  --th-on: #1A0012;
  --th-edge: #A3176A;
  --th-wave: #FFE0F0;
  --th-page: #0B0716;
  --th-label: rgba(255,200,234,.74);
  --th-band: linear-gradient(135deg, #FF79C2 0%, #FF5AB0 48%, #F64CB4 100%);
}
html.theme-winter {
  --yellow: #8ED1FC; --yellow-soft: #CDEBFF;
  --th-rgb: 112,196,250;
  --th-on: #0E2E4A;
  --th-deep: #1F6DAA;                    /* frost-blue for text and switches on light pages */
  --th-edge: #4B97CB;
  --th-wave: #E0F2FE;
  --th-page: #EDF6FC;
  --th-label: rgba(14,46,74,.72);
  --th-band: linear-gradient(180deg, #BDE6FE 0%, #9AD6FC 55%, #86CBF8 100%);
}
html.theme-sunset {
  --yellow: #FF9461; --yellow-soft: #FFC7A6;
  --ink-soft: #452B28; --muted: rgba(0,0,0,.62);
  --th-rgb: 255,138,91;
  --th-on: #3A0E14;
  --th-deep: #C2412F;
  --th-edge: #C2502F;
  --th-wave: #FFE6D9;
  --th-page: #FFF2EA;
  --th-label: rgba(90,32,24,.76);
  --th-band: linear-gradient(120deg, #FFBE6E 0%, #FF9461 45%, #F9758A 100%);
}

html.theme-christmas {
  --yellow: #F4474E; --yellow-soft: #FF9A9E;
  --ink-soft: #3A1214; --muted: rgba(0,0,0,.64);
  --th-rgb: 244,71,78;
  --th-on: #2B0709;
  --th-edge: #A3141D;
  --th-wave: #FFE3E4;
  --th-page: #0D2F24;
  --th-label: rgba(208,238,224,.76);
  --th-band: linear-gradient(180deg, #FF6066 0%, #F4474E 55%, #E2363E 100%);
}

/* ---------- 2. Things every look shares (follow the accent) ---------- */
:is(.theme-christmas, .theme-midnight, .theme-neon, .theme-winter, .theme-sunset) .tile.speaking { box-shadow: inset 0 0 0 3px var(--yellow), 0 0 0 1px rgba(var(--th-rgb),.4), 0 0 28px rgba(var(--th-rgb),.32); }
:is(.theme-christmas, .theme-midnight, .theme-neon, .theme-winter, .theme-sunset) .tile.speaking .avatar span { box-shadow: 0 0 0 6px var(--yellow), 0 0 0 16px rgba(var(--th-rgb),.2); }
:is(.theme-christmas, .theme-midnight, .theme-neon, .theme-winter, .theme-sunset) .ring-pulse { background: rgba(var(--th-rgb),.35); }
:is(.theme-christmas, .theme-midnight, .theme-neon, .theme-winter, .theme-sunset) #btn-lock:not(.is-off) svg { filter: drop-shadow(0 0 6px rgba(var(--th-rgb),.6)); }
:is(.theme-christmas, .theme-midnight, .theme-neon, .theme-winter, .theme-sunset) :is(.ctl.active, #btn-games.active) { background: rgba(var(--th-rgb),.22); color: var(--yellow); }
:is(.theme-christmas, .theme-midnight, .theme-neon, .theme-winter, .theme-sunset) .pn-act.wave { background: var(--th-wave); }
:is(.theme-christmas, .theme-midnight, .theme-neon, .theme-winter, .theme-sunset) :is(.requests .person, .thread.unread) { background: linear-gradient(90deg, rgba(var(--th-rgb),.2), transparent 70%); }
:is(.theme-christmas, .theme-midnight, .theme-neon, .theme-winter, .theme-sunset) .lb-row.me { background: linear-gradient(90deg, rgba(var(--th-rgb),.24), transparent 75%); }
:is(.theme-christmas, .theme-midnight, .theme-neon, .theme-winter, .theme-sunset) .set-chip.wide { background: linear-gradient(90deg, var(--yellow-soft), var(--yellow)); color: var(--th-on); }
:is(.theme-christmas, .theme-midnight, .theme-neon, .theme-winter, .theme-sunset) :is(.games-wins, .gc-3d) { color: var(--yellow); }
:is(.theme-christmas, .theme-midnight, .theme-neon, .theme-winter, .theme-sunset) .set-me-avatar { box-shadow: 0 0 0 3px var(--set-card), 0 0 0 6px var(--yellow); }
:is(.theme-christmas, .theme-midnight, .theme-neon, .theme-winter, .theme-sunset) .qr-card { box-shadow: 0 0 0 3px var(--yellow), 0 14px 40px rgba(0,0,0,.25); }
:is(.theme-christmas, .theme-midnight, .theme-neon, .theme-winter, .theme-sunset) .join-form input:focus { box-shadow: 0 0 0 3px var(--yellow); }
:is(.theme-christmas, .theme-midnight, .theme-neon, .theme-winter, .theme-sunset) .landing .btn-primary { color: var(--th-on); box-shadow: 0 5px 0 var(--th-edge); }
:is(.theme-christmas, .theme-midnight, .theme-neon, .theme-winter, .theme-sunset) .landing .btn-primary:active { box-shadow: 0 1px 0 var(--th-edge); }
/* the colored band on top of the friends panel and the chat header */
:is(.theme-christmas, .theme-midnight, .theme-neon, .theme-winter, .theme-sunset) .chat-head { background: var(--th-band); }
:is(.theme-christmas, .theme-midnight, .theme-neon, .theme-winter, .theme-sunset) .games-card { background: radial-gradient(120% 70% at 100% 0%, rgba(255,255,255,.28), transparent 60%), var(--yellow); }

/* start screen: decorations sit behind the content */
:is(.theme-christmas, .theme-midnight, .theme-neon, .theme-winter, .theme-sunset) .landing-inner { position: relative; z-index: 1; }
:is(.theme-christmas, .theme-midnight, .theme-neon, .theme-winter, .theme-sunset) .landing::before,
:is(.theme-christmas, .theme-midnight, .theme-neon, .theme-winter, .theme-sunset) .landing::after {
  content: ''; position: fixed; z-index: 0; pointer-events: none;
  background-repeat: no-repeat;
}

/* dark looks (Midnight, Neon): dark page, white cards, light labels */
:is(.theme-christmas, .theme-midnight, .theme-neon) .landing { color: #fff; }
:is(.theme-christmas, .theme-midnight, .theme-neon) .landing :is(.legal a, .link-btn, .welcome-line, .room-note) { color: #fff; }
:is(.theme-christmas, .theme-midnight, .theme-neon) .auth-tabs { background: rgba(255,255,255,.12); }
:is(.theme-christmas, .theme-midnight, .theme-neon) .auth-tabs button[aria-selected="true"] { color: var(--ink); }
:is(.theme-christmas, .theme-midnight, .theme-neon) .landing-logo { box-shadow: 0 8px 26px rgba(0,0,0,.45); }
:is(.theme-christmas, .theme-midnight, .theme-neon) .sidebar { --pn-bg: var(--th-page); --pn-label: var(--th-label); --pn-head: #fff; --pn-chat: var(--th-page); }
:is(.theme-christmas, .theme-midnight, .theme-neon) .pn-count { background: rgba(255,255,255,.12); }
:is(.theme-christmas, .theme-midnight, .theme-neon) .pn-link { background: rgba(255,255,255,.07); }
:is(.theme-christmas, .theme-midnight, .theme-neon) .add-friend-icon { stroke: rgba(0,0,0,.45); }
:is(.theme-christmas, .theme-midnight, .theme-neon) :is(.chat-compose textarea, .chat-photo) { background: #EEF0F7; }
:is(.theme-christmas, .theme-midnight, .theme-neon) :is(.chat-day, .chat-system, .chat-older) { background: rgba(255,255,255,.1); color: rgba(235,238,255,.86); }
:is(.theme-christmas, .theme-midnight, .theme-neon) :is(.bubble-meta, .chat-note, .chat-hello span:last-child) { color: var(--th-label); }
:is(.theme-christmas, .theme-midnight, .theme-neon) .chat-hello b { color: #fff; }
:is(.theme-christmas, .theme-midnight, .theme-neon) .bubble.mine { background: var(--yellow); color: var(--th-on); }
:is(.theme-christmas, .theme-midnight, .theme-neon) .bubble-name { color: color-mix(in srgb, var(--c) 55%, #fff); }
:is(.theme-christmas, .theme-midnight, .theme-neon) .typing-bubble i { background: rgba(0,0,0,.45); }
:is(.theme-christmas, .theme-midnight, .theme-neon) .settings-modal {
  --set-bg: var(--th-page); --set-label: var(--th-label); --set-line: rgba(0,0,0,.08);
  --set-accent: var(--yellow); --set-head: #fff; --set-done-bg: var(--yellow); --set-done-ink: var(--th-on);
}
:is(.theme-christmas, .theme-midnight, .theme-neon) .settings-head { border-bottom-color: rgba(255,255,255,.08); }
:is(.theme-christmas, .theme-midnight, .theme-neon) .boards-tabs button { background: rgba(255,255,255,.1); color: #fff; }
:is(.theme-christmas, .theme-midnight, .theme-neon) .boards-tabs button[aria-selected="true"] { background: var(--set-done-bg); color: var(--set-done-ink); }
:is(.theme-christmas, .theme-midnight, .theme-neon) .theme-card.on .radio::after { color: var(--th-on); }
/* Drop In Plus page: small print that sits on the dark page, not on a card */
:is(.theme-christmas, .theme-midnight, .theme-neon) .plus-small { color: var(--th-label); }
:is(.theme-christmas, .theme-midnight, .theme-neon) .plus-reason { color: #D2B8FF; }

/* light looks (Winter, Sunset): soft tinted page, deeper accent for text and switches */
:is(.theme-winter, .theme-sunset) .sidebar { --pn-bg: var(--th-page); --pn-label: var(--th-label); --pn-chat: var(--th-page); }
:is(.theme-winter, .theme-sunset) .settings-modal {
  --set-bg: var(--th-page); --set-label: var(--th-label); --set-on: var(--th-deep); --set-accent: var(--th-deep);
  --set-done-bg: var(--th-deep); --set-done-ink: #fff;
}
:is(.theme-winter, .theme-sunset) .bubble.mine { background: var(--th-deep); color: #fff; }
:is(.theme-winter, .theme-sunset) .chat-compose textarea:focus { box-shadow: inset 0 0 0 2px var(--th-deep); }
:is(.theme-winter, .theme-sunset) .add-friend:focus-within { box-shadow: 0 0 0 2.5px var(--th-deep), 0 1px 2px rgba(0,0,0,.06); }


/* =====================================================================
   3. MIDNIGHT — a calm moonlit night: deep navy, moonlight blue
   ===================================================================== */
.theme-midnight .landing {
  background:
    url(themes/midnight-hills.svg) 50% 100% / auto clamp(120px, 22vh, 240px) repeat-x,
    url(themes/stars.svg) 0 0 / 420px 420px,
    radial-gradient(120% 50% at 50% 100%, rgba(112,140,255,.3), transparent 70%),
    radial-gradient(70% 45% at 88% 6%, rgba(190,210,255,.14), transparent 70%),
    linear-gradient(#1A2459 0%, #131B48 46%, #0F1640 100%);
}
/* the crescent moon */
.theme-midnight .landing::before {
  top: calc(var(--sat) + 4px); right: max(2%, calc(50% - 300px));
  width: 150px; height: 150px;
  background-image: url(themes/midnight-moon.svg); background-size: contain;
}
/* a second layer of stars that twinkles slowly */
.theme-midnight .landing::after {
  inset: 0;
  background: url(themes/stars-twinkle.svg) 40px 30px / 520px 520px repeat;
  -webkit-mask-image: linear-gradient(#000 45%, transparent 75%); mask-image: linear-gradient(#000 45%, transparent 75%);
  animation: th-twinkle 5s ease-in-out infinite alternate;
}
@keyframes th-twinkle { from { opacity: .2; } to { opacity: 1; } }
.theme-midnight .landing :is(.tagline, .media-note, .form-hint, .legal) { color: #C6D3F4; }
.theme-midnight .landing :is(.form-hint, .legal, .link-btn) { text-shadow: 0 1px 2px rgba(5,8,25,.85); }
.theme-midnight .auth-tabs button { color: #C6D3F4; }
.theme-midnight .landing .btn-primary { background: linear-gradient(#C6D8FF, #A3C0FC); box-shadow: 0 5px 0 var(--th-edge), 0 12px 30px -8px rgba(140,170,255,.55); }
.theme-midnight .landing-logo { box-shadow: 0 8px 26px rgba(0,0,0,.45), 0 0 34px rgba(150,180,255,.28); }
.theme-midnight .preview { border-color: #E2EBFF; box-shadow: 0 0 0 6px rgba(169,198,255,.16), 0 0 44px rgba(130,160,255,.3), 0 10px 40px rgba(0,0,0,.45); }
.theme-midnight .welcome-avatar-img { box-shadow: 0 0 0 4px rgba(169,198,255,.35); }

/* friends panel: a moonlit band with a crescent and stars */
.theme-midnight .panel-top {
  background: url(themes/midnight-corner.svg) right 2px top 2px / 128px 128px no-repeat, var(--th-band);
}
/* Settings: navy page, moonlight accents */
.theme-midnight .settings-modal { --set-on: #6E93F2; }
.theme-midnight .settings-card {
  background:
    url(themes/midnight-corner.svg) right 4px top 60px / 120px 120px no-repeat,
    url(themes/stars.svg) 0 0 / 420px 420px,
    radial-gradient(circle at 10% 0%, rgba(140,170,255,.18), transparent 45%),
    var(--th-page);
}
/* theme preview card */
.prev-midnight {
  background:
    radial-gradient(circle at calc(84% + 4px) calc(20% - 4px), #1E295F 0 7px, transparent 7.5px),
    radial-gradient(circle at 84% 20%, #FFF8DE 0 8px, transparent 8.5px),
    radial-gradient(circle at 84% 20%, rgba(200,215,255,.3) 0 15px, transparent 22px),
    url(themes/stars.svg) 0 0 / 210px 210px,
    linear-gradient(#202B66, #0E1538);
}
.prev-midnight::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30px;
  background: url(themes/midnight-hills.svg) 50% 100% / auto 30px repeat-x;
}
.prev-midnight .tp-line { background: #A9C6FF; z-index: 1; }


/* =====================================================================
   4. NEON — a night out: near-black, hot pink and cyan glow, a grid floor
   ===================================================================== */
.theme-neon { --neon-floor: 28vh; }
.theme-neon .landing {
  background:
    url(themes/neon-city.svg) 50% calc(100% - var(--neon-floor)) / auto clamp(64px, 12vh, 120px) repeat-x,
    url(themes/neon-grid.svg) 50% 100% / auto var(--neon-floor) repeat-x,
    linear-gradient(transparent calc(100% - var(--neon-floor) - 1px), rgba(255,120,200,.95) calc(100% - var(--neon-floor) - 1px), rgba(255,120,200,.95) calc(100% - var(--neon-floor) + 1px), transparent calc(100% - var(--neon-floor) + 1px)),
    radial-gradient(70% 18vh at 50% calc(100% - var(--neon-floor)), rgba(255,46,154,.42), transparent 70%),
    radial-gradient(40% 30vh at 50% calc(100% - var(--neon-floor)), rgba(44,242,255,.12), transparent 70%),
    url(themes/stars-dim.svg) 0 0 / 460px 460px,
    linear-gradient(#07040E 0%, #0D0820 40%, #200C3A calc(100% - var(--neon-floor)), #0B0414 calc(100% - var(--neon-floor)), #120620 100%);
}
/* a soft pink and cyan haze high up */
.theme-neon .landing::before {
  inset: 0;
  background:
    radial-gradient(50% 30% at 8% 18%, rgba(255,63,164,.16), transparent 70%),
    radial-gradient(45% 28% at 96% 34%, rgba(44,242,255,.12), transparent 70%);
}
.theme-neon .landing::after { display: none; }
.theme-neon .wordmark {
  color: #FFF0F8;
  text-shadow: 0 0 4px rgba(255,255,255,.55), 0 0 12px rgba(255,63,164,.95), 0 0 28px rgba(255,63,164,.7), 0 0 48px rgba(255,63,164,.4);
  animation: neon-flicker 7s linear infinite;
}
@keyframes neon-flicker {
  0%, 18%, 20%, 22%, 62%, 64%, 100% { opacity: 1; text-shadow: 0 0 4px rgba(255,255,255,.55), 0 0 12px rgba(255,63,164,.95), 0 0 28px rgba(255,63,164,.7), 0 0 48px rgba(255,63,164,.4); }
  19%, 21%, 63% { opacity: .78; text-shadow: 0 0 2px rgba(255,255,255,.3), 0 0 6px rgba(255,63,164,.5); }
}
.theme-neon .landing :is(.tagline, .media-note, .form-hint, .legal) { color: #BDEFF6; }
.theme-neon .tagline { text-shadow: 0 0 10px rgba(44,242,255,.35); }
/* small print that can sit over the glowing grid */
.theme-neon .landing :is(.form-hint, .legal, .link-btn, .media-note) { text-shadow: 0 1px 2px #07040E, 0 0 6px #07040E; }
.theme-neon .auth-tabs button { color: #BDEFF6; }
.theme-neon .landing .btn-primary { background: linear-gradient(#FF7CC3, #FF4DA9); box-shadow: 0 5px 0 var(--th-edge), 0 0 26px rgba(255,63,164,.6); }
.theme-neon .landing .btn-primary:active { box-shadow: 0 1px 0 var(--th-edge), 0 0 18px rgba(255,63,164,.5); }
.theme-neon .landing-logo { box-shadow: 0 0 0 2px rgba(255,120,200,.85), 0 0 22px rgba(255,63,164,.7), 0 0 50px rgba(44,242,255,.25); }
.theme-neon .preview { border-color: #FF8ACB; box-shadow: 0 0 0 2px rgba(255,63,164,.65), 0 0 26px rgba(255,63,164,.65), 0 0 60px rgba(44,242,255,.22); }
.theme-neon .welcome-avatar-img { box-shadow: 0 0 0 3px #2CF2FF, 0 0 18px rgba(44,242,255,.6); }
.theme-neon .join-form input:focus { box-shadow: 0 0 0 3px var(--yellow), 0 0 18px rgba(255,63,164,.6); }

/* friends panel: a glowing pink band with a cyan tube along its edge */
.theme-neon .panel-top {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 22px),
    var(--th-band);
  box-shadow: inset 0 -2px 0 var(--th-cyan), 0 2px 14px rgba(44,242,255,.45), 0 10px 34px -6px rgba(255,63,164,.55);
}
.theme-neon .chat-head { box-shadow: inset 0 -2px 0 var(--th-cyan), 0 2px 14px rgba(44,242,255,.4), 0 10px 30px -8px rgba(255,63,164,.5); }
.theme-neon .house-sub { color: rgba(26,0,18,.72); }
.theme-neon .side-tab[aria-selected="false"] { color: rgba(26,0,18,.7); }
.theme-neon #chat-status { color: rgba(26,0,18,.72); }
/* white cards glow faintly pink on the dark page */
.theme-neon :is(.friend-list, .room-card, .house-empty, .thread-list:not(:has(.inbox-empty)), .best-card, .add-friend) { box-shadow: 0 0 0 1px rgba(255,90,176,.35), 0 0 22px -6px rgba(255,63,164,.45); }
.theme-neon .sidebar { background: radial-gradient(90% 40% at 100% 100%, rgba(44,242,255,.08), transparent 70%), radial-gradient(90% 40% at 0% 30%, rgba(255,63,164,.1), transparent 70%), var(--pn-bg); }
.theme-neon .chat { background: radial-gradient(90% 40% at 100% 100%, rgba(44,242,255,.07), transparent 70%), var(--pn-chat); }
.theme-neon .bubble.mine { background: linear-gradient(135deg, #FF7CC3, #FF4DA9); box-shadow: 0 0 14px rgba(255,63,164,.35); }
.theme-neon .chat-send { box-shadow: 0 0 14px rgba(255,63,164,.5); }

/* Settings: near-black page with a grid fading in from the top */
.theme-neon .settings-modal { --set-on: #FF3FA4; }
.theme-neon .settings-card {
  background:
    radial-gradient(circle at 0% 0%, rgba(255,63,164,.22), transparent 42%),
    radial-gradient(circle at 100% 18%, rgba(44,242,255,.12), transparent 40%),
    repeating-linear-gradient(90deg, rgba(255,90,176,.07) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(0deg, rgba(255,90,176,.07) 0 1px, transparent 1px 28px),
    var(--th-page);
  box-shadow: 0 0 0 1px rgba(255,90,176,.4), 0 0 40px rgba(255,63,164,.35), 0 24px 70px rgba(0,0,0,.5);
}
.theme-neon :is(.set-card, .set-profile, .theme-card, .tr-head, .tr-card) { box-shadow: 0 0 0 1px rgba(255,90,176,.3), 0 0 18px -6px rgba(255,63,164,.4); }
.theme-neon .theme-card.on { box-shadow: 0 0 0 3px var(--set-accent), 0 0 20px rgba(255,63,164,.55); }
.theme-neon .settings-done { box-shadow: 0 0 14px rgba(255,63,164,.55); }
/* toasts get a thin neon rim */
.theme-neon .toast { box-shadow: 0 0 0 1.5px rgba(255,90,176,.7), 0 0 22px rgba(255,63,164,.4), 0 10px 30px rgba(0,0,0,.3); }
/* games menu: a pink sheet with a glow */
.theme-neon .games-card { background: radial-gradient(120% 70% at 100% 0%, rgba(255,255,255,.3), transparent 60%), linear-gradient(160deg, #FF7CC3, #FF5AB0 55%, #FF61B9); box-shadow: 0 0 0 1px rgba(255,140,205,.9), 0 0 40px rgba(255,63,164,.45), 0 20px 60px rgba(0,0,0,.4); }
/* theme preview card */
.prev-neon {
  background:
    url(themes/neon-grid.svg) 50% 100% / auto 34px repeat-x,
    linear-gradient(transparent 71px, rgba(255,140,205,.95) 71px, rgba(255,140,205,.95) 72.5px, transparent 72.5px),
    radial-gradient(60% 30px at 50% 72px, rgba(255,46,154,.55), transparent 70%),
    url(themes/stars-dim.svg) 0 0 / 230px 230px,
    linear-gradient(#08050F, #1E0B37 68%, #0B0414 68%);
}
.prev-neon img { box-shadow: 0 0 0 1.5px rgba(255,120,200,.9), 0 0 14px rgba(255,63,164,.8); }
.prev-neon .tp-line { background: #2CF2FF; box-shadow: 0 0 8px rgba(44,242,255,.8); z-index: 1; }
.prev-neon .tp-line.l2 { background: #FF5AB0; box-shadow: 0 0 8px rgba(255,63,164,.8); opacity: 1; }


/* =====================================================================
   5. WINTER — icy blues, white snow, flakes drifting down
   ===================================================================== */
.theme-winter .landing {
  color: #0E2E4A;
  background:
    url(themes/winter-drifts.svg) 50% 100% / auto clamp(110px, 20vh, 220px) repeat-x,
    radial-gradient(90% 40% at 50% 0%, rgba(255,255,255,.4), transparent 70%),
    linear-gradient(#94CFF5 0%, #B6E0FA 38%, #D9EFFC 70%, #EEF8FE 100%);
}
/* snow: two layers falling at different speeds (each moves exactly one tile, so it loops seamlessly) */
.theme-winter .landing::before {
  left: 0; right: 0; top: -320px; bottom: 0;
  background: url(themes/snow-near.svg) 0 0 / 320px 320px repeat;
  animation: snow-near 16s linear infinite;
  will-change: transform;
}
.theme-winter .landing::after {
  left: 0; right: 0; top: -240px; bottom: 0;
  background: url(themes/snow-far.svg) 60px 0 / 240px 240px repeat;
  opacity: .9;
  animation: snow-far 22s linear infinite;
  will-change: transform;
}
@keyframes snow-near { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(14px, 160px, 0); } 100% { transform: translate3d(0, 320px, 0); } }
@keyframes snow-far { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-10px, 120px, 0); } 100% { transform: translate3d(0, 240px, 0); } }
.theme-winter .tagline { color: #2B4F6E; }
.theme-winter .landing :is(.media-note, .form-hint, .legal) { color: #2B4F6E; }
.theme-winter .landing :is(.legal a, .link-btn, .welcome-line, .room-note) { color: #0E2E4A; }
.theme-winter .auth-tabs { background: rgba(14,46,74,.1); }
.theme-winter .auth-tabs button { color: #3B5F7E; }
.theme-winter .auth-tabs button[aria-selected="true"] { color: #0E2E4A; }
.theme-winter .landing .btn-primary { background: linear-gradient(#22598A, #174671); color: #fff; box-shadow: 0 5px 0 #0C2C4A, 0 12px 26px -10px rgba(14,46,74,.6); }
.theme-winter .landing .btn-primary:active { box-shadow: 0 1px 0 #0C2C4A; }
.theme-winter .join-form input:focus { box-shadow: 0 0 0 3px #4BA7E6; }
.theme-winter .landing-logo { box-shadow: 0 8px 22px rgba(30,90,140,.25); }
.theme-winter .preview { background: #16324A; border-color: #fff; box-shadow: 0 0 0 6px rgba(255,255,255,.45), 0 10px 34px rgba(30,90,140,.3); }

/* friends panel: icy band with snowflakes */
.theme-winter .panel-top { background: url(themes/winter-corner.svg) right 4px top 2px / 116px 116px no-repeat, var(--th-band); }
.theme-winter .house-sub { color: rgba(14,46,74,.7); }
.theme-winter .side-tab[aria-selected="false"] { color: rgba(14,46,74,.78); }
.theme-winter .sidebar { background: linear-gradient(rgba(255,255,255,0) 60%, rgba(255,255,255,.7)), var(--pn-bg); }
.theme-winter .pn-act.wave { background: #DFF1FD; }
.theme-winter .join-btn { background: var(--th-band); }
/* Settings: frosty page */
.theme-winter .settings-card {
  background:
    url(themes/winter-corner-blue.svg) right 0 top 58px / 124px 124px no-repeat,
    radial-gradient(circle at 0% 0%, rgba(142,209,252,.35), transparent 45%),
    linear-gradient(var(--th-page), #F7FBFE) var(--th-page);
}
/* theme preview card */
.prev-winter {
  background:
    url(themes/snow-near.svg) 0 0 / 120px 120px,
    url(themes/winter-drifts.svg) 50% 100% / auto 34px repeat-x,
    linear-gradient(#8ECCF4, #CDEAFB 70%, #EEF8FE);
}
.prev-winter img { box-shadow: 0 4px 12px rgba(30,90,140,.3); }
.prev-winter .tp-line { background: #174671; z-index: 1; }


/* =====================================================================
   6. SUNSET — golden hour: violet sky to rose, a low sun over the sea
   ===================================================================== */
.theme-sunset .landing {
  color: #fff;
  background:
    radial-gradient(60% 30% at 50% 0%, rgba(255,255,255,.08), transparent 70%),
    linear-gradient(#2A1758 0%, #4A2282 26%, #752A88 50%, #A2347F 68%, #C2407A 80%, #DE5470 91%);
}
/* the sea (under the sun picture): the horizon is 91% down */
.theme-sunset .landing::before {
  left: 0; right: 0; bottom: 0; height: 9vh;
  background: linear-gradient(#93306F 0%, #5E1F5E 35%, #34103F 100%);
}
/* the low sun, its glow, a few clouds and its path on the water (the picture's horizon is 70% down it) */
.theme-sunset .landing::after {
  left: 0; right: 0; bottom: 0; height: 30vh;
  background: url(themes/sunset-sun.svg) 86% 100% / auto 100% no-repeat;
}
.theme-sunset .landing :is(.tagline, .media-note, .form-hint, .legal) { color: #FFE2D6; text-shadow: 0 1px 2px rgba(70,10,50,.35); }
.theme-sunset .landing :is(.legal a, .link-btn, .welcome-line, .room-note) { color: #fff; text-shadow: 0 1px 3px rgba(70,10,50,.4); }
.theme-sunset .wordmark { text-shadow: 0 2px 14px rgba(255,150,120,.45); }
.theme-sunset .auth-tabs { background: rgba(255,255,255,.14); }
.theme-sunset .auth-tabs button { color: #FFE2D6; }
.theme-sunset .auth-tabs button[aria-selected="true"] { color: var(--ink); }
.theme-sunset .landing .btn-primary { background: linear-gradient(#FFD27E, #FF9A5E); box-shadow: 0 5px 0 var(--th-edge), 0 12px 30px -8px rgba(255,140,90,.6); }
.theme-sunset .join-form input:focus { box-shadow: 0 0 0 3px #FFB36B; }
.theme-sunset .landing-logo { box-shadow: 0 8px 26px rgba(60,10,50,.4), 0 0 30px rgba(255,170,110,.3); }
.theme-sunset .preview { border-color: #FFE3C9; box-shadow: 0 0 0 6px rgba(255,180,120,.2), 0 0 44px rgba(255,140,90,.35), 0 10px 40px rgba(50,10,40,.45); }

/* friends panel: golden band with a sun peeking in */
.theme-sunset .panel-top { background: url(themes/sunset-corner.svg) right 0 top 0 / 120px 120px no-repeat, var(--th-band); }
.theme-sunset .house-sub { color: rgba(58,14,20,.72); }
.theme-sunset .side-tab[aria-selected="false"] { color: rgba(58,14,20,.76); }
.theme-sunset #chat-status { color: rgba(58,14,20,.72); }
.theme-sunset .sidebar { background: linear-gradient(#FFE8DC, var(--pn-bg) 40%) var(--pn-bg); }
.theme-sunset .chat { background: linear-gradient(#FFE8DC, var(--pn-chat) 40%) var(--pn-chat); }
.theme-sunset .bubble.mine { background: linear-gradient(135deg, #FFB070, #FF8E62); color: var(--th-on); }
.theme-sunset .join-btn { background: var(--th-band); }
/* Settings: warm page, a golden Done button */
.theme-sunset .settings-modal { --set-done-bg: linear-gradient(135deg, #FFB36B, #FF7F5E); --set-done-ink: var(--th-on); }
.theme-sunset .settings-card {
  background:
    url(themes/sunset-corner-soft.svg) right 0 top 58px / 130px 130px no-repeat,
    radial-gradient(circle at 0% 0%, rgba(255,170,120,.3), transparent 45%),
    linear-gradient(#FFE6D8, var(--th-page) 30%) var(--th-page);
}
.theme-sunset .games-card { background: radial-gradient(120% 70% at 100% 0%, rgba(255,240,200,.45), transparent 60%), linear-gradient(160deg, #FFB874, #FF9461 60%, #FF8C7A); }
/* theme preview card */
.prev-sunset {
  background:
    linear-gradient(transparent 76px, #6E2465 76px, #34103F),
    radial-gradient(circle at 89% 77px, #FFE9B0 0 14px, transparent 14.5px),
    radial-gradient(circle at 89% 77px, rgba(255,200,120,.55) 0 18px, transparent 38px),
    linear-gradient(#3C1D70, #8A2F86 45%, #DA4E6E 72%, #F57A62);
}
.prev-sunset .tp-line { background: #FFD27E; z-index: 1; }
.prev-sunset .tp-line.l2 { opacity: .75; }


/* =====================================================================
   6b. CHRISTMAS (free, seasonal): a snowy pine forest at night, a string of
   lights along the top, holly on the panels, red and evergreen
   ===================================================================== */
.theme-christmas .landing {
  background:
    url(themes/christmas-lights.svg) 50% var(--sat) / 360px 64px repeat-x,
    url(themes/christmas-trees.svg) 50% 100% / auto clamp(120px, 22vh, 240px) repeat-x,
    radial-gradient(120% 40% at 50% 100%, rgba(120,230,180,.18), transparent 70%),
    linear-gradient(#14493A 0%, #0F3A2B 50%, #0A2A20 100%);
}
.theme-christmas .landing::before {
  left: 0; right: 0; top: -320px; bottom: 0;
  background: url(themes/snow-near.svg) 0 0 / 320px 320px repeat;
  animation: snow-near 16s linear infinite;
  will-change: transform;
}
.theme-christmas .landing::after {
  left: 0; right: 0; top: -240px; bottom: 0;
  background: url(themes/snow-far.svg) 60px 0 / 240px 240px repeat;
  opacity: .8;
  animation: snow-far 22s linear infinite;
  will-change: transform;
}
.theme-christmas .landing :is(.tagline, .media-note, .form-hint, .legal) { color: #CFEADD; }
.theme-christmas .landing :is(.form-hint, .legal, .link-btn) { text-shadow: 0 1px 2px rgba(3,20,14,.9); }
.theme-christmas .auth-tabs button { color: #CFEADD; }
.theme-christmas .landing .btn-primary { background: linear-gradient(#FF5A60, #E2363E); color: #fff; box-shadow: 0 5px 0 var(--th-edge), 0 12px 28px -8px rgba(244,71,78,.6); }
.theme-christmas .landing .btn-primary:active { box-shadow: 0 1px 0 var(--th-edge); }
.theme-christmas .preview { border-color: #fff; box-shadow: 0 0 0 6px rgba(244,71,78,.3), 0 10px 40px rgba(0,0,0,.45); }

/* friends panel: a red band with holly */
.theme-christmas .panel-top { background: url(themes/christmas-corner.svg) right 2px top 0 / 124px 124px no-repeat, var(--th-band); }
/* Settings: evergreen page */
.theme-christmas .settings-modal { --set-on: #2FA36F; }
.theme-christmas .settings-card {
  background:
    url(themes/christmas-corner.svg) right 4px top 56px / 118px 118px no-repeat,
    radial-gradient(circle at 10% 0%, rgba(120,230,180,.14), transparent 45%),
    var(--th-page);
}
/* theme preview card */
.prev-christmas {
  background:
    url(themes/christmas-lights.svg) 50% 0 / 150px 27px repeat-x,
    url(themes/snow-near.svg) 0 0 / 120px 120px,
    linear-gradient(#17533F, #0B2D22);
}
.prev-christmas::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40px;
  background: url(themes/christmas-trees.svg) 50% 100% / auto 40px repeat-x;
}
.prev-christmas .tp-line { background: #FF6066; z-index: 1; }


/* =====================================================================
   7. iPhone app start screen (.native-call): the camera circle is drawn
   natively behind the page, so no sky is painted here (the app paints the
   sky color as the native backdrop: Christmas #0F3A2B, Midnight #131B48, Neon #0D0820,
   Winter #BFE3FA, Sunset #752A88) and nothing sits over the middle column
   where the camera circle is. The scenery stays at the bottom and the moon
   in the corner.
   ===================================================================== */
.native-call:is(.theme-christmas, .theme-midnight, .theme-neon, .theme-winter, .theme-sunset) {
  /* a mask that hides a 230px-wide column down the middle (the camera circle is at most 190px + its ring) */
  --th-sides: linear-gradient(90deg, #000 0, #000 calc(50% - 128px), transparent calc(50% - 114px), transparent calc(50% + 114px), #000 calc(50% + 128px));
}
.native-call.theme-christmas .landing { background: url(themes/christmas-lights.svg) 50% var(--sat) / 360px 64px repeat-x, url(themes/christmas-trees.svg) 50% 100% / auto clamp(100px, 18vh, 220px) repeat-x, transparent; }
.native-call.theme-christmas .landing::before,
.native-call.theme-christmas .landing::after { -webkit-mask-image: var(--th-sides); mask-image: var(--th-sides); }
.native-call.theme-midnight .landing { background: url(themes/midnight-hills.svg) 50% 100% / auto clamp(100px, 18vh, 220px) repeat-x, transparent; }
.native-call.theme-midnight .landing::after {
  /* all the stars twinkle here, beside the camera only */
  background: url(themes/stars-twinkle.svg) 40px 30px / 520px 520px repeat, url(themes/stars.svg) 0 0 / 420px 420px repeat;
  -webkit-mask-image: var(--th-sides); mask-image: var(--th-sides);
  animation-name: th-twinkle-soft;
}
@keyframes th-twinkle-soft { from { opacity: .55; } to { opacity: 1; } }
.native-call.theme-neon { --neon-floor: 20vh; }
.native-call.theme-neon .landing {
  background:
    url(themes/neon-city.svg) 50% calc(100% - var(--neon-floor)) / auto clamp(50px, 9vh, 90px) repeat-x,
    url(themes/neon-grid.svg) 50% 100% / auto var(--neon-floor) repeat-x,
    linear-gradient(transparent calc(100% - var(--neon-floor) - 1px), rgba(255,120,200,.95) calc(100% - var(--neon-floor) - 1px), rgba(255,120,200,.95) calc(100% - var(--neon-floor) + 1px), transparent calc(100% - var(--neon-floor) + 1px)),
    linear-gradient(transparent calc(100% - var(--neon-floor)), #0B0414 calc(100% - var(--neon-floor)), #120620 100%);
}
.native-call.theme-neon .landing::before {
  background:
    url(themes/stars-dim.svg) 0 0 / 460px 460px repeat,
    radial-gradient(50% 30% at 8% 18%, rgba(255,63,164,.16), transparent 70%),
    radial-gradient(45% 28% at 96% 34%, rgba(44,242,255,.12), transparent 70%);
  -webkit-mask-image: var(--th-sides); mask-image: var(--th-sides);
}
.native-call.theme-winter .landing { background: url(themes/winter-drifts.svg) 50% 100% / auto clamp(90px, 17vh, 200px) repeat-x, transparent; }
.native-call.theme-winter .landing::before,
.native-call.theme-winter .landing::after { -webkit-mask-image: var(--th-sides); mask-image: var(--th-sides); }
.native-call.theme-sunset .landing { background: transparent; }
/* phones on their side: the camera circle can sit low, so the bottom scenery steps aside */
@media (orientation: landscape) and (max-height: 520px) {
  .native-call:is(.theme-christmas, .theme-midnight, .theme-neon, .theme-winter) .landing { background: transparent; }
  .native-call.theme-sunset .landing::before,
  .native-call.theme-sunset .landing::after { display: none; }
}

/* =====================================================================
   8. Less motion: everything holds still
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .theme-midnight .landing::after { animation: none; opacity: .8; }
  .theme-christmas .landing::before,
  .theme-christmas .landing::after,
  .theme-winter .landing::before,
  .theme-winter .landing::after { animation: none; }
  .theme-neon .wordmark { animation: none; }
}