/**
 * YalGames design system.
 * The visual layer stays separate from MyArcadePlugin functionality.
 */

:root {
  --arcade-bg: #090b12;
  --arcade-surface: #121622;
  --arcade-surface-raised: #181d2b;
  --arcade-surface-muted: #242c3f;
  --arcade-line: rgba(190, 202, 230, .14);
  --arcade-text: #f8fafc;
  --arcade-muted: #98a2b3;
  --arcade-accent: #7c5cff;
  --arcade-accent-hover: #9278ff;
  --arcade-accent-2: #2dd4bf;
  --arcade-hot: #ff5a5f;
  --arcade-warning: #ffc857;
  --arcade-radius: 16px;
  --arcade-shadow: 0 18px 45px rgba(0, 0, 0, .30);
}

html { background: var(--arcade-bg); }

body {
  background:
    radial-gradient(circle at 7% -8%, rgba(124, 92, 255, .18), transparent 28rem),
    radial-gradient(circle at 92% 15%, rgba(45, 212, 191, .09), transparent 34rem),
    var(--arcade-bg);
  font-family: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  letter-spacing: -.01em;
}

button,
input,
select,
textarea { font-family: inherit; }

h1,
h2,
h3,
h4,
h5,
h6,
.arcade-brand__name,
.arcade-dashboard > .titl > div:first-child,
.arcade-home-category__header h2,
.arcade-front-page-text h1,
.arcade-front-page-text h2,
.arcade-front-page-text h3,
.arcade-continue__copy h1,
.arcade-footer__column h2 {
  font-family: Sora, Manrope, Inter, ui-sans-serif, sans-serif;
}

::selection { background: var(--arcade-accent); color: #fff; }

a,
button,
input,
select,
textarea { transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }

:focus-visible {
  outline: 3px solid rgba(45, 212, 191, .72);
  outline-offset: 3px;
}

/* Header and search */
.arcade-header {
  border-color: rgba(190, 202, 230, .12);
  background: rgba(9, 11, 18, .88);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .20);
}

