*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  overflow: hidden; overscroll-behavior: none;
  background: #07060f; color: #f4f1ff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
body { position: fixed; inset: 0; }
#stage { position: absolute; inset: 0; --s: 1; overflow: hidden; }
#game { display: block; width: 100%; height: 100%; image-rendering: pixelated; touch-action: none; }
.mono { font-family: ui-monospace, "Courier New", monospace; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 3; font-size: calc(13px * var(--s)); }
#board {
  position: absolute; top: calc(8px * var(--s)); left: calc(8px * var(--s)); margin: 0; padding: calc(5px * var(--s)) calc(7px * var(--s));
  list-style: none; min-width: calc(150px * var(--s)); background: rgba(13, 11, 30, .72); border: 2px solid #2a2350; border-radius: 6px;
  font-family: ui-monospace, "Courier New", monospace; font-size: calc(12px * var(--s)); line-height: 1.45;
}
#board li { display: flex; gap: .45em; align-items: center; white-space: nowrap; }
#board li .sw { width: .8em; height: .8em; border-radius: 2px; flex: none; }
#board li .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; max-width: 9em; }
#board li .pc { text-align: right; min-width: 3.6em; color: #cfc6ff; }
#board li.me { color: #ffd23f; font-weight: 800; }
#board li.me .pc { color: #ffd23f; }
#board li.dead { opacity: .45; }
#board li.sep { height: 2px; background: #2a2350; margin: 2px 0; }
#timer-box { position: absolute; top: calc(8px * var(--s)); left: 50%; transform: translateX(-50%); text-align: center; }
#timer {
  font-family: ui-monospace, "Courier New", monospace; font-weight: 900; font-size: calc(24px * var(--s));
  padding: 0 .4em; background: rgba(13, 11, 30, .72); border: 2px solid #2a2350; border-radius: 6px; text-shadow: 2px 2px 0 #7c5cff;
}
#timer.hot { color: #ff3d7f; border-color: #ff3d7f; animation: blink .5s steps(2) infinite; }
#zone-warn { margin-top: 4px; font-weight: 800; color: #ff8a3d; font-size: calc(12px * var(--s)); text-shadow: 1px 1px 0 #000; }
@keyframes blink { 50% { opacity: .55; } }
#me {
  position: absolute; left: calc(8px * var(--s)); bottom: calc(8px * var(--s)); display: flex; flex-direction: column; gap: 2px;
  font-family: ui-monospace, "Courier New", monospace; text-shadow: 2px 2px 0 #0d0b1e;
}
#me-pct { font-size: calc(26px * var(--s)); font-weight: 900; color: #fff; }
#me-score { font-size: calc(14px * var(--s)); color: #ffd23f; font-weight: 800; }
#me-combo { font-size: calc(15px * var(--s)); color: #3dff9a; font-weight: 900; animation: blink .4s steps(2) 3; }
#fx { position: absolute; bottom: calc(8px * var(--s)); left: 50%; transform: translateX(-50%); display: flex; gap: calc(6px * var(--s)); }
#fx .chip {
  display: flex; align-items: center; gap: .35em; padding: .2em .55em; border-radius: 5px; font-weight: 800; font-size: calc(12px * var(--s));
  background: rgba(13, 11, 30, .8); border: 2px solid currentColor;
}
#feed { position: absolute; top: calc(50px * var(--s)); right: calc(8px * var(--s)); display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: calc(11px * var(--s)); }
#feed div { background: rgba(13, 11, 30, .72); padding: 1px 6px; border-radius: 4px; animation: fade 4s forwards; white-space: nowrap; }
@keyframes fade { 80% { opacity: 1; } 100% { opacity: 0; } }
#minimap {
  position: absolute; right: calc(8px * var(--s)); bottom: calc(8px * var(--s)); width: calc(118px * var(--s)); height: calc(104px * var(--s));
  image-rendering: pixelated; background: rgba(13, 11, 30, .78); border: 2px solid #2a2350; border-radius: 6px;
}

