/* ══════════════════════════════════════════════
   DOMINÓ MX v2 — Estilos
   Misma estética mexicana, ahora con lobby
   ══════════════════════════════════════════════ */

:root{
  --terra:#c1440e;--terra2:#e05c20;
  --oro:#f5c518;--verde:#2d8c4e;--verde2:#3cb371;
  --azul:#1a6ea8;--azul2:#2196d4;--rosa:#d63384;
  --noche:#0e0702;--gy:rgba(245,197,24,0.5);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{width:100%;height:100%;overflow:hidden;position:relative;background:var(--noche);font-family:'DM Sans',sans-serif;display:flex;flex-direction:column;}

/* ── SCREENS ── */
.screen{display:none;width:100%;height:100%;flex-direction:column;}
.screen.active{display:flex;}

/* ── TOPBAR ── */
#topbar{
  flex-shrink:0;height:52px;
  background:linear-gradient(90deg,#1a0e05,#2a1508,#1a0e05);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 14px;position:relative;z-index:30;
  box-shadow:0 2px 12px rgba(0,0,0,0.7);
}
#topbar::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
  background:repeating-linear-gradient(90deg,
    var(--terra) 0 10px,var(--oro) 10px 20px,
    var(--verde) 20px 30px,var(--azul) 30px 40px);
}
.logo{font-family:'Lilita One',cursive;font-size:1.15rem;color:var(--oro);letter-spacing:2px;text-shadow:2px 2px 0 var(--terra);cursor:pointer;}
#turno-badge{
  font-family:'Lilita One',cursive;font-size:0.78rem;letter-spacing:1.5px;
  padding:5px 14px;border-radius:20px;
  border:2px solid var(--oro);color:var(--oro);background:rgba(245,197,24,0.1);
  transition:all .4s;white-space:nowrap;
}
#turno-badge.rival{border-color:rgba(255,255,255,0.1);color:rgba(255,255,255,0.28);background:transparent;}
.tb-pills{display:flex;gap:6px;align-items:center;}
.pill{font-size:0.68rem;font-weight:700;letter-spacing:1px;padding:4px 10px;border-radius:4px;border:1px solid;}
#p-pozo{color:var(--terra2);border-color:rgba(193,68,14,0.3);}
#p-ronda{color:var(--verde2);border-color:rgba(45,140,78,0.3);}
.tb-btn{
  background:rgba(245,197,24,0.1);border:1px solid rgba(245,197,24,0.25);
  color:var(--oro);border-radius:6px;padding:4px 10px;
  font-size:0.66rem;font-weight:700;letter-spacing:1px;cursor:pointer;
  transition:all .2s;font-family:'DM Sans',sans-serif;
}
.tb-btn:hover{background:rgba(245,197,24,0.2);transform:scale(1.03);}

/* ══════════════════════════════════════
   AUTH OVERLAY
   ══════════════════════════════════════ */
#auth-overlay{
  position:fixed;inset:0;background:rgba(3,1,0,0.95);
  backdrop-filter:blur(12px);z-index:200;
  display:none;align-items:center;justify-content:center;flex-direction:column;
}
#auth-overlay.on{display:flex;}
.auth-card{
  background:linear-gradient(145deg,#160b02,#201004);
  border:2px solid rgba(245,197,24,0.3);border-radius:22px;
  padding:30px 32px;max-width:360px;width:90%;
  position:relative;overflow:hidden;
  box-shadow:0 40px 100px rgba(0,0,0,0.9);
}
.auth-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:repeating-linear-gradient(90deg,var(--terra) 0 12px,var(--oro) 12px 24px,var(--verde) 24px 36px,var(--azul) 36px 48px);}
.auth-logo{font-family:'Lilita One',cursive;font-size:1.8rem;color:var(--oro);text-align:center;margin:10px 0 6px;letter-spacing:3px;text-shadow:2px 2px 0 var(--terra);}
.auth-sub{font-size:0.8rem;color:rgba(255,255,255,0.3);text-align:center;margin-bottom:20px;letter-spacing:1px;}
.auth-tabs{display:flex;gap:0;margin-bottom:18px;border-bottom:1px solid rgba(255,255,255,0.08);}
.auth-tab{flex:1;padding:8px 0;text-align:center;font-size:0.75rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.25);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;}
.auth-tab.on{color:var(--oro);border-bottom-color:var(--oro);}
.auth-form{display:none;}
.auth-form.on{display:block;}
.auth-input{
  width:100%;padding:10px 14px;margin-bottom:10px;
  background:rgba(255,255,255,0.05);border:1.5px solid rgba(255,255,255,0.08);
  border-radius:10px;color:#fff;font-size:0.85rem;
  font-family:'DM Sans',sans-serif;outline:none;transition:border-color .2s;
}
.auth-input:focus{border-color:var(--oro);}
.auth-input::placeholder{color:rgba(255,255,255,0.18);}
.auth-btn{
  width:100%;padding:12px;margin-top:6px;
  background:linear-gradient(135deg,var(--terra),var(--terra2));
  color:#fff;border:none;border-radius:10px;
  font-family:'Lilita One',cursive;font-size:0.95rem;letter-spacing:2px;
  cursor:pointer;transition:all .2s;
}
.auth-btn:hover{transform:translateY(-1px);filter:brightness(1.1);}
.auth-error{font-size:0.72rem;color:#e24b4a;margin-top:6px;min-height:18px;text-align:center;}
.auth-guest{margin-top:14px;text-align:center;}
.auth-guest button{
  background:transparent;border:1px solid rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.3);border-radius:8px;padding:8px 20px;
  font-size:0.72rem;letter-spacing:1px;cursor:pointer;transition:all .2s;
  font-family:'DM Sans',sans-serif;
}
.auth-guest button:hover{border-color:rgba(255,255,255,0.25);color:rgba(255,255,255,0.5);}

/* ══════════════════════════════════════
   LOBBY SCREEN
   ══════════════════════════════════════ */
