/* ─────────────────────────────────────────────────────────────
   6174 — Kaprekar's black hole
   Palette: an indigo void, with the 0→9 spectrum as the only colour.
   Every digit carries its own hue, so sorting them paints a rainbow.
   ───────────────────────────────────────────────────────────── */

:root{
  --void:      #0a0620;
  --void-deep: #05030f;
  --haze:      #2b1560;
  --ink:       #efeaff;
  --ink-2:     #cdc3ee;
  --muted:     #9083c9;
  --line:      rgba(160,140,255,.16);

  --tile: clamp(42px, min(15.5vw, 12vh), 104px);
  --gap:  clamp(6px, 1.6vw, 13px);
  --radius: calc(var(--tile) * .26);

  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --num:  ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "Quicksand",
          "Avenir Next", system-ui, sans-serif;

  --ease: cubic-bezier(.2,.9,.25,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ min-height:100%; scroll-behavior:smooth; scroll-padding-top: 84px; scrollbar-gutter: stable; }

body{
  min-height:100%;
  background: var(--void-deep);
  color: var(--ink);
  font-family: var(--num);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

/* While the routine runs, the overlay owns the screen: the page underneath
   is taken out entirely, so only the ambient background shows through. */
html.is-running, html.is-running body{ overflow:hidden; }
html.is-running main{ display:none; }

@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

/* The void: three sheets of light drifting slowly around the centre. */
body::before{
  content:"";
  position: fixed; inset: -30%;
  background:
    radial-gradient(38% 38% at 30% 32%, hsl(268 90% 40% / .40), transparent 70%),
    radial-gradient(34% 34% at 72% 66%, hsl(196 90% 42% / .26), transparent 70%),
    radial-gradient(46% 46% at 52% 50%, hsl(312 85% 42% / .22), transparent 72%);
  filter: blur(30px);
  animation: drift 34s linear infinite;
  z-index:-2;
}
/* The well at the centre. */
body::after{
  content:"";
  position: fixed; inset:0;
  background: radial-gradient(58% 58% at 50% 46%, transparent, var(--void) 58%, var(--void-deep));
  z-index:-1;
}
@keyframes drift{
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.12); }
  100% { transform: rotate(360deg) scale(1); }
}

#fx{
  position: fixed; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index: 6;
}

/* ── Top bar ──────────────────────────────────────────────── */
.topbar{
  position: fixed; top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:center;
  gap:12px;
  padding: max(12px, env(safe-area-inset-top)) clamp(14px, 4vw, 30px) 12px;
  font-family: var(--mono);
  font-size: clamp(9px, 2.4vw, 11px);
  letter-spacing:.16em; text-transform:uppercase;
  color: var(--muted);
  z-index: 5;
  pointer-events:none;
  background: linear-gradient(var(--void-deep), rgba(5,3,15,.72) 55%, transparent);
}
.brand i{ opacity:.45; font-style:normal; }
.counter b{ color: var(--ink); font-weight:600; }

/* ── Screens ──────────────────────────────────────────────── */
.screen{
  position: fixed; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: clamp(14px, 3vh, 30px);
  padding: clamp(58px, 11vh, 96px) clamp(14px, 4vw, 32px) max(20px, env(safe-area-inset-bottom));
  opacity:0; transform: scale(.97);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.screen.is-on{ opacity:1; transform:none; }
.screen[hidden]{ display:none; }
.screen--setup{ position:relative; min-height:100dvh; }
/* The run screen never scales: FLIP measures real rects inside it. */
.screen--run{ transform:none; z-index:4; }

/* ── Intro ────────────────────────────────────────────────── */
.intro{ text-align:center; display:grid; gap: clamp(8px, 1.6vh, 16px); }

.logo{
  display:flex; justify-content:center; gap: .04em;
  font-size: clamp(64px, min(21vw, 15vh), 168px);
  font-weight: 800; line-height:.9; letter-spacing:-.02em;
}
.logo span{
  color: hsl(var(--h) 95% 70%);
  text-shadow: 0 0 .5em hsl(var(--h) 95% 55% / .45);
  animation: bob 4.2s var(--ease) infinite;
  animation-delay: calc(var(--i) * .14s);
}
@keyframes bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-.06em) } }

.lede{
  max-width: 46ch; margin-inline:auto;
  font-size: clamp(13px, 3.4vw, 16px); line-height:1.55;
  color: var(--muted);
  text-wrap: balance;
}

