/* ============================================================
   Home — the front page, #login
   ============================================================
   Where itch's Run game button lands. It sells first: the logo,
   one line of pitch, the way in, then three reasons to play,
   each a real frame of the game. A bar along the top reaches
   the rest without leaving the page: How to play, High scores,
   Private rooms. #login's data-view says which view shows, and
   data-mode which way in the Play view offers.

   Device switching follows the rest of the client: body.pads
   and body.touch, set once at boot by detectDevice(). The width
   and height queries here are scoped to body:not(.pads), so a
   tablet's layout follows its class, not its window.

   Its colours, surfaces, hairlines and radii are the shared
   tokens in style.css's :root (--ink-2, --surface, --hair,
   --r-m …), which the in-game UI is moving onto as well.
   ------------------------------------------------------------ */

#login.overlay {
  /*
   * Opaque, and its own sky, on purpose. The game's canvas is underneath,
   * drawn with `desynchronized: true` (render.js) for the lowest input
   * latency, which lets a phone put it on a hardware layer of its own. Seen
   * through a translucent page, that layer flashed green with uninitialised
   * buffer on phones. So the front page paints its own stars and nebula, and
   * main.js does not draw the game at all while it is up.
   *
   * Each star is one dot in a tile; the tiles are all different sizes, so the
   * repeat never lines up into a visible pattern.
   */
  background-color: #05070d;
  background-image:
    radial-gradient(1.3px 1.3px at 23px 41px, rgba(225, 235, 255, 0.9), transparent),
    radial-gradient(1px 1px at 151px 87px, rgba(225, 235, 255, 0.7), transparent),
    radial-gradient(1px 1px at 77px 160px, rgba(190, 210, 255, 0.55), transparent),
    radial-gradient(1.6px 1.6px at 201px 13px, rgba(255, 255, 255, 0.85), transparent),
    radial-gradient(1px 1px at 120px 230px, rgba(200, 220, 255, 0.5), transparent),
    radial-gradient(1px 1px at 290px 190px, rgba(225, 235, 255, 0.6), transparent),
    radial-gradient(1.3px 1.3px at 330px 60px, rgba(180, 230, 255, 0.7), transparent),
    radial-gradient(1px 1px at 40px 300px, rgba(225, 235, 255, 0.45), transparent),
    radial-gradient(ellipse 55% 45% at 18% 72%, rgba(112, 98, 157, 0.2), transparent 70%),
    radial-gradient(ellipse 50% 40% at 82% 22%, rgba(57, 126, 135, 0.16), transparent 70%),
    radial-gradient(ellipse 70% 60% at 60% 55%, rgba(60, 40, 110, 0.12), transparent 75%);
  background-size: 173px 173px, 241px 241px, 211px 211px, 311px 311px, 263px 263px,
    347px 347px, 397px 397px, 331px 331px, auto, auto, auto;
  background-repeat: repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat,
    no-repeat, no-repeat, no-repeat;
  backdrop-filter: none;
  display: block;
  overflow: auto;
  /* The viewport as it is now, not the one behind a phone's address bar. */
  height: 100vh;
  height: 100dvh;
  padding: max(14px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}

.home {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1240px;
  min-height: 100%;
  margin: 0 auto;
}

.home-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- the bar ---------- */

.home-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(154, 206, 233, 0.16);
}
.home-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.home-tabs button {
  padding: 9px 14px;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--ink-3);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-s);
}
.home-tabs button:hover { color: var(--ink); background: rgba(255, 255, 255, 0.05); }
.home-tabs button.on {
  color: var(--accent);
  background: rgba(77, 226, 192, 0.08);
  border-color: rgba(77, 226, 192, 0.4);
}
.home-tabs .ns { display: none; }

.home-live {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.home-live.live::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 8px 1px 0;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: home-pulse 1.6s ease-in-out infinite;
}
@keyframes home-pulse { 50% { opacity: 0.35; } }

/* ---------- the views ---------- */

