* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #0a1a0f;
  color: #e8f2e8;
  font-family: "Courier New", ui-monospace, monospace;
  overflow: hidden;
  /* No rubber banding, no pinch zoom, no text selection while you are playing. */
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

#game { touch-action: none; }

#wrap {
  position: relative;
  width: 100vw;
  /* 100vh on iOS counts the browser chrome, so the bottom of the layout - the
     on-screen controls, the kick off button - ends up under it. dvh is the part
     you can actually see; the vh line stays as a fallback. */
  height: 100vh;
  height: 100dvh;
  display: grid;
  place-items: center;
}

#game {
  width: min(100vw, calc(100vh * 900 / 620));
  height: auto;
  max-height: 100vh;
  max-height: 100dvh;
  image-rendering: pixelated;
  background: #0d3d18;
  outline: none;
  box-shadow: 0 0 0 2px #000, 0 18px 60px rgba(0, 0, 0, 0.6);
}

.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  /* Lighter than it was: there is a picture behind this now, and it should be
     visible around the panel. */
  background: rgba(4, 14, 8, 0.55);
  backdrop-filter: blur(1px);
  z-index: 10;
}

.overlay.hidden { display: none; }

.row.hidden { display: none; }

.panel {
  width: min(560px, 92vw);
  max-height: 92vh;
  max-height: 92dvh;
  overflow: auto;
  padding: 26px 30px;
  background: #12331d;
  border: 2px solid #2f7a42;
  box-shadow: inset 0 0 0 2px #0a1f11, 0 10px 40px rgba(0, 0, 0, 0.5);
}

.panel.small { width: min(320px, 90vw); text-align: center; }

h1 {
  margin: 0;
  font-size: 34px;
  letter-spacing: 3px;
  color: #ffe14d;
  text-shadow: 3px 3px 0 #7a3a00;
}

