* { box-sizing: border-box; }
body {
  margin: 0; font-family: system-ui, sans-serif; background: #2c2f4a; color: #eee;
  height: 100vh; overflow: hidden;
}
.hidden { display: none !important; }
.screen { height: 100vh; display: flex; flex-direction: column; }

/* join */
#join { align-items: center; justify-content: center; gap: 12px; }
#join h1 { font-size: 3rem; margin: 0; }
.sub { color: #aab; margin: 0 0 10px; }
#join input { width: 280px; padding: 12px; font-size: 1rem; border: none; border-radius: 8px; }
#join button, header button, .tools button, .lobby button, #startBtn {
  cursor: pointer; border: none; border-radius: 8px; padding: 10px 18px;
  font-size: 1rem; background: #4caf50; color: #fff; font-weight: 600;
}
#join button:hover { background: #43a047; }
.error { color: #ff8080; min-height: 1.2em; }

/* game */
header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: #23253c; font-weight: 600;
}
#wordDisplay .masked { font-family: monospace; font-size: 1.5rem; letter-spacing: 2px; }
.hdrRight { display: flex; align-items: center; gap: 10px; }
#skipBtn { padding: 6px 12px; font-size: .9rem; background: #b4632f; }
#timer { min-width: 40px; text-align: right; font-size: 1.3rem; }

/* countdown bar */
#timebar { height: 5px; background: #23253c; }
#timebarFill { display: block; height: 100%; width: 0; background: #4caf50; transition: width 1s linear, background .3s; }

.main { flex: 1; display: flex; gap: 8px; padding: 8px; min-height: 0; }
aside { background: #23253c; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
#playersPanel { width: 200px; }
#chatPanel { width: 260px; }
.center { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }

/* players */
#players { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
#players li { display: flex; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid #33365a; }
#players li.guessed { background: #204d20; }

/* canvas */
.canvasWrap { position: relative; width: 100%; max-width: 800px; aspect-ratio: 4 / 3; }
canvas { background: #fff; width: 100%; height: 100%; border-radius: 8px; touch-action: none; cursor: crosshair; }
.overlay {
  position: absolute; inset: 0; background: rgba(20,20,40,.85); border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 14px; padding: 20px;
}
.overlay .wordBtn { display: block; margin: 6px auto; min-width: 180px; }
.reveal b { font-size: 2rem; color: #ffe400; }
.results table { border-collapse: collapse; margin: 0 auto; font-size: 1.1rem; }
.results td { padding: 6px 16px; }

/* tools */
.tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
#palette { display: flex; gap: 4px; }
.swatch { width: 26px; height: 26px; border-radius: 4px; cursor: pointer; border: 2px solid #23253c; }
.swatch.active { border-color: #fff; }
.toolBtn.active { background: #ffe400; color: #23253c; }

/* confetti (spawned on a correct guess) */
.confetti { position: absolute; top: -12px; width: 8px; height: 13px; border-radius: 2px;
  pointer-events: none; animation: confettiFall 1.3s ease-in forwards; }
@keyframes confettiFall { to { transform: translate(var(--x), 660px) rotate(720deg); opacity: 0; } }

/* chat */
#chat { list-style: none; margin: 0; padding: 8px; flex: 1; overflow-y: auto; font-size: .95rem; }
#chat li { padding: 3px 0; word-wrap: break-word; }
#chat li.sys { color: #8ea; font-style: italic; }
#chat li.guessedmsg { color: #8cf; }
#chatForm { display: flex; border-top: 1px solid #33365a; }
#chatInput { flex: 1; padding: 10px; border: none; background: #1a1c30; color: #eee; }

/* lobby controls */
.lobby { display: flex; align-items: center; gap: 16px; padding: 12px 16px; background: #23253c; flex-wrap: wrap; }
.lobby input { width: 70px; padding: 6px; border-radius: 6px; border: none; }
#hostConfig { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.wordsField { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; color: #aab; }
.wordsField textarea { width: 240px; padding: 6px; border-radius: 6px; border: none; resize: vertical; font-family: inherit; }
.linkBtn { padding: 6px 12px; font-size: .85rem; background: #4a4e78; }
.invite { color: #aab; }
.invite b { color: #ffe400; font-size: 1.2rem; letter-spacing: 2px; }