#screen-lobby{
  align-items:center;justify-content:center;
  background:radial-gradient(ellipse 80% 70% at 50% 40%, #1a0e05 0%, var(--noche) 100%);
}
.lobby-card{
  background:linear-gradient(145deg,#160b02,#1e0d03);
  border:2px solid rgba(245,197,24,0.2);border-radius:22px;
  padding:36px 34px;max-width:420px;width:92%;
  position:relative;overflow:hidden;text-align:center;
  box-shadow:0 40px 100px rgba(0,0,0,0.8);
}
.lobby-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:repeating-linear-gradient(90deg,var(--terra) 0 14px,var(--oro) 14px 28px,var(--verde) 28px 42px,var(--azul) 42px 56px);}
.lobby-title{font-family:'Lilita One',cursive;font-size:2rem;color:var(--oro);letter-spacing:3px;text-shadow:2px 2px 0 var(--terra);margin:8px 0 4px;}
.lobby-sub{font-size:0.82rem;color:rgba(255,255,255,0.25);letter-spacing:1px;margin-bottom:24px;}
.lobby-user{font-size:0.78rem;color:var(--verde2);margin-bottom:20px;letter-spacing:1px;}

.lobby-actions{display:flex;flex-direction:column;gap:10px;}
.lobby-btn{
  padding:16px 20px;border-radius:14px;border:2px solid;
  font-family:'Lilita One',cursive;font-size:1rem;letter-spacing:2px;
  cursor:pointer;transition:all .25s;display:flex;align-items:center;
  justify-content:center;gap:10px;background:transparent;
}
.lobby-btn:hover{transform:translateY(-2px);filter:brightness(1.15);}
.lobby-btn.primary{border-color:var(--oro);color:var(--oro);background:rgba(245,197,24,0.08);}
.lobby-btn.secondary{border-color:var(--verde);color:var(--verde2);background:rgba(45,140,78,0.06);}
.lobby-btn.solo{border-color:var(--azul2);color:var(--azul2);background:rgba(33,150,212,0.06);}
.lobby-btn.danger{border-color:var(--terra);color:var(--terra2);font-size:0.75rem;padding:10px 16px;}

.lobby-divider{
  display:flex;align-items:center;gap:12px;margin:6px 0;
  color:rgba(255,255,255,0.12);font-size:0.65rem;letter-spacing:3px;text-transform:uppercase;
}
.lobby-divider::before,.lobby-divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,0.06);}

/* Join input */
.join-row{display:flex;gap:8px;}
.join-input{
  flex:1;padding:12px 16px;
  background:rgba(255,255,255,0.05);border:1.5px solid rgba(255,255,255,0.08);
  border-radius:10px;color:#fff;font-size:1rem;font-weight:700;
  font-family:'DM Sans',sans-serif;text-transform:uppercase;letter-spacing:4px;
  text-align:center;outline:none;transition:border-color .2s;
}
.join-input:focus{border-color:var(--oro);}
.join-input::placeholder{color:rgba(255,255,255,0.12);letter-spacing:2px;font-weight:400;font-size:0.82rem;text-transform:none;}
.join-go{
  padding:12px 20px;border-radius:10px;border:2px solid var(--oro);
  background:rgba(245,197,24,0.12);color:var(--oro);
  font-family:'Lilita One',cursive;font-size:0.9rem;letter-spacing:1px;
  cursor:pointer;transition:all .2s;
}
.join-go:hover{background:rgba(245,197,24,0.25);}

/* ══════════════════════════════════════
   WAITING ROOM
   ══════════════════════════════════════ */
#screen-waiting{
  align-items:center;justify-content:center;
  background:radial-gradient(ellipse 80% 70% at 50% 40%, #1a0e05 0%, var(--noche) 100%);
}
.waiting-card{
  background:linear-gradient(145deg,#160b02,#1e0d03);
  border:2px solid rgba(245,197,24,0.2);border-radius:22px;
  padding:32px 30px;max-width:420px;width:92%;
  position:relative;overflow:hidden;text-align:center;
  box-shadow:0 40px 100px rgba(0,0,0,0.8);
}
.waiting-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:repeating-linear-gradient(90deg,var(--terra) 0 14px,var(--oro) 14px 28px,var(--verde) 28px 42px,var(--azul) 42px 56px);}
.waiting-title{font-family:'Lilita One',cursive;font-size:1.1rem;color:var(--oro);letter-spacing:2px;margin:8px 0 4px;}

.room-code-display{
  font-family:'Lilita One',cursive;font-size:2.8rem;letter-spacing:8px;
  color:var(--oro);text-shadow:0 0 30px rgba(245,197,24,0.4);
  margin:14px 0 6px;user-select:all;cursor:pointer;
}
.room-link{font-size:0.68rem;color:rgba(255,255,255,0.2);margin-bottom:18px;letter-spacing:1px;word-break:break-all;}
.copy-hint{font-size:0.62rem;color:rgba(255,255,255,0.15);margin-bottom:16px;}

.players-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0;
}
.player-slot{
  background:rgba(255,255,255,0.03);border:2px dashed rgba(255,255,255,0.08);
  border-radius:14px;padding:16px 10px;display:flex;flex-direction:column;
  align-items:center;gap:6px;transition:all .3s;min-height:90px;justify-content:center;
}
.player-slot.filled{
  background:rgba(245,197,24,0.04);border:2px solid rgba(245,197,24,0.2);
  border-style:solid;
}
.player-slot.ai{
  background:rgba(33,150,212,0.04);border:2px solid rgba(33,150,212,0.15);
  border-style:solid;
}
.player-slot .slot-avatar{font-size:1.6rem;}
.player-slot .slot-name{font-size:0.72rem;font-weight:700;letter-spacing:1px;color:rgba(255,255,255,0.5);}
.player-slot .slot-tag{font-size:0.55rem;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.15);}
.player-slot.filled .slot-tag{color:var(--verde2);}
.player-slot .slot-empty{font-size:0.7rem;color:rgba(255,255,255,0.1);}

.waiting-dots{display:flex;gap:6px;justify-content:center;margin:12px 0;}
.waiting-dots .wd{width:8px;height:8px;border-radius:50%;animation:wdot 1s infinite ease-in-out;}
.waiting-dots .wd:nth-child(1){background:var(--terra2);}
.waiting-dots .wd:nth-child(2){background:var(--oro);animation-delay:.2s;}
.waiting-dots .wd:nth-child(3){background:var(--verde2);animation-delay:.4s;}
@keyframes wdot{0%,80%,100%{transform:scale(.5);opacity:.3;}40%{transform:scale(1.2);opacity:1;}}

