:root{
  --tile-short:clamp(30px,5.5vw,42px);
  --tile-long:calc(var(--tile-short) * 2);
  --tile-radius:6px;
  --pip-size:calc(var(--tile-short) * 0.19);
  --divider-color:rgba(0,0,0,0.25)
}

#screen-game.active{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}

/* ============ SALA ============ */
.room-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.room-header h2{font-size:20px;color:var(--accent);letter-spacing:1px}
.room-code{font-family:monospace;background:var(--bg-1);padding:4px 10px;border-radius:6px;color:var(--accent-2);letter-spacing:2px;border:1px solid var(--border-strong)}
.room-info{font-size:12px;color:var(--text-dim);margin-top:4px}
.room-section-title{font-size:12px;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-dim);margin-bottom:12px}
.room-players-wrap{margin-bottom:24px}
.room-players{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.room-player{display:flex;align-items:center;gap:12px;background:var(--bg-1);border:1px solid var(--border);border-radius:10px;padding:12px 14px}
.room-player.host{border-color:var(--gold);background:rgba(255,204,68,0.05)}
.room-player-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;background:rgba(255,255,255,0.06);flex-shrink:0;overflow:hidden}
.room-player-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.room-player-info{flex:1;min-width:0}
.room-player-name{font-size:14px;font-weight:700;display:flex;align-items:center;gap:6px}
.me-badge{font-size:9px;padding:1px 6px;border-radius:3px;background:var(--accent-2);color:var(--bg-0);font-weight:800}
.room-player-role{font-size:10px;color:var(--text-dim);margin-top:2px}
.room-actions{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 0}
.room-actions .btn{width:auto;max-width:320px;padding:14px 32px;font-size:14px}
.room-hint{font-size:12px;color:var(--text-dim);text-align:center;max-width:400px;line-height:1.5}

/* ============ TABLERO ============ */
.game-board-wrapper{
  flex:1;position:relative;margin:8px 12px;border-radius:12px;overflow:hidden;
  background:radial-gradient(ellipse at center,#2c5530 0%,#143018 100%);
  border:1px solid rgba(0,0,0,.4);
  box-shadow:inset 0 0 60px rgba(0,0,0,.5),0 4px 20px rgba(0,0,0,.4);
  min-height:200px;transform-style:preserve-3d
}
.game-board-wrapper::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.06) 0%,transparent 60%);
  pointer-events:none;z-index:0
}

.game-board{
  position:absolute;inset:0;padding:30px 40px;
  display:flex;flex-direction:column;
  align-items:stretch;justify-content:center;
  overflow-y:auto;overflow-x:hidden;
  gap:8px;
  z-index:1;transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(0.4,0,0.2,1),padding .5s cubic-bezier(0.4,0,0.2,1);
  backface-visibility:hidden;will-change:transform
}
.game-board::-webkit-scrollbar{width:6px}
.game-board::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}

.board-fila{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:2px;
  flex-shrink:0;
  min-height:var(--tile-short);
}
.board-fila.reverse{
  flex-direction:row-reverse;
}
.board-fila.conectada::before{
  content:'⤵';
  position:absolute;
  right:-4px;
  font-size:12px;
  color:rgba(255,255,255,.3);
  pointer-events:none;
}
.board-fila.reverse.conectada::before{
  content:'⤴';
  left:-4px;
  right:auto;
}

.game-board > .tile-tablero{
  display:inline-flex;
  flex-shrink:0;
}

.board-empty{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:rgba(255,255,255,.35);font-size:13px;text-align:center;padding:20px;pointer-events:none;z-index:2}
.board-end-marker{position:absolute;top:12px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.4);pointer-events:none;font-weight:700;z-index:3;transition:all .3s}
.board-end-marker.left{left:16px}
.board-end-marker.right{right:16px}
.board-end-marker.activo{color:var(--accent);text-shadow:0 0 8px var(--accent)}

/* ============ FICHAS EN TABLERO ============ */
.tile-tablero{
  position:relative;
  display:flex;
  flex-shrink:0;
  border-radius:var(--tile-radius);
  transition:transform .25s,box-shadow .25s;
  background:linear-gradient(145deg,#faf5ea 0%,#e8dfc9 100%);
  border:1px solid #c8ba9a;
  margin:0;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  box-shadow:
    0 2px 4px rgba(0,0,0,.45),
    0 6px 12px rgba(0,0,0,.30),
    0 10px 20px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.85)
}

.tile-tablero.or-vertical{
  flex-direction:column;
  width:var(--tile-short);
  height:var(--tile-long)
}
.tile-tablero.or-vertical::after{
  content:'';position:absolute;top:50%;left:10%;right:10%;
  height:1px;background:var(--divider-color);
  transform:translateY(-.5px);pointer-events:none;z-index:1
}

.tile-tablero.or-horizontal{
  flex-direction:row;
  width:var(--tile-long);
  height:var(--tile-short)
}
.tile-tablero.or-horizontal::after{
  content:'';position:absolute;left:50%;top:10%;bottom:10%;
  width:1px;background:var(--divider-color);
  transform:translateX(-.5px);pointer-events:none;z-index:1
}

.tile-tablero .tile-half{
  position:relative;
  flex:1;
  display:block;
  min-width:0;
  min-height:0
}

.tile-tablero .pip{
  position:absolute;
  width:var(--pip-size);
  height:var(--pip-size);
  border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:inset -1px -1px 2px rgba(0,0,0,.35)
}

.tile-tablero.skin-glow{
  filter:drop-shadow(0 0 6px rgba(128,224,255,.3))
}

.game-board[data-layout="horizontal"] .tile-tablero{flex-direction:row;width:var(--tile-long);height:var(--tile-short)}
.game-board[data-layout="vertical"] .tile-tablero{flex-direction:column;width:var(--tile-short);height:var(--tile-long)}

/* ============ FICHAS EN MANO ============ */
.tile{
  position:relative;
  border-radius:var(--tile-radius);
  display:flex;flex-direction:column;flex-shrink:0;
  transition:transform .2s,box-shadow .2s;
  background:linear-gradient(145deg,#faf5ea 0%,#e8dfc9 100%);
  border:1px solid #c8ba9a;
  width:var(--tile-short);
  height:var(--tile-long);
  box-shadow:
    0 2px 4px rgba(0,0,0,.4),
    0 6px 12px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.85)
}
.tile::after{
  content:'';position:absolute;top:50%;left:10%;right:10%;
  height:1px;background:var(--divider-color);
  transform:translateY(-.5px);pointer-events:none
}
.tile .tile-half{position:relative;flex:1;display:block}
.tile .pip{
  position:absolute;
  width:var(--pip-size);
  height:var(--pip-size);
  border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:inset -1px -1px 2px rgba(0,0,0,.35)
}
.tile.dragging{opacity:0.25}
.tile.drag-ghost{position:fixed;pointer-events:none;z-index:99999;transform:scale(1.08)}

/* ============ FICHAS BOCA ABAJO ============ */
.tile-mini-back{
  width:calc(var(--tile-short) * 0.42);
  height:calc(var(--tile-short) * 0.85);
  border-radius:3px;
  border:1px solid;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  box-shadow:
    0 1px 2px rgba(0,0,0,.5),
    0 2px 4px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.25);
  transform:rotateX(18deg);
  transform-origin:center bottom;
  transition:transform .2s
}
.tile-mini-back .tile-back-icon{
  font-size:calc(var(--tile-short) * 0.22);
  opacity:.55;
  pointer-events:none
}

/* ============ FILA DE FICHAS DEL OPONENTE ============ */
.tile-row{
  display:inline-flex;
  align-items:flex-end;
  gap:2px;
  padding:4px 6px;
  background:rgba(0,0,0,.35);
  border-radius:8px;
  border:1px solid rgba(255,255,255,.05);
  perspective:400px;
  perspective-origin:50% 100%;
  margin-left:6px;
  box-shadow:inset 0 -2px 6px rgba(0,0,0,.5)
}
.tile-row-extra{
  align-self:flex-end;
  margin-left:4px;
  font-size:10px;
  font-weight:800;
  color:var(--accent-2);
  background:rgba(0,0,0,.75);
  padding:2px 6px;
  border-radius:8px;
  white-space:nowrap
}

/* ============ DROP ZONES ============ */
.drop-zone{
  position:absolute;top:0;bottom:0;width:50%;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .15s,background .15s;
  z-index:20;color:rgba(255,255,255,.6);
  font-size:13px;font-weight:800;letter-spacing:3px;text-transform:uppercase;
  border:2px dashed transparent
}
.drop-zone.left{left:0}
.drop-zone.right{right:0}
.drop-zone.visible{opacity:1;pointer-events:auto;background:rgba(0,0,0,.35)}
.drop-zone.hover{background:rgba(128,224,255,.25);color:#fff;box-shadow:inset 0 0 40px rgba(128,224,255,.4)}
.drop-zone span{pointer-events:none;text-shadow:0 2px 8px rgba(0,0,0,.8)}

/* ============ MANO ============ */
.game-hand-wrapper{flex-shrink:0;padding:10px 12px 14px;background:rgba(0,0,0,.4);border-top:1px solid rgba(255,255,255,.08)}
.game-hand-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:11px;letter-spacing:1px;text-transform:uppercase;opacity:.7}
.game-hand{display:flex;gap:6px;overflow-x:auto;padding:6px 4px 10px;min-height:var(--tile-long)}
.game-hand::-webkit-scrollbar{height:5px}
.game-hand::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}
.game-hand .tile{cursor:pointer;user-select:none;-webkit-user-drag:none;touch-action:none}
.game-hand .tile.jugable{border-color:#d4a574;box-shadow:0 0 0 2px #d4a574,0 4px 8px rgba(0,0,0,.5);cursor:grab}
.game-hand .tile.jugable:hover{transform:translateY(-6px);box-shadow:0 0 0 2px #d4a574,0 8px 16px rgba(0,0,0,.6)}
.game-hand .tile.bloqueada{opacity:.4;filter:grayscale(.7);cursor:not-allowed}

/* ============ TOPBAR JUEGO ============ */
.game-topbar{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:rgba(0,0,0,.4);border-bottom:1px solid rgba(255,255,255,.05);flex-shrink:0;gap:12px}
.game-info{display:flex;flex-direction:column;align-items:center;font-size:11px}
.game-info #game-room-name{font-weight:700;color:var(--accent)}
.game-info #game-tipo{font-size:10px;opacity:.6}
.game-balance{font-size:11px;color:var(--text-dim)}

/* ============ OPONENTES ============ */
.game-opponents{display:flex;gap:8px;padding:8px 12px;background:rgba(0,0,0,.25);border-bottom:1px solid rgba(255,255,255,.05);flex-shrink:0;overflow-x:auto;min-height:82px;align-items:center}
.game-opponent{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);flex-shrink:0;position:relative;min-height:66px;transition:all .25s}
.game-opponent .avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;background:rgba(255,255,255,.1);flex-shrink:0;position:relative;overflow:hidden}
.game-opponent .avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.game-opponent .name{font-size:12px;font-weight:700}
.game-opponent .count{font-size:10px;opacity:.6;margin-top:2px}

