@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");

:root {
  color-scheme: dark;
  --site-bg: #5e7594;
  --site-grid-line: transparent;
  --site-text: #ffffff;
  --site-muted: #b5cae0;
  --site-surface: #7a8fab;
  --site-surface-2: #5e7594;
  --site-surface-3: #4a5f7a;
  --site-border: #353d49;
  --site-button: #413d3d;
  --site-button-hover: #2f2b2b;
  --site-accent: #f5b942;
  --site-accent-hover: #f8cd6b;
  --site-accent-text: #484c51;
  --site-link: #f1a727;
  --site-link-hover: #f1d41d;
  --site-input-bg: #7a8fab;
  --site-input-text: #ffffff;
  --site-placeholder: #f0f6ff;
  --site-shadow: rgba(0, 0, 0, 0.24);
  --site-radius-sm: 10px;
  --site-radius-md: 14px;
  --site-radius-lg: 18px;
  --site-radius-xl: 28px;
  --site-radius-pill: 999px;
  --site-search-width: min(88vw, 912px);
  --site-search-radius: 20px;
  --site-search-font-size: 1.3rem;
  --site-search-bg: var(--site-input-bg);
  --site-search-hover-bg: var(--site-search-bg);
  --site-search-border-color: var(--site-control-border-hover);
  --site-search-glow-color: var(--site-search-border-color);
  --site-search-glow-shadow:
    0 4px 12px var(--site-shadow),
    0 0 18px color-mix(in srgb, var(--site-search-glow-color) 32%, transparent);
  --site-control-border: color-mix(
    in srgb,
    var(--site-border) 64%,
    var(--site-muted)
  );
  --site-control-border-hover: color-mix(
    in srgb,
    var(--site-muted) 54%,
    var(--site-border)
  );
  --site-control-ring: color-mix(in srgb, var(--site-muted) 28%, transparent);
  --site-control-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--site-text) 10%, transparent),
    0 14px 34px var(--site-shadow);
}

:root[data-theme="blue"] {
  color-scheme: dark;
  --site-bg: #0b1220;
  --site-grid-line: rgba(148, 163, 184, 0.08);
  --site-text: #e6edf7;
  --site-muted: #8fa0b8;
  --site-surface: #111d2f;
  --site-surface-2: #0f1a2b;
  --site-surface-3: #070d17;
  --site-border: #223452;
  --site-button: #1a314f;
  --site-button-hover: #24466f;
  --site-accent: #3b82f6;
  --site-accent-hover: #60a5fa;
  --site-accent-text: #06111f;
  --site-link: #60a5fa;
  --site-link-hover: #93c5fd;
  --site-input-bg: #101d31;
  --site-input-text: #f8fbff;
  --site-placeholder: #c4d1e4;
  --site-shadow: rgba(0, 0, 0, 0.28);
}

:root[data-theme="legacy"] {
  --site-bg: #5e7594;
  --site-grid-line: transparent;
  --site-text: #ffffff;
  --site-muted: #b5cae0;
  --site-surface: #7a8fab;
  --site-surface-2: #5e7594;
  --site-surface-3: #4a5f7a;
  --site-border: #353d49;
  --site-button: #413d3d;
  --site-button-hover: #2f2b2b;
  --site-accent: #f5b942;
  --site-accent-hover: #f8cd6b;
  --site-accent-text: #484c51;
  --site-link: #f1a727;
  --site-link-hover: #f1d41d;
  --site-input-bg: #7a8fab;
  --site-input-text: #ffffff;
  --site-placeholder: #f0f6ff;
  --site-shadow: rgba(0, 0, 0, 0.24);
}

:root[data-theme="midnight"] {
  --site-bg: #121826;
  --site-grid-line: transparent;
  --site-text: #f5f7fb;
  --site-muted: #9eb6d8;
  --site-surface: #22304a;
  --site-surface-2: #182235;
  --site-surface-3: #101827;
  --site-border: #33425f;
  --site-button: #2d3a56;
  --site-button-hover: #425276;
  --site-accent: #7dd3fc;
  --site-accent-hover: #38bdf8;
  --site-accent-text: #07111f;
  --site-link: #fbbf24;
  --site-link-hover: #fde68a;
  --site-input-bg: #22304a;
  --site-input-text: #f5f7fb;
  --site-placeholder: #d8e4f5;
}

