/* Algorhythm pixel UI: buttons and the stop-the-line bar.
   --px is set by algo-sky.js to the background's pixel size (5px on a 1080p screen), so the UI's borders
   and steps match the art's pixels exactly. Text sizes have floors so they stay readable on phones. */
.algo-sky { position: fixed; inset: 0; overflow: hidden; z-index: 0;
  background: linear-gradient(#0a0e2a 0%, #10173a 18%, #18214c 34%, #232e60 50%, #333f76 64%, #4a548c 76%, #6b6fa6 86%, #dde1f8 100%); }
.algo-sky canvas { display: block; }

.px-btn {
  --u: var(--px, 5px);
  --face: #e4f3ec; --edge: #0b1d28; --hi: #ffffff; --lo: #9fc3bf; --ink: #1d1330; --drop: #0a1820;
  position: relative; display: inline-flex; align-items: center; gap: calc(var(--u) * 2);
  padding: max(10px, calc(var(--u) * 3)) max(24px, calc(var(--u) * 7)) max(11px, calc(var(--u) * 3.4));
  border: 0; border-radius: 0; cursor: pointer; background: var(--face); color: var(--ink);
  font: 700 max(16px, calc(var(--u) * 5)) / 1 "Pixelify Sans", "Silkscreen", ui-monospace, monospace;
  letter-spacing: calc(var(--u) * 0.4); text-transform: uppercase; text-decoration: none;
  box-shadow:
    0 calc(var(--u) * -1) 0 0 var(--edge), 0 var(--u) 0 0 var(--edge),
    calc(var(--u) * -1) 0 0 0 var(--edge), var(--u) 0 0 0 var(--edge),
    0 calc(var(--u) * 2) 0 0 var(--drop),
    inset 0 var(--u) 0 0 var(--hi), inset var(--u) 0 0 0 var(--hi),
    inset 0 calc(var(--u) * -1) 0 0 var(--lo), inset calc(var(--u) * -1) 0 0 0 var(--lo);
  transition: transform 80ms steps(2), box-shadow 80ms steps(2);
}
.px-btn:hover { transform: translateY(calc(var(--u) * -1));
  box-shadow:
    0 calc(var(--u) * -1) 0 0 var(--edge), 0 var(--u) 0 0 var(--edge),
    calc(var(--u) * -1) 0 0 0 var(--edge), var(--u) 0 0 0 var(--edge),
    0 calc(var(--u) * 3) 0 0 var(--drop),
    inset 0 var(--u) 0 0 var(--hi), inset var(--u) 0 0 0 var(--hi),
    inset 0 calc(var(--u) * -1) 0 0 var(--lo), inset calc(var(--u) * -1) 0 0 0 var(--lo); }
.px-btn:active { transform: translateY(var(--u));
  box-shadow:
    0 calc(var(--u) * -1) 0 0 var(--edge), 0 var(--u) 0 0 var(--edge),
    calc(var(--u) * -1) 0 0 0 var(--edge), var(--u) 0 0 0 var(--edge),
    0 var(--u) 0 0 var(--drop),
    inset 0 var(--u) 0 0 var(--lo), inset 0 calc(var(--u) * -1) 0 0 var(--hi); }
.px-btn:focus-visible { outline: var(--u) solid #ffcf78; outline-offset: calc(var(--u) * 2); }

/* style 1: Moonstone, pale and bright like the moon (closest to the current button) */
.px-btn.moonstone { }
/* style 2: Lantern, a dark glass panel with a warm gold frame */
.px-btn.lantern { --face: #0f222d; --edge: #ffcf78; --hi: #2a4652; --lo: #071219; --ink: #ffd88a; --drop: #3a1f14;
  text-shadow: 0 calc(var(--u) * 0.6) 0 #a3402f; }
.px-btn.lantern:hover { --edge: #fff0c2; --ink: #fff0c2; }
/* style 3: Crystal, cyan facets that shimmer on hover */
.px-btn.crystal { --face: #2cc6d0; --edge: #0b3f49; --hi: #d0fffb; --lo: #17818f; --ink: #06252d; --drop: #082a33;
  overflow: hidden; }
.px-btn.crystal::after { content: ""; position: absolute; top: 0; bottom: 0; left: -30%; width: calc(var(--u) * 2);
  background: #d0fffb; opacity: 0; transform: skewX(-20deg); }
.px-btn.crystal:hover::after { opacity: .8; animation: px-shimmer 600ms steps(10) 1; }
@keyframes px-shimmer { from { left: -10% } to { left: 110% } }

/* secondary link: small pixel caps with a dotted pixel underline and nudging arrows */
.px-link { --u: var(--px, 5px); display: inline-flex; gap: calc(var(--u) * 1.4); align-items: baseline;
  font: 400 max(12px, calc(var(--u) * 2.8)) / 1.6 "Silkscreen", ui-monospace, monospace; letter-spacing: calc(var(--u) * 0.3);
  color: #e6e8fb; text-decoration: none; text-transform: uppercase; padding-bottom: var(--u);
  text-shadow: 0 calc(var(--u) * .4) 0 #10173a;
  background: repeating-linear-gradient(90deg, #66efef 0 var(--u), transparent var(--u) calc(var(--u) * 2)) bottom / 100% var(--u) no-repeat; }
.px-link .arrows { display: inline-block; transition: transform 150ms steps(2); }
.px-link:hover { color: #ffffff; }
.px-link:hover .arrows { transform: translateX(var(--u)); }
.px-link:focus-visible { outline: var(--u) solid #ffcf78; outline-offset: var(--u); }

/* stop-the-line: a stone rail with a glowing target and a lantern marker */
.px-stop { --u: var(--px, 5px); display: grid; gap: calc(var(--u) * 2); justify-items: center; }
.px-stop .label { font: 400 max(11px, calc(var(--u) * 2.6)) / 1 "Silkscreen", ui-monospace, monospace; letter-spacing: calc(var(--u) * 0.4);
  color: #cfe9e8; text-transform: uppercase; }
.px-stop .rail { position: relative; width: 100%; height: calc(var(--u) * 4); background: #0b1d28;
  box-shadow: 0 calc(var(--u) * -1) 0 0 #3c4a6c, 0 var(--u) 0 0 #3c4a6c, calc(var(--u) * -1) 0 0 0 #3c4a6c,
    var(--u) 0 0 0 #3c4a6c, inset 0 var(--u) 0 0 #07131b; }
.px-stop .zone { position: absolute; top: var(--u); bottom: var(--u); background: #17818f;
  box-shadow: inset 0 var(--u) 0 0 #66efef; }
.px-stop .marker { position: absolute; top: calc(var(--u) * -1); width: var(--u); height: calc(var(--u) * 6);
  background: #ffcf78; box-shadow: 0 0 0 var(--u) #a3402f, inset 0 var(--u) 0 0 #fff0c2; }
.px-stop .result { min-height: max(12px, calc(var(--u) * 3)); font: 400 max(11px, calc(var(--u) * 2.6)) / 1 "Silkscreen", ui-monospace, monospace;
  letter-spacing: calc(var(--u) * 0.3); color: #ffd88a; text-transform: uppercase; }
.px-btn.small { font-size: max(13px, calc(var(--u) * 3.4));
  padding: max(7px, calc(var(--u) * 2)) max(16px, calc(var(--u) * 5)) max(8px, calc(var(--u) * 2.4)); }

@media (prefers-reduced-motion: reduce) { .px-btn, .px-link .arrows { transition: none; } .px-btn.crystal:hover::after { animation: none; } }