.game-opponent.activo{
  border-color:#ffd166;
  background:linear-gradient(135deg, rgba(255,209,102,.28), rgba(255,180,60,.15));
  box-shadow:
    0 0 0 2px rgba(255,209,102,.6),
    0 0 20px rgba(255,209,102,.55),
    0 0 40px rgba(255,180,60,.25) inset;
  transform:scale(1.05);
  animation:pulsoTurno 1.6s ease-in-out infinite;
}
.game-opponent.activo .name{
  color:#ffd166;
  font-weight:800;
  text-shadow:0 0 8px rgba(255,209,102,.6);
}
.game-opponent.activo .count{
  color:#ffd166;
  opacity:.9;
}
.game-opponent.activo::before{
  content:'▶ TURNO';
  position:absolute;
  top:-10px;
  left:50%;
  transform:translateX(-50%);
  background:#ffd166;
  color:#1a1a1a;
  font-size:9px;
  font-weight:900;
  letter-spacing:1.5px;
  padding:3px 10px;
  border-radius:10px;
  box-shadow:0 2px 8px rgba(0,0,0,.5);
  white-space:nowrap;
  z-index:5;
}
@keyframes pulsoTurno{
  0%, 100% { box-shadow:0 0 0 2px rgba(255,209,102,.6), 0 0 20px rgba(255,209,102,.55), 0 0 40px rgba(255,180,60,.25) inset; }
  50%      { box-shadow:0 0 0 3px rgba(255,209,102,.9), 0 0 30px rgba(255,209,102,.85), 0 0 50px rgba(255,180,60,.4) inset; }
}

.game-opponent .badge-paso{
  position:absolute;
  top:-8px;
  right:-8px;
  background:#ff5566;
  color:#fff;
  font-size:9px;
  font-weight:900;
  letter-spacing:0.8px;
  padding:3px 8px;
  border-radius:10px;
  box-shadow:0 2px 8px rgba(0,0,0,.6);
  animation:pasoPop 2s ease-out forwards;
  z-index:6;
  white-space:nowrap;
}
.game-opponent .badge-paso.robo{
  background:#80e0ff;
  color:#04121a;
}
@keyframes pasoPop{
  0%   { opacity:0; transform:scale(.4) translateY(-10px); }
  15%  { opacity:1; transform:scale(1.15) translateY(0); }
  30%  { transform:scale(1); }
  85%  { opacity:1; }
  100% { opacity:0; transform:translateY(-14px) scale(.9); }
}

/* ============ ACCIONES ============ */
.game-actions{display:flex;gap:8px;padding:8px 12px 12px;justify-content:center;flex-shrink:0}

/* ============ OVERLAYS ============ */
.turn-overlay,.end-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.9);backdrop-filter:blur(10px);z-index:300}
.turn-overlay.visible,.end-overlay.visible{display:flex}
.turn-content{text-align:center}
.turn-avatar{width:100px;height:100px;border-radius:50%;background:rgba(212,165,116,.15);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:50px;border:2px solid var(--accent);overflow:hidden}
.turn-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.turn-content h2{font-size:24px;letter-spacing:4px;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.end-content{text-align:center;max-width:500px;padding:30px}
.end-trophy{font-size:80px;margin-bottom:20px}
.end-content h2{font-size:32px;letter-spacing:4px;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.end-content p{font-size:14px;opacity:.8;line-height:1.6;margin-bottom:20px;white-space:pre-line}
.end-content .btn{margin:6px;width:auto}

#turn-overlay.turn-notify{
  inset: auto !important;
  top: auto !important;
  bottom: 130px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none;
  z-index: 250;
  display: none;
}
#turn-overlay.turn-notify.visible{
  display: block;
}
#turn-overlay.turn-notify .turn-content{
  background: linear-gradient(135deg, #ffd166 0%, #ffb84d 100%);
  color: #1a1a1a;
  padding: 16px 32px 16px 18px;
  border-radius: 50px;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.35) inset,
    0 8px 32px rgba(0,0,0,.7),
    0 0 40px rgba(255,209,102,.6),
    0 0 80px rgba(255,180,60,.35);
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.5px;
  white-space: nowrap;
  animation: turnPop .4s cubic-bezier(.34,1.56,.64,1);
  text-align: left;
  border: 2px solid rgba(255,255,255,.5);
}
#turn-overlay.turn-notify .turn-avatar{
  width: 56px;
  height: 56px;
  margin: 0;
  font-size: 32px;
  border: 3px solid rgba(26,26,26,.7);
  background: rgba(255,255,255,.4);
  flex-shrink: 0;
  box-shadow:0 3px 10px rgba(0,0,0,.3);
}
#turn-overlay.turn-notify .turn-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
#turn-overlay.turn-notify .turn-content h2{
  font-size: 20px;
  letter-spacing: 1px;
  color: #1a1a1a;
  margin: 0;
  text-transform: uppercase;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
#turn-overlay.turn-notify .turn-content p{
  display: none;
}
@keyframes turnPop{
  0%   { opacity: 0; transform: scale(.5) translateY(30px); }
  60%  { opacity: 1; transform: scale(1.08) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ============ LOBBY ============ */
.lobby-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:12px;flex-wrap:wrap}
.lobby-header h2{font-size:18px;color:var(--accent)}
.lobby-header .btn{width:auto}
.room-card{background:var(--bg-1);border:1px solid var(--border);border-radius:10px;padding:14px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.room-card .info{flex:1;min-width:200px}
.room-card .nombre{font-size:14px;font-weight:700;margin-bottom:4px}
.room-card .meta{font-size:11px;color:var(--text-dim);line-height:1.5}
.room-card .badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:700;background:rgba(212,165,116,.15);color:var(--accent);margin-right:6px}
.room-card .badge.playing{background:rgba(255,85,102,.15);color:var(--red)}
.room-card .badge.full{background:rgba(122,138,154,.2);color:var(--text-dim)}
.empty-state{text-align:center;padding:40px;color:var(--text-dim);font-size:13px}

/* ============ CHAT ============ */
.chat-panel{position:fixed;right:16px;bottom:16px;width:340px;max-height:60vh;background:rgba(13,20,32,.97);border:1px solid var(--border-strong);border-radius:12px;display:flex;flex-direction:column;z-index:200;box-shadow:0 12px 40px rgba(0,0,0,.6)}
.chat-panel.hidden{display:none}
.chat-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--border);font-size:12px;font-weight:700;color:var(--accent)}
.chat-messages{flex:1;overflow-y:auto;padding:10px 14px;display:flex;flex-direction:column;gap:8px;min-height:180px;max-height:40vh}
.chat-message{padding:6px 10px;border-radius:8px;background:rgba(255,255,255,.04);font-size:12px;max-width:90%;align-self:flex-start}
.chat-message.mio{background:rgba(128,224,255,.08);align-self:flex-end;text-align:right}
.chat-author{font-size:10px;font-weight:700;margin-bottom:2px}
.chat-text{line-height:1.4;word-wrap:break-word}
.chat-input{display:flex;gap:6px;padding:10px;border-top:1px solid var(--border)}
.chat-input input{flex:1;padding:8px 10px;background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:6px;color:var(--text);font-family:inherit;font-size:13px;outline:none}

/* ============ EMOTES ============ */
.emotes-panel{position:fixed;right:16px;bottom:80px;background:rgba(13,20,32,.97);border:1px solid var(--border-strong);border-radius:12px;padding:10px;z-index:200;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;box-shadow:0 8px 30px rgba(0,0,0,.6)}
.emotes-panel.hidden{display:none}
.emote-btn{width:48px;height:48px;background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:8px;font-size:26px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.emote-btn:hover{background:rgba(128,224,255,.15);transform:scale(1.15)}

/* ============ PANEL DE CONFIG EN PARTIDA ============ */
.game-settings-panel{
  position:fixed;
  right:16px;
  top:60px;
  width:320px;
  max-height:75vh;
  overflow-y:auto;
  background:rgba(13,20,32,.98);
  border:1px solid var(--border-strong);
  border-radius:12px;
  padding:16px;
  z-index:210;
  box-shadow:0 12px 40px rgba(0,0,0,.7);
  backdrop-filter:blur(12px)
}
.game-settings-panel.hidden{display:none}
.game-settings-panel h4{
  font-size:11px;
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:1.5px;
  margin-bottom:10px;
  margin-top:16px
}
.game-settings-panel h4:first-child{margin-top:0}
.game-settings-panel .config-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin-bottom:6px
}
.game-settings-panel .config-btn{
  padding:8px 6px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  color:var(--text-dim);
  font-family:inherit;
  font-size:10px;
  font-weight:700;
  cursor:pointer;
  text-align:center;
  transition:all .2s;
  line-height:1.3
}
.game-settings-panel .config-btn:hover{background:rgba(255,255,255,.1);color:var(--text)}
.game-settings-panel .config-btn.active{
  background:rgba(128,224,255,.15);
  border-color:var(--accent-2);
  color:var(--accent-2);
  box-shadow:0 0 8px rgba(128,224,255,.3)
}
.game-settings-panel .config-btn .cb-icon{font-size:18px;display:block;margin-bottom:2px}
.game-settings-panel .config-btn .cb-name{font-size:9px;letter-spacing:0.3px}

#emotes-flotantes{position:absolute;inset:0;pointer-events:none;z-index:50}
.emote-flotante{position:absolute;display:flex;flex-direction:column;align-items:center;gap:4px;animation:emoteFloat 2.5s ease-out forwards;pointer-events:none}
.emote-icon{font-size:64px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.6))}
.emote-nombre{font-size:11px;color:rgba(255,255,255,.85);font-weight:700;background:rgba(0,0,0,.6);padding:2px 8px;border-radius:10px}
@keyframes emoteFloat{0%{opacity:0;transform:translateY(20px) scale(.5)}15%{opacity:1;transform:translateY(0) scale(1.1)}30%{transform:translateY(-10px) scale(1)}100%{opacity:0;transform:translateY(-120px) scale(.9)}}

