/* Indigo, violet and rose accents, with accessible text contrast. */
.content-layout>aside {
  position: sticky;
  top: var(--sidebar-top, 20px);
  align-self: start;
  max-height: none;
  overflow: visible;
  padding: 0
}

@media(max-width:800px) {
  .content-layout>aside {
    position: static;
    top: auto
  }
}

.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 40;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid #ffffff60;
  border-radius: 50%;
  background: #6035ce;
  color: #fff;
  box-shadow: 0 5px 18px #42248740;
  cursor: pointer;
  transition: background .15s, box-shadow .15s
}

.back-to-top[hidden] {
  display: none
}

.back-to-top .icon {
  width: 23px;
  height: 23px;
  stroke-width: 2
}

.back-to-top:hover {
  background: #4f25b8;
  box-shadow: 0 7px 22px #42248750
}

.back-to-top:focus-visible {
  outline: 3px solid #bda2ee;
  outline-offset: 3px
}

@media(max-width:550px) {
  .back-to-top {
    right: 16px;
    bottom: 16px;
    bottom: max(16px, env(safe-area-inset-bottom));
    width: 44px;
    height: 44px
  }
}

.simple-footer {
  background: #6035ce;
  color: #fff;
  border-top: 0;
  padding: 21px 0
}

.simple-footer nav {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 0;
  font-size: 13px;
  line-height: 1.7
}

.simple-footer a {
  display: inline-flex;
  align-items: center;
  color: inherit
}

.simple-footer a+a:before {
  content: '·';
  padding: 0 13px;
  color: #d9c9ff;
  pointer-events: none
}

.simple-footer .footer-site-name {
  font-weight: 700;
  color: #fff
}

.simple-footer a:hover {
  text-decoration: underline;
  text-underline-offset: 4px
}

.simple-footer a:focus-visible {
  outline-color: #fff
}

@media(max-width:550px) {
  .simple-footer {
    padding: 18px 0
  }

  .simple-footer nav {
    font-size: 12px
  }

  .simple-footer a+a:before {
    padding: 0 9px
  }
}

aside .resource-grid {
  grid-template-columns: 1fr;
  gap: 0
}

aside #more-resources {
  border-top: 3px solid #9b6dd3
}

aside .resource h3 {
  font-size: 16px
}

aside .resource p {
  font-size: 15px;
  line-height: 1.75;
  margin: 0
}

aside .resource {
  align-items: flex-start
}

.app-information-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.7;
  text-align: left
}

.app-information-table th,
.app-information-table td {
  padding: 12px 0;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere
}

.app-information-table th:first-child {
  width: 45%;
  padding-right: 16px
}

.app-information-table thead th {
  color: #4f2c9e;
  font-weight: 700;
  border-bottom: 2px solid #e4d9f6;
  padding-top: 0
}

.app-information-table tbody th {
  font-weight: 400;
  color: var(--muted)
}

.app-information-table td {
  font-weight: 500;
  color: var(--ink)
}

.app-information-table tbody tr:last-child th,
.app-information-table tbody tr:last-child td {
  border-bottom: 0
}

.app-information-table code {
  font: inherit;
  font-size: 14px;
  overflow-wrap: anywhere;
  word-break: break-all
}

aside #app-information .section-heading h2 {
  font-size: 21px
}

:root {
  --teal: #5933c7;
  --ink: #1d2340;
  --muted: #59637d;
  --line: #e4e7f2;
  --bg: #f3f4fa
}

header {
  border-top: 4px solid #673adb;
  box-shadow: 0 3px 16px #25214f07
}

.brand>span {
  color: #645d83
}

.header-help {
  background: #f3efff;
  border-color: #e3d9ff;
  color: #5030ac;
  font-weight: 600
}

.header-help:hover {
  background: #e9e0ff
}

