/* Down Words: two skyscrapers high in a pale sky, a navy-and-cyan pixel look.
   --p is one game pixel (set by js/scene.js); the scene is laid out in whole game pixels.
   --tp is one pixel of UI text, kept smaller so text stays readable. */

:root {
  --p: 3px;
  --tp: 2px;
  --modal-w: 152;

  --ink: #e8f1ff;
  --muted: #7d93b8;
  --cyan: #4de3ff;
  --pink: #ff5d8f;
  --mint: #7cffb2;
  --lamp: #ffd66b;
  --panel: #0d1830;
  --panel-2: #101d33;
  --deep: #050a14;
  --edge: #1b3050;

  --facade: #2a3a66;
  --facade-hi: #3a4f86;
  --facade-dark: #1c2849;
  --slab: #131e3d;
  --sign-ink: #14204a;

  --font: 'Tiny5', ui-monospace, monospace;
  --sign: 'VT323', ui-monospace, monospace;
  --text: calc(var(--tp) * 8);

  /* the two panel looks: a quiet ring, and a cyan ring */
  --ring: 0 0 0 2px var(--deep), 0 0 0 4px var(--edge), 0 4px 0 4px #0b1424;
  --ring-cyan: 0 0 0 3px var(--deep), 0 0 0 6px var(--cyan), 0 8px 0 6px #123048;
  --chroma: -2px 1px 0 rgba(255, 93, 143, 0.8), 2px -1px 0 rgba(77, 227, 255, 0.7);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--deep);
  color: var(--ink);
  font: var(--text) / var(--text) var(--font);
  font-synthesis: none;
  font-variant-ligatures: none;
  -webkit-font-smoothing: none;
  overflow: hidden;
}

button, input { font: inherit; font-variant-ligatures: none; }
canvas, svg { display: block; image-rendering: pixelated; }

/* CRT scanlines over everything, like a monitor */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  background: repeating-linear-gradient(to bottom, rgba(8, 16, 40, 0.07) 0 1px, transparent 1px 3px);
}

:focus-visible { outline: 2px dashed var(--lamp); outline-offset: 5px; }

/* ---------- top bar ---------- */
.bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px 0;
  pointer-events: none;
}
.bar > * { pointer-events: auto; }

.crossing {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 5px;
  background: var(--panel);
  box-shadow: var(--ring);
}
.chip { color: var(--mint); text-transform: capitalize; }
.chip[data-d='medium'] { color: var(--lamp); }
.chip[data-d='hard'] { color: var(--pink); }
.crossing .mode { color: var(--muted); }

.icons { display: flex; gap: 12px; }
.icon-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0; padding: 0;
  color: var(--ink);
  background: var(--panel);
  cursor: pointer;
  box-shadow: var(--ring);
}
.icon-btn:hover { color: var(--cyan); }
.icon-btn:active { transform: translateY(2px); }
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn svg.wide { width: 18px; }
.icon-btn[aria-pressed='false'] .wave { display: none; }

/* ---------- the world ---------- */
.stage { position: fixed; inset: 0; overflow: hidden; }

.world {
  position: absolute;
  left: 0; right: 0; top: 0;
  transition: transform 0.85s cubic-bezier(0.45, 0, 0.2, 1);
  background: #0b1030 no-repeat 0 0;
  image-rendering: pixelated;
}
.world.fast { transition-duration: 1.5s; transition-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }

.sky-cloud { position: absolute; opacity: 0.95; animation: drift 40s steps(var(--steps, 12)) infinite alternate; }
@keyframes drift {
  from { transform: translateX(0); }
  to { transform: translateX(var(--drift, 36px)); }
}

.city { position: absolute; top: 0; height: 100%; }

