/* Padel Pong — retro UI around the canvas */

/* Press Start 2P by CodeMan38, SIL Open Font License 1.1 (see fonts/OFL.txt) */
@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/press-start-2p-latin.woff2") format("woff2");
}

:root {
  --px: 1px;              /* size of one game pixel in CSS px (set from JS) */
  --ink: #1a1c2c;
  --night: #1f4034;
  --night-2: #132a22;
  --green: #85b4a0;       /* logo green */
  --green-dark: #4f8069;
  --green-light: #b8dccb;
  --yellow: #e9ff3b;
  --red: #ff4d6d;
  --pink: #ff7eb6;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--night-2);
}

body {
  color: #fff;
  font-family: "Press Start 2P", ui-monospace, Menlo, monospace;
  -webkit-font-smoothing: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  touch-action: none;
}

#screen {
  position: absolute;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: none;
  cursor: crosshair;
}

/* Soft CRT scanlines, one per game pixel row. */
.scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) calc(var(--px) * .5),
    rgba(0, 0, 0, .09) calc(var(--px) * .5),
    rgba(0, 0, 0, .09) var(--px)
  );
  mix-blend-mode: multiply;
}

#safe-probe {
  position: fixed;
  visibility: hidden;
  pointer-events: none;
  padding:
    env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

/* ---------------- HUD buttons ---------------- */

.hud {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  left: max(10px, env(safe-area-inset-left));
  right: max(10px, env(safe-area-inset-right));
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 3;
}

.hud-right { display: flex; gap: 8px; }

.hud-btn {
  pointer-events: auto;
  touch-action: manipulation;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  color: #fff;
  background: rgba(19, 42, 34, .55);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85), 0 0 0 2px var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s steps(2), background-color .12s;
}

.hud-btn[hidden] { display: none; }
.hud-btn svg { width: 16px; height: 16px; display: block; }
.hud-btn:hover { background: rgba(133, 180, 160, .55); transform: translateY(-2px); }
.hud-btn:active { transform: translateY(1px); }
.hud-btn:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }

#btn-sound .icon-off { display: none; }
#btn-sound.is-muted .icon-on { display: none; }
#btn-sound.is-muted .icon-off { display: block; }

/* ---------------- Overlays ---------------- */

.overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  overflow-y: auto;             /* on a short screen the panel scrolls instead of hiding its buttons */
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding:
    max(64px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background: linear-gradient(180deg, rgba(19, 42, 34, .25), rgba(19, 42, 34, .55));
  animation: overlay-in .25s steps(4) both;
}

.overlay[hidden] { display: none; }

#scr-title { cursor: pointer; background: linear-gradient(180deg, rgba(19, 42, 34, .05), rgba(19, 42, 34, .5)); }

.panel {
  margin: auto;
  width: min(100%, 400px);
  padding: 22px 18px 20px;
  text-align: center;
  background: rgba(31, 64, 52, .94);
  box-shadow:
    inset 0 0 0 3px #fff,
    inset 0 0 0 6px var(--ink),
    0 0 0 3px var(--ink),
    8px 8px 0 3px rgba(8, 22, 17, .45);
  animation: panel-in .35s steps(5) both;
}

.panel--title { padding-top: 18px; }

.crest-wrap {
  width: 124px;
  height: 84px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  background: #fbf8f1;
  box-shadow: inset 0 0 0 3px var(--ink), 0 0 0 3px #fff;
}

.crest {
  width: 99px;           /* 66 x 1.5 */
  height: 63px;
  image-rendering: pixelated;
  opacity: 0;
}

.crest.ready { opacity: 1; }

.kicker {
  margin: 0 0 12px;
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--green-light);
}

.kicker--red { color: var(--red); animation: blink 1s steps(2) infinite; }

.title {
  margin: 0;
  font-size: clamp(26px, 8.5vw, 38px);
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: 1px;
  text-shadow: 3px 3px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink);
}

.title span { display: inline-block; animation: palette 1.2s steps(1) infinite; }
.title span + span { animation-delay: -.6s; }

.title--small { font-size: clamp(20px, 6.5vw, 28px); }
.title--small { color: #fff; }
.title--small span { animation: none; }

.sub {
  margin: 12px 0 16px;
  font-size: 10px;
  color: var(--yellow);
  letter-spacing: 1px;
}

.how {
  list-style: none;
  margin: 0 auto 18px;
  padding: 10px 8px;
  max-width: 320px;
  font-size: 8px;
  line-height: 2.1;
  color: #d9e6ff;
  background: rgba(8, 22, 17, .35);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12);
}

.how li::before { content: "\25B8  "; color: var(--green); }

