:root {
  --u: 1px;
  --ink: #2a1248;
  --pink: #ff5fa8;
  --cyan: #38d6f5;
  --lemon: #ffdc3f;
  --panel: rgba(32, 14, 74, 0.82);
  --body-font: "Fredoka", "Segoe UI", system-ui, sans-serif;
  --display-font: "Luckiest Guy", "Arial Black", "Segoe UI Black", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #3a1d78, #120829);
  color: #fff;
  font-family: var(--body-font);
  font-weight: 500;
}

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

#stage {
  position: relative;
  width: calc(var(--u) * 960);
  height: calc(var(--u) * 720);
  overflow: hidden;
  box-shadow: 0 0 calc(var(--u) * 50) rgba(255, 95, 168, 0.3);
}

#stage.aiming, #stage.aiming * { cursor: none; }

#gl {
  display: block;
  width: 100%;
  height: 100%;
}

#hud {
  position: absolute;
  inset: calc(var(--u) * 12) calc(var(--u) * 12) auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: calc(var(--u) * 12);
  align-items: start;
  pointer-events: none;
}
#hud[hidden] { display: none; }

.panel {
  padding: calc(var(--u) * 8) calc(var(--u) * 14) calc(var(--u) * 10);
  background: var(--panel);
  border-radius: calc(var(--u) * 16);
  font-size: calc(var(--u) * 16);
  min-height: calc(var(--u) * 86);
}
.panel-p1 { border: calc(var(--u) * 3) solid var(--pink); }
.panel-p2 { border: calc(var(--u) * 3) solid var(--cyan); text-align: right; }

.role {
  font-family: var(--display-font);
  font-size: calc(var(--u) * 19);
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.panel-p1 .role { color: var(--pink); }
.panel-p2 .role { color: var(--cyan); }
.stat b { font-size: calc(var(--u) * 20); font-weight: 700; }

.combo {
  height: calc(var(--u) * 24);
  color: var(--lemon);
  font-size: calc(var(--u) * 18);
  font-weight: 700;
}

.meter {
  position: relative;
  height: calc(var(--u) * 22);
  margin-top: calc(var(--u) * 3);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.14);
  border-radius: calc(var(--u) * 11);
}
.meter span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, var(--cyan), var(--pink));
  border-radius: inherit;
}
.meter em {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: calc(var(--u) * 13);
  font-style: normal;
  font-weight: 700;
}
.meter.full { box-shadow: 0 0 calc(var(--u) * 14) var(--pink); animation: pulse 0.5s infinite alternate; }

@keyframes pulse {
  to { box-shadow: 0 0 calc(var(--u) * 24) var(--lemon); }
}

.center { text-align: center; min-width: calc(var(--u) * 210); }

#hearts {
  display: flex;
  justify-content: center;
  gap: calc(var(--u) * 3);
  font-size: calc(var(--u) * 30);
  line-height: 1;
  color: #ff3f6e;
  text-shadow: 0 calc(var(--u) * 2) 0 var(--ink);
}
#hearts i { font-style: normal; transition: transform 0.15s; }
#hearts i.empty { color: rgba(255, 255, 255, 0.22); transform: scale(0.82); }

#score {
  margin-top: calc(var(--u) * 4);
  font-family: var(--display-font);
  font-size: calc(var(--u) * 42);
  line-height: 1;
  text-shadow: 0 calc(var(--u) * 3) 0 var(--ink);
}

#banner, #count {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--display-font);
  pointer-events: none;
  opacity: 0;
}
#banner {
  top: calc(var(--u) * 150);
  color: var(--lemon);
  font-size: calc(var(--u) * 62);
  text-shadow: 0 calc(var(--u) * 5) 0 var(--ink), 0 0 calc(var(--u) * 30) var(--pink);
}
#banner.show { animation: banner 2.2s both; }
@keyframes banner {
  0% { opacity: 0; transform: scale(0.4); }
  14% { opacity: 1; transform: scale(1.08); }
  22% { transform: scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

#count {
  top: calc(var(--u) * 230);
  font-size: calc(var(--u) * 170);
  color: #fff;
  text-shadow: 0 calc(var(--u) * 8) 0 var(--ink), 0 0 calc(var(--u) * 40) var(--pink);
}
#count.show { opacity: 1; }

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--u) * 24) calc(var(--u) * 40);
  text-align: center;
  background: rgba(24, 8, 62, 0.68);
}
.screen[hidden] { display: none; }

