:root {
    /* Palette "notte" / vampiri (solo colori, layout invariato) */
    --bg-page: #0e1626;
    --bg-shell: #142136;
    --bg-shell-soft: #182a45;

    --accent: #6f93b8;          /* blu freddo desaturato */
    --accent-strong: #55789d;   /* blu più intenso */
    --accent-alt: #a6bfdc;      /* azzurro pallido (link/accenni) */
    --accent-soft: rgba(111, 147, 184, 0.18);

    --danger: #8b2c3b;
    --success: #3f6f5e;

    --text-main: #e8eef6;
    --text-muted: #b6c4d6;

    --border-subtle: rgba(255, 255, 255, 0.12);

    --radius-lg: 22px;
    --radius-md: 14px;
    --shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.55);
    --transition-fast: 0.16s ease-out;
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
                 "Segoe UI", sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    min-height: 100%;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    background:
        radial-gradient(circle at top left, #1a2c49 0, transparent 55%),
        radial-gradient(circle at bottom right, #182744 0, transparent 55%),
        var(--bg-page);
    color: var(--text-main);
    -webkit-font-smoothing: antialiased;
}

/* App background wrapper */
.app-bg {
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 1.5rem 0.75rem;
    position: relative;
    overflow: hidden;
}

/* Mappa di sfondo molto leggera */
.app-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top, rgba(120, 160, 220, 0.18) 0, transparent 55%),
        url("../img/map_killgame.png") center/contain no-repeat;
    opacity: 0.12;
    pointer-events: none;
}

/* App shell: card centrale tipo "terminal militare" ma chiaro */
.app-shell {
    width: 100%;
    max-width: 480px;
    background: linear-gradient(145deg, var(--bg-shell) 0, var(--bg-shell-soft) 48%, #0f1b2e 100%);
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* On wider screens, slightly bigger */
@media (min-width: 900px) {
    .app-shell {
        max-width: 540px;
        border-radius: 30px;
    }
}

/* leggero "vignettato" */
.app-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at -10% -10%, rgba(111, 147, 184, 0.22) 0, transparent 55%),
        radial-gradient(circle at 110% 110%, rgba(92,116,65,0.25) 0, transparent 55%);
    opacity: 0.7;
    mix-blend-mode: soft-light;
    pointer-events: none;
}

/* Header */
.site-header {
    position: relative;
    z-index: 1;
    border-bottom: 1px solid var(--border-subtle);
    padding: 0.7rem 1.25rem 0.45rem;
    background: linear-gradient(120deg, rgba(14, 22, 38, 0.88), rgba(14, 22, 38, 0.88));
    backdrop-filter: blur(14px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Riga con il logo */
.header-bar {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Riga con i bottoni */
.nav-row {
    margin-top: 0.45rem;
    display: flex;
    justify-content: center;
}

/* Brand con logo immagine */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.brand-logo-link {
    display: inline-flex;
    align-items: center;
}

.brand-logo-img {
    display: block;
    max-height: 52px;
}

/* Navigation */
.main-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(14, 22, 38, 0.55);
    border-radius: 999px;
    padding: 0.18rem 0.22rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
}

.nav-link {
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
    text-decoration: none;
    color: var(--text-muted);
    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.nav-link:hover {
    background: rgba(24, 42, 69, 0.85);
    color: var(--text-main);
    transform: translateY(-0.5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

.nav-link-accent {
    background: linear-gradient(135deg, var(--accent-alt), var(--accent));
    color: #fff;
    font-weight: 600;
}

/* Main */
.site-main {
    position: relative;
    z-index: 1;
    padding: 1.1rem 1.25rem 1.4rem;
    overflow-y: auto;
}

/* Footer */
.site-footer {
    position: relative;
    z-index: 1;
    padding: 0.6rem 1.25rem 0.9rem;
    border-top: 1px solid var(--border-subtle);
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: center;
    background: rgba(14, 22, 38, 0.88);
}

.site-footer p {
    margin: 0;
}

.site-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    text-align: left;
}

.site-footer-meta {
    flex: 1 1 auto;
}

.site-footer a {
    color: #a6bfdc;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.site-footer a:hover {
    color: #d3e4f7;
}

.site-footer a:visited {
    color: #a6bfdc;
}

.site-footer-donate-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0.42rem 0.85rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffc439, #ffb347);
    color: #10233e !important;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.site-footer-donate-link:hover {
    color: #08182c !important;
    transform: translateY(-1px);
}

.site-footer-donate-link:visited {
    color: #10233e !important;
}

@media (max-width: 560px) {
    .site-footer-row {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .site-footer-meta {
        text-align: center;
    }
}

.donation-page {
    display: grid;
    gap: 1rem;
}

.donation-intro {
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--text-main);
}

.donation-list {
    margin: 0.4rem 0 0;
    padding-left: 1.2rem;
    color: var(--text-main);
}

.donation-list li + li {
    margin-top: 0.45rem;
}

.donation-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    text-align: center;
}

.donation-note {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

.donation-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.7rem 1.2rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffc439, #ffb347);
    color: #10233e;
    text-decoration: none;
    font-weight: 800;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
}

.donation-button:hover,
.donation-button:visited {
    color: #10233e;
}

.donation-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.28);
}

/* Generic card: pannello sabbia / legno chiaro */
.card {
    background: rgba(24, 42, 69, 0.52);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 1rem 1.1rem 1.1rem;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.40);
    position: relative;
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.card::before {
    content: "";
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle at 0 0,
                rgba(120, 160, 220, 0.18) 0,
                transparent 55%);
    opacity: 0.5;
    pointer-events: none;
}

.card h1,
.card h2 {
    margin-top: 0;
    margin-bottom: 0.45rem;
    font-size: 1.25rem;
    letter-spacing: 0.02em;
}

.card h1 {
    font-size: 1.32rem;
}

.card p {
    margin: 0.25rem 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Actions row */
.actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
}

.actions-row .btn {
    flex: 1;
}

/* Forms */
form {
    margin-top: 0.6rem;
}

.form-group {
    margin-bottom: 0.95rem;
}

label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

input[type="text"],
input[type="email"],
input[type="password"] {
    width: 100%;
    padding: 0.6rem 0.7rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(14, 22, 38, 0.55);
    color: var(--text-main);
    font-size: 0.9rem;
    outline: none;
    transition:
        border var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast),
        transform var(--transition-fast);
}

input::placeholder {
    color: rgba(150, 136, 112, 0.9);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
    border-color: var(--accent-alt);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.12),
        0 8px 18px rgba(0, 0, 0, 0.40);
    background: rgba(24, 42, 69, 0.55);
    transform: translateY(-0.5px);
}

/* Buttons */
button,
.btn {
    appearance: none;
    border: none;
    border-radius: 999px;
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: #fff;
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.18);
    text-align: center;
    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        filter var(--transition-fast),
        background var(--transition-fast);
}

button:hover,
.btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.50),
        0 0 0 1px rgba(255, 255, 255, 0.18);
}

button:active,
.btn:active {
    transform: translateY(0.5px) scale(0.97);
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(223, 199, 158, 0.9);
}

/* Secondary / ghost button */
.btn-ghost {
    background: rgba(14, 22, 38, 0.50);
    color: var(--accent-alt);
    box-shadow: none;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.btn-ghost:hover {
    background: rgba(24, 42, 69, 0.55);
    box-shadow: 0 10px 24px rgba(170, 145, 99, 0.4);
}

/* Feedback messages */
.error,
.success {
    border-radius: var(--radius-md);
    padding: 0.6rem 0.7rem;
    font-size: 0.84rem;
    margin-bottom: 0.7rem;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.12);
}

.error {
    border-color: rgba(139, 44, 59, 0.55);
    color: #ffd8dd;
    background: rgba(139, 44, 59, 0.18);
}

.success {
    border-color: rgba(63, 111, 94, 0.55);
    color: #d7fff1;
    background: rgba(63, 111, 94, 0.18);
}

.error ul,
.success ul {
    padding-left: 1.1rem;
    margin: 0.15rem 0 0;
}

/* Text utilities */
.text-muted {
    color: var(--text-muted);
    font-size: 0.86rem;
}

