@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
  --hud-green: #39ff8f;
  --hud-green-dim: #1c8a52;
  --hud-orange: #ff9130;
  --hud-red: #ff4655;
  --hud-cyan: #39d1ff;
  --bg-deep: #050b10;
  --bg-panel: rgba(12, 26, 22, 0.85);
  --panel-border: rgba(57, 255, 143, 0.35);
  --text-main: #d9fbe8;
  --text-dim: #7fa695;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

* { box-sizing: border-box; }
html, body { margin: 0; }

body {
  font-family: "Consolas", "SFMono-Regular", Menlo, Monaco, "Courier New", monospace;
  color: var(--text-main);
  background: radial-gradient(circle at 50% 0%, #0e2a22, var(--bg-deep) 65%);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ---- moving space backdrop ---- */
.starfield {
  position: fixed;
  inset: -400px;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 20%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 70%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 50% 40%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 12%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 85% 55%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 15% 85%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 60% 90%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 92% 25%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 45% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 5% 55%, #fff 50%, transparent 51%);
  background-repeat: repeat;
  background-size: 340px 340px;
  opacity: 0.8;
  will-change: transform;
  animation: starfield-fly 22s linear infinite;
}
@keyframes starfield-fly {
  from { transform: translate(0, 0); }
  to   { transform: translate(-340px, 340px); }
}

.starfox-horizon {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.asteroid {
  position: absolute;
  left: -80px;
  width: var(--size, 40px);
  height: var(--size, 40px);
  opacity: var(--opacity, 0.4);
  animation: asteroid-drift var(--duration, 30s) linear infinite;
  animation-delay: var(--delay, 0s);
}
.asteroid-spin {
  width: 100%;
  height: 100%;
  animation: asteroid-tumble var(--spin, 12s) linear infinite;
  animation-delay: var(--delay, 0s);
}
.asteroid-spin svg { display: block; width: 100%; height: 100%; }
.asteroid-spin polygon {
  fill: rgba(12, 26, 22, 0.6);
  stroke: var(--hud-green-dim);
  stroke-width: 1.4;
}
@keyframes asteroid-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100vw + 160px)); }
}
@keyframes asteroid-tumble {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.scanlines {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(57, 255, 143, 0.03),
    rgba(57, 255, 143, 0.03) 1px,
    transparent 2px,
    transparent 3px
  );
  mix-blend-mode: overlay;
}

/* ---- page layout ---- */
.page-wrap {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px 60px;
}

.hud-panel {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: var(--bg-panel);
  border: 1px solid var(--panel-border);
  padding: 36px 32px;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 40px rgba(57, 255, 143, 0.08), inset 0 0 60px rgba(0,0,0,0.4);
}
.hud-panel.wide { max-width: 860px; }

