/* Approved portal themes and fitted artwork; existing hover styles remain in control. */
html[data-theme] {
  --ui-surface: #171b27;
  --ui-surface-raised: #202637;
  --ui-header: rgba(16, 19, 29, .94);
  --ui-sidebar: rgba(13, 16, 24, .96);
  --ui-input: #090d16;
  --ui-input-focus: #22243a;
  --ui-interactive: rgba(255, 255, 255, .06);
  --ui-active: rgba(125, 100, 255, .18);
  --ui-accent-text: #c6bcff;
  --ui-focus: #c1b5ff;
}
html[data-theme] .header { background: var(--ui-header); }
html[data-theme] .sidebar { background: var(--ui-sidebar); }
html[data-theme] .search__input {
  background: var(--ui-input);
  color: var(--text);
}
html[data-theme] .search__input:focus { background: var(--ui-input-focus); }
html[data-theme] .gcard { background: var(--ui-surface); }
html[data-theme] :where(a, button, input, select):focus-visible {
  outline-color: var(--ui-focus);
}
#themeToggle {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
}
/* Auto-launch has one loading state, using the existing stage feedback. */
html[data-theme] #playVeil { display: none; }
html[data-theme] #playRoot:has(#playVeil.is-on) #stageSplash {
  opacity: 1;
  visibility: visible;
}

/* Preserve the original card hover; only correct thumbnail fitting here. */
.gcard__img,
.gcard--tall .gcard__img,
.hero__art img,
.fslide img,
.next img,
.next__thumb img,
.mini img,
.sresult img {
  object-fit: contain;
  object-position: center;
}
#continue .gcard__img,
.hero__art img,
#picksMosaic > .gcard:first-child .gcard__img {
  object-fit: cover;
}
img.ui-art-fallback {
  object-fit: contain;
  object-position: center;
  padding: 14%;
  background: var(--ui-surface-raised);
}
.mini img.ui-art-fallback,
.sresult img.ui-art-fallback { padding: 5px; }
.fslide { cursor: pointer; }

