/* ==========================================================================
   PLIXWIN – iOS look (27 Oct)
   A layer on top of the teal theme, loaded last. Turn it off by removing the two
   lines for ios.css / ios.js in index.html.
   - floating rounded header and bottom tab bar (like an iPhone app), tab highlight that slides
   - small iOS-style notification banners: slide down, hide by themselves, swipe up or tap to close
   - category tiles (Lobby / Originals / Slots / Live casino …) as rounded app-style tiles
   - iPhone system font (SF Pro on Apple devices, Inter elsewhere), filled iOS-style icons
   - soft press feedback and spring animations; respects "reduce motion"
   Solid surfaces only (no glass / gloss). Teal green brand colour kept.
   ========================================================================== */
html.ios-ui[data-theme="teal"] {
  --ios-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI", Roboto, system-ui, sans-serif;
  --ios-bar: #0C1A22;          /* header / tab bar capsule */
  --ios-fill: #13252F;         /* buttons and tiles */
  --ios-fill-2: #183039;       /* pressed / hover */
  --ios-line: rgba(255, 255, 255, .06);
  --ios-green: #00B175;
  --ios-green-hi: #1FD69A;
  --ios-green-soft: rgba(0, 177, 117, .15);
  --ios-text: #FFFFFF;
  --ios-muted: #8EA5B3;
  --ios-shadow: 0 10px 28px rgba(0, 0, 0, .42);
  --ios-spring: cubic-bezier(.32, .72, 0, 1);
  --ios-out: cubic-bezier(.4, 0, 1, 1);
}

