/* Meta Ray-Ban Display, 600 x 600 additive waveguide.
 *
 * The rules encoded below, and why:
 *   Black emits no light, so it renders as fully transparent. That is perfect
 *   for the page background and fatal for a panel: a near black surface is
 *   invisible on device, not merely subtle. Surfaces sit at RGB 18 to 55.
 *   Large bright fills glare. Bright colour belongs on edges, letters and
 *   focus rings, not on slabs.
 *   The waveguide ghosts thin lines, so nothing is thinner than 3px.
 *   Text floor is 18px. Meta's own floor is 14sp, the public docs say 16px.
 *   We use 18px and verify it by computed style.
 */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Page background only. This is the real world, not a colour. */
  --room:    #000000;

  /* Every surface. RGB 20 to 26. Never pure black. */
  --ink:     #14151a;
  --ink2:    #1e2028;
  --ink3:    #2b2e39;

  --white:   #ffffff;
  --paper:   #eef0f3;   /* just under white, to cut glare on larger areas */
  --grey:    #98a0ae;  /* 7.97:1 on the page background */
  --grey-d:  #737c8b;  /* 4.98:1 on the page background. Was #626a79 at 3.86:1,
                          which failed AA for the HUD labels and the footers.
                          Anything quieter than this does not clear 4.5:1 on
                          black, so this is the floor for body text, not a
                          preference. */

  --accent:      #4bf07a;  /* edges, letters, focus. Not large fills. */
  --accent-mid:  #1c9c4d;
  --accent-deep: #14713a;  /* large fills use this */
  --accent-dark: #0b3d1f;

  /* The neon set. Saturated hues for strokes, letters and edges only. The game
     ramps the snake through green, cyan and violet; these are the same stops,
     so the interface and the board agree with each other. */
  --cyan:    #35e0d8;
  --violet:  #a06bff;
  --pink:    #ff6bd6;
  --amber:   #f0b64b;
  --berry:   #e8663f;

  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

html, body { width: 600px; height: 600px; overflow: hidden; }

body {
  background: var(--room);
  color: var(--white);
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  touch-action: none;
  user-select: none;
}

/* 600 x 576 usable. A 24px system notification bar sits below this. */
#app { position: relative; width: 600px; height: 576px; }

.screen {
  position: absolute; inset: 0;
  display: none; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; padding: 24px;
}
.screen.active { display: flex; }
.hidden { display: none !important; }

/* ---- focus: one language everywhere, impossible to miss ---- */
.focusable { outline: none; }
.focusable:focus { box-shadow: 0 0 0 4px var(--accent); }

/* ---- type ---- */
h1 { font-size: 46px; font-weight: 900; letter-spacing: -.025em; }
h1 em { font-style: normal; font-weight: 700; font-size: 28px; color: var(--accent); }
h2 { font-size: 30px; font-weight: 900; letter-spacing: -.01em; }
.sub  { font-size: 19px; font-weight: 600; color: var(--grey); }
.say  { font-size: 21px; font-weight: 700; max-width: 520px; text-align: center; }
.foot { font-size: 18px; font-weight: 600; color: var(--grey-d); min-height: 24px; }
code  { font-size: 18px; color: var(--accent); }

/* ---- the rules list. Colour here costs nine pixels a bullet. ---- */
.rules { list-style: none; max-width: 520px; display: flex; flex-direction: column; gap: 10px; }
.rules li { font-size: 18px; font-weight: 600; color: var(--grey); padding-left: 20px; position: relative; }
.rules li b { color: var(--white); font-weight: 900; }
.rules li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
}
.rules li:nth-child(2)::before { background: var(--cyan); }
.rules li:nth-child(3)::before { background: var(--violet); }
.rules li:nth-child(4)::before { background: var(--pink); }
.rules li:nth-child(5)::before { background: var(--amber); }

/* ---- buttons. Meta's minimum tap target is 88px tall for pointer targets;
       these are gesture driven so height is about legibility, not accuracy. ---- */
