#rules.info-panel {
  position: fixed;
  inset: 0;
  width: 80.5cqw;
  height: 46.5cqw;
  max-width: calc(100vw - 12px);
  max-height: 92svh;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: .9cqw;
  overflow: hidden;
  background: #000e;
  color: white;
  box-shadow: none;
  transform: translateY(-3.1cqw);
  font-family: Arial, sans-serif;
  font-size: 1.38cqw;
}

#rules.info-panel[open] {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

#rules.info-panel::backdrop { background: transparent; }
#rules.info-panel .info-body {
  min-height: 0;
  padding: .5cqw 2.6cqw 0;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #777 transparent;
}

#rules.info-panel h2 {
  margin: 0;
  color: white;
  font-size: 1.9cqw;
  font-weight: 500;
  line-height: 1.05;
  text-transform: uppercase;
}

#rules.info-panel p {
  margin: .35cqw 0;
  line-height: 1.13;
}

.info-paytable-heading {
  min-height: 4.8cqw;
  text-align: center;
}

#rules.info-panel .info-paytable-heading p {
  margin: 0;
}

.info-table-page:not(:has(.info-paytable-heading)) .info-paytable { margin-top: 3.5cqw; }
.info-paytable {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  column-gap: 1.05cqw;
  font-size: 1.12cqw;
}

.info-paytable-row {
  display: flex;
  align-items: center;
  gap: .72cqw;
  min-height: 2.75cqw;
}

#rules[data-info-page="3"] .info-paytable-row { min-height: 2.53cqw; }
#rules[data-info-page="3"] .info-paytable { margin-top: 3cqw; }
#rules[data-info-page="3"] .info-symbol { width: 2.5cqw; height: 2.5cqw; }
.info-pattern {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: center;
  gap: .52cqw;
  min-width: 9.45cqw;
}

.info-symbol {
  flex: none;
  display: block;
  width: 2.55cqw;
  height: 2.55cqw;
}

.info-symbol-label {
  flex: 0 1 auto;
  min-width: 0;
  padding: 0 .16cqw;
  max-width: 6.35cqw;
  font-size: .86em;
  font-weight: 700;
  line-height: .98;
  text-align: center;
  text-transform: uppercase;
}

.info-symbol-group { white-space: nowrap; }
.info-symbol-long {
  flex: none;
  max-width: none;
  white-space: pre;
  font-size: .7cqw;
}

.info-payout { flex: none; white-space: nowrap; }
#rules.info-panel .info-guide-page {
  display: flex;
  flex-direction: column;
  gap: 2.75cqw;
  padding: 4.2cqw 2.2cqw .6cqw;
  text-align: center;
}

#rules[data-info-page="4"] .info-guide-page {
  padding-top: 1.7cqw;
  gap: 4.3cqw;
}

#rules[data-info-page="5"] .info-guide-page { padding-top: 2.25cqw; }
.info-guide-page h2 + p { margin-top: .6cqw; }
.info-guide-page p:last-child { margin-bottom: 0; }
.info-scatter {
  display: flex;
  align-items: center;
  gap: .8cqw;
  padding: 0 2.5cqw;
  text-align: left;
}

.info-scatter .info-symbol {
  width: 6cqw;
  height: 6cqw;
}

.info-paylines {
  display: grid;
  width: max-content;
  grid-template-columns: repeat(3, auto);
  gap: .4cqw 2.15cqw;
  margin: 1.35cqw auto 0;
}

.info-payline {
  display: flex;
  gap: .5cqw;
  align-items: center;
  color: #bbb;
}

.info-payline-grid {
  display: grid;
  width: 2.12cqw;
  aspect-ratio: 1;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 1px;
}

.info-payline-grid i { background: #545454; }
.info-payline-grid .is-active { background: #eee; }
.info-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1cqw;
  min-height: 5cqw;
  padding: 0 2.8cqw 1.1cqw 3.45cqw;
}

.info-page-number { font-size: 1.15cqw; white-space: nowrap; }
.info-navigation { display: flex; gap: .5cqw; }
#rules.info-panel .info-corner-close, #rules.info-panel .info-navigation button {
  position: relative;
  width: 3.52cqw;
  height: 3.52cqw;
  padding: 0;
  border: 0;
  border-radius: .35cqw;
  background: transparent;
}

#rules.info-panel .info-corner-close {
  position: absolute;
  z-index: 1;
  top: .9cqw;
  right: .75cqw;
  width: 3cqw;
  height: 3cqw;
}

.info-corner-close::before, .info-corner-close::after,
.info-exit::before, .info-exit::after {
  position: absolute;
  inset: 45% 0;
  border-radius: 1em;
  background: linear-gradient(#90c800, #69af00);
  content: '';
  transform: rotate(45deg);
}

.info-corner-close::after, .info-exit::after { transform: rotate(-45deg); }
.info-corner-close::before, .info-corner-close::after {
  inset: 48% 0;
  background: #d7d7d7;
}

.info-exit::before, .info-exit::after { inset: 36% 0; }
.info-prev::before, .info-next::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(#96cd00, #61a700);
  clip-path: polygon(8% 47%, 78% 4%, 88% 6%, 90% 90%, 82% 96%, 8% 57%);
  content: '';
}

.info-next::before { transform: rotate(180deg); }
#rules.info-panel :is(.info-corner-close, .info-navigation button):hover { filter: brightness(1.18); }

@media (max-width: 620px) {
  #rules.info-panel {
    width: 94vw;
    height: 86svh;
    max-height: 88svh;
    border-radius: 10px;
    transform: none;
    font-size: 14px;
  }

  #rules.info-panel .info-body { padding: 16px 12px 4px; }
  #rules.info-panel h2 { font-size: 18px; }
  #rules.info-panel p { margin: 5px 0; line-height: 1.28; }
  .info-paytable-heading { margin: 0 25px 10px; }
  .info-table-page:not(:has(.info-paytable-heading)) .info-paytable { margin-top: 25px; }
  #rules[data-info-page="3"] .info-paytable { margin-top: 25px; }
  .info-paytable { grid-template-columns: minmax(0, 1fr); font-size: 12px; }
  .info-paytable-row, #rules[data-info-page="3"] .info-paytable-row { min-height: 30px; gap: 12px; }
  .info-pattern { justify-content: flex-start; gap: 5px; min-width: 105px; }
  .info-symbol-label { max-width: 68px; padding: 0 2px; }
  .info-symbol-long { max-width: none; font-size: 8px; }
  .info-symbol, #rules[data-info-page="3"] .info-symbol { width: 25px; height: 25px; }
  #rules.info-panel .info-guide-page { padding: 32px 15px 10px; gap: 20px; }
  .info-scatter { gap: 10px; padding: 0; }
  .info-scatter .info-symbol { width: 48px; height: 48px; }
  .info-paylines { gap: 6px 16px; margin-top: 12px; }
  .info-payline { gap: 5px; }
  .info-payline-grid { width: 22px; }
  .info-footer { min-height: 54px; padding: 4px 14px 7px; }
  .info-page-number { font-size: 12px; }
  .info-navigation { gap: 8px; }
  #rules.info-panel .info-corner-close, #rules.info-panel .info-navigation button {
    width: 36px;
    height: 36px;
  }

  #rules.info-panel .info-corner-close { top: 7px; right: 7px; }
  .info-corner-close::before, .info-corner-close::after { inset: 48% 6px; }
}