@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');

* {
  box-sizing: border-box;
}


body {
  margin: 0;
  min-height: 100vh;
  font-family: "Verdana", "Trebuchet MS", sans-serif;
  background:
    radial-gradient(circle at top, rgba(255, 196, 106, 0.35), transparent 26%),
    radial-gradient(circle at 20% 20%, rgba(61, 214, 208, 0.16), transparent 30%),
    linear-gradient(160deg, #08111f 0%, #102542 38%, #091a2d 100%);
  color: #f4f7fb;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 36px 36px;
  opacity: 0.25;
  pointer-events: none;
}

.page {
  width: min(1040px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 24px 0 32px;
  position: relative;
}

.hud {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
  margin-bottom: 16px;
  padding: 20px 22px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(10, 27, 46, 0.78), rgba(6, 16, 29, 0.62));
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
}

.hud h1 {
  margin: 0 0 8px;
  font-size: clamp(2rem, 4vw, 3.25rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 0 24px rgba(255, 209, 102, 0.28);
}

.title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.title-coin-counter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.22), rgba(255, 159, 28, 0.2));
  border: 1px solid rgba(255, 209, 102, 0.28);
  color: #ffe29a;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  min-height: 48px;
}

@media (min-width: 721px) {
  .title-coin-counter {
    font-size: 1.18rem;
    padding: 14px 22px;
  }
}

.title-update-log {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  max-width: min(480px, 100%);
  padding: 12px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(94, 234, 212, 0.14), rgba(59, 130, 246, 0.14));
  border: 1px solid rgba(94, 234, 212, 0.22);
  color: #d8f7ff;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.title-update-log.hidden {
  display: none !important;
}

.title-update-log-copy {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hud p,
.controls span,
.message {
  margin: 0;
  color: #d9e4f2;
}

.controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  font-size: 0.95rem;
}

.name-field {
  display: grid;
  gap: 6px;
  width: min(240px, 100%);
}

.name-field.hidden {
  display: none;
}

.name-field span {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #bde0fe;
}

.name-field input {
  width: 100%;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 17, 31, 0.65);
  color: #f4f7fb;
  font: inherit;
}

.name-field select {
  width: 100%;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 17, 31, 0.65);
  color: #f4f7fb;
  font: inherit;
}

.inline-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, 0.9fr);
  gap: 10px;
}

.name-field input[type="password"] {
  letter-spacing: 0.12em;
}

.account-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: min(240px, 100%);
}

.account-actions.hidden {
  display: none;
}

.signed-in-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(240px, 100%);
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(8, 17, 31, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.signed-in-panel.hidden {
  display: none;
}

.signed-in-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: #bde0fe;
  font-size: 0.92rem;
  font-weight: 700;
}

.rank-name-tester {
  color: #9fe870;
}

.rank-badge,
.admin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.95), rgba(247, 127, 0, 0.95));
  box-shadow: 0 4px 12px rgba(247, 127, 0, 0.28);
  color: #2f1600;
  font-size: 0.78rem;
  line-height: 1;
  vertical-align: middle;
}

.rank-moderator {
  background: linear-gradient(135deg, rgba(119, 221, 255, 0.95), rgba(40, 156, 255, 0.95));
  color: #06284b;
}

.rank-trial-moderator {
  background: linear-gradient(135deg, rgba(255, 228, 122, 0.95), rgba(245, 158, 11, 0.95));
  color: #4a2a00;
}

.rank-senior-moderator {
  background: linear-gradient(135deg, rgba(131, 245, 189, 0.95), rgba(32, 181, 113, 0.95));
  color: #083826;
}

.rank-admin {
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.95), rgba(247, 127, 0, 0.95));
  color: #2f1600;
}

.rank-developer {
  background: linear-gradient(135deg, rgba(208, 168, 255, 0.95), rgba(128, 90, 213, 0.95));
  color: #220a43;
}

.rank-owner {
  background: linear-gradient(135deg, rgba(255, 153, 178, 0.95), rgba(255, 76, 76, 0.95));
  color: #3f0404;
}

.name-field input:focus {
  outline: 2px solid rgba(123, 223, 242, 0.55);
  outline-offset: 2px;
}

