/* ==========================================================================
   BURRACO ARENA — CASINO GREEN FELT LAYOUT (INTERAZIONE DIRETTA SUL TAVOLO)
   ========================================================================== */

:root {
  --table-felt: #2e7d4a;
  --table-felt-dark: #226339;
  --table-felt-light: #389458;
  --bay-bg: rgba(18, 58, 32, 0.78);
  --bay-border: rgba(154, 215, 173, 0.5);
  --avatar-frame-bg: #b8e2c4;
  --avatar-frame-border: #d4f0dc;
  --tag-yellow: #fff7b3;
  --tag-yellow-border: #d6c050;
  --gold: #f5c518;
  --font: 'Montserrat', 'Segoe UI', Arial, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
*::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  overflow-x: hidden !important;
  font-family: var(--font);
  background: #081a0e;
  color: #ffffff;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
html::-webkit-scrollbar, body::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

body.burraco-body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Banner di aggiornamento APP (PWA): viene mostrato quando c'è una nuova versione.
   Stile dedicato .burraco-update-banner per non entrare in conflitto con gli altri toast. */
.burraco-update-banner {
  position: fixed; left: 16px; right: 16px; bottom: 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: linear-gradient(135deg, rgba(20,28,46,0.97), rgba(15,23,42,0.97));
  border: 1.5px solid #fbbf24;
  border-radius: 14px; padding: 10px 14px;
  font: 700 0.85rem var(--font); color: #fef08a;
  box-shadow: 0 8px 28px rgba(0,0,0,0.55);
  z-index: 700; backdrop-filter: blur(8px);
  animation: updBannerIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}
.burraco-update-banner .burraco-update-msg { line-height: 1.25; }
.burraco-update-banner .burraco-update-btn {
  flex-shrink: 0;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #1e293b; border: none; border-radius: 10px;
  padding: 8px 14px; font: 800 0.82rem var(--font); cursor: pointer;
  box-shadow: 0 2px 8px rgba(245,158,11,0.5);
}
.burraco-update-banner .burraco-update-btn:active { transform: translateY(1px); }
.burraco-update-banner.burraco-update-dismissed { display: none !important; }
@keyframes updBannerIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ========================================================================
   LOBBY VIEW (Tavoli con avatar attorno e sedie vuote)
   ======================================================================== */
.burraco-lobby-viewport {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse at 50% 0%, #1e5c30 0%, #0d3a1a 50%, #050f07 100%);
  overflow: hidden;
  position: relative;
}
.hidden,
.lobby-vertical-dropdown.hidden,
.lobby-dropdown-backdrop.hidden,
.burraco-lobby-viewport.hidden,
.burraco-game-viewport.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Top Mode Bar Organizzata */
.lobby-header-container {
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.92);
  border-bottom: 2px solid rgba(245, 197, 24, 0.45);
  width: 100%;
  max-width: 100vw;
  flex-shrink: 0;
  box-sizing: border-box;
}

.lobby-top-system-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 16px;
  min-height: 42px;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
}

.top-bar-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
}

.top-bar-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex: 2;
}

.top-bar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
}

/* UNIFORMITÀ COMPLETA PER TUTTI I PULSANTI DEL MENU SUPERIORE */
.lobby-account-dropdown-wrapper {
  position: relative;
  display: inline-block;
  z-index: 1000;
}
.dropdown-caret {
  font-size: 0.75rem;
  margin-left: 3px;
  color: var(--gold);
  transition: transform 0.2s ease;
}
.lobby-account-btn.open .dropdown-caret {
  transform: rotate(180deg);
}

.lobby-dropdown-backdrop {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 99990;
}

.lobby-vertical-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 210px;
  background: rgba(15, 23, 42, 0.96);
  border: 1.5px solid var(--gold);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.9), 0 0 20px rgba(245, 197, 24, 0.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  gap: 3px;
  z-index: 99999;
  animation: dropdownSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.lobby-vertical-dropdown.dropdown-align-right {
  left: auto;
  right: 0;
}
@keyframes dropdownSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #f8fafc;
  font: 800 0.8rem var(--font);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}
.dropdown-item:hover {
  background: rgba(245, 197, 24, 0.15);
  border-color: rgba(245, 197, 24, 0.4);
  color: #ffd700;
  transform: translateX(3px);
}
.dropdown-icon {
  font-size: 1rem;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dropdown-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 3px 4px;
}
.dropdown-item.item-portal {
  color: #93c5fd;
}
.dropdown-item.item-portal:hover {
  background: rgba(59, 130, 246, 0.2);
  border-color: #60a5fa;
  color: #ffffff;
}
.dropdown-item.item-danger {
  color: #fca5a5;
}
.dropdown-item.item-danger:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: #ef4444;
  color: #ffffff;
}

.lobby-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.85);
  border: 1.5px solid rgba(245, 197, 24, 0.45);
  color: #ffffff;
  font: 800 0.78rem var(--font);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}
.lobby-nav-btn:hover {
  border-color: #ffd700;
  background: rgba(30, 41, 59, 0.95);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 197, 24, 0.4);
}
.lobby-nav-btn .btn-icon {
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lobby-nav-btn.btn-highlight-gold {
  background: linear-gradient(180deg, #d97706 0%, #b45309 100%);
  border-color: #fde047;
}
.lobby-nav-btn.btn-highlight-gold:hover {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.5);
}
.lobby-nav-btn.btn-danger {
  border-color: rgba(239, 68, 68, 0.6);
  background: rgba(185, 28, 28, 0.35);
  color: #fca5a5;
}
.lobby-nav-btn.btn-danger:hover {
  background: #dc2626;
  color: #ffffff;
  border-color: #f87171;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.5);
}
.lobby-nav-btn.btn-portal {
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  border-color: #93c5fd;
  color: #ffffff;
}
.lobby-nav-btn.btn-portal:hover {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.5);
}
.lobby-center-stats {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lobby-online-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(74, 222, 128, 0.4);
  padding: 4px 12px;
  border-radius: 99px;
  font: 800 0.76rem var(--font);
  color: #ffffff;
}
.lobby-online-badge strong {
  color: #4ade80;
}
.online-dot {
  color: #4ade80;
  font-size: 0.85rem;
  animation: pulseDot 2s infinite ease-in-out;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.lobby-page-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.85);
  border: 1.5px solid var(--gold);
  border-radius: 99px;
  padding: 2px 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.btn-pnav {
  background: none;
  border: none;
  color: var(--gold);
  font-weight: 900;
  font-size: 0.8rem;
  cursor: pointer;
  padding: 2px 6px;
  transition: transform 0.15s;
}
.btn-pnav:hover:not(:disabled) {
  transform: scale(1.2);
  color: #ffffff;
}
.btn-pnav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
#lobby-page-num {
  font: 900 0.74rem var(--font);
  color: #ffffff;
  white-space: nowrap;
}

.lobby-modes-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 2px 10px 6px 10px;
  width: 100%;
  box-sizing: border-box;
}

