/* Snakey — the whole app is one LCD screen. */

:root {
  --page: #0e110f;
  --font: 'Silkscreen', ui-monospace, Menlo, monospace;
  /* Numbers: Silkscreen Bold fills in the 4, so digits use a clearer arcade font. */
  --font-num: 'Press Start 2P', 'Silkscreen', ui-monospace, monospace;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Backlight palettes: --lcd-a/b are the glow, --ink is the "pixels on" colour. */
.app[data-palette='moss']  { --lcd-a: #c3d38a; --lcd-b: #a3b86b; --ink: #1d2a12; }
.app[data-palette='ice']   { --lcd-a: #c2dce0; --lcd-b: #95b7bf; --ink: #10232b; }
.app[data-palette='amber'] { --lcd-a: #ead08e; --lcd-b: #cda65c; --ink: #2d1d07; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(1000px 600px at 50% 0%, #1b2219 0%, transparent 70%), var(--page);
  font-family: var(--font);
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
.hidden { display: none !important; }

/* ---------- app shell ---------- */

.app {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1000px, calc(100vw - 48px));
  height: min(720px, calc(100vh - 48px));
  height: min(720px, calc(100dvh - 48px));
  border-radius: 20px;
  overflow: hidden;
  color: var(--ink);
  background: radial-gradient(130% 100% at 30% 15%, var(--lcd-a), var(--lcd-b));
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 40px 80px -30px rgba(0,0,0,.8), 0 10px 30px rgba(0,0,0,.4);
  user-select: none;
  -webkit-user-select: none;
}
/* Soft vignette like a backlit LCD. */
.app::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 80px rgba(0,0,0,.18);
  border-radius: inherit;
}

/* Phones, tablets and small windows: the app is the whole screen.
   Keep in sync with `fullScreen` in app.js. */
@media (max-width: 760px), (max-height: 520px), (pointer: coarse) {
  html, body { overflow: hidden; overscroll-behavior: none; }
  body { display: block; background: var(--page); }
  .app {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }
  .app::after { border-radius: 0; }
}

/* ---------- top bar ---------- */

.hud {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(8px + var(--safe-top)) 10px 8px;
  border-bottom: 3px solid color-mix(in srgb, var(--ink) 85%, transparent);
}
/* Both sides get the same width, so Score/Best sit at the true centre
   whichever buttons are showing. */
.hud-side { flex: 1 1 0; min-width: max-content; display: flex; align-items: center; gap: 8px; }
.hud-side.end { justify-content: flex-end; }
.hud-btn {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 10px;
}
.hud-btn svg { width: 20px; height: 20px; fill: var(--ink); shape-rendering: crispEdges; }
.hud-btn:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.hud-btn:active { background: color-mix(in srgb, var(--ink) 18%, transparent); }
.hud-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.hud-btn.invisible { visibility: hidden; }
/* "2X" label: outlined at normal speed, filled while 2× is on. Same font as
   the scores; Silkscreen's × is too small to read. */
.hud-btn.speed { border: 2px solid var(--ink); font-family: var(--font-num); font-size: 14px; font-weight: 400; }
.hud-btn.speed[aria-pressed='true'] { background: var(--ink); color: var(--lcd-a); }
.hud-btn.pause { border: 2px solid var(--ink); }
.hud-btn.pause .icon-play,
.hud-btn.pause.paused .icon-pause { display: none; }
.hud-btn.pause.paused .icon-play { display: block; }

.hud-stats {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 6vw, 56px);
  min-width: 0;
}
.hud-stat { display: flex; flex-direction: column; align-items: center; line-height: 1; gap: 4px; }
.hud-stat span { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; opacity: .7; }
.hud-stat b { font-family: var(--font-num); font-size: 20px; font-weight: 400; }
.hud-bug { display: flex; align-items: center; gap: 6px; font-family: var(--font-num); font-size: 16px; animation: blink .5s steps(2) infinite alternate; }
.hud-bug b { font-weight: 400; }
.hud-bug svg { width: 22px; height: 13px; fill: var(--ink); shape-rendering: crispEdges; }
@keyframes blink { to { opacity: .55; } }
/* Narrow phones: room for ☰, two scores and both buttons. */
@media (max-width: 400px) {
  .hud { gap: 6px; padding-left: 6px; padding-right: 6px; }
  .hud-side { gap: 6px; }
  .hud-stats { gap: 10px; overflow: hidden; }
  .hud-stat b { font-size: clamp(11px, 4vw, 18px); }
}

/* ---------- stage + game canvas ---------- */

.stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: var(--safe-bottom);
  touch-action: none;
}
#screen { display: block; image-rendering: pixelated; }

/* ---------- overlay screens ---------- */