.waiting-status{font-size:0.78rem;color:rgba(255,255,255,0.3);letter-spacing:1px;margin:6px 0 14px;}
.waiting-actions{display:flex;gap:8px;justify-content:center;}

/* ══════════════════════════════════════
   GAME TABLE
   ══════════════════════════════════════ */
#main{flex:1;display:flex;overflow:hidden;min-height:0;}
#mesa{flex:1;position:relative;overflow:hidden;}
#bg{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 90% 80% at 50% 45%,
    #2a5e35 0%,#1e4a28 35%,#152e1a 65%,#0d1a0e 100%);
}
#bg::before{
  content:'';position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(0deg,transparent 0 39px,rgba(193,68,14,0.1) 39px 40px),
    repeating-linear-gradient(90deg,transparent 0 39px,rgba(193,68,14,0.1) 39px 40px);
  pointer-events:none;
}
#bg::after{content:'';position:absolute;inset:8px;border:2px solid rgba(245,197,24,0.12);border-radius:18px;pointer-events:none;}

.farol{position:absolute;width:13px;height:19px;border-radius:50% 50% 40% 40%;opacity:0.5;animation:fswing 4s ease-in-out infinite;}
.farol::before{content:'';position:absolute;top:-5px;left:50%;transform:translateX(-50%);width:2px;height:7px;background:rgba(255,255,255,0.2);}
@keyframes fswing{0%,100%{transform:rotate(-5deg);}50%{transform:rotate(5deg);}}

#slot-top{position:absolute;top:10px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;z-index:5;}
#slot-left{position:absolute;left:8px;top:50%;transform:translateY(-60%);display:flex;flex-direction:column;align-items:center;gap:4px;z-index:5;}
#slot-right{position:absolute;right:8px;top:50%;transform:translateY(-60%);display:flex;flex-direction:column;align-items:center;gap:4px;z-index:5;}

.pcard{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  background:rgba(10,5,1,0.8);border:2px solid rgba(255,255,255,0.07);
  border-radius:12px;padding:8px 12px;min-width:78px;
  backdrop-filter:blur(10px);box-shadow:0 4px 16px rgba(0,0,0,0.5);
  transition:all .3s cubic-bezier(.34,1.3,.64,1);
}
.pcard.active{border-color:var(--oro);box-shadow:0 0 0 1px var(--oro),0 0 18px var(--gy);transform:scale(1.05);}
.pcard.active .pname{color:var(--oro);}
.pcard.disconnected{opacity:0.4;border-color:var(--terra);}
.pavatar{font-size:1.4rem;}
.pname{font-size:0.65rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,0.45);transition:color .3s;}
.pcnt{font-size:0.6rem;color:rgba(255,255,255,0.25);}
.pcnt b{color:var(--terra2);}

.htiles-h,.htiles-v{display:flex;gap:3px;flex-wrap:wrap;justify-content:center;}
.htiles-v{flex-direction:column;max-height:120px;}
.tback{border-radius:3px;background:linear-gradient(135deg,#1a0a02,#2e1408);border:1px solid rgba(245,197,24,0.15);position:relative;overflow:hidden;}
.tback::after{content:'';position:absolute;inset:2px;background:repeating-linear-gradient(45deg,transparent 0 2px,rgba(245,197,24,0.06) 2px 4px);}
.tback.h{width:20px;height:10px;}
.tback.v{width:10px;height:20px;}

#board-area{position:absolute;top:110px;left:0;right:0;bottom:115px;z-index:4;overflow:hidden;}
#board{position:relative;width:100%;height:100%;}
#bhint{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:'Lilita One',cursive;font-size:0.75rem;letter-spacing:3px;
  color:rgba(245,197,24,0.15);text-transform:uppercase;white-space:nowrap;
  pointer-events:none;
}

#extremos{
  display:none;position:absolute;top:6px;left:50%;transform:translateX(-50%);
  z-index:10;background:rgba(6,3,0,0.92);
  border:2px solid rgba(245,197,24,0.5);border-radius:40px;padding:5px 18px;
  gap:12px;align-items:center;backdrop-filter:blur(10px);
  box-shadow:0 0 20px rgba(245,197,24,0.2);
}
#extremos.show{display:flex;}
.ext-blk{display:flex;flex-direction:column;align-items:center;}
.ext-lbl{font-size:0.52rem;letter-spacing:2px;color:rgba(245,197,24,0.4);text-transform:uppercase;font-weight:700;}
.ext-n{font-family:'Lilita One',cursive;font-size:2rem;line-height:1;color:var(--oro);text-shadow:0 0 16px rgba(245,197,24,0.6);min-width:1.4ch;text-align:center;transition:transform .25s cubic-bezier(.34,1.56,.64,1);}
.ext-sep{font-size:1rem;color:rgba(245,197,24,0.3);}