.home-view { display: none; flex: 1; min-height: 0; }
#login[data-view="play"] .home-view-play,
#login[data-view="scores"] .home-view-scores { display: flex; }
#login[data-view="how"] .home-view-how { display: grid; }

/* ---------- Play: the pitch and the way in ---------- */

.home-view-play {
  flex-direction: column;
  justify-content: center;
  gap: clamp(14px, 3.2dvh, 36px);
  padding: clamp(10px, 2.4dvh, 28px) 0 4px;
}

.home-hero { display: flex; flex-direction: column; align-items: center; text-align: center; }
.home-logo { margin: 0; line-height: 0; }
.home-logo img {
  display: block;
  width: auto;
  height: clamp(72px, 19dvh, 230px);
  max-width: 100%;
  object-fit: contain;
}
.home-tag {
  margin: 4px 0 0;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-2);
}
#home-max { color: var(--accent); font-weight: 600; }

#room-pick { width: min(100%, 560px); margin-top: 16px; text-align: left; }
#room-pick .home-head { margin-bottom: 8px; }

#login-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(100%, 560px);
  margin-top: clamp(12px, 2.6dvh, 26px);
  text-align: left;
}
#login .home-label {
  margin: 0;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--accent);
}
.home-go { display: flex; gap: 10px; }
.home-entry { position: relative; flex: 1; min-width: 0; }
#login #login-name {
  margin: 0;
  padding: 15px 16px 15px 54px;
  font-size: 20px;
  letter-spacing: 2px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(154, 206, 233, 0.35);
}
#login #login-name::placeholder { color: #6d7d9c; letter-spacing: 1px; }
#login #login-name:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(77, 226, 192, 0.18); }

/* Your ship, in your colour, sat in the name box: a tap moves it on to the
   next colour. */
#colour-dot {
  position: absolute;
  left: 8px;
  top: 50%;
  width: 38px;
  height: 38px;
  margin-top: -19px;
  padding: 4px;
  background: none;
  border: none;
  border-radius: var(--r-s);
  filter: drop-shadow(0 0 6px currentColor);
}
#colour-dot:hover { background: rgba(255, 255, 255, 0.06); }
#colour-dot svg { display: block; width: 100%; height: 100%; overflow: visible; }
#colour-dot path {
  fill: currentColor;
  fill-opacity: 0.22;
  stroke: currentColor;
  stroke-width: 0.14;
  stroke-linejoin: round;
}

#login #login-pass-label { margin: 0; text-align: left; }
#login #login-pass { padding: 13px 16px; font-size: 16px; border-radius: 10px; }

#login #login-btn {
  flex: 0 0 auto;
  width: 180px;
  padding: 0;
  min-height: 56px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 8px;
  color: #04211c;
  background: var(--accent);
  border-color: var(--accent);
  border-radius: 10px;
  box-shadow: 0 10px 34px rgba(77, 226, 192, 0.28);
}
#login #login-btn:not(:disabled)::after { content: ' \25B6'; letter-spacing: 0; }
#login #login-btn:hover { filter: brightness(1.1); }
#login #login-error { margin: 0; min-height: 0; }
#login #login-error:empty { display: none; }

/* Another way in asks for more than a name: one field above the other. */
#login:not([data-mode="player"]) .home-go { flex-direction: column; }
#login:not([data-mode="player"]) #login-btn { width: 100%; }
#login:not([data-mode="player"]) .home-features { display: none; }