h1, h2 {
  margin: 0;
  font-family: var(--display-font);
  font-weight: 400;
  line-height: 1;
  text-shadow: 0 calc(var(--u) * 6) 0 var(--ink);
}
h1 {
  font-size: calc(var(--u) * 94);
  color: var(--lemon);
  transform: rotate(-2deg);
}
h2 {
  font-size: calc(var(--u) * 62);
  color: var(--lemon);
}

.tagline {
  margin: calc(var(--u) * 8) 0 calc(var(--u) * 22);
  font-size: calc(var(--u) * 27);
  font-weight: 700;
  color: #ffc4e1;
}

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 18);
  width: 100%;
}
.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--u) * 14) calc(var(--u) * 18);
  background: var(--panel);
  border-radius: calc(var(--u) * 20);
  transition: transform 0.15s, background 0.15s;
}
.card-p1 { border: calc(var(--u) * 4) solid var(--pink); }
.card-p2 { border: calc(var(--u) * 4) solid var(--cyan); }
.card p {
  margin: calc(var(--u) * 10) 0;
  font-size: calc(var(--u) * 18);
  line-height: 1.3;
  flex: 1;
}
.player {
  font-family: var(--display-font);
  font-size: calc(var(--u) * 22);
  letter-spacing: 0.03em;
  margin-bottom: calc(var(--u) * 10);
}
.card-p1 .player { color: var(--pink); }
.card-p2 .player { color: var(--cyan); }
.pink { color: var(--pink); }
.cyan { color: var(--cyan); }

.keys {
  display: grid;
  grid-template-columns: repeat(3, calc(var(--u) * 42));
  gap: calc(var(--u) * 4);
  height: calc(var(--u) * 88);
}
.keys .up { grid-column: 2; }
.keys .ghost { visibility: hidden; display: none; }
.keys kbd {
  display: grid;
  place-items: center;
  height: calc(var(--u) * 42);
  background: #fff;
  color: var(--ink);
  border-radius: calc(var(--u) * 9);
  font: 700 calc(var(--u) * 24) var(--body-font);
  box-shadow: 0 calc(var(--u) * 4) 0 #b9a8e6;
}
.keys kbd:nth-child(2) { grid-column: 1; grid-row: 2; }
.keys kbd:nth-child(4) { grid-column: 3; grid-row: 2; }

.mouse { height: calc(var(--u) * 88); width: auto; }

.status {
  width: 100%;
  padding: calc(var(--u) * 8);
  background: rgba(255, 255, 255, 0.12);
  border-radius: calc(var(--u) * 12);
  font-size: calc(var(--u) * 19);
  font-weight: 700;
  animation: nudge 0.8s infinite alternate;
}
@keyframes nudge { to { background: rgba(255, 255, 255, 0.28); } }

.card.ready { transform: translateY(calc(var(--u) * -5)); }
.card.ready .status { animation: none; background: var(--lemon); color: var(--ink); }

.hint {
  max-width: calc(var(--u) * 760);
  margin: calc(var(--u) * 18) 0 0;
  font-size: calc(var(--u) * 19);
  line-height: 1.3;
}
.fine {
  margin: calc(var(--u) * 10) 0 0;
  color: #d7c6ff;
  font-size: calc(var(--u) * 15);
  line-height: 1.4;
}

