/* ==================================================
   RESET
================================================== */

* {
  box-sizing: border-box;
}

:root {
  --font-tech:
    "Arial Narrow",
    "Liberation Sans Narrow",
    sans-serif;
  --font-ps2-small:
    Arial,
    Helvetica,
    sans-serif;

  --state-completed: #62ad83;
  --state-active: #c66570;
  --state-wanted: #668bd2;
  --screen-tilt-x: 0deg;
  --screen-tilt-y: 0deg;
  --screen-shift-x: 0px;
  --screen-shift-y: 0px;
  --screen-bg-x: 0px;
  --screen-bg-y: 0px;
}

.screen-parallax .memory-card {
  animation: none;
  transform: perspective(1400px)
    rotateX(var(--screen-tilt-x))
    rotateY(var(--screen-tilt-y))
    translate3d(var(--screen-shift-x), var(--screen-shift-y), 0);
  transform-origin: center 42%;
  will-change: transform;
}

.screen-parallax .background-grid,
.screen-parallax .glow {
  translate: var(--screen-bg-x) var(--screen-bg-y);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .screen-parallax .memory-card { transform: none; will-change: auto; }
  .screen-parallax .background-grid,
  .screen-parallax .glow { translate: none; will-change: auto; }
}

/* Scale/readability correction for the spatial PS2 home. */
@media (min-width: 701px) and (hover: hover) and (pointer: fine) {
  #hub-view { max-width: 810px; }

  #hub-view > .ps2-header h1 {
    max-width: 94%;
    font-size: clamp(48px, 4.7vw, 56px);
  }

  #hub-view > .ps2-header .separator,
  #hub-view .recent-activity-bar { width: 100%; }

  #hub-view .recent-activity-bar {
    gap: 18px;
    margin-top: 15px;
    margin-bottom: 13px;
  }

  #hub-view .recent-item { min-height: 43px; }

  #hub-view .recent-thumb {
    width: 30px;
    height: 40px;
    flex-basis: 30px;
  }

  #hub-view .recent-badge { font-size: 8px; }
  #hub-view .recent-title { font-size: 11px; }

  #hub-view .save-files {
    width: 720px;
    height: 334px;
    margin-left: 20px;
  }

  #hub-view .save {
    width: 300px;
    min-height: 108px;
    padding: 8px 10px;
    opacity: .62;
    transform-origin: 42px center;
  }

  #hub-view .save.books { top: 4px; left: 2px; }
  #hub-view .save.games { top: 111px; left: 184px; }
  #hub-view .save.movies { top: 221px; left: 46px; }

  #hub-view .save-icon {
    width: 82px;
    height: 82px;
    flex-basis: 82px;
    margin-right: 20px;
    opacity: .88;
    filter: saturate(.72) brightness(1.08) contrast(1.08);
    border-radius: 2px;
    background: radial-gradient(circle, rgba(75, 123, 205, .16), rgba(3, 8, 22, .16) 60%, transparent 74%);
    box-shadow: 0 0 18px rgba(66, 108, 181, .18);
  }

  #hub-view .save.is-selected .save-icon,
  #hub-view .save:hover .save-icon,
  #hub-view .save:focus-visible .save-icon {
    filter: saturate(.92) brightness(1.42) contrast(1.1);
    box-shadow: 0 0 8px rgba(221, 237, 255, .34), 0 0 25px rgba(70, 126, 224, .46);
  }

  #hub-view .save-title { font-size: 24px; }
  #hub-view .save-subtitle,
  #hub-view .save-stats { opacity: .30; }
}

@media (max-width: 700px), (hover: none), (pointer: coarse) {
  #hub-view .recent-thumb {
    width: 29px;
    height: 39px;
    flex-basis: 29px;
  }

  #hub-view .recent-title { font-size: 10px; }

  #hub-view .save,
  #hub-view .save.books,
  #hub-view .save.games,
  #hub-view .save.movies { min-height: 96px; }

  #hub-view .save-icon {
    width: 68px;
    height: 68px;
    flex-basis: 68px;
    opacity: .94;
    filter: saturate(.76) brightness(1.12) contrast(1.07);
    background: radial-gradient(circle, rgba(75, 123, 205, .16), rgba(3, 8, 22, .14) 62%, transparent 75%);
    box-shadow: 0 0 16px rgba(66, 108, 181, .20);
  }

  #hub-view .save.is-selected .save-icon,
  #hub-view .save:active .save-icon,
  #hub-view .save:focus-visible .save-icon {
    filter: saturate(.94) brightness(1.36) contrast(1.08);
    box-shadow: 0 0 8px rgba(221, 237, 255, .3), 0 0 22px rgba(70, 126, 224, .40);
  }

  #hub-view .save-title { font-size: 22px; }
}

/* Authoritative final sizing: keep this block at EOF. */
#hub-view .recent-item { opacity: .80; }
#hub-view .recent-title { color: #c3c8d2; font-size: 12px; }
#hub-view .recent-badge { opacity: .94; font-size: 9px; }
#hub-view .save-title { color: #c6cad2; }
#hub-view .save-subtitle,
#hub-view .save-stats { opacity: .62; }

@media (min-width: 701px) and (hover: hover) and (pointer: fine) {
  #hub-view { max-width: 860px; }
  #hub-view > .ps2-header h1 { font-size: clamp(52px, 5vw, 60px); }
  #hub-view .recent-activity-bar { gap: 20px; margin-top: 17px; margin-bottom: 15px; }
  #hub-view .recent-item { min-height: 51px; gap: 9px; }
  #hub-view .recent-thumb { width: 36px; height: 48px; flex-basis: 36px; }
  #hub-view .save-files { width: 770px; height: 360px; }
  #hub-view .save { width: 330px; min-height: 116px; opacity: .86; }
  #hub-view .save.books { top: 5px; left: 2px; }
  #hub-view .save.games { top: 122px; left: 205px; }
  #hub-view .save.movies { top: 240px; left: 50px; }
  #hub-view .save-icon {
    width: 88px;
    height: 88px;
    flex-basis: 88px;
    opacity: .94;
    filter: saturate(.78) brightness(1.16) contrast(1.09);
  }
  #hub-view .save-title { font-size: 26px; }
}

@media (max-width: 700px), (hover: none), (pointer: coarse) {
  #hub-view > .ps2-header h1 { font-size: clamp(35px, 10.2vw, 43px); }
  #hub-view .recent-item { min-height: 49px; gap: 8px; opacity: .92; }
  #hub-view .recent-thumb { width: 35px; height: 47px; flex-basis: 35px; }
  #hub-view .recent-title { font-size: 11px; }
  #hub-view .recent-badge { font-size: 8px; }
  #hub-view .save,
  #hub-view .save.books,
  #hub-view .save.games,
  #hub-view .save.movies { min-height: 104px; opacity: .94; }
  #hub-view .save-icon {
    width: 74px;
    height: 74px;
    flex-basis: 74px;
    opacity: .98;
    filter: saturate(.82) brightness(1.18) contrast(1.08);
  }
  #hub-view .save-title { font-size: 23px; }
  #hub-view .save-subtitle,
  #hub-view .save-stats { opacity: .76; }
}

/* TRUE EOF OVERRIDES: verified against browser-computed styles. */
@media (min-width: 701px) and (hover: hover) and (pointer: fine) {
  #hub-view .save-files {
    width: 500px;
    height: 372px;
    margin: 5px 0 0 18px;
  }
  #hub-view .save,
  #hub-view .save.books,
  #hub-view .save.games,
  #hub-view .save.movies {
    left: 0 !important;
    width: 370px;
    min-height: 116px;
  }
  #hub-view .save.books { top: 0 !important; }
  #hub-view .save.games { top: 124px !important; }
  #hub-view .save.movies { top: 248px !important; }
  #hub-view .save-icon {
    width: 86px;
    height: 86px;
    flex-basis: 86px;
    margin-right: 24px;
    border-radius: 0;
    background: none !important;
    box-shadow: none !important;
    filter: saturate(.78) brightness(1.14) contrast(1.09);
  }
  #hub-view .save.games .save-icon,
  #hub-view .save.movies .save-icon { transform: none; }
  #hub-view .save.is-selected,
  #hub-view .save:hover,
  #hub-view .save:focus-visible {
    transform: translate3d(7px, -2px, 0);
  }
  #hub-view .save.is-selected .save-icon,
  #hub-view .save:hover .save-icon,
  #hub-view .save:focus-visible .save-icon {
    background: none !important;
    box-shadow: none !important;
    filter: saturate(.92) brightness(1.34) contrast(1.1)
      drop-shadow(0 0 7px rgba(89, 137, 221, .42));
  }
}

@media (max-width: 700px), (hover: none), (pointer: coarse) {
  #hub-view .save-icon,
  #hub-view .save.is-selected .save-icon,
  #hub-view .save:active .save-icon,
  #hub-view .save:focus-visible .save-icon {
    background: none !important;
    box-shadow: none !important;
  }
}