/* The top three, a tap from the whole board. */
#scores-btn {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 12px;
  margin-top: 12px;
  padding: 8px 16px;
  font-size: 12px;
  text-transform: none;
  letter-spacing: normal;
  background: rgba(5, 11, 21, 0.6);
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
}
#scores-btn:hover { border-color: rgba(77, 226, 192, 0.5); background: rgba(10, 20, 36, 0.8); }
.home-trophy { color: #ffd166; }
#arcade-preview { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
.hs-who { color: var(--ink); text-transform: uppercase; letter-spacing: 1px; }
.hs-pts { color: #ffe066; font-weight: 600; }
.hs-item:first-child .hs-who { color: #ffd166; }
.hs-item + .hs-item::before { content: '\00B7'; margin-right: 12px; color: var(--dim); }
.hs-none { color: var(--ink-3); }
.home-more { color: var(--accent); font-size: 11px; letter-spacing: 1px; }

/* Three reasons to play, each a real frame of the game. */
.home-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}
.home-feature {
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  background: rgba(5, 11, 21, 0.7);
  border: 1px solid var(--hair);
  border-radius: var(--r-m);
}
.home-feature img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}
.home-feature div { padding: 12px 14px 14px; }
.home-feature h2 {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
}
.home-feature p { margin: 0; font-size: 12px; line-height: 1.55; color: var(--ink-3); }

/* ---------- How to play ---------- */

.home-panel {
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-m);
}
.home-panel > .home-head { margin-bottom: 14px; }

.home-view-how {
  grid-template-columns: repeat(2, minmax(0, 500px));
  align-content: center;
  justify-content: center;
  gap: 18px;
  padding: 18px 0;
}
#home-rules { margin: 0; padding-left: 18px; }
#home-rules li { margin: 0 0 9px; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
#home-rules li::marker { color: var(--accent); }
#home-rules b { color: var(--ink); }
#home-controls .cr-keys {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: start;
  gap: 10px 26px;
}
#home-controls .cr-keys div { margin: 0; font-size: 12px; white-space: nowrap; }
#home-controls .cr-pads { gap: 8px 14px; }
#home-controls .cr-note { margin: 12px 0 0; font-size: 11px; }

.home-cta {
  grid-column: 1 / -1;
  justify-self: center;
  flex: none;
  width: min(100%, 260px);
  padding: 14px 0;
  font-weight: 600;
  letter-spacing: 6px;
  color: #04211c;
  background: var(--accent);
  border-color: var(--accent);
  border-radius: 10px;
}
.home-cta::after { content: ' \25B6'; letter-spacing: 0; }
.home-cta:hover { filter: brightness(1.1); background: var(--accent); }

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

.home-view-scores {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 18px 0;
}
#login #arcade { width: min(100%, 480px); margin: 0; padding: 20px 20px 16px; border-top: 1px solid var(--hair); }
#login .arcade-head { font-size: 11px; letter-spacing: 6px; margin-bottom: 14px; }
#login #arcade-top { font-size: 14px; }
#login #arcade-top td { padding: 5px 0; }
#login #arcade-top .who { max-width: none; letter-spacing: 2px; }
#login #arcade-records { margin-top: 18px; }
#login #arcade-records .arcade-head { margin-bottom: 8px; }
#login .rec {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) minmax(0, auto) auto;
  gap: 8px;
  align-items: baseline;
  padding: 3px 0;
  font-size: 11px;
}
#login .rec .rl { color: var(--dim); letter-spacing: 1px; }
#login .rec .rw {
  color: var(--ink);
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#login .rec .rv { color: #ffe066; font-weight: 600; text-align: right; }

/* ---------- smaller windows ---------- */

/* Short: the stills give up height first, then the logo. */
@media (max-height: 700px) {
  body:not(.pads) .home-logo img { height: clamp(64px, 15dvh, 230px); }
  body:not(.pads) .home-view-play { gap: 14px; padding-top: 10px; }
  body:not(.pads) .home-feature img { aspect-ratio: 5 / 2; }
  body:not(.pads) .home-feature div { padding: 9px 12px 11px; }
  body:not(.pads) .home-feature h2 { margin-bottom: 4px; }
  body:not(.pads) .home-feature p { font-size: 11px; line-height: 1.5; }
}
/* Narrow: one column, and the page scrolls. */
@media (max-width: 720px) {
  body:not(.pads) .home-features,
  body:not(.pads) .home-view-how { grid-template-columns: minmax(0, 460px); justify-content: center; }
  body:not(.pads) .home-go { flex-direction: column; }
  body:not(.pads) #login #login-btn { width: 100%; }
}

/* ---------- thumbs ---------- */