/* ── Number slots ─────────────────────────────────────────── */
.slots{ display:flex; gap: var(--gap); }
.slot{
  width: var(--tile); height: var(--tile);
  border-radius: var(--radius);
  border: 1.5px dashed var(--line);
  display:grid; place-items:center;
  transition: border-color .25s, background .25s;
}
.slot:not(.is-empty){ border-color: transparent; }
.slot.is-empty::after{
  content:""; width:22%; height:1.5px; border-radius:2px;
  background: var(--line);
}

.hint{
  font-family: var(--mono); font-size: clamp(10px, 2.7vw, 12px);
  letter-spacing:.14em; text-transform:uppercase; color: var(--muted);
  min-height: 1.2em; text-align:center;
}
.hint.is-warn{ color: hsl(352 95% 72%); animation: nudge .4s var(--ease); }
@keyframes nudge{ 25%{ transform:translateX(-5px) } 75%{ transform:translateX(5px) } }

/* ── Keypad ───────────────────────────────────────────────── */
.keypad{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--gap);
  width: min(100%, calc(var(--tile) * 5.9));
}
.key{
  aspect-ratio: 1;
  border-radius: var(--radius);
  border: 1.5px solid hsl(var(--h) 90% 62% / .38);
  background: hsl(var(--h) 85% 52% / .10);
  color: hsl(var(--h) 95% 74%);
  font-family: var(--num);
  font-size: calc(var(--tile) * .5);
  font-weight: 700;
  cursor:pointer;
  transition: transform .16s var(--ease), background .2s, border-color .2s, opacity .3s, filter .3s;
}
.key:hover{ background: hsl(var(--h) 85% 55% / .22); transform: translateY(-2px); }
.key:active{ transform: scale(.93); }
.key[disabled]{
  cursor:default; opacity:.2; filter: grayscale(1);
  transform:none; background: transparent;
}
.key:focus-visible, .btn:focus-visible{
  outline: 2px solid var(--ink); outline-offset: 3px;
}

/* ── Buttons ──────────────────────────────────────────────── */
.actions{ display:flex; align-items:center; gap: clamp(8px, 2.4vw, 16px); flex-wrap:wrap; justify-content:center; }
.btn{
  font-family: var(--mono); font-size: clamp(11px, 2.9vw, 13px);
  letter-spacing:.14em; text-transform:uppercase;
  padding: .95em 1.5em; border-radius: 999px;
  border:1.5px solid var(--line); background:transparent; color: var(--muted);
  cursor:pointer;
  transition: color .2s, border-color .2s, background .2s, transform .16s var(--ease), opacity .25s;
}
.btn:hover{ color: var(--ink); border-color: rgba(200,180,255,.5); }
.btn:active{ transform: scale(.96); }
.btn--go{
  color: var(--void-deep); background: var(--ink); border-color: var(--ink);
  font-weight:700; padding-inline: 2.1em;
  box-shadow: 0 0 34px rgba(200,180,255,.28);
}
.btn--go:hover{ color: var(--void-deep); background:#fff; box-shadow: 0 0 46px rgba(220,205,255,.45); }
.btn[disabled]{ opacity:.28; cursor:default; }
.btn--go[disabled]{
  opacity:.22; cursor:default; box-shadow:none; transform:none;
  background: transparent; color: var(--muted); border-color: var(--line);
}

/* ── Digit tiles ──────────────────────────────────────────── */
.tiles{
  display:flex; gap: var(--gap);
  min-height: var(--tile);
  justify-content:center;
}
.tile{
  width: var(--tile); height: var(--tile);
  flex: 0 0 auto;
  display:grid; place-items:center;
  border-radius: var(--radius);
  border: 1.5px solid hsl(var(--h) 90% 62% / .5);
  background: hsl(var(--h) 85% 50% / .13);
  color: hsl(var(--h) 96% 74%);
  font-size: calc(var(--tile) * .52);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 .42em hsl(var(--h) 95% 55% / .5);
  box-shadow: 0 0 22px hsl(var(--h) 90% 50% / .16), inset 0 0 18px hsl(var(--h) 90% 60% / .07);
  position:relative;
  transition: opacity .35s var(--ease), transform .35s var(--ease), box-shadow .25s;
}
.tile.is-spent{ opacity:.26; transform: scale(.9); }
.tile.is-lit{
  box-shadow: 0 0 30px hsl(var(--h) 95% 58% / .6), inset 0 0 24px hsl(var(--h) 95% 62% / .22);
  background: hsl(var(--h) 88% 52% / .3);
}
.tile.is-void{ opacity:0; }
.tile.is-win{
  animation: win 1.4s var(--ease) infinite;
  border-color: hsl(var(--h) 95% 70% / .9);
  box-shadow: 0 0 46px hsl(var(--h) 95% 58% / .55), inset 0 0 26px hsl(var(--h) 95% 62% / .25);
}
@keyframes win{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8%) } }