/* ============ REPLAYS ============ */
.replays-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.replays-header h2{font-size:18px;color:var(--accent)}
.replay-card{background:var(--bg-1);border:1px solid var(--border);border-radius:10px;padding:14px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.replay-info{flex:1;min-width:220px}
.replay-title{font-size:14px;font-weight:700;margin-bottom:4px}
.replay-meta{font-size:11px;color:var(--text-dim);line-height:1.5}
#replay-player{display:flex;flex-direction:column;gap:12px}
#replay-player.hidden{display:none}
.replay-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;flex-wrap:wrap}
.replay-title-bar{font-size:14px;font-weight:700;color:var(--accent)}
.replay-pos{font-size:12px;color:var(--text-dim);font-family:monospace}
.replay-players{display:flex;gap:8px;padding:8px 0;flex-wrap:wrap}
.replay-board-wrapper{position:relative;flex:1;min-height:300px;border-radius:12px;overflow:hidden;background:radial-gradient(ellipse at center,#2c5530 0%,#143018 100%);border:1px solid rgba(0,0,0,.4)}
.replay-board{position:absolute;inset:0;padding:40px 60px;display:flex;align-items:center;justify-content:flex-start;overflow-x:auto;gap:2px}
.replay-info-panel{background:var(--bg-1);border:1px solid var(--border);border-radius:8px;padding:12px;font-size:13px;text-align:center;color:var(--accent-2);min-height:44px;display:flex;align-items:center;justify-content:center}
.replay-controls{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.replay-controls .btn{min-width:100px}
.replay-scrubber{display:flex;justify-content:center}
.replay-scrubber input[type="range"]{width:100%;max-width:600px;accent-color:var(--accent-2)}
.replay-speed{display:flex;gap:6px;justify-content:center;align-items:center;font-size:12px;color:var(--text-dim);flex-wrap:wrap}
.speed-btn{padding:4px 10px;background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--text-dim);border-radius:6px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit}
.speed-btn.active{background:rgba(128,224,255,.15);border-color:var(--accent-2);color:var(--accent-2)}

/* ============ SKINS PREVIEW ============ */
.settings-hint{font-size:12px;color:var(--text-dim);margin-bottom:14px;line-height:1.5}
.skins-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin-top:8px}
.skin-card{background:var(--bg-2);border:2px solid var(--border);border-radius:12px;padding:12px;cursor:pointer;font-family:inherit;color:var(--text);text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center}
.skin-card:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.skin-card.active{border-color:var(--accent-2);background:rgba(128,224,255,.08)}
.skin-card.locked{opacity:.55}
.skin-preview{width:48px;height:96px;border-radius:6px;border:1px solid;display:flex;flex-direction:column;position:relative;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.skin-preview-pip{position:absolute;width:9px;height:9px;border-radius:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset -1px -1px 2px rgba(0,0,0,.4)}
.skin-preview-pip:nth-child(1){top:25%}
.skin-preview-pip:nth-child(2){top:35%;left:30%}
.skin-preview-pip:nth-child(3){top:75%}
.skin-preview-divider{position:absolute;top:50%;left:15%;right:15%;height:1px;background:rgba(0,0,0,.3)}
.skin-preview-back{align-items:center;justify-content:center;color:rgba(255,255,255,.6)}
.skin-name{font-size:11px;font-weight:700;letter-spacing:0.3px}
.skin-status{font-size:9px;opacity:.65;letter-spacing:0.5px;text-transform:uppercase}

/* ============ CAMERA PREVIEWS ============ */
.camera-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:8px}
.camera-card{background:var(--bg-2);border:2px solid var(--border);border-radius:12px;padding:10px;cursor:pointer;font-family:inherit;color:var(--text);text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center;transition:all .2s}
.camera-card:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.camera-card.active{border-color:var(--accent-2);background:rgba(128,224,255,.08)}
.camera-icon{font-size:28px;line-height:1}
.camera-name{font-size:11px;font-weight:700}
.camera-desc{font-size:9px;opacity:.6;line-height:1.3}

/* ============ MOBILE ============ */
@media(max-width:600px){
  .room-players{grid-template-columns:1fr}
  .room-header h2{font-size:16px}
  .room-actions .btn{padding:12px 20px;font-size:13px}
  .drop-zone{font-size:11px;letter-spacing:2px}
  .game-board{padding:20px 24px}
  .chat-panel{right:8px;bottom:8px;left:8px;width:auto;max-height:50vh}
  .emotes-panel{right:8px;bottom:70px}
  .game-settings-panel{right:8px;left:8px;width:auto;top:auto;bottom:70px;max-height:60vh}
  .skins-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr))}
  .tile-row{display:none}
  #turn-overlay.turn-notify{ bottom: 100px; }
  #turn-overlay.turn-notify .turn-content{ padding: 12px 20px 12px 12px; font-size: 15px; gap: 10px; }
  #turn-overlay.turn-notify .turn-avatar{ width: 42px; height: 42px; font-size: 22px; }
  #turn-overlay.turn-notify .turn-content h2{ font-size: 15px; }
  .game-opponent.activo{ transform:scale(1.02); }
}

/* ============ ELEGIR SALIDA ============ */
.elegir-salida-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
.elegir-salida-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  font-size: 14px;
  justify-content: flex-start;
  text-align: left;
}
.elegir-salida-btn:hover {
  background: rgba(128,224,255,.18);
  border-color: var(--accent-2);
}
.elegir-salida-btn .avatar-mini {
  font-size: 24px;
  line-height: 1;
}
.game-opponent.candidato {
  border-color: var(--gold);
  background: rgba(255,204,68,.12);
  box-shadow: 0 0 14px rgba(255,204,68,.25);
}

/* ============ ANIMACIONES DE FICHA ============ */
.tile-tablero.anim-fade { animation: tileFade .4s ease-out; }
@keyframes tileFade { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
.tile-tablero.anim-slide { animation: tileSlide .45s cubic-bezier(.4,0,.2,1); }
@keyframes tileSlide { from { opacity: .3; transform: translateX(-30px) rotate(-6deg); } to { opacity: 1; transform: translateX(0) rotate(0); } }
.tile-tablero.anim-bounce { animation: tileBounce .55s cubic-bezier(.4,1.56,.64,1); }
@keyframes tileBounce { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }

@media (max-width: 600px) {
  .elegir-salida-lista { max-width: 90vw; }
  .elegir-salida-btn { padding: 12px 16px; font-size: 13px; }
}

/* ============ COMPARTIR PARTIDA ============ */
.room-share-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.room-share-actions .btn { font-size: 12px; padding: 6px 12px; }
@media (max-width: 600px) {
  .room-share-actions .btn { font-size: 11px; padding: 5px 10px; }
}

/* ============================================================
   🆕 FASE 2 — MESA DE PAREJAS (4 asientos)
   ============================================================ */

.game-opponents.game-opponents-parejas {
  display: flex;
  flex-direction: column;
  padding: 8px;
  min-height: 220px;
  align-items: stretch;
}

.mesa-parejas {
  display: grid;
  grid-template-columns: 130px 1fr 130px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    ". norte ."
    "oeste centro este"
    ". sur .";
  gap: 8px;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  align-items: center;
  justify-items: center;
}

.mp-norte  { grid-area: norte;  justify-self: center; align-self: end; }
.mp-sur    { grid-area: sur;    justify-self: center; align-self: start; }
.mp-oeste  { grid-area: oeste;  justify-self: start;  align-self: center; }
.mp-este   { grid-area: este;   justify-self: end;    align-self: center; }
.mp-centro { grid-area: centro; justify-self: center; align-self: center; }

.seat-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  min-width: 100px;
  max-width: 140px;
  transition: all .25s ease;
  position: relative;
}

.seat-card.seat-card { flex-shrink: 0; }

.seat-etiqueta {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  opacity: .9;
  margin-bottom: 2px;
}

.seat-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.seat-info { min-width: 0; flex: 1; }

.seat-card .avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  overflow: hidden;
}

.seat-card .name {
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
}

.seat-card .count {
  font-size: 9px;
  opacity: .7;
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}

.seat-card.activo {
  border-color: #ffd166;
  background: linear-gradient(135deg, rgba(255, 209, 102, .22), rgba(255, 180, 60, .08));
  box-shadow:
    0 0 0 2px rgba(255, 209, 102, .55),
    0 0 18px rgba(255, 209, 102, .5);
  transform: scale(1.06);
  animation: seatPulso 1.6s ease-in-out infinite;
}

.seat-card.activo .name {
  color: #ffd166;
  text-shadow: 0 0 8px rgba(255, 209, 102, .6);
}

.seat-card.activo::before {
  content: '▶ TURNO';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: #ffd166;
  color: #1a1a1a;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 8px;
  white-space: nowrap;
  z-index: 5;
}

@keyframes seatPulso {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(255, 209, 102, .55),
      0 0 18px rgba(255, 209, 102, .5);
  }
  50% {
    box-shadow:
      0 0 0 3px rgba(255, 209, 102, .9),
      0 0 26px rgba(255, 209, 102, .8);
  }
}

.seat-card.soy-yo {
  border-style: dashed;
  border-width: 2px;
}

.seat-card.soy-yo::after {
  content: 'TÚ';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-2);
  color: var(--bg-0);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 1px 6px;
  border-radius: 6px;
  z-index: 4;
}

.mp-marcador {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, .45);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  min-width: 180px;
}

.mp-eq {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  border-radius: 8px;
  border: 1px solid;
  background: rgba(0, 0, 0, .25);
}

.mp-eq-lbl {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.mp-eq-pts {
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px currentColor;
}

.mp-vs {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  opacity: .5;
  text-transform: uppercase;
}

.seat-fichas {
  display: flex;
  gap: 1px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2px;
}

.seat-fichas::before {
  content: attr(data-fichas) ' 🎴';
  font-size: 10px;
  opacity: .7;
  font-weight: 700;
}

@media (max-width: 600px) {
  .game-opponents.game-opponents-parejas {
    min-height: 190px;
    padding: 4px;
  }
  .mesa-parejas {
    grid-template-columns: 90px 1fr 90px;
    gap: 4px;
    max-width: 100%;
  }
  .seat-card {
    padding: 5px 6px;
    min-width: 80px;
    max-width: 110px;
  }
  .seat-card .avatar { width: 22px; height: 22px; font-size: 12px; }
  .seat-card .name { font-size: 10px; max-width: 70px; }
  .seat-card .count { font-size: 8px; }
  .seat-etiqueta { font-size: 8px; letter-spacing: .5px; }
  .mp-marcador { padding: 6px 8px; min-width: 130px; gap: 6px; }
  .mp-eq-pts { font-size: 16px; }
  .mp-eq-lbl { font-size: 8px; }
}

/* ============================================================
   🆕 FASE 3.5 — PANEL DE ECONOMÍA FLOTANTE
   ============================================================ */

#game-economia-panel {
  position: fixed;
  bottom: 90px;
  left: 12px;
  z-index: 180;
  background: rgba(13, 20, 32, .94);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 10px 12px;
  min-width: 190px;
  max-width: 240px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 11px;
  transition: all .25s cubic-bezier(.4, 0, 0.2, 1);
  pointer-events: auto;
}

