.scroll-strike-wrap{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  contain:layout paint;
  transition:opacity .25s ease;
}

.scroll-strike-wrap.is-off{
  opacity:.55;
}

.scroll-strike{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

.scroll-strike::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(85% 85% at 50% 50%, transparent 0%, color-mix(in srgb, var(--bg) 42%, transparent) 100%),
    linear-gradient(to bottom, color-mix(in srgb, var(--bg) 12%, transparent) 0%, transparent 22%);
}

.scroll-strike-panel{
  position:fixed;
  left:14px;
  top:calc(var(--strike-hud-bottom, 160px) + 6px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  max-width:min(92vw, 340px);
  pointer-events:auto;
  z-index:52;
}

.scroll-strike-panel__row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px;
}

.scroll-strike-panel__status{
  margin:2px 0 0;
  font:700 9px/1.2 JetBrains Mono, ui-monospace, monospace;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--text) 42%, transparent);
}
.scroll-strike-panel__status.is-done{
  color:var(--accent-2);
}
.scroll-strike-arcade-cta .scroll-strike-panel__status{
  margin-top:4px;
  font-size:10px;
  letter-spacing:.14em;
}

.scroll-strike-diff-label{
  font:600 9px/1 JetBrains Mono, ui-monospace, monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--text) 28%, transparent);
  margin-right:2px;
}

.scroll-strike-diff-btn,
.scroll-strike-power-btn{
  appearance:none;
  pointer-events:auto;
  border:1px solid color-mix(in srgb, var(--text) 14%, transparent);
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  color:color-mix(in srgb, var(--text) 52%, transparent);
  font:600 9px/1 JetBrains Mono, ui-monospace, monospace;
  letter-spacing:.04em;
  padding:5px 7px;
  border-radius:4px;
  cursor:pointer;
  transition:color .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.scroll-strike-diff-btn:hover,
.scroll-strike-power-btn:hover{
  color:color-mix(in srgb, var(--text) 78%, transparent);
  border-color:color-mix(in srgb, var(--accent) 35%, transparent);
}

.scroll-strike-diff-btn.is-active{
  color:var(--accent-2);
  border-color:color-mix(in srgb, var(--accent-2) 55%, transparent);
  background:color-mix(in srgb, var(--accent-2) 10%, var(--bg));
  box-shadow:0 0 12px color-mix(in srgb, var(--accent-2) 18%, transparent);
}

.scroll-strike-power-btn{
  padding:6px 10px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.scroll-strike-power-btn.is-off{
  color:var(--accent);
  border-color:color-mix(in srgb, var(--accent) 50%, transparent);
  background:color-mix(in srgb, var(--accent) 10%, var(--bg));
}

@media (max-width:720px), (pointer:coarse){
  html[data-strike-game="off"] .scroll-strike-panel{
    display:none;
  }
  html[data-strike-focus="1"] .scroll-strike-panel{
    opacity:0;
    pointer-events:none;
    transition:opacity .15s ease;
  }
  .scroll-strike-panel__row--diff{
    display:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .scroll-strike-wrap{opacity:.65}
}

/* Focus play — hold on empty space fades page chrome away */
html[data-strike-focus="1"] body{
  user-select:none;
  -webkit-user-select:none;
}
html[data-strike-focus="1"],
html[data-strike-focus="1"] body,
html.strike-play-lock,
html.strike-play-lock body{
  overflow:hidden!important;
  touch-action:none!important;
  overscroll-behavior:none!important;
}
html[data-strike-focus="1"] #root > :not(.scroll-strike-wrap):not(.scroll-strike-panel):not(.scroll-strike-arcade-cta):not(.cursor):not(.scroll-strike-cheat){
  opacity:.04!important;
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  filter:blur(10px);
  transition:opacity .22s ease, filter .22s ease;
}
html[data-strike-game="off"] .scroll-strike-wrap,
html[data-strike-game="off"] .scroll-strike-wrap.is-off{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
html[data-strike-focus="1"]:not([data-cursor="on"]),
html[data-strike-focus="1"]:not([data-cursor="on"]) *{
  cursor:crosshair!important;
}
html[data-strike-focus="1"]:not([data-cursor="on"]) .scroll-strike-panel,
html[data-strike-focus="1"]:not([data-cursor="on"]) .scroll-strike-panel *,
html[data-strike-focus="1"]:not([data-cursor="on"]) .scroll-strike-arcade-cta,
html[data-strike-focus="1"]:not([data-cursor="on"]) .scroll-strike-arcade-cta *,
html[data-strike-focus="1"]:not([data-cursor="on"]) .scroll-strike-cheat,
html[data-strike-focus="1"]:not([data-cursor="on"]) .scroll-strike-cheat *{
  cursor:pointer!important;
}
html[data-strike-focus="1"] .buildbar,
html[data-strike-focus="1"] .boot{
  opacity:0!important;
  pointer-events:none!important;
}
html[data-strike-focus="1"] .scroll-strike-wrap{
  z-index:1;
}
html[data-strike-focus="1"] .scroll-strike::after{
  opacity:.35;
  transition:opacity .22s ease;
}
html[data-strike-focus="1"] .scroll-strike-panel{
  opacity:.92;
  pointer-events:auto;
}
html[data-strike-focus="1"] .scroll-strike-cheat{
  opacity:1!important;
  pointer-events:auto!important;
  filter:none!important;
}

.scroll-strike-arcade-cta{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  padding:clamp(32px, 5vw, 48px) clamp(36px, 6vw, 64px);
  border-radius:20px;
  border:1px solid color-mix(in oklab, var(--accent) 32%, var(--line));
  background:color-mix(in oklab, var(--bg-2) 88%, transparent);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--accent) 12%, transparent),
    0 28px 72px color-mix(in oklab, var(--bg) 40%, transparent);
  pointer-events:auto;
  z-index:53;
  text-align:center;
  max-width:min(92vw, 440px);
  animation:strike-cta-in .28s ease;
}

@keyframes strike-cta-in{
  from{opacity:0;transform:translate(-50%, -46%) scale(.96)}
  to{opacity:1;transform:translate(-50%, -50%) scale(1)}
}

.scroll-strike-arcade-cta__label{
  margin:0;
  font:700 11px/1 JetBrains Mono, ui-monospace, monospace;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--accent);
}

