Spaces:
Running
Running
| /* 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 */ | |
| } | |