:root {
  color-scheme: dark;
  --ink: #090c0b;
  --ink-2: #121714;
  --paper: #f1f3ed;
  --line: #323933;
  --line-light: #c9cec6;
  --white: #f8faf5;
  --muted: #a6aea7;
  --acid: #b7ff38;
  --coral: #ff5b45;
  --cyan: #68d7e8;
  --mono: "Cascadia Mono", Consolas, monospace;
  --sans: Inter, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--ink); color: var(--white); font-family: var(--sans); letter-spacing: 0; }
button, input { font: inherit; letter-spacing: 0; }
a { color: inherit; }
[hidden] { display: none !important; }
.form-trap { position: absolute !important; width: 1px !important; height: 1px !important; clip-path: inset(50%) !important; overflow: hidden !important; }
.skip-link { position: fixed; z-index: 50; top: 10px; left: 10px; transform: translateY(-160%); background: var(--acid); color: var(--ink); padding: 10px 14px; }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.trust-header {
  height: 66px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 28px;
  padding: 0 28px;
  border-bottom: 1px solid var(--line);
  background: var(--ink);
}

.trust-header > a:not(.brand) { color: var(--acid); font-family: var(--mono); font-size: 10px; font-weight: 800; text-decoration: none; }
.brand { display: flex; align-items: center; gap: 11px; width: max-content; text-decoration: none; }
.brand span { width: 38px; height: 38px; display: grid; place-items: center; background: var(--acid); color: var(--ink); font-family: var(--mono); font-size: 11px; font-weight: 900; }
.brand strong { font-size: 12px; }

.trust-hero {
  position: relative;
  isolation: isolate;
  min-height: 690px;
  height: calc(92svh - 86px);
  max-height: 810px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  gap: 28px;
  padding: 54px 4.5%;
  overflow: hidden;
}

