:root {
  --bg: #000;
  --frame: #e8e800;
  --text: #e8e8e8;
  --muted: #8a8a8a;
  --panel: rgba(0, 0, 0, 0.88);
  --btn: #e8e800;
  --btn-text: #000;
  --side: #3c3c3c;
  --pixel: 'Press Start 2P', monospace;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--mono); overflow: hidden; }
.hidden { display: none !important; }
.screen { position: fixed; inset: 0; }

h1 { font-family: var(--pixel); color: var(--frame); line-height: 1.4; margin: 0 0 16px; font-size: 34px; text-align: center; }
h1.small { font-size: 18px; }
.sub { color: var(--muted); text-align: center; margin: 0 0 32px; }
.hint { color: var(--muted); font-size: 13px; text-align: center; }

.btn {
  display: inline-block; font-family: var(--pixel); font-size: 11px; text-decoration: none;
  background: var(--btn); color: var(--btn-text); border: 0; padding: 12px 16px; cursor: pointer;
  box-shadow: 4px 4px 0 #7a7a00;
}
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #7a7a00; }
.btn.big { font-size: 14px; padding: 16px 24px; }
.btn.ghost { background: transparent; color: var(--frame); box-shadow: none; border: 2px solid var(--frame); }
.btn.tiny { font-size: 8px; padding: 6px 8px; }

input {
  font-family: var(--mono); font-size: 15px; background: #111; color: var(--text);
  border: 2px solid #555; padding: 10px; outline: none; min-width: 0;
}
input:focus { border-color: var(--frame); }

/* Landing */
#landing { display: flex; padding: 16px; overflow-y: auto; }
.landing-box { text-align: center; max-width: 520px; width: 100%; margin: auto; padding: 24px 0; }

