/* ═══════════════════════════════════════════════════════════════════
   WALLPAPER ARCHIVE ── okeyamy.xyz
   Substrate: TACTICAL TELEMETRY (dark CRT)
   Type:      Archivo 900 (macro) / JetBrains Mono (telemetry)
   Geometry:  0 radius. 90° only.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── substrate ─────────────────────────────────────────────── */
  --bg:      #0A0A0A;
  --bg-1:    #121212;
  --bg-2:    #171717;
  --fg:      #EAEAEA;
  --dim:     #767676;
  --dimmer:  #4A4A4A;
  --red:     #E61919;
  --red-hot: #FF2A2A;
  --green:   #4AF626;              /* single-purpose: live status only */
  --line:    rgba(234, 234, 234, .13);
  --line-hi: rgba(234, 234, 234, .30);

  /* ── type ──────────────────────────────────────────────────── */
  --macro: "Archivo", "Helvetica Neue", sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ── motion ────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-spring: cubic-bezier(.32, .72, 0, 1);

  /* ── metrics ───────────────────────────────────────────────── */
  --bar-h: 34px;
  --pad:   clamp(1rem, 3.5vw, 3.25rem);
}

/* ═══ RESET ════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

body {
  background: var(--bg);
  color: var(--fg);
  font: 400 13px/1.55 var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  min-height: 100vh;
  overflow-x: hidden;
  padding-top: var(--bar-h);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
/* any explicit `display` beats the hidden attribute — restore it globally
   so hiding an element in JS never depends on which class it carries */
[hidden] { display: none !important; }
button, input { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; }
button { cursor: pointer; text-transform: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--red); color: #fff; }

:focus-visible {
  outline: 1px solid var(--red-hot);
  outline-offset: 2px;
}

.dim    { color: var(--dim); }
.dimmer { color: var(--dimmer); }

/* names the hue chips for screen readers without painting them on the swatch */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

kbd {
  font: 500 10px/1 var(--mono);
  border: 1px solid var(--line-hi);
  padding: 3px 5px;
  color: var(--fg);
  background: var(--bg-2);
}

/* ═══ ANALOG DEGRADATION ═══════════════════════════════════════ */
.crt, .grain, .vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 900;
}

/* horizontal electron sweep */
.crt {
  background: repeating-linear-gradient(
    0deg,
    transparent 0 2px,
    rgba(0, 0, 0, .26) 2px 3px
  );
  mix-blend-mode: multiply;
  opacity: .55;
}

/* mechanical static */
.grain {
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* phosphor falloff at the tube edges */
.vignette {
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, .72) 100%);
}

