#radar-card {
  position:absolute;
  top:8px;
  right:8px;
  bottom:auto;
  left:auto;
  width:var(--radar-width,234px);
  height:auto;
  margin:0;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
  z-index:2;
  color:#fff;
  font:.8125rem/1.4 'Segoe UI',Arial,sans-serif;
}

#radar-card .radar-surface {
  position:relative;
  width:var(--radar-width,234px);
  height:var(--radar-height,150px);
}

#radar-card #radar {
  display:block;
  width:100%;
  height:100%;
  border:0;
  border-radius:8px;
  background:transparent;
  cursor:grab;
  touch-action:none;
}

#radar-card.is-dragging #radar {cursor:grabbing}

#radar-card .radar-tools {
  position:absolute;
  top:var(--tools-top,calc(var(--radar-height,150px) + 4px));
  left:var(--tools-left,0px);
  display:flex;
  align-items:center;
  gap:0;
  width:max-content;
  min-height:44px;
  opacity:0;
  pointer-events:none;
  transition:opacity 120ms ease;
  z-index:3;
}

#radar-card .radar-tools::before {
  content:'';
  position:absolute;
  top:-4px;
  right:0;
  left:0;
  height:4px;
}

#radar-card .radar-tools > * {flex:none}

#radar-card .radar-tool,
#radar-card .radar-resizer {
  position:relative;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  padding:0;
  border:0;
  border-radius:4px;
  background:transparent;
  color:#fff;
  transition:none;
}

#radar-card .radar-tool::before {
  content:'';
  position:absolute;
  width:24px;
  height:24px;
  border-radius:50%;
  background:#0009;
}

#radar-card .radar-tool svg {position:relative;width:16px;height:16px;pointer-events:none}
#radar-card .radar-tool:hover::before,
#radar-card .radar-tool:active::before {background:#000d}
#radar-card .radar-tool:is([aria-pressed=true],[aria-expanded=true]),
#radar-card.expanded #expand-radar {color:#152014}
#radar-card .radar-tool:is([aria-pressed=true],[aria-expanded=true])::before,
#radar-card.expanded #expand-radar::before {background:#d7ed91}
#radar-card .radar-minimize-icon,
#radar-card.expanded .radar-expand-icon {display:none}
#radar-card.expanded .radar-minimize-icon {display:block}

#radar-card .radar-resizer {
  position:absolute;
  bottom:var(--resizer-bottom,0px);
  left:0;
  place-items:end start;
  padding:4px;
  cursor:nesw-resize;
  touch-action:none;
  opacity:0;
  pointer-events:none;
  transition:opacity 120ms ease;
  z-index:2;
}

#radar-card .radar-resizer svg {width:20px;height:20px;pointer-events:none}
#radar-card:is(:hover,:focus-within,.tools-visible,.editing) :is(.radar-tools,.radar-resizer) {opacity:1;pointer-events:auto}
#radar-card :is(button,select,input,canvas):focus-visible {outline:3px solid #d7ed91;outline-offset:-3px;box-shadow:inset 0 0 0 6px #07110b}
#radar-card input[type=checkbox]:focus-visible {outline-offset:3px}

#radar-card #radar-mode-tools {
  width:max-content;
}

#radar-card .radar-player-picker {
  position:absolute;
  top:var(--picker-top,48px);
  left:var(--picker-left,0px);
  display:flex;
  gap:4px;
  width:264px;
  max-width:calc(100vw - 32px);
  opacity:0;
  pointer-events:none;
}

#radar-card .radar-player-picker:focus-within {opacity:1;pointer-events:auto}

#radar-card .radar-player-picker :is(select,button) {
  min-height:44px;
  padding:8px;
  border:1px solid #718078;
  border-radius:4px;
  background:#000;
  color:#fff;
  font:inherit;
  transition:none;
}

#radar-card #radar-player-choice {flex:1;min-width:0}
#radar-card #radar-player-add {flex:0 0 100px}

#radar-card .radar-options {
  position:absolute;
  top:calc(var(--radar-height,150px) + 48px);
  left:var(--options-left,0px);
  width:224px;
  max-width:calc(100vw - 16px);
  max-height:min(var(--options-max-height,340px),calc(100dvh - 16px));
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:8px 0;
  background:#000;
  border:1px solid #718078;
  border-radius:4px;
  color:#fff;
  z-index:5;
}

#radar-card .radar-options h2 {margin:4px 12px 8px;font:600 .8125rem/1.4 'Segoe UI',Arial,sans-serif}

#radar-card .radar-options label {
  flex-direction:row;
  align-items:center;
  gap:8px;
  min-height:44px;
  margin:0;
  padding:6px 12px;
  color:#fff;
  font:inherit;
  cursor:pointer;
}

#radar-card .radar-options input[type=checkbox] {margin:0;accent-color:#d7ed91}

#radar-card #radar-reset {
  width:calc(100% - 24px);
  min-height:44px;
  margin:8px 12px;
  padding:8px;
  border:1px solid #718078;
  border-radius:4px;
  background:transparent;
  color:#fff;
  font:inherit;
  transition:none;
}

#radar-card :is(#radar-player-add,#radar-reset):is(:hover,:active),
#radar-card .radar-options label:hover {background:#243025}
#radar-card .radar-options small {display:block;margin:8px 12px 4px;color:#c6ccc7;font:inherit}

#radar-card .radar-tooltip,
#radar-card .radar-hint {
  position:absolute;
  padding:6px 8px;
  border-radius:4px;
  background:#000e;
  color:#fff;
  font:inherit;
  overflow-wrap:anywhere;
  pointer-events:none;
}

#radar-card .radar-tooltip {width:max-content;max-width:min(var(--radar-width,234px),calc(100vw - 32px));transform:translateX(-50%);z-index:6}
#radar-card .radar-hint {top:8px;right:8px;left:8px;margin:0;z-index:2}

.radar-restore {display:none}
#video-player:is(:fullscreen,.is-fullscreen) .radar-restore {display:grid;place-items:center;position:absolute;right:8px;top:8px;width:44px;height:44px;padding:0;background:#000b;z-index:2}

@media(prefers-reduced-motion:reduce) {
  #radar-card :is(.radar-tools,.radar-resizer) {transition:none}
}