style.css

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

/* ===== TUTORIAL DOM LAYERS (P14/P15: #annot chips + §C.4 cards + handoff card) =====
   app.js computes each chip's left/top over the board (board->screen transform +
   collision-avoidance) and toggles .on for visibility; these classes supply the overlay
   base that positioning math assumes. Chips/handoff are pointer-transparent; the §C.4
   cards accept clicks (click = advance card). */
#stage { position: relative; flex: 0 0 auto; }
#annot { position: absolute; inset: 0; pointer-events: none; display: none; }
#annot.on { display: block; }
.annot-chip {
  position: absolute; z-index: 4; pointer-events: none;
  background: rgba(22, 24, 30, .94); border: 1px solid #2a3a5a; border-radius: 8px;
  padding: 6px 9px; font-size: 12px; line-height: 1.35; color: #c2c8d2;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}
.annot-chip b { display: block; color: #e6ebf4; font-weight: 600; }
.annot-chip i { display: block; color: #97a0b0; font-style: normal; font-size: 11px; }
/* fork sub-caption (2nd ko/en pair inside the same chip) gets a divider */
.annot-chip i + b { margin-top: 5px; padding-top: 5px; border-top: 1px solid #2a2d36; }

#tutCards { display: none; }
#tutCards.on { display: block; }
.tut-card {
  display: none; position: absolute; z-index: 5; left: 50%; bottom: 14px;
  transform: translateX(-50%); width: 440px; max-width: calc(100% - 24px);
  background: rgba(22, 24, 30, .96); border: 1px solid #2a6df4; border-radius: 10px;
  padding: 12px 14px; font-size: 13px; line-height: 1.5; color: #c2c8d2;
  cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .5);
}
.tut-card.on { display: block; }
.tut-card .ko { color: #e6ebf4; }
.tut-card .ko b { color: #cfe0ff; }
.tut-card .en { margin-top: 4px; font-size: 12px; color: #97a0b0; }
.tut-card .tut-next { margin-top: 8px; text-align: right; font-size: 12px; color: #cfe0ff; }

#handoffCard {
  display: none; position: absolute; z-index: 5; left: 50%; top: 50%;
  transform: translate(-50%, -50%); width: 380px; max-width: calc(100% - 24px);
  background: rgba(22, 24, 30, .96); border: 1px solid #2a6df4; border-radius: 10px;
  padding: 14px 16px; text-align: center; font-size: 14px; color: #e6ebf4;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .5); pointer-events: none;
}
#handoffCard.on { display: block; }
#handoffCard .en { margin-top: 4px; font-size: 12px; color: #97a0b0; }

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