#game-economia-panel.hidden { display: none; }

#game-economia-panel.economia-colapsada {
  min-width: 0;
  max-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

#game-economia-panel.economia-colapsada .eco-content {
  display: none;
}

.eco-toggle {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .5);
  transition: all .2s;
  z-index: 5;
}

.eco-toggle:hover {
  background: var(--accent-2);
  color: var(--bg-0);
  transform: scale(1.08);
}

#game-economia-panel.economia-colapsada .eco-toggle {
  position: fixed;
  bottom: 90px;
  left: 12px;
  width: 44px;
  height: 44px;
  font-size: 20px;
  background: linear-gradient(135deg, var(--gold), #ffaa00);
  color: #1a1a1a;
  border-color: #ffaa00;
  box-shadow: 0 6px 20px rgba(255, 170, 0, .4);
}

#game-economia-panel.economia-colapsada .eco-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 26px rgba(255, 170, 0, .6);
}

.eco-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.eco-titulo {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}

.eco-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}

.eco-lbl {
  color: var(--text-dim);
  font-weight: 700;
  letter-spacing: .3px;
  font-size: 10px;
  white-space: nowrap;
}

.eco-val {
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  white-space: nowrap;
  text-align: right;
}

.eco-total {
  border-top: 1px solid var(--border);
  margin-top: 3px;
  padding-top: 5px;
}

.eco-pozo {
  border-top: 1px dashed rgba(255, 204, 68, .3);
  margin-top: 4px;
  padding-top: 6px;
}

.eco-pozo .eco-lbl {
  color: var(--gold);
  font-weight: 900;
}

@media (max-width: 600px) {
  #game-economia-panel {
    bottom: auto;
    top: 100px;
    left: 8px;
    min-width: 160px;
    max-width: 200px;
    padding: 8px 10px;
    font-size: 10px;
  }
  #game-economia-panel.economia-colapsada .eco-toggle {
    top: 100px;
    bottom: auto;
    left: 8px;
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
  .eco-lbl { font-size: 9px; }
  .eco-val { font-size: 10px; }
}

/* ============================================================
   🆕 FASE 3.5 — PULIDO DE FICHAS
   ============================================================ */

.tile,
.tile-tablero {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .5),
    0 3px 6px rgba(0, 0, 0, .35),
    0 6px 14px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 -1px 2px rgba(0, 0, 0, .1);
}

.tile::after,
.tile-tablero.or-vertical::after {
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, .18) 15%,
    rgba(0, 0, 0, .28) 50%,
    rgba(0, 0, 0, .18) 85%,
    transparent 100%
  );
  height: 1.5px;
}

.tile-tablero.or-horizontal::after {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, .18) 15%,
    rgba(0, 0, 0, .28) 50%,
    rgba(0, 0, 0, .18) 85%,
    transparent 100%
  );
  width: 1.5px;
}

.tile .pip,
.tile-tablero .pip {
  box-shadow:
    inset -1px -1px 2px rgba(0, 0, 0, .45),
    inset 1px 1px 1px rgba(255, 255, 255, .25),
    0 0 0 .5px rgba(0, 0, 0, .15);
}

.tile.jugable {
  border-color: #d4a574;
  box-shadow:
    0 0 0 2px #d4a574,
    0 2px 4px rgba(0, 0, 0, .5),
    0 6px 14px rgba(212, 165, 116, .25),
    inset 0 1px 0 rgba(255, 255, 255, .7);
}

.tile.jugable:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow:
    0 0 0 2px #d4a574,
    0 0 0 3px rgba(212, 165, 116, .3),
    0 8px 20px rgba(212, 165, 116, .45),
    inset 0 1px 0 rgba(255, 255, 255, .8);
}

.tile.bloqueada {
  opacity: .35;
  filter: grayscale(.85) brightness(.75);
}

.tile-tablero {
  transition: transform .3s ease, box-shadow .3s ease;
}

.tile-tablero.or-vertical { border-radius: 5px; }
.tile-tablero.or-horizontal { border-radius: 5px; }

.tile-tablero::before {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 8%;
  right: 8%;
  height: 4px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .5) 0%, transparent 70%);
  filter: blur(3px);
  pointer-events: none;
  z-index: -1;
}

.tile-tablero .pip {
  transform: translate(-50%, -50%) scale(1);
  transition: transform .2s;
}

.tile.doble,
.tile-tablero.or-vertical {
  border-width: 1.2px;
}

/* ============================================================
   🆕 PANEL ECONOMÍA — dropdown desde el topbar (no invasivo)
   ============================================================ */

#btn-economia.hidden { display: none !important; }

#game-economia-panel {
  position: fixed;
  top: 60px;
  right: 16px;
  z-index: 220;
  background: rgba(13, 20, 32, .97);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 12px 14px;
  min-width: 220px;
  max-width: 260px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 11px;
  transition: opacity .2s, transform .2s;
  animation: ecoSlide .22s cubic-bezier(.34,1.56,.64,1);
}

@keyframes ecoSlide {
  from { opacity: 0; transform: translateY(-8px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

#game-economia-panel.hidden { display: none; }

.eco-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

.eco-titulo {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
}

.eco-cerrar {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all .15s;
}

.eco-cerrar:hover {
  background: rgba(255, 255, 255, .1);
  color: var(--red);
}

.eco-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.eco-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}

.eco-lbl {
  color: var(--text-dim);
  font-weight: 700;
  letter-spacing: .3px;
  font-size: 10px;
  white-space: nowrap;
}

.eco-val {
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  white-space: nowrap;
  text-align: right;
}

.eco-total {
  border-top: 1px solid var(--border);
  margin-top: 3px;
  padding-top: 6px;
}

.eco-pozo {
  border-top: 1px dashed rgba(255, 204, 68, .3);
  margin-top: 4px;
  padding-top: 6px;
}

.eco-pozo .eco-lbl {
  color: var(--gold);
  font-weight: 900;
}

@media (max-width: 600px) {
  #game-economia-panel {
    top: 56px;
    right: 8px;
    left: 8px;
    max-width: none;
    min-width: 0;
    padding: 10px 12px;
  }
  .eco-lbl { font-size: 9px; }
  .eco-val { font-size: 10px; }
}

/* ============================================================
   🆕 PIPS — separación entre mitades de la ficha
   ============================================================ */

.tile-half {
  overflow: hidden;
}

.tile-half-top,
.tile-half-bot {
  padding: 4% 6%;
}

.tile-half-izq,
.tile-half-der {
  padding: 6% 4%;
}

/* ============================================================
   🆕 PANEL ECONOMÍA — dropdown desde el topbar
   ============================================================ */

#btn-economia.hidden { display: none !important; }

#game-economia-panel {
  position: fixed;
  top: 60px;
  right: 16px;
  z-index: 220;
  background: rgba(13, 20, 32, .97);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 12px 14px;
  min-width: 220px;
  max-width: 260px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 11px;
  animation: ecoSlide .22s cubic-bezier(.34,1.56,.64,1);
}

@keyframes ecoSlide {
  from { opacity: 0; transform: translateY(-8px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

#game-economia-panel.hidden { display: none; }

.eco-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

.eco-titulo {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
}

.eco-cerrar {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all .15s;
}

.eco-cerrar:hover {
  background: rgba(255, 255, 255, .1);
  color: var(--red);
}

.eco-content { display: flex; flex-direction: column; gap: 5px; }

.eco-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}

.eco-lbl {
  color: var(--text-dim);
  font-weight: 700;
  font-size: 10px;
  white-space: nowrap;
}

.eco-val {
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  white-space: nowrap;
  text-align: right;
}

.eco-total {
  border-top: 1px solid var(--border);
  margin-top: 3px;
  padding-top: 6px;
}

.eco-pozo {
  border-top: 1px dashed rgba(255, 204, 68, .3);
  margin-top: 4px;
  padding-top: 6px;
}

.eco-pozo .eco-lbl {
  color: var(--gold);
  font-weight: 900;
}

@media (max-width: 600px) {
  #game-economia-panel {
    top: 56px;
    right: 8px;
    left: 8px;
    max-width: none;
    min-width: 0;
  }
}
/* ============================================================
   RESPONSIVE — MÓVIL
   ============================================================ */
@media (max-width: 700px) {
  .game-opponents.game-opponents-mesa {
    margin: 2px 4px !important;
  }

  .mesa-grid {
    grid-template-columns: 70px 1fr 70px !important;
    grid-template-rows: 55px 1fr 55px !important;
    gap: 2px !important;
  }

  .asiento-card {
    min-width: 62px !important;
    max-width: 78px !important;
    padding: 4px 5px !important;
    gap: 2px !important;
    border-radius: 8px !important;
  }

  .asiento-avatar {
    width: 22px !important;
    height: 22px !important;
    font-size: 12px !important;
    border-width: 1px !important;
  }

  .asiento-dot {
    width: 8px !important;
    height: 8px !important;
    border-width: 1.5px !important;
  }

  .asiento-nombre {
    font-size: 9px !important;
    max-width: 62px !important;
  }

  .asiento-meta {
    font-size: 8px !important;
  }

  .asiento-elo {
    font-size: 7px !important;
    padding: 0 3px !important;
  }

  .asiento-fichas {
    padding: 2px 1px !important;
  }

  .asiento-ficha-mini {
    width: 4px !important;
    height: 9px !important;
  }

  .asiento-fichas-extra {
    font-size: 7px !important;
    padding: 0 3px !important;
  }

  .asiento-card.activo::before {
    font-size: 8px !important;
    padding: 0 5px !important;
  }

  .mesa-centro-marcador {
    padding: 4px 6px !important;
    gap: 4px !important;
  }

  .mcm-eq {
    min-width: 44px !important;
    padding: 2px 6px !important;
  }

  .mcm-lbl { font-size: 6px !important; }
  .mcm-pts { font-size: 13px !important; }
  .mcm-vs  { font-size: 8px !important; }

  .game-hand-wrapper {
    max-height: 105px !important;
    padding: 4px 6px 8px !important;
  }

  .game-actions {
    padding: 4px 6px 6px !important;
    gap: 4px !important;
  }

  .game-actions .btn {
    min-height: 38px !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
  }
}

/* Móvil muy pequeño */
@media (max-width: 420px) {
  .mesa-grid {
    grid-template-columns: 58px 1fr 58px !important;
    grid-template-rows: 48px 1fr 48px !important;
  }
  .asiento-card {
    min-width: 52px !important;
    max-width: 62px !important;
    padding: 3px 4px !important;
  }
  .asiento-avatar { width: 18px !important; height: 18px !important; font-size: 10px !important; }
  .asiento-nombre { font-size: 8px !important; max-width: 52px !important; }
  .asiento-meta { font-size: 7px !important; }
  .asiento-ficha-mini { width: 3px !important; height: 8px !important; }
}

/* Landscape en móvil: layout más horizontal */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .mesa-grid {
    grid-template-columns: 80px 1fr 80px !important;
    grid-template-rows: 45px 1fr 45px !important;
  }
  .asiento-card { padding: 3px 5px !important; min-width: 65px !important; }
  .asiento-avatar { width: 20px !important; height: 20px !important; font-size: 11px !important; }
  .asiento-nombre { font-size: 9px !important; }
  .game-hand-wrapper { max-height: 85px !important; }
}
/* ============================================================
   RESPONSIVE — MÓVIL
   ============================================================ */
