/* Canvas */
#draw-canvas {
  cursor: crosshair;
  max-height: 52vh;
  width: auto;
  max-width: 100%;
}

/* Szín gombok */
.color-btn {
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  border: 3px solid transparent;
  transition: transform .1s, border-color .15s;
  cursor: pointer;
}
.color-btn.active { border-color: #2563eb; transform: scale(1.2); }
.color-btn:hover { transform: scale(1.15); }

/* Méret gombok */
.size-btn { background: #dbeafe; color: #2563eb; }
.size-btn.active { background: #2563eb !important; color: #fff !important; }

/* Timer figyelmeztetés */
.timer-warning { background: #ef4444 !important; animation: blink .5s infinite alternate; }
@keyframes blink { from { opacity: 1; } to { opacity: .55; } }

/* Chat üzenetek */
.chat-msg { font-size: .85rem; padding: 5px 9px; border-radius: 8px; word-break: break-word; }
.chat-msg.correct { background: #ecfdf5; color: #16a34a; font-weight: 700; }
.chat-msg.system { background: #dcfce7; color: #16a34a; font-style: italic; text-align: center; }

/* Ponttábla sorok */
.score-row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid #f3f4f6; font-size: .9rem; }
.score-row:last-child { border-bottom: none; }

/* Lobby játékos lista */
.lobby-player { padding: 8px 12px; background: #dbeafe; border-radius: 10px; margin: 3px 0; font-weight: 600; font-size: .9rem; color: #1e40af; }

/* Végeredmény sorok */
.final-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #eff6ff; margin: 3px 0; }
.final-row.winner { background: #fef9c3; }
.medal { font-size: 1.4rem; width: 28px; text-align: center; }
.final-name { flex: 1; font-weight: 700; text-align: left; }
.final-score { color: #16a34a; font-weight: 800; }

/* Responsive */
@media (max-width: 700px) {
  #screen-game > div:last-of-type { flex-direction: column; }
  #screen-game .w-56 { width: 100%; }
}