/* One unit, --u, is the size of a world pixel. Everything chunky is a whole number of them. */
:root {
  --u: 2px;
  --ink: #140a26;
  --cream: #fff6df;
  --gold: #ffd23f;
  --name: 3;      /* link name, CSS pixels per font pixel */
  --line: 1.5;    /* link line */
  --small: 1.5;   /* small labels */
  --heading: 2;
  --who: 3;
  --tag: 1.5;
  --title: 5;
  --icon: 3;
  --depth: calc(var(--u) * 4);
  --gap: calc(var(--u) * 10);
  --key: 44px;
  --keyart: 2;
}
@media (min-width: 420px) { :root { --line: 2; --small: 2; --tag: 2; } }
@media (min-width: 700px) { :root { --u: 3px; --title: 6; --depth: calc(var(--u) * 3); --gap: calc(var(--u) * 5); --who: 3; --icon: 3; --heading: 3; } }
@media (min-width: 1700px) { :root { --u: 4px; --title: 7; --name: 4; --line: 2.5; --small: 2.5; --heading: 3; --who: 4; --tag: 3; --icon: 4; --gap: calc(var(--u) * 6); --key: 56px; --keyart: 3; } }

* { box-sizing: border-box; }
html { background: #2469e6; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  color: var(--cream);
  font: 16px/1.5 ui-monospace, Menlo, Consolas, monospace;
  -webkit-tap-highlight-color: transparent;
}
canvas { display: block; image-rendering: pixelated; }
#stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
#fxw { position: fixed; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
#world, #fx { position: absolute; left: 0; top: 0; }

.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: fixed; left: 8px; top: -100px; z-index: 9; padding: 10px 14px;
  background: var(--ink); color: var(--cream); font-weight: 700;
}
.skip:focus { top: 8px; }

