* { box-sizing: border-box; }
/* Brand (#59): the Hot Sauce gradient, for the wordmark and primary buttons. */
:root {
  --brand-a: #ff2e88;
  --brand-b: #ff9f1c;
  --brand: linear-gradient(90deg, var(--brand-a), var(--brand-b));
  --brand-ink: #1a0612;    /* text on the gradient (about 5.3:1 on the pink end) */
  --brand-shadow: #a3134f; /* the pressed 3D edge */
}
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #0b0f1c;
  color: #eef2ff;
  font-family: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  user-select: none;
  -webkit-user-select: none;
}
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: default; }
.hidden { display: none !important; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; }
#stats {
  position: absolute; left: calc(16px + env(safe-area-inset-left)); bottom: calc(16px + env(safe-area-inset-bottom));
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
}
#stats .score { font-size: 38px; font-weight: 800; line-height: 1; }
#stats .score small { font-size: 13px; font-weight: 600; opacity: .7; margin-left: 6px; text-transform: uppercase; letter-spacing: .08em; }
#stats .line { margin-top: 6px; font-size: 14px; opacity: .85; }
#boostBadge {
  display: inline-block; margin-left: 10px; padding: 3px 9px; vertical-align: middle; border-radius: 999px;
  font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; text-shadow: none;
  color: #10142a; background: #4cc9f0; box-shadow: 0 0 12px rgba(76, 201, 240, .7);
}

#leaderboard {
  position: absolute; right: calc(16px + env(safe-area-inset-right)); top: calc(16px + env(safe-area-inset-top)); width: 220px;
  background: rgba(10, 14, 30, .55); border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px; padding: 10px 12px; backdrop-filter: blur(6px);
  font-size: 13px;
}
#leaderboard h3 { margin: 0 0 6px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
#lb { list-style: none; margin: 0; padding: 0; }
#lb li { display: flex; gap: 6px; padding: 2px 0; white-space: nowrap; }
#lb li .n { flex: 1; overflow: hidden; text-overflow: ellipsis; }
#lb li .r { width: 22px; opacity: .55; }
#lb li .m { font-variant-numeric: tabular-nums; opacity: .85; }
#lb li.me { color: #ffd60a; font-weight: 700; }
#lb li.gap { opacity: .4; justify-content: center; }

/* Top-left cluster (#63): the minimap, with the active power-up badges beside it
   (below it, three per row, on narrow screens). */
#cluster {
  position: absolute; left: calc(16px + env(safe-area-inset-left)); top: calc(16px + env(safe-area-inset-top));
  display: flex; align-items: flex-start; gap: 10px;
}
#minimap { display: block; flex: none; width: 160px; height: 160px; }
#powerups { display: flex; flex-wrap: wrap; gap: 6px; max-width: 276px; }
/* A badge: the power-up's icon inside a ring that drains over its 16 seconds (--left, 0..1). */
.badge {
  --c: #fff; --left: 1;
  position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--c) calc(var(--left) * 1turn), rgba(255,255,255,.14) 0);
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.badge::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #10162b; }
.badge span { position: relative; font-size: 18px; line-height: 1; color: var(--c); }
.badge span.txt { font-size: 14px; font-weight: 900; }
/* About to run out: blink in the last 3 seconds, faster in the last one. */
.badge.ending { animation: badgeBlink .5s ease-in-out infinite alternate; }
.badge.ending-fast { animation-duration: .2s; }
@keyframes badgeBlink { to { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  .badge.ending { animation: none; outline: 2px solid var(--c); outline-offset: 2px; }
}

/* Above the touch buttons so a message stays readable; it takes no taps, so they still work. */
#feed {
  position: absolute; z-index: 2; left: 50%; top: calc(18px + env(safe-area-inset-top)); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
#feed div {
  background: rgba(10, 14, 30, .65); padding: 6px 14px; border-radius: 999px;
  font-size: 14px; font-weight: 700; white-space: nowrap;
  animation: feedIn .25s ease-out, feedOut .5s ease-in 2.6s forwards;
}
#feed div.good { color: #8affc1; }
#feed div.info { color: #ffd60a; }
@keyframes feedIn { from { opacity: 0; transform: translateY(-8px); } }
@keyframes feedOut { to { opacity: 0; transform: translateY(-8px); } }