/* PS2 HOME SPINE — aligned like the original browser. */
@media (min-width: 701px) and (hover: hover) and (pointer: fine) {
  #hub-view .save-files {
    width: 500px;
    height: 372px;
    margin: 5px 0 0 18px;
  }

  #hub-view .save,
  #hub-view .save.books,
  #hub-view .save.games,
  #hub-view .save.movies {
    left: 0;
    width: 370px;
    min-height: 116px;
  }

  #hub-view .save.books { top: 0; }
  #hub-view .save.games { top: 124px; }
  #hub-view .save.movies { top: 248px; }

  #hub-view .save-icon {
    width: 86px;
    height: 86px;
    flex-basis: 86px;
    margin-right: 24px;
    border-radius: 0;
    background: none;
    box-shadow: none;
    filter: saturate(.76) brightness(1.12) contrast(1.08)
      drop-shadow(0 7px 8px rgba(0, 0, 0, .68));
  }

  #hub-view .save.games .save-icon {
    transform: perspective(240px) rotateX(5deg) rotateZ(-1deg) scale(.96);
  }

  #hub-view .save.movies .save-icon {
    transform: perspective(240px) rotateY(-4deg) scale(.98);
  }

  #hub-view .save.is-selected,
  #hub-view .save:hover,
  #hub-view .save:focus-visible {
    transform: translate3d(7px, -1px, 0);
  }

  #hub-view .save.is-selected .save-icon,
  #hub-view .save:hover .save-icon,
  #hub-view .save:focus-visible .save-icon {
    box-shadow: none;
    filter: saturate(.94) brightness(1.36) contrast(1.1)
      drop-shadow(0 0 5px rgba(223, 238, 255, .46))
      drop-shadow(0 0 12px rgba(67, 116, 207, .38));
  }

  #hub-view .save-title,
  #hub-view .save-subtitle,
  #hub-view .save-stats {
    text-align: left;
  }

  #hub-view > .ps2-osd-footer {
    width: 78%;
    margin-top: 3px;
  }
}

@media (max-width: 700px), (hover: none), (pointer: coarse) {
  #hub-view .save-icon {
    border-radius: 0;
    background: none;
    box-shadow: none;
    filter: saturate(.82) brightness(1.18) contrast(1.08)
      drop-shadow(0 6px 7px rgba(0, 0, 0, .66));
  }
  #hub-view .save.is-selected .save-icon,
  #hub-view .save:active .save-icon,
  #hub-view .save:focus-visible .save-icon {
    box-shadow: none;
    filter: saturate(.96) brightness(1.36) contrast(1.09)
      drop-shadow(0 0 5px rgba(223, 238, 255, .42))
      drop-shadow(0 0 11px rgba(67, 116, 207, .34));
  }
}

.motion-control {
  min-height: 28px;
  padding: 3px 5px;
  border: 0;
  background: none;
  color: #718fd5;
  font: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
}

.motion-control[aria-pressed="true"] {
  color: #a9c0f5;
  text-shadow: 0 0 6px #315fae;
}

/* PS2 browser cursor: three orbiting lights with a short phosphor trail. */
@media (hover: hover) and (pointer: fine) {
  html.ps2-cursor-active,
  html.ps2-cursor-active * { cursor: none !important; }

  .ps2-cursor,
  .ps2-cursor-trail {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    pointer-events: none;
    will-change: transform;
  }

  .ps2-cursor {
    width: 1px;
    height: 1px;
    mix-blend-mode: screen;
  }

  .ps2-cursor-orbit {
    position: absolute;
    inset: -12px;
    display: block;
    width: 24px;
    height: 24px;
    animation: ps2CursorOrbit 2.8s linear infinite;
    transition: scale .12s ease;
  }

  .ps2-cursor.is-pressed .ps2-cursor-orbit { scale: .72; }

  .ps2-cursor-orbit i {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #d9eeff;
    box-shadow: 0 0 3px #fff, 0 0 8px #61a5ff, 0 0 15px #245be5;
  }

  .ps2-cursor-orbit i:nth-child(1) { top: 1px; left: 10px; }
  .ps2-cursor-orbit i:nth-child(2) { top: 15px; left: 2px; width: 4px; height: 4px; opacity: .82; }
  .ps2-cursor-orbit i:nth-child(3) { top: 16px; left: 18px; width: 3px; height: 3px; opacity: .62; }

  .ps2-cursor-trail {
    width: 3px;
    height: 3px;
    margin: -1.5px 0 0 -1.5px;
    border-radius: 50%;
    opacity: 0;
    background: #67a6ff;
    box-shadow: 0 0 7px #316de2;
    transition: opacity .18s ease;
  }

  .ps2-cursor-trail.is-visible {
    opacity: var(--trail-opacity);
  }

  @keyframes ps2CursorOrbit { to { transform: rotate(360deg); } }
}

/* ==================================================
   PS2 SPATIAL HOME MENU
   Selection is explicit in JS and touch never depends on hover.
================================================== */
#hub-view > .ps2-header {
  margin-bottom: 12px;
}

#hub-view > .ps2-header h1 {
  max-width: 92%;
  margin-top: 8px;
  margin-bottom: 10px;
  font-size: clamp(37px, 4.6vw, 51px);
}

#hub-view > .ps2-header .separator {
  width: 84%;
  opacity: .58;
}

.recent-activity-bar {
  gap: 18px;
  margin: 13px 0 13px;
}

.recent-item {
  min-width: 0;
  gap: 7px;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  opacity: .60;
  transition: opacity .12s steps(2), transform .12s steps(3), filter .12s steps(2);
}

.recent-item:hover,
.recent-item:focus-visible {
  border: 0;
  background: transparent;
  opacity: 1;
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.recent-item.is-empty {
  opacity: .3;
  pointer-events: none;
  cursor: default;
}

.recent-thumb {
  width: 27px;
  height: 35px;
  flex: 0 0 27px;
  border-color: rgba(102, 139, 208, .25);
  background: rgba(3, 9, 27, .34);
  box-shadow: 2px 3px 7px rgba(0, 0, 0, .62), 0 0 5px rgba(45, 88, 171, .12);
  transform: perspective(120px) rotateY(-7deg);
}

.recent-badge {
  font-size: 7px;
  letter-spacing: 1.25px;
  opacity: .86;
}

.recent-title {
  font-size: 10px;
  color: #aeb5c3;
  letter-spacing: 0;
}

.save-files {
  width: 72%;
  gap: 0;
  margin-top: 5px;
  margin-left: 25px;
}

.save {
  min-height: 88px;
  padding: 7px 8px;
  opacity: .56;
  transform-origin: left center;
  transition: opacity .14s steps(3), transform .14s steps(3), filter .14s steps(3);
}

.save::after {
  display: none;
}

.save::before {
  left: -15px;
  width: 6px;
  height: 6px;
  background: #c2daff;
  box-shadow: 0 0 5px #fff, 0 0 11px #3d75d5;
}

.save.is-selected,
.save:hover,
.save:focus-visible {
  opacity: 1;
  transform: translateX(8px);
  filter: brightness(1.08);
}

.save.is-selected::before,
.save:focus-visible::before {
  opacity: 1;
}

.save-icon {
  width: 66px;
  height: 66px;
  flex-basis: 66px;
  margin-right: 20px;
  opacity: .68;
  filter: saturate(.56) brightness(.74);
  transition: opacity .14s steps(3), filter .14s steps(3), transform .14s steps(3);
}

.books .save-icon::before,
.games .save-icon::before,
.movies .save-icon::before {
  border-color: rgba(145, 174, 225, .42);
  background: linear-gradient(145deg, rgba(121, 150, 205, .40), rgba(27, 48, 91, .47) 48%, rgba(4, 11, 30, .68));
  box-shadow: inset 0 0 12px rgba(177, 202, 240, .10), 0 0 7px rgba(48, 91, 177, .18);
}

.books .save-icon::after,
.games .save-icon::after,
.movies .save-icon::after {
  border-color: rgba(172, 194, 230, .30);
  background: linear-gradient(135deg, rgba(202, 217, 237, .28), rgba(55, 82, 132, .12));
  box-shadow: 0 0 6px rgba(82, 123, 196, .13);
}

.save.is-selected .save-icon,
.save:hover .save-icon,
.save:focus-visible .save-icon {
  opacity: 1;
  filter: saturate(.86) brightness(1.16);
  transform: translateZ(0) scale(1.035);
  box-shadow: none;
  animation: homeSavePulse 3.8s ease-in-out infinite;
}

.save-info {
  transition: opacity .14s steps(3), transform .14s steps(3);
}

.save:not(.is-selected) .save-title {
  color: #858993;
}

.save:not(.is-selected) .save-subtitle,
.save:not(.is-selected) .save-stats {
  opacity: .28;
}

.save.is-selected .save-title {
  color: var(--ps2-cyan);
  text-shadow: 1px 1px #001018, 0 0 5px rgba(32, 199, 244, .48);
}

.save.is-selected .save-subtitle,
.save.is-selected .save-stats {
  opacity: 1;
}

#hub-view > .ps2-osd-footer {
  position: relative;
  width: 84%;
  margin-top: 13px;
  border-top: 0;
}