/* Mobile tweaks */
@media (max-width: 480px) {
    .site-main {
        padding-inline: 0.95rem;
    }

    .card {
        border-radius: 18px;
        padding-inline: 0.9rem;
    }
}

    .header-bar {
        display: flex;
        justify-content: center;
        /* logo già centrato */
    }

    .main-nav {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        background: rgba(14, 22, 38, 0.55);
        border-radius: 999px;
        padding: 0.18rem 0.22rem;
        border: 1px solid rgba(255, 255, 255, 0.14);
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
        margin-top: 0.35rem;      /* riga sotto il logo */
    }


    .lang-toggle {
        display: inline-flex;
        align-items: stretch;
        margin-left: 0.35rem;
        border-radius: 999px;
        overflow: hidden; /* così le due metà fanno una pillola unica */
        border: 1px solid rgba(229, 210, 170, 0.85);
        background: rgba(14, 22, 38, 0.50);
    }

    .lang-toggle__btn {
        padding: 0.25rem 0.6rem;
        font-size: 0.75rem;
        text-decoration: none;
        border: none;
        background: transparent;
        cursor: pointer;
        color: var(--text-muted);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2.2rem;
        transition:
            background var(--transition-fast),
            color var(--transition-fast),
            box-shadow var(--transition-fast),
            transform var(--transition-fast);
    }

    .lang-toggle__btn--active {
        background: linear-gradient(135deg, var(--accent-alt), var(--accent));
        color: #fff;
        font-weight: 600;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
        transform: translateY(-0.5px);
    }


.password-strength {
    margin-top: 0.35rem;
    font-size: 0.8rem;
}

.password-strength--weak {
    color: #8b2c3b;
}

.password-strength--medium {
    color: #6f93b8;
}

.password-strength--strong {
    color: #3f6f5e;
}
.password-field {
    position: relative;
    display: flex;
    align-items: center;
}

.password-field input[type="password"],
.password-field input[type="text"] {
    width: 100%;
    padding-right: 40px;
}

.toggle-password {
    position: absolute;
    right: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 18px;
    opacity: 0.6;
}

.toggle-password:hover {
    opacity: 1;
}
.password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-wrapper input[type="password"],
.password-input-wrapper input[type="text"] {
    width: 100%;
    padding-right: 2.5rem; /* spazio per il bottone */
}

.password-toggle-btn {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    opacity: 0.7;
    display: flex;
    align-items: center;
}

.password-toggle-btn:hover {
    opacity: 1;
}

.icon-eye,
.icon-eye-off {
    width: 22px;
    height: 22px;
    stroke: #c7d6ea;
    fill: none;
    stroke-width: 2;
}

/* --- Lobby layout improvements --- */
.game-lobby__title{
  margin: 0 0 0.75rem 0;
  font-size: 1.35rem;
}

.game-lobby__meta{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-top: 0.35rem;
}

.meta-item{
  background: rgba(14, 22, 38, 0.45);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.75rem 0.85rem;
}

