:root {
  --bg: #0e0c1d;
  --panel: #18152d;
  --panel-2: #221e3f;
  --line: #2f2a55;
  --text: #f4f1ff;
  --dim: #a29dc6;
  --you: #5ef2a0;
  --you-dark: #1d7a50;
  --hot: #ff3b5c;
  --hot-dark: #8f1230;
  --gold: #ffd23f;
  --speed: #ffd23f;
  --rain: #ff5a7a;
  --dark: #a08fff;
  --flip: #ff9a3c;
  --flags: 'Twemoji Country Flags';
  --display: var(--flags), 'Lilita One', 'Rubik', system-ui, sans-serif;
  --ui: var(--flags), 'Rubik', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --pop: 0 3px 0 rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.35 var(--ui);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
body {
  background:
    radial-gradient(120% 60% at 50% -10%, #2a1f55 0%, transparent 60%),
    var(--bg);
}

button { font: inherit; color: inherit; border: 0; cursor: pointer; background: none; touch-action: manipulation; }
[hidden] { display: none !important; }
.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }

#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-width: 1280px;
  margin: 0 auto;
}

/* ---- top bar ---- */
#top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 10px;
  padding-top: max(10px, env(safe-area-inset-top));
}
.brand { min-width: 0; }
.logo {
  margin: 0;
  display: flex;
  align-items: center;
  font: 30px/1 var(--display);
  letter-spacing: 0.5px;
  color: #fff;
  transform: skew(-7deg);
  text-shadow: 2px 3px 0 var(--hot);
}
.logo-o { width: 1.05em; height: 0.8em; margin: 0 0.03em 0 0.04em; overflow: visible; filter: drop-shadow(2px 3px 0 var(--hot)); }
.logo-o .head { fill: var(--you); }
.logo-o .scarf { fill: none; stroke: var(--hot); stroke-width: 2.4; stroke-linecap: round; animation: flap 0.5s ease-in-out infinite alternate; transform-origin: 9px 16px; }
.logo-o .eyes { animation: blink 4.5s infinite; transform-origin: 0 11px; }
@keyframes blink { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(0.1); } }
@keyframes flap { to { transform: rotate(-9deg) scaleX(1.1); } }
.tagline { margin: 3px 0 0; font-size: 11.5px; font-style: italic; font-weight: 500; color: var(--dim); white-space: nowrap; }

.stats { display: flex; gap: 12px; margin-left: auto; font-size: 14px; font-variant-numeric: tabular-nums; }
.stats span { display: flex; align-items: center; gap: 5px; color: var(--dim); }
.stats b { color: var(--text); font-weight: 600; }
.icon {
  display: grid;
  place-items: center;
  background: var(--panel-2);
  border-radius: 12px;
  width: 40px;
  height: 40px;
  font-size: 19px;
  flex: none;
  color: var(--gold);
  box-shadow: var(--pop);
}
.icon:active { transform: translateY(2px); box-shadow: none; }
.icon.sound { color: var(--text); }
.icon.sound[aria-pressed="true"] { color: var(--dim); background: var(--panel); }
#top .icon + .icon { margin-left: -4px; }

/* ---- stage ---- */
#stage { display: flex; flex-direction: column; gap: 8px; padding: 0 8px; }
#screen {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 2px var(--line), 0 10px 30px rgba(0, 0, 0, 0.5);
}
#game { width: 100%; height: 100%; display: block; touch-action: none; }

#overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  text-align: center;
  background: radial-gradient(circle at 50% 45%, rgba(14, 12, 29, 0.55), rgba(14, 12, 29, 0.85));
  animation: fade-in 0.25s ease-out;
}
@keyframes fade-in { from { opacity: 0; } }
#overlay h2 {
  margin: 0;
  font: clamp(26px, 9vw, 46px)/1 var(--display);
  letter-spacing: 0.5px;
  transform: skew(-7deg) rotate(-2deg);
  text-shadow: 3px 4px 0 var(--hot);
  animation: slam 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}
