/* ==========================================================================
   Betway Go prototype — custom styles (layered on top of Tailwind utilities)
   ========================================================================== */

html, body { background: #040605; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
[x-cloak] { display: none; }

/* ---- Page backdrop ------------------------------------------------------- */
.app-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 620px at 88% -8%, rgba(12, 196, 67, .16), transparent 62%),
    radial-gradient(700px 520px at 20% 115%, rgba(12, 196, 67, .07), transparent 60%),
    linear-gradient(180deg, #070a09 0%, #040605 100%);
}
.app-bg::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 65% 25%, #000 15%, transparent 70%);
          mask-image: radial-gradient(ellipse at 65% 25%, #000 15%, transparent 70%);
}

/* ---- Scrollbars ---------------------------------------------------------- */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.thin-scrollbar { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .12) transparent; }
.thin-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.thin-scrollbar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 6px; }
.thin-scrollbar-light { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .15) transparent; }

/* ---- Form controls ------------------------------------------------------- */
.select {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa5a1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
  padding-right: 36px;
}
.select option { background: #0e1211; color: #fff; }

/* ---- Phone device -------------------------------------------------------- */
.phone-fit { --s: 1; width: calc(414px * var(--s)); height: calc(868px * var(--s)); flex-shrink: 0; }
.phone {
  position: relative; width: 414px; height: 868px; padding: 12px; border-radius: 64px;
  transform: scale(var(--s)); transform-origin: top left;
  background: linear-gradient(150deg, #474d4a 0%, #1b1f1d 18%, #0b0d0c 50%, #1b1f1d 82%, #3a403d 100%);
  box-shadow:
    0 0 0 1px #000,
    inset 0 0 0 1.5px rgba(255, 255, 255, .10),
    0 60px 120px -30px rgba(0, 0, 0, .9),
    0 40px 90px -40px rgba(12, 196, 67, .35);
}
.phone::before, .phone::after {
  content: ''; position: absolute; width: 4px; border-radius: 2px;
  background: linear-gradient(90deg, #2a2f2d, #151816);
}
.phone::before { left: -4px; top: 180px; height: 64px; box-shadow: 0 90px 0 #1d2120; }
.phone::after { right: -4px; top: 250px; height: 96px; }
.phone-screen {
  position: relative; width: 390px; height: 844px; border-radius: 52px; overflow: hidden;
  background: #070a09; isolation: isolate; color: #fff;
}
.dynamic-island {
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: 124px; height: 36px; border-radius: 20px; background: #000; z-index: 70;
}
.dynamic-island::after {
  content: ''; position: absolute; right: 14px; top: 12px; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2a3a55 0%, #0b0f18 60%);
}
.home-indicator {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 138px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .9);
  z-index: 70; pointer-events: none;
}

/* Player-app stage: phone on the left, intro + panels on the right (wide screens) */
@media (min-width: 1280px) {
  .main[data-mode="app"] {
    display: grid; grid-template-columns: auto minmax(320px, 380px); grid-template-rows: auto 1fr;
    column-gap: 48px; justify-content: center; align-items: start;
  }
  .main[data-mode="app"] #prototypeMount,
  .main[data-mode="app"] .app-stage { display: contents; }
  .main[data-mode="app"] .hero { grid-column: 2; grid-row: 1; margin-top: 8px; }
  .main[data-mode="app"] .hero h1 { font-size: 32px; line-height: 1.05; }
  .main[data-mode="app"] .phone-fit { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 28px; }
  .main[data-mode="app"] .side-panels { grid-column: 2; grid-row: 2; margin-top: 24px; }
}

/* ---- Surfaces ------------------------------------------------------------ */
.glass {
  background: rgba(12, 16, 14, .55);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
          backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .10);
}
.glass-strong {
  background: rgba(8, 11, 10, .78);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
          backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .10);
}
.card-surface {
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025));
  border: 1px solid rgba(255, 255, 255, .08);
}
.green-glow { box-shadow: 0 12px 34px -12px rgba(12, 196, 67, .75); }
.text-glow { text-shadow: 0 0 32px rgba(47, 224, 103, .55); }

