:root{
  /* Branding propio: VERDE TAPETE de casino + ORO cálido + crema. Sin azules ni cyan. */
  --bg:#0e2a1f; --bg2:#103024; --panel:#123528; --panel2:#18402f90; --panel2s:#18402f; --line:#245c44;
  --field:#0a2016;                                            /* verde muy oscuro para inputs/board */
  --gold:#d4a63c; --gold-hi:#ecc766; --gold-lo:#a67d24;       /* oro cálido (marca, saldos, CTA) */
  --wine:#8f2f27; --wine-hi:#b23a30; --wine-mx:#cf5147;       /* granate (retirar / peligro) */
  --green:#3a9e63; --green-hi:#7be6a6;                        /* verde claro para GANAR (contrasta con el tapete) */
  --txt:#f1ead8; --sub:#9fb0a2;                               /* crema + salvia apagada */
  --r:3px;                                                    /* bordes casi rectos */
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;
  font-family:Georgia,'Times New Roman','Iowan Old Style',serif;}
html,body{min-height:100%;background:var(--bg);color:var(--txt);overscroll-behavior:none;}
body{display:flex;justify-content:center;}
.hidden{display:none!important;}
button{cursor:pointer;font-weight:700;border:none;color:#fff;}
input{font-size:16px;}

/* ---- portada ---- */
.join{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(rgba(4,14,20,.38),rgba(4,18,13,.70)),url('assets/fondo.png') center center/cover no-repeat;
  padding:20px;z-index:50;}
.join-box{width:min(380px,92vw);background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 22px;text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.72);}
.logo{font-size:27px;letter-spacing:.5px;color:var(--gold-hi);margin-bottom:6px;}
.logo b{color:var(--txt);}
.join-sub{color:var(--sub);font-size:14.5px;line-height:1.55;margin-bottom:18px;}
.join-box input{width:100%;padding:14px;border-radius:var(--r);background:var(--field);border:1px solid var(--line);
  color:var(--txt);text-align:center;font-size:17px;font-weight:700;margin-bottom:12px;outline:none;}
.join-box input:focus{border-color:var(--gold);}
.big-btn{width:100%;padding:15px;border-radius:var(--r);background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo));
  border:1px solid var(--gold-hi);color:#2a2008;font-size:16px;letter-spacing:.4px;}
.big-btn:hover{filter:brightness(1.06);}
.register-btn{width:100%;margin-top:9px;padding:12px;border-radius:var(--r);background:transparent;
  border:1px solid var(--gold-lo);color:var(--gold-hi);font-size:14px;}
.register-btn:hover{background:var(--panel2s);}
.rank-home-btn{width:100%;margin-top:9px;padding:12px;border-radius:var(--r);background:var(--panel2s);
  border:1px solid var(--line);color:var(--txt);font-size:14px;}
.rank-home-btn:hover{border-color:var(--gold);color:var(--gold-hi);}
.join-foot{margin-top:14px;color:var(--sub);font-size:12.5px;}

/* ---- layout juego (compacto y mobile-first) ---- */
.game{width:min(480px,100vw);min-height:100dvh;display:flex;flex-direction:column;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));}
.top{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:var(--bg);z-index:10;}
.brand{color:var(--gold-hi);font-size:16px;letter-spacing:.5px;font-weight:700;background:none;border:0;padding:7px 0;}
.brand b{color:var(--txt);}
.brand:hover{color:var(--green-hi);}
.wallet{margin-left:auto;background:var(--panel2s);border:1px solid var(--line);border-radius:var(--r);
  padding:6px 13px;font-weight:700;color:var(--gold-hi);font-variant-numeric:tabular-nums;}
.icon-btn{background:var(--panel2s);border:1px solid var(--line);color:var(--txt);width:38px;height:38px;
  border-radius:var(--r);font-size:18px;}

