:root {
  color-scheme: dark;
  --bg: #061018;
  --bg2: #0b1620;
  --surface: rgba(12, 28, 40, 0.84);
  --surface2: rgba(15, 34, 48, 0.72);
  --line: rgba(165, 189, 206, 0.24);
  --primary: #1682ff;
  --primary2: #0c62f0;
  --accent: #9a45e7;
  --orange: #ff7a18;
  --green: #56c969;
  --red: #ff373d;
  --text: #f8fbff;
  --muted: #c7d2df;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-width: 320px; margin: 0; background: #02070c; color: var(--text); }
body { overflow-x: hidden; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
button { border: 0; color: inherit; cursor: pointer; font: inherit; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #36a2ff; outline-offset: 3px; }

.phone {
  position: relative;
  width: min(100%, 430px);
  min-height: 100vh;
  margin-inline: auto;
  padding-bottom: 12px;
  overflow: hidden;
  background:
    radial-gradient(circle at 17% 26%, rgba(22, 130, 255, 0.22), transparent 10rem),
    radial-gradient(circle at 79% 2%, rgba(255, 122, 24, 0.12), transparent 12rem),
    linear-gradient(180deg, #061018 0%, #071520 48%, #051019 100%);
  box-shadow: 0 0 90px rgba(0, 0, 0, 0.76);
}

.phone::before {
  position: absolute;
  inset: 86px 0 auto;
  height: 340px;
  pointer-events: none;
  background:
    radial-gradient(circle at 13px 12px, rgba(38, 78, 107, .34) 0 8px, transparent 9px) 0 0 / 30px 30px,
    linear-gradient(180deg, rgba(255,255,255,.025), transparent);
  mask-image: linear-gradient(90deg, #000, transparent 45%);
  content: "";
}

.topbar {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 100px 1fr 42px;
  align-items: center;
  height: 46px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(218, 237, 255, 0.22);
  background: linear-gradient(180deg, rgba(5, 14, 22, 0.96), rgba(6, 16, 24, 0.9));
}

.logo {
  font-size: 1.08rem;
  font-weight: 1000;
  letter-spacing: -0.02em;
}

.guide-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 850;
  white-space: nowrap;
}

.star {
  width: 14px;
  height: 14px;
  background: #ffca22;
  clip-path: polygon(50% 0, 61% 34%, 98% 34%, 68% 55%, 79% 91%, 50% 69%, 21% 91%, 32% 55%, 2% 34%, 39% 34%);
  filter: drop-shadow(0 0 8px rgba(255, 202, 34, .42));
}

.menu-button {
  display: grid;
  place-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  margin-left: auto;
  background: transparent;
}

.menu-button i {
  display: block;
  width: 24px;
  height: 3px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 10px rgba(255,255,255,.25);
}

.menu-popover {
  position: absolute;
  right: 14px;
  top: 43px;
  z-index: 20;
  display: grid;
  width: 150px;
  overflow: hidden;
  border: 1px solid rgba(48, 146, 255, 0.55);
  border-radius: 13px;
  background: rgba(7, 19, 28, 0.98);
  box-shadow: 0 20px 45px rgba(0,0,0,.5);
}
.menu-popover[hidden] { display: none; }
.menu-popover button {
  padding: 11px 13px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: transparent;
  text-align: left;
}
.menu-popover button:last-child { border-bottom: 0; }

.theme-strip {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr repeat(4, .95fr);
  align-items: center;
  height: 40px;
  overflow: hidden;
  border: 1px solid rgba(169, 200, 221, 0.36);
  border-left-color: rgba(83, 153, 214, .6);
  border-right-color: rgba(83, 153, 214, .4);
  border-radius: 6px;
  background: rgba(9, 23, 34, 0.86);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 24px rgba(0,0,0,.24);
}

.theme-chip {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 100%;
  gap: 4px;
  padding: 0 5px;
  border-left: 1px solid rgba(205, 223, 239, 0.13);
}
.theme-chip.first { border-left: 0; }
.theme-chip strong {
  min-width: 0;
  font-size: 0.49rem;
  font-weight: 850;
  line-height: 1.1;
}
.theme-chip em {
  display: block;
  color: #f7fbff;
  font-size: 0.33rem;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}
.wheel {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: conic-gradient(#ff493d, #ffe04d, #31c464, #1e8bff, #ff493d);
  border: 2px solid rgba(255,255,255,.9);
}
.dot { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; }
.primary { background: var(--primary); }
.accent { background: var(--accent); }
.button { background: var(--orange); }
.surface { background: #263645; }

.hero {
  position: relative;
  z-index: 1;
  min-height: 214px;
  padding: 29px 24px 26px 56px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(6, 16, 24, 0.98) 0 42%, rgba(8, 20, 29, 0.83) 68%, rgba(9, 27, 52, 0.92) 100%),
    radial-gradient(circle at 84% 34%, rgba(25, 111, 226, 0.34), transparent 9rem);
}

.hero::after {
  position: absolute;
  right: -120px;
  top: -68px;
  width: 318px;
  height: 315px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(13, 84, 173, .74), rgba(9, 29, 58, .38) 42%, transparent 70%);
  content: "";
}

.hero-copy { position: relative; z-index: 2; }
.hero h1 {
  margin: 0;
  font-size: 1.96rem;
  font-weight: 1000;
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-shadow: 0 3px 13px rgba(0,0,0,.44);
}
.hero h1 em { color: var(--primary); font-style: normal; }
.hero h1 span { color: #fff; }
.hero p {
  margin: 15px 0 18px;
  max-width: 264px;
  color: #d7e1ec;
  font-size: 0.74rem;
  font-weight: 650;
  line-height: 1.55;
}
.hero p b { color: var(--primary); font-weight: 900; }
.hero-sun {
  position: absolute;
  z-index: 1;
  right: -2px;
  top: 32px;
  width: 134px;
  height: 134px;
  object-fit: cover;
  border-radius: 0 0 0 44px;
  opacity: .86;
  filter: drop-shadow(-10px 12px 22px rgba(0,0,0,.36));
}

.hero-actions {
  display: grid;
  grid-template-columns: 1.25fr .92fr;
  gap: 13px;
  width: min(100%, 296px);
}
.hero-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 38px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 950;
  white-space: nowrap;
}
.primary-cta {
  background: linear-gradient(180deg, #2797ff, #0c64ee);
  box-shadow: 0 0 22px rgba(22,130,255,.28), inset 0 1px 0 rgba(255,255,255,.26);
}
.secondary-cta {
  border: 1px solid rgba(176, 202, 222, .32);
  background: linear-gradient(180deg, rgba(44, 66, 82, 0.88), rgba(26, 41, 54, 0.88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
}

.quick-cards {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px 12px 10px;
}

.quick-card {
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-rows: auto auto;
  column-gap: 8px;
  min-height: 63px;
  padding: 12px;
  border: 1px solid rgba(174, 199, 217, .14);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(16, 35, 50, .92), rgba(11, 28, 41, .86));
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 12px 25px rgba(0,0,0,.18);
}
.quick-card strong {
  align-self: end;
  font-size: 0.72rem;
  font-weight: 950;
}
.quick-card small {
  align-self: start;
  color: #d4dee8;
  font-size: 0.59rem;
  font-weight: 560;
  line-height: 1.2;
}

.icon-square {
  display: grid;
  grid-row: 1 / span 2;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
}
.blue { background: linear-gradient(145deg, #279aff, #0c60ed); }
.purple { background: linear-gradient(145deg, #a64df0, #6931ca); }
.green { background: linear-gradient(145deg, #52d46d, #249846); }

.category-panel,
.checklist-panel,
.faq-panel,
.disclaimer {
  margin: 0 13px;
  border: 1px solid rgba(174, 199, 217, .14);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(15, 34, 48, .84), rgba(8, 25, 36, .84));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 14px 32px rgba(0,0,0,.18);
}

.category-panel { padding: 14px 11px 11px; }
.category-panel h2,
.checklist-panel h2,
.faq-panel h2 {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 950;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 13px;
}
.category {
  min-width: 0;
  padding: 3px 2px 4px;
  background: transparent;
  text-align: center;
}
.category > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 0 auto 10px;
}
.category strong {
  display: block;
  min-height: 26px;
  font-size: 0.66rem;
  font-weight: 950;
  line-height: 1.12;
}
.category small {
  display: block;
  margin-top: 7px;
  color: #c7d2df;
  font-size: 0.58rem;
  font-weight: 560;
  line-height: 1.35;
}

.slot-icon {
  border: 2px solid var(--accent);
  border-radius: 6px;
  position: relative;
  color: var(--accent);
}
.slot-icon::before {
  content: "777";
  font-size: 1rem;
  font-weight: 1000;
  letter-spacing: 1px;
}
.slot-icon::after {
  position: absolute;
  right: -8px;
  top: 12px;
  width: 7px;
  height: 20px;
  border: 2px solid currentColor;
  border-left: 0;
  border-radius: 0 9px 9px 0;
  content: "";
}
.ball-icon {
  position: relative;
  border: 2px solid var(--orange);
  border-radius: 50%;
}
.ball-icon::before,
.ball-icon::after {
  position: absolute;
  inset: 7px;
  border: 2px solid var(--orange);
  border-left: 0;
  border-right: 0;
  border-radius: 50%;
  transform: rotate(-35deg);
  content: "";
}
.ball-icon::after {
  inset: 0 19px;
  border: 0;
  border-left: 2px solid var(--orange);
  transform: rotate(18deg);
}
.lotto-icon {
  position: relative;
}
.lotto-icon i {
  position: absolute;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 2px solid #63d760;
  border-radius: 50%;
  color: #63d760;
  font-size: .9rem;
  font-style: normal;
  font-weight: 950;
}
.lotto-icon i:first-child { left: 2px; top: 2px; }
.lotto-icon i:last-child { right: 2px; bottom: 2px; }
.rooster-line {
  position: relative;
  color: var(--red);
}
.rooster-line::before {
  content: "♞";
  color: var(--red);
  font-size: 3rem;
  line-height: .8;
  transform: rotateY(180deg) translateY(-2px);
}

.split-guides {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 8px 12px;
}
.guide-card {
  position: relative;
  min-height: 112px;
  overflow: hidden;
  padding: 14px 88px 12px 12px;
  border: 1px solid rgba(174, 199, 217, .15);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(8, 51, 68, .92), rgba(10, 28, 38, .84));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 30px rgba(0,0,0,.2);
}
.sabong-card { background: linear-gradient(135deg, rgba(53, 25, 23, .94), rgba(14, 22, 28, .9)); }
.guide-card h3 {
  margin: 0 0 10px;
  font-size: 0.69rem;
  font-weight: 950;
  line-height: 1.1;
}
.guide-card h3 span {
  display: inline-flex;
  align-items: center;
  height: 16px;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 3px;
  background: #31c954;
  font-size: .44rem;
  font-weight: 950;
}
.sabong-card h3 span { background: #d93337; }
.guide-card p {
  margin: 0;
  color: #dce5ed;
  font-size: .58rem;
  font-weight: 570;
  line-height: 1.55;
}
.guide-card img {
  position: absolute;
  right: 2px;
  bottom: 5px;
  width: 92px;
  height: 100px;
  object-fit: contain;
  object-position: right bottom;
  opacity: .92;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 28%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 28%, #000 100%);
}
.sabong-card img {
  right: -3px;
  bottom: 0;
  width: 100px;
  height: 108px;
  object-position: right bottom;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 0;
  background: transparent;
  color: #2695ff;
  font-size: .62rem;
  font-weight: 950;
}

.checklist-panel {
  margin-top: 0;
  padding: 15px 12px 13px;
  border-color: rgba(38, 149, 255, .55);
  box-shadow: inset 0 0 30px rgba(19, 112, 192, .08), 0 0 18px rgba(22,130,255,.08);
}
.check-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 12px;
  margin-top: 13px;
}
.check-grid p {
  display: flex;
  align-items: center;
  min-height: 26px;
  margin: 0;
  color: #d9e4ee;
  font-size: .61rem;
  font-weight: 640;
}
.check-grid span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 13px;
  height: 13px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--green);
}
.check-grid span::before {
  width: 6px;
  height: 3px;
  border-left: 2px solid #0b3314;
  border-bottom: 2px solid #0b3314;
  transform: rotate(-45deg);
  content: "";
}

.faq-panel {
  margin-top: 9px;
  padding: 12px;
}
.faq-panel details {
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid rgba(174, 199, 217, .12);
  border-radius: 7px;
  background: rgba(14, 31, 45, .7);
}
.faq-panel details + details { margin-top: 4px; }
.faq-panel summary {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px 0 8px;
  list-style: none;
  font-size: .62rem;
  font-weight: 620;
  cursor: pointer;
}
.faq-panel summary::-webkit-details-marker { display: none; }
.faq-panel summary span {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  border-radius: 50%;
  background: linear-gradient(180deg, #2f9cff, #1064e8);
  font-size: .62rem;
  font-weight: 1000;
}
.faq-panel p {
  margin: 0;
  padding: 0 14px 10px 36px;
  color: var(--muted);
  font-size: .56rem;
  line-height: 1.45;
}

.disclaimer {
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  min-height: 54px;
  margin-top: 9px;
  padding: 10px 16px;
}
.disclaimer p {
  margin: 0;
  color: #c9d4df;
  font-size: .58rem;
  font-weight: 560;
  line-height: 1.4;
}
.site-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 45px;
  padding: 0 13px;
  color: #c7d1dc;
  font-size: .58rem;
}
.site-footer p { margin: 0 auto 0 0; }
.site-footer b { color: rgba(255,255,255,.36); }

.bottom-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  height: 64px;
  margin: 0 12px 0;
  overflow: hidden;
  border: 1px solid rgba(42, 147, 255, .44);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(11, 25, 36, .98), rgba(6, 15, 23, .98));
  box-shadow: 0 -10px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
}
.nav-item {
  display: grid;
  place-items: center;
  gap: 3px;
  background: transparent;
  color: #c8d3de;
  font-size: .56rem;
  font-weight: 750;
}
.nav-item.active {
  color: #fff;
  background: linear-gradient(180deg, rgba(18, 125, 255, .36), rgba(17, 96, 203, .18));
}
.nav-item > span {
  position: relative;
  display: block;
  width: 22px;
  height: 22px;
  color: currentColor;
}
.nav-home::before {
  position: absolute;
  left: 2px;
  top: 8px;
  width: 18px;
  height: 12px;
  border-radius: 2px 2px 4px 4px;
  background: currentColor;
  content: "";
}
.nav-home::after {
  position: absolute;
  left: 1px;
  top: 2px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid currentColor;
  content: "";
}
.nav-guide { border: 3px solid currentColor; border-radius: 5px; }
.nav-guide::after {
  position: absolute;
  left: 4px;
  top: 5px;
  width: 10px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 5px 0 currentColor;
  content: "";
}
.nav-promo { border: 3px solid currentColor; border-top-width: 7px; border-radius: 4px; }
.nav-promo::before {
  position: absolute;
  left: 9px;
  top: -8px;
  width: 3px;
  height: 27px;
  background: currentColor;
  content: "";
}
.nav-support {
  border: 4px solid currentColor;
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
}
.nav-support::after {
  position: absolute;
  left: -3px;
  bottom: -2px;
  width: 6px;
  height: 11px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 21px 0 0 currentColor;
  content: "";
}

.phone-icon {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 24px;
  border: 2px solid currentColor;
  border-radius: 4px;
  color: #fff;
}
.phone-icon::after {
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 4px;
  height: 2px;
  border-radius: 99px;
  background: currentColor;
  transform: translateX(-50%);
  content: "";
}
.phone-icon.small { width: 12px; height: 22px; }
.gift-icon,
.wallet-icon,
.lock-icon,
.shield-line { position: relative; display: inline-block; color: #fff; }
.gift-icon { width: 23px; height: 20px; border: 2px solid currentColor; border-radius: 3px; }
.gift-icon::before { position: absolute; left: 9px; top: -5px; width: 2px; height: 25px; background: currentColor; content: ""; }
.gift-icon::after { position: absolute; left: -3px; top: 5px; width: 29px; height: 2px; background: currentColor; content: ""; }
.wallet-icon { width: 24px; height: 17px; border: 2px solid currentColor; border-radius: 4px; }
.wallet-icon::after { position: absolute; right: -3px; top: 4px; width: 11px; height: 8px; border: 2px solid currentColor; border-radius: 4px; background: rgba(255,255,255,.08); content: ""; }
.lock-icon { width: 16px; height: 15px; }
.lock-icon::before { position: absolute; inset: 6px 1px 0; border-radius: 2px; background: currentColor; content: ""; }
.lock-icon::after { position: absolute; left: 4px; top: 0; width: 8px; height: 8px; border: 2px solid currentColor; border-bottom: 0; border-radius: 8px 8px 0 0; content: ""; }
.shield-line { width: 25px; height: 29px; border: 2px solid rgba(163,190,210,.7); border-radius: 12px 12px 14px 14px; }
.shield-line::after { position: absolute; left: 7px; top: 7px; width: 9px; height: 5px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); content: ""; }

.text-link i,
.faq-panel summary i {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}
.faq-panel summary i {
  margin-left: auto;
  transform: rotate(45deg);
}
.faq-panel details[open] summary i { transform: rotate(225deg); }

@media (max-width: 390px) {
  .topbar { grid-template-columns: 91px 1fr 36px; padding-inline: 13px; }
  .logo { font-size: 1rem; }
  .guide-title { font-size: .76rem; }
  .theme-chip { padding-inline: 6px; gap: 4px; }
  .theme-chip strong { font-size: .5rem; }
  .hero { padding-left: 37px; }
  .hero h1 { font-size: 1.72rem; }
  .hero-sun { right: -21px; opacity: .74; }
  .quick-card { padding: 10px 8px; column-gap: 7px; }
  .category-grid { gap: 4px; }
  .guide-card { padding-right: 68px; }
  .site-footer { font-size: .52rem; gap: 8px; }
}

.register-float {
  position: fixed;
  right: max(14px, calc((100vw - 430px) / 2 + 14px));
  bottom: 76px;
  z-index: 95;
  min-width: 104px;
  min-height: 38px;
  padding: 0 18px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  background: linear-gradient(135deg, #ffdf69, #ff9f1c 55%, #c76d0d);
  color: #120b04;
  font-size: .76rem;
  font-weight: 1000;
  letter-spacing: 0;
  box-shadow: 0 10px 24px rgba(0,0,0,.42), 0 0 22px rgba(255,190,60,.24), inset 0 1px 0 rgba(255,255,255,.45);
}
.register-float:active { transform: translateY(1px); }