/* Ticket with perforated edge */
.ticket { position: relative; }
.ticket::before, .ticket::after {
  content: ''; position: absolute; top: var(--notch, 62%); width: 22px; height: 22px; border-radius: 50%;
  background: var(--notch-bg, #070a09); transform: translateY(-50%); z-index: 2;
}
.ticket::before { left: -12px; box-shadow: inset -1px 0 0 rgba(255, 255, 255, .1); }
.ticket::after { right: -12px; box-shadow: inset 1px 0 0 rgba(255, 255, 255, .1); }

/* Diagonal brand shapes (splash) */
.brand-slash { position: absolute; background: #0cc443; transform: skewX(-28deg); border-radius: 4px; }

/* ---- AR scanner ---------------------------------------------------------- */
.ar-frame { position: absolute; width: 236px; height: 236px; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.ar-frame i {
  position: absolute; width: 44px; height: 44px; border: 0 solid #3ae56a;
  filter: drop-shadow(0 0 8px rgba(58, 229, 106, .85));
}
.ar-frame i:nth-child(1) { top: 0; left: 0; border-top-width: 4px; border-left-width: 4px; border-top-left-radius: 18px; }
.ar-frame i:nth-child(2) { top: 0; right: 0; border-top-width: 4px; border-right-width: 4px; border-top-right-radius: 18px; }
.ar-frame i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 4px; border-left-width: 4px; border-bottom-left-radius: 18px; }
.ar-frame i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 4px; border-right-width: 4px; border-bottom-right-radius: 18px; }
.ar-frame.locked i { border-color: #7dffa0; animation: bracket-lock .9s ease-out both; }

.ar-plane {
  position: absolute; left: -35%; right: -35%; bottom: -6%; height: 52%;
  background-image: radial-gradient(rgba(140, 255, 175, .75) 1.3px, transparent 1.8px);
  background-size: 24px 24px;
  transform: perspective(420px) rotateX(64deg); transform-origin: bottom center;
  -webkit-mask-image: radial-gradient(ellipse at 50% 35%, #000 8%, transparent 62%);
          mask-image: radial-gradient(ellipse at 50% 35%, #000 8%, transparent 62%);
  opacity: .7; animation: plane-scan 3.2s ease-in-out infinite;
}
.ar-radar {
  position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px;
  border-radius: 50%; border: 1px solid rgba(125, 255, 160, .28);
}
.ar-radar::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(58, 229, 106, .38), rgba(58, 229, 106, 0) 70deg, transparent 360deg);
  animation: spin 3s linear infinite;
}
.ar-radar::after {
  content: ''; position: absolute; inset: 44px; border-radius: 50%; border: 1px dashed rgba(125, 255, 160, .22);
}
.ar-scanline {
  position: absolute; left: 8%; right: 8%; height: 2px; top: 20%;
  background: linear-gradient(90deg, transparent, #3ae56a, transparent);
  box-shadow: 0 0 18px 4px rgba(58, 229, 106, .45);
  animation: scanline 2.8s ease-in-out infinite alternate;
}
.ground-shadow {
  position: absolute; left: 50%; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .65), transparent 70%);
}
.ground-ring {
  border-radius: 50%; border: 2px solid rgba(58, 229, 106, .85);
  box-shadow: 0 0 22px rgba(58, 229, 106, .7), inset 0 0 22px rgba(58, 229, 106, .45);
}
.proximity-track { position: relative; width: 6px; border-radius: 6px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.proximity-track span {
  position: absolute; left: 0; right: 0; bottom: 0; border-radius: 6px;
  background: linear-gradient(0deg, #0cc443, #7dffa0); box-shadow: 0 0 12px rgba(58, 229, 106, .8);
  animation: proximity 3.4s ease-in-out infinite;
}
.vignette { background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, .55) 100%); }

/* ---- iOS system dialogs -------------------------------------------------- */
.ios-backdrop {
  position: absolute; inset: 0; z-index: 65; display: grid; place-items: center;
  background: rgba(0, 0, 0, .5);
}
.ios-alert {
  width: 270px; border-radius: 14px; overflow: hidden; text-align: center; color: #fff;
  background: rgba(34, 34, 36, .96);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
          backdrop-filter: blur(40px) saturate(180%);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, sans-serif;
  animation: alert-in .28s cubic-bezier(.2, .9, .3, 1.15) both;
}
.ios-alert .ios-title { font-size: 17px; line-height: 22px; font-weight: 600; padding: 19px 16px 0; letter-spacing: -.2px; }
.ios-alert .ios-msg { font-size: 13px; line-height: 17px; padding: 4px 16px 18px; color: rgba(255, 255, 255, .88); }
.ios-alert .ios-btn {
  display: block; width: 100%; height: 44px; font-size: 17px; color: #0a84ff; letter-spacing: -.2px;
  border-top: .5px solid rgba(255, 255, 255, .2); transition: background .15s;
}
.ios-alert .ios-btn:hover { background: rgba(255, 255, 255, .06); }
.ios-alert .ios-row { display: grid; grid-template-columns: 1fr 1fr; }
.ios-alert .ios-row .ios-btn + .ios-btn { border-left: .5px solid rgba(255, 255, 255, .2); }

/* ---- Confetti ------------------------------------------------------------ */
.confetti {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 28%, transparent 50%);
          mask-image: linear-gradient(180deg, #000 0%, #000 28%, transparent 50%);
}
.confetti i { position: absolute; top: -24px; display: block; border-radius: 2px; animation: confetti-fall linear infinite; opacity: .9; }

/* ---- Animations ---------------------------------------------------------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes float-soft { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-7px) rotate(1deg); } }
@keyframes ping-soft { 0% { transform: scale(.55); opacity: .85; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes glow-pulse { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes camera-drift {
  0% { transform: scale(1.16) translate(0, 0); }
  35% { transform: scale(1.2) translate(-2.6%, .8%); }
  70% { transform: scale(1.18) translate(1.8%, -.6%); }
  100% { transform: scale(1.16) translate(0, 0); }
}
@keyframes pan-slow { 0%, 100% { transform: scale(1.12) translateX(0); } 50% { transform: scale(1.18) translateX(-3%); } }
@keyframes scanline { 0% { top: 18%; } 100% { top: 78%; } }
@keyframes plane-scan { 0%, 100% { opacity: .45; } 50% { opacity: .85; } }
@keyframes proximity { 0%, 100% { height: 34%; } 50% { height: 58%; } }
@keyframes screen-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes alert-in { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: scale(1); } }
@keyframes pop-in { 0% { transform: scale(.35); opacity: 0; } 65% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes bar-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes confetti-fall { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(900px) rotate(760deg); } }
@keyframes bracket-lock { 0% { transform: scale(1.35); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes live-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(47, 224, 103, .7); } 70% { box-shadow: 0 0 0 7px rgba(47, 224, 103, 0); } }

.anim-float { animation: float 4.2s ease-in-out infinite; }
.anim-float-soft { animation: float-soft 5s ease-in-out infinite; }
.anim-ping-soft { animation: ping-soft 2.6s cubic-bezier(0, 0, .2, 1) infinite; }
.anim-glow { animation: glow-pulse 3.2s ease-in-out infinite; }
.anim-camera { animation: camera-drift 16s ease-in-out infinite; }
.anim-pan { animation: pan-slow 22s ease-in-out infinite; }
.anim-spin { animation: spin 1s linear infinite; }
.anim-spin-slow { animation: spin 9s linear infinite; }
.anim-pop { animation: pop-in .65s cubic-bezier(.2, .9, .3, 1.2) both; }
.anim-bar { transform-origin: left center; animation: bar-fill 1.1s cubic-bezier(.2, .8, .2, 1) both; }
.screen-enter { animation: screen-enter .38s cubic-bezier(.2, .8, .2, 1) both; }
.live-dot { animation: live-dot 1.8s ease-out infinite; }
.shimmer-text {
  background: linear-gradient(90deg, #7dffa0 0%, #ffffff 40%, #7dffa0 80%);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 4s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* Private access gate */
html.locked .shell { visibility: hidden; }
html.locked body { overflow: hidden; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.shake { animation: shake .35s ease; }