* { box-sizing: border-box; }

:root {
  --ink: #e8eaed;
  --muted: #8a93a3;
  --panel: #14161b;
  --edge: #2a2f3a;
  --blue: #2f7bff;
  --pink: #ff2e93;
  --lime: #7ed321;
  --orange: #ff9100;
  --display: 'Bungee', 'Arial Black', system-ui, sans-serif;
  --marker: 'Permanent Marker', 'Comic Sans MS', cursive;
  --body: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html, body {
  margin: 0;
  height: 100%;
  background: #15171c;
  overflow: hidden;
  font-family: var(--body);
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

canvas {
  display: block;
  cursor: none;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* ---- overlay + card ---------------------------------------------------- */
#overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: radial-gradient(ellipse at center, rgba(10, 12, 16, 0.45), rgba(6, 7, 10, 0.85));
  backdrop-filter: blur(3px);
}
#overlay.hidden { display: none; }

.card {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px;
  width: min(960px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 40px 44px 30px;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 0%, rgba(47, 123, 255, 0.10), transparent 45%),
    radial-gradient(circle at 100% 100%, rgba(255, 145, 0, 0.08), transparent 45%),
    var(--panel);
  border: 2px solid var(--edge);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.col { position: relative; z-index: 1; min-width: 0; }

/* paint bleeding in from the corners (clipped to the card so it never adds scrollbars) */
.splats {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}
.splat {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  transform: rotate(var(--r));
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.25));
}

/* ---- left column: brand + play ----------------------------------------- */
.logo {
  margin: 0;
  font: 400 64px/0.92 var(--display);
  letter-spacing: 1px;
}
.logo span { display: block; }
.logo span:first-child { color: #fff; text-shadow: 4px 4px 0 var(--pink), 8px 8px 0 rgba(0, 0, 0, 0.35); }
.logo span:last-child { color: var(--lime); text-shadow: 4px 4px 0 var(--blue), 8px 8px 0 rgba(0, 0, 0, 0.35); }

.sub {
  margin: 18px 0 24px;
  font-size: 15px;
  color: #b7bfcc;
}

/* "HELLO my name is" sticker */
.nametag {
  display: block;
  max-width: 340px;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  transform: rotate(-1.5deg);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35), 0 12px 30px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s;
}
.nametag:focus-within { transform: rotate(0deg) scale(1.02); }
.nametag-top {
  display: block;
  padding: 8px 14px 6px;
  background: #e53935;
  color: #fff;
  text-align: center;
  font: 700 12px var(--body);
  letter-spacing: 0.5px;
}
.nametag-top b { display: block; font: 400 24px/1 var(--display); letter-spacing: 2px; }
.nametag input {
  display: block;
  width: 100%;
  padding: 10px 16px 14px;
  border: none;
  outline: none;
  background: #fff;
  color: #1b1d22;
  text-align: center;
  font: 400 30px var(--marker);
}
.nametag input::placeholder { color: #c3c7ce; }

.error { min-height: 20px; margin: 12px 0 8px; font-size: 13px; font-weight: 600; color: #ff6b6b; }

/* chunky paint buttons */
.btn {
  display: block;
  width: 100%;
  max-width: 340px;
  margin: 0 0 12px;
  padding: 14px 16px 12px;
  font: 400 19px var(--display);
  letter-spacing: 1px;
  color: #fff;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s, background 0.15s;
}
.btn.primary { background: var(--blue); box-shadow: 0 6px 0 #1a4fb8; }
.btn.primary:hover { background: #4a8cff; transform: translateY(-2px); box-shadow: 0 8px 0 #1a4fb8; }
.btn.primary:active { transform: translateY(4px); box-shadow: 0 2px 0 #1a4fb8; }
.btn.ghost { background: transparent; color: var(--ink); border: 2px solid #3a4150; font-size: 16px; }
.btn.ghost:hover { border-color: var(--lime); color: var(--lime); }
.btn:disabled { opacity: 0.6; cursor: default; transform: none; }
.btn.small { width: auto; margin: 0; padding: 8px 12px 7px; font-size: 12px; box-shadow: 0 3px 0 #1a4fb8; background: var(--blue); }

/* game mode picker: two chunky tabs */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 340px; margin: 0 0 14px; }
.modes[hidden] { display: none; }
.mode {
  padding: 9px 10px 8px;
  text-align: left;
  color: var(--muted);
  background: #0d0f13;
  border: 2px solid #2a2f3a;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.mode b { display: block; font: 400 13px var(--display); letter-spacing: 0.5px; color: var(--ink); }
.mode span { display: block; margin-top: 2px; font-size: 11px; }
.mode:hover { border-color: #3a4150; }
.mode.on { color: #c9ced6; border-color: var(--lime); box-shadow: 0 0 0 1px var(--lime) inset; }
.mode.on[data-mode="duel"] { border-color: #ff2bd6; box-shadow: 0 0 0 1px #ff2bd6 inset, 0 0 18px rgba(255, 43, 214, 0.25); }
.mode.on[data-mode="duel"] b { color: #ff8be8; }
.mode.on[data-mode="team"] { border-color: #ff9100; box-shadow: 0 0 0 1px #ff9100 inset, 0 0 18px rgba(47, 123, 255, 0.3); }
.mode.on[data-mode="team"] b { color: #ffb44d; }
.mode.on[data-mode="ctf"] { border-color: #7ed321; box-shadow: 0 0 0 1px #7ed321 inset, 0 0 18px rgba(126, 211, 33, 0.25); }
.mode.on[data-mode="ctf"] b { color: #b4f06a; }
/* bot difficulty: five little tabs in the pause menu */
.setting-label { display: block; margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.modes.levels { grid-template-columns: repeat(5, 1fr); }
.levels .mode { text-align: center; padding: 8px 0 7px; }
/* CTF team sizes: a Blue stepper and an Orange stepper */
.teams-pick { display: flex; align-items: center; gap: 8px; max-width: 340px; margin: 0 0 14px; }
.teams-pick[hidden] { display: none; }
.stepper { flex: 1; display: flex; align-items: center; gap: 6px; padding: 5px 6px 5px 10px; border: 2px solid #2a2f3a; border-radius: 10px; background: #14161b; }
.stepper .t { flex: 1; font-size: 10px; font-weight: 800; letter-spacing: 1px; }
.stepper[data-team="0"] .t { color: #5b97ff; }
.stepper[data-team="1"] .t { color: #ffa733; }
.stepper .n { min-width: 18px; text-align: center; font: 400 17px var(--display); color: var(--ink); }
.stepper button { width: 28px; height: 28px; border: 0; border-radius: 7px; background: #262b36; color: #fff; font: 700 16px/1 system-ui, sans-serif; cursor: pointer; }
.stepper button:hover:not(:disabled) { background: #343b49; }
.stepper button:disabled { opacity: 0.3; cursor: default; }
.teams-pick .vs { font: 400 11px var(--display); color: var(--muted); }
.setting[hidden] { display: none; }

.hint { max-width: 340px; margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

.invite {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 340px;
  margin: 0 0 14px;
  padding: 10px 10px 10px 14px;
  background: #0d0f13;
  border: 2px dashed #3a4150;
  border-radius: 12px;
}
.invite[hidden] { display: none; }
.invite span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px ui-monospace, Menlo, monospace; color: #c9ced6; }

.build { margin: 22px 0 0; font-size: 11px; color: #5d6575; }

/* ---- right column: field guide ------------------------------------------- */
.col-guide { display: flex; flex-direction: column; gap: 20px; padding-top: 4px; }

h2 {
  display: inline-block;
  margin: 0 0 10px;
  padding: 0 6px;
  font: 400 14px var(--display);
  letter-spacing: 1.5px;
  color: #fff;
  /* a swipe of paint behind the heading */
  background: linear-gradient(transparent 55%, rgba(255, 46, 147, 0.55) 55%, rgba(255, 46, 147, 0.55) 92%, transparent 92%);
}
section:nth-child(2) h2 { background: linear-gradient(transparent 55%, rgba(255, 179, 0, 0.55) 55%, rgba(255, 179, 0, 0.55) 92%, transparent 92%); }
section:nth-child(3) h2 { background: linear-gradient(transparent 55%, rgba(111, 243, 255, 0.45) 55%, rgba(111, 243, 255, 0.45) 92%, transparent 92%); }

ul, ol { list-style: none; padding: 0; margin: 0; }
li { font-size: 13.5px; color: #c9ced6; }
li b { color: #fff; font-weight: 700; margin-right: 6px; }

.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 14px; }
.controls li { display: flex; align-items: center; gap: 8px; }
.keys { display: inline-flex; gap: 3px; }
kbd {
  display: inline-block;
  min-width: 24px;
  padding: 3px 6px 2px;
  border-radius: 6px;
  background: #262b35;
  border: 1px solid #3c4250;
  border-bottom-width: 3px;
  font: 700 11.5px var(--body);
  color: #fff;
  text-align: center;
}

.loot li { position: relative; padding: 4px 0 4px 20px; }
.loot li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 10px var(--c);
}

.streaks li { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.streaks .n {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font: 400 13px var(--display);
  color: #0d0f13;
  background: var(--c);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4), 0 0 14px color-mix(in srgb, var(--c) 50%, transparent);
}

/* ---- small screens: stack the columns ------------------------------------ */
@media (max-width: 780px) {
  .card { grid-template-columns: 1fr; gap: 26px; padding: 30px 24px 24px; }
  .logo { font-size: 46px; }
  .nametag, .btn, .hint, .invite, .modes { max-width: none; }
}

/* ---- touch devices ------------------------------------------------------ */
html, body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
canvas { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.touch-only { display: none !important; }
@media (pointer: coarse) {
  .touch-only { display: grid !important; }
  .keys-only { display: none !important; }
  .controls.touch-only { grid-template-columns: 1fr; }
}

/* "turn your phone sideways" while a game is running in portrait */
#rotate {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: #0d0f13;
  color: #fff;
  font: 400 18px var(--display);
  text-align: center;
  padding: 24px;
}
.rotate-phone {
  width: 54px;
  height: 92px;
  border: 4px solid #fff;
  border-radius: 12px;
  box-shadow: 6px 6px 0 var(--pink);
  animation: rotate-hint 2s ease-in-out infinite;
}
/* appears a few seconds in, for in-app browsers (links opened from chat apps) that can't rotate */
.rotate-help {
  max-width: 300px;
  margin: 0;
  font: 400 13px/1.45 system-ui, -apple-system, sans-serif;
  color: #9aa3b2;
  opacity: 0;
  animation: rotate-help-in 0.5s ease 4s forwards;
}
@keyframes rotate-help-in { to { opacity: 1; } }
@keyframes rotate-hint {
  0%, 25% { transform: rotate(0deg); }
  55%, 85% { transform: rotate(-90deg); }
  100% { transform: rotate(0deg); }
}
@media (pointer: coarse) and (orientation: portrait) {
  body.playing #rotate { display: flex; }
}

/* short landscape phones: two columns, one-line logo, buttons side by side, so Play is always on screen */
@media (max-height: 500px) {
  #overlay { padding: 8px; }
  .card { grid-template-columns: 1.05fr 1fr; gap: 24px; padding: 18px 22px 14px; max-height: 100%; }
  .logo { font-size: 30px; }
  .logo span { display: inline; }
  .logo span:first-child { margin-right: 10px; }
  .sub, .hint { display: none; }
  #menu-main { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; margin-top: 14px; }
  #menu-main .nametag, #menu-main .error, #menu-main .modes, #menu-main .teams-pick { grid-column: 1 / -1; }
  .teams-pick { max-width: none; margin-bottom: 8px; }
  .modes { max-width: none; margin-bottom: 8px; }
  .mode { padding: 6px 10px 5px; }
  .mode span { display: none; }
  .nametag { max-width: none; }
  .nametag-top { padding: 5px 10px 4px; }
  .nametag-top b { font-size: 16px; }
  .nametag input { font-size: 22px; padding: 4px 12px 8px; }
  .error { margin: 6px 0 4px; min-height: 16px; }
  .btn { max-width: none; margin: 0; padding: 11px 10px 9px; font-size: 15px; }
  .btn.ghost { font-size: 14px; }
  #menu-pause { margin-top: 14px; }
  #menu-pause .btn { margin-bottom: 10px; }
  .col-guide { gap: 12px; padding-top: 0; }
  .col-guide li { font-size: 12px; }
  .streaks .n { width: 24px; height: 24px; font-size: 11px; }
  .build { margin-top: 10px; }
}

/* ---- home-screen app (iPhone notch / home indicator) -------------------- */
body { box-sizing: border-box; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
:root {
  --sai-t: env(safe-area-inset-top, 0px); --sai-r: env(safe-area-inset-right, 0px);
  --sai-b: env(safe-area-inset-bottom, 0px); --sai-l: env(safe-area-inset-left, 0px);
}
#overlay { padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }

/* join a friend's room by code (no address bar to paste a link into when it's a home-screen app) */
.join-code { display: flex; gap: 8px; max-width: 340px; margin: 2px 0 0; }
.join-code[hidden] { display: none; }
.join-code input {
  flex: 1; min-width: 0;
  padding: 9px 12px;
  font: 400 15px var(--display);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  background: #0d0f13;
  border: 2px solid #3a4150;
  border-radius: 10px;
  outline: none;
}
.join-code input::placeholder { color: #5d6575; letter-spacing: 1px; }
.join-code input:focus { border-color: var(--blue); }

.ios-hint {
  display: flex; align-items: flex-start; gap: 10px;
  max-width: 340px;
  margin: 12px 0 0; padding: 10px 12px;
  font-size: 12.5px; line-height: 1.45; color: #c9ced6;
  background: rgba(47, 123, 255, 0.12);
  border: 1px solid rgba(47, 123, 255, 0.4);
  border-radius: 10px;
}
.ios-hint[hidden] { display: none; }
.ios-hint b { color: #fff; }
.share-glyph { width: 13px; height: 15px; vertical-align: -2px; color: #8fb4ff; }
#ios-hint-close { flex: none; margin: -2px -2px 0 0; padding: 0 4px; font-size: 18px; line-height: 1; color: var(--muted); background: none; border: none; cursor: pointer; }
@media (max-height: 500px) {
  .join-code, .ios-hint { grid-column: 1 / -1; max-width: none; margin-top: 8px; }
}