/* ===========================================================================
   fullhd-tv.css — Responsive overrides for Full HD displays (≥1920px)
   ===========================================================================
   Cible : écrans TV 40" Full HD (1920×1080) en POS + display client.
   Stratégie : FILL the screen (no max-width centering), boost typography
   et composants réutilisés (sigma.* + Bootstrap). Les modules métier
   (Keno, etc.) ajoutent leurs propres règles fluides (CSS Grid + clamp/vw)
   dans leur template.

   Aucun effet sous 1920px → mobile/laptop intacts.
   =========================================================================== */

@media (min-width: 1920px) {

  :root {
    --tv-scale: 1.5;
    --tv-ball-size: 36px;
    --tv-pill-size: 32px;
  }

  html { font-size: 18px; }

  body {
    font-size: 1.05rem;
    line-height: 1.55;
  }

  /* ============================================================
     LAYOUT — remplir l'écran (pas de centrage à 1280px)
     ============================================================ */

  main#main-content { padding: 0 2vw; }

  /* sigma.css lignes 586-587 : .sigma-layout / .sigma-layout-wide centrent à 1280px */
  .sigma-layout, .sigma-layout-wide {
    max-width: none !important;
    padding: 1.5vw 2vw !important;
  }
  .sigma-layout { grid-template-columns: 18vw 1fr !important; gap: 2vw !important; }

  /* Bootstrap containers — élargir au max */
  .container, .container-sm, .container-md, .container-lg,
  .container-xl, .container-xxl {
    max-width: 100% !important;
    padding-left: 2vw;
    padding-right: 2vw;
  }

  /* ============================================================
     TYPOGRAPHIE GLOBALE — clamp() fluid
     ============================================================ */
  h1, .h1 { font-size: clamp(2rem, 2.6vw, 3.4rem); }
  h2, .h2 { font-size: clamp(1.5rem, 2vw, 2.6rem); }
  h3, .h3 { font-size: clamp(1.25rem, 1.6vw, 2.1rem); }
  h4, .h4 { font-size: clamp(1.1rem, 1.3vw, 1.7rem); }
  h5, .h5 { font-size: clamp(1rem, 1.15vw, 1.4rem); }

  /* ============================================================
     BOOTSTRAP — boutons, forms, badges, tables, cards, alerts
     ============================================================ */
  .btn { font-size: clamp(0.95rem, 1vw, 1.25rem); padding: .55rem 1.1rem; }
  .btn-sm { font-size: clamp(0.85rem, 0.9vw, 1.1rem); padding: .4rem .8rem; }
  .btn-lg { font-size: clamp(1.1rem, 1.2vw, 1.5rem); padding: .75rem 1.5rem; }

  .form-control, .form-select { font-size: clamp(0.95rem, 1vw, 1.25rem); padding: .55rem .9rem; }
  .form-label { font-size: clamp(0.85rem, 0.95vw, 1.15rem); }
  .input-group-text { font-size: clamp(0.95rem, 1vw, 1.25rem); }

  .badge { font-size: clamp(0.8rem, 0.85vw, 1.05rem); padding: .4em .7em; }

  .table { font-size: clamp(0.9rem, 1vw, 1.2rem); }
  .table th, .table td { padding: .75rem .9rem; }

  .card-body { padding: clamp(1.25rem, 1.5vw, 2rem); }
  .card-header { font-size: clamp(0.95rem, 1.1vw, 1.3rem); padding: 1rem 1.25rem; }

  .alert { font-size: clamp(0.95rem, 1vw, 1.2rem); padding: 1rem 1.25rem; }

  /* ============================================================
     BOOTSTRAP MODALS — full coverage (all sizes, header/body/footer)
     ============================================================ */
  .modal-dialog { max-width: clamp(540px, 42vw, 820px); }
  .modal-dialog.modal-sm { max-width: clamp(420px, 30vw, 600px); }
  .modal-dialog.modal-lg { max-width: clamp(800px, 60vw, 1200px); }
  .modal-dialog.modal-xl { max-width: clamp(1100px, 78vw, 1600px); }
  .modal-dialog.modal-fullscreen { max-width: 100%; }
  .modal-content { border-radius: clamp(12px, 1vw, 18px); }
  .modal-header {
    padding: clamp(1.1rem, 1.2vw, 1.8rem) clamp(1.4rem, 1.5vw, 2.2rem);
  }
  .modal-body {
    font-size: clamp(0.95rem, 1.05vw, 1.25rem);
    padding: clamp(1.4rem, 1.5vw, 2.2rem);
    line-height: 1.6;
  }
  .modal-footer {
    padding: clamp(1.1rem, 1.2vw, 1.8rem) clamp(1.4rem, 1.5vw, 2.2rem);
    gap: clamp(0.65rem, 0.7vw, 1.1rem);
  }
  .modal-title { font-size: clamp(1.2rem, 1.4vw, 1.8rem); }
  .modal-header .btn-close, .btn-close {
    width: clamp(1.2rem, 1.4vw, 1.8rem);
    height: clamp(1.2rem, 1.4vw, 1.8rem);
    background-size: contain;
  }
  .modal h1, .modal .h1, .modal h5, .modal .h5, .modal h6, .modal .h6 { font-size: clamp(1.15rem, 1.3vw, 1.65rem); }
  .modal-body ol, .modal-body ul { padding-left: clamp(22px, 1.6vw, 36px); }
  .modal-body ol li, .modal-body ul li { margin-bottom: clamp(0.35rem, 0.4vw, 0.65rem); }

  .list-group-item { font-size: clamp(0.95rem, 1vw, 1.2rem); padding: clamp(0.75rem, 0.9vw, 1.2rem); }
  .dropdown-menu { font-size: clamp(0.95rem, 1vw, 1.2rem); }
  .dropdown-item { padding: clamp(0.5rem, 0.6vw, 0.8rem) clamp(0.75rem, 0.9vw, 1.2rem); }

  /* ============================================================
     FORMS — additional Bootstrap controls
     ============================================================ */
  .form-check-input { width: clamp(1.1rem, 1.2vw, 1.6rem); height: clamp(1.1rem, 1.2vw, 1.6rem); margin-top: clamp(4px, 0.35vw, 7px); }
  .form-check-label { font-size: clamp(0.95rem, 1.05vw, 1.25rem); padding-left: clamp(4px, 0.3vw, 7px); }
  .form-switch .form-check-input { width: clamp(2.1rem, 2.4vw, 3.2rem); height: clamp(1.1rem, 1.2vw, 1.6rem); }
  .form-floating > label { font-size: clamp(0.95rem, 1.05vw, 1.25rem); padding: clamp(0.7rem, 0.8vw, 1.2rem) clamp(0.85rem, 1vw, 1.4rem); }
  .form-text { font-size: clamp(0.82rem, 0.92vw, 1.1rem); }
  textarea.form-control { font-size: clamp(0.95rem, 1.05vw, 1.25rem); }

  /* ============================================================
     NAVS, PAGINATION, BREADCRUMB, ACCORDION (Bootstrap)
     ============================================================ */
  .nav-tabs .nav-link, .nav-pills .nav-link {
    font-size: clamp(0.95rem, 1.05vw, 1.25rem);
    padding: clamp(0.7rem, 0.8vw, 1.15rem) clamp(1.2rem, 1.3vw, 1.8rem);
    min-height: clamp(50px, 3.2vw, 64px);
  }
  .breadcrumb { font-size: clamp(0.92rem, 1.05vw, 1.25rem); }
  .breadcrumb-item { padding-right: clamp(0.5rem, 0.55vw, 0.85rem); }
  .page-link { font-size: clamp(0.95rem, 1.05vw, 1.25rem); padding: clamp(0.55rem, 0.65vw, 0.95rem) clamp(0.95rem, 1vw, 1.4rem); min-height: clamp(46px, 2.9vw, 58px); }
  .accordion-button {
    font-size: clamp(1rem, 1.15vw, 1.35rem);
    padding: clamp(1rem, 1.1vw, 1.6rem) clamp(1.3rem, 1.4vw, 2rem);
    min-height: clamp(60px, 3.8vw, 78px);
  }
  .accordion-body {
    font-size: clamp(0.95rem, 1.05vw, 1.25rem);
    padding: clamp(1.2rem, 1.3vw, 1.9rem) clamp(1.3rem, 1.4vw, 2rem);
  }
  .accordion-header { font-size: inherit; }
  .progress { height: clamp(10px, 0.8vw, 16px); border-radius: clamp(5px, 0.4vw, 8px); }
  .progress-bar { font-size: clamp(0.82rem, 0.95vw, 1.1rem); }

  /* ============================================================
     COMMON DARK DASHBOARD / WALLET / TRANSACTION CONVENTIONS
     ============================================================ */
  .balance-pill, .wallet-balance, .balance-display {
    font-size: clamp(1.6rem, 1.9vw, 2.6rem) !important;
    padding: clamp(0.85rem, 0.95vw, 1.4rem) clamp(1.6rem, 1.5vw, 2.4rem) !important;
    border-radius: clamp(10px, 0.8vw, 14px) !important;
  }
  .tx-row, .transaction-row {
    padding: clamp(1rem, 1.1vw, 1.6rem) clamp(1.3rem, 1.4vw, 2rem) !important;
    font-size: clamp(1rem, 1.15vw, 1.35rem) !important;
  }
  .tx-amount { font-size: clamp(1.2rem, 1.35vw, 1.65rem) !important; font-weight: 800; }
  .tx-meta, .tx-date { font-size: clamp(0.9rem, 1vw, 1.2rem) !important; }
  .stat-card, .info-card, .data-card {
    padding: clamp(1.5rem, 1.6vw, 2.4rem) !important;
    border-radius: clamp(12px, 0.9vw, 16px) !important;
  }
  .data-card .label, .stat-card .label { font-size: clamp(0.85rem, 0.95vw, 1.15rem) !important; }
  .data-card .value, .stat-card .value { font-size: clamp(1.6rem, 1.9vw, 2.5rem) !important; font-weight: 800; }

  /* ============================================================
     CASINO GAMES — common patterns
     (shared across crash/mines/plinko/dice/hilo/chicken/cockfight/etc.)
     ============================================================ */
  .cb-card {
    padding: clamp(1.6rem, 1.7vw, 2.6rem) !important;
    border-radius: clamp(14px, 1vw, 18px) !important;
    margin-bottom: clamp(1.2rem, 1.3vw, 2rem) !important;
  }
  .balance-pill {
    font-size: clamp(1.1rem, 1.25vw, 1.5rem) !important;
    padding: clamp(0.7rem, 0.8vw, 1.2rem) clamp(1.2rem, 1.3vw, 1.8rem) !important;
    border-radius: clamp(9px, 0.6vw, 12px) !important;
  }
  .bet-amt-btn {
    font-size: clamp(1rem, 1.15vw, 1.35rem) !important;
    padding: clamp(0.6rem, 0.65vw, 1rem) clamp(1.1rem, 1vw, 1.5rem) !important;
    min-height: clamp(50px, 3.2vw, 64px) !important;
    border-radius: clamp(8px, 0.55vw, 11px) !important;
  }
  .btn-bet {
    font-size: clamp(1.3rem, 1.55vw, 2rem) !important;
    padding: clamp(1.1rem, 1.25vw, 1.7rem) !important;
    border-radius: clamp(12px, 0.9vw, 16px) !important;
    min-height: clamp(68px, 4.6vw, 92px) !important;
  }
  .kpi-line {
    font-size: clamp(1.05rem, 1.2vw, 1.45rem) !important;
    padding: clamp(0.65rem, 0.7vw, 1.05rem) 0 !important;
  }
  .kpi-line.big { font-size: clamp(1.6rem, 1.9vw, 2.4rem) !important; padding-top: clamp(1rem, 1.1vw, 1.5rem) !important; }
  .bomb-pill, .h-pill {
    font-size: clamp(0.95rem, 1.05vw, 1.25rem) !important;
    padding: clamp(6px, 0.5vw, 10px) clamp(12px, 0.9vw, 17px) !important;
    border-radius: clamp(7px, 0.5vw, 10px) !important;
  }
  /* casino game-page wallet stake input */
  .cb-card #stake, .cb-card .stake-input,
  .game-wrap input[type=number], .game-container input[type=number] {
    font-size: clamp(1.15rem, 1.3vw, 1.6rem) !important;
    padding: clamp(0.85rem, 0.95vw, 1.3rem) clamp(1.1rem, 1.1vw, 1.6rem) !important;
    min-height: clamp(60px, 3.8vw, 78px) !important;
  }
  /* game page h3/h5 titles in cards */
  .cb-card h5.fw-bold { font-size: clamp(1.4rem, 1.6vw, 2rem) !important; margin-bottom: clamp(1.3rem, 1.4vw, 2rem) !important; }

  .game-wrap, .game-container { padding: clamp(1.5rem, 1.5vw, 2.6rem) 2vw; }
  .game-board, .game-canvas-wrap { border-radius: clamp(12px, 1vw, 18px); }
  .bet-controls, .bet-panel {
    padding: clamp(1.5rem, 1.6vw, 2.4rem) !important;
    border-radius: clamp(12px, 0.9vw, 16px) !important;
  }
  .bet-input, input.bet-amount {
    font-size: clamp(1.3rem, 1.5vw, 1.95rem) !important;
    padding: clamp(0.85rem, 0.95vw, 1.4rem) clamp(1.1rem, 1.2vw, 1.6rem) !important;
    min-height: clamp(60px, 3.8vw, 80px) !important;
    border-radius: clamp(10px, 0.8vw, 14px) !important;
  }
  .multiplier-display, .mult-display, .crash-multiplier {
    font-size: clamp(3rem, 4.5vw, 6.5rem) !important;
    font-weight: 900 !important;
  }
  .btn-bet, .btn-place-bet, .btn-cashout, .btn-spin, .btn-play {
    font-size: clamp(1.2rem, 1.4vw, 1.8rem) !important;
    padding: clamp(1rem, 1.15vw, 1.55rem) clamp(2rem, 1.8vw, 3rem) !important;
    border-radius: clamp(10px, 0.8vw, 14px) !important;
    min-height: clamp(64px, 4.2vw, 86px) !important;
    letter-spacing: 0.5px;
  }
  .history-row, .past-result {
    padding: clamp(0.85rem, 0.95vw, 1.4rem) clamp(1.1rem, 1.2vw, 1.6rem) !important;
    font-size: clamp(0.95rem, 1.1vw, 1.3rem) !important;
  }

  /* ============================================================
     USER PROFILE / KYC / DASHBOARD — common
     ============================================================ */
  .profile-header, .user-header {
    padding: clamp(2rem, 2.2vw, 3.4rem) !important;
    border-radius: clamp(14px, 1.1vw, 20px) !important;
  }
  .profile-avatar, .avatar-lg {
    width: clamp(96px, 6.5vw, 144px) !important;
    height: clamp(96px, 6.5vw, 144px) !important;
  }
  .profile-name, .user-name { font-size: clamp(1.6rem, 1.9vw, 2.5rem) !important; font-weight: 800; }
  .profile-meta, .user-meta { font-size: clamp(1rem, 1.15vw, 1.35rem) !important; }
  .kyc-step, .step-card {
    padding: clamp(1.6rem, 1.7vw, 2.6rem) !important;
    border-radius: clamp(12px, 0.9vw, 16px) !important;
  }
  .kyc-step-num, .step-num {
    width: clamp(48px, 3.2vw, 64px) !important;
    height: clamp(48px, 3.2vw, 64px) !important;
    font-size: clamp(1.25rem, 1.4vw, 1.7rem) !important;
  }

  /* ============================================================
     COMMON OVERLAY/POPUP PATTERNS (cookie, mascotte, ticker, etc.)
     ============================================================ */
  .cookie-consent, .feedback-modal-floater, .welcome-popup, .goodbye-popup {
    font-size: clamp(0.95rem, 1.05vw, 1.25rem);
    padding: clamp(1.2rem, 1.3vw, 1.9rem) clamp(1.5rem, 1.5vw, 2.3rem);
    border-radius: clamp(12px, 0.9vw, 16px);
  }
  .ticker, #ticker { font-size: clamp(1rem, 1.15vw, 1.35rem) !important; padding: clamp(0.6rem, 0.7vw, 1.1rem) 0 !important; }
  .toast { font-size: clamp(0.95rem, 1.05vw, 1.25rem); }
  .toast-body { padding: clamp(0.95rem, 1.05vw, 1.5rem) clamp(1.2rem, 1.3vw, 1.8rem); }

  /* ============================================================
     SIGMA — cards, stats, tables, btns, inputs, badges
     ============================================================ */

  .sigma-card-header {
    padding: clamp(14px, 1.1vw, 24px) clamp(20px, 1.4vw, 32px) !important;
  }
  .sigma-card-title { font-size: clamp(13px, 0.95vw, 18px) !important; }
  .sigma-card-body { padding: clamp(20px, 1.5vw, 32px) !important; }

  .sigma-stat { padding: clamp(20px, 1.6vw, 36px) !important; }
  .sigma-stat-label { font-size: clamp(11px, 0.85vw, 16px) !important; margin-bottom: clamp(8px, 0.6vw, 14px) !important; }
  .sigma-stat-value { font-size: clamp(26px, 2.2vw, 48px) !important; }
  .sigma-stat-sub { font-size: clamp(11px, 0.85vw, 16px) !important; }
  .sigma-stat-icon { font-size: clamp(22px, 1.8vw, 40px) !important; top: clamp(16px, 1.2vw, 24px) !important; right: clamp(16px, 1.2vw, 24px) !important; }

  .sigma-table { font-size: clamp(13px, 1vw, 18px) !important; }
  .sigma-table thead th { padding: clamp(11px, 0.9vw, 18px) clamp(16px, 1.2vw, 24px) !important; font-size: clamp(10px, 0.8vw, 15px) !important; }
  .sigma-table tbody td { padding: clamp(13px, 1vw, 20px) clamp(16px, 1.2vw, 24px) !important; }
  .sigma-table-empty { font-size: clamp(13px, 1vw, 18px) !important; padding: clamp(48px, 4vw, 80px) clamp(20px, 1.5vw, 32px) !important; }

  .sigma-btn { font-size: clamp(13px, 1vw, 18px) !important; padding: clamp(9px, 0.7vw, 14px) clamp(18px, 1.3vw, 28px) !important; border-radius: clamp(10px, 0.7vw, 14px) !important; }
  .sigma-btn-sm { font-size: clamp(11px, 0.85vw, 15px) !important; padding: clamp(5px, 0.4vw, 9px) clamp(11px, 0.85vw, 17px) !important; }
  .sigma-btn-lg { font-size: clamp(15px, 1.15vw, 21px) !important; padding: clamp(13px, 1vw, 20px) clamp(26px, 1.8vw, 38px) !important; }

  .sigma-input { font-size: clamp(14px, 1vw, 18px) !important; padding: clamp(10px, 0.8vw, 16px) clamp(14px, 1vw, 20px) !important; }
  .sigma-label { font-size: clamp(11px, 0.85vw, 16px) !important; }
  .sigma-form-group { margin-bottom: clamp(16px, 1.2vw, 28px) !important; }

  .sigma-badge { font-size: clamp(11px, 0.85vw, 16px) !important; padding: clamp(3px, 0.3vw, 6px) clamp(10px, 0.8vw, 16px) !important; }

  /* sigma grids — espacement boost */
  .sigma-grid-2, .sigma-grid-3, .sigma-grid-4 { gap: clamp(16px, 1.3vw, 28px) !important; }

  /* ============================================================
     COMPOSANTS GÉNÉRIQUES RÉUTILISÉS
     ============================================================ */
  .mini-ball {
    width: clamp(28px, 2vw, 50px) !important;
    height: clamp(28px, 2vw, 50px) !important;
    font-size: clamp(11px, 0.85vw, 18px) !important;
    margin: 2px !important;
  }
  .num-pill {
    width: clamp(28px, 1.9vw, 46px) !important;
    height: clamp(28px, 1.9vw, 46px) !important;
    font-size: clamp(11px, 0.85vw, 16px) !important;
    line-height: clamp(28px, 1.9vw, 46px) !important;
    margin: 2px !important;
  }

  .badge-pending, .badge-won, .badge-lost, .badge-paid {
    font-size: clamp(0.8rem, 0.85vw, 1.05rem) !important;
    padding: 5px 12px !important;
  }

  /* Icones FontAwesome dans headers */
  .card-header i, .k-card-header i, .sigma-card-header i { font-size: 1.1em; }

  /* Wrappers avec max-width inline 1100/1280/1300px → fill l'écran */
  body div[style*="max-width:1280px"],
  body div[style*="max-width:1300px"],
  body div[style*="max-width:1100px"],
  body div[style*="max-width: 1280px"],
  body div[style*="max-width: 1300px"],
  body div[style*="max-width: 1100px"] {
    max-width: none !important;
    padding-left: 2vw !important;
    padding-right: 2vw !important;
  }

  /* ============================================================
     POS (pos/base.html + pos/dashboard.html + sell_*)
     ============================================================ */
  .pos-main, .pos-broadcast-stack {
    max-width: none !important;
    padding-left: 2vw !important;
    padding-right: 2vw !important;
  }
  .pos-topbar { padding: 0.8vw 1.5vw !important; gap: 1.2vw !important; }
  .pos-brand { font-size: clamp(1.1rem, 1.2vw, 1.6rem) !important; }
  .pos-brand .logo { width: clamp(36px, 2.5vw, 60px) !important; height: clamp(36px, 2.5vw, 60px) !important; }
  .pos-nav a { font-size: clamp(0.85rem, 1vw, 1.2rem) !important; padding: clamp(7px, 0.6vw, 12px) clamp(13px, 1vw, 20px) !important; }
  .pos-user-menu { font-size: clamp(0.85rem, 1vw, 1.2rem) !important; padding: clamp(6px, 0.5vw, 10px) clamp(12px, 1vw, 18px) !important; }
  .pos-user-menu .avatar { width: clamp(28px, 2vw, 44px) !important; height: clamp(28px, 2vw, 44px) !important; font-size: clamp(0.85rem, 1vw, 1.2rem) !important; }
  .pos-topbar .session-pill { font-size: clamp(0.8rem, 0.95vw, 1.15rem) !important; padding: clamp(5px, 0.5vw, 10px) clamp(12px, 1vw, 18px) !important; }
  .btn-logout { font-size: clamp(0.8rem, 0.95vw, 1.15rem) !important; padding: clamp(5px, 0.5vw, 10px) clamp(12px, 1vw, 18px) !important; }
  .pos-footer { font-size: clamp(0.8rem, 0.9vw, 1.1rem) !important; }

  /* Dashboard POS (kpi + action-btn + tbl + card-pos + section-title) */
  .hero-row { gap: clamp(12px, 1vw, 24px) !important; grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 16vw, 320px), 1fr)) !important; }
  .kpi { padding: clamp(16px, 1.3vw, 28px) clamp(18px, 1.4vw, 32px) !important; border-radius: clamp(12px, 0.8vw, 18px) !important; }
  .kpi .label { font-size: clamp(0.7rem, 0.85vw, 1.05rem) !important; }
  .kpi .value { font-size: clamp(1.75rem, 2.4vw, 3.6rem) !important; }
  .kpi .delta { font-size: clamp(0.78rem, 0.9vw, 1.1rem) !important; }

  .action-grid { gap: clamp(10px, 1vw, 20px) !important; grid-template-columns: repeat(auto-fit, minmax(clamp(150px, 12vw, 240px), 1fr)) !important; }
  .action-btn { padding: clamp(18px, 1.5vw, 32px) clamp(14px, 1.1vw, 24px) !important; border-radius: clamp(12px, 0.8vw, 18px) !important; }
  .action-btn .icon { font-size: clamp(1.85rem, 2.4vw, 3.6rem) !important; }
  .action-btn .label { font-size: clamp(0.85rem, 1vw, 1.3rem) !important; }
  .action-btn .sub { font-size: clamp(0.7rem, 0.85vw, 1.05rem) !important; }

  .section-title { font-size: clamp(0.78rem, 0.95vw, 1.15rem) !important; margin: clamp(22px, 1.8vw, 36px) 0 clamp(10px, 0.9vw, 18px) !important; }

  .card-pos { border-radius: clamp(12px, 0.8vw, 18px) !important; margin-bottom: clamp(14px, 1.1vw, 24px) !important; }
  .card-pos .head { padding: clamp(12px, 1vw, 20px) clamp(18px, 1.3vw, 28px) !important; font-size: clamp(0.85rem, 1vw, 1.25rem) !important; }
  .card-pos .body { padding: clamp(14px, 1.1vw, 24px) clamp(18px, 1.3vw, 28px) !important; }

  .tbl { font-size: clamp(0.85rem, 1vw, 1.25rem) !important; }
  .tbl th { font-size: clamp(0.7rem, 0.85vw, 1.05rem) !important; padding: clamp(8px, 0.7vw, 14px) clamp(12px, 1vw, 20px) !important; }
  .tbl td { padding: clamp(8px, 0.7vw, 14px) clamp(12px, 1vw, 20px) !important; }

  .bd-row { font-size: clamp(0.85rem, 1vw, 1.25rem) !important; padding: clamp(8px, 0.7vw, 14px) 0 !important; }

  .session-card-empty { padding: clamp(26px, 2vw, 44px) !important; border-radius: clamp(14px, 1vw, 22px) !important; }
  .btn-open-session { font-size: clamp(1rem, 1.15vw, 1.4rem) !important; padding: clamp(12px, 1vw, 20px) clamp(28px, 2.2vw, 44px) !important; border-radius: clamp(10px, 0.8vw, 16px) !important; }

  .stark-funds { padding: clamp(12px, 1vw, 20px) clamp(16px, 1.2vw, 24px) !important; border-radius: clamp(10px, 0.8vw, 16px) !important; font-size: clamp(0.9rem, 1vw, 1.2rem) !important; }

  /* ============================================================
     SPORT (sport_list + match_list + match_detail)
     ============================================================ */
  .filter-tab { font-size: clamp(0.875rem, 1vw, 1.25rem) !important; padding: clamp(13px, 1vw, 20px) clamp(22px, 1.5vw, 36px) !important; }

  .team-logo, .team-initials {
    width: clamp(32px, 2.5vw, 56px) !important;
    height: clamp(32px, 2.5vw, 56px) !important;
  }
  .team-initials { font-size: clamp(0.72rem, 0.85vw, 1rem) !important; }
  .team-item { font-size: clamp(0.92rem, 1.05vw, 1.3rem) !important; gap: clamp(9px, 0.7vw, 14px) !important; }

  .league-header { font-size: clamp(0.83rem, 1vw, 1.2rem) !important; padding: clamp(8px, 0.7vw, 14px) clamp(14px, 1vw, 22px) !important; }

  .live-card { min-width: clamp(270px, 22vw, 420px) !important; padding: clamp(14px, 1.1vw, 24px) !important; border-radius: clamp(10px, 0.8vw, 16px) !important; }
  .live-card .live-score { font-size: clamp(1.4rem, 1.7vw, 2.2rem) !important; }
  .live-card .match-minute { font-size: clamp(0.8rem, 0.95vw, 1.15rem) !important; }

  .match-row {
    padding: clamp(11px, 0.9vw, 18px) clamp(14px, 1.1vw, 24px) !important;
    grid-template-columns: 1fr clamp(72px, 6vw, 110px) auto !important;
    gap: clamp(16px, 1.2vw, 28px) !important;
  }
  .match-info .match-time { font-size: clamp(0.72rem, 0.85vw, 1.05rem) !important; }
  .match-score-cell { font-size: clamp(1.05rem, 1.25vw, 1.6rem) !important; }

  .odds-btn {
    font-size: clamp(0.8rem, 0.95vw, 1.2rem) !important;
    padding: clamp(5px, 0.5vw, 10px) clamp(10px, 0.85vw, 16px) !important;
    min-width: clamp(56px, 4.5vw, 90px) !important;
    border-radius: clamp(20px, 1.4vw, 30px) !important;
  }
  .odds-btn .label { font-size: clamp(0.6rem, 0.75vw, 0.95rem) !important; }

  .more-markets { font-size: clamp(0.68rem, 0.85vw, 1.05rem) !important; padding: clamp(4px, 0.4vw, 8px) clamp(9px, 0.75vw, 14px) !important; }
  .status-badge { font-size: clamp(0.62rem, 0.8vw, 1rem) !important; padding: clamp(2px, 0.25vw, 5px) clamp(6px, 0.5vw, 10px) !important; }

  .bet-slip-sidebar { padding: clamp(16px, 1.2vw, 28px) !important; border-radius: clamp(10px, 0.8vw, 16px) !important; }
  .slip-item { padding: clamp(10px, 0.9vw, 18px) clamp(12px, 1vw, 20px) !important; font-size: clamp(0.9rem, 1vw, 1.2rem) !important; }

  .match-stats-panel { padding: clamp(12px, 1vw, 20px) clamp(16px, 1.2vw, 24px) !important; }
  .stat-row { font-size: clamp(12px, 0.9vw, 16px) !important; }

  /* ============================================================
     LOTTO (lotto_home + home + check_ticket)
     ============================================================ */
  .lotto-banner { padding: clamp(2rem, 2.5vw, 4rem) !important; border-radius: clamp(16px, 1vw, 24px) !important; }
  .lotto-banner h1 { font-size: clamp(2.2rem, 3vw, 4rem) !important; }
  .lotto-banner::before { font-size: clamp(8rem, 10vw, 14rem) !important; }

  .lotto-card { padding: clamp(1.5rem, 1.5vw, 2.5rem) !important; border-radius: clamp(12px, 0.8vw, 18px) !important; }

  .countdown-label { font-size: clamp(0.85rem, 1vw, 1.2rem) !important; }
  .countdown-timer { font-size: clamp(2.5rem, 3.5vw, 5rem) !important; letter-spacing: 0.4vw !important; }

  .ball {
    width: clamp(42px, 3vw, 64px) !important;
    height: clamp(42px, 3vw, 64px) !important;
    font-size: clamp(1rem, 1.2vw, 1.6rem) !important;
  }
  .ball-sm {
    width: clamp(32px, 2.3vw, 48px) !important;
    height: clamp(32px, 2.3vw, 48px) !important;
    font-size: clamp(0.8rem, 0.95vw, 1.2rem) !important;
  }

  .num-grid { gap: clamp(4px, 0.4vw, 8px) !important; }
  .num-btn { font-size: clamp(0.75rem, 1vw, 1.3rem) !important; }

  .type-card { padding: clamp(1rem, 1vw, 1.8rem) !important; border-radius: clamp(10px, 0.7vw, 14px) !important; }
  .type-card .mult { font-size: clamp(1.4rem, 1.7vw, 2.2rem) !important; }
  .type-card .tname { font-size: clamp(1rem, 1.15vw, 1.4rem) !important; }
  .type-card .tdesc { font-size: clamp(0.8rem, 0.9vw, 1.1rem) !important; }

  .gain-preview { font-size: clamp(1.1rem, 1.3vw, 1.6rem) !important; padding: clamp(0.75rem, 0.8vw, 1.4rem) clamp(1rem, 1vw, 1.6rem) !important; }

  .dark-table { font-size: clamp(0.9rem, 1.05vw, 1.3rem) !important; }
  .dark-table th { font-size: clamp(0.75rem, 0.9vw, 1.1rem) !important; padding: clamp(0.6rem, 0.7vw, 1rem) clamp(0.8rem, 0.9vw, 1.3rem) !important; }
  .dark-table td { padding: clamp(0.65rem, 0.75vw, 1.1rem) clamp(0.8rem, 0.9vw, 1.3rem) !important; }

  /* ============================================================
     INTL LOTTERY (intl_lottery/home + game_detail + results)
     ============================================================ */
  .il-hero { padding: clamp(2rem, 2.5vw, 4rem) clamp(1.5rem, 2vw, 3rem) clamp(1.5rem, 2vw, 3rem) !important; }
  .il-hero h1 { font-size: clamp(2.2rem, 3vw, 4rem) !important; }
  .il-hero p { font-size: clamp(0.88rem, 1vw, 1.25rem) !important; }
  .il-badge { font-size: clamp(0.72rem, 0.85vw, 1.05rem) !important; padding: clamp(3px, 0.3vw, 6px) clamp(10px, 0.8vw, 16px) !important; }

  .il-tab { font-size: clamp(0.85rem, 1vw, 1.25rem) !important; padding: clamp(0.7rem, 0.7vw, 1.2rem) clamp(1.2rem, 1vw, 2rem) !important; }
  .il-tab-pane { padding: clamp(1.5rem, 1.5vw, 2.5rem) clamp(1rem, 1.2vw, 2rem) !important; }

  .il-games-grid {
    grid-template-columns: repeat(auto-fill, minmax(clamp(260px, 20vw, 420px), 1fr)) !important;
    gap: clamp(1rem, 1.2vw, 2rem) !important;
  }
  .il-game-card { padding: clamp(1.1rem, 1.1vw, 2rem) !important; border-radius: clamp(10px, 0.7vw, 14px) !important; }
  .il-game-name { font-size: clamp(0.95rem, 1.1vw, 1.35rem) !important; }
  .il-game-type { font-size: clamp(0.72rem, 0.85vw, 1.05rem) !important; }

  .il-ball {
    width: clamp(30px, 2.2vw, 50px) !important;
    height: clamp(30px, 2.2vw, 50px) !important;
    font-size: clamp(0.72rem, 0.9vw, 1.1rem) !important;
  }

  .il-state-badge { font-size: clamp(0.68rem, 0.85vw, 1.05rem) !important; }
  .il-mult-badge { font-size: clamp(0.72rem, 0.85vw, 1.05rem) !important; padding: clamp(2px, 0.25vw, 5px) clamp(8px, 0.6vw, 14px) !important; }
  .il-draw-meta, .il-no-draw { font-size: clamp(0.75rem, 0.9vw, 1.15rem) !important; }
  .il-play-btn { font-size: clamp(0.78rem, 0.95vw, 1.2rem) !important; padding: clamp(0.35rem, 0.5vw, 0.7rem) clamp(0.85rem, 0.8vw, 1.4rem) !important; }
}

