:root {
  --bg: #05030f;
  --cyan: #26e7ff;
  --pink: #ff2bd6;
  --lime: #b6ff3b;
  --b: clamp(68px, 19vmin, 104px);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: 100%;
}

body {
  position: fixed;
  inset: 0;
  font-family: "Courier New", monospace;
  color: #fff;
}

#app {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 15%, rgba(120, 40, 220, .28), transparent 55%),
    radial-gradient(ellipse at 85% 80%, rgba(255, 43, 214, .16), transparent 55%),
    linear-gradient(#0a0626, #05030f 70%);
}

#stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 448px;
  height: 560px;
  --u: 1;
  background: var(--bg);
  box-shadow: 0 0 0 1px rgba(38, 231, 255, .22), 0 0 60px rgba(124, 58, 237, .38);
  overflow: hidden;
}

#game {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  outline: none;
}

/* Effet écran cathodique : lignes fines et vignettage, très discrets */
#crt {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, .16) 3px, rgba(0, 0, 0, 0) 4px),
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, .42) 100%);
}

body.calm #crt { opacity: .45; }

/* Boutons Pause / Son / Plein écran, en haut à droite du jeu */
#bar {
  position: absolute;
  top: calc(8px * var(--u));
  right: calc(8px * var(--u));
  display: flex;
  gap: 6px;
  z-index: 4;
}

#bar button {
  width: max(36px, calc(26px * var(--u)));
  height: max(36px, calc(26px * var(--u)));
  padding: 6px;
  border-radius: 10px;
  border: 1.5px solid rgba(38, 231, 255, .55);
  background: rgba(10, 8, 40, .55);
  color: var(--cyan);
  display: grid;
  place-items: center;
  cursor: pointer;
  touch-action: manipulation;
}

#bar button:hover { background: rgba(38, 231, 255, .18); }
#bar button:active { background: rgba(38, 231, 255, .32); }
#bar button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

#bar svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0;
}

#bar svg .w {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#bar .i-play, #bar .i-off { display: none; }
#bar button.paused .i-pause { display: none; }
#bar button.paused .i-play { display: block; }
#bar button.muted .i-on { display: none; }
#bar button.muted .i-off { display: block; }
#bar button.hidden { display: none; }

/* Commandes tactiles */
#touch {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  display: none;
}

body.touch #touch { display: block; }

/* Zone de glisse : on pose le doigt et on le fait glisser, le vaisseau suit (déplacement relatif).
   En portrait elle s'étend jusqu'au bouton TIR. */
#pad {
  position: absolute;
  left: max(2.5vmin, 10px);
  right: calc(max(3vmin, 12px) + var(--b) * 1.2 + 12px);
  bottom: max(3vmin, 12px);
  max-width: calc(var(--b) * 5);
  height: var(--b);
  display: flex;
  justify-content: space-between;
  border-radius: calc(var(--b) / 2);
  border: 2px solid rgba(38, 231, 255, .6);
  background: rgba(10, 8, 40, .5);
  box-shadow: 0 0 18px rgba(38, 231, 255, .22), inset 0 0 14px rgba(38, 231, 255, .12);
  overflow: hidden;
  pointer-events: auto;
  touch-action: none;
  transition: border-color .1s;
}

/* En paysage, la zone occupe la marge à gauche du jeu (--side est calculée par main.js) */
@media (orientation: landscape) {
  #pad {
    right: auto;
    width: min(calc(var(--b) * 5), max(calc(var(--b) * 2.15), calc(var(--side, 0px) - 24px)));
  }
}

#pad.on { border-color: rgba(127, 243, 255, .95); }

/* rail central */
#pad::before {
  content: "";
  position: absolute;
  left: calc(var(--b) * .8);
  right: calc(var(--b) * .8);
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: linear-gradient(90deg, rgba(38, 231, 255, 0), rgba(38, 231, 255, .55), rgba(38, 231, 255, 0));
  pointer-events: none;
}