button {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  padding: 11px 18px;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  color: #fff7ea;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0)) padding-box,
    linear-gradient(135deg, #ff8a00 0%, #ffb347 55%, #ffd07a 100%) border-box;
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease, background 120ms ease;
  box-shadow:
    0 12px 22px rgba(255, 138, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow:
    0 14px 26px rgba(255, 138, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

button:active,
button.is-pressed {
  transform: translateY(1px);
  filter: saturate(1.05);
  box-shadow:
    0 6px 14px rgba(255, 138, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

button:focus-visible {
  outline: 2px solid rgba(255, 232, 176, 0.95);
  outline-offset: 2px;
}

#signUpButton,
#signInButton,
#chatSendButton,
#submitReportButton,
#submitRankButton,
#publishEventButton,
#submitShopUploadButton,
#adminAddButton,
#adminAddCoinsButton,
.button-positive {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0)) padding-box,
    linear-gradient(135deg, #16a34a 0%, #22c55e 55%, #86efac 100%) border-box;
  box-shadow:
    0 12px 22px rgba(34, 197, 94, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

#shopButton,
#musicToggleButton,
#restartButton,
#fullscreenButton,
#adminViewLogsButton,
#adminReloadButton,
#adminSetRankButton,
#adminUpdateLogsButton,
.button-info {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0)) padding-box,
    linear-gradient(135deg, #2563eb 0%, #3b82f6 55%, #93c5fd 100%) border-box;
  box-shadow:
    0 12px 22px rgba(59, 130, 246, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

#adminWarnButton,
#adminKickButton,
#adminMuteButton,
#adminUnmuteButton,
#adminTempBanButton,
#adminUnbanButton,
#adminEventManagerButton,
#adminBroadcastButton,
#submitBroadcastButton,
.button-moderation {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0)) padding-box,
    linear-gradient(135deg, #d97706 0%, #f59e0b 55%, #fcd34d 100%) border-box;
  box-shadow:
    0 12px 22px rgba(245, 158, 11, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

#adminShopUploadButton,
.button-shop-buy {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0)) padding-box,
    linear-gradient(135deg, #b45309 0%, #f59e0b 55%, #fde68a 100%) border-box;
  box-shadow:
    0 12px 22px rgba(217, 119, 6, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

#adminBanButton,
#adminRemoveButton,
#adminRemoveCoinsButton,
#adminShopRemoveButton,
#endEventButton,
#submitShutdownButton,
#endShutdownButton,
#adminShutdownButton,
.button-danger {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0)) padding-box,
    linear-gradient(135deg, #b91c1c 0%, #ef4444 55%, #fca5a5 100%) border-box;
  box-shadow:
    0 12px 22px rgba(239, 68, 68, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

#signOutButton,
#cancelReportButton,
#cancelShopUploadButton,
#closeEventManagerButton,
#closeRankManagerButton,
#closeLogsDrawerButton,
#closeShutdownDrawerButton,
.button-neutral,
.button-equip {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0)) padding-box,
    linear-gradient(135deg, #4b5563 0%, #6b7280 55%, #cbd5e1 100%) border-box;
  box-shadow:
    0 12px 22px rgba(71, 85, 105, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

button:disabled {
  cursor: default;
  filter: grayscale(0.18) brightness(0.92);
  opacity: 0.82;
  transform: none;
  box-shadow:
    0 6px 14px rgba(15, 23, 42, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

canvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, #7bdff2 0%, #5390d9 34%, #2b2d42 100%);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  touch-action: manipulation;
}

.game-stage {
  position: relative;
}

.game-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: start;
}

.game-column {
  min-width: 0;
}

.event-banner {
  margin-bottom: 12px;
  background:
    radial-gradient(circle at top right, rgba(255, 209, 102, 0.22), transparent 38%),
    linear-gradient(180deg, rgba(27, 54, 93, 0.9), rgba(10, 20, 35, 0.82));
}

.event-banner.hidden {
  display: none;
}

.event-banner h2 {
  margin: 4px 0 6px;
}

.version-warning {
  margin-bottom: 12px;
  background:
    radial-gradient(circle at top right, rgba(255, 94, 94, 0.22), transparent 36%),
    linear-gradient(180deg, rgba(93, 25, 25, 0.92), rgba(39, 10, 10, 0.9));
  border: 1px solid rgba(255, 142, 142, 0.28);
}

.version-warning.hidden {
  display: none;
}

.version-warning h2 {
  margin: 4px 0 6px;
  color: #ffe3e3;
}

.game-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.game-column:fullscreen {
  background: #050b14;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

.game-column:fullscreen canvas {
  flex: 1;
  max-height: calc(100vh - 120px);
  width: 100%;
  object-fit: contain;
}

.game-column:fullscreen .message {
  margin-top: 0;
}

.game-column:fullscreen #eventBanner {
  display: none !important;
}

.game-column:fullscreen .game-stage {
  flex: 1;
  min-height: 0;
}

.game-column:fullscreen .touch-controls {
  inset: auto 24px 24px 24px;
}

.chat-panel,
.leaderboard-panel {
  position: sticky;
  top: 18px;
}

.leaderboard-card {
  padding: 18px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(10, 27, 46, 0.82), rgba(6, 16, 29, 0.72));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.24);
}

.admin-card {
  margin-top: 18px;
}

.panel-hidden {
  display: none;
}

.hidden {
  display: none !important;
}

.chat-card {
  display: grid;
  gap: 12px;
}

.chat-messages {
  min-height: 360px;
  max-height: 520px;
  overflow-y: auto;
  display: grid;
  gap: 10px;
  padding-right: 4px;
}

.chat-entry,
.chat-empty {
  margin: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
}

.chat-entry.chat-entry-report {
  background: rgba(255, 209, 102, 0.12);
  border: 1px solid rgba(255, 209, 102, 0.22);
}

.chat-entry-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 0.82rem;
  color: #bde0fe;
}

.chat-entry-user {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  color: #f8f9fa;
}

.chat-entry-user.chat-admin {
  color: #ffd166;
}

.chat-entry-label {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 209, 102, 0.18);
  color: #ffe3a3;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.chat-entry-text {
  margin: 0;
  color: #e6eef7;
  line-height: 1.4;
  word-break: break-word;
}

.reportable-user {
  display: inline-flex;
  align-items: center;
  cursor: context-menu;
}

.reportable-user:hover {
  text-decoration: underline;
}

.chat-actions {
  display: grid;
}

.admin-hidden {
  display: none;
}

.leaderboard-card h2 {
  margin: 0 0 8px;
  font-size: 1.25rem;
}

.leaderboard-note,
.leaderboard-status {
  margin: 0;
  color: #c8d9eb;
  font-size: 0.92rem;
}

.leaderboard-list {
  margin: 16px 0;
  padding-left: 22px;
  display: grid;
  gap: 10px;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 6px;
}

.leaderboard-list li {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
}

.leaderboard-entry {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.leaderboard-user {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  color: #f8f9fa;
}

.leaderboard-user-wrap {
  display: inline-grid;
  gap: 6px;
}

.leaderboard-search-field {
  width: 100%;
  margin-top: 14px;
}

.leaderboard-presence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.leaderboard-presence::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.presence-online {
  color: #9fe870;
  background: rgba(76, 201, 108, 0.12);
  border: 1px solid rgba(159, 232, 112, 0.28);
}

.presence-offline {
  color: #d7dee7;
  background: rgba(215, 222, 231, 0.08);
  border: 1px solid rgba(215, 222, 231, 0.16);
}

#racePanel {
  display: grid;
  gap: 12px;
}

.race-players {
  display: grid;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
}

.race-player-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
}

.race-player-name {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-weight: 700;
}

.race-player-state {
  flex: 0 0 auto;
}

.leaderboard-user-stack {
  display: inline-grid;
  gap: 4px;
}

.leaderboard-user-name {
  display: inline-flex;
  align-items: center;
}

.rank-pill {
  display: inline-flex;
  width: fit-content;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.leaderboard-score {
  color: #ffd166;
  font-weight: 700;
}

.leaderboard-empty {
  color: #c8d9eb;
}

.admin-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 14px 0;
}

.admin-actions button {
  width: 100%;
}

.admin-rank-groups {
  display: grid;
  gap: 14px;
  margin: 14px 0;
}

.admin-rank-group {
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-rank-group .report-kicker {
  margin-bottom: 2px;
}

.admin-rank-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.admin-rank-label .admin-badge {
  margin-left: 0;
  flex: 0 0 auto;
}

.admin-rank-group .admin-actions {
  margin: 10px 0 0;
}

.broadcast-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.message {
  margin-top: 14px;
  font-size: 1rem;
  padding: 14px 18px;
  border-radius: 18px;
  background: rgba(7, 17, 29, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.notification-banner {
  border-color: rgba(159, 232, 112, 0.28);
  background:
    linear-gradient(180deg, rgba(159, 232, 112, 0.14), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.04);
}

.shutdown-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(4, 10, 18, 0.84);
  backdrop-filter: blur(10px);
}

.shutdown-card {
  width: min(560px, 100%);
  display: grid;
  gap: 12px;
  padding: 24px;
  border-radius: 28px;
  border: 1px solid rgba(255, 209, 102, 0.2);
  background:
    linear-gradient(180deg, rgba(255, 209, 102, 0.12), rgba(255, 255, 255, 0.05)),
    rgba(8, 17, 31, 0.95);
  text-align: center;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
}

.shutdown-card h2 {
  margin: 0;
  font-size: 2rem;
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 8, 16, 0.58);
  backdrop-filter: blur(4px);
  z-index: 30;
}

.drawer-backdrop.hidden {
  display: none;
}

.report-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(360px, 92vw);
  padding: 22px 18px;
  transform: translateX(100%);
  transition: transform 180ms ease;
  z-index: 40;
  pointer-events: none;
}

.report-drawer.open {
  transform: translateX(0);
  pointer-events: auto;
}

.report-drawer-card {
  height: 100%;
  padding: 22px;
  border-radius: 28px 0 0 28px;
  background: linear-gradient(180deg, rgba(11, 24, 40, 0.96), rgba(7, 16, 29, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
  display: grid;
  align-content: start;
  gap: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 16px;
}

.report-kicker {
  margin: 0;
  color: #ffd166;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.report-drawer-card h2 {
  margin: 0;
  font-size: 1.6rem;
}

.report-actions {
  display: grid;
  gap: 10px;
}

.logs-list {
  display: grid;
  gap: 10px;
}

.log-entry {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.log-entry-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  color: #ffe29a;
  font-weight: 700;
}

.log-entry-copy {
  margin: 0;
  color: #d4e6f7;
  line-height: 1.45;
}

.log-entry-meta {
  color: #bde0fe;
  font-size: 0.85rem;
}

.shop-drawer-card {
  gap: 12px;
}

.shop-items {
  display: grid;
  gap: 12px;
  max-height: 58vh;
  overflow-y: auto;
  padding-right: 4px;
}

.shop-item {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.shop-item-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.coin-pack-title-wrap {
  display: grid;
  gap: 6px;
}

.coin-pack-card {
  background:
    linear-gradient(180deg, rgba(255, 209, 102, 0.1), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.05);
}

.coin-pack-featured {
  border-color: rgba(255, 209, 102, 0.3);
  box-shadow: inset 0 0 0 1px rgba(255, 209, 102, 0.08);
}

.coin-pack-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 209, 102, 0.16);
  color: #ffe29a;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.shop-item-title {
  margin: 0;
  font-size: 1rem;
  color: #fff8e7;
}

.shop-item-price {
  color: #ffd166;
  font-weight: 700;
  white-space: nowrap;
}

.shop-item-preview {
  display: flex;
  gap: 10px;
  align-items: center;
}

.shop-swatch {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.24);
  box-shadow: inset 0 0 0 2px rgba(6, 16, 29, 0.22);
}

.shop-item-copy {
  margin: 0;
  color: #d4e6f7;
  font-size: 0.9rem;
  line-height: 1.4;
}

.shop-item button {
  width: 100%;
}

.shop-owned {
  border-color: rgba(46, 196, 182, 0.4);
}

#shopPanel,
#shopUploadPanel {
  scroll-margin-top: 20px;
}

.shop-item-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.shop-upload-preview-wrap {
  min-height: 140px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
}

.shop-upload-preview {
  max-width: 100%;
  max-height: 220px;
  border-radius: 14px;
  object-fit: contain;
}

.shop-upload-preview.hidden {
  display: none;
}

.touch-controls {
  display: none;
  position: absolute;
  inset: auto 16px 16px 16px;
  justify-content: space-between;
  align-items: end;
  gap: 18px;
  pointer-events: none;
  touch-action: none;
  z-index: 3;
}

.touch-controls-left,
.touch-controls-right {
  display: flex;
  gap: 12px;
  align-items: end;
}

.touch-button {
  min-width: 60px;
  min-height: 60px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)) padding-box,
    linear-gradient(180deg, rgba(14, 32, 54, 0.92), rgba(7, 18, 31, 0.88)) border-box;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #f4f7fb;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  pointer-events: auto;
  opacity: 0.92;
}

.touch-button-direction {
  min-width: 64px;
  font-size: 1.5rem;
}

.touch-button-jump {
  min-width: 112px;
  min-height: 68px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0)) padding-box,
    linear-gradient(135deg, #18b9a9 0%, #4fe0cd 55%, #9bffea 100%) border-box;
  box-shadow:
    0 12px 30px rgba(46, 196, 182, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  color: #082032;
}

.touch-button:active,
.touch-button.is-pressed {
  transform: translateY(1px);
  opacity: 1;
}

@media (hover: none), (pointer: coarse), (max-width: 1024px) {
  .page {
    width: min(100vw - 20px, 1040px);
    padding-top: 18px;
  }

  .hud {
    flex-direction: column;
    align-items: flex-start;
  }

  .controls {
    align-items: flex-start;
  }

  .game-layout {
    grid-template-columns: 1fr;
  }

  .chat-panel,
  .leaderboard-panel {
    position: static;
  }

  .touch-controls {
    display: flex;
  }

  .touch-controls-left {
    gap: 10px;
  }

  .touch-button {
    min-height: 56px;
  }

  .touch-button-jump {
    min-width: 104px;
  }
}


.race-finished-card {
  border: 1px solid rgba(94, 234, 212, 0.28);
  background:
    radial-gradient(circle at top right, rgba(94, 234, 212, 0.18), transparent 38%),
    linear-gradient(180deg, rgba(9, 34, 43, 0.94), rgba(6, 20, 24, 0.96));
}

/* Mountain arcade theme. Existing IDs and interaction states remain authoritative. */
:root {
  --paper: #f4f1e7;
  --panel: #fffdf6;
  --ink: #233b32;
  --muted: #6c786e;
  --green: #23634a;
  --lime: #d0e987;
  --gold: #e3ab45;
  --line: #d7ddd0;
}
body {
  font-family: 'DM Sans', 'Trebuchet MS', sans-serif;
  color: var(--ink);
  background: radial-gradient(ellipse at 10% 0%, #e1e8ce 0, transparent 48%), linear-gradient(135deg, #f9f5ea, #edf0e7);
}
body::before { background-size: 64px 64px; background-image: linear-gradient(90deg,#35513a08 1px,transparent 1px),linear-gradient(#35513a08 1px,transparent 1px); opacity: 1; }
.page { width: min(1280px, calc(100% - 64px)); padding: 32px 0 64px; }
.hud { align-items: center; padding: 0 0 26px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; margin-bottom: 28px; gap: 32px; }
.hud > div:first-child { flex: 1; min-width: 0; }
.title-row { gap: 22px; }
.hud h1 { font-family: 'Barlow Condensed', Impact, sans-serif; font-size: clamp(42px, 5.3vw, 70px); font-weight: 800; letter-spacing: -.035em; line-height: .95; text-shadow: none; margin: 0; white-space: nowrap; }
.hud h1 span { color: var(--green); }
.hud h1 i { color: var(--gold); font-style: normal; }
.hud .brand-tagline { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .2em; margin-top: 16px; }
.title-coin-counter { color: #77551c; background: #f9ebc9; border: 1px solid #dfc687; border-radius: 6px; padding: 10px 14px; min-height: 42px; font-size: 15px; letter-spacing: 0; box-shadow: 0 3px 0 #dfc687; }
.controls { flex: 0 1 540px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: end; gap: 10px; font-size: 12px; }
.controls > span { color: var(--muted); font-size: 10px; order: 2; }
.controls .name-field { width: 140px; }
.controls .account-actions { display: flex; width: auto; }
.signed-in-panel { width: auto; background: none; border: none; padding: 0; color: var(--ink); }
.signed-in-label { color: var(--ink); }
.name-field { width: 100%; }
.name-field span { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.name-field input, .name-field select, .name-field textarea, textarea { border: 1px solid var(--line); border-radius: 5px; background: #f4f5ed; color: var(--ink); padding: 11px 12px; font: inherit; font-size: 13px; }
.name-field input:focus, .name-field select:focus, textarea:focus { outline: 2px solid var(--green); outline-offset: 2px; }
button { border-radius: 5px; background: var(--green); color: #fffdf2; border: 1px solid #174d36; box-shadow: 0 3px 0 #174d36; padding: 10px 15px; font: 700 12px 'DM Sans', 'Trebuchet MS', sans-serif; letter-spacing: .02em; text-transform: none; min-height: 40px; transition: transform 120ms, background 120ms; text-shadow: none; }
button:hover { background: #327b5d; transform: translateY(-1px); filter: none; }
button:active,button.is-pressed { transform: translateY(2px); box-shadow: none; }
button:focus-visible { outline: 3px solid #bc8a30; outline-offset: 4px; }
.button-danger, #signOutButton { background: #b45e49; border-color: #86412e; box-shadow: 0 3px 0 #86412e; color: white; }
.button-moderation { background: #b37a25; border-color: #86581b; box-shadow: 0 3px 0 #86581b; }
.button-neutral,.button-equip,#musicToggleButton,#fullscreenButton { background: #f4f1e7; border-color: var(--line); color: var(--ink); box-shadow: 0 3px 0 var(--line); }
.button-shop-buy,#shopButton { background: var(--lime); border-color: #a6bf65; color: #30451d; box-shadow: 0 3px 0 #a6bf65; }
.game-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 24px; }
.game-column { grid-column: 1 / -1; grid-row: 1; }
.chat-panel { grid-column: 1; grid-row: 2; position: static; }
.leaderboard-panel { grid-column: 2; grid-row: 2; position: static; display: grid; gap: 18px; }
.game-actions { align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; }
.playfield-heading { display: flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.playfield-heading small { color: var(--muted); font-size: 9px; font-weight: 500; margin-left: 10px; letter-spacing: .08em; }
.live-dot { width: 7px; height: 7px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 4px #23634a12; }
canvas { display: block; width: 100%; border: 1px solid #294b3e; border-radius: 8px; background: #b4c8b4; box-shadow: 0 6px 0 #294b3e, 0 18px 40px #213b3214; }
.message { color: var(--muted); font-size: 12px; margin: 20px 0 0; padding: 0; text-align: left; }
.leaderboard-card,.report-drawer-card,.shop-drawer-card,.shutdown-card { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 24px; box-shadow: 0 4px 0 #d7ddd055; backdrop-filter: none; }
.leaderboard-card h2,.report-drawer-card h2,.shutdown-card h2 { font-family: 'Barlow Condensed', Impact, sans-serif; font-size: 29px; text-transform: uppercase; letter-spacing: .02em; margin-top: 0; color: var(--ink); }
.leaderboard-note,.leaderboard-status,.chat-empty,.leaderboard-empty { color: var(--muted); font-size: 12px; line-height: 1.7; }
.report-kicker { color: var(--green); font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.chat-messages { height: 330px; background: #f3f4eb; border-color: var(--line); border-radius: 5px; }
.chat-entry { border-bottom-color: var(--line); }
.chat-entry-user,.leaderboard-user,.reportable-user { color: var(--ink); }
.chat-entry-text { color: #35463b; font-size: 13px; }
.chat-entry-header,.chat-entry-label { color: var(--muted); }
.chat-admin { color: #247144; }
.leaderboard-list { max-height: 330px; }
.leaderboard-entry { background: #f3f4eb; border: 1px solid var(--line); border-radius: 5px; }
.leaderboard-score { font-family: 'Barlow Condensed', Impact, sans-serif; color: var(--green); font-size: 24px; }
.presence-online { color: #237248; }
.presence-offline { color: #7e867b; }
.admin-card { margin: 0; }
.admin-panel-note,.admin-panel-title,.rank-tools-title { color: var(--ink); }
.admin-actions { gap: 10px; }
.shop-item { background: #f4f5ed; border: 1px solid var(--line); border-radius: 6px; box-shadow: none; color: var(--ink); }
.shop-item h3,.shop-item-price,.shop-balance { color: var(--green); }
.shop-item p { color: var(--muted); }
.report-drawer { width: min(460px, 95vw); padding: 12px; }
.report-drawer-card { border-radius: 8px; }
.drawer-backdrop { background: #203c3270; backdrop-filter: blur(3px); }
.shutdown-card,.race-finished-card { background: var(--panel); }
.touch-button { background: #f4f1e7e6; color: var(--ink); border: 1px solid #fff9e3; box-shadow: 0 3px 0 #233b3280; border-radius: 8px; }
.touch-button-jump { background: #d0e987ed; color: #233b32; }
.game-column:fullscreen { background: #142a23; }
.game-column:fullscreen .message,.game-column:fullscreen .playfield-heading { color: #e7ead9; }
.game-column:fullscreen canvas { box-shadow: none; }
.event-banner,.notification-banner { border-left: 4px solid var(--green); }
.version-warning { background: #fff1e8; border-color: #d49a79; }
.version-warning h2 { color: #934a34; }
.hud,.game-column { animation: trail-reveal 500ms ease both; }
.game-column { animation-delay: 80ms; }
@keyframes trail-reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media(max-width: 900px) {
  .page { width: calc(100% - 32px); padding-top: 22px; }
  .hud { flex-direction: column; align-items: stretch; gap: 24px; }
  .controls { flex-basis: auto; justify-content: flex-start; }
  .controls .name-field { flex: 1; width: auto; min-width: 115px; }
  .game-layout { grid-template-columns: 1fr; }
  .game-column,.chat-panel,.leaderboard-panel { grid-column: 1; }
  .game-column { grid-row: 1; }
  .leaderboard-panel { grid-row: 2; }
  .chat-panel { grid-row: 3; }
}
@media(max-width: 520px) {
  .page { width: calc(100% - 24px); }
  .title-row { justify-content: space-between; gap: 14px; }
  .hud h1 { font-size: 43px; }
  .title-coin-counter { font-size: 12px; min-height: 36px; padding: 8px; }
  .playfield-heading { font-size: 9px; letter-spacing: .08em; }
  .playfield-heading small { display: none; }
  .leaderboard-card { padding: 18px; }
  .touch-button { min-height: 44px; min-width: 44px; padding: 8px 12px; }
  .touch-button-jump { min-width: 68px; }
  .touch-controls { inset: auto 12px 12px; }
}
@media(prefers-reduced-motion: reduce) { .hud,.game-column { animation: none; } button,.report-drawer { transition: none; } }
/* Override older action-specific gradients with the new semantic palette. */
button:is(.button-positive,.button-info,#signInButton,#signUpButton,#restartButton,#chatSendButton) { background: var(--green); border-color: #174d36; box-shadow: 0 3px 0 #174d36; color: #fffdf2; }
button:is(.button-danger,#signOutButton) { background: #b45e49; border-color: #86412e; box-shadow: 0 3px 0 #86412e; color: #fff; }
button:is(.button-moderation) { background: #b37a25; border-color: #86581b; box-shadow: 0 3px 0 #86581b; color: #fff; }
button:is(.button-shop-buy,#shopButton) { background: var(--lime); border-color: #a6bf65; color: #30451d; box-shadow: 0 3px 0 #a6bf65; }
.game-stage { max-width: 1040px; margin: 0 auto; }
.game-actions,.message { max-width: 1040px; margin-left: auto; margin-right: auto; }
.hud h1 > span { font: inherit; letter-spacing: inherit; text-transform: inherit; }
.rank-tools { border-color: var(--line); background: #f3f4eb; }
.rank-tools h3 { color: var(--green); }
.message { background: none; border: 0; box-shadow: none; }
@media(max-width:520px) { .controls > span { display: none; } .hud { padding-bottom: 20px; margin-bottom: 20px; } }
#shopBalance, .shop-items-heading { color: var(--green); }
.shop-item-copy { color: var(--muted); }

/* Base camp: one reachable menu shelf, one focused panel. */
[hidden] { display: none !important; }
.game-layout { display: block; }
.chat-panel,.leaderboard-panel { display: none; }
.hud { padding-bottom: 20px; margin-bottom: 18px; }
.hud .controls { flex: 0 0 auto; }
.game-menu-nav { position: sticky; top: 12px; z-index: 21; display: flex; gap: 6px; align-items: center; padding: 8px; margin: 0 auto 22px; max-width: 1040px; background: #f4f1e7f5; border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 5px 14px #233b3209; overflow-x: auto; scrollbar-width: thin; }
.game-menu-nav button { flex: 1 0 auto; min-height: 43px; padding: 11px 14px; white-space: nowrap; background: transparent; color: var(--ink); border: 1px solid transparent; box-shadow: none; font-size: 12px; }
.game-menu-nav button:hover { background: #e4ebd8; transform: none; }
.game-menu-nav button[aria-expanded="true"],.game-menu-nav #shopButton[aria-expanded="true"] { background: var(--green); color: #fffdf2; border-color: var(--green); box-shadow: none; }
.game-menu-nav #shopButton { background: #e3edc6; box-shadow: none; border: 1px solid #c6d6a0; }
.game-actions { flex-wrap: wrap; }
.game-actions #fullscreenButton { order: 3; }
.game-utilities { display: flex; gap: 8px; margin-left: auto; order: 2; }
.menu-hub { position: fixed; z-index: 25; top: 110px; right: max(20px,calc((100vw - 1280px)/2)); width: min(470px,calc(100vw - 32px)); max-height: calc(100dvh - 136px); background: var(--panel); border: 1px solid #b9c8ad; border-radius: 12px; box-shadow: 0 20px 70px #19352938,0 5px 0 #d2dbc4; overflow: hidden; animation: camp-open 160ms ease-out; }
.menu-hub-heading { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--line); background: radial-gradient(ellipse at top right,#dce8bd80,transparent 70%),#f4f3e9; }
.menu-hub-heading h2 { font: 800 36px/.95 'Barlow Condensed',Impact,sans-serif; text-transform: uppercase; margin: 6px 0 0; letter-spacing: -.02em; }
.menu-hub-heading h2:focus { outline: none; }
#closeMenuHub { background: var(--panel); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 2px 0 var(--line); }
.menu-hub-body { max-height: calc(100dvh - 250px); overflow-y: auto; overscroll-behavior: contain; padding: 24px; }
.hub-section > .leaderboard-card { padding: 0; background: transparent; border: 0; box-shadow: none; }
.hub-section > .leaderboard-card > h2 { display: none; }
.hub-section > .leaderboard-card + .leaderboard-card { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 24px; }
.menu-intro { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0 0 22px; }
.menu-intro strong { font-weight: 700; color: var(--ink); font-size: 19px; }
button.mode-card { width: 100%; display: flex; text-align: left; align-items: flex-start; gap: 16px; border: 1px solid var(--line); background: #f6f6ee; color: var(--ink); padding: 20px 16px; margin-bottom: 12px; box-shadow: 0 3px 0 #d7ddd070; }
button.mode-card:hover { background: #edf2df; }
button.mode-card[aria-pressed="true"] { background: #e8f0d4; border: 2px solid var(--green); padding: 19px 15px; box-shadow: 0 3px 0 #bbcc9e; }
.mode-number { font: 700 23px 'Barlow Condensed',Impact,sans-serif; color: #74915c; }
.mode-card strong { display: block; font: 700 27px 'Barlow Condensed',Impact,sans-serif; text-transform: uppercase; line-height: 1; margin-bottom: 8px; }
.mode-card small { display: block; color: var(--muted); font: 400 12px/1.7 'DM Sans',sans-serif; }
.mode-check { opacity: 0; margin-left: auto; color: var(--green); }
.mode-card[aria-pressed="true"] .mode-check { opacity: 1; }
.resume-game-button { width: 100%; margin: 10px 0 20px; min-height: 46px; }
.control-legend { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 18px; color: var(--muted); font-size: 11px; }
.hub-account-fields { display: grid; gap: 18px; }
.hub-account-fields .name-field,.hub-account-fields .account-actions { width: 100%; }
.hub-account-fields .signed-in-panel { padding: 18px; border: 1px solid var(--line); background: #e8f0d4; }
.hub-section .chat-messages,.hub-section .leaderboard-list { max-height: 38dvh; }
.hub-section .shop-items { max-height: none; }
body[data-game-mode="auto"] .touch-controls-left { display: none; }
.game-column:fullscreen .game-menu-nav { position: static; width: 100%; margin-bottom: 0; }
.game-column:fullscreen .game-stage { width: min(100%,calc((100dvh - 190px)*1.7778)); flex: 0 1 auto; }
.game-column:fullscreen .game-stage canvas { height: auto; max-height: none; }
.game-column:fullscreen .menu-hub { top: 86px; right: 18px; }
@keyframes camp-open { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@media(max-width:650px) {
  .hud { flex-direction: row; flex-wrap: wrap; gap: 16px; align-items: center; }
  .hud .controls { width: 100%; justify-content: flex-start; }
  #accountMenuButton { min-height: 36px; padding: 8px 12px; }
  .game-menu-nav { top: 6px; margin-bottom: 16px; }
  .game-menu-nav button { min-height: 42px; padding: 10px 12px; }
  .playfield-heading { width: 100%; }
  .playfield-heading small { display: inline; font-size: 8px; margin-left: auto; }
  .game-utilities { margin-left: 0; }
  .menu-hub { top: auto; bottom: 12px; right: 12px; width: calc(100vw - 24px); max-height: 82dvh; }
  .menu-hub-heading { padding: 18px; }
  .menu-hub-body { padding: 18px; max-height: calc(82dvh - 96px); }
  .game-column:fullscreen .menu-hub { top: auto; bottom: 10px; right: 12px; }
}
@media(prefers-reduced-motion:reduce) { .menu-hub { animation: none; } }
/* Fixed menu/drawer positioning must not inherit the reveal animation's transform. */
.game-column { animation: none; transform: none; }
.report-drawer[aria-hidden="true"] { visibility: hidden; }
.report-drawer[aria-hidden="false"] { visibility: visible; }
.hub-switcher-label { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 24px; font-size: 11px; color: var(--muted); border-bottom: 1px solid var(--line); }
.hub-switcher-label select { min-width: 175px; padding: 9px; font: 600 12px 'DM Sans',sans-serif; background: #eef1e2; color: var(--ink); border: 1px solid var(--line); border-radius: 5px; }
.menu-hub-body { max-height: calc(100dvh - 310px); }
@media(max-width:650px) { .menu-hub-body { max-height: calc(82dvh - 150px); } .hub-switcher-label { padding: 10px 18px; } }