/* ==========================================================================
   PLIXWIN – PokerHouse colours + iOS details (27 Oct, layer 2 of the iOS look)
   Loaded after ios.css. Remove its <link> (and ph.js) in index.html to turn it off.
   - exact PokerHouse neutrals: #0C0C0F page, #151518 surfaces, #848484 grey text; teal green kept
   - header: the balance hangs in an iPhone-style notch from a thin top rail, the bar fades out at both sides (like thrill.com)
   - balance pill: coin on the left (Tether mark for USDT), mint wallet button
   - home cards: CASINO + SPORTS like Stake (picture with bold title + 3D object, bar with live dot and a real number)
   - category tiles: bold uppercase like thrill, Plixwin mark on Originals, rows fade at both ends while they scroll
   - full-screen "not found" / "game didn't load" and "no internet" screens
   ========================================================================== */
html[data-theme="teal"] {
  --ph-bg: #0C0C0F;
  --ph-sf: #151518;
  --ph-sf2: #1B1B1E;
  --ph-sf3: #222225;
  --ph-line: rgba(255, 255, 255, .06);
  --ph-grey: #848484;
  --ph-green: #15D8B3;
  --ph-green-hi: #49E8CA;
  --ph-ink: #051310;
}
html.ios-ui[data-theme="teal"] {
  /* the iOS layer's own tokens, pinned to the PokerHouse values */
  --ios-bar: #151518;
  --ios-fill: #1B1B1E;
  --ios-fill-2: #222225;
  --ios-muted: #8A8A8E;
}
html[data-theme="teal"] body {
  --tl-bg: #0C0C0F; --tl-side: #0C0C0F; --tl-sf: #151518; --tl-sf2: #19191C; --tl-sf3: #1E1E21;
  --tl-line: #19191C; --tl-field: #111114; --tl-fieldline: #1D1D20; --tl-icon: #848484; --tl-muted: #8E8E92;
}
html[data-theme="teal"], html[data-theme="teal"] body { background-color: #0C0C0F; }

/* ---------------------------------------------------------------- header: iPhone-style notch + faded sides (like thrill.com) */
/* no floating capsule: a dark band that fades downward and out to the sides */
html.ios-ui[data-theme="teal"] body header.top-header::before {
  inset: 0 0 -22px 0; border-radius: 0; border: 0; box-shadow: none;
  background: linear-gradient(180deg, #0C0C0F 0%, rgba(12, 12, 15, .94) 58%, rgba(12, 12, 15, 0) 100%);
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .8) 0%, #000 24%, #000 76%, rgba(0, 0, 0, .8) 100%);
          mask-image: linear-gradient(90deg, rgba(0, 0, 0, .8) 0%, #000 24%, #000 76%, rgba(0, 0, 0, .8) 100%);
}
/* the rail along the very top that the notch grows out of; it fades to nothing at both ends */
html.ios-ui[data-theme="teal"] body header.top-header::after {
  top: 0; height: 7px; z-index: 0;
  background: linear-gradient(90deg, rgba(28, 28, 31, 0) 0%, #1C1C1F 24%, #1C1C1F 76%, rgba(28, 28, 31, 0) 100%);
}

/* the notch: hangs from the rail, smooth S-shaped shoulders (not circles), soft round bottom */
html.ios-ui[data-theme="teal"] body .ph-notch { position: relative; background: #1C1C1F !important; border-radius: 0 0 26px 26px !important; }
html.ios-ui[data-theme="teal"] body .ph-notch::before,
html.ios-ui[data-theme="teal"] body .ph-notch::after { content: ""; position: absolute; top: 0; width: 28px; height: 30px; pointer-events: none; background: center / 100% 100% no-repeat; }
html.ios-ui[data-theme="teal"] body .ph-notch::before { left: -27.5px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='30' viewBox='0 0 28 30'%3E%3Cpath d='M0 0H28V30C28 15 21 7 7 7H0Z' fill='%231C1C1F'/%3E%3C/svg%3E"); }
html.ios-ui[data-theme="teal"] body .ph-notch::after  { right: -27.5px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='30' viewBox='0 0 28 30'%3E%3Cpath d='M28 0H0V30C0 15 7 7 21 7H28Z' fill='%231C1C1F'/%3E%3C/svg%3E"); }

/* balance pill (all sizes): coin on the left like thrill, amount, then the arrow */
html[data-theme="teal"] body header.top-header .header-right .px-wallet .wallet-balance-box { display: inline-flex !important; align-items: center !important; gap: 8px !important; }
html[data-theme="teal"] body header.top-header .header-right .px-wallet .px-cur-badge {
  order: -1; width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important;
  border-radius: 50% !important; background: #102823 !important; box-shadow: inset 0 0 0 1px rgba(73, 232, 202, .16) !important; border: 0 !important;
}
html[data-theme="teal"] body header.top-header .header-right .px-wallet .wallet-currency-sym { color: #49E8CA !important; font-size: 13px !important; font-weight: 800 !important; }
/* USDT: the Tether mark instead of a "$" */
html[data-theme="teal"] body header.top-header .header-right .px-wallet[data-cur="USD"] .px-cur-badge { background: #102823 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%2349E8CA'%3E%3Crect x='5' y='5.2' width='14' height='3' rx='.8'/%3E%3Crect x='10.5' y='5.2' width='3' height='13.6' rx='.8'/%3E%3C/g%3E%3Cellipse cx='12' cy='11.7' rx='5.9' ry='1.75' fill='none' stroke='%2349E8CA' stroke-width='1.5'/%3E%3C/svg%3E") center / 17px 17px no-repeat !important; }
html[data-theme="teal"] body header.top-header .header-right .px-wallet[data-cur="USD"] .wallet-currency-sym { font-size: 0 !important; }
html[data-theme="teal"] body header.top-header .header-right .px-wallet[data-cur="USD"] .wallet-balance-amount::before { content: "$"; }
html[data-theme="teal"] body header.top-header .header-right .px-wallet .wallet-balance-amount { font-weight: 700 !important; color: #FFFFFF !important; font-variant-numeric: tabular-nums; }
html[data-theme="teal"] body header.top-header .header-right .px-wallet .wallet-cur-code { display: none !important; }
html[data-theme="teal"] body header.top-header .header-right .px-wallet .wallet-caret { order: 2; width: 14px !important; height: 14px !important; margin: 0 0 0 -2px !important; color: #FFFFFF; stroke: currentColor; stroke-width: 3; fill: none; opacity: .85; }
html[data-theme="teal"] body header.top-header .header-right .px-wallet .wallet-balance-box { background: #111114 !important; box-shadow: none !important; }
/* wallet button: mint circle with a dark wallet, like thrill */
html.ios-ui[data-theme="teal"] body header.top-header .header-right .px-wallet .btn-header-deposit {
  background: #49E8CA !important; color: #051310 !important; box-shadow: 0 4px 14px rgba(73, 232, 202, .22) !important;
}

@media (max-width: 900px) {
  /* phones: balance + wallet button sit in the notch, centred */
  html.ios-ui[data-theme="teal"] body header.top-header .header-right .px-wallet {
    top: 0 !important; left: 50% !important; transform: translateX(-50%) !important;   /* centred on the screen */
    height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; align-items: center !important;
    padding: 11px 8px 8px 8px !important; border-radius: 0 0 28px 28px !important;
    background: #1C1C1F !important; box-shadow: none !important;
  }
  html.ios-ui[data-theme="teal"] body header.top-header .header-right .px-wallet::before,
  html.ios-ui[data-theme="teal"] body header.top-header .header-right .px-wallet::after {
    content: ""; position: absolute; top: 0; width: 28px; height: 30px; pointer-events: none; background: center / 100% 100% no-repeat;
  }
  html.ios-ui[data-theme="teal"] body header.top-header .header-right .px-wallet::before { left: -27.5px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='30' viewBox='0 0 28 30'%3E%3Cpath d='M0 0H28V30C28 15 21 7 7 7H0Z' fill='%231C1C1F'/%3E%3C/svg%3E"); }
  html.ios-ui[data-theme="teal"] body header.top-header .header-right .px-wallet::after  { right: -27.5px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='30' viewBox='0 0 28 30'%3E%3Cpath d='M28 0H0V30C0 15 7 7 21 7H28Z' fill='%231C1C1F'/%3E%3C/svg%3E"); }
  html.ios-ui[data-theme="teal"] body header.top-header .header-right .px-wallet { gap: 7px !important; }
  html.ios-ui[data-theme="teal"] body header.top-header .header-right .px-wallet .wallet-balance-box { height: 38px !important; padding: 0 10px 0 6px !important; gap: 6px !important; border-radius: 999px !important; font-size: 15px !important; max-width: 172px !important; }
  html.ios-ui[data-theme="teal"] body header.top-header .header-right .px-wallet .wallet-balance-amount { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.ios-ui[data-theme="teal"] body header.top-header .header-right .px-wallet .px-cur-badge { width: 24px !important; height: 24px !important; min-width: 24px !important; }
  html.ios-ui[data-theme="teal"] body header.top-header .header-right .px-wallet[data-cur="USD"] .px-cur-badge { background-size: 15px 15px !important; }
  html.ios-ui[data-theme="teal"] body header.top-header .header-right .px-wallet .btn-header-deposit { width: 38px !important; min-width: 38px !important; height: 38px !important; }
  html.ios-ui[data-theme="teal"] body header.top-header { min-height: 66px; }
  /* right side kept small so the notch has room: round account button + a plain bell */
  html.ios-ui[data-theme="teal"] body header.top-header .header-account-btn { width: 36px !important; height: 36px !important; min-width: 36px !important; background: #1A1A1D !important; border: 1px solid rgba(255, 255, 255, .06) !important; }
  html.ios-ui[data-theme="teal"] body header.top-header .header-notification-btn { width: 32px !important; height: 36px !important; min-width: 32px !important; background: transparent !important; border: 0 !important; margin-left: -2px !important; }
}
@media (min-width: 901px) {
  /* desktop: the main tabs (Lobby / Slots / Live casino / Sports) hang in the notch */
  html.ios-ui[data-theme="teal"] body header.top-header .top-nav-tabs {
    align-self: flex-start; height: auto !important; padding: 12px 10px 10px !important; gap: 4px !important;
  }
  html.ios-ui[data-theme="teal"] body header.top-header .top-nav-tabs .top-tab-item { border-radius: 999px !important; }
  html.ios-ui[data-theme="teal"] body header.top-header .top-nav-tabs .top-tab-item.active { background: #111114 !important; }
  html.ios-ui[data-theme="teal"] body header.top-header .header-right .px-wallet .wallet-balance-box { height: 42px !important; padding: 0 14px 0 8px !important; border-radius: 999px !important; }
}

/* ---------------------------------------------------------------- home cards: CASINO + SPORTS (Stake-style) */
/* picture on top with a bold title and one 3D object, a dark bar underneath with a live dot and a real number */
html[data-theme="teal"] body.home-mode .px-cat-cards.ph-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
html[data-theme="teal"] .ph-card {
  position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0; border: 0; border-radius: 14px; overflow: hidden;
  background: #1A1A1D; color: #FFFFFF; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); transition: transform .25s cubic-bezier(.32, .72, 0, 1);
}
html[data-theme="teal"] .ph-card .ph-pic { position: relative; isolation: isolate; display: block; aspect-ratio: 2.25 / 1; overflow: hidden; }
/* Casino: black with fine grain; Sports: light (the two designs from before) */
html[data-theme="teal"] .ph-card.is-casino .ph-pic { background: radial-gradient(90% 130% at 78% 30%, #2B2B2E 0%, #1D1D20 45%, #151518 100%); }
html[data-theme="teal"] .ph-card.is-sports .ph-pic { background: linear-gradient(120deg, #FFFFFF 0%, #EEEEF1 100%); }
html[data-theme="teal"] .ph-card.is-casino .ph-pic::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .09; mix-blend-mode: soft-light; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); pointer-events: none; }
html[data-theme="teal"] .ph-card .ph-h {
  position: absolute; z-index: 2; left: 24px; top: 22px; font-size: clamp(24px, 2.2vw, 30px); font-weight: 700; line-height: 1.05;
  letter-spacing: -.025em;
}
html[data-theme="teal"] .ph-card.is-sports .ph-h { color: #111114; }
html[data-theme="teal"] .ph-card .ph-obj { position: absolute; z-index: 1; pointer-events: none; width: auto; max-width: none; transition: transform .45s cubic-bezier(.32, .72, 0, 1); }
/* pins rise out of the bottom edge, the ball runs off the right edge */
html[data-theme="teal"] .ph-card.is-casino .ph-obj { height: 138%; right: 8%; bottom: -50%; filter: drop-shadow(-10px 16px 22px rgba(0, 0, 0, .45)); }
html[data-theme="teal"] .ph-card.is-sports .ph-obj { height: 98%; right: -4%; top: 50%; transform: translateY(-48%); filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .22)); }
html[data-theme="teal"] .ph-card.is-casino:hover .ph-obj { transform: translateY(-5px) rotate(-1.5deg); }
html[data-theme="teal"] .ph-card.is-sports:hover .ph-obj { transform: translateY(-48%) rotate(8deg); }
/* button inside the picture: one small teal pill on both cards (desktop only) */
html[data-theme="teal"] .ph-card .ph-go {
  position: absolute; z-index: 3; left: 24px; bottom: 22px; display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 18px; border-radius: 999px; background: #49E8CA; color: #051310; font-size: 14px; font-weight: 600; letter-spacing: -.01em;
  white-space: nowrap; box-shadow: 0 6px 16px rgba(0, 0, 0, .22); transition: transform .2s cubic-bezier(.32, .72, 0, 1), filter .2s ease;
}
html[data-theme="teal"] .ph-card:hover .ph-go { filter: brightness(1.07); }
html[data-theme="teal"] .ph-card:active .ph-go { transform: scale(.97); }
html[data-theme="teal"] .ph-card:hover .ph-pic { filter: brightness(1.05); }
html[data-theme="teal"] .ph-card:active { transform: scale(.98); }
html[data-theme="teal"] .ph-card:focus-visible { outline: 2px solid #49E8CA; outline-offset: 3px; }

@media (max-width: 900px) {
  html[data-theme="teal"] body.home-mode .px-cat-cards.ph-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  html[data-theme="teal"] .ph-card { border-radius: 12px; }
  html[data-theme="teal"] .ph-card .ph-pic { aspect-ratio: 1 / 1.02; }
  html[data-theme="teal"] .ph-card .ph-h { left: 14px; top: 14px; font-size: 20px; }
  html[data-theme="teal"] .ph-card.is-casino .ph-obj { height: 104%; right: 6%; bottom: -30%; }
  html[data-theme="teal"] .ph-card.is-sports .ph-obj { height: 80%; right: -16%; top: auto; bottom: -4%; transform: none; }
  html[data-theme="teal"] .ph-card.is-sports:hover .ph-obj { transform: rotate(8deg); }
  /* phones: no button, the whole card is the tap target */
  html[data-theme="teal"] .ph-card .ph-go { display: none; }
}
@media (prefers-reduced-motion: reduce) { html[data-theme="teal"] .ph-card, html[data-theme="teal"] .ph-card .ph-obj { transition: none; } }

/* ---------------------------------------------------------------- category tiles: bold, like thrill.com */
html.ios-ui[data-theme="teal"] body .category-pills-bar .cat-pill-item,
html.ios-ui[data-theme="teal"] body .px-chips .px-chip,
html.ios-ui.hv2[data-theme="teal"] body.home-mode .hv-lobby #categoryPillsBar .cat-pill-item {
  width: 112px !important; min-width: 112px !important; height: 100px !important; gap: 9px !important; padding: 0 6px !important;
  border: 0 !important; border-radius: 18px !important; background: #1C1C1F !important; box-shadow: none !important;
  color: #A9A9B0 !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: .045em !important; line-height: 1.15 !important;
  text-transform: uppercase !important;
}
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,
html.ios-ui.hv2[data-theme="teal"] body.home-mode .hv-lobby #categoryPillsBar .cat-pill-item svg { width: 30px !important; height: 30px !important; color: #D4D4DA !important; }
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,
html.ios-ui.hv2[data-theme="teal"] body.home-mode .hv-lobby #categoryPillsBar .cat-pill-item:hover { background: #232326 !important; color: #FFFFFF !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.is-active,
html.ios-ui.hv2[data-theme="teal"] body.home-mode .hv-lobby #categoryPillsBar .cat-pill-item.active {
  background: linear-gradient(180deg, #183D36 0%, #102723 100%) !important; color: #49E8CA !important;
  box-shadow: inset 0 0 0 1px rgba(73, 232, 202, .22) !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,
html.ios-ui.hv2[data-theme="teal"] body.home-mode .hv-lobby #categoryPillsBar .cat-pill-item.active svg { color: #49E8CA !important; }
/* Originals: the Plixwin mark instead of an icon (like thrill's own logo on its Originals tile) */
html.ios-ui[data-theme="teal"] body .cat-pill-item[data-pill-cat="originals"] svg,
html.ios-ui[data-theme="teal"] body .px-chip[data-chip="originals"] svg { display: none !important; }
html.ios-ui[data-theme="teal"] body .cat-pill-item[data-pill-cat="originals"]::before,
html.ios-ui[data-theme="teal"] body .px-chip[data-chip="originals"]::before {
  content: ""; display: block !important; width: 30px; height: 30px; border-radius: 8px; background: url(/teal/img/plixwin-mark.svg?v=4) center / contain no-repeat;
  filter: grayscale(1) brightness(1.25) contrast(1.1); position: static !important; inset: auto !important; opacity: 1 !important;
}
html.ios-ui[data-theme="teal"] body .cat-pill-item[data-pill-cat="originals"].active::before,
html.ios-ui[data-theme="teal"] body .px-chip[data-chip="originals"].is-active::before,
html.ios-ui[data-theme="teal"] body .cat-pill-item[data-pill-cat="originals"]:hover::before { filter: none; }
@media (max-width: 900px) {
  html.ios-ui[data-theme="teal"] body .category-pills-bar .cat-pill-item,
  html.ios-ui[data-theme="teal"] body .px-chips .px-chip,
  html.ios-ui.hv2[data-theme="teal"] body.home-mode .hv-lobby #categoryPillsBar .cat-pill-item {
    width: 92px !important; min-width: 92px !important; height: 88px !important; gap: 8px !important; border-radius: 16px !important; font-size: 10.5px !important;
  }
  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,
  html.ios-ui.hv2[data-theme="teal"] body.home-mode .hv-lobby #categoryPillsBar .cat-pill-item svg { width: 27px !important; height: 27px !important; }
  html.ios-ui[data-theme="teal"] body .cat-pill-item[data-pill-cat="originals"]::before,
  html.ios-ui[data-theme="teal"] body .px-chip[data-chip="originals"]::before { width: 27px; height: 27px; }
}
/* soft fade at both ends of the tile row while there is more to scroll (ph.js sets the classes) */
html[data-theme="teal"] body .ph-fade-l { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px); mask-image: linear-gradient(90deg, transparent 0, #000 56px); }
html[data-theme="teal"] body .ph-fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent 100%); }
html[data-theme="teal"] body .ph-fade-l.ph-fade-r { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%); }

/* ---------------------------------------------------------------- clean display font for cards, tiles and the toolbar */
/* (the iOS layer forces the system font on everything; these selectors are stronger on purpose) */
html.ios-ui[data-theme="teal"] body .ph-tools :is(button, input, span):not(#_p1):not(#_p2):not(#_p3) { font-family: "Outfit", "Manrope", system-ui, sans-serif !important; }
html.ios-ui[data-theme="teal"] body :is(.category-pills-bar .cat-pill-item, .px-chips .px-chip, .category-pills-bar .cat-pill-item span, .px-chips .px-chip span):not(#_p1):not(#_p2):not(#_p3) {
  font-family: "Outfit", "Manrope", system-ui, sans-serif !important; font-weight: 700 !important; letter-spacing: .06em !important;
}

/* ---------------------------------------------------------------- game rows: exactly 3 tiles across a phone, same size in every section */
@media (max-width: 900px) {
  html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) .hv-track:not(#_p1):not(#_p2),
  html.hv2[data-theme="teal"] body.home-mode :is(#sectionTopHits, #sectionOriginals, #sectionHotSlots, #sectionLiveCasino, #sectionSportsGames) #sportsGamesRail.hv-track:not(#_p1) {
    --hv-cols: 3 !important; --hv-gap: 8px !important; margin-right: 0 !important; padding-right: 0 !important;
  }
  html[data-theme="teal"] .app-shell .games-rail-scroll:not(#_p1) { margin-right: 0 !important; padding-right: 0 !important; }
  html[data-theme="teal"] .games-rail-scroll > .game-card:not(#_p1),
  html[data-theme="teal"] .px-sec:not(.is-grid) .px-track > .game-card:not(#_p1) {
    flex: 0 0 calc((100% - 16px) / 3) !important; flex-basis: calc((100% - 16px) / 3) !important; width: calc((100% - 16px) / 3) !important;
  }
  html[data-theme="teal"] .px-sec:not(#_p1) { --px-cols: 3 !important; --px-gap: 8px !important; }
  html[data-theme="teal"] .px-track:not(#_p1) { margin-right: 0 !important; padding-right: 0 !important; gap: 8px !important; }
}

/* ---------------------------------------------------------------- search / providers bar like thrill.com */
/* home: tiles first, then a slim row of round buttons */
html.ios-ui.hv2[data-theme="teal"] body.home-mode .hv-lobby .search-providers-bar.ph-tools:not(#_p1),
html.ios-ui[data-theme="teal"] body .px-toolbar .px-search-row.ph-tools:not(#_p1) {
  display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: nowrap !important;
  width: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important;
}
html.ios-ui[data-theme="teal"] body .px-toolbar:not(#_p1) { display: flex !important; flex-direction: column !important; gap: 12px !important; }
html.ios-ui.hv2[data-theme="teal"] body.home-mode .hv-lobby:not(#_p1) { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
html.ios-ui.hv2[data-theme="teal"] body.home-mode .hv-lobby .category-pills-bar:not(#_p1):not(#_p2) { order: 1 !important; flex: none !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
html.ios-ui.hv2[data-theme="teal"] body.home-mode .hv-lobby .search-providers-bar:not(#_p1):not(#_p2) { order: 2 !important; flex: none !important; height: auto !important; }
html.ios-ui[data-theme="teal"] body .px-toolbar .px-chips:not(#_p1) { order: -1; }
html.ios-ui[data-theme="teal"] body .ph-tools .search-box-field:not(#_p1),
html.ios-ui[data-theme="teal"] body .ph-tools .px-search:not(#_p1) {
  flex: 0 1 240px !important; width: auto !important; min-width: 0 !important; height: 42px !important; padding: 0 16px 0 14px !important; gap: 9px !important;
  border: 0 !important; border-radius: 999px !important; background: #1C1C1F !important; box-shadow: none !important; color: #A9A9B0 !important; cursor: pointer;
}
html.ios-ui[data-theme="teal"] body .ph-tools .search-box-field input:not(#_p1),
html.ios-ui[data-theme="teal"] body .ph-tools .px-search input:not(#_p1) { font-size: 14px !important; font-weight: 500 !important; color: #FFFFFF !important; background: none !important; }
html.ios-ui[data-theme="teal"] body .ph-tools .search-box-field input::placeholder,
html.ios-ui[data-theme="teal"] body .ph-tools .px-search input::placeholder { color: #8E8E93 !important; }
html.ios-ui[data-theme="teal"] body .ph-tools .search-box-field svg:not(#_p1),
html.ios-ui[data-theme="teal"] body .ph-tools .px-search > svg:not(#_p1) { width: 19px !important; height: 19px !important; color: #D4D4DA !important; flex: none; }
html.ios-ui[data-theme="teal"] body .ph-tools .providers-dropdown-btn:not(#_p1),
html.ios-ui[data-theme="teal"] body .ph-tools .px-prov-btn:not(#_p1) {
  display: inline-flex !important; align-items: center !important; gap: 8px !important; height: 42px !important; width: auto !important; min-width: 0 !important;
  padding: 0 14px 0 14px !important; border: 0 !important; border-radius: 999px !important; background: #1C1C1F !important; box-shadow: none !important;
  color: #FFFFFF !important; font-size: 14px !important; font-weight: 600 !important; white-space: nowrap;
}
html.ios-ui[data-theme="teal"] body .ph-tools .providers-dropdown-btn svg:not(#_p1),
html.ios-ui[data-theme="teal"] body .ph-tools .px-prov-btn svg:not(#_p1) { width: 16px !important; height: 16px !important; color: #D4D4DA !important; }
html.ios-ui[data-theme="teal"] body .ph-tools .providers-dropdown-btn > svg:last-child,
html.ios-ui[data-theme="teal"] body .ph-tools .px-prov-btn .px-caret svg { width: 13px !important; height: 13px !important; opacity: .7; }
html.ios-ui[data-theme="teal"] body .ph-tools :is(.search-box-field, .px-search, .providers-dropdown-btn, .px-prov-btn, .ph-rand):hover { background: #232326 !important; }
html.ios-ui[data-theme="teal"] body .ph-tools .px-prov-wrap { flex: none; }
html.ios-ui[data-theme="teal"] body .ph-tools .providers-dropdown-btn:not(#_p1),
html.ios-ui[data-theme="teal"] body .ph-tools .px-prov-btn:not(#_p1) { flex: none !important; max-width: none !important; overflow: visible !important; }
html.ios-ui[data-theme="teal"] body .ph-tools :is(.provider-button-label, .px-prov-label):not(#_p1):not(#_p2) { display: inline !important; max-width: 140px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px !important; font-weight: 600 !important; color: #FFFFFF !important; }
html.ios-ui[data-theme="teal"] body .ph-tools .ph-rand {
  margin-left: auto; flex: none; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: #1C1C1F; color: #D4D4DA; cursor: pointer; transition: background .2s ease, transform .2s cubic-bezier(.32, .72, 0, 1);
}
html.ios-ui[data-theme="teal"] body .ph-tools .ph-rand svg { width: 20px; height: 20px; }
html.ios-ui[data-theme="teal"] body .ph-tools .ph-rand:active { transform: scale(.92) rotate(-12deg); }
html.ios-ui[data-theme="teal"] body .ph-tools button:focus-visible, html.ios-ui[data-theme="teal"] body .ph-tools .search-box-field:focus-within { outline: 2px solid #49E8CA; outline-offset: 2px; }
@media (max-width: 900px) {
  html.ios-ui[data-theme="teal"] body .ph-tools .search-box-field:not(#_p1),
  html.ios-ui[data-theme="teal"] body .ph-tools .px-search:not(#_p1) { flex: 1 1 auto !important; height: 40px !important; }
  html.ios-ui[data-theme="teal"] body .ph-tools .providers-dropdown-btn:not(#_p1),
  html.ios-ui[data-theme="teal"] body .ph-tools .px-prov-btn:not(#_p1) { height: 40px !important; padding: 0 12px !important; font-size: 13.5px !important; }
  html.ios-ui[data-theme="teal"] body .ph-tools .ph-rand { width: 40px; height: 40px; margin-left: 0; }
}

/* ---------------------------------------------------------------- bottom bar like thrill.com: light glass, no Home button */
@media (max-width: 900px) {
  html.ios-ui[data-theme="teal"] body .tl-bbar:not(#_p1) {
    background: rgba(27, 27, 30, .80) !important; -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, .07) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, .45) !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important; height: 64px !important; border-radius: 26px !important;
  }
  html.ios-ui[data-theme="teal"] body .tl-bbar button[data-k="home"] { display: none !important; }
  html.ios-ui[data-theme="teal"] body .tl-bbar button:not(#_p1) {
    font-size: 9.5px !important; font-weight: 700 !important; letter-spacing: .05em !important; text-transform: uppercase !important; gap: 5px !important;
    color: #9A9AA2 !important;
  }
  html.ios-ui[data-theme="teal"] body .tl-bbar button .tl-ic:not(#_p1) { width: 23px !important; height: 23px !important; color: #9A9AA2 !important; }
  html.ios-ui[data-theme="teal"] body .tl-bbar button.is-on:not(#_p1),
  html.ios-ui[data-theme="teal"] body .tl-bbar button.is-on .tl-ic:not(#_p1) { color: #49E8CA !important; }
  html.ios-ui[data-theme="teal"] body .tl-bbar .ios-tab-pill:not(#_p1) { background: rgba(73, 232, 202, .12) !important; }
  html.ios-ui[data-theme="teal"] body .tl-bbar .tl-cut:not(#_p1) { fill: #1B1B1E !important; }
  html.ios-ui[data-theme="teal"] body .tl-bbar button.is-on .tl-cut:not(#_p1) { fill: #152421 !important; }
}

/* ---------------------------------------------------------------- status screens: not found / no internet */
.ph-status {
  position: fixed; inset: 0; z-index: 2147482000; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(40px + env(safe-area-inset-top, 0px)) 24px calc(40px + env(safe-area-inset-bottom, 0px)); text-align: center; overflow: hidden auto;
  background: radial-gradient(70% 45% at 55% 40%, rgba(73, 232, 202, .15) 0%, rgba(73, 232, 202, 0) 70%), #0C0C0F;
  color: #FFFFFF; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, system-ui, sans-serif;
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s;
}
.ph-status.is-on { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.ph-status::before { /* film grain */
  content: ""; position: absolute; inset: 0; opacity: .07; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ph-status > * { position: relative; }
.ph-status .ph-tag {
  position: absolute; top: calc(22px + env(safe-area-inset-top, 0px)); left: 0; right: 0;
  font: 700 10px/1 "Silkscreen", "Courier New", monospace; letter-spacing: .6em; color: rgba(255, 255, 255, .13);
}
.ph-status .ph-pix {
  margin: 0; font-family: "Silkscreen", "Courier New", monospace; color: #DAFBF5; line-height: .95;
  text-shadow: 0 0 18px rgba(73, 232, 202, .75), 0 0 2px #FFFFFF;
}
.ph-status .ph-pix.sm { font-size: clamp(24px, 6vw, 34px); font-weight: 400; }
.ph-status .ph-pix.lg { font-size: clamp(64px, 20vw, 120px); font-weight: 700; letter-spacing: -.02em; }
.ph-status .ph-pix.md { font-size: clamp(46px, 14vw, 84px); font-weight: 700; letter-spacing: -.02em; }
.ph-status .ph-art { width: min(300px, 72vw); aspect-ratio: 1; margin: -4px 0 0; display: grid; place-items: center; }
.ph-status .ph-art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 30px rgba(73, 232, 202, .22)); }
.ph-status .ph-cap { margin: 6px 0 14px; font: 400 10px/1.4 "Silkscreen", "Courier New", monospace; letter-spacing: .14em; color: #848484; text-transform: uppercase; }
.ph-status .ph-txt { margin: 0 0 22px; max-width: 32ch; font-size: 15px; line-height: 1.5; color: #9A9A9E; }
.ph-status .ph-dots { display: flex; gap: 6px; justify-content: center; margin: 2px 0 16px; }
.ph-status .ph-dots i { width: 7px; height: 7px; border-radius: 2px; background: #49E8CA; animation: ph-blink 1.4s steps(2) infinite; }
.ph-status .ph-dots i:nth-child(2) { animation-delay: .2s; } .ph-status .ph-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes ph-blink { 50% { opacity: .2; } }
.ph-status .ph-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.ph-status button, .ph-status a.ph-btn {
  display: inline-flex; align-items: center; justify-content: center; min-width: 128px; height: 48px; padding: 0 22px; border: 0; border-radius: 14px;
  font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; transition: transform .15s cubic-bezier(.32, .72, 0, 1), filter .2s;
}
.ph-status .ph-pri { background: #15D8B3; color: #051310; }
.ph-status .ph-sec { background: #1B1B1E; color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.ph-status button:active, .ph-status a.ph-btn:active { transform: scale(.96); }
.ph-status button:hover, .ph-status a.ph-btn:hover { filter: brightness(1.08); }
.ph-status button:focus-visible, .ph-status a.ph-btn:focus-visible { outline: 2px solid #49E8CA; outline-offset: 3px; }
.ph-status button[disabled] { opacity: .6; cursor: default; }
@media (max-height: 700px) { .ph-status .ph-art { width: min(220px, 60vw); } .ph-status .ph-pix.lg { font-size: 64px; } }
@media (prefers-reduced-motion: reduce) {
  .ph-status, .ph-card, .ph-card img { transition: none !important; }
  .ph-status .ph-dots i { animation: none; }
}