#games { margin-top: 32px; text-align: left; }
#games h2 { font-family: var(--pixel); font-size: 11px; color: var(--frame); margin: 24px 0 10px; }
.games { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.game {
  display: flex; align-items: baseline; gap: 12px; padding: 10px 12px; background: #111;
  border: 2px solid #222; color: var(--text); text-decoration: none; font-size: 14px;
}
.game:hover, .game:focus-visible { border-color: var(--frame); outline: none; }
.game .names { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.game .names b { font-weight: 600; color: #fff; }
.game .status { flex: none; font-size: 12px; color: var(--muted); }

/* Room */
/* viewport-fit=cover: keep everything out of the notch, rounded corners and home bar. */
#stage {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#field-wrap { position: relative; outline: 3px solid var(--frame); flex: none; }
#field-wrap canvas { position: absolute; left: 0; top: 0; }
#side {
  width: 170px; flex: none; margin-left: 3px; background: var(--side); overflow-y: auto;
  display: flex; flex-direction: column; padding: 16px 12px; gap: 16px;
}
#scores { display: flex; flex-direction: column; gap: 14px; }
.score-row { display: flex; flex-direction: column; gap: 4px; transition: opacity .2s; }
.score-row.dead { opacity: 0.4; }
.score-row .num { font-family: var(--pixel); font-size: 30px; }
.score-row .nm { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.score-row .nm .me { color: #fff; font-weight: 600; }
#goal { font-family: var(--pixel); font-size: 9px; line-height: 1.6; color: #d0d0d0; }
#goal span { display: block; }
#side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; font-size: 11px; color: #bbb; }
#side-join { display: flex; flex-direction: column; gap: 6px; }
#side-join input { font-size: 13px; padding: 6px; }
#ping { font-size: 10px; color: #999; }

#msg {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--pixel); font-size: 16px; text-align: center; line-height: 1.6;
  pointer-events: none; text-shadow: 0 0 6px #000, 0 0 2px #000;
  white-space: nowrap;
}

.panel {
  position: absolute; inset: 0; background: var(--panel); overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; padding: 20px 16px; gap: 14px;
}
.share { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 440px; }
/* The link is text, not a field: it cannot be edited or focused. */
#share-url {
  flex: 1; min-width: 0; display: flex; justify-content: center; font-size: 13px; color: var(--muted);
  white-space: nowrap; -webkit-user-select: all; user-select: all;
}
#share-url .host { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#share-url .id { flex: none; color: var(--frame); font-weight: 600; }
#copy { flex: none; min-width: 110px; } /* fits "Copied!" without a jump */
.touch #room #share-url { -webkit-user-select: all; user-select: all; }
#join-box { display: flex; gap: 8px; width: 100%; max-width: 440px; }
#join-box input { flex: 1; }

#lobby-players { list-style: none; padding: 0; margin: 0; width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 6px; }
#lobby-players li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; background: #111; font-size: 14px; }
#lobby-players .sw { width: 18px; height: 18px; flex: none; border: 0; padding: 0; }
#lobby-players .sw.mine { cursor: pointer; outline: 2px solid #fff; outline-offset: 1px; }
#lobby-players .pname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#lobby-players .keys { display: flex; gap: 4px; }
.key {
  font-family: var(--mono); font-size: 11px; background: #222; color: #ddd; border: 1px solid #555;
  padding: 3px 6px; cursor: pointer; min-width: 26px;
}
.key.listen { border-color: var(--frame); color: var(--frame); }
.x { background: none; border: 0; color: #888; cursor: pointer; font-size: 16px; }
.tag { font-size: 10px; color: var(--muted); }

.lobby-foot { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 4px; }
.rules { max-width: 440px; line-height: 1.5; }

#ranking { font-family: var(--pixel); font-size: 13px; line-height: 2.2; padding-left: 28px; margin: 0; }

#conn {
  position: fixed; left: 50%; top: calc(12px + env(safe-area-inset-top)); transform: translateX(-50%);
  background: #a00; color: #fff; padding: 8px 12px; font-size: 13px;
}

/* Touch pads. Only a picture of where to press: the whole left/right half of the screen steers. */
#touch { position: fixed; inset: 0; pointer-events: none; }
#touch .pad {
  position: absolute; bottom: calc(16px + env(safe-area-inset-bottom)); width: var(--pad-w, 88px); height: var(--pad-h, 88px);
  display: flex; align-items: center; justify-content: center; font-size: 28px;
  color: rgba(232, 232, 0, 0.45); border: 2px solid rgba(232, 232, 0, 0.3); background: rgba(255, 255, 255, 0.03);
  transition: background .06s, border-color .06s;
}
#touch .pad.l { left: calc(12px + env(safe-area-inset-left)); }
#touch .pad.r { right: calc(12px + env(safe-area-inset-right)); }
#touch .pad.on { background: rgba(232, 232, 0, 0.28); border-color: var(--frame); color: var(--frame); }
#touch.below .pad { top: var(--pad-top); width: auto; height: auto; font-size: 40px; }
#touch.below .pad.l { left: calc(16px + env(safe-area-inset-left)); right: calc(50% + 6px); }
#touch.below .pad.r { left: calc(50% + 6px); right: calc(16px + env(safe-area-inset-right)); }

/* Phones: no browser gestures (zoom, text selection, long-press menu) while playing. */
.touch #room { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.touch #room input { -webkit-user-select: text; user-select: text; }
.touch .panel { touch-action: pan-y; }
.touch #you-keys { display: none; }

/* Compact scoreboard: one line per player (portrait phones, and short landscape screens) */
@media (max-aspect-ratio: 1/1), (max-height: 520px) {
  #scores { gap: 6px; }
  .score-row { flex-direction: row; align-items: center; gap: 10px; min-width: 0; }
  .score-row .num { font-size: 14px; min-width: 2ch; text-align: right; flex: none; }
  .score-row .nm { font-size: 13px; }
  #side { padding: 10px 12px; gap: 10px; }
  /* Lobby and game-over panels take the whole screen instead of the small field. */
  .panel {
    position: fixed; z-index: 5; background: var(--bg);
    padding: calc(20px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right))
      calc(20px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
  }
}

/* Short landscape screens (phones): a narrower scoreboard leaves room for the touch pads. */
@media (min-aspect-ratio: 1/1) and (max-height: 520px) {
  #side { width: 140px; }
}

/* Portrait / phones: compact scores below the field, as wide as the frame */
@media (max-aspect-ratio: 1/1) {
  #stage { flex-direction: column; justify-content: flex-start; padding-top: calc(11px + env(safe-area-inset-top)); }
  #side { margin: 3px 0 0; }
  #goal span { display: inline; margin-right: 1.5em; }
  #scores { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px 16px; }
  #side-foot { margin-top: 0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
  #side-foot #ping { margin-left: auto; }
}