/* Gater Graphite is the existing default. Pearl supplies semantic surfaces for
   the public landing and policy pages without recoloring the real app screens. */
:root {
  --theme-background: #111117;
  --theme-surface: #211e29;
  --theme-surface-elevated: #29242f;
  --theme-foreground: #f7f4f7;
  --theme-muted: #b7b0bd;
  --theme-border: rgba(238, 227, 242, .13);
  --theme-accent: #e1838d;
  --theme-accent-hover: #eea1a8;
  --theme-accent-foreground: #24161a;
  --theme-shadow: 0 20px 50px rgba(0, 0, 0, .24);
  --theme-gradient: linear-gradient(145deg, #211b27, #14141c 58%, #17151f);
}

html[data-theme="light"] {
  color-scheme: light;
  /* Soft pearl/slate canvas: bright, without stark white panels. */
  --theme-background: #e8e3e9;
  --theme-surface: #f1ecf1;
  --theme-surface-elevated: #e3dde6;
  --theme-foreground: #28222d;
  --theme-muted: #605866;
  --theme-border: rgba(76, 53, 72, .17);
  --theme-accent: #a53d68;
  --theme-accent-hover: #862d58;
  --theme-accent-foreground: #fff;
  --theme-shadow: 0 20px 48px rgba(65, 41, 60, .11);
  --theme-gradient: linear-gradient(145deg, #f0eaf0, #e8e2ea 62%, #dfdae6);
  --ink: var(--theme-foreground);
  --text: var(--theme-foreground);
  --text-soft: var(--theme-muted);
  --soft: var(--theme-muted);
  --muted: var(--theme-muted);
  --bg: var(--theme-background);
  --night: var(--theme-background);
  --surface: var(--theme-surface);
  --surface-2: var(--theme-surface-elevated);
  --card: var(--theme-surface);
  --card-hover: var(--theme-surface-elevated);
  --line: var(--theme-border);
  --border: var(--theme-border);
  --accent: var(--theme-accent);
  --accent-2: #7455a6;
  --accent-deep: var(--theme-accent-hover);
  --gold: var(--theme-accent);
  --cyan: #7455a6;
  --violet: #7455a6;
}

/* One compact control works in the homepage navigation and legal top bars. */
.theme-control { position: relative; z-index: 40; flex: 0 0 auto; }
.theme-trigger {
  display: grid; place-items: center; width: 42px; height: 42px; padding: 0;
  border: 1px solid var(--theme-border); border-radius: 14px;
  color: var(--theme-foreground); background: var(--theme-surface-elevated);
  font: inherit; cursor: pointer; box-shadow: inset 0 1px rgba(255,255,255,.06);
}
.theme-trigger:hover, .theme-trigger[aria-expanded="true"] {
  border-color: var(--theme-accent); background: var(--theme-surface);
}
.theme-trigger svg, .theme-option svg { width: 19px; height: 19px; flex: 0 0 auto; }
.theme-trigger:focus-visible, .theme-option:focus-visible { outline: 3px solid #8b6ab9; outline-offset: 3px; }
.theme-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 50;
  width: min(290px, calc(100vw - 28px)); padding: 8px;
  border: 1px solid var(--theme-border); border-radius: 18px;
  background: var(--theme-surface); color: var(--theme-foreground);
  box-shadow: 0 22px 55px rgba(20, 12, 24, .24);
}
.theme-menu[hidden] { display: none; }
.theme-menu-title { display: block; padding: 8px 10px 5px; color: var(--theme-muted); font: 750 .72rem/1.3 Inter, sans-serif; letter-spacing: .09em; text-transform: uppercase; }
.theme-option {
  display: flex; align-items: center; gap: 11px; width: 100%; min-height: 47px;
  padding: 10px; border: 0; border-radius: 11px;
  background: transparent; color: var(--theme-foreground);
  font: 650 .84rem/1.3 Inter, ui-sans-serif, sans-serif; text-align: left; cursor: pointer;
}
.theme-option:hover, .theme-option[aria-checked="true"] { background: var(--theme-surface-elevated); }
.theme-option[aria-checked="true"] { color: var(--theme-accent-hover); }
.theme-check { margin-left: auto; opacity: 0; }
.theme-option[aria-checked="true"] .theme-check { opacity: 1; }
.topbar > .back { margin-left: auto; }
.theme-control-floating { position: fixed; top: 16px; right: 16px; }
.theme-control-floating .theme-menu { top: calc(100% + 8px); }
.landing nav .brand { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 560px) {
  .landing nav .theme-trigger { width: 38px; height: 38px; border-radius: 12px; }
  .topbar .theme-trigger { width: 38px; height: 38px; border-radius: 12px; }
  .topbar { gap: 8px; }
}

/* Short transitions only after an explicit manual selection. */
.theme-changing body, .theme-changing body::before, .theme-changing .new-hero,
.theme-changing .premium-section, .theme-changing .download-section,
.theme-changing .social-section, .theme-changing .hero, .theme-changing section,
.theme-changing .card, .theme-changing .notice, .theme-changing .toc {
  transition: background-color .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease;
}
@media (prefers-reduced-motion: reduce) {
  .theme-changing *, .theme-changing *::before, .theme-changing *::after { transition-duration: .01ms !important; }
}

/* Pearl: landing-page surfaces and text. Physical device frames stay dark. */
html[data-theme="light"] body {
  color: var(--theme-foreground);
  background: var(--theme-background);
}
html[data-theme="light"] body::before {
  background: radial-gradient(ellipse at 87% 9%, rgba(215, 114, 152, .14), transparent 35rem),
    radial-gradient(ellipse at 4% 52%, rgba(119, 90, 176, .10), transparent 38rem), var(--theme-background);
}
html[data-theme="light"] .landing nav {
  background: transparent;
  border-bottom: 0;
}
html[data-theme="light"] .brand, html[data-theme="light"] .nav-link { color: var(--theme-foreground); }
html[data-theme="light"] .nav-link:hover { color: var(--theme-accent-hover); }
html[data-theme="light"] .pill {
  color: #fff; border-color: #963454;
  background: linear-gradient(125deg, #af4968, #86365c);
  box-shadow: 0 6px 18px rgba(136, 49, 88, .15);
}
html[data-theme="light"] .button:not(.secondary):not(:disabled) {
  color: #fff; background: linear-gradient(125deg, #ae476a, #82416f);
  box-shadow: 0 10px 25px rgba(142, 55, 97, .19);
}
html[data-theme="light"] .button.secondary {
  color: var(--theme-foreground); border-color: var(--theme-border); background: rgba(241,236,241,.8);
}
html[data-theme="light"] .new-hero {
  border-color: rgba(169, 86, 130, .25);
  background: radial-gradient(circle at 80% 16%, rgba(209, 123, 157, .17), transparent 22rem),
    radial-gradient(circle at 91% 90%, rgba(132, 108, 190, .14), transparent 26rem), var(--theme-gradient);
  box-shadow: var(--theme-shadow), inset 0 1px rgba(255,255,255,.58);
}
html[data-theme="light"] .new-hero::after {
  background: radial-gradient(circle at 6% 13%, rgba(119,73,128,.2) 0 1px, transparent 1.8px),
    linear-gradient(90deg, rgba(255,255,255,.18), transparent 72%);
}
html[data-theme="light"] .new-hero::before { border-color: rgba(143,74,124,.17); box-shadow: 0 0 0 32px rgba(130,100,185,.04), 0 0 0 74px rgba(190,85,132,.035); }
html[data-theme="light"] .gradient {
  background: linear-gradient(110deg, #b64063 8%, #9b426f 53%, #7457a3 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-theme="light"] .eyebrow { color: #923556; }
html[data-theme="light"] .lead, html[data-theme="light"] .subline { color: var(--theme-muted); }
html[data-theme="light"] .matching-glyphs { stroke: #915d85; }
html[data-theme="light"] .matching-glyphs use:last-child { stroke: #765d9c; }
html[data-theme="light"] .matching-map-labels { color: #62556b; }
html[data-theme="light"] .ambient-stars > span { background: #8c729c; box-shadow: 0 0 8px rgba(141,105,168,.28); }
html[data-theme="light"] .ambient-stars > .glint { background: linear-gradient(135deg, #b65f81, #8f78b8); }
html[data-theme="light"] .ambient-constellation { stroke: #9b77a7; }
html[data-theme="light"] .ambient-constellation circle { fill: #ad6987; }
html[data-theme="light"] .flow-grid li, html[data-theme="light"] .lobby-flow li,
html[data-theme="light"] .trust-grid article, html[data-theme="light"] .faq-list details {
  border-color: var(--theme-border); background: var(--theme-surface);
  box-shadow: 0 9px 24px rgba(63, 40, 60, .055);
}
html[data-theme="light"] .cofounder-section {
  border-color: rgba(165, 61, 104, .19);
  color: var(--theme-foreground);
  background: radial-gradient(ellipse at 88% 8%, rgba(151, 133, 220, .11), transparent 42%),
    linear-gradient(130deg, rgba(246, 239, 246, .96), rgba(235, 229, 239, .94));
  box-shadow: 0 12px 30px rgba(65, 41, 60, .07), inset 0 1px rgba(255,255,255,.72);
}
html[data-theme="light"] .cofounder-copy h2 { color: var(--theme-foreground); }
html[data-theme="light"] .cofounder-copy p { color: var(--theme-muted); }
html[data-theme="light"] .cofounder-copy strong { color: #853954; }
html[data-theme="light"] .cofounder-button {
  border-color: rgba(165, 61, 104, .25);
  color: #6d3152;
  background: linear-gradient(130deg, rgba(255,255,255,.72), rgba(238,231,244,.82));
}
html[data-theme="light"] .cofounder-button:hover {
  border-color: rgba(165, 61, 104, .46);
  background: linear-gradient(130deg, rgba(255,255,255,.9), rgba(238,231,244,.94));
}
html[data-theme="light"] .flow-number, html[data-theme="light"] .lobby-flow li > span,
html[data-theme="light"] .premium-mark, html[data-theme="light"] .trust-grid article > span,
html[data-theme="light"] .section-emblem {
  color: #90395b; border-color: rgba(151, 74, 111, .18);
  background: linear-gradient(135deg, #f9e5e9, #eee6f4);
}
html[data-theme="light"] .crossplay-section {
  border-color: rgba(138, 91, 139, .2);
  background: radial-gradient(ellipse at 88% 12%, rgba(181, 139, 190, .15), transparent 54%),
    linear-gradient(145deg, #f2edf3, #e8e3eb 72%, #e4e0e9);
  box-shadow: var(--theme-shadow), inset 0 1px rgba(255,255,255,.72);
}
html[data-theme="light"] .crossplay-copy h2 { color: var(--theme-foreground); }
html[data-theme="light"] .crossplay-copy > p { color: var(--theme-muted); }
html[data-theme="light"] .crossplay-copy .crossplay-caveat {
  border-left-color: #9875aa; background: rgba(239, 231, 242, .82); color: #5d5264;
}
html[data-theme="light"] .crossplay-visual {
  border-color: rgba(104, 82, 112, .16);
  background: linear-gradient(145deg, rgba(245, 240, 246, .96), rgba(231, 225, 236, .96));
  box-shadow: inset 0 1px rgba(255,255,255,.78), 0 9px 22px rgba(67,48,73,.06);
}
html[data-theme="light"] .crossplay-symbol {
  color: #853954; border-color: rgba(165, 61, 104, .22);
  background: linear-gradient(145deg, #f8e7ed, #eee6f4);
  box-shadow: inset 0 1px #fff, 0 7px 18px rgba(92,55,87,.1);
}
html[data-theme="light"] .crossplay-visual-head > span:first-child { color: #55485e; }
html[data-theme="light"] .crossplay-scope { color: #694d79; border-color: rgba(116,85,166,.2); background: #f1eaf5; }
html[data-theme="light"] .crossplay-model { color: #7e3453; border-color: rgba(165,61,104,.2); background: linear-gradient(135deg,#f9e6ed,#f4eaf1); }
html[data-theme="light"] .crossplay-model.violet { color: #684b91; border-color: rgba(116,85,166,.22); background: linear-gradient(135deg,#eee8f7,#f5e8ef); }
html[data-theme="light"] .crossplay-check { border-color: rgba(165,61,104,.19); background: linear-gradient(145deg,rgba(249,230,237,.88),rgba(239,233,247,.94)); box-shadow: inset 0 1px #fff,0 8px 18px rgba(92,55,87,.07); }
html[data-theme="light"] .crossplay-check-mark { color: #913b60; border-color: rgba(165,61,104,.23); background: #f8e4eb; }
html[data-theme="light"] .crossplay-result { color: #7c4562; }
html[data-theme="light"] .crossplay-model-list span { color: #5f5363; border-color: rgba(104,82,112,.13); background: rgba(255,255,255,.62); }
html[data-theme="light"] .step-index,
html[data-theme="light"] .story-copy li b.step-index,
html[data-theme="light"] .lobby-flow li > .step-index { color: #853954; border-color: rgba(151,74,111,.2); background: radial-gradient(circle at 34% 28%,#f9e5e9,#eee6f4 72%); box-shadow: inset 0 1px #fff,0 0 14px rgba(165,61,104,.06); }
html[data-theme="light"] .step-index::after { border-color: #f2eaf0; background: #bc5b7e; box-shadow: 0 0 7px rgba(188,91,126,.35); }
html[data-theme="light"] .step-icon-shell { color: #8b456e; border-color: rgba(151,74,111,.18); background: linear-gradient(145deg,#f9e5e9,#eee6f4); box-shadow: inset 0 1px #fff,0 6px 15px rgba(92,55,87,.06); }
html[data-theme="light"] .crossplay-node strong,
html[data-theme="light"] .crossplay-check strong { color: var(--theme-foreground); }
html[data-theme="light"] .crossplay-node small,
html[data-theme="light"] .crossplay-check small { color: var(--theme-muted); }
html[data-theme="light"] .crossplay-check .ui-icon { color: #a3426a; }
html[data-theme="light"] .story-copy li b.step-index { color: #853954; border-color: rgba(151,74,111,.2); background: radial-gradient(circle at 34% 28%,#f9e5e9,#eee6f4 72%); }
html[data-theme="light"] .feature-tokens > span {
  color: #55485c; border-color: var(--theme-border); background: var(--theme-surface-elevated);
}
html[data-theme="light"] .text-link, html[data-theme="light"] .igdb-attribution a,
html[data-theme="light"] .premium-note a, html[data-theme="light"] .faq-list a { color: #90365d; }
html[data-theme="light"] .premium-section {
  border-color: rgba(155, 76, 122, .23);
  background: radial-gradient(circle at 100% 0, rgba(155,122,204,.16), transparent 26rem),
    linear-gradient(140deg, #fffafa, #f4edf2);
  box-shadow: var(--theme-shadow);
}
html[data-theme="light"] .premium-grid article, html[data-theme="light"] .premium-free,
html[data-theme="light"] .premium-plan {
  border-color: var(--theme-border); background: rgba(241,236,241,.86);
  box-shadow: 0 8px 20px rgba(71,45,70,.04);
}
html[data-theme="light"] .premium-plan { background: linear-gradient(125deg, #f4e9ed, #ebe5f1); }
html[data-theme="light"] .plan-period, html[data-theme="light"] .premium-plan .plan-price span,
html[data-theme="light"] .premium-note, html[data-theme="light"] .feature-status,
html[data-theme="light"] .download-availability { color: var(--theme-muted); }
html[data-theme="light"] .story-note { border-left-color: #b65e7b; background: #f6e9ee; }
html[data-theme="light"] .social-section {
  border-color: rgba(162, 82, 128, .21);
  background: radial-gradient(ellipse at 18% 38%, rgba(197, 108, 145, .16), transparent 42%),
    radial-gradient(ellipse at 90% 16%, rgba(150, 122, 204, .15), transparent 44%),
    linear-gradient(125deg, #fffafa, #f3eef3);
  box-shadow: var(--theme-shadow);
}
html[data-theme="light"] .social-copy > p, html[data-theme="light"] .social-signals li { color: var(--theme-muted); }
html[data-theme="light"] .social-orbit { border-color: rgba(149,81,131,.23); }
html[data-theme="light"] .social-orbit::before { border-color: rgba(132,99,168,.23); }
html[data-theme="light"] .download-section {
  border-color: var(--theme-border);
  background: radial-gradient(circle at 50% 0, rgba(203, 114, 150, .13), transparent 36rem),
    linear-gradient(145deg, #fffdfd, #f1ebf1);
  box-shadow: var(--theme-shadow);
}
html[data-theme="light"] .download-platform {
  border-color: var(--theme-border); background: linear-gradient(145deg, #fffdfd, #f7f2f6);
  box-shadow: 0 15px 34px rgba(71,45,70,.08), inset 0 1px #fff;
}
html[data-theme="light"] .download-platform:hover, html[data-theme="light"] .download-platform:focus-within {
  border-color: rgba(165,61,104,.42); box-shadow: 0 18px 36px rgba(71,45,70,.13);
}
html[data-theme="light"] .download-platform .platform-mark,
html[data-theme="light"] .download-platform .platform-mark-android {
  color: #80375e; border-color: rgba(154,74,119,.22);
  background: linear-gradient(145deg, #f9e7ed, #ede8f5);
}
html[data-theme="light"] .store-cta:disabled {
  color: #4f4352; border-color: var(--theme-border);
  background: linear-gradient(135deg, #e9e1e8, #dfd8e1);
}
html[data-theme="light"] .faq-list summary { color: var(--theme-foreground); }
html[data-theme="light"] .faq-list p { color: var(--theme-muted); }
html[data-theme="light"] .faq-list summary::after { color: #904365; }
html[data-theme="light"] .site-footer, html[data-theme="light"] .footer-brand p,
html[data-theme="light"] .footer-links a, html[data-theme="light"] .atmosphere-toggle {
  color: var(--theme-muted);
}
html[data-theme="light"] .atmosphere-toggle { background: var(--theme-surface); }
html[data-theme="light"] .atmosphere-toggle:hover, html[data-theme="light"] .footer-links a:hover { color: var(--theme-foreground); }
/* Captions remain outside the devices; the screenshots themselves remain dark. */
html[data-theme="light"] .new-hero .fan-screen figcaption,
html[data-theme="light"] .story-shot figcaption,
html[data-theme="light"] .matching-showcase-wrap figcaption,
html[data-theme="light"] .lobby-device figcaption { color: var(--theme-muted); }

/* Pearl: shared legal/support shell and its older inline-style variants. */
html[data-theme="light"] body:not(.link-page) .page { color: var(--theme-foreground); }
html[data-theme="light"] .page .brand { color: var(--theme-foreground); }
html[data-theme="light"] .page .hero,
html[data-theme="light"] .page section,
html[data-theme="light"] .page .card,
html[data-theme="light"] .page .toc {
  color: var(--theme-foreground); border-color: var(--theme-border);
  background: var(--theme-gradient); box-shadow: 0 10px 30px rgba(66,42,67,.065);
}
html[data-theme="light"] .page .notice,
html[data-theme="light"] .page .contact {
  color: var(--theme-foreground); border-color: rgba(165,61,104,.25);
  background: linear-gradient(135deg, #f9e9ee, #f3edf8);
}
html[data-theme="light"] .page .notice strong, html[data-theme="light"] .page .contact strong { color: #7c2d50; }
html[data-theme="light"] .page .back, html[data-theme="light"] .page .section-nav a {
  color: var(--theme-foreground); border-color: var(--theme-border); background: var(--theme-surface);
}
html[data-theme="light"] .page .back:hover, html[data-theme="light"] .page .section-nav a:hover {
  border-color: var(--theme-accent); color: var(--theme-accent-hover);
}
html[data-theme="light"] .page a:not(.brand):not(.back):not(.action):not(.theme-option) { color: #91345e; }
html[data-theme="light"] .page .lead, html[data-theme="light"] .page .hero p,
html[data-theme="light"] .page .meta, html[data-theme="light"] .page .updated,
html[data-theme="light"] .page .soft, html[data-theme="light"] .page .muted,
html[data-theme="light"] .page section p, html[data-theme="light"] .page section li,
html[data-theme="light"] .page .card p, html[data-theme="light"] .page .toc a,
html[data-theme="light"] .page footer { color: var(--theme-muted); }
html[data-theme="light"] .page .eyebrow { color: #90365d; }
html[data-theme="light"] .page .eyebrow::before { background: #a53d68; box-shadow: 0 0 10px rgba(165,61,104,.22); }
html[data-theme="light"] .page .toc a:hover { background: #f5e8ee; color: #862d58; }
html[data-theme="light"] .page .toc li::marker { color: #8f3b63; }
html[data-theme="light"] .page .card .icon { color: #7e3055; background: #f6e2eb; }
html[data-theme="light"] .page .action { color: #fff; border-color: #923354; background: #943e65; }
html[data-theme="light"] .page .action:hover { background: #772d52; }
html[data-theme="light"] .page footer { border-color: var(--theme-border); }
html[data-theme="light"] .community-page .hero { background: var(--theme-gradient); }
html[data-theme="light"] .community-page .notice-version {
  color: var(--theme-muted); border-color: var(--theme-border); background: #f5f1f3;
}
html[data-theme="light"] .community-page .section-nav span { color: var(--theme-muted); }
html[data-theme="light"] .community-page section li::marker { color: #a53d68; }
html[data-theme="light"] .link-page main {
  border-color: var(--theme-border); background: var(--theme-gradient);
  box-shadow: var(--theme-shadow);
}
html[data-theme="light"] .link-page p, html[data-theme="light"] .link-page small,
html[data-theme="light"] .link-page .meta, html[data-theme="light"] .link-page .platform-choices strong {
  color: var(--theme-muted);
}
html[data-theme="light"] .link-page a:not(.secondary) { color: #fff; background: #923e65; }
html[data-theme="light"] .link-page a.secondary {
  color: var(--theme-foreground); border-color: var(--theme-border); background: var(--theme-surface-elevated);
}