/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Creatures - Evolving Virtual Organisms                  - */
/* -                                                          - */
/* - Author: Cylian                                           - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Color Variables                                          - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
:root {
  --creature-color-speed: var(--color-red);
  --creature-color-size: var(--color-blue);
  --creature-color-perception: var(--color-green);
  --creature-color-food: var(--color-green); }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Layout                                                   - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#creature-canvas {
  width: 100%;
  height: 100%;
  background: var(--background-color-surface); }

layout-main .stats {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap; }
  layout-main .stats .stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem; }
    layout-main .stats .stat .label {
      font-size: 0.75rem;
      text-transform: uppercase;
      color: var(--text-color-muted); }
    layout-main .stats .stat .value {
      font-size: 1.5rem;
      font-weight: 600;
      font-variant-numeric: tabular-nums; }

layout-main .legend {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap; }
  layout-main .legend .legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem; }
    layout-main .legend .legend-item .color {
      width: 12px;
      height: 12px;
      border-radius: 50%; }
      layout-main .legend .legend-item .color.speed {
        background-color: var(--creature-color-speed); }
      layout-main .legend .legend-item .color.size {
        background-color: var(--creature-color-size); }
      layout-main .legend .legend-item .color.sense {
        background-color: var(--creature-color-perception); }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Control Buttons                                          - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.creature-controls {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  gap: .5rem;
  margin-top: 1rem; }
  .creature-controls .is-start {
    display: block; }
  .creature-controls .is-stop {
    display: none; }
  .creature-controls.is-running .is-start {
    display: none; }
  .creature-controls.is-running .is-stop {
    display: block; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Legend Widget                                            - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.creature-legend {
  display: flex;
  flex-flow: column nowrap;
  gap: .5rem; }
  .creature-legend.inline {
    flex-flow: row wrap;
    gap: 1rem; }
  .creature-legend .legend-item {
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: .25rem;
    font-weight: 300;
    color: var(--text-color-surface); }
  .creature-legend .swatch {
    display: inline-block;
    width: .75rem;
    height: .75rem;
    border-radius: 50%; }
    .creature-legend .swatch.speed {
      background-color: var(--creature-color-speed); }
    .creature-legend .swatch.size {
      background-color: var(--creature-color-size); }
    .creature-legend .swatch.perception {
      background-color: var(--creature-color-perception); }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Rules Widget                                             - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.creature-rules {
  display: flex;
  flex-flow: column nowrap;
  gap: .5rem; }
  .creature-rules .rule-item summary {
    cursor: pointer; }
    .creature-rules .rule-item summary::marker {
      color: var(--draw-color-primary); }
  .creature-rules .rule-item p {
    margin: .25rem 0 0 1.5rem;
    font-size: .85em;
    color: var(--text-color-surface);
    opacity: .8; }
  .creature-rules input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--draw-color-primary);
    cursor: pointer; }
  .creature-rules label {
    font-weight: 300;
    color: var(--text-color-surface);
    cursor: pointer; }
    .creature-rules label:hover {
      color: var(--text-color-primary); }