.trust-hero__image, .trust-hero__veil { position: absolute; inset: 0; z-index: -2; }
.trust-hero__image { background: url("/signal-observatory.jpg") center / cover no-repeat; }
.trust-hero__veil { z-index: -1; background: rgba(5, 8, 7, .5); }
.trust-hero__copy { grid-column: 1 / span 7; align-self: center; }
.eyebrow { margin: 0 0 16px; color: var(--acid); font-family: var(--mono); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.trust-hero h1 { max-width: 830px; margin: 0; font-size: 64px; line-height: .98; letter-spacing: 0; overflow-wrap: anywhere; text-wrap: balance; }
.trust-hero__copy > p:last-of-type { max-width: 680px; margin: 24px 0 0; color: #d2d8d1; font-size: 17px; line-height: 1.7; }

.payoff { display: grid; grid-template-columns: 110px 1fr 1fr; max-width: 620px; margin-top: 34px; border-top: 1px solid rgba(255,255,255,.26); border-left: 1px solid rgba(255,255,255,.26); }
.payoff > div { min-height: 54px; display: grid; place-items: center; border-right: 1px solid rgba(255,255,255,.26); border-bottom: 1px solid rgba(255,255,255,.26); font-family: var(--mono); font-size: 10px; }
.payoff strong { color: var(--acid); font-size: 17px; }
.payoff__corner { color: var(--coral); }

.trust-create {
  grid-column: 9 / -1;
  padding: 26px;
  border: 1px solid rgba(255,255,255,.3);
  border-top: 5px solid var(--cyan);
  background: rgba(9,12,11,.92);
  backdrop-filter: blur(12px);
}
.trust-create header { display: grid; gap: 6px; margin-bottom: 22px; }
.trust-create header span, .match-meta span { color: var(--muted); font-family: var(--mono); font-size: 9px; font-weight: 900; }
.trust-create header strong { font-size: 23px; }
.trust-create label { display: grid; gap: 7px; margin-bottom: 14px; color: var(--muted); font-size: 11px; font-weight: 800; }
.trust-create input, .join-stage input, .round-signal input { min-width: 0; min-height: 48px; border: 1px solid var(--line); border-radius: 0; background: #171c19; color: var(--white); padding: 0 13px; outline: 0; }
.trust-create input:focus, .join-stage input:focus, .round-signal input:focus { border-color: var(--acid); }
.trust-create button, .join-stage button, .move-stage form > button, .profiles > button {
  min-height: 48px; border: 0; border-radius: 0; background: var(--acid); color: var(--ink); padding: 0 18px; cursor: pointer; font-family: var(--mono); font-size: 10px; font-weight: 900;
}
.trust-create button { width: 100%; }
.trust-create p, .join-stage form p, .move-stage form > p { min-height: 17px; margin: 10px 0 0; color: var(--coral); font-size: 11px; }
button:disabled { cursor: wait; opacity: .55; }

.trust-match { color: var(--ink); background: var(--paper); padding: 86px max(24px, calc((100% - 1240px) / 2)); }
.match-meta, .history > header, .profiles > header, .trust-lobby > header { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 36px; }
.match-meta h2, .history h2, .profiles h2, .trust-lobby h2, .join-stage h2, .move-stage h2, .spectator-stage h2 { max-width: 780px; margin: 0; font-size: 40px; line-height: 1.05; overflow-wrap: anywhere; }
.match-meta > div:last-child { display: grid; justify-items: end; gap: 7px; }
.match-meta code { font-family: var(--mono); font-size: 18px; font-weight: 900; }

.scoreboard { display: grid; grid-template-columns: 1fr 150px 1fr; min-height: 220px; border-top: 5px solid var(--acid); background: var(--ink-2); color: var(--white); }
.scoreboard article { position: relative; display: grid; align-content: center; gap: 8px; padding: 34px 42px; }
.scoreboard article:last-child { text-align: right; }
.scoreboard article > span { color: var(--muted); font-family: var(--mono); font-size: 9px; font-weight: 900; }
.scoreboard article strong { max-width: calc(100% - 90px); font-size: 27px; overflow-wrap: anywhere; }
.scoreboard article:last-child strong { justify-self: end; }
.scoreboard article small { color: var(--muted); }
.scoreboard article b { position: absolute; top: 50%; right: 36px; transform: translateY(-50%); color: var(--acid); font-family: var(--mono); font-size: 58px; }
.scoreboard article:last-child b { right: auto; left: 36px; }
.scoreboard article i { margin-top: 12px; color: var(--cyan); font-family: var(--mono); font-size: 9px; font-style: normal; font-weight: 900; }
.round-clock { display: grid; grid-template-columns: 1fr auto; place-content: center; border-right: 1px solid var(--line); border-left: 1px solid var(--line); text-align: center; }
.round-clock span { grid-column: 1 / -1; color: var(--muted); font-family: var(--mono); font-size: 9px; }
.round-clock strong { color: var(--coral); font-family: var(--mono); font-size: 54px; }
.round-clock small { align-self: end; padding-bottom: 11px; color: var(--muted); }

.join-stage, .move-stage, .spectator-stage { margin-top: 28px; padding: 34px; border: 1px solid var(--line-light); background: #fff; }
.join-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.join-stage form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; }
.join-stage form p { grid-column: 1 / -1; }
.move-stage__heading { display: flex; align-items: end; justify-content: space-between; gap: 36px; }
.move-stage__heading > p { max-width: 440px; margin: 0; color: #646b65; line-height: 1.65; }
.move-stage form { margin-top: 30px; }
.move-choice { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ink); }
.move-choice label { position: relative; cursor: pointer; }
.move-choice input { position: absolute; opacity: 0; }
.move-choice span { min-height: 126px; display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 18px; padding: 24px; border-right: 1px solid var(--ink); }
.move-choice label:last-child span { border-right: 0; }
.move-choice span b { display: grid; place-items: center; width: 48px; height: 48px; background: var(--acid); font-family: var(--mono); font-size: 22px; }
.move-choice label:last-child span b { background: var(--coral); color: #fff; }
.move-choice span strong { font-size: 21px; }
.move-choice span small { color: #6d746e; font-family: var(--mono); }
.move-choice input:checked + span { background: var(--ink); color: var(--white); }
.round-signal { display: grid; gap: 8px; margin: 18px 0; color: #626a63; font-size: 11px; font-weight: 800; }
.round-signal input { background: #f4f5f1; color: var(--ink); }
.move-stage form > button { min-width: 240px; }
.spectator-stage { text-align: center; }
.spectator-stage .eyebrow { color: var(--coral); }

.history { padding: 78px 0 0; }
.history > header > span { color: #298c64; font-family: var(--mono); font-size: 10px; font-weight: 900; }
.history ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.history li { min-height: 76px; display: grid; grid-template-columns: 72px 1fr 80px 80px 1fr; align-items: center; gap: 16px; border-bottom: 1px solid var(--line-light); }
.history li > span:first-child { font-family: var(--mono); font-weight: 900; }
.history li strong { font-size: 14px; }
.history li b { text-align: center; font-family: var(--mono); font-size: 11px; }
.history li b.is-cooperate { color: #1a8f5f; }
.history li b.is-defect { color: #d74735; }
.history li p { margin: 4px 0 0; color: #6d746e; font-size: 11px; }
.history .history-empty { display: flex; justify-content: center; color: #6d746e; text-align: center; }

.profiles { padding: 78px 0 0; }
.profiles > div { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-light); }
.profile-card { padding: 30px; border-right: 1px solid var(--line-light); }
.profile-card:last-child { border-right: 0; }
.profile-card h3 { margin: 0 0 22px; font-size: 22px; }
.profile-card dl { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.profile-card dl div { min-height: 74px; display: grid; align-content: center; gap: 4px; border-top: 1px solid var(--line-light); }
.profile-card dt { color: #69716a; font-size: 10px; }
.profile-card dd { margin: 0; font-family: var(--mono); font-size: 18px; font-weight: 900; }
.profiles > button { margin-top: 28px; }

.trust-lobby { width: min(1240px, calc(100% - 48px)); margin: 0 auto; padding: 88px 0; }
.trust-lobby > header dl { display: flex; margin: 0; border: 1px solid var(--line); }
.trust-lobby > header dl div { min-width: 100px; padding: 14px; border-right: 1px solid var(--line); }
.trust-lobby > header dl div:last-child { border-right: 0; }
.trust-lobby dt { color: var(--muted); font-size: 9px; }
.trust-lobby dd { margin: 4px 0 0; color: var(--acid); font-family: var(--mono); font-size: 22px; }
.trust-lobby ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.trust-lobby li { min-height: 76px; display: grid; grid-template-columns: 110px 1fr 1fr auto; align-items: center; gap: 18px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.trust-lobby li strong { color: var(--white); }
.trust-lobby li a { color: var(--acid); font-family: var(--mono); font-size: 10px; font-weight: 900; }
.trust-lobby .lobby-empty { display: flex; justify-content: center; text-align: center; }

footer { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 4.5%; border-top: 1px solid var(--line); color: var(--muted); font-family: var(--mono); font-size: 10px; }
footer a:first-child { color: var(--white); font-weight: 900; text-decoration: none; }

@media (max-width: 1000px) {
  .trust-hero h1 { font-size: 52px; }
  .trust-hero__copy { grid-column: 1 / span 7; }
  .trust-create { grid-column: 8 / -1; }
  .join-stage { grid-template-columns: 1fr; }
  .join-stage form { grid-template-columns: 1fr 1fr; }
  .join-stage button { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .trust-header { height: 58px; grid-template-columns: 1fr auto; padding: 0 16px; }
  .trust-header > a:nth-child(2) { display: none; }
  .brand span { width: 34px; height: 34px; }
  .trust-hero { height: auto; max-height: none; min-height: calc(100svh - 58px); display: block; padding: 48px 18px 34px; }
  .trust-hero__image { background-position: 68% center; opacity: .55; }
  .trust-hero h1 { font-size: 43px; }
  .trust-hero__copy > p:last-of-type { font-size: 15px; }
  .payoff { grid-template-columns: 78px 1fr 1fr; }
  .trust-create { margin-top: 34px; padding: 22px; }
  .trust-match { padding: 62px 16px; }
  .match-meta, .history > header, .profiles > header, .trust-lobby > header, .move-stage__heading { align-items: flex-start; flex-direction: column; }
  .match-meta h2, .history h2, .profiles h2, .trust-lobby h2, .join-stage h2, .move-stage h2, .spectator-stage h2 { font-size: 32px; }
  .match-meta > div:last-child { justify-items: start; }
  .scoreboard { grid-template-columns: 1fr 64px 1fr; min-height: 180px; }
  .scoreboard article { padding: 24px 14px; }
  .scoreboard article strong { max-width: 100%; font-size: 17px; }
  .scoreboard article b { position: static; transform: none; font-size: 34px; }
  .scoreboard article:last-child b { position: static; }
  .round-clock strong { font-size: 38px; }
  .join-stage, .move-stage, .spectator-stage { padding: 24px 18px; }
  .join-stage form { grid-template-columns: 1fr; }
  .join-stage button { grid-column: 1; }
  .move-choice { grid-template-columns: 1fr; }
  .move-choice span { min-height: 96px; grid-template-columns: 48px 1fr auto; border-right: 0; border-bottom: 1px solid var(--ink); padding: 18px; }
  .move-choice label:last-child span { border-bottom: 0; }
  .move-choice span b { width: 40px; height: 40px; }
  .move-stage form > button { width: 100%; }
  .history li { grid-template-columns: 48px 1fr 60px; padding: 14px 0; }
  .history li > :nth-child(4), .history li > :nth-child(5) { grid-column: 2 / -1; }
  .profiles > div { grid-template-columns: 1fr; }
  .profile-card { border-right: 0; border-bottom: 1px solid var(--line-light); }
  .trust-lobby { width: calc(100% - 32px); padding: 64px 0; }
  .trust-lobby > header dl { width: 100%; }
  .trust-lobby > header dl div { min-width: 0; flex: 1; }
  .trust-lobby li { grid-template-columns: 80px 1fr auto; padding: 14px 0; }
  .trust-lobby li > :nth-child(3) { display: none; }
  footer { align-items: flex-start; flex-direction: column; padding: 28px 20px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }