:root {
  color-scheme: dark;
  --hersch-bg: #050816;
  --hersch-panel: rgba(7, 15, 31, 0.94);
  --hersch-cyan: #16f2d0;
  --hersch-warning: #ffb000;
  --hersch-text: #eefcff;
  --hersch-muted: #a3bac7;
}

.hersch-runtime {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  overflow: auto;
  color: var(--hersch-text);
  background:
    radial-gradient(circle at 72% 18%, rgba(155, 92, 255, 0.2), transparent 34%),
    linear-gradient(rgba(22, 242, 208, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 242, 208, 0.035) 1px, transparent 1px),
    var(--hersch-bg);
  background-size: auto, 32px 32px, 32px 32px, auto;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.hersch-runtime[hidden] { display: none; }

.hersch-runtime__panel {
  width: min(520px, 100%);
  box-sizing: border-box;
  padding: clamp(24px, 6vw, 46px);
  border: 1px solid rgba(22, 242, 208, 0.48);
  border-radius: 24px 4px 24px 4px;
  background: var(--hersch-panel);
  box-shadow: 0 0 42px rgba(22, 242, 208, 0.12), inset 0 0 38px rgba(155, 92, 255, 0.08);
}

.hersch-runtime__eyebrow {
  margin: 0 0 14px;
  color: var(--hersch-cyan);
  font: 700 12px/1.3 ui-monospace, SFMono-Regular, monospace;
  letter-spacing: 0.16em;
}

.hersch-runtime__title { margin: 0; font-size: clamp(32px, 8vw, 58px); line-height: 0.96; }
.hersch-runtime__objective { margin: 24px 0 10px; font-size: clamp(16px, 4vw, 20px); line-height: 1.45; }
.hersch-runtime__controls, .hersch-runtime__status, .hersch-runtime__reason { color: var(--hersch-muted); font-size: 14px; line-height: 1.5; }
.hersch-runtime__status { margin-top: 22px; }
.hersch-runtime__score { margin: 18px 0 0; color: var(--hersch-warning); font-size: 24px; font-weight: 800; }

.hersch-runtime__action {
  width: 100%;
  min-height: 52px;
  margin-top: 18px;
  border: 1px solid var(--hersch-cyan);
  border-radius: 6px;
  color: #02110f;
  background: var(--hersch-cyan);
  font: 800 16px/1 ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 0 26px rgba(22, 242, 208, 0.24);
}

.hersch-runtime__action:disabled { opacity: 0.48; cursor: wait; box-shadow: none; }
.hersch-runtime__action:focus-visible { outline: 3px solid var(--hersch-warning); outline-offset: 4px; }
.hersch-runtime[data-state="loading-error"] .hersch-runtime__status { color: #ff8a8a; }
.hersch-runtime[data-state="result"] .hersch-runtime__panel { border-color: var(--hersch-warning); }

.hersch-runtime-coach,
.hersch-runtime-help {
  position: fixed;
  z-index: 10000;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  box-sizing: border-box;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.hersch-runtime-coach[hidden],
.hersch-runtime-help[hidden] { display: none; }

.hersch-runtime-coach {
  width: min(360px, calc(100vw - 24px));
  padding: 14px 16px 12px;
  border: 1px solid rgba(22, 242, 208, 0.72);
  border-radius: 12px 3px 12px 3px;
  color: #eefcff;
  background: rgba(3, 10, 20, 0.94);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5), 0 0 24px rgba(22, 242, 208, 0.12);
}

.hersch-runtime-coach p { margin: 0; }
.hersch-runtime-coach__eyebrow { color: #16f2d0; font: 800 11px/1.2 ui-monospace, monospace; letter-spacing: .14em; }
.hersch-runtime-coach__objective { margin-top: 8px !important; font-size: 15px; font-weight: 750; line-height: 1.35; }
.hersch-runtime-coach__controls,
.hersch-runtime-coach__legend { margin-top: 5px !important; color: #c6d8e1; font-size: 13px; line-height: 1.35; }
.hersch-runtime-coach__legend { color: #ffd56a; }

.hersch-runtime-coach__dismiss,
.hersch-runtime-help {
  min-height: 38px;
  border: 1px solid #16f2d0;
  border-radius: 5px;
  color: #03110f;
  background: #16f2d0;
  font: 800 13px/1 ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}

.hersch-runtime-coach__dismiss { width: 100%; margin-top: 10px; }
.hersch-runtime-help { padding: 0 14px; }
.hersch-runtime-coach__dismiss:focus-visible,
.hersch-runtime-help:focus-visible { outline: 3px solid #ffb000; outline-offset: 3px; }

@media (max-width: 600px) {
  .hersch-runtime-coach { width: calc(100vw - 20px); padding: 11px 12px 10px; }
  .hersch-runtime-coach,
  .hersch-runtime-help { top: max(8px, env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left)); }
  .hersch-runtime-coach__objective { font-size: 14px; }
  .hersch-runtime-coach__controls,
  .hersch-runtime-coach__legend { font-size: 12px; }
}

.hersch-runtime[data-family="neon-velocity"] {
  --hersch-bg: #040612;
  --hersch-panel: rgba(5, 9, 24, 0.95);
  --hersch-cyan: #16f2d0;
  --hersch-warning: #ff9d00;
}

.hersch-runtime[data-family="circuit-protocol"] {
  --hersch-bg: #020a0e;
  --hersch-panel: rgba(3, 18, 23, 0.95);
  --hersch-cyan: #00e5d4;
  --hersch-warning: #ffad33;
}

.hersch-runtime[data-family="arcade-core"] {
  --hersch-bg: #06100f;
  --hersch-panel: rgba(5, 20, 19, 0.95);
  --hersch-cyan: #27e7d2;
  --hersch-warning: #f2bd42;
}

.hersch-runtime[data-family="independent-world"] {
  --hersch-bg: #15121d;
  --hersch-panel: rgba(31, 27, 39, 0.96);
  --hersch-cyan: #8edbc8;
  --hersch-warning: #f0b96a;
  --hersch-text: #fffaf2;
  --hersch-muted: #d2c8bd;
}

.hersch-runtime[data-family="independent-world"] .hersch-runtime__panel {
  border-radius: 22px;
  border-color: rgba(240, 185, 106, 0.48);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.26);
}

.hersch-runtime[data-game="fireline-shift"] { background-image: linear-gradient(90deg, rgba(3, 5, 10, .74), rgba(3, 5, 10, .28)), url("art/game-backgrounds/fireline-shift.jpg"); }
.hersch-runtime[data-game="line-trap"] { background-image: linear-gradient(90deg, rgba(3, 4, 13, .76), rgba(3, 4, 13, .26)), url("art/game-backgrounds/line-trap.jpg"); }

.hersch-runtime[data-game] {
  background-position: center;
  background-size: cover;
}

@media (prefers-reduced-motion: reduce) {
  .hersch-runtime *, .hersch-runtime *::before, .hersch-runtime *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}