/* Intent (systems/intent.js): the game's cursor, the F keycap over what F acts on, the options panel. */
#ec-cursor{
  --ec-tone:var(--af-ember-300);--ec-ink:var(--af-ember-100);--ec-dim:var(--af-ash);--ec-glow:color-mix(in srgb, var(--af-ember-400) 40%, transparent);
  position:fixed;left:0;top:0;z-index:60;pointer-events:none;display:none;will-change:transform;
  font-family:"Alegreya Sans",sans-serif}
body.ec-cursor-on #c{cursor:none}
body.ec-cursor-on #ec-cursor{display:block}
#ec-cursor .ec-arrow{position:absolute;left:-2px;top:-2px;width:26px;height:30px;filter:drop-shadow(0 2px 2px color-mix(in srgb, var(--af-void) 80%, transparent)) drop-shadow(0 0 6px var(--ec-glow))}

/* the badge sits off the arrow's heel and names what the pointer is on */
#ec-cursor .ec-badge{position:absolute;left:15px;top:19px;width:30px;height:30px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--af-stone-600),var(--af-ink) 70%);
  box-shadow:0 0 0 1.5px var(--af-ink),0 0 0 3px var(--ec-tone),0 3px 10px color-mix(in srgb, var(--af-void) 67%, transparent),0 0 16px var(--ec-glow);
  display:grid;place-items:center;transform:scale(1);transition:transform .12s ease-out,box-shadow .15s}
#ec-cursor.ec-plain .ec-badge{transform:scale(0);box-shadow:none}
#ec-cursor .ec-ico svg{width:17px;height:17px;fill:var(--ec-tone);display:block;filter:drop-shadow(0 1px 0 var(--af-void))}
#ec-cursor .ec-lock{position:absolute;right:-7px;bottom:-6px;width:18px;height:18px;border-radius:50%;display:none;place-items:center;
  background:var(--af-ember-900);box-shadow:0 0 0 1.5px var(--af-blood-300),0 2px 6px color-mix(in srgb, var(--af-void) 80%, transparent)}
#ec-cursor .ec-lock svg{width:11px;height:11px;fill:var(--af-bone)}
#ec-cursor.ec-locked .ec-lock{display:grid}
#ec-cursor.ec-locked .ec-badge{animation:ec-throb 1.1s ease-in-out infinite}
@keyframes ec-throb{50%{box-shadow:0 0 0 1.5px var(--af-ink),0 0 0 3px var(--ec-tone),0 3px 10px color-mix(in srgb, var(--af-void) 67%, transparent),0 0 22px color-mix(in srgb, var(--af-danger) 60%, transparent)}}

/* the chip: the name, what it is, and the keys */
#ec-cursor .ec-chip{position:absolute;left:52px;top:18px;min-width:120px;max-width:300px;padding:6px 10px 7px 11px;border-radius:var(--af-cut-md);corner-shape:bevel;
  background:linear-gradient(180deg,color-mix(in srgb, var(--af-stone-850) 95%, transparent),color-mix(in srgb, var(--af-void) 95%, transparent));border:1px solid color-mix(in srgb, var(--af-iron-300) 11%, transparent);border-left:3px solid var(--ec-tone);
  box-shadow:0 6px 18px color-mix(in srgb, var(--af-void) 73%, transparent);white-space:nowrap}
#ec-cursor.ec-plain .ec-chip{display:none}
#ec-cursor .ec-t{display:flex;align-items:baseline;gap:8px}
#ec-cursor .ec-t b{font-family:Cinzel,serif;font-weight:700;font-size:13.5px;letter-spacing:.03em;color:var(--ec-ink)}
#ec-cursor .ec-t small{font-size:12px;color:var(--ec-dim);overflow:hidden;text-overflow:ellipsis}
#ec-cursor .ec-h{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:4px;font-size:12.5px;font-weight:700;color:var(--ec-tone)}
#ec-cursor .ec-h:empty{display:none}
#ec-cursor .ec-h span{display:inline-flex;align-items:center;gap:5px}
#ec-cursor .ec-h .ec-warn{color:var(--af-blood-300)}
#ec-cursor .ec-h .ec-warn i{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;background:var(--af-blood-300);color:var(--af-bone);font:800 11px/1 "Alegreya Sans",sans-serif;font-style:normal;box-shadow:0 0 8px color-mix(in srgb, var(--af-danger) 53%, transparent)}
#ec-cursor kbd,#ec-ftag kbd,#ec-menu kbd{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 4px;box-sizing:border-box;border-radius:var(--af-cut-sm);corner-shape:bevel;
  font:700 10.5px/1 "Alegreya Sans",sans-serif;color:var(--af-ink);background:linear-gradient(var(--af-ember-100),var(--af-ember-300));box-shadow:0 1.5px 0 var(--af-gold-700)}

/* tones */
#ec-cursor.ec-foe{--ec-tone:var(--af-blood-300);--ec-glow:color-mix(in srgb, var(--af-danger) 33%, transparent)}
#ec-cursor.ec-crime{--ec-tone:var(--af-blood-300);--ec-glow:color-mix(in srgb, var(--af-blood-400) 47%, transparent);--ec-dim:var(--af-bone)}
#ec-cursor.ec-friend{--ec-tone:var(--af-moss-300);--ec-glow:color-mix(in srgb, var(--af-moss-300) 27%, transparent)}
#ec-cursor.ec-blocked{--ec-tone:var(--af-iron-300);--ec-glow:color-mix(in srgb, var(--af-void) 0%, transparent)}
#ec-cursor.ec-far{--ec-tone:var(--af-ash);--ec-glow:color-mix(in srgb, var(--af-void) 0%, transparent)}
#ec-cursor.ec-far .ec-badge,#ec-cursor.ec-blocked .ec-badge{transform:scale(.86)}
#ec-cursor.ec-foe .ec-arrow,#ec-cursor.ec-crime .ec-arrow{filter:drop-shadow(0 2px 2px color-mix(in srgb, var(--af-void) 80%, transparent)) drop-shadow(0 0 7px color-mix(in srgb, var(--af-danger) 53%, transparent))}

