/* The AI agents preview (/ai-agents). Plain CSS against the design system's custom properties
 * (client/design/starcraft.css), loaded only by the arena layout. Every panel that shows
 * placeholder data carries .arena-mock, which draws the "Mockup" tab on it. */

.arena-page { background: var(--sc-void); }
.arena-hero-copy { max-width: none; }
.arena-hero-copy h1, .arena-hero-copy .page-lead { max-width: 46rem; }
.arena-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.arena-notice {
  margin: 0; max-width: 46rem; padding: 10px 14px; border: 1px dashed var(--sc-gold-edge);
  background: var(--sc-gold-well); color: var(--sc-ink); font-size: 14px;
}
.arena-notice b { color: var(--sc-gold); }

.arena-band { padding: 56px 0; border-top: 1px solid var(--sc-edge); }
.arena-band:nth-of-type(even) { background: var(--sc-bg); }
.arena-band > .sc-container { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
.arena-split > *, .arena-mock { min-width: 0; }
.arena-head { display: grid; gap: 10px; max-width: 46rem; }
.arena-head > * { margin: 0; }
.arena-head p { color: var(--sc-muted); }
@media (max-width: 640px) { .arena-band { padding: 48px 0; } }

.arena-grid { display: grid; gap: 1px; background: var(--sc-edge); border: 1px solid var(--sc-edge); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.arena-grid > * { background: var(--sc-panel); padding: 22px; display: grid; gap: 8px; align-content: start; }
.arena-grid h3 { margin: 0; font-size: 16px; color: var(--sc-gold); }
.arena-grid p { margin: 0; color: var(--sc-muted); font-size: 15px; }
.arena-grid .arena-num { font: 600 12px var(--sc-font-mono); color: var(--sc-ice); letter-spacing: .12em; }

/* the "Mockup" tab */
.arena-mock { position: relative; border: 1px solid var(--sc-edge-bright); background: var(--sc-panel); }
.arena-mock::before {
  content: "Mockup · placeholder data"; position: absolute; top: -1px; right: -1px; z-index: 2;
  padding: 3px 9px; background: var(--sc-gold); color: var(--sc-black);
  font: 600 10px var(--sc-font-mono); letter-spacing: .12em; text-transform: uppercase;
}

/* the match page */
.arena-match { display: grid; grid-template-columns: minmax(0, 1fr) 320px; }
.arena-screen { position: relative; min-height: 380px; overflow: hidden; background: var(--sc-black); border-right: 1px solid var(--sc-edge); }
.arena-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.arena-screen-top, .arena-screen-bottom { position: absolute; left: 0; right: 0; z-index: 1; display: flex; gap: 14px; align-items: center; padding: 10px 14px; font: 12px var(--sc-font-mono); color: var(--sc-ink); background: color-mix(in srgb, var(--sc-black) 72%, transparent); }
.arena-screen-top { top: 0; justify-content: space-between; }
.arena-screen-bottom { bottom: 0; }
.arena-seat { display: inline-flex; gap: 8px; align-items: center; }
.arena-seat::before { content: ""; width: 9px; height: 9px; background: var(--seat, var(--sc-ice)); }
.arena-scrub { flex: 1; height: 4px; background: var(--sc-edge); position: relative; }
.arena-scrub::after { content: ""; position: absolute; inset: 0 58% 0 0; background: var(--sc-gold); }
.arena-live { color: var(--sc-danger); }
.arena-rail { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; }
.arena-rail h3 { margin: 0; padding: 30px 14px 12px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--sc-muted); border-bottom: 1px solid var(--sc-edge); }
.arena-stream { margin: 0; padding: 0; list-style: none; display: grid; align-content: start; max-height: 330px; overflow: auto; }
.arena-stream li { padding: 10px 14px; border-bottom: 1px solid var(--sc-edge); border-left: 2px solid var(--seat, var(--sc-ice)); font-size: 13px; color: var(--sc-ink); display: grid; gap: 4px; }
.arena-stream time { font: 11px var(--sc-font-mono); color: var(--sc-muted); }
.arena-stream code { font: 11px var(--sc-font-mono); color: var(--sc-ice); overflow-wrap: anywhere; }
.arena-verify { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--sc-edge); font: 11px var(--sc-font-mono); color: var(--sc-success); }
.arena-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; background: var(--sc-edge); border-top: 1px solid var(--sc-edge); margin: 0; grid-column: 1 / -1; }
.arena-metrics div { background: var(--sc-panel); padding: 12px 14px; display: grid; gap: 4px; }
.arena-metrics dt { font: 10px var(--sc-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sc-muted); }
.arena-metrics dd { margin: 0; font: 600 18px var(--sc-font-display); color: var(--sc-gold); }
@media (max-width: 900px) { .arena-match { grid-template-columns: 1fr; } .arena-screen { border-right: 0; min-height: 240px; } }

/* the board */
.arena-mock .sc-table-scroll { margin: 0 14px 14px; }
.arena-kind { display: inline-block; padding: 2px 6px; border: 1px solid var(--sc-edge-bright); font: 10px var(--sc-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sc-ice); }
.arena-kind[data-kind="bot"] { color: var(--sc-muted); }
.arena-kind[data-kind="rl"] { color: var(--sc-success); }
.arena-kind[data-kind="human"] { color: var(--sc-gold); }
.arena-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--sc-edge); }
.arena-tabs span { padding: 4px 10px; border: 1px solid var(--sc-edge); font: 11px var(--sc-font-mono); color: var(--sc-muted); }
.arena-tabs span[aria-current] { border-color: var(--sc-gold-edge); color: var(--sc-gold); background: var(--sc-gold-well); }

