:root {
  color-scheme:dark;
  --bg:#11171c;
  --panel:#1a2229;
  --line:#303c44;
  --text:#e7ede4;
  --muted:#91a09c;
  --green:#bbf06c;
  --gold:#edcc7f;
  --red:#ed9591;
  --mono:ui-monospace,SFMono-Regular,Consolas,monospace
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,sans-serif;
  font-size:14px
}
button,input,select {
  font:inherit
}
a {
  color:inherit;
  text-decoration:none
}
button {
  cursor:pointer;
  border:1px solid var(--line);
  background:#222d34;
  color:var(--text);
  padding:11px 15px;
  border-radius:4px
}
button:hover {
  background:#334049
}
button:disabled {
  opacity:.4;
  cursor:default
}
.primary {
  background:var(--green);
  color:#18221a;
  border-color:var(--green);
  font-weight:750
}
.primary:hover {
  background:#d0ff87
}
input,select {
  background:#111a20;
  border:1px solid var(--line);
  color:var(--text);
  border-radius:3px;
  padding:9px;
  min-width:0
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:4px
}
.topbar {
  max-width:1320px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:25px 32px;
  border-bottom:1px solid var(--line);
  gap:20px
}
.brand {
  font:bold 20px var(--mono);
  letter-spacing:2px
}
.brand span {
  color:var(--green)
}
.return-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  padding:9px 12px;
  border:1px solid var(--green);
  border-radius:4px;
  background:var(--green);
  color:#18221a;
  font:750 10px/1 var(--mono);
  letter-spacing:.04em
}
.return-link:hover {
  background:#d0ff87;
  color:#18221a
}
.footer-links {
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap
}
.footer-links a {
  color:var(--green);
  white-space:nowrap
}
.footer-links a:hover {
  color:#d0ff87
}
.topbar nav {
  display:flex;
  gap:26px;
  color:var(--muted)
}
.topbar nav a:hover {
  color:var(--green)
}
.chip {
  font:10px var(--mono);
  color:var(--green);
  letter-spacing:1px;
  background:#273527;
  padding:9px 12px;
  white-space:nowrap
}
main {
  max-width:1320px;
  margin:auto;
  padding:0 32px
}
.intro {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:52px 0 36px;
  gap:24px
}
.eyebrow {
  font:10px var(--mono);
  letter-spacing:2px;
  color:var(--green);
  margin:0 0 14px
}
h1 {
  font-size:clamp(36px,4.8vw,64px);
  letter-spacing:-2.8px;
  line-height:1.07;
  margin:0 0 21px;
  font-weight:800
}
h1 span {
  color:var(--gold)
}
.lede {
  color:var(--muted);
  font-size:17px;
  line-height:1.7;
  margin:0
}
.intro-note {
  text-align:right;
  padding-right:16px
}
.intro-note>span {
  font-size:60px;
  color:var(--green);
  text-shadow:4px 4px #526b39
}
.intro-note p {
  font:16px/1.7 var(--mono);
  color:var(--gold)
}
.intro-note small {
  color:var(--muted);
  line-height:1.8
}
.metrics {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);
  background:var(--panel);
  margin-bottom:28px
}
.metrics>div {
  padding:23px 25px;
  border-right:1px solid var(--line)
}
.metrics>div:last-child {
  border:0
}
.metrics span {
  display:block;
  font:10px var(--mono);
  letter-spacing:1.2px;
  color:var(--muted);
  margin-bottom:10px
}
.metrics strong {
  font:28px var(--mono)
}
.arena-layout,.lower-layout {
  display:grid;
  grid-template-columns:minmax(0,2.25fr) minmax(280px,1fr);
  gap:20px;
  margin-bottom:24px
}
.arena-panel,.panel,.match-panel {
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:5px;
  overflow:hidden
}
.panel,.match-panel {
  padding:24px
}
.panel-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px
}
.panel-heading .eyebrow {
  margin-bottom:8px
}
.arena-panel .panel-heading {
  padding:22px 25px
}
h2 {
  font-size:21px;
  letter-spacing:-.5px;
  margin:0 0 12px
}
.panel-heading h2 {
  margin:0
}
.field {
  position:relative;
  min-height:350px;
  background-color:#263b35;
  background-image:linear-gradient(90deg,#2c433b 1px,transparent 1px),linear-gradient(#2c433b 1px,transparent 1px);
  background-size:24px 24px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:18px 28px 40px
}
.field:before {
  content:'';
  position:absolute;
  inset:18px;
  border:2px dashed #4e685444;
  pointer-events:none
}
.field-line {
  position:absolute;
  left:50%;
  top:0;
  height:100%;
  border-left:2px dashed #6c846633
}
.field-center {
  position:absolute;
  border:2px solid #6c846644;
  border-radius:50%;
  height:120px;
  width:120px;
  top:calc(50% - 60px);
  left:calc(50% - 60px);
  display:grid;
  place-items:center;
  font:bold 28px var(--mono);
  color:#7b976533
}
.sprite-field {
  position:relative;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:9px;
  z-index:1
}
.sprite-token {
  display:flex;
  flex-direction:column;
  align-items:center;
  background:none;
  border:0;
  padding:6px 2px;
  min-height:68px
}
.sprite-token:hover,.sprite-token.selected {
  background:#93b07918;
  outline:1px solid #94b37755
}
.sprite-token img {
  width:48px;
  height:48px;
  image-rendering:pixelated;
  filter:drop-shadow(0 5px 0 #0f261d88);
  object-fit:contain
}
.sprite-token span {
  font:9px var(--mono);
  color:#b5c2a9;
  margin-top:6px
}
.sprite-token.out {
  opacity:.3;
  filter:grayscale(1)
}
.sprite-token.fighting img {
  animation:hop .35s steps(2,end) infinite
}
.sprite-token.fighting span {
  color:var(--gold)
}
.field-caption {
  position:absolute;
  bottom:10px;
  left:0;
  right:0;
  text-align:center;
  font:9px var(--mono);
  letter-spacing:2px;
  color:#8da387
}
.arena-bottom {
  display:flex;
  justify-content:space-between;
  padding:14px 20px;
  font:10px/1.5 var(--mono);
  color:var(--muted);
  gap:18px
}
#seed-label {
  white-space:nowrap
}
.match-panel h2 {
  font-size:19px
}
.duel {
  display:flex;
  align-items:center;
  justify-content:space-around;
  gap:12px;
  min-height:150px;
  margin:8px 0;
  font:12px var(--mono);
  color:var(--muted)
}
.ttt-board {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4px;
  width:min(180px,100%);
  margin:0 auto 12px;
  border:2px solid #667c63;
  padding:4px;
  background:#111a20;
}
.ttt-board[hidden] { display:none; }
.ttt-board span {
  display:grid;
  place-items:center;
  aspect-ratio:1;
  background:#27392d;
  color:var(--gold);
  font:bold 24px var(--mono);
}
.duel>b {
  font-size:60px;
  color:#3b4a51
}
.duelist {
  text-align:center;
  min-width:70px
}
.duelist img {
  display:block;
  width:64px;
  height:64px;
  margin:0 auto 8px;
  image-rendering:pixelated
}
.duelist b {
  display:block;
  font-size:15px;
  color:var(--gold);
  margin-top:7px
}
.phases {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:3px
}
.phases span {
  font:8px var(--mono);
  background:#111a20;
  text-align:center;
  padding:9px 1px;
  color:#7e8d91
}
.phases span.active {
  background:#394b31;
  color:var(--green)
}
#match-result {
  min-height:42px;
  font-size:12px;
  line-height:1.6;
  color:var(--gold)
}
.play-controls {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px
}
.play-controls .primary {
  grid-column:1/-1
}
.play-controls button {
  font-size:12px;
  padding:11px 7px
}
.speed-label {
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:var(--muted);
  font-size:11px;
  margin-top:15px
}
.speed-label select {
  padding:5px;
  font-size:11px
}
#notice {
  font:10px/1.6 var(--mono);
  color:var(--muted);
  margin:12px 0 0
}
.sort-label {
  font-size:11px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:6px
}
.sort-label select {
  padding:6px;
  font-size:11px
}
.table-scroll {
  overflow:auto;
  margin-top:20px;
  max-height:506px
}
table {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  white-space:nowrap;
  font:11px var(--mono)
}
th {
  font-size:8px;
  color:var(--muted);
  letter-spacing:.8px;
  padding:10px;
  background:#1a2229;
  position:sticky;
  top:0
}
td {
  border-top:1px solid var(--line);
  padding:11px 10px
}
td:first-child button {
  border:none;
  background:transparent;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0;
  text-align:left;
  font:11px var(--mono)
}
.table-agent {
  height:28px;
  width:28px;
  image-rendering:pixelated
}
.rank {
  color:var(--muted);
  font-size:10px;
  width:14px
}
.positive {
  color:var(--green)
}
.negative {
  color:var(--red)
}
.muted {
  color:var(--muted);
  font-size:12px;
  line-height:1.7
}
.tiny {
  font-size:9px;
  color:var(--muted);
  display:block;
  margin-top:5px
}
.agent-head {
  display:flex;
  align-items:center;
  gap:18px;
  margin:15px 0 20px
}
.agent-head img {
  height:80px;
  width:80px;
  image-rendering:pixelated
}
.agent-head h2 {
  font-size:23px;
  margin-bottom:5px
}
.detail-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin:20px 0
}
.detail-grid dt {
  font:9px var(--mono);
  color:var(--muted);
  margin-bottom:7px
}
.detail-grid dd {
  margin:0;
  font:15px var(--mono)
}
h3 {
  font-size:13px;
  margin:23px 0 10px
}
.memory-item {
  font:10px/1.7 var(--mono);
  color:var(--muted);
  padding:6px 0;
  border-top:1px solid var(--line)
}
#history {
  margin-bottom:24px
}
.button-row {
  display:flex;
  gap:8px
}
.button-row button {
  font-size:11px
}
.history-list {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  max-height:300px;
  overflow:auto
}
.history-card {
  text-align:left;
  font:11px var(--mono);
  padding:13px
}
.history-card strong {
  display:block;
  color:var(--gold);
  margin:8px 0;
  font-size:11px
}
.empty {
  color:var(--muted);
  padding:20px;
  font-size:12px;
  grid-column:1/-1
}
.proof {
  margin-top:15px;
  background:#111a20;
  padding:16px;
  font:11px/1.8 var(--mono);
  overflow-wrap:anywhere
}
.proof p {
  margin:5px 0
}
.proof summary {
  cursor:pointer;
  color:var(--green)
}
.proof pre {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-size:9px;
  color:var(--muted)
}
.settings-layout {
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:20px;
  margin-bottom:38px
}
.settings-layout h2 {
  margin-bottom:24px
}
.settings-form {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}
.settings-form label {
  font-size:11px;
  color:var(--muted);
  display:grid;
  gap:7px
}
.settings-form button {
  grid-column:1/-1
}
.rules-note {
  border-top:1px solid var(--line);
  margin-top:20px
}
.rules-note p {
  color:var(--muted);
  font-size:12px;
  line-height:1.8
}
.how-it-works {
  border-top:1px solid var(--line);
  padding:30px 0 42px
}
.how-it-works>div {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:35px
}
.how-it-works article>span {
  font:10px var(--mono);
  color:var(--gold)
}
.how-it-works h3 {
  font-size:18px
}
.how-it-works article p {
  font-size:13px;
  line-height:1.7;
  color:var(--muted)
}
footer {
  border-top:1px solid var(--line);
  max-width:1320px;
  margin:auto;
  padding:22px 32px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font:9px/1.7 var(--mono);
  color:var(--muted)
}
@keyframes hop {
  50% {
  transform:translateY(-7px)
}

}
@media(max-width:1000px) {
  .arena-layout,.lower-layout {
  grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr)
}
.history-list {
  grid-template-columns:repeat(3,1fr)
}
.field {
  padding-left:15px;
  padding-right:15px
}
.metrics strong {
  font-size:22px
}
.metrics>div {
  padding:18px
}

}
@media(max-width:760px) {
  main {
  padding:0 16px
}
.topbar {
  padding:15px 16px;
  flex-wrap:wrap
}
.topbar nav {
  order:3;
  width:100%;
  justify-content:space-between;
  font-size:12px;
  gap:12px
}
.brand {
  font-size:15px
}
.intro {
  padding:34px 0
}
.intro-note {
  display:none
}
h1 {
  letter-spacing:-1.5px
}
.metrics {
  grid-template-columns:1fr 1fr
}
.metrics>div:nth-child(2) {
  border-right:0
}
.metrics>div:nth-child(-n+2) {
  border-bottom:1px solid var(--line)
}
.arena-layout,.lower-layout,.settings-layout {
  grid-template-columns:1fr
}
.field {
  min-height:350px
}
.panel,.match-panel {
  padding:18px
}
.history-list {
  grid-template-columns:1fr 1fr
}
.panel-heading {
  flex-wrap:wrap
}
.how-it-works>div {
  grid-template-columns:1fr;
  gap:15px
}
footer {
  padding:20px 16px;
  flex-direction:column
}
.table-scroll {
  max-height:390px
}

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

.sprite-token.fighting img {
  animation:none
}
}

[hidden]{display:none!important}
.shared-room .play-controls,.shared-room .speed-label,.shared-room #new-run,.shared-room #treasury-controls{display:none!important}