:root {
  color-scheme: dark;
  --bg: #061032;
  --panel: #0a1b45;
  --panel2: #10265b;
  --line: rgba(94, 126, 255, .34);
  --gold: #ffd04a;
  --gold2: #f3b72d;
  --cyan: #33c9ff;
  --purple: #b56cff;
  --ink: #fff;
  --muted: #d0d7e8;
  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: #000; color: var(--ink); }
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, [role="button"]:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.phone {
  position: relative;
  width: min(100%, 430px);
  min-height: 100vh;
  margin-inline: auto;
  overflow: hidden;
  padding-bottom: 66px;
  background:
    radial-gradient(circle at 82% 12%, rgba(63,92,255,.34), transparent 10rem),
    radial-gradient(circle at 16% 46%, rgba(150,73,255,.18), transparent 12rem),
    linear-gradient(180deg, #040b26 0%, #071947 55%, #061333 100%);
  box-shadow: 0 0 80px rgba(0,0,0,.85);
}

.topbar {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 126px minmax(0,1fr) 38px;
  align-items: center;
  height: 45px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(109,139,255,.34);
  background: rgba(4,9,29,.96);
}
.logo { color: #fff; font-size: 1.22rem; font-weight: 1000; letter-spacing: .02em; }
.topbar strong { color: var(--gold2); text-align: center; font-size: .86rem; font-weight: 900; }
.menu-button { display: grid; width: 34px; height: 34px; place-items: center; margin-left: auto; background: transparent; }
.menu-button i { width: 22px; height: 3px; border-radius: 999px; background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.25); }
.menu-popover {
  position: absolute;
  right: 13px;
  top: 42px;
  z-index: 30;
  display: grid;
  width: 150px;
  overflow: hidden;
  border: 1px solid rgba(255,208,74,.5);
  border-radius: 13px;
  background: rgba(7,18,54,.98);
  box-shadow: 0 16px 34px rgba(0,0,0,.48);
}
.menu-popover[hidden] { display: none; }
.menu-popover button { padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.1); background: transparent; text-align: left; }
.menu-popover button:last-child { border-bottom: 0; }

.hero {
  position: relative;
  height: 202px;
  overflow: hidden;
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(109,139,255,.24);
  background:
    linear-gradient(90deg, rgba(5,14,47,.96) 0%, rgba(6,22,64,.86) 48%, rgba(6,22,64,.12) 100%),
    radial-gradient(circle at 82% 46%, rgba(255,193,52,.26), transparent 10rem);
}
.hero::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, transparent 0 43%, rgba(255,207,74,.18) 43.4%, transparent 45%, transparent 100%);
  content: "";
}
.hero-art {
  position: absolute;
  right: -7px;
  top: 11px;
  width: 166px;
  height: 186px;
  object-fit: cover;
  object-position: center;
  opacity: .98;
  filter: drop-shadow(-18px 20px 26px rgba(0,0,0,.48));
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 100%);
}
.hero-copy { position: relative; z-index: 2; max-width: 318px; }
.hero h1 { margin: 0; font-size: 1.88rem; font-weight: 1000; line-height: 1.15; letter-spacing: 0; text-shadow: 0 4px 18px rgba(0,0,0,.52); }
.hero h1 span { color: #fff; }
.hero h1 br + * { color: var(--gold); }
.hero p { margin: 12px 0 17px; color: #e6e9f2; font-size: .88rem; font-weight: 620; line-height: 1.45; }
.hero-actions {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1.06fr .98fr;
  gap: 12px;
  width: 292px;
}
.hero-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 36px;
  border-radius: 7px;
  font-size: .76rem;
  font-weight: 930;
  white-space: nowrap;
}
.hero-actions .login { color: #081330; background: linear-gradient(180deg, #ffe16b, #e9ad25); box-shadow: 0 0 20px rgba(255,208,74,.25); }
.hero-actions .guide {
  border: 1px solid var(--gold);
  background: linear-gradient(180deg, #102454, #071236);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.22), 0 0 16px rgba(255,208,74,.13);
}
.lock-icon, .doc-icon { position: relative; width: 16px; height: 16px; flex: 0 0 16px; }
.lock-icon::before { position: absolute; left: 2px; top: 7px; width: 12px; height: 9px; border-radius: 2px; background: currentColor; content: ""; }
.lock-icon::after { position: absolute; left: 5px; top: 0; width: 7px; height: 10px; border: 2px solid currentColor; border-bottom: 0; border-radius: 9px 9px 0 0; content: ""; }
.doc-icon { border: 2px solid currentColor; border-radius: 2px; }
.doc-icon::before { position: absolute; right: -2px; top: -2px; border-left: 6px solid transparent; border-bottom: 6px solid currentColor; content: ""; }
.doc-icon::after { position: absolute; left: 3px; top: 6px; width: 7px; height: 2px; background: currentColor; box-shadow: 0 4px 0 currentColor; content: ""; }

.check-steps { padding: 14px 24px 8px; }
h2 { margin: 0; font-size: .98rem; line-height: 1.15; font-weight: 1000; }
.steps-row { display: grid; grid-template-columns: 1fr 22px 1fr 22px 1fr; align-items: center; gap: 9px; margin-top: 13px; }
.step { display: grid; place-items: center; gap: 7px; background: transparent; text-align: center; }
.step-icon {
  position: relative;
  display: block;
  width: 61px;
  height: 49px;
  border: 1px solid rgba(99,124,255,.48);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(27,53,132,.8), rgba(11,30,85,.8));
  color: var(--gold);
}
.step strong { color: var(--gold); font-size: .66rem; line-height: 1.1; }
.step small { color: var(--muted); font-size: .58rem; line-height: 1.25; }
.arrow {
  width: 14px;
  height: 14px;
  border-top: 3px solid rgba(255,255,255,.62);
  border-right: 3px solid rgba(255,255,255,.62);
  transform: rotate(45deg);
}
.search::before { position: absolute; left: 15px; top: 10px; width: 23px; height: 23px; border: 4px solid currentColor; border-radius: 50%; content: ""; }
.search::after { position: absolute; left: 37px; top: 31px; width: 18px; height: 4px; border-radius: 999px; background: currentColor; transform: rotate(45deg); content: ""; }
.calendar::before { position: absolute; inset: 12px 15px 10px; border: 4px solid currentColor; border-radius: 3px; content: ""; }
.calendar::after { position: absolute; left: 20px; right: 20px; top: 22px; height: 4px; background: currentColor; box-shadow: 0 8px 0 currentColor; content: ""; }
.check::before { position: absolute; inset: 12px 16px; border: 4px solid currentColor; border-radius: 50%; content: ""; }
.check::after { position: absolute; left: 26px; top: 22px; width: 12px; height: 21px; border-right: 4px solid currentColor; border-bottom: 4px solid currentColor; transform: rotate(45deg); content: ""; }

.result-card, .verify-card, .quick-strip, .faq {
  margin: 0 24px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(17,36,93,.82), rgba(10,25,69,.78));
}
.result-card {
  display: grid;
  grid-template-columns: 64px minmax(0,1fr) 18px;
  align-items: center;
  gap: 14px;
  min-height: 70px;
  padding: 12px 14px;
  border-color: rgba(181,108,255,.62);
  background: linear-gradient(100deg, rgba(92,30,132,.78), rgba(16,28,80,.82));
}
.ball-2d {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 3px solid #6c3895;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe26c, #f1be35);
  color: #08245a;
  font-size: 1.36rem;
  font-weight: 1000;
}
.result-card h2, .verify-card h2 { font-size: .9rem; }
.result-card p, .verify-card p { margin: 5px 0 0; color: var(--muted); font-size: .7rem; line-height: 1.25; }
.result-card > i, .view-all i {
  width: 12px;
  height: 12px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  transform: rotate(45deg);
}
.verify-card {
  display: grid;
  grid-template-columns: 58px minmax(0,1fr) 74px;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 12px 15px;
}
.pcso-mark {
  position: relative;
  display: block;
  width: 62px;
  height: 62px;
  justify-self: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #102b70 0 25%, transparent 26%),
    conic-gradient(from 18deg, #314cd2 0 28deg, #0a1d59 28deg 58deg, #2745bf 58deg 86deg, #06143f 86deg 116deg, #2c4bd1 116deg 144deg, #071847 144deg 180deg, #1c39a0 180deg 214deg, #081a4c 214deg 250deg, #213db5 250deg 286deg, #06143f 286deg 330deg, #314cd2 330deg 360deg);
  box-shadow: inset -12px -9px 18px rgba(0,0,0,.42), 0 0 18px rgba(65,98,255,.25);
  opacity: .9;
}
.pcso-mark::before {
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 40%, rgba(20,38,105,.2), rgba(4,12,45,.72) 56%, transparent 57%);
  content: "";
}
.pcso-mark::after {
  position: absolute;
  right: -10px;
  bottom: 2px;
  width: 34px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(0,0,0,.32), rgba(0,0,0,0));
  content: "";
}
.shield-star {
  position: relative;
  width: 43px;
  height: 48px;
  color: var(--gold);
  border: 5px solid currentColor;
  border-radius: 9px 9px 22px 22px;
}
.shield-star::after {
  position: absolute;
  left: 8px;
  top: 10px;
  width: 20px;
  height: 20px;
  background: currentColor;
  clip-path: polygon(50% 0,61% 35%,98% 35%,68% 56%,79% 91%,50% 70%,21% 91%,32% 56%,2% 35%,39% 35%);
  content: "";
}

