/* Snake – only what's specific to this game.
   Header, segmented buttons and the rest come from /css/style.css. */

.sn-layout {
  gap: 16px;
}

.sn-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.sn-options .segmented button {
  min-width: 0;
}

/* The board sits in a centred column, so it needs its own width */
.sn-stage {
  position: relative;
  width: min(100%, 560px);
  touch-action: none;           /* swipes turn the snake, not scroll the page */
  user-select: none;
  -webkit-user-select: none;
}

.sn-race .sn-stage {
  width: min(100%, 760px);
}

.sn-view {
  width: 100%;
}

.sn-canvas {
  display: block;
  border-radius: var(--radius);
  border: 2px solid var(--border-strong);
}

.sn-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--overlay-light);
  text-align: center;
}

.sn-overlay p {
  margin: 0;
}

.sn-overlay .btn {
  margin-top: 6px;
}

/* On-screen arrows: only on touch screens */
.sn-pad {
  display: none;
  grid-template-columns: repeat(3, 64px);
  grid-template-rows: repeat(2, 56px);
  grid-template-areas: ". up ." "left down right";
  gap: 6px;
  touch-action: none;
}

@media (pointer: coarse) {
  .sn-pad {
    display: grid;
  }
}

.sn-pad button {
  border-radius: 14px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 20px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sn-pad button:active {
  background: var(--accent-soft);
}

.sn-pad [data-dir="0"] { grid-area: up; }
.sn-pad [data-dir="3"] { grid-area: left; }
.sn-pad [data-dir="2"] { grid-area: down; }
.sn-pad [data-dir="1"] { grid-area: right; }

.sn-keys {
  max-width: 560px;
  margin: 0;
  text-align: center;
}

.sn-star {
  color: #e0a800;
}

kbd {
  display: inline-block;
  min-width: 20px;
  margin: 0 1px;
  padding: 0 5px;
  border-radius: 5px;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
}

/* ---------- Arena (with friends) ---------- */

.sn-setup,
.sn-race {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.sn-setup > p {
  margin: 0;
  text-align: center;
}

.sn-setup-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
}

.sn-players {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sn-players li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 99px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 14px;
  font-weight: 600;
}

.sn-players li.is-out {
  opacity: 0.45;
  text-decoration: line-through;
}

.sn-players li span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.sn-players li b {
  color: var(--text-muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.sn-note {
  min-height: 21px;
  margin: 0;
  text-align: center;
}

.sn-note[data-tone="bad"] {
  color: var(--danger);
  font-weight: 700;
}

/* Phone held sideways: fit the screen height (see css/style.css) */
@media (orientation: landscape) and (max-height: 540px) {
  .sn-stage { width: min(560px, var(--play-w), var(--play-h)); }
}
@media (orientation: landscape) and (max-height: 540px) {
  .sn-pad { grid-template-columns: repeat(3, 54px); grid-template-rows: repeat(2, 46px); }
  .sn-keys { display: none; }
}
/* With friends, phone held sideways */
@media (orientation: landscape) and (max-height: 540px) {
  .sn-race { --play-h: calc(100dvh - 180px); gap: 8px; }
  .sn-race .sn-stage { width: min(760px, 100%, calc(var(--play-h) * 32 / 22)); }
}
/* With friends, sideways: arrows beside the arena */
@media (orientation: landscape) and (max-height: 540px) {
  .sn-race {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas: "players players" "stage pad" "note note";
    justify-content: center;
    align-items: center;
    column-gap: 16px;
  }
  .sn-race > .sn-players { grid-area: players; }
  .sn-race > .sn-stage { grid-area: stage; width: min(760px, calc(100vw - 230px), calc(var(--play-h) * 32 / 22)); }
  .sn-race > .sn-pad { grid-area: pad; }
  .sn-race > .sn-note { grid-area: note; }
}