/* Set by game.js from the window size (1 = sized as on a 2K screen):
   --ui for the side panels, --menu-ui for the start and pause menus. */
:root { --ui: 1; --menu-ui: 1; }

/* Fonts (served from fonts/, Latin only; game.js's FONT matches these):
   Press Start 2P for titles and big moments (the game's name, card and slide
   titles, the score, the room code, Victory or Defeat), Fredoka for
   everything else. Press Start 2P runs wide and tall for its size, so it's
   set smaller than the text it replaced. */
@font-face {
  font-family: "Press Start 2P";
  src: url("fonts/press-start-2p.woff2") format("woff2");
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: "Fredoka";
  src: url("fonts/fredoka.woff2") format("woff2");
  font-weight: 300 700;
  font-display: block;
}
:root {
  --font-title: "Press Start 2P", ui-monospace, Consolas, monospace;
  --font-ui: Fredoka, system-ui, -apple-system, "Segoe UI", sans-serif;
}
html, body { margin: 0; height: 100%; background: #0b0d12; overflow: hidden; }
/* The crosshair is drawn instead of the system cursor, wherever the mouse
   goes; menus (.overlay) get the system cursor back. */
body { cursor: none; }
canvas { display: block; }
/* The game's canvas covers only the arena's column, placed by game.js (resize);
   the page's background above is the gutter around it. */
#game { position: fixed; top: 0; }
/* The game blurred at reduced size, stretched over the game's canvas while an
   online match goes on behind the pause menu (game.js, blurCanvas). */
#blur-live { position: fixed; top: 0; pointer-events: none; }
/* Layers for what goes past the game's canvas (game.js, drawLayers): the
   crosshair following the mouse, ?netstats. */
#crosshair, #netstats { position: fixed; top: 0; left: 0; pointer-events: none; }
#blur-live[hidden], #crosshair[hidden], #netstats[hidden] { display: none; }

.panel {
  position: fixed;
  top: 50%;
  box-sizing: border-box;
  transform: translateY(-50%) scale(var(--ui));
  padding: 22px 22px 20px;
  background: rgba(21, 25, 34, 0.92);
  border: 1px solid #2a3140;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  color: #cfd8dc;
  font: 15px/1.4 var(--font-ui);
  user-select: none;
  pointer-events: none; /* clicks fall through to the game */
}
/* Left of the arena: online, the chat log and its box; always, how to open
   the menu (game.js, updateChatPanel). Placed by resize(); hidden with
   visibility so it keeps its size for that. */
#chat-panel { left: 24px; width: 260px; transform-origin: left center; visibility: hidden; }
#chat-panel.on { visibility: visible; }
/* The newest message at the bottom; the oldest go off the top. */
.chat-log { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; height: 320px; overflow: hidden; overflow-wrap: anywhere; }
.chat-line { color: #e3e9ef; line-height: 1.35; }
.chat-name { font-weight: 600; }
.chat-name.me { color: #4fc3f7; }
.chat-name.foe { color: #ef5350; }
.chat-note { color: #7d8a99; font-size: 13px; }
.chat-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 12px;
  padding: 8px 10px;
  border: 1px solid #4fc3f7;
  border-radius: 8px;
  background: #0f131b;
  color: #e3e9ef;
  font: 15px var(--font-ui);
  outline: none;
  pointer-events: auto; /* the panel lets clicks through; its box doesn't */
  cursor: text;
}
.chat-input::placeholder { color: #5d6a79; }
.chat-input[hidden], .chat-hint[hidden] { display: none; }
.chat-hint { margin: 12px 0 0; color: #7d8a99; font-size: 13px; }
/* The score, names and pings, right of the arena (game.js, updateMatchPanel).
   Placed by resize(); hidden with visibility so it keeps its size for that. */
#match-panel { left: 0; width: 260px; transform-origin: left center; visibility: hidden; }
#match-panel.on { visibility: visible; }
.score-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.score-row + .score-row { margin-top: 12px; }
.score-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 22px; font-weight: 600; }
.score-row.me .score-name { color: #4fc3f7; }
.score-row.foe .score-name { color: #ef5350; }
.score-num { color: #e3e9ef; font: 34px/1 var(--font-title); }
/* The owner's name (game.js setCrown): a little gold crown, and rainbow
   colors drifting slowly through it. Paused while the panel is blurred under
   a menu (a moving child would make the blur redo itself every frame). */
#match-panel .crowned {
  background: linear-gradient(90deg, #ff6b6b, #ffb74d, #fff176, #81c784, #4fc3f7, #b39ddb, #ff6b6b) 0 0 / 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbow-drift 6s linear infinite;
}
#match-panel .crowned::before {
  content: '';
  display: inline-block;
  width: 1.05em;
  height: 0.8em;
  margin-right: 0.3em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 15'%3E%3Cpath d='M1 14V4l5 5 4-8 4 8 5-5v10z' fill='%23ffd54f' stroke='%23b8860b' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  vertical-align: -0.02em;
}
#match-panel.blurred .crowned { animation-play-state: paused; }
@keyframes rainbow-drift { to { background-position: -200% 0; } }
.ping-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; font-size: 18px; }
.ping-row + .ping-row { margin-top: 8px; }
.ping-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #9fb3c4; }
.ping-row b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.panel h2, .pause-controls h2 {
  margin: 0 0 16px;
  font: 10px/1.4 var(--font-title);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4fc3f7;
}
.section + .section { margin-top: 20px; padding-top: 18px; border-top: 1px solid #252c3a; }
.row { display: flex; align-items: center; gap: 16px; }
.row + .row { margin-top: 14px; }
.row[hidden] { display: none; } /* display: flex above would show it anyway (the admin key's row did, to everyone) */
.label { color: #e3e9ef; font-weight: 500; }
.hint { color: #7d8a99; font-size: 13px; }

.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  box-sizing: border-box;
  border: 1px solid #343d50;
  border-bottom-width: 3px;
  border-radius: 7px;
  background: #222938;
  color: #e3e9ef;
  font: 600 14px var(--font-ui);
}

/* Inverted-T like a real keyboard: W centered over A S D. */
.wasd { display: grid; grid-template-columns: repeat(3, 32px); grid-template-rows: repeat(2, 32px); gap: 5px; flex: none; }
.wasd .kbd:nth-child(1) { grid-area: 1 / 2; }
.wasd .kbd:nth-child(2) { grid-area: 2 / 1; }
.wasd .kbd:nth-child(3) { grid-area: 2 / 2; }
.wasd .kbd:nth-child(4) { grid-area: 2 / 3; }

.mouse { flex: none; width: 30px; height: 42px; margin: 0 38px; } /* 30 + 76 = WASD cluster width, keeps labels aligned */
.mouse-body { fill: #222938; stroke: #343d50; stroke-width: 1.5; }
.mouse-line { stroke: #343d50; stroke-width: 1.5; }
.mouse-lmb { fill: #4fc3f7; opacity: 0.45; }
.mouse-rmb { fill: #ffd54f; opacity: 0.45; }

.pill {
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: #2a3140;
  color: #7d8a99;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.pill.on { background: rgba(102, 187, 106, 0.18); color: #81c784; }

/* Full-screen overlays: start menu and pause menu */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(8, 10, 14, 0.6);
  --blur: 3px;
  backdrop-filter: blur(var(--blur));
  font: 15px/1.4 var(--font-ui);
  user-select: none;
  cursor: auto;
}
#menu { background: rgba(8, 10, 14, 0.72); --blur: 5px; }
/* The game kept failing: over everything, with the reason in small print. */
#crash { z-index: 20; background: rgba(8, 10, 14, 0.82); }
.crash-detail { margin: 12px 0 18px; color: #ff8a8a; font: 12px/1.5 ui-monospace, Consolas, monospace; word-break: break-word; }
/* Where the canvas can blur itself, game.js draws the blur behind the menus
   (blurCanvas) instead: without a GPU, backdrop-filter re-blurred the whole
   screen on every repaint under the menu, about 110 ms a frame at 2K. */
.canvas-blur .overlay { backdrop-filter: none; }
.overlay[hidden], .menu-card[hidden] { display: none; }
.menu-card {
  width: 100%;
  max-width: 340px;
  padding: 28px 32px 26px;
  box-sizing: border-box;
  border: 1px solid #2a3140;
  border-radius: 16px;
  background: rgba(21, 25, 34, 0.96);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  color: #cfd8dc;
  text-align: center;
  transform: scale(var(--menu-ui));
}
.menu-card h1 {
  margin: 0 0 18px;
  color: #e3e9ef;
  font: 20px/1.5 var(--font-title);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.menu-tip { margin: 18px 0 0; color: #9fb3c4; font-size: 13.5px; line-height: 1.8; }
.menu-tip b { color: #e3e9ef; font-weight: 500; }
.kbd.sm { min-width: 24px; height: 24px; margin: 0 2px; padding: 0 6px; border-bottom-width: 2px; font-size: 12px; vertical-align: middle; }
.pause-hint { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 18px 0 0; color: #7d8a99; font-size: 14px; }

/* Pause menu: the buttons, then the controls and options in two columns
   (they used to be a panel left of the arena, where the chat is now). */
.pause-card { max-width: 600px; }
.pause-card .menu-actions { max-width: 276px; margin: 0 auto; }
.pause-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #252c3a;
  text-align: left;
  font-size: 15px;
}
.pause-controls .section + .section { margin-top: 0; padding-top: 0; border-top: 0; }

/* Start menu */
#menu-main { max-width: 380px; padding: 40px 36px 30px; }
.menu-dots { display: flex; justify-content: center; gap: 10px; margin-bottom: 18px; }
.menu-dots span { width: 14px; height: 14px; border-radius: 50%; }
.menu-dots span:nth-child(1) { background: #4fc3f7; box-shadow: 0 0 0 5px rgba(79, 195, 247, 0.15); }
.menu-dots span:nth-child(2) { background: #ffd54f; width: 8px; height: 8px; margin-top: 3px; }
.menu-dots span:nth-child(3) { background: #ef5350; box-shadow: 0 0 0 5px rgba(239, 83, 80, 0.15); }
/* .menu-card so it wins over .menu-card h1 (it used to lose, and showed at 28px). */
.menu-card .menu-title {
  margin: 0 0 0 0.08em; /* the letter spacing's share after the last letter, so it stays centered */
  color: #e3e9ef;
  font: 32px/1.3 var(--font-title);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.menu-sub { margin: 8px 0 28px; color: #7d8a99; }
/* Players online (game.js): a small pill under the subtitle, shown only when
   served by the game server. */
.players-online {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: -12px auto 22px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(102, 187, 106, 0.1);
  color: #9fb3c4;
  font-size: 14px;
}
.players-online[hidden] { display: none; }
.players-online b { color: #e3e9ef; font-weight: 600; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #66bb6a; box-shadow: 0 0 0 3px rgba(102, 187, 106, 0.2); }
.menu-actions { display: flex; flex-direction: column; gap: 10px; }
/* Hardware acceleration notice: yellow, shown only when it looks switched off
   (game.js), with a dismiss button. */
.hw-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 24px;
  padding: 14px 10px 14px 16px;
  border: 1px solid rgba(255, 213, 79, 0.5);
  border-radius: 12px;
  background: rgba(255, 213, 79, 0.1);
  text-align: left;
}
.hw-note[hidden] { display: none; }
.hw-note > svg { flex: none; width: 24px; height: 24px; color: #ffd54f; }
.hw-note b { display: block; margin-bottom: 3px; color: #ffd54f; font-size: 15px; font-weight: 600; }
.hw-note span { color: #e6dcb8; font-size: 13px; line-height: 1.45; }
.hw-dismiss {
  flex: none;
  width: 26px;
  height: 26px;
  margin: -4px 0 0;
  padding: 3px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #b8ac7e;
  cursor: pointer;
}
.hw-dismiss svg { display: block; width: 100%; height: 100%; }
.hw-dismiss:hover { background: rgba(255, 213, 79, 0.16); color: #ffd54f; }
.hw-dismiss:focus-visible { outline: 2px solid #ffd54f; outline-offset: 1px; }
/* The analytics cookie box (game.js "Analytics"): both answers look the same,
   so neither is pushed. Cookie settings reopens it once answered. */
.consent {
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px solid #343d50;
  border-radius: 12px;
  background: rgba(34, 41, 56, 0.6);
  text-align: left;
}
.consent[hidden] { display: none; }
.consent b { display: block; margin-bottom: 4px; color: #e3e9ef; font-size: 15px; font-weight: 600; }
.consent > span { color: #9fb3c4; font-size: 13px; line-height: 1.45; }
.consent-actions { display: flex; gap: 10px; margin-top: 12px; }
.consent-actions .btn { flex: 1; margin: 0; }
.link-btn {
  display: block;
  margin: 14px auto 0;
  padding: 2px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #7d8a99;
  font: 400 12.5px var(--font-ui);
  text-decoration: underline;
  cursor: pointer;
}
.link-btn[hidden] { display: none; }
.link-btn:hover { color: #c3cfdb; }
.link-btn:focus-visible { outline: 2px solid #4fc3f7; outline-offset: 1px; }
.menu-actions.split { flex-direction: row; margin-top: 24px; }
.menu-actions.split .btn { flex: 1; }

.btn {
  height: 46px;
  padding: 0 20px;
  border: 1px solid #343d50;
  border-radius: 10px;
  background: #222938;
  color: #e3e9ef;
  font: 500 16px var(--font-ui);
  cursor: pointer;
  transition: background-color 120ms, border-color 120ms, transform 60ms;
}
.btn:hover { background: #2a3244; border-color: #46506a; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid #4fc3f7; outline-offset: 2px; }
.btn-primary { background: #4fc3f7; border-color: #4fc3f7; color: #0b0d12; }
.btn-primary:hover { background: #7fd3fa; border-color: #7fd3fa; }

/* How to play: one slide at a time, each with a small animated picture.
   Colors match the game: you blue, the other side red, your bullets gold. */
#menu-howto { max-width: 560px; padding: 26px 34px 24px; }
.howto-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
#menu-howto h2 {
  margin: 0;
  color: #4fc3f7;
  font: 11px/1.4 var(--font-title);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.howto-count { color: #7d8a99; font-size: 13px; font-variant-numeric: tabular-nums; }
.howto-slide[hidden] { display: none; }
.howto-art {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: #0b0d12;
}
.howto-slide h3 { margin: 24px 0 12px; color: #e3e9ef; font: 17px/1.5 var(--font-title); }
.howto-slide p { min-height: 54px; margin: 0; color: #b6c4d0; font-size: 18px; line-height: 1.5; }
.howto-slide .kbd.sm { margin: 0 2px 0 0; }
.howto-dots { display: flex; justify-content: center; gap: 8px; margin: 18px 0 0; }
.howto-dots span { width: 8px; height: 8px; border-radius: 50%; background: #2a3140; transition: background-color 150ms, transform 150ms; }
.howto-dots span.on { background: #4fc3f7; transform: scale(1.25); }
#menu-howto .menu-actions.split { margin-top: 18px; }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn:disabled:hover { background: #222938; border-color: #343d50; }
.howto-exit { width: 100%; margin-top: 10px; }

/* The pictures' pieces */
.art-arena { fill: #11151d; stroke: #3d465a; stroke-width: 4; }
.art-mid { stroke: #2a3140; stroke-width: 4; }
.art-you { fill: #4fc3f7; stroke: #0277bd; stroke-width: 3; }
.art-foe { fill: #ef5350; stroke: #b71c1c; stroke-width: 3; }
.art-gun { fill: #b0bec5; }
.art-label { fill: #4fc3f7; font: 600 12px var(--font-ui); letter-spacing: 0.1em; text-anchor: middle; }
.art-bullet { fill: #ffd54f; }
.art-bullet-core { fill: #fff; }
.art-bullet-foe { fill: #ff3d8b; }
.art-bullet-core-foe { fill: #2a0a18; }
.art-dfl-zone { fill: rgba(79, 195, 247, 0.06); stroke: #4fc3f7; stroke-width: 1.5; stroke-dasharray: 4 4; opacity: 0.55; }
.art-dfl-spark { fill: none; stroke: #ffd54f; stroke-width: 2.5; opacity: 0; }
.art-cross circle, .art-cross path { fill: none; stroke: #e3e9ef; stroke-width: 2.5; stroke-linecap: round; }
.art-path { fill: none; stroke: #ffd54f; stroke-width: 2; stroke-dasharray: 5 6; opacity: 0.35; }
.art-spark { fill: none; stroke: #ffd54f; stroke-width: 2.5; opacity: 0; }
.art-ring-bg { fill: none; stroke: #2a3140; stroke-width: 6; }
.art-ring { fill: none; stroke: #ffb74d; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 213.6; }
.art-pip { fill: #ffd54f; }
.art-pip-empty { fill: none; stroke: #9fb3c4; stroke-width: 1.5; }
.art-caught { fill: none; stroke: #ffd54f; stroke-width: 3; opacity: 0; }
.art-heart-slots { opacity: 0.18; }
.art-target { transform-box: fill-box; transform-origin: center; }
.art-round { fill: #1a1f2a; stroke: #3d465a; stroke-width: 3; }
.art-round-won { fill: #4fc3f7; opacity: 0; }
.art-round-lost { fill: #ef5350; opacity: 0; }
.art-round-label { fill: #7d8a99; font: 600 12px var(--font-ui); letter-spacing: 0.14em; text-anchor: middle; }
.art-victory { fill: #81c784; font: 22px var(--font-title); letter-spacing: 0.04em; text-anchor: middle; opacity: 0; }

/* 1: you strafe along your half while the other side wanders theirs. */
.art-strafe { animation: art-strafe 3s ease-in-out infinite alternate; }
/* Dash slide: you drift right, dash through a falling bullet leaving
   afterimages, and the bar under you empties and refills. */
.art-dash-you { animation: art-dash-you 3.2s infinite; }
@keyframes art-dash-you {
  0% { transform: translateX(0); opacity: 0; animation-timing-function: linear; }
  6% { opacity: 1; }
  38% { transform: translateX(22px); animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1); }
  46% { transform: translateX(150px); animation-timing-function: linear; }
  88% { transform: translateX(162px); opacity: 1; }
  96%, 100% { transform: translateX(162px); opacity: 0; }
}
.art-dash-shot { animation: art-dash-shot 3.2s linear infinite; }
@keyframes art-dash-shot { from { transform: translateY(-14px); } to { transform: translateY(296px); } }
.art-dash-ghost { fill: #4fc3f7; opacity: 0; animation: art-dash-ghost 3.2s infinite; }
.art-dash-g2 { animation-delay: 0.05s; }
.art-dash-g3 { animation-delay: 0.1s; }
@keyframes art-dash-ghost { 0%, 39% { opacity: 0; } 41% { opacity: 0.45; } 52%, 100% { opacity: 0; } }
.art-dash-track { fill: rgba(8, 12, 20, 0.75); }
.art-dash-fill { fill: #ffd54f; transform-box: fill-box; transform-origin: left; animation: art-dash-fill 3.2s infinite; }
@keyframes art-dash-fill { 0%, 38% { transform: scaleX(1); } 40% { transform: scaleX(0); fill: #8a96a8; } 99% { transform: scaleX(0.95); fill: #8a96a8; } 100% { transform: scaleX(1); } }
@keyframes art-strafe { from { transform: translateX(-90px); } to { transform: translateX(90px); } }
.art-wander { animation: art-wander 4.2s ease-in-out infinite alternate; }
.art-cross { animation: art-wander-cross 4.2s ease-in-out infinite alternate; }
@keyframes art-wander { from { transform: translateX(60px); } to { transform: translateX(-70px); } }
@keyframes art-wander-cross { from { transform: translate(220px, 44px); } to { transform: translate(90px, 44px); } }

/* 2: one shot leaving the gun and bouncing around the walls (keyframes at
   each corner of the path, spaced by distance so the speed stays even). */
.art-ricochet { animation: art-ricochet 3.2s linear infinite; }
@keyframes art-ricochet {
  0% { transform: translate(97px, 143px); opacity: 1; }
  26.4% { transform: translate(304px, 87.5px); }
  60.5% { transform: translate(37.3px, 16px); }
  63.3% { transform: translate(16px, 21.7px); }
  96% { opacity: 1; }
  100% { transform: translate(304px, 98.9px); opacity: 0; }
}
.art-spark-1 { animation: art-spark-1 3.2s linear infinite; }
.art-spark-2 { animation: art-spark-2 3.2s linear infinite; }
.art-spark-3 { animation: art-spark-3 3.2s linear infinite; }
@keyframes art-spark-1 { 0%, 26% { opacity: 0; } 27% { opacity: 1; } 38%, 100% { opacity: 0; } }
@keyframes art-spark-2 { 0%, 60% { opacity: 0; } 61% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes art-spark-3 { 0%, 63% { opacity: 0; } 64% { opacity: 1; } 75%, 100% { opacity: 0; } }

/* 3: an enemy bullet comes down, your shot meets it inside the
   ring, and it flies back out as yours beside your shot. The picture is to
   scale: game.js sizes the ring and bullets from CONFIG against the drawn
   body, and sets --dfl-you (where the body is) and --dfl-meet, where the
   two meet (inside the ring). */
.art-dfl-foe { animation: art-dfl-foe 3s linear infinite; }
@keyframes art-dfl-foe {
  0% { transform: translate(160px, 8px); opacity: 1; }
  40% { transform: translate(160px, var(--dfl-meet)); opacity: 1; }
  40.1%, 100% { transform: translate(160px, var(--dfl-meet)); opacity: 0; }
}
.art-dfl-shot { animation: art-dfl-shot 3s linear infinite; }
@keyframes art-dfl-shot {
  0%, 23% { transform: translate(160px, var(--dfl-you)); opacity: 0; }
  23.1% { transform: translate(160px, var(--dfl-you)); opacity: 1; }
  40% { transform: translate(160px, var(--dfl-meet)); }
  80% { transform: translate(160px, 8px); opacity: 1; }
  80.1%, 100% { transform: translate(160px, 8px); opacity: 0; }
}
.art-dfl-back { animation: art-dfl-back 3s linear infinite; }
@keyframes art-dfl-back {
  0%, 40% { transform: translate(160px, var(--dfl-meet)); opacity: 0; }
  40.1% { transform: translate(160px, var(--dfl-meet)); opacity: 1; }
  80% { transform: translate(148px, 8px); opacity: 1; }
  80.1%, 100% { transform: translate(148px, 8px); opacity: 0; }
}
.art-dfl-spark { animation: art-dfl-spark 3s linear infinite; }
@keyframes art-dfl-spark {
  0%, 39.9% { transform: translate(160px, var(--dfl-meet)); opacity: 0; }
  40% { opacity: 1; }
  54%, 100% { transform: translate(160px, var(--dfl-meet)); opacity: 0; }
}
.art-dfl-zone { animation: art-dfl-zone 3s linear infinite; }
@keyframes art-dfl-zone { 0%, 39% { opacity: 0.55; } 41% { opacity: 1; } 60%, 100% { opacity: 0.55; } }

/* 4: the shot leaves, the bullet dot goes, the ring fills, the dot is back.
   One cycle for all three; the ring fills over 10%-92% of it, and game.js
   sets the cycle so that's the real reload time (#9). */
.art-shot { animation: art-shot 4.27s linear infinite; }
@keyframes art-shot { 0% { transform: translateY(0); opacity: 1; } 10% { transform: translateY(-70px); opacity: 0; } 100% { opacity: 0; } }
.art-ring { animation: art-ring 4.27s linear infinite; }
@keyframes art-ring { 0%, 10% { stroke-dashoffset: 213.6; } 92%, 100% { stroke-dashoffset: 0; } }
.art-pip-reload { animation: art-pip-reload 4.27s step-end infinite; }
@keyframes art-pip-reload { 0% { opacity: 0; } 92% { opacity: 1; } }

/* 5: up, off the top wall, back into you: caught, and one more bullet dot. */
.art-catch { animation: art-catch 2.6s ease-in-out infinite; }
@keyframes art-catch {
  0% { transform: translate(160px, 118px); opacity: 1; }
  42% { transform: translate(160px, 16px); }
  84% { transform: translate(160px, 136px); opacity: 1; }
  85%, 100% { transform: translate(160px, 136px); opacity: 0; }
}
.art-spark-top { animation: art-spark-top 2.6s linear infinite; }
@keyframes art-spark-top { 0%, 41% { opacity: 0; } 42% { opacity: 1; } 58%, 100% { opacity: 0; } }
.art-caught { animation: art-caught 2.6s ease-out infinite; }
@keyframes art-caught { 0%, 84% { opacity: 0; } 86% { opacity: 1; } 100% { opacity: 0; } }
.art-pip-gain { animation: art-pip-gain 2.6s step-end infinite; }
@keyframes art-pip-gain { 0% { opacity: 0; } 85% { opacity: 1; } }

/* 6: three shots, each breaks a heart (right to left), then they're out. */
.art-hits { animation: art-hits 1.1s ease-in infinite; }
@keyframes art-hits { 0% { transform: translateY(176px); opacity: 1; } 30% { transform: translateY(78px); opacity: 1; } 31%, 100% { transform: translateY(78px); opacity: 0; } }
.art-heart { animation: 3.3s step-end infinite; }
.art-heart-3 { animation-name: art-heart-3; }
.art-heart-2 { animation-name: art-heart-2; }
.art-heart-1 { animation-name: art-heart-1; }
@keyframes art-heart-3 { 0% { opacity: 1; } 10% { opacity: 0; } }
@keyframes art-heart-2 { 0% { opacity: 1; } 43% { opacity: 0; } }
@keyframes art-heart-1 { 0% { opacity: 1; } 76% { opacity: 0; } }
.art-target { animation: art-target 3.3s linear infinite; }
@keyframes art-target { 0%, 75% { opacity: 1; transform: scale(1); } 80% { opacity: 0; transform: scale(1.4); } 99% { opacity: 0; transform: scale(1); } 100% { opacity: 1; } }

/* 7: a chest drops in with its upgrade above it; you walk over it, it bursts
   and the upgrade rises. Colors as game.js draws the chest (CHEST.colors). */
.art-chest-k { fill: #1b1209; }
.art-chest-w { fill: #9a5b2c; }
.art-chest-d { fill: #6e3f1d; }
.art-chest-l { fill: #c58546; }
.art-chest-g { fill: #ffc93c; }
.art-chest-y { fill: #fff1a8; }
.art-chest-h { fill: #2b1a0e; }
.art-tag { fill: rgba(11, 13, 18, 0.9); stroke: #ffb74d; stroke-width: 1.5; }
.art-tag-text { fill: #f5f7fa; font: 600 11px var(--font-ui); text-anchor: middle; }
.art-chest-beam { fill: url(#tut-chest-fade); opacity: 0; }
.art-chest-ring { fill: none; stroke: #ffb74d; stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.art-chest-pop { fill: #ffb74d; font: 9px var(--font-title); text-anchor: middle; opacity: 0; }
.art-chest { transform-box: fill-box; transform-origin: 50% 100%; animation: art-chest 3.6s linear infinite; }
@keyframes art-chest {
  0% { transform: translateY(-60px) scale(1, 1); opacity: 1; animation-timing-function: ease-in; }
  8% { transform: translateY(0) scale(1.25, 0.75); opacity: 1; }
  12% { transform: translateY(0) scale(0.9, 1.12); }
  16%, 58% { transform: translateY(0) scale(1, 1); opacity: 1; }
  64% { transform: translateY(0) scale(1.35, 1.35); opacity: 0; }
  100% { transform: translateY(-60px) scale(1, 1); opacity: 0; }
}
.art-chest-beam { animation: art-chest-beam 3.6s linear infinite; }
@keyframes art-chest-beam { 0% { opacity: 0.6; } 14%, 58% { opacity: 0; } 59% { opacity: 0.8; } 70%, 100% { opacity: 0; } }
.art-chest-tag { animation: art-chest-tag 3.6s ease-out infinite; }
@keyframes art-chest-tag { 0%, 14% { opacity: 0; transform: translateY(5px); } 20%, 56% { opacity: 1; transform: translateY(0); } 60%, 100% { opacity: 0; } }
.art-chest-walk { animation: art-chest-walk 3.6s ease-in-out infinite; }
@keyframes art-chest-walk {
  0%, 22% { transform: translateX(0); opacity: 1; }
  58%, 90% { transform: translateX(120px); opacity: 1; }
  96% { transform: translateX(120px); opacity: 0; }
  97% { transform: translateX(0); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
.art-chest-ring { animation: art-chest-ring 3.6s ease-out infinite; }
@keyframes art-chest-ring { 0%, 58% { opacity: 0; transform: scale(0.3); } 59% { opacity: 1; } 74%, 100% { opacity: 0; transform: scale(1.6); } }
.art-chest-pop { animation: art-chest-pop 3.6s ease-out infinite; }
@keyframes art-chest-pop { 0%, 59% { opacity: 0; transform: translateY(0); } 62%, 84% { opacity: 1; } 94%, 100% { opacity: 0; transform: translateY(-30px); } }

/* 8: won, lost, won, lost, won: victory. */
.art-round-1, .art-round-2, .art-round-3, .art-round-4, .art-round-5, .art-victory { animation: 6s step-end infinite; }
.art-round-1 { animation-name: art-round-1; }
.art-round-2 { animation-name: art-round-2; }
.art-round-3 { animation-name: art-round-3; }
.art-round-4 { animation-name: art-round-4; }
.art-round-5 { animation-name: art-round-5; }
.art-victory { animation-name: art-victory; }
@keyframes art-round-1 { 0% { opacity: 0; } 12% { opacity: 1; } 93% { opacity: 0; } }
@keyframes art-round-2 { 0% { opacity: 0; } 24% { opacity: 1; } 93% { opacity: 0; } }
@keyframes art-round-3 { 0% { opacity: 0; } 36% { opacity: 1; } 93% { opacity: 0; } }
@keyframes art-round-4 { 0% { opacity: 0; } 48% { opacity: 1; } 93% { opacity: 0; } }
@keyframes art-round-5 { 0% { opacity: 0; } 60% { opacity: 1; } 93% { opacity: 0; } }
@keyframes art-victory { 0% { opacity: 0; } 70% { opacity: 1; } 93% { opacity: 0; } }

/* Special shots: a shotgun fanning out three pellets, and a sniper's laser,
   then its round streaking up it into the target. */
.art-divide { stroke: #2a3140; stroke-width: 2; stroke-dasharray: 4 6; }
.art-shot-name { font: 600 12px var(--font-ui); letter-spacing: 0.1em; text-anchor: middle; }
.art-shotgun-name { fill: #ff6e40; }
.art-sniper-name { fill: #ff1744; }
.art-gun-shotgun { fill: #d7a27a; }
.art-gun-sniper { fill: #e0e6ea; }
.art-shot-flash { fill: #fff3c4; opacity: 0; animation: art-shot-flash 2.4s ease-out infinite; }
@keyframes art-shot-flash { 0% { opacity: 0.9; } 8%, 100% { opacity: 0; } }
.art-pellet { opacity: 0; animation: 2.4s ease-out infinite; }
.art-pellet-l { animation-name: art-pellet-l; }
.art-pellet-c { animation-name: art-pellet-c; }
.art-pellet-r { animation-name: art-pellet-r; }
@keyframes art-pellet-l { 0% { opacity: 1; transform: translate(0, 0); } 40% { opacity: 1; transform: translate(-36px, -86px); } 46%, 100% { opacity: 0; transform: translate(-40px, -94px); } }
@keyframes art-pellet-c { 0% { opacity: 1; transform: translate(0, 0); } 40% { opacity: 1; transform: translate(0, -92px); } 46%, 100% { opacity: 0; transform: translate(0, -100px); } }
@keyframes art-pellet-r { 0% { opacity: 1; transform: translate(0, 0); } 40% { opacity: 1; transform: translate(36px, -86px); } 46%, 100% { opacity: 0; transform: translate(40px, -94px); } }
.art-laser { fill: none; stroke: #4fc3f7; stroke-width: 1.5; animation: art-laser 2.4s linear infinite; }
@keyframes art-laser { 0% { opacity: 0.85; } 25% { opacity: 0.6; } 50% { opacity: 0.85; } 54%, 84% { opacity: 0; } 92%, 100% { opacity: 0.85; } }
.art-snipe-round { fill: #ffd54f; }
.art-snipe { opacity: 0; animation: art-snipe 2.4s linear infinite; }
@keyframes art-snipe { 0%, 50% { opacity: 0; transform: translateY(0); } 51% { opacity: 1; transform: translateY(0); } 55% { opacity: 1; transform: translateY(-44px); } 56%, 100% { opacity: 0; transform: translateY(-44px); } }
.art-snipe-hit { fill: #fff; opacity: 0; animation: art-snipe-hit 2.4s ease-out infinite; }
@keyframes art-snipe-hit { 0%, 55% { opacity: 0; } 56% { opacity: 0.85; } 66%, 100% { opacity: 0; } }

/* Grenade: you aim (a dashed line to the crosshair) and throw; it lands,
   blinks, and blows, shoving the other side away and spraying shrapnel. */
.art-grenade-name { fill: #9ccc65; }
.art-gun-grenade { fill: #7c9a4a; }
.art-throw-line { fill: none; stroke: #c5e1a5; stroke-width: 2; animation: art-throw-line 3.2s linear infinite; }
@keyframes art-throw-line { 0% { opacity: 0.9; stroke-dashoffset: 0; } 21% { opacity: 0.9; stroke-dashoffset: -22px; } 23%, 100% { opacity: 0; stroke-dashoffset: -22px; } }
.art-throw-aim { fill: none; stroke: #ffffff; stroke-width: 1.5; animation: art-throw-aim 3.2s linear infinite; }
@keyframes art-throw-aim { 0%, 21% { opacity: 0.9; } 23%, 100% { opacity: 0; } }
.art-nade { opacity: 0; animation: art-nade 3.2s infinite; }
@keyframes art-nade {
  0%, 21% { opacity: 0; transform: translate(123px, 122px) scale(1.5); }
  22% { opacity: 1; transform: translate(123px, 122px) scale(1.5); animation-timing-function: cubic-bezier(0.3, 0.7, 0.5, 1); }
  40%, 74% { opacity: 1; transform: translate(200px, 66px) scale(1); }
  75%, 100% { opacity: 0; transform: translate(200px, 66px) scale(1); }
}
.art-nade-body { fill: #6b8e3a; stroke: #2f4119; stroke-width: 1.5; }
.art-nade-light { fill: #ff5252; animation: art-nade-light 0.36s linear infinite; }
@keyframes art-nade-light { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.art-boom { fill: none; stroke: #ffd180; stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; animation: art-boom 3.2s ease-out infinite; }
@keyframes art-boom { 0%, 74% { opacity: 0; transform: scale(0.2); } 75% { opacity: 0.95; transform: scale(0.3); } 88%, 100% { opacity: 0; transform: scale(1); } }
.art-boom-core { fill: #fff3c4; opacity: 0; animation: art-boom-core 3.2s ease-out infinite; }
@keyframes art-boom-core { 0%, 74% { opacity: 0; } 75% { opacity: 1; } 81%, 100% { opacity: 0; } }
.art-shrap { fill: #ffd54f; opacity: 0; animation: art-shrap 3.2s ease-out infinite; }
@keyframes art-shrap { 0%, 74% { opacity: 0; transform: translateX(0); } 75% { opacity: 1; transform: translateX(0); } 93% { opacity: 1; transform: translateX(46px); } 95%, 100% { opacity: 0; transform: translateX(48px); } }
.art-nade-foe { animation: art-nade-foe 3.2s infinite; }
@keyframes art-nade-foe {
  0%, 75% { transform: translate(0, 0); animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  84%, 96% { transform: translate(20px, -10px); }
  100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .howto-art * { animation: none !important; }
  #match-panel .crowned { animation: none; }
  .art-nade { opacity: 1; transform: translate(200px, 66px); }
  .art-throw-line, .art-throw-aim { opacity: 0.9; }
  .art-round-won, .art-round-lost, .art-victory, .art-pip-gain, .art-pip-reload { opacity: 1; }
  .art-catch { transform: translate(160px, 60px); }
  .art-ricochet { transform: translate(304px, 87.5px); }
  .art-dash-you { transform: translateX(150px); }
  .art-dash-shot { transform: translateY(126px); }
  .art-dash-ghost { opacity: 0.3; }
  .art-dfl-foe { opacity: 0; }
  .art-dfl-shot { transform: translate(160px, calc(var(--dfl-meet) - 24px)); }
  .art-dfl-back { transform: translate(156.5px, calc(var(--dfl-meet) - 24px)); }
  .art-dfl-spark { transform: translate(160px, var(--dfl-meet)); opacity: 1; }
  .art-chest-walk { transform: translateX(60px); }
  .art-pellet { opacity: 1; }
  .art-pellet-l { transform: translate(-22px, -52px); }
  .art-pellet-c { transform: translate(0, -56px); }
  .art-pellet-r { transform: translate(22px, -52px); }
  .art-laser { opacity: 0.85; }
}

/* Online menus */
.btn-ghost { background: transparent; }
.btn-small { height: 34px; padding: 0 14px; font-size: 13px; margin: 0 auto 4px; }
.online-who { margin: -6px 0 18px; color: #9fb3c4; text-align: left; }
.online-who b { color: #e3e9ef; }
.online-status { min-height: 20px; margin: 16px 0 0; color: #7d8a99; font-size: 13.5px; }
.online-status.bad { color: #ff8a8a; }
#menu-online, #menu-join, #menu-wait, #menu-end { max-width: 380px; }
#menu-online h2, #menu-join h2, #menu-wait h2 {
  margin: 0 0 18px;
  color: #4fc3f7;
  font: 11px/1.4 var(--font-title);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.card-hint { margin: 0 0 14px; color: #9fb3c4; font-size: 14px; }
.code-input {
  width: 100%;
  height: 56px;
  box-sizing: border-box;
  border: 1px solid #343d50;
  border-radius: 10px;
  background: #11151d;
  color: #e3e9ef;
  font: 22px var(--font-title);
  letter-spacing: 0.3em;
  text-indent: 0.3em; /* balances the spacing after the last letter */
  text-align: center;
  text-transform: uppercase;
}
.code-input:focus { outline: 2px solid #4fc3f7; outline-offset: 2px; }
.form-error { min-height: 20px; margin: 10px 0 0; color: #ff8a8a; font-size: 13.5px; }
.room-code {
  margin: 0 0 12px;
  color: #ffd54f;
  font: 30px/1.4 var(--font-title);
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  user-select: all;
}
.wait-status { margin: 10px 0 18px; color: #9fb3c4; font-variant-numeric: tabular-nums; }
.end-title { margin: 0 0 10px !important; font-size: 28px !important; }
.end-title.win { color: #81c784 !important; }
.end-title.loss { color: #ff5c8a !important; }
.end-sub { margin: 0 0 6px; color: #9fb3c4; }
.end-score { margin: 8px 0 24px; color: #e3e9ef; font: 24px/1.3 var(--font-title); }

/* Accounts */
.account-chip { margin: -18px 0 14px; color: #7d8a99; font-size: 13px; }
.account-chip b { color: #4fc3f7; font-weight: 500; }
.online-stats { display: block; margin-top: 2px; color: #7d8a99; font-size: 13px; }
.online-guest { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px 6px; margin: 14px 0 0; color: #7d8a99; font-size: 13px; }
.online-guest[hidden] { display: none; }
.online-guest .btn-text { display: inline; margin: 0; padding: 2px 6px; }
#menu-account, #menu-signin, #menu-signup, #menu-username, #menu-profile, #menu-delete { max-width: 380px; }
#menu-account h2, #menu-signin h2, #menu-signup h2, #menu-username h2, #menu-profile h2, #menu-delete h2 {
  margin: 0 0 18px;
  color: #4fc3f7;
  font: 11px/1.4 var(--font-title);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.auth-form { margin: 0; text-align: left; }
.field { display: block; margin-bottom: 12px; color: #9fb3c4; font-size: 13px; }
.field span { display: block; margin-bottom: 6px; }
.field i { color: #7d8a99; font-style: normal; }
.field input {
  width: 100%;
  height: 44px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid #343d50;
  border-radius: 10px;
  background: #11151d;
  color: #e3e9ef;
  font: 15px var(--font-ui);
}
.field input:focus { outline: 2px solid #4fc3f7; outline-offset: 1px; }
.name-input { letter-spacing: 0.04em; text-transform: none; font-size: 22px; }
.btn-text {
  display: block;
  margin: 14px auto 0;
  padding: 4px 8px;
  border: none;
  background: none;
  color: #9fb3c4;
  font: 13.5px var(--font-ui);
  text-decoration: underline;
  cursor: pointer;
}
.btn-text:focus-visible { outline: 2px solid #4fc3f7; outline-offset: 2px; }
.form-error.ok { color: #81c784; }
.btn-text-danger { color: #ff8a8a; }
.btn-danger { background: #e05555; border-color: #e05555; color: #fff; }
.btn-danger:hover { background: #ec6b6b; border-color: #ec6b6b; }
.card-hint b { color: #e3e9ef; }
.profile-name { margin: 0 0 4px; color: #e3e9ef; font: 600 26px var(--font-ui); }
.profile-email { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px 8px; }
.profile-email b { overflow-wrap: anywhere; }
.profile-email .btn-text { display: inline; margin: 0; padding: 2px 6px; }
.profile-stats { display: flex; gap: 10px; margin: 6px 0 22px; }
.profile-stats div { flex: 1; padding: 10px 0; border: 1px solid #2a3140; border-radius: 10px; background: #1a1f2a; }
.profile-stats b { display: block; color: #e3e9ef; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.profile-stats span { color: #7d8a99; font-size: 12px; }

/* Admin menu (accounts with the admin role, vs a bot; game.js "Admin menu"):
   Tools and Stats tabs on one wide card that scrolls inside the window. */
.admin-card {
  display: flex;
  flex-direction: column;
  max-width: 760px;
  max-height: calc((100vh - 32px) / var(--menu-ui));
  padding: 22px 26px 18px;
  text-align: left;
}
.admin-card h1 { margin-bottom: 12px; text-align: center; }
.admin-card h3 { margin: 14px 0 8px; color: #e3e9ef; font: 600 14px var(--font-ui); }
.admin-card h3 i { color: #7d8a99; font-style: normal; font-weight: 400; }
.admin-tabs { display: flex; gap: 6px; margin-bottom: 6px; }
.admin-tab {
  flex: 1;
  height: 36px;
  border: 1px solid #343d50;
  border-radius: 9px;
  background: #1a1f2a;
  color: #9fb3c4;
  font: 500 15px var(--font-ui);
  cursor: pointer;
}
.admin-tab.on { border-color: #4fc3f7; background: rgba(79, 195, 247, 0.14); color: #e3e9ef; }
.admin-page { min-height: 0; overflow-y: auto; padding-right: 6px; }
.admin-page[hidden] { display: none; }
/* Stats: only the list scrolls; the search and the changes stay in view. */
#admin-stats { display: flex; flex-direction: column; overflow: hidden; padding-right: 0; }
#admin-stats[hidden] { display: none; }
.admin-stat-list { flex: 1; min-height: 0; overflow-y: auto; padding-right: 6px; }
#admin-stats > :not(.admin-stat-list) { flex: none; }
.admin-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.admin-btn {
  height: 32px;
  padding: 0 12px;
  border: 1px solid #343d50;
  border-radius: 8px;
  background: #222938;
  color: #e3e9ef;
  font: 500 13.5px var(--font-ui);
  cursor: pointer;
}
.admin-btn:hover { background: #2a3244; border-color: #46506a; }
.admin-btn:focus-visible, .admin-tab:focus-visible { outline: 2px solid #4fc3f7; outline-offset: 2px; }
.admin-btn:disabled { opacity: 0.4; cursor: default; }
.admin-btn[hidden] { display: none; }
.admin-toggle.on { border-color: #66bb6a; background: rgba(102, 187, 106, 0.2); color: #a5d6a7; }
.admin-danger { color: #ff8a8a; }
.admin-select, .admin-search, .admin-stat-input {
  box-sizing: border-box;
  border: 1px solid #343d50;
  border-radius: 8px;
  background: #11151d;
  color: #e3e9ef;
  font: 13.5px var(--font-ui);
}
.admin-select { height: 32px; padding: 0 8px; }
.admin-ups { display: grid; gap: 4px; margin-bottom: 6px; }
.admin-up { display: flex; align-items: center; gap: 6px; }
.admin-up-name { flex: 1; color: #cfd8dc; font-size: 14px; }
.admin-up-level { min-width: 48px; color: #9fb3c4; font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
.admin-up .admin-btn { min-width: 38px; padding: 0 10px; }
.admin-ups > .admin-btn { justify-self: start; margin-top: 4px; }
.admin-search { width: 100%; height: 36px; margin: 6px 0 8px; padding: 0 12px; }
.admin-search:focus, .admin-select:focus, .admin-stat-input:focus { outline: 2px solid #4fc3f7; outline-offset: 1px; }
.admin-group { margin: 12px 0 4px; color: #ffd54f; font: 600 13px var(--font-ui); letter-spacing: 0.02em; }
.admin-group[hidden], .admin-stat[hidden] { display: none; }
.admin-stat { display: flex; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 7px; }
.admin-stat.changed { background: rgba(255, 213, 79, 0.1); }
.admin-stat-n { flex: none; width: 40px; color: #4fc3f7; font: 600 13px var(--font-ui); font-variant-numeric: tabular-nums; }
.admin-stat-label { flex: 1; min-width: 0; overflow: hidden; color: #cfd8dc; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.admin-stat-input { flex: none; width: 92px; height: 28px; padding: 0 8px; font-variant-numeric: tabular-nums; }
.admin-stat.changed .admin-stat-input { border-color: #ffd54f; }
.admin-stat-def { flex: none; width: 96px; color: #7d8a99; font-size: 12px; }
.admin-stat .admin-btn { flex: none; width: 52px; height: 26px; padding: 0; font-size: 12px; }
.admin-stat .admin-btn[hidden] { display: block; visibility: hidden; } /* keeps its place, so the inputs line up */
.admin-stat .admin-stat-add { width: 64px; }
.admin-stat .admin-stat-add.listed { border-color: #3b6e4a; color: #81c784; opacity: 1; }
/* The change list: stat changes picked with Add, to copy as one message. */
.admin-list { margin-top: 8px; padding: 10px; border: 1px solid #343d50; border-radius: 10px; background: #11151d; }
.admin-list[hidden] { display: none; }
.admin-list-items { max-height: 150px; overflow-y: auto; }
.admin-list-item { display: flex; align-items: center; gap: 8px; padding: 2px 0; color: #e3e9ef; font: 13px/1.5 var(--font-ui); }
.admin-list-item span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.admin-list-item .admin-btn { flex: none; width: 26px; height: 24px; padding: 0; }
.admin-list-empty { color: #7d8a99; font-size: 13px; }
.admin-list-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.admin-list-hint { flex: 1; color: #7d8a99; font-size: 12.5px; }
.admin-list-copy { border-color: #4fc3f7; background: #4fc3f7; color: #0b0d12; }
.admin-list-copy:hover { border-color: #7fd3fa; background: #7fd3fa; }
.admin-list-toggle.on { border-color: #4fc3f7; color: #e3e9ef; }
.admin-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: #9fb3c4; font-size: 13px; }
.admin-foot span { flex: 1; }
.admin-changes {
  width: 100%;
  height: 80px;
  box-sizing: border-box;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid #343d50;
  border-radius: 8px;
  background: #11151d;
  color: #e3e9ef;
  font: 13px/1.5 var(--font-ui);
  resize: vertical;
  user-select: text;
}
.admin-changes[hidden] { display: none; }
.admin-note { margin: 10px 0 0; color: #7d8a99; font-size: 12.5px; }
.admin-card .menu-actions.split { margin-top: 14px; }
.admin-card .pause-hint { margin-top: 10px; }