.scroll-strike-arcade-cta__sub{
  margin:0;
  font:500 12px/1.5 JetBrains Mono, ui-monospace, monospace;
  letter-spacing:.04em;
  color:var(--muted);
}

.scroll-strike-arcade-cta__demo{
  margin:0;
  max-width:36ch;
  font:500 10px/1.55 JetBrains Mono, ui-monospace, monospace;
  letter-spacing:.03em;
  color:color-mix(in srgb, var(--text) 48%, transparent);
}

.scroll-strike-arcade-cta__diff{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
  margin-top:2px;
}

.scroll-strike-arcade-cta__reset{
  appearance:none;
  background:none;
  border:none;
  padding:6px 8px;
  margin-top:2px;
  font:600 9px/1 JetBrains Mono, ui-monospace, monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--text) 38%, transparent);
  cursor:pointer;
}
.scroll-strike-arcade-cta__reset:hover{
  color:color-mix(in srgb, var(--text) 72%, transparent);
}

.scroll-strike-arcade-cta__btn{
  appearance:none;
  pointer-events:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  margin-top:6px;
  padding:0 clamp(28px, 6vw, 40px);
  border-radius:999px;
  border:none;
  background:var(--accent);
  color:var(--on-accent);
  font:700 12px/1 var(--font-mono, JetBrains Mono, ui-monospace, monospace);
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  box-shadow:0 10px 28px -8px color-mix(in oklab, var(--accent) 72%, transparent);
}