/* ═══ STATUS BAR ═══════════════════════════════════════════════ */
.bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 800;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 var(--pad);
  font-size: 10.5px;
  letter-spacing: .1em;
  border-bottom: 1px solid var(--line);
  background: rgba(10, 10, 10, .72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.bar__l, .bar__r { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.bar__r { flex-shrink: 0; }
.bar__sep  { color: var(--dimmer); }
.bar__host { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tag {
  font-weight: 700;
  font-size: 10px;
  padding: 3px 6px;
  border: 1px solid currentColor;
  letter-spacing: .12em;
  flex-shrink: 0;
}
.tag--red { color: var(--red-hot); }

.stat { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }

.live { color: var(--green); }
.pulse {
  width: 6px; height: 6px;
  background: currentColor;
  animation: pulse 2.4s var(--ease-in-out) infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }

/* workspace pips */
.wsp { display: flex; gap: 3px; }
.wsp__i {
  width: 20px; height: 18px;
  display: grid; place-items: center;
  font-size: 10px;
  color: var(--dimmer);
  border: 1px solid transparent;
  transition: color 140ms var(--ease-out), border-color 140ms var(--ease-out), background-color 140ms var(--ease-out);
}
.wsp__i.is-on { color: var(--bg); background: var(--red); border-color: var(--red); }
.wsp__i:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .wsp__i:not(.is-on):hover { color: var(--fg); border-color: var(--line-hi); }
}

/* ═══ MASTHEAD ═════════════════════════════════════════════════ */
.head {
  padding: clamp(2.5rem, 7vw, 5.5rem) var(--pad) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
}

.mega {
  font-family: var(--macro);
  font-weight: 900;
  font-size: clamp(3.1rem, 15.2vw, 15rem);
  line-height: .82;
  letter-spacing: -.055em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
}

.mega__l, .mega__r {
  display: block;
  opacity: 0;
  transform: translateY(.14em);
  animation: megaIn 900ms var(--ease-out) forwards;
  animation-delay: calc(var(--i) * 70ms);
}
.mega__r { color: var(--red); }
/* third line is optically smaller — hierarchy from weight+size as a set */
.mega__l:last-child { font-size: .42em; letter-spacing: -.02em; color: var(--dim); padding-top: .18em; }

@keyframes megaIn { to { opacity: 1; transform: none } }

.head__rule {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .8rem;
  margin-top: 1.4rem;
  font-size: 10px;
  color: var(--dim);
  letter-spacing: .18em;
}
.head__rule span { height: 1px; background: var(--line); }
.head__rule em { font-style: normal; }

/* neofetch spec block */
.fetch {
  font-size: 10.5px;
  line-height: 1.75;
  border-left: 1px solid var(--line);
  padding-left: 1.1rem;
  min-width: 15rem;
}
.fetch > div { display: grid; grid-template-columns: 5.4rem 1fr; gap: .5rem; }
.fetch dt { color: var(--red); font-weight: 700; }
.fetch dd { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.head__swatch { display: none; }

/* ═══ COMMAND LINE ═════════════════════════════════════════════ */
.cmd {
  margin: clamp(2rem, 5vw, 3.5rem) var(--pad) 0;
  border: 1px solid var(--line);
  background: var(--bg-1);
}

.cmd__row {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .7rem .95rem;
  border-bottom: 1px solid var(--line);
}
.cmd__row--sub { flex-wrap: wrap; row-gap: .55rem; }

.cmd__prompt {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: 10.5px; color: var(--dim); letter-spacing: .14em;
  flex-shrink: 0;
}
.cmd__caret { color: var(--red); font-weight: 700; }

.cmd__in {
  flex: 1;
  min-width: 6rem;
  font-size: 12.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  caret-color: var(--red);
  outline: none;
}
.cmd__in::placeholder { color: var(--dimmer); text-transform: none; letter-spacing: .04em; }
.cmd__in::-webkit-search-cancel-button { display: none; }

.cmd__kbd { flex-shrink: 0; opacity: .5; }

.cmd__clear {
  margin-left: auto;
  font-size: 10px;
  color: var(--red-hot);
  border: 1px solid currentColor;
  padding: 3px 8px;
  letter-spacing: .1em;
  transition: background-color 140ms var(--ease-out), color 140ms var(--ease-out);
}
.cmd__clear:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .cmd__clear:hover { background: var(--red); color: #fff; }
}

/* hue chips */
.hues { display: flex; flex-wrap: wrap; gap: 4px; }
.hue {
  width: 30px; height: 18px;
  border: 1px solid var(--line);
  position: relative;
  transition: transform 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.hue::after {
  content: "";
  position: absolute; inset: -1px;
  border: 1px solid transparent;
  transition: border-color 160ms var(--ease-out);
}
.hue.is-on::after { border-color: var(--fg); }
.hue.is-on { transform: translateY(-2px); }
.hue:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .hue:hover { border-color: var(--line-hi); transform: translateY(-2px); }
}

.cmd__meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .55rem .95rem;
  font-size: 10px; letter-spacing: .12em;
}
.cmd__sortwrap { display: flex; align-items: center; gap: .55rem; }

.sortbtn {
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--dim);
  padding: 2px 5px;
  border-bottom: 1px solid transparent;
  transition: color 140ms var(--ease-out), border-color 140ms var(--ease-out);
}
.sortbtn.is-on { color: var(--fg); border-color: var(--red); }
.sortbtn:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) {
  .sortbtn:hover { color: var(--fg); }
}

