/* Header shape + centered search overrides */
.site-header{border-radius:28px;overflow:hidden}
.logo-container{position:relative;z-index:1}
.search-container{position:absolute;left:50%;transform:translateX(-50%);margin-left:0;flex:none;width:min(720px,60vw);max-width:720px}
/* Parallax-ready: add vertical scroll translation via CSS var */
.search-container[data-parallax="true"]{will-change:transform;transform:translateX(-50%) translateY(calc(var(--search-parallax,0) + var(--search-bob,0)))}
/* Header parallax support */
.site-header[data-parallax="true"]{will-change:transform;transform:translateY(var(--header-parallax,0))}
@media (prefers-reduced-motion: reduce){
  .search-container[data-parallax="true"]{transform:translateX(-50%) translateY(0)}
  .site-header[data-parallax="true"]{transform:translateY(0)}
}
/* Global layout safety nets */
html{box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}
html,body{max-width:100%;overflow-x:hidden}
.category-card a{font-size:15px}
/* Preserve natural order; no dense reflow */
ul{grid-auto-flow:row}
li{min-width:0}
@media (max-width:900px){
  .search-container{width:min(640px,70vw)}
}
@media (max-width:720px){
  .search-container{position:static;width:100%;max-width:100%}
}

/* Restore vertical motion on mobile/full-width layout */
@media (max-width:720px){
  .search-container[data-parallax="true"]{transform:translateY(calc(var(--search-parallax,0) + var(--search-bob,0)))}
}

/* Mobile responsiveness improvements */
@media (max-width:720px){
  .container{padding:16px 16px 56px}
  .site-header{gap:16px;padding:12px 0 10px;border-radius:20px}
  .logo{max-height:72px}
  .author-fab{right:16px;bottom:16px}
}

@media (max-width:420px){
  .container{padding:12px 12px 56px}
  .logo{max-height:64px}
  /* Slightly compact link items on very small screens */
  ul{gap:10px}
  a{padding:10px 12px}
}

/* Ensure cards always fit on narrow viewports */
@media (max-width:480px){
  ul{grid-template-columns:1fr}
  li{min-width:0}
  .icon-wrapper{margin-right:12px}
  .site-icon{width:24px;height:24px}
  .category-card a{font-size:14px}
  /* Avoid off-screen overlays on tiny viewports */
  .custom-tooltip{display:none}
}

/* Resolution-based layout */
/* 1 column on small phones */
@media (max-width:480px){
  ul{grid-template-columns:1fr}
  li{min-width:0}
}
/* 2 columns on phones/phablets */
@media (min-width:481px) and (max-width:768px){
  ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  li{min-width:0}
}
/* 3 columns on tablets/smaller laptops */
@media (min-width:769px) and (max-width:1200px){
  ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  li{min-width:0}
}
/* Let the base grid handle ≥769px (auto-fit with min 240px) */

/* Single-line truncation with ellipsis for long site names */
.link-text{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  word-break: normal;
}

/* Marquee: activate single-line during hover/focus animation */
.link-text.marquee-active{
  white-space: nowrap;
}

/* Continuous auto marquee (no markup shifts) */
.link-text.marquee-auto{
  white-space: nowrap;
  overflow: hidden; /* already set in base, keep safe */
  position: relative;
}
.link-text .marquee-inner{
  display: inline-block;
  will-change: transform;
}
.link-text .marquee-copy{ display: inline-block; }
.link-text .marquee-gap{ display: inline-block; }

@media (max-width:360px){
  .site-icon{width:22px;height:22px}
  .category-card a{font-size:13px}
  a{padding:9px 10px}
}

/* Final overrides: mobile ergonomics (≤768px) */
@media (max-width:768px){
  li{min-width:0}
  /* Keep header sticky on mobile to keep search fixed */
  .site-header{position:sticky;top:0}
  .container{align-items:stretch}
  li{justify-content:flex-start}
  /* Tighter typographic scale on mobile */
  h2{font-size:20px;margin-top:24px;padding-bottom:6px}
  h3{font-size:17px;margin-top:16px;padding-bottom:4px}
  ul{gap:8px}
  a{padding:9px 12px}
  .site-header{margin-bottom:12px!important}
}
@media (max-width:720px){
  .logo{max-height:60px}
}

