/* Snake styling — reuses the theme variables defined in line_escape.css
   (:root for dark, html[data-theme="light"] for light). */

.sn-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: calc(10px + env(safe-area-inset-top)) 12px 20px;
  color: var(--text);
}

.sn-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.sn-topbar a.back {
  color: var(--accent);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  background: var(--btn);
  border: 1px solid var(--line2);
  border-radius: 8px;
  padding: 6px 12px;
}
.sn-topbar a.back:active { transform: translateY(1px); }
.sn-title { font-size: 20px; font-weight: 700; letter-spacing: 0.3px; }

/* mode picker + lives */
.sn-modes { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.sn-mode-btn {
  background: var(--btn);
  color: var(--muted);
  border: 1px solid var(--line2);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.sn-mode-btn.active { color: var(--accent-fg); background: var(--accent); border-color: var(--accent); }
.sn-lives {
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  background: var(--btn);
  border: 1px solid var(--line2);
  border-radius: 999px;
  padding: 5px 12px;
}

/* HUD */
.sn-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 14px;
  margin-bottom: 8px;
}
.sn-hud .lbl { color: var(--muted2); font-size: 11px; display: block; }
.sn-hud > span { text-align: center; font-weight: 700; }

/* challenge banner */
.sn-chall {
  background: rgba(224,145,63,0.14);
  border: 1px solid #e0913f;
  color: var(--text);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  text-align: center;
}
.sn-chall.hidden { display: none; }

/* board */
.sn-board-wrap { position: relative; }
#sn-canvas {
  display: block;
  margin: 0 auto;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #99e550;
  touch-action: none;
}
.sn-center-ov {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--backdrop);
  border-radius: 12px;
}
.sn-center-ov.hidden { display: none; }
.sn-ov-inner { text-align: center; padding: 18px; color: var(--text); font-size: 14px; line-height: 1.55; }
.sn-ov-big { font-size: 40px; margin-bottom: 8px; }
.sn-play {
  margin-top: 14px;
  background: var(--accent);
  color: var(--accent-fg);
  border: 0;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 700;
  padding: 12px 30px;
  cursor: pointer;
}
.sn-play:active { transform: scale(0.97); }
.sn-play:disabled { opacity: .55; cursor: default; }
#sn-play-cost { font-size: 12px; font-weight: 600; opacity: .8; }

