:root {
  --color-primary: #3b82f6;
  --color-danger: #ef4444;
  --color-success: #10b981;
  --color-border: #e5e5e5;
  --color-bg: #f7f7f7;
  --font-base: system-ui, Arial, sans-serif;
  --font-size-base: 16px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

    body {
      font-family: var(--font-base);
      margin: var(--spacing-xl);
      background: linear-gradient(90deg, #d5e7da, #3c774b);
      color: #222;
    }
    body.info-overlay-active { padding-bottom: var(--info-overlay-height, 0px); }
    @media (max-width: 480px) {
      :root { --font-size-base: 14px; }
      body { margin: var(--spacing-md); }
    }
    .grid { display:grid; gap:var(--spacing-lg); grid-template-columns: 1fr; }
    .card {
      border:1px solid var(--color-border);
      border-radius:var(--spacing-md);
      padding:var(--spacing-lg);
      background-color: rgba(255,255,255,0.85);
      backdrop-filter: blur(4px);
    }
    .roster-container {
      padding:0;
      border:none;
      width:100%;
      min-width:0;
      overflow-x:auto;
      max-width:100vw;
    }

#rosterCard,
#rosterCardBidder {
  display: none;
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
  width:100%;
  min-width:0;
  max-width:100vw;
}

@media (max-width: 600px) {
  #rosterCard,
  #rosterCardBidder {
    margin:0;
    padding:0;
  }
  #rosterCard .roster-header,
  #rosterCard #rosterList,
  #rosterCardBidder .roster-header,
  #rosterCardBidder #rosterListBidder {
    margin:0;
    padding:0;
  }
}
    .row { display:grid; grid-template-columns: 1fr auto; gap:var(--spacing-sm); margin:var(--spacing-sm) 0; }
    .form-row { grid-template-columns: auto 1fr; align-items: center; }
    input, button { padding:var(--spacing-sm); font-size:var(--font-size-base); }
    #status { padding:var(--spacing-sm); border-radius:var(--spacing-sm); background:var(--color-bg); min-height:2.2em; }
    .ok { color:#0a7a0a; } .err { color:#b00020; }
      table { border-collapse:collapse; }
      th, td { border:1px solid var(--color-border); padding:6px; text-align:center; }
      table.roster-table { table-layout:auto; }
      table.roster-table th {
        max-width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      table.roster-table th small {
        display: block;
        font-size: 0.75em;
        color: #555;
      }
      .player-td {
        display: table-cell;
        max-width: 200px;
      }
      .player-td-content {
        display:flex;
        align-items:center;
        gap:7px;
        justify-content:space-around;
        overflow:auto;
      }
      .big { font-size: 28px; font-weight: 700; }
      .mono { }

      .fancy-table {
        border-collapse: separate;
        border-spacing: 0;
        border-radius: var(--spacing-md);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        overflow: hidden;
      }
      .fancy-table thead {
        background-color: #e5e7eb;
      }
      .fancy-table tbody tr:nth-child(even) {
        background-color: #f9fafb;
      }
      .fancy-table tbody tr:hover {
        background-color: #f3f4f6;
      }

      .roster-view-select { margin-left: var(--spacing-sm); }
      .roster-card { border:1px solid var(--color-border); border-radius:var(--spacing-sm); padding:var(--spacing-sm); margin-bottom:var(--spacing-sm); }
      .roster-card summary { font-weight:700; cursor:pointer; }
      .roster-role-title { font-weight:600; margin-top:var(--spacing-sm); }
      .roster-role-list { list-style:none; padding:0; margin:var(--spacing-xs) 0 var(--spacing-sm); }
      .roster-role-list li { display:flex; align-items:center; gap:var(--spacing-sm); justify-content:space-between; padding:var(--spacing-xs) 0; }

      .player-photo { width:32px; height:32px; object-fit:contain; }

@media (max-width: 600px) {
  .player-photo {
    width: 24px;
    height: 24px;
  }
  .player-td-content,
  .roster-role-list li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
  }
  .player-info {
    display: flex;
    flex-direction: column;
    text-align: center;
    line-height: 1;
  }
  .roster-table td,
  .roster-role-list li,
  .player-td-content .mono {
    font-size: 10px;
  }
  .player-name,
  .player-price {
    font-size: 10px;
  }
}

    /* Fullscreen base */
    html, body { height: 100%; }

    /* Bidder layout */
    #bidderCard { display: flex; flex-direction: column; height: 100%; }
    .player-display { display: flex; align-items: center; gap: var(--spacing-md); }
    .bidder-secondary { display: grid; grid-template-columns: 1fr; gap: var(--spacing-md); max-width: 500px; margin-left: auto; margin-right: auto; }
    .info-box { background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--spacing-sm); padding:var(--spacing-sm) var(--spacing-md); margin-top: 15px; }
    .quick-bid-wrap { margin-top: auto; max-width: 500px; margin-left: auto; margin-right: auto; }
    .quick-bid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-md); }
    .bid-bottom-bar { display:flex; justify-content:space-between; align-items:center; gap:var(--spacing-sm); padding:var(--spacing-sm); background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.1); }
    #mobileAuctionOverlay { position:fixed; top:0; left:0; right:0; z-index:9995; padding:var(--spacing-sm); background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.1); display:none; flex-direction:column; align-items:stretch; }
    .show-mobile-overlay #mobileAuctionOverlay { display:flex; }
    #mobileAuctionOverlay .mobile-overlay-top { display:flex; align-items:flex-start; }
    #mobileAuctionOverlay .mobile-overlay-left { flex:1; }
      #mobileAuctionOverlay .mobile-overlay-right { flex:0 0 auto; margin-left:var(--spacing-sm); }
      #mobileAuctionOverlay .bid-bottom-bar { margin-top:var(--spacing-sm); }

      @media (min-width: 601px) {
        #mobileAuctionOverlay { display: none !important; }
      }
    .player-img { width:64px; height:64px; object-fit:contain; border-radius:8px; }

    @media (min-width: 601px) {
          #bidInputRow { max-width: 500px; margin-left: auto; margin-right: auto; }
          #bidderCard { width: 95%; margin-left: auto; margin-right: auto; }
    }

    .qbtn { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 22px 24px; border: none; border-radius: 16px;
      background: linear-gradient(135deg, var(--color-bg), #ececec); box-shadow: 0 10px 20px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.7);
      font-size: 24px; font-weight: 800; cursor: pointer; transition: transform .06s ease, box-shadow .2s ease, filter .2s ease; user-select: none; }
    .qbtn:hover { filter: brightness(1.03); } .qbtn:active { transform: translateY(1px) scale(0.99); }
    .qbtn:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; border-radius: 18px; }
    .qbtn.q1 { background: linear-gradient(135deg, #e8f3ff, #d9ecff); }
    .qbtn.q5 { background: linear-gradient(135deg, #e7ffe8, #d7ffd9); }
    .qbtn.q10 { background: linear-gradient(135deg, #fff3e8, #ffe7d6); }
    .qbtn .chip { width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff, #f0f0f0 60%, #e0e0e0);
      box-shadow: inset 0 2px 4px rgba(0,0,0,0.08); display: grid; place-items: center; }
    .qbtn svg { width: 22px; height: 22px; opacity: .9; }
    .qbtn .label { display: inline-block; min-width: 58px; text-align: center; }

    @media (max-width: 600px) {
      .player-display { flex-direction: column; align-items: flex-start; }
      .quick-bid { display:none; }
      #bidderMetaBox { font-size:14px; padding:6px 8px; }
      #bidderMetaBox div { margin:2px 0; }
      #bidInputRow { display:none; }
      #bidderCard { margin-top: var(--overlay-height, 0px); }
    }

    /* Monitor layout */
    .monitor-topbar { display: flex; justify-content: flex-end; margin-bottom: 0; }
        .assign-banner{
          border: 2px solid var(--color-success);
          background: #ecfdf5;
          color: #065f46;
          border-radius: var(--spacing-md);
          padding: var(--spacing-sm) var(--spacing-md);
          font-weight: 700;
          font-size: clamp(16px, 1.9vw, 22px);
        }
        .assign-banner--none{
          border-color:#9ca3af;
          background:#f3f4f6;
          color:#374151;
        }

        .players-toolbar {
          display: grid;
          grid-template-columns: 1.6fr 0.9fr 1.2fr auto 1fr;
          gap: var(--spacing-sm);
          align-items: center;
          margin: var(--spacing-sm) 0 var(--spacing-md);
        }
        .players-toolbar input, .players-toolbar select { padding: var(--spacing-sm); }

        .players-pager {
          display:flex; gap:var(--spacing-sm); align-items:center; justify-content:flex-end;
          margin-top: 10px;
        }
	.players-spacer { flex: 1; }

	
    /* Prezzo + Tempo su una riga */
    .mon-pt { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--spacing-sm); align-items: baseline; font-size: clamp(16px, 1.9vw, 22px); min-width: 0; }
    .mon-pt .sep { opacity: .5; }
    .mon-pt .mon-value { font-weight: 700; font-size: clamp(18px, 3.2vw, 44px); line-height: 1.15; word-break: break-word; }
    .is-fullscreen .mon-pt { font-size: clamp(18px, 2.2vw, 28px); }
    .is-fullscreen .mon-pt .mon-value { font-size: clamp(22px, 4vw, 68px); }
    @media (max-width: 600px) { .mon-pt { grid-template-columns: 1fr; gap: 6px; } .mon-pt .sep { display: none; } }

    /* Pedici */
    .suffix { font-size: 0.6em; vertical-align: sub; font-weight: 600; margin-left: 4px; }

    /* Colori ruolo */
    .role-por  { color: gold; }
    .role-dif  { color: green; }
    .role-cent { color: deepskyblue; }
    .role-att  { color: red; }

    /* Colori fasce */
    .fascia-P { background-color: #fff9c4; }
    .fascia-D { background-color: #dcfce7; }
    .fascia-C { background-color: #e0f2fe; }
    .fascia-A { background-color: #fee2e2; }

    /* Colori countdown */
    .time-warn   { color: #b45309; } /* 5→3 */
    .time-danger { color: #991b1b; } /* ≤3 */
	
	/* Layout host migliorato */
        .host-toolbar {
          display:flex; align-items:center; justify-content:space-between;
          gap:var(--spacing-lg); margin-bottom:var(--spacing-md);
        }
        .stat-group { display:flex; flex-wrap:wrap; gap:var(--spacing-md); }
        .stat {
          min-width: 140px;
          background: var(--color-bg);
          border:1px solid var(--color-border);
          border-radius: var(--spacing-md);
          padding: var(--spacing-sm) var(--spacing-md);
        }
        .stat-label { font-size:12px; color:#666; }
        .stat-value { font-size:18px; font-weight:700; }

        .host-controls { display:flex; flex-wrap:wrap; gap:var(--spacing-sm); }

        .host-grid { display:grid; gap:var(--spacing-lg); grid-template-columns: 1.2fr 1fr; }
        .host-grid .full { grid-column: 1 / -1; } /* ← prende tutta la riga */
        .host-col { display:flex; flex-direction:column; gap:var(--spacing-lg); }
	
	/* Crediti iniziali full width */
	.row.row--credits {
	  grid-template-columns: 1fr; /* l’input occupa tutto */
	}

        .section {
          border:1px solid var(--color-border); border-radius:var(--spacing-md); padding:var(--spacing-md);
          background:#fff;
          min-width:0;
          overflow-x:auto;
        }
        .section-title {
          font-weight:700; margin-bottom:var(--spacing-sm);
          display:flex; align-items:center; gap:var(--spacing-sm);
        }
        .section-title::before {
          content:""; width:var(--spacing-sm); height:var(--spacing-sm); border-radius:50%; background:var(--color-primary);
        }

        .subgrid { display:grid; gap:var(--spacing-lg); grid-template-columns: 1fr; }
        .subtle { font-size:12px; color:#666; margin-bottom:var(--spacing-xs); }

        /* Tabelle grandi e comode */
        .table-wrap {
          border:1px solid #eee;
          border-radius:var(--spacing-md);
          overflow-x:auto;
          width:100%;
          max-width:100vw;
        }
        .table-wrap table { border-collapse:collapse; min-width:100%; }
        .table-wrap th, .table-wrap td { padding:var(--spacing-xs); }
        .table-wrap--log { max-height: 320px; overflow-y:auto; } /* un po’ più alta */

        /* Pills */
        .pill-row { display:flex; flex-wrap:wrap; gap:var(--spacing-sm); }
        .pill {
          background:#f3f4f6; border:1px solid #e5e7eb; border-radius:999px;
          padding:var(--spacing-xs) var(--spacing-sm); font-size:26px;
        }

	/* Bottoni base */
        .btn { padding:var(--spacing-sm) var(--spacing-md); border-radius:var(--spacing-sm); border:1px solid var(--color-border); background:var(--color-bg); cursor:pointer; }
	.btn:hover { filter:brightness(0.98); }
        .btn-primary { background:var(--color-primary); color:#fff; border-color:var(--color-primary); }
        .btn-ghost { background:#fff; }
        .btn-danger { background:var(--color-danger); color:#fff; border-color:var(--color-danger); }
        .btn-sm { padding:2px 4px; font-size:12px; }
		.btn-bidMobile { padding:var(--spacing-sm) 35px !important; }

        @media (max-width: 1080px) {
          .host-grid { grid-template-columns: 1fr; }
        }

        /* Slot tutti in una riga, ben spaziati */
        .slots-row {
          display: grid;
          grid-template-columns: repeat(5, minmax(120px, 1fr)); /* 4 input + bottone */
          gap: var(--spacing-sm);
        }
        @media (max-width: 920px) {
          .slots-row { grid-template-columns: 1fr 1fr; }
          .slots-row button { grid-column: 1 / -1; } /* bottone a tutta riga su schermi piccoli */
        }

        .login-card {
          max-width: 420px;
          margin: 60px auto;
          text-align: center;
        }

        .login-card[style*="display: block"] {
          animation: fadeInUp .4s ease-out;
        }

        .login-card input,
        .login-card select {
          width: 100%;
          padding: var(--spacing-md);
          font-size: var(--font-size-base);
          border-radius: var(--spacing-sm);
          border: 1px solid #ccc;
          transition: .2s;
          box-sizing: border-box;
        }

        .login-card button {
          width: 100%;
          font-size: 18px;
          padding: var(--spacing-md);
          border-radius: var(--spacing-sm);
          transition: .2s;
          box-sizing: border-box;
        }
        .login-card button:hover {
          transform: translateY(-2px);
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        }
        .login-card input:focus {
          border-color: var(--color-primary);
          box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
        }
        .login-card .logo {
          width: 120px;
          margin: 0 auto var(--spacing-md);
          display: block;
        }
        .login-card .tagline {
          width: 100%;
          margin: 0 0 var(--spacing-lg);
          text-align: center;
        }
        /* Toast minimal */
        .toast-wrap {
          position: fixed;
          left: 50%;
          bottom: var(--spacing-xl);
          transform: translateX(-50%);
	  display: flex;
	  gap: 8px;
	  z-index: 9999;
	  pointer-events: none;
	}
	.toast {
	  pointer-events: auto;
	  background: #111;
	  color: #fff;
	  border-radius: 10px;
	  padding: 10px 14px;
	  box-shadow: 0 8px 24px rgba(0,0,0,.2);
	  font-size: 15px;
	  max-width: 90vw;
	}
	.toast--error { background:#991b1b; }
	.toast--ok    { background:#065f46; }
	.toast--warn  { background:#b45309; }
	
	/* Giocatore già chiamato: resa attenuata, ma ancora cliccabile */
	.tr-called { opacity: .45; filter: grayscale(0.6); }
	.tr-called td { color: #6b7280; }             /* grigio testo per sicurezza */
	.tr-called img { filter: grayscale(1); }      /* miniature sicuramente grigie */
	.badge-called {
          display:inline-block; margin-left:var(--spacing-sm); padding:2px 6px; font-size:12px;
          border-radius:999px; background:#eee; border:1px solid var(--color-border);
	}
        .badge-linked{
          display:inline-block;
          margin-left:8px;
          padding:2px 6px;
          font-size:12px;
          border-radius:999px;
          background:#ecfdf5;
          border:1px solid var(--color-success);
          color:#065f46;
          vertical-align:baseline;
        }

        .connection-banner {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          display: none;
          gap: var(--spacing-md);
          align-items: center;
          justify-content: center;
          padding: var(--spacing-sm) var(--spacing-md);
          background: rgba(17,17,17,0.9);
          color: #fff;
          z-index: 10002;
        }
        .connection-banner .btn { background:#fff; color:#111; border-color:#fff; }
        .connection-banner .btn-danger { background:var(--color-danger); border-color:var(--color-danger); color:#fff; }

	/* === Monitor v2 (stadium theme) === */
	:root{
	  --bg-1:#0b1020; --bg-2:#111a35; --glass: rgba(255,255,255,.06);
	  --border: rgba(255,255,255,.14); --text:#f7f8fc; --muted:#a8b0d6;
	  --accent:#7dd3fc; /* fallback */
	  --ok:var(--color-success); --warn:#f59e0b; --danger:var(--color-danger);
	}
	.monitor-stage{
	  min-height:100vh; padding:max(2vh,16px) max(3vw,16px);
	  background:
		radial-gradient(1200px 400px at 50% -20%, #1b2a6b33 0%, transparent 60%),
		radial-gradient(1400px 600px at 50% 110%, #0ea5e92b 0%, transparent 60%),
		linear-gradient(160deg, var(--bg-1), var(--bg-2));
	  color:var(--text);
	}
	.mon-wrap{
	  max-width:1400px; margin:0 auto;
	  display:grid; grid-template-columns: 1.25fr .9fr; gap:3vw; align-items:center;
	}
	@media (max-width:1100px){ .mon-wrap{ grid-template-columns:1fr; gap:2rem; } }

	.mon-card{
	  background:var(--glass); border:1px solid var(--border);
	  border-radius:24px; padding:clamp(16px,2vw,28px);
	  box-shadow: 0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
	}

	/* Header: nome + meta */
	.mon-title{
	  display:grid; gap:.5rem;
	}
	.mon-name{
	  font-weight:900; line-height:1.05;
	  font-size: clamp(28px, 6vw, 84px);
	  letter-spacing: .01em; text-wrap: balance;
	  filter: drop-shadow(0 4px 12px rgba(0,0,0,.35));
	}
	.mon-meta{
          display:flex; flex-wrap:wrap; gap:var(--spacing-sm);
	  font-size: clamp(14px, 1.4vw, 18px);
	  justify-content: space-around;
	}
	.pill{
	  --c: var(--muted);
	  display:inline-flex; align-items:center; gap:.5ch;
	  border:1px solid var(--border); color:var(--text);
          background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
          padding:var(--spacing-xs) var(--spacing-sm); border-radius:999px;
	}
	.pill-host {
		--c: var(--muted);
	  display:inline-flex; align-items:center; gap:.5ch;
	  border:1px solid var(--border); color:#282828;
	  padding:6px 10px; border-radius:999px;}
	.pill .dot{ width:.55em; height:.55em; border-radius:50%; background:var(--c); }

	/* Prezzo + countdown circolare */
	.mon-price-wrap{
	  display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:center;
	  margin-top: .4rem;
	}
	.mon-ring{
	  --p: 0; /* 0..1 progresso inverso tempo */
	  --col: var(--ok);
	  width:clamp(78px,7vw,110px); aspect-ratio:1/1; place-items:center; display:grid;
	  background:
		conic-gradient(var(--col) calc(var(--p)*360deg), #ffffff15 0deg);
	  border-radius:50%;
	  box-shadow: 0 10px 26px rgba(0,0,0,.35);
	  position:relative;
	}
	.mon-ring::after{
	  content:""; position:absolute; inset:7px; border-radius:50%;
	  background: rgba(0,0,0,.35); border:1px solid var(--border);
	  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
	}
	.mon-time{
	  position:relative; z-index:1; font-weight:800;
	  font-size: clamp(20px, 3.2vw, 42px);
	}
	.mon-price{
	  font-weight:900; letter-spacing:.02em; line-height:1;
	  font-size: clamp(36px, 7vw, 92px);
	  transition: transform .18s ease, text-shadow .18s ease;
	}
	.mon-price.tick{ transform: scale(1.04); text-shadow:0 6px 18px rgba(0,0,0,.35); }

	/* Immagine */
	.mon-img{
	  display:block; width:100%; max-width:min(44vw,560px);
	  border-radius:20px; border:1px solid var(--border);
	  background:#0b0f1e; object-fit:cover;
	  box-shadow: 0 20px 60px rgba(0,0,0,.35);
	  aspect-ratio: 4/3;
	}

	/* Ultimi 3 offerenti */
	.last3{
	  display:flex; flex-wrap:wrap; gap:10px; margin-top:1rem;
	}
        .chip{
          background:var(--glass); border:1px solid var(--border);
          padding:var(--spacing-sm) var(--spacing-md); border-radius:999px; font-weight:700;
          font-size: clamp(14px, 1.4vw, 18px);
        }

	/* Ruolo → colore accent */
	.role-por{ --accent:#facc15; } /* giallo */
	.role-dif{ --accent:#22c55e; } /* verde  */
	.role-cent{ --accent:#38bdf8; }/* azzurro*/
	.role-att{ --accent:var(--color-danger); } /* rosso  */

	/* sfondo soft solo in fullscreen monitor */
	.is-fullscreen #monitorCard{
	  background:
		radial-gradient(1200px 800px at 80% -10%, rgba(59,130,246,.08), transparent 60%),
		radial-gradient(1000px 600px at -10% 110%, rgba(16,185,129,.08), transparent 55%),
		#fff;
	}
	
	/* ===== Monitor: ottimizza spazi e gerarchie tipografiche ===== */

	/* 1) Griglia: dai più spazio alla colonna info (nome+prezzo) */
	.mon-wrap{
	  grid-template-columns: 1.35fr 1fr; /* prima: 1.25fr .9fr */
	  gap: clamp(16px, 3vw, 40px);
	}

	/* 2) Titolo più “presente” + migliore resa su 2 righe */
	.mon-title{ gap: .65rem; }
	.mon-name{
	  font-size: clamp(32px, 6.8vw, 100px); /* prima max 84px */
	  line-height: 1.02;
	  letter-spacing: .01em;
	  text-wrap: balance;
	}

	/* 3) Prezzo più grande e stabile (cifre tabulari) */
	.mon-price-wrap{ 
	  grid-template-columns: auto 1fr;
	  align-items: center;
	  gap: clamp(12px, 3vw, 36px); /* più respiro tra ring e prezzo */
	  margin-top: .6rem;
	}
	.mon-price{
	  font-size: clamp(42px, 9vw, 140px); /* prima max 92px */
	  font-variant-numeric: tabular-nums; /* niente “saltelli” del numero */
	  letter-spacing: .01em;
	}

	/* 4) Countdown ring più grande e leggibile */
	.mon-ring{
	  width: clamp(90px, 9.5vw, 160px); /* prima max ~110px */
	}
	.mon-time{
	  font-size: clamp(22px, 3.8vw, 52px);
	  line-height: 1;
	}

	/* 5) Ultimi 3 offerenti: aumenta leggibilità e usa l’ampiezza */
	.last3{
	  gap: clamp(8px, 1vw, 14px);
	  margin-top: .9rem;
	}
	.chip{
	  font-size: clamp(15px, 1.8vw, 22px); /* leggermente più grande */
	}

	/* 6) Immagine: un filo più grande in layout standard */
	.mon-img{
	  max-width: min(48vw, 620px); /* prima 44vw/560px */
	  max-height: 58vh;            /* prima ~52vh */
	}

	/* 7) Fullscreen: sfrutta tutto lo schermo */
	.is-fullscreen .monitor-topbar{ display: none !important; } /* niente barra */
	.is-fullscreen .mon-wrap{
	  grid-template-columns: 1.45fr 1fr;
	  align-items: center;
	  min-height: 92vh;
	}
	.is-fullscreen .mon-name{
	  font-size: clamp(36px, 8vw, 120px);
	}
	.is-fullscreen .mon-ring{
	  width: clamp(110px, 12vw, 200px);
	}
	.is-fullscreen .mon-time{
	  font-size: clamp(28px, 4.6vw, 64px);
	}
	.is-fullscreen .mon-price{
	  font-size: clamp(56px, 12vw, 180px);
	}
	.is-fullscreen .last3{
	  max-height: 42vh;
	  font-size: clamp(18px, 2.2vw, 28px);
	}
        .is-fullscreen .mon-img{
          max-width: 70vw;
          max-height: 76vh;
        }
        
        /* Off-canvas info panel */
        #infoPanel {
          display: none;
          position: fixed;
          top: 0;
          right: 0;
          bottom: 0;
          width: 80%;
          max-width: 320px;
          background: #fff;
          box-shadow: -2px 0 8px rgba(0,0,0,.2);
          transform: translateX(100%);
          transition: transform .3s ease;
          overflow-y: auto;
          z-index: 10000;
        }
        .info-panel-open #infoPanel { transform: translateX(0); }
        #infoPanel .panel-section { display:none; padding:16px; }
        #infoPanel .panel-section.active { display:block; }
        #infoPanel .info-close {
          position: absolute;
          top:8px; right:8px;
          background:none;
          border:none;
          font-size:24px;
        }
        #infoOverlay {
          position: fixed;
          bottom: 0;
          left: 0;
          right: 0;
          display: none;
          justify-content: space-around;
          padding: 8px;
          background: rgba(255,255,255,0.95);
          box-shadow: 0 -2px 8px rgba(0,0,0,.15);
          z-index: 10001;
        }
        #infoOverlay button {
          background: none;
          border: none;
          font-size: 24px;
          padding: 8px;
        }
        #infoOverlay .username { display:none; margin-left:8px; font-size:16px; }
        @media (min-width:601px) { #infoOverlay .username { display:inline; } }

        /* Profile section */
        #infoProfileContent .profile-logout-btn {
          display: block;
          width: 100%;
          margin-top: var(--spacing-lg);
        }

        @media (max-width: 600px) {
          #infoProfileContent .profile-logout-btn {
            width: 100%;
          }
        }