/* Farkle Neon — hoja de estilos portada del diseño original (Claude Design)
   a CSS plano con clases, sin templates inline. Paleta y animaciones
   idénticas al prototipo. */

html, body {
  margin: 0;
  background: #04050a;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
a { color: #00e5ff; text-decoration: none; }
a:hover { color: #7df3ff; }
input, button { font-family: inherit; }
button { border: 0; }
::-webkit-scrollbar { width: 0; height: 0; }

@keyframes tumble3d {
  0%   { transform: translateY(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  25%  { transform: translateY(-13px) rotateX(190deg) rotateY(95deg) rotateZ(40deg); }
  50%  { transform: translateY(-2px) rotateX(370deg) rotateY(205deg) rotateZ(130deg); }
  75%  { transform: translateY(-10px) rotateX(530deg) rotateY(310deg) rotateZ(210deg); }
  100% { transform: translateY(0) rotateX(720deg) rotateY(360deg) rotateZ(270deg); }
}
@keyframes tumbleB {
  0%   { transform: translateY(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  30%  { transform: translateY(-16px) rotateX(120deg) rotateY(230deg) rotateZ(-70deg); }
  60%  { transform: translateY(-5px) rotateX(300deg) rotateY(430deg) rotateZ(-150deg); }
  100% { transform: translateY(0) rotateX(450deg) rotateY(720deg) rotateZ(-300deg); }
}
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
@keyframes pulse   { 0%,100%{opacity:.55} 50%{opacity:1} }
@keyframes pop     { 0%{opacity:0;transform:translateY(8px) scale(.96)} 100%{opacity:1;transform:none} }
@keyframes glowin  { 0%{opacity:0} 100%{opacity:1} }

html, body { height: 100%; }

#app {
  position: relative;
  height: 100dvh;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: radial-gradient(1200px 700px at 50% -10%, #0d1730 0%, #05060c 60%, #04050a 100%);
  font-family: 'Chakra Petch', system-ui, sans-serif;
  overflow: hidden;
}
/* Nota: de momento la app asume un viewport vertical/móvil (sin bezel de
   "teléfono de ejemplo" ya) y se limita a un ancho de columna razonable;
   la adaptación real a pantallas anchas (tablet/desktop) queda para más
   adelante. */

.scanlines {
  position: fixed; inset: 0; pointer-events: none; opacity: .35; z-index: 6;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px);
}
.top-glow {
  position: absolute; left: 0; right: 0; top: 0; height: 220px; pointer-events: none; z-index: 0;
  background: radial-gradient(400px 200px at 50% 0%, var(--accent-ghost, rgba(0,229,255,.22)) 0%, transparent 70%);
  transition: background .3s ease;
}

.titlebar {
  position: relative; z-index: 2; flex: none;
  padding: max(14px, env(safe-area-inset-top)) 18px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.brand { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.brand-main { font: 700 19px 'Chakra Petch'; letter-spacing: .18em; color: #e9eeff; }
.brand-neon {
  font: 500 10px 'JetBrains Mono'; letter-spacing: .22em; color: var(--accent, #00e5ff);
  text-shadow: 0 0 12px var(--accent, #00e5ff);
}
.titlebar-right { display: flex; align-items: center; gap: 10px; flex: none; }
.header-right { font: 500 10px 'JetBrains Mono'; letter-spacing: .16em; color: rgba(230,238,255,.4); white-space: nowrap; }

.icon-btn {
  width: 30px; height: 30px; flex: none; border-radius: 10px; border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03); color: rgba(230,238,255,.6); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font: 700 15px 'Chakra Petch';
}
.icon-btn:hover { border-color: rgba(255,255,255,.22); color: #e9eeff; }

.action-menu {
  position: absolute; top: 52px; right: 14px; z-index: 20; min-width: 200px;
  border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: #0a0c16;
  box-shadow: 0 20px 50px rgba(0,0,0,.55); padding: 6px; animation: pop .16s ease;
}
.action-menu-item {
  width: 100%; text-align: left; padding: 11px 12px; border-radius: 10px; border: 0;
  background: transparent; color: #e9eeff; font: 600 11px 'Chakra Petch'; letter-spacing: .08em;
  cursor: pointer;
}
.action-menu-item:hover { background: rgba(255,255,255,.06); }
.action-menu-item.danger { color: #ff2e97; }
.action-menu-item:disabled { opacity: .3; cursor: not-allowed; }
.action-menu-sep { height: 1px; margin: 5px 4px; background: rgba(255,255,255,.08); }

.reconnect-banner {
  position: relative; z-index: 3; flex: none; margin: 0 14px 10px; padding: 10px 12px;
  border-radius: 12px; border: 1px solid rgba(255,46,151,.4); background: rgba(255,46,151,.08);
  display: flex; align-items: center; gap: 10px; font: 500 11px 'Chakra Petch'; color: #ffb0d4;
  animation: pop .2s ease;
}
.reconnect-banner button {
  margin-left: auto; padding: 7px 12px; border-radius: 9px; border: 1px solid #ff2e97;
  background: rgba(255,46,151,.14); color: #ff2e97; font: 700 10px 'Chakra Petch'; letter-spacing: .1em; cursor: pointer;
}

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 40;
  padding: 10px 18px; border-radius: 12px; border: 1px solid var(--accent, #00e5ff);
  background: #0a0c16; color: var(--accent, #00e5ff); font: 600 11px 'Chakra Petch'; letter-spacing: .1em;
  box-shadow: 0 10px 30px rgba(0,0,0,.5); animation: pop .18s ease; pointer-events: none;
}

.modal-overlay {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(4,5,10,.72); backdrop-filter: blur(4px); animation: glowin .18s ease;
}
.modal-box {
  width: 100%; max-width: 340px; border-radius: 18px; border: 1px solid rgba(255,255,255,.12);
  background: #0a0c16; padding: 20px; box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: pop .2s ease;
}
.modal-title { font: 700 14px 'Chakra Petch'; letter-spacing: .08em; color: #e9eeff; margin-bottom: 8px; }
.modal-text { font: 400 12px/1.6 'Chakra Petch'; color: rgba(230,238,255,.6); margin-bottom: 18px; }
.modal-actions { display: flex; gap: 8px; }
.modal-actions button { flex: 1; }
.btn-secondary {
  padding: 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: transparent;
  color: rgba(230,238,255,.7); font: 700 11px 'Chakra Petch'; letter-spacing: .1em; cursor: pointer;
}
.btn-danger {
  padding: 12px; border-radius: 12px; border: 1px solid #ff2e97; background: rgba(255,46,151,.12);
  color: #ff2e97; font: 700 11px 'Chakra Petch'; letter-spacing: .1em; cursor: pointer;
}

.screen { flex: 1; overflow-y: auto; padding: 0 18px 18px; min-height: 0; }
/* La pantalla de juego no se desplaza como bloque: el tablero, el panel de
   dados y los botones de acción (TIRAR/PLANTARSE) quedan siempre fijos en
   su sitio; solo .log-panel, más abajo, hace scroll interno. Así el
   historial puede crecer todo lo que haga falta sin arrastrar consigo los
   controles con los que se juega. */
.screen-game { padding: 0 14px; display: flex; flex-direction: column; min-height: 0; overflow-y: hidden; }
.screen-game > * { flex: none; }
.screen-game > .log-panel { flex: 1; }

/* Menú principal: ocupa toda la pantalla disponible (ya la hereda de
   .screen, que a su vez llena #app ahora que #app tiene altura fija) y
   centra su contenido en vertical en vez de quedar pegado arriba. */
#screen-connect { display: flex; flex-direction: column; justify-content: center; }

.section-label {
  font: 500 10px 'JetBrains Mono'; letter-spacing: .2em; color: rgba(230,238,255,.35);
  margin: 0 0 9px 2px;
}
.section-label.small { font-size: 9px; letter-spacing: .2em; color: rgba(230,238,255,.28); margin-bottom: 7px; }

/* ---- conectar / lobby ---- */
.connect-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.tab-btn {
  flex: 1; padding: 13px 10px; border-radius: 14px; border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.02); color: rgba(230,238,255,.5);
  font: 600 11px 'Chakra Petch'; letter-spacing: .14em; cursor: pointer;
}
.tab-btn.active {
  border-color: var(--accent, #00e5ff); background: var(--accent-fill, rgba(0,229,255,.12)); color: var(--accent, #00e5ff);
}
.field-label { font: 500 10px 'JetBrains Mono'; letter-spacing: .18em; color: rgba(230,238,255,.4); margin: 0 0 8px 2px; }
.input {
  width: 100%; padding: 13px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03); color: #e9eeff; font: 600 14px 'Chakra Petch'; letter-spacing: .06em;
  outline: none;
}
.input:focus { border-color: var(--accent, #00e5ff); }
.code-input { text-transform: uppercase; letter-spacing: .3em; text-align: center; font-family: 'JetBrains Mono'; }
.connect-error { margin-top: 12px; font: 500 11px 'JetBrains Mono'; color: #ff2e97; min-height: 14px; }
.hint-text { margin-top: 10px; font: 500 10px 'JetBrains Mono'; color: rgba(230,238,255,.35); text-align: center; min-height: 14px; }

.room-code-box {
  border-radius: 16px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.02);
  padding: 14px 16px; margin-bottom: 18px; text-align: center;
}
.room-code {
  font: 700 30px 'JetBrains Mono'; letter-spacing: .3em; color: var(--accent, #00e5ff);
  text-shadow: 0 0 20px var(--accent-ghost, rgba(0,229,255,.3));
}

.roster { display: flex; flex-direction: column; gap: 9px; }
.roster-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.02);
}
.color-chip {
  width: 26px; height: 26px; flex: none; border-radius: 9px; cursor: pointer; border: 1px solid transparent;
}
.color-chip.disabled { cursor: default; }
.roster-name {
  flex: 1; min-width: 0; color: #e9eeff; font: 600 14px 'Chakra Petch'; letter-spacing: .06em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.roster-name-input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: #e9eeff;
  font: 600 14px 'Chakra Petch'; letter-spacing: .06em;
}
.tag {
  font: 500 9px 'JetBrains Mono'; letter-spacing: .14em; border-radius: 6px; padding: 3px 6px; flex: none;
}
.tag.offline { color: rgba(230,238,255,.35); border: 1px solid rgba(255,255,255,.15); }
.remove-btn {
  width: 26px; height: 26px; flex: none; border-radius: 9px; border: 1px solid rgba(255,255,255,.10);
  background: transparent; color: rgba(230,238,255,.45); font: 400 15px 'Chakra Petch'; line-height: 1; cursor: pointer;
}

.btn-dashed {
  width: 100%; margin-top: 10px; padding: 12px; border-radius: 14px; border: 1px dashed rgba(255,255,255,.14);
  background: transparent; color: rgba(230,238,255,.5); font: 600 11px 'Chakra Petch'; letter-spacing: .14em; cursor: pointer;
}

.config-grid { display: flex; flex-direction: column; gap: 12px; }
.config-field { display: flex; flex-direction: column; gap: 6px; }
.config-field span {
  font: 500 9px 'JetBrains Mono'; letter-spacing: .12em; color: rgba(230,238,255,.4);
}
.config-field input.input { padding: 11px 14px; font: 700 15px 'JetBrains Mono'; letter-spacing: .04em; }
.config-field input.input:disabled { opacity: .5; cursor: not-allowed; }

.btn-ghost {
  width: 100%; padding: 11px; border-radius: 12px; border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02); color: rgba(230,238,255,.45); font: 500 10px 'JetBrains Mono';
  letter-spacing: .16em; cursor: pointer; text-align: left;
}
.rules-toggle { margin-top: 20px; }
.rules-box {
  margin-top: 8px; padding: 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.02); font: 400 12px/1.75 'Chakra Petch'; color: rgba(230,238,255,.6);
}
.rules-box b { color: #e9eeff; }
.pink { color: #ff2e97; font-weight: 700; }

.btn-primary {
  width: 100%; padding: 17px; border-radius: 16px; border: 1px solid var(--accent, #00e5ff);
  background: var(--accent-fill, rgba(0,229,255,.12)); color: var(--accent, #00e5ff);
  font: 700 13px 'Chakra Petch'; letter-spacing: .2em; cursor: pointer;
  box-shadow: 0 0 30px var(--accent-ghost, rgba(0,229,255,.22)), inset 0 0 30px var(--accent-ghost, rgba(0,229,255,.22));
}
.btn-primary:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }
.btn-primary.big { padding: 17px; }
.btn-link { border: 0; background: transparent; color: rgba(230,238,255,.45); font: 500 10px 'JetBrains Mono'; letter-spacing: .16em; cursor: pointer; }

/* ---- juego ---- */
.board-strip { display: flex; gap: 7px; overflow-x: auto; padding: 0 4px 12px; }
.board-card {
  flex: none; min-width: 104px; padding: 9px 11px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.02);
}
.board-card.active { box-shadow: 0 0 26px var(--card-glow, transparent), inset 0 0 20px var(--card-glow-in, transparent); }
.board-card.penalty-flash { animation: penaltyFlash 1.1s ease; }
@keyframes penaltyFlash {
  0%, 100% { box-shadow: none; border-color: rgba(255,255,255,.07); }
  15%, 45% { box-shadow: 0 0 22px rgba(255,46,151,.55), inset 0 0 18px rgba(255,46,151,.18); border-color: #ff2e97; }
}
.board-card-top { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.board-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.board-name {
  font: 600 10px 'Chakra Petch'; letter-spacing: .1em; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 78px;
}
.board-score { font: 700 20px 'JetBrains Mono'; letter-spacing: -.02em; }
.board-bar { height: 2px; margin-top: 6px; border-radius: 2px; background: rgba(255,255,255,.07); overflow: hidden; }
.board-bar-fill { display: block; height: 100%; }

.turn-row { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 8px; }
.turn-label { font: 600 11px 'Chakra Petch'; letter-spacing: .14em; }

.dice-panel {
  position: relative; border-radius: 20px; border: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  padding: 12px; overflow: hidden;
}
.holo-wrap { position: absolute; inset: 0; overflow: hidden; border-radius: 20px; pointer-events: none; }

.reserve-row { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 2px 8px; }
.reserve-label { font: 500 9px 'JetBrains Mono'; letter-spacing: .14em; color: rgba(230,238,255,.32); flex: none; }
.reserve-dice { display: flex; gap: 6px; }
.reserve-die {
  width: 26px; height: 26px; flex: none; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font: 700 12px 'JetBrains Mono';
}
.turn-score { margin-left: auto; font: 700 13px 'JetBrains Mono'; color: var(--accent, #00e5ff); text-shadow: 0 0 14px var(--accent-ghost, rgba(0,229,255,.22)); }

.dice-grid {
  position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 72px);
  justify-content: space-around; row-gap: 16px;
}
.die-cell { width: 72px; }
.die-3d { width: 72px; height: 72px; perspective: 900px; perspective-origin: 50% 50%; }
.die-cube { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; will-change: transform; }
.die-face {
  position: absolute; inset: 0; border-radius: 3px; display: grid;
  grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr); padding: 10px;
  transition: opacity .34s ease .06s, box-shadow .34s ease;
}
.die-pip { align-self: center; justify-self: center; width: 10px; height: 10px; border-radius: 50%; }
.die-sheen {
  position: absolute; inset: 0; border-radius: 3px; pointer-events: none;
  background: linear-gradient(150deg, rgba(255,255,255,.15), transparent 55%);
}
.die-reflect { height: 9px; margin: -2px 12px 0; border-radius: 50%; filter: blur(6px); }

.msg-row { display: flex; align-items: center; gap: 8px; padding: 11px 4px 9px; }
.msg-text { font: 500 10px 'JetBrains Mono'; letter-spacing: .12em; flex: 1; }

.sel-row { display: flex; gap: 6px; padding: 0 4px 9px; }
.btn-small {
  flex: 1; padding: 8px 4px; border-radius: 10px; border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.03); color: rgba(230,238,255,.68); font: 500 9px 'JetBrains Mono';
  letter-spacing: .12em; cursor: pointer;
}
.btn-small.narrow { flex: none; padding: 8px 11px; border-color: rgba(255,255,255,.10); background: transparent; color: rgba(230,238,255,.5); }
.btn-small:disabled { opacity: .35; cursor: not-allowed; }

.action-row { display: flex; gap: 9px; }
#primaryActionBtn {
  flex: 1.5; padding: 16px 8px; border-radius: 16px; border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02); color: rgba(230,238,255,.25); font: 700 12px 'Chakra Petch';
  letter-spacing: .16em; cursor: pointer;
}
#primaryActionBtn.ready {
  border-color: var(--accent, #00e5ff); background: var(--accent-fill, rgba(0,229,255,.14)); color: var(--accent, #00e5ff);
  box-shadow: 0 0 30px var(--accent-ghost, rgba(0,229,255,.22));
}
#primaryActionBtn:disabled { cursor: not-allowed; }
.btn-bank {
  flex: 1; padding: 16px 8px; border-radius: 16px; border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02); color: rgba(230,238,255,.22); font: 700 12px 'Chakra Petch';
  letter-spacing: .16em; cursor: pointer;
}
.btn-bank.ready { border-color: rgba(255,255,255,.18); color: #e9eeff; }
.btn-bank:disabled { cursor: not-allowed; }

.log-panel { flex: 1; min-height: 60px; margin-top: 12px; overflow-y: auto; border-top: 1px solid rgba(255,255,255,.06); padding-top: 9px; }
.log-list { display: flex; flex-direction: column; gap: 12px; padding-bottom: 8px; }
.log-turn { display: flex; flex-direction: column; gap: 4px; }
.log-turn-head {
  display: flex; align-items: center; gap: 7px; padding: 4px 9px; margin: 0 -9px;
  border-radius: 8px; cursor: pointer; user-select: none;
}
.log-turn-head:hover { background: rgba(255,255,255,.03); }
.log-turn-chevron { flex: none; width: 9px; font: 700 9px 'JetBrains Mono'; color: rgba(230,238,255,.3); }
.log-turn-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.log-turn-name { font: 700 9px 'Chakra Petch'; letter-spacing: .12em; }
.log-turn-outcome { margin-left: auto; font: 700 10px 'JetBrains Mono'; letter-spacing: .05em; }
.log-turn-body { display: flex; flex-direction: column; gap: 4px; }
.log-row { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 10px; background: rgba(255,255,255,.022); border-left: 2px solid transparent; }
.log-vals { font: 500 11px 'JetBrains Mono'; color: rgba(230,238,255,.5); letter-spacing: .14em; flex: 1; }
.log-pts { font: 700 11px 'JetBrains Mono'; }

/* ---- stats ---- */
.chart-box { border-radius: 18px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.02); padding: 12px 10px 8px; }
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-foot { display: flex; justify-content: space-between; font: 500 9px 'JetBrains Mono'; color: rgba(230,238,255,.3); padding: 4px 6px 0; }
.legend-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.legend-item { display: flex; align-items: center; gap: 6px; font: 600 10px 'Chakra Petch'; letter-spacing: .08em; color: rgba(230,238,255,.6); }
.legend-dot { width: 8px; height: 8px; border-radius: 2px; }
.stat-rows { display: flex; flex-direction: column; gap: 8px; }
.stat-card { padding: 12px 13px; border-radius: 14px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.02); }
.stat-top { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.stat-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.stat-name { font: 600 12px 'Chakra Petch'; letter-spacing: .1em; color: #e9eeff; }
.stat-total { margin-left: auto; font: 700 14px 'JetBrains Mono'; }
.stat-sub { display: flex; gap: 14px; flex-wrap: wrap; }
.stat-sub span { font: 500 9px 'JetBrains Mono'; color: rgba(230,238,255,.4); }
.stat-sub b { color: #e9eeff; font-weight: 700; }
.stat-sub b.pink { color: #ff2e97; }

/* ---- historial ---- */
.no-games { padding: 38px 16px; text-align: center; border-radius: 18px; border: 1px dashed rgba(255,255,255,.10); font: 400 12px 'Chakra Petch'; color: rgba(230,238,255,.35); }
.games-list { display: flex; flex-direction: column; gap: 9px; }
.game-card { padding: 13px; border-radius: 16px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.02); }
.game-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.game-dot { width: 7px; height: 7px; border-radius: 50%; }
.game-winner { font: 600 12px 'Chakra Petch'; letter-spacing: .1em; color: #e9eeff; }
.game-gana { font: 500 9px 'JetBrains Mono'; border-radius: 6px; padding: 2px 5px; }
.game-date { margin-left: auto; font: 500 9px 'JetBrains Mono'; color: rgba(230,238,255,.32); }
.game-row { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.game-row-name { font: 600 10px 'Chakra Petch'; letter-spacing: .08em; color: rgba(230,238,255,.6); width: 76px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-row-bar { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,.05); overflow: hidden; }
.game-row-bar-fill { display: block; height: 100%; }
.game-row-score { font: 700 11px 'JetBrains Mono'; color: rgba(230,238,255,.75); width: 44px; text-align: right; }

/* ---- tabbar ---- */
.tabbar {
  height: 64px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 18px 6px;
  border-top: 1px solid rgba(255,255,255,.06); background: rgba(4,5,10,.6);
}
.tab-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 0 0;
  background: transparent; cursor: pointer; color: rgba(230,238,255,.32);
}
.tab-item span { font: 600 9px 'JetBrains Mono'; letter-spacing: .16em; }
.tab-item.active { color: var(--accent, #00e5ff); }

/* ---- game over ---- */
.over-overlay {
  position: absolute; inset: 0; z-index: 9; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 16px; padding: 32px; background: rgba(4,5,10,.88); backdrop-filter: blur(6px);
  animation: glowin .3s ease;
}
.over-label { font: 500 10px 'JetBrains Mono'; letter-spacing: .3em; color: rgba(230,238,255,.4); }
.over-winner { font: 700 30px 'Chakra Petch'; letter-spacing: .1em; color: var(--accent, #00e5ff); text-shadow: 0 0 40px var(--accent, #00e5ff); text-align: center; }
.over-score { font: 700 44px 'JetBrains Mono'; color: #e9eeff; }

/* ---- menú principal (partidas activas + historial) ---- */
.menu-block { margin-bottom: 26px; }
.menu-block:last-child { margin-bottom: 4px; }
.menu-status { font: 400 11px 'Chakra Petch'; color: rgba(230,238,255,.35); margin: -4px 0 14px 2px; }

.active-game-card {
  padding: 13px; border-radius: 16px; border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.02); margin-bottom: 9px;
}
.active-game-top { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.active-game-code { font: 700 13px 'JetBrains Mono'; letter-spacing: .16em; color: #e9eeff; }
.active-game-status { margin-left: auto; font: 500 9px 'JetBrains Mono'; letter-spacing: .08em; color: rgba(230,238,255,.4); text-align: right; }
.active-game-players { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.active-game-chip {
  display: flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 8px;
  background: rgba(255,255,255,.03); font: 600 10px 'Chakra Petch'; letter-spacing: .04em; color: rgba(230,238,255,.7);
}
.active-game-chip.me { color: #e9eeff; }
.active-game-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.active-game-actions { display: flex; gap: 8px; }
.active-game-actions .btn-primary { padding: 12px; font-size: 11px; }
.active-game-delete {
  width: 40px; flex: none; border-radius: 12px; border: 1px solid rgba(255,255,255,.10);
  background: transparent; color: rgba(230,238,255,.4); cursor: pointer; font-size: 15px;
}
.active-game-delete:hover { border-color: #ff2e97; color: #ff2e97; }

.room-code-box { cursor: pointer; }
.room-code-hint { margin-top: 4px; font: 500 9px 'JetBrains Mono'; letter-spacing: .1em; color: rgba(230,238,255,.28); }

.games-list.clickable .game-card { cursor: pointer; }
.games-list.clickable .game-card:hover { border-color: rgba(255,255,255,.16); }
.game-card-actions { display: flex; justify-content: flex-end; margin-top: 2px; }
.game-delete {
  border: 0; background: transparent; color: rgba(230,238,255,.3); font: 500 9px 'JetBrains Mono';
  letter-spacing: .1em; cursor: pointer; padding: 4px 6px;
}
.game-delete:hover { color: #ff2e97; }