/* the F keycap over what F will act on */
#ec-ftag{position:fixed;left:0;top:0;z-index:55;pointer-events:none;display:flex;align-items:center;gap:5px;padding:3px 8px 3px 4px;
  border-radius:var(--af-cut-md);corner-shape:bevel;background:color-mix(in srgb, var(--af-ink) 90%, transparent);border:1px solid color-mix(in srgb, var(--af-ember-300) 40%, transparent);box-shadow:0 4px 12px color-mix(in srgb, var(--af-void) 67%, transparent),0 0 12px color-mix(in srgb, var(--af-ember-400) 20%, transparent);
  translate:-50% -100%;font:700 12px "Alegreya Sans",sans-serif;color:var(--af-ember-100);letter-spacing:.02em;animation:ec-bob 1.6s ease-in-out infinite}
#ec-ftag[hidden]{display:none}
@keyframes ec-bob{50%{margin-top:-3px}}

/* the options panel */
#ec-menu{position:fixed;z-index:58;min-width:220px;max-width:320px;padding:6px;border-radius:var(--af-cut-md);corner-shape:bevel;
  background:linear-gradient(180deg,color-mix(in srgb, var(--af-iron-900) 97%, transparent),color-mix(in srgb, var(--af-stone-950) 97%, transparent));border:1px solid color-mix(in srgb, var(--af-ember-300) 25%, transparent);box-shadow:0 14px 34px color-mix(in srgb, var(--af-void) 80%, transparent),0 0 0 1px var(--af-void),0 0 26px color-mix(in srgb, var(--af-ember-500) 13%, transparent);
  font-family:"Alegreya Sans",sans-serif;color:var(--af-bone);animation:ec-pop .14s ease-out}
@keyframes ec-pop{from{opacity:0;transform:translateY(4px) scale(.97)}}
#ec-menu .ec-mh{display:flex;align-items:center;gap:10px;padding:6px 8px 8px;border-bottom:1px solid color-mix(in srgb, var(--af-iron-300) 10%, transparent);margin-bottom:4px}
#ec-menu .ec-mh b{display:block;font-family:Cinzel,serif;font-size:15px;letter-spacing:.03em;color:var(--af-ember-100)}
#ec-menu .ec-mh small{display:block;font-size:12.5px;color:var(--af-ash)}
#ec-menu .ec-mi{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:radial-gradient(circle at 35% 30%,var(--af-stone-600),var(--af-ink) 70%);box-shadow:0 0 0 2px var(--af-ember-300)}
#ec-menu .ec-mi svg{width:17px;height:17px;fill:var(--af-ember-300)}
#ec-menu .ec-mh.ec-crime .ec-mi,#ec-menu .ec-mh.ec-foe .ec-mi{box-shadow:0 0 0 2px var(--af-blood-300)}
#ec-menu .ec-mh.ec-crime .ec-mi svg{fill:var(--af-blood-300)}
#ec-menu .ec-mh.ec-friend .ec-mi{box-shadow:0 0 0 2px var(--af-moss-300)}
#ec-menu .ec-mh.ec-friend .ec-mi svg{fill:var(--af-moss-300)}
#ec-menu .ec-it{display:flex;align-items:center;gap:10px;width:100%;margin:0;padding:7px 8px;border:0;border-radius:var(--af-cut-md);corner-shape:bevel;background:transparent;
  color:var(--af-bone);font:600 14px "Alegreya Sans",sans-serif;text-align:left;cursor:pointer}
#ec-menu .ec-it:hover,#ec-menu .ec-it:focus-visible{outline:none;background:color-mix(in srgb, var(--af-ember-300) 12%, transparent);color:var(--af-bone)}
#ec-menu .ec-ii{position:relative;width:22px;height:22px;display:grid;place-items:center;flex:none}
#ec-menu .ec-ii svg{width:18px;height:18px;fill:var(--af-ember-300)}
#ec-menu .ec-il{flex:1}
#ec-menu .ec-it kbd{margin-left:auto;opacity:.85}
#ec-menu .ec-it.ec-crime{color:var(--af-bone)}
#ec-menu .ec-it.ec-crime .ec-ii svg{fill:var(--af-blood-300)}
#ec-menu .ec-it.ec-crime:hover{background:color-mix(in srgb, var(--af-blood-300) 15%, transparent)}
#ec-menu .ec-it.ec-friend .ec-ii svg{fill:var(--af-moss-300)}
#ec-menu .ec-it.ec-neutral .ec-ii svg{fill:var(--af-ash)}
#ec-menu .ec-lk{position:absolute;right:-5px;bottom:-4px;width:12px;height:12px;border-radius:50%;background:var(--af-ember-900);display:grid;place-items:center;box-shadow:0 0 0 1px var(--af-blood-300)}
#ec-menu .ec-lk svg{width:8px;height:8px;fill:var(--af-bone)}
#ec-menu .ec-inspect{padding:4px 8px 8px}
#ec-menu .ec-inspect dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0;font-size:13.5px}
#ec-menu .ec-inspect dt{color:var(--af-ash)}
#ec-menu .ec-inspect dd{margin:0;color:var(--af-ember-100)}
#ec-menu .ec-item{max-height:260px;overflow:auto}
@media (prefers-reduced-motion:reduce){#ec-ftag,#ec-cursor.ec-locked .ec-badge{animation:none}#ec-menu{animation:none}}