:root[data-theme="forest"] {
  --site-bg: #233329;
  --site-grid-line: transparent;
  --site-text: #f4fbf4;
  --site-muted: #b7d9bd;
  --site-surface: #3e5f48;
  --site-surface-2: #2c4634;
  --site-surface-3: #1d2f24;
  --site-border: #16251c;
  --site-button: #263b2c;
  --site-button-hover: #345840;
  --site-accent: #e4b363;
  --site-accent-hover: #f1c979;
  --site-accent-text: #1f2d24;
  --site-link: #f4d35e;
  --site-link-hover: #fff3a6;
  --site-input-bg: #3e5f48;
  --site-input-text: #f4fbf4;
  --site-placeholder: #e7f4e9;
}

:root[data-theme="sunset"] {
  --site-bg: #40284f;
  --site-grid-line: transparent;
  --site-text: #fff8f3;
  --site-muted: #ffd0c2;
  --site-surface: #74456f;
  --site-surface-2: #5a3264;
  --site-surface-3: #352040;
  --site-border: #271932;
  --site-button: #523256;
  --site-button-hover: #6f4168;
  --site-accent: #ffb86b;
  --site-accent-hover: #ff9f68;
  --site-accent-text: #2f2031;
  --site-link: #ffe066;
  --site-link-hover: #fff2ad;
  --site-input-bg: #74456f;
  --site-input-text: #fff8f3;
  --site-placeholder: #fff1eb;
}

:root[data-theme="contrast"] {
  color-scheme: dark;
  --site-bg: #000000;
  --site-grid-line: transparent;
  --site-text: #ffffff;
  --site-muted: #f5f5f5;
  --site-surface: #1a1a1a;
  --site-surface-2: #000000;
  --site-surface-3: #111111;
  --site-border: #ffffff;
  --site-button: #000000;
  --site-button-hover: #222222;
  --site-accent: #ffff00;
  --site-accent-hover: #00ffff;
  --site-accent-text: #000000;
  --site-link: #00ffff;
  --site-link-hover: #ffff00;
  --site-input-bg: #000000;
  --site-input-text: #ffffff;
  --site-placeholder: #ffffff;
}

body {
  font-family: "Roboto", serif;
  margin: 0;
  padding: 0;
  background-color: var(--site-bg);
  background-image:
    linear-gradient(var(--site-grid-line, transparent) 1px, transparent 1px),
    linear-gradient(
      90deg,
      var(--site-grid-line, transparent) 1px,
      transparent 1px
    );
  background-size: 36px 36px;
  color: var(--site-text);
}

.form__input,
input.searchbar,
.site-input {
  box-sizing: border-box;
  padding: 1.2vw;
  width: 50%;
  border-radius: 5px;
  background: var(--site-input-bg, #2a3a5b);
  text-align: center;
  font-family: "Roboto", serif;
  font-size: 24px;
  border: none;
  outline: none;
  color: white;
  transition: 0.2s;
  margin: 0;
}

.form__input::placeholder,
input.searchbar::placeholder,
.site-input::placeholder {
  color: #aaa;
  text-align: center;
}

.form__input:hover,
input.searchbar:hover,
.site-input:hover,
.form__input:focus,
input.searchbar:focus,
.site-input:focus {
  background: var(--site-search-hover-bg, #3a4a7b);
  transition: 0.2s;
}

title {
  padding-top: 20%;
}

main {
  padding: 20px;
  overflow-wrap: break-word;
}

#adleft {
  position: fixed;
  overflow: hidden;
  scale: 0.7;
  left: -24px;
  top: 25vh;
}
#adright {
  position: fixed;
  overflow: hidden;
  scale: 0.7;
  right: -24px;
  top: 25vh;
}

:where(button:not(:disabled)) {
  transform-origin: center;
  transition: transform 0.15s ease;
}

:where(button:not(:disabled)):hover {
  transform: scale(1.05);
}

:where(button:not(:disabled)):active {
  transform: scale(0.96);
}