@media (max-width: 700px) {
  .game-opponents.game-opponents-mesa {
    margin: 2px 3px !important;
  }

  .mesa-grid {
    grid-template-columns: 62px 1fr 62px !important;
    grid-template-rows: 44px 1fr 44px !important;
    gap: 2px !important;
  }

  .asiento-card {
    min-width: 56px !important;
    max-width: 62px !important;
    padding: 3px 4px !important;
    gap: 1px !important;
    border-radius: 6px !important;
  }

  .asiento-avatar { width: 18px !important; height: 18px !important; font-size: 10px !important; border-width: 1px !important; }
  .asiento-dot { width: 7px !important; height: 7px !important; border-width: 1px !important; bottom: -1px !important; right: -1px !important; }
  .asiento-nombre { font-size: 8px !important; max-width: 54px !important; }
  .asiento-meta { font-size: 7px !important; }
  .asiento-elo { font-size: 6px !important; padding: 0 2px !important; }
  .asiento-etiqueta { font-size: 7px !important; }
  .asiento-fichas { padding: 2px 1px !important; margin-top: 1px !important; }
  .asiento-ficha-mini { width: 3px !important; height: 7px !important; }
  .asiento-fichas-extra { font-size: 6px !important; padding: 0 2px !important; }
  .asiento-card.activo::before { font-size: 7px !important; padding: 0 5px !important; }

  .game-board { padding: 10px 3px !important; }

  .mesa-centro-marcador { padding: 3px 6px !important; gap: 3px !important; }
  .mcm-eq { min-width: 38px !important; padding: 2px 5px !important; }
  .mcm-lbl { font-size: 6px !important; }
  .mcm-pts { font-size: 11px !important; }
  .mcm-vs  { font-size: 7px !important; }

  .game-hand-wrapper { max-height: 95px !important; padding: 4px 6px 8px !important; }
  .game-actions { padding: 3px 6px 5px !important; gap: 4px !important; }
  .game-actions .btn { min-height: 36px !important; padding: 5px 9px !important; font-size: 11px !important; }
  .game-topbar { padding: 4px 6px !important; }
}

@media (max-width: 420px) {
  .mesa-grid {
    grid-template-columns: 52px 1fr 52px !important;
    grid-template-rows: 38px 1fr 38px !important;
  }
  .asiento-card { min-width: 46px !important; max-width: 52px !important; padding: 2px 3px !important; }
  .asiento-avatar { width: 16px !important; height: 16px !important; font-size: 9px !important; }
  .asiento-nombre { font-size: 7px !important; max-width: 44px !important; }
  .asiento-meta { font-size: 6px !important; }
  .asiento-ficha-mini { width: 2.5px !important; height: 6px !important; }
}

/* ============================================================
   MESA HORIZONTAL — menos alto, más ancho
   ============================================================ */

.game-opponents.game-opponents-mesa {
  flex: 1 1 0 !important;
  min-height: 0 !important;
}

.mesa-grid {
  display: grid !important;
  grid-template-columns: 110px 1fr 110px !important;
  grid-template-rows: 60px 1fr 60px !important;
  grid-template-areas:
    ".        norte  ."
    "oeste    board  este"
    ".        sur    ." !important;
  gap: 4px !important;
  width: 100% !important;
  height: 100% !important;
}

/* ============================================================
   MÓVIL
   ============================================================ */
@media (max-width: 700px) {
  .mesa-grid {
    grid-template-columns: 56px 1fr 56px !important;
    grid-template-rows: 42px 1fr 42px !important;
    gap: 2px !important;
  }

  .game-opponents.game-opponents-mesa {
    margin: 2px 3px !important;
  }

  .game-board {
    padding: 6px 3px !important;
  }

  .asiento-card {
    min-width: 50px !important;
    max-width: 54px !important;
    padding: 2px 3px !important;
    gap: 1px !important;
    border-radius: 6px !important;
  }

  .asiento-avatar { width: 18px !important; height: 18px !important; font-size: 10px !important; border-width: 1px !important; }
  .asiento-dot { width: 7px !important; height: 7px !important; border-width: 1px !important; }
  .asiento-nombre { font-size: 8px !important; max-width: 48px !important; }
  .asiento-meta { font-size: 7px !important; }
  .asiento-elo { font-size: 6px !important; padding: 0 2px !important; }
  .asiento-etiqueta { font-size: 7px !important; padding-bottom: 1px !important; }
  .asiento-fichas { padding: 1px !important; margin-top: 1px !important; gap: 0 !important; }
  .asiento-ficha-mini { width: 3px !important; height: 6px !important; }
  .asiento-fichas-extra { font-size: 6px !important; padding: 0 2px !important; }
  .asiento-card.activo::before { font-size: 7px !important; padding: 0 4px !important; }

  .mesa-centro-marcador { padding: 3px 5px !important; gap: 3px !important; }
  .mcm-eq { min-width: 34px !important; padding: 2px 4px !important; }
  .mcm-lbl { font-size: 6px !important; }
  .mcm-pts { font-size: 11px !important; }
  .mcm-vs { font-size: 7px !important; }
}

@media (max-width: 420px) {
  .mesa-grid {
    grid-template-columns: 46px 1fr 46px !important;
    grid-template-rows: 36px 1fr 36px !important;
  }
  .asiento-card { min-width: 42px !important; max-width: 46px !important; padding: 2px !important; }
  .asiento-avatar { width: 16px !important; height: 16px !important; font-size: 9px !important; }
  .asiento-nombre { font-size: 7px !important; max-width: 40px !important; }
  .asiento-meta { font-size: 6px !important; }
  .asiento-ficha-mini { width: 2.5px !important; height: 5px !important; }
}


/* ============================================================
   QUICK MATCH — Tarjetas de partida rápida
   ============================================================ */
.quick-match-wrap {
  max-width: 720px;
  margin: 0 auto 24px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(128,224,255,.06), rgba(187,136,255,.03));
  border: 1px solid rgba(128,224,255,.25);
  border-radius: 14px;
}
.quick-match-title {
  font-size: 15px;
  color: var(--accent-2);
  letter-spacing: 1px;
  margin: 0 0 4px;
}
.quick-match-sub {
  font-size: 11px;
  color: var(--text-dim);
  margin: 0 0 14px;
}
.quick-match-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.quick-match-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(0,0,0,.35);
  border: 2px solid rgba(255,255,255,.1);
  border-radius: 12px;
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: all .2s;
}
.quick-match-card:hover:not(:disabled) {
  background: rgba(128,224,255,.08);
  border-color: var(--accent-2);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(128,224,255,.2);
}
.quick-match-card:disabled { opacity: .5; cursor: wait; }
.qm-icon { font-size: 32px; flex-shrink: 0; line-height: 1; }
.qm-info { flex: 1; min-width: 0; }
.qm-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 2px;
}
.qm-meta { font-size: 10px; color: var(--text-dim); }
.qm-arrow { font-size: 14px; color: var(--accent-2); flex-shrink: 0; }
@media (max-width: 600px) {
  .quick-match-grid { grid-template-columns: 1fr; }
  .quick-match-card { padding: 12px 14px; }
  .qm-icon { font-size: 26px; }
}
/* ============================================================
   🆕 RECONEXIÓN — Banner de rival desconectado
   ============================================================ */
.rival-disconnect-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin: 8px 12px;
  background: linear-gradient(135deg, rgba(255,204,68,.14) 0%, rgba(255,204,68,.04) 100%);
  border: 1px solid rgba(255,204,68,.45);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text);
  animation: rdbPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes rdbPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255,204,68,0); }
  50%      { box-shadow: 0 0 14px rgba(255,204,68,.28); }
}
.rival-disconnect-banner .rdb-icon {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
}
.rival-disconnect-banner .rdb-body {
  flex: 1;
  min-width: 0;
}
.rival-disconnect-banner .rdb-title {
  font-weight: 800;
  font-size: 13px;
  color: var(--gold);
}
.rival-disconnect-banner .rdb-sub {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}
.rival-disconnect-banner #rdb-timer {
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}
.rival-disconnect-banner .rdb-actions {
  flex-shrink: 0;
}
@media (max-width: 700px) {
  .rival-disconnect-banner {
    margin: 6px 8px;
    padding: 8px 10px;
    gap: 8px;
    font-size: 12px;
  }
  .rival-disconnect-banner .rdb-icon { font-size: 18px; }
  .rival-disconnect-banner .rdb-title { font-size: 12px; }
  .rival-disconnect-banner .rdb-sub { font-size: 10px; }
  .rival-disconnect-banner .rdb-actions .btn {
    padding: 6px 10px;
    font-size: 11px;
  }
}

/* ============================================================
   🆕 PILA DE FICHAS POR JUGADOR
   ============================================================ */
.asiento-fichas {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 2px 0;
  margin-top: 3px;
  min-height: 14px;
  gap: 0;
}
.ficha-stack {
  display: inline-block;
  width: 6px;
  height: 14px;
  border-radius: 2px;
  margin-left: -2px;
  background: linear-gradient(180deg, #faf5ea 0%, #e8dfc9 100%);
  border: 1px solid #b8a880;
  box-shadow: 0 1px 2px rgba(0,0,0,.6);
  transform: rotate(calc((var(--i) - 4) * 1.5deg));
  transform-origin: bottom center;
}
.ficha-stack:first-child { margin-left: 0; }
.fichas-extra {
  font-size: 9px;
  font-weight: 900;
  color: var(--accent-2);
  margin-left: 4px;
  align-self: center;
  text-shadow: 0 0 4px rgba(0,0,0,.8);
}
.fichas-num {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-dim);
  text-align: center;
  margin-top: 2px;
  letter-spacing: .3px;
  font-variant-numeric: tabular-nums;
}
.fichas-vacio { opacity: .35; }
.mesa-slot-sur .ficha-stack {
  width: 8px;
  height: 18px;
  margin-left: -2.5px;
}
.mesa-slot-sur .fichas-num {
  font-size: 11px;
  color: var(--accent-2);
}

