/* ==========================================================================
   CP Elora — theme
   --------------------------------------------------------------------------
   Loaded last on every page, after style.css, site.css and studio.css.

   It does two jobs:
     1. Light mode. One `html[data-theme="light"]` block repaints the site by
        redefining the same tokens every other stylesheet already reads, plus a
        short list of fixes for the places that drew a dark colour by hand.
     2. The flat finish: placeholder art stops being a gradient, micro-labels are
        monospace, and nothing glows.

   Dark is the default and needs no attribute; assets/theme.js sets one either
   way before first paint so there is no flash of the wrong theme.
   ========================================================================== */

/* ---------- 1. Light ---------- */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f7f3;
  --bg-elev: #efefe8;
  --surface: #ffffff;
  --surface-2: #f3f3ec;
  --surface-3: #e9e9e0;
  --line: #deded3;
  --line-strong: #c2c2b5;
  --text: #14170f;
  --muted: #575c50;
  --dim: #7b8074;
  --field: #ffffff;
  --field-focus: #fcfcf7;
  --on-accent: #12170a;
  --header-bg: rgba(247, 247, 243, .94);
  /* site.css reads these two directly for cards, quiet buttons and the studio shell. */
  --card: #ffffff;
  --card-2: #f3f3ec;
  --scrim: rgba(20, 22, 16, .55);
  /* The accent has two jobs in light mode: a fill that carries dark ink, and a text
     colour that has to stay readable on white. They are not the same shade. */
  --lime: #557f00;
  --lime-bright: #3f5f00;
  --lime-soft: rgba(85, 127, 0, .1);
  --neon: #557f00;
  --neon-bright: #3f5f00;
  --neon-deep: #6d9c12;
  --neon-cyan-soft: rgba(22, 110, 96, .12);
  --violet-soft: rgba(110, 70, 190, .1);
  --copper-soft: rgba(214, 122, 30, .12);
  --red: #d92b3f;
}
html[data-theme="light"] .button-primary,
html[data-theme="light"] .browse-chip.active,
html[data-theme="light"] .filter-chip.active {
  background: #a97bff !important;
  border-color: #a97bff !important;
  color: #12170a !important;
}
html[data-theme="light"] .button-primary:hover { background: #c6a4ff !important; border-color: #c6a4ff !important; }
html[data-theme="light"] ::selection { background: #d9f58f; color: #12170a; }
html[data-theme="light"] .skip-link { background: #a97bff; color: #12170a; }
html[data-theme="light"] .main-nav a.active { box-shadow: inset 0 -2px 0 #557f00 !important; }
html[data-theme="light"] .live-pill { background: #d92b3f; }
html[data-theme="light"] .live-pill i { background: #fff; }

/* Places that painted a dark panel by hand rather than through a token. */
html[data-theme="light"] .arc-header,
html[data-theme="light"] .channel-topbar,
html[data-theme="light"] .chat-panel,
html[data-theme="light"] .arc-chat,
html[data-theme="light"] .arc-chat-panel,
html[data-theme="light"] .creator-sidebar,
html[data-theme="light"] .creator-page-shell { background: var(--header-bg) !important; }
html[data-theme="light"] .arc-header { border-bottom-color: var(--line) !important; }
html[data-theme="light"] .header-search,
html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="light"] select,
html[data-theme="light"] textarea { background: var(--field) !important; color: var(--text) !important; }
html[data-theme="light"] select option { background: #fff; color: var(--text); }

/* Anything that sat on top of artwork keeps a dark scrim in both themes: it is
   legible because it is over a picture, not because the page is dark. */
html[data-theme="light"] .arc-feature-status,
html[data-theme="light"] .viewer-count,
html[data-theme="light"] .thumb-overlay,
html[data-theme="light"] .player-center { background-color: var(--scrim) !important; color: #f4f6f2 !important; }
html[data-theme="light"] .arc-feature-status { border-color: rgba(255, 255, 255, .22) !important; }

/* Creator Studio was built on its own violet tokens, and it wrote several colours by hand.
   Both are redirected here rather than in studio.css, because these are the colour decisions
   and this is the file that owns them: the studio keeps its layout and its own components,
   it just stops carrying a second palette. */
:root {
  --studio-bg: var(--bg);
  --studio-panel: var(--surface);
  --studio-panel-alt: var(--surface-2);
  --studio-border: var(--line);
  --studio-text: var(--text);
  --studio-muted: var(--muted);
  --studio-purple: var(--lime);
  --studio-purple-soft: var(--lime-soft);
}
/* The rail scrolls on a short screen; its bar is a hairline, not a coloured 10px stripe. */
.creator-sidebar, .home-sidebar { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.creator-sidebar::-webkit-scrollbar, .home-sidebar::-webkit-scrollbar { width: 6px; }
.creator-sidebar::-webkit-scrollbar-track, .home-sidebar::-webkit-scrollbar-track { background: transparent; }
.creator-sidebar::-webkit-scrollbar-thumb, .home-sidebar::-webkit-scrollbar-thumb {
  background: var(--line-strong); border: 0; border-radius: 999px;
}
.creator-sidebar .sidebar-brand,
.creator-sidebar .sidebar-link,
.creator-sidebar .sidebar-link span { color: var(--muted); }
.creator-sidebar .sidebar-link:hover { background: var(--surface-2); color: var(--text); }
.creator-sidebar .sidebar-link.active { background: var(--surface-2) !important; border-left-color: var(--lime) !important; color: var(--text) !important; }
.creator-sidebar .sidebar-link.active span { color: var(--lime-bright); }
.creator-page-main, .creator-page-main h1, .creator-page-main h2, .creator-page-main h3,
.creator-page-main h4, .creator-page-main strong, .creator-page-main .stat-card > strong,
.admin-main, .admin-main h1, .admin-main h2, .admin-main h3, .admin-main h4 {
  color: var(--text);
}
.creator-page-main p, .creator-page-main .stat-card > span, .creator-page-main small,
.admin-main p, .admin-main small { color: var(--muted); }

/* Studio and admin draw their own surfaces; these keep them on the same paper. */
html[data-theme="light"] .creator-page-main,
html[data-theme="light"] .admin-main { background: var(--bg) !important; }
html[data-theme="light"] .stat-card,
html[data-theme="light"] .settings-card,
html[data-theme="light"] .table-wrap,
html[data-theme="light"] .admin-table { background: var(--surface) !important; border-color: var(--line) !important; }

/* Placeholder art: a flat panel, so a page with no artwork still looks drawn. */
html[data-theme="light"] .thumb-one,
html[data-theme="light"] .thumb-two,
html[data-theme="light"] .thumb-three,
html[data-theme="light"] .thumb-four { background-image: none !important; background-color: var(--surface-2) !important; }

/* Scrollbars. */
html[data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg-elev); }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--line-strong); border-color: var(--bg-elev); }

/* ---------- 2. Flat finish, both themes ---------- */
/* Placeholder art is a surface with one mark on it, not a woven gradient. Real
   artwork replaces all of these the moment a channel has a picture. */
.thumb-one, .thumb-two, .thumb-three, .thumb-four,
.cat-game, .cat-chat, .cat-music, .cat-art, .cat-other {
  background-image: none !important;
  background-color: var(--surface-2) !important;
}
.av-lilac, .av-pink, .av-blue, .av-green,
.avatar-lilac, .avatar-pink, .avatar-mint, .avatar-gold,
.avatar-stack span {
  background-image: none !important;
  background-color: var(--lime) !important;
  color: var(--on-accent) !important;
}
.av-purple, .sidebar-drop-mark {
  background-image: none !important;
  background-color: var(--surface-3) !important;
  color: var(--lime) !important;
}
.avatar-pink, .av-pink, .avatar-stack span:nth-child(2) { background-color: #7fd3c4 !important; color: #08201c !important; }
.avatar-mint, .av-green, .avatar-stack span:nth-child(3) { background-color: #e8e2d2 !important; color: #1b1a16 !important; }
.avatar-gold, .av-blue, .avatar-stack span:nth-child(4) { background-color: var(--violet) !important; color: #fff !important; }

/* Micro-labels are monospace in both themes; it is what makes a count read as data. */
.eyebrow, .pill, .tag, .live-pill, .offline-pill, .viewer-count, .category-label,
.thumb-overlay-label, .sidebar-label, .sidebar-heading, .footer-col h3,
.section-heading p, .browse-sort-hint, .category-meta, .kpi-label, .stat-card > span {
  font-family: var(--font-mono);
}

/* One radius scale for the things that look like cards. */
.stream-card, .category-art-card, .panel, .drop-feature, .settings-card {
  border-radius: var(--radius-lg) !important;
}

/* The last of the glows, wherever a page kept one. */
.pill, .tag, .button, .arc-header, .stream-card, .category-art-card,
.arc-feature-card, .creator-sidebar, .sidebar-link {
  box-shadow: none;
}
.card:hover, .stream-card:hover, .category-art-card:hover, .panel:hover {
  box-shadow: none;
}

/* Reduced motion already wins in site.css; keep the toggle honest too. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- 3. Games catalogue ----------
   One page, one job: find a game. A compact heading, one toolbar that stays put while the
   grid scrolls, and cover art in a fixed 2:3 frame. The name and the channel count sit
   under the art on the page background, which is the only place they stay readable over
   both a bright cover and a dark one, in either theme. */
.games-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--s6);
  margin:var(--s2) 0 var(--s4);
  padding-bottom:var(--s4);
  border-bottom:1px solid var(--line);
}
.games-head-copy{ max-width:62ch; }
.games-head-copy .eyebrow{ display:inline-flex; align-items:center; gap:8px; margin-bottom:10px; }
.games-head-copy h1{ font-size:clamp(30px,3.2vw,42px); }
.games-head-copy p{ margin:10px 0 0; color:var(--muted); font-size:14px; line-height:1.6; }
.games-head-stats{ display:flex; gap:var(--s5); flex:none; }
.games-head-stats div{ display:flex; flex-direction:column; gap:2px; }
.games-head-stats strong{
  font-family:var(--font-display); font-size:26px; line-height:1; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; color:var(--text);
}
.games-head-stats span{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim);
}

.games-toolbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin:0 0 var(--s3);
  padding:0 0 var(--s3);
  border-bottom:1px solid var(--line);
}
.games-search{ position:relative; display:flex; align-items:center; flex:1 1 320px; margin:0; }
.games-search svg{
  position:absolute; left:12px; width:15px; height:15px; fill:none;
  stroke:var(--dim); stroke-width:1.8; pointer-events:none;
}
.games-search input{
  width:100%; height:40px; min-height:40px;
  /* Clears the search glyph; a generic input rule below this one would otherwise pull the
     placeholder back under the icon. */
  padding:0 14px 0 38px !important;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--text); font-size:13.5px;
}
.games-search input::placeholder{ color:var(--dim); }
.games-search input:focus{ outline:none; border-color:var(--line-strong); background:var(--field-focus, var(--surface)); }
.games-toolbar .catalogue-chips{ margin:0; }
.games-toolbar .catalogue-chip{
  min-height:34px; padding:0 14px;
  border:1px solid var(--line); background:transparent; color:var(--muted);
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
}
.games-toolbar .catalogue-chip:hover{ border-color:var(--line-strong); color:var(--text); }
.games-toolbar .catalogue-chip.active{
  background:var(--surface); border-color:var(--line-strong); color:var(--text);
}
html[data-theme="light"] .games-toolbar .catalogue-chip.active{ background:#e9e9de; border-color:var(--line-strong); color:var(--ink, #14170f); }
/* The catalogue heading already carries the page's spacing, so the grid section does not
   open with a second band of empty space. */
#categoryDirectorySection{ padding-top:0 !important; }
.games-summary{
  margin:0 0 var(--s4); max-width:none;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--dim);
}

/* The grid. auto-fill with a 168px floor keeps seven or eight columns on a wide screen and
   two on a phone, without a breakpoint for each. */
.games-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(168px, 1fr));
  gap:var(--s4) var(--s3);
  align-items:start;
}
.game-card{
  display:flex; flex-direction:column; gap:10px;
  color:inherit; text-decoration:none; min-width:0;
}
.game-card-art{
  position:relative; display:block;
  aspect-ratio:2 / 3;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-md, 10px);
  background:var(--surface-2);
  transition:border-color .15s ease, transform .15s ease;
}
.game-card-art img{ width:100%; height:100%; object-fit:cover; display:block; }
.game-card-art.is-empty{ display:grid; place-items:center; }
.game-card-glyph{
  font-family:var(--font-display); font-size:34px; font-weight:700;
  color:var(--dim); opacity:.5;
}
.game-card-flag{
  position:absolute; top:8px; left:8px;
  padding:2px 6px; border-radius:4px;
  background:rgba(8,8,10,.72); color:#e9ecdf;
  font-family:var(--font-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  backdrop-filter:blur(4px);
}
.game-card:hover .game-card-art{ border-color:var(--line-strong); transform:translateY(-2px); }
.game-card:focus-visible{ outline:none; }
.game-card:focus-visible .game-card-art{ outline:2px solid var(--lime); outline-offset:2px; }
.game-card-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.game-card-body strong{
  font-size:12.5px; font-weight:600; line-height:1.35; letter-spacing:-.005em;
  color:var(--text);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.game-card-body em{
  font-style:normal; font-family:var(--font-mono); font-size:10px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--dim);
}
.game-card:hover .game-card-body strong{ color:var(--text); }

@media (max-width:760px){
  .games-head{ flex-direction:column; align-items:flex-start; gap:var(--s4); }
  .games-head-stats{ gap:var(--s4); }
  .games-head-stats strong{ font-size:22px; }
  .games-grid{ grid-template-columns:repeat(auto-fill, minmax(136px, 1fr)); gap:var(--s3) var(--s2); }
}

/* Follow buttons are an outline until you follow, then a filled accent. Nothing on the site
   carries the old violet gradient any more, and a filled violet pill was the loudest place
   it survived. */
.cc-follow{
  border:1px solid var(--line-strong) !important;
  background:transparent !important;
  color:var(--text) !important;
  border-radius:var(--radius-sm) !important;
  font-weight:600 !important;
  box-shadow:none !important;
}
.cc-follow:hover{ border-color:var(--lime) !important; color:var(--lime-bright) !important; background:transparent !important; }
.cc-follow.is-following,
.cc-follow.is-following:hover{
  background:var(--lime) !important;
  border-color:var(--lime) !important;
  color:var(--on-accent) !important;
}
/* The jump-to-another-game field lives in the game's own hero, not in a band of its own. */
.category-search-hero{ margin:var(--s3) 0 0 !important; max-width:420px; }
.category-search-hero .category-search-field{ background:var(--surface); }

/* Artwork tiles on Browse and the category rail use the same poster shape as the games grid:
   the cover keeps its own frame and the name sits under it. The old overlay wrote a dark
   caption across the bottom of the art, which hid the cover and was unreadable in light mode. */
.category-art-card{
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  gap:8px !important;
  min-height:0 !important;
  aspect-ratio:auto !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  overflow:visible !important;
}
.category-art-card::after{ display:none !important; }
.category-art-card img{
  position:static !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:2 / 3;
  object-fit:cover;
  opacity:1 !important;
  border:1px solid var(--line);
  border-radius:var(--radius-md, 10px);
  background:var(--surface-2);
  transition:border-color .15s ease;
}
.category-art-card:hover img{ border-color:var(--line-strong); }
.category-art-card span{
  padding:0 !important;
  font-family:var(--font-body) !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  line-height:1.35;
  color:var(--text) !important;
}
.category-art-card small{
  padding:0 !important;
  font-family:var(--font-mono) !important;
  font-size:10px !important;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--dim) !important;
}
.category-art-card.no-art{ aspect-ratio:2 / 3 !important; }
.category-art-card .category-art-glyph{ margin-bottom:auto !important; color:var(--dim) !important; }
.category-art-grid{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)) !important; gap:var(--s4) var(--s3) !important; }

/* ---------- 4. Header fit ---------- */
/* The nav, the search, the theme control and the account buttons share one row. Below a
   wide desktop the label on the install button and the search width give way first, so a
   nav item never wraps onto three lines. */
.nav-actions { gap: 6px; }
@media (max-width: 1440px) { .pwa-install-label { display: none; } }
@media (max-width: 1320px) {
  .main-nav a { padding: 6px 8px !important; font-size: 12.5px !important; }
  .header-search { max-width: 260px !important; }
}

/* ---------- 5. Header theme control ---------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  flex: none;
}
.theme-toggle:hover { color: var(--text); border-color: var(--line-strong); }
.theme-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; flex: none; }
.theme-toggle .theme-toggle-label { line-height: 1; }
html[data-theme="light"] .theme-toggle .icon-moon,
html:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; }
@media (max-width: 860px) {
  .theme-toggle .theme-toggle-label { display: none; }
  .theme-toggle { padding: 0 8px; }
}