/* Visual menus only: preserve the shared app and footer layouts. */
body.visual-index { height:auto; min-height:100%; overflow-x:hidden; overflow-y:auto; background:var(--bg-blue); }
.visual-index .intro-wrap {
  position:relative; inset:auto; width:100%; min-height:100svh; height:auto;
  overflow:visible; grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto auto auto; gap:clamp(18px,3vw,32px);
  padding-bottom:90px;
}
.visual-index .play { grid-column:1; grid-row:1; min-width:0; }
.visual-index .time { grid-column:2; grid-row:1; align-self:start; }
.visual-index nav[aria-label="Featured projects"] {
  grid-column:1 / -1; width:min(100%,1100px); max-width:1100px;
  min-width:0; gap:12px; margin:0; justify-self:center;
}
.visual-index nav[aria-label="Featured projects"] > div {
  min-width:0; animation:none; text-shadow:none; will-change:auto;
}
.visual-index nav[aria-label="Featured projects"] a {
  display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:clamp(10px,2vw,24px); align-items:center; width:100%; max-width:100%;
  padding:clamp(10px,1.5vw,18px); border:1px solid #ffffff40; border-radius:10px;
  background:#07133745; color:#fff; text-decoration:none;
  transition:background .15s,border-color .15s;
}
.visual-index nav[aria-label="Featured projects"] a:hover { background:#07133780; border-color:#ffffffb0; }
.visual-index nav[aria-label="Featured projects"] a:focus-visible { outline:3px solid #ffc400; outline-offset:3px; }
.visual-index .project-copy, .visual-index .project-heading, .visual-index .project-title { min-width:0; }
.visual-index .project-heading { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.visual-index .project-title {
  font-size:clamp(13px,1.65vw,20px); line-height:1.65;
  white-space:normal; hyphens:auto; -webkit-hyphens:auto; hyphenate-character:"-";
  overflow-wrap:anywhere;
}
.visual-index .project-description {
  display:block; margin-top:.65rem; font:400 clamp(14px,1.25vw,16px)/1.55 system-ui,-apple-system,"Segoe UI",sans-serif;
  color:#e8efff; white-space:normal; hyphens:auto; -webkit-hyphens:auto; overflow-wrap:anywhere;
}
.visual-index .project-thumbnail {
  display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain;
  background:#071027; border:1px solid #ffffff55; border-radius:6px;
}
.visual-index .project-heading .featured-sticker,
.visual-index .project-heading .updated-sticker { font-size:8px; padding:5px 7px; }
.visual-index .category-privacy { grid-column:1 / -1; width:100%; margin:0; }
@media (max-width:720px) {
  .visual-index .intro-wrap { grid-template-columns:minmax(0,1fr); gap:18px; }
  .visual-index .time { grid-column:1; grid-row:2; }
  .visual-index .project-title { font-size:clamp(11px,3.1vw,16px); }
  .visual-index .project-description { font-size:14px; }
}
@media (prefers-reduced-motion:reduce) {
  .visual-index nav[aria-label="Featured projects"] a { transition:none; }
}

/* Fit the home title to its grid space, including narrow in-app webviews.
   Limit automatic text inflation here only; browser zoom remains available. */
.visual-index .play.site-title {
  width:100%; max-width:100%;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
}
.visual-index .site-title-text { display:block; overflow-wrap:anywhere; }
@supports (container-type:inline-size) {
  .visual-index .play.site-title { container-type:inline-size; }
  .visual-index .site-title-text {
    font-size:min(1em,8.6cqi); white-space:nowrap;
  }
}

/* A consistent Home control above the first letter of category titles. */
.visual-index .category-home {
  display:flex; align-items:center; justify-content:center;
  width:max-content; min-width:44px; min-height:44px;
  margin:0 0 14px; padding:10px 12px;
  border:1px solid #ffffff40; border-radius:8px;
  background:#07133745; color:#fff;
  font:400 10px/1.5 "Press Start 2P",monospace;
  text-decoration:none; text-shadow:none; animation:none;
  transition:background .15s,border-color .15s;
}
.visual-index .category-home:hover { background:#07133780; border-color:#ffffffb0; }
.visual-index .category-home:focus-visible { outline:3px solid #ffc400; outline-offset:3px; }

.visual-index .category-home svg { display:block; width:24px; height:24px; fill:currentColor; }

@media (prefers-reduced-motion:reduce) {
  .visual-index .category-home { transition:none; }
}