.arcade-hero .slots-hero-art {
  background-image: url('assets/arcade-hero.webp');
  background-position: right center
}

.arcade-hero:after {
  background: linear-gradient(90deg, #050b20f5, #070c25e8 28%, #080c2860 62%, transparent)
}

.arcade-hero .slots-hero-copy {
  max-width: 880px
}

.arcade-hero h1 {
  line-height: 1.14
}

.arcade-hero h1 span {
  padding-bottom: .12em
}

.arcade-pair,
.variants-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 16px;
  align-items: stretch
}

.arcade-pair {
  margin-bottom: 14px
}

.arcade-pair>.panel {
  min-width: 0;
  height: 100%
}

.arcade-content .section-heading h2 {
  font-size: var(--heading-size);
  line-height: 1.25
}

.arcade-content p,
.arcade-content table,
.arcade-content h3,
.arcade-content h4 {
  font-size: 14px;
  line-height: 1.65
}

.arcade-content .library-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr))
}

.arcade-content .library-tile span {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center
}

.arcade-content .screen-labels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px
}

.arcade-content .screen-labels>article,
.arcade-content .screen-labels>div {
  min-width: 0;
  border: 1px solid #35415f;
  border-radius: 10px;
  padding: 16px;
  background: linear-gradient(140deg, #19233d, #091b2e)
}

.arcade-content .screen-labels h3 {
  margin: 0 0 8px;
  color: #edb2ff
}

.arcade-content .screen-labels p {
  margin: 0;
  color: #d5dfef
}

.arcade-content .comparison-panel>p,
.variants-panel>p {
  margin: 0 0 14px;
  color: #c9d7e9
}

.arcade-content th {
  font-weight: 600
}

.arcade-content table {
  min-width: 620px
}

.variants-grid table {
  min-width: 380px
}

.variants-grid>div {
  min-width: 0;
  padding: 15px;
  border: 1px solid #354464;
  border-radius: 12px;
  background: #0b1930
}

.variants-grid>div>h3 {
  font-size: 18px;
  margin-bottom: 12px
}

.variant-card {
  padding: 13px;
  border: 1px solid #873654;
  border-radius: 9px;
  background: #422039;
  margin-bottom: 10px
}

.variant-card:nth-of-type(2) {
  background: #102c4d;
  border-color: #235d97
}

.variant-card:nth-of-type(3) {
  background: #113936;
  border-color: #277664
}

.variant-card h4 {
  margin: 0 0 6px
}

.variant-card p {
  margin: 0
}

.term-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px
}

.term-grid>article {
  border: 1px solid #454273;
  border-radius: 11px;
  padding: 16px;
  background: linear-gradient(140deg, #212044, #0a1c32)
}

.term-grid .ui-icon {
  width: 45px;
  height: 45px;
  margin-bottom: 10px
}

.term-grid h3 {
  margin: 0 0 7px
}

.term-grid p {
  margin: 0;
  color: #d2ddef
}

.odds-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 470px
}

.odds-art {
  position: absolute;
  z-index: -1;
  inset: auto 15px 12px;
  height: 180px;
  background: linear-gradient(0deg, #0c142100, #0c142110), url('assets/odds-explanation.webp') center bottom/contain no-repeat;
  border-radius: 12px;
  opacity: .5;
  mask-image: linear-gradient(transparent, #000 30%)
}

.odds-panel:has(details[open]) .odds-art {
  opacity: .1
}

.calculator-panel {
  background: linear-gradient(130deg, #182443, #08162b) !important
}

.calculator-field {
  display: grid;
  grid-template-columns: 1fr 85px;
  gap: 12px;
  padding: 14px;
  background: #182844;
  border: 1px solid #425886;
  border-radius: 10px
}

.calculator-field label {
  align-self: center;
  font-weight: 600
}

.calculator-field input[type=number] {
  width: 100%;
  min-height: 40px;
  background: #08152a;
  color: white;
  border: 1px solid #7f8dcb;
  border-radius: 6px;
  text-align: center;
  font: 700 18px Arial;
  padding: 6px
}

.calculator-field input[type=range] {
  grid-column: 1/-1;
  width: 100%;
  accent-color: #db52f5;
  cursor: pointer
}

.calculator-field input[aria-invalid=true] {
  border-color: #ff789d
}

.ratio-options {
  margin: 15px 0;
  padding: 14px;
  border: 1px solid #465482;
  border-radius: 10px;
  background: #14223e
}

.ratio-options legend {
  padding: 0 6px;
  font-weight: 600
}

.ratio-options label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  cursor: pointer
}

.ratio-options input {
  accent-color: #d34dff;
  flex: none;
  width: 17px;
  height: 17px
}

.ratio-options label span {
  color: #c9d4e8
}

.payout-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}

.payout-results>div {
  text-align: center;
  border: 1px solid #d363f0;
  border-radius: 11px;
  padding: 12px;
  background: linear-gradient(135deg, #54276a, #251b44)
}

.payout-results>div+div {
  border-color: #36d0ef;
  background: linear-gradient(135deg, #125b79, #0a263d)
}

.payout-results output {
  display: block;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere
}

.payout-results span {
  display: block;
  font-size: 14px
}

.calculator-note {
  margin: 14px 0 0;
  color: #cad7e9
}

.arcade-content .slot-faq .faq-grid>details>summary {
  min-height: 76px;
  padding: 12px
}

.arcade-content .section-heading p:empty {
  display: none
}

@media(max-width:1250px) {

  .arcade-pair,
  .variants-grid {
    grid-template-columns: 1fr
  }

  .arcade-content .library-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }

  .term-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .odds-panel {
    min-height: 410px
  }

  .arcade-content .screen-labels {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:680px) {
  .arcade-hero .slots-hero-art {
    background-position: 68% center
  }

  .arcade-content .library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .arcade-content .screen-labels {
    grid-template-columns: 1fr
  }

  .term-grid {
    gap: 10px
  }

  .term-grid>article {
    padding: 13px
  }

  .variants-grid>div {
    padding: 12px
  }

  .arcade-content .slot-faq .faq-grid>details>summary {
    min-height: 88px
  }

  .ratio-options label {
    flex-wrap: wrap;
    gap: 6px
  }

  .ratio-options label span {
    flex-basis: calc(100% - 55px);
    font-size: 14px
  }

  .calculator-field {
    grid-template-columns: 1fr 75px
  }

  .payout-results {
    gap: 10px
  }

  .payout-results>div {
    padding: 10px
  }
}