@media (max-width: 700px) {
  .asiento-fichas { min-height: 10px; padding: 1px 0; }
  .ficha-stack {
    width: 4px;
    height: 10px;
    margin-left: -1.5px;
  }
  .fichas-num { font-size: 8px; margin-top: 1px; }
  .fichas-extra { font-size: 7px; }
  .mesa-slot-sur .ficha-stack { width: 5px; height: 12px; }
  .mesa-slot-sur .fichas-num { font-size: 9px; }
}
/* ============================================================
   FICHA VOLADORA
   ============================================================ */
.ficha-voladora {
  position: fixed !important;
  pointer-events: none !important;
  z-index: 9999 !important;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.6));
  will-change: transform, opacity;
}

/* ============================================================
   🆕 FICHA DE SALIDA — borde dorado persistente con pulso
   ============================================================ */
.tile-tablero.ficha-salida {
  z-index: 11 !important;
  animation: fichaSalidaPulse 2.4s ease-in-out infinite;
}
@keyframes fichaSalidaPulse {
  0%, 100% {
    box-shadow:
      0 0 0 3px rgba(255, 209, 102, 1),
      0 0 16px rgba(255, 209, 102, 0.75),
      0 0 32px rgba(255, 209, 102, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.85);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(255, 209, 102, 1),
      0 0 22px rgba(255, 209, 102, 1),
      0 0 44px rgba(255, 209, 102, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.85);
  }
}

/* ============================================================
   🆕 BADGE "SALE" en el asiento del jugador que salió
   ============================================================ */
.asiento-card .salida-badge {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ffd166 0%, #ffaa00 100%);
  color: #1a1a1a;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 8px;
  white-space: nowrap;
  z-index: 7;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.5);
  animation: salidaBadgePulse 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes salidaBadgePulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
  50%      { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 14px rgba(255, 209, 102, 0.85); }
}

@media (max-width: 700px) {
  .asiento-card .salida-badge {
    font-size: 7px;
    padding: 1px 5px;
    top: -7px;
  }
}

/* ============================================================ */
/*  BOOST-VISUAL-V1 - Glow en fichas cuando boost activo       */
/* ============================================================ */
.game-hand .tile.boost-autosort::before,
.game-hand .tile.boost-seetiles::before,
.game-hand .tile.boost-nodomino::before,
.game-hand .tile.boost-xp::before,
.game-hand .tile.boost-silent::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: calc(var(--tile-radius) + 3px);
  pointer-events: none;
  animation: boostGlowPulse 2.4s ease-in-out infinite;
  z-index: 0;
}

.game-hand .tile.boost-autosort::before {
  border: 2px solid rgba(64, 208, 144, .75);
  box-shadow: 0 0 12px rgba(64, 208, 144, .55), inset 0 0 6px rgba(64, 208, 144, .15);
}

.game-hand .tile.boost-seetiles::before {
  border: 2px solid rgba(128, 224, 255, .75);
  box-shadow: 0 0 12px rgba(128, 224, 255, .55), inset 0 0 6px rgba(128, 224, 255, .15);
}

.game-hand .tile.boost-nodomino::before {
  border: 2px solid rgba(255, 204, 68, .75);
  box-shadow: 0 0 12px rgba(255, 204, 68, .55), inset 0 0 6px rgba(255, 204, 68, .15);
}

.game-hand .tile.boost-xp::before {
  border: 2px solid rgba(187, 136, 255, .75);
  box-shadow: 0 0 12px rgba(187, 136, 255, .55), inset 0 0 6px rgba(187, 136, 255, .15);
}

.game-hand .tile.boost-silent::before {
  border: 2px solid rgba(122, 138, 154, .6);
  box-shadow: 0 0 10px rgba(122, 138, 154, .45), inset 0 0 6px rgba(122, 138, 154, .12);
}

@keyframes boostGlowPulse {
  0%, 100% { opacity: .7; }
  50%      { opacity: 1; }
}

.hand-boost-chip {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: linear-gradient(135deg, rgba(128, 224, 255, .15) 0%, rgba(64, 208, 144, .1) 100%);
  border: 1px solid rgba(128, 224, 255, .4);
  border-radius: 10px;
  color: var(--accent-2, #80e0ff);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;
  animation: boostChipPulse 2.4s ease-in-out infinite;
  cursor: help;
  font-family: inherit;
}

@keyframes boostChipPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(128, 224, 255, 0); }
  50%      { box-shadow: 0 0 10px rgba(128, 224, 255, .4); }
}

@media (max-width: 700px) {
  .hand-boost-chip {
    font-size: 9px;
    padding: 1px 6px;
  }
}

/* ============================================================
   FIX-WHATSAPP: Banner de reconexion
   ============================================================ */
.reconnect-banner {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%) translateY(-80px);
  z-index: 999999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #ffd166 0%, #ffb84d 100%);
  color: #1a1a1a;
  font-weight: 800;
  font-size: 14px;
  border-radius: 50px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,255,255,.3);
  border: 1px solid rgba(255,255,255,.4);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .3s;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
.reconnect-banner.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.reconnect-banner .rc-icon {
  font-size: 18px;
  animation: rcSpin 1.2s linear infinite;
  display: inline-block;
}
@keyframes rcSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (max-width: 700px) {
  .reconnect-banner {
    font-size: 12px;
    padding: 8px 14px;
    top: 8px;
  }
  .reconnect-banner .rc-icon { font-size: 15px; }
}

/* ============================================================
   FIX FASE 2.1 — 6 tarjetas de quick-match (grid 3x2 en desktop)
   ============================================================ */
.quick-match-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.quick-match-card {
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px 14px;
  min-height: 100px;
}

.quick-match-card .qm-icon {
  font-size: 26px;
  margin-bottom: 4px;
  line-height: 1;
}

.quick-match-card .qm-info {
  width: 100%;
}

.quick-match-card .qm-name {
  font-size: 12.5px;
  line-height: 1.2;
}

.quick-match-card .qm-meta {
  font-size: 10px;
  line-height: 1.3;
  margin-top: 2px;
}

.quick-match-card .qm-arrow {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 12px;
  opacity: .5;
}

.quick-match-card .qm-price {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .3px;
  background: rgba(255, 204, 68, .15);
  color: var(--gold);
  border: 1px solid rgba(255, 204, 68, .4);
}
.quick-match-card .qm-price.gratis {
  background: rgba(64, 208, 144, .15);
  color: var(--green);
  border-color: rgba(64, 208, 144, .4);
}
.quick-match-card .qm-price.alto {
  background: rgba(255, 138, 92, .15);
  color: #ff8a5c;
  border-color: rgba(255, 138, 92, .4);
}
.quick-match-card .qm-price.vip {
  background: linear-gradient(135deg, rgba(255,204,68,.25) 0%, rgba(255,170,0,.1) 100%);
  color: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 8px rgba(255, 204, 68, .4);
}

.quick-match-card.qm-disabled {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.6);
}
.quick-match-card.qm-disabled:hover {
  transform: none;
  border-color: rgba(255, 255, 255, .1);
  box-shadow: none;
  background: rgba(0, 0, 0, .35);
}

.quick-match-card .qm-falta {
  position: absolute;
  bottom: 6px;
  right: 6px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .3px;
  padding: 2px 7px;
  border-radius: 8px;
  background: rgba(255, 85, 102, .18);
  color: var(--red);
  border: 1px solid rgba(255, 85, 102, .4);
  white-space: nowrap;
}

/* Tablet: 2 columnas */
@media (max-width: 900px) {
  .quick-match-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Movil: 2 columnas compactas */
@media (max-width: 700px) {
  .quick-match-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  .quick-match-card {
    padding: 8px 10px;
    min-height: 86px;
  }
  .quick-match-card .qm-icon { font-size: 20px; }
  .quick-match-card .qm-name { font-size: 11px; }
  .quick-match-card .qm-meta { font-size: 9px; }
  .quick-match-card .qm-price { font-size: 9px; padding: 1px 6px; margin-top: 4px; }
  .quick-match-card .qm-falta { font-size: 8px; padding: 1px 5px; bottom: 4px; right: 4px; }
}

/* Movil muy pequeno: 1 columna */
@media (max-width: 380px) {
  .quick-match-grid {
    grid-template-columns: 1fr;
  }
}
/* ============================================================
   FASE 4.2 — Vibración visual (fallback iOS/desktop)
   ============================================================ */
@keyframes vibShakeSoft {
  0%, 100% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(-2px, 1px, 0); }
  40% { transform: translate3d(2px, -1px, 0); }
  60% { transform: translate3d(-2px, -1px, 0); }
  80% { transform: translate3d(2px, 1px, 0); }
}
@keyframes vibShakeStrong {
  0%, 100% { transform: translate3d(0, 0, 0); }
  10% { transform: translate3d(-4px, 2px, 0); }
  25% { transform: translate3d(4px, -2px, 0); }
  40% { transform: translate3d(-4px, -2px, 0); }
  55% { transform: translate3d(4px, 2px, 0); }
  70% { transform: translate3d(-3px, 1px, 0); }
  85% { transform: translate3d(3px, -1px, 0); }
}
body.vibrating-shake {
  /* DESACTIVADO */
}
body.vibrating-shake-strong {
  /* DESACTIVADO: causaba lag por repintar todo el body */
}