#pad i {
  flex: 0 0 calc(var(--b) * .8);
  display: grid;
  place-items: center;
  pointer-events: none;
  transition: background .06s;
}

#pad svg {
  width: 48%;
  height: 48%;
  fill: var(--cyan);
  opacity: .8;
  filter: drop-shadow(0 0 5px var(--cyan));
}

#pad i.on { background: rgba(38, 231, 255, .28); }
#pad i.on svg { opacity: 1; }

/* bouton rond qui suit le doigt */
#pad-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--b) * .52);
  height: calc(var(--b) * .52);
  margin: calc(var(--b) * -.26) 0 0 calc(var(--b) * -.26);
  border-radius: 50%;
  border: 2px solid rgba(127, 243, 255, .85);
  background: radial-gradient(circle at 50% 40%, rgba(127, 243, 255, .55), rgba(38, 231, 255, .14));
  box-shadow: 0 0 14px rgba(38, 231, 255, .55);
  opacity: .5;
  pointer-events: none;
  transition: left .18s ease-out, opacity .12s;
}

#pad.on #pad-knob { opacity: 1; transition: opacity .12s; }

#fire {
  position: absolute;
  right: max(3vmin, 12px);
  bottom: max(3vmin, 12px);
  width: calc(var(--b) * 1.2);
  height: calc(var(--b) * 1.2);
  border-radius: 50%;
  border: 2px solid rgba(255, 43, 214, .75);
  background: radial-gradient(circle at 50% 40%, rgba(255, 43, 214, .35), rgba(60, 10, 70, .55));
  box-shadow: 0 0 22px rgba(255, 43, 214, .35), inset 0 0 16px rgba(255, 43, 214, .25);
  display: grid;
  place-items: center;
  pointer-events: auto;
  touch-action: none;
}

#fire span {
  font: bold calc(var(--b) * .24) "Courier New", monospace;
  letter-spacing: .08em;
  color: #fff;
  text-shadow: 0 0 8px var(--pink), 0 0 16px var(--pink);
  pointer-events: none;
}

#fire.on {
  background: radial-gradient(circle at 50% 40%, rgba(255, 140, 240, .75), rgba(255, 43, 214, .5));
  transform: scale(.95);
}

/* Tableau des scores (arcade.js) : saisie du pseudo en fin de partie, top 10 */
#scores {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: calc(18px * var(--u)) calc(16px * var(--u));
  background: linear-gradient(#0c0733, #05030f 75%);
  overflow: hidden;
  touch-action: manipulation;
  font-family: "Courier New", monospace;
  font-weight: bold;
  text-align: center;
}

#scores[hidden] { display: none; }

body.scores-open #touch { visibility: hidden; }

.sc-box {
  width: 100%;
  max-width: calc(380px * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8px * var(--u));
}

#sc-title {
  margin: 0;
  font-size: max(17px, calc(30px * var(--u)));
  letter-spacing: .06em;
  color: #fff;
  text-shadow: 0 0 10px #b24bff, 0 0 22px var(--pink);
}

.sc-sum {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8px * var(--u));
}

#sc-score:empty, #sc-flag:empty, #sc-msg:empty { display: none; }

#sc-score {
  margin: 0;
  font-size: max(14px, calc(20px * var(--u)));
  color: #ffd23d;
  text-shadow: 0 0 8px rgba(255, 210, 61, .55);
}

#sc-flag {
  margin: 0;
  min-height: 1.3em;
  font-size: max(12px, calc(15px * var(--u)));
  color: var(--lime);
  text-shadow: 0 0 8px rgba(182, 255, 59, .45);
}

#sc-form {
  width: 100%;
  margin-top: calc(6px * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(10px * var(--u));
}

#sc-form label {
  font-size: max(12px, calc(15px * var(--u)));
  letter-spacing: .1em;
  color: var(--cyan);
}