.title { position: absolute; inset: 0 0 auto 0; }
.title > * { position: absolute; margin: 0; }
.title .tagline, .title .subline { left: 0; right: 0; text-align: center; }
.title .tagline { color: #1d6a94; letter-spacing: 0.3em; }
.title .subline { color: #3a4f86; }

/* towers */
.tower { position: absolute; }
.beacon { animation: beacon 1.6s steps(1) infinite; }
@keyframes beacon { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.15; } }

.roof { overflow: hidden; }
.floor { position: relative; background: var(--facade); }
.tower.left .floor { box-shadow: inset -8px 0 0 var(--facade-dark), inset 4px 0 0 var(--facade-hi); }
.tower.right .floor { box-shadow: inset 8px 0 0 var(--facade-dark), inset -4px 0 0 var(--facade-hi); }
.floor::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--slab-h);
  background: var(--slab);
  border-top: 2px solid #3a5287;
}

.window {
  position: absolute;
  top: 8px;
  bottom: calc(var(--slab-h) + 7px);
  overflow: hidden;
  background: linear-gradient(to bottom, #1b2d58, #14234a);
  box-shadow: inset 0 0 0 3px #10173a;
}
.tower.left .window { left: 9px; right: 14px; }
.tower.right .window { left: 14px; right: 9px; }
.floor.base .window { background: linear-gradient(to bottom, #18264b, #111c3b); }

/* reflections on the glass sit above everything in the window */
.window::after {
  content: '';
  position: absolute;
  inset: 3px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 0 20%, rgba(255, 255, 255, 0.26) 20% 28%,
    transparent 28% 34%, rgba(255, 255, 255, 0.14) 34% 38%, transparent 38%);
}
.floor.base .window::after { opacity: 0.4; }

/* the clue words, painted like signs inside the offices */
.window .word {
  position: absolute;
  inset: 3px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  text-align: center;
  color: var(--sign-ink);
  font-family: var(--sign);
  font-size: var(--word-size, 26px);
  line-height: 0.9;
  opacity: 0;
}
.window .blinds {
  position: absolute;
  inset: 3px;
  z-index: 2;
  transform-origin: top;
  background: repeating-linear-gradient(to bottom, #2e4273 0 5px, #233562 5px 8px);
  transition: transform 0.55s steps(7);
}
.window.lit { background: linear-gradient(to bottom, #fff1c4, #ffd47c); animation: flicker 0.5s steps(1); }
.window.lit .word { opacity: 1; }
.window.lit .blinds { transform: scaleY(0); }
.window.instant { animation: none; }
.window.instant .blinds { transition: none; }
@keyframes flicker {
  0% { filter: brightness(0.4); }
  20% { filter: brightness(1.15); }
  35% { filter: brightness(0.5); }
  55%, 100% { filter: none; }
}

/* round over: windows explain themselves on hover, focus or tap */
.show-links .window.lit { cursor: help; }
.show-links .window.lit:hover,
.show-links .window.lit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--lamp), 0 0 16px 2px rgba(255, 214, 107, 0.6);
}

.why {
  position: fixed;
  z-index: 35;
  max-width: min(300px, calc(100vw - 16px));
  padding: 8px 12px 9px;
  background: var(--panel);
  box-shadow: 0 0 0 3px var(--deep), 0 0 0 6px var(--lamp), 0 5px 0 6px #3d2f0c;
  pointer-events: none;
}
.why[hidden] { display: none; }
.why::after {
  content: '';
  position: absolute;
  left: var(--arrow-x, 50%);
  top: calc(100% + 6px);
  width: calc(var(--p) * 7);
  height: calc(var(--p) * 4);
  background:
    linear-gradient(var(--lamp), var(--lamp)) 0 0 / calc(var(--p) * 7) var(--p) no-repeat,
    linear-gradient(var(--lamp), var(--lamp)) var(--p) var(--p) / calc(var(--p) * 5) var(--p) no-repeat,
    linear-gradient(var(--lamp), var(--lamp)) calc(var(--p) * 2) calc(var(--p) * 2) / calc(var(--p) * 3) var(--p) no-repeat,
    linear-gradient(var(--lamp), var(--lamp)) calc(var(--p) * 3) calc(var(--p) * 3) / var(--p) var(--p) no-repeat;
}
.why.below::after { top: auto; bottom: calc(100% + 6px); transform: scaleY(-1); }
.why-word { color: var(--muted); }
.why-text { margin-top: 4px; line-height: 1.3; }
.hl-answer { color: var(--mint); }
.hl-clue { color: var(--lamp); }

/* glass bridges */
.bridge { position: absolute; }
.bridge .glass {
  position: absolute;
  top: 0; bottom: 0; left: 6px; right: 6px;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 2px), rgba(255, 255, 255, 0.55) calc(25% - 2px) 25%),
    rgba(170, 240, 255, 0.5);
  border-top: 2px solid rgba(255, 255, 255, 0.95);
  border-bottom: 2px solid rgba(77, 227, 255, 0.95);
}
.bridge .stub {
  position: absolute;
  top: -3px; bottom: -3px;
  width: 6px;
  background: #8fa6cf;
  box-shadow: inset 0 2px 0 #c7d4ee;
}
.bridge .stub.l { left: 0; }
.bridge .stub.r { right: 0; }
.bridge.broken .glass { display: none; }
/* jagged leftovers of glass on each bracket, in pixel steps */
.bridge.broken .stub::after {
  content: '';
  position: absolute;
  top: var(--p);
  width: calc(var(--p) * 5);
  height: calc(var(--p) * 3);
  background:
    linear-gradient(#ffffff, #ffffff) 0 0 / calc(var(--p) * 5) var(--p) no-repeat,
    linear-gradient(#c8f6ff, #c8f6ff) 0 var(--p) / calc(var(--p) * 3) var(--p) no-repeat,
    linear-gradient(#c8f6ff, #c8f6ff) 0 calc(var(--p) * 2) / var(--p) var(--p) no-repeat;
}
.bridge.broken .stub.l::after { left: calc(var(--p) * 2); }
.bridge.broken .stub.r::after { right: calc(var(--p) * 2); transform: scaleX(-1); }
.bridge.solid .glass {
  background: rgba(124, 255, 178, 0.55);
  border-color: #eafff2 transparent var(--mint);
  box-shadow: 0 0 18px rgba(124, 255, 178, 0.75);
}

.cracks { position: absolute; left: 0; top: calc(var(--p) * -2); pointer-events: none; }

.shard { position: absolute; background: rgba(190, 245, 255, 0.85); pointer-events: none; }
.shard.bright { background: #ffffff; }

/* ---------- the climber ---------- */
.hero { position: absolute; z-index: 5; }
.hero-body { position: relative; }
.hero-svg { overflow: visible; }

/* every frame is hidden unless the current mood shows it */
.hero .f { display: none; }

/* idle: the B frame flaps the scarf and glances down. The lower the floor, the faster it comes. */
.hero[data-mood='idle'][data-fear='0'] .f-i0a { display: inline; animation: look-a 3.2s steps(1) infinite; }
.hero[data-mood='idle'][data-fear='0'] .f-i0b { display: inline; animation: look-b 3.2s steps(1) infinite; }
.hero[data-mood='idle'][data-fear='1'] .f-i1a { display: inline; animation: look-a 2.2s steps(1) infinite; }
.hero[data-mood='idle'][data-fear='1'] .f-i1b { display: inline; animation: look-b 2.2s steps(1) infinite; }
.hero[data-mood='idle'][data-fear='2'] .f-i2a { display: inline; animation: look-a 1.4s steps(1) infinite; }
.hero[data-mood='idle'][data-fear='2'] .f-i2b { display: inline; animation: look-b 1.4s steps(1) infinite; }
.hero[data-mood='idle'][data-fear='3'] .f-i3a { display: inline; animation: frame-a 0.9s steps(1) infinite; }
.hero[data-mood='idle'][data-fear='3'] .f-i3b { display: inline; animation: frame-b 0.9s steps(1) infinite; }
.hero[data-mood='idle'][data-fear='4'] .f-i4a { display: inline; animation: frame-a 0.5s steps(1) infinite; }
.hero[data-mood='idle'][data-fear='4'] .f-i4b { display: inline; animation: frame-b 0.5s steps(1) infinite; }
.hero[data-mood='idle'][data-fear='0'] .f-blink,
.hero[data-mood='idle'][data-fear='1'] .f-blink,
.hero[data-mood='idle'][data-fear='2'] .f-blink { display: inline; animation: blink 3.7s steps(1) infinite; }

@keyframes frame-a { 0% { visibility: visible; } 50% { visibility: hidden; } }
@keyframes frame-b { 0% { visibility: hidden; } 50% { visibility: visible; } }
@keyframes look-a { 0% { visibility: visible; } 68% { visibility: hidden; } }
@keyframes look-b { 0% { visibility: hidden; } 68% { visibility: visible; } }
@keyframes blink { 0% { visibility: hidden; } 30% { visibility: visible; } 34% { visibility: hidden; } }

/* shivering gets worse floor by floor */
.hero[data-mood='idle'][data-fear='1'] .hero-body { animation: shiver-soft 2.2s steps(1) infinite; }
.hero[data-mood='idle'][data-fear='2'] .hero-body { animation: shiver-soft 1.1s steps(1) infinite; }
.hero[data-mood='idle'][data-fear='3'] .hero-body { animation: shiver 0.16s steps(1) infinite; }
.hero[data-mood='idle'][data-fear='4'] .hero-body { animation: shiver 0.1s steps(1) infinite; }
.hero[data-mood='uhoh'] .hero-body,
.hero[data-mood='hang'] .hero-body { animation: shiver 0.1s steps(1) infinite; }
@keyframes shiver-soft {
  0% { transform: none; } 84% { transform: translateX(calc(var(--px) * -1)); }
  88% { transform: translateX(var(--px)); } 92% { transform: translateX(calc(var(--px) * -1)); } 96% { transform: none; }
}
@keyframes shiver { 0% { transform: translateX(calc(var(--px) * -1)); } 50% { transform: translateX(var(--px)); } }

/* the big moments */
.hero[data-mood='uhoh'] .f-uhoh { display: inline; }
.hero[data-mood='hang'] .f-hang { display: inline; }
.hero[data-mood='falling'] .f-fallA { display: inline; animation: frame-a 0.16s steps(1) infinite; }
.hero[data-mood='falling'] .f-fallB { display: inline; animation: frame-b 0.16s steps(1) infinite; }
.hero[data-mood='land'] .f-land { display: inline; }
.hero[data-mood='dizzy'] .f-dizzy { display: inline; }
.hero[data-mood='cheer'] .f-cheer { display: inline; }

/* speed lines streaming above the head while falling */
.hero .speed {
  position: absolute;
  bottom: 100%;
  left: calc(var(--px) * 3);
  width: var(--px);
  height: calc(var(--px) * 7);
  display: none;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: calc(var(--px) * 3) calc(var(--px) * -3) 0 rgba(255, 255, 255, 0.6), calc(var(--px) * 6) calc(var(--px) * -1) 0 rgba(255, 255, 255, 0.8);
}
.hero[data-mood='falling'] .speed { display: block; animation: speed 0.12s steps(1) infinite; }
@keyframes speed { 0% { opacity: 0.9; } 50% { opacity: 0.4; } }

/* stars circling a dizzy head */
.hero .stars { position: absolute; left: calc(var(--px) * 6); top: calc(var(--px) * -2); width: 0; height: 0; display: none; }
.hero[data-mood='dizzy'] .stars { display: block; }
.stars i {
  position: absolute;
  width: var(--px); height: var(--px);
  background: #ffe680;
  box-shadow: var(--px) 0 #ffe680, calc(var(--px) * -1) 0 #ffe680, 0 var(--px) #ffe680, 0 calc(var(--px) * -1) #ffe680;
  animation: orbit 0.6s steps(1) infinite;
}
.stars i:nth-child(2) { animation-delay: -0.2s; }
.stars i:nth-child(3) { animation-delay: -0.4s; }
@keyframes orbit {
  0% { transform: translate(calc(var(--px) * -6), 0); }
  25% { transform: translate(0, var(--px)); }
  50% { transform: translate(calc(var(--px) * 6), 0); }
  75% { transform: translate(0, calc(var(--px) * -2)); opacity: 0.6; }
}

/* particles */
.dust { position: absolute; z-index: 5; background: #f2f0ff; pointer-events: none; }
.glint { position: absolute; z-index: 6; background: #ffffff; box-shadow: 0 0 6px #bff6ff; pointer-events: none; }
.puff { position: absolute; z-index: 9; background: #ffffff; pointer-events: none; }
.flash { position: absolute; z-index: 4; pointer-events: none; background: rgba(230, 252, 255, 0.9); }

/* ---------- the guess box under the climber ---------- */
.guess {
  position: absolute;
  z-index: 9; /* stays readable above the cloud sea */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: top 0.45s steps(var(--fh-steps, 30)), opacity 0.3s;
}
.guess input {
  display: block;
  width: 100%;
  height: calc(var(--p) * 13);
  margin: 0;
  padding: 2px 8px 0;
  border: 0;
  border-radius: 0;
  font: calc(var(--text) * 1.25) / 1 var(--font);
  text-align: center;
  color: var(--ink);
  caret-color: var(--cyan);
  background: var(--panel);
  box-shadow: 0 0 0 3px var(--deep), 0 0 0 6px var(--cyan), 0 5px 0 6px #123048;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.guess input::placeholder { color: #4b6189; }
.guess input:focus { box-shadow: 0 0 0 3px var(--deep), 0 0 0 6px var(--cyan), 0 5px 0 6px #123048, 0 0 22px 6px rgba(77, 227, 255, 0.45); }
.guess input:disabled { opacity: 1; -webkit-text-fill-color: currentColor; }
.guess.won input { color: var(--mint); box-shadow: 0 0 0 3px var(--deep), 0 0 0 6px var(--mint), 0 5px 0 6px #0f4a33, 0 0 26px 6px rgba(124, 255, 178, 0.45); }
.guess.lost input { color: var(--pink); box-shadow: 0 0 0 3px var(--deep), 0 0 0 6px var(--pink), 0 5px 0 6px #4a1230; }
.guess.shake { animation: shake 0.36s steps(6); }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* small tags: hints under the box, and wrong guesses on the broken panes */
.tag {
  padding: 2px 6px 1px;
  line-height: calc(var(--p) * 6);
  text-align: center;
  background: var(--panel);
  box-shadow: 0 0 0 2px var(--deep), 0 0 0 3px var(--edge);
}
.tag:empty, .tag[hidden] { display: none; }
.guess .hint { margin-top: calc(var(--p) * 3); }
.guess.lost .hint { order: -1; margin: 0 0 calc(var(--p) * 3); }
.guess .whyhint { display: none; margin-top: calc(var(--p) * 2); }
.guess.won .whyhint, .guess.lost .whyhint { display: block; }
.miss {
  position: absolute;
  z-index: 4;
  white-space: nowrap;
  text-decoration: line-through;
  background: rgba(5, 10, 20, 0.78);
  box-shadow: none;
}

/* floor of the world: a sea of clouds */
.sea { position: absolute; left: 0; right: 0; bottom: 0; z-index: 8; background: no-repeat 0 0; image-rendering: pixelated; }

/* ---------- toast ---------- */
.toast {
  position: fixed;
  top: 66px;
  left: 0;
  z-index: 30;
  padding: 7px 14px 5px;
  white-space: nowrap;
  background: var(--panel);
  box-shadow: 0 0 0 2px var(--deep), 0 0 0 4px var(--lamp), 0 4px 0 4px #3d2f0c;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.toast.show { opacity: 1; }

/* ---------- panels ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: rgba(5, 10, 20, 0.62);
}
.overlay[hidden] { display: none; }
.modal {
  position: relative;
  width: min(440px, 100%);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  padding: 22px 22px 24px;
  background: var(--panel);
  box-shadow: var(--ring-cyan);
  animation: pop 0.22s steps(4);
}
@keyframes pop { from { transform: scale(0.94); opacity: 0; } to { transform: none; opacity: 1; } }
.modal h2 { margin: 0 0 14px; padding-right: 30px; font-size: var(--text); font-weight: 400; }
.modal h3 { margin: 22px 0 8px; font-size: var(--text); font-weight: 400; color: var(--muted); }
.modal p { margin: 0 0 10px; line-height: 1.35; }
.modal .close {
  position: absolute;
  top: 10px; right: 10px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; padding: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.modal .close svg { width: 15px; height: 15px; }
.modal .close:hover { color: var(--ink); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 11px 16px 9px;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: var(--panel-2);
  cursor: pointer;
  box-shadow: var(--ring);
}
.btn:hover { color: var(--cyan); }
.btn:active { transform: translateY(2px); }
.btn.primary { color: var(--deep); background: var(--cyan); box-shadow: 0 0 0 2px var(--deep), 0 0 0 4px var(--cyan), 0 4px 0 4px #123048; }
.btn.primary:hover { color: var(--deep); background: #8af0ff; }
.btn.danger { color: var(--pink); }
.row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.row .btn { flex: 1 1 auto; }

/* help */
.rules { margin: 0 0 6px; padding: 0; list-style: none; }
.rules li { position: relative; padding-left: 20px; margin-bottom: 9px; line-height: 1.35; }
.rules li::before { content: '▸'; position: absolute; left: 2px; color: var(--cyan); }
.example { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 14px 0 8px; }
.example .pane {
  padding: 9px 4px 7px;
  text-align: center;
  font-family: var(--sign);
  font-size: 24px;
  line-height: 1;
  color: var(--sign-ink);
  background: linear-gradient(to bottom, #fff1c4, #ffd47c);
  box-shadow: inset 0 0 0 3px #10173a;
}
.example .answer { color: var(--mint); text-align: center; }
.example .answer small { display: block; font-size: var(--text); color: var(--muted); }
.fine { color: var(--muted); }

/* results */
.verdict { color: var(--muted); margin-bottom: 4px !important; }
.reveal-word { margin: 6px 0 12px; }
.share-preview {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-top: 12px;
  padding: 10px 12px;
  color: var(--muted);
  background: var(--deep);
}
.share-preview .grid { display: flex; flex-direction: column; gap: 3px; }
.share-preview .grid div { display: flex; gap: 3px; }
.share-preview .grid i { width: 12px; height: 12px; background: var(--edge); }
.share-preview .grid i.miss-cell { background: var(--pink); }
.share-preview .grid i.hit-cell { background: var(--mint); }
.share-preview p { margin: 0 !important; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.stat-grid > div { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.stat-grid span { color: var(--muted); }

.dist { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; }
.dist .k { color: var(--muted); text-align: right; }
.dist .meter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 26px;
  height: 22px;
  padding: 0 6px;
  background: var(--edge);
}
.dist .meter.now { background: var(--cyan); color: var(--deep); }
.dist .meter.fell { color: var(--pink); }
.dist .meter.fell.now { background: var(--pink); color: var(--deep); }
.next { margin-top: 18px !important; color: var(--muted); }
.next b { font-weight: 400; color: var(--ink); }

/* level list */
#level-list h3 { text-transform: capitalize; }
.level-group { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 9px 2px 7px;
  border: 0;
  color: var(--ink);
  background: var(--panel-2);
  cursor: pointer;
  box-shadow: 0 0 0 2px var(--deep), 0 0 0 4px var(--edge);
}
.tile:hover { box-shadow: 0 0 0 2px var(--deep), 0 0 0 4px var(--cyan); }
.tile .s { color: var(--muted); }
.tile.won .s { color: var(--mint); }
.tile.lost .s { color: var(--pink); }
.tile.today { box-shadow: 0 0 0 2px var(--deep), 0 0 0 4px var(--lamp); }
.tile.current { background: var(--edge); }

@media (prefers-reduced-motion: reduce) {
  .world, .guess { transition-duration: 0.01s !important; }
  .sky-cloud, .beacon, .hero .f, .hero-svg, .hero-body, .stars i, .hero .speed { animation: none !important; }
  .hero .f-i0b, .hero .f-i1b, .hero .f-i2b, .hero .f-i3b, .hero .f-i4b, .hero .f-blink, .hero .f-fallB { display: none !important; }
  .window.lit { animation: none; }
  .blinds { transition: none; }
}

@media (max-width: 400px) {
  .bar { padding: 12px 12px 0; }
  .icons { gap: 10px; }
  .icon-btn { width: 34px; height: 34px; }
  .crossing { gap: 8px; }
  .crossing .mode { display: none; }
  .level-group { gap: 10px; }
}