/* code */
.arena-split { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; }
.arena-code { margin: 0; padding: 38px 18px 18px; overflow-x: auto; font: 13px/1.6 var(--sc-font-mono); color: var(--sc-ink); background: var(--sc-black); }
.arena-code .c { color: var(--sc-muted); }
.arena-code .k { color: var(--sc-gold); }
.arena-code .s { color: var(--sc-success); }

/* charts */
.arena-chart { padding: 38px 18px 14px; display: grid; gap: 10px; }
.arena-chart h3 { margin: 0; font-size: 15px; color: var(--sc-gold); }
.arena-chart p { margin: 0; font-size: 14px; color: var(--sc-muted); }
.arena-chart svg { width: 100%; height: auto; display: block; }
.arena-chart .axis { stroke: var(--sc-edge-bright); stroke-width: 1; }
.arena-chart .grid { stroke: var(--sc-edge); stroke-width: 1; stroke-dasharray: 2 4; }
.arena-chart text { fill: var(--sc-muted); font: 10px var(--sc-font-mono); }
.arena-chart .l1 { stroke: var(--sc-gold); } .arena-chart .l2 { stroke: var(--sc-ice); } .arena-chart .l3 { stroke: var(--sc-success); }
.arena-chart .line { fill: none; stroke-width: 2; }
.arena-chart .d1 { fill: var(--sc-gold); } .arena-chart .d2 { fill: var(--sc-ice); } .arena-chart .d3 { fill: var(--sc-success); } .arena-chart .d4 { fill: var(--sc-muted); }

/* the plan */
.arena-plan { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; background: var(--sc-edge); border: 1px solid var(--sc-edge); }
.arena-plan li { background: var(--sc-panel); padding: 20px 22px; display: grid; gap: 6px 24px; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: start; }
.arena-plan b { font: 600 12px var(--sc-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sc-ice); }
.arena-plan h3 { margin: 0 0 4px; font-size: 16px; color: var(--sc-ink); }
.arena-plan p { margin: 0; color: var(--sc-muted); font-size: 15px; }
.arena-status { font: 10px var(--sc-font-mono); letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--sc-edge-bright); color: var(--sc-muted); white-space: nowrap; }
.arena-status[data-state="now"] { color: var(--sc-gold); border-color: var(--sc-gold-edge); }
@media (max-width: 720px) { .arena-plan li { grid-template-columns: 1fr; } }

/* contact */
.arena-contact { border: 1px solid var(--sc-gold-edge); background: var(--sc-gold-well); padding: 32px; display: grid; gap: 16px; }
.arena-contact > * { margin: 0; }
.arena-contact .arena-mail { font: 600 clamp(20px, 3.4vw, 30px) var(--sc-font-display); color: var(--sc-gold); overflow-wrap: anywhere; }
.arena-asks { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.arena-asks a { display: grid; gap: 4px; height: 100%; padding: 16px; border: 1px solid var(--sc-edge-bright); background: var(--sc-panel); text-decoration: none; color: var(--sc-ink); }
.arena-asks a:hover { border-color: var(--sc-gold-edge); }
.arena-asks b { color: var(--sc-gold); }
.arena-asks span { color: var(--sc-muted); font-size: 14px; }
.arena-faq { display: grid; gap: 1px; background: var(--sc-edge); border: 1px solid var(--sc-edge); }
.arena-faq details { background: var(--sc-panel); padding: 16px 20px; }
.arena-faq summary { cursor: pointer; color: var(--sc-ink); font-weight: 600; }
.arena-faq p { margin: 10px 0 0; color: var(--sc-muted); max-width: 46rem; }

/* Where this fits: the prior work in five panels, each a list of name and one line. */
.arena-landscape { columns: 3 320px; column-gap: 14px; }
.arena-landscape > .panel { break-inside: avoid; margin: 0 0 14px; }
.arena-landscape h3 { margin: 0 0 12px !important; font-size: 15px; }
.arena-landscape dl { margin: 0; display: grid; }
.arena-landscape dl > div { padding: 9px 0; border-top: 1px solid color-mix(in srgb, var(--sc-edge) 70%, transparent); }
.arena-landscape dt { font: 600 14px var(--sc-font-display); color: var(--sc-ink); }
.arena-landscape dd { margin: 2px 0 0; font-size: 13px; line-height: 1.55; color: var(--sc-muted); }

/* The competitions: one panel each, status on top, then the facts as a ruled list. */
.arena-competitions { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); align-items: start; }
.arena-competitions .panel { display: grid; gap: 8px; align-content: start; }
.arena-competitions .arena-status { justify-self: start; margin: 0; }
.arena-competitions h3 { margin: 4px 0 0 !important; font-size: 17px; }
.arena-competitions .panel > p:not(.arena-status) { margin: 0; font-size: 14px; line-height: 1.6; color: var(--sc-muted); }
.arena-competitions dl { margin: 6px 0 0; display: grid; }
.arena-competitions dl > div { padding: 9px 0; border-top: 1px solid color-mix(in srgb, var(--sc-edge) 70%, transparent); }
.arena-competitions dt { font: 10px var(--sc-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sc-ice); }
.arena-competitions dd { margin: 3px 0 0; font-size: 13px; line-height: 1.55; color: var(--sc-ink); }
.arena-competitions-note { margin: 0; max-width: 60rem; font-size: 14px; color: var(--sc-muted); }