/* The Arena: challenge list and the find-it-fix-it game. Uses the site's theme tokens. */

/* --- list --- */
.arena-list { list-style: none; padding: 0; display: grid; gap: 14px; }
.arena-card { padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.arena-card.locked { opacity: .9; }
.arena-card-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.arena-num { font-family: ui-monospace, Consolas, monospace; color: var(--muted); }
.arena-title { font-weight: 700; font-size: 1.05rem; color: var(--text); text-decoration: none; }
a.arena-title:hover { color: var(--accent); }
.arena-badge { font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); }
.arena-badge.solved { color: var(--good); border-color: var(--good); }
.arena-badge.track { color: var(--accent); border-color: var(--accent); }
.arena-badge.lock { color: var(--warn); border-color: var(--warn); }
.arena-card-meta { display: flex; gap: 6px; margin: 8px 0; }
.arena-chip { font-size: .75rem; color: var(--muted); background: var(--surface-2); padding: 2px 8px; border-radius: 6px; }
.arena-card-summary { margin: 0; color: var(--text); }

/* --- game --- */
.arena-work { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
@media (max-width: 720px) { .arena-work { grid-template-columns: 1fr; } }
.arena-brief { margin-top: 12px; }
.arena-label { font-size: .8rem; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.arena-code {
  width: 100%; box-sizing: border-box; min-height: 16rem; resize: vertical; tab-size: 2;
  background: var(--code-bg); color: var(--code-text); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px; font: .9rem/1.5 ui-monospace, Consolas, monospace; white-space: pre; overflow: auto;
}
.arena-code:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.arena-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.arena-hint { margin-top: 10px; font-size: .92rem; }

.arena-results { align-content: start; }
.arena-verdict {
  padding: 12px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface);
  min-height: 1.5rem;
}
.arena-verdict[data-state="solved"] { border-color: var(--good); background: var(--good-soft); color: var(--text); }
.arena-verdict[data-state="failed"], .arena-verdict[data-state="error"] { border-color: var(--warn); background: var(--warn-soft); color: var(--text); }
.arena-verdict[data-state="running"] { color: var(--muted); }

.arena-case-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.arena-case-list li { padding: 8px 12px; border-radius: 8px; background: var(--surface-2); display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; }
.case-mark { font-weight: 700; }
.arena-case-list li.pass .case-mark { color: var(--good); }
.arena-case-list li.fail .case-mark { color: var(--bad); }
.case-reason { grid-column: 2; font-size: .85rem; color: var(--muted); margin-top: 2px; }

.arena-sandbox { width: 0; height: 0; border: 0; }
.arena-upsell { margin-top: 16px; }

/* Forensics findings */
.arena-questions { padding-left: 1.4rem; display: grid; gap: .9rem; }
.arena-questions label { display: block; margin-bottom: .3rem; }
.arena-questions input { width: min(100%, 28rem); font: inherit; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg); color: var(--text); }
.arena-mark { margin-left: .5rem; font-weight: 700; }
.arena-mark.pass { color: var(--good); }
.arena-mark.fail { color: var(--bad); }
.arena-forensics .arena-verdict { margin-top: 1rem; }

/* Bug hunt (discipline "debug") */
.bug-meta { margin-top: .8rem; font-size: .9rem; }
.bug-story { margin: 1rem 0; border-left: 4px solid var(--good); }
.bug-story h2 { margin-top: 0; }
.bug-form textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg); color: var(--text); }
.bug-fix-box { margin: 0 0 1rem; }
.bug-fix-box summary { cursor: pointer; font-weight: 600; }
.bug-fix-box textarea { font-family: ui-monospace, Consolas, monospace; }

/* The Raven's Market (arena/market.py) */
.market-mix { width: 100%; border-collapse: collapse; }
.market-mix th, .market-mix td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.market-mix input[type=number] { width: 4.5rem; font: inherit; padding: 6px 8px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--bg); color: var(--text); }
.market-chart { width: 100%; height: auto; background: var(--surface-2); border-radius: 8px; }
.market-chart polyline { fill: none; stroke-width: 2.5; stroke-linejoin: round; }
.market-chart .line-mine { stroke: var(--accent); stroke-width: 3.5; }
.market-chart .line-index { stroke: var(--good); }
.market-chart .line-savings { stroke: var(--muted); stroke-dasharray: 6 4; }
.market-key span { margin-right: 12px; font-size: .9rem; }
.key-mine { color: var(--accent); }
.key-index { color: var(--good); }
.key-savings { color: var(--muted); }
.market-result { margin: 1rem 0; }
@media (max-width: 600px) { .market-mix td.muted { display: none; } }