#hub-view > .ps2-osd-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 72%;
  height: 1px;
  background: linear-gradient(90deg, rgba(74, 104, 174, .30), transparent);
}

@keyframes homeSavePulse {
  0%, 100% { filter: saturate(.82) brightness(1.10); }
  50% { filter: saturate(.94) brightness(1.23); }
}

@media (max-width: 700px), (hover: none), (pointer: coarse) {
  #hub-view > .ps2-header h1 { max-width: 100%; }
  #hub-view > .ps2-header .separator { width: 100%; }

  .recent-activity-bar {
    gap: 9px 14px;
    margin: 12px 0 11px;
  }

  .recent-item {
    min-height: 39px;
    opacity: .86;
  }

  .recent-thumb {
    width: 26px;
    height: 34px;
    flex-basis: 26px;
  }

  .save-files {
    width: 100%;
    margin-left: 0;
  }

  .save {
    min-height: 82px;
    padding: 7px 5px;
    opacity: .82;
    touch-action: manipulation;
  }

  .save::before { left: -2px; }

  .save:not(.is-selected) .save-title { color: #aaadb4; }
  .save:not(.is-selected) .save-subtitle,
  .save:not(.is-selected) .save-stats { opacity: .72; }

  .save.is-selected,
  .save:active {
    transform: translateX(4px);
    background: rgba(24, 48, 110, .10);
  }

  #hub-view > .ps2-osd-footer {
    width: 100%;
  }

  #hub-view > .ps2-osd-footer::before { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .save.is-selected .save-icon,
  .save:hover .save-icon,
  .save:focus-visible .save-icon { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ps2-cursor,
  .ps2-cursor-trail {
    display: block;
    width: 3px;
    height: 3px;
    margin: -1.5px 0 0 -1.5px;
    background: #d7ebff;
    box-shadow: 0 0 3px rgba(215, 235, 255, .9), 0 0 8px rgba(72, 139, 237, .78);
  }
}

/* ==================================================
   PS2 SYSTEM PALETTE / TYPOGRAPHY
================================================== */
:root {
  --ps2-black: #010107;
  --ps2-black-blue: #020817;
  --ps2-panel: #050b1b;
  --ps2-white: #dedee2;
  --ps2-grey: #85858e;
  --ps2-dark-grey: #4b4c57;
  --ps2-cyan: #20c7f4;
  --ps2-blue: #075ed1;
  --ps2-deep-blue: #031d66;
  --ps2-violet: #48309d;
  --state-completed: #38b978;
  --state-active: #db4058;
  --state-wanted: #287fd8;
}

body { background: var(--ps2-black); color: var(--ps2-white); }
.ps2-bg-gradient {
  background:
    radial-gradient(ellipse at 47% 35%, rgba(7, 75, 205, .50) 0, rgba(4, 31, 105, .40) 22%, transparent 49%),
    radial-gradient(ellipse at 59% 43%, rgba(72, 48, 157, .25), transparent 34%),
    linear-gradient(135deg, #010107 0%, #020817 58%, #000 100%);
}
.background-grid { opacity: .045; }
.glow { opacity: .72; filter: blur(20px) saturate(1.2); }

h1,
.save-title,
.current-copy strong,
.controls,
.motion-control,
.audio-control {
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
     0 2px 2px rgba(0, 0, 0, .85);
}

h1 {
  color: var(--ps2-white);
  letter-spacing: -1px;
}
.slot,
.save-subtitle,
.save-count,
.current-copy span {
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 1.5px;
  text-shadow: 1px 1px 0 #000;
}
.slot { color: var(--ps2-grey); opacity: .9; }
.current-copy strong { color: #c7c7cc; }
.current-copy span { color: var(--state-active); }
.current-completed .current-copy strong { color: #c7c7cc; }
.current-completed .current-copy span { color: var(--state-completed); }

.separator {
  background: linear-gradient(90deg, rgba(32, 199, 244, .42), rgba(7, 94, 209, .12), transparent);
}
.save {
  border-radius: 0;
  background: transparent;
}
.save::before { opacity: .16; }
.save-title { color: #bfc0c6; }
.save-subtitle { color: #696b75; }
.save-count { color: #454b5c; }
.save-icon { opacity: .62; filter: saturate(.72) brightness(.82); }
.save:hover,
.save:focus-visible {
  background: transparent;
  outline: none;
}
.save:hover .save-title,
.save:focus-visible .save-title {
  color: var(--ps2-cyan);
  text-shadow:
    -1px -1px 0 #001018,
     1px -1px 0 #001018,
    -1px  1px 0 #001018,
     1px  1px 0 #001018,
     0 0 5px rgba(32, 199, 244, .55);
}
.save:hover .save-icon,
.save:focus-visible .save-icon { opacity: 1; filter: saturate(1.25) brightness(1.25); }

.current-item:hover,
.current-item:focus-visible { background: transparent; }
.current-item:hover .current-copy strong,
.current-item:focus-visible .current-copy strong { color: var(--ps2-cyan); }

footer,
.controls { color: #d0d0d4; font-family: Arial, Helvetica, sans-serif; letter-spacing: .7px; }
.controls > span:nth-child(1)::first-letter { color: #4da7ff; }
.controls > span:nth-child(2)::first-letter { color: #e04d67; }
.audio-control { color: #c8c8cc; }
.motion-control { color: #c8c8cc; letter-spacing: .7px; }

@media (max-width: 700px) {
  .ps2-bg-gradient { background-color: var(--ps2-black); }
  .background-grid { opacity: .025; }
  .save:active .save-title { color: var(--ps2-cyan); }
}

html {
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
}

body {
  min-height: 100vh;

  background: #000104;

  color: white;

  font-family:
    "Arial Narrow",
    "Liberation Sans Narrow",
    Arial,
    sans-serif;
}


/* ==================================================
   FIXED PS2 CONSOLE BACKGROUND LAYER
   Immune to page content height, routing, and scroll
================================================== */

.ps2-bg-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.ps2-bg-gradient {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: #000003;
}

.ps2-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}


/* ==================================================
   FULLSCREEN CRT / PS2 SURFACE
================================================== */

.tv {
  position: relative;

  width: 100%;
  min-height: 100vh;

  background: transparent;

  isolation: isolate;
}


/* ==================================================
   PS2 BACKGROUND GRID
================================================== */

.background-grid {
  position: absolute;

  inset: -50%;

  z-index: 1;

  opacity: 0.11;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(75, 125, 255, 0.28) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(75, 125, 255, 0.28) 1px,
      transparent 1px
    );

  background-size:
    90px 90px;

  transform:
    perspective(500px)
    rotateX(65deg)
    translateY(20%);

  animation:
    gridMove 20s
    steps(120)
    infinite;
}


@keyframes gridMove {

  from {
    transform:
      perspective(500px)
      rotateX(65deg)
      translateY(20%);
  }

  to {
    transform:
      perspective(500px)
      rotateX(65deg)
      translateY(calc(20% + 90px));
  }

}


/* ==================================================
   BACKGROUND GLOW
================================================== */

.glow {
  position: absolute;

  inset: -18%;

  z-index: 2;

  pointer-events: none;

  background:
    radial-gradient(ellipse at 18% 72%, rgba(0, 76, 255, 0.30) 0%, transparent 28%),
    radial-gradient(ellipse at 76% 28%, rgba(58, 118, 255, 0.22) 0%, transparent 25%),
    radial-gradient(ellipse at 54% 55%, rgba(0, 208, 255, 0.12) 0%, transparent 22%);

  background-size: 115% 115%, 125% 125%, 140% 140%;
  filter: blur(14px) saturate(1.25);
  mix-blend-mode: screen;
  will-change: transform;
  transform: translateZ(0);

  animation: ps2LightDrift 16s ease-in-out infinite alternate;
}

.glow::before,
.glow::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform;
  transform: translateZ(0);
}

.glow::before {
  width: 78vw;
  height: 24vw;
  min-height: 150px;
  left: -10%;
  top: 34%;
  border: 2px solid rgba(80, 146, 255, 0.22);
  box-shadow:
    0 0 22px rgba(23, 102, 255, 0.28),
    inset 0 0 28px rgba(35, 89, 255, 0.18);
  filter: blur(2px);
  transform: rotate(-18deg) skewX(-12deg);
  animation: ps2RibbonOne 13s ease-in-out infinite alternate;
}

.glow::after {
  width: 64vw;
  height: 18vw;
  min-height: 110px;
  right: -4%;
  bottom: 23%;
  border: 1px solid rgba(61, 210, 255, 0.27);
  box-shadow:
    0 0 18px rgba(0, 160, 255, 0.26),
    inset 0 0 35px rgba(39, 81, 255, 0.2);
  filter: blur(1.5px);
  transform: rotate(14deg) skewX(15deg);
  animation: ps2RibbonTwo 17s ease-in-out infinite alternate-reverse;
}

@keyframes ps2LightDrift {
  0% {
    transform: translate3d(-3%, 2%, 0) scale(1);
  }

  50% {
    transform: translate3d(2%, -2%, 0) scale(1.06);
  }

  100% {
    transform: translate3d(4%, 3%, 0) scale(1.02);
  }
}

@keyframes ps2RibbonOne {
  from { transform: translate3d(-8%, 10%, 0) rotate(-18deg) skewX(-12deg) scale(0.92); }
  to { transform: translate3d(34%, -18%, 0) rotate(-7deg) skewX(-4deg) scale(1.12); }
}

@keyframes ps2RibbonTwo {
  from { transform: translate3d(12%, -5%, 0) rotate(14deg) skewX(15deg) scale(0.9); }
  to { transform: translate3d(-38%, 22%, 0) rotate(4deg) skewX(5deg) scale(1.18); }
}


/* ==================================================
   CRT GLASS / VIGNETTE
================================================== */
.tv::before {
  content: "";

  position: fixed;
  inset: 0;

  z-index: 1000;
  pointer-events: none;

  background:
    radial-gradient(
      ellipse at center,
      transparent 56%,
      rgba(0, 0, 0, 0.08) 72%,
      rgba(0, 0, 0, 0.28) 88%,
      rgba(0, 0, 0, 0.65) 100%
    );

  box-shadow:
    inset 0 0 50px rgba(0, 0, 0, 0.52),
    inset 0 0 140px rgba(0, 0, 0, 0.35);
}

.tv::after {
  content: "";

  position: fixed;
  inset: 0;

  z-index: 999;
  pointer-events: none;

  background: rgba(255, 255, 255, 0.012);
  opacity: 0;
  will-change: opacity;

  animation:
    crtFlicker 8s
    steps(1)
    infinite;
}


/* ==================================================
   SCANLINES
================================================== */

body::before {
  content: "";

  position: fixed;

  inset: 0;

  z-index: 2000;

  pointer-events: none;

  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 3px,
      rgba(0, 0, 0, 0.22) 4px,
      rgba(0, 0, 0, 0.22) 5px
    );

  opacity: 0.46;
}


/* ==================================================
   ANALOG NOISE
================================================== */

body::after {
  content: "";

  position: fixed;

  inset: -10%;

  z-index: 2100;

  pointer-events: none;

  opacity: 0.055;

  background-image:
    url("/images/noise.png");

  background-repeat: repeat;

  will-change: transform;
  transform: translateZ(0);

  animation:
    ntscNoise 0.28s
    steps(2)
    infinite;
}


@keyframes ntscNoise {

  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-1.5%, 1%);
  }

  50% {
    transform: translate(1%, -1.5%);
  }

  75% {
    transform: translate(1.5%, 1.5%);
  }

  100% {
    transform: translate(-1%, 1%);
  }

}


/* ==================================================
   MAIN INTERFACE
================================================== */

.memory-card {
  position: relative;

  z-index: 10;

  width:
    min(
      1000px,
      calc(100% - 40px)
    );

  margin:
    0 auto;

  padding:
    clamp(50px, 10vh, 110px)
    0
    50px;

  -webkit-font-smoothing: antialiased;
  transform: translateZ(0);
  will-change: transform;

  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto;
  align-items: start;
}

/* ==================================================
   CONSOLE VIEW PANELS (SPA ROUTING & TRANSITIONS)
================================================== */

.view-panel {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  width: 100%;
  transform-origin: center 40%;
  will-change: transform, opacity;
}

#hub-view {
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
}

#archive-view {
  width: 100%;
}

.view-panel[hidden] {
  display: none !important;
}

.view-panel.view-enter {
  animation: consoleViewEnter 2000ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.view-panel.view-exit {
  animation: consoleViewExit 500ms ease-in forwards;
  pointer-events: none;
}

.view-panel.view-enter-back {
  animation: consoleViewEnterBack 2000ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.view-panel.view-exit-back {
  animation: consoleViewExitBack 500ms ease-in forwards;
  pointer-events: none;
}

@keyframes consoleViewEnter {
  0%, 65% {
    opacity: 0;
    transform: scale(0.82) translateZ(0);
    filter: blur(8px);
    pointer-events: none;
  }
  85% {
    opacity: 0.65;
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateZ(0);
    filter: blur(0px);
    pointer-events: auto;
  }
}

@keyframes consoleViewExit {
  0% {
    opacity: 1;
    transform: scale(1) translateZ(0);
    filter: blur(0px);
  }
  100% {
    opacity: 0;
    transform: scale(1.25) translateZ(0);
    filter: blur(6px);
  }
}

@keyframes consoleViewEnterBack {
  0%, 65% {
    opacity: 0;
    transform: scale(1.22) translateZ(0);
    filter: blur(8px);
    pointer-events: none;
  }
  85% {
    opacity: 0.65;
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateZ(0);
    filter: blur(0px);
    pointer-events: auto;
  }
}

@keyframes consoleViewExitBack {
  0% {
    opacity: 1;
    transform: scale(1) translateZ(0);
    filter: blur(0px);
  }
  100% {
    opacity: 0;
    transform: scale(0.82) translateZ(0);
    filter: blur(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .view-panel.view-enter,
  .view-panel.view-exit,
  .view-panel.view-enter-back,
  .view-panel.view-exit-back {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ==================================================
   HEADER
================================================== */

header {
  margin-bottom: 24px;
}

.slot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #7d9ee8;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.88;
}

.slot-name {
  color: #8aaaff;
}

.slot-free {
  color: #4da7ff;
  font-weight: 500;
  letter-spacing: 1.5px;
}

h1 {
  margin:
    10px
    0
    12px;

  font-size:
    clamp(36px, 5vw, 56px);

  font-weight:
    300;

  font-family:
    var(--font-tech);

  font-stretch:
    condensed;

  letter-spacing:
    -2px;

  line-height:
    1;

  text-shadow:
    0 0 5px
    rgba(105, 150, 255, 0.55);
}

/* ==================================================
   PS2 RECENT SYSTEM ACTIVITY LOG
================================================== */

.recent-activity-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 16px 0 18px;
}

.recent-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  background: rgba(7, 24, 68, 0.45);
  border: 1px solid rgba(80, 130, 255, 0.25);
  cursor: pointer;
  border-radius: 1px;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
  overflow: hidden;
  position: relative;
}

.recent-item:hover,
.recent-item:focus-visible {
  background: rgba(20, 50, 130, 0.6);
  border-color: rgba(140, 190, 255, 0.8);
  transform: translateY(-2px);
  outline: none;
}

/* Save Icon / Favicon Downgraded PS2 Thumbnail */
.recent-thumb {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  aspect-ratio: 1 / 1;
  background: #061129;
  border: 1px solid rgba(90, 140, 255, 0.45);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.25), inset -1px -1px 0 rgba(0, 0, 0, 0.7), 0 0 6px rgba(40, 90, 220, 0.25);
  border-radius: 1px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.recent-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: contrast(1.22) saturate(1.15) brightness(0.95);
  position: relative;
  z-index: 1;
}

/* Micro-scanline texture to simulate a low-res PS2 memory card save icon */
.recent-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.3) 0px,
    rgba(0, 0, 0, 0.3) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  z-index: 2;
}

.recent-fallback {
  font-family: var(--font-tech);
  font-size: 14px;
  font-weight: bold;
  color: #6a95e9;
  position: absolute;
  z-index: 0;
}

.recent-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
  justify-content: center;
}

.recent-badge {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 8px;
  font-weight: bold;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1;
}

.badge-reading { color: #f24968; text-shadow: 0 0 6px rgba(242, 73, 104, 0.6); }
.badge-playing { color: #4da7ff; text-shadow: 0 0 6px rgba(77, 167, 255, 0.6); }
.badge-completed { color: #38b978; text-shadow: 0 0 6px rgba(56, 185, 120, 0.6); }

.recent-title {
  font-family: var(--font-tech);
  font-stretch: condensed;
  font-size: 12px;
  color: #d8e5ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

@media (max-width: 700px) {
  .recent-activity-bar {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .recent-thumb {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
  }
  .recent-item {
    padding: 5px 6px;
    gap: 7px;
  }
}


.separator {
  width: 100%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(115, 160, 255, 0.8),
      transparent
    );
}


/* ==================================================
   SAVE FILE LIST
================================================== */

.save-files {
  display: flex;
  flex-direction: column;

  gap: 6px;

  margin-top: 18px;
}

.save {
  position: relative;

  display: flex;
  align-items: center;

  min-height: 92px;

  padding:
    10px
    14px;

  color: white;

  text-decoration: none;

  border: none;

  background: transparent;

  transition:
    transform 0.12s steps(3),
    filter 0.12s steps(3);
}

.save:hover {
  transform:
    translateX(9px);

  background: transparent;

  border: none;

  box-shadow: none;
}

.save::before {
  content: "";

  position: absolute;

  left: -22px;
  top: 50%;

  width: 8px;
  height: 8px;

  transform:
    translateY(-50%)
    rotate(45deg);

  opacity: 0;

  background:
    rgba(160, 190, 255, 0.9);

  box-shadow:
    0 0 8px rgba(100, 150, 255, 0.8);

  transition:
    opacity 0.12s steps(2);
}


.save:hover::before {
  opacity: 1;
}

/* ==================================================
   SAVE ICON
================================================== */
.save-icon {
  position: relative;

  width: 72px;
  height: 72px;

  flex: 0 0 72px;

  margin-right: 26px;

  display: flex;
  align-items: center;
  justify-content: center;

  perspective: 240px;

  border: none;
  background: transparent;
  box-shadow: none;
}

.save:hover .save-icon {
  color: white;

  border-color:
    rgba(170, 200, 255, 0.9);

  box-shadow:
    inset 0 0 18px rgba(100, 150, 255, 0.28),
    0 0 16px rgba(80, 130, 255, 0.4);

  filter:
    brightness(1.28)
    saturate(1.18);
}

.save-icon span {
  display: none;
}

.books .save-icon::before {
  content: "";

  position: absolute;

  width: 42px;
  height: 54px;

  background:
    linear-gradient(
      90deg,
      rgba(112, 158, 255, 0.95) 0%,
      rgba(58, 101, 205, 0.88) 12%,
      rgba(20, 48, 123, 0.85) 100%
    );

  border:
    1px solid
    rgba(170, 200, 255, 0.8);

  box-shadow:
    inset 5px 0 8px rgba(20, 35, 90, 0.7),
    0 0 10px rgba(85, 130, 255, 0.45);

  transform:
    rotateY(-24deg)
    rotateZ(-5deg);

  transform-origin:
    center;
}

.books .save-icon::after {
  content: "";

  position: absolute;

  width: 33px;
  height: 46px;

  background:
    linear-gradient(
      90deg,
      rgba(210, 225, 255, 0.78),
      rgba(145, 175, 235, 0.45)
    );

  border:
    1px solid
    rgba(190, 210, 255, 0.6);

  transform:
    translateX(6px)
    rotateY(-24deg)
    rotateZ(-5deg);

  box-shadow:
    0 0 7px
    rgba(120, 160, 255, 0.25);
}

.games .save-icon::before {
  content: "";

  position: absolute;

  width: 40px;
  height: 40px;

  background:
    linear-gradient(
      135deg,
      rgba(120, 165, 255, 0.95),
      rgba(25, 55, 140, 0.78)
    );

  border:
    1px solid
    rgba(180, 210, 255, 0.85);

  box-shadow:
    inset 0 0 12px rgba(180, 210, 255, 0.15),
    0 0 13px rgba(80, 130, 255, 0.48);

  transform:
    rotateX(55deg)
    rotateZ(45deg);
}

.games .save-icon::after {
  content: "";

  position: absolute;

  width: 30px;
  height: 30px;

  border:
    1px solid
    rgba(140, 180, 255, 0.48);

  transform:
    translateY(10px)
    rotateX(55deg)
    rotateZ(45deg);

  opacity:
    0.55;
}

.movies .save-icon::before {
  content: "";

  position: absolute;

  width: 46px;
  height: 35px;

  border:
    1px solid
    rgba(190, 215, 255, 0.86);

  background:
    linear-gradient(
      135deg,
      rgba(150, 190, 255, 0.72) 0%,
      rgba(88, 138, 235, 0.58) 35%,
      rgba(40, 75, 175, 0.62) 68%,
      rgba(15, 32, 92, 0.78) 100%
    );

  box-shadow:
    inset 0 0 10px
      rgba(205, 225, 255, 0.22),

    inset 0 0 18px
      rgba(40, 65, 150, 0.38),

    0 0 11px
      rgba(90, 140, 255, 0.32);

  transform:
    perspective(180px)
    rotateY(-10deg)
    rotateX(3deg);
}


.movies .save-icon::after {
  content: "";

  position: absolute;

  width: 56px;
  height: 44px;

  border:
    1px solid
    rgba(140, 180, 255, 0.56);

  background:
    linear-gradient(
      135deg,
      rgba(80, 125, 225, 0.22),
      rgba(20, 42, 115, 0.14)
    );

  box-shadow:
    inset 0 0 8px
      rgba(150, 190, 255, 0.08),

    0 0 9px
      rgba(80, 130, 255, 0.18);

  transform:
    perspective(180px)
    rotateY(-10deg)
    rotateX(3deg);
}

.save:hover.movies .save-icon::before {
  border-color:
    rgba(220, 235, 255, 0.95);

  box-shadow:
    inset 0 0 14px
      rgba(190, 220, 255, 0.18),

    inset 0 0 24px
      rgba(20, 40, 95, 0.40),

    0 0 18px
      rgba(110, 160, 255, 0.50);
}


.save:hover.movies .save-icon::after {
  border-color:
    rgba(160, 195, 255, 0.72);

  box-shadow:
    0 0 14px
    rgba(100, 150, 255, 0.24);
}

.save:hover .save-icon::before,
.save:hover .save-icon::after {
  box-shadow:
    0 0 18px
    rgba(105, 155, 255, 0.65);
}

/* ==================================================
   SAVE TEXT
================================================== */

.save-title {
  font-size: 23px;

  font-weight: 300;

  font-family: var(--font-tech);

  font-stretch: condensed;

  letter-spacing: 0;

  line-height: 1;

  text-shadow:
    0 0 3px
    rgba(120, 160, 255, 0.35);
}


.save-subtitle {
  margin-top: 7px;

  color: #6d8fd4;

  font-size: 9px;

  letter-spacing: 3px;

  text-transform: uppercase;
}

.save-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.save-size {
  color: #7995d4;
  font-weight: 500;
}

.save-count {
  color: var(--state-completed);
  text-shadow: 0 0 5px rgba(56, 185, 120, 0.5);
}

.save::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(100, 145, 240, 0.18),
      rgba(100, 145, 240, 0.05),
      transparent
    );
}

/* ==================================================
   PS2 OSD FOOTER & CONTROLS
================================================== */

.ps2-osd-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 26px;
  padding-top: 12px;
  color: #637fb7;
  border-top: 1px solid rgba(90, 125, 210, 0.18);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.save-capacity {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  color: #7290d2;
  letter-spacing: 1.8px;
}

.controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* PlayStation Pad Buttons */
.pad-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #4d79ff;
  font-style: normal;
  font-weight: 900;
  font-family: Arial, sans-serif;
  font-size: 11px;
  line-height: 1;
  margin-right: 5px;
  text-shadow: 0 0 6px rgba(77, 121, 255, 0.85);
}

.pad-circle {
  display: inline-block;
  width: 9px;
  height: 9px;
  border: 1.8px solid #f24968;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(242, 73, 104, 0.85);
  margin-right: 5px;
  box-sizing: border-box;
  vertical-align: middle;
  position: relative;
  top: -0.5px;
  flex-shrink: 0;
}

.pad-triangle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #3dd98d;
  font-style: normal;
  font-weight: 900;
  font-size: 10px;
  line-height: 1;
  margin-right: 5px;
  text-shadow: 0 0 6px rgba(61, 217, 141, 0.85);
}

.pad-square {
  display: inline-block;
  width: 8.5px;
  height: 8.5px;
  border: 1.8px solid #e85ca8;
  border-radius: 1px;
  box-shadow: 0 0 6px rgba(232, 92, 168, 0.85);
  margin-right: 5px;
  box-sizing: border-box;
  vertical-align: middle;
  position: relative;
  top: -0.5px;
  flex-shrink: 0;
}

.ctrl-btn {
  display: inline-flex;
  align-items: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #cfd8f6;
  background: none;
  border: 0;
  padding: 4px 6px;
  border-radius: 2px;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, transform 0.12s ease;
  white-space: nowrap;
}

.ctrl-btn-action:hover,
.ctrl-btn-action:focus-visible,
.audio-control:hover,
.audio-control:focus-visible {
  color: #ffffff;
  background: rgba(40, 80, 190, 0.25);
  transform: translateY(-1px);
  outline: none;
}

.audio-control {
  cursor: pointer;
  user-select: none;
}

.audio-control.playing {
  color: #aec4ff;
}

.audio-control.muted {
  color: #556c9a;
}

@media (max-width: 700px) {
  .ps2-osd-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 20px;
  }
  .controls {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px 14px;
  }
  .ctrl-btn {
    min-height: 36px;
    padding: 6px 8px;
  }
}


/* ==================================================
   FLOATING ICONS
================================================== */

.books .save-icon {
  animation:
    bookFloat 4.8s
    steps(70)
    infinite;
}

.games .save-icon {
  animation:
    gameFloat 5.2s
    steps(80)
    infinite;
}

.movies .save-icon {
  animation:
    movieFloat 4.4s
    steps(70)
    infinite;
}

@keyframes floating {

  0%,
  100% {
    transform:
      translateY(-2px)
      rotate(0deg);
  }

  50% {
    transform:
      translateY(4px)
      rotate(5deg);
  }

}

@keyframes bookFloat {

  0%,
  100% {
    transform:
      translateY(-2px)
      rotateZ(0deg);
  }

  50% {
    transform:
      translateY(4px)
      rotateZ(2deg);
  }
}


@keyframes gameFloat {

  0%,
  100% {
    transform:
      translateY(0)
      rotateY(0deg);
  }

  50% {
    transform:
      translateY(-5px)
      rotateY(8deg);
  }
}


@keyframes movieFloat {

  0%,
  100% {
    transform:
      translateY(2px)
      scale(1);
  }

  50% {
    transform:
      translateY(-4px)
      scale(1.04);
  }
}


/* ==================================================
   CRT FLICKER
================================================== */

@keyframes crtFlicker {

  0%,
  93%,
  95%,
  100% {
    opacity: 0;
  }

  94% {
    opacity: 0.04;
  }

  96% {
    opacity: 0.02;
  }

}


/* ==================================================
   HORIZONTAL SYNC ERROR
================================================== */

@keyframes horizontalSync {

  0%,
  96%,
  100% {
    transform:
      perspective(1100px)
      rotateX(0.7deg)
      scale(0.985)
      translateX(0);
  }

  97% {
    transform:
      perspective(1100px)
      rotateX(0.7deg)
      scale(0.985)
      translateX(-1px);
  }

  98% {
    transform:
      perspective(1100px)
      rotateX(0.7deg)
      scale(0.985)
      translateX(2px);
  }

  99% {
    transform:
      perspective(1100px)
      rotateX(0.7deg)
      scale(0.985)
      translateX(-1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .glow,
  .glow::before,
  .glow::after {
    animation: none;
  }
}

/* ==================================================
   MOBILE
================================================== */

@media (max-width: 600px) {

  .current-activity {
    grid-template-columns: 1fr;
    margin-top: 20px;
  }

  .memory-card {
    width:
      calc(100% - 28px);

    padding:
      42px
      0
      30px;
  }


  header {
    margin-bottom:
      28px;
  }


  h1 {
    font-size:
      38px;
  }


  .slot {
    font-size:
      9px;

    letter-spacing:
      2.5px;
  }


  .save {
    min-height:
      88px;

    padding:
      12px;
  }


  .save-icon {
    width:
      58px;

    height:
      58px;

    flex:
      0 0 58px;

    margin-right:
      15px;

    font-size:
      21px;
  }


  .save-title {
    font-size:
      21px;
  }


  .save-subtitle {
    font-size:
      8px;

    letter-spacing:
      2px;
  }


  footer {
    flex-direction:
      column;

    gap:
      15px;

    margin-top:
      28px;

    font-size:
      9px;
  }


  .tv::before {
    border-radius:
      3% / 4%;

    box-shadow:
      inset 0 0 14px rgba(0, 0, 0, 0.65),
      inset 0 0 40px rgba(0, 0, 0, 0.26),
      inset 0 0 95px rgba(0, 0, 0, 0.16);
  }


  body::before {
    opacity:
      0.36;
  }

}

h1 {
  text-shadow:
    0 0 5px rgba(105, 150, 255, 0.55);
}

.save-title {
  text-shadow:
    0 0 3px rgba(120, 160, 255, 0.35);
}

/* ==================================================
   MOBILE PS2 LAYOUT
================================================== */
@media (max-width: 700px) {
  body {
    min-height: 100dvh;
  }

  .tv {
    min-height: 100dvh;
    filter: contrast(1.05) saturate(1.08);
    animation: none;
  }

  .glow {
    filter: blur(10px) saturate(1.15);
  }

  .background-grid {
    opacity: 0.07;
  }

  .memory-card {
    width: 100%;
    padding: calc(30px + env(safe-area-inset-top))
      max(18px, env(safe-area-inset-right))
      calc(24px + env(safe-area-inset-bottom))
      max(18px, env(safe-area-inset-left));
    filter: none;
    animation: none;
  }

  header {
    margin-bottom: 18px;
  }

  h1 {
    margin-top: 7px;
    font-size: clamp(31px, 10vw, 42px);
    letter-spacing: -1.5px;
  }

  .slot {
    font-size: 9px;
    letter-spacing: 2px;
  }

  .current-activity {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 8px;
    margin: 18px 0 16px;
  }

  .current-item {
    min-height: 62px;
    gap: 8px;
    margin: 0;
    padding: 5px;
  }

  .current-cover {
    width: 32px;
    height: 48px;
  }

  .current-copy span {
    font-size: 8px;
    letter-spacing: 1.2px;
  }

  .current-copy strong {
    font-size: 11px;
    letter-spacing: .4px;
  }

  .save {
    min-height: 82px;
    padding: 8px 6px;
    touch-action: manipulation;
  }

  .save:active {
    background: rgba(69, 114, 224, .18);
  }

  .save-icon {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
    margin-right: 14px;
  }

  .save-title { font-size: 20px; }
  .save-subtitle { font-size: 9px; letter-spacing: 1.8px; }
  .save-count { font-size: 9px; }

  footer {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding-bottom: env(safe-area-inset-bottom);
    font-size: 9px;
  }

  body::before { opacity: .26; }
}

@media (max-width: 360px) {
  .current-copy strong { font-size: 10px; }
  .current-cover { width: 29px; height: 43px; }
}

/* ==================================================
   DARK PS2 BROWSER BACKGROUND
================================================== */
body { background: #000003; }

.ps2-bg-gradient {
  background: #000003;
}

.background-grid { opacity: .025; }

.glow {
  opacity: .72;
  background:
    radial-gradient(ellipse at 18% 72%, rgba(0, 76, 255, 0.34) 0%, transparent 28%),
    radial-gradient(ellipse at 76% 28%, rgba(58, 118, 255, 0.26) 0%, transparent 25%),
    radial-gradient(ellipse at 54% 55%, rgba(0, 208, 255, 0.13) 0%, transparent 22%);
  filter: blur(18px) saturate(1.35);
}

.glow::before {
  border-color: rgba(80, 146, 255, 0.22);
  box-shadow: 0 0 22px rgba(23, 102, 255, 0.28), inset 0 0 28px rgba(35, 89, 255, 0.18);
  filter: blur(2px);
}

.glow::after {
  border-color: rgba(61, 210, 255, 0.27);
  box-shadow: 0 0 18px rgba(0, 160, 255, 0.26), inset 0 0 35px rgba(39, 81, 255, 0.2);
  filter: blur(1.5px);
}

.tv::before {
  background:
    radial-gradient(ellipse at center,
      transparent 38%,
      rgba(0, 0, 5, .10) 62%,
      rgba(0, 0, 4, .42) 84%,
      rgba(0, 0, 2, .82) 100%);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .48), inset 0 0 180px rgba(0, 0, 0, .38);
}

body::after { opacity: .035; }

/* ==================================================
   PS2 REFERENCE CALIBRATION
   Keep the 3D layer soft and sparse without softening the interface.
================================================== */
.ps2-canvas {
  filter: blur(1.15px) saturate(.76) contrast(.92) brightness(.94);
  transform: scale(1.003);
}

.background-grid { display: none; }

.glow {
  inset: 5% 8%;
  opacity: .46;
  background: radial-gradient(ellipse 39% 32% at 52% 47%, rgba(18, 53, 190, .44), rgba(7, 22, 105, .20) 50%, transparent 78%);
  filter: blur(30px) saturate(.72);
  mix-blend-mode: screen;
  animation: ps2LightDrift 28s ease-in-out infinite alternate;
}

.glow::before,
.glow::after { display: none; }

.tv::before {
  background: radial-gradient(ellipse at 52% 47%, transparent 30%, rgba(0, 0, 4, .12) 61%, rgba(0, 0, 3, .55) 86%, rgba(0, 0, 2, .92) 100%);
  box-shadow: inset 0 0 75px rgba(0, 0, 0, .62), inset 0 0 210px rgba(0, 0, 0, .52);
}

body::before {
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 4px, rgba(0, 0, 0, .18) 5px, transparent 6px);
  opacity: .16;
}

body::after {
  opacity: .018;
  animation-duration: .42s;
}

#hub-view {
  position: relative;
  isolation: isolate;
}

#hub-view::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: -70px -80px -55px -95px;
  display: none;
}

.recent-item {
  background: rgba(3, 10, 31, .30);
  border-color: rgba(93, 132, 213, .18);
}

.recent-item:hover,
.recent-item:focus-visible {
  background: rgba(13, 31, 79, .48);
  border-color: rgba(132, 166, 231, .58);
}

h1,
.save-title,
.current-copy strong,
.controls,
.motion-control,
.audio-control {
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .98), 0 0 3px rgba(77, 111, 181, .25);
}