/* ---------- Touch buttons (#11): touch screens only; main.js shows them only while playing ---------- */
#touchControls { display: none; }
@media (pointer: coarse) {
  #touchControls { display: block; }
  #touchControls button {
    position: absolute; display: flex; align-items: center; justify-content: center; padding: 0;
    pointer-events: auto; touch-action: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
    color: #eef2ff; background: rgba(10, 14, 30, .55); border: 1px solid rgba(255,255,255,.18);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  /* Pause sits top-right, just left of the leaderboard (220px, or 160px when compact). */
  #pauseBtn {
    right: calc(16px + 220px + 10px + env(safe-area-inset-right)); top: calc(16px + env(safe-area-inset-top));
    width: 44px; height: 44px; border-radius: 12px;
  }
  #pauseBtn svg { width: 22px; height: 22px; fill: currentColor; }
  #boostBtn {
    right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom));
    width: 76px; height: 76px; border-radius: 50%;
  }
  #boostBtn svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  #boostBtn.on { background: rgba(76, 201, 240, .45); border-color: #4cc9f0; }
}
@media (pointer: coarse) and (max-width: 600px) {
  #pauseBtn { right: calc(16px + 160px + 10px + env(safe-area-inset-right)); }
}
/* Phones in landscape: a compact leaderboard (top 5 plus your own row) and smaller cluster. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
  #leaderboard { width: 160px; font-size: 11.5px; padding: 8px 10px; }
  #lb li:nth-child(n+6):not(.me) { display: none; }
  #pauseBtn { right: calc(16px + 160px + 10px + env(safe-area-inset-right)); }
  #minimap { width: 110px; height: 110px; }
  .badge { width: 36px; height: 36px; }
  #powerups { max-width: 252px; }
}
/* Too narrow for one row of six badges between the minimap and the leaderboard (and Pause):
   wrap them beside the minimap, three per row, or two where Pause leaves less room (#73). */
@media (min-width: 601px) and (max-width: 759px) {
  #powerups { max-width: 132px; }
}
@media (pointer: coarse) and (min-width: 601px) and (max-width: 639px) {
  #powerups { max-width: 86px; }
}

/* ---------- Overlays ---------- */
.overlay {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(8,10,22,.35), rgba(8,10,22,.75));
  padding: calc(16px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right))
           calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
}
/* Panels never exceed the visible area; taller content scrolls inside the panel. */
.panel {
  width: 100%; max-width: 400px; max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
  text-align: center;
  background: rgba(16, 21, 42, .82); border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px; padding: 26px 24px 20px; backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.panel.small { max-width: 340px; }
.panel.wide { max-width: 640px; }
.panel h3 { margin: 18px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; opacity: .6; text-align: left; }
.grid.four { grid-template-columns: repeat(4, 1fr); }
.grid.four b { font-size: 20px; }
table.runs { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; }
table.runs th { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .5; font-weight: 600; padding: 4px 6px; }
table.runs td { padding: 5px 6px; border-top: 1px solid rgba(255,255,255,.06); white-space: nowrap; }
table.runs td.num { font-variant-numeric: tabular-nums; text-align: right; }
table.runs th.num { text-align: right; }
table.runs td.dim { opacity: .55; }
table.runs .empty { opacity: .5; text-align: center; padding: 12px; }
.buttons { display: flex; gap: 8px; margin-top: 16px; }
.buttons button.ghost { margin-top: 0; font-size: 13px; padding: 10px 6px; }
button.ghost.danger { color: #ff8fa3; border-color: rgba(255,90,120,.35); }
@media (max-width: 600px) {
  .grid.four { grid-template-columns: repeat(2, 1fr); }
  table.runs .hide-sm { display: none; }
  .buttons { flex-direction: column; }
}
h1 { margin: 0; font-size: 44px; font-weight: 900; letter-spacing: -.02em; }
h1 span { background: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
h2 { margin: 0 0 14px; font-size: 26px; }
.tag { margin: 4px 0 18px; opacity: .65; }
.label { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; opacity: .65; margin: 14px 0 6px; }
.label span { text-transform: none; letter-spacing: 0; opacity: 1; color: #ffd60a; margin-left: 4px; }

#name {
  width: 100%; padding: 13px 14px; font: inherit; font-size: 17px; font-weight: 700; text-align: center;
  color: #fff; background: rgba(255,255,255,.07); border: 2px solid rgba(255,255,255,.12); border-radius: 12px; outline: none;
}
#name:focus { border-color: #4cc9f0; }

#skins { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
#skins button {
  aspect-ratio: 1; border-radius: 50%; border: 3px solid transparent; cursor: pointer; padding: 0;
  overflow: hidden; background: #0d1322; box-shadow: inset 0 0 0 2px rgba(0,0,0,.35);
}
#skins button canvas { display: block; width: 100%; height: 100%; border-radius: 50%; }
/* Narrow phones: fewer, bigger swatches so each stays an easy touch target (#58). */
@media (max-width: 420px) { #skins { grid-template-columns: repeat(6, 1fr); } }
#skins button.on { border-color: #fff; transform: scale(1.08); }

/* Food theme picker (#64): one compact row of six item buttons. */
#themes { display: flex; gap: 6px; } /* five or six buttons sharing the row (#67) */
#themes button {
  position: relative; flex: 1 1 0; min-width: 0; height: 40px; padding: 0; display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 10px;
}
#themes button canvas { width: 30px; height: 30px; }
#themes button span {
  position: absolute; right: 2px; bottom: 2px; padding: 0 3px; border-radius: 4px;
  font: 800 8px/1.4 system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #10142a; background: #ffd60a;
}
#themes button.on { background: #4361ee; border-color: #4cc9f0; }
input[type=range] { width: 100%; accent-color: #4cc9f0; }

.seg { display: flex; gap: 6px; }
.seg button {
  flex: 1; padding: 9px 0; font: inherit; font-weight: 700; color: #cfd6f5; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 10px;
}
.seg button.on { background: #4361ee; border-color: #4cc9f0; color: #fff; }

button.primary, button.ghost {
  width: 100%; margin-top: 18px; padding: 14px; font: inherit; font-size: 19px; font-weight: 800; cursor: pointer;
  border: 0; border-radius: 14px; color: var(--brand-ink);
  background: var(--brand);
  box-shadow: 0 6px 0 var(--brand-shadow); transition: transform .08s, box-shadow .08s;
}
button.primary:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--brand-shadow); }
button.ghost { margin-top: 10px; background: transparent; color: #cfd6f5; box-shadow: none; font-size: 15px; font-weight: 600; border: 1px solid rgba(255,255,255,.15); }

.help { margin-top: 16px; font-size: 12.5px; opacity: .65; line-height: 1.9; }
.help .touch { display: none; }
@media (pointer: coarse) { .help .touch { display: block; } }
kbd {
  display: inline-block; padding: 0 5px; margin: 0 1px; border-radius: 5px; font: inherit; font-size: 11px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15);
}
#version { margin-top: 6px; font-size: 11px; opacity: .35; letter-spacing: .05em; min-height: 1em; }

#updateBanner {
  position: fixed; z-index: 20; left: 50%; transform: translateX(-50%);
  top: calc(14px + env(safe-area-inset-top));
  display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px);
  background: rgba(16, 21, 42, .95); border: 1px solid rgba(76, 201, 240, .5);
  border-radius: 999px; padding: 6px 6px 6px 16px; font-size: 14px; font-weight: 700;
  box-shadow: 0 8px 30px rgba(0,0,0,.45); animation: feedIn .25s ease-out;
}
#updateBanner span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#updateBanner button {
  font: inherit; cursor: pointer; border: 0; border-radius: 999px; padding: 7px 14px;
}
#updateReload { color: var(--brand-ink); background: var(--brand); }
#updateDismiss { color: #cfd6f5; background: transparent; padding: 7px 10px !important; }