.quick-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  overflow: hidden;
  border-color: rgba(181,108,255,.58);
  background: linear-gradient(100deg, rgba(88,28,124,.76), rgba(18,29,82,.8), rgba(88,28,124,.7));
}
.quick {
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  min-height: 59px;
  gap: 9px;
  border-right: 1px solid rgba(255,255,255,.3);
  background: transparent;
  padding: 8px 8px;
  text-align: left;
}
.quick:last-child { border-right: 0; }
.quick span { grid-row: span 2; }
.quick strong { color: var(--gold); font-size: .72rem; line-height: 1.18; }
.quick small { color: #fff; font-size: .55rem; }
.phone-icon, .wallet-icon, .gift-icon { position: relative; width: 35px; height: 35px; color: var(--gold); }
.phone-icon::before { position: absolute; inset: 3px 9px; border: 4px solid currentColor; border-radius: 5px; transform: rotate(-8deg); content: ""; }
.wallet-icon::before { position: absolute; left: 3px; top: 10px; width: 27px; height: 18px; border: 4px solid currentColor; border-radius: 5px; content: ""; }
.wallet-icon::after { position: absolute; right: 1px; top: 16px; width: 13px; height: 9px; border: 4px solid currentColor; border-radius: 5px; background: #271a65; content: ""; }
.gift-icon::before { position: absolute; left: 5px; right: 5px; bottom: 4px; height: 21px; border: 4px solid currentColor; border-radius: 4px; content: ""; }
.gift-icon::after { position: absolute; left: 16px; top: 3px; width: 4px; height: 31px; background: currentColor; box-shadow: -10px 10px 0 -2px currentColor, 10px 10px 0 -2px currentColor; content: ""; }

.more-guides { padding: 6px 24px 14px; }
.more-guides h2 { margin-bottom: 11px; }
.guide-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  overflow: hidden;
}
.guide-item {
  display: grid;
  place-items: center;
  min-height: 78px;
  border-right: 1px solid rgba(255,255,255,.25);
  background: transparent;
  text-align: center;
}
.guide-item:last-child { border-right: 0; }
.guide-item strong { color: #c77cff; font-size: .72rem; }
.guide-item small { font-size: .7rem; }
.guide-icon { position: relative; display: block; width: 40px; height: 40px; margin-bottom: 3px; color: #ffa65b; }
.guide-icon.casino::before { position: absolute; inset: 4px; border: 8px solid #f2b55b; border-radius: 50%; content: ""; }
.guide-icon.casino::after { position: absolute; inset: 13px; border-radius: 50%; background: #7b3bf5; content: ""; }
.guide-icon.slots { color: var(--purple); }
.guide-icon.slots::before { position: absolute; inset: 5px 6px; border: 4px solid currentColor; border-radius: 5px; content: "777"; display: grid; place-items: center; font-size: .7rem; font-weight: 1000; }
.guide-icon.ball::before { position: absolute; inset: 3px; border: 3px solid currentColor; border-radius: 50%; content: ""; }
.guide-icon.ball::after { position: absolute; inset: 3px; border-left: 3px solid currentColor; border-top: 3px solid currentColor; border-radius: 50%; transform: rotate(-25deg); content: ""; }
.guide-icon.sabong::before { position: absolute; left: 7px; top: 7px; width: 23px; height: 21px; border: 4px solid currentColor; border-top-left-radius: 18px; border-bottom-right-radius: 14px; transform: rotate(-18deg); content: ""; }
.guide-icon.sabong::after { position: absolute; right: 4px; top: 0; width: 15px; height: 21px; border-top: 4px solid currentColor; border-right: 4px solid currentColor; border-radius: 50%; content: ""; }

.faq { padding: 11px 10px 13px; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.view-all { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--gold); font-size: .7rem; font-weight: 900; }
details {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 7px;
  background: rgba(10,27,75,.72);
  margin-bottom: 6px;
}
details:last-child { margin-bottom: 0; }
summary {
  position: relative;
  min-height: 32px;
  padding: 7px 38px 7px 12px;
  list-style: none;
  color: #fff;
  font-size: .74rem;
  line-height: 1.15;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  position: absolute;
  right: 15px;
  top: 9px;
  content: "+";
  font-size: 1.25rem;
  font-weight: 800;
}
details[open] summary::after { content: "-"; top: 5px; }
details p { margin: 0; padding: 0 13px 10px; color: var(--muted); font-size: .62rem; line-height: 1.35; }

.footer {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr) 70px;
  align-items: center;
  gap: 13px;
  padding: 5px 24px 20px;
  color: var(--muted);
}
.info-icon {
  position: relative;
  width: 44px;
  height: 44px;
  border: 3px solid rgba(255,255,255,.7);
  border-radius: 50%;
}
.info-icon::before {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  content: "i";
  color: rgba(255,255,255,.75);
  font-size: 1.45rem;
  font-weight: 1000;
}
.footer p { margin: 0; font-size: .65rem; line-height: 1.28; }
.age-block {
  display: grid;
  justify-items: center;
  gap: 4px;
  color: #fff;
  text-align: center;
}
.age-block strong {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 2px solid rgba(255,255,255,.78);
  border-radius: 50%;
  font-size: .98rem;
  font-weight: 1000;
  line-height: 1;
}
.age-block small {
  display: block;
  color: var(--muted);
  font-size: .56rem;
  line-height: 1.05;
  font-weight: 760;
}
.copy { grid-column: 1 / -1; text-align: center; font-size: .65rem; }

.bottom-nav {
  position: fixed;
  right: max(0px, calc((100vw - 430px) / 2));
  bottom: 0;
  left: max(0px, calc((100vw - 430px) / 2));
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  width: min(100%, 430px);
  height: 62px;
  margin-inline: auto;
  border-top: 1px solid rgba(255,208,74,.38);
  background: linear-gradient(180deg, rgba(10,24,68,.98), rgba(4,10,33,.99));
  box-shadow: 0 -14px 34px rgba(0,0,0,.58), 0 -1px 18px rgba(255,208,74,.16);
}
.nav-item {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  background: transparent;
  color: #c6cee0;
}
.nav-item.active {
  color: var(--gold);
  background: linear-gradient(180deg, rgba(255,208,74,.18), rgba(255,208,74,0));
}
.nav-item span { position: relative; display: block; width: 25px; height: 23px; }
.nav-item small { font-size: .62rem; font-weight: 850; line-height: 1; }
.nav-home::before { position: absolute; inset: 9px 5px 2px; border-radius: 2px; background: currentColor; content: ""; }
.nav-home::after { position: absolute; inset: 1px 2px auto; height: 16px; background: currentColor; clip-path: polygon(50% 0,100% 43%,84% 43%,84% 100%,16% 100%,16% 43%,0 43%); content: ""; }
.nav-lotto::before { position: absolute; inset: 1px; border: 3px solid currentColor; border-radius: 50%; content: "2D"; display: grid; place-items: center; font-size: .48rem; font-weight: 1000; }
.nav-promo::before { position: absolute; left: 3px; right: 3px; bottom: 2px; height: 14px; border: 3px solid currentColor; border-radius: 3px; content: ""; }
.nav-promo::after { position: absolute; left: 10px; top: 1px; width: 6px; height: 21px; background: currentColor; box-shadow: -9px 7px 0 -2px currentColor, 9px 7px 0 -2px currentColor; content: ""; }
.nav-telegram::before { position: absolute; inset: 1px; border-radius: 50%; background: currentColor; content: ""; }
.nav-telegram::after { position: absolute; left: 7px; top: 6px; width: 14px; height: 11px; background: #061032; clip-path: polygon(0 45%,100% 0,73% 100%,46% 64%,24% 82%); content: ""; }

@media (max-width: 390px) {
  .topbar { grid-template-columns: 110px minmax(0,1fr) 36px; padding-inline: 15px; }
  .logo { font-size: 1.05rem; }
  .topbar strong { font-size: .78rem; }
  .hero { height: 195px; padding-left: 16px; }
  .hero h1 { font-size: 1.55rem; }
  .hero p { font-size: .78rem; }
  .hero-art { right: -20px; width: 158px; }
  .hero-actions { width: 264px; gap: 8px; }
  .hero-actions button { font-size: .68rem; }
  .check-steps { padding-inline: 15px; }
  .steps-row { gap: 5px; grid-template-columns: 1fr 16px 1fr 16px 1fr; }
  .step-icon { width: 51px; height: 43px; }
  .step strong { font-size: .58rem; }
  .step small { font-size: .51rem; }
  .result-card, .verify-card, .quick-strip, .faq { margin-inline: 15px; }
  .quick { grid-template-columns: 31px 1fr; gap: 6px; padding-inline: 6px; }
  .quick strong { font-size: .62rem; }
  .quick small { font-size: .49rem; }
  .more-guides { padding-inline: 15px; }
  .footer { padding-inline: 15px; grid-template-columns: 42px minmax(0,1fr) 58px; }
  .footer p { font-size: .58rem; }
  .age-block strong { width: 38px; height: 38px; font-size: .9rem; }
  .age-block small { font-size: .5rem; }
}

.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); }