button {
  font: inherit; font-weight: 800; color: var(--white); cursor: pointer;
  background: var(--ink); border: 3px solid var(--ink3); border-radius: 999px;
}
.menu { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.btn { font-size: 22px; padding: 13px 32px; min-width: 260px; }
.btn:focus { background: var(--accent-deep); border-color: var(--accent); }
/* The primary action wears the accent on its edge and its letters, never on its
   face: a lit slab this size is glare, not emphasis. */
.btn.play { color: var(--accent); border-color: var(--accent-mid); }
.btn.play:focus { color: var(--room); background: var(--accent); border-color: var(--accent); }

/* ---- the wordmark ---- */
.mark { display: flex; flex-direction: column; align-items: center; line-height: .92; }
.mk-a, .mk-b { font-size: 60px; font-weight: 900; letter-spacing: .04em; }
.mk-a {
  color: var(--accent);
  background: linear-gradient(90deg, var(--accent), var(--cyan));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mk-b {
  color: var(--cyan);
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* A snake drawn in dots, tapering through the same ramp the game uses. Static on
   purpose: an idle animation spends battery and moves in peripheral vision. */
.mark-snake { display: flex; align-items: center; gap: 7px; height: 24px; }
.mark-snake i { display: block; border-radius: 50%; }
.mark-snake .s1 { width: 22px; height: 22px; background: var(--accent); }
.mark-snake .s2 { width: 20px; height: 20px; background: #3fe6a4; }
.mark-snake .s3 { width: 18px; height: 18px; background: var(--cyan); }
.mark-snake .s4 { width: 16px; height: 16px; background: #4fb8f0; }
.mark-snake .s5 { width: 14px; height: 14px; background: #7d8dff; }
.mark-snake .s6 { width: 12px; height: 12px; background: var(--violet); }
.mark-snake .s7 { width: 10px; height: 10px; background: var(--pink); }
.mark-snake .berry {
  width: 16px; height: 16px; margin-left: 12px; border-radius: 50%;
  background: var(--berry); box-shadow: 0 0 0 3px rgba(232, 102, 63, 0.25);
}

/* ============ SNAKE ============
   The board is a real surface at RGB 20, not a hole in the world: on an additive
   display a near black panel is invisible rather than subtle. Bright colour is
   kept to the snake, the fruit and the frame. */
#s-snake { justify-content: center; gap: 10px; padding: 12px; }

.hud { width: 550px; display: flex; justify-content: space-between; align-items: baseline; }
.hud-logo { font-size: 22px; font-weight: 900; letter-spacing: .12em; color: var(--accent); }
.hud-stats { display: flex; gap: 16px; align-items: baseline; }
.hud-stats span { display: flex; gap: 6px; align-items: baseline; }
.hud-stats b { font-size: 24px; font-weight: 900; color: var(--white); }
.hud-stats .v-score { color: var(--accent); }
.hud-stats .v-level { color: var(--cyan); }
.hud-stats .v-best { color: var(--violet); }
.hud-stats i { font-size: 18px; font-weight: 700; font-style: normal; color: var(--grey-d); }

.board-wrap {
  position: relative; width: 550px; height: 454px;
  border-radius: 18px; overflow: hidden;
  border: 3px solid transparent;
  background: linear-gradient(var(--ink), var(--ink)) padding-box,
              linear-gradient(135deg, var(--accent-mid), var(--cyan), var(--violet)) border-box;
}
#sn-canvas { display: block; width: 544px; height: 448px; }

/* A veil, not a curtain: the board stays readable underneath, so the wearer
   never loses the state of play behind a solid panel. */
.sn-veil {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: rgba(16, 18, 22, 0.82);
}
.sn-big { font-size: 34px; font-weight: 900; letter-spacing: -.01em; color: var(--cyan); }
.sn-sub { font-size: 19px; font-weight: 700; color: var(--grey); }
.sn-btns { display: flex; gap: 10px; margin-top: 10px; }
.sn-btns .btn { min-width: 0; font-size: 20px; padding: 10px 22px; }

/* On device diagnostic strip. Only shown with ?debug in the URL. */
#diag {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 99;
  padding: 3px 8px; font-size: 18px; font-weight: 700; color: var(--accent);
  background: var(--ink); border-top: 3px solid var(--ink3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}