#gs {
  cursor: pointer;
  background-color: var(--site-button);
  border: none;
  color: var(--site-text);
  padding: 10px 30px;
  margin-left: 10px;
  margin-right: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: "Roboto", serif;
  font-size: 16px;
  border-radius: var(--site-radius-sm);
  transition: all 0.15s ease;
}
#gs:hover {
  transform: scale(1.06);
  background-color: var(--site-button-hover);
}
#gs:active {
  transform: scale(0.94);
}

.gs {
  cursor: pointer;
  background-color: var(--site-button);
  border: none;
  color: var(--site-text);
  padding: 10px 30px;
  margin-left: 10px;
  margin-right: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: "Roboto", serif;
  font-size: 16px;
  border-radius: var(--site-radius-sm);
  transition: all 0.15s ease;
}
.gs:hover {
  transform: scale(1.06);
  background-color: var(--site-button-hover);
}
.gs:active {
  transform: scale(0.94);
}

@media (prefers-reduced-motion: reduce) {
  :where(button:not(:disabled)),
  #gs,
  .gs {
    transition: none;
  }

  :where(button:not(:disabled)):hover,
  :where(button:not(:disabled)):active,
  #gs:hover,
  #gs:active,
  .gs:hover,
  .gs:active {
    transform: none;
  }
}

.horizontal-items {
  display: flex;
  justify-content: left;
}

a {
  color: var(--site-link);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--site-link-hover);
}

/* Scrollbar settings */
::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--site-text) 24%, transparent);
  background-clip: padding-box;
  border: 3px solid transparent;
  border-radius: var(--site-radius-pill);
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
  background: color-mix(in srgb, var(--site-text) 42%, transparent);
  background-clip: padding-box;
}
@supports not selector(::-webkit-scrollbar) {
  :root {
    scrollbar-color: color-mix(in srgb, var(--site-text) 24%, transparent)
      transparent;
  }
}

/* 55GMS Ads slots on the site pages (game pages have their own, .ad-box in
   gameframe.css). The embed (ads.js) sizes the inner [data-55gms-ad] box and
   hides it when no ad is available, so the wrapper only takes up room while
   that box is reserved or filled. */
.site-ad {
  width: min(var(--site-ad-width, 728px), 100%);
  max-width: calc(100vw - 32px);
  margin: 0 auto;
}
.site-ad:has(> [data-55gms-ad][style]:not([style*="display: none"])) {
  margin-block: var(--site-ad-gap, 28px);
}
.site-ad > [data-55gms-ad],
.site-ad-rail > [data-55gms-ad] {
  margin: 0 auto;
  border-radius: var(--site-radius-sm, 10px);
  background-color: color-mix(
    in srgb,
    var(--site-surface-2, #5e7594) 40%,
    transparent
  );
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}
/* The embed sizes its image with inline width: 100%. A page's own img rule
   (media.css caps every img at the poster size) must not shrink it. */
.site-ad > [data-55gms-ad] img,
.site-ad-rail > [data-55gms-ad] img {
  max-width: none;
  max-height: none;
}
.site-ad--billboard {
  --site-ad-width: 970px;
}
.site-ad--box {
  --site-ad-width: 336px;
}
/* Under 336px the embed offers the short mobile banners (320x100, 320x50)
   before the boxes, which is what a slot beside a form or on a phone wants. */
.site-ad--small {
  --site-ad-width: 335px;
}
@media (max-width: 500px) {
  .site-ad:not(.site-ad--billboard, .site-ad--box) {
    --site-ad-width: 335px;
  }
}

/* Skyscrapers in the side gutters, on screens wide enough to have gutters.
   --slim is for pages with a narrow centred column; --gutter is for
   full-width pages, whose <main> makes room once a rail has an ad. */
.site-ad-rail {
  position: fixed;
  top: calc(50% + 28px);
  transform: translateY(-50%);
  z-index: 5;
  display: none;
  width: 160px;
}
.site-ad-rail--left {
  left: 20px;
}
.site-ad-rail--right {
  right: 20px;
}
@media (min-width: 1200px) and (min-height: 740px) {
  .site-ad-rail--slim {
    display: block;
  }
}
@media (min-width: 1400px) and (min-height: 740px) {
  .site-ad-rail--gutter {
    display: block;
  }
  body:has(.site-ad-rail--gutter [data-serve]) main {
    padding-inline: 200px;
  }
}
@media (min-width: 1600px) and (min-height: 740px) {
  .site-ad-rail {
    display: block;
  }
}