.hero {
  background: radial-gradient(ellipse at 89% 15%, #f8d9ed 0, transparent 45%), radial-gradient(ellipse at 62% 85%, #dce6ff 0, transparent 50%), linear-gradient(120deg, #fcfbff, #eee9ff);
  border-bottom: 1px solid #e7e0f7
}

.eyebrow {
  color: #6033bb
}

.dot {
  background: #7946de;
  box-shadow: 0 0 0 4px #7946de12
}

h1 {
  color: #251d49
}

.hero-description {
  color: #5b4f7d
}

.tags span {
  color: #57418a;
  background: #e8e0fa;
  border: 1px solid #dbd0f4
}

.button {
  background: #6035ce;
  border: 1px solid #6035ce;
  box-shadow: 0 5px 15px #5933c727;
  border-radius: 8px;
  font-weight: 700
}

.button:hover {
  background: #4c22b2;
  border-color: #4c22b2;
  box-shadow: 0 6px 18px #5933c740
}

.text-link {
  color: #5730b8;
  border: 1px solid #c8bae9;
  padding: 11px 19px;
  border-radius: 8px;
  background: #ffffff8c;
  font-weight: 600
}

.text-link:hover {
  background: #fff;
  border-color: #8055d6
}

.art-label,
.art-caption {
  color: #70518a
}

.orbit {
  border-color: #bd9de0
}

.orbit-two {
  border-color: #dc95c5
}

.app-tile {
  background: linear-gradient(145deg, #fff, #f9eafa);
  border: 1px solid #fff;
  border-radius: 46px;
  box-shadow: 0 24px 50px -18px #70419e65
}

.floating-label {
  transform: none;
  background: #fff;
  box-shadow: 0 10px 26px #54306d12
}

.floating-label small {
  color: #756584
}

.stats {
  border: 1px solid #e5def4;
  box-shadow: 0 5px 22px #44326f07;
  background: #ffffffed
}

.stat-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: #eee8ff;
  color: #6336cf
}

.stats>div:nth-child(2) .stat-icon {
  background: #e7edff;
  color: #315dca
}

.stats>div:nth-child(3) .stat-icon {
  background: #fce6ef;
  color: #bc347a
}

.stats>div:nth-child(4) .stat-icon {
  background: #e6f3ef;
  color: #217a66
}

.section-nav a {
  font-weight: 500
}

.section-nav a.active {
  font-weight: 700
}

.card {
  border-color: #e5e7f1;
  box-shadow: 0 4px 18px #20234904
}

.section-icon {
  width: 40px;
  min-width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: #6937c9;
  background: #eee7fc;
  border-radius: 11px
}

.icon {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0
}

.section-icon .icon {
  width: 23px;
  height: 23px
}

#screenshots .section-icon {
  color: #3566be;
  background: #e9efff
}

#collection .section-icon {
  color: #bd387d;
  background: #fbe8f2
}

#features .section-icon {
  color: #9d640f;
  background: #fff1d7
}

#faq .section-icon {
  color: #3466bf;
  background: #e9efff
}

#reviews .section-icon {
  color: #ac6c0c;
  background: #fff1d7
}

#more-resources .section-icon {
  color: #7741bd;
  background: #f2e9fc
}

.section-kicker {
  color: #664a9a;
  background: #f1ebfc
}

.small-link {
  color: #6234bd;
  font-weight: 600;
  padding: 6px 12px;
  background: #f3edff;
  border: 1px solid #e7dcfc;
  border-radius: 6px
}

.small-link:hover {
  background: #eae0fb
}

.section-heading h2 {
  line-height: 1.4
}

aside {
  position: static;
  display: flex;
  flex-direction: column;
  gap: 24px
}

aside .card {
  width: 100%
}

aside #app-information {
  border-top: 3px solid #7440d7
}

aside #features {
  border-top: 3px solid #d19a35
}

aside .data-note {
  background: #f4f1fb;
  color: #665881
}

aside .details-link {
  border-bottom: 1px solid #d6c6ef;
  padding-bottom: 2px
}

aside .section-heading {
  gap: 11px
}

aside .section-heading h2 {
  font-size: 22px
}

aside .feature-row {
  gap: 12px;
  padding: 19px 0;
  align-items: flex-start
}

aside .feature-row h3 {
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 7px
}

aside .feature-row p {
  font-size: 15px;
  line-height: 1.75;
  margin: 0
}

aside .feature-number {
  width: 34px;
  min-width: 34px;
  height: 34px;
  color: #6a3cbd;
  background: #f0eafb;
  border-radius: 9px
}

aside .feature-number .icon {
  width: 20px;
  height: 20px
}

aside .feature-row:nth-child(2) .feature-number {
  color: #3568bf;
  background: #e9effc
}

aside .feature-row:nth-child(3) .feature-number {
  color: #b53677;
  background: #fbe8f1
}