h1 span { display: block; color: #fff; text-shadow: 3px 3px 0 #12446b; }

h2 { margin: 0 0 18px; letter-spacing: 3px; color: #ffe14d; }

.tag { margin: 6px 0 22px; color: #9fc7a8; font-size: 13px; letter-spacing: 1px; }

.row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.row label {
  width: 92px;
  font-size: 13px;
  color: #9fc7a8;
  letter-spacing: 1px;
}

.btns { display: flex; gap: 8px; flex-wrap: wrap; }

button, select {
  font-family: inherit;
  font-size: 13px;
  padding: 9px 14px;
  color: #e8f2e8;
  background: #1c4a2a;
  border: 2px solid #2f7a42;
  cursor: pointer;
  letter-spacing: 1px;
}

button:hover, select:hover { background: #26623a; }

button.active { background: #ffe14d; color: #12331d; border-color: #ffe14d; font-weight: bold; }

button.primary {
  width: 100%;
  margin-top: 18px;
  padding: 13px;
  font-size: 17px;
  font-weight: bold;
  background: #ffe14d;
  color: #12331d;
  border-color: #c9ab21;
}

button.primary:hover { background: #fff08a; }

.panel.small button { width: 100%; margin-top: 8px; }

.keys {
  width: 100%;
  margin: 18px 0 4px;
  border-collapse: collapse;
  font-size: 12px;
}

.keys th, .keys td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid #234c2f;
}

.keys th { color: #9fc7a8; font-weight: normal; letter-spacing: 1px; }

.keys td .bind {
  min-width: 74px;
  padding: 5px 8px;
  font-size: 12px;
  letter-spacing: 0;
}

.keys td .bind.listening {
  background: #ffe14d;
  color: #12331d;
  border-color: #ffe14d;
}

.keys td .bind.clash {
  border-color: #ff7a5a;
  color: #ff9d85;
}

.preset { width: 100%; padding: 5px 6px; font-size: 11px; letter-spacing: 0; }

#bindHint.warn { color: #ff9d85; }

.hints {
  margin: 12px 0 0;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.7;
  color: #b9d6c0;
}

.hints b { color: #ffe14d; }

/* --- online --- */

.explain, .fineprint {
  font-size: 12px;
  line-height: 1.7;
  color: #b9d6c0;
}

.explain b { color: #ffe14d; }

.fineprint { margin: 16px 0 0; color: #7ea888; }

.fineprint code { color: #b9d6c0; }

.code {
  margin: 16px 0 6px;
  padding: 14px;
  font-size: 44px;
  font-weight: bold;
  letter-spacing: 14px;
  text-indent: 14px;
  text-align: center;
  color: #ffe14d;
  background: #0c2414;
  border: 2px dashed #2f7a42;
}

.code.hidden { display: none; }

.status {
  min-height: 18px;
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: #9fc7a8;
}

.joinrow { display: flex; gap: 8px; margin-top: 12px; }

.joinrow input {
  flex: 1;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 6px;
  text-align: center;
  text-transform: uppercase;
  color: #e8f2e8;
  background: #0c2414;
  border: 2px solid #2f7a42;
}

.joinrow input::placeholder { color: #46734f; letter-spacing: 6px; }

.joinrow button { white-space: nowrap; }

button:disabled { opacity: 0.45; cursor: default; }
button:disabled:hover { background: #1c4a2a; }
button.primary:disabled:hover { background: #ffe14d; }

/* A phone held sideways is about 400px tall. The panel scrolls, but a button
   you have to scroll to find is a button nobody presses, so the primary action
   sticks to the bottom of it and everything else gives up its spare room. */
/* Sticky on the footer rather than on the button: a sticky element can never
   leave its own container, and inside the mode panels the button was being
   clamped to a box that had already scrolled off. As a direct child of the
   panel it has the whole scroll length to work with. */
.panelFooter {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding-top: 4px;
  background: #12331d;
  /* Its own dark edge, so the content scrolling underneath does not appear to
     touch it, and a shadow to lift it off the list. */
  box-shadow: 0 -12px 16px -8px rgba(18, 51, 29, 0.95);
}

@media (max-height: 560px) {
  .panel { padding: 14px 18px; max-height: 96dvh; }
  h1 { font-size: 22px; }
  h1 span { display: inline; margin-left: 8px; }
  .tag { margin: 4px 0 12px; font-size: 11px; }
  .row { margin-bottom: 8px; gap: 10px; }
  .row label { width: 76px; font-size: 11px; }
  button, select { padding: 6px 10px; font-size: 11px; }
  button.primary { margin-top: 10px; padding: 11px; font-size: 15px; }
  .explain, .fineprint, .hints { font-size: 11px; line-height: 1.5; }
  .keys th, .keys td { padding: 3px 6px; }
}

/* On a touch device the tips are a wall of text about keys you do not have. */
@media (pointer: coarse) {
  .hints { display: none; }
}

details {
  margin: 14px 0 4px;
  border-top: 1px solid #234c2f;
  border-bottom: 1px solid #234c2f;
}

summary {
  padding: 9px 2px;
  font-size: 12px;
  letter-spacing: 1px;
  color: #9fc7a8;
  cursor: pointer;
}

summary:hover { color: #ffe14d; }

details[open] summary { color: #ffe14d; }

details .keys { margin-top: 0; }

/* --- touch controls --- */

#touch {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none; /* only the controls themselves take touches */
  padding: 0 max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-bottom));
}

#stick, #touchButtons { pointer-events: auto; touch-action: none; }

#stick {
  position: absolute;
  left: max(20px, env(safe-area-inset-left));
  bottom: max(34px, calc(env(safe-area-inset-bottom) + 22px));
  width: 130px;
  height: 130px;
  border: 3px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28);
}

#knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  margin: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 225, 77, 0.75);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

#touchButtons {
  position: absolute;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(34px, calc(env(safe-area-inset-bottom) + 22px));
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

#touchButtons button {
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0;
  border-width: 3px;
}

#btnKick {
  width: 108px;
  height: 108px;
  font-size: 15px;
  background: rgba(255, 225, 77, 0.85);
  color: #12331d;
  border-color: rgba(255, 255, 255, 0.5);
}

#btnSwap {
  width: 74px;
  height: 74px;
  background: rgba(28, 74, 42, 0.85);
  color: #e8f2e8;
  border-color: rgba(255, 255, 255, 0.35);
}

#touchButtons button.pressed { filter: brightness(1.35); transform: scale(0.94); }

/* Portrait on a phone is unplayable: the pitch ends up a few centimetres tall. */
#rotate { display: none; }

@media (orientation: portrait) and (pointer: coarse) {
  #rotate {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    padding: 40px;
    text-align: center;
    font-size: 20px;
    line-height: 1.6;
    color: #ffe14d;
    background: #0a1a0f;
  }
}

/* --- Line-up editor ------------------------------------------------------ */

.shape {
  color: #7ea888;
  font-weight: normal;
  margin-left: 6px;
}

details[open] .shape { color: #b9d6c0; }

#lineupPresets { margin: 10px 0; }

#lineupPresets button.active { border-color: #ffe14d; }

.pitchWrap {
  display: flex;
  justify-content: center;
  margin: 4px 0 10px;
}

#lineupPitch {
  border-radius: 4px;
  cursor: grab;
  /* Dragging a player must not scroll the menu underneath it. */
  touch-action: none;
  max-width: 100%;
}

#lineupPitch:active { cursor: grabbing; }

#lineupNote {
  min-height: 2.4em;
  margin: 0;
}

/* --- High scores --------------------------------------------------------- */

.scores {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 0;
}

.scores td {
  padding: 3px 4px;
  color: #b9d6c0;
}

.scores td.place { color: #7ea888; width: 2.2em; }
.scores td.name { color: #ffe14d; letter-spacing: 2px; }
.scores td.result { text-align: right; }
.scores td.when { color: #7ea888; text-align: right; }
.scores tr.fresh td { color: #ffffff; }

.letters {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 18px 0;
}

.letter {
  display: block;
  width: 1.4em;
  padding: 6px 10px;
  border: 2px solid #2f6b3f;
  border-radius: 4px;
  font-size: 34px;
  text-align: center;
  color: #b9d6c0;
}

.letter.on {
  border-color: #ffe14d;
  color: #ffe14d;
  /* The slot you are on blinks, the way the cabinet did it. */
  animation: blink 0.9s steps(2, start) infinite;
}

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

/* Generic and deliberately last: .overlay and .row set their own display with
   the same specificity, so this only wins by coming after them. Without it
   nothing with class="hidden" was ever actually hidden - the online panel sat
   underneath the one player menu the whole time. */
.hidden { display: none; }

/* --- The name picker, with something to press ----------------------------
   The three letters used to be driven only by the game's own stick and its
   confirm button. On a phone those live at the bottom of the screen and this
   panel is laid over the top of them at a higher z-index, so the panel swallowed
   every tap: a score that had been earned arrived at a screen with no way off
   it, and the only way out was reloading the page.

   So the picker gets arrows and an OK of its own, and the letters themselves are
   tappable. Shown on every device rather than behind a touch check, because
   clicking an arrow beats hunting for the arrow keys on a laptop too, and one
   code path is one thing that can break. */

.picker { margin: 18px 0 6px; }

.letters, .letterRow {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.letters { margin: 0; }

.letter, .panel.small .letterRow button { width: 64px; }

.letter { padding: 6px 0; cursor: pointer; }

/* Big enough to hit with a thumb without looking, which is the whole point. */
.panel.small .letterRow button {
  margin: 6px 0;
  padding: 10px 0;
  font-size: 16px;
  line-height: 1;
}

/* Pause, for a device with no Escape key. Top middle, small and quiet: this is
   the one control that must never be hit by accident mid-game. */
#btnPause {
  position: absolute;
  left: 50%;
  top: max(6px, env(safe-area-inset-top));
  transform: translateX(-50%);
  width: 46px;
  height: 34px;
  padding: 0;
  pointer-events: auto;
  touch-action: none;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 2px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.45);
  border: 2px solid rgba(255, 225, 77, 0.45);
}

#btnPause:active { background: #ffe14d; color: #111; }

/* Online there is nothing to pause: the other player is not waiting for you. */
#touch.online #btnPause { display: none; }