.meta-label{
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.meta-value{
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.meta-help{
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  opacity: 0.95;
}

/* Badges */
.badge{
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(14, 22, 38, 0.50);
  color: var(--text-main);
}

.badge--status{
  background: linear-gradient(135deg, var(--accent-alt), var(--accent));
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
}

.badge--soft{
  background: rgba(111, 147, 184, 0.14);
  color: var(--text-main);
}

/* Players grid: 4 columns (responsive) */
.avatar-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px;
  align-items:start;
  margin-top: 0.75rem;
}

@media (max-width: 520px){
  .avatar-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  .avatar-option{
    padding: 0.50rem 0.30rem;
    border-radius: 16px;
  }

  .avatar-image-wrapper{
    width: 52px;
    height: 52px;
  }

  .avatar-name{
    font-size: .74rem;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
}

/* schermi molto piccoli: ancora un filo più compatto */
@media (max-width: 380px){
  .avatar-image-wrapper{ width: 46px; height: 46px; }
  .avatar-name{ font-size: .72rem; }
}

.avatar-option{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding: 0.6rem 0.45rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(14, 22, 38, 0.45);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.avatar-option:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(170, 145, 99, 0.28);
}

.avatar-image-wrapper{
  width:64px;
  height:64px;
  border-radius:50%;
  overflow:visible;
  display:block;
  position: relative;
  box-shadow: 0 10px 18px rgba(120, 93, 45, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(14, 22, 38, 0.48);
}

.avatar-image-wrapper img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:50%;
}

.prediction-rank-medal{
  position:absolute;
  right:-4px;
  bottom:-3px;
  z-index:3;
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  font-size:.62rem;
  line-height:1;
  font-weight:900;
  color:#102033;
  border:1.5px solid rgba(255,255,255,0.88);
  box-shadow:0 4px 10px rgba(0,0,0,0.35);
}

.prediction-rank-medal--1{
  background:linear-gradient(135deg, #ffe37a, #d99a15);
}

.prediction-rank-medal--2{
  background:linear-gradient(135deg, #f2f5f8, #9aa7b5);
}

.prediction-rank-medal--3{
  background:linear-gradient(135deg, #f3b274, #9b5b24);
}

.avatar-name{
  margin-top: 0.45rem;
  font-size: 0.82rem;
  color: var(--text-main);
  opacity: 0.95;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avatar-meta{
  margin-top: 0.2rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.avatar-meta strong{
  color: var(--text-main);
}

.winner-badge,
.loser-badge{
  margin-top: 0.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  border: 1px solid transparent;
}

.winner-badge{
  border-color: rgba(63, 111, 94, 0.55);
  color: #d7fff1;
  background: rgba(63, 111, 94, 0.18);
}

.loser-badge{
  border-color: rgba(139, 44, 59, 0.55);
  color: #ffd8dd;
  background: rgba(139, 44, 59, 0.18);
}

.player-outcome-win strong{ color: #d7fff1; }
.player-outcome-lose strong{ color: #ffd8dd; }


/* Role card più evidente */
.role-block{
  display:flex;
  align-items:center;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(199,72,59,0.28);                 /* accento “vampire” soft */
  background: linear-gradient(135deg,
    rgba(255,255,255,0.78),
    rgba(255,255,255,0.50)
  );
  box-shadow: 0 18px 42px rgba(0,0,0,0.08);
}

/* immagine più “importante” */
.role-icon{
  width: 150px;
  height: 150px;
  flex: 0 0 92px;
  object-fit: contain;
  border-radius: 18px;
  padding: 5px;
  background: rgba(14, 22, 38, 0.70);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 10px 20px rgba(0,0,0,0.10),
    0 0 0 6px rgba(199,72,59,0.08);

  /* >>> FIX: annulla il clamp globale img{max-height:52px} */
  max-height: none;
  max-width: none;
}

/* testo più leggibile e “presente” */
.role-text{
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.5;
  font-weight: 600;
  color: rgba(232, 240, 250, 0.92);
}

@media (max-width: 600px){
  .role-icon{ width: 76px; height: 76px; flex-basis: 76px; }
  .role-text{ font-size: .98rem; }
}


.role-block:hover{
  box-shadow: 0 14px 30px rgba(0,0,0,0.06);
}
.role-name{
  font-weight: 900;
  color: var(--accent-strong);
}

/* Contenuto testuale ruolo */
.role-content{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Titolo ruolo */
.role-title{
  font-size: 1.08rem;
  font-weight: 900;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: #d3e4f7;
  line-height: 1.15;
}

/* Testo descrizione */
.role-text{
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.5;
  font-weight: 600;
  color: rgba(232, 240, 250, 0.92);
}

.game-play__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.game-play__actions .btn{
  margin: 0;
}

.game-play { display:flex; flex-direction:column; gap: 14px; }

.game-play__head{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.game-play__title{ margin:0; }
.game-play__meta{ display:flex; flex-wrap:wrap; gap: 8px; margin-top: 0.5rem; }
.game-play__header-actions{ display:flex; flex-wrap:wrap; gap: 10px; justify-content:flex-end; }

.game-play__grid{
  display:grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 14px;
}

.game-play__main{ min-width:0; }
.game-play__side{ min-width:0; }

@media (max-width: 980px){
  .game-play__grid{ grid-template-columns: 1fr; }
  .game-play__header-actions{ justify-content:flex-start; }
}



/* --- Create game page polish --- */
.game-create__title{
  margin: 0;
  font-size: 1.35rem;
}

/* form grid */
.form-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

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

.form-field{ display: flex; flex-direction: column; gap: 6px; }
.form-field--full{ grid-column: 1 / -1; }

.form-label{
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.form-help{
  font-size: 0.85rem;
  color: var(--text-muted);
  opacity: 0.95;
}

.form-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* --- Home (public/index.php) --- */
.game-home .hero-card{
  text-align: center;
}

.hero-title{
  margin: 0;
  font-size: 1.6rem;
}

.hero-subtitle{
  margin: 0.6rem auto 0 auto;
  max-width: 760px;
  color: var(--text-muted);
}

.hero-actions{
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.hero-info{
  margin-top: 1rem;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.prediction-page{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.prediction-help p{
  margin: 0.45rem 0 0 0;
}

.prediction-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.prediction-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.prediction-toolbar__hint{
  margin:.4rem 0 0 0;
  color:var(--text-muted);
}

.prediction-toolbar__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.prediction-table-card{
  padding:0;
  overflow:hidden;
}

.prediction-table-wrap{
  overflow-x:auto;
}

.prediction-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}

.prediction-col--player{
  width:38%;
}

.prediction-col--rank{
  width:9%;
}

.prediction-col--score{
  width:16%;
}

.prediction-col--saved{
  width:24%;
}

.prediction-col--new{
  width:38%;
}

.prediction-table thead th{
  text-align:left;
  padding:14px 16px;
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--text-muted);
  border-bottom:1px solid rgba(255,255,255,0.08);
}

.prediction-sort-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:inherit;
  text-decoration:none;
  white-space:nowrap;
}

.prediction-sort-link:hover{
  color:#eef5ff;
}

.prediction-sort-link__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:50%;
  font-size:.8rem;
  line-height:1;
  color:#eef5ff;
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.16);
}

.prediction-table--global{
  table-layout:fixed;
}

.prediction-table-card--global .prediction-table-wrap{
  overflow-x:hidden;
}

.prediction-table--global .prediction-col--player{
  width:39%;
}

.prediction-table--global .prediction-col--score{
  width:20.333%;
}

.prediction-table--global thead th{
  white-space:nowrap;
  font-size:.72rem;
}

.prediction-table--global thead th,
.prediction-table--global tbody td{
  padding-left:12px;
  padding-right:12px;
}

.prediction-table--global .prediction-player{
  min-width:0;
  gap:9px;
}

.prediction-table--global .prediction-player__avatar{
  width:40px;
  height:40px;
  flex:0 0 40px;
}

.prediction-table--global .prediction-player__name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.prediction-table--global .badge{
  padding-left:8px;
  padding-right:8px;
}

@media (max-width: 560px){
  .prediction-table--global thead th,
  .prediction-table--global tbody td{
    padding-left:5px;
    padding-right:5px;
  }

  .prediction-table--global thead th{
    font-size:.62rem;
  }

  .prediction-table--global .prediction-player{
    gap:5px;
  }

  .prediction-table--global .prediction-player__name{
    font-size:.9rem;
  }

  .prediction-table--global .prediction-player__avatar{
    width:30px;
    height:30px;
    flex-basis:30px;
  }

  .prediction-table--global .prediction-sort-link{
    gap:4px;
  }

  .prediction-table--global .prediction-sort-link__icon{
    width:14px;
    height:14px;
    font-size:.66rem;
  }

  .prediction-table--global .badge{
    padding-left:6px;
    padding-right:6px;
  }
}

@media (max-width: 700px){
  .prediction-table--global,
  .prediction-table--global thead,
  .prediction-table--global tbody,
  .prediction-table--global tr{
    display:table;
    width:100%;
  }

  .prediction-table--global thead{
    display:table-header-group;
  }

  .prediction-table--global tbody{
    display:table-row-group;
  }

  .prediction-table--global tr{
    display:table-row;
    padding:0;
  }

  .prediction-table--global th,
  .prediction-table--global td{
    display:table-cell;
    width:auto;
  }
}

.prediction-table tbody td{
  padding:14px 16px;
  vertical-align:middle;
  border-bottom:1px solid rgba(255,255,255,0.06);
}

.prediction-table tbody tr:last-child td{
  border-bottom:none;
}

.prediction-table tbody tr.is-dead{
  opacity:.72;
}

.prediction-player{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:220px;
}

.prediction-player__avatar{
  width:48px;
  height:48px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
}

.prediction-player__name{
  font-weight:800;
  color:#eef5ff;
}

.prediction-player__status,
.prediction-table__muted,
.prediction-table__date{
  color:var(--text-muted);
}

.prediction-saved-cell{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.prediction-saved-cell__date{
  font-size:.78rem;
  line-height:1.25;
  color:var(--text-muted);
}

.prediction-bonus-chip{
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(122,205,145,0.12);
  border:1px solid rgba(122,205,145,0.22);
  color:#d9f6e2;
  font-size:.75rem;
  font-weight:700;
}

.prediction-detail-link{
  color:#d9e8ff;
  font-size:.84rem;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:2px;
}

.prediction-detail-link:hover{
  color:#ffffff;
}

.prediction-input-group{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.prediction-select{
  width:100%;
  min-width:0;
  max-width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(19,31,56,0.9);
  color:#eef5ff;
  font:inherit;
}

.prediction-select:focus{
  outline:none;
  border-color:rgba(122,205,145,0.55);
  box-shadow:0 0 0 3px rgba(122,205,145,0.12);
}

.prediction-clear-btn{
  flex:0 0 auto;
  width:30px;
  height:30px;
  padding:0;
  border-radius:8px;
  border:1px solid rgba(122,205,145,0.24);
  background:rgba(255,255,255,0.05);
  color:#eef5ff;
  font-size:.82rem;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.prediction-clear-btn:hover{
  background:rgba(255,255,255,0.1);
  border-color:rgba(122,205,145,0.4);
}

.prediction-card{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.prediction-card.is-dead{
  opacity:0.86;
}

.prediction-card__head,
.prediction-card__user{
  display:flex;
  align-items:center;
  gap:12px;
}

.prediction-card__avatar{
  width:54px;
  height:54px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
}

.prediction-card__name{
  font-size:1.06rem;
  font-weight:800;
  color:#eef5ff;
}

.prediction-card__status,
.prediction-card__time,
.prediction-card__empty,
.prediction-card__locked-note{
  color: var(--text-muted);
}

.prediction-card__assigned{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.prediction-card__assigned-label{
  font-weight:700;
}

.prediction-card__actions{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.prediction-role-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.prediction-inline-form{
  margin:0;
}

.prediction-role-buttons .btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.prediction-role-button__count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  padding:2px 7px;
  border-radius:999px;
  background: rgba(255,255,255,0.14);
  font-size:0.78rem;
  font-weight:800;
}

@media (max-width: 860px){
  .prediction-toolbar{
    align-items:flex-start;
  }

  .prediction-toolbar__actions{
    width:100%;
  }

  .prediction-toolbar__actions .btn{
    flex:1 1 180px;
  }

  .prediction-table thead{
    display:none;
  }

  .prediction-table,
  .prediction-table tbody,
  .prediction-table tr,
  .prediction-table td{
    display:block;
    width:100%;
  }

  .prediction-table tbody td{
    padding:10px 14px;
    border-bottom:none;
  }

  .prediction-table tbody tr{
    padding:8px 0;
    border-bottom:1px solid rgba(255,255,255,0.08);
  }

  .prediction-select{
    width:100%;
    min-width:0;
  }
}

.home-sections{
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 980px){
  .home-sections{ grid-template-columns: 1fr; }
}

.home-section .section-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 0.5rem;
}

.section-title{
  margin: 0;
  font-size: 1.05rem;
}

.game-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.game-item{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(14, 22, 38, 0.45);
}

.game-main{
  min-width: 0;
}

.game-name{
  font-weight: 800;
  margin-bottom: 0.35rem;
}

.game-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.game-actions{
  display: flex;
  flex-shrink: 0;
  gap: 8px;
  align-items: center;
}

/* Home: meglio 1 colonna su schermi piccoli/medi */
.home-sections{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1100px){
  .home-sections{ grid-template-columns: 1fr; }
}

/* game-item: evita sovrapposizioni */
.game-item{
  flex-direction: column;
  align-items: stretch;
}

.game-actions{
  justify-content: flex-start;
}

/* evita che testi lunghi sfondino */
.game-name, .hero-subtitle, .hero-info p{
  word-break: break-word;
}

.game-main{ min-width: 0; }

/* --- Compact game rows (home lists) --- */
.game-rows{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top: 0.5rem;
}

.game-row{
  display:grid;
  grid-template-columns: 1.2fr 1fr auto;
  gap:12px;
  align-items:center;
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(14, 22, 38, 0.45);
}

.gr-name{
  font-weight: 800;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gr-status{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:flex-start;
}

.gr-action{
  display:flex;
  justify-content:flex-end;
}

/* Mobile: riga “a blocchi” */
@media (max-width: 680px){
  .game-row{
    grid-template-columns: 1fr;
    align-items: start;
  }
  .gr-action{ justify-content:flex-start; }
}

/* --- Admin dashboard --- */
.admin-card-head{
  display:flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-form{
  margin-top: 0.75rem;
}

.admin-switch{
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 0.95rem;
  margin: 0;
}

.admin-switch input{ transform: translateY(1px); }

.admin-help{
  margin: 0.5rem 0 0.75rem 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  opacity: 0.95;
}

/* Admin rows: stacked layout (info top, actions bottom) */
.admin-row--stack{
  display:flex;
  flex-direction:column;
  gap: 10px;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(14, 22, 38, 0.45);
}

.admin-row--stack .ar-top{
  display:flex;
  justify-content: space-between;
  align-items:flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-row--stack .ar-name{
  font-weight: 800;
  line-height: 1.2;
  white-space: normal;
}

.admin-row--stack .ar-sub{
  margin-top: 0.25rem;
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.admin-row--stack .ar-actions{
  display: flex;
  align-items: center;
  gap: 8px;

  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}


.admin-row--stack .ar-actions{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content:flex-start;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

/* bottoni un filo più compatti solo in admin */
.admin-row--stack .btn{
  padding: 0.35rem 0.65rem;
  font-size: 0.75rem;
}

.ar-name{
  font-weight: 800;
  line-height: 1.2;
  white-space: normal;
  overflow: visible;
}

.ar-sub{
  margin-top: 0.25rem;
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.ar-status{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:flex-start;
}

.ar-actions{
  display:flex;
  gap: 8px;
  justify-content:flex-end;
  flex-wrap: wrap;
}

/* mobile */
@media (max-width: 760px){
  .admin-row{
    grid-template-columns: 1fr;
    align-items: start;
  }

  .ar-actions{
    justify-content: flex-start;
    margin-top: 0.5rem;
  }

}

/* Admin: uniforma PERFETTAMENTE <a> e <button> */
.admin-row--stack .btn,
.admin-row--stack a.btn,
.admin-row--stack button.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.35rem 0.65rem;
  font-size: 0.75rem;

  height: 30px;          /* <-- CHIAVE */
  line-height: 1;        /* <-- CHIAVE */

  box-sizing: border-box;
  vertical-align: middle;
}

/* stessa larghezza visiva */
.admin-row--stack .btn{
  min-width: 90px;
}


/* Admin actions: allineamento pixel-perfect */
.admin-row--stack .ar-actions{
  display: flex;
  align-items: center;
  gap: 8px;

  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

/* IMPORTANTISSIMO: i form non devono aggiungere margini/line-height strani */
.admin-row--stack .ar-actions form{
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
}

/* Normalizza link e button al millimetro */
.admin-row--stack .ar-actions a.btn,
.admin-row--stack .ar-actions button.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 30px;
  line-height: 30px; /* <-- invece di 1: stessa baseline */
  padding: 0 0.65rem;

  font-size: 0.75rem;
  box-sizing: border-box;
  vertical-align: middle;
}

/* stessa larghezza visiva */
.admin-row--stack .ar-actions .btn{
  min-width: 90px;
}

/* --- Home structure --- */
.home-hero{
  text-align: center;
}

.home-hero__title{
  margin: 0;
  font-size: 1.65rem;
}

.home-hero__subtitle{
  margin: 0.65rem auto 0 auto;
  max-width: 760px;
  color: var(--text-muted);
}

.home-hero__actions{
  margin-top: 1.05rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.home-hero__note{
  margin-top: 0.9rem;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  color: var(--text-muted);
}

.home-lists{
  margin-top: 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.home-section__head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}

.home-section__title{
  margin: 0;
  font-size: 1.1rem;
}

/* Chat layout */
.chat-panel { padding: 1rem; }
.chat-panel__head { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.chat-panel__participants { margin: .5rem 0 0; font-size: .9rem; color: var(--text-muted); }

.chat-composer{
  position: sticky;
  top: 0;
  z-index: 5;
  margin-top: .75rem;
  padding-top: .75rem;
  background: rgba(14, 22, 38, 0.52);
  backdrop-filter: blur(4px);
}

.chat-textarea{
  width: 100%;
  resize: vertical;
  min-height: 70px;
}

.chat-sendbar{
  margin-top: .5rem;
  display:flex;
  justify-content:flex-end;
}

.chat-messages{ margin-top: .75rem; }

.chat-msg{
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 10px 12px;
  margin: 10px 0;
  background: rgba(14, 22, 38, 0.45);
}

.chat-msg.mine{
  margin-left: 40px;
  background: rgba(14, 22, 38, 0.60);
  box-shadow: 0 0 0 2px rgba(80,160,255,.12) inset;
}


.chat-msg-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: .35rem;
}


.chat-avatar{
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(14, 22, 38, 0.56);
  object-fit: cover;
}

.chat-nick{
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.chat-time{
  font-size: .8rem;
  opacity: .7;
  white-space: nowrap;
}

.quote-box{
  margin-top: .35rem;
  padding: .5rem .6rem;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  background: rgba(120, 160, 220, 0.18);
}

.quote-box-title{ font-size: .85rem; opacity: .85; margin-bottom: .2rem; }
.quote-box-text{ font-size: .9rem; opacity: .9; }

.quote-btn{ font-size: .85rem; text-decoration:none; font-weight:800; }


.game-chat-page{ display:flex; flex-direction:column; gap: 14px; }

.chat-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.chat-head__actions{ display:flex; gap:10px; flex-wrap:wrap; }

.chat-tabs{
  margin-top: .85rem;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.chat-panel{ padding: 1rem; }

.chat-panel__head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.chat-panel__participants{
  font-size: .9rem;
  color: var(--text-muted);
}

.chat-composer{
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid rgba(218,194,149,0.6);
}

.chat-textarea{
  width: 100%;
  resize: vertical;
  min-height: 74px;
}

.chat-sendbar{
  margin-top: .5rem;
  display:flex;
  justify-content:flex-end;
}

.chat-messages{ margin-top: .9rem; }

.chat-msg{
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 10px 12px;
  margin: 10px 0;
  background: rgba(14, 22, 38, 0.45);
}

.chat-msg.mine{
  margin-left: 40px;
  background: rgba(14, 22, 38, 0.60);
  box-shadow: 0 0 0 2px rgba(80,160,255,.12) inset;
}

.chat-msg-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: .35rem;
}


.chat-avatar{
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(14, 22, 38, 0.56);
  object-fit: cover;
}

.chat-nick{
  font-weight: 900;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.chat-time{ font-size: .8rem; opacity: .7; white-space: nowrap; }

.quote-box{
  margin-top: .35rem;
  padding: .5rem .6rem;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  background: rgba(120, 160, 220, 0.18);
}

.quote-btn{ font-size: .85rem; text-decoration:none; font-weight:800; }

/* Quote preview (reply) */
.quote-preview{
  margin: .75rem 0;
  padding: .65rem .75rem;
  border-radius: 14px;
  border: 1px dashed rgba(218,194,149,0.95);
  background: rgba(14, 22, 38, 0.45);
}

.quote-preview-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: .35rem;
}

.quote-preview-title{
  font-weight: 900;
}

.quote-preview-text{
  font-size: .92rem;
  opacity: .9;
  white-space: pre-wrap;
  max-height: 90px;
  overflow: auto;
  padding-top: .25rem;
  border-top: 1px solid rgba(218,194,149,0.5);
}

.quote-preview-close{
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255,255,255,0.9);
  cursor: pointer;
  font-weight: 900;
  line-height: 30px;
}
.chat-msg.unread{
  border-color: rgba(199,72,59,.45);
  background: rgba(199,72,59,.05);
  box-shadow: 3px 0 0 rgba(199,72,59,.35) inset;
}
.chat-msg.unread .chat-time{
  font-weight: 900;
}

.quote-preview-close{
  color: #e8eef6 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 30px !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.game-chat-new-page{
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.chat-checklist{
  margin-top: .35rem;
  max-height: 240px;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: .6rem .7rem;
  background: rgba(120, 160, 220, 0.18);
}

.chat-checkitem{
  display:flex;
  align-items:center;
  gap: .55rem;
  padding: .35rem .25rem;
  border-radius: 10px;
  font-size: .92rem;
  cursor: pointer;
}

.chat-checkitem:hover{
  background: rgba(14, 22, 38, 0.45);
}

.chat-new-actions{
  margin-top: .9rem;
  display:flex;
  justify-content:flex-end;
}

.chat-tab-badge{
  margin-left: .5rem;
  padding: .12rem .45rem;
  border-radius: 999px;
  font-size: .78rem;
  line-height: 1.1;
  vertical-align: middle;
}

/* Bottoni chat più compatti */
.btn.chat-btn{
  padding: 0.35rem 0.85rem;   /* ↓ altezza */
  font-size: 0.9rem;
  line-height: 1.2;
}

/* Badge numerico leggermente più piccolo */
.chat-tab-badge{
  padding: 0.1rem 0.4rem;
  font-size: 0.72rem;
}

@media (max-width: 600px){
  .btn.chat-btn{
    padding: 0.3rem 0.75rem;
    font-size: 0.85rem;
  }
}

/* Composer moderno */
.chat-composer{
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid rgba(218,194,149,0.6);
}

.chat-composer .composer-modern{
  border: 1px solid rgba(218,194,149,0.85);
  background: rgba(255,255,255,0.60);
  border-radius: 18px;
  padding: .7rem .75rem;
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}

.chat-composer .chat-textarea{
  width: 100%;
  border: none;
  outline: none;
  resize: vertical;
  min-height: 84px;
  background: transparent;
  font-size: 0.95rem;
  line-height: 1.35;
  padding: .15rem .15rem .35rem;
}

.chat-composer .chat-textarea::placeholder{
  opacity: .7;
}

.chat-composer .composer-actions{
  display:flex;
  align-items:center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: .45rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.chat-composer .composer-modern:focus-within{
  box-shadow: 0 0 0 3px rgba(199,72,59,0.12), 0 12px 28px rgba(0,0,0,0.07);
  border-color: rgba(199,72,59,0.30);
}

/* Mobile: un po’ più compatto */
@media (max-width: 600px){
  .chat-composer .chat-textarea{ min-height: 72px; }
}

.vampire-companion{
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.vampire-name{
  font-weight: 700;
}
.nav-link-muted{
  opacity: .85;
}
.nav-link-muted:hover{
  opacity: 1;
}

.game-fake-setup-page{
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.notice{
  border: 1px solid rgba(199,72,59,0.25);
  background: rgba(199,72,59,0.06);
  border-radius: 14px;
  padding: .75rem .85rem;
}

.meta-row{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 700px){
  .meta-row{ grid-template-columns: 1fr; }
}

.checklist{
  margin-top: .35rem;
  max-height: 240px;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: .6rem .7rem;
  background: rgba(120, 160, 220, 0.18);
}

.checkitem{
  display:flex;
  align-items:center;
  gap: .55rem;
  padding: .35rem .25rem;
  border-radius: 10px;
  cursor: pointer;
}

.checkitem:hover{ background: rgba(14, 22, 38, 0.45); }

.fake-row{
  display:flex;
  gap: 10px;
  align-items:center;
  margin-top: .55rem;
  flex-wrap: wrap;
}

.fake-select{
  flex: 1;
  min-width: 220px;
}

.fake-label{
  min-width: 180px;
  font-weight: 800;
}


/* =====================================================
   Game phase banner (NOTTE / GIORNO) — no images
   Aggiunge un “banner” riconoscibile per fase, con icone
   e pattern fatti via CSS (stelle/nuvole).
   ===================================================== */

/* Base banner */
h3.phase-banner{
  margin: 0 0 .55rem 0;
  padding: .72rem 2.9rem .72rem .95rem; /* spazio a destra per icona */
  border-radius: 18px;
  border: 1px solid rgba(203,234,255,0.16);
  position: relative;
  overflow: hidden;
  color: #f5fbff;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 10px rgba(0,0,0,0.38);
  box-shadow: 0 14px 34px rgba(0,0,0,0.34);
}

/* NOTTE */
h3.phase-banner--night{
  background:
    radial-gradient(circle at 18% 25%, rgba(203,234,255,0.14) 0, transparent 46%),
    linear-gradient(135deg, rgba(14,22,38,0.92), rgba(24,42,69,0.72));
  border-color: rgba(203,234,255,0.18);
}

/* pattern stelle (overlay) */
h3.phase-banner--night::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(rgba(203,234,255,0.55) 1px, transparent 1.6px),
    radial-gradient(rgba(203,234,255,0.28) 1px, transparent 1.7px);
  background-size: 26px 26px, 42px 42px;
  background-position: 0 0, 10px 14px;
  opacity: 0.18;
  pointer-events:none;
}

/* luna */
h3.phase-banner--night::before{
  content:"";
  position:absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,
    rgba(255,255,255,0.95) 0%,
    rgba(203,234,255,0.70) 45%,
    rgba(203,234,255,0.10) 70%,
    rgba(203,234,255,0.0) 78%);
  box-shadow: 0 0 18px rgba(203,234,255,0.20);
  opacity: 0.95;
  pointer-events:none;
}

/* GIORNO */
h3.phase-banner--day{
  background:
    radial-gradient(circle at 22% 22%, rgba(255,220,120,0.28) 0, transparent 52%),
    radial-gradient(circle at 60% 10%, rgba(255,255,255,0.10) 0, transparent 55%),
    linear-gradient(135deg, rgba(38,80,120,0.92), rgba(26,64,110,0.78));
  border-color: rgba(255,210,110,0.34);
}

/* sole */
h3.phase-banner--day::before{
  content:"";
  position:absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,
    rgba(255,255,255,1) 0%,
    rgba(255,220,120,1) 30%,
    rgba(246,195,74,0.75) 55%,
    rgba(246,195,74,0.0) 78%);
  box-shadow:
    0 0 22px rgba(255,210,110,0.36),
    0 0 46px rgba(255,210,110,0.18);
  opacity: 0.98;
  pointer-events:none;
}

/* nuvole (overlay leggero) */
h3.phase-banner--day::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 22% 58%, rgba(255,255,255,0.18) 0 18px, transparent 19px),
    radial-gradient(circle at 32% 56%, rgba(255,255,255,0.16) 0 22px, transparent 23px),
    radial-gradient(circle at 46% 60%, rgba(255,255,255,0.14) 0 16px, transparent 17px),
    radial-gradient(circle at 70% 50%, rgba(255,240,210,0.12) 0 18px, transparent 19px);
  filter: blur(0.2px);
  opacity: 0.66;
  pointer-events:none;
}

/* micro-animazione (molto soft) */
@media (prefers-reduced-motion: no-preference){
  h3.phase-banner--night::after{ animation: phaseDrift 10s ease-in-out infinite; }
  h3.phase-banner--day::after{ animation: phaseDrift 14s ease-in-out infinite; }

  @keyframes phaseDrift{
    0%, 100% { transform: translateX(0); opacity: 0.50; }
    50% { transform: translateX(-6px); opacity: 0.62; }
  }
}

/* ---------- GIORNO: molto più chiaro + testo nero ---------- */
h3.phase-banner--day{
  color: #0b1220;                 /* testo nero/blu scuro */
  text-shadow: none;              /* niente glow sul testo (giorno) */
  border-color: rgba(20, 40, 70, 0.18);
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.85) 0, transparent 55%),
    linear-gradient(135deg,
      rgba(235, 248, 255, 0.96),
      rgba(203, 233, 255, 0.92)
    );
}

/* Sole più acceso e splendente */
h3.phase-banner--day::before{
  width: 34px;
  height: 34px;
  background: radial-gradient(circle at 35% 35%,
    rgba(255,255,255,0.98) 0%,
    rgba(255,235,140,0.98) 28%,
    rgba(255,200,40,0.98) 52%,
    rgba(255,200,40,0.28) 72%,
    rgba(255,200,40,0.00) 82%);
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.32),
    0 0 22px rgba(255,215,90,0.55),
    0 0 44px rgba(255,215,90,0.35);
}

/* Nuvole bianche (al posto dei cerchi) */
h3.phase-banner--day::after{
  opacity: 0.95;
  background:
    radial-gradient(closest-side at 16% 58%, rgba(255,255,255,0.85) 0 20px, rgba(255,255,255,0) 21px),
    radial-gradient(closest-side at 23% 54%, rgba(255,255,255,0.78) 0 26px, rgba(255,255,255,0) 27px),
    radial-gradient(closest-side at 34% 60%, rgba(255,255,255,0.72) 0 18px, rgba(255,255,255,0) 19px),

    radial-gradient(closest-side at 52% 48%, rgba(255,255,255,0.80) 0 22px, rgba(255,255,255,0) 23px),
    radial-gradient(closest-side at 60% 52%, rgba(255,255,255,0.72) 0 28px, rgba(255,255,255,0) 29px),
    radial-gradient(closest-side at 70% 50%, rgba(255,255,255,0.66) 0 16px, rgba(255,255,255,0) 17px),

    radial-gradient(closest-side at 82% 62%, rgba(255,255,255,0.78) 0 20px, rgba(255,255,255,0) 21px),
    radial-gradient(closest-side at 88% 58%, rgba(255,255,255,0.70) 0 26px, rgba(255,255,255,0) 27px);
  filter: blur(0.6px);
}


/* ---------- NOTTE: stelle sparse (non in griglia) ---------- */
h3.phase-banner--night::after{
  opacity: 0.32;
  background-image:
    radial-gradient(circle at 8% 22%, rgba(203,234,255,0.95) 0 1px, transparent 1.6px),
    radial-gradient(circle at 14% 70%, rgba(203,234,255,0.55) 0 1px, transparent 1.8px),
    radial-gradient(circle at 18% 38%, rgba(203,234,255,0.75) 0 1px, transparent 1.7px),
    radial-gradient(circle at 23% 18%, rgba(203,234,255,0.60) 0 1px, transparent 1.8px),
    radial-gradient(circle at 27% 58%, rgba(203,234,255,0.85) 0 1px, transparent 1.6px),

    radial-gradient(circle at 33% 30%, rgba(203,234,255,0.50) 0 1px, transparent 1.9px),
    radial-gradient(circle at 36% 76%, rgba(203,234,255,0.70) 0 1px, transparent 1.7px),
    radial-gradient(circle at 41% 14%, rgba(203,234,255,0.90) 0 1px, transparent 1.6px),
    radial-gradient(circle at 45% 46%, rgba(203,234,255,0.55) 0 1px, transparent 1.9px),
    radial-gradient(circle at 49% 66%, rgba(203,234,255,0.80) 0 1px, transparent 1.7px),

    radial-gradient(circle at 56% 24%, rgba(203,234,255,0.62) 0 1px, transparent 1.8px),
    radial-gradient(circle at 60% 80%, rgba(203,234,255,0.78) 0 1px, transparent 1.7px),
    radial-gradient(circle at 64% 52%, rgba(203,234,255,0.58) 0 1px, transparent 1.9px),
    radial-gradient(circle at 70% 18%, rgba(203,234,255,0.92) 0 1px, transparent 1.6px),
    radial-gradient(circle at 74% 44%, rgba(203,234,255,0.66) 0 1px, transparent 1.8px),

    radial-gradient(circle at 79% 72%, rgba(203,234,255,0.86) 0 1px, transparent 1.6px),
    radial-gradient(circle at 84% 28%, rgba(203,234,255,0.56) 0 1px, transparent 1.9px),
    radial-gradient(circle at 88% 54%, rgba(203,234,255,0.74) 0 1px, transparent 1.7px),
    radial-gradient(circle at 92% 18%, rgba(203,234,255,0.60) 0 1px, transparent 1.9px),
    radial-gradient(circle at 95% 76%, rgba(203,234,255,0.88) 0 1px, transparent 1.6px);
  background-size: auto; /* niente pattern ripetuto */
  background-repeat: no-repeat;
}

/* (opzionale) twinkle leggerissimo per le stelle */
@media (prefers-reduced-motion: no-preference){
  h3.phase-banner--night::after{ animation: starTwinkle 6s ease-in-out infinite; }
  @keyframes starTwinkle{
    0%, 100% { opacity: 0.26; }
    50% { opacity: 0.38; }
  }
}

/* Bottoni: torna a scuro con testo chiaro */
button,
.btn{
  color: #eef6ff !important;
  background: linear-gradient(135deg, rgba(34, 56, 86, 0.92), rgba(18, 34, 56, 0.96)) !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.38),
    0 0 0 1px rgba(255,255,255,0.14) !important;
}

button:hover,
.btn:hover{
  filter: brightness(1.06) !important;
}

.btn:active,
button:active{
  filter: brightness(0.98) !important;
}

/* Ghost/secondary: scuro ma più “soft” */
.btn-ghost{
  color: #cfe3fb !important;
  background: rgba(14, 22, 38, 0.55) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: none !important;
}

.btn-ghost:hover{
  background: rgba(18, 30, 52, 0.70) !important;
}

/* Card personaggi (le tessere nella griglia): più scure */
.avatar-option{
  background: rgba(14, 22, 38, 0.55) !important;
  border-color: rgba(255,255,255,0.14) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.35) !important;
}

/* Testi nelle card personaggi */
.avatar-meta,
.avatar-name{
  color: #e8eef6 !important;
}

/* Bottoni dentro le card personaggi (es. "Colpisci") scuri e leggibili */
.avatar-option .btn,
.avatar-option button{
  color: #eef6ff !important;
  background: linear-gradient(135deg, rgba(40, 68, 104, 0.95), rgba(24, 46, 78, 0.98)) !important;
}

/* FIX: card "Il tuo ruolo" (role-block) torna scura e leggibile */
.role-block{
  background: linear-gradient(135deg,
    rgba(14, 22, 38, 0.70),
    rgba(24, 42, 69, 0.55)
  ) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow:
    0 16px 36px rgba(0,0,0,0.38),
    inset 0 0 0 1px rgba(199,72,59,0.16) !important; /* accento “vampire” soft */
}

/* hover coerente con tema scuro */
.role-block:hover{
  box-shadow:
    0 18px 42px rgba(0,0,0,0.44),
    inset 0 0 0 1px rgba(199,72,59,0.20) !important;
}

/* testo dentro: assicurati che resti leggibile */
.role-title{ color: #eaf2ff !important; }
.role-text{ color: rgba(232,240,250,0.92) !important; }

/* ==========================
   CHAT: composer scuro e leggibile
   (override solo colori)
   ========================== */

.chat-composer .composer-modern{
  background: linear-gradient(135deg,
    rgba(14, 22, 38, 0.78),
    rgba(24, 42, 69, 0.62)
  ) !important;
  border-color: rgba(255,255,255,0.14) !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,0.38),
    inset 0 0 0 1px rgba(111,147,184,0.14) !important;
}

.chat-textarea{
  color: #e8eef6 !important;
  caret-color: #e8eef6 !important;
}

.chat-textarea::placeholder{
  color: rgba(182,196,214,0.70) !important;
}

/* linea sopra il bottone nella composer (se resta troppo “chiara”) */
.chat-composer .composer-actions{
  border-top-color: rgba(255,255,255,0.10) !important;
}

/* =====================================================
   HOME (mobile): lista partite più ordinata
   - Nome + badge sulla stessa riga
   - Azioni sotto, bottone full-width
   ===================================================== */

@media (max-width: 520px){

  /* Struttura "game-item" (Home) */
  .game-item{
    gap: 10px; /* solo spacing, non layout */
  }

  .game-main{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  .game-name{
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0 !important;
    line-height: 1.15;
    /* se il titolo è lungo, tronca con ... invece di spaccare tutto */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .game-meta{
    flex: 0 0 auto;
    margin-top: 0 !important;
    justify-content: flex-end;
  }

  /* badge non andare a capo sillabando */
  .game-meta .badge{
    white-space: nowrap;
  }

  .game-actions{
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* bottone principale più comodo su smartphone */
  .game-actions .btn,
  .game-actions button{
    width: 100%;
    justify-content: center;
  }

  /* --- Struttura "game-row" (se usata in qualche lista) --- */
  .game-row{
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "name status"
      "action action";
    align-items: center !important;
  }
  .game-row .gr-name{ grid-area: name; }
  .game-row .gr-status{ grid-area: status; justify-content: flex-end; }
  .game-row .gr-action{ grid-area: action; }
  .game-row .gr-action .btn,
  .game-row .gr-action button{
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 520px){

  /* più spazio laterale per evitare "tagli" */
  .site-header{
    padding-left: .85rem !important;
    padding-right: .85rem !important;
  }

  /* la riga dei controlli diventa “a capo” */
  .nav-row{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    justify-content: center;
  }

  /* menu principale occupa tutta la riga 1 */
  .main-nav{
    width: 100%;
    max-width: 100%;
    justify-content: center;
    flex-wrap: wrap;          /* <-- qui si vede tutto */
    row-gap: .35rem;
    column-gap: .35rem;
    padding: .22rem .28rem;
  }

  .nav-link{
    white-space: nowrap;
  }

  /* toggle lingue resta sotto, centrato e visibile */
  .lang-toggle{
    width: 100%;
    margin-top: .15rem;
  }

  .lang-toggle__wrap{
    max-width: 100%;
    justify-content: center;
  }
}
/* =====================================================
   LOBBY (mobile): griglia giocatori a 4 colonne
   - riduce avatar, padding, font e bottoni
   - nessuna scrollbar
   ===================================================== */

@media (max-width: 520px){

  /* Se la griglia usa CSS Grid */
  .players-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  /* Se invece usa flex con wrap (fallback) */
  .players-grid.is-flex,
  .players-grid.flex{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .players-grid.is-flex .player-card,
  .players-grid.flex .player-card{
    width: calc((100% - 30px) / 4) !important; /* 4 colonne con gap 10px */
  }

  /* Card giocatore più compatta */
  .player-card,
  .player-tile,
  .lobby-player{
    padding: 10px !important;
    border-radius: 16px !important;
  }

  /* Avatar più piccolo */
  .player-card img,
  .player-avatar,
  .avatar-img{
    width: 56px !important;
    height: 56px !important;
    border-radius: 14px !important;
  }

  /* Nome giocatore più piccolo e su 1 riga */
  .player-name,
  .player-card .nickname,
  .lobby-player-name{
    font-size: 0.78rem !important;
    line-height: 1.05 !important;
    margin-top: 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Bottoni dentro le card (se presenti) più compatti */
  .player-card .btn,
  .player-card button,
  .player-tile .btn,
  .player-tile button{
    padding: 6px 10px !important;
    font-size: 0.78rem !important;
    border-radius: 999px !important;
  }

  /* Eventuali badge/etichette più piccole */
  .player-card .badge,
  .player-tile .badge{
    font-size: 0.70rem !important;
    padding: 2px 6px !important;
  }
}
/* =====================================================
   HEADER (mobile): menu su 2 righe, lingue accanto a Logout
   - NO scrollbar
   ===================================================== */
@media (max-width: 520px){

  .site-header{
    padding-left: .85rem !important;
    padding-right: .85rem !important;
  }

  /* una riga esterna, senza wrap tra main-nav e lingue */
  .nav-row{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    flex-wrap: nowrap; /* <-- importante: lingue non vanno sotto */
  }

  /* Il menu può andare a capo internamente */
  .main-nav{
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;          /* <-- qui si crea la seconda riga */
    justify-content: center;
    gap: .30rem;
    padding: .22rem .24rem;
  }

  /* piccola riduzione (non “troppo”) solo per farci stare tutto */
  .nav-link{
    padding: .28rem .66rem;
    font-size: .80rem;
    white-space: nowrap;
  }

  /* Lingue: a destra, stile “pill” coerente, vicino al logout */
  .lang-toggle{
    flex: 0 0 auto;
    margin: 0 !important;
  }

  .lang-toggle__wrap{
    background: rgba(14,22,38,0.45) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    padding: .18rem !important;
  }

  .lang-toggle__btn{
    padding: .26rem .58rem !important;
    font-size: .78rem !important;
  }
}

/* =====================================================
   MOBILE: Header UX (NO scrollbar)
   - menu può andare su 2 righe
   - Logout + Lingue restano “insieme” e in fondo
   ===================================================== */
@media (max-width: 520px){

  .site-header{
    padding-left: .85rem !important;
    padding-right: .85rem !important;
  }

  /* La pill nav deve poter andare a capo senza tagliare */
  .main-nav{
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;              /* <-- fondamentale */
    justify-content: center;
    align-items: center;
    gap: .30rem;
    padding: .22rem .28rem;
  }

  .nav-link{
    padding: .28rem .66rem;       /* poco più compatto */
    font-size: .80rem;
    white-space: nowrap;
  }

  /* Logout (nav-link-accent) verso la fine */
  .main-nav .nav-link-accent{
    order: 190;
  }

  /* Lingue subito dopo Logout e “pill” coerente */
  .main-nav .lang-toggle{
    order: 200;
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    padding: .14rem;
    border-radius: 999px;
    background: rgba(14,22,38,0.40);
    border: 1px solid rgba(255,255,255,0.14);
  }

  .main-nav .lang-toggle__btn{
    padding: .26rem .58rem;
    font-size: .78rem;
    border-radius: 999px;
    text-decoration: none;
  }

  /* nel tuo header l’attivo è lang-toggle__btn--active (span) */
  .main-nav .lang-toggle__btn--active{
    background: rgba(255,255,255,0.12);
    color: var(--text-main);
  }
}


/* =====================================================
   LOBBY (mobile): avatar dentro le caselle (4 colonne)
   ===================================================== */
@media (max-width: 520px){

  .avatar-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .avatar-option{
    padding: 10px 8px !important;
  }

  /* wrapper più piccolo + taglio overflow */
  .avatar-image-wrapper{
    width: 52px !important;
    height: 52px !important;
    overflow: visible !important;
  }

  /* immagine sempre contenuta */
  .avatar-image-wrapper img{
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* nome più compatto */
  .avatar-name{
    font-size: .74rem !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}
/* =====================================================
   HEADER (mobile): Logout + IT/EN sulla stessa riga (no scrollbar)
   ===================================================== */
@media (max-width: 520px){

  /* la pill nav può andare a capo */
  .main-nav{
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .35rem;
  }

  /* link un filo più compatti */
  .nav-link{
    padding: .28rem .66rem;
    font-size: .80rem;
    white-space: nowrap;
  }

  /* IMPORTANTISSIMO: lang-toggle NON deve essere full width */
  .lang-toggle{
    width: auto !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  /* anche logout non deve “stirarsi” */
  .nav-link-accent{
    flex: 0 0 auto !important;
  }

  /* stile IT/EN come mini-pill accanto a Logout */
  .lang-toggle__wrap{
    display: inline-flex !important;
    gap: .18rem !important;
    padding: .16rem !important;
    border-radius: 999px !important;
    background: rgba(14,22,38,0.45) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
  }

  .lang-toggle__btn,
  .lang-toggle__btn--active{
    padding: .26rem .56rem !important;
    font-size: .78rem !important;
    border-radius: 999px !important;
  }
}
/* =====================================================
   INDEX: layout righe partita (PC + mobile)
   ===================================================== */

/* JOINABLE: titolo / stato+giocatori / bottone (sempre su 3 righe) */
.game-rows--joinable .game-row{
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-areas:
    "name"
    "status"
    "action" !important;
  align-items: start !important;
}

.game-rows--joinable .gr-name{
  grid-area: name;
  white-space: normal !important;     /* niente ellissi: si legge */
  overflow: visible !important;
  text-overflow: unset !important;
  line-height: 1.15;
}

.game-rows--joinable .gr-status{
  grid-area: status;
}

.game-rows--joinable .gr-action{
  grid-area: action;
  justify-content: flex-start !important;
}

.game-rows--joinable .gr-action .btn,
.game-rows--joinable .gr-action button{
  width: 100%;
  justify-content: center;
}


/* ACTIVE: titolo sopra, sotto "stato accanto al bottone" */
.game-rows--active .game-row{
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-areas:
    "name name"
    "status action" !important;
  align-items: center !important;
  row-gap: 10px;
}

.game-rows--active .gr-name{
  grid-area: name;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  line-height: 1.15;
}

.game-rows--active .gr-status{
  grid-area: status;
}

.game-rows--active .gr-action{
  grid-area: action;
  justify-content: flex-end !important;
}

/* se su schermi molto stretti non ci sta, lascia che vada a capo senza rompere */
@media (max-width: 420px){
  .game-rows--active .game-row{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "name"
      "action"
      "status" !important;
  }
  .game-rows--active .gr-action .btn{ width: 100%; justify-content:center; }
}
/* =====================================================
   INDEX (JOINABLE): bottone + stato affiancati a sinistra
   - titolo sopra
   - riga: [bottone][badge stato]
   - sotto: giocatori
   ===================================================== */

.game-rows--joinable .game-row{
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-areas:
    "name  name"
    "action status"
    "players players" !important;
  align-items: center !important;
  column-gap: 12px;
  row-gap: 10px;
}

.game-rows--joinable .gr-name{
  grid-area: name;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  line-height: 1.15;
}

/* bottone a sinistra */
.game-rows--joinable .gr-action{
  grid-area: action;
  justify-content: flex-start !important;
}

/* bottone non full-width in joinable (serve affiancarlo allo stato) */
.game-rows--joinable .gr-action .btn,
.game-rows--joinable .gr-action button{
  width: auto !important;
  padding-left: 18px;
  padding-right: 18px;
}

/* stato accanto al bottone */
.game-rows--joinable .gr-status{
  grid-area: status;
  justify-content: flex-start !important;
  white-space: nowrap;
}

/* giocatori sotto (se c’è un badge per giocatori nella status row, prova a intercettarlo così) */
.game-rows--joinable .gr-players{
  grid-area: players;
}

/* se il tuo markup NON ha gr-players e “Giocatori: x/y” è dentro gr-status,
   lo rendiamo comunque “a capo” sotto lo stato quando serve */
.game-rows--joinable .gr-status{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* su schermi molto stretti: bottone può prendere tutta la riga */
@media (max-width: 380px){
  .game-rows--joinable .game-row{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "name"
      "action"
      "status"
      "players" !important;
  }
  .game-rows--joinable .gr-action .btn{ width: 100% !important; justify-content:center; }
}
/* =====================================================
   INDEX (ACTIVE): stato accanto al bottone (PC + mobile)
   ===================================================== */

/* --- PC / generale --- */
.game-rows--active .game-row{
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  grid-template-areas:
    "name  name"
    "action status" !important;
  align-items: center !important;
  column-gap: 12px;
  row-gap: 10px;
}

.game-rows--active .gr-name{
  grid-area: name;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  line-height: 1.15;
}

.game-rows--active .gr-action{
  grid-area: action;
  justify-content: flex-start !important;
}

.game-rows--active .gr-action .btn,
.game-rows--active .gr-action button{
  width: auto !important;
  padding: 8px 14px !important;
  font-size: .86rem !important;
}

.game-rows--active .gr-status{
  grid-area: status;
  justify-content: flex-start !important;
  white-space: nowrap;
}


/* --- MOBILE: forza lo stesso layout anche sotto 520px --- */
@media (max-width: 520px){
  .game-rows--active .game-row{
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    grid-template-areas:
      "name  name"
      "action status" !important;
  }

  /* bottone ancora un filo più compatto su mobile */
  .game-rows--active .gr-action .btn,
  .game-rows--active .gr-action button{
    padding: 7px 12px !important;
    font-size: .84rem !important;
  }
}

/* schermi molto stretti: se non ci sta, va sotto ordinato */
@media (max-width: 380px){
  .game-rows--active .game-row{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "name"
      "action"
      "status" !important;
  }
  .game-rows--active .gr-action .btn,
  .game-rows--active .gr-action button{
    width: 100% !important;
    justify-content: center !important;
  }
}
/* =====================================================
   FIX ACTIVE (mobile): badge stato accanto al bottone
   - annulla width:100% del bottone
   ===================================================== */
@media (max-width: 520px){

  /* forza la riga action+status */
  .game-rows--active .game-row{
    display: grid !important;
    grid-template-columns: auto auto  !important;
    grid-template-areas:
      "name name"
      "action status" !important;
    justify-content: start !important;
    align-items: center !important;
    column-gap: 12px;
    row-gap: 10px;
  }

  /* IMPORTANT: bottone NON full width */
  .game-rows--active .gr-action .btn,
  .game-rows--active .gr-action button{
    width: auto !important;
    display: inline-flex !important;
    justify-content: center !important;
    padding: 7px 12px !important;
    font-size: .84rem !important;
  }

  /* stato vicino e non “a blocco” */
  .game-rows--active .gr-status{
    justify-content: flex-start !important;
    width: auto !important;
    display: inline-flex !important;
    white-space: nowrap;
  }
}
/* Logo header: banner largo e basso */
.header-bar { width: 100%; }

.brand { width: 100%; display: flex; justify-content: center; }

.brand-logo-link { display: block; width: 100%; }

.brand-logo-img{
  width: 100% !important;      /* sovrascrive anche l’inline style */
  height: auto !important;
  max-height: 78px;            /* regolalo: 70–90 è il range giusto */
  object-fit: contain;         /* niente tagli */
}

/* Chat (mobile): nick su 1a riga, data + Rispondi su 2a riga */
@media (max-width: 520px){

  .chat-msg-top{
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }

  /* dentro: avatar + (nick sopra / data sotto) */
  .chat-msg-top .chat-user{
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 3px;
    align-items: center;
  }

  .chat-msg-top .chat-avatar{
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 44px;
    height: 44px;
    border-radius: 999px; /* se già tondo, ok */
    object-fit: cover;
  }

  .chat-msg-top .chat-nick{
    grid-column: 2;
    grid-row: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 800;
  }

  .chat-msg-top .chat-time{
    grid-column: 2;
    grid-row: 2;
    opacity: .75;
    font-size: .90em;
    white-space: nowrap;
  }

  /* Rispondi allineato in basso a destra (accanto alla data) */
  .chat-msg-top .quote-btn{
    margin-left: auto;
    align-self: flex-end;
    padding: 6px 10px;
    font-size: .90em;
    white-space: nowrap;
  }
}
/* Chat: header messaggio (nick + reply su 1a riga, data sotto) */
.chat-user{
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.chat-user-meta{
  flex: 1 1 auto;
  min-width: 0;
}

.chat-user-line1{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.chat-nick{
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 800;
}

.quote-btn{
  flex: 0 0 auto;
  margin-left: auto;   /* sta a destra della riga, ma sempre “accanto” al nick */
  white-space: nowrap;
}

.chat-user-line2{
  margin-top: 2px;
}

.chat-time{
  opacity: .75;
  font-size: .92em;
  white-space: nowrap;
}

/* mobile: stringe un filo reply + data */
@media (max-width: 520px){
  .quote-btn{ font-size: .95em; }
  .chat-time{ font-size: .88em; }
}
/* Chat (desktop): "Rispondi" allineato a destra nella riga del nickname */
@media (min-width: 521px){
  .chat-user-line1{
    display: grid;
    grid-template-columns: 1fr auto; /* nick a sinistra, rispondi a destra */
    align-items: center;
    column-gap: 12px;
  }

  .chat-nick{
    justify-self: start;
  }

  .quote-btn{
    justify-self: end;     /* attaccato al bordo destro della riga */
    margin-left: 0;        /* annulla il comportamento mobile */
  }
}

/* DESKTOP: Rispondi in alto a destra (stessa riga del nick) */
@media (min-width: 521px){

  .chat-user .chat-user-meta .chat-user-line1{
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    column-gap: 12px !important;
    width: 100% !important;
  }

  .chat-user .chat-user-meta .chat-user-line1 .chat-nick{
    justify-self: start !important;
    margin-right: 0 !important;
  }

  .chat-user .chat-user-meta .chat-user-line1 .quote-btn{
    justify-self: end !important;
    margin-left: 0 !important;   /* annulla la spinta a destra del flex */
    align-self: center !important;
  }
}
/* Quote button: rende .quote-btn un piccolo bottone leggibile */
.quote-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 4px 10px;
  border-radius: 999px;

  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .02em;

  text-decoration: none;
  color: rgba(240, 247, 255, .95);

  background: rgba(120, 170, 230, .18);
  border: 1px solid rgba(160, 210, 255, .28);

  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.quote-btn:hover{
  background: rgba(120, 170, 230, .28);
  border-color: rgba(180, 230, 255, .40);
  transform: translateY(-1px);
}

.quote-btn:active{
  transform: translateY(0);
}

.quote-btn:focus{
  outline: none;
}
.quote-btn:focus-visible{
  box-shadow: 0 0 0 3px rgba(110, 190, 255, .25), 0 6px 16px rgba(0,0,0,.25);
}

@media (max-width: 520px){
  .quote-btn{ padding: 4px 9px; font-size: .80rem; }
}
/* Cambia testo visualizzato in "Quote" (fix mobile: niente "QuoteRispondi") */
.quote-btn{
  color: transparent !important;       /* nasconde il testo originale */
  font-size: 0 !important;             /* sicurezza extra */
  line-height: 0 !important;           /* evita spazi strani */
  text-shadow: none !important;
}

.quote-btn::before{
  content: "Quote";
  color: rgba(240, 247, 255, .95);     /* colore del bottone */
  font-size: .82rem;
  line-height: 1;
}

@media (max-width: 520px){
  .quote-btn::before{ font-size: .80rem; }
}
@media (max-width: 520px){
  .quote-btn{ padding: 4px 10px; min-width: 0; }
}

/* PC: "Quote" sulla riga del nickname ma allineato a destra */
@media (min-width: 521px){
  .chat-user-line1{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .chat-nick{
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .quote-btn{
    margin-left: auto !important; /* spinge il bottone a destra */
  }
}
.game-lobby__players-count .badge {
  font-weight: 700;
  letter-spacing: .3px;
}

@media (max-width: 700px){
  .prediction-table--global{
    display:table;
    width:100%;
  }

  .prediction-table--global thead{
    display:table-header-group;
  }

  .prediction-table--global tbody{
    display:table-row-group;
  }

  .prediction-table--global tr{
    display:table-row;
    padding:0;
  }

  .prediction-table--global th,
  .prediction-table--global td{
    display:table-cell;
    width:auto;
  }
}