.only-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .only-touch { display: list-item; }
  .only-mouse { display: none; }
}

.best {
  margin: 14px 0 0;
  font-size: 9px;
  color: var(--green-light);
  letter-spacing: 1px;
}

.final {
  margin: 18px 0 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.final-label { font-size: 10px; color: var(--green-light); letter-spacing: 2px; }

.final-score {
  font-size: 44px;
  color: #fff;
  text-shadow: 4px 4px 0 var(--ink);
}

.newbest {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--yellow);
  animation: palette 0.6s steps(1) infinite;
}

.newbest[hidden] { display: none; }

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

/* ---------------- Pixel buttons ---------------- */

.px-btn {
  position: relative;
  touch-action: manipulation;
  display: inline-block;
  padding: 14px 18px 13px;
  border: 0;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 1px;
  color: #10231b;
  text-decoration: none;
  background: var(--green);
  box-shadow:
    inset -4px -4px 0 var(--green-dark),
    inset 4px 4px 0 var(--green-light),
    0 0 0 3px var(--ink),
    0 6px 0 3px var(--ink);
  cursor: pointer;
  transform: translateY(0);
  transition: transform .1s steps(2), background-color .1s steps(2);
}

.px-btn:hover { background: #95c6b1; transform: translateY(-2px); }

.px-btn:active {
  transform: translateY(4px);
  box-shadow:
    inset 4px 4px 0 var(--green-dark),
    0 0 0 3px var(--ink),
    0 2px 0 3px var(--ink);
}

.px-btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 5px; }

.px-btn--big {
  font-size: 18px;
  padding: 18px 34px 17px;
  animation: nudge 1.4s steps(2) infinite;
}

.px-btn--big:hover { animation: none; }

.px-btn--ghost {
  color: #fff;
  background: #2f5a4a;
  box-shadow:
    inset -4px -4px 0 #1f4034,
    inset 4px 4px 0 #4d7d69,
    0 0 0 3px var(--ink),
    0 6px 0 3px var(--ink);
}

.px-btn--ghost:hover { background: #3a6b57; }

.px-btn--ghost:active {
  box-shadow:
    inset 4px 4px 0 #1f4034,
    0 0 0 3px var(--ink),
    0 2px 0 3px var(--ink);
}

.px-btn[hidden] { display: none; }

/* ---------------- Play a friend ---------------- */

.vs-entry { margin: 18px 0 0; }

.vs-link {
  padding: 6px 4px;
  border: 0;
  font: inherit;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--green-light);
  background: none;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.vs-link:hover { color: var(--yellow); }
.vs-link:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }

.vs-msg { margin: 16px auto 0; max-width: 320px; font-size: 9px; line-height: 1.9; color: #d9e6ff; }

.vs-code {
  margin: 16px 0 0;
  font-size: 30px;
  letter-spacing: 8px;
  color: var(--yellow);
  text-shadow: 3px 3px 0 var(--ink);
}

.vs-code[hidden] { display: none; }

.vs-status { margin: 16px 0 0; min-height: 9px; font-size: 9px; letter-spacing: 1px; color: var(--green-light); }
.vs-status.is-waiting { animation: blink 1.2s steps(2) infinite; }
.vs-status.is-bad { color: var(--red); }

.vs-tip {
  margin: 16px auto 0;
  max-width: 320px;
  padding: 10px 8px;
  font-size: 8px;
  line-height: 2;
  color: #d9e6ff;
  background: rgba(8, 22, 17, .35);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12);
}

.vs-tip[hidden] { display: none; }

.vs-join { margin: 18px auto 0; max-width: 330px; }
.vs-join[hidden] { display: none; }
.vs-input { max-width: 130px; text-align: center; letter-spacing: 6px; }
.vs-join-msg { margin: 10px 0 0; min-height: 8px; font-size: 8px; line-height: 1.8; color: var(--red); }

/* ---------------- Leaderboard ---------------- */

.vs-entry { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 18px; }
.vs-link--small { font-size: 8px; text-underline-offset: 4px; }
.vs-link[hidden] { display: none; }

.lb-box { margin: 16px auto 0; max-width: 330px; }
.lb-form[hidden] { display: none; }
.lb-q { display: block; font-size: 9px; line-height: 1.8; color: var(--yellow); }
.lb-row { display: flex; gap: 12px; justify-content: center; align-items: center; margin-top: 10px; }

.lb-input {
  width: 0;
  flex: 1 1 auto;
  max-width: 220px;
  padding: 10px 8px 8px;
  border: 0;
  font: inherit;
  font-size: 16px;            /* 16px stops phones zooming in */
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  background: rgba(8, 22, 17, .6);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85), 0 0 0 2px var(--ink);
  -webkit-user-select: text;
  user-select: text;
  touch-action: manipulation;
}

