/*==============================================================================
  VARIABILI & RESET
==============================================================================*/
:root {
  --bg-main:      #12161e;
  --bg-card:      #1f2733;
  --accent:       #e0a020;
  --accent-dark:  #c18d1d;
  --text-main:    #eaecee;
  --text-muted:   #888d9b;
  --text-dark:    #000000;
  --radius:       12px;
  --gap:          24px;
  --shadow:       0 8px 16px rgba(0,0,0,0.4);
  --trans:        0.25s ease;
}

* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:'Poppins',sans-serif;
  background:var(--bg-main);
  color:var(--text-main);
}
.container {
  max-width:1024px; margin:auto; padding:var(--gap);
}

/* HEADER */
header { text-align:center; margin-bottom:var(--gap); }
header h1 {
  font-family:'Montserrat',sans-serif;
  font-size:2.5rem; color:var(--accent); letter-spacing:1px;
}

/* HOME & LOGIN */
.cards-container {
  display:flex; gap:var(--gap); justify-content:center; flex-wrap:wrap;
}
.card h2 {
  font-family:'Montserrat',sans-serif;
  font-size:1.4rem; margin-bottom:12px; color:var(--accent);
}
.field-label {
  display:block; font-size:0.9rem;
  color:var(--text-muted); margin-bottom:8px;
  font-family:'Poppins',sans-serif;
}
.hidden { display:none; }
section { margin-bottom:var(--gap); }
#home, #login {
  display:flex; justify-content:center; gap:var(--gap);
}
#home .card, #login .card {
  background:var(--bg-card);
  padding:var(--gap); border-radius:var(--radius);
  box-shadow:var(--shadow); width:280px;
  text-align:center;
}

/* INPUT & BUTTON */
.input {
  width:100%; padding:12px; border:none;
  border-radius:var(--radius); font-size:1rem;
}
.btn {
  display:inline-block;
  background:var(--accent); color:var(--text-main);
  padding:12px 24px; border:none;
  border-radius:var(--radius); font-weight:600;
  cursor:pointer;
  transition:background var(--trans),transform var(--trans);
}
.btn:hover {
  background:var(--accent-dark);
  transform:translateY(-2px);
}

/* ROOM CODE */
.room-code {
  text-align:center; margin-bottom:var(--gap);
  font-size:1.1rem; color:var(--text-muted);
}
.room-code strong {
  color:var(--accent);
  font-family:'Montserrat',sans-serif;
}

/* LAYOUT GIOCO */
.main {
  display:grid; grid-template-columns:1fr 2fr 1fr;
  gap:var(--gap);
}
.sidebar {
  background:var(--bg-card);
  padding:var(--gap); border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.sidebar h3 {
  font-family:'Montserrat',sans-serif;
  margin-bottom:12px; color:var(--accent);
}
.sidebar ul { list-style:none; }
.sidebar li {
  background:var(--bg-main);
  padding:10px 14px; margin-bottom:10px;
  border-radius:var(--radius); font-size:.95rem;
}

/* HOST CONTROLS */
#hostControls {
  display:none; /* mostrato solo se isHost */
  flex-direction:column; gap:12px; margin-top:12px;
}
#hostControls .btn {
  width:100%; text-align:center;
}

/* AREA CENTRALE */
.content {
  display:flex; flex-direction:column; gap:var(--gap);
}
#parolaRivelata {
  background:var(--bg-card);
  padding:var(--gap); border-radius:var(--radius);
  box-shadow:var(--shadow);
  animation:fadeIn .5s var(--trans);
}
#parolaRivelata.hidden { display:none; }
.parola {
  margin-top:12px;
  font-family:'Montserrat',sans-serif;
  font-size:1.75rem; color:var(--accent);
}
#voting { text-align:center; }
#voting.hidden { display:none; }

/* SELECT & VOTE BUTTON */
#voteForm { margin-top:16px; }
#voteForm select {
  width:calc(100% - 32px);
  max-width:260px;
  padding:12px 16px;
  border-radius:var(--radius);
  border:none; appearance:none;
  font-family:'Poppins',sans-serif;
  background:#fff url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'10'%20height%3D'6'%20viewBox%3D'0%200%2010%206'%3E%3Cpath%20fill='%2312161e'%20d='M0%200l5%206%205-6z'/%3E%3C/svg%3E") no-repeat right 12px center;
  color:var(--text-dark);
  cursor:pointer;
}
#voteForm select option {
  color:var(--text-dark);
  background:#fff;
}
.vote-btn {
  margin:20px auto 0; display:block;
}
#voteForm .btn { min-width:140px; }

/* STORICO */
#storico {
  background:var(--bg-card);
  padding:var(--gap); border-radius:var(--radius);
  box-shadow:var(--shadow); margin-top:var(--gap);
}
#storico.hidden { display:none; }
#storico ul { list-style:none; }
#storico li {
  background:var(--bg-main);
  padding:12px; margin-bottom:12px;
  border-radius:var(--radius);
  font-family:'Poppins',sans-serif;
}

/* CHAT */
#chatBox {
  background: var(--bg-main);
  padding: 12px;
  height: 180px;
  overflow-y: auto;
  border-radius: var(--radius);
  margin-bottom: 12px;
}
#chatBox p {
  margin: 6px 0;
  font-size: 0.9rem;
}
.chat-time {
  color: var(--text-muted);
  margin-right: 6px;
}
#chatInput {
  display: flex; gap: 8px;
}
#chatInput .input { flex: 1; }
#chatInput .btn { padding: 8px 16px; }

/* END GAME */
#endGame {
  text-align:center; margin-top:var(--gap);
}
#endGame h3 {
  font-family:'Montserrat',sans-serif;
  font-size:1.5rem; color:var(--accent);
  margin-bottom:var(--gap);
}
.end-buttons .btn { margin:0 12px; }

/* ANIMAZIONI */
@keyframes fadeIn {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes pulse {
  0%   { box-shadow:0 0 0 0 rgba(255,159,28,0.7); }
  70%  { box-shadow:0 0 0 12px rgba(255,159,28,0); }
  100% { box-shadow:0 0 0 0 rgba(255,159,28,0); }
}
.highlight-intruso {
  position:relative;
  animation:pulse 1s ease-out 2 forwards;
  border:2px solid var(--accent);
  border-radius:var(--radius);
}

/* MOBILE */
@media (max-width:800px) {
  .main { display:block; }
  .sidebar, .content { margin-bottom:var(--gap); }
}