* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #120f24;
  color: #fff;
  font-family: 'Arial Rounded MT Bold', 'Trebuchet MS', sans-serif;
  user-select: none;
  -webkit-user-select: none;
}

#stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 20% 20%, #2b1f5c 0, transparent 50%),
    radial-gradient(circle at 80% 80%, #4a1640 0, transparent 50%),
    #120f24;
}

#game {
  display: block;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .6);
  image-rendering: auto;
}

/* ---------- Overlays ---------- */
.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(18, 12, 40, .55);
  backdrop-filter: blur(2px);
  overflow-y: auto;
  z-index: 10;
}
.overlay.hidden, .hidden { display: none !important; }

.panel {
  width: min(680px, 100%);
  max-height: 100%;
  overflow-y: auto;
  text-align: center;
  padding: 22px 26px;
  border-radius: 26px;
  background: linear-gradient(160deg, rgba(60, 30, 110, .95), rgba(30, 20, 60, .95));
  border: 4px solid #ffd23f;
  box-shadow: 0 0 0 6px rgba(255, 59, 92, .6), 0 20px 50px rgba(0, 0, 0, .5);
  animation: pop .35s cubic-bezier(.2, 1.6, .5, 1);
}
.panel.compact { width: min(420px, 100%); }

@keyframes pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.title {
  margin: 0;
  font-size: clamp(42px, 9vw, 76px);
  line-height: 1;
  letter-spacing: 2px;
  transform: rotate(-3deg);
}
.title .t1 { color: #ff3b5c; text-shadow: 4px 4px 0 #ffd23f, 8px 8px 0 rgba(0,0,0,.35); }
.title .t2 { color: #2fa8ff; text-shadow: 4px 4px 0 #ffd23f, 8px 8px 0 rgba(0,0,0,.35); display: inline-block; animation: wobble 1.6s ease-in-out infinite; }
@keyframes wobble { 0%, 100% { transform: rotate(-4deg) scale(1); } 50% { transform: rotate(5deg) scale(1.08); } }

.tagline { margin: 10px 0 14px; color: #ffd23f; font-size: 20px; }

h2 { margin: 0 0 12px; font-size: 40px; color: #ffd23f; text-shadow: 3px 3px 0 #ff3b5c; }

.buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 14px 0; }

.btn {
  font: inherit;
  font-size: 22px;
  color: #fff;
  border: none;
  border-radius: 16px;
  padding: 12px 22px;
  cursor: pointer;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .35);
  transition: transform .1s, box-shadow .1s, filter .1s;
}
.btn:hover { transform: translateY(-2px) scale(1.04); filter: brightness(1.1); }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.btn-solo { background: linear-gradient(#ff5c78, #e0244a); }
.btn-duo { background: linear-gradient(#4cb8ff, #1a7fd6); }
.btn-trio { background: linear-gradient(#5fe87a, #1f9e3c); }
.btn-quatuor { background: linear-gradient(#ffc84a, #e08a00); }
.btn-ghost { background: rgba(255, 255, 255, .15); }
.btn kbd { font-size: 14px; vertical-align: middle; }

kbd {
  display: inline-block;
  min-width: 26px;
  padding: 2px 7px;
  margin: 0 2px;
  border-radius: 7px;
  background: #fff;
  color: #2a1d4f;
  font-family: inherit;
  font-size: 15px;
  box-shadow: 0 3px 0 #b9a8e6;
}

.controls { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.ctrl {
  flex: 1 1 240px;
  padding: 8px 12px;
  border-radius: 16px;
  background: rgba(0, 0, 0, .25);
}
.ctrl h3 { margin: 4px 0; font-size: 20px; font-weight: normal; }
.ctrl p { margin: 6px 0; }
.ctrl.p1 { border: 3px solid #ff3b5c; }
.ctrl.p2 { border: 3px solid #2fa8ff; }
.ctrl.p3 { border: 3px solid #3ddc5a; }
.ctrl.p4 { border: 3px solid #ffb020; }
.dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: middle; }
.dot.red { background: #ff3b5c; }
.dot.blue { background: #2fa8ff; }
.dot.green { background: #3ddc5a; }
.dot.orange { background: #ffb020; }

.legend { margin-top: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 6px 0; }
.chips span {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 15px;
  cursor: help;
}
.chips.good span { background: rgba(34, 197, 94, .25); border: 2px solid #22c55e; }
.chips.bad span { background: rgba(168, 85, 247, .25); border: 2px solid #a855f7; }

.small { font-size: 14px; opacity: .85; margin: 6px 0; }
.best { margin: 12px 0 4px; color: #ffd23f; }

.final { font-size: 30px; margin: 6px 0; }
.final b { color: #ffd23f; }
.record { color: #ffd23f; font-size: 22px; animation: wobble 1s infinite; margin: 4px 0; }

.mute {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 20;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid #ffd23f;
  background: rgba(30, 20, 60, .85);
  font-size: 20px;
  cursor: pointer;
}

/* Choix fait à la manette dans le menu */
.btn.focus { outline: 4px solid #fff; outline-offset: 3px; }

/* ---------- Commandes tactiles ---------- */
#stage { touch-action: none; -webkit-touch-callout: none; }

.fire-btn, .pause-btn {
  position: fixed;
  z-index: 5;
  display: none;
  border-radius: 50%;
  border: 3px solid #ffd23f;
  background: rgba(30, 20, 60, .55);
  color: #fff;
  touch-action: none;
}
.fire-btn {
  bottom: 70px;
  width: 78px;
  height: 78px;
  font-size: 34px;
}
.fire-btn.p1 { right: 14px; border-color: #ff3b5c; }
.fire-btn.p2 { left: 14px; border-color: #3bb3ff; }
.fire-btn:active { background: rgba(255, 210, 63, .5); }
.pause-btn {
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  font-size: 18px;
}
body.touch.playing .fire-btn.p1,
body.touch.playing.duo .fire-btn.p2,
body.touch.playing .pause-btn { display: block; }

@media (max-height: 640px) {
  .panel { padding: 12px 16px; }
  .title { font-size: 44px; }
  .tagline { margin: 6px 0; font-size: 16px; }
  .btn { font-size: 18px; padding: 8px 16px; }
}