:root {
    --app-bg: #070913;
    --app-surface: #101424;
    --app-surface-2: #171c31;
    --app-border: rgba(255, 255, 255, .08);
    --app-text: #f7f8ff;
    --app-muted: #8f98b3;
    --app-primary: #7657ff;
    --app-primary-2: #a649ff;
    --app-cyan: #35d9ef;
    --app-success: #35dc93;
    --app-warning: #ffd15c;
    --app-danger: #ff667d;
    --app-radius: 22px;
    --app-shell: 520px;
}

html { background: #03050b; }

body.mobile-app-body {
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    color: var(--app-text);
    background:
        radial-gradient(circle at 15% 10%, rgba(118, 87, 255, .18), transparent 30%),
        radial-gradient(circle at 85% 90%, rgba(53, 217, 239, .1), transparent 32%),
        #03050b;
    font-family: "Cairo", "Tajawal", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

.mobile-app-shell {
    position: relative;
    width: 100%;
    max-width: var(--app-shell);
    min-height: 100dvh;
    margin: 0 auto;
    overflow: hidden;
    color: var(--app-text);
    background:
        radial-gradient(circle at 80% 0, rgba(118, 87, 255, .17), transparent 26rem),
        linear-gradient(180deg, #0a0d1b 0%, var(--app-bg) 100%);
    box-shadow: 0 0 60px rgba(0, 0, 0, .75);
}

.mobile-app-shell *, .mobile-app-shell *::before, .mobile-app-shell *::after { box-sizing: border-box; }
.mobile-app-shell a { text-decoration: none; }
.mobile-app-shell .container, .mobile-app-shell .container-fluid { width: 100%; max-width: 100%; padding-right: 16px; padding-left: 16px; }
.mobile-app-shell .row { --bs-gutter-x: 16px; }
.mobile-app-shell .row > [class*="col-lg-"],
.mobile-app-shell .row > [class*="col-md-"],
.mobile-app-shell .row > [class*="col-sm-"] { width: 100%; }
.mobile-app-shell .pt-100 { padding-top: 12px !important; }
.mobile-app-shell .pb-100 { padding-bottom: 106px !important; }
.mobile-app-shell .main-wrapper { min-height: calc(100dvh - 74px); padding-bottom: 86px; }
.mobile-app-shell h1, .mobile-app-shell h2, .mobile-app-shell h3,
.mobile-app-shell h4, .mobile-app-shell h5, .mobile-app-shell h6 { color: var(--app-text); }
.mobile-app-shell p { color: var(--app-muted); }
.mobile-app-shell .text-muted { color: var(--app-muted) !important; }
.mobile-app-shell .scroll-to-top,
.mobile-app-shell .ball-1, .mobile-app-shell .ball-2, .mobile-app-shell .ball-3 { display: none !important; }

/* App top bar */
.app-topbar {
    position: sticky;
    z-index: 110;
    top: 0;
    min-height: 74px;
    padding: max(12px, env(safe-area-inset-top)) 16px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: rgba(10, 13, 27, .82);
    border-bottom: 1px solid var(--app-border);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.app-brand { min-width: 0; display: flex; align-items: center; gap: 10px; color: #fff; }
.app-brand-mark {
    flex: 0 0 42px; height: 42px; display: grid; place-items: center;
    border-radius: 14px; font-size: 24px; color: #fff;
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-2));
    box-shadow: 0 8px 24px rgba(118, 87, 255, .35);
}
.app-brand strong, .app-brand small { display: block; line-height: 1.15; }
.app-brand strong { font-size: 15px; letter-spacing: .4px; }
.app-brand small { margin-top: 4px; color: var(--app-muted); font-size: 9px; white-space: nowrap; }
.app-top-actions { display: flex; align-items: center; gap: 7px; }
.app-icon-button { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; color: #fff; font-size: 21px; background: var(--app-surface-2); border: 1px solid var(--app-border); }
.balance-pill { min-height: 40px; padding: 7px 10px; display: flex; align-items: center; gap: 5px; border-radius: 13px; color: #fff; background: rgba(118, 87, 255, .15); border: 1px solid rgba(118, 87, 255, .3); }
.balance-pill i { color: var(--app-cyan); font-size: 18px; }
.balance-pill span { font-size: 12px; font-weight: 800; }
.balance-pill small { color: var(--app-muted); font-size: 8px; }
.guest-topbar .langSel { width: auto; min-width: 68px; height: 40px; padding: 0 8px; color: #fff; border-radius: 12px; border: 1px solid var(--app-border); background: var(--app-surface-2); }

/* Page title */
.mobile-page-heading { padding: 16px 17px 7px; display: flex; align-items: center; gap: 11px; }
.mobile-page-heading small { display: block; margin-bottom: 2px; color: var(--app-muted); font-size: 10px; }
.mobile-page-heading h1 { margin: 0; font-size: 20px; font-weight: 800; }
.app-back-button { flex: 0 0 40px; height: 40px; display: grid; place-items: center; color: #fff; background: var(--app-surface-2); border: 1px solid var(--app-border); border-radius: 13px; font-size: 20px; }

/* Bottom tab bar */
.app-bottom-nav {
    position: fixed;
    z-index: 120;
    right: 50%; bottom: 0;
    width: min(100%, var(--app-shell));
    min-height: 74px;
    padding: 9px 10px max(8px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    transform: translateX(50%);
    background: rgba(14, 17, 31, .94);
    border-top: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 -12px 35px rgba(0, 0, 0, .35);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.app-bottom-nav a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #737d99; font-size: 10px; font-weight: 700; }
.app-bottom-nav a i { font-size: 23px; line-height: 1; transition: .2s ease; }
.app-bottom-nav a.active, .app-bottom-nav a:hover { color: #fff; }
.app-bottom-nav a.active i { color: var(--app-cyan); transform: translateY(-1px); }
.app-bottom-nav .nav-main-action i { width: 46px; height: 46px; margin-top: -28px; display: grid; place-items: center; color: #fff; border-radius: 16px; background: linear-gradient(135deg, var(--app-primary), var(--app-primary-2)); box-shadow: 0 9px 25px rgba(118, 87, 255, .4); }
.guest-app-footer { margin-top: auto; padding: 22px 18px max(22px, env(safe-area-inset-bottom)); display: flex; justify-content: space-between; color: var(--app-muted); font-size: 11px; border-top: 1px solid var(--app-border); }
.guest-app-footer a { color: var(--app-cyan); }

/* Cards, forms, tables */
.mobile-app-shell .card,
.mobile-app-shell .dashboard-card,
.mobile-app-shell .account-wrapper,
.mobile-app-shell .custom--card,
.mobile-app-shell .responsive-filter-card,
.mobile-app-shell .panel {
    color: var(--app-text);
    background: linear-gradient(145deg, rgba(25, 30, 52, .96), rgba(14, 18, 34, .96));
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: 0 14px 35px rgba(0, 0, 0, .2);
}
.mobile-app-shell .card-header, .mobile-app-shell .card-footer { color: #fff; background: transparent; border-color: var(--app-border); }
.mobile-app-shell .card-body, .mobile-app-shell .custom--card .card-body { padding: 17px; }
.mobile-app-shell .account-wrapper { padding: 0; overflow: hidden; }
.mobile-app-shell .account-form { padding: 24px 18px; background: transparent; }
.mobile-app-shell .account-thumb-area { margin: -24px -18px 25px; padding: 38px 18px 28px; background: radial-gradient(circle at 50% -15%, rgba(53, 217, 239, .28), transparent 50%), linear-gradient(145deg, #25185b, #11152b); border-bottom: 1px solid var(--app-border); }
.mobile-app-shell .account-thumb-area::before { content: "B"; width: 66px; height: 66px; margin: 0 auto 15px; display: grid; place-items: center; color: #fff; font-size: 28px; font-weight: 900; border-radius: 22px; background: linear-gradient(135deg, var(--app-primary), var(--app-primary-2)); box-shadow: 0 12px 30px rgba(118, 87, 255, .4); }
.mobile-app-shell .account-thumb-area .title { margin: 0; font-size: 21px; }
.mobile-app-shell .form-group { margin-bottom: 17px; }
.mobile-app-shell label { margin-bottom: 7px; color: #d7dbeb; font-size: 12px; font-weight: 700; }
.mobile-app-shell .form-control,
.mobile-app-shell .form--control,
.mobile-app-shell select,
.mobile-app-shell textarea {
    width: 100%; min-height: 52px;
    padding: 11px 14px;
    color: #fff !important;
    caret-color: var(--app-cyan);
    background: #0c1020 !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    border-radius: 15px !important;
    box-shadow: none !important;
}
.mobile-app-shell .custom--field .form--control { padding-left: 43px; }
.mobile-app-shell .custom--field i { color: var(--app-muted); }
.mobile-app-shell .form-control:focus, .mobile-app-shell .form--control:focus { border-color: var(--app-primary) !important; box-shadow: 0 0 0 4px rgba(118, 87, 255, .12) !important; }
.mobile-app-shell .form-check-input { width: 19px; height: 19px; margin-top: 1px; background-color: #0c1020; border-color: rgba(255,255,255,.2); }
.mobile-app-shell .form-check-input:checked { background-color: var(--app-primary); border-color: var(--app-primary); }
.mobile-app-shell .btn, .mobile-app-shell button[type="submit"] { min-height: 50px; border-radius: 15px; font-size: 14px; font-weight: 800; }
.mobile-app-shell .btn--base { color: #fff !important; border: 0; background: linear-gradient(135deg, var(--app-primary), var(--app-primary-2)) !important; box-shadow: 0 10px 26px rgba(118, 87, 255, .25); }
.mobile-app-shell .btn--base:hover { transform: translateY(-1px); box-shadow: 0 13px 30px rgba(118, 87, 255, .35); }
.mobile-app-shell .btn-outline--base { color: #fff; border-color: var(--app-primary); }
.mobile-app-shell .table-responsive,
.mobile-app-shell div[class*="table-responsive--"],
.mobile-app-shell .app-table-scroll {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    border: 1px solid var(--app-border);
    border-radius: 18px;
    scrollbar-width: thin;
    scrollbar-color: var(--app-primary) #0c1020;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.mobile-app-shell .table-responsive::-webkit-scrollbar,
.mobile-app-shell div[class*="table-responsive--"]::-webkit-scrollbar,
.mobile-app-shell .app-table-scroll::-webkit-scrollbar { height: 7px; }
.mobile-app-shell .table-responsive::-webkit-scrollbar-track,
.mobile-app-shell div[class*="table-responsive--"]::-webkit-scrollbar-track,
.mobile-app-shell .app-table-scroll::-webkit-scrollbar-track { background: #0c1020; }
.mobile-app-shell .table-responsive::-webkit-scrollbar-thumb,
.mobile-app-shell div[class*="table-responsive--"]::-webkit-scrollbar-thumb,
.mobile-app-shell .app-table-scroll::-webkit-scrollbar-thumb { border-radius: 10px; background: linear-gradient(90deg, var(--app-primary), var(--app-primary-2)); }
.mobile-app-shell .table-responsive > table,
.mobile-app-shell div[class*="table-responsive--"] > table,
.mobile-app-shell .app-table-scroll > table { width: max-content !important; min-width: 700px; max-width: none; }
.mobile-app-shell table { margin: 0; color: #dde1ef; background: var(--app-surface); }
.mobile-app-shell table th, .mobile-app-shell table td { white-space: nowrap; }
.mobile-app-shell table th { color: var(--app-muted); background: #0c1020; border-color: var(--app-border); font-size: 10px; white-space: nowrap; }
.mobile-app-shell table td { color: #eef0f8; border-color: var(--app-border); font-size: 12px; white-space: nowrap; }
.mobile-app-shell .alert { padding: 14px 16px; color: #fff; border: 1px solid var(--app-border); border-radius: 16px; background: var(--app-surface-2); }
.mobile-app-shell .alert-info { border-color: rgba(53,217,239,.25); }
.mobile-app-shell .alert-danger { border-color: rgba(255,102,125,.3); }
.mobile-app-shell .modal-content { color: #fff; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 22px; }
.mobile-app-shell .modal-header, .mobile-app-shell .modal-footer { border-color: var(--app-border); }
.mobile-app-shell .pagination { gap: 5px; justify-content: center; }
.mobile-app-shell .page-link { min-width: 38px; height: 38px; display: grid; place-items: center; color: #fff; background: var(--app-surface-2); border: 0; border-radius: 12px !important; }
.mobile-app-shell .page-item.active .page-link { background: var(--app-primary); }

/* Bingo screens */
.bingo-home-hero { position: relative; overflow: hidden; margin-bottom: 21px; padding: 21px; border: 1px solid rgba(118,87,255,.3); border-radius: 25px; background: linear-gradient(135deg, #30206d, #151839 65%, #102d3b); box-shadow: 0 18px 40px rgba(0,0,0,.25); }
.bingo-home-hero::after { content: "90"; position: absolute; left: -7px; bottom: -35px; color: rgba(255,255,255,.05); font-size: 112px; font-weight: 900; }
.bingo-home-hero small { color: #b8bfd3; }
.bingo-home-hero h2 { margin: 5px 0 16px; font-size: 24px; }
.hero-wallet { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.hero-wallet strong { display: block; color: #fff; font-size: 21px; }
.hero-wallet a { padding: 10px 15px; color: #09101b; font-size: 12px; font-weight: 900; border-radius: 13px; background: var(--app-cyan); }
.section-caption { margin: 0 0 13px; display: flex; justify-content: space-between; align-items: end; }
.section-caption h3 { margin: 0; font-size: 18px; }
.section-caption span { color: var(--app-muted); font-size: 11px; }
.mobile-app-shell .game-card { position: relative; overflow: hidden; padding: 19px; color: #fff; border: 1px solid var(--app-border); border-radius: 22px; background: linear-gradient(145deg, #171c32, #0f1324); box-shadow: 0 13px 28px rgba(0,0,0,.2); }
.mobile-app-shell .game-card + .game-card { margin-top: 14px; }
.game-card h3 { margin-bottom: 0; font-size: 18px; }
.game-card .price { color: var(--app-warning); font-size: 18px; font-weight: 900; }
.game-card .price small { display: block; color: var(--app-muted); text-align: left; font-size: 8px; }
.game-card .game-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.game-card .game-stats span { padding: 10px 5px; color: var(--app-muted); text-align: center; font-size: 9px; border: 1px solid rgba(255,255,255,.05); border-radius: 13px; background: rgba(255,255,255,.035); }
.game-card .game-stats b { display: block; margin-bottom: 2px; color: #fff; font-size: 13px; }
.status-dot { width: 8px; height: 8px; margin-left: 6px; display: inline-block; border-radius: 50%; background: #737b92; }
.status-dot.playing { background: var(--app-success); box-shadow: 0 0 12px var(--app-success); animation: appPulse 1.5s infinite; }
.status-dot.selling { background: var(--app-cyan); }
.game-tabs { margin-bottom: 14px; padding: 4px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 4px; border: 1px solid var(--app-border); border-radius: 16px; background: #0c1020; }
.game-tabs a { min-height: 43px; padding: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; color: #79839e; font-size: 10px; font-weight: 800; border-radius: 12px; }
.game-tabs a i { font-size: 17px; }
.game-tabs a.active { color: #fff; background: linear-gradient(135deg, rgba(118,87,255,.9), rgba(166,73,255,.9)); box-shadow: 0 7px 18px rgba(118,87,255,.22); }

/* Completed games */
.completed-games-page { padding-bottom: 125px !important; }
.completed-hero { position: relative; margin-bottom: 14px; padding: 19px; display: flex; align-items: center; gap: 13px; overflow: hidden; border: 1px solid rgba(255,209,92,.2); border-radius: 24px; background: radial-gradient(circle at 12% 0, rgba(255,209,92,.16), transparent 38%), linear-gradient(135deg, #2a2158, #15182e); box-shadow: 0 15px 34px rgba(0,0,0,.22); }
.completed-hero > span { flex: 0 0 56px; height: 56px; display: grid; place-items: center; color: #332606; font-size: 28px; border-radius: 18px; background: linear-gradient(145deg, #ffe27c, #f7b928); box-shadow: 0 10px 22px rgba(247,185,40,.22); }
.completed-hero small { color: var(--app-warning); font-size: 8px; }
.completed-hero h2 { margin: 2px 0 3px; font-size: 20px; }
.completed-hero p { margin: 0; font-size: 9px; }
.completed-games-list { display: grid; gap: 13px; }
.completed-game-card { position: relative; padding: 16px; overflow: hidden; border: 1px solid var(--app-border); border-radius: 22px; background: linear-gradient(145deg, #181d32, #0f1324); box-shadow: 0 14px 30px rgba(0,0,0,.2); }
.completed-game-card::after { content: "✓"; position: absolute; left: -2px; top: -32px; color: rgba(255,255,255,.025); font-size: 130px; font-weight: 950; transform: rotate(-12deg); pointer-events: none; }
.completed-game-head { position: relative; z-index: 1; display: grid; grid-template-columns: 43px minmax(0,1fr) auto; align-items: center; gap: 10px; }
.completed-game-icon { width: 43px; height: 43px; display: grid; place-items: center; color: var(--app-warning); font-size: 22px; border-radius: 14px; background: rgba(255,209,92,.1); }
.completed-game-head span { color: var(--app-success); font-size: 8px; }
.completed-game-head h3 { margin: 2px 0; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.completed-game-head small { color: var(--app-muted); font-size: 8px; }
.completed-prize { text-align: left; }
.completed-prize small, .completed-prize strong, .completed-prize em { display: block; }
.completed-prize strong { margin: 2px 0 0; color: var(--app-warning); font-size: 14px; }
.completed-prize em { color: var(--app-muted); font-size: 7px; font-style: normal; }
.completed-stats { position: relative; z-index: 1; margin: 14px 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.completed-stats span { padding: 9px 4px; text-align: center; border: 1px solid rgba(255,255,255,.05); border-radius: 13px; background: rgba(255,255,255,.035); }
.completed-stats i, .completed-stats b, .completed-stats small { display: block; }
.completed-stats i { margin-bottom: 3px; color: var(--app-cyan); font-size: 16px; }
.completed-stats b { color: #fff; font-size: 11px; }
.completed-stats small { margin-top: 1px; color: var(--app-muted); font-size: 7px; }
.completed-winners { position: relative; z-index: 1; margin-bottom: 12px; padding: 10px; border-radius: 13px; background: rgba(255,209,92,.055); }
.completed-winners > small { display: block; margin-bottom: 6px; color: var(--app-muted); font-size: 8px; }
.completed-winners > div { display: flex; flex-wrap: wrap; gap: 5px; }
.completed-winners span { padding: 4px 7px; color: #f4e3ae; font-size: 8px; border-radius: 10px; background: rgba(255,209,92,.09); }
.completed-winners i { margin-left: 3px; color: var(--app-warning); }
.completed-result-button { position: relative; z-index: 1; min-height: 44px; padding: 9px 13px; display: flex; align-items: center; justify-content: space-between; color: #fff; font-size: 10px; font-weight: 800; border-radius: 13px; background: rgba(118,87,255,.12); border: 1px solid rgba(118,87,255,.25); }
.completed-result-button i { color: var(--app-cyan); font-size: 17px; }
.completed-empty { padding: 36px 18px; text-align: center; border: 1px dashed rgba(255,255,255,.13); border-radius: 22px; background: rgba(255,255,255,.025); }
.completed-empty > i { color: var(--app-primary); font-size: 45px; }
.completed-empty h3 { margin: 9px 0 3px; font-size: 16px; }
.completed-empty p { margin: 0 0 14px; font-size: 9px; }
.completed-empty a { display: inline-flex; padding: 9px 14px; color: #fff; font-size: 9px; font-weight: 800; border-radius: 12px; background: var(--app-primary); }
.bingo-room { min-width: 0; min-height: auto !important; padding-bottom: 132px !important; color: #eaf0ff; background: transparent !important; }
.bingo-room .container { min-width: 0; overflow: hidden; }
.room-stage { position: relative; min-height: 136px; padding: 19px 19px 19px 108px; display: flex; align-items: center; border: 1px solid rgba(118,87,255,.28); border-radius: 25px; background: radial-gradient(circle at 12% 0, rgba(53,217,239,.2), transparent 38%), linear-gradient(135deg, #302271, #141936); box-shadow: 0 16px 36px rgba(0,0,0,.24); }
.room-stage-copy { width: 100%; min-width: 0; text-align: right; }
.room-stage h2 { margin: 9px 0 5px; overflow: hidden; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
.room-stage p { margin: 0; color: #aeb6d0; font-size: 10px; line-height: 1.6; }
.room-stage p i { color: var(--app-warning); }
.bingo-room .live-badge { padding: 5px 10px; color: #fff; border-radius: 20px; background: rgba(0,0,0,.25); font-size: 10px; }
.bingo-room .last-ball-wrap { position: absolute; top: 50%; left: 18px; width: 72px; text-align: center; transform: translateY(-50%); }
.bingo-room .last-ball-wrap small { display: block; margin-bottom: 5px; color: #b8bfd3; font-size: 9px; }
.bingo-room .last-ball { width: 68px; height: 68px; margin: auto; display: grid; place-items: center; color: #4931b5; font-size: 29px; font-weight: 900; border-radius: 50%; background: #fff; border: 5px solid rgba(255,255,255,.22); box-shadow: 0 9px 25px rgba(0,0,0,.3); animation: dropBall .65s cubic-bezier(.2,.8,.25,1); }
.victory-banner { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 15px; border: 1px solid rgba(83,224,162,.55); border-radius: 20px; color: #f5fff9; background: linear-gradient(125deg, #106c51, #123d49); box-shadow: 0 12px 30px rgba(10,94,68,.25); }
.victory-banner[hidden] { display: none; }
.victory-icon { flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; color: #263317; background: #ffe082; font-size: 25px; }
.victory-banner > div { flex: 1; min-width: 0; }
.victory-banner strong, .victory-banner small { display: block; }
.victory-banner strong { font-size: 16px; }
.victory-banner small { margin-top: 3px; color: #c4e8da; font-size: 11px; line-height: 1.5; }
.victory-banner button { flex: 0 0 38px; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.35); border-radius: 12px; color: #fff; background: rgba(255,255,255,.12); font-size: 19px; }
.bingo-room .panel { padding: 17px; }
.drawn-balls-panel { width: 100%; min-width: 0; margin-top: 14px; padding: 15px; overflow: hidden; border: 1px solid var(--app-border); border-radius: 21px; background: linear-gradient(145deg, #171c31, #0e1222); }
.drawn-balls-heading { margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
.drawn-balls-heading > div { display: flex; align-items: center; gap: 7px; color: #dfe3f2; font-size: 12px; font-weight: 700; }
.drawn-balls-heading i { color: var(--app-cyan); font-size: 18px; }
.drawn-balls-heading strong { direction: ltr; color: #fff; font-size: 16px; }
.drawn-balls-heading small { color: var(--app-muted); font-size: 10px; }
.drawn-balls-tools { display: flex; align-items: center; gap: 7px; direction: ltr; }
.drawn-balls-tools button { width: 28px; min-height: 28px !important; height: 28px; padding: 0; display: grid; place-items: center; color: #fff; font-size: 14px !important; border: 1px solid rgba(118,87,255,.34); border-radius: 9px !important; background: rgba(118,87,255,.16); box-shadow: none !important; }
.drawn-balls-tools button:disabled { color: #59627b; border-color: rgba(255,255,255,.05); background: rgba(255,255,255,.03); opacity: .5; }
.balls-scroll {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 48px;
    padding: 2px 0 6px;
    direction: ltr;
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    cursor: grab;
    user-select: none;
    touch-action: pan-y;
    scrollbar-width: thin;
    scrollbar-color: var(--app-primary) #0b0f1d;
    -webkit-overflow-scrolling: touch;
}
.balls-scroll.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.balls-scroll::-webkit-scrollbar { height: 5px; }
.balls-scroll::-webkit-scrollbar-track { border-radius: 10px; background: #0b0f1d; }
.balls-scroll::-webkit-scrollbar-thumb { border-radius: 10px; background: var(--app-primary); }
.ball-slider-hint { margin-top: 8px; color: #727c98; text-align: center; font-size: 8px; }
.ball-slider-hint i { margin-left: 3px; color: var(--app-cyan); }
.bingo-room .ball-track { width: max-content !important; min-width: max-content !important; height: 38px; margin: 0 !important; padding: 0; display: inline-flex !important; flex-wrap: nowrap !important; align-items: center; justify-content: flex-start; gap: 7px; direction: ltr; overflow: visible; transform: none !important; }
.bingo-room .mini-ball { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 800; border-radius: 50%; background: #28304a; }
.bingo-room .mini-ball:first-child { color: #151515; background: var(--app-warning); }
.tickets-heading { margin: 22px 2px 11px; display: flex; align-items: end; justify-content: space-between; }
.tickets-heading h3 { margin: 0 0 2px; font-size: 18px; }
.tickets-heading span { color: var(--app-muted); font-size: 9px; }
.tickets-heading strong { padding: 6px 10px; color: var(--app-cyan); font-size: 10px; border-radius: 10px; background: rgba(53,217,239,.09); }
.mark-notice { margin: 0 0 12px; padding: 12px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(255,209,92,.2); border-radius: 16px; background: linear-gradient(135deg, rgba(255,209,92,.1), rgba(118,87,255,.08)); }
.mark-notice > i { flex: 0 0 36px; height: 36px; display: grid; place-items: center; color: #211b0c; font-size: 20px; border-radius: 12px; background: var(--app-warning); animation: appTap 1.25s ease-in-out infinite; }
.mark-notice b, .mark-notice span { display: block; }
.mark-notice b { margin-bottom: 2px; color: #fff; font-size: 11px; }
.mark-notice span { color: #aeb6cc; font-size: 8px; line-height: 1.6; }
.mark-notice.mark-error { border-color: rgba(255,102,125,.35); background: rgba(255,102,125,.09); }
.mark-notice.mark-error > i { color: #fff; background: var(--app-danger); }
.tickets-grid { display: grid; gap: 12px; }
.ticket-wrap { min-width: 0; }
.bingo-room .bingo-ticket { position: relative; padding: 0 14px 12px; overflow: hidden; color: #141b2f; border: 1px solid rgba(116,87,255,.18); border-radius: 24px; background: linear-gradient(155deg, #ffffff 0%, #f7f7ff 58%, #f0edff 100%); box-shadow: 0 18px 40px rgba(0,0,0,.3), inset 0 1px 0 #fff; }
.bingo-room .bingo-ticket::before { content: ""; position: absolute; z-index: 0; top: 0; right: 0; left: 0; height: 5px; background: linear-gradient(90deg, var(--app-cyan), var(--app-primary), var(--app-primary-2)); }
.bingo-room .bingo-ticket::after { content: "90"; position: absolute; right: -10px; bottom: -35px; color: rgba(118,87,255,.045); font-size: 105px; font-weight: 950; line-height: 1; pointer-events: none; }
.bingo-room .bingo-ticket.winner { border-color: rgba(53,220,147,.85); box-shadow: 0 0 0 2px rgba(53,220,147,.12), 0 18px 42px rgba(5,123,82,.24); }
.bingo-room .bingo-ticket.winner::before { background: linear-gradient(90deg, #20c985, #61efba, #ffd76a); }
.bingo-room .bingo-ticket.eliminated { border-color: rgba(255,102,125,.5); filter: saturate(.35); opacity: .72; }
.bingo-room .bingo-ticket.eliminated::before { background: linear-gradient(90deg, #ff667d, #9c5363); }
.bingo-room .bingo-ticket.eliminated .winner-label { color: #a42039; border-color: rgba(255,102,125,.18); background: #ffe8ec; box-shadow: none; }
.bingo-room .bingo-ticket.eliminated .winner-label::before { content: "×"; color: #d12d49; font-size: 12px; }
.ticket-premium-head { position: relative; z-index: 1; min-height: 67px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px dashed rgba(63,72,108,.18); }
.ticket-premium-head::before, .ticket-premium-head::after { content: ""; position: absolute; bottom: -9px; width: 17px; height: 17px; border-radius: 50%; background: #111526; }
.ticket-premium-head::before { right: -23px; }
.ticket-premium-head::after { left: -23px; }
.ticket-brand { display: flex; align-items: center; gap: 9px; }
.ticket-brand > span { width: 39px; height: 39px; display: grid; place-items: center; color: #fff; font-size: 21px; border-radius: 13px; background: linear-gradient(135deg, var(--app-primary), var(--app-primary-2)); box-shadow: 0 8px 18px rgba(118,87,255,.26); }
.ticket-brand b, .ticket-brand small { display: block; }
.ticket-brand b { color: #171c32; font-size: 13px; letter-spacing: .8px; }
.ticket-brand small { margin-top: 2px; color: #858da5; font-size: 7px; }
.bingo-room .winner-label { min-height: 25px; padding: 4px 10px; display: inline-flex; align-items: center; gap: 4px; color: #087a50; font-size: 10px; font-weight: 900; border: 1px solid rgba(8,138,85,.12); border-radius: 20px; background: linear-gradient(135deg, #e1fff2, #c9f8e4); box-shadow: 0 5px 12px rgba(53,220,147,.12); }
.bingo-room .winner-label:not(:empty)::before { content: "★"; color: #e3ac20; font-size: 9px; }
.bingo-room .winner-label:empty { display: none; }
.ticket-serial { position: relative; z-index: 1; padding: 11px 2px 8px; display: flex; align-items: center; justify-content: space-between; }
.ticket-serial span { color: #8991a7; font-size: 8px; }
.ticket-serial strong { color: #252c45; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: .3px; }
.bingo-word-row { position: relative; z-index: 1; margin-bottom: 5px; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 6px; direction: ltr; }
.bingo-word-row span { color: #7255e9; text-align: center; font-size: 10px; font-weight: 950; letter-spacing: 1px; }
.bingo-word-row span:nth-child(2) { color: #8b53ed; }
.bingo-word-row span:nth-child(3) { color: #a34ee9; }
.bingo-word-row span:nth-child(4) { color: #6d7ce9; }
.bingo-word-row span:nth-child(5) { color: #3da7c5; }
.bingo-room .number-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; direction: ltr; }
.bingo-room .number-grid span { position: relative; width: 100%; height: 48px; display: grid; place-items: center; color: #343c58; font-size: 14px; font-weight: 900; border: 1px solid rgba(61,71,106,.08); border-radius: 13px; background: linear-gradient(145deg, #f1f3fa, #e8ebf5); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 3px 8px rgba(36,43,71,.07); }
.bingo-room .number-grid span.marked { color: #fff; border-color: rgba(255,255,255,.18); background: linear-gradient(145deg, #7657ff 0%, #9149fa 58%, #ab42ec 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 7px 14px rgba(118,87,255,.24); text-shadow: 0 1px 2px rgba(34,14,85,.25); }
.bingo-room .number-grid span.marked::after { content: ""; position: absolute; top: 5px; right: 6px; width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.48); }
.bingo-room .number-grid span.callable { color: #343c58; border: 2px solid #e4ad25; background: linear-gradient(145deg, #f1f3fa, #e8ebf5); box-shadow: 0 0 0 3px rgba(255,209,92,.13); cursor: pointer; animation: callableNumber 1s ease-in-out infinite; }
.bingo-room .number-grid span.callable::before { content: "اضغط"; position: absolute; top: 2px; right: 4px; color: #a87400; font-size: 5px; font-weight: 900; }
.bingo-room .number-grid span.marking { pointer-events: none; animation-duration: .35s; }
.ticket-premium-footer { position: relative; z-index: 1; margin-top: 10px; padding-top: 9px; display: flex; align-items: center; justify-content: space-between; color: #8a92a9; font-size: 7px; border-top: 1px solid rgba(58,68,101,.08); }
.ticket-premium-footer span { display: flex; align-items: center; gap: 3px; }
.ticket-premium-footer i { color: #7255e9; font-size: 11px; }
.bingo-room .price-line, .bingo-room .winner-row { border-color: var(--app-border); font-size: 12px; }
.empty-tickets { padding: 28px 18px; text-align: center; border: 1px dashed rgba(255,255,255,.14); border-radius: 20px; background: rgba(255,255,255,.025); }
.empty-tickets i { color: var(--app-primary); font-size: 39px; }
.empty-tickets h4 { margin: 7px 0 2px; font-size: 15px; }
.empty-tickets p { margin: 0; font-size: 10px; }
.buy-panel { margin-top: 16px; }
.panel-app-title { margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.panel-app-title > i { flex: 0 0 39px; height: 39px; display: grid; place-items: center; color: var(--app-cyan); font-size: 21px; border-radius: 13px; background: rgba(53,217,239,.09); }
.panel-app-title h4 { margin: 0 0 2px; font-size: 14px; }
.panel-app-title small { color: var(--app-muted); font-size: 9px; }
.purchase-summary { margin-bottom: 14px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.purchase-summary span { padding: 10px; color: var(--app-muted); font-size: 9px; border-radius: 13px; background: rgba(255,255,255,.04); }
.purchase-summary strong { display: block; margin-top: 3px; color: #fff; font-size: 11px; }
.room-info-grid { margin-top: 16px; display: grid; gap: 12px; }

/* Profile screen */
.profile-app-page { padding-bottom: 132px !important; }
.profile-overview { position: relative; padding: 18px; display: flex; align-items: center; gap: 13px; overflow: hidden; border: 1px solid rgba(118,87,255,.25); border-radius: 24px; background: radial-gradient(circle at 90% 0, rgba(53,217,239,.16), transparent 40%), linear-gradient(135deg, #29205e, #14182f); box-shadow: 0 16px 35px rgba(0,0,0,.22); }
.profile-overview::after { content: "B"; position: absolute; left: 14px; bottom: -45px; color: rgba(255,255,255,.035); font-size: 115px; font-weight: 900; }
.profile-avatar { flex: 0 0 59px; height: 59px; display: grid; place-items: center; color: #fff; font-size: 24px; font-weight: 900; border: 3px solid rgba(255,255,255,.13); border-radius: 20px; background: linear-gradient(135deg, var(--app-primary), var(--app-primary-2)); box-shadow: 0 10px 24px rgba(118,87,255,.3); }
.profile-identity { min-width: 0; flex: 1; }
.profile-identity small { color: #aab2ca; font-size: 9px; }
.profile-identity h2 { margin: 2px 0 4px; overflow: hidden; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.profile-identity span { color: var(--app-success); font-size: 9px; }
.profile-logout { position: relative; z-index: 2; flex: 0 0 39px; height: 39px; display: grid; place-items: center; color: var(--app-danger); font-size: 20px; border-radius: 13px; background: rgba(255,102,125,.1); }
.profile-quick-actions { margin: 12px 0 16px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.profile-quick-actions a { min-width: 0; padding: 13px; display: grid; grid-template-columns: 36px 1fr; column-gap: 9px; color: #fff; border: 1px solid var(--app-border); border-radius: 17px; background: var(--app-surface); }
.profile-quick-actions i { grid-row: 1/3; width: 36px; height: 36px; display: grid; place-items: center; color: var(--app-cyan); font-size: 19px; border-radius: 11px; background: rgba(53,217,239,.08); }
.profile-quick-actions span { align-self: end; overflow: hidden; font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.profile-quick-actions small { color: var(--app-muted); font-size: 8px; }
.profile-form-section { margin-bottom: 12px; padding: 16px; border: 1px solid var(--app-border); border-radius: 21px; background: linear-gradient(145deg, rgba(24,29,50,.96), rgba(14,18,34,.96)); }
.form-section-title { margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.form-section-title > i { flex: 0 0 38px; height: 38px; display: grid; place-items: center; color: var(--app-primary); font-size: 20px; border-radius: 12px; background: rgba(118,87,255,.1); }
.form-section-title h3 { margin: 0 0 2px; font-size: 14px; }
.form-section-title small { color: var(--app-muted); font-size: 9px; }
.profile-form .form-group { margin-bottom: 13px; }
.profile-form .form--control { min-height: 48px; }
.profile-form .form--control:disabled { color: #8992aa !important; opacity: 1; }
.readonly-field { position: relative; }
.readonly-field i { position: absolute; z-index: 2; top: 50%; left: 14px; color: #66708c; font-size: 17px; transform: translateY(-50%); }
.readonly-field input { padding-left: 42px !important; direction: ltr; text-align: right; }
.profile-save-button { position: relative; min-height: 55px !important; margin-top: 3px; }

@keyframes dropBall { 0% { transform: translateY(-35px) scale(.7); opacity: 0; } 65% { transform: translateY(4px) scale(1.05); opacity: 1; } 100% { transform: none; } }
@keyframes callableNumber { 50% { transform: translateY(-2px) scale(1.025); border-color: #ffca3d; box-shadow: 0 0 0 5px rgba(255,209,92,.09); } }
@keyframes appTap { 50% { transform: scale(.9) rotate(-8deg); } }

@keyframes appPulse { 50% { opacity: .45; transform: scale(.8); } }

@media (max-width: 390px) {
    .balance-pill small { display: none; }
    .balance-pill { padding: 7px 8px; }
    .app-brand small { display: none; }
    .bingo-room .room-head { align-items: flex-start; }
    .bingo-room .number-grid span { height: 43px; font-size: 13px; }
    .ticket-brand small { display: none; }
}

@media (min-width: 430px) {
    .profile-form .row > .col-sm-6 { width: 50%; }
    .tickets-grid { grid-template-columns: 1fr; }
}

@media (min-width: 700px) {
    body.mobile-app-body { padding: 18px 0; }
    .mobile-app-shell { min-height: calc(100dvh - 36px); border: 1px solid rgba(255,255,255,.08); border-radius: 32px; }
    .app-topbar { border-radius: 31px 31px 0 0; }
    .app-bottom-nav { bottom: 18px; border: 1px solid rgba(255,255,255,.09); border-radius: 0 0 31px 31px; }
}
/* Social game room */
.game-social-panel{margin-top:18px}.game-gifts{display:flex;gap:9px;overflow-x:auto;padding:4px 0 13px;scrollbar-width:none}.drop-gift{min-width:82px;border:1px solid #343b61;background:#111529;color:#fff;border-radius:16px;padding:7px}.drop-gift img,.drop-gift video{width:48px;height:48px;object-fit:contain;display:block;margin:auto}.drop-gift span{display:block;font-size:10px;margin-top:4px}.gift-overlay{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;pointer-events:none;opacity:0;visibility:hidden;transition:.25s;background:rgba(3,4,12,.35)}.gift-overlay.show{opacity:1;visibility:visible}.gift-burst{display:grid;justify-items:center;animation:giftPop .55s both;color:#fff;text-align:center;text-shadow:0 2px 12px #000}.gift-burst img,.gift-burst video{width:min(72vw,320px);height:min(55vh,390px);object-fit:contain;filter:drop-shadow(0 15px 30px rgba(137,67,255,.6))}.gift-burst.lion img,.gift-burst.lion video{width:min(88vw,430px)}.gift-burst b{font-size:22px}.gift-burst span{font-size:14px}@keyframes giftPop{0%{transform:scale(.15) rotate(-8deg);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1)}}.profile-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.ball-voice-toggle{color:#8e9bbd!important;border-color:#35415f!important}.ball-voice-toggle.active{color:#51ddff!important;border-color:#51ddff!important;background:rgba(81,221,255,.1)!important}.ball-voice-toggle i{font-size:17px}