/* ---- Top bar ---- */
.hud {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 3);
  width: 100%; max-width: calc(var(--u) * 320); margin: 0 auto;
  padding: calc(var(--u) * 2) calc(var(--u) * 4) 0;
}
.hud[hidden] { display: none; }
.clock { display: flex; align-items: center; gap: calc(var(--u) * 2); flex: 1; min-width: 0; }
.tools { display: flex; gap: calc(var(--u) * 2); flex: none; }
.px-time { --px: var(--small); flex: none; }
.key {
  --c: #2b1d55;
  appearance: none; border: 0; margin: 0; padding: 0;
  min-width: var(--key); min-height: var(--key); width: var(--key); height: var(--key);
  position: relative; background: none; color: inherit; cursor: pointer;
  touch-action: manipulation;
}
.key > span.cap {
  position: absolute; inset: 0 0 calc(var(--u) * 2) 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--c);
  box-shadow: inset 0 var(--u) 0 rgba(255,255,255,.28), inset 0 calc(var(--u) * -1) 0 rgba(0,0,0,.3);
  clip-path: var(--notch);
}
.key::before {
  content: ''; position: absolute; inset: var(--u) 0 0 0; background: var(--ink); clip-path: var(--notch);
}
.key:hover > span.cap { filter: brightness(1.25); }
.key:active > span.cap { transform: translateY(calc(var(--u) * 2)); }
.key[aria-pressed="true"] > span.cap { --c: #a1450c; }
.key:focus-visible, input[type=range]:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; box-shadow: 0 0 0 2px var(--ink); }
.now { width: auto; flex: none; --c: #a1450c; }
.now[hidden] { display: none; }
.now > span.cap { position: relative; inset: auto; height: calc(100% - var(--u) * 2); padding: 0 calc(var(--u) * 3); }
.now { --px: var(--small); min-width: 52px; }

input[type=range] {
  appearance: none; -webkit-appearance: none; flex: 1; min-width: 0; max-width: calc(var(--u) * 90);
  height: var(--key); margin: 0; background: transparent; cursor: pointer; touch-action: pan-y;
}
input[type=range]::-webkit-slider-runnable-track {
  height: calc(var(--u) * 5);
  background: linear-gradient(90deg, #15144c 0 20%, #dc6f9c 25%, #3a97f6 32% 72%, #ff8f62 78%, #4f277e 82%, #15144c 86% 100%);
  border: var(--u) solid var(--ink);
}
input[type=range]::-moz-range-track {
  height: calc(var(--u) * 5);
  background: linear-gradient(90deg, #15144c 0 20%, #dc6f9c 25%, #3a97f6 32% 72%, #ff8f62 78%, #4f277e 82%, #15144c 86% 100%);
  border: var(--u) solid var(--ink);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: calc(var(--u) * 7); height: calc(var(--u) * 9);
  margin-top: calc(var(--u) * -3); background: var(--gold); border: var(--u) solid var(--ink); border-radius: 0;
  box-shadow: inset 0 var(--u) 0 #fff6b8, inset 0 calc(var(--u) * -1) 0 #d98a12;
}
input[type=range]::-moz-range-thumb {
  width: calc(var(--u) * 5); height: calc(var(--u) * 7); background: var(--gold); border: var(--u) solid var(--ink); border-radius: 0;
}

/* ---- Hero ---- */
main {
  position: relative; z-index: 1; flex: 1;
  width: 100%; max-width: calc(var(--u) * 320); margin: 0 auto;
  padding: calc(var(--u) * 6) calc(var(--u) * 8) calc(var(--u) * 66);
}
.hero { text-align: center; margin-bottom: calc(var(--u) * 7); }
h1 { margin: 0; display: flex; justify-content: center; align-items: flex-end; gap: calc(var(--u) * 1); }
h1 canvas { cursor: pointer; touch-action: manipulation; will-change: transform; }
.letter { display: block; transition: transform .22s steps(4); }
.letter.hop { transform: translateY(calc(var(--u) * -7)); transition-duration: .08s; }
.letter.party { animation: party .7s steps(6) infinite; }
@keyframes party { 50% { transform: translateY(calc(var(--u) * -9)); } }
.letter.fall { animation: drop .62s cubic-bezier(.3,0,.55,1) both; }
@keyframes drop {
  0% { transform: translateY(-240px); }
  58% { transform: translateY(0); }
  74% { transform: translateY(-22px); }
  90% { transform: translateY(0); }
  95% { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}
.who, .tag { margin: calc(var(--u) * 3) 0 0; display: flex; justify-content: center; }
.who { --px: var(--who); }
.tag { --px: var(--tag); margin-top: calc(var(--u) * 2); }

/* ---- Links ---- */
#links { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--u) * 6) calc(var(--u) * 14); outline: none; max-width: calc(var(--u) * 190); margin: 0 auto; }
.pile { min-width: 0; }
.pile h2 { margin: 0 0 var(--gap); --px: var(--heading); }
.pile ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
:root {
  --notch: polygon(
    var(--u) 0, calc(100% - var(--u)) 0, calc(100% - var(--u)) var(--u), 100% var(--u),
    100% calc(100% - var(--u)), calc(100% - var(--u)) calc(100% - var(--u)), calc(100% - var(--u)) 100%,
    var(--u) 100%, var(--u) calc(100% - var(--u)), 0 calc(100% - var(--u)), 0 var(--u), var(--u) var(--u));
}
.btn {
  position: relative; display: block; color: var(--cream); text-decoration: none;
  padding: var(--u) var(--u) calc(var(--depth) + var(--u));
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.btn .rim { position: absolute; inset: 0; background: var(--ink); clip-path: var(--notch); }
.btn .side { position: absolute; left: var(--u); right: var(--u); bottom: var(--u); height: calc(var(--depth) + var(--u) * 3); background: var(--dk); }
.btn .face {
  position: relative; display: flex; align-items: center; gap: calc(var(--u) * 4);
  min-height: calc(var(--u) * 18);
  padding: calc(var(--u) * 2) calc(var(--u) * 4) calc(var(--u) * 2) calc(var(--u) * 2);
  background: var(--c);
  box-shadow: inset 0 var(--u) 0 var(--hi), inset var(--u) 0 0 var(--hi), inset 0 calc(var(--u) * -1) 0 var(--lo), inset calc(var(--u) * -1) 0 0 var(--lo);
  transition: transform .05s steps(2), filter .05s;
  overflow: hidden;
}
.btn .ico {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: calc(var(--icon) * 16px); height: calc(var(--icon) * 16px);
  background: var(--dk);
  box-shadow: inset 0 var(--u) 0 var(--ink), inset var(--u) 0 0 var(--ink), inset 0 calc(var(--u) * -1) 0 var(--hi), inset calc(var(--u) * -1) 0 0 var(--hi);
}
.btn .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--name) * 2px + 1px); }
.btn .name { --px: var(--name); display: block; }
.btn .line { --px: var(--line); display: block; }
.btn .go { flex: none; --px: var(--name); }
.btn .go canvas { transition: transform .1s steps(2); }

/* The shine that runs across on hover: stepped, like everything else. */
.btn .face::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -30%; width: calc(var(--u) * 8);
  background: rgba(255,255,255,.14); pointer-events: none; opacity: 0;
}
@media (hover: hover) {
  .btn:hover .face { filter: brightness(1.08); transform: translateY(calc(var(--u) * -1)); }
  .btn:hover .face::after { opacity: 1; animation: shine .55s steps(9) 1; }
  .btn:hover .go canvas { transform: translateX(var(--u)); }
  .btn:hover .ico canvas { animation: icon-hop .36s steps(2) infinite alternate; }
}
@keyframes shine { to { left: 110%; } }
@keyframes icon-hop { to { transform: translateY(calc(var(--u) * -1)); } }
.btn:active .face, .btn.down .face { transform: translateY(var(--depth)); filter: brightness(.9); }
.btn:focus-visible { outline: none; }
.btn:focus-visible .rim { background: var(--gold); }
.btn:focus-visible::after {
  content: ''; position: absolute; inset: calc(var(--u) * -1.5);
  outline: var(--u) dashed var(--gold); outline-offset: 0; box-shadow: 0 0 0 var(--u) var(--ink);
  pointer-events: none;
}

/* ---- Ground ---- */
.ground {
  position: relative; z-index: 1; flex: none;
  padding: calc(var(--u) * 24) calc(var(--u) * 8) calc(var(--u) * 4);
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2);
}
.foot { margin: 0; --px: var(--small); display: flex; justify-content: center; text-align: center; width: 100%; }
@media (min-width: 1100px) { .foot { width: auto; } }
.foot canvas { max-width: 100%; }