/* Borrow: the little debt taken from the column on the left. */
.borrow{
  position:absolute; top:-.34em; right:-.2em;
  font-family: var(--mono); font-size: calc(var(--tile) * .18); font-weight:600;
  color: hsl(352 95% 76%);
  background: hsl(352 60% 22%); border:1px solid hsl(352 90% 62% / .55);
  border-radius:999px; padding:.15em .45em; line-height:1;
  animation: dropIn .3s var(--ease);
}
@keyframes dropIn{ from{ opacity:0; transform: translateY(-8px) scale(.6) } }

/* ── Stage ────────────────────────────────────────────────── */
.stage{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  gap: clamp(12px, 3.4vh, 34px);
}
.cur{ transition: transform .7s var(--ease); }
.cur.is-win{ transform: scale(1.15); }

/* Landed: the step count moves into the closing line, the row gets air. */
.screen--run.is-done .step{ opacity:0; }
.screen--run.is-done .stage{ margin-block: clamp(18px, 4.5vh, 52px); }
.step{ transition: opacity .4s var(--ease); }

.calc{
  display:grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  row-gap: var(--gap);
  align-items:center;
  opacity:0;
  transition: opacity .35s var(--ease);
}
.calc.is-on{ opacity:1; }
.lbl{
  grid-column:1; justify-self:end;
  padding-right: clamp(8px, 2.4vw, 18px);
  font-family: var(--mono); font-size: clamp(9px, 2.4vw, 12px);
  letter-spacing:.16em; text-transform:uppercase; color: var(--muted);
  white-space:nowrap;
}
.lbl--max{ grid-row:1; }
.lbl--min{ grid-row:2; }
.op{ color: var(--ink); font-size:1.5em; vertical-align:-.06em; margin-right:.35em; }
#maxTiles{ grid-column:2; grid-row:1; }
#minTiles{ grid-column:2; grid-row:2; }
.rule{
  grid-column:2; grid-row:3;
  height:2px; border-radius:2px;
  background: linear-gradient(90deg, transparent, rgba(210,190,255,.75), transparent);
  transform: scaleX(0); transform-origin:center;
  transition: transform .35s var(--ease);
}
.rule.is-on{ transform: scaleX(1); }
.tiles--res{ grid-column:2; grid-row:4; }

/* The shockwave, once, on arrival. */
.wave{
  position:absolute; left:50%; top:50%;
  width: 60px; height:60px; margin:-30px 0 0 -30px;
  border-radius:50%; border:2px solid rgba(220,200,255,.85);
  opacity:0; pointer-events:none;
}
.wave.is-on{ animation: shock 1.1s var(--ease) forwards; }
@keyframes shock{
  from{ opacity:.9; transform: scale(.2) }
  to  { opacity:0;  transform: scale(22) }
}

/* ── Step counter + trail ─────────────────────────────────── */
.step{
  font-family: var(--mono); font-size: clamp(10px, 2.7vw, 12px);
  letter-spacing:.2em; text-transform:uppercase; color: var(--muted);
}
.step b{
  color: var(--ink); font-size: 1.9em; font-family: var(--num);
  font-weight:800; letter-spacing:0; margin-left:.4em;
  display:inline-block; vertical-align:-.18em;
}
.step b.is-tick{ animation: tick .45s var(--ease); }
@keyframes tick{ from{ transform: translateY(.5em) scale(.6); opacity:0 } }

.trail{
  display:flex; flex-wrap:wrap; gap:.55em; justify-content:center;
  font-family: var(--mono); font-size: clamp(10px, 2.7vw, 13px);
  letter-spacing:.08em; color: var(--muted);
  min-height: 1.4em; padding-inline: 10px;
}
.trail span{ animation: dropIn .35s var(--ease); }
.trail span.sep{ opacity:.4; }
.trail span.is-last{ color: var(--ink); }

