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

:root {
  --arcade-bg: #090f1f;
  --arcade-surface: #111c33;
  --arcade-surface-raised: #182744;
  --arcade-surface-muted: #233554;
  --arcade-line: rgba(170, 183, 207, .16);
  --arcade-text: #f7faff;
  --arcade-muted: #aab7cf;
  --arcade-accent: #168bff;
  --arcade-accent-hover: #3aa0ff;
  --arcade-accent-2: #16d4d0;
  --arcade-hot: #ff5c70;
  --arcade-warning: #ffc928;
  --arcade-fun: #8a63ff;
  --arcade-radius: 16px;
  --arcade-shadow: 0 18px 45px rgba(0, 0, 0, .30);
}

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

body {
  background:
    radial-gradient(circle at 7% -8%, rgba(22, 139, 255, .20), transparent 28rem),
    radial-gradient(circle at 92% 15%, rgba(22, 212, 208, .10), transparent 34rem),
    var(--arcade-bg);
  font-family: "Nunito Sans", 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: Fredoka, "Nunito Sans", 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(22, 212, 208, .72);
  outline-offset: 3px;
}

/* Header and search */
.arcade-header {
  position: sticky !important;
  top: 0;
  z-index: 1000;
  border-color: rgba(170, 183, 207, .14);
  background: rgba(9, 15, 31, .90);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .20);
}

body.admin-bar .arcade-header { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .arcade-header { top: 46px; }
}

.arcade-brand__mark {
  background: linear-gradient(145deg, var(--arcade-accent), var(--arcade-accent-2));
  box-shadow: 0 9px 21px rgba(22, 139, 255, .34);
}

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

.arcade-search {
  height: 44px;
  border-color: #2d4266;
  border-radius: 14px;
  background: #111c33;
}

.arcade-search:focus-within {
  border-color: rgba(22, 212, 208, .76);
  box-shadow: 0 0 0 4px rgba(22, 212, 208, .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: #2d4266;
  border-radius: 12px;
  background: #16233d;
}

.arcade-menu-toggle:hover,
.arcade-theme-toggle:hover {
  border-color: rgba(22, 139, 255, .78);
  background: #1d3153;
  transform: translateY(-1px);
}

.arcade-account__join,
.arcade-button--primary,
.arcade-play-button {
  background: linear-gradient(135deg, var(--arcade-accent), #3aa9ff);
  box-shadow: 0 10px 24px rgba(22, 139, 255, .31);
}

.arcade-account__join:hover,
.arcade-button--primary:hover,
.arcade-play-button:hover {
  background: linear-gradient(135deg, #2494ff, #54baff);
  box-shadow: 0 14px 27px rgba(22, 139, 255, .40);
}

/* The legacy theme controls inherit the same primary action language. */
button:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
a.read-more:hover,
[class*="botn"]:hover {
  background: var(--arcade-accent-hover);
  color: #fff;
}

input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
.mt-slct.focus .selecter-selected {
  border-color: rgba(22, 212, 208, .64);
  box-shadow: 0 0 0 3px rgba(22, 212, 208, .11);
}

/* 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, var(--arcade-warning), var(--arcade-hot));
}

body.home .arcade-dashboard .arcade-home-category__icon {
  border-color: rgba(22, 139, 255, .42);
  background: linear-gradient(145deg, rgba(22, 139, 255, .22), rgba(22, 212, 208, .13));
  color: #8bf2ee;
}

body.home .arcade-dashboard .arcade-home-category__more {
  border-color: rgba(170, 183, 207, .20);
  background: rgba(17, 28, 51, .72);
}

body.home .arcade-dashboard .arcade-home-category__more:hover {
  border-color: rgba(22, 212, 208, .64);
  background: rgba(22, 212, 208, .10);
  color: #fff;
}

body.home .arcade-dashboard .arcade-home-category__grid > li > a {
  border-color: rgba(170, 183, 207, .13);
  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(22, 212, 208, .74);
  box-shadow: 0 13px 28px rgba(0, 0, 0, .28), 0 0 0 2px rgba(22, 212, 208, .10);
  transform: translateY(-3px);
}

body.home .arcade-dashboard #cntpromotedgames .arcade-game-card.gmcn-midl {
  border-color: rgba(170, 183, 207, .13);
  box-shadow: 0 10px 21px rgba(0, 0, 0, .19);
}

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

/* Browse Our Games: use the game title as the hover affordance instead of
   the old generic “Play” item. The label also stays visible over a video
   preview, so each tile remains easy to identify. */
body.home .arcade-dashboard #cntpromotedgames .arcade-game-card .gm-text {
  display: none !important;
}

/* The legacy Arcade Nova skin adds a generic PLAY pseudo-button. Browse Our
   Games uses the real game title instead, so keep this one section title-only. */
body.home .arcade-dashboard #cntpromotedgames .arcade-game-card .gm-imag::after {
  display: none !important;
  content: none !important;
}

body.home .arcade-dashboard #cntpromotedgames .arcade-game-card .gm-imag > a > span:not(.arcade-hero-game-title) {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.home .arcade-dashboard #cntpromotedgames .arcade-game-card .arcade-hero-game-title {
  position: absolute;
  z-index: 4;
  right: 12px;
  bottom: 11px;
  left: 12px;
  display: block;
  overflow: hidden;
  color: #fff;
  font-family: Fredoka, "Nunito Sans", sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .92);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 180ms ease, transform 220ms cubic-bezier(.2, .8, .2, 1);
}

body.home .arcade-dashboard #cntpromotedgames .arcade-thumbnail-card:hover .arcade-hero-game-title,
body.home .arcade-dashboard #cntpromotedgames .arcade-thumbnail-card:focus-within .arcade-hero-game-title {
  opacity: 1;
  transform: translateY(0);
}

/* Category and tag archives use the same thumbnail-first grid as the home
   page. The old theme's cards reserved text space above every image, which is
   why the artwork appeared pushed down in the archive view. */
body.category .cntcls,
body.tag .cntcls { display: block; }

body.category #arcade-main-content.main-cn.cols-n9,
body.tag #arcade-main-content.main-cn.cols-n9 {
  float: none;
  width: 100%;
}

body.category .cntcls > .sdbr-cn,
body.tag .cntcls > .sdbr-cn { display: none; }

/* A WordPress category's dashboard description becomes the page introduction.
   It is deliberately separate from the game toolbar so long descriptions never
   push the sorting controls out of alignment. */
body.category #arcade-main-content .arcade-category-intro {
  position: relative;
  max-width: 980px;
  margin: 4px auto 30px;
  padding: 31px 32px 26px;
  overflow: hidden;
  text-align: center;
  border: 1px solid rgba(75, 142, 255, .22);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% -42%, rgba(22, 212, 208, .18), transparent 46%),
    linear-gradient(145deg, rgba(25, 38, 66, .92), rgba(11, 19, 37, .94));
  box-shadow: 0 18px 38px rgba(0, 0, 0, .18);
}

body.category #arcade-main-content .arcade-category-intro::before {
  position: absolute;
  top: 0;
  right: 25%;
  left: 25%;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, #168bff, #16d4d0 55%, #ffc928);
  content: "";
}

body.category #arcade-main-content .arcade-category-intro__eyebrow {
  display: inline-flex;
  align-items: center;
  margin: 0 0 9px;
  padding: 7px 13px;
  color: #8feee9;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
  border: 1px solid rgba(22, 212, 208, .2);
  border-radius: 999px;
  background: rgba(22, 212, 208, .07);
}

body.category #arcade-main-content .arcade-category-intro__eyebrow::before {
  margin-right: 7px;
  color: #ffc928;
  font-size: 14px;
  content: "✦";
}

body.category #arcade-main-content .arcade-category-intro h1 {
  margin: 0;
  color: #f7f9ff;
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 850;
  letter-spacing: -.045em;
  line-height: 1.08;
}

body.category #arcade-main-content .arcade-category-intro__description {
  max-width: 760px;
  margin: 13px auto 0;
  color: #b9c6dd;
  font-size: 16px;
  font-weight: 550;
  line-height: 1.65;
}

body.category #arcade-main-content .arcade-category-intro__description > :first-child { margin-top: 0; }
body.category #arcade-main-content .arcade-category-intro__description > :last-child { margin-bottom: 0; }
body.category #arcade-main-content .arcade-category-intro__description a { color: #60b4ff; text-decoration: underline; text-underline-offset: 3px; }

body.category #arcade-main-content .arcade-category-intro__count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 17px 0 0;
  color: #dbe7fb;
  font-size: 13px;
  font-weight: 800;
}

body.category #arcade-main-content .arcade-category-intro__count span { color: #16d4d0; font-size: 17px; }

body.category #arcade-main-content > .navtop {
  width: max-content;
  max-width: 100%;
  margin: -13px auto 23px;
}

body.category #arcade-main-content .arcade-category-grid-toolbar { justify-content: flex-end; margin-bottom: 16px; }
body.category #arcade-main-content .arcade-category-grid-toolbar > div:first-child { display: none; }

body.category #arcade-main-content > ul.lst-gams.cate-grid,
body.tag #arcade-main-content > ul.lst-gams.cate-grid {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 16px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.category #arcade-main-content > ul.lst-gams.cate-grid > li,
body.tag #arcade-main-content > ul.lst-gams.cate-grid > li {
  float: none !important;
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}

/* Featured tiles stay exclusive to the curated home mosaic. Archives are a
   clean, scan-friendly square grid, matching the requested reference. */
body.category #arcade-main-content > ul.lst-gams.cate-grid > li.is-full-thumbnail,
body.tag #arcade-main-content > ul.lst-gams.cate-grid > li.is-full-thumbnail {
  grid-column: auto !important;
  grid-row: auto !important;
}

body.category #arcade-main-content .cate-grid .arcade-game-card.gmcn-midl,
body.tag #arcade-main-content .cate-grid .arcade-game-card.gmcn-midl {
  position: relative !important;
  width: 100%;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  padding: 0 !important;
  border: 1px solid rgba(170, 183, 207, .13);
  border-radius: 17px;
  background: var(--arcade-surface-raised);
  box-shadow: 0 10px 21px rgba(0, 0, 0, .19);
  transform: translateZ(0);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

body.category #arcade-main-content .cate-grid .arcade-game-card .gm-imag,
body.tag #arcade-main-content .cate-grid .arcade-game-card .gm-imag,
body.category #arcade-main-content .cate-grid .arcade-game-card .gm-imag > a,
body.tag #arcade-main-content .cate-grid .arcade-game-card .gm-imag > a {
  position: absolute !important;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

body.category #arcade-main-content .cate-grid .arcade-game-card .gm-imag img,
body.tag #arcade-main-content .cate-grid .arcade-game-card .gm-imag img {
  position: absolute !important;
  inset: 0;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center;
  transition: transform 320ms cubic-bezier(.2, .8, .2, 1), filter 180ms ease;
}

body.category #arcade-main-content .cate-grid .arcade-game-card .gm-text,
body.tag #arcade-main-content .cate-grid .arcade-game-card .gm-text,
body.category #arcade-main-content .cate-grid .arcade-game-card .gm-imag::after,
body.tag #arcade-main-content .cate-grid .arcade-game-card .gm-imag::after {
  display: none !important;
  content: none !important;
}

body.category #arcade-main-content .cate-grid .arcade-game-card .gm-imag::before,
body.tag #arcade-main-content .cate-grid .arcade-game-card .gm-imag::before {
  position: absolute;
  z-index: 3;
  inset: 0;
  background: linear-gradient(180deg, transparent 46%, rgba(2, 6, 16, .72) 100%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

body.category #arcade-main-content .cate-grid .arcade-hero-game-title,
body.tag #arcade-main-content .cate-grid .arcade-hero-game-title {
  position: absolute;
  z-index: 4;
  right: 12px;
  bottom: 11px;
  left: 12px;
  display: block;
  overflow: hidden;
  color: #fff;
  font-family: Fredoka, "Nunito Sans", sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .92);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 180ms ease, transform 220ms cubic-bezier(.2, .8, .2, 1);
}

body.category #arcade-main-content .cate-grid .arcade-thumbnail-card:hover .arcade-game-card,
body.category #arcade-main-content .cate-grid .arcade-thumbnail-card:focus-within .arcade-game-card,
body.tag #arcade-main-content .cate-grid .arcade-thumbnail-card:hover .arcade-game-card,
body.tag #arcade-main-content .cate-grid .arcade-thumbnail-card:focus-within .arcade-game-card {
  border-color: rgba(22, 212, 208, .72);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .28), 0 0 0 2px rgba(22, 212, 208, .10);
  transform: translateY(-3px);
}

body.category #arcade-main-content .cate-grid .arcade-thumbnail-card:hover .gm-imag::before,
body.category #arcade-main-content .cate-grid .arcade-thumbnail-card:focus-within .gm-imag::before,
body.tag #arcade-main-content .cate-grid .arcade-thumbnail-card:hover .gm-imag::before,
body.tag #arcade-main-content .cate-grid .arcade-thumbnail-card:focus-within .gm-imag::before { opacity: 1; }

body.category #arcade-main-content .cate-grid .arcade-thumbnail-card:hover img,
body.category #arcade-main-content .cate-grid .arcade-thumbnail-card:focus-within img,
body.tag #arcade-main-content .cate-grid .arcade-thumbnail-card:hover img,
body.tag #arcade-main-content .cate-grid .arcade-thumbnail-card:focus-within img {
  filter: brightness(.84) saturate(1.05);
  transform: scale(1.045);
}

body.category #arcade-main-content .cate-grid .arcade-thumbnail-card:hover .arcade-hero-game-title,
body.category #arcade-main-content .cate-grid .arcade-thumbnail-card:focus-within .arcade-hero-game-title,
body.tag #arcade-main-content .cate-grid .arcade-thumbnail-card:hover .arcade-hero-game-title,
body.tag #arcade-main-content .cate-grid .arcade-thumbnail-card:focus-within .arcade-hero-game-title {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1240px) {
  body.category #arcade-main-content > ul.lst-gams.cate-grid,
  body.tag #arcade-main-content > ul.lst-gams.cate-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 1020px) {
  body.category #arcade-main-content > ul.lst-gams.cate-grid,
  body.tag #arcade-main-content > ul.lst-gams.cate-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
}

@media (max-width: 680px) {
  body.category #arcade-main-content .arcade-category-intro { margin: 0 auto 23px; padding: 23px 18px 20px; border-radius: 17px; }
  body.category #arcade-main-content .arcade-category-intro h1 { font-size: 29px; }
  body.category #arcade-main-content .arcade-category-intro__description { font-size: 14px; line-height: 1.55; }
  body.category #arcade-main-content .arcade-category-grid-toolbar { justify-content: flex-start; flex-wrap: wrap; margin-bottom: 14px; }
  body.category #arcade-main-content > ul.lst-gams.cate-grid,
  body.tag #arcade-main-content > ul.lst-gams.cate-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  body.category #arcade-main-content .cate-grid .arcade-game-card.gmcn-midl,
  body.tag #arcade-main-content .cate-grid .arcade-game-card.gmcn-midl { border-radius: 13px; }
  body.category #arcade-main-content .cate-grid .arcade-hero-game-title,
  body.tag #arcade-main-content .cate-grid .arcade-hero-game-title { right: 7px; bottom: 7px; left: 7px; font-size: 12px; }
}

@media (max-width: 420px) {
  body.category #arcade-main-content > ul.lst-gams.cate-grid,
  body.tag #arcade-main-content > ul.lst-gams.cate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.gmcn-midl:hover,
.gmcn-larg:hover,
.gmcn-smal:hover {
  border-color: rgba(22, 139, 255, .76);
  box-shadow: 0 18px 28px rgba(0, 0, 0, .30), 0 0 0 2px rgba(22, 139, 255, .10);
}

.gmcn-midl .gm-titl,
.gmcn-larg .gm-titl,
.gmcn-midl .gm-cate,
.gmcn-larg .gm-cate,
.arcade-rail,
.arcade-footer__column a {
  font-family: "Nunito Sans", Inter, ui-sans-serif, sans-serif;
}

/* Side navigation: a blue active state reflects the YalGames mark instead of
   the previous red/orange arcade skin. */
#arcade-rail.arcade-rail {
  border-right-color: rgba(170, 183, 207, .14);
  background: #111c33;
  box-shadow: 5px 0 20px rgba(0, 0, 0, .18);
}

#arcade-rail.arcade-rail a.arcade-rail__link { color: #bcc9df; }

#arcade-rail.arcade-rail a.arcade-rail__link:hover,
#arcade-rail.arcade-rail a.arcade-rail__link:focus,
#arcade-rail.arcade-rail a.arcade-rail__link.is-current,
#arcade-rail.arcade-rail a.arcade-rail__home {
  background: rgba(22, 139, 255, .16) !important;
  color: #8bf2ee !important;
}

/* A single, smooth light sweep makes playable thumbnails feel responsive.
   It is an original CSS overlay; the game images themselves are untouched. */
@media (hover: hover) and (pointer: fine) {
  .gmcn-midl .gm-imag > a,
  .gmcn-larg .gm-imag:first-child > a,
  .gmcn-smal .gm-imag:first-child > a,
  body.home .arcade-dashboard .arcade-home-category__grid > li > a {
    position: relative;
    z-index: 1;
    isolation: isolate;
  }

  .gmcn-midl .gm-imag > a::before,
  .gmcn-larg .gm-imag:first-child > a::before,
  .gmcn-smal .gm-imag:first-child > a::before,
  body.home .arcade-dashboard .arcade-home-category__grid > li > a::before {
    position: absolute;
    z-index: 3;
    inset: -34%;
    background: linear-gradient(
      112deg,
      transparent 40%,
      rgba(255, 255, 255, 0) 45%,
      rgba(255, 255, 255, .19) 49%,
      rgba(188, 255, 244, .54) 51%,
      rgba(255, 255, 255, .18) 54%,
      rgba(255, 255, 255, 0) 59%,
      transparent 64%
    );
    content: "";
    opacity: 0;
    pointer-events: none;
    transform: translateX(-72%) rotate(-7deg);
    transition: transform 720ms cubic-bezier(.22, .8, .25, 1), opacity 150ms ease;
    will-change: transform, opacity;
  }

  .gmcn-midl:hover .gm-imag > a::before,
  .gmcn-midl:focus-within .gm-imag > a::before,
  .gmcn-larg:hover .gm-imag:first-child > a::before,
  .gmcn-larg:focus-within .gm-imag:first-child > a::before,
  .gmcn-smal:hover .gm-imag:first-child > a::before,
  .gmcn-smal:focus-within .gm-imag:first-child > a::before,
  body.home .arcade-dashboard .arcade-home-category__grid > li > a:hover::before,
  body.home .arcade-dashboard .arcade-home-category__grid > li > a:focus-visible::before {
    opacity: 1;
    transform: translateX(72%) rotate(-7deg);
  }

  .gmcn-midl:hover .gm-imag img,
  .gmcn-larg:hover .gm-imag:first-child img,
  .gmcn-smal:hover .gm-imag:first-child img,
  body.home .arcade-dashboard .arcade-home-category__grid > li > a:hover img {
    filter: brightness(1.055) saturate(1.06);
  }
}

/* Generated gameplay clips replace live iframes on hover. They are muted,
   looped, and contain no controls, so every card keeps its normal click path. */
.arcade-hover-preview__video {
  position: absolute !important;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  margin: 0;
  border: 0;
  background: var(--arcade-surface);
  overflow: hidden !important;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transform: scale(1.018);
  transition: opacity 220ms ease, transform 360ms cubic-bezier(.2, .7, .2, 1);
  will-change: opacity, transform;
}

[data-arcade-preview-video].is-hover-preview-active .arcade-hover-preview__video {
  opacity: 1;
  transform: scale(1);
}

[data-arcade-preview-video].is-hover-preview-active .gm-imag::after {
  opacity: 0;
  transform: scale(.88);
  transition: opacity 160ms ease, transform 160ms ease;
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .arcade-hover-preview__video { display: none !important; }
}

