:root { --ink: #10201f; --cream: #f1ead8; --panel: rgba(18, 32, 34, .84); font: 14px/1.3 ui-rounded, "SF Pro Rounded", system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #cfe8ef; color: var(--cream); user-select: none; -webkit-user-select: none; }
canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
button { font: inherit; color: var(--cream); background: var(--panel); border: 1px solid rgba(241, 234, 216, .25); border-radius: 8px; padding: 6px 12px; cursor: pointer; }
button.on { background: var(--cream); color: var(--ink); border-color: var(--cream); font-weight: 700; }
#top { position: fixed; left: 12px; top: 10px; display: grid; gap: 6px; z-index: 6; }
#tabs button { font-size: 16px; padding: 8px 16px; margin-right: 6px; }
#opts { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.grp { display: inline-flex; gap: 3px; align-items: center; background: var(--panel); border-radius: 10px; padding: 3px 4px 3px 10px; }
.grp em { font-style: normal; opacity: .65; margin-right: 6px; font-size: 12px; }
.grp button { padding: 4px 9px; border-radius: 7px; border: 0; background: transparent; }
.grp button.on { background: var(--cream); }
.reset { font-size: 12px; opacity: .8; }
#about { background: var(--panel); padding: 5px 10px; border-radius: 8px; width: max-content; max-width: 760px; font-size: 13px; }
#stats { position: fixed; right: 12px; top: 12px; background: var(--panel); padding: 7px 12px; border-radius: 9px; z-index: 6; }
#stats u { text-decoration: none; opacity: .7; } #fps { opacity: .5; font-size: 12px; }
#roster { position: fixed; left: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 6; align-items: flex-start; }
.agentrow { display: flex; align-items: center; gap: 8px; }
#roster button[data-agent] { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; align-items: center; width: 138px; text-align: left; border-left: 6px solid var(--c); padding: 6px 10px; }
#roster b { grid-row: span 2; font-size: 20px; opacity: .8; } #roster small { opacity: .75; min-height: 1em; }
#roster button[data-agent].sel { background: var(--cream); color: var(--ink); box-shadow: 0 0 0 3px var(--c); }
#log { position: fixed; right: 12px; bottom: 12px; width: 460px; display: grid; gap: 3px; justify-items: end; z-index: 6; pointer-events: none; font-size: 13px; }
#log div { background: var(--panel); padding: 3px 9px; border-radius: 6px; }
#log .warn { color: #ffd9a0; } #log .ok { color: #a8f0c0; } #log .act { color: var(--cream); }
#hint { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); background: var(--panel); padding: 6px 14px; border-radius: 99px; z-index: 6; pointer-events: none; transition: opacity .2s; opacity: 0; }
#errors { position: fixed; left: 12px; top: 120px; color: #ff7a7a; font-size: 12px; z-index: 9; margin: 0; white-space: pre-wrap; }
svg { display: block; }

/* the one marker */
.mk { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 4; display: none; will-change: transform; }
.mk > * { position: absolute; }
.mk i { font-style: normal; opacity: .55; margin: 0 7px; }
.badge { left: -23px; top: -58px; width: 46px; height: 46px; border-radius: 50%; background: var(--c); color: var(--ink); border: 3px solid #fff; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.harm .badge { border-radius: 9px; transform: rotate(45deg); border-style: dashed; } .harm .badge svg { transform: rotate(-45deg); }
.chip { left: 28px; top: -46px; background: var(--panel); border: 2px solid var(--c); border-radius: 99px; padding: 2px 10px; font-weight: 700; white-space: nowrap; }
.pill { left: 0; top: -10px; transform: translate(-50%, -100%); background: var(--c); color: var(--ink); border: 2px solid #fff; border-radius: 99px; padding: 6px 15px 6px 11px; font-weight: 700; font-size: 16px; display: flex; gap: 8px; align-items: center; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.pill::after { content: ""; position: absolute; left: 50%; bottom: -9px; margin-left: -7px; border: 7px solid transparent; border-top-color: #fff; border-bottom: 0; }
.harm .pill { border-radius: 6px; border-style: dashed; }
.mk-badge .pill.side { left: 30px; top: -50px; transform: none; font-size: 15px; } .mk-badge .pill.side::after { display: none; }
.mk-built .tag { left: 0; top: -92px; transform: translateX(-50%); background: var(--panel); padding: 2px 9px; border-radius: 6px; white-space: nowrap; }
.mk-built .three { left: -74px; top: -62px; width: 148px; display: flex; justify-content: space-between; } .mk-built .three svg { background: var(--panel); border-radius: 50%; padding: 5px; width: 30px; height: 30px; }
.mk-built .plate { left: 0; top: -34px; transform: translateX(-50%); background: var(--panel); border: 1px solid rgba(241, 234, 216, .4); padding: 2px 9px; border-radius: 6px; display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.mk-built .plate b { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; }

/* ring */
#ring { position: fixed; left: 0; top: 0; width: 330px; height: 330px; z-index: 5; display: none; pointer-events: none; will-change: transform; }
#ring .wedge { pointer-events: auto; cursor: pointer; }
#ring .wi { display: grid; place-items: center; width: 32px; height: 32px; }
.plate1 { position: absolute; left: 50%; top: 268px; transform: translateX(-50%); background: var(--c); color: var(--ink); border: 2px solid #fff; border-radius: 99px; padding: 6px 15px 6px 11px; font-weight: 700; font-size: 16px; display: flex; gap: 8px; align-items: center; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.plate1.harm { border-radius: 6px; border-style: dashed; } .plate1.up { top: auto; bottom: 268px; } .plate1 i { font-style: normal; opacity: .55; margin: 0 4px; }
.bp { position: absolute; background: var(--panel); border: 1px solid rgba(241, 234, 216, .4); border-radius: 8px; padding: 3px 9px; display: flex; gap: 6px; align-items: center; white-space: nowrap; font-size: 13px; }
.bp.lit { background: #1f5c58; border-color: #fff; } .bp b { display: inline-flex; gap: 2px; align-items: center; }

/* order timers over agents */
#orders .ord { position: fixed; left: -65px; top: -28px; width: 130px; height: 24px; border-radius: 12px; background: var(--panel); border: 2px solid var(--c); overflow: hidden; pointer-events: none; z-index: 3; display: none; }
.ord i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--c); opacity: .6; }
.ord span { position: relative; display: flex; gap: 4px; align-items: center; justify-content: center; width: 100%; font-size: 12px; }

/* squad: portrait strip, box select, portrait drag */
#roster .squad { width: 70px; display: grid; place-items: center; font-weight: 700; }
#roster button[data-agent].lead::after { content: "lead"; grid-column: 2; font-size: 10px; opacity: .6; margin-top: -2px; }
#box { position: fixed; border: 2px solid #1fd1b5; background: rgba(31, 209, 181, .14); z-index: 4; pointer-events: none; display: none; }
#rubber { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 7; pointer-events: none; display: none; }
#ghost { position: fixed; z-index: 8; pointer-events: none; display: none; background: var(--cream); color: var(--ink); padding: 4px 10px; border-radius: 99px; font-weight: 700; transform: translate(12px, 12px); border: 2px solid #1fd1b5; }

/* who breaks away: round faces with a colour rim, stacked */
.faces { display: inline-flex; margin-left: 4px; } .faces img { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #fff; background: #10201f; margin-left: -9px; image-rendering: auto; } .faces img:first-child { margin-left: 0; }
.chip .faces img { width: 24px; height: 24px; vertical-align: middle; }
#roster button[data-agent].break { box-shadow: 0 0 0 3px #fff; } #roster button[data-agent].hold { opacity: .45; }

/* running */
#runmarks .rm { position: fixed; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; background: #f1ead8; color: #10201f; border: 2px solid #10201f; display: none; place-items: center; pointer-events: none; z-index: 3; }
#roster small svg { vertical-align: -3px; }

/* the action plate beside a portrait: gait or act icon, progress, time left; lighter when running */
.aplate { display: none; align-items: center; gap: 8px; height: 36px; padding: 0 10px; background: var(--panel); border: 1px solid rgba(241, 234, 216, .3); border-radius: 18px; width: 190px; }
.aplate.run { background: rgba(70, 120, 118, .92); }
.aplate .gi { all: unset; display: grid; place-items: center; width: 24px; height: 24px; cursor: pointer; border-radius: 50%; color: var(--cream); } .aplate .gi:hover { background: rgba(241, 234, 216, .2); }
.aplate .bar { flex: 1; height: 8px; border-radius: 4px; background: #0a1a1c; border: 1px solid rgba(241, 234, 216, .35); overflow: hidden; } .aplate .bar i { display: block; height: 100%; background: #6fe0d2; }
.aplate.run .bar i { background: var(--cream); }
.aplate .val { min-width: 38px; text-align: right; font-weight: 700; } .aplate .eye { display: none; place-items: center; opacity: .85; }
.aplate .x { all: unset; cursor: pointer; opacity: 0; font-size: 18px; line-height: 1; padding: 0 2px; } .aplate:hover .x { opacity: .9; }

/* hold to fire */
.pill.chg { overflow: hidden; } .pill.chg .fill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255, 255, 255, .55); width: 0; } .pill.chg span { position: relative; }
#reticle { position: fixed; left: -16px; top: -16px; width: 32px; height: 32px; border: 2px solid #f1ead8; border-radius: 50%; z-index: 7; pointer-events: none; display: none; margin: -0px; box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
#reticle::before, #reticle::after { content: ""; position: absolute; background: #f1ead8; left: 50%; top: 50%; } #reticle::before { width: 2px; height: 10px; margin: -5px 0 0 -1px; } #reticle::after { width: 10px; height: 2px; margin: -1px 0 0 -5px; }
#firemarks .fm { position: fixed; left: 6px; top: -14px; width: 26px; height: 26px; border-radius: 50%; background: #1fd1b5; color: #10201f; border: 2px solid #10201f; display: none; place-items: center; pointer-events: none; z-index: 3; }
#roster button[data-agent].firing { box-shadow: 0 0 0 3px #ff4d7d; } .aplate.fire .bar i { background: #ff4d7d; }

/* pause and plan, cones, attention */
#ghosts .gh { position: fixed; left: 0; top: 0; display: none; align-items: center; gap: 6px; background: rgba(241, 234, 216, .85); color: #10201f; border: 2px dashed #10201f; border-radius: 99px; padding: 3px 12px 3px 6px; font-weight: 700; white-space: nowrap; pointer-events: none; z-index: 4; margin: -50px 0 0 -40px; }
#ghosts .faces img { width: 24px; height: 24px; }
.mk .seen { background: #ff7a5c; color: #10201f; border-radius: 99px; padding: 1px 9px; margin-left: 8px; font-size: 13px; border: 2px solid #fff; }
#att .at { position: fixed; left: -34px; top: -14px; min-width: 68px; height: 24px; display: none; align-items: center; justify-content: center; border-radius: 12px; font-size: 12px; font-weight: 700; color: #10201f; background: conic-gradient(#ff7a5c var(--f), rgba(241, 234, 216, .9) 0); border: 2px solid #10201f; pointer-events: none; z-index: 3; }
#att .at[data-w="noticed"] { background: conic-gradient(#ffb02e var(--f), rgba(241, 234, 216, .9) 0); } #att .at[data-w="report"] { background: #ff4d3a; color: #fff; }
#test { position: fixed; top: 56px; right: 12px; background: var(--panel); padding: 7px 12px; border-radius: 9px; z-index: 6; display: none; max-width: 520px; font-weight: 600; }
#paused { position: fixed; top: 52px; left: 50%; transform: translateX(-50%); background: #ff4d7d; color: #10201f; font-weight: 800; padding: 4px 18px; border-radius: 99px; z-index: 6; display: none; } body.paused #paused { display: block; } body.paused canvas { filter: saturate(.7); }

.aplate .val { min-width: 92px; font-size: 13px; } .pill.st i { margin: 0 8px; } .pill.st { gap: 6px; }

#opts { display: none; } body.opts-open #opts { display: flex; } .gear { margin-left: 8px; opacity: .85; }

#orders .ord { width: 190px; left: -95px; } .ord span { white-space: nowrap; }

/* commit on release: the pill is full and says "Let go to ..." (pop, portrait flash) */
.pill.chg.ready { animation: pop .35s ease-out; box-shadow: 0 0 0 3px #fff, 0 0 18px 4px rgba(255, 255, 255, .8); } .pill.chg.ready .fill { background: rgba(255, 255, 255, .35); }
@keyframes pop { 0% { transform: translate(-50%, -100%) scale(.85); } 55% { transform: translate(-50%, -100%) scale(1.18); } 100% { transform: translate(-50%, -100%) scale(1); } }
#roster button[data-agent].ready { animation: flash .5s ease-in-out infinite alternate; } @keyframes flash { from { box-shadow: 0 0 0 3px #fff; } to { box-shadow: 0 0 0 6px #fff, 0 0 14px 6px rgba(255, 255, 255, .8); } }

/* Syndicate fights: weapons-free badge on the Squad button, health bars over the targets, a busy portrait that left the squad */
#roster .squad { position: relative; }
#roster .free { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; place-items: center; background: #ff4d7d; color: #10201f; border: 2px solid #10201f; display: grid; }
#roster .free:not(.on) { background: rgba(241, 234, 216, .35); color: rgba(16, 32, 31, .65); border-color: rgba(16, 32, 31, .5); }
#roster .free:not(.on)::after { content: ""; position: absolute; left: 1px; right: 1px; top: 50%; border-top: 2px solid #10201f; transform: rotate(-40deg); }
#hpbars .hb { position: fixed; left: -23px; top: 0; width: 46px; height: 8px; border-radius: 4px; background: rgba(16, 32, 31, .7); border: 2px solid #10201f; display: none; pointer-events: none; z-index: 3; overflow: hidden; }
#hpbars .hb i { display: block; height: 100%; background: #ff7a5c; transition: width .12s; }
#hpbars .hb::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / var(--n) - 2px), #10201f calc(100% / var(--n) - 2px), #10201f calc(100% / var(--n))); }
#hpbars .hb.hit { box-shadow: 0 0 0 3px #fff; } #hpbars .hb.hit i { background: #fff; }
#roster button[data-agent].busy { opacity: .62; border-style: dashed; }
#roster .squad { width: 96px; justify-items: start; padding-left: 10px; }