/* Columns by resolution across platforms */
/* 1 column on small phones */
@media (max-width:480px){
  ul{grid-template-columns:1fr}
  li{min-width:0}
}
/* Force single column a bit wider to keep items strictly stacked */
@media (max-width:600px){
  ul{grid-template-columns:1fr !important}
  li{min-width:0}
}
/* 2 columns on phones/phablets/tablets */
@media (min-width:481px) and (max-width:900px){
  ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  li{min-width:0}
}

/* Global: enforce 3 columns on sufficiently wide screens */
@media (min-width:900px){
  .category-card ul{
    grid-template-columns:repeat(3,minmax(240px,1fr));
  }
}

/* Keep header always visible (fixed at top) */
.site-header{
  position: fixed !important;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 128px); /* align to container's 64px side padding */
  z-index: 1200;
  padding: 10px 0 8px; /* compact vertical padding */
  /* Respect mobile safe area (notch) when present */
  padding-top: calc(10px + env(safe-area-inset-top));
}
@media (max-width:900px){
  .site-header{ width: calc(100% - 128px); }
}
@media (max-width:720px){
  .site-header{ width: calc(100% - 32px); padding: 8px 0 8px; padding-top: calc(8px + env(safe-area-inset-top)); }
}
@media (max-width:420px){
  .site-header{ width: calc(100% - 24px); padding: 8px 0 8px; padding-top: calc(8px + env(safe-area-inset-top)); }
}

/* Slightly smaller logo on desktop for a compact header */
.logo{ max-height: 80px; }

/* Offset content to avoid overlap under fixed header */
.container{ padding-top: 120px; }
/* Add safe area offset where applicable */
.container{ padding-top: calc(120px + env(safe-area-inset-top)); }
@media (max-width:900px){ .container{ padding-top: 108px; padding-top: calc(108px + env(safe-area-inset-top)); } }
@media (max-width:720px){ .container{ padding-top: 112px; padding-top: calc(112px + env(safe-area-inset-top)); } }

