/* =====================================================================
   WBC BRISCOLA - Style Globale
   Tema warm: legno scuro (osteria) + accenti oro VGEM + rosso coppe
   ===================================================================== */

:root{
  --bg:#0c0a08;
  --bg-soft:#15110d;
  --panel:#1c1814;
  --panel-2:#26201a;
  --panel-3:#332b22;
  --line:rgba(220,180,120,.08);
  --line-strong:rgba(220,180,120,.18);
  --text:#f0e6d2;
  --text-dim:#a89878;
  --text-faint:#6a5c46;
  --vgem:#70f6d1;
  --vgem-2:#67b2ff;
  --gold:#fbbf24;
  --gold-2:#f59e0b;
  --warm:#dc2626;       /* rosso coppe */
  --wood:#8b4513;       /* marrone bastoni */
  --bluedeep:#1e3a8a;   /* blu spade */
  --coin:#fbbf24;       /* oro denari */
  --danger:#f87171;
  --success:#84e1bc;

  /* Tavolo verde scuro più "rustico" del poker */
  --felt-1:#1a4a2a;
  --felt-2:#0f3a1f;
  --felt-rim:#3d2510;
  --felt-glow:rgba(251,191,36,.12);

  --font-display:'Playfair Display', Georgia, serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;
  --font-body:'Manrope', system-ui, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body{
  background:
    radial-gradient(ellipse 60% 40% at 20% 0%, rgba(251,191,36,.04), transparent 70%),
    radial-gradient(ellipse 50% 35% at 90% 30%, rgba(220,38,38,.03), transparent 70%),
    var(--bg);
}
a{color:var(--gold);text-decoration:none}
a:hover{color:#fff}
button{font-family:var(--font-body);cursor:pointer;border:none;background:none;color:inherit}

/* TOPBAR */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 32px;
  border-bottom:1px solid var(--line);
  background:rgba(12,10,8,.85);
  backdrop-filter:blur(8px);
  position:sticky;top:0;z-index:50;
}
.brand{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-display);
  font-weight:600;font-size:22px;letter-spacing:-.01em;
  color:var(--gold);
}
.brand-logo{
  width:36px;height:36px;border-radius:8px;
  background:linear-gradient(135deg, #dc2626, #8b4513);
  display:grid;place-items:center;
  color:#fbbf24;font-weight:700;font-size:18px;
  box-shadow:0 4px 16px -4px rgba(220,38,38,.5);
}
.nav{display:flex;gap:8px;align-items:center}
.nav a{
  padding:8px 14px;border-radius:8px;
  color:var(--text-dim);font-size:14px;font-weight:500;
  transition:all .2s;
}
.nav a:hover, .nav a.active{color:#fff;background:var(--panel)}

.user-pill{
  display:flex;align-items:center;gap:10px;
  padding:6px 6px 6px 14px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:999px;
  font-size:13px;
  cursor:pointer;
  position:relative;
  user-select:none;
}
.user-pill:hover{border-color:var(--line-strong)}
.user-pill .balance{
  background:linear-gradient(135deg, var(--vgem), var(--vgem-2));
  color:#0c0a08;
  padding:5px 12px;
  border-radius:999px;
  font-family:var(--font-mono);font-weight:600;
}
.user-pill .caret{
  width:14px;height:14px;margin-left:2px;opacity:.6;
  transition:transform .2s;flex-shrink:0;
}
.user-pill.open .caret{transform:rotate(180deg)}

.user-menu{
  position:absolute;top:calc(100% + 8px);right:0;
  background:var(--panel);
  border:1px solid var(--line-strong);
  border-radius:12px;
  min-width:220px;padding:6px;
  box-shadow:0 12px 40px -8px rgba(0,0,0,.7);
  z-index:200;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .15s,transform .15s,visibility 0s linear .15s;
  pointer-events:none;
}
.user-pill.open .user-menu{
  opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity .15s,transform .15s,visibility 0s;
  pointer-events:auto;
}
.user-menu a, .user-menu button{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:10px 12px;border-radius:8px;font-size:14px;color:var(--text);
  cursor:pointer;text-align:left;background:transparent;border:none;
  transition:background .15s;font-family:inherit;text-decoration:none;
}
.user-menu a:hover, .user-menu button:hover{background:var(--panel-2);color:#fff}
.user-menu .menu-sep{height:1px;background:var(--line);margin:4px 0}
.user-menu .ico{font-size:16px;width:20px;text-align:center;flex-shrink:0}
.user-menu .danger{color:var(--danger)}
.user-menu .danger:hover{background:rgba(248,113,113,.1)}

/* LANG TOGGLE */
.lang-toggle{
  display:inline-flex;gap:2px;
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:999px;padding:3px;margin-right:10px;
}
.lang-btn{
  width:30px;height:28px;border-radius:999px;
  display:grid;place-items:center;font-size:16px;cursor:pointer;
  border:none;background:transparent;
  filter:grayscale(.6);opacity:.55;transition:all .2s;
}
.lang-btn:hover{filter:grayscale(0);opacity:1}
.lang-btn.active{
  filter:grayscale(0);opacity:1;
  background:rgba(251,191,36,.18);
  box-shadow:inset 0 0 0 1px rgba(251,191,36,.5);
}

/* BUTTONS */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:10px;
  font-weight:600;font-size:14px;
  background:var(--panel-2);border:1px solid var(--line-strong);color:var(--text);
  transition:all .2s;
}
.btn:hover{background:var(--panel-3);transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg, var(--vgem), var(--vgem-2));color:#0c0a08;border-color:transparent}
.btn-primary:hover{box-shadow:0 6px 22px -6px var(--vgem)}
.btn-gold{background:linear-gradient(135deg, var(--gold), var(--gold-2));color:#0c0a08;border-color:transparent}
.btn-gold:hover{box-shadow:0 6px 22px -6px var(--gold)}
.btn-danger{background:rgba(248,113,113,.1);color:var(--danger);border-color:rgba(248,113,113,.3)}
.btn-ghost{background:transparent;border-color:var(--line)}
.btn-block{width:100%;justify-content:center}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}

/* CARDS / FORMS */
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px}
.card-title{font-family:var(--font-display);font-size:24px;font-weight:600;margin-bottom:18px;letter-spacing:-.01em;color:var(--gold)}
input[type=text], input[type=email], input[type=password], input[type=number], input[type=datetime-local], select, textarea{
  width:100%;background:var(--panel-2);border:1px solid var(--line);color:var(--text);
  padding:12px 14px;border-radius:10px;font-family:var(--font-body);font-size:14px;outline:none;
  transition:border-color .2s, background .2s;
}
input:focus, select:focus, textarea:focus{border-color:var(--gold);background:var(--panel-3)}
label{display:block;font-size:12px;color:var(--text-dim);margin-bottom:6px;text-transform:uppercase;letter-spacing:.1em;font-weight:500}

.alert{padding:12px 16px;border-radius:10px;font-size:14px;margin-bottom:16px;border:1px solid}
.alert-error{background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.3);color:#fca5a5}
.alert-success{background:rgba(132,225,188,.08);border-color:rgba(132,225,188,.3);color:#86efac}

.container{max-width:1280px;margin:0 auto;padding:32px}
.container-narrow{max-width:560px;margin:0 auto;padding:32px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:760px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  .container,.container-narrow{padding:20px}
  .topbar{padding:12px 16px}
  .nav{gap:0}
  .nav a{padding:8px 10px;font-size:13px}
}

/* CARDS svg renderer */
.card-svg{
  display:block;border-radius:6px;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.4));
  user-select:none;
}
.card-svg.playable{cursor:pointer;transition:transform .15s, filter .15s}
.card-svg.playable:hover{transform:translateY(-8px);filter:drop-shadow(0 8px 16px rgba(251,191,36,.4)) brightness(1.1)}
/* =====================================================================
   WBC BRISCOLA - Mobile Optimization
   Da APPENDERE alla fine di /css/style.css
   Target: smartphones <600px, tablet <900px
   ===================================================================== */

