/* All overlay sizes scale with the 960x540 game box via --u (1 logical px). */
:root {
  --cyan: #7ee0ff;
  --pink: #ff5ad8;
  --yellow: #ffe14a;
  --red: #ff4d4d;
  --panel: rgba(10, 6, 30, 0.84);
  --edge: #4a34a0;
  --font: "Press Start 2P", ui-monospace, monospace;
}

html,
body {
  margin: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  color: #fff;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#wrap {
  position: relative;
  --u: 1px;
  width: 960px;
  height: 540px;
  font-size: calc(var(--u) * 10);
  line-height: 1.6;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 22);
  padding: calc(var(--u) * 24);
  box-sizing: border-box;
  background: rgba(3, 1, 12, 0.45);
}

.hidden {
  display: none !important;
}

.panel {
  background: var(--panel);
  border: calc(var(--u) * 3) solid var(--edge);
  box-shadow: 0 0 0 calc(var(--u) * 3) #120a30, 0 0 calc(var(--u) * 40) rgba(126, 224, 255, 0.18);
  padding: calc(var(--u) * 20);
  border-radius: calc(var(--u) * 4);
  box-sizing: border-box;
}

.panel.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 12);
  min-width: calc(var(--u) * 320);
}

h2 {
  margin: 0 0 calc(var(--u) * 12);
  font-size: calc(var(--u) * 16);
  color: var(--yellow);
  text-align: center;
  text-shadow: 0 calc(var(--u) * 3) 0 #7a3b00;
}

p {
  margin: 0;
}

b {
  color: var(--red);
}

/* ---------- title ---------- */
.title-panel {
  width: calc(var(--u) * 520);
}

.logo {
  margin: 0;
  font-size: calc(var(--u) * 46);
  line-height: 1.1;
  color: var(--cyan);
  letter-spacing: calc(var(--u) * 2);
  text-shadow: 0 calc(var(--u) * 4) 0 #1b4f8a, 0 0 calc(var(--u) * 24) rgba(126, 224, 255, 0.6);
}

.logo span {
  display: block;
  color: var(--pink);
  text-shadow: 0 calc(var(--u) * 4) 0 #6a1050, 0 0 calc(var(--u) * 24) rgba(255, 90, 216, 0.6);
}

.tag {
  margin: calc(var(--u) * 12) 0 calc(var(--u) * 14);
  color: #c9c3ef;
  font-size: calc(var(--u) * 9);
}

label {
  display: block;
  font-size: calc(var(--u) * 9);
  color: var(--yellow);
  margin-bottom: calc(var(--u) * 6);
}

.row {
  display: flex;
  gap: calc(var(--u) * 10);
  align-items: stretch;
}

input {
  flex: 1;
  min-width: 0;
  font-family: var(--font);
  font-size: calc(var(--u) * 14);
  padding: calc(var(--u) * 10);
  background: #000;
  color: #fff;
  border: calc(var(--u) * 3) solid var(--cyan);
  border-radius: calc(var(--u) * 3);
  outline: none;
  text-transform: uppercase;
  -webkit-user-select: text;
  user-select: text;
}

input:focus {
  box-shadow: 0 0 calc(var(--u) * 14) rgba(126, 224, 255, 0.7);
}

.btn {
  font-family: var(--font);
  font-size: calc(var(--u) * 11);
  padding: calc(var(--u) * 10) calc(var(--u) * 14);
  color: #fff;
  background: #2a1d63;
  border: calc(var(--u) * 3) solid #6b54d6;
  border-radius: calc(var(--u) * 3);
  cursor: pointer;
  box-shadow: 0 calc(var(--u) * 4) 0 #120a30;
  white-space: nowrap;
}

.btn:hover,
.btn:focus-visible {
  filter: brightness(1.25);
  outline: none;
}

.btn:active {
  transform: translateY(calc(var(--u) * 3));
  box-shadow: 0 calc(var(--u) * 1) 0 #120a30;
}

.btn.primary {
  background: #d1336f;
  border-color: #ff7ab0;
  box-shadow: 0 calc(var(--u) * 4) 0 #5a0f2c;
}

.btn.ghost {
  background: transparent;
  border-color: #554a80;
  color: #aaa3cc;
  font-size: calc(var(--u) * 8);
}

.err {
  min-height: calc(var(--u) * 14);
  margin-top: calc(var(--u) * 6);
  color: var(--red);
  font-size: calc(var(--u) * 8);
}

.info {
  display: flex;
  gap: calc(var(--u) * 16);
  margin-top: calc(var(--u) * 2);
}

.keys,
.legend {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: calc(var(--u) * 7.5);
  color: #c9c3ef;
}

.keys li {
  margin-bottom: calc(var(--u) * 7);
}

kbd {
  font-family: var(--font);
  display: inline-block;
  padding: calc(var(--u) * 2) calc(var(--u) * 4);
  margin-right: calc(var(--u) * 3);
  border: calc(var(--u) * 1) solid #6b54d6;
  border-radius: calc(var(--u) * 2);
  background: #1a1240;
  color: var(--cyan);
}

.legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--u) * 6) calc(var(--u) * 10);
  align-content: start;
}

.legend li {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 5);
}

.legend img {
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 20);
  object-fit: contain;
}

.lives-note {
  margin-top: calc(var(--u) * 12);
  font-size: calc(var(--u) * 8);
  color: #ffb3c0;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 3);
}

.lives-note img {
  width: calc(var(--u) * 16);
}

.lives-note img:last-of-type {
  margin-right: calc(var(--u) * 6);
}

/* ---------- leaderboard ---------- */
.board-panel {
  width: calc(var(--u) * 340);
  align-self: center;
}

.net {
  text-align: center;
  font-size: calc(var(--u) * 7);
  color: #8a83b5;
  margin: calc(var(--u) * -6) 0 calc(var(--u) * 10);
}

.net.online::before {
  content: '● ';
  color: #4cff7a;
}

.net.offline::before {
  content: '● ';
  color: var(--red);
}

.board {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: calc(var(--u) * 9);
}

.board li {
  display: grid;
  grid-template-columns: calc(var(--u) * 34) 1fr auto calc(var(--u) * 40);
  gap: calc(var(--u) * 6);
  align-items: center;
  padding: calc(var(--u) * 6) calc(var(--u) * 6);
  border-bottom: calc(var(--u) * 1) dashed rgba(107, 84, 214, 0.4);
}

.board li:nth-child(1) .rk { color: var(--yellow); }
.board li:nth-child(2) .rk { color: #d9e1ff; }
.board li:nth-child(3) .rk { color: #ff9b5a; }

.board .rk { color: #8a83b5; }
.board .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .sc { color: var(--cyan); text-align: right; }
.board .st { color: #8a83b5; text-align: right; font-size: calc(var(--u) * 7); }

.board li.me {
  background: rgba(255, 90, 216, 0.22);
  outline: calc(var(--u) * 2) solid var(--pink);
  animation: glow 1s ease-in-out infinite alternate;
}

.board li.gap {
  display: block;
  text-align: center;
  color: #8a83b5;
  border: none;
  padding: calc(var(--u) * 2);
}

.board li.empty {
  display: block;
  text-align: center;
  color: #8a83b5;
  line-height: 2;
}

.board-panel .row {
  margin-top: calc(var(--u) * 14);
  justify-content: center;
}

@keyframes glow {
  from { background: rgba(255, 90, 216, 0.12); }
  to { background: rgba(255, 90, 216, 0.32); }
}

/* ---------- game over ---------- */
.over-title {
  font-size: calc(var(--u) * 28);
  color: var(--red);
  text-shadow: 0 calc(var(--u) * 4) 0 #5a0f0f;
}

.pilot {
  color: var(--cyan);
  font-size: calc(var(--u) * 11);
}

.final {
  font-size: calc(var(--u) * 30);
  color: var(--yellow);
  text-shadow: 0 0 calc(var(--u) * 18) rgba(255, 225, 74, 0.6);
}

.stats {
  font-size: calc(var(--u) * 8);
  color: #c9c3ef;
  text-align: center;
  line-height: 2;
}

.rank {
  font-size: calc(var(--u) * 10);
  color: var(--pink);
  text-align: center;
  min-height: calc(var(--u) * 16);
}

.blink {
  animation: blink 0.8s steps(2) infinite;
  color: var(--cyan);
  font-size: calc(var(--u) * 14);
}

@keyframes blink {
  50% { opacity: 0; }
}

/* ---------- touch ---------- */
#touch-ui button {
  position: absolute;
  font-family: var(--font);
  color: #fff;
  border: calc(var(--u) * 3) solid rgba(255, 255, 255, 0.5);
  background: rgba(209, 51, 111, 0.45);
  border-radius: 50%;
}

#btn-bomb {
  right: calc(var(--u) * 28);
  bottom: calc(var(--u) * 70);
  width: calc(var(--u) * 84);
  height: calc(var(--u) * 84);
  font-size: calc(var(--u) * 12);
}

#btn-pause {
  top: calc(var(--u) * 50);
  left: calc(50% - var(--u) * 20);
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
  font-size: calc(var(--u) * 10);
  background: rgba(42, 29, 99, 0.6) !important;
}

#rotate {
  display: none;
  z-index: 10;
  background: #05030f;
  text-align: center;
  font-size: calc(var(--u) * 20);
  line-height: 2;
}

.touch-hint {
  color: #4cff7a;
}

/* Portrait on a touch device: the game is blocked until the phone is turned sideways. */
@media (orientation: portrait) and (pointer: coarse) {
  #rotate {
    display: flex;
    flex-direction: column;
    position: fixed;
    gap: 28px;
    font-size: 13px;
    padding: 24px;
  }
}

.phone {
  width: 54px;
  height: 92px;
  border: 5px solid var(--cyan);
  border-radius: 10px;
  box-shadow: 0 0 18px rgba(126, 224, 255, 0.6);
  animation: turn 2s ease-in-out infinite;
}

@keyframes turn {
  0%, 25% { transform: rotate(0deg); }
  60%, 100% { transform: rotate(-90deg); }
}