/* 4K / 1440p */
@media (min-width: 2560px) {
  html { font-size: 22px; }
  main#main-content { padding: 0 3vw; }
}

/* ===========================================================================
   TV KIOSK MODE — game-only view on POS/desktop displays.
   - body.game-page: auto-set by base.html when the URL matches a game namespace
     OR URL prefix (crash, cockfight, lucky6, keno, lotto, intl_lottery, etc.)
   - body.tv-mode: opt-in via ?tv=1 query param (see inline JS in base.html),
     works at any viewport so kiosks on smaller displays can still hide chrome.
   Threshold ≥1024px chosen so Windows POS @ 1920×1080 with DPI scaling 125%
   (viewport ≈1536px) AND laptops/desktops auto-kiosk. Mobile/tablet (<1024px)
   keep their nav so they can still navigate. tv-mode bypasses size entirely.
   =========================================================================== */
@media (min-width: 1024px) {
  body.game-page .sigma-nav,
  body.game-page .sigma-nav-overlay,
  body.game-page .sigma-mobile-toggle,
  body.game-page .mobile-bnav,
  body.game-page .bch-footer,
  body.game-page .pro-footer,
  body.game-page > footer,
  body.game-page .bcp-bet-slip,
  body.game-page .bcp-bet-slip-fab,
  body.game-page #bcpBetSlipFab,
  body.game-page .bs-fab,
  body.game-page .bcp-mascotte,
  body.game-page .bcp-mascotte-wrap,
  body.game-page .ticker,
  body.game-page #ticker,
  body.game-page .cookie-consent,
  body.game-page .pwa-install-banner,
  body.game-page .pwa-update-toast,
  body.game-page .pwa-net-status,
  body.game-page .bcp-ws-wrap,
  body.game-page .skip-link,
  body.game-page .sigma-alerts,
  body.game-page .feedback-fab,
  body.game-page .checkin-widget,
  body.game-page .notice-fab,
  body.tv-mode .notice-fab {
    display: none !important;
  }
  body.game-page main#main-content {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 100vh !important;
    max-width: 100vw !important;
  }
  body.game-page {
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: hidden;
  }

  /* Lottery ball grids: constrain so all balls fit viewport without scroll.
     Cap each ball at a fraction of viewport height so the grid total height
     respects: (rows × ball_height) + (row_count - 1) × gap ≤ ~55vh.
     Width caps via max-width on the grid (cells inherit aspect-ratio:1). */
  body.game-page .l6-ball-grid {        /* 35 balls, 7 cols × 5 rows */
    max-width: min(100%, calc(7 * 10vh + 6 * 6px));
    margin-left: auto;
    margin-right: auto;
  }
  body.game-page .keno-ball-grid {      /* 80 balls, 10 cols × 8 rows */
    max-width: min(100%, calc(10 * 7vh + 9 * 4px));
    margin-left: auto;
    margin-right: auto;
  }
  /* Tighten card padding so grid has more room */
  body.game-page .l6-card-body,
  body.game-page .k-card-body {
    padding: 0.75rem !important;
  }
}