/* ---------- Boutons ---------- */
#topbar { position: absolute; top: calc(8px * var(--s)); right: calc(8px * var(--s)); display: flex; gap: calc(6px * var(--s)); z-index: 5; }
.icon-btn {
  width: calc(34px * var(--s)); height: calc(34px * var(--s)); padding: calc(7px * var(--s));
  border: 2px solid #7c5cff; border-radius: 6px; background: rgba(13, 11, 30, .75);
  color: #f4f1ff; cursor: pointer; touch-action: manipulation;
}
.icon-btn svg { width: 100%; height: 100%; fill: currentColor; stroke: currentColor; display: block; }
.icon-btn .ico-off { display: none; }
.icon-btn.muted .ico-on { display: none; }
.icon-btn.muted .ico-off { display: block; }
.icon-btn:focus-visible, .btn:focus-visible { outline: 3px solid #2ee6ff; outline-offset: 2px; }

/* ---------- Écrans ---------- */
.screen {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: calc(16px * var(--s));
  font-size: calc(15px * var(--s));
  background: radial-gradient(ellipse at center, rgba(7,6,15,.35), rgba(7,6,15,.82) 70%);
  overflow: hidden;
}
.hidden { display: none !important; }
.logo { margin: 0 0 .2em; line-height: .9; font-family: ui-monospace, "Courier New", monospace; font-weight: 900; letter-spacing: .06em; }
.logo span { display: block; font-size: calc(60px * var(--s)); color: #fff; text-shadow: 4px 4px 0 #7c5cff, -2px -2px 0 #2ee6ff; }
.logo span + span { color: #3dff9a; text-shadow: 4px 4px 0 #ff3d7f, -2px -2px 0 #7c5cff; }
h2 { margin: 0 0 .3em; font-family: ui-monospace, "Courier New", monospace; font-size: calc(32px * var(--s)); letter-spacing: .05em; text-shadow: 3px 3px 0 #7c5cff; }
.over-title { color: #3dff9a; text-shadow: 3px 3px 0 #0b3a24, -2px -2px 0 #7c5cff; }
.tagline { margin: .2em 0 1em; color: #cfc6ff; line-height: 1.35; max-width: 26em; }
.btn {
  font: inherit; font-weight: 800; font-size: calc(22px * var(--s)); letter-spacing: .04em;
  padding: .5em 1.8em; margin: .35em 0; border: 0; border-radius: 8px; cursor: pointer;
  color: #0d0b1e; background: #ffd23f; box-shadow: 0 5px 0 #c98a00, 0 0 24px rgba(255,210,63,.35);
  touch-action: manipulation;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #c98a00; }
.btn:disabled { opacity: .6; }
.best { margin: .7em 0 .2em; color: #ffd23f; }
.legend { list-style: none; padding: 0; margin: .9em 0 0; display: grid; grid-template-columns: repeat(3, auto); gap: .35em 1.1em; font-size: .85em; color: #cfc6ff; }
.legend li { display: flex; align-items: center; gap: .4em; }
.pw { display: inline-block; width: 1em; height: 1.1em; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.pw-shield { background: #2ee6ff; } .pw-turbo { background: #ffd23f; } .pw-magnet { background: #ff3d7f; }
.pw-ghost { background: #e9e4ff; } .pw-bonus { background: #ffb400; box-shadow: inset 0 0 0 3px #6b4a00; } .pw-lava { background: #ff5a1f; }
.help { list-style: none; padding: 0; margin: 1em 0 0; font-size: .82em; color: #a99fe0; line-height: 1.55; }
.small { font-size: .78em; color: #a99fe0; margin: .6em 0 0; }
.rank { margin: 0; font-family: ui-monospace, "Courier New", monospace; font-size: calc(20px * var(--s)); }
.rank strong { font-size: 2.2em; color: #ffd23f; text-shadow: 3px 3px 0 #ff3d7f; }
.rank span { color: #a99fe0; }
.new-record { margin: .2em 0; color: #3dff9a; font-weight: 900; animation: blink .5s steps(2) 6; }
.final { margin: .2em 0; font-size: 1.2em; }
.final strong { font-size: 1.5em; color: #ffd23f; }
.stats { display: grid; grid-template-columns: auto auto; gap: .15em 1.2em; margin: .5em 0; font-size: .9em; }
.stats dt { color: #a99fe0; text-align: right; } .stats dd { margin: 0; text-align: left; font-weight: 700; }
.final-board { list-style: none; padding: .3em .7em; margin: .2em 0 .5em; font-family: ui-monospace, "Courier New", monospace; font-size: .78em; background: rgba(13,11,30,.7); border-radius: 6px; min-width: 15em; }
.final-board li { display: flex; gap: .6em; } .final-board li .nm { flex: 1; text-align: left; } .final-board li .bp { color: #a99fe0; min-width: 4.2em; text-align: right; }
.final-board li.me { color: #ffd23f; font-weight: 800; }
@media (max-width: 560px) {
  #board { min-width: 0; font-size: calc(11px * var(--s)); padding: 4px 6px; }
  #board li .nm { max-width: 7.5em; }
  #timer-box { left: auto; right: calc(8px * var(--s)); top: calc(50px * var(--s)); transform: none; text-align: right; }
  #feed { top: calc(96px * var(--s)); }
}
@media (max-height: 560px) { .legend, .help { display: none; } .final-board { display: none; } }

/* ---------- Mode en ligne ---------- */
.modes { display: flex; flex-direction: column; align-items: stretch; gap: .1em; }
.btn-alt { background: #2ee6ff; box-shadow: 0 5px 0 #1489a0, 0 0 24px rgba(46,230,255,.35); }
.btn-alt:active { box-shadow: 0 2px 0 #1489a0; }
.notice { margin: .5em 0 0; max-width: 24em; padding: .45em .8em; border-radius: 6px; background: rgba(255,61,127,.16); border: 2px solid #ff3d7f; color: #ffd0df; font-size: .85em; line-height: 1.35; }
#online-form { display: flex; flex-direction: column; align-items: center; gap: .45em; }
#pseudo { font: inherit; font-size: calc(20px * var(--s)); text-align: center; width: 11em; padding: .35em .6em; border-radius: 8px; border: 2px solid #7c5cff; background: #17142e; color: #fff; outline: none; -webkit-user-select: text; user-select: text; }
#pseudo:focus { border-color: #2ee6ff; }
.link-btn { font: inherit; font-size: .85em; margin-top: .9em; background: none; border: 0; color: #a99fe0; text-decoration: underline; cursor: pointer; padding: .4em; }
#net { position: absolute; right: calc(8px * var(--s)); bottom: calc(126px * var(--s)); font-family: ui-monospace, "Courier New", monospace; font-size: calc(11px * var(--s)); background: rgba(13,11,30,.72); padding: 1px 6px; border-radius: 4px; display: flex; align-items: center; gap: .3em; }
#net-dot { width: .6em; height: .6em; border-radius: 50%; background: #3dff9a; display: inline-block; }
#net-dot.mid { background: #ffd23f; } #net-dot.bad { background: #ff3d7f; }
#reconnect { position: absolute; top: 38%; left: 50%; transform: translateX(-50%); z-index: 6; background: rgba(13,11,30,.88); border: 2px solid #ffd23f; color: #ffd23f; padding: .5em 1em; border-radius: 8px; font-weight: 800; font-size: calc(15px * var(--s)); animation: blink 1s steps(2) infinite; }
.next-round { margin: .4em 0 0; color: #3dff9a; font-weight: 800; }

/* invitations (parties privées) */
.invite-btn { margin-top: .6em; font-weight: 700; color: #2ee6ff; }
.toast { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); z-index: 40; max-width: 90%; padding: .55em 1em; border-radius: 8px; background: rgba(14,10,30,.94); border: 2px solid #2ee6ff; color: #fff; font-size: .9em; text-align: center; pointer-events: none; }

#pseudo.locked { opacity: .75; cursor: default; }
#pseudo-lock { color: #3ee6c4; font-weight: 600; }