.screen {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 20px calc(20px + var(--safe-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  background: radial-gradient(130% 100% at 30% 15%, var(--lcd-a), var(--lcd-b));
  text-align: center;
}
.screen.see-through { background: color-mix(in srgb, var(--lcd-a) 80%, transparent); }
.screen-inner { width: min(360px, 100%); display: flex; flex-direction: column; align-items: center; gap: 14px; margin: auto 0; }

.logo {
  margin: 0;
  font-size: clamp(40px, 11vw, 64px);
  font-weight: 700;
  letter-spacing: 4px;
  line-height: 1;
}
.whoami { margin: -4px 0 4px; font-size: 12px; opacity: .8; line-height: 1.5; }
.whoami b { font-weight: 700; }

.menu { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 2px; }
.menu li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 17px;
  cursor: pointer;
  text-align: left;
}
.menu li.menu-play { justify-content: center; font-size: 22px; font-weight: 700; letter-spacing: 2px; }
.menu li.active { background: var(--ink); color: var(--lcd-a); }
@media (hover: hover) {
  .menu li:not(.active):hover { background: color-mix(in srgb, var(--ink) 10%, transparent); }
}
.val { display: inline-flex; align-items: center; gap: 2px; }
.val b { min-width: 6.5ch; text-align: center; font-weight: 700; }
.val i { font-style: normal; font-size: 20px; padding: 6px 8px; margin: -6px 0; opacity: .6; }
.val i:hover { opacity: 1; }

.hint { margin: 2px 0 0; font-size: 11px; opacity: .7; }
.touch-only { display: none; }
html.touch .touch-only { display: block; }
html.touch .keys-only { display: none; }

.big { margin: 0; font-size: clamp(30px, 8vw, 44px); font-weight: 700; letter-spacing: 3px; }
.over-score { margin: -4px 0 0; }
.over-score b { font-family: var(--font-num); font-size: clamp(40px, 12vw, 64px); font-weight: 400; line-height: 1; }
.over-status { margin: 0; font-size: 13px; min-height: 1.4em; }
.actions { display: flex; flex-direction: column; gap: 10px; width: min(260px, 100%); margin-top: 6px; }
.actions .link { align-self: center; }
.lead { margin: 0; max-width: 280px; font-size: 13px; line-height: 1.6; }

.btn {
  min-height: 48px;
  padding: 0 18px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.btn.primary { background: var(--ink); color: var(--lcd-a); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.btn:disabled { opacity: .6; cursor: wait; }
.btn.wide { width: 100%; }

/* Panels (leaderboard, account) read top-down instead of centred. */
.screen.panel { justify-content: flex-start; gap: 16px; }
.screen.panel > * { width: min(520px, 100%); flex: none; }
.panel-head { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; }
.panel-head h2 { margin: 0; font-size: 20px; letter-spacing: 1px; }
.back {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px 8px;
  font-size: 14px;
  border-radius: 8px;
}
.back:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); }

.tabs { display: flex; border: 2px solid var(--ink); border-radius: 10px; padding: 3px; gap: 3px; }
.tabs button { flex: 1; min-height: 38px; border-radius: 7px; font-size: 13px; }
.tabs button[aria-selected='true'] { background: var(--ink); color: var(--lcd-a); font-weight: 700; }

/* leaderboard */
.board { list-style: none; margin: 0; padding: 0; text-align: left; }
.board li {
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-bottom: 2px dotted color-mix(in srgb, var(--ink) 35%, transparent);
}
.board li.me { background: color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 8px; }
.board .rank { font-family: var(--font-num); font-size: 12px; text-align: center; opacity: .75; }
.board li[data-rank='1'] .rank, .board li[data-rank='2'] .rank, .board li[data-rank='3'] .rank { opacity: 1; }
.board li[data-rank='1'] .rank::before { content: '♛ '; }
.board .who { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.board .name { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none; }
.board .meta { font-size: 10px; opacity: .7; }
.board .pts { font-family: var(--font-num); font-size: 16px; }
.board li.empty { display: block; border: 0; text-align: center; padding: 32px 8px; font-size: 13px; opacity: .8; }
.board-foot { margin: 0; font-size: 11px; opacity: .7; }

/* account */
.auth-form { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; text-align: left; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.auth-form input {
  font: inherit;
  font-size: 16px; /* 16px stops iOS from zooming in */
  color: var(--ink);
  background: color-mix(in srgb, #fff 22%, transparent);
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 12px;
  outline: none;
  user-select: text;
  -webkit-user-select: text;
}
.auth-form input:focus { background: color-mix(in srgb, #fff 38%, transparent); }
.form-error { margin: 0; font-size: 12px; font-weight: 700; }
.form-error:empty { display: none; }
.form-error::before { content: '! '; }
.form-note { margin: 0; font-size: 11px; opacity: .75; text-align: center; line-height: 1.5; }

/* sign-in */
.signin { display: flex; flex-direction: column; gap: 14px; }
.signin .auth-form { margin-top: 0; }
.code-input { text-align: center; font-family: var(--font-num) !important; font-size: 22px !important; letter-spacing: 8px; padding: 12px 10px !important; }
.row-links { display: flex; justify-content: space-between; gap: 12px; }
.link { font-size: 12px; text-decoration: underline; text-underline-offset: 3px; padding: 8px 2px; }
.link:disabled { opacity: .5; }

.welcome {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 2px dashed var(--ink);
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.5;
}
.rename { margin: 0 0 6px; }
.inline { display: flex; gap: 8px; }
.inline input { flex: 1; min-width: 0; }
.inline .btn { flex: none; min-height: 0; }
.me-meta { margin: 0 0 14px; font-size: 11px; opacity: .75; text-align: left; word-break: break-all; }
.me-meta:empty { display: none; }
.me { margin: 0 0 14px; font-size: 14px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.stat { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 2px solid var(--ink); border-radius: 10px; }
.stat span { font-size: 11px; opacity: .75; }
.stat b { font-family: var(--font-num); font-size: 22px; font-weight: 400; }
.stat small { font-size: 10px; opacity: .75; min-height: 1.2em; }