:root{
  --bg-dark:#0a0c10;
  --card:#1a1d23;
  --panel:#14161b;
  --panel-2:#0e1014;
  --accent:#f1c40f;
  --green:#00c853;
  --green-dark:#009f44;
  --red:#8a0303;
  --blue:#34b4ff;
  --purple:#913ef8;
  --pink:#ff2d87;
  --text:#e8ecf2;
  --muted:#7b8497;
  --border:#212736;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{margin:0;padding:0;background:var(--bg-dark);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif}
body{display:flex;justify-content:center;min-height:100vh}
.app{width:100%;max-width:480px;background:#080a0f;min-height:100vh;position:relative;box-shadow:0 0 50px rgba(0,0,0,.7);overflow-x:hidden}

header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--bg-dark);border-bottom:1px solid #131721;position:sticky;top:0;z-index:40}
.header-left{display:flex;align-items:center;gap:10px}
.voltar{background:#151a23;border:1px solid #232c3d;color:#aab3c5;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700;display:flex;align-items:center;gap:5px;cursor:pointer}
.voltar svg{opacity:.7}
.logo{font-weight:900;font-size:17px;letter-spacing:.3px}
.logo span{color:var(--accent)}

.deposit-header-btn {
    background: var(--pink);
    border: 1px solid var(--pink);
    color: #fff;
    padding: 6px 14px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 12px;
    cursor: pointer;
    transition: 0.2s;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(255, 45, 135, 0.3);
}
.deposit-header-btn:active { transform: scale(0.95); }

.history-bar{display:flex;flex-wrap:wrap;gap:6px;padding:9px 12px;background:#0c1017;border-bottom:1px solid #131a24;min-height:48px}
.balance-container-sub {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 4px 12px;
    background: #080a0f;
    border-bottom: 1px solid #131a24;
}
.balance-value-sub {
    color: var(--green);
    font-weight: 900;
    /* Ajusta o tamanho da fonte dinamicamente entre 12px e 16px conforme a largura da tela */
    font-size: clamp(12px, 4vw, 16px);
    letter-spacing: 0.5px;
    background: rgba(0, 200, 83, 0.08);
    border: 1px solid rgba(0, 200, 83, 0.25);
    padding: 3px 12px;
    border-radius: 999px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bonus-container {
    color: #8a0303;
    font-weight: 800;
    font-size: 10px;
    margin-top: -2px;
    text-transform: lowercase;
    white-space: nowrap;
}
.hist-item{font-size:9px;font-weight:800;padding:2px 5px;border-radius:8px;color:#fff;min-width:36px;text-align:center;line-height:1;box-shadow:inset 0 -1px 0 rgba(0,0,0,.3);margin-bottom:2px}
.hist-item.blue{background:var(--blue)}
.hist-item.purple{background:var(--purple)}
.hist-item.pink{background:var(--pink);box-shadow:0 0 10px rgba(192,23,178,.35), inset 0 -1px 0 rgba(0,0,0,.3)}

.cashout-toast{
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 320px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(0, 168, 80, 0.18);
  border: 1px solid rgba(0, 200, 83, 0.45);
  border-radius: 14px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  z-index: 9999;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.cashout-toast.hidden{
  opacity: 0;
  transform: translateX(-50%) translateY(-12px);
  pointer-events: none;
}
.toast-left{
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  color: #c8ffe0;
  font-size: 12px;
}
.toast-title{ opacity: .85; }
.toast-mult{
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  margin-top: 2px;
}
.toast-right{
  display: flex;
  align-items: center;
  gap: 8px;
}
.toast-pill{
  background: #00c853;
  color: #002a12;
  border-radius: 999px;
  padding: 6px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 84px;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.2);
  pointer-events: auto;
}
.toast-pill span{ font-size: 10px; font-weight: 700; opacity: .9; }
.toast-pill strong{ font-size: 16px; font-weight: 900; line-height: 1; }
.toast-close{
  background: transparent;
  border: 0;
  color: #a7ffd1;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  pointer-events: auto;
}

.game-area{height:260px;margin:10px 12px;background:#000;border-radius:18px;position:relative;overflow:hidden;border:1px solid #1c2331;box-shadow:inset 0 0 100px rgba(0,0,0,.9)}
.game-area::before{content:'';position:absolute;inset:-20%;background:repeating-conic-gradient(from 180deg at 50% 110%, rgba(255,255,255,.07) 0deg 7deg, transparent 7deg 14deg);opacity:.85}
.game-area::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 105%, #1a2240 0%, rgba(10,12,16,0) 55%),linear-gradient(to top, rgba(0,0,0,.7), transparent 40%)}

/* Barra de Progresso de Espera */
.wait-progress-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    display: none;
    z-index: 10;
}
.wait-progress-bar {
    width: 0%;
    height: 100%;
    background: var(--green);
    box-shadow: 0 0 10px var(--green);
    transition: width 0.1s linear;
}

.game-center{position:absolute;top:48%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:5;width:100%}
#status-label{font-size:12px;color:#9aa3b5;margin-bottom:6px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;transition:color .2s}
#multiplier{font-size:3.5rem;font-weight:800;color:#FFFFFF;line-height:1;text-shadow:0 0 30px rgba(255,255,255,.18),0 4px 20px rgba(0,0,0,.9);font-variant-numeric:tabular-nums;transition:color .15s}

@media (min-width: 1024px) {
    #multiplier { font-size: 68px; }
}

/* Melhoria de Responsividade para Tabelas em Telas Pequenas */
@media (max-width: 400px) {
    .bets-header, .bet-row {
        grid-template-columns: 1.2fr 1fr 0.5fr 0.8fr;
        font-size: 11px;
    }
}

.plane{position:absolute;left:16px;bottom:24px;z-index:4;transition:transform .08s linear,opacity .3s;filter:drop-shadow(0 3px 5px rgba(0,0,0,.8));will-change:transform;transform:rotate(-20deg)}
.players{position:absolute;right:10px;bottom:10px;display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);padding:4px 9px 4px 5px;border-radius:999px;font-size:12px;color:#d1d8e4;font-weight:800;border:1px solid rgba(255,255,255,.08);z-index:6}
.avatars{display:flex}
.avatars span{width:20px;height:20px;border-radius:50%;border:2px solid #000;margin-left:-7px}
.avatars span:nth-child(1){background:#f59e0b;margin-left:0}
.avatars span:nth-child(2){background:#3b82f6}
.avatars span:nth-child(3){background:#ec4899}

.bet-panels{padding:0 0 8px}
.bet-panel{background:var(--panel);border:1px solid var(--border);border-radius:16px;margin:12px;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.tabs{display:flex;background:var(--panel-2);border-bottom:1px solid #1d2330}
.tab{flex:1;padding:10px;text-align:center;font-size:13px;color:var(--muted);font-weight:700;cursor:pointer;position:relative}
.tab.active{color:#fff;background:var(--panel)}
.tab.active::after{content:'';position:absolute;left:20%;right:20%;bottom:-1px;height:2px;background:var(--accent);border-radius:2px}
.panel-body{display:flex;gap:10px;padding:12px}
.left-controls{flex:1;min-width:0}
.amount-selector{display:flex;align-items:center;background:#0a0c11;border:1px solid #262e40;border-radius:999px;padding:3px;height:44px}
.amount-btn{width:36px;height:36px;border-radius:50%;background:#1b212e;border:0;color:#a3adc2;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:300}
.amount-btn:active{transform:scale(.95)}
.amount-input{flex:1;background:transparent;border:0;color:#fff;text-align:center;font-size:20px;font-weight:800;outline:0;width:60px;font-variant-numeric:tabular-nums}
.quick-bets{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}
.quick-btn{background:#1a1f2a;border:1px solid #262e40;color:#9ba5b9;padding:9px;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer}
.quick-btn:active{background:#232a38}
.main-btn{width:128px;min-width:128px;background:var(--green);color:#fff;border:0;border-radius:14px;font-weight:900;font-size:14px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1.15;padding:10px 8px;box-shadow:0 5px 0 var(--green-dark),0 8px 22px rgba(0,200,83,.28);transition:transform .08s, box-shadow .08s}
.main-btn:active{transform:translateY(2px);box-shadow:0 3px 0 var(--green-dark),0 4px 12px rgba(0,200,83,.2)}
.main-btn span{font-size:clamp(14px, 4vw, 18px);opacity:1;font-weight:900;margin-top:2px;display:block}

/* Estados de Aposta */
.main-btn.state-bet { background: var(--green); color: #fff; box-shadow: 0 5px 0 var(--green-dark); }

.main-btn.state-pending { 
    background: #ff8080; /* Vermelho não muito carregado */
    color: #fff; 
    box-shadow: 0 5px 0 #e57373; 
}

.main-btn.state-cancel { 
    background: #b11e1e; /* Vermelho bem carregado */
    color: #fff; 
    box-shadow: 0 5px 0 #8b1616; 
}
.main-btn.state-cancel:active { box-shadow: 0 3px 0 #b33636; }

.main-btn.state-cashout { 
    background: #D06E00; /* Laranja Âmbar Queimado */
    color: #fff; 
    box-shadow: 0 5px 0 #A05500, 0 8px 25px rgba(208, 110, 0, 0.45); 
    text-shadow: 0 1px 1px rgba(0,0,0,0.15);
    font-family: 'Inter', 'Roboto', system-ui, sans-serif;
    font-weight: 600;
    font-size: 16px; /* Tamanho aumentado para melhor leitura */
    letter-spacing: -0.2px;
    line-height: 1.1;
    padding: 8px 4px !important;
}
.main-btn.state-cashout span {
    font-weight: 800;
    font-size: 22px; /* Tamanho base grande para o valor */
    display: block;
    margin-top: 1px;
    white-space: nowrap;
    transition: font-size 0.1s ease;
}
.main-btn.state-cashout:active { box-shadow: 0 3px 0 #804400; transform: translateY(2px); }

.main-btn:disabled{opacity:.5;filter:grayscale(.3)}
.panel-footer{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;background:var(--panel-2);border-top:1px solid #1b212e;font-size:11.5px;color:#7e879a}
.toggle{display:flex;align-items:center;gap:6px;cursor:pointer;font-weight:600}
.toggle input{display:none}
.toggle-switch{width:30px;height:18px;background:#2a3244;border-radius:9px;position:relative;transition:.2s;border:1px solid #364051}
.toggle-switch::after{content:'';position:absolute;width:14px;height:14px;background:#7e879a;border-radius:50%;top:1px;left:1px;transition:.2s}
input:checked + .toggle-switch{background:#103d28;border-color:#1c6a44}
input:checked + .toggle-switch::after{left:13px;background:var(--green)}
.auto-cash{display:flex;align-items:center;gap:8px;font-weight:700}
.auto-cash input {
    color: #cfd6e4;
    background: #1a1f2a;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid #262e40;
    font-variant-numeric: tabular-nums;
    width: 80px;
    text-align: center;
    font-size: 15px;
    font-weight: 800;
    outline: none;
}

.live-bets{margin:16px 12px 24px}
.live-bets-header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.live-bets h3{font-size:14px;color:#d3d9e6;margin:0;font-weight:800;letter-spacing:.2px}
.total-bets-value {
    font-size: 12px;
    color: var(--green);
    font-weight: 800;
    background: rgba(0, 200, 83, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
}
.bets-table{background:var(--panel);border-radius:14px;border:1px solid var(--border);overflow:hidden}
.bets-header{display:grid;grid-template-columns:1.6fr .9fr .6fr 1fr;padding:9px 12px;background:var(--panel-2);font-size:11px;color:#7e879a;text-transform:uppercase;font-weight:800;letter-spacing:.4px;border-bottom:1px solid #1b212e}
.bets-list{max-height:220px;overflow-y:auto;scrollbar-width:thin}
.bet-row{display:grid;grid-template-columns:1.6fr .9fr .6fr 1fr;padding:10px 12px;border-top:1px solid #1a2030;font-size:13px;align-items:center}
.bet-row:first-child{border-top:0}
.bet-row.is-win {
    background: rgba(0, 200, 83, 0.15);
    transition: background 0.5s ease;
}
.bet-row.is-win .bet-mult, .bet-row.is-win .bet-win { color: var(--green); font-weight: 800; }
.bet-player{display:flex;align-items:center;gap:8px;min-width:0}
.avatar{width:26px;height:26px;border-radius:50%;background:#232a38;border:1px solid #2e374a;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#8a94a8}
.bet-user{color:#d8dee9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.bet-amt{color:#9aa3b5;font-weight:700;font-variant-numeric:tabular-nums}
.bet-mult{font-weight:800;font-variant-numeric:tabular-nums}
.bet-mult.win{color:var(--green)}
.bet-mult.lose{color:#5a6477}
.bet-win{color:#e2e8f0;font-weight:800;font-variant-numeric:tabular-nums}
.bet-win.win{color:#b9f6cf}

/* Ajustes para larguras muito pequenas */
@media (max-width: 360px) {
    .main-btn { width: 100px; min-width: 100px; font-size: 12px; }
    .main-btn span { font-size: 14px; }
    .amount-input { font-size: 16px; width: 45px; }
    .tab { font-size: 11px; padding: 8px 4px; }
    .balance-value-sub { font-size: 13px; }
}

.modal{position:fixed;top:85px;left:0;right:0;bottom:auto;background:none;backdrop-filter:none;display:none;align-items:center;justify-content:center;z-index:100;padding:0;pointer-events:none}
.modal.active{display:flex;animation:fade .2s}
.modal-content{pointer-events: auto;}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-content{background:#0f151d;border:2px solid #1f2a3a;border-radius:18px;padding:26px 22px;text-align:center;width:300px;max-width:90%;box-shadow:0 20px 50px rgba(0,0,0,.6)}
/* Modal de Saque Reduzido */
.modal-red{border-color:var(--red);background:linear-gradient(180deg,#1f0f14,#140a0c)}
.modal-red h2{color:var(--red);margin:0 0 6px;font-size:20px}

/* Modal de Erro de Status Personalizado */
#status-error-modal .modal-content {
    border: 2px solid var(--accent);
    background: #0d0101;
    color: #fff;
}

.modal p{margin:8px 0 0;color:#9aa3b5;font-size:14px}

.bets-list::-webkit-scrollbar{width:6px}
.bets-list::-webkit-scrollbar-thumb{background:#262e40;border-radius:3px}