/* The trailhead screens share hardware, with an accent for each task. */
:where(#arena, #starter, #supply) {
  --trail-accent: #b9d7a0;
  --trail-steel: #5d7778;
  --trail-cut: clamp(15px, 3vw, 29px);
  --trail-shape: polygon(0 0, calc(100% - var(--trail-cut)) 0, 100% var(--trail-cut),
    100% 100%, 12px 100%, 0 calc(100% - 12px));
}
#arena { --trail-accent: #d8c18d; }
#starter { --trail-accent: #a5dcdd; }
#supply { --trail-accent: #e3bc83; }
:is(#arena, #starter, #supply).overlay {
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
    max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background: radial-gradient(ellipse at 46% 27%, #17283194, #091219dd 84%);
}
:where(#arena, #starter, #supply) > .trail-panel {
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
:where(#arena, #starter, #supply) > .trail-panel::before,
:where(#arena, #starter, #supply) > .trail-panel::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  clip-path: var(--trail-shape);
  pointer-events: none;
}
:where(#arena, #starter, #supply) > .trail-panel::before {
  background: linear-gradient(128deg, var(--trail-accent), var(--trail-steel) 31%, #354b56 74%, var(--trail-accent));
}
:where(#arena, #starter, #supply) > .trail-panel::after {
  inset: 1px;
  background:
    linear-gradient(90deg, var(--trail-accent) 0 58px, #829083 58px 62px, transparent 62px) left top / 100% 2px no-repeat,
    repeating-linear-gradient(128deg, #d8d6b933 0 2px, transparent 2px 6px) right 35px top 7px / 28px 6px no-repeat,
    linear-gradient(142deg, #203039, #101b25 67%, #14212b);
}
:where(#arena, #starter, #supply) > .trail-panel .eyebrow { color: var(--trail-accent); }
:where(#arena, #starter, #supply) .btn { border-radius: 2px 8px 2px 8px; }

#options.overlay:not([data-paused]) {
  background: radial-gradient(ellipse at 50% 27%, #1a3030a3, #081115eb 80%);
}
#options:not([data-paused]) .settings-panel {
  --settings-audio: #b0e6dc;
  --settings-shell: polygon(14px 0, calc(100% - 28px) 0, 100% 28px,
    100% 100%, 15px 100%, 0 calc(100% - 15px), 0 14px);
}
#options:not([data-paused]) .settings-panel::before {
  background: linear-gradient(132deg, #c4ae7c, #718984 33%, #3d5e62 68%, #967c54);
}
#options:not([data-paused]) .settings-panel::after {
  background:
    repeating-linear-gradient(130deg, #c8b78544 0 2px, transparent 2px 7px) right 37px top 7px / 37px 6px no-repeat,
    radial-gradient(ellipse at 95% 4%, #38575080, transparent 60%),
    linear-gradient(145deg, #23343d, #101e27 80%);
}
#options:not([data-paused]) .settings-header .eyebrow { color: #e1cb96; }
#options:not([data-paused]) .settings-emblem { color: #e1cb96; background: #b19c71; }
#options:not([data-paused]) .settings-group { border-color: #597170; }
#options:not([data-paused]) .settings-volume input[type="range"] { height: 36px; }

@media (max-width: 600px) {
  :is(#arena, #starter, #supply).overlay {
    padding: max(9px, env(safe-area-inset-top)) max(9px, env(safe-area-inset-right))
      max(9px, env(safe-area-inset-bottom)) max(9px, env(safe-area-inset-left));
  }
}