.lb-input::placeholder { color: rgba(217, 230, 255, .45); }
.lb-input:focus { outline: 2px solid var(--yellow); outline-offset: 3px; }

.px-btn--small { font-size: 10px; padding: 11px 12px 10px; }

.lb-hint { margin: 10px 0 4px; font-size: 7px; line-height: 1.8; color: var(--green-light); }
.lb-msg { margin: 10px 0 6px; min-height: 0; font-size: 9px; line-height: 1.8; color: var(--green-light); }
.lb-msg:empty { display: none; }
.lb-msg.is-good { color: var(--yellow); }
.lb-msg.is-bad { color: var(--red); }

.panel--lb { width: min(100%, 420px); }

.lb-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 6px 10px;
  max-height: min(40vh, 360px);
  max-height: min(40dvh, 360px);
  overflow-y: auto;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  text-align: left;
  background: rgba(8, 22, 17, .35);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12);
}

.lb-list:empty { display: none; }

.lb-list li {
  display: grid;
  grid-template-columns: 3.2em 1fr auto;
  gap: 8px;
  padding: 8px 2px 7px;
  font-size: 10px;
  line-height: 1.4;
  color: #a9c3b7;
  text-transform: uppercase;
  border-bottom: 2px solid rgba(255, 255, 255, .06);
}

.lb-list li:last-child { border-bottom: 0; }
.lb-list .lb-rank { justify-self: start; }
/* gold, silver and bronze: a medal chip on the rank and a matching name colour */
.lb-list li:nth-child(-n+3) .lb-rank { padding: 2px 4px 1px; margin: -2px 0 -1px; color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.lb-list li:nth-child(1) { color: #ffd84a; }
.lb-list li:nth-child(1) .lb-rank { background: #ffd84a; }
.lb-list li:nth-child(2) { color: #f4f7fb; }
.lb-list li:nth-child(2) .lb-rank { background: #c9d3de; }
.lb-list li:nth-child(3) { color: #f3a86a; }
.lb-list li:nth-child(3) .lb-rank { background: #e0955a; }
.lb-list li.cursor { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 2px #fff; }
.lb-list li.is-you { color: var(--ink); background: var(--yellow); box-shadow: 0 0 0 2px var(--ink); position: relative; z-index: 1; }
.lb-list li.is-you.landed { animation: lb-land .9s steps(6) both; }
@keyframes lb-land {
  0% { transform: scale(1); }
  20% { transform: scale(1.05); }
  40% { transform: scale(1); background: #fff; }
  60% { background: var(--yellow); }
  80% { background: #fff; }
  100% { background: var(--yellow); }
}

/* soft fades so rows slide in and out of view while the list runs */
/* The frame is a real border on the box around the list, so scrolling rows can never draw over it,
   and the list itself fades out at its top and bottom edges into whatever is behind it. */
.lb-board {
  margin-top: 16px;
  border: 2px solid rgba(255, 255, 255, .12);
  background: rgba(8, 22, 17, .35);
  overflow: hidden;
}
.lb-board .lb-list {
  margin-top: 0;
  position: relative;
  padding-block: 14px;
  background: none;
  box-shadow: none;
  -webkit-mask-image: linear-gradient(transparent, #000 18px, #000 calc(100% - 18px), transparent);
  mask-image: linear-gradient(transparent, #000 18px, #000 calc(100% - 18px), transparent);
}
.lb-board:has(.lb-list:empty) { display: none; }
.lb-list .lb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-list .lb-score { text-align: right; }

/* ---------------- Animations ---------------- */

@keyframes palette {
  0%   { color: #ffffff; }
  20%  { color: var(--yellow); }
  40%  { color: var(--green); }
  60%  { color: var(--pink); }
  80%  { color: #7fd6ff; }
}

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

@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }

@keyframes panel-in {
  from { transform: scale(.85); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

@media (max-height: 620px) {
  .overlay { padding-top: max(56px, env(safe-area-inset-top)); }
  .panel { padding: 14px 16px; }
  .crest-wrap { display: none; }
  .how { margin-bottom: 12px; line-height: 1.8; }
  .sub { margin: 8px 0 10px; }
  .final { margin-top: 10px; }
  .final-score { font-size: 32px; }
}

@media (max-height: 430px) {
  .how, .kicker:not(.kicker--red) { display: none; }
  .title { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .title span, .newbest, .kicker--red, .px-btn--big, .vs-status.is-waiting { animation: none; }
  .overlay, .panel { animation: none; }
}