/* Botón nudge en el asiento del rival */
.nudge-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd166 0%, #ffaa00 100%);
  border: 2px solid rgba(255,255,255,.7);
  color: #1a1a1a;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  box-shadow: 0 3px 10px rgba(0,0,0,.5);
  transition: transform .15s;
  z-index: 8;
  padding: 0;
  line-height: 1;
}
.nudge-btn:hover { transform: scale(1.12); }
.nudge-btn:active { transform: scale(.94); }
.nudge-btn:disabled { opacity: .4; cursor: not-allowed; }
.nudge-btn.cooldown { background: rgba(120,120,120,.6); color: #fff; }
.nudge-btn.cooldown::after {
  content: attr(data-cooldown);
  position: absolute;
  font-size: 9px;
  font-weight: 900;
  color: #fff;
}
.nudge-btn.cooldown > * { display: none; }

@media (max-width: 700px) {
  .nudge-btn { width: 24px; height: 24px; font-size: 12px; top: -6px; right: -6px; }
}

/* ============================================================
   FIX-ASIENTOS-OVERFLOW (2026-09-22)
   Garantiza que NINGUN texto del asiento se salga de su caja.
   Reglas al final del archivo -> ganan por cascada.
   ============================================================ */

.asiento-card {
  overflow: hidden !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  contain: layout style !important;
}

.asiento-card > * {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.asiento-header {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.asiento-info {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.asiento-nombre,
.asiento-meta,
.asiento-saldo,
.fichas-num,
.fichas-extra {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  line-height: 1.2 !important;
}

.asiento-saldo {
  padding: 1px 4px !important;
  margin-top: 2px !important;
}

.asiento-fichas {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: flex-end !important;
  max-width: 100% !important;
  overflow: hidden !important;
  padding: 2px 0 !important;
}

.asiento-fichas .ficha-stack {
  flex-shrink: 0 !important;
}

@media (max-width: 700px) {
  .asiento-nombre { font-size: 8px !important; }
  .asiento-meta   { font-size: 7px !important; }
  .asiento-saldo  { font-size: 7px !important; padding: 0 3px !important; }
}

@media (max-width: 700px) {
  .mesa-slot-este .asiento-nombre,
  .mesa-slot-oeste .asiento-nombre {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    max-height: 44px !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }
  .mesa-slot-este .asiento-meta,
  .mesa-slot-oeste .asiento-meta {
    max-height: 34px !important;
  }
  .mesa-slot-este .asiento-saldo,
  .mesa-slot-oeste .asiento-saldo {
    max-height: 42px !important;
  }
}


/* ============================================================
   PREMIUM-EMOTE-V1
   ============================================================ */

#screen-crack-canvas {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: none;
  opacity: 0;
}

.emote-btn-premium {
  position: relative;
  background: linear-gradient(135deg, rgba(255,60,60,0.18), rgba(255,150,50,0.18)) !important;
  border-color: rgba(255,80,80,0.55) !important;
  overflow: visible !important;
}
.emote-btn-premium:hover {
  background: linear-gradient(135deg, rgba(255,60,60,0.35), rgba(255,150,50,0.3)) !important;
  box-shadow: 0 0 12px rgba(255,80,80,0.5);
}

.premium-emote-icon {
  position: relative;
  display: block;
  width: 30px;
  height: 42px;
  margin: 0 auto;
}

.premium-emote-icon .pe-half {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(145deg, #faf5ea 0%, #e8dfc9 100%);
  border: 1.5px solid #c8ba9a;
  box-sizing: border-box;
}
.premium-emote-icon .pe-top { top: 0; border-radius: 4px 4px 0 0; }
.premium-emote-icon .pe-bot { bottom: 0; border-radius: 0 0 4px 4px; border-top: none; }

.premium-emote-icon .pe-pip {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #1a1a1a;
  box-shadow: inset -1px -1px 1px rgba(0,0,0,0.4);
}
.premium-emote-icon .pe-top .pe-pip:nth-child(1) { left: 30%; top: 40%; }
.premium-emote-icon .pe-top .pe-pip:nth-child(2) { left: 60%; top: 40%; }
.premium-emote-icon .pe-bot .pe-pip:nth-child(1) { left: 25%; top: 50%; }
.premium-emote-icon .pe-bot .pe-pip:nth-child(2) { left: 50%; top: 50%; }
.premium-emote-icon .pe-bot .pe-pip:nth-child(3) { left: 75%; top: 50%; }

.premium-emote-icon .pe-crack {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,80,80,0.6) 20%,
    rgba(255,255,255,0.95) 45%,
    rgba(255,80,80,0.9) 50%,
    rgba(255,255,255,0.95) 55%,
    rgba(255,80,80,0.6) 80%,
    transparent 100%);
  transform: translateY(-50%) rotate(-4deg);
  filter: drop-shadow(0 0 3px rgba(255,80,80,0.9));
  animation: peCrackPulse 1.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes peCrackPulse {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; filter: drop-shadow(0 0 5px rgba(255,80,80,1)); }
}

.premium-emote-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: linear-gradient(135deg, #ffd166, #ffaa00);
  color: #1a1a1a;
  font-size: 9px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 1.5px solid rgba(255,255,255,0.7);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  font-variant-numeric: tabular-nums;
  z-index: 3;
}

.emote-btn-premium.armed {
  background: linear-gradient(135deg, #ff3c3c 0%, #ff8a3c 100%) !important;
  border-color: #ffd166 !important;
  box-shadow:
    0 0 0 3px rgba(255,80,80,0.45),
    0 0 18px rgba(255,80,80,0.85),
    0 0 40px rgba(255,140,60,0.5) !important;
  animation: peArmed 1.1s ease-in-out infinite;
}
@keyframes peArmed {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(255,80,80,0.45),
                0 0 18px rgba(255,80,80,0.85),
                0 0 40px rgba(255,140,60,0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(255,80,80,0.7),
                0 0 24px rgba(255,80,80,1),
                0 0 60px rgba(255,140,60,0.75);
    transform: scale(1.06);
  }
}
.emote-btn-premium.armed .premium-emote-icon .pe-crack {
  animation-duration: 0.6s;
}
.emote-btn-premium.unavailable {
  opacity: 0.55;
}
.emote-btn-premium.unavailable .premium-emote-badge {
  background: linear-gradient(135deg, #888, #555);
  color: #fff;
}

/* Overlay con la ficha voladora */
.premium-tile-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483645;
  pointer-events: none;
  overflow: hidden;
}

.premium-flying-tile {
  position: absolute;
  top: 55%;
  left: 50%;
  width: 90px;
  height: 180px;
  margin-left: -45px;
  margin-top: -90px;
  transform-style: preserve-3d;
  animation: premiumTileFly 0.9s cubic-bezier(0.34, 0.9, 0.5, 1) forwards;
  will-change: transform, opacity;
}

.premium-flying-tile-inner {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(145deg, #faf5ea 0%, #e8dfc9 100%);
  border: 2px solid #c8ba9a;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 8px 30px rgba(0,0,0,0.7),
    0 0 60px rgba(255,180,80,0.55),
    inset 0 2px 0 rgba(255,255,255,0.9);
  position: relative;
}
.premium-flying-tile-inner::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 8%;
  right: 8%;
  height: 2px;
  background: linear-gradient(to right,
    transparent 0%, rgba(0,0,0,0.18) 15%,
    rgba(0,0,0,0.28) 50%, rgba(0,0,0,0.18) 85%,
    transparent 100%);
  transform: translateY(-50%);
  pointer-events: none;
}

.pft-half { position: relative; flex: 1; }
.pft-pip {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #444, #000 70%);
  transform: translate(-50%, -50%);
  box-shadow: inset -1px -1px 2px rgba(0,0,0,0.6), 0 1px 1px rgba(255,255,255,0.15);
}

/* Animacion fluida: sale desde el asiento del jugador y cae al centro */
/* Animacion SUPER fluida: linea directa del origen al destino */
/* Ficha: 3 vueltas completas mientras vuela al centro */
@keyframes premiumTileFly {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.6);
  }
  10% {
    opacity: 1;
    transform: translate3d(calc(var(--fly-dx) * 0.1), calc(var(--fly-dy) * 0.1), 0) rotate(180deg) scale(0.85);
  }
  40% {
    opacity: 1;
    transform: translate3d(calc(var(--fly-dx) * 0.4), calc(var(--fly-dy) * 0.4), 0) rotate(720deg) scale(1);
  }
  70% {
    opacity: 1;
    transform: translate3d(calc(var(--fly-dx) * 0.7), calc(var(--fly-dy) * 0.7), 0) rotate(1080deg) scale(1);
  }
  95% {
    opacity: 1;
    transform: translate3d(calc(var(--fly-dx) * 0.98), calc(var(--fly-dy) * 0.98), 0) rotate(1080deg) scale(1.05);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--fly-dx), var(--fly-dy), 0) rotate(1080deg) scale(1.1);
  }
}

@media (max-width: 700px) {
  .premium-flying-tile { width: 70px; height: 140px; margin-left: -35px; margin-top: -70px; }
  .pft-pip { width: 9px; height: 9px; }
}

/* ============================================================
   PREMIUM-EMOTE-V2 — ficha real + scatter del tablero
   ============================================================ */

/* Overlay que contiene la ficha voladora */
.premium-tile-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483645;
  pointer-events: none;
  overflow: hidden;
}

/* Contenedor de la ficha voladora: usa las MISMAS clases que tiles.js */
.premium-flying-tile {
  position: absolute;
  top: 55%;
  left: 50%;
  width: 90px;
  height: 180px;
  margin-left: -45px;
  margin-top: -90px;
  transform-style: preserve-3d;
  animation: premiumTileFly 0.9s cubic-bezier(0.34, 0.9, 0.5, 1) forwards;
  will-change: transform, opacity;
}

/* La ficha en sí: misma apariencia que .tile (mano) */
.premium-flying-tile.premium-tile-face {
  display: flex;
  flex-direction: column;
  border-radius: var(--tile-radius, 6px);
  background: linear-gradient(145deg, #faf5ea 0%, #e8dfc9 100%);
  border: 1.5px solid #c8ba9a;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
  position: relative;
  overflow: hidden;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.premium-flying-tile.premium-tile-face::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 8%;
  right: 8%;
  height: 1.5px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, .18) 15%,
    rgba(0, 0, 0, .28) 50%,
    rgba(0, 0, 0, .18) 85%,
    transparent 100%
  );
  transform: translateY(-.75px);
  pointer-events: none;
  z-index: 1;
}

.premium-flying-tile.premium-tile-face .tile-half {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.premium-flying-tile.premium-tile-face .pip {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow:
    inset -1px -1px 2px rgba(0, 0, 0, .45),
    inset 1px 1px 1px rgba(255, 255, 255, .25),
    0 0 0 .5px rgba(0, 0, 0, .15);
}

/* Animación de vuelo */
/* Animacion fluida: sale desde el origen, sube, cae al centro */
/* Animacion fluida: sale desde el asiento del jugador y cae al centro */
/* Animacion SUPER fluida: linea directa del origen al destino */
/* Ficha: 3 vueltas completas mientras vuela al centro */
@keyframes premiumTileFly {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.6);
  }
  10% {
    opacity: 1;
    transform: translate3d(calc(var(--fly-dx) * 0.1), calc(var(--fly-dy) * 0.1), 0) rotate(180deg) scale(0.85);
  }
  40% {
    opacity: 1;
    transform: translate3d(calc(var(--fly-dx) * 0.4), calc(var(--fly-dy) * 0.4), 0) rotate(720deg) scale(1);
  }
  70% {
    opacity: 1;
    transform: translate3d(calc(var(--fly-dx) * 0.7), calc(var(--fly-dy) * 0.7), 0) rotate(1080deg) scale(1);
  }
  95% {
    opacity: 1;
    transform: translate3d(calc(var(--fly-dx) * 0.98), calc(var(--fly-dy) * 0.98), 0) rotate(1080deg) scale(1.05);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--fly-dx), var(--fly-dy), 0) rotate(1080deg) scale(1.1);
  }
}