#best, #dBest { margin-top: 10px; font-size: 13px; color: #ffd60a; min-height: 1em; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid div { background: rgba(255,255,255,.05); border-radius: 12px; padding: 12px 6px; }
.grid b { display: block; font-size: 26px; }
.grid small { opacity: .6; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }

@media (max-width: 600px) {
  #leaderboard { width: 160px; font-size: 11.5px; padding: 8px 10px; }
  #minimap { width: 110px; height: 110px; }
  #cluster { flex-direction: column; gap: 8px; }
  #powerups { max-width: 132px; } /* three badges per row */
  #stats .score { font-size: 28px; }
}

/* Laptop-height viewports: trim spacing so the menu fits without scrolling. */
@media (max-height: 760px) {
  .overlay { padding-top: calc(8px + env(safe-area-inset-top)); padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .panel { padding: 20px 22px 16px; }
  .tag { margin: 2px 0 12px; }
  .help { margin-top: 10px; line-height: 1.6; }
  /* Tighter rows so the menu, with the Food picker (#64), fits a laptop screen without scrolling. */
  h1 { font-size: 38px; }
  .label { margin: 9px 0 5px; }
  #name { padding: 9px 12px; }
  .seg button { padding: 7px 0; }
  button.primary { margin-top: 12px; padding: 11px; }
  button.ghost { margin-top: 7px; padding: 10px; }
}

/* Short screens (phones in landscape): tighten the menus so less scrolling is needed. */
@media (max-height: 520px) {
  .panel { padding: 14px 18px 12px; border-radius: 16px; }
  h1 { font-size: 30px; }
  h2 { font-size: 20px; margin-bottom: 8px; }
  .tag { margin: 0 0 8px; font-size: 13px; }
  #name { padding: 8px 12px; font-size: 15px; }
  .label { margin: 8px 0 4px; }
  #skins { gap: 5px; }
  .seg button { padding: 6px 0; }
  button.primary { margin-top: 10px; padding: 9px; font-size: 16px; }
  button.ghost { margin-top: 6px; padding: 7px; }
  .buttons button.ghost { padding: 7px 6px; }
  .help { margin-top: 8px; line-height: 1.6; }
  .grid div { padding: 6px 4px; }
  .grid b { font-size: 18px; }
}