/* ============ Perusasetukset ============ */
* { box-sizing: border-box; }

:root{
  --bg: #f5f5f5;
  --text: #333;
  --blue: #3498db;
  --blue-700: #2980b9;
  --purple: #9b59b6;
  --green: #27ae60;
  --red: #e74c3c;
  --card: #ffffff;
  --muted: #f8f9fa;
  --muted-2: #ecf0f1;
  --border: #e0e0e0;
  --shadow: 0 2px 10px rgba(0,0,0,0.1);
}

body{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  margin: 0;
  color: var(--text);
  background: var(--bg);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  padding-top: 20px; /* perusväli jos JS ei ehdi lisätä chat-closed */
}

/* ============ Kortti / runko ============ */
.container{
  width: 100%;
  max-width: 700px;
  margin: 0 20px;
  padding: 20px;
  background: var(--card);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

h1{
  text-align: center;
  color: #2c3e50;
  margin: 0 0 30px;
}

h2, h3{ text-align: center; color:#34495e; }
h3{ margin: 30px 0 15px; }
h4{ color:#34495e; margin: 0 0 10px; }

/* ============ Lomakkeet & napit ============ */
input{
  width: 100%;
  padding: 12px 16px;
  margin-bottom: 12px;
  font-size: 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  transition: border-color .2s;
}
input:focus{ outline: none; border-color: var(--blue); }

button{
  width: 100%;
  padding: 12px 20px;
  font-size: 16px;
  background: var(--blue);
  color: #fff;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color .15s ease-in-out, opacity .15s;
  margin-bottom: 10px;
}
button:hover:not(:disabled){ background: var(--blue-700); }
button:disabled{ background:#bdc3c7; cursor: not-allowed; opacity:.9; }

.control-button{ margin-bottom: 15px; }

.player-buttons{ text-align: center; margin: 20px 0; }
.player-button{
  width: auto; min-width: 120px;
  margin: 5px; padding: 10px 15px;
  display: inline-block; font-size: 14px;
}
.player-button.selected{ background: var(--green); }
.player-button:disabled{ opacity: .7; }

/* Äänestäjän nimen korostus */
.voter-name,
button .voter-name,
button:disabled .voter-name,
button.selected .voter-name{
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 1.2em !important;
}

/* ============ Peli-elementit ============ */
#questionBox, #realQuestionBox{
  font-size: 20px; font-weight: 700; text-align: center;
  margin: 20px 0; padding: 20px; background: var(--muted-2); border-radius: 8px;
}
#realQuestionBox em{ color: var(--red); font-style: italic; }

.instruction{
  text-align: center; font-size: 16px; color:#7f8c8d; margin: 15px 0;
}

.answer-item, .vote-result{
  padding: 8px 12px; margin: 5px 0; background: var(--muted);
  border-radius: 6px; border-left: 3px solid var(--blue);
}

.status-box{
  text-align:center; padding:15px; margin:20px 0; font-size:16px; color:#2c3e50;
  background: var(--muted); border-radius: 8px; min-height: 50px;
  display:flex; align-items:center; justify-content:center;
}

.impostor-reveal{
  color: var(--red); font-weight:700; font-size:24px; display:block; text-align:center;
  padding:20px; background:#ffe5e5; border-radius:8px; margin:20px 0;
}

.questions-box{ background: var(--muted-2); padding:20px; border-radius:8px; margin:20px 0; }
.questions-box p{ margin:10px 0; }

.correct-guess{ color: var(--green); font-weight:700; }
.impostor-points{ color: var(--red); font-weight:700; }
.point-recipients{ color: var(--blue); font-weight:700; }

#scoreBoard{ margin-bottom: 20px; }

.score-item{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 15px; margin:5px 0; background: var(--muted);
  border-radius: 6px; border-left: 3px solid var(--blue);
}
.score-name{ font-weight:700; }
.score-value{ color:#7f8c8d; }

.winner-text{ color: var(--green); font-size:32px; text-align:center; margin:30px 0; }

.final-score-item{
  padding:10px 15px; margin:5px 0; background: var(--muted);
  border-radius:6px; font-size:18px; text-align:center;
}

/* Pienet listat / footer-tagit */
ul{ list-style:none; padding:0; text-align:center; }
ul li{
  display:inline-block; margin:5px 10px; padding:8px 16px;
  background: var(--muted-2); border-radius: 20px; font-size:14px;
}

.player-list-footer{
  display:flex; justify-content:center; flex-wrap:wrap; gap:10px;
  list-style:none; padding:20px 0 0; margin-top:30px; border-top:1px solid var(--border);
}
.player-list-footer li{
  margin:0; padding:6px 16px; background: var(--muted-2);
  border-radius:20px; font-size:14px; transition: all .2s;
}
.player-list-footer li.current-player{
  background: var(--purple); color:#fff; font-weight:700;
  box-shadow: 0 2px 4px rgba(155,89,182,.3);
}

/* ============ Chat (kiinteä yläpalkki) ============ */
.chat-container{
  position: fixed; top: 0; left: 0; right: 0;
  background: #fff; box-shadow: var(--shadow); z-index: 1000;
  border-bottom: 1px solid var(--border);
  transition: transform .25s ease;
}

/* Header */
.chat-header{
  background: var(--blue); color:#fff;
  padding: 15px 16px 10px; min-height: 50px;
  display:flex; align-items:center; justify-content:space-between; gap: 8px;
}
.chat-header:hover{ background: var(--blue-700); }

.chat-toggle,
#chatToggle{
  position: relative;
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 28px; height: 28px; padding: 0 6px;
  background: transparent; border: none; color:#fff; font-size: 18px;
  cursor: pointer; line-height: 1;
}

/* Punainen pilleri – korvaa nuolinapin kun on lukemattomia */
#chatToggle .chat-badge{
  display: inline-flex; align-items:center; justify-content:center;
  height: 22px; padding: 0 10px; border-radius: 9999px;
  background: #e53935; color:#fff; font-weight:700; font-size:12px; line-height:22px;
  white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis;
}
/* Chat auki → ei badgea */
body.chat-open #chatToggle .chat-badge{ display:none !important; }

/* Legacy: vanha erillinen kupla poistettu käytöstä */
.chat-notification{ display:none !important; }

/* Body offsetit chatille (sisältö ei mene chatin alle) */
body.chat-open{  padding-top: 260px; }
body.chat-closed{ padding-top: 90px; }

/* Chat-runko */
.chat-body{ background:#fff; border-top: 1px solid rgba(255,255,255,.2); }
.chat-messages{
  background: var(--muted);
  padding: 10px; max-height: 200px; overflow-y: auto;
}
.chat-message{
  margin-bottom: 6px; padding: 4px 8px; background:#fff; border-radius:6px;
  font-size: 13px; border-left: 3px solid var(--blue);
}
.chat-message .sender{ font-weight:700; color:#2c3e50; font-size:12px; }
.chat-message .timestamp{ font-size:10px; color:#7f8c8d; float:right; }

.chat-input-container{ padding: 8px 16px; background:#fff; display:flex; gap:8px; }
.chat-input{
  flex:1; padding:6px 12px; border:1px solid #ddd; border-radius:15px;
  font-size:14px; margin:0;
}
.chat-send{
  padding:6px 16px; background: var(--blue); color:#fff;
  border:0; border-radius:15px; cursor:pointer; font-size:13px; margin:0; width:auto;
}
.chat-send:hover{ background: var(--blue-700); }

/* Collapsed – näytetään vain header (≈ 50px) */
.chat-collapsed{ transform: translateY(calc(-100% + 50px)); }
.chat-collapsed .chat-body{ display:none; }

/* ============ Pienet apuluokat ============ */
.hidden{ display:none !important; }
#controls{ margin-top: 30px; }

/* ============ Mobiili ============ */
@media (max-width: 480px){
  .container{ padding: 15px; margin: 0 10px; }
  h1{ font-size: 24px; margin-bottom: 20px; }
  button, input{ font-size: 14px; padding: 10px 16px; }

  .player-button{ min-width: 100px; font-size: 14px; padding: 8px 16px; }
  #questionBox, #realQuestionBox{ font-size: 18px; padding: 15px; }
  .impostor-reveal{ font-size: 20px; }
  .winner-text{ font-size: 24px; }
  .score-item{ font-size: 14px; padding: 8px 12px; }
  .player-list-footer li{ font-size: 12px; padding: 5px 12px; }

  .chat-header{ padding: 12px 12px 8px; min-height: 45px; font-size: 14px; }
  .chat-messages{ max-height: 150px; padding: 8px; }
  .chat-message{ font-size: 12px; padding: 3px 6px; }
  .chat-input-container{ padding: 6px 12px; }
  .chat-input{ font-size: 13px; padding: 5px 10px; }
  .chat-send{ font-size: 12px; padding: 5px 12px; }

  body.chat-open{  padding-top: 260px; }
  body.chat-closed{ padding-top: 75px; }
}