/* Play Vortex: the app shell's own look ("Sapphire hex", the owner's pick 2026-10-21). Loaded after style.css, so it
   only restyles the shell: top bar, Home, game tiles, tab bar, Promotions, Support, Wallet, sheets, sign-up. Each game
   keeps its own look (its body.<game>-mode rules are more specific than these).
   Colours: deep sapphire #040B24, electric blue #2F7BFF, sky #5EA2FF, ice white #EAF2FF; texture: a honeycomb mesh. */
:root {
  --bg: #040b24;
  --bg2: #061238;
  --card: #0a1a4a;
  --card2: #0f2560;
  --line: rgba(94,162,255,.18);
  --text: #eaf2ff;
  --muted: #8fa3cc;
  --pick: #2f7bff;
  --pick2: #5ee7ff;
  --vx-blue: #2f7bff;
  --vx-sky: #5ea2ff;
  --vx-ice: #eaf2ff;
  --vx-alert: #ff4d6d;
  --vx-grad: linear-gradient(120deg, #9cd8ff, #2f7bff 55%, #1b4fd8);
  --vx-edge: linear-gradient(135deg, rgba(156,216,255,.6), rgba(47,123,255,.22) 45%, rgba(94,162,255,.5));
  --vx-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48'%3E%3Cpath d='M14 0 L28 8 V24 L14 32 L0 24 V8 Z M14 32 V48' fill='none' stroke='%235ea2ff' stroke-opacity='.13' stroke-width='1'/%3E%3C/svg%3E");
  --radius: 10px;
  --nav-h: 76px;
}
body {
  font-family: "Bahnschrift", "Segoe UI", system-ui, -apple-system, Roboto, "Noto Sans Ethiopic", sans-serif;
  background:
    radial-gradient(800px 520px at 50% -12%, rgba(47,123,255,.32), transparent 65%),
    radial-gradient(600px 420px at 100% 100%, rgba(94,231,255,.08), transparent 60%),
    var(--vx-hex),
    var(--bg);
  background-attachment: fixed;
}
/* a slow sapphire swirl behind every page (not inside a game, which has its own backdrop) */
body::before {
  content: ""; position: fixed; z-index: -1; left: 50%; top: 38%; width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax;
  background: conic-gradient(from 0deg, transparent 0 8%, rgba(94,162,255,.10) 14%, transparent 22% 33%, rgba(156,216,255,.07) 40%,
    transparent 48% 58%, rgba(47,123,255,.12) 66%, transparent 74% 84%, rgba(94,231,255,.06) 92%, transparent);
  -webkit-mask: radial-gradient(circle, #000 0 8%, rgba(0,0,0,.9) 20%, transparent 55%);
  mask: radial-gradient(circle, #000 0 8%, rgba(0,0,0,.9) 20%, transparent 55%);
  animation: vxSpin 70s linear infinite; pointer-events: none;
}
body[class*="-mode"]::before { display: none; }
@keyframes vxSpin { to { transform: rotate(360deg); } }
h2, .section-title { font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.section-title { display: flex; align-items: center; gap: 10px; color: #bfd6ff; font-size: 12px; margin: 10px 2px 0; }
.section-title::before { content: ""; width: 18px; height: 3px; border-radius: 2px; background: var(--vx-grad); box-shadow: 0 0 10px rgba(94,162,255,.6); }
.section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(94,162,255,.4), transparent); }

/* ---- top bar: dark sapphire glass with a light line under it ---- */
.topbar { background: rgba(4,11,36,.78); border-bottom: 0; box-shadow: 0 1px 0 rgba(94,162,255,.2), 0 8px 30px rgba(0,0,0,.35); }
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--vx-grad); opacity: .7; }
.logo-h { height: 18px; }
.vx-swirl { transform-box: fill-box; transform-origin: center; animation: vxSpin 9s linear infinite; }
.balance-pill { background: rgba(10,26,74,.92); border: 1px solid rgba(94,162,255,.4); box-shadow: 0 0 14px rgba(47,123,255,.18), inset 0 0 12px rgba(47,123,255,.15); }
.balance-pill b { color: #fff; letter-spacing: .02em; }
.coin { background: conic-gradient(from 30deg, #9cd8ff, #2f7bff, #1b4fd8, #5ee7ff, #9cd8ff); box-shadow: 0 0 10px rgba(94,162,255,.55); position: relative; }
.coin::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #040b24; box-shadow: inset 0 0 0 2px rgba(234,242,255,.8); }
.coin.big::after { inset: 11px; }
.icon-btn { border-radius: 10px; background: rgba(10,26,74,.92); border-color: rgba(94,162,255,.35); }

/* ---- cards: deep blue glass on the honeycomb, with a light-blue edge ---- */
.card, .promo-card, .feed-row, .led-row, .faq details, .chat, .ticket, .home-links button {
  border: 1px solid transparent; border-radius: var(--radius);
  background: linear-gradient(160deg, #0f2560, #081644 60%) padding-box, var(--vx-edge) border-box;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.round-bar { border: 1px solid transparent; border-radius: 12px; background: linear-gradient(120deg, #0f2560, #081644) padding-box, var(--vx-edge) border-box; }
.ring-arc { filter: drop-shadow(0 0 4px rgba(94,162,255,.8)); }
input, select, textarea { background: #061238; border-color: rgba(94,162,255,.35); border-radius: 8px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--vx-sky); box-shadow: 0 0 12px rgba(94,162,255,.35); }

/* ---- buttons: angled, electric blue ---- */
.btn { border-radius: 8px; background: #0f2560; border-color: rgba(94,162,255,.4); }
.btn.primary, .pc-btn, .acct-actions button.on {
  color: #fff; border: 0; border-radius: 6px; letter-spacing: .06em; text-transform: uppercase;
  background: linear-gradient(100deg, #2f7bff, #5ea2ff 45%, #2f7bff);
  box-shadow: 0 0 18px rgba(47,123,255,.45), inset 0 -3px 0 rgba(0,0,0,.2);
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.btn.primary.big { font-size: 16px; }
.pc-actions .pc-btn { color: #0b2a7a; background: linear-gradient(100deg, #eaf2ff, #bfd6ff); box-shadow: 0 0 16px rgba(191,214,255,.35); }
.join-link { color: var(--vx-sky); }
.seg { border-radius: 10px; background: #061238; border-color: rgba(94,162,255,.35); }
.seg button { border-radius: 7px; }
.seg button.on { background: var(--vx-grad); box-shadow: 0 0 14px rgba(47,123,255,.5); }

/* ---- Home: games as a grid of tiles (Jackloot shows them as rows) ---- */
.games { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .games { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gcard {
  grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; align-items: stretch; gap: 8px; padding: 8px 8px 10px;
  border-radius: 14px; box-shadow: 0 12px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.gcard::after { /* a light sweep on the frame */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.45), transparent 35%, transparent 65%, rgba(255,255,255,.25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.g-art { width: 100%; height: auto; aspect-ratio: 1.25; border-radius: 10px; }
.g-art svg { width: 78%; height: 78%; margin: auto; }
.g-info { gap: 2px; padding: 0 2px; }
.g-info b { font-size: 15px; letter-spacing: .05em; text-transform: uppercase; }
.g-info small { display: none; }
.g-status { font-size: 11.5px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-chips { display: none; }
.g-play { justify-self: stretch; text-align: center; padding: 8px 10px; border-radius: 6px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.g-label { top: 12px; left: 12px; right: auto; border-radius: 4px; letter-spacing: .12em; box-shadow: 0 0 12px rgba(47,123,255,.5); }
/* the Keno number board and the Bingo card fill the tile */
.g-keno .g-art, .g-bingo .g-art { padding: 8px; }
.keno-mini, .bingo-mini { width: 100%; }

/* promo slider: light-blue frame, dots as a gradient bar */
.ps-track { border-radius: 14px; box-shadow: 0 0 0 1px rgba(94,162,255,.3), 0 16px 40px rgba(0,0,0,.5), 0 0 30px rgba(47,123,255,.22); }
.ps-tag { border-radius: 4px; letter-spacing: .18em; }
.ps-cta { border-radius: 5px; text-transform: uppercase; letter-spacing: .08em; }
.ps-dots i { height: 4px; border-radius: 2px; }
.ps-dots i.on { background: var(--vx-grad); box-shadow: 0 0 8px rgba(94,162,255,.7); }
.jp-bar { /* jackpot: a sapphire sign with an ice shimmer and white figures */
  border-radius: 12px; color: #fff;
  background: linear-gradient(110deg, #0a2a7a 0%, #2f7bff 30%, #9cd8ff 50%, #2f7bff 70%, #0a2a7a 100%); background-size: 220% 100%;
  box-shadow: 0 0 0 1px rgba(156,216,255,.6), 0 0 26px rgba(47,123,255,.45), inset 0 1px 0 rgba(255,255,255,.35);
}
.jp-main b { text-shadow: 0 0 14px rgba(255,255,255,.6), 0 1px 2px rgba(4,11,36,.6); }
.jp-main small, .jp-side small { opacity: .9; text-shadow: 0 1px 2px rgba(4,11,36,.6); }
.jp-side b { text-shadow: 0 1px 2px rgba(4,11,36,.6); }

/* recent wins */
.f-ic { border-radius: 8px; background: rgba(47,123,255,.18); }
.f-win { color: #9cd8ff; text-shadow: 0 0 10px rgba(94,162,255,.5); }

/* ---- tab bar: a floating glass capsule; the active tab glows ---- */
.tabbar {
  left: 12px; right: 12px; bottom: calc(10px + var(--safe-b)); padding: 6px; border-radius: 20px; max-width: 520px; margin: 0 auto;
  border: 1px solid transparent; background: linear-gradient(rgba(6,18,56,.93), rgba(6,18,56,.93)) padding-box, var(--vx-edge) border-box;
  box-shadow: 0 14px 40px rgba(0,0,0,.6), 0 0 24px rgba(47,123,255,.25);
}
.tabbar button { border-radius: 14px; padding: 7px 0 6px; letter-spacing: .04em; transition: color .2s, background .2s; }
.tabbar button.active { color: #fff; background: radial-gradient(70% 90% at 50% 40%, rgba(94,162,255,.3), rgba(47,123,255,.12) 60%, transparent); }
.tabbar button.active svg { stroke: #9cd8ff; filter: drop-shadow(0 0 6px rgba(94,162,255,.9)); }
.tabbar button.active::before { top: auto; bottom: 2px; width: 16px; height: 3px; border-radius: 3px; background: var(--vx-grad); box-shadow: 0 0 8px rgba(94,162,255,.8); }
.badge { background: var(--vx-alert); box-shadow: 0 0 8px rgba(255,77,109,.6); }
body { padding-bottom: calc(var(--nav-h) + var(--safe-b) + 18px); }
.live-pill { border-color: rgba(94,162,255,.5); background: rgba(6,18,56,.95); box-shadow: 0 0 18px rgba(47,123,255,.25); }

/* ---- Promotions / Support / Wallet ---- */
.pc-art { border-radius: 12px; }
.wallet-card, .hero {
  border-radius: 16px; border: 1px solid transparent;
  background: radial-gradient(120% 140% at 100% 0%, rgba(156,216,255,.3), transparent 55%),
    radial-gradient(100% 120% at 0% 100%, rgba(47,123,255,.35), transparent 60%), var(--vx-hex), linear-gradient(145deg, #0f2a6e, #061238) padding-box,
    var(--vx-edge) border-box;
  box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 0 30px rgba(47,123,255,.2);
}
.wallet-card::after, .hero::after { /* a slow swirl in the corner */
  content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent, rgba(156,216,255,.25), transparent 30%, rgba(47,123,255,.25), transparent 60%, rgba(94,231,255,.18), transparent 90%);
  -webkit-mask: radial-gradient(circle, transparent 18%, #000 20% 68%, transparent 70%); mask: radial-gradient(circle, transparent 18%, #000 20% 68%, transparent 70%);
  animation: vxSpin 14s linear infinite; border: 0;
}
.wc-bal b, .hero-bal b { color: #fff; text-shadow: 0 0 18px rgba(94,162,255,.55); letter-spacing: .02em; }
.wc-top { letter-spacing: .2em; }
.wallet-card .summary div, .hero-stats div, .pc-stats div { background: rgba(4,11,36,.45); border-radius: 8px; }
.chat-form button { background: var(--vx-grad); border-radius: 8px; }
.chat-form textarea { border-radius: 8px; }
.sub-head button { border-radius: 8px; background: #0f2560; border-color: rgba(94,162,255,.4); }
.game-bar button { border-radius: 6px; letter-spacing: .04em; }

/* ---- sheets, popups, toasts ---- */
.overlay { background: rgba(2,6,20,.84); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.toast { border-radius: 10px; border: 1px solid rgba(94,162,255,.5); background: #0a1a4a; box-shadow: 0 0 22px rgba(47,123,255,.25), 0 10px 30px rgba(0,0,0,.5); }

/* ---- sign-up: the big swirl is the logo, no keno balls ---- */
.join-card { border-radius: 16px; box-shadow: 0 0 0 1px rgba(94,162,255,.3), 0 0 60px rgba(47,123,255,.35), 0 20px 50px rgba(0,0,0,.6); }
.join-balls { display: none; }
.join-logo svg { width: 230px; }

/* lighter mode and reduced motion: no spinning */
html.lite body::before, html.lite .vx-swirl, html.lite .wallet-card::after, html.lite .hero::after { animation: none; }
@media (prefers-reduced-motion: reduce) { body::before, .vx-swirl, .wallet-card::after, .hero::after { animation: none; } }