@property --rtp-fill {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

.rtp-meta {
  --rtp-accent: #d9a441;
  --rtp-accent-soft: #f2d78e;
  --rtp-surface: #4d2b08;
  --rtp-border: #b98227;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 10px 22px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 32px !important;
  margin: 7px 0 5px !important;
  overflow: visible !important;
  position: relative !important;
  line-height: 1 !important;
}

.rtp-meta[data-context="recent"] {
  grid-template-rows: 9px 21px !important;
  min-height: 30px !important;
  margin: 7px 0 3px !important;
}

.rtp-meta[data-tone="low"] {
  --rtp-accent: #d45f6d;
  --rtp-accent-soft: #ffd3d8;
  --rtp-surface: #50121d;
  --rtp-border: #a84252;
}

.rtp-meta[data-tone="medium"] {
  --rtp-accent: #d9a441;
  --rtp-accent-soft: #ffe8ad;
  --rtp-surface: #4d2b08;
  --rtp-border: #a97823;
}

.rtp-meta[data-tone="high"] {
  --rtp-accent: #42b99b;
  --rtp-accent-soft: #c9fff1;
  --rtp-surface: #0b4038;
  --rtp-border: #2b8e77;
}

.rtp-meta[data-tone="gacor"] {
  --rtp-accent: #c777e6;
  --rtp-accent-soft: #f8e5ff;
  --rtp-surface: #3b124d;
  --rtp-border: #a95fc4;
}

.rtp-meta[data-tone="gacor"] .rtp-label {
  border-color: #d798ed !important;
  border-bottom-color: #351044 !important;
  background: linear-gradient(180deg, #63287b, #351044) !important;
  color: #fff2ff !important;
  box-shadow: inset 0 1px 0 rgba(255, 233, 255, .2), 0 0 0 1px rgba(218, 148, 239, .12) !important;
}

.rtp-meta[data-tone="gacor"] .rtp-label::before {
  content: "🟢" !important;
  margin-right: 3px !important;
  color: #f3d685 !important;
  font-size: 7px !important;
  line-height: 1 !important;
}

.rtp-meta[data-tone="gacor"] .rtp-track {
  border-color: rgba(210, 135, 235, .72) !important;
}

.rtp-meta[data-tone="gacor"] .rtp-track::before {
  background:
    repeating-linear-gradient(90deg, transparent 0 11px, rgba(36, 5, 47, .32) 11px 12px),
    linear-gradient(180deg, rgba(255, 255, 255, .42), transparent 45%),
    linear-gradient(90deg, #71378f, #bd68da 72%, #dda2ef) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 0 5px rgba(190, 102, 219, .28) !important;
}

.rtp-meta[data-tone="gacor"] .rtp-percentage {
  border-color: rgba(205, 132, 229, .82) !important;
  background: linear-gradient(180deg, rgba(72, 24, 91, .96), rgba(36, 6, 45, .99)) !important;
  color: #f9e9ff !important;
  box-shadow: inset 0 1px 0 rgba(255, 235, 255, .1), 0 1px 3px rgba(32, 1, 40, .38) !important;
}

.rtp-label {
  position: absolute !important;
  top: -7px !important;
  right: 0 !important;
  z-index: 2 !important;
  display: inline-flex !important;
  height: 14px !important;
  align-items: center !important;
  padding: 0 7px !important;
  border: 1px solid var(--rtp-border) !important;
  border-bottom-color: var(--rtp-surface) !important;
  border-radius: 4px 4px 0 0 !important;
  background: var(--rtp-surface) !important;
  color: var(--rtp-accent-soft) !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 12px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .55) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 -1px 3px rgba(0, 0, 0, .24) !important;
  pointer-events: none !important;
}

.rtp-track {
  --rtp-fill: 50%;
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 10px !important;
  position: relative !important;
  z-index: 1 !important;
  overflow: hidden !important;
  border: 1px solid rgba(200, 150, 55, .62) !important;
  border-radius: 3px 0 0 0 !important;
  background: linear-gradient(180deg, #26050b, #150206) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .8), 0 1px 2px rgba(34, 0, 5, .48) !important;
  pointer-events: none !important;
}

.rtp-track::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px auto 1px 1px !important;
  width: calc(var(--rtp-fill) - 2px) !important;
  min-width: 3px !important;
  border-radius: 2px !important;
  background:
    repeating-linear-gradient(90deg, transparent 0 11px, rgba(21, 0, 5, .34) 11px 12px),
    linear-gradient(180deg, rgba(255, 255, 255, .38), transparent 45%),
    linear-gradient(90deg, color-mix(in srgb, var(--rtp-accent) 72%, #5d1b12), var(--rtp-accent)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 0 6px color-mix(in srgb, var(--rtp-accent) 45%, transparent) !important;
  transition: width .8s cubic-bezier(.2, .8, .2, 1) !important;
}

.rtp-percentage {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  z-index: 1 !important;
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 22px !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: -1px !important;
  padding: 0 5px !important;
  overflow: hidden !important;
  border: 1px solid rgba(190, 133, 32, .7) !important;
  border-top: 0 !important;
  border-radius: 0 0 4px 4px !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--rtp-surface) 54%, #3b030c), rgba(34, 1, 7, .99)) !important;
  color: var(--rtp-accent-soft) !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  letter-spacing: .15px !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .68) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 1px 2px rgba(34, 0, 5, .3) !important;
  pointer-events: none !important;
}

.rtp-meta[data-context="recent"] .rtp-label {
  height: 14px !important;
  padding: 0 5px !important;
  font-size: 8.5px !important;
}

.rtp-meta[data-context="recent"] .rtp-track {
  height: 9px !important;
}

.rtp-meta[data-context="recent"] .rtp-percentage {
  height: 21px !important;
  font-size: 10px !important;
}

.rtp-filter {
  width: 100% !important;
  margin: 8px 0 11px !important;
}

.rtp-filter-heading {
  display: flex !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  margin: 0 0 5px !important;
}

.rtp-filter-title {
  margin: 0 !important;
  color: rgba(255, 246, 215, .97) !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
}

.rtp-filter-options {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  width: 100% !important;
  min-height: 44px !important;
  overflow: hidden !important;
  border: 1px solid rgba(212, 175, 55, .88) !important;
  border-radius: 5px !important;
  background: linear-gradient(180deg, rgba(73, 3, 14, .98), rgba(39, 1, 8, .98)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 229, 135, .08), 0 2px 5px rgba(42, 0, 7, .3) !important;
}

.rtp-filter-button {
  --filter-swatch: #e9cc73;
  display: inline-flex !important;
  min-width: 0 !important;
  min-height: 43px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 0 4px !important;
  border: 0 !important;
  border-right: 1px solid rgba(212, 175, 55, .28) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(255, 238, 204, .88) !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

.rtp-filter-button:last-child { border-right: 0 !important; }
.rtp-filter-button[data-filter="low"] { --filter-swatch: #d45f6d; }
.rtp-filter-button[data-filter="medium"] { --filter-swatch: #d9a441; }
.rtp-filter-button[data-filter="high"] { --filter-swatch: #42b99b; }
.rtp-filter-button[data-filter="gacor"] { --filter-swatch: #c777e6; }

.rtp-filter-button:not([data-filter="all"])::before {
  content: "" !important;
  width: 6px !important;
  height: 6px !important;
  flex: 0 0 6px !important;
  border-radius: 2px !important;
  background: var(--filter-swatch) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 1px rgba(0, 0, 0, .4) !important;
}

.rtp-filter-button[aria-pressed="true"] {
  background: linear-gradient(180deg, #f2d76f, #bd8e27 58%, #80510d) !important;
  color: #350006 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5) !important;
}

.rtp-filter-button:focus-visible {
  z-index: 1 !important;
  outline: 2px solid #fff0a0 !important;
  outline-offset: -3px !important;
}

.rtp-filter-hidden { display: none !important; }

@media (min-width: 768px) {
  .rtp-meta,
  .rtp-filter { display: none !important; }
}