.save-subtitle,
.save-size,
.save-capacity,
.slot { text-shadow: 1px 1px 1px #000; }

/* PS2 typography calibration: one narrow display voice, one neutral OSD voice. */
h1 {
  font-family: var(--font-tech);
  font-weight: 400;
  letter-spacing: -1.15px;
}

.save-title,
.recent-title,
.current-copy strong,
.archive-card-title,
#detail-title {
  font-family: var(--font-tech);
  font-weight: 400;
  letter-spacing: -.1px;
}

.slot,
.recent-badge,
.save-subtitle,
.save-stats,
.save-capacity,
.controls,
.page-subtitle,
.archive-section-title {
  font-family: var(--font-ps2-small);
}

.recent-badge,
.controls {
  font-weight: 600;
}

@media (max-width: 700px) {
  .ps2-bg-gradient {
    background:
      radial-gradient(ellipse 82% 48% at 50% 34%, rgba(12, 44, 135, .28), transparent 70%),
      radial-gradient(ellipse 90% 64% at 58% 40%, rgba(59, 35, 100, .20), transparent 76%),
      #000105;
  }
  .glow { opacity: .72; filter: blur(10px) saturate(1.15); }
  .background-grid { opacity: .018; }
}

/* Single bright PS2 orb cursor. */
@media (hover: hover) and (pointer: fine) {
  .ps2-cursor-orbit {
    inset: 0;
    width: 1px;
    height: 1px;
    animation: none;
  }
  .ps2-cursor-orbit i,
  .ps2-cursor-orbit i:nth-child(1) {
    position: absolute;
    top: -3px;
    left: -3px;
    width: 6px;
    height: 6px;
    opacity: 1;
    border-radius: 50%;
    background: #f4fbff;
    box-shadow:
      0 0 3px 1px rgba(255, 255, 255, .96),
      0 0 8px 3px rgba(145, 203, 255, .74),
      0 0 16px 5px rgba(55, 119, 224, .36);
  }
  .ps2-cursor.is-pressed .ps2-cursor-orbit { scale: .72; }
  .ps2-cursor-trail { display: none !important; }
}

/* ==================================================
   FINAL RADICAL PS2 HOME COMPOSITION
   Kept last intentionally: this is the single authoritative home layer.
================================================== */
#hub-view {
  max-width: 720px;
}

#hub-view > .ps2-header {
  margin-bottom: 8px;
}

#hub-view > .ps2-header h1 {
  max-width: 88%;
  margin: 8px 0 9px;
  font-size: clamp(37px, 4.25vw, 47px);
  color: #c9cbd1;
}

#hub-view > .ps2-header .separator {
  width: 74%;
  opacity: .38;
}

#hub-view .recent-activity-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
  width: 88%;
  margin: 12px 0 11px;
}

#hub-view .recent-item {
  min-width: 0;
  min-height: 36px;
  gap: 7px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  opacity: .54;
  transform: none;
  transition: opacity .12s steps(2), filter .12s steps(2), transform .12s steps(3);
}

#hub-view .recent-item:hover,
#hub-view .recent-item:focus-visible {
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  filter: brightness(1.16);
  transform: translateY(-2px);
}

#hub-view .recent-thumb {
  width: 25px;
  height: 33px;
  flex: 0 0 25px;
  border: 1px solid rgba(114, 142, 193, .20);
  background: rgba(2, 7, 20, .22);
  box-shadow: 2px 4px 7px rgba(0, 0, 0, .68), 0 0 5px rgba(59, 98, 170, .11);
  transform: perspective(110px) rotateY(-9deg) rotateZ(-1deg);
}