@keyframes slam { from { transform: skew(-7deg) rotate(-2deg) scale(2.2); opacity: 0; } }
#overlay p { margin: 0; color: var(--text); opacity: 0.85; max-width: 32ch; }
#overlay .score { font: clamp(24px, 8vw, 40px)/1 var(--display); color: var(--gold); text-shadow: 2px 3px 0 rgba(0, 0, 0, 0.6); }
.big {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 20px/1 var(--display);
  letter-spacing: 0.5px;
  padding: 15px 28px;
  border-radius: 16px;
  background: var(--you);
  color: #052616;
  box-shadow: 0 5px 0 var(--you-dark), 0 8px 18px rgba(0, 0, 0, 0.4);
}
.big:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--you-dark); }
.pulse { animation: pulse 0.55s ease-in-out infinite alternate; }
@keyframes pulse { to { transform: scale(1.07) rotate(-1.5deg); } }

#toast {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--hot);
  color: #fff;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  white-space: nowrap;
  box-shadow: var(--pop);
}

/* ---- status line ---- */
#status {
  min-height: 54px;
  padding: 8px 10px 8px 12px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
}
#status > .ic { font-size: 24px; color: var(--dim); }
#status .txt { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
#status .main { font-weight: 700; font-size: 16px; }
#status .sub { color: var(--dim); font-size: 13px; }
#status.hot { background: linear-gradient(100deg, var(--hot), #c81c50); border-color: transparent; animation: glow 0.7s ease-in-out infinite alternate; }
#status.hot > .ic { color: #fff; animation: nudge 0.35s ease-in-out infinite alternate; }
#status.hot .main { font: 20px/1.1 var(--display); letter-spacing: 0.5px; }
#status.hot .sub { color: #ffe1e7; }
#status.live { background: linear-gradient(100deg, #12402c, var(--panel) 75%); border-color: #1f5f42; }
#status.live > .ic { color: var(--hot); animation: blinkdot 1s steps(2) infinite; }
@keyframes glow { to { box-shadow: 0 0 26px rgba(255, 59, 92, 0.55); } }
@keyframes nudge { to { transform: translateX(3px); } }
@keyframes blinkdot { 50% { opacity: 0.35; } }
.btn {
  background: var(--you);
  color: #052616;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 12px;
  white-space: nowrap;
  box-shadow: 0 3px 0 var(--you-dark);
}
.btn:active { transform: translateY(2px); box-shadow: none; }
.btn.ghost { background: transparent; color: var(--dim); box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 600; }

/* ---- touch controls ---- */
#controls { display: flex; gap: 10px; user-select: none; -webkit-user-select: none; touch-action: none; }
#controls button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--panel-2);
  border-radius: 20px;
  height: 88px;
  font-size: 34px;
  color: var(--dim);
  box-shadow: 0 5px 0 #0a0816, inset 0 0 0 2px var(--line);
  touch-action: none;
  transition: transform 0.05s;
}
#controls .dpad { display: flex; gap: 10px; flex: 1.3; }
#controls .dpad button { flex: 1; }
#controls .jump { flex: 1; flex-direction: column; gap: 2px; font-size: 30px; background: var(--you); color: #052616; box-shadow: 0 5px 0 var(--you-dark); }
#controls .jump span { font: 15px/1 var(--display); letter-spacing: 1px; }
#controls button.down { transform: translateY(4px); box-shadow: 0 1px 0 #0a0816, inset 0 0 0 2px var(--you); color: var(--you); }
#controls .jump.down { box-shadow: 0 1px 0 var(--you-dark); color: #052616; background: #8ff7bf; }

