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