#hub-view .recent-badge {
  font-size: 7px;
  letter-spacing: 1.05px;
  opacity: .78;
}

#hub-view .recent-title {
  font-size: 9px;
  line-height: 1.15;
  letter-spacing: 0;
  color: #9b9fa9;
}

#hub-view .save-files {
  position: relative;
  width: 610px;
  height: 280px;
  margin: 3px 0 0 22px;
}

#hub-view .save {
  position: absolute;
  width: 238px;
  min-height: 84px;
  padding: 5px 7px;
  opacity: .42;
  transform-origin: 32px center;
  transition: opacity .14s steps(3), transform .14s steps(3), filter .14s steps(3);
}

#hub-view .save.books { top: 3px; left: 4px; }
#hub-view .save.games { top: 91px; left: 150px; }
#hub-view .save.movies { top: 183px; left: 42px; }

#hub-view .save::after { display: none; }

#hub-view .save::before {
  left: -10px;
  width: 6px;
  height: 6px;
  background: #dce9ff;
  box-shadow: 0 0 4px #fff, 0 0 10px rgba(67, 114, 196, .82);
}

#hub-view .save.is-selected,
#hub-view .save:hover,
#hub-view .save:focus-visible {
  opacity: 1;
  transform: translate3d(7px, -2px, 0) scale(1.025);
  filter: brightness(1.09);
  background: transparent;
}