/* ═══ GRID ═════════════════════════════════════════════════════ */
.wrap { padding: clamp(1.5rem, 4vw, 2.75rem) var(--pad) 0; }

/* gap:1px over a lit parent = razor hairlines, no border math */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.grid:empty { border: 0; }

.cell {
  position: relative;
  background: var(--bg-1);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  display: block;
  width: 100%;
  text-align: left;
  opacity: 0;
  transform: translateY(10px);
  animation: cellIn 460ms var(--ease-out) forwards;
  animation-delay: calc(var(--d, 0) * 38ms);
  contain: content;
}
@keyframes cellIn { to { opacity: 1; transform: none } }

.cell__img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: blur(12px);
  transform: scale(1.04);
  transition: opacity 420ms var(--ease-out), filter 520ms var(--ease-out), transform 620ms var(--ease-out);
}
.cell__img.is-loaded { opacity: 1; filter: blur(0); transform: scale(1); }

/* scan pass while decoding — reads as the tile "developing" */
.cell::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent, rgba(230, 25, 25, .16), transparent);
  transform: translateY(-100%);
  animation: scanPass 1.4s var(--ease-in-out) infinite;
  pointer-events: none;
  z-index: 1;
}
.cell.is-ready::before { animation: none; opacity: 0; }
@keyframes scanPass { to { transform: translateY(100%) } }

.cell__hud {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  padding: .6rem .7rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .6rem;
  font-size: 9.5px;
  letter-spacing: .1em;
  background: linear-gradient(0deg, rgba(6, 6, 6, .92) 12%, rgba(6, 6, 6, .45) 60%, transparent);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 200ms var(--ease-out), transform 240ms var(--ease-out);
}
.cell__name { color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell__sub  { color: var(--dim); }
.cell__res  { color: var(--red-hot); font-weight: 700; white-space: nowrap; }

/* corner registration crosshair */
.cell__reg {
  position: absolute;
  top: 6px; left: 6px;
  z-index: 3;
  font-size: 11px;
  color: var(--red-hot);
  opacity: 0;
  transform: scale(.6);
  transition: opacity 180ms var(--ease-out), transform 220ms var(--ease-out);
}

.cell__pal {
  position: absolute;
  top: 0; right: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 260ms var(--ease-out);
}
.cell__pal i { width: 7px; height: 16px; display: block; }

@media (hover: hover) and (pointer: fine) {
  .cell:hover .cell__hud { opacity: 1; transform: none; }
  .cell:hover .cell__reg { opacity: 1; transform: none; }
  .cell:hover .cell__pal { transform: none; }
  .cell:hover .cell__img { transform: scale(1.035); }
}
/* touch: no hover to rely on, so always show the readout */
@media (hover: none) {
  .cell__hud { opacity: 1; transform: none; }
}

.cell:active .cell__img { transform: scale(.995); }
.cell:focus-visible { outline-offset: -3px; }

/* ═══ EMPTY / LOADING ══════════════════════════════════════════ */
.empty {
  padding: clamp(3rem, 9vw, 7rem) 1rem;
  text-align: center;
  display: grid; gap: 1.1rem; justify-items: center;
  animation: cellIn 380ms var(--ease-out) forwards;
}
.empty__art { font-size: 11px; line-height: 1.35; color: var(--red); }

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: 10.5px; letter-spacing: .13em; font-weight: 500;
  padding: .65rem 1rem;
  border: 1px solid var(--line-hi);
  color: var(--fg);
  background: var(--bg-1);
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out),
              border-color 160ms var(--ease-out), transform 130ms var(--ease-out);
}
.btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
}
.btn--red { background: var(--red); border-color: var(--red); color: #fff; font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
  .btn--red:hover { background: var(--red-hot); border-color: var(--red-hot); color: #fff; }
}

.sentinel { height: 1px; }
.loadmsg {
  text-align: center;
  font-size: 10px;
  letter-spacing: .2em;
  padding: 1.6rem 0 0;
}
.loadmsg[hidden] { display: none; }

/* ═══ README / EDITORIAL ═══════════════════════════════════════ */
.readme {
  margin: clamp(3rem, 8vw, 6rem) var(--pad) 0;
  border: 1px solid var(--line);
  background: var(--bg-1);
}

.readme__head {
  display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
  padding: .7rem .95rem;
  border-bottom: 1px solid var(--line);
  font-size: 10px; letter-spacing: .14em;
}
.readme__h { font-size: 10px; font-weight: 700; color: var(--red); letter-spacing: .14em; }

.readme__body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1px;
  background: var(--line);
}
.readme__body article { background: var(--bg-1); padding: 1.5rem clamp(1rem, 2.5vw, 2rem); }