.corner { position: absolute; width: 18px; height: 18px; border: 2px solid var(--hud-green); }
.corner.tl { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.corner.tr { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.corner.bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }
.corner.br { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.callsign-row { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.toad-avatar-wrap { position: relative; flex-shrink: 0; width: 46px; height: 46px; }
/* An SVG with no width/height is as wide as its container: without these the
   avatar filled the whole panel (about 70% of the screen). The attributes are
   on the <svg> as well, so it is right even before this stylesheet loads. */
.toad-avatar { width: 46px; height: 46px; flex-shrink: 0; filter: drop-shadow(0 0 6px rgba(57, 255, 143, 0.5)); }
.lock-reticle {
  position: absolute;
  inset: -6px;
  border: 1px dashed rgba(57, 255, 143, 0.5);
  border-radius: 50%;
  animation: reticle-spin 6s linear infinite;
}
.lock-reticle::before, .lock-reticle::after {
  content: ""; position: absolute; width: 7px; height: 7px; border: 1px solid var(--hud-green);
}
.lock-reticle::before { top: -3px; left: -3px; border-right: none; border-bottom: none; }
.lock-reticle::after { bottom: -3px; right: -3px; border-left: none; border-top: none; }
@keyframes reticle-spin { to { transform: rotate(360deg); } }

.login-btn {
  margin-left: auto;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
  border: 1px solid var(--panel-border);
  padding: 5px 10px;
  flex-shrink: 0;
}
.login-btn:hover { color: var(--hud-green); border-color: var(--hud-green); }

.nav-links { display: flex; gap: 8px; flex-shrink: 0; }
.logout-link {
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
  border: 1px solid var(--panel-border);
  padding: 5px 10px;
  flex-shrink: 0;
}
.logout-link:hover { color: var(--hud-green); border-color: var(--hud-green); }

.callsign {
  font-family: "Press Start 2P", "Consolas", monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  line-height: 1.6;
  color: var(--hud-orange);
  text-transform: uppercase;
  flex: 1;
}

h1 {
  font-family: "Press Start 2P", "Consolas", monospace;
  font-size: 1.15rem;
  line-height: 1.6;
  margin: 10px 0 8px;
  letter-spacing: 0.02em;
  color: var(--hud-green);
  text-shadow: 0 0 12px rgba(57, 255, 143, 0.45);
}

.subtitle {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin: 0 0 22px;
  letter-spacing: 0.03em;
}

/* ---- filter tabs ---- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--panel-border);
}
.hud-tab {
  font-family: inherit;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--panel-border);
  padding: 6px 12px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.hud-tab:hover { color: var(--hud-green); border-color: var(--hud-green-dim); }
.hud-tab.active {
  color: var(--hud-green);
  border-color: var(--hud-green);
  background: rgba(57, 255, 143, 0.12);
  box-shadow: 0 0 10px rgba(57,255,143,0.15);
}

/* ---- console grid / cards ---- */
.console-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
  /* Each card is as tall as its own contents. Grid's default is `stretch`,
     which makes every card in a row as tall as the wordiest one -- and since
     .card-blurb grows to fill, the slack lands between the text and the Play
     buttons as a hole several lines deep. One long blurb anywhere in the row
     does that to every card beside it. */
  align-items: start;
}
.console-card {
  border: 1px solid var(--panel-border);
  background: rgba(0, 0, 0, 0.25);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden; /* clips the screenshot's negative margin and hover zoom */
}
.console-card.hidden { display: none; }

/* ---- featured card: the full row, a wide banner, a slow glowing frame ---- */
.console-card.featured {
  grid-column: 1 / -1;
  position: relative;
  border-color: transparent;
  background: linear-gradient(180deg, rgba(8, 22, 34, 0.92), rgba(5, 11, 16, 0.96));
  isolation: isolate;
}
.console-card.featured::before {
  /* The frame: a conic gradient under the card, masked to a 2px ring. */
  content: "";
  position: absolute; inset: 0;
  padding: 2px;
  background: conic-gradient(from var(--feat-angle, 0deg), #4fd0ff, #b86bff, #ff2bd6, #39ff8f, #4fd0ff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
  animation: feat-spin 8s linear infinite;
}
.console-card.featured .card-shot { aspect-ratio: 1280 / 400; }
.console-card.featured .console-name { font-size: 1.15em; color: #9fe6ff; text-shadow: 0 0 12px rgba(79, 208, 255, 0.45); }
.console-card.featured .card-blurb { max-width: 80ch; }
.console-card.featured .dl { border-color: #4fd0ff; color: #bff0ff; }
.card-ribbon {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  padding: 3px 10px; border-radius: 3px;
  background: linear-gradient(90deg, #4fd0ff, #b86bff); color: #041018;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  box-shadow: 0 0 14px rgba(79, 208, 255, 0.5);
}
@property --feat-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes feat-spin { to { --feat-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) { .console-card.featured::before { animation: none; } }
.perf-lite .console-card.featured::before { animation: none; }
@media (max-width: 699px) { .console-card.featured .card-shot { aspect-ratio: 16 / 9; } }

/* ---- screenshot banner (bleeds to the card edges) ---- */
.card-shot {
  display: block;
  margin: -16px -16px 0;
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  background: var(--bg-deep); /* matches the letterbox bars baked into the shots */
  border-bottom: 1px solid var(--panel-border);
}
.card-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}
/* keep the CRT feel of the rest of the page over the captured frames */
.card-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px);
}
.console-card:hover .card-shot img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .card-shot img { transition: none; }
  .console-card:hover .card-shot img { transform: none; }
}
.console-card:has(.tag.offline) { opacity: 0.6; }
.console-card-head {
  display: flex;
  /* Wrap: a long one-word title (AetherQuest) cannot shrink to fit beside the
     badges, so without this the two flex items paint over each other. */
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  border-bottom: 1px dashed var(--panel-border);
  padding-bottom: 8px;
}
.console-name-wrap { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.console-icon { font-size: 1.1rem; flex-shrink: 0; }
.console-name {
  font-weight: bold;
  letter-spacing: 0.02em;
  color: var(--hud-green);
  font-size: 0.92rem;
  /* `anywhere`, not `break-word`: only the former lowers the min-content width,
     which is what lets the title actually give ground inside a flex row. */
  overflow-wrap: anywhere;
  white-space: normal;
  min-width: 0;
}
.tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid currentColor;
  flex-shrink: 0;
  color: var(--hud-green-dim);
}
.tag.stable { color: var(--hud-green); }
.tag.beta { color: var(--hud-orange); }
.tag.unstable { color: var(--hud-red); animation: blip-pulse 1.6s ease-in-out infinite; }
.tag.archived { color: var(--text-dim); }
.tag.offline { color: var(--text-dim); border-style: dashed; opacity: 0.7; }
.tag.coming-soon { color: var(--hud-cyan); border-style: dashed; }
.card-blurb { margin: 0; font-size: 0.82rem; line-height: 1.45; color: var(--text-main); flex-grow: 1; }
a.dl {
  align-self: flex-start;
  color: var(--hud-green);
  text-decoration: none;
  border: 1px solid var(--hud-green-dim);
  padding: 5px 12px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
a.dl:hover { background: rgba(57, 255, 143, 0.14); }

/* ---- comm-link transmission window ---- */
.comm-window {
  margin-top: 28px;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--panel-border);
  background: rgba(0, 0, 0, 0.35);
  position: relative;
  overflow: hidden;
}
.comm-portrait {
  flex-shrink: 0;
  width: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(57, 255, 143, 0.06);
  border-right: 1px solid var(--panel-border);
}
.comm-portrait svg { filter: drop-shadow(0 0 6px rgba(57, 255, 143, 0.5)); }
.comm-body { padding: 10px 12px; flex: 1; min-width: 0; }
.comm-label {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hud-orange);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.comm-label .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--hud-red); flex-shrink: 0;
  animation: comm-blink 1s steps(1) infinite;
}
@keyframes comm-blink { 50% { opacity: 0; } }
.comm-body p { margin: 0; font-size: 0.78rem; font-style: italic; color: var(--text-main); line-height: 1.4; }

/* ---- back button ---- */
.hud-btn {
  display: block;
  width: 100%;
  margin-top: 24px;
  padding: 14px 12px;
  background: linear-gradient(180deg, rgba(57,255,143,0.18), rgba(57,255,143,0.06));
  border: 1px solid var(--hud-green);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -3px 0 rgba(0,0,0,0.35);
  color: var(--hud-green);
  font-family: "Press Start 2P", "Consolas", monospace;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.62rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
}
.hud-btn:hover { background: rgba(57, 255, 143, 0.28); }
.hud-btn:active { transform: translateY(2px); }

.hidden { display: none !important; }

/* ---- extra card links (e.g. highscores) ---- */
.card-links { display: flex; flex-wrap: wrap; gap: 8px; }
a.dl.secondary { color: var(--hud-orange); border-color: var(--hud-orange); }

/* ---- leaderboard ---- */
.field-hint {
  font-size: 0.78rem;
  color: var(--text-dim);
  text-align: center;
  padding: 20px 0;
}
.leaderboard-list {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.leaderboard-row {
  display: grid;
  grid-template-columns: 42px 1fr auto auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--panel-border);
  background: rgba(0, 0, 0, 0.25);
  padding: 10px 14px;
}
.leaderboard-row:nth-child(1) { border-color: rgba(255, 209, 102, 0.6); box-shadow: 0 0 12px rgba(255, 209, 102, 0.12); }
.lb-rank { font-size: 1rem; color: var(--hud-orange); text-align: center; }
.lb-name {
  font-weight: bold;
  color: var(--hud-green);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Marks a score posted from a signed-in account rather than a typed callsign.
   Deliberately quiet: it is a provenance note, not a rank. */
.lb-verified {
  margin-left: 6px;
  font-size: 0.7em;
  color: var(--hud-orange);
  opacity: 0.85;
  vertical-align: middle;
}
.lb-score { font-weight: bold; color: var(--text-main); }
.lb-date { font-size: 0.68rem; color: var(--text-dim); white-space: nowrap; }

@media (max-width: 480px) {
  .page-wrap { padding: 24px 14px 40px; }
  .hud-panel { padding: 26px 18px; }
  .leaderboard-row { grid-template-columns: 32px 1fr auto; }
  .lb-date { display: none; }
}

/* ---- perf-lite -------------------------------------------------------------
   Toggled on <html> by the inline perf-lite snippet (low-power devices) or by
   the user's "reduce effects" preference. The starfield itself stays: it is a
   compositor transform now and costs essentially nothing. What this drops are
   the two effects that force full-viewport work every frame -- mix-blend-mode
   compositing and backdrop-filter blur. */
.perf-lite { --bg-panel: rgba(12, 26, 22, 0.95); }
.perf-lite .scanlines { mix-blend-mode: normal; opacity: 0.4; }
.perf-lite .starfield,
.perf-lite .asteroid,
.perf-lite .asteroid-spin { animation: none; }
.perf-lite *,
.perf-lite *::before,
.perf-lite *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ---- header row wrapping ---------------------------------------------------
   .callsign-row never wrapped and .callsign carried the default min-width:auto,
   so the row could not shrink below the callsign's longest word. On a 390px
   phone that pushed the nav past the right edge: "Report Issue" was clipped
   mid-word and the Home button sat entirely off-screen with no way to reach it
   (the page itself does not scroll sideways). Letting the callsign shrink and
   the row wrap drops the nav onto its own line instead. No effect on desktop,
   where the row still fits on one line and never wraps. */
.callsign-row { flex-wrap: wrap; }
.callsign { min-width: 0; }
.nav-links { flex-wrap: wrap; }

/* blip-pulse has been referenced by .tag.unstable since this stylesheet was
   written, but was never defined here or anywhere else on the estate -- an
   undefined animation name is silently ignored, so the "unstable" marker has
   always been static. Same definition now used across the Luck Games sites.
   The prefers-reduced-motion rule at the top of this file switches it off for
   anyone who asks for that. */
@keyframes blip-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}


/* ---- phone-sized touch targets: header nav chips (2026-08-21) --------------
   These chips render 24-30px tall, well under the ~44px a thumb reliably hits.
   The tool subdomains have carried this since 2026-08-13; the games, casino
   and hub pages never picked it up. Scoped to the phone breakpoint, so the
   desktop layout is untouched. Keep this block in sync across subdomains. */
.login-btn, .logout-link, .home-link, .rules-link, .back-home-link {
  touch-action: manipulation;
}
@media (max-width: 560px) {
  .login-btn, .logout-link, .home-link, .rules-link, .back-home-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* The header is one nowrap flex line, so the chips run off the right edge on
     a narrow phone -- and once signed in the label grows to "Logout (username)"
     and pushes the last chip out of reach on every one of these pages. Let the
     row wrap instead; where it already fits, wrap changes nothing. */
  .callsign-row, .nav-links { flex-wrap: wrap; }
  /* .nav-links is flex-shrink:0, so it holds its max-content width and the
     last chip lands past the right edge -- wrapping cannot help until the row
     is allowed to shrink below that width. */
  .nav-links { flex-shrink: 1; min-width: 0; max-width: 100%; }
  .login-btn, .logout-link {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* User Auth Bar & Cloud Save Badges */
.user-auth-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.user-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(57, 255, 143, 0.12);
  border: 1px solid rgba(57, 255, 143, 0.35);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11px;
}
.user-name-link {
  color: var(--hud-green);
  text-decoration: none;
  font-weight: bold;
}
.user-name-link:hover {
  text-decoration: underline;
}
.admin-badge {
  background: rgba(255, 215, 0, 0.2);
  border: 1px solid #ffd700;
  color: #ffd700;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  text-decoration: none;
  font-weight: bold;
}
.admin-badge:hover {
  background: rgba(255, 215, 0, 0.35);
}
.logout-link-sm {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 10px;
  margin-left: 4px;
  border-left: 1px solid rgba(57, 255, 143, 0.25);
  padding-left: 6px;
}
.logout-link-sm:hover {
  color: #ff5252;
}

.card-tags-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.tag.save-active {
  background: rgba(0, 229, 255, 0.18);
  border: 1px solid #00e5ff;
  color: #00e5ff;
  font-weight: bold;
  animation: save-glow 2s infinite ease-in-out;
}
@keyframes save-glow {
  0%, 100% { box-shadow: 0 0 4px rgba(0, 229, 255, 0.3); }
  50% { box-shadow: 0 0 10px rgba(0, 229, 255, 0.7); }
}


/* ---- phone-sized touch targets: filter tabs and card buttons (2026-09-29) --
   The 2026-08-21 block above covers the header nav chips only. The category
   tabs (.hud-tab) and the per-card action buttons (.dl) were never included
   and render 25-26px on a phone, under the ~44px a thumb reliably hits.
   Measured with a Playwright pass at 390x844, not eyeballed.

   Scoped to the phone breakpoint, so the desktop layout is untouched. The
   lab and gambling hubs share this stylesheet's ancestry and have the same
   gap -- worth carrying back to them. */
.hud-tab, .dl { touch-action: manipulation; }
@media (max-width: 560px) {
  .hud-tab {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
  }
  .dl {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* .card-links is a nowrap row on some widths; let it wrap so a second
     button is never pushed off the card. */
  .card-links { flex-wrap: wrap; }
}

/* ---- phone polish (2026-10-17 mobile audit) --------------------------------
   A phone held sideways is ~780px wide, so the 560px touch blocks above never
   reach it: the header chips, filter tabs and card links were back to 25-27px.
   Short touch screens get the same 44px sizing. */
@media (hover: none) and (pointer: coarse) and (max-height: 500px) {
  .login-btn, .logout-link, .home-link, .rules-link, .back-home-link, .hud-tab, .dl {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  }
  .hud-tab { padding-top: 0; padding-bottom: 0; }
  .card-links { flex-wrap: wrap; }
}