body.home .arcade-dashboard .arcade-front-page-text {
  border-color: rgba(170, 183, 207, .17);
  background: linear-gradient(145deg, rgba(24, 39, 68, .97), rgba(12, 20, 38, .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(22, 212, 208, .55);
}

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

/* Game detail page: breadcrumb, metadata and the control rail use the same
   compact YalGames surfaces as the main dashboard. */
#arcade-main-content > .navtop {
  display: flex;
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 24px 0 18px;
  padding: 9px 13px;
  border: 1px solid var(--arcade-line);
  border-radius: 999px;
  background: rgba(17, 28, 51, .82);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
  color: var(--arcade-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}

#arcade-main-content > .navtop a { color: #90a3c0; }
#arcade-main-content > .navtop a:hover { color: var(--arcade-accent-2); }
#arcade-main-content > .navtop strong { color: var(--arcade-text); }
#arcade-main-content > .navtop > span { color: var(--arcade-accent-2); }

.post-game > header {
  grid-template-columns: 70px minmax(0, 1fr) auto;
  gap: 15px;
  padding: 18px 20px;
  border-color: rgba(102, 151, 220, .27);
  background:
    radial-gradient(circle at 85% 0, rgba(22, 139, 255, .14), transparent 18rem),
    linear-gradient(135deg, #182744, #111c33 72%);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .18);
}

.post-game > header figure {
  border: 2px solid rgba(22, 212, 208, .42);
  border-radius: 14px;
  box-shadow: 0 9px 20px rgba(0, 0, 0, .27);
}

.post-game > header figure img { width: 66px; height: 66px; }
.post-game > header h1 {
  color: var(--arcade-text);
  font-family: Fredoka, "Nunito Sans", sans-serif;
  font-weight: 700;
}

.post-game .game_post_meta_data {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 10px;
  color: var(--arcade-muted);
  font-size: 12px;
  font-weight: 700;
}

.post-game .game_post_meta_data > * { margin: 0; }
.post-game .game_post_meta_data > a { color: #b7c8e1; }
.post-game .game_post_meta_data > a:hover { color: #8bf2ee; }
.post-game .game_post_meta_data .gm-cate a {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 4px 9px;
  border: 1px solid rgba(22, 139, 255, .36);
  border-radius: 999px;
  background: rgba(22, 139, 255, .15);
  color: #d9ecff;
  font-size: 11px;
  font-weight: 800;
}
.post-game .game_post_meta_data .gm-cate a:hover { border-color: rgba(22, 212, 208, .68); background: rgba(22, 212, 208, .13); color: #fff; }
.post-game .gm-vote { color: var(--arcade-warning); font-weight: 800; }

.arcade-game-controls {
  display: flex;
  justify-content: center;
  margin: 13px 0 0;
  padding: 9px 12px;
  border: 1px solid var(--arcade-line);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(24, 39, 68, .95), rgba(9, 15, 31, .95));
  box-shadow: 0 10px 25px rgba(0, 0, 0, .16);
}

.arcade-game-controls .game_opts {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
}

.arcade-game-controls .game_opts > li { margin: 0; }
.arcade-game-controls .game_opts > li > a,
.arcade-game-controls .game_opts > li > span > a,
.arcade-game-controls .game_opts > li .wpfp-img {
  display: grid;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(170, 183, 207, .18);
  border-radius: 12px;
  background: #111c33;
  color: #dce8fb;
  line-height: 1;
}

.arcade-game-controls .game_opts > li > a::before,
.arcade-game-controls .game_opts > li > span > a::before {
  width: auto;
  height: auto;
  margin: 0;
  background: transparent;
  color: inherit;
  font-size: 16px;
  line-height: 1;
}

.arcade-game-controls .game_opts > li > a:hover,
.arcade-game-controls .game_opts > li > a:focus-visible,
.arcade-game-controls .game_opts > li > span > a:hover,
.arcade-game-controls .game_opts > li > span > a:focus-visible {
  border-color: rgba(22, 212, 208, .68);
  background: rgba(22, 139, 255, .22);
  color: #8bf2ee;
  transform: translateY(-2px);
}

/* Native fullscreen and the no-rewrite mobile fallback. */
#myarcade_game.is-arcade-fullscreen,
#myarcade_game.is-arcade-fullscreen:fullscreen,
#myarcade_game.is-arcade-fullscreen:-webkit-full-screen {
  display: flex !important;
  width: 100vw !important;
  width: 100dvw !important;
  height: 100vh !important;
  height: 100dvh !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
}

#myarcade_game.is-arcade-fullscreen iframe,
#myarcade_game.is-arcade-fullscreen object,
#myarcade_game.is-arcade-fullscreen embed,
#myarcade_game.is-arcade-fullscreen ruffle-player {
  display: block !important;
  width: 100vw !important;
  width: 100dvw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
}

body.arcade-game-fullscreen {
  position: fixed;
  inset: 0;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow: hidden;
  background: #000;
}

.arcade-standalone-player {
  position: fixed;
  inset: 0;
  display: flex;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: #000;
}

.arcade-standalone-player__game {
  display: flex !important;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: #000;
  box-shadow: none;
}

.arcade-standalone-player__game iframe,
.arcade-standalone-player__game object,
.arcade-standalone-player__game embed,
.arcade-standalone-player__game ruffle-player {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0;
  border: 0;
}

.arcade-fullscreen-exit {
  position: fixed;
  z-index: 20;
  top: calc(env(safe-area-inset-top) + 13px);
  right: calc(env(safe-area-inset-right) + 13px);
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(9, 15, 31, .78);
  color: #fff;
  font-size: 29px;
  font-weight: 500;
  line-height: 1;
  opacity: .76;
  backdrop-filter: blur(10px);
}

.arcade-fullscreen-exit:hover,
.arcade-fullscreen-exit:focus-visible { opacity: 1; background: rgba(22, 139, 255, .85); color: #fff; transform: scale(1.06); }

@media (max-width: 680px) {
  #arcade-main-content > .navtop {
    width: 100%;
    margin: 14px 0;
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 10px;
  }

  .post-game > header {
    grid-template-columns: 53px minmax(0, 1fr);
    gap: 11px;
    padding: 14px;
  }

  .post-game > header figure img { width: 49px; height: 49px; }
  .post-game .game_post_meta_data { gap: 5px 8px; font-size: 10px; }
  .post-game .game_post_meta_data .gm-cate a { min-height: 24px; padding: 3px 7px; font-size: 10px; }
  .arcade-game-controls { margin-top: 9px; padding: 7px 9px; border-radius: 11px; }
  .arcade-game-controls .game_opts { gap: 6px; }
  .arcade-game-controls .game_opts > li > a,
  .arcade-game-controls .game_opts > li > span > a,
  .arcade-game-controls .game_opts > li .wpfp-img { width: 38px; height: 38px; border-radius: 11px; }
  .arcade-fullscreen-exit { width: 38px; height: 38px; font-size: 27px; }
}

/* Global vertical scrollbar: the footer's YalGames spectrum is carried through
   the entire journey, with a dark track that stays unobtrusive. */
html {
  scrollbar-color: #16d4d0 #090f1f;
  scrollbar-width: thin;
}

html::-webkit-scrollbar {
  width: 13px;
  height: 13px;
}

html::-webkit-scrollbar-track {
  background: #090f1f;
}

html::-webkit-scrollbar-thumb {
  min-height: 54px;
  border: 3px solid #090f1f;
  border-radius: 999px;
  background: linear-gradient(180deg, #168bff 0%, #3aa0ff 30%, #16d4d0 68%, #ffc928 100%);
}

html::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #3aa0ff 0%, #16d4d0 55%, #ffd75b 100%);
}

/* Keep the footer copyright centred and give the back-to-top action exactly
   the same spectrum as the vertical scrollbar. */
.arcade-footer__bottom-inner {
  display: flex;
  justify-content: center;
  text-align: center;
}

a.botn-gtop {
  border-color: rgba(123, 226, 222, .52) !important;
  background: linear-gradient(135deg, #168bff 0%, #16d4d0 58%, #ffc928 100%) !important;
  color: #07101f !important;
  box-shadow: 0 12px 28px rgba(22, 139, 255, .30), 0 0 0 3px rgba(22, 212, 208, .09);
}

a.botn-gtop:hover,
a.botn-gtop:focus-visible {
  background: linear-gradient(135deg, #3aa0ff 0%, #5be8de 58%, #ffe078 100%) !important;
  color: #07101f !important;
  transform: translateY(-3px);
}

/* Related games live directly below the player, rather than inside the
   sidebar/content grid. This lets the game grid use the exact player width. */
#arcade-main-content > .arcade-related-games {
  width: 100%;
  margin: 26px 0 30px;
  padding: 20px 22px 22px;
  border: 1px solid rgba(102, 151, 220, .27);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0, rgba(22, 139, 255, .10), transparent 22rem),
    linear-gradient(145deg, rgba(24, 39, 68, .96), rgba(13, 22, 41, .98));
  box-shadow: 0 16px 34px rgba(0, 0, 0, .16);
  box-sizing: border-box;
}

#arcade-main-content > .arcade-related-games > .titl {
  display: flex;
  align-items: center;
  min-height: 28px;
  margin: 0 0 16px;
  padding: 0 0 13px;
  border: 0;
  border-bottom: 1px dashed rgba(22, 212, 208, .62);
  background: transparent;
  color: var(--arcade-text);
  font-family: Fredoka, "Nunito Sans", sans-serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.1;
}

#arcade-main-content > .arcade-related-games > .titl::before {
  width: 5px;
  height: 26px;
  margin-right: 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #168bff 0%, #16d4d0 60%, #ffc928 100%);
  content: "";
}

.arcade-related-grid {
  display: grid !important;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.arcade-related-grid > li {
  float: none !important;
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}

.arcade-related-card {
  position: relative;
  isolation: isolate;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(136, 174, 226, .22);
  border-radius: 15px;
  background: #1a2a49;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .19);
  transform: translateZ(0);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.arcade-related-card img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  transition: transform 420ms cubic-bezier(.2, .8, .2, 1), filter 220ms ease;
}

.arcade-related-card::before {
  position: absolute;
  z-index: 3;
  inset: -28% auto -28% -55%;
  width: 48%;
  background: linear-gradient(105deg, transparent 14%, rgba(255, 255, 255, .42) 48%, transparent 82%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translateX(-120%) rotate(11deg);
  transition: transform 640ms cubic-bezier(.22, .8, .25, 1), opacity 160ms ease;
}

.arcade-related-card:hover,
.arcade-related-card:focus-visible {
  border-color: rgba(22, 212, 208, .77);
  box-shadow: 0 14px 26px rgba(0, 0, 0, .28), 0 0 0 3px rgba(22, 212, 208, .10);
  transform: translateY(-4px);
}

.arcade-related-card:hover img,
.arcade-related-card:focus-visible img { filter: brightness(1.06) saturate(1.06); transform: scale(1.055); }
.arcade-related-card:hover::before,
.arcade-related-card:focus-visible::before { opacity: 1; transform: translateX(420%) rotate(11deg); }

.arcade-related-games__empty {
  margin: 0;
  color: var(--arcade-muted);
  font-weight: 700;
}

/* Rendering below-the-fold footer content can wait until it approaches the
   viewport. Its reserved size prevents a late layout shift. */
@supports (content-visibility: auto) {
  .ftcn.arcade-site-footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 520px;
  }
}

/* Responsive audit hardening ------------------------------------------------
   The compact header keeps every primary action reachable from 320px upward,
   and controls never force a horizontal page scroll on a narrow device. */
@media (max-width: 760px) and (min-width: 681px) {
  .arcade-account__join { display: none; }
}

@media (max-width: 680px) {
  .arcade-header__main {
    min-height: 68px;
    padding-right: 16px;
    padding-right: max(16px, env(safe-area-inset-right));
    padding-left: 16px;
    padding-left: max(16px, env(safe-area-inset-left));
  }

  .arcade-brand { min-width: 0; }
  .arcade-brand img { max-width: 126px; max-height: 40px; }
  .arcade-search { min-width: 0; flex: 1 1 0; }
  .arcade-search input { min-width: 0; }

  .arcade-game-controls .game_opts {
    max-width: 100%;
    flex-wrap: wrap;
    padding: 0;
  }

  a.botn-gtop {
    right: 16px;
    right: max(16px, env(safe-area-inset-right));
    bottom: 16px;
    bottom: max(16px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 390px) {
  .arcade-header__main { gap: 7px; }
  .arcade-brand img { max-width: 105px; max-height: 38px; }
  .arcade-search input { font-size: 12px; }
}

@media (max-width: 1100px) {
  .arcade-related-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  #arcade-main-content > .arcade-related-games { margin: 19px 0 24px; padding: 16px; border-radius: 15px; }
  #arcade-main-content > .arcade-related-games > .titl { margin-bottom: 13px; padding-bottom: 11px; font-size: 19px; }
  .arcade-related-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
  .arcade-related-card { border-radius: 12px; }
}

@media (max-width: 420px) {
  .arcade-related-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
}

/* Light mode keeps contrast and the same visual hierarchy. */
html.arcade-light-mode {
  --arcade-bg: #f4f8ff;
  --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: #168bff;
  --arcade-accent-hover: #1277df;
  --arcade-accent-2: #0caeaa;
  --arcade-shadow: 0 16px 36px rgba(31, 42, 68, .10);
}

html.arcade-light-mode body {
  background:
    radial-gradient(circle at 8% -8%, rgba(22, 139, 255, .12), transparent 28rem),
    radial-gradient(circle at 92% 12%, rgba(22, 212, 208, .08), transparent 32rem),
    var(--arcade-bg);
}

html.arcade-light-mode { scrollbar-color: #16bdb9 #edf1f8; }
html.arcade-light-mode::-webkit-scrollbar-track { background: #edf1f8; }
html.arcade-light-mode::-webkit-scrollbar-thumb { border-color: #edf1f8; }

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(22, 139, 255, .28);
  color: #0b8f8b;
}

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;
}

html.arcade-light-mode #arcade-main-content > .arcade-related-games {
  border-color: rgba(31, 42, 68, .13);
  background: #fff;
  box-shadow: 0 16px 34px rgba(31, 42, 68, .10);
}

/*
 * Keep WordPress sidebars in a real right-hand column on desktop. The legacy
 * theme relied on floats, which made the sidebar fall below long page content.
 * On game posts, the separately configured game sidebar is deliberately put
 * here too, after the player and related-games section.
 */
@media (min-width: 961px) {
  body:not(.home):not(.category):not(.tag) .cntcls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 320px);
    gap: 24px;
    align-items: start;
  }

  body:not(.home):not(.category):not(.tag) .cntcls > .main-cn,
  body:not(.home):not(.category):not(.tag) .cntcls > .sdbr-cn,
  body:not(.home):not(.category):not(.tag) .cntcls > .arcade-game-sidebar-column {
    float: none !important;
    width: 100% !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
  }

  body:not(.home):not(.category):not(.tag) .cntcls.sidebar_right > .main-cn,
  body:not(.home):not(.category):not(.tag) .cntcls.sidebar_right > .arcade-game-sidebar-column {
    grid-row: 1;
  }

  body:not(.home):not(.category):not(.tag) .cntcls.sidebar_right > .main-cn { grid-column: 1; }
  body:not(.home):not(.category):not(.tag) .cntcls.sidebar_right > .sdbr-cn,
  body:not(.home):not(.category):not(.tag) .cntcls.sidebar_right > .arcade-game-sidebar-column { grid-column: 2; }

  body:not(.home):not(.category):not(.tag) .cntcls.sidebar_left > .main-cn { grid-column: 2; grid-row: 1; }
  body:not(.home):not(.category):not(.tag) .cntcls.sidebar_left > .sdbr-cn,
  body:not(.home):not(.category):not(.tag) .cntcls.sidebar_left > .arcade-game-sidebar-column { grid-column: 1; grid-row: 1; }

}

.arcade-game-sidebar-column .left_game_sidebar,
.arcade-game-sidebar-column .right_game_sidebar,
.arcade-game-sidebar-column .sdbr-cn {
  float: none;
  width: 100%;
  margin: 0 0 22px;
}

.arcade-game-sidebar-column .sdbr-cn { padding: 0; }

@media (max-width: 960px) {
  body:not(.home):not(.category):not(.tag) .cntcls > .main-cn,
  body:not(.home):not(.category):not(.tag) .cntcls > .sdbr-cn,
  body:not(.home):not(.category):not(.tag) .cntcls > .arcade-game-sidebar-column {
    float: none !important;
    width: 100% !important;
  }

  body:not(.home):not(.category):not(.tag) .cntcls > .sdbr-cn,
  body:not(.home):not(.category):not(.tag) .cntcls > .arcade-game-sidebar-column { margin-top: 24px; }
}

html.arcade-light-mode .arcade-related-card {
  border-color: rgba(31, 42, 68, .12);
  background: #edf1f8;
  box-shadow: 0 8px 18px rgba(31, 42, 68, .10);
}

html.arcade-light-mode #arcade-rail.arcade-rail { border-color: rgba(22, 74, 136, .16); background: #fff; }
html.arcade-light-mode #arcade-rail.arcade-rail a.arcade-rail__link { color: #344866; }
html.arcade-light-mode #arcade-rail.arcade-rail a.arcade-rail__link:hover,
html.arcade-light-mode #arcade-rail.arcade-rail a.arcade-rail__link:focus,
html.arcade-light-mode #arcade-rail.arcade-rail a.arcade-rail__link.is-current,
html.arcade-light-mode #arcade-rail.arcade-rail a.arcade-rail__home { background: rgba(22, 139, 255, .11) !important; color: #087dba !important; }

/* 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;
  }
}

/* Game launch layer --------------------------------------------------------
   iframe sources are deferred until Play Now. The surrounding game box keeps
   its native dimensions, while this layer provides a consistent branded start
   experience for every iframe game. */
.arcade-game-launch {
  position: relative;
  isolation: isolate;
  min-height: 320px;
  overflow: hidden;
  border-radius: inherit;
  background: #0b1120;
}

.arcade-game-launch > .game-play { margin: 0 !important; }
.arcade-game-launch:not(.is-playing) > .game-play { visibility: hidden; pointer-events: none; }
.arcade-game-launch.is-playing > .game-play { visibility: visible; }

.arcade-game-launch__overlay {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  place-items: center;
  min-height: inherit;
  padding: 36px 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 31%, rgba(255, 201, 40, .24), transparent 16rem),
    radial-gradient(circle at 52% 6%, rgba(22, 212, 208, .13), transparent 25rem),
    linear-gradient(160deg, rgba(12, 29, 47, .98), rgba(10, 15, 29, .98) 62%, rgba(18, 25, 46, .98));
  text-align: center;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.arcade-game-launch__overlay::before,
.arcade-game-launch__overlay::after {
  position: absolute;
  z-index: -1;
  width: min(42vw, 520px);
  height: min(42vw, 520px);
  border: 1px solid rgba(87, 160, 255, .12);
  border-radius: 50%;
  content: "";
}

.arcade-game-launch__overlay::before { top: -34%; left: -9%; }
.arcade-game-launch__overlay::after { right: -12%; bottom: -47%; }

.arcade-game-launch__content { position: relative; z-index: 1; display: flex; align-items: center; flex-direction: column; max-width: min(100%, 440px); }

.arcade-game-launch__thumbnail {
  width: 116px;
  height: 116px;
  margin: 0 0 19px;
  overflow: hidden;
  border: 3px solid rgba(255, 201, 40, .82);
  border-radius: 24px;
  background: #17243d;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .34), 0 0 0 5px rgba(22, 139, 255, .18);
}

.arcade-game-launch__thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; }

.arcade-game-launch__content h2 {
  margin: 0;
  color: #fff;
  font-family: var(--arcade-font-display, "Fredoka", sans-serif);
  font-size: clamp(25px, 3.2vw, 35px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
  text-wrap: balance;
}

.arcade-game-launch__category {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 24px;
  color: #c3d1e9;
  font-size: 15px;
  font-weight: 700;
}

.arcade-game-launch__category::before { width: 8px; height: 8px; border-radius: 50%; background: #ffc928; box-shadow: 0 0 0 4px rgba(255, 201, 40, .1); content: ""; }

.arcade-game-launch__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 214px;
  min-height: 56px;
  padding: 14px 27px;
  color: #fff;
  font-family: inherit;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #168bff, #6978f4);
  box-shadow: 0 11px 24px rgba(22, 139, 255, .31);
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.arcade-game-launch__button:hover,
.arcade-game-launch__button:focus-visible { color: #fff; filter: brightness(1.07); box-shadow: 0 15px 30px rgba(22, 139, 255, .42); outline: none; transform: translateY(-2px); }
.arcade-game-launch__button:focus-visible { box-shadow: 0 0 0 4px rgba(22, 212, 208, .3), 0 15px 30px rgba(22, 139, 255, .42); }

.arcade-game-launch.is-playing .arcade-game-launch__overlay { visibility: hidden; opacity: 0; pointer-events: none; }

html.arcade-light-mode .arcade-game-launch__overlay {
  background:
    radial-gradient(circle at 50% 31%, rgba(255, 201, 40, .31), transparent 16rem),
    radial-gradient(circle at 52% 6%, rgba(22, 212, 208, .16), transparent 25rem),
    linear-gradient(160deg, rgba(234, 244, 255, .99), rgba(222, 233, 250, .99));
}

html.arcade-light-mode .arcade-game-launch__content h2 { color: #14213b; }
html.arcade-light-mode .arcade-game-launch__category { color: #53617a; }

@media (max-width: 680px) {
  .arcade-game-launch { min-height: 260px; }
  .arcade-game-launch__overlay { padding: 24px 16px; }
  .arcade-game-launch__thumbnail { width: 88px; height: 88px; margin-bottom: 14px; border-radius: 19px; }
  .arcade-game-launch__category { margin: 8px 0 18px; font-size: 13px; }
  .arcade-game-launch__button { min-width: 180px; min-height: 49px; font-size: 16px; }
}