/* ── Ending ───────────────────────────────────────────────── */
.outro{
  display:grid; gap: clamp(6px, 1.6vh, 14px); justify-items:center;
  text-align:center;
  animation: dropIn .5s var(--ease);
}
.outro[hidden]{ display:none; }
.outro__title{ font-size: clamp(19px, 5.4vw, 28px); font-weight:800; letter-spacing:-.01em; }
.outro__sub{
  font-family: var(--mono); font-size: clamp(10px, 2.7vw, 12px);
  letter-spacing:.14em; text-transform:uppercase; color: var(--muted);
  margin-bottom: .6em;
}


/* ── Scroll cue ───────────────────────────────────────────── */
.cue{
  margin-top: clamp(2px, 2vh, 18px);
  font-family: var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color: var(--muted); text-decoration:none;
  padding: 10px 6px;
  transition: color .2s;
}
.cue::after{
  content:"↓"; display:block; margin-top:5px; font-size:13px; letter-spacing:0;
  animation: sink 2.6s var(--ease) infinite;
}
.cue:hover{ color: var(--ink); }
@keyframes sink{ 0%,100%{ transform:translateY(0); opacity:.5 } 50%{ transform:translateY(4px); opacity:1 } }
@media (max-height: 780px){ .cue{ display:none; } }

/* ── The written half of the page ─────────────────────────── */
.doc{
  max-width: 66ch;
  margin: 0 auto;
  padding: clamp(40px, 9vh, 96px) clamp(20px, 5vw, 32px) clamp(56px, 12vh, 120px);
  font-size: clamp(15px, 2.9vw, 17px);
  line-height: 1.68;
  color: var(--ink-2);
}
.doc section + section{ margin-top: clamp(40px, 8vh, 72px); }
.doc p + p, .doc p + .scroller, .doc .scroller + p{ margin-top: 1.1em; }

.eyebrow{
  font-family: var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color: var(--muted);
}
.doc h2{
  font-size: clamp(23px, 5.2vw, 31px); font-weight:800; letter-spacing:-.015em;
  color: var(--ink); text-wrap:balance;
  margin: .35em 0 .7em;
}
.doc h3{
  font-size: clamp(16px, 3.6vw, 19px); font-weight:700;
  color: var(--ink);
  margin: 1.9em 0 .4em;
}
.doc b{ color: var(--ink); font-weight:700; }
.doc em{ font-style:italic; color: var(--ink); }
.doc a{ color: hsl(196 92% 70%); text-decoration:none; border-bottom:1px solid hsl(196 92% 70% / .35); }
.doc a:hover{ border-bottom-color: hsl(196 92% 70%); }

.steps{
  list-style:none; counter-reset: s;
  display:grid; gap:.55em;
  margin: 1.1em 0;
}
.steps li{
  counter-increment: s;
  position:relative; padding-left: 2em;
}
.steps li::before{
  content: counter(s);
  position:absolute; left:0; top:.1em;
  font-family: var(--mono); font-size:.78em; color: hsl(196 92% 70%);
}

.scroller{ overflow-x:auto; margin: 1.2em 0; }
.doc table{
  border-collapse: collapse;
  width:100%; min-width: 340px;
  font-variant-numeric: tabular-nums;
  font-size:.94em;
}
.doc caption{
  text-align:left; padding-bottom:.7em;
  font-family: var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--muted);
}
.doc th, .doc td{
  padding: .55em .9em .55em 0; text-align:left;
  border-bottom: 1px solid var(--line);
}
.doc th{
  font-family: var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:400; color: var(--muted);
}
.doc tbody tr:last-child td{ border-bottom:0; }
.doc td .note{ color: var(--muted); font-size:.85em; }

.doc__foot{
  margin-top: clamp(40px, 8vh, 72px);
  padding-top: clamp(20px, 4vh, 32px);
  border-top: 1px solid var(--line);
  display:grid; gap:.7em;
}
.up{ font-weight:700; }
.reading{ font-size:.88em; color: var(--muted); }
.credit{
  font-family: var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color: var(--muted); opacity:.75;
}

/* ── Narrow screens ───────────────────────────────────────── */
/* Narrow screens: the labels give up room so the digits stay centred. */
@media (max-width: 480px){
  .lbl{ font-size:9px; letter-spacing:.08em; padding-right:6px; }
  .op{ font-size:1.35em; margin-right:.2em; }
}

@media (prefers-reduced-motion: reduce){
  body::before{ animation:none; }
  .logo span, .tile.is-win{ animation:none; }
}