.readme h3 {
  font-size: 10.5px; letter-spacing: .16em; font-weight: 700;
  color: var(--fg); margin: 1.6rem 0 .6rem;
}
.readme h3:first-child { margin-top: 0; }
.readme h3::before { content: "▸ "; color: var(--red); }

.readme p {
  font-size: 11.5px; line-height: 1.85;
  text-transform: none; letter-spacing: .02em;
  color: var(--dim); max-width: 62ch;
}
.readme strong { color: var(--fg); font-weight: 500; }
.readme kbd { margin: 0 1px; }

/* static pre-hydration list — real content for crawlers and no-JS clients */
.seolist { grid-column: 1 / -1; background: var(--bg-1); padding: 1.2rem; }
.seolist ul { list-style: none; display: grid; gap: .3rem; }
.seolist a { font-size: 10.5px; color: var(--dim); }
.seolist a:hover { color: var(--fg); }

/* ═══ FOOTER ═══════════════════════════════════════════════════ */
.foot {
  margin-top: clamp(3.5rem, 9vw, 7rem);
  border-top: 1px solid var(--line);
}
.foot__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1px;
  background: var(--line);
}
.foot__grid > div { background: var(--bg); padding: 1.6rem var(--pad); }
.foot__h { font-size: 10px; letter-spacing: .18em; color: var(--red); font-weight: 700; margin-bottom: .9rem; }
.foot p { font-size: 10.5px; line-height: 1.8; text-transform: none; letter-spacing: .03em; max-width: 46ch; }

.keys { font-size: 10px; line-height: 2; }
.keys > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: .6rem; align-items: baseline; }
.keys dt { color: var(--fg); display: flex; gap: 3px; }
.keys dd { color: var(--dim); }

.foot__bar {
  display: flex; flex-wrap: wrap; gap: .8rem;
  justify-content: space-between; align-items: center;
  padding: .85rem var(--pad);
  border-top: 1px solid var(--line);
  font-size: 9.5px; letter-spacing: .16em; color: var(--dim);
}

/* ═══ LIGHTBOX ═════════════════════════════════════════════════ */
.lb {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(17rem, 24vw, 22rem);
}
.lb[hidden] { display: none; }

.lb__scrim {
  position: absolute; inset: 0;
  background: rgba(6, 6, 6, .93);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 260ms var(--ease-out);
}
.lb.is-open .lb__scrim { opacity: 1; }

.lb__stage {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2.5rem);
  min-width: 0;
}

.lb__img {
  max-width: 100%;
  max-height: calc(100vh - 7rem);
  object-fit: contain;
  border: 1px solid var(--line);
  /* anchored to the tile that opened it — enter and exit share the path */
  transform-origin: var(--ox, 50%) var(--oy, 50%);
  opacity: 0;
  transform: scale(.94);
  transition: opacity 220ms var(--ease-out), transform 420ms var(--ease-spring);
}
.lb.is-open .lb__img { opacity: 1; transform: scale(1); }