/* bottom row: stats sit beside the d-pad */
.sn-bottom { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 12px; flex-wrap: wrap; }
.sn-stats { display: flex; flex-direction: column; gap: 6px; }
.sn-stat { background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 5px 12px; min-width: 96px; display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.sn-stat .lbl { color: var(--muted2); font-size: 11px; align-self: center; }
@media (pointer: fine) { .sn-stats { flex-direction: row; } }

/* d-pad (mobile) */
.sn-pad { display: none; margin: 0; width: fit-content; user-select: none; }
.sn-pad-mid { display: flex; gap: 10px; margin-top: 10px; }
.sn-key {
  background: var(--btn);
  color: var(--text);
  border: 1px solid var(--line2);
  border-radius: 14px;
  width: 92px; height: 64px;
  font-size: 28px;
  cursor: pointer;
}
.sn-key:active { background: var(--accent); color: var(--accent-fg); }
.sn-pad > .sn-key { display: block; margin: 0 auto; }
@media (pointer: coarse) { .sn-pad { display: block; } }

/* actions — pushed well below the board/d-pad */
.sn-actions { display: flex; gap: 6px; margin-top: 22px; }
.sn-act {
  flex: 1;
  background: var(--btn);
  color: var(--text);
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 8px 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.sn-act small { display: block; font-size: 15px; margin-bottom: 2px; }
.sn-act:active { transform: translateY(1px); }

/* trophy button (topbar) */
/* V578 (CR-14): THE CHIP BUG, again, in another tool. .sn-cup paints a background
   and declared no `color`, and a <button> does not inherit one -- the UA sets
   `buttontext`, which is black while nothing on this site opts into a dark
   color-scheme. So ⛶ was black on the dark --btn at 2.24:1. (🏆 next to it looked
   fine only because a colour-font emoji is painted from the font's own palette and
   never reads `color` at all.) A class that paints a background must state its ink. */
.sn-cup {
  background: var(--btn);
  color: var(--text);
  border: 1px solid var(--line2);
  border-radius: 8px;
  font-size: 16px;
  padding: 5px 11px;
  cursor: pointer;
  line-height: 1;
}
.sn-cup:active { transform: translateY(1px); }

/* leaderboard modal */
#sn-lb-modal {
  position: fixed; inset: 0; z-index: 45;
  background: var(--backdrop2);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
#sn-lb-modal.hidden { display: none; }
.sn-lb-card { max-width: 380px; text-align: left; max-height: 80vh; overflow-y: auto; }
.sn-lb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
#sn-lb-title { font-size: 17px; font-weight: 800; }
.sn-lb-x { background: none; border: 0; color: var(--muted2); font-size: 18px; cursor: pointer; padding: 2px 6px; }

/* leaderboard panel (reuses sk-lb table classes from arcade renderBoard) */
#sn-board-panel { margin-top: 8px; }
#sn-board-panel h3 { font-size: 15px; margin-bottom: 8px; color: var(--muted); }
#sn-board-panel .sk-lb { width: 100%; border-collapse: collapse; font-size: 14px; }
#sn-board-panel .sk-lb td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
#sn-board-panel .sk-lb tr.me td { color: var(--accent); font-weight: 700; }
#sn-board-panel .sk-empty { color: var(--muted2); font-size: 13px; }
#sn-board-panel .sk-me-line { margin-top: 6px; font-size: 13px; color: var(--accent); font-weight: 600; }
#sn-board-panel .flag { border-radius: 2px; vertical-align: -1px; }

/* game-over overlay */
#sn-overlay {
  position: fixed; inset: 0; z-index: 40;
  background: var(--backdrop2);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
#sn-overlay.hidden { display: none; }
.sn-ov-card {
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: 16px;
  padding: 22px;
  max-width: 340px;
  width: 100%;
  text-align: center;
}
#sn-ov-title { font-size: 20px; font-weight: 800; margin-bottom: 10px; }
#sn-ov-body { font-size: 14px; color: var(--muted); line-height: 1.6; }
#sn-ov-body b { color: var(--accent); }
.sn-ov-card .btnrow { display: flex; gap: 8px; margin-top: 16px; }
.sn-ov-card .btnrow button {
  flex: 1;
  border-radius: 10px;
  border: 0;
  padding: 10px 8px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  background: var(--accent);
  color: var(--accent-fg);
}
.sn-ov-card .btnrow button.ghost { background: var(--btn); color: var(--text); border: 1px solid var(--line2); }

/* toast (same id the arcade helper looks for) */
#sk-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line2); border-radius: 10px;
  padding: 10px 16px; font-size: 14px; font-weight: 600;
  opacity: 0; pointer-events: none; transition: all .25s; z-index: 60;
}
#sk-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.hidden { display: none; }

/* ==========================================================================
   V653 · A BIGGER BOARD ON A PHONE
   --------------------------------------------------------------------------
   "in snake- the screen is smaller in iphone make the snake area bigger..you can
    rearrange and make the other buttons smaller"

   MEASURED FIRST, at 390x844: the board was 273x312 in a 366px-wide column, and
   the reason was never the width -- sizeCanvas() takes the SMALLER of
   width/COLS and availableHeight/ROWS, and the height ran out. 167px of header,
   44 of the mode row, then a 250px reserve for the d-pad and the action row left
   353px for 24 rows, which is 13px a cell against the 17 the width would allow.

   So the way to a bigger board is to give the height back, and this block is the
   half of that which is CSS: the d-pad and the actions get smaller on a phone,
   which is what he asked for. The other half is in snake.js, which now MEASURES
   the controls below the board instead of reserving a constant -- so these two
   numbers cannot drift apart.
   ========================================================================== */
@media (max-width: 560px) {
  /* 92x64 keys were sized for a thumb on a 6-inch screen and they are still a
     comfortable target at 76x52 -- above the 44px floor with room to spare. This
     takes 34px off the d-pad, and every pixel goes to the board. */
  .sn-key { width: 76px; height: 52px; font-size: 24px; border-radius: 12px; }
  .sn-pad-mid { gap: 8px; margin-top: 8px; }
  /* 22px of clearance above the actions was for a bigger pad. */
  .sn-actions { margin-top: 12px; gap: 5px; }
  .sn-act { padding: 6px 4px; font-size: 12px; }
  .sn-act small { font-size: 14px; margin-bottom: 1px; }
  /* Score / Best / Level: the same three numbers in less furniture. */
  .sn-hud { padding: 6px 10px; font-size: 13px; margin-bottom: 6px; }
  .sn-hud .lbl { font-size: 10px; }
  .sn-modes { gap: 5px; margin-bottom: 6px; }
  .sn-mode-btn { padding: 5px 10px; font-size: 12.5px; }
  .sn-lives { padding: 4px 10px; font-size: 12px; }
}