.btn {
  margin-top: calc(var(--u) * 22);
  padding: calc(var(--u) * 14) calc(var(--u) * 42);
  border: 0;
  border-radius: calc(var(--u) * 18);
  background: var(--lemon);
  color: var(--ink);
  font-family: var(--display-font);
  font-size: calc(var(--u) * 30);
  cursor: pointer;
  box-shadow: 0 calc(var(--u) * 6) 0 #c78a00;
}
.btn:hover { background: #fff07a; }
.btn:active { transform: translateY(calc(var(--u) * 4)); box-shadow: 0 calc(var(--u) * 2) 0 #c78a00; }
.btn:focus-visible { outline: calc(var(--u) * 4) solid #fff; outline-offset: calc(var(--u) * 3); }

.btn-small {
  padding: calc(var(--u) * 8) calc(var(--u) * 18);
  border: 0;
  border-radius: calc(var(--u) * 12);
  background: var(--cyan);
  color: var(--ink);
  font: 700 calc(var(--u) * 18) var(--body-font);
  cursor: pointer;
}
.btn-small:hover { background: #8ceaff; }
.btn-small:focus-visible { outline: calc(var(--u) * 3) solid #fff; outline-offset: calc(var(--u) * 2); }
#open-scores {
  position: absolute;
  top: calc(var(--u) * 14);
  right: calc(var(--u) * 14);
}

#name-form {
  margin-top: calc(var(--u) * 16);
  font-size: calc(var(--u) * 22);
  font-weight: 700;
  color: var(--lemon);
}
#name-form[hidden] { display: none; }
.name-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: calc(var(--u) * 10);
  margin-top: calc(var(--u) * 8);
}
.name-field {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
  font-size: calc(var(--u) * 16);
  text-align: left;
}
.name-p1 { color: var(--pink); }
.name-p2 { color: var(--cyan); }
.name-input {
  width: calc(var(--u) * 250);
  padding: calc(var(--u) * 8) calc(var(--u) * 14);
  border: calc(var(--u) * 3) solid currentColor;
  border-radius: calc(var(--u) * 12);
  background: #fff;
  color: var(--ink);
  font: 700 calc(var(--u) * 22) var(--body-font);
  user-select: text;
}
.name-p1 .name-input { border-color: var(--pink); }
.name-p2 .name-input { border-color: var(--cyan); }
.name-input:focus { outline: calc(var(--u) * 3) solid var(--lemon); }
.name-input::placeholder { color: #8a7aa8; font-weight: 500; }
.name-row .btn-small { padding-block: calc(var(--u) * 12); }
#name-hint.error { color: #ff9ab5; font-weight: 700; }

.board {
  display: grid;
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  grid-auto-columns: calc(var(--u) * 410);
  gap: calc(var(--u) * 4) calc(var(--u) * 16);
  margin: calc(var(--u) * 16) 0 0;
  padding: calc(var(--u) * 10) calc(var(--u) * 16);
  list-style: none;
  background: var(--panel);
  border-radius: calc(var(--u) * 14);
}
.board[hidden] { display: none; }
.board li {
  display: grid;
  grid-template-columns: calc(var(--u) * 34) 1fr auto;
  gap: calc(var(--u) * 6);
  padding: calc(var(--u) * 3) calc(var(--u) * 8);
  border-radius: calc(var(--u) * 8);
  font-size: calc(var(--u) * 18);
  text-align: left;
}
.board .rank { color: #d7c6ff; }
.board .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .pts { font-weight: 700; }
.board li.mine { background: var(--lemon); color: var(--ink); }
.board li.mine .rank { color: var(--ink); }
.board li.empty { display: block; grid-row: 1 / -1; color: #d7c6ff; text-align: center; }

.final {
  margin-top: calc(var(--u) * 10);
  font-family: var(--display-font);
  font-size: calc(var(--u) * 76);
  line-height: 1;
  text-shadow: 0 calc(var(--u) * 6) 0 var(--ink);
}
.new-best {
  margin: calc(var(--u) * 12) 0 0;
  color: var(--cyan);
  font-size: calc(var(--u) * 28);
  font-weight: 700;
}
.new-best[hidden] { display: none; }

.results {
  display: grid;
  grid-template-columns: repeat(4, calc(var(--u) * 150));
  gap: calc(var(--u) * 10);
  margin: calc(var(--u) * 14) 0 0;
}
.results div {
  padding: calc(var(--u) * 6) calc(var(--u) * 10);
  background: var(--panel);
  border-radius: calc(var(--u) * 14);
}
.results dt { color: #d7c6ff; font-size: calc(var(--u) * 16); }
.results dd { margin: 0; font-size: calc(var(--u) * 30); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .status, .meter.full { animation: none; }
  #banner.show { animation-name: bannerFade; }
  @keyframes bannerFade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
}