#hub-view .save.is-selected::before,
#hub-view .save:hover::before,
#hub-view .save:focus-visible::before {
  opacity: 1;
}

#hub-view .save-icon {
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  margin-right: 17px;
  opacity: .62;
  filter: saturate(.48) brightness(.68);
  transition: opacity .14s steps(3), transform .14s steps(3), filter .14s steps(3);
}

#hub-view .books .save-icon::before,
#hub-view .games .save-icon::before,
#hub-view .movies .save-icon::before {
  border-color: rgba(149, 173, 215, .36);
  background: linear-gradient(145deg, rgba(153, 175, 211, .32), rgba(34, 54, 91, .42) 48%, rgba(2, 7, 19, .72));
  box-shadow: inset 0 0 11px rgba(190, 207, 235, .08), 0 0 7px rgba(52, 88, 151, .15);
}

#hub-view .books .save-icon::after,
#hub-view .games .save-icon::after,
#hub-view .movies .save-icon::after {
  border-color: rgba(183, 200, 226, .24);
  background: linear-gradient(135deg, rgba(216, 227, 242, .23), rgba(59, 79, 115, .10));
  box-shadow: 0 0 5px rgba(72, 106, 164, .10);
}

#hub-view .save.is-selected .save-icon,
#hub-view .save:hover .save-icon,
#hub-view .save:focus-visible .save-icon {
  opacity: 1;
  filter: saturate(.76) brightness(1.20);
  transform: translateZ(0) scale(1.055);
  box-shadow: none;
  animation: homeSavePulse 4.1s ease-in-out infinite;
}

#hub-view .save-title {
  color: #8d9098;
  font-size: 19px;
  line-height: 1;
  transition: color .12s steps(2), text-shadow .12s steps(2);
}

#hub-view .save-subtitle,
#hub-view .save-stats {
  opacity: .16;
  transition: opacity .14s steps(3);
}

#hub-view .save.is-selected .save-title,
#hub-view .save:hover .save-title,
#hub-view .save:focus-visible .save-title {
  color: #d7dce5;
  text-shadow: 1px 1px #000, 0 0 5px rgba(112, 151, 213, .32);
}

#hub-view .save.is-selected .save-subtitle,
#hub-view .save.is-selected .save-stats,
#hub-view .save:hover .save-subtitle,
#hub-view .save:hover .save-stats,
#hub-view .save:focus-visible .save-subtitle,
#hub-view .save:focus-visible .save-stats {
  opacity: .92;
}

#hub-view > .ps2-osd-footer {
  position: relative;
  width: 76%;
  margin-top: 4px;
  padding-top: 11px;
  border: 0;
}

#hub-view > .ps2-osd-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 62%;
  height: 1px;
  background: linear-gradient(90deg, rgba(75, 104, 165, .27), transparent);
}

@media (max-width: 700px), (hover: none), (pointer: coarse) {
  #hub-view > .ps2-header h1 {
    max-width: 100%;
    font-size: clamp(31px, 9.2vw, 39px);
  }

  #hub-view > .ps2-header .separator { width: 100%; }

  #hub-view .recent-activity-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 13px;
    width: 100%;
    margin: 12px 0 10px;
  }

  #hub-view .recent-item {
    min-height: 38px;
    opacity: .88;
  }

  #hub-view .recent-thumb {
    width: 25px;
    height: 33px;
    flex-basis: 25px;
  }

  #hub-view .recent-title {
    color: #c0c4cd;
    font-size: 9px;
  }

  #hub-view .save-files {
    position: static;
    display: flex;
    width: 100%;
    height: auto;
    margin: 2px 0 0;
    gap: 0;
  }

  #hub-view .save,
  #hub-view .save.books,
  #hub-view .save.games,
  #hub-view .save.movies {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    min-height: 82px;
    padding: 6px 5px;
    opacity: .88;
    transform: none;
    touch-action: manipulation;
  }

  #hub-view .save::before { left: -2px; }

  #hub-view .save.is-selected,
  #hub-view .save:active,
  #hub-view .save:focus-visible {
    opacity: 1;
    transform: translateX(4px);
    background: rgba(18, 37, 82, .10);
  }

  #hub-view .save-icon {
    width: 57px;
    height: 57px;
    flex-basis: 57px;
    margin-right: 14px;
    opacity: .82;
    filter: saturate(.58) brightness(.84);
  }

  #hub-view .save-title {
    color: #b9bdc5;
    font-size: 19px;
  }

  #hub-view .save-subtitle,
  #hub-view .save-stats {
    opacity: .76;
  }

  #hub-view .save.is-selected .save-title,
  #hub-view .save:focus-visible .save-title {
    color: #e0e4eb;
  }

  #hub-view > .ps2-osd-footer {
    width: 100%;
    margin-top: 10px;
  }

  #hub-view > .ps2-osd-footer::before { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  #hub-view .save.is-selected .save-icon,
  #hub-view .save:hover .save-icon,
  #hub-view .save:focus-visible .save-icon { animation: none; }
}