.arcade-brand__mark {
  background: linear-gradient(145deg, var(--arcade-accent), #a594ff);
  box-shadow: 0 9px 21px rgba(124, 92, 255, .34);
}

.arcade-brand__name { font-weight: 800; }

.arcade-search {
  height: 44px;
  border-color: #2a3245;
  border-radius: 14px;
  background: #121622;
}

.arcade-search:focus-within {
  border-color: rgba(45, 212, 191, .76);
  box-shadow: 0 0 0 4px rgba(45, 212, 191, .11);
}

.arcade-search input { font-size: 14px; font-weight: 600; }
.arcade-search input::placeholder { color: #8e99ae; opacity: 1; }
.arcade-search button { width: 44px; height: 44px; color: #bdc9df; }
.arcade-search button:hover { color: var(--arcade-accent-2); }

.arcade-menu-toggle,
.arcade-theme-toggle {
  border-color: #2a3245;
  border-radius: 12px;
  background: #151a27;
}

.arcade-menu-toggle:hover,
.arcade-theme-toggle:hover {
  border-color: rgba(124, 92, 255, .76);
  background: #1b2131;
  transform: translateY(-1px);
}

.arcade-account__join,
.arcade-button--primary,
.arcade-play-button {
  background: linear-gradient(135deg, var(--arcade-accent), #9173ff);
  box-shadow: 0 10px 24px rgba(124, 92, 255, .29);
}

.arcade-account__join:hover,
.arcade-button--primary:hover,
.arcade-play-button:hover {
  background: linear-gradient(135deg, #8b70ff, #a78cff);
  box-shadow: 0 14px 27px rgba(124, 92, 255, .38);
}

/* Content hierarchy and game cards */
body.home .arcade-dashboard > .titl > div:first-child,
body.home .arcade-dashboard .arcade-home-category__header h2 {
  font-weight: 800;
  letter-spacing: -.035em;
}

body.home .arcade-dashboard .arcade-home-category__header h2:before,
body.home .arcade-dashboard .arcade-front-page-text > h2:before,
body.home .arcade-dashboard .arcade-front-page-text__content h1:before,
body.home .arcade-dashboard .arcade-front-page-text__content h2:before,
body.home .arcade-dashboard .arcade-front-page-text__content h3:before {
  background: linear-gradient(180deg, #8e70ff, #2dd4bf);
}

body.home .arcade-dashboard .arcade-home-category__icon {
  border-color: rgba(124, 92, 255, .34);
  background: linear-gradient(145deg, rgba(124, 92, 255, .19), rgba(45, 212, 191, .10));
  color: #98f3e2;
}

body.home .arcade-dashboard .arcade-home-category__more {
  border-color: rgba(190, 202, 230, .18);
  background: rgba(18, 22, 34, .62);
}

body.home .arcade-dashboard .arcade-home-category__more:hover {
  border-color: rgba(45, 212, 191, .62);
  background: rgba(45, 212, 191, .10);
  color: #fff;
}

body.home .arcade-dashboard .arcade-home-category__grid > li > a {
  border-color: rgba(190, 202, 230, .12);
  background: var(--arcade-surface-raised);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .18);
}

body.home .arcade-dashboard .arcade-home-category__grid > li > a:hover {
  border-color: rgba(45, 212, 191, .73);
  box-shadow: 0 13px 28px rgba(0, 0, 0, .28), 0 0 0 2px rgba(45, 212, 191, .10);
  transform: translateY(-3px);
}

body.home .arcade-dashboard #cntpromotedgames .arcade-game-card.gmcn-midl {
  border-color: rgba(190, 202, 230, .12);
  box-shadow: 0 10px 21px rgba(0, 0, 0, .19);
}

body.home .arcade-dashboard #cntpromotedgames .arcade-game-card.gmcn-midl:hover {
  border-color: rgba(45, 212, 191, .65);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .28), 0 0 0 2px rgba(45, 212, 191, .10);
}

body.home .arcade-dashboard .arcade-front-page-text {
  border-color: rgba(190, 202, 230, .16);
  background: linear-gradient(145deg, rgba(24, 29, 43, .97), rgba(15, 18, 29, .97));
  box-shadow: var(--arcade-shadow);
}

body.home .arcade-dashboard .arcade-front-page-text__content a {
  color: var(--arcade-accent-2);
  text-decoration-color: rgba(45, 212, 191, .55);
}

body.home .arcade-dashboard .arcade-front-page-text__content a:hover { color: #91f7e8; }

/* Light mode keeps contrast and the same visual hierarchy. */
html.arcade-light-mode {
  --arcade-bg: #f4f7fb;
  --arcade-surface: #ffffff;
  --arcade-surface-raised: #ffffff;
  --arcade-surface-muted: #edf1f8;
  --arcade-line: rgba(31, 42, 68, .14);
  --arcade-text: #172033;
  --arcade-muted: #64718a;
  --arcade-accent: #6956e8;
  --arcade-accent-hover: #5946d8;
  --arcade-accent-2: #0b9d8b;
  --arcade-shadow: 0 16px 36px rgba(31, 42, 68, .10);
}

html.arcade-light-mode body {
  background:
    radial-gradient(circle at 8% -8%, rgba(105, 86, 232, .11), transparent 28rem),
    radial-gradient(circle at 92% 12%, rgba(11, 157, 139, .08), transparent 32rem),
    var(--arcade-bg);
}

html.arcade-light-mode .arcade-header {
  border-color: rgba(31, 42, 68, .12);
  background: rgba(255, 255, 255, .88);
}

html.arcade-light-mode .arcade-search {
  border-color: rgba(31, 42, 68, .16);
  background: #f8faff;
}

html.arcade-light-mode .arcade-search button { color: #53617a; }
html.arcade-light-mode .arcade-search button:hover { color: var(--arcade-accent-2); }
html.arcade-light-mode .arcade-menu-toggle,
html.arcade-light-mode .arcade-theme-toggle { border-color: rgba(31, 42, 68, .16); background: #fff; }

html.arcade-light-mode body.home .arcade-dashboard .arcade-home-category__icon {
  border-color: rgba(105, 86, 232, .25);
  color: #0b8275;
}

html.arcade-light-mode body.home .arcade-dashboard .arcade-home-category__more {
  border-color: rgba(31, 42, 68, .16);
  background: #fff;
}

html.arcade-light-mode body.home .arcade-dashboard .arcade-home-category__grid > li > a {
  border-color: rgba(31, 42, 68, .10);
  background: #eef2f8;
  box-shadow: 0 9px 18px rgba(31, 42, 68, .10);
}

html.arcade-light-mode body.home .arcade-dashboard .arcade-front-page-text {
  border-color: rgba(31, 42, 68, .13);
  background: #fff;
}

/* Animations stay subtle and respect the user's accessibility preference. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}