/* Extracted from pages/injection-arena.html */
.arena-box { max-width: 960px; margin: 0 auto; padding: 2rem; }

.arena-header { text-align: center; margin-bottom: 2rem; }
.arena-header h1 { font-size: 2rem; margin-bottom: 0.5rem; }
.arena-header .subtitle { color: var(--text-dim); font-size: 1.05rem; }

/* Three-agent explainer */
.agents-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; margin: 1.5rem 0; }
.agent-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 1rem; text-align: center; }
.agent-card h3 { font-family: var(--font-mono); font-size: 0.9rem; margin-bottom: 0.5rem; }
.agent-card.grounded { border-color: var(--green); }
.agent-card.grounded h3 { color: var(--green); }
.agent-card.ungrounded { border-color: var(--red); }
.agent-card.ungrounded h3 { color: var(--red); }
.agent-card.judge { border-color: var(--accent); }
.agent-card.judge h3 { color: var(--accent); }
.agent-card p { color: var(--text-dim); font-size: 0.8rem; line-height: 1.4; }

/* Attack gallery */
.attack-gallery { margin: 1.5rem 0; }
.attack-gallery h3 { font-size: 0.95rem; color: var(--text-dim); margin-bottom: 0.75rem; }
.attack-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.attack-pill {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px;
    padding: 0.4rem 0.9rem; font-size: 0.8rem; color: var(--text); cursor: pointer;
    font-family: var(--font-mono); transition: border-color 0.2s;
}
.attack-pill:hover { border-color: var(--red); color: var(--red); }

/* Input area */
.arena-input-area { margin: 1.5rem 0; }
textarea#arena-input {
    width: 100%; min-height: 120px; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 8px; color: var(--text); padding: 1rem; font-family: var(--font-sans);
    font-size: 0.95rem; line-height: 1.5; resize: vertical;
}
textarea#arena-input:focus { outline: none; border-color: var(--red); }
.btn-fire {
    background: var(--red); color: white; border: none; border-radius: 6px;
    padding: 0.75rem 2rem; font-size: 1rem; cursor: pointer; font-weight: 700;
    font-family: var(--font-mono); margin-top: 0.75rem; transition: opacity 0.2s;
}
.btn-fire:hover { opacity: 0.85; }
.btn-fire:disabled { opacity: 0.4; cursor: not-allowed; }

/* Results split */
.arena-results { display: none; margin: 2rem 0; }
.arena-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.arena-col {
    background: var(--bg-card); border-radius: 8px; padding: 1.25rem;
    border: 2px solid var(--border); min-height: 150px;
}
.arena-col h3 { font-family: var(--font-mono); font-size: 0.85rem; margin-bottom: 0.75rem; }
.arena-col.grounded { border-color: var(--green); }
.arena-col.grounded h3 { color: var(--green); }
.arena-col.ungrounded { border-color: var(--red); }
.arena-col.ungrounded h3 { color: var(--red); }
.arena-col .response-text { font-size: 0.9rem; line-height: 1.6; white-space: pre-wrap; }
.arena-col .loading { color: var(--text-dim); font-style: italic; }

/* Judge panel */
.judge-panel {
    background: var(--bg-card); border: 2px solid var(--accent); border-radius: 8px;
    padding: 1.25rem; margin-top: 1rem;
}
.judge-panel h3 { color: var(--accent); font-family: var(--font-mono); font-size: 0.85rem; margin-bottom: 0.75rem; }
.judge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.judge-side h4 { font-family: var(--font-mono); font-size: 0.8rem; margin-bottom: 0.5rem; }
.judge-side.grounded h4 { color: var(--green); }
.judge-side.ungrounded h4 { color: var(--red); }
.drift-scores { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.drift-badge {
    font-family: var(--font-mono); font-size: 0.8rem; padding: 0.25rem 0.6rem;
    border-radius: 4px; background: var(--bg);
}
.drift-badge.clean { color: var(--green); border: 1px solid var(--green); }
.drift-badge.warn { color: var(--orange); border: 1px solid var(--orange); }
.drift-badge.fail { color: var(--red); border: 1px solid var(--red); }
.judge-summary {
    margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border);
    font-size: 0.85rem; color: var(--text-dim); line-height: 1.5;
}
.judge-verdict {
    font-family: var(--font-mono); font-weight: 700; font-size: 1rem;
    margin-top: 0.75rem; text-align: center; padding: 0.5rem;
    border-radius: 6px;
}
.verdict-held { color: var(--green); background: rgba(61,220,132,0.1); border: 1px solid var(--green); }
.verdict-breached { color: var(--red); background: rgba(255,68,68,0.1); border: 1px solid var(--red); }

/* Stats */
.arena-stats {
    display: flex; gap: 2rem; justify-content: center; margin: 1.5rem 0;
    font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-dim);
}
.arena-stats .stat-val { font-size: 1.3rem; font-weight: 700; }
.arena-stats .stat-val.green { color: var(--green); }
.arena-stats .stat-val.red { color: var(--red); }

/* Mode badges (DEMO vs LIVE) */
.mode-badge {
    display: inline-block; font-family: var(--font-mono); font-size: 0.65rem;
    font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 3px;
    margin-left: 0.5rem; vertical-align: middle; text-transform: uppercase;
    letter-spacing: 0.05em;
}
.mode-badge.demo { color: var(--text-dim); border: 1px solid var(--border); background: var(--bg); }
.mode-badge.live { color: var(--green); border: 1px solid var(--green); background: rgba(61,220,132,0.1); }

/* Auth gate CTA */
.arena-auth-gate {
    background: var(--bg-card); border: 1px solid var(--accent); border-radius: 8px;
    padding: 1.25rem; text-align: center; margin: 1rem 0;
}
.arena-auth-gate p { margin: 0; }
.arena-auth-gate .btn-connect {
    background: var(--accent); color: white; border: none; border-radius: 6px;
    padding: 0.6rem 1.5rem; font-size: 0.9rem; cursor: pointer; font-weight: 700;
    font-family: var(--font-mono); margin-top: 0.75rem; transition: opacity 0.2s;
}
.arena-auth-gate .btn-connect:hover { opacity: 0.85; }

/* Credit badge */
.arena-credit-line {
    text-align: center; font-family: var(--font-mono); font-size: 0.8rem;
    color: var(--text-dim); margin: 0.5rem 0;
}

/* Mobile */
@media (max-width: 768px) {
    .agents-row { grid-template-columns: 1fr; }
    .arena-split { grid-template-columns: 1fr; }
    .judge-grid { grid-template-columns: 1fr; }
}