/* FICHAS TABLERO */
.tf{position:absolute;display:flex;align-items:center;justify-content:space-around;border-radius:5px;overflow:hidden;background:linear-gradient(160deg,#faf5e4 0%,#ede0bc 45%,#e2d0a0 100%);box-shadow:0 3px 8px rgba(0,0,0,0.6),inset 0 1.5px 0 rgba(255,255,255,0.75),inset 0 -1.5px 0 rgba(0,0,0,0.15);}
.tf.h{flex-direction:row;width:50px;height:25px;}
.tf.v{flex-direction:column;width:25px;height:50px;}
.tf::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.15) 0%,transparent 55%);pointer-events:none;}
.tf.new{animation:tfIn .35s cubic-bezier(.34,1.56,.64,1);}
@keyframes tfIn{from{transform:scale(0.2) rotate(-25deg);opacity:0;}to{transform:none;opacity:1;}}
.tf.h .th{width:22px;height:25px;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;gap:1px;padding:2px;align-items:center;justify-items:center;}
.tf.v .th{width:25px;height:22px;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;gap:1px;padding:2px;align-items:center;justify-items:center;}
.td-sep-h{width:1px;height:72%;background:rgba(0,0,0,0.14);flex-shrink:0;}
.td-sep-v{height:1px;width:72%;background:rgba(0,0,0,0.14);flex-shrink:0;}
.pb{width:3.5px;height:3.5px;background:radial-gradient(circle at 30% 30%,#3a2a10,#0a0603);border-radius:50%;box-shadow:0 1px 1.5px rgba(0,0,0,0.5);}
.pb-e{width:3.5px;height:3.5px;opacity:0;}

/* MANO */
#phand{
  position:absolute;bottom:0;left:0;right:0;
  padding:6px 10px 10px;
  background:linear-gradient(to top,rgba(6,3,0,0.97) 0%,rgba(6,3,0,0.7) 55%,transparent 100%);
  z-index:7;display:flex;flex-direction:column;align-items:center;gap:6px;
}
#mycard{display:flex;align-items:center;gap:10px;background:rgba(6,3,0,0.65);border:2px solid rgba(245,197,24,0.15);border-radius:10px;padding:5px 14px;transition:border-color .3s,box-shadow .3s;}
#mycard.active{border-color:var(--oro);box-shadow:0 0 14px var(--gy);}
#hand{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;align-items:flex-end;}

.tp{
  width:44px;height:82px;border-radius:8px;
  display:flex;flex-direction:column;align-items:center;justify-content:space-around;
  padding:5px 4px;cursor:pointer;
  background:linear-gradient(165deg,#fdfae8 0%,#f5edcc 20%,#ede0b5 50%,#e2d099 75%,#d4be88 100%);
  box-shadow:0 7px 20px rgba(0,0,0,0.7),inset 0 2px 0 rgba(255,255,255,0.9),inset 0 -2px 0 rgba(0,0,0,0.25),inset 2px 0 0 rgba(255,255,255,0.45),inset -2px 0 0 rgba(0,0,0,0.15);
  border:1.5px solid rgba(0,0,0,0.06);position:relative;overflow:hidden;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;
  animation:dealIn .4s ease both;
}
.tp::before{content:'';position:absolute;top:0;left:0;right:0;height:35%;background:linear-gradient(to bottom,rgba(255,255,255,0.4),transparent);border-radius:6px 6px 50% 50%;pointer-events:none;}
@keyframes dealIn{from{transform:translateY(50px) scale(0.5);opacity:0;}to{opacity:1;}}
.tp:hover{transform:translateY(-20px) scale(1.08);box-shadow:0 24px 40px rgba(0,0,0,0.8),inset 0 2px 0 rgba(255,255,255,0.9);z-index:20;}
.tp.play{border-color:var(--oro);box-shadow:0 7px 20px rgba(0,0,0,0.7),0 0 0 2px var(--oro),0 0 18px var(--gy),inset 0 2px 0 rgba(255,255,255,0.9);}
.tp.play:hover{box-shadow:0 24px 40px rgba(0,0,0,0.8),0 0 0 2px var(--oro),0 0 32px var(--gy);}
.tp.dead{opacity:0.28;cursor:not-allowed;}
.tp.dead:hover{transform:none;box-shadow:0 7px 20px rgba(0,0,0,0.7);}
.hp{width:34px;height:30px;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;gap:1.5px;padding:3px;align-items:center;justify-items:center;}
.dp{width:72%;height:1px;background:rgba(0,0,0,0.14);flex-shrink:0;}
.pp{width:6px;height:6px;background:radial-gradient(circle at 30% 30%,#4a3520,#0a0603);border-radius:50%;box-shadow:0 1.5px 3px rgba(0,0,0,0.5);}
.pp-e{width:6px;height:6px;opacity:0;}

#btn-pass{
  display:none;background:rgba(193,68,14,0.1);border:1.5px solid rgba(193,68,14,0.35);
  color:var(--terra2);border-radius:8px;padding:7px 20px;
  font-family:'DM Sans',sans-serif;font-size:0.76rem;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all .2s;
}
#btn-pass:hover{background:rgba(193,68,14,0.22);transform:scale(1.03);}

/* PANEL LATERAL DESKTOP */
#side{
  width:220px;flex-shrink:0;background:rgba(6,3,0,0.88);
  border-left:1px solid rgba(245,197,24,0.1);
  display:flex;flex-direction:column;overflow-y:auto;
  padding:12px 11px;gap:14px;z-index:10;
}
.sp-ttl{font-family:'Lilita One',cursive;font-size:0.65rem;letter-spacing:3px;color:var(--terra2);border-bottom:1px solid rgba(193,68,14,0.18);padding-bottom:5px;margin-bottom:3px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;}
.sp-ttl:hover{color:var(--oro);}
.srow{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid rgba(255,255,255,0.03);}
.srow:last-child{border:none;}
.sl{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.sn{font-size:0.68rem;font-weight:700;color:rgba(255,255,255,0.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ss{font-size:0.57rem;color:rgba(255,255,255,0.2);}
.bar{width:100%;height:4px;background:rgba(255,255,255,0.06);border-radius:2px;overflow:hidden;margin-top:3px;}
.bf{height:100%;border-radius:2px;transition:width .5s ease;}
.bf-0{background:linear-gradient(90deg,var(--azul),var(--azul2));}
.bf-1{background:linear-gradient(90deg,var(--terra),var(--terra2));}
.bf-2{background:linear-gradient(90deg,var(--verde),var(--verde2));}
.bf-3{background:linear-gradient(90deg,var(--rosa),#ff69b4);}
.sc{font-family:'Lilita One',cursive;font-size:1.35rem;color:var(--oro);min-width:34px;text-align:right;transition:all .4s;}
.sc.lead{color:#7affa0;text-shadow:0 0 10px rgba(122,255,160,0.4);}
.ll{font-size:0.67rem;color:rgba(255,255,255,0.28);padding:3px 0;border-bottom:1px solid rgba(255,255,255,0.04);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;animation:slog .2s ease;}
.ll:last-child{border:none;}
.ll.mine{color:var(--oro);font-weight:700;}
.ll.pass{color:rgba(255,255,255,0.16);font-style:italic;}
@keyframes slog{from{opacity:0;transform:translateX(-6px);}to{opacity:1;transform:none;}}
.side-section{display:none;}
.side-section.on{display:block;}

/* THINKING */
#thinking{
  position:absolute;bottom:120px;left:50%;transform:translateX(-50%);
  display:none;align-items:center;gap:7px;z-index:10;
  background:rgba(6,3,0,0.78);border:1px solid rgba(255,255,255,0.07);
  border-radius:20px;padding:7px 16px;backdrop-filter:blur(8px);white-space:nowrap;
}
#thinking.on{display:flex;}
.td{width:7px;height:7px;border-radius:50%;animation:tdb .9s infinite ease-in-out;}
.td:nth-child(1){background:var(--terra2);}
.td:nth-child(2){background:var(--oro);animation-delay:.15s;}
.td:nth-child(3){background:var(--verde2);animation-delay:.3s;}
#thinking span{font-size:0.68rem;color:rgba(255,255,255,0.28);letter-spacing:2px;}
@keyframes tdb{0%,80%,100%{transform:scale(.5);opacity:.3;}40%{transform:scale(1.2);opacity:1;}}

/* NOTIF */
#notif{
  position:absolute;top:8px;left:50%;transform:translateX(-50%) translateY(-10px);
  z-index:40;background:rgba(6,3,0,0.92);border:1px solid var(--oro);
  border-radius:20px;padding:6px 18px;font-family:'Lilita One',cursive;
  font-size:0.82rem;letter-spacing:2px;color:var(--oro);
  opacity:0;pointer-events:none;transition:all .3s;white-space:nowrap;
}
#notif.on{opacity:1;transform:translateX(-50%) translateY(0);}

/* MODAL ELEGIR LADO */
#modal{
  position:absolute;inset:0;background:rgba(3,1,0,0.75);
  backdrop-filter:blur(6px);z-index:50;display:none;
  align-items:center;justify-content:center;
}
#modal.on{display:flex;}
#mcard{
  background:linear-gradient(145deg,#160b02,#201004);
  border:2px solid var(--oro);border-radius:18px;
  padding:22px 26px;text-align:center;max-width:290px;width:88%;
  animation:cardIn .3s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 20px 60px rgba(0,0,0,0.9);
}
@keyframes cardIn{from{transform:scale(.6) translateY(30px);opacity:0;}to{transform:none;opacity:1;}}
#m-title{font-family:'Lilita One',cursive;font-size:1rem;letter-spacing:2px;color:var(--oro);margin-bottom:5px;}
#m-sub{font-size:0.73rem;color:rgba(255,255,255,0.3);margin-bottom:16px;letter-spacing:1px;}
.mbtns{display:flex;gap:10px;}
.mbtn{
  flex:1;padding:12px 8px;border-radius:10px;border:2px solid;
  font-family:'Lilita One',cursive;font-size:0.9rem;letter-spacing:1px;
  cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:transparent;
}
.mbtn-i{border-color:var(--azul2);color:var(--azul2);}
.mbtn-d{border-color:var(--terra2);color:var(--terra2);}
.mbtn:hover{transform:scale(1.05);filter:brightness(1.2);}
.mbtn big{font-size:1.8rem;line-height:1;}
.mbtn small{font-size:0.58rem;letter-spacing:2px;opacity:.65;}
#m-cancel{margin-top:10px;background:transparent;border:none;color:rgba(255,255,255,0.2);font-size:0.7rem;letter-spacing:1px;cursor:pointer;padding:4px;}
#m-cancel:hover{color:rgba(255,255,255,0.45);}

/* OVERLAY RESULTADO */
#overlay{
  position:fixed;inset:0;background:rgba(3,1,0,0.87);
  backdrop-filter:blur(10px);z-index:100;display:none;
  align-items:center;justify-content:center;
}
#overlay.on{display:flex;}
#rcard{
  background:linear-gradient(145deg,#140902,#1e0d03);
  border:2px solid var(--terra);border-radius:22px;
  padding:32px 40px;text-align:center;max-width:340px;width:90%;
  animation:cardIn .4s cubic-bezier(.34,1.56,.64,1);
  position:relative;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,0.9);
}
#rcard::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:repeating-linear-gradient(90deg,var(--terra) 0 18px,var(--oro) 18px 36px,var(--verde) 36px 54px,var(--azul) 54px 72px);}
#r-ico{font-size:3.2rem;margin:6px 0 10px;}
#r-ttl{font-family:'Lilita One',cursive;font-size:2rem;letter-spacing:2px;margin-bottom:5px;}
#r-ttl.win{color:var(--oro);}
#r-ttl.lose{color:rgba(255,255,255,0.45);}
#r-sub{font-size:0.83rem;color:rgba(255,255,255,0.35);margin-bottom:5px;letter-spacing:1px;}
#r-pts{font-family:'Lilita One',cursive;font-size:1.3rem;color:var(--terra2);margin-bottom:18px;}
#r-scores{background:rgba(0,0,0,0.3);border-radius:10px;padding:10px 14px;margin-bottom:16px;}
.rrow{display:flex;justify-content:space-between;align-items:center;padding:3px 0;border-bottom:1px solid rgba(255,255,255,0.04);font-size:0.76rem;}
.rrow:last-child{border:none;}
.rn{color:rgba(255,255,255,0.45);}
.rv{font-family:'Lilita One',cursive;font-size:.95rem;color:var(--oro);}
.rv.lead{color:#7affa0;}
#btn-new{
  background:linear-gradient(135deg,var(--terra),var(--terra2));
  color:#fff;border:none;border-radius:10px;padding:12px 34px;
  font-family:'Lilita One',cursive;font-size:.95rem;letter-spacing:2px;
  cursor:pointer;transition:all .2s;box-shadow:0 6px 18px rgba(193,68,14,0.4);
}
#btn-new:hover{transform:translateY(-2px) scale(1.03);}

/* BARRA INFERIOR MÓVIL */
#bot{display:none;flex-shrink:0;background:rgba(6,3,0,0.97);border-top:1px solid rgba(245,197,24,0.12);z-index:20;}
#tabs{display:flex;border-bottom:1px solid rgba(255,255,255,0.05);}
.tab{flex:1;padding:7px 0;font-size:0.62rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;text-align:center;color:rgba(255,255,255,0.28);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;}
.tab.on{color:var(--oro);border-bottom-color:var(--oro);}
.tc{display:none;padding:9px 12px;max-height:140px;overflow-y:auto;}
.tc.on{display:block;}
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.tcard{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);border-radius:8px;padding:7px 10px;display:flex;justify-content:space-between;align-items:center;}
.tcl{display:flex;flex-direction:column;gap:2px;}
.tcn{font-size:0.67rem;font-weight:700;color:rgba(255,255,255,0.45);}
.tcs{font-size:0.54rem;color:rgba(255,255,255,0.18);}
.tcbar{height:3px;background:rgba(255,255,255,0.06);border-radius:2px;overflow:hidden;margin-top:4px;width:52px;}
.tcf{height:100%;border-radius:2px;transition:width .5s;}
.tcscore{font-family:'Lilita One',cursive;font-size:1.45rem;color:var(--oro);}
.tcscore.lead{color:#7affa0;}

/* Historial / Leaderboard */
.hist-row{display:flex;align-items:center;gap:8px;padding:6px 4px;border-bottom:1px solid rgba(255,255,255,0.04);cursor:pointer;border-radius:6px;transition:background .15s;}
.hist-row:hover{background:rgba(255,255,255,0.04);}
.hist-icon{font-size:1rem;}
.hist-info{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0;}
.hist-result{font-size:0.7rem;font-weight:700;color:rgba(255,255,255,0.5);}
.hist-win .hist-result{color:var(--oro);}
.hist-date{font-size:0.55rem;color:rgba(255,255,255,0.2);}
.hist-score{font-family:'Lilita One',cursive;font-size:0.9rem;color:var(--terra2);}
.hist-empty,.lb-empty{font-size:0.7rem;color:rgba(255,255,255,0.15);padding:12px 0;text-align:center;}
.lb-row{display:flex;align-items:center;gap:6px;padding:5px 4px;border-bottom:1px solid rgba(255,255,255,0.04);font-size:0.68rem;color:rgba(255,255,255,0.4);}
.lb-me{background:rgba(245,197,24,0.06);border-radius:6px;border:1px solid rgba(245,197,24,0.15);}
.lb-pos{font-family:'Lilita One',cursive;font-size:0.8rem;min-width:28px;text-align:center;color:var(--oro);}
.lb-avatar{font-size:1rem;}
.lb-name{flex:1;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lb-elo{font-family:'Lilita One',cursive;color:var(--azul2);font-size:0.8rem;min-width:35px;text-align:right;}
.lb-wins{color:var(--verde2);font-size:0.6rem;min-width:24px;text-align:right;}
.lb-rate{color:rgba(255,255,255,0.2);font-size:0.6rem;min-width:30px;text-align:right;}
#my-rank{font-size:0.6rem;color:var(--oro);padding:4px 0;text-align:center;}

/* RESPONSIVE */
@media(max-width:680px){
  #side{display:none;}
  #bot{display:block;}
  #slot-left,#slot-right{display:none;}

  /* Topbar mobile */
  #topbar{height:44px;padding:0 8px;}
  .logo{font-size:0.9rem;letter-spacing:1px;}
  #turno-badge{font-size:0.65rem;padding:3px 10px;}
  .pill{font-size:0.58rem;padding:2px 6px;}
  .tb-btn{font-size:0.58rem;padding:3px 8px;}
  .tb-pills{gap:3px;}

  /* Board area — give more space */
  #board-area{top:80px;bottom:105px;}
  #slot-top{top:4px;}
  .pcard{padding:4px 8px;min-width:60px;border-radius:8px;}
  .pavatar{font-size:1rem;}
  .pname{font-size:0.55rem;}
  .pcnt{font-size:0.5rem;}
  .htiles-h{gap:2px;}
  .tback.h{width:14px;height:7px;}
  .tback.v{width:7px;height:14px;}

  /* Fichas on the board — smaller */
  .tf.h{width:38px;height:19px;}
  .tf.v{width:19px;height:38px;}
  .tf.h .th{width:17px;height:19px;gap:0;padding:1px;}
  .tf.v .th{width:19px;height:17px;gap:0;padding:1px;}
  .pb{width:2.8px;height:2.8px;}
  .pb-e{width:2.8px;height:2.8px;}

  /* Extremos badge */
  #extremos{padding:3px 12px;gap:8px;}
  .ext-n{font-size:1.4rem;}
  .ext-lbl{font-size:0.42rem;}
  .ext-sep{font-size:0.7rem;}

  /* Player hand — mobile optimized */
  #phand{padding:4px 6px 6px;gap:4px;}
  #mycard{padding:3px 10px;gap:6px;border-radius:8px;}
  #mycard .pavatar{font-size:0.9rem !important;}
  #mycard .pname{font-size:0.6rem !important;}
  #mycard .pcnt{font-size:0.5rem !important;}
  #hand{gap:5px;}
  .tp{width:36px;height:68px;border-radius:6px;padding:3px 2px;}
  .tp:hover{transform:translateY(-12px) scale(1.06);}
  .hp{width:28px;height:25px;gap:1px;padding:2px;}
  .pp{width:5px;height:5px;}
  .pp-e{width:5px;height:5px;}
  .dp{width:65%;}
  #btn-pass{font-size:0.68rem;padding:5px 16px;}

  /* Bottom bar */
  #bot{max-height:120px;}
  .tab{font-size:0.56rem;padding:5px 0;}
  .tc{padding:6px 8px;max-height:100px;}
  .tgrid{gap:5px;}
  .tcard{padding:5px 7px;border-radius:6px;}
  .tcn{font-size:0.6rem;}
  .tcs{font-size:0.48rem;}
  .tcscore{font-size:1.15rem;}
  .tcbar{width:42px;}

  /* Modal — mobile friendly */
  #mcard{padding:18px 20px;max-width:260px;width:85%;}
  #m-title{font-size:0.9rem;}
  #m-sub{font-size:0.65rem;}
  .mbtn{padding:10px 6px;}
  .mbtn big{font-size:1.5rem;}
  .mbtn small{font-size:0.5rem;}

  /* Overlay result card */
  #rcard{padding:24px 28px;max-width:300px;}
  #r-ico{font-size:2.6rem;margin:4px 0 8px;}
  #r-ttl{font-size:1.5rem;}
  #r-sub{font-size:0.75rem;}
  #r-pts{font-size:1.1rem;margin-bottom:12px;}
  .rrow{font-size:0.7rem;}
  .rv{font-size:0.85rem;}
  #btn-new{padding:10px 28px;font-size:0.85rem;}

  /* Thinking indicator */
  #thinking{bottom:100px;padding:5px 12px;}
  #thinking span{font-size:0.6rem;}
  .td{width:5px;height:5px;}

  /* Notif */
  #notif{font-size:0.7rem;padding:4px 14px;}

  /* Auth/Lobby cards */
  .auth-card{padding:24px 24px;max-width:340px;border-radius:18px;}
  .auth-logo{font-size:1.5rem;}
  .lobby-card{padding:28px 24px;max-width:380px;border-radius:18px;}
  .lobby-title{font-size:1.6rem;}
  .lobby-btn{padding:12px 16px;font-size:0.85rem;border-radius:12px;}

  /* Waiting room */
  .waiting-card{padding:24px 20px;border-radius:18px;}
  .room-code-display{font-size:2.2rem;letter-spacing:6px;}
  .players-grid{gap:8px;}
  .player-slot{min-height:75px;padding:12px 8px;border-radius:12px;}
  .player-slot .slot-avatar{font-size:1.3rem;}
  .player-slot .slot-name{font-size:0.65rem;}

  /* Farolitos — smaller on mobile */
  .farol{width:9px;height:13px;opacity:0.35;}
}

/* Extra small screens (iPhone SE, etc) */
@media(max-width:380px){
  .tp{width:32px;height:60px;}
  .hp{width:24px;height:22px;}
  .pp{width:4px;height:4px;}
  .pp-e{width:4px;height:4px;}
  #hand{gap:3px;}
  #board-area{top:70px;bottom:95px;}
  .tf.h{width:32px;height:16px;}
  .tf.v{width:16px;height:32px;}
  .tf.h .th{width:14px;height:16px;}
  .tf.v .th{width:16px;height:14px;}
  .pb{width:2.2px;height:2.2px;}
  .pb-e{width:2.2px;height:2.2px;}
  .tcscore{font-size:1rem;}
  .room-code-display{font-size:1.8rem;letter-spacing:4px;}
}

@media(min-width:681px){#bot{display:none!important;}}

/* WALLET */
#wallet-overlay{position:fixed;inset:0;background:rgba(3,1,0,0.97);backdrop-filter:blur(14px);z-index:300;display:none;flex-direction:column;align-items:center;overflow-y:scroll;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;padding:20px 16px 80px;}
#wallet-overlay.on{display:flex;overflow-y:auto !important;}
.wallet-card{background:linear-gradient(145deg,#160b02,#201004);border:2px solid rgba(245,197,24,0.3);border-radius:22px;padding:28px 24px;max-width:400px;width:100%;position:relative;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,0.9);margin-top:10px;}
.wallet-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:repeating-linear-gradient(90deg,var(--terra) 0 12px,var(--oro) 12px 24px,var(--verde) 24px 36px,var(--azul) 36px 48px);}
.wallet-close{position:absolute;top:14px;right:14px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.5);border-radius:50%;width:34px;height:34px;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;z-index:10;}
.wallet-close:hover{color:#fff;background:rgba(255,255,255,0.14);}
.wallet-title{font-family:'Lilita One',cursive;font-size:1.1rem;color:var(--oro);letter-spacing:2px;margin:8px 0 18px;}
.wallet-section{margin-bottom:20px;}
.wallet-section-title{font-size:0.65rem;font-weight:700;letter-spacing:3px;color:var(--terra2);text-transform:uppercase;border-bottom:1px solid rgba(193,68,14,0.18);padding-bottom:6px;margin-bottom:12px;}
.wallet-balance{font-family:'Lilita One',cursive;font-size:2.4rem;color:var(--oro);text-align:center;margin:10px 0 4px;text-shadow:0 0 20px rgba(245,197,24,0.3);}
.wallet-balance-label{font-size:0.68rem;color:rgba(255,255,255,0.2);text-align:center;letter-spacing:2px;margin-bottom:14px;}
.wallet-address-box{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:10px;padding:10px 12px;display:flex;gap:10px;align-items:center;}
.wallet-address-text{font-size:0.7rem;color:rgba(255,255,255,0.5);flex:1;word-break:break-all;font-family:monospace;line-height:1.4;}
.wallet-copy-btn{background:rgba(245,197,24,0.08);border:1px solid rgba(245,197,24,0.25);color:var(--oro);border-radius:6px;padding:6px 10px;font-size:0.65rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:all .2s;flex-shrink:0;}
.wallet-copy-btn:hover{background:rgba(245,197,24,0.18);}
.wallet-qr{display:flex;justify-content:center;margin:12px 0;}
.wallet-qr canvas,.wallet-qr img{border-radius:8px;border:3px solid rgba(245,197,24,0.2);}
.wallet-note{font-size:0.66rem;color:rgba(255,255,255,0.2);text-align:center;line-height:1.5;margin-top:8px;}
.wallet-input{width:100%;padding:10px 14px;margin-bottom:10px;background:rgba(255,255,255,0.05);border:1.5px solid rgba(255,255,255,0.08);border-radius:10px;color:#fff;font-size:0.85rem;font-family:'DM Sans',sans-serif;outline:none;transition:border-color .2s;}
.wallet-input:focus{border-color:var(--oro);}
.wallet-input::placeholder{color:rgba(255,255,255,0.18);}
.wallet-btn{width:100%;padding:12px;margin-top:4px;background:linear-gradient(135deg,var(--terra),var(--terra2));color:#fff;border:none;border-radius:10px;font-family:'Lilita One',cursive;font-size:0.9rem;letter-spacing:2px;cursor:pointer;transition:all .2s;}
.wallet-btn:hover{transform:translateY(-1px);filter:brightness(1.1);}
.wallet-btn.secondary{background:transparent;border:1.5px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.4);font-size:0.75rem;margin-top:8px;}
.wallet-error{font-size:0.72rem;color:#e24b4a;min-height:18px;text-align:center;margin-top:6px;}
.wallet-success{font-size:0.72rem;color:var(--verde2);min-height:18px;text-align:center;margin-top:6px;}
.wallet-tx{display:flex;justify-content:space-between;align-items:center;padding:7px 4px;border-bottom:1px solid rgba(255,255,255,0.04);font-size:0.7rem;}
.wallet-tx:last-child{border:none;}
.wallet-tx-type{color:rgba(255,255,255,0.35);}
.wallet-tx-amount-in{color:var(--verde2);font-weight:700;}
.wallet-tx-amount-out{color:var(--terra2);font-weight:700;}
.wallet-tx-date{color:rgba(255,255,255,0.15);font-size:0.6rem;}
.wallet-empty{font-size:0.7rem;color:rgba(255,255,255,0.15);text-align:center;padding:14px 0;}

/* ══════════════════════════════════════
   v3: Room Creation Modal
   ══════════════════════════════════════ */
#create-modal{
  position:fixed;inset:0;background:rgba(3,1,0,0.9);
  backdrop-filter:blur(12px);z-index:150;display:none;
  align-items:center;justify-content:center;
}
#create-modal.on{display:flex;}
.create-card{
  background:linear-gradient(145deg,#160b02,#201004);
  border:2px solid rgba(245,197,24,0.3);border-radius:22px;
  padding:28px 28px;max-width:380px;width:92%;position:relative;
  box-shadow:0 40px 100px rgba(0,0,0,0.9);overflow:hidden;
}
.create-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:repeating-linear-gradient(90deg,var(--terra) 0 12px,var(--oro) 12px 24px,var(--verde) 24px 36px,var(--azul) 36px 48px);}
.create-title{font-family:'Lilita One',cursive;font-size:1.1rem;color:var(--oro);letter-spacing:2px;margin:8px 0 16px;text-align:center;}
.create-group{margin-bottom:16px;}
.create-label{font-size:0.68rem;font-weight:700;letter-spacing:2px;color:var(--terra2);text-transform:uppercase;margin-bottom:8px;}
.create-select,.create-input-num{
  width:100%;padding:10px 14px;
  background:rgba(255,255,255,0.05);border:1.5px solid rgba(255,255,255,0.08);
  border-radius:10px;color:#fff;font-size:0.9rem;
  font-family:'DM Sans',sans-serif;outline:none;transition:border-color .2s;
  -webkit-appearance:none;appearance:none;
}
.create-select:focus,.create-input-num:focus{border-color:var(--oro);}
.create-select option{background:#160b02;color:#fff;}
.create-toggle{display:flex;align-items:center;gap:10px;cursor:pointer;}
.create-toggle input[type=checkbox]{width:18px;height:18px;accent-color:var(--oro);}
.create-toggle span{font-size:0.78rem;color:rgba(255,255,255,0.45);}
.create-hint{font-size:0.6rem;color:rgba(255,255,255,0.18);margin-top:4px;line-height:1.4;}
.create-wager-info{
  background:rgba(245,197,24,0.06);border:1px solid rgba(245,197,24,0.15);
  border-radius:10px;padding:10px 14px;margin-top:10px;font-size:0.7rem;
  color:rgba(255,255,255,0.35);line-height:1.5;
}
.create-wager-info b{color:var(--oro);}
.create-actions{display:flex;gap:8px;margin-top:18px;}
.create-actions .auth-btn{flex:1;}
.create-actions .wallet-btn.secondary{flex:0.6;margin-top:0;}

/* Membership badge in lobby */
.membership-card{
  background:rgba(245,197,24,0.04);border:1px solid rgba(245,197,24,0.15);
  border-radius:12px;padding:12px 16px;margin:12px 0;text-align:center;
}
.membership-card.active{border-color:var(--verde);background:rgba(45,140,78,0.06);}
.membership-status{font-size:0.72rem;color:rgba(255,255,255,0.35);margin-bottom:6px;}
.membership-status b{color:var(--verde2);}
.membership-btn{
  background:rgba(245,197,24,0.1);border:1px solid rgba(245,197,24,0.3);
  color:var(--oro);border-radius:8px;padding:8px 18px;font-size:0.72rem;
  font-weight:700;letter-spacing:1px;cursor:pointer;transition:all .2s;
  font-family:'DM Sans',sans-serif;
}
.membership-btn:hover{background:rgba(245,197,24,0.2);}

/* Draw button */
#btn-draw{
  display:none;background:rgba(33,150,212,0.12);border:1.5px solid rgba(33,150,212,0.35);
  color:var(--azul2);border-radius:8px;padding:7px 20px;
  font-family:'DM Sans',sans-serif;font-size:0.76rem;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all .2s;
}
#btn-draw:hover{background:rgba(33,150,212,0.22);transform:scale(1.03);}

/* Wager badge in topbar */
.pill-wager{color:var(--oro) !important;border-color:rgba(245,197,24,0.4) !important;background:rgba(245,197,24,0.06);}

/* Improved invite share */
.invite-actions{display:flex;gap:6px;justify-content:center;margin:8px 0 14px;}
.invite-btn{
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.12);
  color:rgba(255,255,255,0.4);border-radius:8px;padding:8px 14px;
  font-size:0.68rem;font-weight:700;cursor:pointer;transition:all .2s;
  font-family:'DM Sans',sans-serif;display:flex;align-items:center;gap:5px;
}
.invite-btn:hover{background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.6);}
.invite-btn.primary{background:rgba(245,197,24,0.08);border-color:rgba(245,197,24,0.25);color:var(--oro);}

/* Wager result overlay extras */
.wager-result{
  background:rgba(245,197,24,0.06);border:1px solid rgba(245,197,24,0.15);
  border-radius:10px;padding:10px 14px;margin:8px 0;text-align:center;
}
.wager-payout{font-family:'Lilita One',cursive;font-size:1.3rem;color:var(--verde2);}
.wager-commission{font-size:0.6rem;color:rgba(255,255,255,0.2);margin-top:3px;}
.wager-refund{font-family:'Lilita One',cursive;font-size:1rem;color:var(--azul2);}

/* Room list in lobby */
.room-list{max-height:200px;overflow-y:auto;margin:10px 0;}
.room-list-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 12px;border:1px solid rgba(255,255,255,0.06);
  border-radius:10px;margin-bottom:6px;cursor:pointer;transition:all .2s;
  background:rgba(255,255,255,0.02);
}
.room-list-item:hover{background:rgba(245,197,24,0.05);border-color:rgba(245,197,24,0.2);}
.room-list-info{display:flex;flex-direction:column;gap:2px;}
.room-list-host{font-size:0.72rem;font-weight:700;color:rgba(255,255,255,0.5);}
.room-list-detail{font-size:0.58rem;color:rgba(255,255,255,0.2);}
.room-list-wager{font-family:'Lilita One',cursive;font-size:0.85rem;color:var(--oro);}
#wallet-overlay.on{position:fixed;inset:0;overflow-y:scroll !important;-webkit-overflow-scrolling:touch;}