/* FINAL HOME READABILITY CALIBRATION — readable before interaction. */
#hub-view .recent-item { opacity: .80; }
#hub-view .recent-title {
  color: #c3c8d2;
  text-shadow: 1px 1px 2px #000, 0 0 4px rgba(5, 12, 28, .9);
}
#hub-view .recent-badge {
  opacity: .94;
  text-shadow: 1px 1px 2px #000;
}
#hub-view .save-title {
  color: #c6cad2;
  text-shadow: 1px 1px 2px #000, 0 0 5px rgba(3, 8, 20, .92);
}
#hub-view .save-subtitle,
#hub-view .save-stats {
  opacity: .62;
  text-shadow: 1px 1px 2px #000, 0 0 4px rgba(3, 8, 20, .9);
}

@media (min-width: 701px) and (hover: hover) and (pointer: fine) {
  #hub-view { max-width: 860px; }
  #hub-view > .ps2-header h1 { font-size: clamp(52px, 5vw, 60px); }
  #hub-view .recent-activity-bar { gap: 20px; margin-top: 17px; margin-bottom: 15px; }
  #hub-view .recent-item { min-height: 51px; gap: 9px; }
  #hub-view .recent-thumb { width: 36px; height: 48px; flex-basis: 36px; }
  #hub-view .recent-badge { font-size: 9px; letter-spacing: 1.15px; }
  #hub-view .recent-title { font-size: 12px; line-height: 1.2; }
  #hub-view .save-files { width: 770px; height: 360px; }
  #hub-view .save {
    width: 330px;
    min-height: 116px;
    opacity: .86;
  }
  #hub-view .save.books { top: 5px; left: 2px; }
  #hub-view .save.games { top: 122px; left: 205px; }
  #hub-view .save.movies { top: 240px; left: 50px; }
  #hub-view .save-icon {
    width: 88px;
    height: 88px;
    flex-basis: 88px;
    opacity: .94;
    filter: saturate(.78) brightness(1.16) contrast(1.09);
  }
  #hub-view .save-title { font-size: 26px; }
}

@media (max-width: 700px), (hover: none), (pointer: coarse) {
  #hub-view > .ps2-header h1 { font-size: clamp(35px, 10.2vw, 43px); }
  #hub-view .recent-item { min-height: 49px; gap: 8px; opacity: .92; }
  #hub-view .recent-thumb { width: 35px; height: 47px; flex-basis: 35px; }
  #hub-view .recent-badge { font-size: 8px; }
  #hub-view .recent-title { font-size: 11px; }
  #hub-view .save,
  #hub-view .save.books,
  #hub-view .save.games,
  #hub-view .save.movies {
    min-height: 104px;
    opacity: .94;
  }
  #hub-view .save-icon {
    width: 74px;
    height: 74px;
    flex-basis: 74px;
    opacity: .98;
    filter: saturate(.82) brightness(1.18) contrast(1.08);
  }
  #hub-view .save-title { font-size: 23px; }
  #hub-view .save-subtitle,
  #hub-view .save-stats { opacity: .76; }
}

/* FINAL HOME SCALE + ICON CONTRAST — intentionally last in cascade. */
@media (min-width: 701px) and (hover: hover) and (pointer: fine) {
  #hub-view { max-width: 810px; }
  #hub-view > .ps2-header h1 { max-width: 94%; font-size: clamp(48px, 4.7vw, 56px); }
  #hub-view > .ps2-header .separator,
  #hub-view .recent-activity-bar { width: 100%; }
  #hub-view .recent-activity-bar { gap: 18px; margin-top: 15px; margin-bottom: 13px; }
  #hub-view .recent-item { min-height: 43px; }
  #hub-view .recent-thumb { width: 30px; height: 40px; flex-basis: 30px; }
  #hub-view .recent-badge { font-size: 8px; }
  #hub-view .recent-title { font-size: 11px; }
  #hub-view .save-files { width: 720px; height: 334px; margin-left: 20px; }
  #hub-view .save {
    width: 300px;
    min-height: 108px;
    padding: 8px 10px;
    opacity: .62;
    transform-origin: 42px center;
  }
  #hub-view .save.books { top: 4px; left: 2px; }
  #hub-view .save.games { top: 111px; left: 184px; }
  #hub-view .save.movies { top: 221px; left: 46px; }
  #hub-view .save-icon {
    width: 82px;
    height: 82px;
    flex-basis: 82px;
    margin-right: 20px;
    opacity: .88;
    filter: saturate(.72) brightness(1.08) contrast(1.08);
    border-radius: 2px;
    background: radial-gradient(circle, rgba(75, 123, 205, .16), rgba(3, 8, 22, .16) 60%, transparent 74%);
    box-shadow: 0 0 18px rgba(66, 108, 181, .18);
  }
  #hub-view .save.is-selected .save-icon,
  #hub-view .save:hover .save-icon,
  #hub-view .save:focus-visible .save-icon {
    filter: saturate(.92) brightness(1.42) contrast(1.1);
    box-shadow: 0 0 8px rgba(221, 237, 255, .34), 0 0 25px rgba(70, 126, 224, .46);
  }
  #hub-view .save-title { font-size: 24px; }
  #hub-view .save-subtitle,
  #hub-view .save-stats { opacity: .30; }
}

@media (max-width: 700px), (hover: none), (pointer: coarse) {
  #hub-view .recent-thumb { width: 29px; height: 39px; flex-basis: 29px; }
  #hub-view .recent-title { font-size: 10px; }
  #hub-view .save,
  #hub-view .save.books,
  #hub-view .save.games,
  #hub-view .save.movies { min-height: 96px; }
  #hub-view .save-icon {
    width: 68px;
    height: 68px;
    flex-basis: 68px;
    opacity: .94;
    filter: saturate(.76) brightness(1.12) contrast(1.07);
    background: radial-gradient(circle, rgba(75, 123, 205, .16), rgba(3, 8, 22, .14) 62%, transparent 75%);
    box-shadow: 0 0 16px rgba(66, 108, 181, .20);
  }
  #hub-view .save.is-selected .save-icon,
  #hub-view .save:active .save-icon,
  #hub-view .save:focus-visible .save-icon {
    filter: saturate(.94) brightness(1.36) contrast(1.08);
    box-shadow: 0 0 8px rgba(221, 237, 255, .3), 0 0 22px rgba(70, 126, 224, .40);
  }
  #hub-view .save-title { font-size: 22px; }
}

/* LAST WORD: scale and legibility overrides. */
#hub-view .recent-item { opacity: .80; }
#hub-view .recent-title { color: #c3c8d2; }
#hub-view .recent-badge { opacity: .94; }
#hub-view .save-title { color: #c6cad2; }
#hub-view .save-subtitle,
#hub-view .save-stats { opacity: .62; }

@media (min-width: 701px) and (hover: hover) and (pointer: fine) {
  #hub-view { max-width: 860px; }
  #hub-view > .ps2-header h1 { font-size: clamp(52px, 5vw, 60px); }
  #hub-view .recent-activity-bar { gap: 20px; margin-top: 17px; margin-bottom: 15px; }
  #hub-view .recent-item { min-height: 51px; gap: 9px; }
  #hub-view .recent-thumb { width: 36px; height: 48px; flex-basis: 36px; }
  #hub-view .recent-badge { font-size: 9px; }
  #hub-view .recent-title { font-size: 12px; }
  #hub-view .save-files { width: 770px; height: 360px; }
  #hub-view .save { width: 330px; min-height: 116px; opacity: .86; }
  #hub-view .save.books { top: 5px; left: 2px; }
  #hub-view .save.games { top: 122px; left: 205px; }
  #hub-view .save.movies { top: 240px; left: 50px; }
  #hub-view .save-icon {
    width: 88px;
    height: 88px;
    flex-basis: 88px;
    opacity: .94;
    filter: saturate(.78) brightness(1.16) contrast(1.09);
  }
  #hub-view .save-title { font-size: 26px; }
}

@media (max-width: 700px), (hover: none), (pointer: coarse) {
  #hub-view > .ps2-header h1 { font-size: clamp(35px, 10.2vw, 43px); }
  #hub-view .recent-item { min-height: 49px; gap: 8px; opacity: .92; }
  #hub-view .recent-thumb { width: 35px; height: 47px; flex-basis: 35px; }
  #hub-view .recent-badge { font-size: 8px; }
  #hub-view .recent-title { font-size: 11px; }
  #hub-view .save,
  #hub-view .save.books,
  #hub-view .save.games,
  #hub-view .save.movies { min-height: 104px; opacity: .94; }
  #hub-view .save-icon {
    width: 74px;
    height: 74px;
    flex-basis: 74px;
    opacity: .98;
    filter: saturate(.82) brightness(1.18) contrast(1.08);
  }
  #hub-view .save-title { font-size: 23px; }
  #hub-view .save-subtitle,
  #hub-view .save-stats { opacity: .76; }
}