aside .feature-row:nth-child(4) .feature-number {
  color: #2a8067;
  background: #e7f4ef
}

aside .feature-row:nth-child(5) .feature-number {
  color: #9b6b1a;
  background: #fbf1de
}

.screenshot-placeholder {
  background: linear-gradient(145deg, #f8f6ff, #eef0fb);
  border-color: #c8bedf;
  color: #74618f
}

.screenshot-placeholder .screen-outline {
  border-color: #a08bc2;
  background: #ffffffa6
}

.screen-outline:after {
  background: #a08bc2
}

.game-category {
  border: 1px solid transparent;
  transition: transform .2s, box-shadow .2s
}

.game-category:hover {
  box-shadow: 0 9px 18px #3c286212
}

.slots {
  background: linear-gradient(135deg, #fce8f1, #f8eefb);
  border-color: #f3dce9
}

.fishing {
  background: linear-gradient(135deg, #e5f3ff, #e9efff);
  border-color: #d8e7fb
}

.tables {
  background: linear-gradient(135deg, #f0e9ff, #edeefe);
  border-color: #e3d9fa
}

.arcade {
  background: linear-gradient(135deg, #fff1db, #fff6e8);
  border-color: #f6e5c8
}

.game-symbol {
  transform: none;
  letter-spacing: normal;
  text-shadow: none;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center
}

.game-symbol .icon {
  width: 52px;
  height: 52px;
  stroke-width: 1.4
}

.slots .game-symbol {
  color: #bd4080
}

.fishing .game-symbol {
  color: #3574bc
}

.tables .game-symbol {
  color: #794cc0
}

.arcade .game-symbol {
  color: #b87b24
}

.resource-icon {
  background: #eee7fd;
  color: #6d3cc8
}

.resource:nth-child(2) .resource-icon {
  background: #e6edff;
  color: #3d67c8
}

.resource:nth-child(3) .resource-icon {
  background: #fae7f0;
  color: #bc397c
}

.resource:nth-child(4) .resource-icon {
  background: #fff0d5;
  color: #a66e13
}

.resource:nth-child(5) .resource-icon {
  background: #e6f3ef;
  color: #267b63
}

.resource:hover h3 {
  color: #6234bd
}

.rating-summary {
  background: #f5f2fc
}

.avatar {
  background: #eee7fb;
  color: #6337b6
}

.review-tag {
  background: #f2eef9;
  color: #6c538d
}

.outline-button {
  border-color: #d2c3ee;
  color: #6034b9;
  font-weight: 600
}

.outline-button:hover {
  background: #f2ecfc
}

.review-controls select {
  border-color: #ddd5eb
}

.footer-top {
  border-top: 3px solid #ede5fb
}

.footer-bottom a:hover {
  color: #6233bf
}

a:focus-visible,
button:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline-color: #7848d3
}

@media(max-width:1100px) {
  .stats>div {
    gap: 10px;
    padding: 0 10px
  }

  .stat-icon {
    width: 38px;
    height: 38px
  }

  .stat-icon .icon {
    width: 22px;
    height: 22px
  }

  aside .card {
    padding: 22px
  }

  aside .section-heading h2 {
    font-size: 21px
  }

  .hero-actions {
    flex-wrap: wrap;
    gap: 14px
  }
}

@media(max-width:800px) {
  .header-inner {
    flex-wrap: wrap
  }

  #main-nav {
    order: 2;
    width: 100%;
    flex: auto;
    justify-content: flex-start;
    overflow: auto
  }

  .header-help {
    margin-left: auto
  }

  .hero-actions .text-link {
    padding: 11px 16px
  }

  aside {
    display: flex;
    gap: 20px
  }

  aside .card {
    padding: 23px
  }

  .stats>div {
    gap: 11px;
    padding: 0 10px
  }

  .stats strong {
    font-size: 15px
  }

  .stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px
  }

  .stats p {
    font-size: 14px
  }

  .section-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px
  }

  .section-icon .icon {
    width: 21px;
    height: 21px
  }

  .section-heading h2 {
    font-size: 22px
  }

  .game-symbol .icon {
    width: 48px;
    height: 48px
  }

  aside .feature-row h3 {
    font-size: 17px
  }

  aside .feature-row p {
    font-size: 16px
  }
}