/*!
 * Sllina - apple-design.css
 * ------------------------
 * Extracted verbatim from the old single-file index.html.
 * Overrides that must win over main.css.
 * Content below keeps its ORIGINAL order; navigate via the
 * banner comments inside this file.
 */

/* NOTE: MUST load AFTER main.css. */

      :root, html.dark {
        --apple-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
        --apple-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
        --apple-green: #34c759;
        --apple-green-rgb: 52, 199, 89;
        --apple-glass: rgba(24, 22, 20, 0.72);
        --apple-glass-strong: rgba(20, 18, 16, 0.86);
        --apple-hairline: rgba(255, 255, 255, 0.09);
        --apple-shadow-pop: 0 28px 80px rgba(0, 0, 0, 0.55);
      }
      html:not(.dark) {
        --apple-glass: rgba(255, 255, 255, 0.72);
        --apple-glass-strong: rgba(255, 255, 255, 0.85);
        --apple-hairline: rgba(0, 0, 0, 0.08);
        --apple-shadow-pop: 0 28px 80px rgba(28, 25, 23, 0.28);
      }

      html { -webkit-tap-highlight-color: transparent; }

      /* ── Top bar: liquid glass (default nav; custom nav-style choices are preserved) ── */
      .bbx-top:not([class*="nav-style-"]),
      .site-header:not([class*="nav-style-"]) {
        background: var(--apple-glass) !important;
        -webkit-backdrop-filter: blur(26px) saturate(180%) !important;
        backdrop-filter: blur(26px) saturate(180%) !important;
        box-shadow: 0 1px 0 var(--apple-hairline), 0 8px 32px rgba(0, 0, 0, 0.12) !important;
        border-bottom: none !important;
      }

      /* ── Buttons: Apple iOS style ── */
      .btn-primary {
        border-radius: 16px !important;
        min-height: 48px !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        background: #ff6f2e !important;
        color: #fff !important;
        text-shadow: none !important;
        border: none !important;
        box-shadow: 0 2px 10px rgba(var(--orange-rgb), 0.35) !important;
        transition: transform 0.22s var(--apple-spring), box-shadow 0.25s var(--apple-ease), filter 0.2s !important;
      }
      .btn-primary:hover { transform: translateY(-1px) !important; filter: brightness(1.05) !important; box-shadow: 0 4px 16px rgba(var(--orange-rgb), 0.40) !important; }
      .btn-primary:active { transform: scale(0.965) !important; filter: brightness(0.97) !important; }
      .btn-ghost {
        border-radius: 14px !important;
        background: rgba(var(--orange-rgb), 0.10) !important;
        border: 1px solid rgba(var(--orange-rgb), 0.22) !important;
        transition: transform 0.2s var(--apple-spring), background 0.2s var(--apple-ease) !important;
      }
      .btn-ghost:hover { background: rgba(var(--orange-rgb), 0.16) !important; }
      .btn-ghost:active { transform: scale(0.965) !important; }
      .btn-dark {
        border-radius: 14px !important;
        background: #1c1c1e !important;
        color: #fff !important;
        text-shadow: none !important;
      }
      .btn-danger {
        border-radius: 14px !important;
        background: #ff3b30 !important;
        color: #fff !important;
        text-shadow: none !important;
      }
      .btn-google { transition: transform 0.2s var(--apple-spring), border-color 0.2s, background 0.2s !important; }
      .btn-google:hover { border-color: rgba(var(--orange-rgb), 0.45) !important; }
      .btn-google:active { transform: scale(0.975) !important; }

      /* ── Game buttons: squares + Apple soft fills, not pills ── */
      .bbx-chip { border-radius: 999px !important; background: rgba(120, 120, 128, 0.14) !important; border-color: rgba(120, 120, 128, 0.20) !important; color: var(--ink) !important; }
      .bbx-chip:hover { border-color: rgba(var(--orange-rgb), 0.45) !important; }
      .pill-btn,
      .assist-pill,
      .player-tag,
      .assist-team { border-radius: 14px !important; }
      .pill-btn { background: rgba(120, 120, 128, 0.14) !important; border-color: rgba(120, 120, 128, 0.20) !important; color: var(--ink) !important; }
      .summary-card [data-action='games-fav'] { border-radius: 14px !important; }
      .summary-card [data-action='games-fav']::before { border-radius: 14px !important; }
      button[data-action='show-rules'] { border-radius: 14px !important; }
      button[data-action='inv-theme'] { border-radius: 10px !important; }
      select[data-action='wti-set-category'],
      select[data-action='ai-set-category'] { border-radius: 14px !important; }

      /* ── Cards & tiles ── */
      .summary-card {
        border-radius: 18px !important;
        transition: transform 0.3s var(--apple-spring), box-shadow 0.3s var(--apple-ease) !important;
      }
      .summary-card:hover {
        transform: translateY(-4px) scale(1.015) !important;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(var(--orange-rgb), 0.18) !important;
      }

      /* ── Game cube tiles: soft Apple shadow (was a heavy dark drop) ── */
      .summary-card > strong,
      .summary-card[class*='color-'] > strong {
        box-shadow: 0 4px 14px rgba(28, 25, 23, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
      }
      .summary-card:hover > strong {
        box-shadow: 0 12px 26px rgba(28, 25, 23, 0.22), 0 0 16px rgba(var(--orange-rgb), 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
      }

      /* ── Chips / banner (identity: Sllina orange) ── */
      .bbx-chip {
        min-height: 44px !important;
        height: 44px !important;
        font-size: 0.875rem !important;
        padding-inline: 18px !important;
      }
      .bbx-chip.on {
        background: #ff6f2e !important;
        color: #fff !important;
        text-shadow: none;
        box-shadow: 0 2px 10px rgba(var(--orange-rgb), 0.35) !important;
      }
      .bbx-banner {
        border-radius: 32px !important;
        min-height: 118px !important;
        padding: 10px 14px 12px !important;
        background: linear-gradient(135deg, #ffb27d 0%, #ff8c46 48%, #ff6f2e 100%) !important;
      }
      .bbx-banner-actions { flex-wrap: nowrap !important; gap: 8px !important; }
      .bbx-banner > .bbx-banner-art { width: clamp(120px, 16vw, 144px) !important; }
      .bbx-banner-kick { text-shadow: 0 1px 6px rgba(140, 55, 10, 0.55); }
      .bbx-banner-slide p { text-shadow: 0 1px 6px rgba(140, 55, 10, 0.55); }

      /* ── Home search icon (sits in the chips/pills row, circular) ── */
      .bbx-home-search { flex: 0 0 auto; display: grid; place-items: center; }
      .bbx-home-search button {
        width: 40px; height: 40px;
        display: grid; place-items: center;
        border-radius: 50%;
        border: 1px solid var(--stroke);
        background: rgba(255, 255, 255, 0.06);
        color: var(--orange);
        cursor: pointer;
        transition: transform 0.2s var(--apple-spring), background 0.2s var(--apple-ease);
      }
      .bbx-home-search button:active { transform: scale(0.9); }
      .bbx-home-search button svg { width: 18px; height: 18px; }

      /* ── Favourite heart: 44px Apple hit target, keeps the small corner circle ── */
      .summary-card [data-action='games-fav'] {
        width: 44px !important;
        height: 44px !important;
        top: -5px !important;
        inset-inline-end: -5px !important;
        border-radius: 50%;
        background: transparent !important;
        border: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        font-size: 1.05rem !important;
      }
      .summary-card [data-action='games-fav']::before {
        content: "";
        position: absolute;
        inset: 10px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.20);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        z-index: -1;
      }
      .summary-card [data-action='games-fav']:active { transform: scale(0.9); }

      /* ── Apple type scale & minimum readable text ── */
      .bbx-head { margin: 24px 0 12px !important; }
      .bbx-head h2 {
        font-size: clamp(1.3rem, 4.6vw, 1.75rem) !important;
        font-weight: 800 !important;
        letter-spacing: -0.02em !important;
        line-height: 1.2 !important;
      }
      .bbx-more { font-size: 0.72rem !important; min-height: 30px !important; padding: 3px 10px !important; }
      .bbx-more svg { width: 10px !important; height: 10px !important; }
      .bbx-banner-cta { min-height: 44px !important; font-size: 0.76rem !important; padding-inline: 14px !important; }
      .eyebrow { font-size: 0.75rem !important; }
      .bbx-banner-kick { font-size: 0.82rem !important; }
      .bbx-banner-slide p { font-size: 0.82rem !important; }
      .bbx-count { font-size: 0.82rem !important; }
      .summary-card h3 { font-size: 0.9rem !important; }
      .summary-card p { font-size: 0.78rem !important; line-height: 1.45 !important; }
      .bbx-wallet { height: 32px !important; min-height: 32px !important; font-size: 0.78rem !important; padding-inline-start: 10px !important; padding-inline-end: 3px !important; gap: 5px !important; }
      .bbx-wallet .plus { min-width: 22px !important; height: 22px !important; font-size: 0.7rem !important; padding: 0 6px !important; }

      /* ── Bottom dock ── */
      .bottom-nav { border-radius: 24px 24px 0 0 !important; }
      .bnav-link span.t { font-size: 0.72rem !important; }
      .bnav-link { transition: transform 0.2s var(--apple-spring), background 0.2s var(--apple-ease), color 0.2s !important; }
      .bnav-link:active, .bnav-center:active { transform: scale(0.92) !important; }

      /* ── Sheets / modals / consent ── */
      .modal-overlay, .wd-modal-overlay, .settings-overlay, .consent-overlay {
        background: rgba(15, 12, 20, 0.42) !important;
        -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
        backdrop-filter: blur(24px) saturate(160%) !important;
      }
      .modal-card, .wd-modal-card, .settings-panel, .consent-card {
        border-radius: 24px !important;
        box-shadow: var(--apple-shadow-pop) !important;
        animation: appleModalIn 0.42s var(--apple-spring) !important;
      }
      .consent-card { border-radius: 18px !important; }
      .consent-card .consent-buttons, .consent-card .consent-actions { display: flex; gap: 10px; }
      @keyframes appleModalIn {
        from { transform: scale(0.92) translateY(14px); opacity: 0; }
        to   { transform: scale(1) translateY(0); opacity: 1; }
      }

      /* ── Contact page: Apple ── */
      .card.form {
        border: 1px solid var(--line) !important;
        border-radius: 24px !important;
        background: var(--surface) !important;
        box-shadow: 0 10px 30px rgba(28, 25, 23, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
      }
      html.dark .card.form {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
      }
      .card.form label {
        display: flex;
        flex-direction: column;
        gap: 8px;
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--muted);
      }
      .card.form input,
      .card.form textarea {
        background: var(--surface-2) !important;
        border: 1.5px solid var(--line) !important;
        color: var(--ink) !important;
      }
      #contact-form .btn-ghost {
        border-radius: 999px !important;
        border: 1.5px solid var(--line) !important;
        background: transparent !important;
      }
      .faq-item {
        border: 1px solid var(--line) !important;
        border-radius: 20px !important;
        background: var(--surface) !important;
        box-shadow: 0 1px 2px rgba(28, 25, 23, 0.03) !important;
        padding: 16px 18px;
      }
      .faq-item:hover {
        transform: none !important;
        border-color: var(--line) !important;
        box-shadow: 0 6px 20px rgba(28, 25, 23, 0.06) !important;
      }
      .faq-item summary {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }
      .faq-item summary:after {
        content: '';
        width: 9px; height: 9px;
        flex-shrink: 0;
        border-right: 2px solid var(--muted);
        border-bottom: 2px solid var(--muted);
        transform: rotate(-45deg);
        margin-bottom: 4px;
        transition: transform 0.25s var(--apple-ease);
      }
      .faq-item[open] summary:after {
        content: '';
        transform: rotate(45deg);
        margin-bottom: -2px;
      }
      .faq-item:hover summary { color: var(--orange); }
      .faq-item[open] {
        border-color: rgba(var(--orange-rgb), 0.4) !important;
        background: var(--surface) !important;
      }
      .legal-row a {
        background: rgba(120, 120, 128, 0.08) !important;
        border: 1px solid rgba(120, 120, 128, 0.18) !important;
        color: var(--ink) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
        transition: background 0.2s var(--apple-ease), color 0.2s var(--apple-ease), border-color 0.2s var(--apple-ease), transform 0.15s var(--apple-ease);
      }
      .legal-row a:hover {
        background: rgba(var(--orange-rgb), 0.10) !important;
        border-color: rgba(var(--orange-rgb), 0.35) !important;
        color: var(--orange) !important;
        transform: translateY(-1px);
      }
      html.dark .legal-row a {
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.10) !important;
        box-shadow: none;
      }
      html.dark .legal-row a:hover {
        background: rgba(var(--orange-rgb), 0.16) !important;
        border-color: rgba(var(--orange-rgb), 0.45) !important;
        color: #ffb28a !important;
      }
      .legal-pills .legal-row { margin-top: 0; }

      /* ── Apple auth card ── */
      .apple-auth-card {
        border-radius: 32px !important;
        overflow: hidden;
        position: relative;
        box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45), 0 2px 12px rgba(var(--orange-rgb), 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
        animation: appleCardIn 0.5s var(--apple-spring) !important;
      }
      html:not(.dark) .apple-auth-card {
        box-shadow: 0 36px 90px rgba(28, 25, 23, 0.30), 0 2px 12px rgba(var(--orange-rgb), 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
      }
      .apple-auth-card::before {
        content: "";
        display: block;
        width: 72px; height: 72px;
        margin: 10px auto 26px;
        border-radius: 20px;
        background: #fff;
        background-image: url("logo.png");
        background-position: center;
        background-size: 82% auto;
        background-repeat: no-repeat;
        box-shadow: 0 12px 28px rgba(var(--orange-rgb), 0.30), 0 2px 8px rgba(28, 25, 23, 0.10), inset 0 0 0 1px rgba(28, 25, 23, 0.05);
      }
      @keyframes appleCardIn {
        from { transform: translateY(16px) scale(0.97); opacity: 0; }
        to   { transform: translateY(0) scale(1); opacity: 1; }
      }
      .apple-auth-card .btn-primary {
        min-height: 60px !important;
        border-radius: 18px !important;
        font-size: 1.1rem !important;
      }
      .apple-auth-card .btn-google {
        min-height: 58px !important;
        border-radius: 18px !important;
      }

      /* ── Apple fields ── */
      input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]) {
        -webkit-appearance: none; appearance: none;
        border-radius: 14px !important;
        transition: border-color 0.2s var(--apple-ease), box-shadow 0.25s var(--apple-ease), background 0.2s !important;
      }
      input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus {
        outline: none !important;
        border-color: var(--orange) !important;
        box-shadow: 0 0 0 3px rgba(var(--orange-rgb), 0.22), 0 0 0 1px rgba(var(--orange-rgb), 0.45) inset !important;
      }

      /* ── Verified badge: Apple green ── */
      .apple-verified {
        display: inline-flex;
        align-items: center; justify-content: center;
        width: 24px; height: 24px;
        flex-shrink: 0;
        border-radius: 50%;
        background: radial-gradient(circle at 30% 25%, #4cd964, var(--apple-green) 60%, #28a745);
        color: #fff;
        box-shadow: 0 4px 10px rgba(var(--apple-green-rgb), 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
        animation: appleBadgePop 0.5s var(--apple-spring);
      }
      .apple-verified svg { width: 15px; height: 15px; }
      .apple-ava { position: relative; display: inline-flex; }
      .apple-ava-badge {
        position: absolute;
        bottom: -2px; inset-inline-end: -2px;
        width: 15px; height: 15px;
        border-radius: 50%;
        background: radial-gradient(circle at 30% 25%, #4cd964, var(--apple-green) 60%, #28a745);
        color: #fff;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 0 0 2px var(--bg-base), 0 3px 8px rgba(var(--apple-green-rgb), 0.5);
      }
      .apple-ava-badge svg { width: 9px; height: 9px; }
      @keyframes appleBadgePop {
        from { transform: scale(0); }
        to   { transform: scale(1); }
      }
      .apple-verified-chip {
        display: inline-flex; align-items: center; gap: 6px;
        margin: 0;
        padding: 6px 14px;
        border-radius: 999px;
        background: rgba(var(--apple-green-rgb), 0.12);
        border: 1px solid rgba(var(--apple-green-rgb), 0.30);
        color: var(--apple-green);
        font-weight: 800;
        font-size: 0.82rem;
      }

      /* ── Apple notice (unverified email) ── */
      .apple-notice {
        width: 100%; max-width: 440px;
        padding: 18px;
        border-radius: 20px;
        background: rgba(255, 149, 0, 0.10);
        border: 1px solid rgba(255, 149, 0, 0.30);
        color: var(--ink);
        font-size: 0.88rem;
        line-height: 1.7;
        text-align: start;
      }
      .apple-notice-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
      .apple-notice-head svg { width: 20px; height: 20px; flex-shrink: 0; color: #ff9500; }
      .apple-notice p { margin: 0 0 12px; }
      .apple-notice-actions { display: flex; gap: 10px; flex-wrap: wrap; }
      .apple-notice-actions .btn-ghost, .apple-notice-actions .btn-primary { flex: 1; min-height: 44px; }
      .apple-notice-status { margin: 10px 0 0; font-size: 0.85rem; color: var(--muted); min-height: 1.2em; }

      /* ── Page hero: Apple large title ── */
      html:not(.in-game) .page-hero h1 {
        font-size: clamp(1.65rem, 5.2vw, 2.5rem) !important;
        letter-spacing: -0.03em !important;
        font-weight: 800 !important;
      }

      /* ── Scrollbars (Chrome/Edge) ── */
      ::-webkit-scrollbar { width: 10px; height: 10px; }
      ::-webkit-scrollbar-thumb { background: rgba(120, 113, 108, 0.4); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
      ::-webkit-scrollbar-thumb:hover { background: rgba(120, 113, 108, 0.6); border: 2px solid transparent; background-clip: padding-box; }

      /* ── Reduced motion ── */
      @media (prefers-reduced-motion: reduce) {
        .apple-auth-card, .modal-card, .wd-modal-card, .settings-panel, .consent-card, .apple-verified {
          animation: none !important;
        }
        .summary-card, .btn-primary, .btn-ghost, .btn-google, .bnav-link, .bnav-center { transition: none !important; }
      }

      /* ── Tier 1: section-head + wallet icons ── */
      .hico { width: 18px; height: 18px; flex-shrink: 0; color: #ff9a5a; }
      .bbx-wallet .gem svg { width: 17px; height: 17px; display: block; color: #ff9a5a; }

      /* ── Tier 1: settings bottom sheet (slides up from the bottom) ── */
      .settings-panel {
        position: fixed !important;
        inset-inline: 0 !important;
        top: auto !important;
        right: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        width: min(100%, 460px) !important;
        height: auto !important;
        max-height: 78vh !important;
        margin: 0 auto !important;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        will-change: transform;
        z-index: 2000 !important;
        border-radius: 24px 24px 0 0 !important;
        padding: 8px 12px calc(14px + env(safe-area-inset-bottom));
        background: var(--apple-glass-strong) !important;
        -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
        backdrop-filter: blur(40px) saturate(180%) !important;
        border: none !important;
        box-shadow: 0 -12px 60px rgba(0, 0, 0, 0.4), 0 1px 0 var(--apple-hairline) !important;
        display: none;
        flex-direction: column;
        gap: 12px;
      }
      html:not(.dark) .settings-panel { box-shadow: 0 -12px 60px rgba(28, 25, 23, 0.22), 0 1px 0 var(--apple-hairline) !important; }
      .settings-panel.show {
        display: flex;
        animation: settingsSlideUp 0.4s var(--apple-spring) !important;
      }
      @keyframes settingsSlideUp {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
      }
      .settings-grab {
        display: flex;
        justify-content: center;
        padding: 8px 0 4px;
        cursor: grab;
        touch-action: none;
        flex-shrink: 0;
        -webkit-user-select: none;
        user-select: none;
      }
      .settings-grab:active { cursor: grabbing; }
      .settings-handle {
        width: 44px;
        height: 5px;
        border-radius: 999px;
        background: rgba(120, 120, 128, 0.4);
      }
      .settings-head {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        flex-shrink: 0;
        padding: 6px 6px 12px;
        border-bottom: 1px solid var(--apple-hairline);
      }
      .settings-title {
        font-size: 1.15rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: var(--ink);
        text-align: center;
      }
      .settings-close {
        width: 34px;
        height: 34px;
        border: none;
        border-radius: 50%;
        background: rgba(120, 120, 128, 0.16);
        color: var(--ink);
        font-size: 1rem;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.2s var(--apple-ease), transform 0.2s var(--apple-spring);
      }
      .settings-close:hover { background: rgba(120, 120, 128, 0.28); }
      .settings-close:active { transform: scale(0.9); }
      .settings-group {
        border-radius: 16px;
        overflow: hidden;
        flex-shrink: 0;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid var(--apple-hairline);
      }
      html:not(.dark) .settings-group { background: rgba(0, 0, 0, 0.04); }
      .settings-group .settings-item + .settings-item { border-top: 1px solid var(--apple-hairline); }
      .settings-item {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 13px 16px;
        min-height: 52px;
        background: none;
        border: none;
        color: var(--ink);
        font: inherit;
        font-size: 0.95rem;
        font-weight: 500;
        text-align: start;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.15s ease;
      }
      .settings-item:hover { background: rgba(255, 255, 255, 0.04); }
      .settings-item:active { background: rgba(255, 255, 255, 0.08); }
      html:not(.dark) .settings-item:hover { background: rgba(0, 0, 0, 0.03); }
      .settings-item .s-icon {
        width: 30px; height: 30px;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
        border-radius: 8px;
        color: #ff9a5a;
        background: rgba(255, 165, 105, 0.16);
        box-shadow: none;
      }
      .settings-item .s-icon svg { width: 16px; height: 16px; }
      .settings-item .s-label { flex: 1; }
      .settings-item .s-chev { color: var(--text-secondary); opacity: 0.7; display: flex; flex-shrink: 0; }
      .settings-item .s-chev svg { width: 14px; height: 14px; }
      .settings-item .switch {
        width: 46px; height: 28px;
        border-radius: 999px;
        background: rgba(120, 120, 128, 0.32);
        position: relative;
        flex-shrink: 0;
        transition: background 0.25s ease;
        display: inline-block;
      }
      .settings-item .switch i {
        position: absolute;
        top: 2px;
        inset-inline-start: 2px;
        width: 24px; height: 24px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        transition: inset-inline-start 0.25s var(--apple-spring), transform 0.25s var(--apple-spring);
      }
      .settings-item .switch.on { background: var(--apple-green); }
      .settings-item .switch.on i { inset-inline-start: calc(100% - 26px); }

      /* ── Tier 1: dock active pill ── */
      .bnav-link { transition: color 0.2s var(--apple-ease), background 0.2s var(--apple-ease), transform 0.2s var(--apple-ease); }
      .bnav-link.active {
        background: linear-gradient(180deg, rgba(255, 143, 71, 0.16), rgba(255, 111, 46, 0.24)) !important;
        box-shadow: inset 0 0 0 1px rgba(255, 111, 46, 0.30) !important;
        border-radius: 18px;
        color: #ff8c46 !important;
      }

      /* ── Tier 1: iOS page transition (all views) ── */
      .fade-in {
        animation: appleFadeIn 0.45s var(--apple-spring) both;
      }
      @keyframes appleFadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to   { opacity: 1; transform: translateY(0); }
      }

      /* ── Tier 1: boot skeleton ── */
      .boot-skeleton {
        max-width: 560px;
        margin: 0 auto;
        padding: 16px 16px 120px;
        display: flex;
        flex-direction: column;
        gap: 16px;
      }
      .sk-chips { display: flex; gap: 8px; }
      .sk-chip, .sk-banner, .sk-head, .sk-card {
        border-radius: 14px;
        background: linear-gradient(100deg, rgba(120, 120, 128, 0.14) 40%, rgba(120, 120, 128, 0.26) 50%, rgba(120, 120, 128, 0.14) 60%);
        background-size: 200% 100%;
        animation: appleShimmer 1.4s ease-in-out infinite;
      }
      @keyframes appleShimmer {
        0%   { background-position: 200% 0; }
        100% { background-position: -200% 0; }
      }
      .sk-chip { height: 34px; width: 74px; }
      .sk-banner { height: 210px; }
      .sk-head { height: 22px; width: 140px; margin: 10px 0 4px; }
      .sk-row { display: flex; gap: 12px; }
      .sk-card { height: 148px; width: 108px; flex-shrink: 0; }

      /* ── Loading Screen ── */
      #boot-splash {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: #09090b;
        overflow: hidden;
        transition: opacity 0.4s ease, visibility 0.4s ease;
      }
      #boot-splash.splash-hide { opacity: 0; visibility: hidden; pointer-events: none; }

      .ls-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 22px;
        flex: 1;
        justify-content: center;
        padding: 24px;
      }
      .ls-logo-wrap {
        position: relative;
        width: 88px;
        height: 88px;
        animation: lsPopIn 0.6s cubic-bezier(0.16,1,0.3,1) both;
      }
      .ls-logo {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 22px;
        object-fit: cover;
      }

      .ls-spinner {
        position: relative;
        width: 64px;
        height: 64px;
        animation: lsFadeIn 0.4s ease 0.5s both;
      }
      .ls-spinner svg {
        width: 100%;
        height: 100%;
        transform: rotate(-90deg);
        animation: lsSpinRotate 2s linear infinite;
      }
      .ls-spinner-bg {
        stroke: rgba(255,255,255,0.1);
      }
      .ls-spinner-ring {
        stroke: #ff6b2b;
        stroke-linecap: round;
        transition: stroke-dashoffset 0.4s cubic-bezier(0.16,1,0.3,1);
      }
      .ls-spinner .ls-pct {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.68rem;
        font-weight: 800;
        color: rgba(255,255,255,0.9);
        font-variant-numeric: tabular-nums;
      }
      .ls-msg {
        font-family: 'Cairo', sans-serif;
        font-size: 0.92rem;
        font-weight: 600;
        color: rgba(255,255,255,0.55);
        text-align: center;
        min-height: 1.4em;
        animation: lsFadeIn 0.4s ease 0.7s both;
      }
      .ls-bottom {
        padding: 0 32px calc(16px + env(safe-area-inset-bottom));
        text-align: center;
      }
      .ls-ver {
        font-size: 0.65rem;
        font-weight: 600;
        color: rgba(255,255,255,0.15);
        letter-spacing: 0.04em;
      }
      .ls-pct {
        font-size: 0.65rem;
        font-weight: 600;
        color: rgba(255,255,255,0.2);
        font-variant-numeric: tabular-nums;
      }

      .ls-error {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 0 32px;
        text-align: center;
      }
      .ls-err-icon { font-size: 2.5rem; }
      .ls-err-msg {
        font-family: 'Cairo', sans-serif;
        font-size: 1.1rem;
        font-weight: 700;
        color: #fff;
      }
      .ls-err-sub {
        font-size: 0.85rem;
        color: rgba(255,255,255,0.55);
        line-height: 1.5;
      }
      .ls-retry-btn, .ls-offline-btn {
        margin-top: 8px;
        padding: 12px 32px;
        border: none;
        border-radius: 12px;
        font-family: 'Cairo', sans-serif;
        font-size: 0.95rem;
        font-weight: 700;
        cursor: pointer;
        transition: transform 0.15s, opacity 0.15s;
      }
      .ls-retry-btn {
        background: linear-gradient(135deg, #ff6b2b, #ff5c1a);
        color: #fff;
        box-shadow: 0 4px 16px rgba(255,107,43,0.35);
      }
      .ls-retry-btn:active { transform: scale(0.96); }
      .ls-offline-btn {
        background: rgba(255,255,255,0.06);
        color: rgba(255,255,255,0.6);
        border: 1px solid rgba(255,255,255,0.08);
      }
      .ls-offline-btn:active { transform: scale(0.96); }

      @keyframes lsPopIn {
        from { opacity: 0; transform: scale(0.6); }
        to   { opacity: 1; transform: scale(1); }
      }
      @keyframes lsSpinRotate {
        to { transform: rotate(270deg); }
      }
      @keyframes lsFadeIn {
        from { opacity: 0; transform: translateY(8px); }
        to   { opacity: 1; transform: translateY(0); }
      }

      html:not(.dark) #boot-splash { background: linear-gradient(180deg, #ffffff, #f5f1ec); }
      html:not(.dark) .ls-ver { color: rgba(0,0,0,0.2); }
      html:not(.dark) .ls-pct { color: rgba(0,0,0,0.3); }
      html:not(.dark) .ls-spinner-bg { stroke: rgba(0,0,0,0.08); }
      html:not(.dark) .ls-spinner .ls-pct { color: rgba(0,0,0,0.75); }
      html:not(.dark) .ls-msg { color: rgba(0,0,0,0.5); }
      html:not(.dark) .ls-err-msg { color: #1a1a1a; }
      html:not(.dark) .ls-err-sub { color: rgba(0,0,0,0.5); }
      html:not(.dark) .ls-offline-btn { background: rgba(0,0,0,0.04); color: rgba(0,0,0,0.5); border-color: rgba(0,0,0,0.08); }

      @media (prefers-reduced-motion: reduce) {
        .ls-logo-wrap, .ls-msg, .ls-ver, .ls-pct, .ls-spinner svg { animation: none !important; opacity: 1 !important; transform: none !important; }
        .ls-spinner-ring { transition: none !important; }
      }

      /* ── Tier 1: designed games empty state ── */
      .games-empty-msg {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        text-align: center;
        padding: 40px 20px;
      }
      .games-empty-msg .empty-icon {
        width: 64px; height: 64px;
        display: flex; align-items: center; justify-content: center;
        border-radius: 50%;
        background: rgba(120, 120, 128, 0.12);
        color: var(--text-secondary);
        margin-bottom: 8px;
      }
      .games-empty-msg .empty-icon svg { width: 30px; height: 30px; }
      .games-empty-msg h3 { margin: 0; font-size: 1.05rem; font-weight: 800; }
      .games-empty-msg p { margin: 0; color: var(--text-secondary); font-size: 0.9rem; }
      .games-empty-msg .empty-clear { min-height: 44px; margin-top: 10px; }

      /* ── How to Play: Apple guide ── */
      #howtoplay-page .theme-section {
        background: var(--surface);
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin-bottom: 0 !important;
        animation: none !important;
        padding: 0;
      }
      #howtoplay-page .htp-intro { padding: 4px 6px 0; margin-bottom: 20px; }
      #howtoplay-page .htp-intro h3 {
        margin: 0 0 6px;
        font-size: 1rem;
        font-weight: 800;
        letter-spacing: -0.01em;
      }
      #howtoplay-page .htp-intro p { margin: 0; color: var(--muted); line-height: 1.7; font-size: 0.95rem; }
      #howtoplay-page .htp-search-wrap {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        margin-bottom: 26px;
        padding: 0 14px !important;
        border-radius: 14px !important;
        background: rgba(120, 120, 128, 0.12) !important;
        transition: background 0.2s var(--apple-ease), box-shadow 0.2s var(--apple-ease);
      }
      #howtoplay-page .htp-search-wrap:focus-within {
        background: rgba(120, 120, 128, 0.16) !important;
        box-shadow: 0 0 0 3px rgba(var(--orange-rgb), 0.22);
      }
      #howtoplay-page .htp-search-ico { width: 17px; height: 17px; flex-shrink: 0; color: var(--muted); }
      #howtoplay-page #htp-search {
        flex: 1;
        min-width: 0;
        min-height: 40px;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        padding: 0 !important;
        font-size: 0.92rem;
        color: var(--ink);
      }
      #howtoplay-page #htp-search:focus { box-shadow: none !important; }
      #howtoplay-page .htp-list {
        overflow: hidden;
        border-radius: 22px !important;
        border: 1px solid var(--line);
        background: var(--surface);
      }
      #howtoplay-page details.theme-section.htp-item {
        padding: 0 !important;
        border-radius: 0 !important;
        background: var(--surface);
        border-inline-start: 0 !important;
        border-inline-end: 0 !important;
      }
      #howtoplay-page details.theme-section.htp-item + details.theme-section.htp-item {
        border-top: 0.5px solid rgba(120, 120, 128, 0.28) !important;
      }
      #howtoplay-page .htp-item > summary {
        list-style: none;
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 52px;
        padding-inline: 16px;
        -webkit-user-select: none;
        user-select: none;
        cursor: pointer;
      }
      #howtoplay-page .htp-item > summary::-webkit-details-marker { display: none; }
      #howtoplay-page .htp-item > summary:active { background: rgba(120, 120, 128, 0.08); }
      #howtoplay-page .htp-ico {
        width: 34px;
        height: 34px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 9px;
        background: rgba(120, 120, 128, 0.10);
        font-size: 17px;
      }
      #howtoplay-page .htp-name {
        flex: 1;
        font-weight: 600;
        font-size: 1rem;
        color: var(--ink);
      }
      #howtoplay-page .htp-chev {
        width: 9px;
        height: 9px;
        flex-shrink: 0;
        border-right: 2px solid rgba(120, 120, 128, 0.55);
        border-bottom: 2px solid rgba(120, 120, 128, 0.55);
        transform: rotate(-45deg);
        transition: transform 0.25s var(--apple-ease);
      }
      #howtoplay-page details[open] .htp-chev { transform: rotate(45deg); }
      #howtoplay-page[dir='rtl'] .htp-chev { transform: rotate(135deg); }
      #howtoplay-page[dir='rtl'] details[open] .htp-chev { transform: rotate(-45deg); }
      #howtoplay-page .htp-item > p,
      #howtoplay-page .htp-item > div {
        margin: 0 !important;
        padding-block-start: 6px;
        padding-block-end: 20px;
        padding-inline-start: 62px;
        padding-inline-end: 18px;
        color: var(--muted);
        line-height: 1.65 !important;
        font-size: 0.92rem !important;
      }
      #howtoplay-page .htp-footer { text-align: center; padding: 28px 16px 8px; }
      #howtoplay-page .htp-footer p { margin: 0 0 12px; color: var(--muted); font-size: 0.9rem; }
      #howtoplay-page .htp-footer .btn-primary { min-height: 48px; min-width: 200px; }
      html.dark #howtoplay-page details.theme-section.htp-item + details.theme-section.htp-item {
        border-top-color: rgba(255, 255, 255, 0.12) !important;
      }

      @media (prefers-reduced-motion: reduce) {
        .settings-panel.show { animation: none !important; }
        .fade-in { animation: none !important; }
        .sk-chip, .sk-banner, .sk-head, .sk-card { animation: none !important; }
        #boot-splash { transition: none !important; }
        .settings-item .switch i { transition: none !important; }
        .bnav-link.active { border-radius: 18px; }
      }

      .bbx-home-searchbar { padding: 2px 0 6px; display: flex; gap: 6px; align-items: center; }
      .bbx-home-search-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1;
        height: 38px;
        padding: 0 12px;
        border-radius: 12px;
        border: 1px solid rgba(120, 120, 128, 0.22) !important;
        background: rgba(120, 120, 128, 0.12) !important;
        color: var(--ink) !important;
        font-size: 0.85rem;
        font-weight: 600;
        text-align: start;
        cursor: pointer;
        font-family: inherit;
      }
      .bbx-home-search-btn svg {
        width: 16px;
        height: 16px;
        flex: none;
        color: var(--orange) !important;
      }
      .bbx-home-search-btn:hover {
        background: rgba(120, 120, 128, 0.18) !important;
      }

      .all-games-more {
        justify-content: flex-start !important;
        text-decoration: none !important;
      }
      .all-games-more > strong.am-arrow {
        aspect-ratio: 1/1;
        width: 100% !important;
        height: auto !important;
        margin: 0 0 7px !important;
        border-radius: 15px !important;
        font-size: 2.1rem !important;
        line-height: 1 !important;
        color: var(--orange) !important;
        background: rgba(120, 120, 128, 0.12) !important;
        border: 1.5px dashed rgba(120, 120, 128, 0.4) !important;
        box-shadow: none !important;
        transition: background 0.18s, border-color 0.18s;
      }
      .all-games-more > strong.am-arrow::before,
      .all-games-more > strong.am-arrow::after { display: none !important; }
      .all-games-more .am-txt {
        display: none;
        margin: 8px 0 0 !important;
        font-size: 0.76rem !important;
        font-weight: 800;
        line-height: 1.3;
        text-align: center;
        color: var(--orange) !important;
      }
      .all-games-more:hover .am-txt,
      .all-games-more:active .am-txt,
      .all-games-more:focus-visible .am-txt { display: block; }
      .all-games-more:hover > strong.am-arrow,
      .all-games-more:active > strong.am-arrow {
        background: rgba(255, 149, 0, 0.16) !important;
        border-color: rgba(255, 149, 0, 0.5) !important;
      }

      .bbx-follow { display: flex; flex-wrap: wrap; gap: 12px; padding: 2px 0; }      .platform-chip {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(120, 120, 128, 0.12) !important;
        border: 1px solid rgba(120, 120, 128, 0.2) !important;
        text-decoration: none;
        transition: transform 0.18s;
      }
      .platform-chip svg { width: 22px; height: 22px; }
      .platform-chip:hover { transform: translateY(-2px); }
      .p-instagram { color: #e4405f !important; }
      .p-tiktok { color: #000 !important; }
      .p-github { color: #24292f !important; }
      .p-play { color: #00b0f0 !important; }
      html.dark .p-tiktok { color: #fff !important; }
      html.dark .p-github { color: #e6edf3 !important; }

      .settings-appearance {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 12px 16px;
        border-bottom: 1px solid var(--line);
      }
      .settings-appearance:last-of-type { border-bottom: 0; }
      .settings-appearance .s-label { flex: none; font-size: 0.9rem; }
      .acc-swatches { display: flex; gap: 10px; }
      .acc-swatch {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 2px solid transparent;
        cursor: pointer;
        padding: 0;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
        transition: transform 0.15s;
      }
      .acc-swatch.on { border-color: var(--ink); transform: scale(1.14); }
      .acc-pills { display: flex; gap: 8px; }
      .acc-pills button {
        min-width: 44px;
        height: 34px;
        border-radius: 10px;
        border: 1px solid var(--line);
        background: rgba(120, 120, 128, 0.12);
        color: var(--ink);
        font-weight: 700;
        font-size: 0.85rem;
        cursor: pointer;
        font-family: inherit;
      }
      .acc-pills button.on {
        background: var(--orange);
        border-color: var(--orange);
        color: #fff;
      }