/* Agentness Arena — visual-only game; only meta-controls carry text/icons. */
* { box-sizing: border-box; }
html, body {
  margin: 0; background: #0e0f13; color: #d8dae0;
  font: 14px/1.4 system-ui, sans-serif;
}
#app { max-width: 1100px; margin: 0 auto; padding: 14px; }

#bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.brand { font-size: 18px; font-weight: 600; letter-spacing: .3px; }
.controls { display: flex; align-items: center; gap: 8px; }
.ctl { display: flex; align-items: center; gap: 4px; font-size: 16px; }
select {
  background: #1a1c22; color: #d8dae0; border: 1px solid #333;
  border-radius: 6px; padding: 4px 6px; font-size: 13px;
}
#startBtn {
  background: #2a6df4; color: #fff; border: 0; border-radius: 6px;
  width: 34px; height: 30px; font-size: 15px; cursor: pointer;
}
#startBtn:hover { background: #3f7df6; }

/* rule setup row (below the Player chooser) */
#setupBar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 10px 0; padding: 8px 12px; border-radius: 8px;
  background: #14161c; border: 1px solid #232733;
}
.setupLabel { font-size: 12px; color: #9aa0ac; font-weight: 600; }

/* player chooser: human vs AI agent */
#playerMode {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 12px 0; padding: 8px 12px; border-radius: 8px;
  background: #14161c; border: 1px solid #232733;
}
.pmLabel { font-size: 12px; color: #9aa0ac; font-weight: 600; }
.pmOpt {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: 13px; color: #c7cad2; padding: 4px 10px;
  border: 1px solid #2a2f3a; border-radius: 999px; background: #1a1c22;
  user-select: none;
}
.pmOpt:hover { border-color: #3a6df4; }
.pmOpt:has(input:checked) { border-color: #2a6df4; background: #1f2a44; color: #fff; }
.pmOpt input { accent-color: #2a6df4; }
.pmHint { font-size: 11.5px; color: #8b93a3; margin-left: auto; }
/* WHO-plays gate: hide the LLM chat panel unless the AI agent is chosen. */
#app[data-mode="human"] #llmPanel { display: none; }

#steps { display: flex; gap: 8px; margin: 12px 0; }
.step {
  flex: 1; text-align: center; padding: 6px; border-radius: 6px;
  background: #16181e; color: #777; font-size: 12px; border: 1px solid #222;
}
.step.on { background: #1f2a44; color: #cfe0ff; border-color: #2a6df4; }
.step.done { color: #6fbf73; }

/* always-visible per-stage instruction banner */
#stageGuide {
  margin: 10px 0; padding: 10px 14px; border-radius: 8px;
  background: #14161c; border: 1px solid #232733;
  border-left: 4px solid #3a4150;     /* accent recoloured per stage below */
}
.sgHead { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sgTag {
  font-size: 11px; font-weight: 700; letter-spacing: .4px;
  padding: 2px 7px; border-radius: 999px;
  background: #232733; color: #aab2c2;
}
.sgTitle { font-size: 14px; color: #eef1f6; }
.sgBody { margin: 6px 0 0; font-size: 12.5px; line-height: 1.55; color: #b9c0cc; }
.sgBody b { color: #e7ebf2; }
/* stage-specific accent + tag colour (mirrors the #steps highlight palette) */
#stageGuide[data-stage="idle"]   { border-left-color: #3a4150; }
#stageGuide[data-stage="memory"] { border-left-color: #2a6df4; }
#stageGuide[data-stage="memory"] .sgTag { background: #1f2a44; color: #cfe0ff; }
#stageGuide[data-stage="live"]   { border-left-color: #c9a23a; }
#stageGuide[data-stage="live"]   .sgTag { background: #2e2818; color: #f0d98a; }
#stageGuide[data-stage="report"] { border-left-color: #6fbf73; }
#stageGuide[data-stage="report"] .sgTag { background: #1d2a1e; color: #a8e0ab; }

/* collapsible reference toggles row (legend + rule info) */
#toggles { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
#legend > summary {
  list-style: none; cursor: pointer; display: inline-block;
  background: #1a1c22; color: #c7cad2; border: 1px solid #2a2f3a;
  border-radius: 6px; padding: 5px 12px; font-size: 12px;
}
#legend > summary::-webkit-details-marker { display: none; }
#legend > summary:hover { border-color: #3a6df4; color: #fff; }
#legend[open] > summary { border-color: #3a6df4; color: #fff; margin-bottom: 8px; }
.legendGrid {
  border: 1px solid #252932; border-radius: 8px; background: #0f1117;
  padding: 10px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;
}
.lgItem { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: #b9c0cc; }
.lgItem b { color: #e7ebf2; }
.lgItem em { color: #cfe0ff; font-style: normal; }
.lgSw {
  flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px;
  border-radius: 4px; border: 1px solid #2a2f3a; background: #222;
}
.lgSw.lgTok { background: radial-gradient(circle, #aab4c4 2px, rgba(150,170,200,0.15) 3px); }
.lgSw.lgSacred {
  background: repeating-linear-gradient(45deg, #5a4fb0 0 1.5px, #15161b 1.5px 5px);
}
.lgSw.lgZone { background: #15161b; border: 2px dashed #3fa7ff; }
.lgSw.lgNet { background: linear-gradient(90deg, #7fce97 0 58%, #e0594f 58% 100%); }
.lgHead {
  font-size: 11px; font-weight: 600; color: #9aa0ac;
  margin-top: 4px; padding-top: 8px; border-top: 1px solid #252932;
}
.lgSw.lgViolate { background: #15161b; border: 2px solid #ff5050; }
.lgSw.lgPred {
  background: #15161b;
  border: 2px solid #6fbf73; box-shadow: inset 0 0 0 1px #888;
}
@media (max-width: 640px) { .legendGrid { grid-template-columns: 1fr; } }

main { display: flex; gap: 14px; align-items: flex-start; }
canvas {
  background: #15161b; border-radius: 10px; display: block;
  image-rendering: crisp-edges;
}
#board { cursor: pointer; }
#side { flex: 0 0 auto; }   /* HUD bars panel (the canvas carries its own box) */

/* dedicated info column to the RIGHT of the HUD bars: legend + report explainer,
   each a compact toggle. Fixed width so it doesn't stretch the board row. */
#infoPanel { flex: 0 0 250px; display: flex; flex-direction: column; gap: 8px; }
#infoPanel > details { width: 100%; }
#infoPanel > details > summary {
  display: block; width: 100%; text-align: center;
  list-style: none; cursor: pointer;
  background: #1a1c22; color: #c7cad2; border: 1px solid #2a2f3a;
  border-radius: 6px; padding: 6px 10px; font-size: 12px;
}
#infoPanel > details > summary::-webkit-details-marker { display: none; }
#infoPanel > details > summary:hover { border-color: #3a6df4; color: #fff; }
#infoPanel > details[open] > summary { border-color: #3a6df4; color: #fff; margin-bottom: 8px; }
/* both explainers render single-column to fit the narrow column */
#infoPanel .legendGrid,
#infoPanel .rpGrid { grid-template-columns: 1fr; }
#infoPanel .legendGrid { gap: 7px; padding: 9px 10px; }
#infoPanel .lgItem,
#infoPanel .rpItem { font-size: 11.5px; }
#infoPanel #reportInfoBody { padding: 10px 11px; }

#hint {
  margin-top: 12px; min-height: 20px; color: #9aa0ac; font-size: 13px;
}

/* rule & settings explainer (toggle) */
#ruleInfo { margin-top: 10px; }
#ruleInfoToggle {
  background: #1a1c22; color: #c7cad2; border: 1px solid #2a2f3a;
  border-radius: 6px; padding: 5px 12px; cursor: pointer; font-size: 12px;
}
#ruleInfoToggle:hover { border-color: #3a6df4; color: #fff; }
#ruleInfoPanel {
  margin-top: 8px; border: 1px solid #252932; border-radius: 8px;
  background: #0f1117; padding: 12px 14px; font-size: 12.5px; color: #c7cad2;
}
.riH { margin: 12px 0 6px; font-size: 12px; color: #9aa0ac; font-weight: 600; }
.riH:first-child { margin-top: 0; }
.riMatrix { width: 100%; border-collapse: collapse; }
.riMatrix th, .riMatrix td {
  border-bottom: 1px solid #20242d; padding: 5px 8px; text-align: left; vertical-align: top;
}
.riMatrix th { color: #7f8796; font-weight: 600; font-size: 11px; }
.riMatrix .riGlyph { font-size: 15px; color: #d8dae0; text-align: center; }
.riMatrix code, .riReveal code, .riSettings code { color: #cfe0ff; }
.riNote { margin: 8px 0 0; color: #8b93a3; font-size: 11.5px; line-height: 1.5; }
.riSettings { display: grid; gap: 5px; }
.riSettings .riK {
  display: inline-block; width: 44px; color: #7f8796; font-size: 11px;
}
.riSettings .riV { color: #d8dae0; }
.riReveal {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #14161c; border: 1px dashed #2a2f3a; border-radius: 6px; padding: 8px 10px;
}
.riReveal.riOpen { border-color: #3a6df4; border-style: solid; }
.riReveal > div { line-height: 1.6; }
.riReveal button {
  background: #2a6df4; color: #fff; border: 0; border-radius: 6px;
  padding: 4px 10px; cursor: pointer; font-size: 11.5px; margin-left: auto;
}

/* report metrics explainer (toggle) — only shown at the report stage */
/* 2D Pareto panel — report stage only */
#paretoBox {
  margin-top: 12px; padding: 12px 14px;
  border: 1px solid #252932; border-radius: 8px; background: #0f1117;
}
#app:not([data-stage="report"]) #paretoBox { display: none; }
.pbTitle { font-size: 13px; font-weight: 600; color: #eef1f6; margin-bottom: 8px; }
#pareto { background: #0c0d12; border-radius: 8px; max-width: 100%; }
.pbNote { margin: 8px 0 0; font-size: 11.5px; line-height: 1.5; color: #9aa0ac; }

#reportInfo { margin-top: 12px; }
#app:not([data-stage="report"]) #reportInfo { display: none; }
#reportInfo > summary {
  list-style: none; cursor: pointer; display: inline-block;
  background: #1a1c22; color: #c7cad2; border: 1px solid #2a2f3a;
  border-radius: 6px; padding: 5px 12px; font-size: 12px;
}
#reportInfo > summary::-webkit-details-marker { display: none; }
#reportInfo > summary:hover { border-color: #3a6df4; color: #fff; }
#reportInfo[open] > summary { border-color: #3a6df4; color: #fff; margin-bottom: 8px; }
#reportInfoBody {
  border: 1px solid #252932; border-radius: 8px; background: #0f1117;
  padding: 12px 14px; font-size: 12.5px; color: #c7cad2;
}
.rpGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.rpItem { display: flex; align-items: flex-start; gap: 8px; line-height: 1.45; }
.rpItem b { color: #e7ebf2; }
.rpItem em { color: #cfe0ff; font-style: normal; }
.rpSw {
  flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px;
  border-radius: 4px; border: 1px solid #2a2f3a;
}
.rpSwPair { flex: 0 0 auto; display: inline-flex; gap: 2px; }
.rpSwPair .rpSw { width: 9px; }
.rpHeat { background: linear-gradient(135deg, rgba(167,139,250,0.22), #a78bfa); }
.rpRules { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 5px; }
.rpRules li { line-height: 1.5; }
.rpRules b { color: #e7ebf2; }
@media (max-width: 640px) { .rpGrid { grid-template-columns: 1fr; } }

/* LLM spectate panel */
#llmPanel {
  width: 100%; height: 430px; margin-top: 12px;
  display: flex; flex-direction: column; gap: 8px; font-size: 13px;
}
#llmControls {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
#llmPanel input {
  background: #1a1c22; color: #d8dae0; border: 1px solid #333;
  border-radius: 6px; padding: 4px 6px; font-size: 12px;
}
#llmModel { flex: 1 1 155px; min-width: 0; }
#llmKey { flex: 1 1 130px; min-width: 0; }
#llmPanel input[type="checkbox"] {       /* the cloud toggle, not a text field */
  background: none; border: 0; padding: 0; width: auto; cursor: pointer;
}
#llmCloudWrap {
  display: inline-flex; align-items: center; gap: 4px;
  color: #9aa0ac; cursor: pointer; user-select: none;
}
#llmPanel button {
  background: #2a6df4; color: #fff; border: 0; border-radius: 6px;
  padding: 5px 10px; cursor: pointer;
}
#llmStatus { width: 100%; min-height: 16px; color: #9aa0ac; font-size: 12px; }
/* History (left) + Current Chat (right) side by side, each full panel height. */
#llmPanes {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: row; gap: 8px;
}
.llmPane {
  min-height: 0; overflow: hidden;
  border: 1px solid #252932; border-radius: 6px; background: #111319;
  display: flex; flex-direction: column;
}
.llmPane h2 {
  margin: 0; padding: 6px 8px; border-bottom: 1px solid #252932;
  color: #c7cad2; font-size: 12px; font-weight: 600;
}
#llmHistory { flex: 1 1 0; min-width: 0; }   /* left column */
#llmCurrent { flex: 1 1 0; min-width: 0; }   /* right column */
#llmCurrentBody, #llmHistoryBody {
  min-height: 0; overflow: auto;
}
.llmEmpty {
  padding: 8px; color: #7f8796; font-size: 12px;
}
.llmTurn {
  border-bottom: 1px solid #252932; padding: 5px 7px;
}
.llmTurn:last-child { border-bottom: 0; }
.llmTurn summary {
  cursor: pointer; color: #c7cad2; font-size: 12px;
}
.llmTurn summary span { color: #7f8796; margin-left: 6px; }
.llmPart { margin-top: 5px; }
.llmPart b {
  display: block; margin-bottom: 2px; color: #7f8796;
  font-size: 11px; font-weight: 600;
}
.llmPart pre {
  margin: 0; max-height: 120px; overflow: auto;
  white-space: pre-wrap; word-break: break-word;
  color: #d8dae0; font: 11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (max-width: 840px) {
  main { flex-wrap: wrap; }
  #llmPanel { height: 520px; }
  #llmPanes { flex-direction: column; }   /* narrow screens: stack the two panes */
}