/* iOS safe areas (notch/home indicator) */
@supports (padding: max(0px)) {
  body {
    padding-top: max(0px, env(safe-area-inset-top));
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* === MOBILE GENERICO < 768px === */
@media (max-width: 768px) {
  body { font-size: 14px; }

  .topbar {
    padding: 10px 14px;
    gap: 10px;
  }
  .brand {
    font-size: 17px;
    gap: 8px;
  }
  .brand-logo {
    width: 30px; height: 30px; font-size: 15px;
  }
  .nav { display: none; } /* nascondi nav nel topbar - usa user-menu dropdown */
  .nav-mobile-toggle { display: inline-flex !important; }

  .user-pill {
    padding: 5px 5px 5px 10px;
    font-size: 12px;
  }
  .user-pill .balance { padding: 4px 9px; font-size: 11px; }
  .lang-toggle { margin-right: 6px; padding: 2px; }
  .lang-btn { width: 26px; height: 24px; font-size: 13px; }

  .container, .container-narrow { padding: 16px; }
  .card { padding: 18px; border-radius: 12px; }
  .card-title { font-size: 22px; margin-bottom: 14px; }

  .btn { padding: 11px 16px; font-size: 14px; }
  /* Tap targets minimi 44x44 (Apple HIG) */
  button, .btn, a.btn, input[type=button], input[type=submit] {
    min-height: 44px;
  }

  /* Hero compatto */
  .hero {
    grid-template-columns: 1fr !important;
    padding: 24px !important;
    gap: 18px !important;
  }
  .hero h1 { font-size: 32px !important; }
  .hero p { font-size: 14px; }

  /* Stat boxes a riga */
  .hero-stats {
    flex-direction: row !important;
    gap: 8px !important;
  }
  .hero-stats .stat-box {
    flex: 1;
    padding: 12px !important;
    text-align: center;
  }
  .stat-val { font-size: 18px !important; }

  .section-title { font-size: 19px; margin-bottom: 12px; }

  /* Format selector colonne unica */
  .format-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .format-card { padding: 16px !important; }
  .format-card .ico { font-size: 28px; margin-bottom: 4px; }
  .format-card .title { font-size: 17px; }

  /* Tier grid 2 colonne */
  .tier-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .tier-card { padding: 14px !important; }
  .tier-card .name { font-size: 15px; }
  .tier-card .buyin { font-size: 18px !important; }
  .tier-card .pool { font-size: 10px; }

  .find-table-cta .btn { padding: 14px 28px; font-size: 16px; }

  /* Tabelle scrollabili orizzontalmente */
  .recent-table { overflow-x: auto; }
  table.tbl, table.lb, table.adm {
    font-size: 12px;
    min-width: 600px;
  }
  table.tbl th, table.tbl td,
  table.lb th, table.lb td {
    padding: 10px 12px;
  }
}

/* === SMARTPHONE STRETTO < 480px === */
@media (max-width: 480px) {
  .topbar { padding: 8px 12px; }
  .user-pill #userName { display: none; } /* nasconde nome, lascia solo balance */
  .container { padding: 12px; }
  .hero h1 { font-size: 26px !important; }
  .hero { padding: 18px !important; }
  .hero-stats { flex-direction: column !important; }
  .tier-grid { grid-template-columns: 1fr !important; }
  .card-title { font-size: 20px; }

  /* Sort tabs leaderboard scrollable */
  .tab-row { overflow-x: auto; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; }
  .tab-row .tab { white-space: nowrap; flex-shrink: 0; font-size: 12px; padding: 7px 12px; }
}

/* =====================================================================
   TAVOLO BRISCOLA - LAYOUT MOBILE COMPLETO
   < 768px: layout verticale, hand-area sticky bottom, no felt ovale
   ===================================================================== */
@media (max-width: 1100px) {
  .table-shell {
    grid-template-columns: 1fr !important;
    padding: 8px !important;
    gap: 8px !important;
    min-height: calc(100vh - 50px) !important;
  }

  .felt-wrap {
    padding: 30px 0 110px 0 !important;
  }

  /* Felt più piccolo su tablet */
  .felt {
    aspect-ratio: 16/12 !important;
    border-radius: 30px !important;
    box-shadow:
      inset 0 0 40px rgba(0,0,0,.5),
      0 0 0 8px var(--felt-rim),
      0 0 0 11px #1a0e05,
      0 18px 50px -15px rgba(0,0,0,.7) !important;
  }

  .felt-logo { font-size: 22px !important; }

  /* Match score più piccolo */
  .match-score {
    padding: 6px 12px !important;
    gap: 12px !important;
    top: 10px !important;
  }
  .match-score .v { font-size: 15px !important; }
  .match-score .lbl { font-size: 9px !important; }

  /* Side col sotto felt invece di lato */
  .side-col {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
  .info-card { flex: 1 1 100% !important; }
  .chat-card {
    flex: 1 1 100% !important;
    min-height: 180px !important;
    max-height: 250px !important;
  }
  .info-rows { padding: 10px 14px !important; }
  .info-row { font-size: 12px !important; }

  /* Player pill più compatto */
  .player-pill {
    width: 130px !important;
    padding: 4px 10px 4px 4px !important;
  }
  .av { width: 28px !important; height: 28px !important; font-size: 12px !important; }
  .player-info .name { font-size: 11px !important; }
  .player-info .score { font-size: 11px !important; }
}

@media (max-width: 768px) {
  /* Tavolo vero e proprio mobile */

  .felt {
    aspect-ratio: auto !important;
    height: calc(100vh - 280px) !important;
    min-height: 400px !important;
    border-radius: 18px/12px !important;
  }

  /* Carte mano avversari: più piccole */
  .seat .hand-area .card-svg {
    width: 38px !important;
    height: 56px !important;
  }

  /* Posizioni seat ottimizzate per spazio piccolo */
  .seat-1v1-0 { bottom: -42px !important; }
  .seat-1v1-1 { top: -42px !important; }

  .seat-2v2-0 { bottom: -42px !important; }
  .seat-2v2-2 { top: -42px !important; }
  .seat-2v2-1 { right: -38px !important; }
  .seat-2v2-3 { left: -38px !important; }

  /* Deck e briscola più piccoli */
  .deck-pile { width: 60px !important; height: 92px !important; }
  .deck-pile .card-svg { width: 60px !important; height: 92px !important; }
  .briscola-card .card-svg { width: 60px !important; height: 92px !important; }
  .deck-area { gap: 8px !important; }
  .deck-pile .deck-count {
    font-size: 9px !important;
    padding: 1px 5px !important;
    bottom: -16px !important;
  }

  /* Trick area: carte 50x76 */
  .trick-area {
    transform: translate(-50%, calc(-50% + 70px)) !important;
    gap: 4px !important;
  }
  .trick-area .card-svg {
    width: 50px !important;
    height: 76px !important;
  }

  /* === STICKY HAND BOTTOM (la vera novità mobile) === */
  /* La mia mano (seat 0) viene tirata fuori dal felt e fissata in basso */
  .seat[id="seat-0"] {
    position: fixed !important;
    bottom: 8px !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
    z-index: 50 !important;
    flex-direction: column !important;
    align-items: center !important;
    pointer-events: none; /* lascia passare i tap dove non c'è UI */
  }
  .seat[id="seat-0"] .hand-area {
    pointer-events: auto;
    height: auto !important;
    background: linear-gradient(180deg, transparent, rgba(12,10,8,.85) 30%) !important;
    padding: 28px 12px 8px !important;
    width: 100% !important;
    justify-content: center !important;
    gap: 8px !important;
  }
  .seat[id="seat-0"] .hand-area .card-svg {
    width: 70px !important;
    height: 105px !important;
  }
  .seat[id="seat-0"] .player-pill {
    pointer-events: auto;
    width: auto !important;
    margin-top: 4px !important;
    padding: 3px 12px 3px 4px !important;
  }

  /* Quando hand è sticky bottom, dobbiamo lasciare spazio nel layout */
  body.in-table { padding-bottom: 0 !important; }

  /* User pill nel topbar tavolo: senza nome */
  .topbar .user-pill #userName { display: none; }

  /* Tap-friendly play area: feedback più visibile */
  .card-svg.playable {
    box-shadow: 0 0 0 2px rgba(251,191,36,.35);
    border-radius: 6px;
  }
  .card-svg.playable:active {
    transform: translateY(-12px) !important;
    filter: drop-shadow(0 8px 16px rgba(251,191,36,.6)) !important;
  }
}

/* === ORIENTAMENTO LANDSCAPE: limita altezza hand sticky === */
@media (max-width: 900px) and (orientation: landscape) {
  .seat[id="seat-0"] .hand-area .card-svg {
    width: 55px !important;
    height: 82px !important;
  }
  .felt {
    height: calc(100vh - 180px) !important;
    min-height: 280px !important;
  }
}

/* === DARK BG full-bleed per PWA standalone === */
@media (display-mode: standalone) {
  html { background: var(--bg); }
  /* Aggiungi padding-top per evitare overlap con status bar iOS */
  .topbar { padding-top: max(10px, env(safe-area-inset-top, 10px)); }
}

/* === Scrollbar custom mobile === */
@media (max-width: 768px) {
  ::-webkit-scrollbar { width: 4px; height: 4px; }
  ::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 2px; }
}