/* ---- moneda (icono propio, siempre visible) ---- */
.coin{display:inline-block;width:.92em;height:.92em;border-radius:50%;vertical-align:-0.08em;
  background:radial-gradient(circle at 34% 28%,#f6d98f,#e3c063 42%,#c2a03a 70%,#9c7c22);
  border:1px solid #7d611b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 -1px 2px rgba(0,0,0,.35);}

/* ---- pizarra ---- */
.board{position:relative;height:clamp(160px,29vh,240px);margin:10px;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(180deg,#123528,#0a1f16);border:1px solid var(--line);}
/* barra de cuenta atrás entre rondas */
.countbar{position:absolute;top:0;left:0;right:0;height:6px;background:rgba(0,0,0,.35);z-index:3;}
.countbar>i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-hi),var(--gold-lo));
  width:0;transition:width .25s linear;box-shadow:0 0 8px rgba(212,166,60,.6);}
.countbar.hidden{display:none;}
.phase.bet{font-size:19px;font-style:normal;letter-spacing:.4px;}   /* cuenta atrás más vistosa */
.phase.bet .cd{font-size:26px;font-weight:700;}
#graph{position:absolute;inset:0;width:100%;height:100%;display:block;}
.board-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  pointer-events:none;text-shadow:0 3px 14px rgba(0,0,0,.8);}
.mult{font-size:clamp(46px,13vw,62px);font-weight:700;letter-spacing:-1px;font-variant-numeric:tabular-nums;color:var(--txt);line-height:1;}
.mult.win{color:var(--green-hi);} .mult.boom{color:var(--wine-mx);}
.phase{margin-top:7px;font-size:15px;font-weight:700;font-style:italic;color:var(--sub);}
.phase.bet{color:var(--gold-hi);} .phase.run{color:var(--green-hi);} .phase.boom{color:var(--wine-mx);}
.history{position:absolute;left:8px;right:8px;bottom:8px;display:flex;gap:5px;overflow:hidden;justify-content:flex-start;}
.history .h{font-size:11px;font-weight:700;padding:3px 7px;border-radius:2px;background:rgba(0,0,0,.5);
  border:1px solid var(--line);font-variant-numeric:tabular-nums;flex:0 0 auto;}
.history .h.lo{color:var(--wine-mx);} .history .h.mid{color:var(--gold-hi);} .history .h.hi{color:var(--green-hi);}

/* ---- controles ---- */
.controls{padding:0 10px;}
.bet-row{display:flex;gap:6px;margin-bottom:7px;}
.bet-row input{flex:1 1 0;min-width:0;width:100%;text-align:center;padding:12px 6px;border-radius:var(--r);background:var(--field);border:1px solid var(--line);
  color:var(--txt);font-size:19px;font-weight:700;outline:none;font-variant-numeric:tabular-nums;}