body.pads #colour-dot { width: 44px; height: 44px; margin-top: -22px; left: 5px; }
body.pads .home-tabs button { min-height: 44px; }

/* A phone. The bar keeps one row with short names, and upright the page is
   one column that scrolls. */
body.touch #login.overlay {
  padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
body.touch .home-nav { padding-bottom: 6px; }
body.touch .home-tabs { flex-wrap: nowrap; gap: 2px; }
body.touch .home-tabs button { min-height: 38px; padding: 6px 10px; font-size: 10px; letter-spacing: 1.5px; }
body.touch .home-tabs .nl:not(:only-child) { display: none; }
body.touch .home-tabs .ns { display: inline; }
body.touch .home-live { font-size: 9px; letter-spacing: 1px; }
body.touch .home-go { flex-direction: column; }
body.touch #login #login-btn { width: 100%; min-height: 48px; }
body.touch #login #login-name { padding: 11px 12px 11px 52px; font-size: 18px; }
body.touch .home-features,
body.touch .home-view-how { grid-template-columns: minmax(0, 1fr); }
body.touch #home-controls .cr-pads { grid-template-columns: 1fr 1fr; }

/*
 * A phone held sideways: the shape itch's mobile player locks to, and the one
 * the game needs. Two panes sized to the screen: the way in on the left, with
 * Play pinned to its foot so it is on screen whatever else is (under itch's
 * own toolbar on the shortest phones too), and the reasons to play on the
 * right, a swipe apart.
 */
@media (orientation: landscape) {
  body.touch #login.overlay { overflow: hidden; }
  body.touch .home { height: 100%; }
  body.touch .home-view { overflow-y: auto; overscroll-behavior: contain; }
  body.touch .home-view-play {
    flex-direction: row;
    align-items: stretch;
    gap: 14px;
    padding: 8px 0 0;
    overflow: hidden;
  }
  body.touch .home-hero {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    justify-content: safe center;
    /* A field brought into view (picking a room focuses its password box)
       lands above the pinned Play, not behind it. */
    scroll-padding-bottom: 64px;
  }
  /* Nothing in a fixed-height column may shrink: it scrolls instead. */
  body.touch .home-hero > * { flex-shrink: 0; }
  body.touch .home-logo img { height: clamp(48px, 17dvh, 110px); }
  body.touch .home-tag { font-size: 10px; letter-spacing: 2px; }
  body.touch #login-form { margin-top: 8px; }
  body.touch #login #login-btn {
    position: sticky;
    bottom: 0;
    z-index: 1;
    /* Whatever scrolls beneath it reads as beneath it. */
    box-shadow: 0 -12px 14px -4px rgba(5, 7, 13, 0.92);
  }
  body.touch #scores-btn { margin-top: 8px; padding: 6px 12px; font-size: 11px; }
  /* The reasons to play, side by side, one screen wide each. */
  body.touch .home-features {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior: contain;
    align-items: center;
  }
  body.touch .home-feature { flex: 0 0 88%; scroll-snap-align: start; }
  body.touch .home-feature img { aspect-ratio: 2 / 1; }
  body.touch .home-feature div { padding: 8px 12px 10px; }
  body.touch .home-feature p { font-size: 11px; }
  /* Another way in has the whole width: the rooms beside the form. */
  body.touch #login:not([data-mode="player"]) .home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    align-content: start;
    text-align: left;
  }
  body.touch #login:not([data-mode="player"]) .home-logo,
  body.touch #login:not([data-mode="player"]) .home-tag { display: none; }
  body.touch #login:not([data-mode="player"]) #room-pick { margin: 0; }
  body.touch #login:not([data-mode="player"]) #login-form { margin: 0; width: 100%; }
  body.touch #login[data-mode="admin"] #login-form { grid-column: 1 / -1; }
  body.touch .home-view-how {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    padding: 10px 0;
    gap: 10px;
  }
  body.touch .home-view-how .home-panel { padding: 12px 14px; }
  body.touch .home-view-scores { justify-content: flex-start; padding: 10px 0; }
}