/* ---- sabotage votes ---- */
#votes { display: flex; flex-direction: column; gap: 6px; }
.votes-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--dim); padding: 0 2px; }
.votes-head span:first-child { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text); }
.votes-head .ic { color: var(--hot); font-size: 17px; }
.vote-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.vote-row button {
  --k: var(--text);
  position: relative;
  overflow: hidden;
  background: var(--panel);
  border-radius: 14px;
  padding: 9px 2px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-size: 24px;
  line-height: 1.15;
  box-shadow: 0 3px 0 #0a0816, inset 0 0 0 1.5px var(--line);
}
.vote-row [data-kind="speed"] { --k: var(--speed); }
.vote-row [data-kind="rain"] { --k: var(--rain); }
.vote-row [data-kind="dark"] { --k: var(--dark); }
.vote-row [data-kind="flip"] { --k: var(--flip); }
.vote-row .ic { color: var(--k); margin-bottom: 3px; }
.vote-row b { font-size: 13px; font-weight: 700; }
.vote-row small { font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }
.vote-row em { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: var(--k); transition: width 0.25s; }
.vote-row button:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 0 0 1.5px var(--line); }
.vote-row button.mine { background: color-mix(in srgb, var(--k) 16%, var(--panel)); box-shadow: 0 3px 0 #0a0816, inset 0 0 0 2px var(--k); }
.vote-row button:disabled { opacity: 0.4; cursor: default; }

/* ---- chat ---- */
#chat {
  flex: 1;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  margin: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
#me { font-size: 12px; color: var(--dim); padding: 7px 12px; border-bottom: 1px solid var(--line); }
#me b { color: var(--text); }
#chatLog { flex: 1; overflow-y: auto; list-style: none; margin: 0; padding: 8px 12px; font-size: 14px; }
#chatLog li { padding: 2px 0; overflow-wrap: anywhere; }
#chatLog .n { font-weight: 700; margin-right: 6px; }
#chatLog li.sys { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--dim); }
#chatLog li.sys .ic { font-size: 14px; }
#chatLog li.up, #chatLog li.out { color: var(--text); }
#chatLog li.up .ic { color: var(--you); }
#chatLog li.out .ic { color: var(--hot); }
#chatForm { display: flex; border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
#chatInput { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--text); padding: 12px; font: 16px var(--ui); outline: none; }
#chatInput::placeholder { color: var(--dim); opacity: 0.7; }
#chatForm button { padding: 0 16px; color: var(--you); font-size: 20px; }

/* ---- leaderboard ---- */
dialog#lb {
  width: min(420px, calc(100vw - 32px));
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
dialog#lb::backdrop { background: rgba(5, 4, 12, 0.7); }
.lb-head { display: flex; justify-content: space-between; align-items: center; }
.lb-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; font: 24px/1 var(--display); letter-spacing: 0.5px; }
.lb-head h3 .ic { color: var(--gold); }
.lb-head .icon { color: var(--dim); width: 36px; height: 36px; font-size: 15px; }
.tabs { display: flex; gap: 4px; margin: 14px 0 8px; padding: 4px; background: var(--bg); border-radius: 12px; }
.tabs button { flex: 1; padding: 8px; border-radius: 9px; color: var(--dim); font-weight: 600; }
.tabs button.on { background: var(--panel-2); color: var(--text); box-shadow: var(--pop); }
#lbList { margin: 0; padding: 0; list-style: none; counter-reset: rank; font-variant-numeric: tabular-nums; }
#lbList li { counter-increment: rank; display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--line); }
#lbList li::before { content: counter(rank); width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--panel-2); color: var(--dim); font: 14px/1 var(--display); }
#lbList li:nth-child(1)::before { background: var(--gold); color: #3d2c00; }
#lbList li:nth-child(2)::before { background: #d9dbea; color: #2b2d3d; }
#lbList li:nth-child(3)::before { background: #e3995a; color: #3a1d05; }
#lbList li span { margin-left: auto; color: var(--gold); font-weight: 700; }
#lbList li.me { color: var(--you); font-weight: 700; }
#lbList li.empty { color: var(--dim); border: 0; }
#lbList li.empty::before { display: none; }
.hint { color: var(--dim); font-size: 12px; margin: 12px 0 0; }
.credits { color: var(--dim); font-size: 10px; margin: 8px 0 0; opacity: 0.7; }
.credits a { color: inherit; }

/* ---- while you play: only the game and the controls (no chat, no votes) ---- */
body.playing #chat { display: none; }
body.playing #stage { flex: 1; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
body.playing #controls { margin-top: auto; }
body.playing #controls button { height: clamp(88px, 22dvh, 200px); }