/* ---- Pointers ---- */
.pixel-cursor { cursor: var(--cur), auto; }
.pixel-cursor a, .pixel-cursor button, .pixel-cursor input, .pixel-cursor h1 canvas { cursor: var(--cur-hand), pointer; }
.pixel-cursor.can-grab, .pixel-cursor.can-grab * { cursor: var(--cur-grab), grab; }

/* ---- Toast ---- */
#toast {
  position: fixed; left: 50%; bottom: calc(var(--u) * 8); z-index: 5; transform: translate(-50%, 200%);
  background: var(--ink); padding: calc(var(--u) * 3) calc(var(--u) * 5);
  box-shadow: 0 0 0 var(--u) var(--gold); --px: var(--small); max-width: calc(100vw - 32px);
  transition: transform .2s steps(5); pointer-events: none; visibility: hidden;
}
#toast.on { transform: translate(-50%, 0); visibility: visible; }

.plain { background: var(--ink); padding: 16px; font-size: 18px; }
.plain p { margin: 0 0 12px; }
.plain ul { margin: 0; padding: 0; list-style: none; }
.plain li { margin: 8px 0; }
.plain a { color: var(--gold); }

/* ---- Two columns on wide screens: everything fits without scrolling ---- */
@media (min-width: 1100px) {
  #links { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: none; }
  main { padding-bottom: calc(var(--u) * 4); padding-top: calc(var(--u) * 2); }
  .hero { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; justify-content: center; align-content: center; column-gap: calc(var(--u) * 8); margin-bottom: calc(var(--u) * 3); }
  h1 { grid-row: 1 / span 2; }
  .who { align-self: end; margin: 0; justify-content: flex-start; }
  .tag { align-self: start; justify-content: flex-start; width: calc(var(--tag) * 225px); }
  .ground { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0 calc(var(--u) * 10); padding-bottom: calc(var(--u) * 2); }
}
@media (min-width: 1100px) and (max-width: 1365px) { main { padding-bottom: calc(var(--u) * 34); } }
@media (min-width: 1100px) and (max-height: 700px) { :root { --gap: calc(var(--u) * 4); } }

/* ---- Short screens, like a phone on its side: the links come first ---- */
@media (min-width: 620px) and (max-height: 640px) {
  :root { --title: 4; --gap: calc(var(--u) * 5); }
  main { padding-top: calc(var(--u) * 2); }
  .hero { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; justify-content: center; align-content: center; column-gap: calc(var(--u) * 8); margin-bottom: calc(var(--u) * 3); }
  h1 { grid-row: 1 / span 2; }
  .who { align-self: end; margin: 0; justify-content: flex-start; }
  .tag { align-self: start; margin-top: var(--u); justify-content: flex-start; width: calc(var(--tag) * 225px); }
}
@media (min-width: 620px) and (max-width: 699px) and (max-height: 640px) { :root { --tag: 1.5; --line: 1.5; } }
@media (min-width: 620px) and (max-height: 640px) {
  #links { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .btn { border: 2px solid LinkText; }
}