#sc-pseudo {
  width: 100%;
  height: max(42px, calc(46px * var(--u)));
  padding: 0 12px;
  border: 2px solid rgba(38, 231, 255, .7);
  border-radius: 12px;
  background: rgba(10, 8, 40, .8);
  color: #fff;
  font: bold max(16px, calc(22px * var(--u))) "Courier New", monospace;
  text-align: center;
  letter-spacing: .04em;
  outline: none;
  -webkit-user-select: text;
  user-select: text;
  -webkit-appearance: none;
  appearance: none;
}

#sc-pseudo:focus {
  border-color: #7ff3ff;
  box-shadow: 0 0 14px rgba(38, 231, 255, .5);
}

.sc-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(10px * var(--u));
}

.sc-btn {
  min-height: max(40px, calc(44px * var(--u)));
  padding: 0 calc(20px * var(--u));
  min-width: max(96px, calc(120px * var(--u)));
  border: 2px solid rgba(38, 231, 255, .75);
  border-radius: 999px;
  background: rgba(10, 8, 40, .7);
  color: #fff;
  font: bold max(13px, calc(17px * var(--u))) "Courier New", monospace;
  letter-spacing: .08em;
  cursor: pointer;
  touch-action: manipulation;
}

.sc-btn.main {
  border-color: rgba(255, 43, 214, .85);
  background: radial-gradient(circle at 50% 40%, rgba(255, 43, 214, .35), rgba(60, 10, 70, .6));
  box-shadow: 0 0 16px rgba(255, 43, 214, .35);
  text-shadow: 0 0 8px var(--pink);
}

.sc-btn:hover:not(:disabled) { background-color: rgba(38, 231, 255, .2); }
.sc-btn.main:hover:not(:disabled) { background: radial-gradient(circle at 50% 40%, rgba(255, 120, 235, .55), rgba(255, 43, 214, .4)); }
.sc-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sc-btn:disabled { opacity: .5; cursor: default; }

#sc-list {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#sc-list li {
  display: grid;
  grid-template-columns: 2.4em 1fr auto;
  gap: .6em;
  align-items: center;
  padding: calc(3px * var(--u)) 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: max(12px, calc(16px * var(--u)));
  line-height: 1.3;
  color: #b9c2ff;
  text-align: left;
}

#sc-list li.me {
  color: #fff;
  background: rgba(255, 43, 214, .2);
  border-color: rgba(255, 43, 214, .75);
  box-shadow: 0 0 12px rgba(255, 43, 214, .25);
}

#sc-list li.empty { display: block; text-align: center; color: #8fa0ff; padding: 12px 0; }

#sc-list .r { text-align: right; color: #8fa0ff; }
#sc-list .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sc-list .s { color: #ffd23d; font-variant-numeric: tabular-nums; }
#sc-list li:nth-child(1) .r { color: #ffd23d; }
#sc-list li:nth-child(2) .r { color: #e3e9ff; }
#sc-list li:nth-child(3) .r { color: #ff9a5c; }

#sc-msg {
  margin: 0;
  min-height: 1.3em;
  font-size: max(12px, calc(14px * var(--u)));
  color: var(--cyan);
}

#sc-msg[data-kind="err"] { color: #ff5a7a; }

/* écrans bas (téléphone en paysage) : on resserre pour que le top 10 et les boutons tiennent */
@media (max-height: 430px) {
  #scores { padding-top: calc(10px * var(--u)); padding-bottom: calc(6px * var(--u)); }
  .sc-box { gap: 3px; }
  .sc-sum { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 2px 14px; }
  #sc-list { gap: 0; }
  #sc-list li { padding-top: 0; padding-bottom: 0; line-height: 1.2; }
  .sc-btn { min-height: 36px; }
}

#scores[data-mode="entry"] #sc-list,
#scores[data-mode="entry"] #sc-after { display: none; }
#scores:not([data-mode="entry"]) #sc-form { display: none; }
#scores[data-mode="board"] #sc-retry,
#scores[data-mode="board"] #sc-close { display: none; }
#scores[data-mode="view"] #sc-replay { display: none; }
#scores:not([data-err]) #sc-retry { display: none; }

.nojs {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  text-align: center;
  padding: 24px;
  z-index: 10;
}