.lb__hud {
  position: absolute;
  inset: auto clamp(1rem, 3vw, 2.5rem) clamp(.4rem, 1.4vw, 1rem);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  font-size: 10px; letter-spacing: .12em;
  opacity: 0;
  transition: opacity 240ms var(--ease-out) 80ms;
}
.lb.is-open .lb__hud { opacity: 1; }
.lb__hudl { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.lb__title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.lb__hudr { color: var(--dim); white-space: nowrap; }

.lb__panel {
  position: relative;
  z-index: 2;
  border-left: 1px solid var(--line);
  background: rgba(14, 14, 14, .86);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  overflow-y: auto;
  transform: translateX(2%);
  opacity: 0;
  transition: transform 380ms var(--ease-spring), opacity 240ms var(--ease-out);
}
.lb.is-open .lb__panel { transform: none; opacity: 1; }

.lb__x {
  align-self: flex-start;
  font-size: 10px; letter-spacing: .14em;
  color: var(--dim);
  border: 1px solid var(--line);
  padding: .35rem .6rem;
  transition: color 140ms var(--ease-out), border-color 140ms var(--ease-out);
}
.lb__x:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) {
  .lb__x:hover { color: var(--red-hot); border-color: var(--red-hot); }
}

.lb__meta { font-size: 10px; line-height: 1.9; }
.lb__meta > div {
  display: grid; grid-template-columns: 5.6rem 1fr; gap: .6rem;
  padding: .3rem 0;
  border-bottom: 1px solid var(--line);
}
.lb__meta dt { color: var(--dim); }
.lb__meta dd { color: var(--fg); overflow-wrap: anywhere; }

.lb__pal { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 1px; }
.lb__pal button {
  height: 42px;
  position: relative;
  font-size: 8px;
  letter-spacing: .04em;
  color: transparent;
  display: grid; place-items: end center;
  padding-bottom: 3px;
  transition: color 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .lb__pal button:hover { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.9); }
}
.lb__pal button:active { transform: scale(.96); }

.lb__acts { display: grid; gap: 6px; }
.lb__acts .btn { justify-content: center; }

.lb__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: auto; }
.lb__nav button {
  padding: .75rem;
  font-size: 10px; letter-spacing: .14em;
  border: 1px solid var(--line);
  color: var(--dim);
  transition: color 150ms var(--ease-out), background-color 150ms var(--ease-out);
}
.lb__nav button:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .lb__nav button:hover { color: var(--bg); background: var(--fg); }
}

body.lb-open { overflow: hidden; }

/* ═══ RESPONSIVE ═══════════════════════════════════════════════ */
@media (max-width: 900px) {
  .head { grid-template-columns: 1fr; align-items: start; }
  .fetch { border-left: 0; border-top: 1px solid var(--line); padding: 1rem 0 0; }
  .lb { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .lb__panel {
    border-left: 0;
    border-top: 1px solid var(--line);
    max-height: 46vh;
    transform: translateY(3%);
  }
  .lb__hud { display: none; }
}

@media (max-width: 760px) {
  /* the bar runs out of room before the page does — drop the least
     load-bearing readouts rather than let them collide */
  .bar__host, .bar__l .bar__sep { display: none; }
  #statSync, #statSync + .bar__sep { display: none; }
}

@media (max-width: 620px) {
  .cmd__kbd { display: none; }
  .live span, .live { font-size: 0; gap: 0; }     /* keep the pip, drop "ONLINE" */
  .pulse { font-size: 10px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 165px), 1fr)); }
  .cell { aspect-ratio: 3 / 4; }
  .foot__bar { justify-content: flex-start; }
}

/* ═══ ACCESSIBILITY OVERRIDES ══════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 140ms !important;
  }
  .mega__l, .mega__r, .cell, .empty { opacity: 1; transform: none; }
  .lb__img, .lb__panel { transform: none !important; }
  .cell__img { filter: none; transform: none; }
  .crt { display: none; }         /* fixed high-frequency pattern is vestibular noise */
  .pulse { animation: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .bar       { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .lb__panel { background: var(--bg-1); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .lb__scrim { background: #060606; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  :root { --line: rgba(234,234,234,.42); --dim: #A8A8A8; --dimmer: #8A8A8A; }
  .crt, .grain, .vignette { display: none; }
}

@media print { .crt, .grain, .vignette, .bar, .lb { display: none !important; } }