/* 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: 820px; 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; }

/* online lobby controls (meta only; never display a rule) */
#hostBtn, #joinBtn, #joinGoBtn {
  background: #1a1c22; color: #cfe0ff; border: 1px solid #2a6df4;
  border-radius: 6px; padding: 4px 8px; font-size: 12px; cursor: pointer;
}
#hostBtn:hover, #joinBtn:hover, #joinGoBtn:hover { background: #1f2a44; }
.netstat {
  padding: 4px 10px; border-radius: 999px; font-size: 12px;
  background: #16181e; border: 1px solid #2a2d36; color: #9aa0ac;
}
#lobby {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 10px 0; padding: 8px 10px; border-radius: 8px;
  background: #16181e; border: 1px solid #2a2d36; font-size: 12px;
  color: #9aa0ac;
}
#lobby code {
  background: #0e0f13; color: #cfe0ff; padding: 2px 8px; border-radius: 6px;
  font-size: 13px; letter-spacing: .5px; user-select: all;
}
#joinCode {
  background: #1a1c22; color: #d8dae0; border: 1px solid #333;
  border-radius: 6px; padding: 4px 6px; font-size: 12px; width: 200px;
}

/* STAGE PIPS — text-free: each .step renders a pure ICON via ::after (no labels).
   demo = play-triangle, play = 4-dot party, report = checkmark. .on lights the active
   stage; .done greens a completed stage (same state classes as before). */
#steps { display: flex; gap: 8px; margin: 12px 0; }
.step {
  flex: 1; text-align: center; padding: 6px; border-radius: 6px;
  background: #16181e; color: #555; font-size: 14px; line-height: 1; border: 1px solid #222;
}
.step::after { content: ''; }
.step[data-k="demo"]::after   { content: '\25B6'; }   /* ▶ play-triangle (demo) */
.step[data-k="play"]::after   { content: '\2237'; }   /* ∷ four-dot party (play) */
.step[data-k="report"]::after { content: '\2713'; }   /* ✓ checkmark (report) */
.step.on { background: #1f2a44; color: #cfe0ff; border-color: #2a6df4; }
.step.done { color: #6fbf73; }

/* VISUAL META-RAIL canvas: a single thin row of pure-visual widgets (cycle pips /
   depth rung-ladder / pursuit+deference bars / survival heart-pips / penalty flash-tick),
   all drawn by updatePanel. No text. */
#metarail {
  display: block; width: 100%; max-width: 540px;
  margin: 0 0 10px; border-radius: 8px;
  background: #16181e; border: 1px solid #2a2d36;
}

/* skippable HOW-TO / intro card (matches the lobby card style). */
#helpBtn {
  background: #1a1c22; color: #cfe0ff; border: 1px solid #2a6df4;
  border-radius: 6px; width: 28px; height: 30px; font-size: 14px; cursor: pointer;
}
#helpBtn:hover { background: #1f2a44; }
#howto {
  position: relative; margin: 10px 0; padding: 12px 14px;
  border-radius: 8px; background: #16181e; border: 1px solid #2a3a5a;
  font-size: 13px; color: #c2c8d2;
}
#howto.hidden { display: none; }
#howto .howto-title {
  font-weight: 600; color: #cfe0ff; margin-bottom: 8px; font-size: 13px;
}
#howto .howto-body { margin: 0; padding-left: 20px; }
#howto .howto-body li { margin: 4px 0; line-height: 1.5; }
#howto .howto-body b { color: #e6ebf4; }
#howtoClose {
  position: absolute; top: 8px; right: 8px;
  background: transparent; color: #9aa0ac; border: 0;
  font-size: 14px; cursor: pointer; line-height: 1;
}
#howtoClose:hover { color: #fff; }

/* HUMAN-FACING SCENARIO NARRATION card (always shown; mirrors #howto styling, no .hidden). */
#scenario { background: #16181e; border: 1px solid #2a3a5a; border-radius: 8px;
  padding: 10px 14px; margin: 10px 0; max-width: 540px; font-size: 13px; color: #c2c8d2; line-height: 1.5; }
#scenario .scen-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 6px; }
#scenario .chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #aeb6c4; }
#scenario .chip .sw { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
#scenario #scenarioLine { margin: 4px 0; color: #e6ebf4; }
#scenario .scen-watch { margin: 4px 0 0; font-size: 12px; color: #97a0b0; }
#scenario .scen-watch b { color: #c2c8d2; }

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; }