html[data-theme="light"] {
  color-scheme: light;
  --ui-surface: #ffffff;
  --ui-surface-raised: #eef1f8;
  --ui-header: rgba(255, 255, 255, .95);
  --ui-sidebar: rgba(249, 250, 254, .98);
  --ui-input: #eef1f8;
  --ui-input-focus: #ffffff;
  --ui-interactive: rgba(79, 66, 147, .065);
  --ui-active: rgba(108, 76, 255, .1);
  --ui-accent-text: #6841c4;
  --ui-focus: #744bd8;
  --bg: #f4f6fb;
  --bg-2: #ffffff;
  --header: #ffffff;
  --card: #ffffff;
  --card-2: #eef1f8;
  --text: #182035;
  --muted: #58647a;
  --muted-dim: #66738a;
  --line: rgba(36, 51, 82, .1);
  --line-strong: rgba(36, 51, 82, .18);
  --purple-bright: #744bd8;
  --cyan: #087b96;
  --gold: #a76300;
  --green: #148146;
  --pink: #bf2d80;
  --shadow: 0 10px 30px rgba(34, 47, 80, .09);
  --shadow-hover: 0 14px 32px rgba(108, 76, 255, .13);
}
html[data-theme="light"] .sidebar {
  box-shadow: 0 8px 28px rgba(34, 47, 80, .06);
}
html[data-theme="light"] :is(.search__input, .field input, .select, .field-wrap input, .acct__lang select) {
  background-color: var(--card-2);
  color: var(--text);
}
html[data-theme="light"] :is(.search__input:focus, .field-wrap input:focus) {
  background: #fff;
}
html[data-theme="light"] :is(.icon-btn:hover, .search__btn:hover, .nav__item:hover, .nav__item.is-active, .nav__more:hover .nav__text, .filter:hover, .tool:hover, .card-panel__title:hover, .footer h4, .lb-state strong) {
  color: var(--text);
}
html[data-theme="light"] :is(.icon-btn:hover, .nav__item:hover, .tool:hover, .mini:hover) {
  background: var(--ui-interactive);
}
html[data-theme="light"] .nav__item.is-active {
  background: var(--ui-active);
}
html[data-theme="light"] .nav__text { color: var(--muted); }
html[data-theme="light"] .nav__item.is-active .nav__text { color: var(--ui-accent-text); }
html[data-theme="light"] .section__see { color: var(--ui-accent-text); }
html[data-theme="light"] :is(.hero, .page-head) {
  background: radial-gradient(ellipse at 18% 0%, #e9e2ff, transparent 70%), #fff;
}
html[data-theme="light"] .hero__art {
  border-color: var(--line-strong);
  background: var(--card-2);
  box-shadow: 0 12px 28px rgba(34, 47, 80, .13);
}
html[data-theme="light"] :is(.hero__art-cap, .hero__feature-label, .fslide__title) {
  color: #fff;
}
html[data-theme="light"] .fslide__desc { color: #cdd4e3; }
html[data-theme="light"] .fslide__cat { color: #67e8f9; }
html[data-theme="light"] .discover-pill {
  background: #fff;
}
html[data-theme="light"] :is(.discover-pill:hover, .discover-pill.is-active) {
  background: #6650d5;
  color: #fff;
}
html[data-theme="light"] :is(.gcard, .toolbar, .gpv__head, .gpv__foot) {
  background: #fff;
}
/* The original motion stylesheet uses white titles on hover in its dark UI. */
html[data-theme="light"] .gcard:hover .gcard__title { color: var(--text); }
html[data-theme="light"] :is(.btn:not(.btn--primary), .btn--ghost, .filter, .chip, .rail-btn) {
  background-color: var(--card-2);
  color: var(--text);
}
html[data-theme="light"] :is(.btn--primary, .filter.is-active) {
  color: #fff;
}
html[data-theme="light"] .empty {
  background: linear-gradient(110deg, #f2edff, #f5f8fc);
  border-color: var(--line-strong);
}
html[data-theme="light"] .empty strong { color: var(--text); }
html[data-theme="light"] .block--brain {
  --block-bg: radial-gradient(800px 260px at 6% 0%, rgba(139, 92, 246, .1), transparent 62%), #faf8ff;
}
html[data-theme="light"] .block--math {
  --block-bg: radial-gradient(800px 260px at 6% 0%, rgba(34, 211, 238, .1), transparent 62%), #f5fbfe;
}
html[data-theme="light"] .block--arcade {
  --block-bg: radial-gradient(800px 260px at 6% 0%, rgba(236, 72, 153, .08), transparent 62%), #fff8fc;
}
html[data-theme="light"] :is(.lb-banner, .pf-hero) {
  background: radial-gradient(ellipse at 0 0, rgba(139, 92, 246, .09), transparent 75%), #fff;
}
html[data-theme="light"] :is(.cat-card__ico, .lb-row, .user-chip, .acct__btn, .auth__ghost, .auth__tabs, .ident) {
  background: rgba(62, 78, 112, .045);
}
html[data-theme="light"] :is(.user-chip, .auth__ghost) { color: var(--text); }
html[data-theme="light"] :is(.user-chip:hover, .acct__btn:hover, .acct__item:hover, .auth__close:hover, .auth__ghost:hover, .field-eye:hover, .gpv__close:hover, .gpv__icon:hover, .cmodal__close:hover, .save-offer__no:hover) {
  color: var(--text);
  background-color: rgba(108, 76, 255, .08);
}
html[data-theme="light"] :is(.acct, .auth, .gpv__card, .cmodal__card) {
  background: radial-gradient(600px 220px at 50% 0%, rgba(108, 76, 255, .08), transparent 64%), #fff;
  box-shadow: 0 24px 70px rgba(34, 47, 80, .2);
}
html[data-theme="light"] .gpv__blurb { color: var(--muted); }
html[data-theme="light"] :is(.tag, .callout__k, .how__num, .level-num),
html[data-theme="light"] .steps li::before { color: var(--ui-accent-text); }
html[data-theme="light"] .auth__submit:disabled {
  background: #e0e4ee;
  color: var(--muted-dim);
}
html[data-theme="light"] .auth__error { color: #b42342; }
html[data-theme="light"] .auth__success { color: #167546; }
html[data-theme="light"] :is(.lb-state--error, .lb-state--error strong, .tool.is-on--down) { color: #b42342; }
html[data-theme="light"] .acct__item--danger:hover { color: #b42342; background: rgba(180, 35, 66, .08); }
html[data-theme="light"] .stage__bar { background: #fff; }
html[data-theme="light"] :is(.gbar, .pop) {
  background: var(--card);
  color: var(--text);
}
html[data-theme="light"] .gb { color: var(--muted); }
/* A game's own document and the dark runtime/loading canvas keep their palette. */
html[data-theme="light"] :is(.stage__splash, .stage__error) {
  --text: #fff;
  --muted: #aeb6ca;
  --muted-dim: #929cb4;
  color: #fff;
}
html[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: #c2c8d9;
}
@media (max-width: 700px) {
  .gcard__title {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow-wrap: anywhere;
    min-height: 2.8em;
    max-height: 2.8em;
  }
}