:root {
  color-scheme: dark;
  --gold: #f3d46b;
  --gold-light: #ffe27e;
  --panel: rgba(7, 7, 6, .93);
  --text: #f7f3e9;
  --muted: #bdb8ad;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #100823; }
body {
  position: relative;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  background: #100823 url("assets/bg-slot.png") center / max(100%, 760px) 100% fixed no-repeat;
  font-family: Montserrat, Arial, sans-serif;
}
body::before {
  position: fixed;
  z-index: 0;
  inset: -12px;
  background: linear-gradient(rgba(12, 5, 32, .18), rgba(12, 5, 32, .38));
  content: "";
  filter: blur(2px);
}
body::after {
  position: fixed;
  z-index: 0;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 10%, rgba(0,0,0,.26) 78%);
  content: "";
  pointer-events: none;
}
.page {
  position: relative;
  z-index: 1;
  width: min(100% - 22px, 480px);
  margin: 0 auto;
  padding: 16px 0 20px;
}
.masthead { display: flex; justify-content: center; margin-bottom: 12px; }
.masthead-pill { width: 100%;
  display: inline-flex;
  min-height: 39px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid rgba(243, 208, 92, .64);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(45, 36, 14, .96), rgba(18, 16, 12, .98));
  box-shadow: 0 0 22px rgba(255, 194, 37, .19), inset 0 1px 0 rgba(255,255,255,.08);
  color: #f8dd73;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}