/* ---- wider screens: chat on the side ---- */
@media (min-width: 900px) {
  #app { display: grid; grid-template-columns: 1fr 340px; grid-template-rows: auto 1fr; }
  #top { grid-column: 1 / -1; padding: 14px 16px 12px; }
  .logo { font-size: 36px; }
  .tagline { font-size: 13px; }
  #stage { padding: 0 8px 12px 12px; overflow-y: auto; }
  /* Keep the game, and everything under it, short enough to fit the window. */
  #stage > * { width: min(100%, calc((100dvh - 270px) * 5 / 3)); margin-inline: auto; }
  #chat { margin: 0 12px 12px 0; }
  body.playing #app { grid-template-columns: 1fr; }
  body.playing #stage > * { width: min(100%, calc((100dvh - 220px) * 5 / 3)); }
  body.playing #controls { margin-top: 0; }
}

/* ---- landscape phones ---- */
@media (orientation: landscape) and (max-height: 520px) {
  /* Watching: the game as tall as the screen allows, everything else in a column on the right. */
  #app {
    display: grid;
    max-width: none;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr);
    grid-template-areas: "screen top" "screen status" "screen votes" "screen chat";
    gap: 6px 8px;
    padding: 8px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }
  #stage { display: contents; }
  #top { grid-area: top; padding: 0; gap: 8px; }
  .logo { font-size: 22px; }
  .tagline { display: none; }
  .stats { gap: 8px; font-size: 13px; }
  .icon { width: 32px; height: 32px; font-size: 15px; border-radius: 10px; }
  #screen {
    grid-area: screen;
    align-self: center;
    width: min(calc((100dvh - 16px) * 5 / 3), calc(100vw - 260px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  }
  #overlay { gap: 10px; }
  #overlay h2 { font-size: 30px; }
  #overlay .score { font-size: 26px; }
  .big { font-size: 17px; padding: 12px 22px; }
  #status { grid-area: status; min-height: 0; padding: 6px 8px; gap: 8px; border-radius: 12px; }
  #status > .ic { font-size: 18px; }
  #status .main { font-size: 13px; }
  #status .sub { font-size: 11px; }
  #status.hot .main { font-size: 15px; }
  .btn { padding: 6px 9px; font-size: 13px; }
  #votes { grid-area: votes; gap: 3px; }
  .votes-head { font-size: 11px; }
  .vote-row { gap: 4px; }
  .vote-row button { padding: 4px 2px 6px; font-size: 17px; border-radius: 10px; }
  .vote-row .ic { margin-bottom: 1px; }
  .vote-row b { font-size: 10px; }
  .vote-row small { font-size: 10px; }
  #chat { grid-area: chat; margin: 0; min-height: 0; border-radius: 12px; }
  #me { padding: 4px 8px; }
  #chatLog { padding: 4px 8px; font-size: 13px; }
  #chatInput { padding: 8px; }

  /* Playing: the game in the middle, as tall as the screen, with a thumb pad in the space left on each
     side (wide phones have plenty). The two arrows get more room than JUMP; the game never goes under
     them: its bottom corners are the ground, the next gap and the deadly left edge. */
  body.playing #app { grid-template-columns: minmax(112px, 1fr) auto minmax(84px, 1fr); grid-template-rows: 1fr; grid-template-areas: "left screen right"; }
  body.playing #top, body.playing #status { display: none; }
  body.playing #screen {
    width: min(calc((100dvh - 16px) * 5 / 3), calc(100vw - 228px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  }
  #controls { display: contents; }
  body.playing #controls .dpad { gap: 6px; }
  body.playing #controls .dpad, body.playing #controls .jump { align-self: end; height: min(60%, 180px); }
  body.playing #controls .dpad { grid-area: left; }
  body.playing #controls .jump { grid-area: right; }
  body.playing #controls .dpad button { height: 100%; }
  #controls button { -webkit-user-select: none; user-select: none; }
}