/* =====================================================================
   PS3 XMB theme — shared by the site and the editor. Load after the
   page's own stylesheet.
   ===================================================================== */
.xmb-bg {
  position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%;
  pointer-events: none; display: block;
  background: linear-gradient(160deg, var(--xmb-top, #6b4ab4), var(--xmb-bottom, #1a1030));
}

.xmb-clock {
  display: inline-flex; align-items: center; gap: 8px;
  font: 400 15px/1 var(--sans); letter-spacing: .02em; color: #fff; white-space: pre;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
  font-variant-numeric: tabular-nums;
}
.xmb-clock::before {          /* the little clock glyph */
  content: ""; width: 13px; height: 13px; border-radius: 50%;
  border: 1.5px solid currentColor; opacity: .85;
  background: linear-gradient(currentColor, currentColor) 50% 25% / 1.5px 40% no-repeat,
              linear-gradient(currentColor, currentColor) 75% 50% / 30% 1.5px no-repeat;
}

/* ---------------------------------------------------- category bar */
.xmb-cats { display: flex; align-items: flex-start; gap: clamp(6px, 2.4vw, 28px); }
.xmb-cats > * {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 72px; padding: 4px 2px;
  color: #fff; opacity: .5;
  transform: scale(.74); transform-origin: 50% 30%;
  transition: transform .45s var(--ease), opacity .35s var(--soft);
}
.xmb-cats > :hover { opacity: .85; }
.xmb-cats .xi { width: 42px; height: 42px; fill: currentColor; filter: drop-shadow(0 2px 5px rgba(0,0,0,.35)); }
.xmb-cats .xl {
  font: 400 14px/1.2 var(--sans); white-space: nowrap; text-shadow: 0 1px 4px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(-4px);
  transition: opacity .35s var(--soft), transform .45s var(--ease);
}
.xmb-cats > [aria-current="page"], .xmb-cats > [aria-selected="true"] { opacity: 1; transform: none; }
.xmb-cats > [aria-current="page"] .xi, .xmb-cats > [aria-selected="true"] .xi {
  animation: xmb-glow 2.6s ease-in-out infinite;
}
.xmb-cats > [aria-current="page"] .xl, .xmb-cats > [aria-selected="true"] .xl { opacity: 1; transform: none; }
.xmb-cats > :focus-visible { outline: none; }
.xmb-cats > :focus-visible .xi { outline: 1.5px solid rgba(255,255,255,.8); outline-offset: 6px; border-radius: 8px; }
@keyframes xmb-glow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255,255,255,.55)) drop-shadow(0 2px 5px rgba(0,0,0,.3)); }
  50%      { filter: drop-shadow(0 0 12px rgba(255,255,255,.95)) drop-shadow(0 2px 5px rgba(0,0,0,.3)); }
}

/* The selected item in any list gets the XMB glow. */
.xmb-sel:hover, .xmb-sel:focus-visible {
  outline: none;
  background: linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,.04) 70%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 0 24px -6px rgba(255,255,255,.45);
}

@media (prefers-reduced-motion: reduce) {
  .xmb-cats > [aria-current="page"] .xi, .xmb-cats > [aria-selected="true"] .xi {
    animation: none; filter: drop-shadow(0 0 8px rgba(255,255,255,.8));
  }
}