/* ---------------------------------------------------------------- font: the iPhone system font everywhere */
html.ios-ui[data-theme="teal"] body,
html.ios-ui[data-theme="teal"] body *:not(#_ios1):not(#_ios2) { font-family: var(--ios-font) !important; }
html.ios-ui[data-theme="teal"] body { letter-spacing: -.01em; }
html.ios-ui[data-theme="teal"] #headerBalanceVal,
html.ios-ui[data-theme="teal"] .pxk-amt { font-variant-numeric: tabular-nums; }

/* section titles: iOS "large title" weight */
html.ios-ui[data-theme="teal"] body .rail-title-box h2,
html.ios-ui[data-theme="teal"] body .rail-title-box h3,
html.ios-ui[data-theme="teal"] body .spx-title span,
html.ios-ui[data-theme="teal"] body .lwx-head h2,
html.ios-ui[data-theme="teal"] body .px-sec-head h2 { font-weight: 700 !important; letter-spacing: -.022em !important; }
/* "View All": soft round button */
html.ios-ui[data-theme="teal"] body .rail-see-all-action,
html.ios-ui[data-theme="teal"] body .spx-all,
html.ios-ui[data-theme="teal"] body .px-viewall { border-radius: 999px !important; background: var(--ios-fill) !important; border: 0 !important; font-weight: 600 !important; }

/* ---------------------------------------------------------------- header: floating capsule */
html.ios-ui[data-theme="teal"] body header.top-header {
  background: transparent !important; border: 0 !important; box-shadow: none !important; isolation: isolate;
}
html.ios-ui[data-theme="teal"] body header.top-header::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: 6px 8px; border-radius: 24px;
  background: var(--ios-bar); border: 1px solid var(--ios-line); box-shadow: var(--ios-shadow);
}
/* the page behind the floating header (the strip above it) */
html.ios-ui[data-theme="teal"] body header.top-header::after {
  content: ""; position: absolute; z-index: -2; pointer-events: none; left: 0; right: 0; top: -40px; height: 46px;
  background: var(--tl-bg, #000D14);
}
@media (max-width: 900px) {
  html.ios-ui[data-theme="teal"] body header.top-header { padding-left: 18px !important; padding-right: 16px !important; }
}
@media (min-width: 901px) {
  html.ios-ui[data-theme="teal"] body header.top-header::before { inset: 8px 12px; border-radius: 26px; }
  html.ios-ui[data-theme="teal"] body header.top-header { padding-left: 26px !important; padding-right: 24px !important; }
}

/* balance: a rounded pill, the deposit (wallet) button a separate green circle */
html.ios-ui[data-theme="teal"] body header.top-header .header-right .px-wallet { gap: 8px !important; background: none !important; border: 0 !important; box-shadow: none !important; }
html.ios-ui[data-theme="teal"] body header.top-header .header-right .px-wallet .wallet-balance-box {
  height: 40px !important; border-radius: 999px !important; background: var(--ios-fill) !important; border: 0 !important;
  box-shadow: none !important; padding: 0 12px 0 15px !important;
}
html.ios-ui[data-theme="teal"] body header.top-header .header-right .px-wallet .btn-header-deposit {
  width: 40px !important; min-width: 40px !important; height: 40px !important; padding: 0 !important; border-radius: 50% !important;
  background: var(--ios-green) !important; color: #00140C !important; border: 0 !important; box-shadow: 0 6px 16px rgba(0, 177, 117, .28) !important;
  display: grid !important; place-items: center !important;
}
html.ios-ui[data-theme="teal"] body header.top-header .header-right .px-wallet .btn-header-deposit > span { display: none !important; }
html.ios-ui[data-theme="teal"] body header.top-header .header-right .px-wallet .btn-header-deposit .px-dep-ico { width: 20px !important; height: 20px !important; }
@media (min-width: 901px) {
  html.ios-ui[data-theme="teal"] body header.top-header .header-right .px-wallet .btn-header-deposit {
    width: auto !important; min-width: 0 !important; padding: 0 18px 0 14px !important; border-radius: 999px !important; gap: 8px !important;
    display: inline-flex !important; align-items: center !important;
  }
  html.ios-ui[data-theme="teal"] body header.top-header .header-right .px-wallet .btn-header-deposit > span { display: inline !important; font-weight: 700 !important; }
}
/* account and bell: round buttons */
html.ios-ui[data-theme="teal"] body header.top-header .header-account-btn,
html.ios-ui[data-theme="teal"] body header.top-header .header-notification-btn {
  width: 38px !important; height: 38px !important; min-width: 38px !important; border-radius: 50% !important;
  background: var(--ios-fill) !important; border: 0 !important; box-shadow: none !important; color: #DCE7EE !important;
}
html.ios-ui[data-theme="teal"] body header.top-header .header-account-btn svg,
html.ios-ui[data-theme="teal"] body header.top-header .header-notification-btn svg { width: 21px !important; height: 21px !important; }
html.ios-ui[data-theme="teal"] body header.top-header .header-account-btn.has-photo { background: transparent !important; padding: 0 !important; overflow: hidden; }
html.ios-ui[data-theme="teal"] body header.top-header .header-account-btn img.px-photo { width: 100% !important; height: 100% !important; border-radius: 50% !important; object-fit: cover; }
/* guest: Log in / Sign up pills */
html.ios-ui[data-theme="teal"] body header.top-header .header-right .guest-auth-actions .btn-header-login,
html.ios-ui[data-theme="teal"] body header.top-header .header-right .guest-auth-actions .btn-header-register { border-radius: 999px !important; height: 38px !important; font-weight: 700 !important; border: 0 !important; box-shadow: none !important; }
html.ios-ui[data-theme="teal"] body header.top-header .header-right .guest-auth-actions .btn-header-login { background: var(--ios-fill) !important; }
html.ios-ui[data-theme="teal"] body .btn-search-trigger { border-radius: 999px !important; }

/* ---------------------------------------------------------------- bottom tab bar: floating capsule, sliding highlight */
@media (max-width: 900px) {
  html.ios-ui[data-theme="teal"] body .tl-bbar {
    left: 10px !important; right: 10px !important; bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    height: 66px !important; padding: 0 5px !important; border-radius: 28px !important;
    background: var(--ios-bar) !important; border: 1px solid var(--ios-line) !important; box-shadow: 0 12px 32px rgba(0, 0, 0, .55) !important;
    align-items: center;
  }
  html.ios-ui[data-theme="teal"] body { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important; }
  html.ios-ui[data-theme="teal"] body .tl-bbar button {
    position: relative; z-index: 1; height: 54px; border-radius: 22px; gap: 4px !important;
    font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: 0; color: var(--ios-muted) !important;
    transition: color .25s var(--ios-spring), transform .18s var(--ios-spring);
  }
  html.ios-ui[data-theme="teal"] body .tl-bbar button::before { display: none !important; }
  html.ios-ui[data-theme="teal"] body .tl-bbar button .tl-ic { width: 24px !important; height: 24px !important; color: var(--ios-muted) !important; transition: color .25s var(--ios-spring); }
  html.ios-ui[data-theme="teal"] body .tl-bbar button.is-on,
  html.ios-ui[data-theme="teal"] body .tl-bbar button.is-on .tl-ic { color: var(--ios-green-hi) !important; }
  html.ios-ui[data-theme="teal"] body .tl-bbar button:active { transform: scale(.92); }
  html.ios-ui[data-theme="teal"] body .tl-bbar .tl-cut { fill: var(--ios-bar) !important; }
  html.ios-ui[data-theme="teal"] body .tl-bbar .tl-cut-s { stroke: var(--ios-bar) !important; }
  html.ios-ui[data-theme="teal"] body .tl-bbar button.is-on .tl-cut { fill: #0F2C27 !important; }
  html.ios-ui[data-theme="teal"] body .tl-bbar button.is-on .tl-cut-s { stroke: #0F2C27 !important; }
  /* the highlight behind the open tab (moved by ios.js) */
  html.ios-ui[data-theme="teal"] body .tl-bbar .ios-tab-pill {
    position: absolute; z-index: 0; top: 6px; bottom: 6px; left: 0; width: 0; border-radius: 22px;
    background: #0F2C27; opacity: 0; pointer-events: none;
    transition: transform .42s var(--ios-spring), width .42s var(--ios-spring), opacity .2s;
  }
  html.ios-ui[data-theme="teal"] body .tl-bbar .ios-tab-pill.is-on { opacity: 1; }
}

/* ---------------------------------------------------------------- category tiles (home row and casino / live pages) */
html.ios-ui[data-theme="teal"] body .category-pills-bar,
html.ios-ui[data-theme="teal"] body .px-chips {
  display: flex !important; gap: 10px !important; overflow-x: auto !important; scroll-snap-type: x proximity;
  scrollbar-width: none; padding: 2px 1px 4px !important; background: none !important; border: 0 !important;
}
html.ios-ui[data-theme="teal"] body .category-pills-bar::-webkit-scrollbar,
html.ios-ui[data-theme="teal"] body .px-chips::-webkit-scrollbar { display: none; }
html.ios-ui[data-theme="teal"] body .category-pills-bar .cat-pill-item,
html.ios-ui[data-theme="teal"] body .px-chips .px-chip {
  flex: 0 0 auto !important; scroll-snap-align: start;
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 7px !important;
  width: 86px !important; min-width: 86px !important; height: 80px !important; padding: 0 6px !important; margin: 0 !important;
  border-radius: 20px !important; border: 1px solid var(--ios-line) !important; background: var(--ios-fill) !important; box-shadow: none !important;
  color: var(--ios-muted) !important; font-size: 12.5px !important; font-weight: 600 !important; line-height: 1.15 !important; text-align: center;
  transition: background .25s var(--ios-spring), color .25s var(--ios-spring), transform .18s var(--ios-spring), border-color .25s;
}
html.ios-ui[data-theme="teal"] body .category-pills-bar .cat-pill-item svg,
html.ios-ui[data-theme="teal"] body .px-chips .px-chip svg { width: 27px !important; height: 27px !important; margin: 0 !important; color: #C9D8E1; flex: none; }
html.ios-ui[data-theme="teal"] body .category-pills-bar .cat-pill-item:hover,
html.ios-ui[data-theme="teal"] body .px-chips .px-chip:hover { background: var(--ios-fill-2) !important; }
html.ios-ui[data-theme="teal"] body .category-pills-bar .cat-pill-item:active,
html.ios-ui[data-theme="teal"] body .px-chips .px-chip:active { transform: scale(.94); }
html.ios-ui[data-theme="teal"] body .category-pills-bar .cat-pill-item.active,
html.ios-ui[data-theme="teal"] body .px-chips .px-chip.is-active {
  background: #0F2C27 !important; border-color: rgba(0, 177, 117, .32) !important; color: var(--ios-green-hi) !important;
}
html.ios-ui[data-theme="teal"] body .category-pills-bar .cat-pill-item.active svg,
html.ios-ui[data-theme="teal"] body .px-chips .px-chip.is-active svg { color: var(--ios-green-hi); }
@media (min-width: 901px) {
  html.ios-ui[data-theme="teal"] body .category-pills-bar .cat-pill-item,
  html.ios-ui[data-theme="teal"] body .px-chips .px-chip { width: 104px !important; min-width: 104px !important; height: 84px !important; font-size: 13px !important; }
}
/* home row (its older rules use the #categoryPillsBar id, so these repeat the tile look with it) */
html.ios-ui.hv2[data-theme="teal"] body.home-mode .hv-lobby #categoryPillsBar {
  height: auto !important; gap: 10px !important; padding: 2px 1px 4px !important; align-items: stretch !important; overflow-y: visible !important;
}
html.ios-ui.hv2[data-theme="teal"] body.home-mode .hv-lobby #categoryPillsBar .cat-pill-item {
  flex-direction: column !important; justify-content: center !important; gap: 7px !important;
  width: 86px !important; min-width: 86px !important; height: 80px !important; padding: 0 6px !important;
  border: 1px solid var(--ios-line) !important; border-radius: 20px !important; background: var(--ios-fill) !important;
  color: var(--ios-muted) !important; font-size: 12.5px !important; font-weight: 600 !important; line-height: 1.15 !important;
  transition: background .25s var(--ios-spring), color .25s var(--ios-spring), transform .18s var(--ios-spring), border-color .25s !important;
}
html.ios-ui.hv2[data-theme="teal"] body.home-mode .hv-lobby #categoryPillsBar .cat-pill-item:hover { background: var(--ios-fill-2) !important; color: #FFFFFF !important; }
html.ios-ui.hv2[data-theme="teal"] body.home-mode .hv-lobby #categoryPillsBar .cat-pill-item.active { background: #0F2C27 !important; border-color: rgba(0, 177, 117, .32) !important; color: var(--ios-green-hi) !important; }
html.ios-ui.hv2[data-theme="teal"] body.home-mode .hv-lobby #categoryPillsBar .cat-pill-item .cat-pill-ico,
html.ios-ui.hv2[data-theme="teal"] body.home-mode .hv-lobby #categoryPillsBar .cat-pill-item svg { width: 27px !important; height: 27px !important; }
@media (min-width: 901px) {
  html.ios-ui.hv2[data-theme="teal"] body.home-mode .hv-lobby #categoryPillsBar .cat-pill-item { width: 104px !important; min-width: 104px !important; height: 84px !important; font-size: 13px !important; }
}
/* long names ("Live casino", "Table games") go on two lines inside the tile */
html.ios-ui[data-theme="teal"] body .category-pills-bar .cat-pill-item,
html.ios-ui[data-theme="teal"] body .px-chips .px-chip { white-space: normal !important; }
html.ios-ui[data-theme="teal"] body .category-pills-bar .cat-pill-item > span,
html.ios-ui[data-theme="teal"] body .px-chips .px-chip > span { overflow: visible; text-overflow: clip; }
/* the home row of tiles sits on its own line above the search box */
html.ios-ui.hv2[data-theme="teal"] body.home-mode .hv-lobby { flex-wrap: wrap; }
html.ios-ui.hv2[data-theme="teal"] body.home-mode .hv-lobby .category-pills-bar { flex: 1 1 100% !important; min-width: 0; order: -1; }

/* search fields and provider buttons: rounded like iOS */
html.ios-ui[data-theme="teal"] body .px-search,
html.ios-ui[data-theme="teal"] body .px-prov-btn,
html.ios-ui[data-theme="teal"] body .search-providers-bar input,
html.ios-ui[data-theme="teal"] body .search-providers-bar .search-input-wrap { border-radius: 14px !important; }

/* ---------------------------------------------------------------- notifications: small iOS banners */
html.ios-ui[data-theme="teal"] body .pxa-toasts {
  position: fixed !important; z-index: 2147483000 !important; top: calc(8px + env(safe-area-inset-top, 0px)) !important;
  left: 50% !important; right: auto !important; bottom: auto !important; transform: translateX(-50%);
  width: min(400px, calc(100vw - 20px)) !important; max-width: none !important;
  display: flex !important; flex-direction: column !important; gap: 8px !important; align-items: stretch !important; pointer-events: none;
}
html.ios-ui[data-theme="teal"] body .pxa-toasts .pxa-toast {
  position: relative; pointer-events: auto; touch-action: none; cursor: pointer;
  display: flex !important; align-items: center !important; gap: 11px !important;
  min-height: 0 !important; padding: 10px 46px 10px 10px !important; margin: 0 !important;
  border-radius: 20px !important; background: #142630 !important; border: 1px solid rgba(255, 255, 255, .07) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5) !important; color: var(--ios-text) !important;
  opacity: 0; transform: translateY(-130%) scale(.96) !important;
  transition: transform .5s var(--ios-spring), opacity .3s ease !important;
}
html.ios-ui[data-theme="teal"] body .pxa-toasts .pxa-toast.in { opacity: 1; transform: translateY(0) scale(1) !important; }
html.ios-ui[data-theme="teal"] body .pxa-toasts .pxa-toast.ios-out { opacity: 0; transform: translateY(-130%) scale(.96) !important; transition: transform .28s var(--ios-out), opacity .22s ease !important; }
html.ios-ui[data-theme="teal"] body .pxa-toasts .pxa-toast.ios-drag { transition: none !important; }
html.ios-ui[data-theme="teal"] body .pxa-toasts .pxa-toast > button { display: none !important; }
/* the app icon on the left */
html.ios-ui[data-theme="teal"] body .pxa-toasts .pxa-toast .pxa-toast-dot {
  flex: none; width: 34px !important; height: 34px !important; border-radius: 10px !important; margin: 0 !important; box-shadow: none !important;
  background: #0E2F27 center / 20px 20px no-repeat !important; border: 1px solid rgba(0, 177, 117, .25);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%231FD69A' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
html.ios-ui[data-theme="teal"] body .pxa-toasts .pxa-toast.is-error .pxa-toast-dot {
  background-color: #321A1E !important; border-color: rgba(255, 99, 99, .3);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6.5v7' stroke='%23FF7A7A' stroke-width='2.8' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17.6' r='1.7' fill='%23FF7A7A'/%3E%3C/svg%3E") !important;
}
html.ios-ui[data-theme="teal"] body .pxa-toasts .pxa-toast.is-info .pxa-toast-dot {
  background-color: #172A36 !important; border-color: rgba(142, 165, 179, .25);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.4a1.4 1.4 0 0 1 1.4 1.4v.5a5.9 5.9 0 0 1 4.4 5.7v3.9l1.5 2.2c.4.6 0 1.3-.7 1.3H5.4c-.7 0-1.1-.7-.7-1.3l1.5-2.2V11a5.9 5.9 0 0 1 4.4-5.7v-.5A1.4 1.4 0 0 1 12 3.4zm-2.2 15.7h4.4a2.2 2.2 0 0 1-4.4 0z' fill='%23C9D8E1'/%3E%3C/svg%3E") !important;
}
html.ios-ui[data-theme="teal"] body .pxa-toasts .pxa-toast > div { min-width: 0; }
html.ios-ui[data-theme="teal"] body .pxa-toasts .pxa-toast strong {
  display: block; margin: 0 0 1px !important; font-size: 14px !important; font-weight: 650 !important; line-height: 1.25 !important; color: var(--ios-green-hi) !important;
}
html.ios-ui[data-theme="teal"] body .pxa-toasts .pxa-toast.is-error strong { color: #FF8A8A !important; }
html.ios-ui[data-theme="teal"] body .pxa-toasts .pxa-toast.is-info strong { color: var(--ios-text) !important; }
html.ios-ui[data-theme="teal"] body .pxa-toasts .pxa-toast p {
  margin: 0 !important; font-size: 13px !important; line-height: 1.32 !important; color: #D3DEE5 !important; font-weight: 450 !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html.ios-ui[data-theme="teal"] body .pxa-toasts .pxa-toast::after {
  content: "now"; position: absolute; top: 11px; right: 14px; font-size: 12px; font-weight: 500; color: var(--ios-muted);
}

/* ---------------------------------------------------------------- touch feedback and smooth motion */
html.ios-ui[data-theme="teal"] body .game-card,
html.ios-ui[data-theme="teal"] body .px-original-card { transition: transform .2s var(--ios-spring) !important; }
html.ios-ui[data-theme="teal"] body .game-card:active,
html.ios-ui[data-theme="teal"] body .px-original-card:active { transform: scale(.965) !important; }
html.ios-ui[data-theme="teal"] body button:not(.px-chip):not(.cat-pill-item):not(.pxa-toast button):active { transition: transform .15s var(--ios-spring); }
html.ios-ui[data-theme="teal"] body .games-rail-scroll,
html.ios-ui[data-theme="teal"] body .hv-track { scroll-behavior: smooth; }
html.ios-ui[data-theme="teal"] body * { -webkit-tap-highlight-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  html.ios-ui[data-theme="teal"] body .pxa-toasts .pxa-toast,
  html.ios-ui[data-theme="teal"] body .tl-bbar .ios-tab-pill,
  html.ios-ui[data-theme="teal"] body .tl-bbar button,
  html.ios-ui[data-theme="teal"] body .game-card { transition: none !important; }
  html.ios-ui[data-theme="teal"] body .pxa-toasts .pxa-toast { transform: none !important; }
}