/* --- Scatter del tablero --- */
.game-board.emote-scattering .tile-tablero {
  /* la transición se aplica inline para poder variarla por ficha */
  will-change: transform;
}

.game-board.emote-scattering {
  /* Bloquear interacción durante el efecto */
  pointer-events: none;
}

/* Fase de restauración: vuelven a su sitio */
.game-board.emote-restoring .tile-tablero {
  transition: transform 0.85s cubic-bezier(0.34, 1.2, 0.5, 1),
              filter 0.6s ease-out;
}

/* Al terminar todo, limpiamos */
.game-board.emote-finished .tile-tablero {
  transition: none;
}

/* Pequeño glow durante el regado */
.game-board.emote-scattering .tile-tablero {
  filter: drop-shadow(0 0 6px rgba(255, 140, 60, .5));
}

.game-board.emote-restoring .tile-tablero {
  filter: drop-shadow(0 0 4px rgba(128, 224, 255, .4));
}


/* ============================================================
   PREMIUM-EMOTE-V2
   ============================================================ */

/* ============================================================
   PREMIUM-EMOTE-V3 — scatter + vibracion brutal
   ============================================================ */

.premium-tile-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483645;
  pointer-events: none;
  overflow: hidden;
}

.premium-flying-tile {
  position: absolute;
  top: 55%;
  left: 50%;
  width: 90px;
  height: 180px;
  margin-left: -45px;
  margin-top: -90px;
  transform-style: preserve-3d;
  animation: premiumTileFly 0.9s cubic-bezier(0.34, 0.9, 0.5, 1) forwards;
  will-change: transform, opacity;
}

.premium-flying-tile.premium-tile-face {
  display: flex;
  flex-direction: column;
  border-radius: var(--tile-radius, 6px);
  background: linear-gradient(145deg, #faf5ea 0%, #e8dfc9 100%);
  border: 1.5px solid #c8ba9a;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
  position: relative;
  overflow: hidden;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.premium-flying-tile.premium-tile-face::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 8%;
  right: 8%;
  height: 1.5px;
  background: linear-gradient(
    to right,
    transparent 0%, rgba(0, 0, 0, .18) 15%,
    rgba(0, 0, 0, .28) 50%, rgba(0, 0, 0, .18) 85%,
    transparent 100%
  );
  transform: translateY(-.75px);
  pointer-events: none;
  z-index: 1;
}

.premium-flying-tile.premium-tile-face .tile-half {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.premium-flying-tile.premium-tile-face .pip {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow:
    inset -1px -1px 2px rgba(0, 0, 0, .45),
    inset 1px 1px 1px rgba(255, 255, 255, .25),
    0 0 0 .5px rgba(0, 0, 0, .15);
}

/* Animacion fluida: sale desde el origen, sube, cae al centro */
/* Animacion fluida: sale desde el asiento del jugador y cae al centro */
/* Animacion SUPER fluida: linea directa del origen al destino */
/* Ficha: 3 vueltas completas mientras vuela al centro */
@keyframes premiumTileFly {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.6);
  }
  10% {
    opacity: 1;
    transform: translate3d(calc(var(--fly-dx) * 0.1), calc(var(--fly-dy) * 0.1), 0) rotate(180deg) scale(0.85);
  }
  40% {
    opacity: 1;
    transform: translate3d(calc(var(--fly-dx) * 0.4), calc(var(--fly-dy) * 0.4), 0) rotate(720deg) scale(1);
  }
  70% {
    opacity: 1;
    transform: translate3d(calc(var(--fly-dx) * 0.7), calc(var(--fly-dy) * 0.7), 0) rotate(1080deg) scale(1);
  }
  95% {
    opacity: 1;
    transform: translate3d(calc(var(--fly-dx) * 0.98), calc(var(--fly-dy) * 0.98), 0) rotate(1080deg) scale(1.05);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--fly-dx), var(--fly-dy), 0) rotate(1080deg) scale(1.1);
  }
}

/* --- Scatter del tablero --- */
.game-board.emote-scattering {
  pointer-events: none;
}

.game-board.emote-scattering .tile-tablero {
  will-change: transform;
  filter: drop-shadow(0 0 8px rgba(255, 140, 60, .6));
}

.game-board.emote-restoring .tile-tablero {
  filter: drop-shadow(0 0 5px rgba(128, 224, 255, .5));
}

.game-board.emote-finished .tile-tablero {
  transition: none;
  filter: none;
}

/* --- Vibracion visual BRUTAL (750ms) --- */
@keyframes vibShakeBrutal {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  5%   { transform: translate3d(-8px, 4px, 0) rotate(-0.8deg); }
  12%  { transform: translate3d(8px, -5px, 0) rotate(0.9deg); }
  20%  { transform: translate3d(-10px, -3px, 0) rotate(-1deg); }
  28%  { transform: translate3d(9px, 5px, 0) rotate(0.7deg); }
  36%  { transform: translate3d(-7px, -4px, 0) rotate(-0.9deg); }
  44%  { transform: translate3d(6px, 3px, 0) rotate(0.6deg); }
  52%  { transform: translate3d(-5px, -3px, 0) rotate(-0.5deg); }
  60%  { transform: translate3d(5px, 4px, 0) rotate(0.6deg); }
  70%  { transform: translate3d(-4px, 2px, 0) rotate(-0.4deg); }
  82%  { transform: translate3d(3px, -2px, 0) rotate(0.3deg); }
  92%  { transform: translate3d(-2px, 1px, 0) rotate(-0.2deg); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}

body.vibrating-shake-strong {
  /* DESACTIVADO: causaba lag por repintar todo el body */
}

body.vibrating-shake {
  /* DESACTIVADO */
}

#screen-crack-canvas {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
}

/* PREMIUM-EMOTE-V5: sin perspectiva en moviles debiles */
.premium-flying-tile.sin-perspectiva {
  transform-style: flat !important;
}
.premium-flying-tile.sin-perspectiva .premium-tile-face {
  box-shadow:
    0 6px 20px rgba(0, 0, 0, .6),
    0 0 30px rgba(255, 180, 80, .4),
    inset 0 2px 0 rgba(255, 255, 255, .9);
}

/* ============================================================
   FIX-ASIENTOS-INFO — que la info quepa completa
   ============================================================ */

.asiento-card {
  min-width: 120px !important;
  max-width: 160px !important;
  padding: 8px 10px !important;
  gap: 4px !important;
}

.asiento-card .asiento-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}

.asiento-card .asiento-info {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

/* Nombre: una linea, ellipsis, con tooltip */
.asiento-card .asiento-nombre {
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

/* Meta (fichas + puntos) */
.asiento-card .asiento-meta {
  font-size: 9.5px !important;
  line-height: 1.2 !important;
  opacity: 0.85 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: var(--text-dim) !important;
}

/* Saldo: destacado, sin cortarse */
.asiento-card .asiento-saldo {
  font-size: 10px !important;
  font-weight: 800 !important;
  color: var(--gold) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding: 2px 6px !important;
  background: rgba(0, 0, 0, .3) !important;
  border-radius: 5px !important;
  display: inline-block !important;
  max-width: 100% !important;
  font-variant-numeric: tabular-nums !important;
}

/* Si el jugador no tiene saldo (0 CUP) se ve en rojo tenue */
.asiento-card .asiento-saldo.sin-saldo {
  color: var(--red) !important;
}

/* Avatar mas grande y con anillo */
.asiento-card .asiento-avatar {
  width: 32px !important;
  height: 32px !important;
  font-size: 16px !important;
  border: 2px solid rgba(255, 255, 255, .1) !important;
  flex-shrink: 0 !important;
}

/* Si el jugador esta activo */
.asiento-card.activo .asiento-avatar {
  border-color: var(--gold) !important;
  box-shadow: 0 0 10px rgba(255, 209, 102, .5) !important;
}

/* Ajuste para moviles */
@media (max-width: 700px) {
  .asiento-card {
    min-width: 96px !important;
    max-width: 118px !important;
    padding: 6px 8px !important;
  }
  .asiento-card .asiento-nombre { font-size: 10px !important; }
  .asiento-card .asiento-meta { font-size: 8.5px !important; }
  .asiento-card .asiento-saldo { font-size: 9px !important; padding: 1px 4px !important; }
  .asiento-card .asiento-avatar { width: 26px !important; height: 26px !important; font-size: 14px !important; }
}

@media (max-width: 420px) {
  .asiento-card {
    min-width: 84px !important;
    max-width: 104px !important;
    padding: 5px 6px !important;
  }
  .asiento-card .asiento-nombre { font-size: 9px !important; }
  .asiento-card .asiento-meta { font-size: 8px !important; }
  .asiento-card .asiento-saldo { font-size: 8px !important; }
  .asiento-card .asiento-avatar { width: 22px !important; height: 22px !important; font-size: 12px !important; }
}

/* ============================================================
   FIX-ASIENTOS-INFO
   ============================================================ */

/* ============================================================
   FIX-ASIENTOS-WIDE — asientos mas anchos
   ============================================================ */

/* Desktop: permitir hasta 180px */
.asiento-card {
  min-width: 130px !important;
  max-width: 180px !important;
  padding: 8px 12px !important;
}

.asiento-card .asiento-nombre {
  font-size: 12px !important;
}

.asiento-card .asiento-meta {
  font-size: 10px !important;
}

.asiento-card .asiento-saldo {
  font-size: 11px !important;
  padding: 3px 8px !important;
}

/* Ajustar el grid de la mesa para dar mas ancho a los laterales */
@media (min-width: 701px) {
  .mesa-contenedor {
    grid-template-columns: 140px 1fr 140px !important;
  }
}

/* Movil: quitar el limite de 160, subir hasta 130 */
@media (max-width: 700px) {
  .asiento-card {
    min-width: 100px !important;
    max-width: 130px !important;
    padding: 6px 9px !important;
  }
  .asiento-card .asiento-nombre { font-size: 11px !important; }
  .asiento-card .asiento-meta { font-size: 9.5px !important; }
  .asiento-card .asiento-saldo { font-size: 10px !important; padding: 2px 6px !important; }
  .asiento-card .asiento-avatar { width: 28px !important; height: 28px !important; font-size: 14px !important; }
}

@media (max-width: 420px) {
  .asiento-card {
    min-width: 88px !important;
    max-width: 108px !important;
    padding: 5px 7px !important;
  }
  .asiento-card .asiento-nombre { font-size: 10px !important; }
  .asiento-card .asiento-meta { font-size: 9px !important; }
  .asiento-card .asiento-saldo { font-size: 9px !important; }
  .asiento-card .asiento-avatar { width: 24px !important; height: 24px !important; font-size: 12px !important; }
}

/* ============================================================
   FIX-ASIENTOS-WIDE
   ============================================================ */