* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: #15121a;
  color: #f3eee6;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  overflow: hidden;
  user-select: none;
}

body { display: flex; align-items: center; justify-content: center; }

#wrap { width: min(100vw, calc((100vh - 64px) * 16 / 9)); }

/* ---------- HUD ---------- */
#hud {
  height: 64px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  background: linear-gradient(#2c2336, #1d1824);
  border-radius: 12px 12px 0 0;
  font-size: 14px;
}
.side { display: flex; align-items: center; gap: 10px; min-width: 0; }
.side.hum { justify-content: flex-end; text-align: right; }
.avatar { height: 48px; width: auto; }
.info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.row { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.side.hum .row { justify-content: flex-end; }
.hearts { display: flex; gap: 2px; }
.hearts img { width: 20px; height: 18px; transition: transform .2s, opacity .2s; }
.hearts img.off { opacity: .22; filter: grayscale(1); }
.hearts img.on { transform: scale(1.08); }
.eggs img { width: 12px; vertical-align: -2px; }
.bar { display: inline-block; width: 90px; height: 10px; border-radius: 5px; background: #0d0b11; overflow: hidden; box-shadow: inset 0 0 0 1px #3b3345; }
.bar > span { display: block; height: 100%; width: 0; border-radius: 5px; }
.bar.blood > span { background: linear-gradient(90deg, #8e1020, #ff3b4e); }
.bar.cd > span { background: linear-gradient(90deg, #f0b43c, #ffe28a); }
.status { color: #b9aec8; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.center { text-align: center; }
#roomName { font-weight: bold; font-size: 17px; letter-spacing: .5px; }
#score { color: #d8cfe4; font-size: 13px; }

/* ---------- Scène ---------- */
#stage { position: relative; width: 100%; aspect-ratio: 16 / 9; }
canvas { display: block; width: 100%; height: 100%; border-radius: 0 0 12px 12px; background: #000; }
#stage.playing canvas { cursor: none; }

.overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 20px;
  text-align: center;
  background: rgba(12, 10, 18, .74);
  backdrop-filter: blur(3px);
  border-radius: 0 0 12px 12px;
  overflow: auto;
}
.hidden { display: none !important; }

h1 { font-size: clamp(38px, 6vw, 72px); letter-spacing: 2px; text-shadow: 0 4px 0 #000; }
h1 span { color: #ff3b4e; }
h2 { font-size: clamp(26px, 3.4vw, 42px); text-shadow: 0 3px 0 #000; }
.subtitle { color: #d8cfe4; }

.cards { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.card {
  width: min(430px, 44%);
  min-width: 260px;
  background: rgba(40, 32, 52, .9);
  border: 1px solid #4a3f5a;
  border-radius: 14px;
  padding: 14px 18px;
  text-align: left;
}
.card img { height: 46px; float: right; }
.card h3 { margin-bottom: 8px; color: #ffd23f; }
.card ul { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.35; }

kbd {
  display: inline-block; min-width: 22px; padding: 1px 6px; margin: 0 1px;
  border-radius: 5px; background: #eee6f5; color: #1d1824;
  font: bold 12px/18px "Segoe UI", sans-serif; text-align: center;
  box-shadow: 0 2px 0 #8d7fa0;
}

button {
  font: bold 16px "Trebuchet MS", sans-serif;
  padding: 10px 20px;
  border: 0; border-radius: 10px;
  background: #3b3148; color: #f3eee6;
  cursor: pointer;
  box-shadow: 0 3px 0 #1a1522;
  transition: transform .08s, background .15s;
}
button:hover { background: #4c3f5e; transform: translateY(-1px); }
button:active { transform: translateY(2px); box-shadow: 0 1px 0 #1a1522; }
button.primary { background: #e8374a; box-shadow: 0 3px 0 #8e1020; font-size: 20px; padding: 12px 30px; }
button.primary:hover { background: #ff4b5e; }
.btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.rooms { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; color: #b9aec8; }
.rooms button { font-size: 14px; padding: 6px 14px; }
.hint { color: #9d92ad; font-size: 13px; }

.count { font-size: 90px; font-weight: bold; color: #ffd23f; text-shadow: 0 5px 0 #000; }
.score-line { font-size: 18px; }
.tip { color: #b9aec8; font-size: 14px; }