.star {
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #f2d06b, #b8941f);
  color: #241902;
  font-size: 11px;
}
.panel {
  width: min(100%, 464px);
  margin: 0 auto;
  padding: 24px 19px 18px;
  border: 2px solid #d8b632;
  border-radius: 25px;
  background: radial-gradient(ellipse at 50% 0, rgba(63, 47, 16, .2), transparent 40%), var(--panel);
  box-shadow: 0 0 28px rgba(255, 202, 46, .23), 0 20px 60px rgba(0,0,0,.62), inset 0 0 34px rgba(230, 172, 35, .045);
}
.intro { text-align: center; }
.intro h1 {
  margin: 0;
  color: #f3d46b;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .085em;
  line-height: 1.3;
  text-shadow: 0 0 14px rgba(232, 188, 54, .24);
}
.intro p {
  margin: 9px 0 16px;
  color: #d0ccc5;
  font-size: 13px;
  line-height: 1.5;
}
.brand-ticker {
  height: 30px;
  margin: 0 0 12px;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, .3);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(25,20,12,.96), rgba(60,41,14,.88), rgba(24,19,11,.96));
  color: #f7eaca;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.ticker-track {
  display: flex;
  width: max-content;
  height: 100%;
  align-items: center;
  gap: 9px;
  padding-left: 12px;
  animation: ticker 30s linear infinite;
}
.ticker-track:hover { animation-play-state: paused; }
.ticker-item::after { margin-left: 9px; color: #e4c454; content: "•"; }
@keyframes ticker { to { transform: translateX(-50%); } }
.hero-art {
  margin: 0 0 17px;
  overflow: hidden;
  border: 1px solid rgba(226, 193, 73, .72);
  border-radius: 17px;
  background: #160c0b;
  box-shadow: 0 7px 23px rgba(0,0,0,.45), 0 0 17px rgba(255,179,30,.1);
}
.hero-art img { display: block; width: 100%; height: auto; }
.brand-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.brand-link {
  position: relative;
  display: flex;
  min-height: 80px;
  align-items: center;
  gap: 8px;
  padding: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 225, 150, .46);
  border-radius: 15px;
  color: #fff8e7;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 5px 15px rgba(0,0,0,.27);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.brand-link::after {
  position: absolute;
  top: -65%;
  left: -35%;
  width: 25%;
  height: 230%;
  transform: rotate(24deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  content: "";
  transition: left .5s ease;
}
.brand-link:hover { z-index: 1; transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 9px 22px rgba(0,0,0,.38), 0 0 18px var(--glow, rgba(248,205,73,.14)); }
.brand-link:hover::after { left: 120%; }
.brand-link:focus-visible { outline: 2px solid #fff0af; outline-offset: 3px; }
.brand-link:active { transform: translateY(0) scale(.994); }
.brand-link.featured { min-height: 80px; }
.btn-na777 { --glow: rgba(255,208,59,.3); background: linear-gradient(135deg, rgb(184,148,31), rgb(212,175,55) 48%, rgb(242,208,107)); color: #281b02; }
.btn-hoki { --glow: rgba(245,50,31,.28); background: linear-gradient(135deg, rgb(124,7,7), rgb(240,23,23) 50%, rgb(255,107,44)); }
.btn-w57 { background: linear-gradient(135deg, rgb(5,91,18), rgb(22,183,41) 52%, rgb(117,255,111)); }
.btn-id777 { background: linear-gradient(135deg, rgb(97,16,124), rgb(181,44,255) 48%, rgb(231,107,255)); }
.btn-s61 { background: linear-gradient(135deg, rgb(61,45,18), rgb(140,107,43) 50%, rgb(215,184,95)); }
.btn-g26 { background: linear-gradient(135deg, rgb(52,52,58), rgb(98,84,52) 55%, rgb(155,119,41)); }
.btn-62vip { background: linear-gradient(125deg, rgb(16,27,80), rgb(39,80,162) 60%, rgb(160,117,36)); }
.btn-v89 { background: linear-gradient(125deg, rgb(113,44,26), rgb(191,75,36) 55%, rgb(233,154,54)); }
.btn-v39 { background: linear-gradient(125deg, rgb(55,16,81), rgb(109,39,161) 55%, rgb(171,92,221)); }
.btn-juara { background: linear-gradient(125deg, rgb(110,49,13), rgb(173,91,18) 56%, rgb(215,156,56)); }
.btn-d59 { background: linear-gradient(125deg, rgb(6,49,93), rgb(18,101,164) 58%, rgb(37,158,208)); }
.btn-v21 { background: linear-gradient(125deg, rgb(9,44,87), rgb(20,111,179) 52%, rgb(51,191,223)); }
.btn-higgs777 { background: linear-gradient(125deg, rgb(72,17,91), rgb(135,51,168) 52%, rgb(203,104,233)); }
.btn-ayo999 { background: linear-gradient(125deg, rgb(109,28,16), rgb(191,75,25) 52%, rgb(240,170,53)); }
.btn-mg666 { --glow: rgba(255,214,72,.28); background: linear-gradient(125deg, rgb(20,44,77), rgb(39,91,130) 52%, rgb(197,146,45)); }
.btn-rpvip { --glow: rgba(203,129,255,.3); background: linear-gradient(125deg, rgb(58,15,95), rgb(126,36,168) 52%, rgb(216,91,202)); }
.btn-k68 { --glow: rgba(92,220,201,.28); background: linear-gradient(125deg, rgb(11,67,75), rgb(19,139,133) 52%, rgb(86,205,163)); }
.btn-x17 { --glow: rgba(86,178,255,.3); background: linear-gradient(125deg, rgb(14,40,105), rgb(31,103,198) 52%, rgb(58,200,224)); }
.logo-tile {
  position: relative;
  z-index: 1;
  display: flex;
  width: 88px;
  height: 42px;
  flex: 0 0 88px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 9px;
  background: rgba(2, 3, 6, .58);
  box-shadow: inset 0 1px 6px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.1);
}
.logo-tile img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: auto; object-fit: contain; object-position: center; }
.logo-word { display: inline-flex; max-width: 100%; color: #ffe27e; font-size: 16px; font-style: italic; font-weight: 1000; letter-spacing: -.04em; line-height: 1; white-space: nowrap; text-shadow: 0 1px 0 #77520b, 0 0 8px rgba(255,220,91,.56); }
.logo-word-rpvip { color: #ffceff; font-size: 19px; letter-spacing: -.06em; text-shadow: 0 1px 0 #4d145b, 0 0 8px rgba(255,153,243,.7); }
.logo-word-k68 { color: #b4ffe6; font-size: 22px; text-shadow: 0 1px 0 #125b56, 0 0 8px rgba(104,255,215,.6); }
.logo-word-x17 { color: #d2f5ff; font-size: 22px; text-shadow: 0 1px 0 #17356c, 0 0 8px rgba(122,205,255,.7); }
.brand-info { position: relative; z-index: 1; display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.brand-name { overflow: hidden; font-size: 11px; font-weight: 900; letter-spacing: .015em; text-overflow: ellipsis; white-space: nowrap; }
.brand-caption { color: rgba(255,255,255,.82); font-size: 8.5px; font-weight: 600; letter-spacing: 0; }
.mg666-mg { color: #ffe27e; }
.mg666-666 { color: #fff8e7; }
.btn-na777 .brand-caption { color: rgba(47,31,0,.78); }
.arrow { position: relative; z-index: 1; display: grid; width: 18px; height: 18px; flex: 0 0 18px; place-items: center; border-radius: 50%; background: rgba(0,0,0,.1); font-size: 17px; font-weight: 400; line-height: 1; }
.bonus {
  position: relative;
  grid-column: 1 / -1;
  overflow: hidden;
  border: 2px solid #d8b632;
  border-radius: 17px;
  background: radial-gradient(circle at 92% 4%, rgba(246,191,60,.15), transparent 40%), linear-gradient(135deg, #171208 2%, #34240e 53%, #171208 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 5px 15px rgba(0,0,0,.28), 0 0 15px rgba(243,204,76,.12);
}
.bonus summary { position: relative; display: flex; flex-direction: column; gap: 7px; padding: 10px; cursor: pointer; list-style: none; }
.bonus summary::-webkit-details-marker { display: none; }
.bonus-tag { display: inline-flex; width: max-content; align-items: center; gap: 4px; padding: 3px 9px; border: 1px solid rgba(255,255,255,.32); border-radius: 999px; background: linear-gradient(180deg, #f35b60, #c92e39); box-shadow: 0 2px 5px rgba(0,0,0,.3); color: #fff; font-size: 9px; font-weight: 900; }
.bonus-main { display: flex; align-items: center; gap: 9px; }
.bonus-gift { display: block; width: 41px !important; height: 41px !important; min-width: 41px; max-width: 41px !important; min-height: 41px; max-height: 41px !important; flex: 0 0 41px !important; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); transform-origin: center; animation: gift-flash 1.2s ease-in-out infinite; }
@keyframes gift-flash {
  0%, 100% { opacity: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)) brightness(1); transform: scale(1); }
  45%, 58% { opacity: .62; filter: drop-shadow(0 0 10px rgba(255,225,112,.95)) brightness(1.35); transform: scale(1.08); }
}
.bonus-copy-block { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.bonus strong { color: #ffe183; font-size: 16px; font-weight: 900; line-height: 1.2; }
.bonus-copy { color: #f1e6c8; font-size: 9px; font-weight: 600; line-height: 1.35; }
.bonus-cta { display: flex; min-height: 34px; align-items: center; justify-content: center; gap: 9px; border: 1px solid rgba(255,255,255,.8); border-radius: 10px; background: linear-gradient(180deg, #ffe78c, #f0bd43); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 4px rgba(0,0,0,.28); color: #241905; font-size: 15px; font-weight: 900; text-shadow: 0 1px 0 rgba(255,255,255,.3); }
.bonus-cta-close { display: none; }
.bonus-chevron { display: inline-block; font-size: 22px; line-height: 1; transition: transform .2s ease; }
.bonus[open] .bonus-cta-open { display: none; }
.bonus[open] .bonus-cta-close { display: inline; }
.bonus-details { padding: 12px 13px 14px; border-top: 1px solid rgba(233,194,67,.38); color: #e5d5ab; font-size: 10px; line-height: 1.5; }
.bonus-details h2 { margin: 0; color: #ffe58b; font-size: 16px; font-weight: 900; line-height: 1.25; }
.bonus-details p { margin: 5px 0 10px; color: #f0e5ca; font-size: 10px; line-height: 1.45; }
.bonus-partners { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bonus-partner { display: flex; min-height: 40px; align-items: center; justify-content: center; gap: 4px; padding: 6px 8px; border: 1px solid rgba(237,222,187,.42); border-radius: 12px; background: rgba(27,23,17,.74); color: #f5ead4; font-size: 11px; font-weight: 700; text-align: center; text-decoration: none; }
.bonus-partner:hover { border-color: #f4d56a; background: rgba(65,50,24,.8); }
.bonus-recommended { display: flex; min-height: 40px; align-items: center; justify-content: center; gap: 7px; margin-top: 8px; padding: 6px 9px; border: 1px solid rgba(255,255,255,.7); border-radius: 11px; background: linear-gradient(180deg, #ffe78c, #eeb83c); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 4px rgba(0,0,0,.28); color: #251a06; font-size: 13px; font-weight: 900; text-align: center; text-decoration: none; }
.bonus-recommended:hover { filter: brightness(1.08); }
.disclaimer { margin: 17px 1px 0; color: #c0b9aa; font-size: 10px; line-height: 1.65; text-align: center; }
.disclaimer strong { color: #f1d26d; }
.footer { padding: 14px 8px 0; color: rgba(232,224,208,.67); font-size: 9px; font-weight: 800; letter-spacing: .09em; line-height: 1.5; text-align: center; }
@media (max-width: 520px) {
  .page { width: min(100% - 16px, 480px); padding-top: 10px; }
  .panel { padding: 19px 12px 15px; border-radius: 22px; }
  .masthead-pill { width: 100%; min-height: 36px; font-size: 9px; }
  .intro p { margin: 8px 0 13px; font-size: 12px; }
  .brand-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .brand-link { min-height: 122px; flex-direction: column; justify-content: center; gap: 7px; padding: 8px 6px; border-radius: 13px; text-align: center; }
  .brand-link.featured { min-height: 122px; }
  .logo-tile { width: min(100%, 116px); height: 50px; flex: 0 0 50px; }
  .logo-word { font-size: 22px; }
  .logo-word-rpvip { font-size: 20px; }
  .logo-word-k68, .logo-word-x17 { font-size: 23px; }
  .brand-info { width: 100%; min-width: 0; flex: 0 0 auto; align-items: center; gap: 3px; margin-right: 0; }
  .brand-name { width: 100%; font-size: 12px; line-height: 1.2; text-align: center; white-space: nowrap; }
  .brand-caption { font-size: 9px; line-height: 1.2; }
  .arrow { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; flex-basis: 20px; transform: none; font-size: 18px; }
  .bonus summary { gap: 7px; padding: 9px; }
  .bonus-gift { width: 39px; height: 39px; flex-basis: 39px; }
  .bonus strong { font-size: 14px; }
  .bonus-copy { font-size: 8px; }
  .bonus-cta { min-height: 33px; font-size: 14px; }
  .bonus-details { padding: 10px 9px 11px; }
  .bonus-details h2 { font-size: 14px; }
  .bonus-details p { font-size: 9px; }
  .bonus-partner { min-height: 39px; padding: 5px 4px; font-size: 10px; }
  .bonus-recommended { min-height: 39px; gap: 4px; padding: 6px; font-size: 11px; }
}
@media (max-width: 380px) {
  .logo-tile { width: min(100%, 104px); flex-basis: 104px; }
  .brand-name { font-size: 11px; }
  .brand-caption { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}