.bet-row input:focus{border-color:var(--gold);}
.step{flex:0 0 auto;width:56px;padding:0 4px;border-radius:var(--r);background:var(--panel2s);color:var(--txt);border:1px solid var(--line);font-size:13px;}
.bet-quick{display:flex;gap:6px;margin-bottom:9px;}
.bet-quick button{flex:1;padding:8px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);color:var(--sub);font-size:13px;}
.bet-quick button:active{border-color:var(--gold);color:var(--gold-hi);}
.bet-quick button.on{border-color:var(--gold);color:var(--gold-hi);background:var(--panel2s);}
.action{width:100%;padding:16px;border-radius:var(--r);font-size:18px;letter-spacing:.4px;transition:.1s;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo));border:1px solid var(--gold-hi);color:#2a2008;}
.action:hover{filter:brightness(1.06);}
.action.cashout{background:linear-gradient(180deg,var(--wine-mx),var(--wine));border-color:var(--wine-mx);color:#fff;}
.action.cashout b{font-variant-numeric:tabular-nums;}
.action.waiting{background:#0f2c21;border:1px solid var(--line);color:#8a7d63;}
.action:disabled{cursor:default;}
/* Controles de apuesta bloqueados durante la ronda (o si ya apostaste) */
.controls.locked .bet-row,.controls.locked .bet-quick{opacity:.4;transition:opacity .15s;}
#betAmount:disabled,.step:disabled,.bet-quick button:disabled{cursor:default;pointer-events:none;}
.free{width:100%;margin-top:9px;padding:13px;border-radius:var(--r);background:linear-gradient(180deg,var(--green-hi),#268049);border:1px solid var(--green-hi);color:#04220f;font-size:15px;}

/* ---- paneles ---- */
.panel{margin:12px 10px 0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
.panel-h{padding:9px 13px;font-size:13px;font-weight:700;color:var(--sub);border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;letter-spacing:.3px;}
.bets{max-height:min(170px,24vh);overflow-y:auto;-webkit-overflow-scrolling:touch;}
/* barra de scroll visible para que se note que la lista es desplazable */
.bets::-webkit-scrollbar,.chat-log::-webkit-scrollbar{width:7px;}
.bets::-webkit-scrollbar-thumb,.chat-log::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px;}
.bets,.chat-log{scrollbar-width:thin;scrollbar-color:var(--line) transparent;}
.brow{display:flex;align-items:center;gap:8px;padding:8px 13px;border-bottom:1px solid rgba(255,255,255,.04);font-size:13px;}
.brow:last-child{border-bottom:none;}
.brow .bn{flex:1;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.brow .bn.me{color:var(--gold-hi);}
.brow .ba{color:var(--sub);font-variant-numeric:tabular-nums;}
.brow .bx{font-weight:700;font-variant-numeric:tabular-nums;min-width:52px;text-align:right;}
.brow .bx.out{color:var(--green-hi);} .brow .bx.pend{color:var(--sub);}
.tag-bot{font-size:9px;font-family:Georgia,serif;background:var(--panel2s);color:var(--sub);border-radius:2px;padding:1px 5px;letter-spacing:.5px;}

/* ---- chat ---- */
.chat-log{height:min(190px,26vh);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 12px;display:flex;flex-direction:column;gap:5px;overflow-wrap:anywhere;}
.cmsg{font-size:13.5px;line-height:1.4;}
.cmsg b{color:var(--gold-hi);}
.chat-form{display:flex;gap:8px;padding:9px 12px;border-top:1px solid var(--line);}
.chat-form input{flex:1;padding:10px;border-radius:var(--r);background:var(--field);border:1px solid var(--line);color:var(--txt);outline:none;}
.chat-form input:focus{border-color:var(--gold);}
.chat-form button{padding:10px 16px;border-radius:var(--r);background:var(--gold-lo);color:#2a2008;border:1px solid var(--gold);}

/* ---- ranking modal ---- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.68);display:flex;align-items:center;justify-content:center;z-index:60;padding:16px;}
.modal-box{width:min(400px,94vw);max-height:80vh;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;}
.modal-h{padding:13px 15px;font-weight:700;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);}
.rank-list{overflow-y:auto;}
.rrow{display:flex;align-items:center;gap:10px;padding:10px 15px;border-bottom:1px solid rgba(255,255,255,.04);}
.rrow[data-player-id]{cursor:pointer;}.rrow[data-player-id]:hover{background:rgba(123,230,166,.06);}
.rrow .rp{width:28px;font-weight:700;color:var(--sub);}
.rrow .rn{flex:1;font-weight:700;}
.rrow .rn.me{color:var(--gold-hi);}
.rrow .rb{color:var(--gold-hi);font-weight:700;font-variant-numeric:tabular-nums;}
.rrow.top1 .rb{color:var(--green-hi);}
.avatar,.profile-avatar{display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,var(--gold-hi),var(--gold-lo));color:#261d07;font-weight:700;flex:0 0 auto;}
.avatar{width:30px;height:30px;font-size:13px;}
.player-link{background:none;border:0;padding:0;color:var(--gold-hi);font:inherit;font-weight:700;text-align:left;cursor:pointer;}
.player-link:disabled{cursor:default}.rrow .player-link{color:var(--txt);}.rrow .player-link.me{color:var(--gold-hi);}
.profile-box{width:min(520px,96vw);max-height:90vh;}
.profile-body{padding:16px;overflow-y:auto;}
.profile-loading{padding:32px;text-align:center;color:var(--sub);}
.profile-hero{display:flex;align-items:center;gap:13px;margin-bottom:15px;}.profile-avatar{width:52px;height:52px;font-size:24px;}
.profile-hero b{display:block;font-size:20px;color:var(--gold-hi);}.profile-hero small{display:block;margin-top:4px;color:var(--sub);}
.profile-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:17px;}
.profile-stats>div{background:var(--field);border:1px solid var(--line);padding:10px;border-radius:var(--r);}
.profile-stats small{display:block;color:var(--sub);font-size:11px;margin-bottom:5px;}.profile-stats b{color:var(--gold-hi);font-size:14px;}
.chart-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:8px;}.chart-head small{color:var(--sub);font-size:11px;}
.balance-chart{position:relative;height:220px;background:linear-gradient(180deg,#123528,#0a1f16);border:1px solid var(--line);overflow:hidden;}
#balanceChart{width:100%;height:100%;display:block;}.chart-empty{position:absolute;inset:0;display:grid;place-items:center;padding:25px;text-align:center;color:var(--sub);font-size:12px;}
.profile-history{margin-top:17px}.profile-bet{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:8px;align-items:center;padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.05);background:var(--field);font-size:12px;}
.profile-bet b{text-align:right}.profile-bet .won{color:var(--green-hi)}.profile-bet .lost{color:var(--wine-mx)}

/* ---- toast ---- */
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--field);border:1px solid var(--gold);
  color:var(--txt);padding:11px 18px;border-radius:var(--r);font-weight:700;z-index:80;box-shadow:0 8px 30px rgba(0,0,0,.7);max-width:90vw;text-align:center;}

/* ---- pantallas móviles bajas: compactar para que el chat (input + botón) quede visible ---- */
@media (max-height:760px){
  .board{height:clamp(120px,20vh,180px);}
  .bets{max-height:20vh;}
  .chat-log{height:18vh;min-height:96px;}
}
@media (max-height:600px){
  .board{height:130px;}
  .bets{max-height:96px;}
  .chat-log{height:100px;}
}