.scroll-strike-arcade-cta__btn::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:inset 0 1px 0 color-mix(in oklab, white 22%, transparent);
  pointer-events:none;
}

.scroll-strike-arcade-cta__btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.06);
  box-shadow:0 14px 36px -8px color-mix(in oklab, var(--accent) 78%, transparent);
}

.scroll-strike-arcade-cta__btn:active{
  transform:translateY(0);
  filter:brightness(.98);
}

.scroll-strike-arcade-cta__score{
  margin:2px 0 0;
  font:800 28px/1 JetBrains Mono, ui-monospace, monospace;
  letter-spacing:.08em;
  color:var(--text);
}

.scroll-strike-arcade-cta--dead{
  border-color:color-mix(in oklab, #ef4444 42%, var(--line));
  box-shadow:
    0 0 0 1px color-mix(in oklab, #ef4444 16%, transparent),
    0 28px 72px color-mix(in oklab, var(--bg) 40%, transparent);
}

.scroll-strike-arcade-cta--dead .scroll-strike-arcade-cta__label{
  color:#fb7185;
}

.scroll-strike-arcade-cta--win{
  border-color:color-mix(in oklab, var(--accent-2, #6fe0a8) 42%, var(--line));
}

.scroll-strike-arcade-cta--win .scroll-strike-arcade-cta__label{
  color:var(--accent-2, #6fe0a8);
}

.scroll-strike-arcade-cta--end{
  animation:strike-cta-in .4s ease;
}

.scroll-strike-arcade-cta__btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

@media (max-width:720px), (pointer:coarse){
  .scroll-strike-arcade-cta{
    width:min(96vw, 440px);
    max-width:min(96vw, 440px);
    padding:clamp(22px, 4.5vw, 32px) clamp(14px, 3.5vw, 20px);
    box-sizing:border-box;
    gap:14px;
  }
  .scroll-strike-arcade-cta__demo{
    max-width:none;
    width:100%;
  }
  .scroll-strike-arcade-cta__diff{
    width:100%;
    gap:5px;
  }
  .scroll-strike-arcade-cta__btn{
    width:100%;
    max-width:100%;
  }
}

.scroll-strike-cheat{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:80;
  width:min(92vw, 320px);
  padding:14px 14px 12px;
  border-radius:12px;
  border:1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  background:color-mix(in oklab, var(--bg-2, #12141a) 92%, transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 48px color-mix(in oklab, var(--bg) 45%, transparent);
  pointer-events:auto;
  color:var(--text);
}
.scroll-strike-cheat__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font:700 11px/1 JetBrains Mono, ui-monospace, monospace;
  letter-spacing:.16em;
  color:var(--accent-2, #6fe0a8);
}
.scroll-strike-cheat__close{
  appearance:none;
  border:1px solid color-mix(in srgb, var(--text) 16%, transparent);
  background:transparent;
  color:color-mix(in srgb, var(--text) 55%, transparent);
  font:600 9px/1 JetBrains Mono, ui-monospace, monospace;
  letter-spacing:.08em;
  padding:4px 8px;
  border-radius:4px;
  cursor:pointer;
}
.scroll-strike-cheat__hint{
  margin:8px 0 12px;
  font:500 9px/1.4 JetBrains Mono, ui-monospace, monospace;
  letter-spacing:.04em;
  color:color-mix(in srgb, var(--text) 42%, transparent);
}
.scroll-strike-cheat__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  max-height:50vh;
  overflow-y:auto;
}
.scroll-strike-cheat__btn{
  appearance:none;
  border:1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  background:color-mix(in srgb, var(--accent) 8%, transparent);
  color:var(--text);
  font:600 9px/1 JetBrains Mono, ui-monospace, monospace;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:9px 8px;
  border-radius:6px;
  cursor:pointer;
}
.scroll-strike-cheat__btn:hover{
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 16%, transparent);
}

@media (pointer:coarse){
  .scroll-strike-cheat{display:none}
}