.mode-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 8px;
  height: 36px;
  background: linear-gradient(180deg, #2e7d4a 0%, #1b532e 100%);
  border: 1.5px solid #52b774;
  border-radius: 8px;
  color: #fff;
  font: 800 0.8rem var(--font);
  cursor: pointer;
  transition: all 0.2s;
  min-width: 0;
  box-sizing: border-box;
}
.mode-tab.active {
  background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%);
  border-color: #fde047;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 0 14px rgba(245,197,24,0.6);
}
.mode-tab-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  overflow: hidden;
}
.mode-tab-title {
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mode-tab-top-val {
  font-size: 0.65rem;
  font-weight: 900;
  color: #fef08a;
  line-height: 1;
}
.mode-tab .count {
  font-size: 0.68rem;
  font-weight: 900;
  background: rgba(0,0,0,0.5);
  border-radius: 99px;
  padding: 1px 5px;
  color: #fef08a;
  flex-shrink: 0;
}

.lobby-online {
  font-size: 0.74rem;
  font-weight: 800;
  color: #fbbf24;
  text-align: center;
  line-height: 1.2;
}

.lobby-user-bar {
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-lobby-profile {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(15, 23, 42, 0.85);
  border: 1.5px solid rgba(245, 197, 24, 0.6);
  border-radius: 99px;
  padding: 3px 10px;
  color: #fff;
  font: 800 0.76rem var(--font);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn-lobby-profile:hover {
  border-color: var(--gold);
  transform: translateY(-1px);
  box-shadow: 0 0 10px rgba(245, 197, 24, 0.5);
}
.btn-lobby-logout {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(239, 68, 68, 0.2);
  border: 1.5px solid #ef4444;
  color: #fca5a5;
  padding: 4px 8px;
  border-radius: 8px;
  font: 800 0.72rem var(--font);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn-lobby-logout:hover {
  background: #dc2626;
  color: #fff;
  transform: translateY(-1px);
}

.btn-back-portal {
  background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
  border: 1.5px solid #93c5fd;
  color: #fff;
  padding: 4px 10px;
  border-radius: 8px;
  font: 800 0.74rem var(--font);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn-back-portal:hover { transform: none; box-shadow: 0 0 10px rgba(59, 130, 246, 0.6); }

/* Lobby Main Area: Riempie lo schermo al 100% con 3x3 Tavoli Ingranditi */
.lobby-main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  min-height: 0;
  width: 100%;
  height: calc(100vh - 110px);
  max-height: calc(100vh - 110px);
  box-sizing: border-box;
}
.tables-scroll {
  flex: 1;
  overflow: hidden;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding: 6px 14px 6px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 0;
  width: 100%;
  max-width: 98vw;
  height: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
.tables-scroll::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
/* App: tavoli in riga a scorrimento orizzontale (pochi visibili, resto a scroll) */
.tables-three-columns {
  display: flex;
  flex-direction: row;
  gap: 12px;
  width: 100%;
  flex: 1;
  min-height: 0;
  box-sizing: border-box;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding: 6px 4px 10px 4px;
}
.tables-three-columns .table-entry-card {
  flex: 0 0 clamp(300px, 34vw, 420px);
  scroll-snap-align: start;
  height: auto;
  min-height: 100%;
}
@media (max-width: 1050px) {
  .lobby-main-area {
    height: auto;
    max-height: none;
    overflow-y: auto !important;
  }
  .tables-scroll {
    overflow-y: auto !important;
    height: auto;
  }
  .tables-three-columns {
    display: flex;
    flex-direction: row;
    height: auto;
    overflow-x: auto;
  }
  .tables-three-columns .table-entry-card {
    flex: 0 0 clamp(260px, 70vw, 340px);
  }
}
@media (max-width: 700px) {
  .tables-three-columns {
    display: flex;
    flex-direction: row;
    gap: 10px;
    overflow-x: auto;
  }
  .tables-three-columns .table-entry-card {
    flex: 0 0 clamp(240px, 78vw, 320px);
  }
}

/* Barra di Paginazione: Solo INDIETRO e AVANTI, Senza Contorno Esterno */
.lobby-pagination-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 2px 0;
  height: 36px;
  min-height: 36px;
  flex-shrink: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin-top: 3px;
  margin-bottom: 2px;
  box-sizing: border-box;
}

.btn-page-nav {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border: 1.5px solid #ffd700;
  border-radius: 99px;
  padding: 4px 16px;
  height: 32px;
  color: #ffd700;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 10px rgba(255, 215, 0, 0.35);
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn-page-nav:hover {
  background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
  border-color: #ffffff;
  color: #ffffff;
  transform: scale(1.04);
  box-shadow: 0 4px 14px rgba(255, 215, 0, 0.6);
}
.btn-page-nav.pulse-yellow {
  animation: pulse-gold-glow 2s infinite;
}
@keyframes pulse-gold-glow {
  0% { box-shadow: 0 0 4px rgba(255, 215, 0, 0.3); }
  50% { box-shadow: 0 0 16px rgba(255, 215, 0, 0.75), 0 0 24px rgba(255, 215, 0, 0.4); }
  100% { box-shadow: 0 0 4px rgba(255, 215, 0, 0.3); }
}
.nav-arrow-yellow {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.lobby-nav-btn.btn-home-nav {
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  border-color: #93c5fd;
  color: #ffffff;
}
.lobby-nav-btn.btn-home-nav:hover {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.5);
}

.lobby-nav-btn.btn-highlight-green {
  background: linear-gradient(180deg, #10b981 0%, #059669 100%);
  border-color: #6ee7b7;
  color: #ffffff;
}
.lobby-nav-btn.btn-highlight-green:hover {
  background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.5);
}

/* =========================================================================
   SCHEDA TAVOLO ADATTIVA (SENZA SOVRAPPOSIZIONI & CON SCORRIMENTO FLUIDO)
   ========================================================================= */
.table-entry-card {
  background: radial-gradient(ellipse at 50% 50%, rgba(20, 83, 45, 0.92) 0%, rgba(4, 38, 18, 0.98) 100%);
  border: 1.5px solid rgba(74, 222, 128, 0.45);
  border-radius: 16px;
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  height: 100%;
  min-height: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.18s ease;
  box-sizing: border-box;
  cursor: pointer;
}
.table-entry-card:hover {
  border-color: #ffd700;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.8), 0 0 18px rgba(245, 197, 24, 0.4);
  transform: translateY(-1px);
}

/* Intestazione Tavolo su UNA SOLA RIGA con Carattere Pulito e Specifiche Moderne */
.card-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 4px;
  overflow: hidden;
  white-space: nowrap;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  flex-shrink: 0;
}
.card-table-title-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-shrink: 1;
}
.card-table-name {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(0.92rem, 1.05vw, 1.15rem);
  color: #ffffff;
  letter-spacing: 0.3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-table-mode-pill {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(0.65rem, 0.7vw, 0.76rem);
  padding: 2px 7px;
  border-radius: 99px;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.3px;
}
.card-table-mode-pill.is-1v1 {
  background: rgba(56, 189, 248, 0.2);
  color: #7dd3fc;
  border: 1px solid rgba(56, 189, 248, 0.4);
}
.card-table-mode-pill.is-2v2 {
  background: rgba(168, 85, 247, 0.2);
  color: #d8b4fe;
  border: 1px solid rgba(168, 85, 247, 0.4);
}

.card-table-badges {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
  flex-shrink: 0;
}
.rule-chip-gold {
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid #f59e0b;
  color: #fde047;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(0.66rem, 0.72vw, 0.8rem);
  letter-spacing: 0.2px;
  padding: 2px 6px;
  border-radius: 6px;
  white-space: nowrap;
}
.rule-chip-blue {
  background: rgba(59, 130, 246, 0.2);
  border: 1px solid #3b82f6;
  color: #93c5fd;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(0.66rem, 0.72vw, 0.8rem);
  letter-spacing: 0.2px;
  padding: 2px 6px;
  border-radius: 6px;
  white-space: nowrap;
}
.rule-chip-vip {
  background: rgba(234, 179, 8, 0.25);
  border: 1px solid #eab308;
  color: #fef08a;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(0.66rem, 0.72vw, 0.8rem);
  letter-spacing: 0.2px;
  padding: 2px 6px;
  border-radius: 6px;
  white-space: nowrap;
}
.rule-chip-nochat {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid #ef4444;
  color: #fca5a5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(0.66rem, 0.72vw, 0.8rem);
  letter-spacing: 0.2px;
  padding: 2px 6px;
  border-radius: 6px;
  white-space: nowrap;
}

/* Pulsante Piccolo Guarda nell'Intestazione del Tavolo */
.btn-watch-small {
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  border: 1px solid #93c5fd;
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(0.66rem, 0.72vw, 0.8rem);
  letter-spacing: 0.2px;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: all 0.2s ease;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.btn-watch-small:hover {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  border-color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(59, 130, 246, 0.5);
}

/* Riquadro Interno Verde Scuro FISSO Ingrandito & Spazioso */
.card-table-arena-body {
  flex: 1;
  min-height: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 12px;
  padding: 4px 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arena-seats-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* 4 Giocatori: 2 a sinistra, tavolo al centro, 2 a destra */
.arena-seats-flow.flow-2v2 {
  justify-content: space-between;
  gap: clamp(6px, 1vw, 14px);
}

/* 2 Giocatori: In orizzontale centrale a sinistra e destra del tavolo */
.arena-seats-flow.flow-1v1 {
  justify-content: space-around;
  gap: clamp(20px, 3vw, 44px);
  padding: 0 clamp(10px, 2vw, 28px);
}

.arena-seat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Tavolo Piccolo Verde al Centro */
.arena-mini-table {
  width: clamp(44px, 3.8vw, 65px);
  height: clamp(30px, 2.6vw, 45px);
  background: radial-gradient(ellipse at 50% 50%, #15803d 0%, #14532d 100%);
  border: 1.5px solid #86efac;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
  margin: 0 4px;
  flex-shrink: 0;
}
.mini-table-felt {
  width: clamp(15px, 1.4vw, 22px);
  height: clamp(20px, 1.8vw, 30px);
  border-radius: 2px;
  background: #1e3a8a;
  border: 1px solid #93c5fd;
  transform: rotate(-6deg);
}

/* Avatar e Sedie - Ingranditi per Riempire lo Spazio */
.lobby-seat-avatar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.lobby-avatar-frame {
  width: clamp(52px, 4.4vw, 68px);
  height: clamp(52px, 4.4vw, 68px);
  border-radius: 14px;
  background: #0f172a;
  border: 2px solid rgba(255, 255, 255, 0.35);
  overflow: hidden;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
  transition: transform 0.2s, border-color 0.2s;
}
.lobby-avatar-frame.crown-border {
  border-color: #ffd700;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}
.lobby-avatar-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lobby-avatar-crown {
  position: absolute;
  top: -8px;
  right: -5px;
  font-size: clamp(0.9rem, 1.2vw, 1.2rem);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
}
.lobby-avatar-tag {
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(0.64rem, 0.72vw, 0.78rem);
  color: #ffffff;
  max-width: clamp(70px, 6vw, 92px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

/* Sedia Vuota con Design Elegante */
.empty-chair-slot {
  width: clamp(52px, 4.4vw, 68px);
  height: clamp(52px, 4.4vw, 68px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 14px;
  background: rgba(2, 132, 199, 0.15);
  border: 2px dashed rgba(56, 189, 248, 0.65);
  transition: all 0.2s ease;
  gap: 2px;
}
.empty-chair-slot:hover {
  background: rgba(2, 132, 199, 0.3);
  border-color: #38bdf8;
  transform: scale(1.05);
}
.chair-icon-3d {
  width: clamp(24px, 2.1vw, 32px);
  height: clamp(24px, 2.1vw, 32px);
}
.chair-sit-tag {
  background: #0284c7;
  border: 1px solid #bae6fd;
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(0.54rem, 0.62vw, 0.68rem);
  border-radius: 99px;
  padding: 1px 6px;
}

/* ========================================================================
   TAVOLO DA GIOCO — CARTE EXTRA GRANDI E SPAZI INGRANDITI
   ======================================================================== */
.burraco-game-viewport {
  width: 100vw; height: 100vh;
  position: relative; overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #358a4e 0%, #2a7340 55%, #1c5a30 100%);
  transition: background 0.3s ease;
}

/* Felt Background Themes */
.burraco-game-viewport.felt-green {
  background: radial-gradient(ellipse at 50% 45%, #2e7d4a 0%, #24683d 50%, #18502d 85%, #0e341c 100%);
}
.burraco-game-viewport.felt-blue {
  background: radial-gradient(ellipse at 50% 45%, #1e3a8a 0%, #172554 50%, #0f172a 85%, #020617 100%);
}
.burraco-game-viewport.felt-red {
  background: radial-gradient(ellipse at 50% 45%, #881337 0%, #701a2d 50%, #4c0519 85%, #2a030e 100%);
}
.burraco-game-viewport.felt-purple {
  background: radial-gradient(ellipse at 50% 45%, #581c87 0%, #3b0764 50%, #2e1065 85%, #14052b 100%);
}
.burraco-game-viewport.felt-black {
  background: radial-gradient(ellipse at 50% 45%, #1e293b 0%, #0f172a 50%, #090d16 85%, #020408 100%);
}
.burraco-game-viewport.felt-wood {
  background: radial-gradient(ellipse at 50% 45%, #78350f 0%, #572509 50%, #3d1704 85%, #240d02 100%);
}

/* Color Swatches Selector */
.felt-colors-grid {
  display: flex; gap: 8px; align-items: center; justify-content: space-between;
  padding: 4px 0;
}
.felt-color-swatch {
  flex: 1; height: 36px; border-radius: 8px; cursor: pointer;
  border: 2px solid rgba(255,255,255,0.25);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: all 0.2s; position: relative;
  font: 900 0.62rem var(--font); color: #fff; text-shadow: 0 1px 2px #000;
}
.felt-color-swatch:hover { transform: none; border-color: #fff; }
.felt-color-swatch.active {
  border: 2.5px solid var(--gold);
  box-shadow: 0 0 14px rgba(245,197,24,0.8), inset 0 0 8px rgba(255,255,255,0.4);
  transform: none;
}
.felt-color-swatch.bg-green  { background: radial-gradient(circle, #2e7d4a, #144524); }
.felt-color-swatch.bg-blue   { background: radial-gradient(circle, #1e3a8a, #0f172a); }
.felt-color-swatch.bg-red    { background: radial-gradient(circle, #881337, #3b0718); }
.felt-color-swatch.bg-purple { background: radial-gradient(circle, #6b21a8, #2e1065); }
.felt-color-swatch.bg-black  { background: radial-gradient(circle, #334155, #020617); }
.felt-color-swatch.bg-wood   { background: radial-gradient(circle, #78350f, #361404); }

/* TOP-LEFT MATCH INFO BADGE — compatto app */
.table-match-info-badge {
  position: absolute; top: 8px; left: 100px; z-index: 120;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border: 1.5px solid rgba(245, 197, 24, 0.75); border-radius: 8px;
  padding: 3px 10px; display: flex; flex-direction: column; gap: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 4px 12px rgba(0,0,0,0.6);
}
.match-mode-title {
  font: 900 0.88rem var(--font); color: #fbbf24;
  letter-spacing: 0.6px; text-transform: uppercase;
}
.match-meta-specs {
  font: 800 0.68rem var(--font); color: #cbd5e1;
  letter-spacing: 0.3px;
}

/* TOP-RIGHT SCORE BADGE & BANNER TOTALI (COMPATTI IN ALTEZZA) */
.score-banner-box {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.96) 0%, rgba(15, 23, 42, 0.98) 100%);
  border: 1.5px solid rgba(245, 197, 24, 0.85);
  border-radius: 8px;
  padding: 3px 8px;
  min-width: 96px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  user-select: none;
  box-sizing: border-box;
}
.table-top-score-badge {
  position: absolute;
  top: 4px;
  right: 12px;
  z-index: 120;
}
.bottom-score-banner {
  align-self: flex-start;
  z-index: 200;
}
.score-banner-team {
  font-family: var(--font, 'Montserrat', sans-serif);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-align: center;
  padding-bottom: 1px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 1px;
  line-height: 1;
}
.score-banner-team.opp-team-title {
  color: #fca5a5;
  text-shadow: 0 1px 2px rgba(239, 68, 68, 0.5);
}
.score-banner-team.my-team-title {
  color: #86efac;
  text-shadow: 0 1px 2px rgba(34, 197, 94, 0.5);
}
.score-banner-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  line-height: 1.05;
}
.score-banner-tag {
  font-family: var(--font, 'Montserrat', sans-serif);
  font-size: 0.58rem;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.4px;
  line-height: 1;
}
.score-banner-num {
  font-family: var(--font, 'Montserrat', sans-serif);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.score-banner-num.now-num {
  font-size: 0.84rem;
  font-weight: 900;
  color: #fef08a;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.score-banner-num.tot-num {
  font-size: 0.90rem;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
.top-score-main { font: 900 0.92rem var(--font); color: #fff; }
.top-score-sub { font: 800 0.72rem var(--font); color: #94a3b8; }

/* AVATAR BOX — pannello chiaro stile app */
.table-avatar-pod {
  position: relative; overflow: visible;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 84px;
  gap: 3px;
  z-index: 110;
  background: rgba(139, 195, 140, 0.55);
  border: 1.5px solid rgba(220, 240, 220, 0.7);
  border-radius: 12px;
  padding: 6px 4px;
}

/* TIMER SUI POD GIOCATORI */
.pod-timer-pill {
  display: none;
  align-items: center; justify-content: center;
  z-index: 130;
  background: rgba(15, 23, 42, 0.96);
  border: 2px solid #4ade80;
  color: #4ade80; font: 900 0.8rem var(--font);
  border-radius: 99px; padding: 2px 10px;
  box-shadow: 0 0 14px rgba(74, 222, 128, 0.75);
  white-space: nowrap;
}

.pod-timer-pill.is-warning {
  border-color: #ef4444 !important;
  color: #ef4444 !important;
  box-shadow: 0 0 22px rgba(239, 68, 68, 0.95) !important;
  background: rgba(69, 10, 10, 0.96) !important;
}

/* Posizioni Specifiche Richieste */
/* OVEST: ESATTAMENTE CENTRATO SOTTO L'AVATAR */
.pod-timer-pill.timer-pos-bottom {
  position: static;
  margin: 3px auto 0 auto;
  align-self: center;
}

/* EST: ESATTAMENTE CENTRATO SOPRA L'AVATAR */
.pod-timer-pill.timer-pos-top {
  position: static;
  margin: 0 auto 3px auto;
  align-self: center;
}

/* NORD & SUD: A SINISTRA DELL'AVATAR */
.pod-timer-pill.timer-pos-left {
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
}

/* Timer A DESTRA dell'avatar (tavoli 2 e 4) */
.pod-timer-pill.timer-pos-right {
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
}
/* Nord: timer a destra a metà avatar */
#pod-nord .pod-timer-pill.timer-pos-right {
  top: 32px;
}

.avatar-card-frame {
  width: 64px; height: 64px; border-radius: 8px;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 3px 8px rgba(0,0,0,0.5);
  padding: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.table-avatar-pod.is-turn .avatar-card-frame {
  box-shadow: 0 0 16px rgba(245,197,24,0.9), 0 0 30px rgba(245,197,24,0.6);
  border-color: #fde047;
  transform: none;
}
.table-avatar-pod.is-turn .avatar-name-pill {
  background: linear-gradient(180deg, #fef08a 0%, #facc15 100%);
  border-color: #eab308;
  color: #000; font-weight: 900;
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.7);
}
.avatar-card-frame img { width: 100%; height: 100%; border-radius: 7px; object-fit: cover; display: block; }
.avatar-name-pill {
  background: linear-gradient(180deg, #fff7b3 0%, #e6d36e 100%);
  border: 0.5px solid #d6c050; border-radius: 4px;
  padding: 1px 8px; font: 900 0.72rem var(--font); color: #1e293b;
  text-align: center; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: all 0.25s ease;
}
.game-banner { display: none !important; }

/* PULSANTE GIALLO 3D NUMERO CARTE (NORD, OVEST, EST) */
.pod-card-count-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #fef08a 0%, #facc15 50%, #eab308 100%) !important;
  border: 2.5px solid #ffffff !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.65), inset 0 -2px 4px rgba(0, 0, 0, 0.5) !important;
  color: #1e293b !important;
  font: 900 1.05rem / 1 var(--font), Montserrat, sans-serif !important;
  text-align: center !important;
  text-shadow: none !important;
  z-index: 150 !important;
  user-select: none !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
.pod-card-count-badge.hidden {
  display: none !important;
}

/* Posizionamenti conteggio carte gestiti nel layout finale test-2p */

/* Quando vuoti, i vassoi delle carte non mostrano bordi né sfondi */
.opp-north-cards-bay:empty,
.opp-west-cards-bay:empty,
.opp-east-cards-bay:empty {
  display: none !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Posizioni avatar/bays gestite in modo unificato conforme a test-2p.html in fondo al file */
/* Niente riquadro sotto le carte est/ovest: solo carte, senza banner */
.opp-west-cards-bay,
.opp-east-cards-bay {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 1. MICHELA (NORD) — In alto al centro */
.seat-nord-pos {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  z-index: 110;
}

/* NORD: regalo attivo al posto del pulsante (fuori dall'area calate) */
#pod-nord .seat-gift-slot {
  position: absolute;
  right: calc(100% + 24px);
  top: 40px;
  margin: 0;
}
#pod-nord .seat-gift-big { font-size: 1.5rem; }
#pod-nord .seat-gift-btn {
  position: absolute;
  right: calc(100% + 24px);
  top: 40px;
  margin-top: 0;
}
#pod-nord .avatar-name-pill {
  position: absolute;
  right: calc(100% + 10px);
  top: 26px;
  transform: translateY(-50%);
  max-width: 140px;
  white-space: nowrap;
}
#pod-nord .pod-timer-pill.timer-pos-left {
  top: calc(50% + 52px);
}

.opp-north-cards-bay {
  position: absolute; top: 38px; 
  left: calc(50% + 104px);
  transform: translateY(-50%);
  width: auto; height: auto;
  background: transparent; border: none; border-radius: 0;
  display: flex; align-items: center; justify-content: flex-start;
  gap: 2px;
  z-index: 80; box-shadow: none;
  overflow: visible;
  max-width: calc(50% - 130px);
}
.opp-card-h-item {
  width: 44px; height: 62px; border-radius: 5px;
  box-shadow: none;
  margin-left: -26px; flex-shrink: 0; overflow: hidden;
}
.opp-card-h-item:first-child { margin-left: 0; }
.opp-card-h-item img { width: 100%; height: 100%; object-fit: cover; }

/* 2. MARIA (OVEST) — A Sinistra centrato verticalmente */
.seat-ovest-pos {
  position: absolute; left: 14px; top: 38%; transform: translateY(-50%);
  z-index: 110;
}
.opp-west-cards-bay {
  position: absolute; left: 14px; top: calc(38% + 54px); width: 68px; max-height: 180px;
  background: var(--bay-bg); border: 1.5px solid var(--bay-border);
  border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 80; box-shadow: inset 2px 0 6px rgba(0,0,0,0.4);
}
.opp-card-v-item {
  width: 60px; height: 36px; border-radius: 5px;
  box-shadow: none;
  margin-top: -14px; flex-shrink: 0; overflow: hidden;
}
.opp-card-v-item:first-child { margin-top: 0; }
.opp-card-v-item img { width: 100%; height: 100%; object-fit: cover; }

/* 3. GIGLIOLA (EST) — A Destra centrato verticalmente */
.seat-est-pos {
  position: absolute; right: 14px; top: 38%; transform: translateY(-50%);
  z-index: 110;
}
.opp-east-cards-bay {
  position: absolute; right: 14px; top: calc(38% + 54px); width: 68px; max-height: 180px;
  background: var(--bay-bg); border: 1.5px solid var(--bay-border);
  border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 80; box-shadow: inset -2px 0 6px rgba(0,0,0,0.4);
}

/* 4. AREA CENTRALE CALATE (NOI vs LORO) — Esattamente da prospetto test-2p.html */
.table-melds-container {
  position: absolute;
  left: 5%; right: 5%; top: 10%; bottom: 19%;
  display: flex; gap: 0.2%;
  z-index: 50;
}
.meld-side-box {
  flex: 1 1 0; min-width: 0; min-height: 0;
  border: 2px solid rgba(190, 235, 190, 0.85);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.06);
  padding: 4px 10px; overflow: hidden;
  display: flex; flex-direction: column;
  cursor: pointer; transition: border-color 0.2s, background 0.2s;
}
.meld-side-box:hover {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(190, 235, 190, 0.95);
}
.meld-side-header {
  display: none !important;
}
.melds-column-grid {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start;
  min-height: 80px; flex: 1;
}
.meld-column-pack {
  display: flex; flex-direction: column;
  width: 106px; min-width: 106px; cursor: pointer; position: relative;
}
.meld-column-pack:hover { transform: none; }
.meld-badge-type {
  font-family: var(--font, system-ui, sans-serif);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 1px 4px;
  border-radius: 4px;
  text-align: center;
  margin-bottom: 2px;
  line-height: 1.25;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
/* Burraco Sporco (con Jolly o Pinella): Arancione */
.meld-badge-type.sporco,
.meld-badge-type.semipulito {
  background: #ea580c;
  color: #ffffff;
}
/* Burraco Pulito (senza Jolly o Pinelle): Verde */
.meld-badge-type.pulito,
.meld-badge-type.nobile,
.meld-badge-type.reale {
  background: #16a34a;
  color: #ffffff;
}

.meld-card-item {
  width: 106px; height: 156px; border-radius: 8px;
  background: #ffffff; padding: 3px; box-sizing: border-box;
  border: 1px solid #000;
  overflow: hidden; box-shadow: none;
  flex-shrink: 0;
  transition: margin-bottom 0.35s cubic-bezier(0.25, 1, 0.5, 1), transform 0.25s ease;
}
.meld-card-item:last-child { margin-bottom: 0 !important; }
.meld-card-item img { width: 100%; height: 100%; object-fit: fill; border-radius: 5px; display: block; }

/* 5. CORSIA ORIZZONTALE (LANE) — Contenuta e allineata */
.table-action-lane {
  position: absolute;
  left: 96px; right: 96px;
  bottom: 174px; height: 96px;
  background: transparent;
  border: none;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px; z-index: 150;
  box-shadow: none;
  pointer-events: auto;
}
.lane-left-group { display: flex; align-items: center; gap: 16px; z-index: 210; }
.lane-count-arrow {
  background: linear-gradient(90deg, #64748b, #475569);
  border: 1.5px solid #94a3b8; border-radius: 6px;
  padding: 8px 14px; display: flex; align-items: center; gap: 6px;
  cursor: pointer; z-index: 210; user-select: none;
}
.lane-count-num { font: 900 1.35rem var(--font); color: #fff; pointer-events: none; }
.lane-arrow-icon { font-size: 1.05rem; color: #fbbf24; pointer-events: none; }

.deck-tallone-pile {
  position: relative; cursor: pointer; transition: filter 0.2s ease;
  z-index: 210; user-select: none;
}
.deck-tallone-pile:hover { transform: none; }
.tallone-img-card {
  width: 76px; height: 108px; border-radius: 8px;
  background: #ffffff; padding: 3px; box-sizing: border-box;
  border: 1px solid #000;
  overflow: hidden; pointer-events: none;
  box-shadow: none;
}
.tallone-img-card img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; display: block; pointer-events: none; }
.tallone-hand-indicator {
  position: absolute; bottom: -10px; right: -10px; font-size: 1.7rem;
  filter: drop-shadow(0 2px 4px #000); pointer-events: none;
}

.deck-scarti-pile {
  position: relative; cursor: pointer; display: flex; align-items: center;
  transition: filter 0.2s ease; z-index: 210; user-select: none;
}
/* Linea guida sotto gli scarti disattivata definitivamente */
#discard-guide-line {
  display: none !important;
}
.deck-scarti-pile:hover {
  transform: none;
}
/* Scarti in ORIZZONTALE per recuperare spazio: contenitore landscape,
   carta ruotata di 90 gradi dentro */
.scarti-card-face {
  width: 120px; height: 84px; border-radius: 8px;
  background: #ffffff; padding: 3px; box-sizing: border-box;
  border: 1px solid #000;
  box-shadow: none;
  overflow: hidden; margin: 0; pointer-events: none;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.scarti-card-face img { width: 78px; height: 112px; object-fit: fill; border-radius: 5px; display: block; pointer-events: none; flex-shrink: 0; transform: rotate(90deg); }
/* Carta scarti bloccata per obbligo calata: evidenziata ma ferma sul posto */
.scarti-card-face.scarti-pending {
  outline: 3px solid #ffd700;
  outline-offset: 2px;
}
.scarti-empty-box {
  width: 120px; height: 84px; border-radius: 8px;
  border: 2px dashed rgba(255,255,255,0.4);
  display: flex; align-items: center; justify-content: center;
  font: 800 0.88rem var(--font); color: rgba(255,255,255,0.5);
  pointer-events: none;
}

.lane-right-group { display: flex; align-items: center; gap: 12px; }
.pozzi-card-stack { position: relative; display: flex; align-items: center; }
.pozzo-single-deck {
  width: 76px; height: 108px; border-radius: 10px;
  background: #ffffff; padding: 2px; box-sizing: border-box;
  border: 4px solid #ffffff;
  overflow: hidden;
  box-shadow: none; margin-left: -38px;
}
.pozzo-single-deck:first-child { margin-left: 0; }
.pozzo-single-deck img { width: 100%; height: 100%; object-fit: cover; }

/* 6. ZONA INFERIORE: CONTROLLI A SINISTRA, MANO CARTE AL CENTRO, AVATAR SUD A DESTRA */
.player-bottom-area {
  position: absolute; left: 0; right: 0; bottom: 0; height: 172px;
  background: transparent; border-top: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; z-index: 160;
  box-shadow: none;
}

/* Sezione Sinistra: Ordinamento Scale / Tris UNIFORMATI + Banner Totali Noi */
.bottom-left-controls-section {
  display: flex; flex-direction: row; align-items: flex-start; gap: 8px; width: auto; flex-shrink: 0;
  margin-bottom: 6px; z-index: 200;
}
.bottom-score-pill {
  display: none !important;
}

.bottom-sort-icons { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }

.btn-sort-pro {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 84px !important;
  min-width: 84px !important;
  max-width: 84px !important;
  height: 32px !important;
  padding: 0 8px !important;
  border-radius: 7px;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.btn-sort-pro:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}
.btn-sort-pro:active {
  transform: translateY(0);
}

/* Pulsante Scale - Smeraldo Glassmorphism */
.btn-sort-scale {
  background: linear-gradient(180deg, #059669 0%, #047857 50%, #064e3b 100%);
  border: 1.5px solid #34d399;
  border-top-color: #6ee7b7;
  border-bottom-color: #022c22;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.4);
}
.btn-sort-scale:hover {
  box-shadow: 0 6px 18px rgba(5, 150, 105, 0.6), inset 0 1px 2px rgba(255,255,255,0.6);
}

/* Pulsante Tris - Zaffiro Glassmorphism */
.btn-sort-tris {
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 50%, #1e3a8a 100%);
  border: 1.5px solid #60a5fa;
  border-top-color: #93c5fd;
  border-bottom-color: #172554;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.4);
}
.btn-sort-tris:hover {
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.6), inset 0 1px 2px rgba(255,255,255,0.6);
}

.sort-text-bold {
  font: 900 0.82rem var(--font);
  color: #fff;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.sort-dir-arrow {
  font-size: 0.72rem;
  color: #fde047;
  transition: transform 0.25s ease;
}

/* Sezione Centro: MANO CARTE DEL GIOCATORE FLUIDA E SENZA SCOSSONI */
.player-cards-center-bay {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  position: relative; overflow: visible;
}

/* Pulsing highlight for Deck and Discards when it's Sud's turn to draw */
.is-pulse-draw {
  animation: pulse-deck-ring 1.3s infinite ease-in-out !important;
  border-radius: 10px;
}
@keyframes pulse-deck-ring {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); transform: scale(1.03); }
}

.bottom-hand-cards-spread {
  display: flex; justify-content: center; align-items: flex-end;
  height: 165px; overflow: visible; padding-bottom: 2px;
  position: relative;
}
.player-hand-card {
  width: 106px; height: 156px; border-radius: 9px;
  background: #ffffff; padding: 4px; box-sizing: border-box;
  border: 1px solid #000;
  box-shadow: none;
  cursor: pointer; flex-shrink: 0;
  position: relative; overflow: hidden;
  will-change: transform, box-shadow;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  user-select: none;
  -webkit-user-select: none;
}
.player-hand-card:hover {
  transform: none !important;
  box-shadow: none !important;
}
.player-hand-card.selected {
  transform: translateY(-30px) !important;
  box-shadow: none !important;
  z-index: 350 !important;
}
.player-hand-card.selected:hover {
  transform: translateY(-30px) !important;
}

/* Carta Appena Pescata: Naturale e Pulita */
.player-hand-card.just-drawn {
  transform: translateY(-8px);
  box-shadow: none;
  border: none;
}
.player-hand-card img { width: 100%; height: 100%; object-fit: fill; border-radius: 5px; pointer-events: none; display: block; }

/* Sezione Destra: Avatar Sud + Emote & Menu */
.bottom-right-player-section {
  width: 160px; flex-shrink: 0;
  display: flex; justify-content: flex-end; align-items: center;
  gap: 12px;
}
.bottom-actions-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
.btn-table-emotes-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.85);
  border: 1.5px solid #fde047;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-table-emotes-icon:hover {
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(253, 224, 71, 0.7);
}
.btn-table-emotes-icon .btn-pill-label {
  display: none;
}
.btn-menu-pill {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.85);
  border: 1.5px solid #8fad6a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-menu-pill:hover {
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(200, 224, 180, 0.7);
}
.btn-menu-pill .btn-pill-label {
  display: none;
}


/* ========================================================================
   ANIMAZIONI E CERIMONIA DISTRIBUZIONE CARTE & MAZZIERE
   ======================================================================== */

.initial-deal-overlay {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 500;
}
.initial-deal-overlay.hidden { display: none !important; }

.initial-deal-arena {
  position: relative; width: 560px; height: 340px;
  display: flex; align-items: center; justify-content: center;
}

.cutting-center-deck {
  width: 82px; height: 118px;
  position: relative; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.8), -4px 4px 0 #334155, -8px 8px 0 #1e293b;
}
.cutting-center-deck img { width: 100%; height: 100%; border-radius: 8px; object-fit: cover; }
.cutting-center-deck.shuffling {
  animation: deckShuffleShake 0.12s infinite alternate;
}
@keyframes deckShuffleShake {
  0% { transform: scale(1.06) rotate(-3deg) translate(-3px, -3px); }
  100% { transform: scale(1.06) rotate(3deg) translate(3px, 3px); }
}

.cut-card-spot {
  position: absolute; display: flex; flex-direction: column; align-items: center;
  gap: 5px; opacity: 0; transform: scale(0.4);
  transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.cut-card-spot.visible { opacity: 1; transform: scale(1); }
.cut-card-spot.winner .cut-card-display {
  box-shadow: none;
  transform: scale(1.08);
}

.cut-card-spot.pos-sud   { bottom: 4%; left: 50%; transform: translate(-50%, 0) scale(0.4); }
.cut-card-spot.pos-sud.visible { transform: translate(-50%, 0) scale(1); }
.cut-card-spot.pos-nord  { top: 4%; left: 50%; transform: translate(-50%, 0) scale(0.4); }
.cut-card-spot.pos-nord.visible { transform: translate(-50%, 0) scale(1); }
.cut-card-spot.pos-ovest { left: 4%; top: 50%; transform: translate(0, -50%) scale(0.4); }
.cut-card-spot.pos-ovest.visible { transform: translate(0, -50%) scale(1); }
.cut-card-spot.pos-est   { right: 4%; top: 50%; transform: translate(0, -50%) scale(0.4); }
.cut-card-spot.pos-est.visible { transform: translate(0, -50%) scale(1); }

.cut-card-display {
  width: 76px; height: 110px; border-radius: 7px;
  background: #ffffff; padding: 3px; box-sizing: border-box;
  box-shadow: none; overflow: hidden;
  transition: transform 0.3s;
}
.cut-card-display img { width: 100%; height: 100%; object-fit: fill; border-radius: 4px; display: block; }
.cut-player-badge {
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid #94a3b8; border-radius: 99px;
  padding: 2px 10px; font: 900 0.72rem var(--font); color: #fff;
  white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis;
}
.cut-card-spot.winner .cut-player-badge {
  background: linear-gradient(135deg, #fef08a, var(--gold));
  border-color: #fde047; color: #000; font-weight: 900;
}

/* Modale Scelta del Mazziere */
.mazziere-prompt-overlay {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: 550;
}
.mazziere-prompt-overlay.hidden { display: none !important; }

.mazziere-modal-box {
  background: radial-gradient(ellipse at 50% 0%, #1e3a29 0%, #0d2818 100%);
  border: 2.5px solid var(--gold); border-radius: 20px;
  padding: 26px 32px; width: 90%; max-width: 480px;
  text-align: center; box-shadow: 0 0 35px rgba(245,197,24,0.5);
  animation: modalPop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalPop {
  0% { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.mazziere-modal-box h3 {
  font: 900 1.35rem var(--font); color: var(--gold);
  margin-bottom: 8px; text-shadow: 0 2px 4px #000;
}
.mazziere-modal-box p {
  font: 700 0.88rem var(--font); color: #e2e8f0;
  line-height: 1.4; margin-bottom: 20px;
}
.mazziere-btn-group {
  display: flex; gap: 12px; justify-content: center;
}
.btn-mazziere-action {
  flex: 1; padding: 12px 14px; border-radius: 12px;
  font: 900 0.86rem var(--font); cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.btn-mazziere-action:hover { transform: none; filter: brightness(1.1); }
.btn-mazziere-action.shuffle {
  background: linear-gradient(135deg, #38bdf8, #0284c7);
  border: 2px solid #7dd3fc; color: #fff;
}
.btn-mazziere-action.deal {
  background: linear-gradient(135deg, #fef08a, var(--gold));
  border: 2px solid #fde047; color: #000;
}

.burraco-toast-banner {
  position: absolute; top: auto; bottom: 178px; left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.94);
  border: 1.5px solid #fbbf24;
  border-radius: 99px; padding: 7px 22px;
  font: 900 0.88rem var(--font); color: #fef08a;
  box-shadow: 0 4px 18px rgba(0,0,0,0.65);
  pointer-events: none; z-index: 450;
  backdrop-filter: blur(6px);
  animation: toastBannerIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes toastBannerIn {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Modale & Banner */
.game-banner {
  position: fixed; top: 40%; left: 50%;
  transform: translate(-50%,-50%);
  background: rgba(10,20,12,0.96);
  border: 2px solid var(--gold);
  border-radius: 99px; padding: 12px 36px;
  font: 900 1.4rem var(--font); color: var(--gold);
  box-shadow: 0 0 40px rgba(245,197,24,0.8);
  pointer-events: none; z-index: 600;
  animation: bannerAnim 1.4s ease-out forwards;
}
@keyframes bannerAnim {
  0% { opacity:0; transform:translate(-50%,-50%) scale(0.5); }
  20% { opacity:1; transform:translate(-50%,-50%) scale(1.06); }
  80% { opacity:1; transform:translate(-50%,-50%) scale(1); }
  100% { opacity:0; transform:translate(-50%,-70%) scale(0.9); }
}

.burraco-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.88); backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  z-index: 700; padding: 16px;
}
.burraco-modal.hidden { display: none !important; }
.modal-box {
  background: linear-gradient(135deg, #0f172a 0%, #020617 100%);
  border: 2px solid var(--gold); border-radius: 20px;
  padding: 20px 24px; width: 100%; max-width: 540px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0,0,0,0.9), 0 0 30px rgba(245,197,24,0.4);
}
.modal-box h2 { font: 900 1.25rem var(--font); color: var(--gold); text-align:center; margin-bottom:12px; }
.modal-field { margin-bottom: 10px; }
.modal-field label { font: 800 0.78rem var(--font); color: #94a3b8; display:block; margin-bottom:4px; }
.modal-field input[type="text"], .modal-field input[type="password"], .modal-field select {
  width: 100%; background: rgba(0,0,0,0.6);
  border: 1.5px solid rgba(255,255,255,0.18); border-radius: 8px;
  padding: 8px 12px; color: #fff; font: 700 0.85rem var(--font); outline:none;
}
.modal-field select { background: #1e293b; }

.modal-toggle-row {
  display: flex; align-items: center; gap: 8px;
  background: rgba(30,41,59,0.6); border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 8px; padding: 8px 12px; cursor: pointer;
}
.modal-toggle-row input[type="checkbox"] {
  width: 18px; height: 18px; cursor: pointer; accent-color: var(--gold);
}
.modal-sub-field.hidden { display: none !important; }

/* Friends Invite Roster */
.friends-invite-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 140px; overflow-y: auto;
  background: rgba(0,0,0,0.5); border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 10px; padding: 6px 8px;
}
.friend-invite-card {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(30,41,59,0.7); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; padding: 5px 8px; cursor: pointer;
  transition: all 0.18s;
}
.friend-invite-card:hover { border-color: rgba(245,197,24,0.6); }
.friend-invite-card.invited {
  background: rgba(16, 185, 129, 0.2);
  border-color: #34d399;
}
.friend-info-group { display: flex; align-items: center; gap: 8px; }
.friend-avatar-mini {
  width: 32px; height: 32px; border-radius: 6px;
  border: 1.5px solid #93c5fd; overflow: hidden;
}
.friend-avatar-mini img { width: 100%; height: 100%; object-fit: cover; }
.friend-name-text { font: 900 0.78rem var(--font); color: #fff; }
.friend-status-dot { font-size: 0.68rem; color: #4ade80; font-weight: 700; }
.btn-invite-pill {
  background: rgba(30,41,59,0.8); border: 1px solid rgba(255,255,255,0.2);
  border-radius: 99px; padding: 3px 10px;
  font: 900 0.68rem var(--font); color: #e2e8f0;
  cursor: pointer; transition: all 0.18s;
}
.friend-invite-card.invited .btn-invite-pill {
  background: linear-gradient(135deg, #10b981, #059669);
  border-color: #6ee7b7; color: #fff;
}

.modal-buttons { display:flex; gap:10px; margin-top:14px; }
.btn-modal-cancel {
  flex:1; padding:9px; background: rgba(30,41,59,0.8);
  border: 1.5px solid rgba(255,255,255,0.2); color:#cbd5e1;
  border-radius:8px; font: 800 0.82rem var(--font); cursor:pointer;
}
.btn-modal-confirm {
  flex:2; padding:9px;
  background: linear-gradient(135deg,#fef08a,var(--gold));
  border: 2px solid #fde047; color:#000;
  border-radius:8px; font: 900 0.85rem var(--font); cursor:pointer;
}

/* =========================================================================
   RESPONSIVE DESIGN PER MOBILE (SMARTPHONE E TABLET VERTICALE / ORIZZONTALE)
   ========================================================================= */

@media (max-width: 900px) {
  /* LOBBY MOBILE 100% ADATTIVA & UNIFORME */
  .lobby-header-container {
    width: 100%;
    max-width: 100vw;
  }
  .lobby-top-system-bar {
    min-height: 38px;
    padding: 2px 6px;
    gap: 4px;
  }
  .lobby-nav-btn {
    height: 28px;
    padding: 0 8px;
    font-size: 0.68rem;
    gap: 4px;
    border-radius: 6px;
  }
  .lobby-nav-btn .btn-icon {
    font-size: 0.8rem;
  }
  .lobby-online-badge {
    font-size: 0.62rem;
    padding: 2px 6px;
  }

  .lobby-modes-strip {
    grid-template-columns: repeat(5, 1fr);
    gap: 3px;
    padding: 2px 4px 3px 4px;
    width: 100%;
  }
  .mode-tab {
    height: 30px;
    padding: 1px 3px;
    border-radius: 5px;
  }
  .mode-tab-title {
    font-size: 0.62rem;
  }
  .mode-tab-top-val {
    font-size: 0.56rem;
  }
  .mode-tab .count {
    font-size: 0.6rem;
    padding: 1px 3px;
  }

  .lobby-sidebar {
    display: none !important;
  }
  .lobby-main-area {
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
  }
  .tables-scroll {
    width: 100%;
    max-width: 100vw;
    padding: 6px 8px 40px 8px;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
  }
  .tables-three-columns {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  .table-entry-card {
    height: auto;
    min-height: fit-content;
    max-height: none;
    padding: 8px 10px;
    width: 100%;
    box-sizing: border-box;
    gap: 6px;
    border-radius: 12px;
  }
  .card-table-head {
    gap: 4px;
    padding-bottom: 4px;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .card-table-name {
    font-size: 0.82rem;
  }
  .card-table-mode-pill {
    font-size: 0.6rem;
    padding: 1px 5px;
  }
  .card-table-badges {
    gap: 3px;
  }
  .rule-chip-gold, .rule-chip-blue, .rule-chip-vip, .rule-chip-nochat {
    font-size: 0.58rem;
    padding: 1px 4px;
  }
  .btn-watch-small {
    font-size: 0.6rem;
    padding: 2px 5px;
  }
  .card-table-arena-body {
    height: 84px;
    min-height: 84px;
    max-height: 84px;
    padding: 4px 8px;
    box-sizing: border-box;
    width: 100%;
  }
  .arena-seats-flow.flow-2v2 {
    gap: 6px;
    justify-content: space-between;
  }
  .arena-seats-flow.flow-1v1 {
    gap: 24px;
    padding: 0 14px;
    justify-content: space-around;
  }
  .arena-mini-table {
    width: 40px;
    height: 28px;
    margin: 0 2px;
  }
  .mini-table-felt {
    width: 14px;
    height: 18px;
  }
  .lobby-avatar-frame,
  .empty-chair-slot {
    width: 46px;
    height: 46px;
    border-radius: 10px;
  }
  .chair-icon-3d {
    width: 22px;
    height: 22px;
  }
  .chair-sit-tag {
    font-size: 0.52rem;
    padding: 0 4px;
  }
  .lobby-avatar-crown {
    font-size: 0.8rem;
    top: -6px;
    right: -4px;
  }
  .lobby-avatar-tag {
    max-width: 64px;
    font-size: 0.6rem;
    padding: 1px 4px;
  /* Regole tavolo rimosse: la visualizzazione del tavolo segue esclusivamente il modello test-2p */
}

@media (max-width: 480px) {
  .table-entry-card {
    height: 116px;
  }
  .table-scene-container {
    width: 122px;
    min-width: 122px;
  }
  .lobby-avatar-frame {
    width: 33px;
    height: 33px;
  }
  .empty-chair-slot {
    width: 33px;
    height: 33px;
  }
  .chair-icon-3d {
    width: 24px;
    height: 24px;
  }
  .chair-sit-tag {
    font-size: 0.44rem;
  }
  .lobby-avatar-tag {
    font-size: 0.46rem;
    max-width: 38px;
  }
  .table-scene-container.is-1vs1 .seat-spot.top {
    left: 16px;
  }
  .table-scene-container.is-1vs1 .seat-spot.bottom {
    right: 16px;
  }

}
}
/* [FIX v6.2] La graffa di chiusura di questo @media (max-width: 900px) mancava:
   tutto il resto del foglio (dal Blocco v5.0 "Tavolo completo" in poi) restava
   annidato dentro la media query e quindi non valeva su schermi > 900px. */

/* Animazione Volo Pesca Carta dal Mazzo */
.flying-draw-card {
  position: fixed;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.85), 0 0 18px rgba(255, 215, 0, 0.5);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  z-index: 99999;
}

.flying-draw-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =====================================================================
   CLASSIFICHE GENERALI & MENSILI BURRACO & PODIO 3D VIRTUAL
   ===================================================================== */
.btn-lobby-leaderboards {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 60%, #b45309 100%);
  border: 1.5px solid #fde047;
  border-radius: 99px;
  color: #ffffff;
  font: 900 0.82rem var(--font);
  padding: 6px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.6);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.btn-lobby-leaderboards:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.6);
}

.leaderboards-modal-window {
  background: radial-gradient(circle at 50% 0%, #064e3b 0%, #022c22 45%, #051b14 100%);
  border: 2px solid #34d399;
  border-radius: 20px;
  width: min(920px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.9), 0 0 35px rgba(16, 185, 129, 0.35);
  position: relative;
  overflow: hidden;
  color: #ffffff;
}

.btn-leaderboards-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  transition: all 0.2s ease;
}
.btn-leaderboards-close:hover {
  background: #ef4444;
  border-color: #f87171;
  transform: scale(1.08);
}

.leaderboards-body-content {
  overflow-y: auto;
  padding: 16px 20px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Header Box Classifiche */
.lb-header-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(52, 211, 153, 0.25);
  padding-bottom: 14px;
}
.lb-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.lb-trophy-anim {
  font-size: 2.2rem;
  animation: bounce-trophy 2s infinite ease-in-out;
}
@keyframes bounce-trophy {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.06); }
}
.lb-main-title {
  margin: 0;
  font: 900 1.45rem var(--font);
  letter-spacing: 1px;
  background: linear-gradient(180deg, #fef08a 0%, #f59e0b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 10px rgba(245, 158, 11, 0.3);
}
.lb-period-tag {
  font-size: 0.76rem;
  color: #a7f3d0;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Tabs Modalità Burraco */
.lb-modes-tabs-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.lb-mode-btn {
  background: rgba(15, 23, 42, 0.65);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 7px 14px;
  color: #cbd5e1;
  font: 800 0.84rem var(--font);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}
.lb-mode-btn:hover {
  background: rgba(16, 185, 129, 0.25);
  border-color: #34d399;
  color: #fff;
}
.lb-mode-btn.active {
  background: linear-gradient(180deg, #059669 0%, #047857 100%);
  border-color: #34d399;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

/* Selettore Periodo */
.lb-period-switcher {
  display: flex;
  background: rgba(0, 0, 0, 0.4);
  padding: 3px;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  gap: 4px;
}
.lb-period-btn {
  background: transparent;
  border: none;
  border-radius: 99px;
  padding: 5px 16px;
  color: #94a3b8;
  font: 800 0.78rem var(--font);
  cursor: pointer;
  transition: all 0.2s ease;
}
.lb-period-btn.active {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* =====================================================================
   PODIO 3D DEI PRIMI 3 CLASSIFICATI CON ONORE AL 1°
   ===================================================================== */
.lb-podium-section {
  display: flex;
  justify-content: center;
  padding: 10px 0 6px 0;
}
.lb-podium-container {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 680px;
}
.podium-pillar-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 200px;
  cursor: pointer;
  position: relative;
  transition: transform 0.22s ease;
}
.podium-pillar-box:hover {
  transform: translateY(-3px);
}

.podium-avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 8px;
  position: relative;
}
.podium-rank-badge {
  font: 900 0.74rem var(--font);
  padding: 2px 8px;
  border-radius: 99px;
  margin-bottom: 4px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.podium-rank-badge.gold {
  background: linear-gradient(180deg, #ffd700 0%, #b45309 100%);
  border: 1px solid #fef08a;
  color: #ffffff;
}
.podium-rank-badge.silver {
  background: linear-gradient(180deg, #e2e8f0 0%, #64748b 100%);
  border: 1px solid #ffffff;
  color: #ffffff;
}
.podium-rank-badge.bronze {
  background: linear-gradient(180deg, #d97706 0%, #78350f 100%);
  border: 1px solid #fcd34d;
  color: #ffffff;
}

.podium-avatar-frame {
  width: 58px;
  height: 58px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
  background: #0f172a;
}
.podium-avatar-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.podium-avatar-frame.is-vip {
  border-color: #fde047;
}

/* ONORE AL 1° CLASSIFICATO (CHAMPION) */
.podium-avatar-wrap.main-champion .champion-gold-frame {
  width: 76px;
  height: 76px;
  border: 3px solid #ffd700;
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.8), 0 8px 24px rgba(0, 0, 0, 0.7);
  animation: champion-glow 2.5s infinite alternate ease-in-out;
}
@keyframes champion-glow {
  0% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.6); }
  100% { box-shadow: 0 0 35px rgba(255, 215, 0, 1), 0 0 50px rgba(245, 158, 11, 0.6); }
}

.podium-first-honor-halo {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 110px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.35) 0%, rgba(255, 215, 0, 0) 70%);
  pointer-events: none;
  border-radius: 50%;
}
.podium-laurel-wreath {
  font-size: 1.35rem;
  margin-bottom: -2px;
  filter: drop-shadow(0 2px 8px rgba(255, 215, 0, 0.7));
}
.honor-banner-ribbon {
  background: linear-gradient(180deg, #ffd700 0%, #b45309 100%);
  color: #ffffff;
  font: 900 0.58rem var(--font);
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 99px;
  margin-top: 3px;
  border: 1px solid #fef08a;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

.podium-user-name {
  font: 900 0.84rem var(--font);
  color: #ffffff;
  margin-top: 4px;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.podium-user-name.champion-name {
  font-size: 0.98rem;
  color: #fef08a;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}
.podium-club-name {
  font-size: 0.64rem;
  color: #94a3b8;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Pedane 3D */
.podium-pillar-stand {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 12px 12px 0 0;
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.4), 0 8px 20px rgba(0, 0, 0, 0.6);
  padding: 10px 6px;
}
.gold-stand {
  height: 98px;
  background: linear-gradient(180deg, #f59e0b 0%, #b45309 60%, #78350f 100%);
  border: 2px solid #ffd700;
}
.silver-stand {
  height: 76px;
  background: linear-gradient(180deg, #94a3b8 0%, #475569 60%, #334155 100%);
  border: 2px solid #cbd5e1;
}
.bronze-stand {
  height: 62px;
  background: linear-gradient(180deg, #b45309 0%, #78350f 60%, #451a03 100%);
  border: 2px solid #f59e0b;
}

.pillar-score {
  font: 900 0.88rem var(--font);
  color: #ffffff;
}
.pillar-score.gold-score {
  font-size: 1.05rem;
  color: #fef08a;
}
.pillar-sub {
  font-size: 0.66rem;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 2px;
}

/* =====================================================================
   CARD FISSA: LA TUA POSIZIONE
   ===================================================================== */
.lb-your-position-card {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.25) 0%, rgba(5, 150, 105, 0.4) 50%, rgba(16, 185, 129, 0.25) 100%);
  border: 1.5px solid #34d399;
  border-radius: 14px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 16px rgba(16, 185, 129, 0.2);
  transition: all 0.2s ease;
}
.lb-your-position-card:hover {
  background: rgba(16, 185, 129, 0.45);
  border-color: #6ee7b7;
}

.your-pos-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #0f172a;
  border: 1.5px solid #34d399;
  padding: 4px 10px;
  border-radius: 8px;
}
.your-pos-num {
  font: 900 1.15rem var(--font);
  color: #34d399;
}
.your-pos-sub {
  font-size: 0.52rem;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.5px;
}

.your-pos-user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.your-pos-avatar-frame {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid #34d399;
  background: #0f172a;
}
.your-pos-avatar-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.your-pos-name {
  font: 900 0.95rem var(--font);
  color: #ffffff;
}
.your-pos-name span {
  font-size: 0.74rem;
  color: #34d399;
}
.your-pos-club {
  font-size: 0.7rem;
  color: #cbd5e1;
}

.your-pos-stats {
  display: flex;
  gap: 16px;
}
.stat-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stat-label {
  font-size: 0.54rem;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.5px;
}
.stat-val {
  font: 900 0.86rem var(--font);
  color: #ffffff;
}
.stat-val.gold { color: #fde047; }
.stat-val.green { color: #4ade80; }

/* =====================================================================
   TABELLA CLASSIFICA COMPLETA
   ===================================================================== */
.lb-table-container {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  overflow-x: auto;
}
.lb-ranks-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.lb-ranks-table th {
  background: rgba(15, 23, 42, 0.8);
  color: #94a3b8;
  font: 800 0.68rem var(--font);
  letter-spacing: 0.5px;
  padding: 10px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  text-transform: uppercase;
}
.lb-ranks-table td {
  padding: 8px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: middle;
}
.lb-ranks-table tr {
  cursor: pointer;
  transition: background 0.15s ease;
}
.lb-ranks-table tr:hover {
  background: rgba(16, 185, 129, 0.15);
}
.lb-ranks-table tr.lb-row-you {
  background: rgba(16, 185, 129, 0.28);
}

.table-rank-pill {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 2px 6px;
  font: 900 0.76rem var(--font);
  color: #cbd5e1;
}
.table-rank-pill.top5 {
  background: rgba(245, 158, 11, 0.2);
  border-color: #f59e0b;
  color: #fde047;
}

.table-player-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.table-avatar-mini {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: #0f172a;
  flex-shrink: 0;
}
.table-avatar-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.table-avatar-mini.crown {
  border-color: #fde047;
}

.table-player-meta {
  display: flex;
  flex-direction: column;
}
.table-player-name {
  font: 800 0.82rem var(--font);
  color: #ffffff;
}
.tag-you {
  color: #34d399;
  font-size: 0.7rem;
}
.table-player-club {
  font-size: 0.64rem;
  color: #94a3b8;
}

.table-cell-points strong {
  color: #fde047;
  font-size: 0.88rem;
}
.winrate-badge {
  font: 900 0.74rem var(--font);
  padding: 2px 6px;
  border-radius: 4px;
}
.winrate-badge.high {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.4);
}
.winrate-badge.normal {
  background: rgba(148, 163, 184, 0.2);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.3);
}

.btn-table-view-profile {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  color: #ffffff;
  font: 800 0.68rem var(--font);
  padding: 4px 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-table-view-profile:hover {
  background: #059669;
  border-color: #34d399;
}

/* =====================================================================
   SCHEDA PROFILO GIOCATORE: BANNER AMPIO A SINISTRA SOPRA AI TAVOLI
   ==================================================================== */
#burraco-player-card-modal.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(3px);
  z-index: 999990;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0;
  margin: 0;
}

.player-card-modal-window {
  background: transparent;
  width: min(500px, 94vw);
  max-height: calc(100vh - 100px);
  position: fixed;
  top: 92px;
  left: 20px;
  z-index: 999999;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  animation: slideInFromLeft 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.9), 0 0 40px rgba(16, 185, 129, 0.4);
  border-radius: 24px;
}

@keyframes slideInFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-40px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@media (max-width: 768px) {
  .player-card-modal-window {
    top: 80px;
    left: 8px;
    right: 8px;
    width: calc(100vw - 16px);
    max-height: calc(100vh - 90px);
  }

  /* Elimina paginazione AVANTI / INDIETRO su mobile */
  .lobby-pagination-footer,
  #lobby-pagination-bar {
    display: none !important;
  }

  /* Area tavoli a scorrimento verticale continuo su mobile */
  .lobby-tables-area {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 40px !important;
    height: auto !important;
    max-height: calc(100vh - 120px) !important;
  }

  .tables-three-columns,
  #lobby-tables-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    overflow-y: visible !important;
    padding: 8px 10px 30px 10px !important;
  }

  .table-entry-card {
    width: 100% !important;
    min-width: 100% !important;
    margin-bottom: 4px !important;
  }
}

.card-classic-window {
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
  border: 1.5px solid rgba(56, 189, 248, 0.35);
  border-radius: 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.9), 0 0 35px rgba(14, 165, 233, 0.15);
  position: relative;
  overflow: hidden;
  color: #ffffff;
  padding: 14px;
  gap: 12px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.card-classic-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.card-classic-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-classic-title {
  margin: 0;
  font: 800 1.05rem var(--font);
  color: #38bdf8;
  letter-spacing: 0.5px;
}
.btn-card-close {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: #cbd5e1;
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.btn-card-close:hover {
  background: #ef4444;
  border-color: #f87171;
  color: #ffffff;
}

/* User Hero */
.card-user-hero {
  display: flex;
  gap: 14px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px;
}
.card-avatar-col {
  flex-shrink: 0;
}
.card-main-avatar-frame {
  width: 84px;
  height: 84px;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid #38bdf8;
  position: relative;
  background: #0f172a;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.card-main-avatar-frame.is-vip {
  border-color: #f59e0b;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.4);
}
.card-main-avatar-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-details-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.card-name-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}
.card-user-nickname {
  font: 800 1.15rem var(--font);
  color: #ffffff;
}
.card-user-location {
  font-size: 0.74rem;
  color: #94a3b8;
  font-weight: 600;
}
.card-club-row {
  font: 700 0.8rem var(--font);
  color: #38bdf8;
}
.card-bio-quote {
  font-size: 0.72rem;
  color: #fef08a;
  font-style: italic;
  background: rgba(0, 0, 0, 0.3);
  padding: 3px 8px;
  border-radius: 6px;
  margin-top: 2px;
}

.card-badges-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.badge-vip-pill {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
  font: 800 0.66rem var(--font);
  padding: 2px 7px;
  border-radius: 6px;
  letter-spacing: 0.3px;
}
.badge-standard-pill {
  background: rgba(148, 163, 184, 0.2);
  color: #94a3b8;
  font: 800 0.66rem var(--font);
  padding: 2px 7px;
  border-radius: 6px;
  letter-spacing: 0.3px;
}
.badge-level-pill {
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fde047;
  font: 800 0.66rem var(--font);
  padding: 2px 7px;
  border-radius: 6px;
  letter-spacing: 0.3px;
}
.btn-gift-inline {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border: 1px solid #fde047;
  border-radius: 6px;
  color: #ffffff;
  font: 800 0.64rem var(--font);
  padding: 2px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.35);
  transition: all 0.2s ease;
  letter-spacing: 0.3px;
  margin-left: auto;
}
.btn-gift-inline:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.card-meta-dates {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}
.date-line {
  font-size: 0.68rem;
  color: #94a3b8;
}
.date-line strong {
  color: #e2e8f0;
}
.date-line strong.vip-text {
  color: #fde047;
}

/* Deck Statistiche Modalità (Globale vs Mensile) */
.card-stats-deck-box {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stats-carousel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.btn-carousel-arrow {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.btn-carousel-arrow:hover {
  background: #0284c7;
  border-color: #38bdf8;
}
.mode-name-badge {
  font: 800 0.96rem var(--font);
  color: #ffffff;
  letter-spacing: 0.3px;
}

.carousel-dots-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 1px 0 4px 0;
}
.carousel-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: all 0.2s ease;
}
.carousel-dot.active {
  background: #38bdf8;
  transform: scale(1.3);
  box-shadow: 0 0 6px #38bdf8;
}

/* Doppia Colonna Statistiche */
.stats-double-column-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.stat-column-pane {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.column-header-tag {
  font: 800 0.78rem var(--font);
  color: #38bdf8;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(56, 189, 248, 0.2);
  padding-bottom: 4px;
  margin-bottom: 4px;
}
.stat-kv-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0;
  font-size: 0.78rem;
}
.kv-label {
  color: #94a3b8;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.3px;
}
.kv-val {
  font-weight: 800;
  color: #ffffff;
}
.kv-val.rank-val { color: #fde047; font-size: 0.85rem; }
.kv-val.gold-val { color: #fbbf24; font-size: 0.85rem; }
.kv-val.green-val { color: #34d399; font-size: 0.85rem; }
.kv-val.red-val { color: #f87171; font-size: 0.85rem; }

/* Footer con MI PIACE e MONETE */
.card-footer-strip {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.footer-stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-stat-item.like-btn-item {
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
}
.footer-stat-item.like-btn-item:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
  transform: translateY(-1px);
}
.footer-stat-icon {
  font-size: 1.15rem;
}
.footer-stat-label {
  color: #cbd5e1;
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.3px;
}
.footer-stat-val {
  color: #ffffff;
  font-weight: 900;
  font-size: 0.95rem;
}
.footer-stat-val.gold-val {
  color: #fbbf24;
}
.footer-stat-divider {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.15);
}

/* =====================================================================
   RESPONSIVE MODALS
   ===================================================================== */
@media (max-width: 600px) {
  .leaderboards-modal-window {
    width: 96vw;
    max-height: 94vh;
    border-radius: 14px;
  }
  .leaderboards-body-content {
    padding: 12px 10px 18px 10px;
    gap: 12px;
  }
  .lb-podium-container {
    gap: 8px;
  }
  .podium-avatar-frame {
    width: 46px;
    height: 46px;
  }
  .podium-avatar-wrap.main-champion .champion-gold-frame {
    width: 60px;
    height: 60px;
  }
  .gold-stand { height: 82px; }
  .silver-stand { height: 64px; }
  .bronze-stand { height: 52px; }

  .your-pos-stats {
    gap: 8px;
  }
}

/* =====================================================================
   SPLASH SCREEN PROFESSIONALE BURRACO
   ===================================================================== */
.burraco-splash-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeInSplash 0.35s ease;
}
@keyframes fadeInSplash {
  from { opacity: 0; }
  to { opacity: 1; }
}

.burraco-splash-card {
  background: radial-gradient(circle at 50% 10%, #064e3b 0%, #022c22 55%, #03140e 100%);
  border: 2.5px solid #ffd700;
  border-radius: 28px;
  width: min(440px, 92vw);
  padding: 28px 20px 24px 20px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.95), 0 0 40px rgba(52, 211, 153, 0.35), 0 0 20px rgba(245, 197, 24, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  animation: scaleInSplash 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes scaleInSplash {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* 1. SCRITTA BURRACO ONLINE IN ALTO */
.splash-top-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.splash-main-title {
  margin: 0;
  font: 900 2.1rem var(--font);
  letter-spacing: 2.5px;
  background: linear-gradient(180deg, #fffbeb 0%, #fef08a 40%, #f59e0b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(245, 158, 11, 0.45));
}
.splash-tagline {
  color: #a7f3d0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: rgba(6, 78, 59, 0.6);
  border: 1px solid rgba(52, 211, 153, 0.4);
  padding: 3px 12px;
  border-radius: 99px;
}

/* 2. ICONA TONDA RADDOPPIATA & PROFESSIONALE */
.splash-icon-showcase {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 6px 0;
}
.splash-icon-halo {
  position: absolute;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.4) 0%, rgba(245, 158, 11, 0.2) 50%, transparent 70%);
  filter: blur(12px);
  animation: pulseHalo 2.5s ease-in-out infinite alternate;
}
@keyframes pulseHalo {
  0% { transform: scale(0.95); opacity: 0.6; }
  100% { transform: scale(1.1); opacity: 1; }
}
.splash-circular-badge {
  position: relative;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.8), 0 0 25px rgba(245, 197, 24, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.3s ease;
}
.splash-circular-badge:hover {
  transform: scale(1.04);
}
.splash-emblem-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 3. SCRITTA ITOCCHI GAMES SOTTO */
.splash-bottom-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.splash-brand-heading {
  font: 900 1.35rem var(--font);
  letter-spacing: 2px;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}
.splash-brand-sub {
  margin: 0 0 10px 0;
  font-size: 0.78rem;
  color: #94a3b8;
  font-weight: 700;
}
.btn-splash-enter {
  background: linear-gradient(180deg, #fef08a 0%, #f59e0b 50%, #d97706 100%);
  border: 2px solid #fffbeb;
  border-radius: 99px;
  color: #042111;
  font: 900 1.15rem var(--font);
  letter-spacing: 1px;
  padding: 13px 42px;
  cursor: pointer;
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.8);
  transition: all 0.2s ease;
  width: 100%;
  max-width: 280px;
}
.btn-splash-enter:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 12px 30px rgba(245, 158, 11, 0.85);
  filter: brightness(1.08);
}



/* =========================================================================
   NUOVE DINAMICHE: SCARTO A DESTRA, CARTE MORBIDE, CHIUSURA COPERTA, SPOSTAMENTO
   ========================================================================= */

/* Banner Corsia Mazzo & Scarti Cliccabile per Scartare */
.table-action-lane {
  cursor: pointer;
}

/* 2. Annuncio Chiusura Partita Festoso al Centro */
.table-closure-announcement {
  position: absolute;
  top: 26%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  pointer-events: none;
  animation: drop-closure-ribbon 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes drop-closure-ribbon {
  0% { opacity: 0; transform: translate(-50%, -30px) scale(0.85); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
.closure-ribbon {
  background: linear-gradient(135deg, #b45309 0%, #d97706 50%, #f59e0b 100%);
  border: 2px solid #fef08a;
  border-radius: 99px;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 0 35px rgba(245, 158, 11, 0.8);
  font: 900 1.15rem var(--font);
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.7);
  letter-spacing: 1px;
}
.closure-star { font-size: 1.3rem; }

/* 3. Carta di Chiusura Coperta sugli Scarti */
.scarti-card-face.closing-card-facedown {
  border: 2.5px solid #ffd700 !important;
  box-shadow: 0 0 20px rgba(245, 197, 24, 0.9), 0 8px 20px rgba(0,0,0,0.8) !important;
  position: relative;
}
.closing-facedown-tag {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.9);
  color: #ffd700;
  border: 1px solid #ffd700;
  border-radius: 4px;
  padding: 2px 6px;
  font: 900 0.62rem var(--font);
  white-space: nowrap;
  letter-spacing: 0.5px;
}

/* 4. Carta Pescata Non Ancora Inserita (Alta in Posizione Migliore, Naturale Senza Neon) */
.player-hand-card.floating-drawn {
  transform: translateY(-34px) !important;
  border: none !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.65) !important;
  z-index: 400 !important;
  transition: transform 0.35s cubic-bezier(0.2, 0.85, 0.25, 1) !important;
}

/* 5. Controlli di Spostamento Manuale Morbido sulle Carte (Frecce & Inserisci) */
.card-shift-controls {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 3px;
  z-index: 500;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(245, 197, 24, 0.7);
  border-radius: 99px;
  padding: 2px 5px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.7);
  white-space: nowrap;
}
.btn-card-shift {
  background: none;
  border: none;
  color: #ffd700;
  font-size: 0.68rem;
  cursor: pointer;
  padding: 2px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, color 0.2s ease;
}
.btn-card-shift:hover {
  transform: scale(1.25);
  color: #ffffff;
}
.btn-card-insert-now {
  background: #0284c7;
  border: 1px solid #38bdf8;
  border-radius: 4px;
  color: #ffffff;
  font: 900 0.58rem var(--font);
  cursor: pointer;
  padding: 2px 6px;
  letter-spacing: 0.3px;
  transition: all 0.2s ease;
}
.btn-card-insert-now:hover {
  background: #0ea5e9;
  transform: scale(1.06);
}

/* 6. Dinamica Morbida di Restringimento Calate */
.melds-column-grid {
  transition: all 0.4s cubic-bezier(0.2, 0.85, 0.25, 1) !important;
}
.meld-column-pack, .meld-card-item {
  transition: all 0.4s cubic-bezier(0.2, 0.85, 0.25, 1) !important;
}

/* ==========================================================================
   C2 — PANNELLO FINALE DI PARTITA
   ========================================================================== */
.roundend-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(3, 8, 5, 0.82);
  backdrop-filter: blur(3px);
  padding: 16px;
}
.roundend-overlay.hidden { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }

.roundend-confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.roundend-panel {
  position: relative;
  z-index: 2;
  width: min(560px, 94vw);
  max-height: 92vh;
  overflow-y: auto;
  background: radial-gradient(ellipse at 50% 0%, #1e5c30 0%, #0d3a1a 70%, #050f07 100%);
  border: 2px solid rgba(245, 197, 24, 0.55);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(245, 197, 24, 0.25);
  padding: 22px;
  text-align: center;
  animation: roundend-pop 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes roundend-pop {
  0% { opacity: 0; transform: scale(0.88) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.roundend-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 215, 0, 0.5);
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-weight: 900;
  cursor: pointer;
  font-size: 0.85rem;
}
.roundend-close:hover { background: rgba(215, 118, 9, 0.6); }

.roundend-title {
  margin: 0 0 6px 0;
  color: #fff;
  font: 900 1.35rem var(--font);
  letter-spacing: 1px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.roundend-verdict { margin: 8px 0 16px 0; }
.roundend-verdict .rv {
  font-size: 1.25rem;
  font-weight: 900;
  color: #fff;
}
.roundend-verdict .rv span { font-size: 0.82rem; font-weight: 700; color: #c8d6cf; display: block; margin-top: 4px; }
.roundend-verdict .rv-win { color: #fde047; }
.roundend-verdict .rv-lose { color: #fca5a5; }
.roundend-verdict .rv-tie { color: #4ade80; }

.roundend-teams {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 18px;
}
.roundend-team {
  flex: 1;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 12px 10px;
}
.roundend-team-noi { border-color: rgba(250, 204, 21, 0.45); }
.roundend-team-loro { border-color: rgba(248, 113, 113, 0.45); }
.roundend-team-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #9fb3a6;
  margin-bottom: 2px;
}
.roundend-team-score {
  font-size: 2.1rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
}
.roundend-team-noi .roundend-team-score { color: #fde047; }
.roundend-team-loro .roundend-team-score { color: #fca5a5; }
.roundend-breakdown {
  margin-top: 10px;
  border-top: 1px dashed rgba(255, 255, 255, 0.16);
  padding-top: 8px;
  font-size: 0.76rem;
}
.roundend-bd-row {
  display: flex;
  justify-content: space-between;
  color: #d3ded6;
  padding: 2px 0;
}
.roundend-bd-row span:last-child { font-weight: 800; color: #fff; }
.roundend-vs {
  display: flex;
  align-items: center;
  font-weight: 900;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.55);
}

.roundend-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.btn-roundend {
  border: none;
  border-radius: 12px;
  padding: 12px 22px;
  font: 800 0.95rem var(--font);
  cursor: pointer;
  color: #fff;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-roundend:hover { transform: translateY(-2px); }
.btn-roundend-primary {
  background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%);
  border: 1.5px solid #fde047;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.5);
}
.btn-roundend-secondary {
  background: rgba(51, 65, 85, 0.85);
  border: 1.5px solid #64748b;
}
@media (max-width: 520px) {
  .roundend-panel { padding: 16px; border-radius: 14px; }
  .roundend-team-score { font-size: 1.7rem; }
  .roundend-actions { flex-direction: column; width: 100%; }
  .btn-roundend { width: 100%; }
}

/* ==========================================================================
   B1 — BARRA MODALITÀ: TAB PIÙ ARIOSI, STILE "CARD"
   ========================================================================== */
.lobby-modes-strip {
  gap: 8px;
  padding: 4px 10px 8px 10px;
}
.mode-tab {
  height: 46px;
  padding: 5px 10px;
  border-radius: 12px;
  border-width: 1.5px;
  background: linear-gradient(180deg, rgba(46, 125, 74, 0.95) 0%, rgba(27, 83, 46, 0.97) 100%);
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease, border-color 0.18s ease;
}
.mode-tab:hover {
  transform: translateY(-1px);
  border-color: #b8e2c4;
}
.mode-tab.active {
  background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%);
  border-color: #fde047;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 0 18px rgba(245,197,24,0.55);
  transform: translateY(-1px);
}
.mode-tab-title { font-size: 0.8rem; }
.mode-tab-top-val { font-size: 0.7rem; }
.mode-tab .count { font-size: 0.7rem; }

/* ==========================================================================
   B2 — GERARCHIA CENTRO LOBBY: GIOCA SUBITO ENFATIZZATO / ONLINE SECONDARIO
   ========================================================================== */
.lobby-nav-btn.btn-highlight-green {
  border-color: #6ee7b7;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55);
  animation: playNowGlow 2s infinite ease-in-out;
}
@keyframes playNowGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.45); }
  50% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
}
.lobby-online-badge {
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(74, 222, 128, 0.3);
  padding: 3px 10px;
  font-size: 0.72rem;
  opacity: 0.85;
}
.lobby-online-badge strong { font-size: 0.76rem; }

@media (max-width: 520px) {
  .mode-tab { height: 42px; padding: 4px 7px; }
  .lobby-modes-strip { gap: 5px; padding: 3px 6px 6px 6px; }
  .lobby-online-badge { display: none; }
}

/* ==========================================================================
   MOBILE: MANO IN SCORRIMENTO ORIZZONTALE (carte più visibili)
   ========================================================================== */
@media (max-width: 768px) {
  .player-cards-center-bay {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    display: flex;
    justify-content: center;
  }
  .player-cards-center-bay::-webkit-scrollbar { display: none; }
  .bottom-hand-cards-spread {
    height: 100px;
    min-width: max-content;
    padding-top: 34px; /* spazio per le carte evidenziate (selected) senza clipparle */
    margin-left: auto;
    margin-right: auto;
  }
  .player-hand-card.selected,
  .player-hand-card.selected:hover {
    transform: translateY(-12px) !important;
  }
}

/* ==========================================================================
   MOBILE: BADGE TIPO TAVOLO & PUNTEGGIO NON SOVRAPPOSTI AL GIOCATORE NORD
   ========================================================================== */
@media (max-width: 768px) {
  .table-match-info-badge {
    top: max(10px, env(safe-area-inset-top, 10px));
    left: 8px;
    padding: 4px 10px;
    max-width: 42vw;
  }
  .match-mode-title { font-size: 0.72rem; letter-spacing: 0.3px; }
  .match-meta-specs { font-size: 0.58rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .table-top-score-badge {
    top: max(10px, env(safe-area-inset-top, 10px));
    right: 8px;
    padding: 4px 10px;
    max-width: 40vw;
  }
  .top-score-main { font-size: 0.78rem; }
  .top-score-sub { font-size: 0.62rem; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 480px) {
  .table-match-info-badge { max-width: 40vw; }
  .table-top-score-badge { max-width: 38vw; }
}

/* ==========================================================================
   ORIZZONTALE / BASSO: COMPRESSIONE VERTICALE PER VIEWPORT CORTI
   (cellulare ruotato: 375-430px di altezza)
/* Regole compressione orizzontale tavolo rimosse: la visualizzazione del tavolo segue esclusivamente il modello test-2p */

/* ==========================================================================
   C1 — CORSIA AZIONI LUMINOSA QUANDO È IL TUO TURNO
   ========================================================================== */
.table-action-lane.lane-available {
  border-color: rgba(245, 197, 24, 0.9);
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.35), 0 0 0 2px rgba(245, 197, 24, 0.35), 0 0 22px rgba(245, 197, 24, 0.55);
  animation: lanePulse 1.6s ease-in-out infinite;
}
@keyframes lanePulse {
  0%, 100% { box-shadow: inset 0 2px 8px rgba(0,0,0,0.35), 0 0 0 2px rgba(245,197,24,0.3), 0 0 14px rgba(245,197,24,0.4); }
  50% { box-shadow: inset 0 2px 8px rgba(0,0,0,0.35), 0 0 0 3px rgba(245,197,24,0.6), 0 0 28px rgba(245,197,24,0.7); }
}
.table-action-lane.lane-available:hover,
.table-action-lane.lane-available:active { animation-play-state: paused; }
.table-action-lane.lane-available::after {
  content: "IL TUO TURNO";
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%);
  border: 1.5px solid #fde047;
  color: #fff;
  font: 900 0.7rem var(--font);
  letter-spacing: 1px;
  padding: 2px 12px;
  border-radius: 99px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  pointer-events: none;
  z-index: 220;
}

/* ==========================================================================
   C3 — BOTTONI AD AZIONE RAPIDA (Emote & Menu) STILE PILL
   ========================================================================== */
.bottom-actions-stack { gap: 6px; }
.btn-pill-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.3px;
}
@media (max-width: 520px) {
  .btn-pill-label { display: none; }
}

/* ==========================================================================
   C3.1 — MENU IMPOSTAZIONI TAVOLO (voci professionali)
   ========================================================================== */
.btn-settings-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  font: 900 0.86rem var(--font);
  color: #fff;
  cursor: pointer;
  border: 1.5px solid rgba(255,255,255,0.18);
  background: rgba(30, 41, 59, 0.7);
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  letter-spacing: 0.4px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.35);
}
.btn-settings-action:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}
.btn-settings-action:active {
  transform: translateY(0);
}
.btn-settings-action .sett-icon {
  font-size: 1.15rem;
  line-height: 1;
  flex-shrink: 0;
}
.btn-settings-action .sett-label {
  flex: 1;
  text-align: left;
}
.btn-settings-action .sett-arrow {
  color: #94a3b8;
  font-size: 0.9rem;
  transition: transform 0.2s;
}
.btn-settings-action:hover .sett-arrow {
  transform: translateX(3px);
  color: #fff;
}
.btn-settings-action.sett-profile {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  border-color: #93c5fd;
}
.btn-settings-action.sett-home {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  border-color: #6ee7b7;
}
.btn-settings-action.sett-close {
  background: rgba(51, 65, 85, 0.9);
  border-color: #64748b;
  color: #cbd5e1;
  margin-top: 4px;
}
.btn-settings-action.sett-close:hover {
  color: #fff;
  border-color: #94a3b8;
}

/* ==========================================================================
   B3 — ICONE SVG UI
   ========================================================================== */
.ui-ic {
  display: block;
  width: 1.1em;
  height: 1.1em;
  color: currentColor;
}
.btn-icon .ui-ic { width: 1.15em; height: 1.15em; }
.dropdown-icon .ui-ic { width: 18px; height: 18px; }

/* ==========================================================================
   D1 — FEEDBACK DI STATO COERENTE (focus visibile, transizioni uniformi)
   ========================================================================== */
.lobby-nav-btn:focus-visible,
.mode-tab:focus-visible,
.dropdown-item:focus-visible,
.btn-page-nav:focus-visible,
.btn-table-emotes-icon:focus-visible,
.btn-menu-pill:focus-visible,
.btn-roundend:focus-visible {
  outline: 2px solid #fde047;
  outline-offset: 2px;
}
.mode-tab { transition: transform 0.18s cubic-bezier(0.16,1,0.3,1), box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease; }
.mode-tab:active { transform: translateY(0) scale(0.98); }
.lobby-nav-btn:active,
.btn-roundend:active,
.btn-page-nav:active { transform: translateY(0) scale(0.97); }

/* ==========================================================================
   PULSANTINO "SPAZIO PULITO" — nasconde banner/pods/lane/pannelli per dare
   più spazio a tavolo e carte. Toggle via classe "ui-clean" sul <body>.
   ========================================================================== */
/* Vista pulita rimossa */

/* ==========================================================================
   MANO A RIGA SINGOLA: la mano è una sola fila di carte sovrapposte con
   scorrimento orizzontale. Le regole base la definiscono sopra (1423/2080/3823).
   (La vecchia "mano a due righe" e le classi .two-rows sono state RIMOSSE:
   causavano la striscia centrale distorta all'apertura del tavolo.)
   ========================================================================== */

/* ==========================================================================
   SMOOTH MOTION — Movimenti morbidi e calibrati delle carte
   Sostituisce i timing "tac tac tac" con transizioni fluide e un easing
   morbido, mantenendo reattività sugli hover immediati ma arrotondando
   tutti gli spostamenti di posizione delle carte.
   ========================================================================== */
:root {
  --ease-soft: cubic-bezier(0.33, 0.74, 0.27, 1);
  --ease-smooth: cubic-bezier(0.42, 0, 0.22, 1);
}

/* Transizioni più lunghe e morbide per il movimento delle carte tattiche */
.player-hand-card,
.meld-card-item,
.opp-card-h-item,
.opp-card-v-item,
.deck-tallone-pile .tallone-img-card,
.deck-scarti-pile .scarti-card-face,
.pozzo-single-deck,
.cutting-center-deck {
  transition: transform 0.55s var(--ease-soft), left 0.55s var(--ease-soft),
              top 0.55s var(--ease-soft), margin 0.55s var(--ease-soft),
              filter 0.3s ease, opacity 0.3s ease;
}

/* Hover e micro-interazioni: veloci ma non spigolose */
.player-hand-card:hover,
.player-hand-card.selected,
.player-hand-card.floating-drawn,
.player-hand-card.just-drawn {
  transition-duration: 0.32s;
  transition-timing-function: var(--ease-soft);
}

/* Selezione/sollevamento carta in mano: scatto morbido verso l'alto */
.player-hand-card {
  transition: transform 0.45s var(--ease-soft), margin 0.45s var(--ease-soft),
              z-index 0s, box-shadow 0.3s ease;
}
.player-hand-card.selected { transform: translateY(-14px); }
.player-hand-card.floating-drawn,
.player-hand-card.just-drawn { transform: translateY(-10px) scale(1.04); }

/* Carte degli avversari e mazzi: rotondità senza movimenti a scatti */
.opp-card-h-item img,
.opp-card-v-item img,
.tallone-img-card img,
.scarti-card-face img,
.pozzo-single-deck img,
.cutting-center-deck img {
  transition: transform 0.5s var(--ease-soft), opacity 0.35s ease;
}

/* Deck in mescolata: mantenere vibrazione leggera ma arrotondata */
.center-deck.shuffling,
.deck-tallone-pile.shuffling {
  animation-duration: 1.1s;
  animation-timing-function: ease-in-out;
}

/* Ombre neutre rimosse: carte piatte */
.player-hand-card.selected,
.player-hand-card.floating-drawn {
  box-shadow: none;
}

/* Riduzione del movimento per utenti sensibili */
@media (prefers-reduced-motion: reduce) {
  .player-hand-card,
  .meld-card-item,
  .opp-card-h-item,
  .opp-card-v-item,
  .deck-tallone-pile .tallone-img-card,
  .deck-scarti-pile .scarti-card-face,
  .pozzo-single-deck,
  .cutting-center-deck {
    transition-duration: 0.15s;
  }
}

/* Spostamento manuale carta: sempre opaca (niente trasparenza) e le altre carte restano ferme */
.player-hand-card.dragging {
  opacity: 1 !important;
  filter: none !important;
}
/* Copia che segue il cursore: completamente opaca, copre le carte sottostanti, segue il mouse 1:1 */
.player-hand-card-drag-follower {
  position: fixed;
  margin: 0 !important;
  z-index: 9999;
  pointer-events: none;
  opacity: 1 !important;
  filter: none !important;
  background: #ffffff;
  transition: none !important;
  transform: scale(1.06);
  box-shadow: none;
}
.bottom-hand-cards-spread.no-shift-anim .player-hand-card {
  transition: none !important;
}

/* ==================== REGALI AI GIOCATORI ==================== */
/* Pulsantino regalo sotto il nome (nel flusso colonna, senza sovrapposizioni) */
.seat-gift-btn {
  margin-top: 4px;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(15, 23, 42, 0.9);
  border: 1.5px solid rgba(245, 197, 24, 0.7);
  font-size: 0.85rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.seat-gift-btn:hover { border-color: #ffd700; box-shadow: 0 0 10px rgba(255,215,0,0.5); }

/* Slot regalo attivo sotto il giocatore */
.seat-gift-slot.hidden { display: none !important; }
.seat-gift-slot { margin-top: 4px; }
.seat-gift-big {
  font-size: 2.6rem; line-height: 1;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.6));
  animation: giftPop 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes giftPop {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}

/* Modale catalogo regali */
.gift-modal-box { max-width: 520px; }
.gift-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  margin-bottom: 12px; text-align: left;
}
.gift-modal-head .modal-close-btn { position: static; flex-shrink: 0; }
.pm-open-btn {
  position: relative;
  background: rgba(30, 41, 59, 0.9); border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: 10px; font-size: 1.1rem; padding: 4px 10px; cursor: pointer; flex-shrink: 0;
}
.pm-unread-count {
  position: absolute; top: -8px; right: -8px;
  background: #ef4444; color: #fff; font-size: 0.62rem; font-weight: 900;
  min-width: 18px; height: 18px; border-radius: 99px;
  align-items: center; justify-content: center; padding: 0 4px;
}
.pm-list { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; }
.pm-item {
  background: rgba(30, 41, 59, 0.7); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px; padding: 10px 12px; text-align: left;
}
.pm-item.is-new { border-color: #ffd700; }
.pm-item-head { display: flex; justify-content: space-between; font-size: 0.72rem; color: #94a3b8; margin-bottom: 4px; }
.pm-item-title { font-size: 0.9rem; font-weight: 900; color: #fff; }
.pm-item-text { font-size: 0.82rem; color: #e2e8f0; }
.pm-empty { text-align: center; color: #94a3b8; font-size: 0.85rem; padding: 18px 0; }
.gift-modal-title { font-size: 1.05rem; font-weight: 900; color: #fff; }
.gift-modal-title strong { color: #ffd700; }
.gift-modal-chips { font-size: 0.82rem; color: #cbd5e1; margin-top: 2px; }
.gift-modal-chips strong { color: #ffd700; }
.gift-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.gift-tab-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: rgba(30, 41, 59, 0.7); border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 12px; padding: 8px 4px; cursor: pointer;
  color: #e2e8f0; font-size: 0.72rem; font-weight: 800;
}
.gift-tab-btn.active { border-color: #ffd700; box-shadow: 0 0 12px rgba(255,215,0,0.4); color: #ffd700; }
.gift-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.gift-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: rgba(30, 41, 59, 0.7); border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 12px; padding: 10px 4px; cursor: pointer; color: #fff;
}
.gift-item:hover { border-color: #ffd700; box-shadow: 0 0 12px rgba(255,215,0,0.4); }
.gift-item-icon { font-size: 1.9rem; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)); }
.gift-item-name { font-size: 0.68rem; font-weight: 800; }
.gift-item-price { font-size: 0.68rem; font-weight: 900; color: #ffd700; }

/* ==================== SCHERMATA D'ACCESSO APP ==================== */
#app-splash {
  position: fixed; inset: 0; z-index: 5000;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 30%, #1e5c30 0%, #0d3a1a 55%, #050f07 100%);
}
#app-splash.hidden { display: none !important; }
.splash-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: rgba(0, 0, 0, 0.45);
  border: 2px solid rgba(255, 215, 0, 0.6); border-radius: 22px;
  padding: 28px 44px;
  box-shadow: 0 16px 50px rgba(0,0,0,0.7), 0 0 30px rgba(255,215,0,0.25);
  max-width: 92vw;
}
.splash-logo {
  width: 120px; height: 120px; border-radius: 20px; object-fit: cover;
  border: 2px solid #ffd700; box-shadow: 0 0 20px rgba(255,215,0,0.5);
}
.splash-title {
  font-family: var(--font); font-weight: 900; font-size: 2.2rem; letter-spacing: 4px;
  color: #ffd700; text-shadow: 0 2px 8px #000;
}
.splash-sub { font-size: 0.85rem; font-weight: 800; letter-spacing: 3px; color: #e2e8f0; }
.splash-input {
  margin-top: 6px; width: 240px; max-width: 70vw;
  background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: 12px; padding: 10px 14px; color: #fff;
  font-size: 1rem; font-weight: 700; text-align: center; outline: none;
}
.splash-input:focus { border-color: #ffd700; }
.splash-enter {
  background: linear-gradient(135deg, #ffd700 0%, #f59e0b 100%); color: #000;
  font-family: var(--font); font-weight: 900; font-size: 1.05rem; letter-spacing: 1px;
  border: none; border-radius: 99px; padding: 12px 34px; cursor: pointer;
  box-shadow: 0 6px 20px rgba(245,158,11,0.5);
}
.splash-ver { font-size: 0.68rem; color: #94a3b8; }

/* ==================== ACCESSO APP (login obbligatorio) ==================== */
#app-auth {
  position: fixed; inset: 0; z-index: 5500;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 30%, #1e5c30 0%, #0d3a1a 55%, #050f07 100%);
  padding: 16px;
}
#app-auth.hidden { display: none !important; }
.auth-card {
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(255, 215, 0, 0.6); border-radius: 20px;
  padding: 24px 28px; width: 360px; max-width: 94vw; max-height: 94vh; overflow-y: auto;
  box-shadow: 0 16px 50px rgba(0,0,0,0.7);
  text-align: center;
}
.auth-logo { width: 84px; height: 84px; border-radius: 16px; object-fit: cover; margin: 0 auto; border: 2px solid #ffd700; }
.auth-title { font-weight: 900; font-size: 1.7rem; letter-spacing: 3px; color: #ffd700; }
.auth-sub { font-size: 0.82rem; color: #cbd5e1; }
.auth-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #fff; color: #1f2937; font-weight: 800; font-size: 0.9rem;
  border: none; border-radius: 12px; padding: 10px; cursor: pointer;
}
.auth-g-icon {
  background: #4285F4; color: #fff; font-weight: 900;
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.auth-or { font-size: 0.75rem; color: #94a3b8; }
.auth-tabs { display: flex; background: rgba(255,255,255,0.08); border-radius: 10px; padding: 3px; }
.auth-tabs .auth-tab {
  flex: 1; background: transparent; border: none; color: #cbd5e1;
  font-weight: 800; font-size: 0.85rem; padding: 7px; border-radius: 8px; cursor: pointer;
}
.auth-tabs .auth-tab.active { background: rgba(255,215,0,0.2); color: #ffd700; }
.auth-msg { border-radius: 10px; padding: 8px 12px; font-size: 0.8rem; font-weight: 700; }
.auth-msg.hidden { display: none !important; }
#app-auth input {
  width: 100%; background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: 10px; padding: 9px 12px; color: #fff; font-size: 0.9rem; outline: none;
  margin-bottom: 8px; box-sizing: border-box;
}
#app-auth input:focus { border-color: #ffd700; }
#app-auth input::placeholder { color: #94a3b8; }
.auth-submit {
  width: 100%; background: linear-gradient(135deg, #ffd700 0%, #f59e0b 100%); color: #000;
  font-weight: 900; font-size: 0.95rem; letter-spacing: 1px;
  border: none; border-radius: 12px; padding: 11px; cursor: pointer; margin-top: 2px;
}
.auth-portal-link { font-size: 0.78rem; color: #94a3b8; }
.auth-portal-link a { color: #ffd700; }

/* Landscape basso (telefoni): accesso compatto tutto visibile */
@media (max-height: 500px) {
  .auth-card { gap: 6px; padding: 14px 20px; }
  .auth-logo { width: 56px; height: 56px; }
  .auth-title { font-size: 1.3rem; }
  .auth-sub, .auth-or { display: none; }
  .auth-google { padding: 7px; font-size: 0.82rem; }
  #app-auth input { padding: 7px 10px; margin-bottom: 6px; }
  .auth-submit { padding: 8px; }
}

/* Blocco APP TABLE V2 rimosso */

/* App: riga tavoli orizzontale SEMPRE (vince sulle regole colonna precedenti) */
@media (max-width: 900px) {
  .tables-three-columns {
    display: flex !important; flex-direction: row !important;
    overflow-x: auto !important; overflow-y: hidden !important;
  }
  .tables-three-columns .table-entry-card {
    flex: 0 0 clamp(260px, 70vw, 340px) !important;
    width: auto !important; min-width: 0 !important;
  }
}
@media (max-width: 768px) {
  .tables-three-columns,
  #lobby-tables-grid {
    display: flex !important; flex-direction: row !important;
    gap: 12px !important; overflow-x: auto !important; overflow-y: hidden !important;
    padding: 6px 4px 10px 4px !important;
  }
  .table-entry-card {
    width: auto !important; min-width: 0 !important; margin-bottom: 0 !important;
  }
  .tables-three-columns .table-entry-card {
    flex: 0 0 clamp(240px, 78vw, 320px) !important;
  }
}

/* ==================== APP LOBBY: riga unica + 2 righe da 3 + frecce ==================== */
.app-topbar {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.88);
  border-bottom: 2px solid rgba(245, 197, 24, 0.45);
  width: 100%; box-sizing: border-box;
}
.app-tbtn {
  background: rgba(30, 41, 59, 0.9); border: 1.5px solid rgba(245,197,24,0.5);
  color: #fff; border-radius: 10px; font-size: 1rem;
  width: 38px; height: 34px; cursor: pointer; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.app-tbtn.app-play { background: linear-gradient(180deg, #10b981, #059669); border-color: #6ee7b7; }
.app-online {
  font-size: 0.72rem; font-weight: 800; color: #4ade80; white-space: nowrap;
}
.app-online strong { color: #4ade80; }
.app-modes { display: flex; gap: 5px; flex: 1; justify-content: center; min-width: 0; }
.app-mode {
  background: rgba(30, 41, 59, 0.9); border: 1.5px solid rgba(255,255,255,0.2);
  color: #e2e8f0; border-radius: 99px; font-size: 0.68rem; font-weight: 900;
  padding: 5px 9px; cursor: pointer; white-space: nowrap;
}
.app-mode b { color: #fde047; }
.app-mode.active { border-color: #ffd700; color: #ffd700; box-shadow: 0 0 10px rgba(255,215,0,0.4); }

#lobby-tables-grid.tables-three-columns,
#lobby-tables-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  overflow: hidden !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 2px !important;
  align-content: stretch !important;
}
#lobby-tables-grid .table-entry-card {
  flex: none !important;
  width: auto !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
}

/* ==================== LOBBY APP: 2 righe da 3, card compatte, solo AVANTI a destra ==================== */
.app-tcard {
  display: flex !important; flex-direction: column !important;
  background: rgba(8, 30, 16, 0.9);
  border: 1.5px solid rgba(120, 200, 130, 0.5); border-radius: 12px;
  padding: 8px 10px; cursor: pointer; box-sizing: border-box;
  min-height: 0 !important; height: 100% !important;
  overflow: hidden !important;
}
.app-tcard:active { border-color: #ffd700; }
.app-tcard-head {
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 4px; margin-bottom: 4px;
  min-width: 0; overflow: hidden; white-space: nowrap;
}
.app-tcard-name {
  font-weight: 900; font-size: clamp(0.85rem, 1vw + 0.4rem, 1.05rem); color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1 1 auto; min-width: 0;
}
.app-tcard-specs {
  font-size: clamp(0.65rem, 0.6vw + 0.35rem, 0.78rem); font-weight: 800; color: #fde047; white-space: nowrap;
  flex-shrink: 0;
}
.app-tcard-seats {
  flex: 1; min-height: 0; min-width: 0;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  overflow: hidden;
  padding: 2px 0;
}
.app-tcard-seats .app-mini { flex: 1 1 0; min-width: 0; max-width: 100%; display: flex !important; align-items: center; justify-content: center; overflow: hidden; }
.app-mini .lobby-seat-avatar { position: relative !important; min-width: 0; max-width: 100%; gap: 0 !important; padding-bottom: 12px !important; overflow: visible !important; }
.app-mini .lobby-avatar-frame { width: clamp(44px, 12vh, 68px) !important; height: clamp(44px, 12vh, 68px) !important; border-radius: 11px !important; flex-shrink: 0; }
.app-mini .lobby-avatar-tag { display: block !important; position: absolute !important; bottom: 0 !important; left: 50% !important; transform: translateX(-50%) !important; max-width: 98% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 0.62rem !important; padding: 1px 5px !important; z-index: 2; }
.app-mini .lobby-avatar-crown { font-size: 0.85rem !important; top: -7px !important; right: 0 !important; z-index: 3; }
.app-mini .empty-chair-slot { width: clamp(44px, 12vh, 68px) !important; height: clamp(44px, 12vh, 68px) !important; border-radius: 11px !important; flex-shrink: 0; }
.app-mini .chair-icon-3d { width: 22px !important; height: 22px !important; }
.app-mini .chair-sit-tag { display: block !important; font-size: 0.55rem !important; padding: 1px 5px !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
/* v4.1: due righe di tavoli, avatar in fila ingranditi con nomi sovrapposti */
.app-tcard-seats.seats-1v1,
.app-tcard-seats.seats-2v2,
.app-tcard-seats {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}
/* Schermi bassi: fila singola compatta per non tagliare nulla */
@media (max-height: 500px) {
  #lobby-tables-grid.tables-three-columns,
  #lobby-tables-grid {
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  #lobby-tables-grid .table-entry-card,
  #lobby-tables-grid .app-tcard {
    min-height: 0 !important;
  }
  .app-tcard-seats {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
  }
  .app-mini .lobby-avatar-frame { width: clamp(44px, 12vh, 60px) !important; height: clamp(44px, 12vh, 60px) !important; }
  .app-mini .empty-chair-slot { width: clamp(44px, 12vh, 60px) !important; height: clamp(44px, 12vh, 60px) !important; }
  .app-mini .chair-icon-3d { width: 18px !important; height: 18px !important; }
  .app-tcard-minitable { width: 26px !important; height: 20px !important; }
  .app-tcard-head { padding-bottom: 2px !important; margin-bottom: 2px !important; }
  .app-tcard { padding: 4px 8px !important; }
  .app-tcard-name { font-size: 0.72rem !important; }
  .app-tcard-specs { font-size: 0.6rem !important; }
}
/* (blocco override rimosso in v3.9: le misure avatar stanno nel blocco base con clamp+vh) */

/* Pager: puntini a sinistra, frecce gialle in basso a destra */
.lobby-pagination-footer.app-pager,
#lobby-pagination-bar.app-pager {
  display: flex !important;
  align-items: center;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding: 0 8px 0 0 !important;
  height: 26px !important;
  min-height: 26px !important;
  margin: 0 0 2px 0 !important;
}
/* Barra tutta in basso: niente spazio sotto, più larghezza ai riquadri */
.tables-scroll { padding-bottom: 0 !important; padding-left: 6px !important; padding-right: 6px !important; }
#lobby-tables-grid.tables-three-columns,
#lobby-tables-grid { padding: 2px 6px !important; gap: 10px !important; }
.app-tcard { padding: 14px 16px !important; }
.app-tcard-name { font-size: 1rem !important; }
.app-tcard-specs { font-size: 0.75rem !important; }
.app-page-dots { display: inline-flex; gap: 6px; align-items: center; margin-right: auto; padding-left: 10px; }
.app-ver-tag { position: fixed; left: 6px; bottom: 2px; z-index: 200; font-size: 0.62rem; font-weight: 800; color: rgba(255,255,255,0.4); white-space: nowrap; pointer-events: none; }
.app-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.25); }
.app-dot.on { background: #ffd700; box-shadow: 0 0 8px rgba(255,215,0,0.8); }

/* v4.1: pager compatto in header + topbar compattata per fare spazio */
.app-topbar { gap: 6px !important; padding: 4px 8px !important; }
.app-tbtn { width: 32px !important; height: 30px !important; font-size: 0.9rem !important; border-radius: 8px !important; }
.app-online { font-size: 0.66rem !important; }
.app-mode { font-size: 0.62rem !important; padding: 4px 7px !important; }
.lobby-account-dropdown-wrapper .lobby-nav-btn { height: 30px !important; font-size: 0.72rem !important; }
.app-pager-top { display: inline-flex !important; align-items: center !important; gap: 6px !important; flex-shrink: 0 !important; }
.app-pager-top .app-ver-tag { position: static !important; font-size: 0.62rem !important; font-weight: 800 !important; color: rgba(255,255,255,0.55) !important; white-space: nowrap !important; }
.app-pager-top .app-page-dots { display: inline-flex !important; gap: 5px !important; margin: 0 !important; padding: 0 !important; }
.app-pager-top .app-dot { width: 7px !important; height: 7px !important; }
.app-pager-top .btn-page-nav { height: 26px !important; min-width: 26px !important; padding: 0 8px !important; font-size: 0.95rem !important; font-weight: 900 !important; border-radius: 8px !important; }

/* Mobile: card tavoli larghe a scorrimento verticale (niente compressioni) */
@media (max-width: 768px) {
  #lobby-tables-grid.tables-three-columns,
  #lobby-tables-grid {
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    gap: 14px !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 8px !important;
  }
  #lobby-tables-grid .table-entry-card,
  #lobby-tables-grid .app-tcard {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 140px !important;
    margin-bottom: 0 !important;
  }
}

/* Lobby: pager minimo in basso a destra, massimo spazio alle card tavoli */
.lobby-pagination-footer.app-pager,
#lobby-pagination-bar.app-pager {
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 8px 0 0 !important;
  margin: 0 !important;
  gap: 8px !important;
}
#lobby-pagination-bar.app-pager .btn-page-nav {
  height: 24px !important;
  padding: 1px 12px !important;
  font-size: 0.7rem !important;
}
#lobby-pagination-bar.app-pager .nav-arrow-yellow { width: 14px; height: 14px; }
.app-page-dots { gap: 5px !important; }
.app-dot { width: 7px; height: 7px; }
#lobby-tables-grid.tables-three-columns,
#lobby-tables-grid { padding: 4px 10px 2px 10px !important; gap: 12px !important; }
.app-tcard { padding: 6px 14px 8px !important; }
.app-tcard-head { padding-bottom: 4px !important; margin-bottom: 4px !important; }
.app-tcard-name { font-size: 0.8rem !important; }
.app-tcard-specs { font-size: 0.65rem !important; }
/* (v3.9: misure avatar nel blocco base con clamp+vh, niente override fissi qui) */
/* Mini tavolo centrale nelle card (2 avatar + tavolo / 4 avatar + tavolo) */
.app-tcard-minitable {
  width: 32px; height: 24px; flex-shrink: 0;
  background: radial-gradient(ellipse at 50% 50%, #15803d 0%, #14532d 100%);
  border: 1.5px solid #86efac; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.app-tcard-minitable .mini-table-felt {
  width: 12px; height: 16px; border-radius: 2px;
  background: #1e3a8a; border: 1px solid #93c5fd;
  transform: rotate(-6deg);
}
@media (max-width: 768px) {
  .app-tcard-seats { flex-wrap: wrap !important; justify-content: center !important; row-gap: 4px; }
  .app-mini .lobby-avatar-frame { width: clamp(44px, 9vh, 60px) !important; height: clamp(44px, 9vh, 60px) !important; }
  .app-mini .empty-chair-slot { width: clamp(44px, 9vh, 60px) !important; height: clamp(44px, 9vh, 60px) !important; }
}

/* Blocco layout storico rimosso per garantire l'applicazione esclusiva del layout test-2p */

/* ==========================================================================
   v5.0 TAVOLO COMPLETO — REPLICA ESATTA AL 100% DI test-2p.html
   ========================================================================== */
#burraco-game-view,
#burraco-game-view.app-table,
#burraco-game-view.app-table.mode-2p,
#burraco-game-view.app-table.mode-4p {
  background: #2e7d44 !important;
  position: relative !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow: hidden !important;
}

/* 1. AREA CENTRALE CALATE: stesso spazio sx e dx (5%), ridotta sopra (11%) e sotto (21%) */
#burraco-game-view .test-melds,
#burraco-game-view .table-melds-container {
  position: absolute !important;
  left: 5% !important; right: 5% !important; top: 11% !important; bottom: 21% !important;
  display: flex !important; gap: 0.2% !important;
  z-index: 5 !important;
}
#burraco-game-view .test-meld,
#burraco-game-view .meld-side-box {
  flex: 1 1 0 !important; min-width: 0 !important; min-height: 0 !important;
  border: 2px solid rgba(190, 235, 190, 0.85) !important;
  border-radius: 12px !important;
  background: rgba(0, 0, 0, 0.06) !important;
  box-shadow: none !important;
  padding: 6px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* 2. AVATAR STILE BASE 4P (cornice 4.5vw, senza bordo, raggio 15%) */
#burraco-game-view .t-avatar,
#burraco-game-view .table-avatar-pod {
  position: absolute !important; width: 4.5% !important; z-index: 50 !important;
  display: flex !important; flex-direction: column !important; align-items: center !important;
  background: transparent !important; border: none !important; box-shadow: none !important;
  padding: 0 !important; overflow: visible !important;
}
#burraco-game-view .t-avatar img,
#burraco-game-view .avatar-card-frame,
#burraco-game-view .avatar-card-frame img {
  width: 100% !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; display: block !important;
  border-radius: 15% !important; border: none !important;
  background: rgba(140, 200, 145, 0.5) !important;
  box-shadow: none !important; padding: 0 !important;
}
#burraco-game-view .t-name,
#burraco-game-view .avatar-name-pill {
  display: block !important; max-width: 150% !important; margin: 2px auto 0 auto !important;
  background: linear-gradient(180deg, #fff7b3 0%, #e6d36e 100%) !important;
  color: #1e293b !important; font: 900 0.72rem system-ui, sans-serif !important;
  border-radius: 4px !important; padding: 1px 8px !important; text-align: center !important;
  overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
  border: 0.5px solid #d6c050 !important;
}

/* 3. POSIZIONAMENTO DEI 4 AVATAR */
/* NORD: esatto come immagine/test — nome | avatar, timer sopra + pallino sotto a destra */
#burraco-game-view .t-nord,
#burraco-game-view #pod-nord {
  left: 11.5% !important; top: 2% !important; right: auto !important; bottom: auto !important;
  flex-direction: row !important; width: max-content !important; transform: none !important;
  align-items: center !important;
}
#burraco-game-view .t-nord img,
#burraco-game-view #pod-nord img,
#burraco-game-view #pod-nord .avatar-card-frame { order: 2 !important; width: 4.5vw !important; flex-shrink: 0 !important; }
#burraco-game-view .t-nord .t-name,
#burraco-game-view #pod-nord .avatar-name-pill { margin: 0 4px 0 0 !important; max-width: none !important; width: max-content !important; flex-shrink: 0 !important; order: 1 !important; align-self: center !important; font-size: 0.62rem !important; padding: 1px 6px !important; }
#burraco-game-view .t-nord .t-timer,
#burraco-game-view #pod-nord .pod-timer-pill { position: absolute !important; left: 100% !important; top: 2px !important; margin-left: 4px !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; right: auto !important; bottom: auto !important; transform: none !important; }
#burraco-game-view .t-nord .t-count,
#burraco-game-view #pod-nord .pod-card-count-badge { position: absolute !important; left: 100% !important; top: 24px !important; margin-left: 18px !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; right: auto !important; bottom: auto !important; transform: none !important; }

/* OVEST: left 0.75%, top 70% */
#burraco-game-view .t-ovest,
#burraco-game-view #pod-ovest {
  left: 0.75% !important; top: 70% !important; right: auto !important; bottom: auto !important;
  width: 4.5vw !important; transform: none !important; flex-direction: column !important; align-items: center !important;
}
#burraco-game-view .t-ovest img,
#burraco-game-view #pod-ovest img,
#burraco-game-view #pod-ovest .avatar-card-frame { width: 4.5vw !important; }
#burraco-game-view .t-ovest .t-timer,
#burraco-game-view #pod-ovest .pod-timer-pill { position: absolute !important; bottom: 100% !important; left: 50% !important; transform: translateX(-50%) !important; margin-bottom: 2px !important; top: auto !important; right: auto !important; }
#burraco-game-view .t-ovest .t-count,
#burraco-game-view #pod-ovest .pod-card-count-badge { position: absolute !important; bottom: calc(100% + 28px) !important; left: 50% !important; transform: translateX(-50%) !important; top: auto !important; right: auto !important; margin: 0 !important; }

/* EST: left 95.5%, top 10% */
#burraco-game-view .t-est,
#burraco-game-view #pod-est {
  left: 95.5% !important; top: 10% !important; right: auto !important; bottom: auto !important;
  width: 4.5vw !important; transform: none !important; flex-direction: column !important; align-items: center !important;
}
#burraco-game-view .t-est img,
#burraco-game-view #pod-est img,
#burraco-game-view #pod-est .avatar-card-frame { order: 2 !important; width: 4.5vw !important; }
#burraco-game-view .t-est .t-name,
#burraco-game-view #pod-est .avatar-name-pill { margin: 0 auto 2px auto !important; order: 1 !important; }
#burraco-game-view .t-est .t-timer,
#burraco-game-view #pod-est .pod-timer-pill { position: absolute !important; top: 100% !important; left: 50% !important; transform: translateX(-50%) !important; margin-top: 2px !important; bottom: auto !important; right: auto !important; }
#burraco-game-view .t-est .t-count,
#burraco-game-view #pod-est .pod-card-count-badge { position: absolute !important; top: calc(100% + 28px) !important; left: 50% !important; transform: translateX(-50%) !important; bottom: auto !important; right: auto !important; margin: 0 !important; }

/* SUD: left 77%, top 89% */
#burraco-game-view .t-sud,
#burraco-game-view #pod-sud {
  left: 77% !important; top: 89% !important; right: auto !important; bottom: auto !important;
  flex-direction: column !important; width: 4.5% !important; transform: none !important; align-items: center !important;
}
#burraco-game-view .t-sud img,
#burraco-game-view #pod-sud img,
#burraco-game-view #pod-sud .avatar-card-frame { width: 4.5vw !important; flex-shrink: 0 !important; order: 2 !important; }
#burraco-game-view .t-sud .t-name,
#burraco-game-view #pod-sud .avatar-name-pill { margin: 0 auto 2px auto !important; max-width: 150% !important; order: 1 !important; }
#burraco-game-view .t-sud .t-side {
  position: absolute !important; right: 100% !important; top: -3px !important; margin-right: 4px !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; gap: 4px !important; z-index: 6 !important;
}
#burraco-game-view .t-sud .t-side .t-timer,
#burraco-game-view #pod-sud .pod-timer-pill { position: static !important; margin: 0 !important; transform: none !important; }
#burraco-game-view .t-sud .t-side .t-count,
#burraco-game-view #pod-sud .pod-card-count-badge { position: static !important; margin: 0 !important; transform: none !important; }

/* 4. TIMER E CONTEGGIO STILE TEST */
#burraco-game-view .t-timer,
#burraco-game-view .pod-timer-pill {
  position: absolute !important; z-index: 6 !important; white-space: nowrap !important;
  background: rgba(15, 23, 42, 0.96) !important; border: 2px solid #4ade80 !important; color: #4ade80 !important;
  font: 900 0.7rem system-ui, sans-serif !important; border-radius: 99px !important; padding: 1px 8px !important;
  box-shadow: none !important;
}
#burraco-game-view .t-count,
#burraco-game-view .pod-card-count-badge {
  position: absolute !important; z-index: 6 !important;
  width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 30%, #fef08a, #facc15 60%, #a16207) !important;
  border: none !important; box-shadow: none !important;
  color: #111 !important; font: 900 0.85rem system-ui, sans-serif !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  padding: 0 !important;
}
#burraco-game-view .seat-gift-btn,
#burraco-game-view .seat-gift-slot { display: none !important; }

/* 5. MANO SUD */
#burraco-game-view .t-hand,
#burraco-game-view .player-cards-center-bay {
  position: absolute !important; left: 14% !important; right: auto !important; bottom: -4.5% !important;
  display: flex !important; flex-direction: row !important; align-items: flex-end !important;
  justify-content: flex-start !important;
  z-index: 4 !important;
  background: transparent !important; border: none !important; padding: 0 !important;
  width: auto !important; height: auto !important; overflow: visible !important;
}
#burraco-game-view .t-card,
#burraco-game-view .player-hand-card {
  width: 4.5vw !important; aspect-ratio: 5 / 7 !important; height: auto !important; flex-shrink: 0 !important;
  background: #ffffff !important; padding: 0.22vw !important; box-sizing: border-box !important;
  border: 1px solid #111 !important; border-radius: 8px !important;
  overflow: hidden !important; margin-left: -1.5vw !important; margin-right: 0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35) !important;
}
#burraco-game-view .t-card:first-child,
#burraco-game-view .player-hand-card:first-child { margin-left: 0 !important; }
#burraco-game-view .t-card img,
#burraco-game-view .player-hand-card img {
  width: 100% !important; height: 100% !important; object-fit: fill !important; border-radius: 5px !important; display: block !important; pointer-events: none !important;
}

/* 6. CORSIA MAZZO E SCARTI */
#burraco-game-view .t-lane,
#burraco-game-view .table-action-lane {
  position: absolute !important; left: 5% !important; bottom: 10.5% !important;
  display: flex !important; gap: 1vw !important; align-items: center !important; z-index: 4 !important;
  background: transparent !important; border: none !important; padding: 0 !important; height: auto !important;
}
#burraco-game-view .t-remaining,
#burraco-game-view .lane-count-arrow {
  background: linear-gradient(90deg, #64748b, #475569) !important;
  border: 1.5px solid #94a3b8 !important; border-radius: 6px !important;
  padding: 4px 10px !important; display: flex !important; align-items: center !important; gap: 5px !important; flex-shrink: 0 !important;
  color: #fff !important; font: 900 0.85rem system-ui, sans-serif !important; box-shadow: none !important;
}
#burraco-game-view .t-remaining b,
#burraco-game-view .lane-arrow-icon { color: #fbbf24 !important; font-weight: 900 !important; }
#burraco-game-view .t-deck,
#burraco-game-view .deck-tallone-pile,
#burraco-game-view .tallone-img-card {
  width: 5.8vw !important; aspect-ratio: 10 / 7 !important; height: auto !important; flex-shrink: 0 !important;
  background: #fff !important; padding: 1.5px !important; box-sizing: border-box !important;
  border: 1px solid #000 !important; border-radius: 8px !important; overflow: hidden !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  box-shadow: none !important;
}
#burraco-game-view .t-deck img,
#burraco-game-view .tallone-img-card img {
  height: 135% !important; aspect-ratio: 5 / 7 !important; width: auto !important; object-fit: cover !important; border-radius: 4px !important; transform: rotate(90deg) !important; flex-shrink: 0 !important;
}
#burraco-game-view .tallone-hand-indicator { display: none !important; }

#burraco-game-view .t-scarti,
#burraco-game-view .deck-scarti-pile {
  width: 5.8vw !important; aspect-ratio: 10 / 7 !important; height: auto !important; flex-shrink: 0 !important;
  background: #fff !important; padding: 1.5px !important; box-sizing: border-box !important;
  border: 1px solid #000 !important; border-radius: 8px !important; overflow: hidden !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  box-shadow: none !important;
}
#burraco-game-view .scarti-card-face {
  width: 100% !important; height: 100% !important; border: none !important; background: transparent !important; padding: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: none !important;
}
#burraco-game-view .t-scarti img,
#burraco-game-view .scarti-card-face img {
  height: 135% !important; aspect-ratio: 5 / 7 !important; width: auto !important; object-fit: fill !important; border-radius: 4px !important; transform: rotate(90deg) !important; flex-shrink: 0 !important;
}

/* 7. I 2 POZZETTI */
#burraco-game-view .t-pozzi,
#burraco-game-view .lane-right-group,
#burraco-game-view .pozzi-card-stack {
  position: absolute !important; right: 5% !important; bottom: 10.5% !important;
  display: flex !important; gap: 1vw !important; align-items: center !important; z-index: 4 !important;
  background: transparent !important; border: none !important; padding: 0 !important;
}
#burraco-game-view .t-pozzo,
#burraco-game-view .pozzo-single-deck {
  width: 5.8vw !important; aspect-ratio: 10 / 7 !important; height: auto !important; flex-shrink: 0 !important;
  background: #fff !important; padding: 1.5px !important; box-sizing: border-box !important;
  border: 1px solid #000 !important; border-radius: 8px !important; overflow: hidden !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  box-shadow: none !important;
}
#burraco-game-view .t-pozzo img,
#burraco-game-view .pozzo-single-deck img {
  height: 135% !important; aspect-ratio: 5 / 7 !important; width: auto !important; object-fit: cover !important; border-radius: 4px !important; transform: rotate(90deg) !important; flex-shrink: 0 !important;
}

/* 8. BANNER PUNTEGGIO — una riga per squadra: "Nome1 - Nome2   MANO | TOTALE".
   Il TOTALE e' il numero importante: piu' grande e oro, la MANO piu' sobria. */
#burraco-game-view .table-top-score-badge {
  position: absolute !important; top: 0.4% !important; right: auto !important; z-index: 120 !important;
  left: 74% !important; transform: translateX(-50%) !important;
  display: flex !important; flex-direction: column !important; gap: 2px !important;
  background: rgba(6, 32, 18, 0.72) !important;
  border: 1px solid rgba(245, 197, 24, 0.4) !important;
  border-radius: 9px !important; padding: 3px 9px !important;
  box-shadow: none !important;
  text-align: center !important; min-width: 0 !important; max-width: 30vw !important;
  user-select: none !important; box-sizing: border-box !important;
}
#burraco-game-view .sb-row {
  display: flex !important; align-items: baseline !important; justify-content: center !important;
  gap: 8px !important; line-height: 1.1 !important; white-space: nowrap !important;
}
#burraco-game-view .sb-names {
  display: flex !important; align-items: baseline !important; gap: 4px !important;
  min-width: 0 !important; overflow: hidden !important;
}
#burraco-game-view .sb-name {
  font: 600 0.78rem var(--font) !important; letter-spacing: 1px !important; color: #ffffff !important;
  text-shadow: none !important; -webkit-text-stroke: 0 !important;
  max-width: 10ch !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
}
#burraco-game-view .sb-dash { font: 400 0.62rem var(--font) !important; color: #94a3b8 !important; }
#burraco-game-view .sb-row-mine .sb-dash { color: #86efac !important; }
#burraco-game-view .sb-nums {
  display: inline-flex !important; align-items: baseline !important; gap: 4px !important;
  font-variant-numeric: tabular-nums !important; flex: 0 0 auto !important;
}
/* MANO: numero sobrio, grigio chiaro */
#burraco-game-view .sb-now {
  font: 600 0.78rem var(--font) !important; color: #e2e8f0 !important;
  text-shadow: none !important; min-width: 2.2ch !important; text-align: right !important;
}
/* TOTALE: il numero chiave, piu' grande e in oro pieno */
#burraco-game-view .sb-tot {
  font: 900 1rem var(--font) !important; color: #fbbf24 !important;
  text-shadow: none !important; min-width: 3ch !important; text-align: right !important;
}
#burraco-game-view .sb-sep { font: 400 0.7rem var(--font) !important; color: #64748b !important; }
/* Il vecchio banner in basso a sinistra e' duplicato: il nuovo header lo sostituisce. */
#burraco-game-view .bottom-score-banner,
#burraco-game-view .legacy-score-banner { display: none !important; }

/* 9. MATCH INFO BANNER IN ALTO A SINISTRA */
#burraco-game-view .t-match,
#burraco-game-view .table-match-info-badge {
  position: absolute !important; top: 2% !important; left: 1.5% !important; z-index: 60 !important;
  background: rgba(10, 25, 15, 0.85) !important; border: 1px solid rgba(255, 215, 0, 0.6) !important;
  border-radius: 8px !important; padding: 4px 12px !important; box-shadow: none !important;
  display: flex !important; flex-direction: column !important; gap: 1px !important;
}
#burraco-game-view .t-match-title,
#burraco-game-view .match-mode-title { font: 900 0.8rem system-ui, sans-serif !important; color: #fff !important; white-space: nowrap !important; }
#burraco-game-view .t-match-sub,
#burraco-game-view .match-meta-specs { font: 800 0.62rem system-ui, sans-serif !important; color: #cbd5e1 !important; white-space: nowrap !important; display: block !important; }

/* 10. AZIONI: MENU & EMOTE IN BASSO A DESTRA */
#burraco-game-view .t-actions,
#burraco-game-view .bottom-actions-stack {
  position: absolute !important; right: 1.5% !important; bottom: 2% !important;
  display: flex !important; gap: 8px !important; align-items: center !important; z-index: 60 !important;
}
#burraco-game-view .t-emote,
#burraco-game-view .btn-table-emotes-icon {
  width: 40px !important; height: 40px !important; border-radius: 50% !important; flex-shrink: 0 !important;
  background: rgba(15, 23, 42, 0.85) !important; border: 1.5px solid #fde047 !important;
  font-size: 1.3rem !important; display: flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer !important; box-shadow: none !important; padding: 0 !important;
}
#burraco-game-view .t-menu,
#burraco-game-view .btn-menu-pill {
  position: static !important;
  background: linear-gradient(180deg, #34d399 0%, #059669 100%) !important;
  border: 1.5px solid #a7f3d0 !important; border-radius: 10px !important;
  color: #fff !important; font: 900 0.9rem system-ui, sans-serif !important;
  padding: 6px 22px !important; cursor: pointer !important; width: auto !important; height: auto !important;
  box-shadow: none !important;
}

/* 11. SCALE / TRIS IN BASSO A SINISTRA — icona grande + etichetta */
#burraco-game-view .t-sort,
#burraco-game-view .bottom-left-controls-section {
  position: absolute !important; left: 5% !important; bottom: 2% !important;
  display: flex !important; flex-direction: column !important; gap: 4px !important; z-index: 50 !important;
  width: auto !important;
}
#burraco-game-view .t-sort button,
#burraco-game-view .btn-sort-pro {
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important;
  border-radius: 8px !important; color: #fff !important;
  padding: 4px 12px !important; cursor: pointer !important; box-shadow: none !important; height: auto !important;
}
#burraco-game-view .sort-glyph { font: 900 1.05rem/1 var(--font) !important; }
#burraco-game-view .sort-tag { font: 900 0.58rem/1 var(--font) !important; letter-spacing: 0.5px !important; opacity: 0.92 !important; }
#burraco-game-view .t-sort-scale,
#burraco-game-view .btn-sort-scale { background: linear-gradient(180deg, #059669, #064e3b) !important; border: 1px solid #34d399 !important; }
#burraco-game-view .t-sort-tris,
#burraco-game-view .btn-sort-tris { background: linear-gradient(180deg, #2563eb, #1e3a8a) !important; border: 1px solid #60a5fa !important; }

/* 12. DORSI AVVERSARI (Nord, Ovest, Est) */
#burraco-game-view .t-bay,
#burraco-game-view .opp-north-cards-bay,
#burraco-game-view .opp-west-cards-bay,
#burraco-game-view .opp-east-cards-bay {
  position: absolute !important; z-index: 30 !important; background: transparent !important;
  border: none !important; border-radius: 0 !important; padding: 0 !important; overflow: visible !important;
  box-shadow: none !important;
}
#burraco-game-view .t-bay-nord,
#burraco-game-view .opp-north-cards-bay { left: 23% !important; top: -5% !important; display: flex !important; flex-direction: row !important; }
#burraco-game-view .t-bay-ovest,
#burraco-game-view .opp-west-cards-bay { left: -2.25% !important; top: auto !important; bottom: calc(30% + 94px) !important; display: flex !important; flex-direction: column !important; }
#burraco-game-view .t-bay-est,
#burraco-game-view .opp-east-cards-bay { right: -2.25% !important; top: 28% !important; display: flex !important; flex-direction: column !important; }
#burraco-game-view .t-back,
#burraco-game-view .opp-card-h-item,
#burraco-game-view .opp-card-v-item {
  background: #fff !important; padding: 2px !important; box-sizing: border-box !important;
  border: 1px solid #000 !important; border-radius: 5px !important; overflow: hidden !important; flex-shrink: 0 !important;
  box-shadow: none !important;
}
#burraco-game-view .t-bay-nord .t-back,
#burraco-game-view .opp-north-cards-bay .opp-card-h-item { width: 4.5vw !important; aspect-ratio: 5 / 7 !important; height: auto !important; }
#burraco-game-view .t-bay-nord .t-back + .t-back,
#burraco-game-view .opp-north-cards-bay .opp-card-h-item + .opp-card-h-item { margin-left: -2.75vw !important; }
#burraco-game-view .opp-north-cards-bay .opp-card-h-item:first-child { margin-left: 0 !important; }
#burraco-game-view .t-bay-ovest .t-back,
#burraco-game-view .t-bay-est .t-back,
#burraco-game-view .opp-west-cards-bay .opp-card-v-item,
#burraco-game-view .opp-east-cards-bay .opp-card-v-item {
  width: 4.5vw !important; aspect-ratio: 7 / 5 !important; height: auto !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
#burraco-game-view .t-bay-ovest .t-back img,
#burraco-game-view .t-bay-est .t-back img,
#burraco-game-view .opp-west-cards-bay .opp-card-v-item img,
#burraco-game-view .opp-east-cards-bay .opp-card-v-item img {
  width: auto !important; height: 135% !important; aspect-ratio: 5 / 7 !important; transform: rotate(90deg) !important; flex-shrink: 0 !important; object-fit: cover !important; border-radius: 3px !important;
}
#burraco-game-view .t-bay-ovest .t-back + .t-back,
#burraco-game-view .t-bay-est .t-back + .t-back,
#burraco-game-view .opp-west-cards-bay .opp-card-v-item + .opp-card-v-item,
#burraco-game-view .opp-east-cards-bay .opp-card-v-item + .opp-card-v-item { margin-top: -2vw !important; }
#burraco-game-view .opp-card-v-item:first-child { margin-top: 0 !important; }
#burraco-game-view .t-back img,
#burraco-game-view .opp-card-h-item img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 3px !important; display: block !important; }

/* 13. CARTE CALATE DENTRO I RIQUADRI CALATE */
#burraco-game-view .melds-column-grid {
  display: flex !important; flex-direction: row !important; align-items: flex-start !important;
  gap: 0.9vw !important; padding: 0 !important; width: 100% !important; height: 100% !important;
  box-sizing: border-box !important; overflow: hidden !important;
}
#burraco-game-view .meld-column-pack {
  display: flex !important; flex-direction: column !important;
  position: relative !important;
}
#burraco-game-view .meld-card-item {
  /* width / height / aspect-ratio / margin-bottom: li' calcola fitMelds(), vedi in fondo al file */
  border-radius: 6px !important; background: #ffffff !important; padding: 0.18vw !important;
  box-sizing: border-box !important; border: 0.5px solid rgba(0, 0, 0, 0.22) !important; overflow: hidden !important;
  box-shadow: none !important; flex-shrink: 0 !important;
}
#burraco-game-view .meld-card-item:last-child { margin-bottom: 0 !important; }
#burraco-game-view .meld-card-item img { width: 100% !important; height: 100% !important; object-fit: fill !important; border-radius: 4px !important; display: block !important; }

/* Evidenziazione del turno di gioco (il selettore storico puntava a .avatar-card-frame,
   elemento che non esiste più nel DOM: il pod contiene un <img> diretto). */
#burraco-game-view .table-avatar-pod.is-turn > img {
  box-shadow: 0 0 0 2.5px #fde047, 0 0 18px rgba(245, 197, 24, 0.85) !important;
}

/* Modalità 2 GIOCATORI: ai posti OVEST ed EST non corrisponde nessun sedile.
   renderOpponents() svuotava le carte e nascondeva i contatori, ma i pod con
   avatar e nome restavano visibili sul tavolo. Qui vengono nascosti del tutto.
   In 4 giocatori non si applica nulla. */
#burraco-game-view.mode-2p #pod-ovest,
#burraco-game-view.mode-2p #pod-est,
#burraco-game-view.mode-2p .t-bay-ovest,
#burraco-game-view.mode-2p .t-bay-est { display: none !important; }

/* ==========================================================================
   v6.2 — TAVOLO ORIZZONTALE SU TELEFONO (unico layout mobile)
   Attivo con: orientation:landscape + altezza ridotta (telefono ruotato).
   Geometria presa dall'immagine di riferimento:
     alto  0-11%   partner + dorsi avversari
     calate 11,5-73%   due riquadri (noi | loro)
     basso 73-100%  mazzo/scarti, pozzi, mano del giocatore
   ========================================================================== */
@media screen and (orientation: landscape) and (max-height: 560px) {

  /* --- 0. Viewport a tutta altezza reale (niente barre del browser) --- */
  #burraco-game-view,
  #burraco-game-view.app-table,
  #burraco-game-view.app-table.mode-2p,
  #burraco-game-view.app-table.mode-4p {
    height: 100vh !important;
    height: 100dvh !important;
  }

  /* --- 1. Riquadri calate: ALLARGATI ai lati (i numeri di Est/Ovest stanno
         sotto le carte, quindi i bay laterali occupano solo la larghezza della
         carta) e leggermente piu' alti. --- */
  #burraco-game-view .test-melds {
    left: 5% !important; right: 5% !important;
    top: 11% !important; bottom: 24% !important;
    gap: 0.8% !important;
  }

  /* --- 2. Rivali: UN dorso + numero a fianco.
         NORD: dorso ORIZZONTALE (come da schema), cosi' guadagna spazio in alto
         alle calate. OVEST/EST: dorso ritratto, spostato piu' in alto. --- */
  #burraco-game-view .bay-compact {
    display: flex !important; flex-direction: row !important; align-items: center !important;
    gap: 3px !important; width: auto !important; height: auto !important; max-width: none !important;
    padding: 0 !important; overflow: visible !important;
    transform: none !important; top: auto !important; right: auto !important; bottom: auto !important;
  }
  #burraco-game-view .bay-compact[data-align="right"] { flex-direction: row-reverse !important; }
  /* Selettori con .t-back: devono superare (in ordine di file) i .t-back dei bay. */
  #burraco-game-view .t-back.opp-card-single {
    width: 4.2vw !important; aspect-ratio: 5 / 7 !important; height: auto !important;
    background: #fff !important; padding: 1.5px !important;
    border: 0.5px solid rgba(0, 0, 0, 0.22) !important;
    border-radius: 5px !important; overflow: hidden !important; flex-shrink: 0 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    box-shadow: none !important;
  }
  #burraco-game-view .t-back.opp-card-single img {
    width: 100% !important; height: 100% !important; aspect-ratio: auto !important;
    object-fit: cover !important; transform: none !important; border-radius: 3px !important;
  }
  /* NORD: contenitore orizzontale con la carta ruotata dentro (stesso trucco del mazzo) */
  #burraco-game-view .opp-north-cards-bay.bay-compact .t-back.opp-card-single {
    width: 6.6vw !important; aspect-ratio: 7 / 5 !important;
  }
  #burraco-game-view .opp-north-cards-bay.bay-compact .t-back.opp-card-single img {
    width: auto !important; height: 143% !important; aspect-ratio: 5 / 7 !important;
    object-fit: cover !important; transform: rotate(90deg) !important; flex-shrink: 0 !important;
  }
  #burraco-game-view .opp-single-count {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 2.1vw !important; height: 2.1vw !important; min-width: 2.1vw !important; min-height: 2.1vw !important;
    max-width: 2.1vw !important; max-height: 2.1vw !important;
    border-radius: 50% !important; background: #ffffff !important;
    color: #111 !important; font: 700 0.9rem/1 var(--font) !important;
    font-variant-numeric: tabular-nums !important; text-shadow: none !important;
    box-shadow: none !important; flex-shrink: 0 !important;
  }
  /* Nord: sopra al riquadro sinistro, a sinistra (carta orizzontale + numero a fianco) */
  #burraco-game-view .opp-north-cards-bay.bay-compact {
    left: 6% !important; top: 0 !important; right: auto !important; bottom: auto !important;
  }
  /* OVEST ed EST: numero SOTTO la carta, non a fianco. Il bay si stringe
     alla larghezza della carta, così il riquadro calate può allargarsi ai lati. */
  #burraco-game-view .opp-west-cards-bay.bay-compact,
  #burraco-game-view .opp-east-cards-bay.bay-compact {
    flex-direction: column !important; align-items: center !important;
    gap: 7px !important; width: auto !important; max-width: none !important;
  }
  #burraco-game-view .opp-west-cards-bay.bay-compact {
    left: 0 !important; top: 10% !important; right: auto !important; bottom: auto !important;
  }
  #burraco-game-view .opp-east-cards-bay.bay-compact {
    right: 0 !important; left: auto !important; top: 10% !important; bottom: auto !important;
  }

  /* Il numero sui pod è ridondante sui rivali (è già sul dorso) */
  #pod-nord .pod-card-count-badge,
  #pod-ovest .pod-card-count-badge,
  #pod-est .pod-card-count-badge { display: none !important; }

  /* --- 3. Avatar --- */
  #burraco-game-view .t-avatar,
  #burraco-game-view .table-avatar-pod { width: 4.6vw !important; z-index: 60 !important; }
  #burraco-game-view .t-avatar img,
  #burraco-game-view .table-avatar-pod > img {
    width: 4.6vw !important; height: auto !important; aspect-ratio: 1 / 1 !important;
  }

  /* NORD (partner): avatar a sinistra, nome grande a destra */
  #burraco-game-view .t-nord,
  #burraco-game-view #pod-nord {
    left: 32% !important; top: 1% !important;
    flex-direction: row !important; width: max-content !important; align-items: center !important;
  }
  #burraco-game-view .t-nord img,
  #burraco-game-view #pod-nord img { order: 1 !important; }
  #burraco-game-view .t-nord .t-name,
  #burraco-game-view #pod-nord .avatar-name-pill {
    order: 2 !important; position: static !important; transform: none !important;
    margin: 0 0 0 2% !important; max-width: 30vw !important;
    background: transparent !important; border: none !important; padding: 0 2px !important;
    color: #ffffff !important; border-radius: 0 !important;
    font: 600 clamp(0.72rem, 1.7vw, 0.98rem) var(--font) !important;
    letter-spacing: 1.6px !important; align-self: center !important;
    text-shadow: none !important; -webkit-text-stroke: 0 !important;
  }

  /* OVEST: bordo sinistro, nome in verticale sotto l'avatar */
  #burraco-game-view .t-ovest,
  #burraco-game-view #pod-ovest {
    left: 0.15% !important; top: 30% !important; width: 4.6vw !important;
    flex-direction: column !important; align-items: center !important;
  }
  #burraco-game-view .t-ovest .t-name,
  #burraco-game-view #pod-ovest .avatar-name-pill {
    writing-mode: vertical-rl !important; text-orientation: mixed !important;
    order: 2 !important; position: static !important; transform: none !important;
    margin: 5px auto 0 auto !important; max-width: none !important; max-height: none !important;
    overflow: visible !important; white-space: nowrap !important;
    background: transparent !important; border: none !important; padding: 0 3px !important;
    color: #ffffff !important; border-radius: 0 !important;
    font: 600 clamp(0.62rem, 1.35vw, 0.82rem) var(--font) !important;
    letter-spacing: 2px !important;
    text-shadow: none !important; -webkit-text-stroke: 0 !important;
  }
  #burraco-game-view #pod-ovest > img { order: 1 !important; }

  /* EST: bordo destro, nome in verticale sotto l'avatar */
  #burraco-game-view .t-est,
  #burraco-game-view #pod-est {
    left: auto !important; right: 0.15% !important; top: 30% !important; width: 4.6vw !important;
    flex-direction: column !important; align-items: center !important;
  }
  #burraco-game-view .t-est .t-name,
  #burraco-game-view #pod-est .avatar-name-pill {
    writing-mode: vertical-rl !important; text-orientation: mixed !important;
    order: 2 !important; position: static !important; transform: none !important;
    margin: 5px auto 0 auto !important; max-width: none !important; max-height: none !important;
    overflow: visible !important; white-space: nowrap !important;
    background: transparent !important; border: none !important; padding: 0 3px !important;
    color: #ffffff !important; border-radius: 0 !important;
    font: 600 clamp(0.62rem, 1.35vw, 0.82rem) var(--font) !important;
    letter-spacing: 2px !important;
    text-shadow: none !important; -webkit-text-stroke: 0 !important;
  }
  #burraco-game-view #pod-est > img { order: 1 !important; }

  /* SUD (tu): spostato in basso a destra, quasi a contatto dei due pozzetti,
     per lasciare alla mano tutto lo spazio orizzontale possibile. */
  #burraco-game-view .t-sud,
  #burraco-game-view #pod-sud {
    left: auto !important; right: 7% !important; top: auto !important; bottom: 1.5% !important;
    width: 4.6vw !important; flex-direction: column !important; align-items: center !important;
  }
  #burraco-game-view #pod-sud .avatar-name-pill,
  #burraco-game-view #pod-sud .t-side { display: none !important; }

  /* --- 4. Mano: carte PIU' GRANDI e molto meno sovrapposte.
         La mano NON si sovrappone piu' agli scarti: il cluster mazzo+scarti e' stato
         rimpicciolito e la mano parte alla sua destra (left 10.6%).
         Con l'avatar di Sud a destra arriva fino all'88%. --- */
  #burraco-game-view .t-hand,
  #burraco-game-view .player-cards-center-bay,
  #burraco-game-view #player-hand-cards {
    position: absolute !important;
    left: 10.6% !important; right: auto !important; bottom: 0 !important; top: auto !important;
    max-width: 78% !important; width: auto !important; height: auto !important;
    display: flex !important; flex-direction: row !important; align-items: flex-end !important;
    justify-content: flex-start !important;
    padding: 0 !important; overflow: visible !important;
    background: transparent !important; border: none !important;
    z-index: 60 !important;
  }
  #burraco-game-view .t-card,
  #burraco-game-view .player-hand-card {
    width: 6.6vw !important; aspect-ratio: 5 / 7 !important; height: auto !important;
    padding: 0.2vw !important; border-radius: 6px !important;
    border: 0.5px solid rgba(0, 0, 0, 0.22) !important; box-shadow: none !important;
  }
  #burraco-game-view .player-hand-card.selected { transform: translateY(-1.8vw) !important; }

  /* --- 5. Mazzo e scarti: carte in portrait, contatore a cerchio sul dorso.
         Portati piu' in basso per liberare il riquadro calate. --- */
  #burraco-game-view .t-lane,
  #burraco-game-view .table-action-lane {
    position: absolute !important;
    left: 0.4% !important; right: auto !important; bottom: 6.5% !important; top: auto !important;
    display: flex !important; flex-direction: row !important; align-items: flex-end !important;
    gap: 0.5vw !important; z-index: 40 !important;
    background: transparent !important; border: none !important; padding: 0 !important;
  }
  #burraco-game-view .t-deck,
  #burraco-game-view .deck-tallone-pile {
    width: 4.8vw !important; aspect-ratio: 5 / 7 !important; height: auto !important;
    position: relative !important; flex-shrink: 0 !important;
    padding: 1.5px !important; border-radius: 6px !important;
    border: 0.5px solid rgba(0, 0, 0, 0.22) !important; box-shadow: none !important;
  }
  #burraco-game-view .t-deck img,
  #burraco-game-view .deck-tallone-pile > img {
    width: 100% !important; height: 100% !important; aspect-ratio: auto !important;
    object-fit: cover !important; transform: none !important; border-radius: 4px !important;
    flex-shrink: 0 !important;
  }
  #burraco-game-view .t-scarti,
  #burraco-game-view .deck-scarti-pile {
    width: 4.5vw !important; aspect-ratio: 5 / 7 !important; height: auto !important;
    flex-shrink: 0 !important; padding: 1.5px !important; border-radius: 6px !important;
    border: 0.5px solid rgba(0, 0, 0, 0.22) !important; box-shadow: none !important;
  }
  #burraco-game-view .t-scarti img,
  #burraco-game-view .deck-scarti-pile img,
  #burraco-game-view .scarti-card-face img {
    width: 100% !important; height: 100% !important; aspect-ratio: auto !important;
    object-fit: cover !important; transform: none !important; border-radius: 4px !important;
  }
  /* Contatore carte rimanenti: cerchio bianco centrato sul dorso del mazzo */
  #burraco-game-view .lane-count-arrow {
    position: absolute !important; left: 50% !important; top: 63% !important;
    transform: translate(-50%, -50%) !important;
    width: 2.5vw !important; height: 2.5vw !important; min-width: 2.5vw !important; min-height: 2.5vw !important;
    padding: 0 !important; gap: 0 !important; border: none !important; border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.94) !important;
    color: #111 !important; box-shadow: none !important;
    cursor: pointer !important; z-index: 3 !important;
  }
  #burraco-game-view .lane-count-num {
    font: 900 0.95rem/1 var(--font) !important; color: #111 !important;
    font-variant-numeric: tabular-nums !important; text-shadow: none !important;
  }

  /* --- 6. Pozzi: colonna a destra, abbassati sotto il livello dell'avatar Sud --- */
  #burraco-game-view .t-pozzi,
  #burraco-game-view .lane-right-group,
  #burraco-game-view .pozzi-card-stack {
    position: absolute !important;
    right: 0.3% !important; left: auto !important; bottom: 2% !important; top: auto !important;
    display: flex !important; flex-direction: column !important; align-items: center !important;
    gap: 0.5vw !important; z-index: 40 !important;
    background: transparent !important; border: none !important; padding: 0 !important;
  }
  #burraco-game-view .t-pozzo,
  #burraco-game-view .pozzo-single-deck {
    width: 5vw !important; margin: 0 !important; flex-shrink: 0 !important;
    border: 0.5px solid rgba(0, 0, 0, 0.22) !important; box-shadow: none !important;
  }

  /* --- 7. Ordinamento carte: di nuovo in BASSO a sinistra, sotto il mazzo,
         in fila. La mano parte da left 10.6%, quindi non li copre. --- */
  #burraco-game-view .t-sort,
  #burraco-game-view .bottom-left-controls-section {
    position: absolute !important;
    left: 0.4% !important; bottom: 0.2% !important; top: auto !important;
    flex-direction: row !important; align-items: center !important; gap: 0.3vw !important;
    margin-bottom: 0 !important; z-index: 60 !important;
  }
  #burraco-game-view .bottom-sort-icons {
    display: flex !important; flex-direction: row !important;
    align-items: center !important; gap: 0.3vw !important;
  }
  #burraco-game-view .t-sort button,
  #burraco-game-view .btn-sort-pro {
    width: 4.75vw !important; min-width: 4.75vw !important; max-width: 4.75vw !important;
    height: 1.15rem !important; min-height: 1.15rem !important;
    padding: 0 2px !important; gap: 0 !important; border-radius: 5px !important;
    box-shadow: none !important;
  }
  #burraco-game-view .sort-glyph { font-size: 0.66rem !important; }
  #burraco-game-view .sort-tag { display: none !important; }

  /* --- 8. Menu in alto a destra, badge modalità ed Emote nascosti --- */
  #burraco-game-view .t-actions,
  #burraco-game-view .bottom-actions-stack {
    position: absolute !important;
    right: 0.8% !important; bottom: auto !important; top: 1% !important;
    display: flex !important; flex-direction: row !important; align-items: center !important;
    gap: 6px !important; z-index: 130 !important;
  }
  #burraco-game-view .t-emote,
  #burraco-game-view .btn-table-emotes-icon { display: none !important; }
  #burraco-game-view .t-menu,
  #burraco-game-view .btn-menu-pill {
    font-size: 0.85rem !important; padding: 5px 14px !important; border-radius: 8px !important;
    box-shadow: none !important;
  }
  #burraco-game-view .t-match,
  #burraco-game-view .table-match-info-badge { display: none !important; }

  /* --- 9. Banner totali: compatto e centrato nella fascia libera fra il nome
         del partner (finisce ~60%) e il Menu (inizia ~90%). Centrato al 74%. --- */
  #burraco-game-view .table-top-score-badge {
    top: 0.4% !important; left: 74% !important; transform: translateX(-50%) !important;
    max-width: 26vw !important; padding: 2px 7px !important; gap: 1px !important;
    border-radius: 8px !important;
  }
  #burraco-game-view .sb-row { gap: 5px !important; }
  #burraco-game-view .sb-name { font-size: 0.68rem !important; letter-spacing: 0.8px !important; max-width: 9ch !important; }
  #burraco-game-view .sb-dash { font-size: 0.55rem !important; }
  #burraco-game-view .sb-now { font-size: 0.68rem !important; min-width: 2ch !important; }
  #burraco-game-view .sb-tot { font-size: 0.84rem !important; min-width: 2.6ch !important; }
  #burraco-game-view .sb-sep { font-size: 0.6rem !important; }

  /* ==========================================================================
     v6.9 - TIMER SUD RIATTIVATO, MAZZO E SCARTI GRANDI, CARTE MENO BIANCHE
     ========================================================================== */

  /* --- A. TIMER.updateTimer() mostra solo la pillola del giocatore di turno,
         ma quella di SUD sta dentro .t-side, che era display:none: quindi il
         timer di SUD non esisteva a schermo. .t-side torna visibile e basta
         per ospitare la pillola (il contatore carte resta nascosto). --- */
  #burraco-game-view #pod-sud .t-side {
    display: flex !important;
    position: absolute !important;
    left: 50% !important; right: auto !important;
    bottom: 100% !important; top: auto !important;
    transform: translateX(-50%) !important;
    margin: 0 0 4px 0 !important;
    gap: 3px !important; align-items: center !important;
    pointer-events: none !important;
  }
  #burraco-game-view #pod-sud .pod-card-count-badge { display: none !important; }

  /* Pillola compatta: deve entrare nello slot senza sforare il bordo del tavolo. */
  #burraco-game-view .pod-timer-pill {
    font: 900 0.62rem/1 system-ui, sans-serif !important;
    padding: 2px 5px !important; border-width: 1.5px !important;
    letter-spacing: 0 !important; gap: 2px !important;
    background: rgba(8, 20, 14, 0.94) !important;
  }
  #burraco-game-view .pod-timer-pill.is-warning {
    background: rgba(122, 24, 24, 0.94) !important;
    border-color: #fca5a5 !important; color: #fecaca !important;
  }

  /* SUD: pillola sopra l'avatar, dentro .t-side. */
  #burraco-game-view #pod-sud .pod-timer-pill {
    position: static !important; transform: none !important; margin: 0 !important;
  }

  /* OVEST: pillola centrata sul numero carte (lo copre quando e' di turno).
     Il centro del cerchio sta a 10vh + 5.88vw (dorso) + 7px (gap) + 1.05vw
     (raggio); il pod parte da 30vh, quindi l'offset e' 20vh - 6.93vw - 15.5px. */
  #burraco-game-view #pod-ovest .pod-timer-pill {
    position: absolute !important;
    left: 50% !important; right: auto !important;
    bottom: calc(20vh - 6.93vw - 15.5px) !important; top: auto !important;
    transform: translateX(-50%) !important; margin: 0 !important;
  }

  /* EST: pillola ancorata allo slot del nome, cioe' sotto l'avatar
     (avatar 4.6vw + margine 5px del nome in verticale). */
  #burraco-game-view #pod-est .pod-timer-pill {
    position: absolute !important;
    left: 50% !important; right: auto !important;
    top: calc(4.6vw + 7px) !important; bottom: auto !important;
    transform: translateX(-50%) !important; margin: 0 !important;
  }

  /* --- B. MAZZO E SCARTI PIU' GRANDI. Servono piu' fascia verticale, quindi
         il riquadro calate alza il bordo inferiore e i pulsanti di ordinamento
         si allargano per restare larghi quanto mazzo + scarti. --- */
  #burraco-game-view .test-melds { bottom: 26.5% !important; }
  #burraco-game-view .t-lane,
  #burraco-game-view .table-action-lane { bottom: 6% !important; gap: 0.5vw !important; }
  #burraco-game-view .t-deck,
  #burraco-game-view .deck-tallone-pile { width: 6.3vw !important; }
  #burraco-game-view .t-scarti,
  #burraco-game-view .deck-scarti-pile { width: 6.3vw !important; }
  #burraco-game-view .lane-count-arrow {
    width: 3.1vw !important; height: 3.1vw !important;
    min-width: 3.1vw !important; min-height: 3.1vw !important;
  }
  #burraco-game-view .lane-count-num { font-size: 1.05rem !important; }

  /* La mano parte a destra del cluster mazzo+scarti: 0.4% + 6.3% + 0.5% + 6.3%
     = 13.5%, quindi left 14.2% lascia ~6px di aria e le carte non coprono
     piu' la carta scartata. */
  #burraco-game-view .t-hand,
  #burraco-game-view .player-cards-center-bay,
  #burraco-game-view #player-hand-cards { left: 14.2% !important; max-width: 73% !important; }
  #burraco-game-view .t-sort,
  #burraco-game-view .bottom-left-controls-section { gap: 0.4vw !important; }
  #burraco-game-view .bottom-sort-icons { gap: 0.4vw !important; }
  #burraco-game-view .t-sort button,
  #burraco-game-view .btn-sort-pro {
    width: 6.35vw !important; min-width: 6.35vw !important; max-width: 6.35vw !important;
  }

  /* --- C. CARTE MENO BIANCHE. Le facce erano bianco puro: si spegne un
         gradino solo sui dorsi frontali (mano, calate, scarti), mai sui
         dorsi rossi/blu di mazzo, pozzi e rivali. --- */
  #burraco-game-view .player-hand-card,
  #burraco-game-view .meld-card-item,
  #burraco-game-view .scarti-card-face,
  #burraco-game-view .t-scarti > img,
  #burraco-game-view .deck-scarti-pile > img {
    filter: brightness(0.9) contrast(0.96) saturate(1.04) !important;
  }

  /* --- D. NUMERI E SEMI LEGGIBILI ANCHE A CARTE TAGLIATE.
         Il corner index (numero + seme) sta nell'angolo in alto a sinistra
         della faccia: con la carta intera in 6.6vw era minuscolo. Invece di
         cambiare la geometria, si ingrandisce l'IMMAGINE dentro il riquadro
         della carta, con overflow hidden che la ritaglia. La geo e' identica,
         ma il numero e il seme diventano 2.2x piu' grandi: la striscia
         visibile di ogni carta (step 5vw su 6.6vw = 86% della larghezza)
         contiene cosi' il 39% della faccia, e l'index ne occupa il 20%.
         NON si fa la stessa cosa sulle carte calate: li' la sovrapposizione e'
         verticale (si vede solo il 30% in alto) e un zoom spingerebbe fuori
         il numero. --- */
  #burraco-game-view .player-hand-card { overflow: hidden !important; }
  #burraco-game-view .player-hand-card > img {
    width: 220% !important;
    height: 220% !important;
    max-width: none !important;
    object-fit: fill !important;
    border-radius: 0 !important;
  }

  /* L'ULTIMA carta a destra: si vede INTERA IN LARGHEZZA (la faccia e' larga
     quanto il riquadro, niente ritaglio orizzontale) ma TAGLIATA IN ALTEZZA come
     tutte le altre. Per riuscire a fare le due cose insieme il riquadro e' piu'
     largo dei suoi vicini: la faccia ci sta per intero in larghezza, e il
     riquardo ha la stessa altezza degli altri, quindi il ritaglio verticale
     cade allo stesso punto. */
  #burraco-game-view .player-hand-card.card-last {
    width: 11vw !important;
    height: 9.24vw !important;
    aspect-ratio: auto !important;
  }
  #burraco-game-view .player-hand-card.card-last > img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    /* Le facce sono 338x489 (il jolly 848x1264, ~3% diverso): senza aspect-ratio
       l'altezza dipende dal caricamento e la carta salta. */
    aspect-ratio: 338 / 489 !important;
    object-fit: fill !important;
    border-radius: 0 !important;
  }

  /* --- E. CARTE CALATE PIU' LEGGIBILI. Sul telefono in orizzontale si vede
         solo la fascia in alto di ogni carta (la sovrapposizione e' verticale),
         e li' sta il numero con il seme: quindi carte piu' larghe, passo piu'
         generoso e zoom dell'immagine dentro la carta. Il passo lo calcola
         renderMelds(), che sa quante carte sono nel mazzo e quanto e' alto il
         riquadro. Con 9+ carte la classe .meld-plain toglie lo zoom: non c'e'
         piu' fascia. --- */
}