@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/bricolage-grotesque-latin-600-normal.woff2") format("woff2");}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:800;font-display:swap;src:url("/fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2");}
/* ==========================================================================
   Kal Bingo — "Ink & Saffron" look (v1)
   Loaded LAST, after the inline styles in index.html, so it re-skins the
   whole player app without changing any element ids the JS relies on.

   Palette
     ink      #161B3D  page            surface #1F2756 / raised #28316A
     saffron  #F6B93B  primary action, balance, active
     teal     #1FC8A6  money in, wins, "ready"
     coral    #FF6B5E  money out, errors, live
     periwinkle #8E9BFF secondary / info
   Bingo balls: B saffron · I teal · N coral · G periwinkle · O pink
   Signature: the woven "tibeb" band (habesha kemis border) under the header.
   ========================================================================== */

html[data-theme="dark"], html:not([data-theme]) {
  --bg:#161B3D; --bg-2:#1A2048; --bg-3:#1A2048;
  --card:#1F2756; --card-solid:#1F2756; --raised:#28316A;
  --muted:#A3ABD6; --line:#323C7C;
  --blue:#8E9BFF; --blue-hover:#A6B0FF;
  --accent:#F6B93B; --accent-hover:#FFC95E; --accent-text:#231800;
  --green:#1FC8A6; --red:#FF6B5E; --gold:#F6B93B;
  --input-bg:#171D44; --input-text:#F1F3FF; --input-border:#3A4589;
  --text-color:#F1F3FF; --card-border:#2E3874;
  --info-box-bg:#1A2150; --notice-bg:rgba(255,107,94,.14); --notice-text:#FFB4AC;
  --nav-bg:rgba(25,31,72,.94); --nav-border:#323C7C; --nav-color:#8C95C6; --nav-active:#231800;
  --ball-bg:#28316A; --ball-border:#3A4589; --winner-grid-bg:#28316A;
  --voice-btn-bg:#1A2150; --voice-btn-border:#3A4589; --voice-btn-active:rgba(246,185,59,.18);
  --pay-method-bg:#1A2150; --pay-method-border:#3A4589; --pay-method-active:rgba(246,185,59,.16);
  --pay-info-bg:#1A2150; --pay-account-bg:#28316A;
  --pending-pill-bg:rgba(246,185,59,.18);
  --referral-bg:#1F2756; --referral-border:#3A4589;
  --status-bg:#1A2150; --notif-card-bg:#1F2756; --notif-card-border:#2E3874;
  --notif-body:#DCE0FF; --notif-date:#8C95C6;
  --shadow:0 10px 30px rgba(8,10,35,.35);
  --radius:20px; --radius-sm:14px;
  --focus:0 0 0 3px rgba(246,185,59,.45);
  --btn-primary-bg:#F6B93B; --btn-primary-color:#231800; --btn-primary-shadow:0 6px 0 #B9831C;
  --kal-ball-b:#F6B93B; --kal-ball-i:#1FC8A6; --kal-ball-n:#FF6B5E; --kal-ball-g:#8E9BFF; --kal-ball-o:#FF8FC7;
  --kal-head-bg:#1C2252;
  --kal-tibeb:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='10' viewBox='0 0 36 10'%3E%3Crect width='36' height='10' fill='%23161B3D'/%3E%3Cpath d='M0 5 L5 0 L10 5 L5 10Z' fill='%23F6B93B'/%3E%3Cpath d='M12 5 L17 0 L22 5 L17 10Z' fill='%231FC8A6'/%3E%3Cpath d='M24 5 L29 0 L34 5 L29 10Z' fill='%23FF6B5E'/%3E%3Ccircle cx='11' cy='5' r='1' fill='%23F1F3FF'/%3E%3Ccircle cx='23' cy='5' r='1' fill='%23F1F3FF'/%3E%3Ccircle cx='35' cy='5' r='1' fill='%23F1F3FF'/%3E%3C/svg%3E");
}
html[data-theme="light"] {
  --bg:#ECEEF9; --bg-2:#ECEEF9; --bg-3:#ECEEF9;
  --card:#FFFFFF; --card-solid:#FFFFFF; --raised:#F3F4FC;
  --muted:#5A628F; --line:#D9DCF1;
  --blue:#3F4FD8; --blue-hover:#3242C4;
  --accent:#F6B93B; --accent-hover:#FFC95E; --accent-text:#231800;
  --green:#0E9E80; --red:#DD4437; --gold:#C98A0E;
  --input-bg:#F6F7FD; --input-text:#1A1F45; --input-border:#CBD0EC;
  --text-color:#1A1F45; --card-border:#DCE0F3;
  --info-box-bg:#F3F4FC; --nav-bg:rgba(255,255,255,.96); --nav-border:#DCE0F3; --nav-color:#7A82AE; --nav-active:#231800;
  --pay-method-bg:#F6F7FD; --pay-method-border:#D3D7F0; --pay-method-active:#FFF4DC;
  --pay-info-bg:#F6F7FD; --pay-account-bg:#EEF0FB;
  --referral-bg:#FFFFFF; --referral-border:#D3D7F0;
  --notif-card-bg:#FFFFFF; --notif-card-border:#DCE0F3; --notif-body:#2A3060; --notif-date:#7A82AE;
  --shadow:0 8px 24px rgba(40,50,120,.10);
  --radius:20px; --radius-sm:14px;
  --focus:0 0 0 3px rgba(63,79,216,.30);
  --btn-primary-bg:#F6B93B; --btn-primary-color:#231800; --btn-primary-shadow:0 5px 0 #D29A22;
  --kal-ball-b:#F2A900; --kal-ball-i:#12B394; --kal-ball-n:#F0574A; --kal-ball-g:#5C6BF2; --kal-ball-o:#EE6FB0;
  --kal-head-bg:#1F2756;
  --kal-tibeb:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='10' viewBox='0 0 36 10'%3E%3Crect width='36' height='10' fill='%231F2756'/%3E%3Cpath d='M0 5 L5 0 L10 5 L5 10Z' fill='%23F6B93B'/%3E%3Cpath d='M12 5 L17 0 L22 5 L17 10Z' fill='%231FC8A6'/%3E%3Cpath d='M24 5 L29 0 L34 5 L29 10Z' fill='%23FF6B5E'/%3E%3Ccircle cx='11' cy='5' r='1' fill='%23FFFFFF'/%3E%3Ccircle cx='23' cy='5' r='1' fill='%23FFFFFF'/%3E%3Ccircle cx='35' cy='5' r='1' fill='%23FFFFFF'/%3E%3C/svg%3E");
}
html[data-theme="violet"] {
  --kal-ball-b:#FACC15; --kal-ball-i:#34D399; --kal-ball-n:#FB7185; --kal-ball-g:#A5B4FC; --kal-ball-o:#F9A8D4;
  --kal-head-bg:rgba(30,10,80,.55); --raised:rgba(255,255,255,.14);
  --btn-primary-bg:#FACC15; --btn-primary-color:#1E1035; --btn-primary-shadow:0 5px 0 #B48F05;
  --nav-active:#1E1035;
  --kal-tibeb:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='10' viewBox='0 0 36 10'%3E%3Crect width='36' height='10' fill='%233B1585'/%3E%3Cpath d='M0 5 L5 0 L10 5 L5 10Z' fill='%23FACC15'/%3E%3Cpath d='M12 5 L17 0 L22 5 L17 10Z' fill='%2334D399'/%3E%3Cpath d='M24 5 L29 0 L34 5 L29 10Z' fill='%23FB7185'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
html[data-theme] body {
  font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Ethiopic", "Nyala", sans-serif;
  background:var(--bg);
  padding:0 14px 108px;
  letter-spacing:0;
}
html[data-theme="dark"] body {
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(142,155,255,.18) 0%, transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
.kal-num, .kal-balance-num, .kal-ball b, .kal-room-ball b, .wallet-balance, .room-stake,
.kal-room-prize strong, .game-tile-label, .page-title h2, .page-title h3, #tabWallet h2, .card > h2 {
  font-family:"Bricolage Grotesque", system-ui, "Noto Sans Ethiopic", sans-serif;
}
html[data-theme] .card {
  border-radius:var(--radius);
  box-shadow:none;
  border:1px solid var(--card-border);
  padding:18px;
}
html[data-theme] input, html[data-theme] textarea, html[data-theme] select {
  border-radius:12px;
  border-width:1.5px;
}
html[data-theme] input:focus, html[data-theme] textarea:focus, html[data-theme] select:focus,
html[data-theme] button:focus-visible, html[data-theme] a:focus-visible {
  outline:none; box-shadow:var(--focus); border-color:var(--accent);
}
html[data-theme] .btn-play {
  background:var(--btn-primary-bg) !important;
  color:var(--btn-primary-color) !important;
  border-radius:14px !important;
  box-shadow:var(--btn-primary-shadow) !important;
  font-weight:800; letter-spacing:.2px;
  transform:translateY(0);
  transition:transform .08s ease, box-shadow .08s ease;
}
html[data-theme] .btn-play:active:not(:disabled) { transform:translateY(4px); box-shadow:0 1px 0 rgba(0,0,0,.25) !important; }
html[data-theme] .btn-secondary {
  background:var(--raised) !important; color:var(--text-color) !important;
  border:1.5px solid var(--card-border) !important; border-radius:12px !important; box-shadow:none !important;
}
html[data-theme] .back-btn {
  background:transparent !important; color:var(--text-color) !important;
  border:1.5px solid var(--card-border) !important; border-radius:12px !important;
  box-shadow:none !important; font-weight:700;
}
html[data-theme] .howto-help-btn {
  background:transparent !important; color:var(--accent) !important;
  border:1.5px solid var(--accent) !important; border-radius:12px !important;
  box-shadow:none !important; animation:none !important; font-weight:800;
}
html[data-theme="light"] .howto-help-btn { color:#8A5A00 !important; }
html[data-theme] .page-title { margin:14px 0 12px; }
html[data-theme] .page-title h2 { font-size:22px; letter-spacing:-.3px; }

/* ---------- Header: identity row + balance hero + tibeb band ---------- */
html[data-theme] .kal-header.header-bar {
  position:sticky; top:0; z-index:900;
  display:block !important;
  margin:0 -14px 14px !important;
  padding:calc(10px + env(safe-area-inset-top, 0px)) 14px 0 !important;
  background:var(--kal-head-bg) !important;
  border:none !important; border-radius:0 0 22px 22px !important;
  box-shadow:0 8px 24px rgba(8,10,35,.25) !important;
  backdrop-filter:none !important;
  overflow:hidden;
  color:#F1F3FF;
}
.kal-header.hidden { display:none !important; }
.kal-head-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.kal-who { display:flex !important; align-items:center; gap:10px; min-width:0; font-size:14px; }
.kal-avatar {
  width:36px; height:36px; flex:0 0 36px; border-radius:50%;
  background:var(--kal-ball-g); color:#161B3D;
  display:inline-flex; align-items:center; justify-content:center;
  font:800 16px/1 "Bricolage Grotesque", system-ui, sans-serif;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);
}
.kal-who-text { display:flex; flex-direction:column; min-width:0; line-height:1.2; }
.kal-who-text strong { color:#F1F3FF; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; }
.kal-who-text .status-container { padding:0 !important; background:transparent !important; border:none !important; margin-top:3px; height:auto !important; }
.kal-header .header-actions { display:flex; gap:6px; }
html[data-theme] .kal-header .header-icon-btn {
  width:36px !important; height:36px !important; padding:0 !important; margin:0 !important;
  border-radius:12px !important; background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.12) !important; color:#F1F3FF !important;
  display:inline-flex !important; align-items:center; justify-content:center; position:relative; box-shadow:none !important;
}
.kal-header .header-icon-btn svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
html[data-theme] .kal-header #logoutBtn { color:#FFB4AC !important; }
.kal-badge { position:absolute; top:-5px; right:-5px; background:#FF6B5E; color:#fff; font-size:10px; font-weight:800; min-width:17px; height:17px; padding:0 4px; border-radius:9px; display:flex; align-items:center; justify-content:center; }
.kal-badge.hidden { display:none !important; }

.kal-balance-row { display:flex; align-items:stretch; gap:10px; margin:12px 0 12px; }
html[data-theme] .kal-balance {
  flex:1; margin:0 !important; width:auto !important; text-align:left;
  display:flex !important; flex-direction:column; align-items:flex-start; justify-content:center;
  padding:8px 14px !important; border-radius:16px !important;
  background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.10) !important;
  color:#F1F3FF !important; box-shadow:none !important;
}
.kal-balance-label { font-size:11.5px; color:#AEB6E6; font-weight:600; }
.kal-balance-num { font-size:24px; font-weight:800; line-height:1.15; color:#F6B93B; letter-spacing:-.4px; font-variant-numeric:tabular-nums; }
.kal-balance-num strong { font-weight:800; }
.kal-balance-num > span { font-size:13px; font-weight:700; color:#F1F3FF; letter-spacing:0; }
html[data-theme] .kal-deposit-btn {
  width:auto !important; margin:0 !important; padding:0 18px !important;
  border-radius:16px !important; border:none !important;
  background:#F6B93B !important; color:#231800 !important;
  font-weight:800; font-size:15px; box-shadow:0 5px 0 #B9831C !important;
  display:inline-flex !important; align-items:center; gap:6px; white-space:nowrap;
}
.kal-deposit-btn > span:first-child { font-size:22px; line-height:1; margin-top:-2px; }
html[data-theme] .kal-deposit-btn:active { transform:translateY(4px); box-shadow:0 1px 0 #B9831C !important; }
.kal-tibeb { height:10px; margin:0 -14px; background:var(--kal-tibeb) repeat-x 0 0 / 36px 10px; }
/* The old floating "+ Deposit" chip is replaced by the header button. */
html[data-theme] #depositFloatChip { display:none !important; }
/* Compact header while picking cards / in immersive game screens */
body.classic-selecting .kal-balance-row { margin:8px 0 8px; }
body.classic-selecting .kal-balance-num { font-size:19px; }
body.classic-selecting .kal-deposit-btn { padding:0 12px !important; font-size:13px; }

/* ---------- Home: games as called bingo balls ---------- */
html[data-theme] #homeBox.card { background:transparent; border:none; padding:0; }
html[data-theme] .kal-games.home-games-grid { display:flex !important; flex-direction:column; gap:12px; margin:4px 0 18px; }
html[data-theme] .kal-game.game-tile {
  display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-start !important;
  gap:14px; min-height:0 !important; padding:14px 14px 14px 12px !important;
  border-radius:22px !important; text-align:left !important;
  background:var(--card) !important; color:var(--text-color) !important;
  border:1px solid var(--card-border) !important;
  box-shadow:none !important; position:relative; overflow:hidden; width:100%; margin:0;
}
html[data-theme] .kal-game.game-tile::after {
  content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--kal-c);
}
.kal-game-b { --kal-c:var(--kal-ball-b); }
.kal-game-i { --kal-c:var(--kal-ball-i); }
.kal-game-n { --kal-c:var(--kal-ball-n); }
.kal-ball {
  width:64px; height:64px; flex:0 0 64px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, rgba(255,255,255,.55) 0 10%, transparent 11%), var(--kal-c);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow:inset 0 -6px 0 rgba(0,0,0,.18);
  position:relative;
}
.kal-ball::before {
  content:""; position:absolute; inset:12px; border-radius:50%; background:#fff;
  box-shadow:inset 0 2px 0 rgba(0,0,0,.08);
}
.kal-ball small, .kal-ball b { position:relative; color:#161B3D; line-height:1; }
.kal-ball small { font:800 10px/1 "Bricolage Grotesque", system-ui, sans-serif; margin-bottom:1px; }
.kal-ball b { font-size:19px; font-weight:800; }
.kal-game-text { display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
html[data-theme] .kal-game .game-tile-label { font-size:19px; font-weight:800; color:var(--text-color); letter-spacing:-.2px; }
html[data-theme] .kal-game .game-tile-sub { font-size:13px; color:var(--muted); font-weight:500; opacity:1; }
.kal-go { width:34px; height:34px; flex:0 0 34px; border-radius:50%; background:var(--raised); display:flex; align-items:center; justify-content:center; }
.kal-go svg { width:18px; height:18px; fill:none; stroke:var(--text-color); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
html[data-theme] .kal-game:active { transform:scale(.985); }

/* Special event: the one loud card, framed with the tibeb band */
html[data-theme] .home-special-card {
  background:var(--kal-head-bg) !important; color:#F1F3FF !important;
  border:2px solid var(--accent) !important; border-radius:22px !important;
  box-shadow:none !important; padding:16px 16px 14px !important; margin-bottom:14px !important;
  position:relative; overflow:hidden;
}
html[data-theme] .home-special-card::before {
  content:""; position:absolute; left:0; right:0; top:0; height:8px; background:var(--kal-tibeb) repeat-x 0 0 / 29px 8px;
}
html[data-theme] .home-special-glow { display:none !important; }
html[data-theme] .home-special-badge { background:var(--accent) !important; color:#231800 !important; border:none !important; margin-top:6px; }
html[data-theme] .home-special-cd { color:var(--accent) !important; font-family:"Bricolage Grotesque", system-ui, sans-serif; }

/* Referral: a bingo ticket with a perforated edge */
html[data-theme] .referral-box {
  background:var(--card) !important; border:1px solid var(--card-border) !important;
  border-radius:20px !important; padding:16px 16px 14px 22px !important; text-align:left; position:relative;
  box-shadow:none !important;
}
html[data-theme] .referral-box::before {
  content:""; position:absolute; left:8px; top:14px; bottom:14px; width:0;
  border-left:2px dashed var(--line);
}
html[data-theme] .referral-box h3 { font-size:16px; }
html[data-theme] .referral-link-row button { background:var(--raised) !important; color:var(--text-color) !important; border:1px solid var(--card-border) !important; box-shadow:none !important; }
html[data-theme] .home-support-btn {
  background:transparent !important; color:var(--text-color) !important;
  border:1.5px solid var(--card-border) !important; box-shadow:none !important;
  border-radius:16px !important; font-weight:700 !important;
}

/* ---------- Rooms list: stake drawn as a ball ---------- */
html[data-theme] .room-list { gap:10px; }
html[data-theme] .kal-room.room-row {
  display:grid !important; grid-template-columns:62px 1fr auto; align-items:center; gap:12px;
  background:var(--card) !important; border:1px solid var(--card-border) !important;
  border-radius:20px !important; padding:12px !important; box-shadow:none !important; text-align:left;
}
.kal-room-ball {
  width:62px; height:62px; border-radius:50%; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--kal-c, var(--kal-ball-b)); box-shadow:inset 0 -6px 0 rgba(0,0,0,.18);
}
.kal-room-ball::before { content:""; position:absolute; inset:11px; border-radius:50%; background:#fff; }
.kal-room-ball small, .kal-room-ball b { position:relative; color:#161B3D; line-height:1; }
.kal-room-ball small { font:800 9.5px/1 "Bricolage Grotesque", system-ui, sans-serif; }
.kal-room-ball b { font-size:17px; font-weight:800; }
.kal-ball-B { --kal-c:var(--kal-ball-b); } .kal-ball-I { --kal-c:var(--kal-ball-i); } .kal-ball-N { --kal-c:var(--kal-ball-n); }
.kal-ball-G { --kal-c:var(--kal-ball-g); } .kal-ball-O { --kal-c:var(--kal-ball-o); }
.kal-room-info { min-width:0; grid-column:2; grid-row:1; }
html[data-theme] .kal-room .kal-room-ball { grid-column:1; grid-row:1; }
html[data-theme] .kal-room .room-join { grid-column:3; grid-row:1; order:0; position:static !important; }
.kal-room-prize { font-size:13px; color:var(--muted); }
.kal-room-prize strong { font-size:19px; color:var(--text-color); font-weight:800; }
html[data-theme] .kal-room .room-meta { margin-top:1px; font-size:12.5px; }
html[data-theme] .kal-room .room-status { font-size:12.5px; font-weight:700; }
html[data-theme] .kal-room .room-status.joining { color:var(--green); }
html[data-theme] .kal-room .room-status.playing { color:var(--red); }
.kal-room-hint { font-size:11.5px; color:var(--muted); margin-top:2px; }
html[data-theme] .kal-room .room-join {
  width:auto !important; margin:0 !important; padding:11px 16px !important;
  border-radius:14px !important; border:none !important;
  background:var(--btn-primary-bg) !important; color:var(--btn-primary-color) !important;
  box-shadow:var(--btn-primary-shadow) !important; font-weight:800;
}
html[data-theme] .kal-room .room-join:disabled { background:var(--raised) !important; color:var(--muted) !important; box-shadow:none !important; }
html[data-theme] .kal-room-playing { opacity:.85; }

/* ---------- Bottom dock ---------- */
html[data-theme] .bottom-nav {
  left:12px !important; right:12px !important; bottom:calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  margin:0 !important; width:auto !important;
  border-radius:24px !important; padding:6px !important;
  background:var(--nav-bg) !important; border:1px solid var(--nav-border) !important;
  box-shadow:0 12px 30px rgba(8,10,35,.35) !important;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  gap:4px;
}
html[data-theme] .bottom-nav .nav-item {
  border-radius:18px !important; padding:7px 4px !important; color:var(--nav-color) !important;
  font-weight:700; font-size:11px; background:transparent !important; box-shadow:none !important;
}
html[data-theme] .bottom-nav .nav-item.active {
  background:var(--accent) !important; color:var(--nav-active) !important;
}
html[data-theme] .bottom-nav .nav-item.active .nav-ico svg { stroke:var(--nav-active); stroke-width:2.2; }

/* ---------- Wallet ---------- */
html[data-theme] #tabWallet > .card:first-child {
  background:var(--kal-head-bg) !important; color:#F1F3FF; border:none !important; position:relative; overflow:hidden; padding-bottom:22px;
}
html[data-theme] #tabWallet > .card:first-child::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:8px; background:var(--kal-tibeb) repeat-x 0 0 / 29px 8px;
}
html[data-theme] #tabWallet > .card:first-child h2 { font-size:16px; color:#AEB6E6; font-weight:700; margin:0 0 4px; }
html[data-theme] .wallet-balance { color:#F6B93B !important; font-size:40px !important; font-weight:800 !important; letter-spacing:-1px; text-shadow:none !important; }
html[data-theme] #tabWallet > .card:first-child .small { color:#AEB6E6 !important; }
html[data-theme] .wallet-action-row { gap:10px !important; }
html[data-theme] .wallet-action-btn {
  border-radius:18px !important; border:1px solid var(--card-border) !important;
  background:var(--card) !important; box-shadow:none !important; padding:12px 6px !important;
}
html[data-theme] .wallet-action-btn .w-ico { border-radius:50% !important; width:44px !important; height:44px !important; color:#161B3D !important; }
html[data-theme] .wallet-action-btn:nth-child(1) .w-ico { background:var(--green) !important; }
html[data-theme] .wallet-action-btn:nth-child(2) .w-ico { background:var(--red) !important; }
html[data-theme] .wallet-action-btn:nth-child(3) .w-ico { background:var(--kal-ball-g) !important; }
html[data-theme] .wallet-action-btn span { font-size:12.5px !important; }
html[data-theme] .tx-row { border-bottom:1px dashed var(--line) !important; padding:11px 2px !important; }
html[data-theme] .tx-amount.positive { color:var(--green) !important; }
html[data-theme] .tx-amount.negative { color:var(--red) !important; }

/* ---------- History ---------- */
html[data-theme] .history-card {
  background:var(--card) !important; border:1px solid var(--card-border) !important;
  border-left:6px solid var(--muted) !important; border-radius:18px !important; box-shadow:none !important;
}
html[data-theme] .history-card.won { border-left-color:var(--green) !important; }
html[data-theme] .history-card.lost { border-left-color:var(--red) !important; }

/* ---------- Modals become bottom sheets on phones ---------- */
@media (max-width: 640px) {
  html[data-theme] .modal { align-items:flex-end !important; padding:0 !important; }
  html[data-theme] .modal > .card {
    max-width:none !important; width:100% !important;
    border-radius:26px 26px 0 0 !important; margin:0 !important;
    padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    max-height:92vh; overflow-y:auto;
    animation:kalSheet .22s ease-out;
  }
  html[data-theme] .modal > .card.pay-sheet { padding-top:0 !important; }
}
html[data-theme] .modal { background:rgba(12,14,38,.72) !important; }
html[data-theme="light"] .modal { background:rgba(26,31,69,.35) !important; }
@keyframes kalSheet { from { transform:translateY(24px); opacity:.6; } to { transform:none; opacity:1; } }
@media (prefers-reduced-motion: reduce) { html[data-theme] .modal > .card { animation:none !important; } }

/* Deposit / withdraw sheet: match the new palette */
html[data-theme] .pay-head-dep { background:#1FC8A6 !important; color:#0E1530 !important; }
html[data-theme] .pay-head-wd  { background:#FF6B5E !important; color:#2A0A06 !important; }
html[data-theme] .pay-head-ico { background:rgba(255,255,255,.35) !important; }
html[data-theme] .pay-head-dep .pay-head-ico svg, html[data-theme] .pay-head-wd .pay-head-ico svg { stroke:currentColor !important; }
html[data-theme] .pay-close { background:rgba(255,255,255,.35) !important; color:inherit !important; }
html[data-theme] .pay-step-n { background:var(--accent) !important; color:#231800 !important; }
html[data-theme] .pay-chip.active, html[data-theme] .pay-wallet input:checked + .pay-wallet-box { border-color:var(--accent) !important; }
html[data-theme] .pay-seg-btn.active { background:var(--accent) !important; color:#231800 !important; }
html[data-theme] .pay-sheet .pay-copy-btn { background:var(--accent) !important; color:#231800 !important; }
html[data-theme] .pay-sheet .pay-submit-wd { background:#FF6B5E !important; color:#2A0A06 !important; box-shadow:0 5px 0 #B9443A !important; }

/* ---------- Card picking grid (classic) ---------- */
html[data-theme] #selectionBox .grid-container .card-item,
html[data-theme] #selectionBox .instant-pick-grid .card-item { border-radius:10px !important; }

/* ---------- Login ---------- */
html[data-theme] #authBox.card {
  margin-top:max(48px, 10vh); background:var(--card); border:1px solid var(--card-border);
  position:relative; overflow:hidden; padding-top:30px;
}
html[data-theme] #authBox.card::before {
  content:""; position:absolute; left:0; right:0; top:0; height:10px; background:var(--kal-tibeb) repeat-x 0 0 / 36px 10px;
}

/* Instant bingo: keep the sticky Play button above the floating dock */
html[data-theme] .instant-sticky-play { bottom:calc(84px + env(safe-area-inset-bottom, 0px)) !important; background:transparent !important; }
html[data-theme] .instant-sticky-play .btn-play { box-shadow:var(--btn-primary-shadow), 0 10px 24px rgba(8,10,35,.35) !important; }