:root {
  color-scheme: dark;
  --cyan: #54e7ff;
  --orange: #ffad5a;
  --green: #76ffbd;
  --ink: #03070c;
  --panel: #061019;
  --line: rgba(130, 222, 255, .24);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--ink); }
body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: #e9f8fd;
  background:
    radial-gradient(circle at 12% 10%, rgba(52, 184, 221, .12), transparent 28rem),
    radial-gradient(circle at 88% 0%, rgba(255, 173, 90, .08), transparent 26rem),
    var(--ink);
}
button, select { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.signal-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .28;
  background-image:
    linear-gradient(rgba(84, 231, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(84, 231, 255, .04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, #000, transparent 85%);
}

.site-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: max(32px, env(safe-area-inset-top)) 0 max(28px, env(safe-area-inset-bottom));
}
.site-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(22px, 4vw, 44px);
  border: 1px solid var(--line);
  border-bottom-color: rgba(84, 231, 255, .42);
  background: linear-gradient(145deg, rgba(8, 26, 38, .96), rgba(3, 10, 16, .96));
}
.eyebrow, .signal-label {
  margin: 0;
  color: var(--cyan);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .18em;
  text-transform: uppercase;
}
h1, h2 { margin: 0; text-transform: uppercase; }
h1 {
  margin-top: 8px;
  font-size: clamp(42px, 7.5vw, 86px);
  line-height: .9;
  letter-spacing: -.06em;
}
h1 span {
  color: transparent;
  -webkit-text-stroke: 1px rgba(108, 228, 255, .78);
}
.lede {
  max-width: 66ch;
  margin: 18px 0 0;
  color: rgba(218, 241, 250, .7);
  font-size: clamp(14px, 1.8vw, 17px);
  line-height: 1.6;
}

.leaderboard-status {
  flex: 0 0 auto;
  padding: 9px 12px;
  border: 1px solid rgba(117, 222, 255, .18);
  border-radius: 999px;
  color: rgba(197, 230, 241, .68);
  background: rgba(0, 0, 0, .24);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.leaderboard-status.online { color: var(--green); border-color: rgba(118, 255, 189, .3); }
.leaderboard-status.offline { color: var(--orange); border-color: rgba(255, 173, 90, .3); }
.leaderboard-status.syncing { color: var(--cyan); }

.leaderboard-layout {
  display: grid;
  grid-template-columns: minmax(250px, .72fr) minmax(0, 1.6fr);
  border: 1px solid var(--line);
  border-top: 0;
  background: rgba(3, 10, 16, .92);
}
.leaderboard-signal {
  min-width: 0;
  padding: clamp(22px, 3vw, 34px);
  border-right: 1px solid var(--line);
}
.leaderboard-level-number {
  display: block;
  margin-top: 10px;
  color: #effcff;
  font-size: clamp(64px, 9vw, 104px);
  font-weight: 950;
  letter-spacing: -.08em;
  line-height: .8;
}
.leaderboard-level-name {
  display: block;
  min-height: 2.4em;
  margin: 14px 0 18px;
  color: var(--orange);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.leaderboard-level-control {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  border: 1px solid var(--line);
  background: #07131c;
}
.leaderboard-level-control button {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  color: #dff8ff;
  background: transparent;
  font-size: 21px;
}
.leaderboard-level-control button:hover { background: rgba(84, 231, 255, .08); }
.leaderboard-level-control button:disabled { color: rgba(188, 224, 237, .24); cursor: default; }
.leaderboard-field { display: grid; min-width: 0; border-inline: 1px solid rgba(84, 231, 255, .16); }
.leaderboard-field label {
  padding: 6px 10px 0;
  color: rgba(188, 224, 237, .52);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.leaderboard-field select {
  min-width: 0;
  min-height: 44px;
  padding: 0 28px 4px 10px;
  border: 0;
  color: #effbff;
  background: #07131c;
}
.leaderboard-maze {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 20px;
  border: 1px solid rgba(84, 231, 255, .16);
  background: rgba(0, 0, 0, .3);
}
.leaderboard-maze-key {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  color: rgba(188, 224, 237, .5);
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.leaderboard-maze-key span::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  background: var(--cyan);
}
.leaderboard-maze-key span:last-child::before { transform: rotate(45deg); background: var(--orange); }

.leaderboard-ledger { min-width: 0; padding: clamp(22px, 3vw, 34px); }
.leaderboard-ledger-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.leaderboard-ledger-heading h2 { margin-top: 4px; font-size: clamp(26px, 3vw, 38px); }
.leaderboard-ledger-heading > span {
  color: rgba(188, 224, 237, .5);
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.leaderboard-table-wrap {
  max-height: min(56vh, 560px);
  overflow: auto;
  border-block: 1px solid rgba(84, 231, 255, .18);
  background: rgba(0, 0, 0, .18);
}
.leaderboard-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.leaderboard-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 12px 14px;
  color: rgba(177, 218, 232, .58);
  background: #041019;
  font-size: 9px;
  letter-spacing: .14em;
  text-align: left;
  text-transform: uppercase;
}
.leaderboard-table td { padding: 13px 14px; border-top: 1px solid rgba(117, 222, 255, .09); color: rgba(229, 246, 252, .84); }
.leaderboard-table td:first-child { width: 64px; color: var(--orange); font-weight: 900; }
.leaderboard-table td:nth-child(2) { min-width: 140px; overflow-wrap: anywhere; color: #fff; font-weight: 900; }
.leaderboard-table tbody tr:first-child { background: rgba(255, 173, 90, .1); box-shadow: inset 3px 0 var(--orange); }
#leaderboardEmpty { padding: 42px 18px; color: rgba(190, 225, 237, .55); text-align: center; }

.primary, .secondary {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(117, 222, 255, .22);
  border-radius: 4px;
  color: #e8f9ff;
  background: #07131c;
  font-weight: 850;
}
.primary { border-color: var(--cyan); color: #00141b; background: var(--cyan); }
.primary:hover, .secondary:hover { filter: brightness(1.1); }
.leaderboard-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.leaderboard-colossus-open { width: 100%; margin-top: 16px; }

.leaderboard-colossus {
  width: 100%;
  min-width: 0;
  margin-top: 16px;
  overflow-x: clip;
  padding: clamp(16px, 3vw, 28px);
  border: 1px solid var(--cyan);
  background: var(--ink);
}
.leaderboard-colossus-heading { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.leaderboard-colossus-heading h2 { margin-top: 4px; color: var(--cyan); font-size: clamp(24px, 3vw, 34px); }
.leaderboard-colossus-description { max-width: 78ch; margin: 16px 0; color: rgba(229, 247, 255, .78); line-height: 1.55; }
.leaderboard-colossus-inspector {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 24rem;
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 9;
  background: var(--ink);
}
.leaderboard-colossus-inspector canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ink);
}
#leaderboardColossusCanvas { touch-action: pan-y !important; }
#leaderboardColossusCanvas.touch-engaged,
.touch-engaged #leaderboardColossusCanvas,
.leaderboard-colossus:has(#leaderboardColossusTouchButton[aria-pressed="true"]) #leaderboardColossusCanvas { touch-action: none !important; }
.leaderboard-colossus-compass, .leaderboard-colossus-marker {
  position: absolute;
  z-index: 2;
  border: 1px solid var(--line);
  color: var(--cyan);
  background: var(--ink);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.leaderboard-colossus-compass {
  top: 8px;
  right: 8px;
  display: grid;
  grid-template-columns: auto auto;
  place-items: center;
  gap: 4px;
  min-width: 44px;
  min-height: 44px;
  padding: 4px 8px;
}
#leaderboardColossusCompassArrow { display: inline-block; color: var(--orange); font-size: 20px; transform-origin: center; }
.leaderboard-colossus-marker {
  top: 0;
  left: 0;
  min-height: 24px;
  padding: 4px 8px;
  translate: -50% -50%;
  white-space: nowrap;
}
.leaderboard-colossus-marker.entry { border-color: var(--green); color: var(--green); }
.leaderboard-colossus-marker.extraction { border-color: var(--orange); color: var(--orange); }
.leaderboard-colossus-status {
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-top: 0;
  color: rgba(229, 247, 255, .78);
  background: var(--ink);
  font-size: 12px;
  line-height: 1.5;
}
.leaderboard-colossus-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.leaderboard-colossus-controls button {
  display: inline-grid;
  flex: 1 1 44px;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--cyan);
  background: var(--ink);
  font-weight: 850;
}
#leaderboardColossusTouchButton { display: none; }
#leaderboardColossusTouchButton[aria-pressed="true"] { color: var(--ink); background: var(--cyan); }
@media (any-pointer: coarse) { #leaderboardColossusTouchButton { display: inline-grid; } }
.leaderboard-colossus:fullscreen {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  padding: 16px;
  background: var(--ink);
}
.leaderboard-colossus:fullscreen .leaderboard-colossus-inspector { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }

button:focus-visible, select:focus-visible, a:focus-visible, #leaderboardColossusCanvas:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}
#leaderboardColossusCanvas:focus-visible { outline-offset: -4px; }
.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 2px 0;
  color: rgba(188, 224, 237, .5);
  font-size: 12px;
}
.site-footer a { color: var(--cyan); }

@media (max-width: 760px) {
  .site-shell { width: min(100% - 20px, 1180px); padding-top: 10px; }
  .site-header { align-items: flex-start; flex-direction: column; padding: 24px 20px; }
  .leaderboard-layout { grid-template-columns: 1fr; }
  .leaderboard-signal { border-right: 0; border-bottom: 1px solid var(--line); }
  .leaderboard-level-number { font-size: 68px; }
  .leaderboard-maze { max-height: 230px; }
  .leaderboard-table-wrap { max-width: 100%; }
  .leaderboard-table th, .leaderboard-table td { padding-inline: 10px; }
  .leaderboard-colossus-heading { align-items: stretch; flex-direction: column; }
  .leaderboard-colossus-heading .secondary { width: 100%; }
  .leaderboard-colossus-inspector { min-height: 0; }
  .leaderboard-colossus-controls button { flex: 1 1 calc(33.333% - 8px); }
  .site-footer { flex-direction: column; }
}

@media (max-width: 470px) {
  h1 { font-size: 44px; }
  .leaderboard-ledger, .leaderboard-signal { padding: 20px 14px; }
  .leaderboard-table th:nth-child(4), .leaderboard-table td:nth-child(4) { display: none; }
}