/* Force kiosk view at any viewport when ?tv=1 toggled it on. */
body.tv-mode .sigma-nav,
body.tv-mode .sigma-nav-overlay,
body.tv-mode .sigma-mobile-toggle,
body.tv-mode .mobile-bnav,
body.tv-mode .bch-footer,
body.tv-mode .pro-footer,
body.tv-mode > footer,
body.tv-mode .bcp-bet-slip,
body.tv-mode .bcp-bet-slip-fab,
body.tv-mode #bcpBetSlipFab,
body.tv-mode .bs-fab,
body.tv-mode .bcp-mascotte,
body.tv-mode .bcp-mascotte-wrap,
body.tv-mode .ticker,
body.tv-mode #ticker,
body.tv-mode .cookie-consent,
body.tv-mode .pwa-install-banner,
body.tv-mode .pwa-update-toast,
body.tv-mode .pwa-net-status,
body.tv-mode .bcp-ws-wrap,
body.tv-mode .skip-link,
body.tv-mode .sigma-alerts,
body.tv-mode .feedback-fab,
body.tv-mode .checkin-widget,
body.tv-mode .notice-fab {
  display: none !important;
}
body.tv-mode main#main-content {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 100vh !important;
  max-width: 100vw !important;
}
body.tv-mode {
  padding: 0 !important;
  margin: 0 !important;
  overflow-x: hidden;
}