/* Mobile-friendly header layout: stack logo above search */
@media (max-width: 720px){
  .site-header{ display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  .logo{ max-height: 60px; align-self: center; }
  .search-container{ margin-left: 0; width: 100%; max-width: 100%; position: static; transform: none; }
}

/* Fixed on-screen search (follows during scroll) */
/* search-fixed removed; using sticky header for scroll pinning */

/* When fixed search is active, push content down and unstick header */
/* with-fixed-search removed */

/* Final override: offset content using measured header height */
.container{
  padding-top: calc(var(--header-offset, 132px) + env(safe-area-inset-top)) !important;
}

/* Copy button sizing: slightly smaller */
button.copy-button{
  width:32px;
  height:32px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
button.copy-button svg{
  width:16px;
  height:16px;
}
@media (max-width:600px){
  button.copy-button{ width:30px; height:30px; }
  button.copy-button svg{ width:15px; height:15px; }
}

/* Modern hover/focus tooltips */
/* Make anchor allow overlays */
.category-card a{ overflow: visible; }

/* Hidden by default (no layout shift) */
a .custom-tooltip{
  position:absolute;
  right:48px; /* keep clear of copy button */
  top:50%;
  transform: translateY(-50%) translateX(6px) scale(.98);
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.55), 0 2px 8px rgba(27,33,44,0.35);
  max-width: 380px;
  white-space: normal;
  line-height: 1.35;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
/* Show anchor-level tooltip only via focus (hover disabled elsewhere) */
a:focus-within .custom-tooltip{
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0) scale(1);
}
a .custom-tooltip img{
  width: 24px;
  height: 24px;
  border-radius: 6px;
  margin-right: 8px;
  vertical-align: middle;
}
/* Raise hovered/focused item to ensure tooltip is above neighbors */
.category-card a:hover,
.category-card a:focus-within{ position: relative; z-index: 1200; }


/* Info button styles (compact, next to copy) */
button.info-button{
  position: absolute;
  top: 8px;
  right: 12px; /* keep info at the far right */
  width:32px;
  height:32px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  margin-left:0;
  background: var(--copy-btn-bg, transparent);
  color: var(--copy-btn-color, currentColor);
  border: 1.5px solid var(--card-border);
  box-shadow: 0 1.5px 4px 0 var(--copy-btn-shadow, rgba(0,0,0,0.2));
  cursor: pointer;
}
button.info-button:hover{
  box-shadow: 0 8px 28px 0 var(--copy-btn-hover-shadow, rgba(0,0,0,0.6));
}
button.info-button:focus{
  outline: 2px solid var(--copy-btn-focus-outline, #ffd600);
  outline-offset: 2px;
}
button.info-button svg{ width:16px; height:16px; }
@media (max-width:600px){
  button.info-button{ width:30px; height:30px; }
  button.info-button svg{ width:15px; height:15px; }
}

/* Ensure list items provide a positioning context for absolutely-positioned buttons */
.category-card li{ position: relative; }

/* Move copy button to the left of the info button (only when info exists) */
.has-info .copy-button{ right: 52px; }
@media (max-width:600px){
  .has-info .copy-button{ right: 50px; }
}

/* Reserve space so link text doesn’t flow under absolute buttons */
/* Only info present */
.has-info a{ padding-right: 56px; }
/* Only copy present */
.has-copy a{ padding-right: 56px; }
/* Both info and copy present */
.has-copy.has-info a{ padding-right: 96px; }
@media (max-width:600px){
  .has-info a{ padding-right: 54px; }
  .has-copy a{ padding-right: 56px; }
  .has-copy.has-info a{ padding-right: 94px; }
}

/* New info tooltip (for info button) */
.info-tooltip{
  position:absolute;
  right:56px;
  top:50%;
  transform: translateY(-50%) translateX(6px) scale(.98);
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.55), 0 2px 8px rgba(27,33,44,0.35);
  max-width: 380px;
  white-space: normal;
  line-height: 1.35;
  z-index: 1400;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.info-tooltip img{ width: 24px; height: 24px; border-radius: 6px; margin-right: 8px; vertical-align: middle; }
.info-tooltip .info-name{
  font-weight: 600;
  color: var(--h3);
  margin-right: 6px;
}

/* Show only when toggled open (click) */
li.info-open .info-button + .info-tooltip{
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(-50%) translateX(0) scale(1);
}

/* Hovering the site name should NOT show tooltip (click info button instead) */

/* Ensure card allows overlay and stacks above neighbors */
.category-card a{ overflow: visible; }
.category-card a:hover, .category-card a:focus-within{ z-index: 1600; }

/* Monochrome mask for SVG icons so they are visible on dark bg */
.site-icon-mask{
  background-color: var(--text);
  -webkit-mask: var(--icon-url) center/contain no-repeat;
  mask: var(--icon-url) center/contain no-repeat;
}

/* Hide anchor's built-in hover tooltip; use info-button tooltip instead */
a .custom-tooltip{ display:none !important; }

/* Do not show per-link info tooltip; we render a global flyout instead */
.category-card .info-tooltip{ display:none !important; }

/* Page overlay (backdrop) for info modal */
.info-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 2900;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s;
  display: grid;
  place-items: center;
}
.info-overlay.show{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Prevent background scroll when modal is open */
body.modal-open{ overflow: hidden; }

/* Global info flyout (centered inside overlay) */
.info-flyout{
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(-6px) scale(.98);
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 16px 36px rgba(0,0,0,0.55), 0 4px 12px rgba(27,33,44,0.35);
  max-width: min(520px, calc(100vw - 32px));
  max-height: min(70vh, 520px);
  overflow: auto;
  line-height: 1.35;
  z-index: 3000;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.info-flyout.show{
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1);
}
.info-flyout img{ width: 24px; height: 24px; border-radius: 6px; margin-right: 8px; vertical-align: middle; }
.info-flyout .info-name{ font-weight: 600; color: var(--h3); margin-right: 6px; }
@media (max-width:600px){ .info-flyout{ top: 12px; left: 50%; transform: translateX(-50%) translateY(-6px) scale(.98); max-width: calc(100vw - 24px); } }

/* When inside overlay, center without translate offsets */
.info-overlay .info-flyout{
  position: relative;
  top: auto; left: auto;
  transform: scale(.98);
  max-width: min(640px, calc(100vw - 48px));
}
.info-overlay .info-flyout.show{
  transform: scale(1);
}

/* Recommended section: force 4 columns on wide screens */
@media (min-width:1200px){
  .category-card:first-of-type > ul{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* Info flyout anchored to byGOG FAB (shown when clicking info buttons) */
/* removed FAB-anchored flyout; using global top-center flyout */

/* byGOG FAB tooltip on hover/focus (above the button) */
.author-fab-link{ position: relative; }
.author-fab-link::after{
  content: attr(aria-label);
  position: absolute;
  bottom: calc(100% + 8px);
  right: 12px;
  transform: translateY(6px) scale(.98);
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 6px 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.45), 0 2px 8px rgba(27,33,44,0.35);
  white-space: nowrap;
  line-height: 1.2;
  z-index: 5000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.author-fab-link:hover::after,
.author-fab-link:focus::after{
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* SoundCloud embed wrapper */
.sc-embed{
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 16px 0 24px;
  height: 120px; /* mini height */
  border: 1.5px solid var(--card-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 var(--card-shadow), 0 1.5px 4px 0 var(--card-shadow2);
  background: var(--card-bg);
}
.sc-embed::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(24,28,34,0.18), rgba(24,28,34,0.18));
}
.sc-embed iframe{
  display: block;
  width: 100%;
  height: 100%;
}
@media (max-width: 900px){ .sc-embed{ height: 120px; } }
@media (max-width: 600px){ .sc-embed{ height: 120px; } }

/* Fixed mini SoundCloud player (bottom-left) */
/* .sc-mini removed (switched to inline embed) */

/* Click-to-load cover for SoundCloud */
.sc-embed{ position: relative; }
.sc-embed .sc-cover{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(180deg, rgba(24,28,34,0.35), rgba(24,28,34,0.35));
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  cursor: pointer;
}
.sc-embed.loaded .sc-cover{ display: none; }
.sc-cover-btn{
  border: 0;
  border-radius: 50%;
  width: 112px;
  height: 112px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgba(163,191,250,0.18);
  color: #0b0f17;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25), 0 0 0 1px rgba(163,191,250,0.35) inset;
}
.sc-cover-btn:hover{ filter: brightness(1.05) saturate(1.03); }
.sc-cover-btn:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }
.sc-cover-icon img{ width: 64px; height: 64px; display: block; }

@media (max-width: 420px){
  .sc-cover-btn{ width: 100px; height: 100px; }
  .sc-cover-icon img{ width: 56px; height: 56px; }
}

/* Accessible focus ring for copy button */
:root{ --copy-btn-focus-outline: #a3bffa; }
.koyu{ --copy-btn-focus-outline: #a3bffa; }
.copy-button:focus-visible,
.copy-button:focus{
  outline: 2.5px solid var(--copy-btn-focus-outline);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(163,191,250,0.32), 0 2px 6px var(--copy-btn-shadow);
}

/* Service worker update banner (snackbar) */
.update-banner{
  position: fixed;
  right: calc(env(safe-area-inset-right, 0) + 24px);
  bottom: calc(env(safe-area-inset-bottom, 0) + 92px); /* 56px FAB + 24px gap + 12px */
  transform: none;
  z-index: 10000; /* above .author-fab (z:9999) */
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--card-bg);
  color: var(--text);
  border: 1.5px solid var(--card-border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18), 0 4px 14px rgba(0,0,0,.12);
  max-width: min(420px, 80vw);
}
.update-banner-text{ font-weight: 600; }
.update-banner-action{
  border: 0;
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
  background: #a3bffa;
  color: #0b0f17;
}
.update-banner-action:hover{ filter: brightness(1.05) saturate(1.03); }
.update-banner-action:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }
.update-banner-close{
  border: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.update-banner-close:hover{ background: rgba(163,191,250,0.12); }
.update-banner-close:focus-visible{ outline: 2px solid #a3bffa; outline-offset: 2px; }

@media (max-width: 480px){
  .update-banner{
    right: calc(env(safe-area-inset-right, 0) + 16px);
    bottom: calc(env(safe-area-inset-bottom, 0) + 84px); /* 56 + 16 + 12 */
    left: auto;
    transform: none;
    justify-content: space-between;
  }
}