/* ============================================================
     TOKENS
  ============================================================ */
  :root{
    --cream:        #EFEBE1;
    --cream-dim:    #E3DED4;
    --cream-dimmer: #c7c1b6;
    --cream-line:   rgba(26,24,16,0.14);

    --ink:          #201D14;
    --ink-soft:     #55503F;

    --night:        #0B0F09;
    --night-2:      #121A0D;
    --night-line:   #99958C;

    --green:        #9FCB3B;
    --green-soft:   #C8E38A;
    --green-deep:   #4B6B22;
    --green-dim:    #6F8F3D;

    --tape:         #C9AC78;
    --paper-shadow: 0 10px 24px rgba(0,0,0,0.35);

    --font-display: 'Bitter', Georgia, serif;
    --font-mono:    'Space Mono', 'Courier New', monospace;
    --font-grunge:  'Rock Salt', cursive;
    --font-marker:  'Permanent Marker', cursive;
    --font-digital:  'Bitcount Grid Double', system-ui;

    --sidebar-w: 264px;
    --sidebar-w-collapsed: 80px;
    
    --bpmVariable: 1000ms;
  }

  *{ 
    box-sizing:border-box; 
    scrollbar-width:none;
    -ms-overflow: none;
    -webkit-tap-highlight-color: transparent;
    }
  *, *::before, *::after {
    -webkit-user-select: none; /* Safari / older WebKit */
    user-select: none;         /* Standard */
  }
  html,body{ margin:0; padding:0; }
  body{
    font-family:var(--font-mono);
    color:var(--ink);
    background:var(--night);
    -webkit-font-smoothing:antialiased;
  }
  a{ color:inherit; text-decoration:none; }
  ul{ list-style:none; margin:0; padding:0; }
  button{ font-family:inherit; cursor:pointer; }
  img,svg{ display:block; }

  .icon{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
  .icon.active{
    stroke:var(--tape); 
    filter:drop-shadow(0 0 5px var(--tape));
  }
  
  #songCatalog{
    margin-left: auto; 
  }
  #songCatalog svg{
    fill:var(--ink);
    width: 30px;
    height: 30px;
    color:var(--cream);
  }
  #songCatalogTop svg{
    fill:var(--cream);
    width: 35px;
    height: 35px;
    color:var(--ink);
  }
  .catalog-attention {
    animation:
      catalogPulse calc(var(--bpmVariable) * 3) ease-in-out infinite;
    }
    @keyframes catalogPulse {
      0% {transform: scale(1); filter: drop-shadow(0 0 0 var(--tape)); color: var(--tape); border-color: var(--tape);}
      50% {transform: scale(1.75); filter: drop-shadow(0 0 12px var(--tape)); color: var(--tape); border-color: var(--tape);}
      100% {transform: scale(1); filter: drop-shadow(0 0 0 var(--tape)); color: var(--tape); border-color: var(--tape);}
    }
  
  /* ============================================================
     Modal Popup
  ============================================================ */
  
  .modal{
    position:fixed;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    background:rgba(0,0,0,.75);
    backdrop-filter:blur(10px);
    opacity:1;
    transition:opacity .75s ease;
    z-index:99999;
  }
  .modal.hide{
    opacity:0;
    pointer-events:none;
  }
  .modal-card{
    width:min(520px,90vw);
    padding:32px;
    background:var(--cream) url(MainAssets/Textures/grungeSquare.webp);
    background-blend-mode: overlay;
    border-radius:12px;
    box-shadow:0 30px 60px rgba(0,0,0,.45);
    text-align:center;
  }
  .modal-card h2{
    margin-top:0;
    font-family:var(--font-display);
  }
  .modal-card p{
    line-height:1.8;
  }
  
  .modal-buttons{
    margin-top:30px;
  }
  .modal-buttons button{
    background:var(--green);
    color:var(--night);
    border:none;
    padding:12px 28px;
    border-radius:8px;
    font-weight:bold;
    letter-spacing:2px;
    cursor:pointer;
  }

  /* ============================================================
     LAYOUT SHELL
  ============================================================ */
  .app{
    display:grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height:100vh;
    transition:grid-template-columns .35s ease;
  }
  .app.collapsed{
    grid-template-columns: var(--sidebar-w-collapsed) 1fr;
  }

  /* ============================================================
     SIDEBAR
  ============================================================ */
  .sidebar{
    background:var(--cream) url('MainAssets/Textures/subtle-grunge.png');
    background-blend-mode: multiply;
    border-right:1px solid var(--cream-line);
    display:flex;
    flex-direction:column;
    height:100vh;
    position:sticky;
    top:0;
    overflow-x:hidden;
    scrollbar-width:none;
    -ms-overflow: none;
    z-index:200;
  }
  .sidebar::-webkit-scrollbar{
    display:none; 
  }
  
  #sidebarContainer{
    margin: 10px 10px 3px 10px; 
    border:1px solid var(--cream-line);
  }

  .sidebar-brand{
    display:flex;
    align-items:center;
    gap:12px;
    padding:22px 5px;
  }
  .brand-mark{
    width:46px; height:46px; flex-shrink:0;
    background: url('MainAssets/audiotoryLogo.png') center/contain no-repeat;
    position:relative;
  }
  .brand-text{ line-height:1.15; white-space:nowrap; overflow:hidden; }
  .brand-text .l1{ font-family:var(--font-display); font-weight:800; font-size:17px; letter-spacing:1px; }
  .brand-text .l2{ font-size:10px; letter-spacing:5px; color:var(--ink-soft); }

  .sidebar-toggle{
    margin-left:auto;
    background:none; border:1px solid var(--cream-line); border-radius:6px;
    width:28px; height:28px; display:flex; align-items:center; justify-content:center;
    color:var(--ink-soft);
    flex-shrink:0;
  }
  .sidebar-toggle:hover{ background:rgba(0,0,0,0.05); }
  #hamburgerToggle{display:none;}

  .sidebar-nav{ padding:6px 12px; flex:0 0 auto; }
  .sidebar-nav li + li{ margin-top:2px; }
  .nav-link{
    display:flex; align-items:center; gap:14px;
    padding:11px 12px;
    border-radius:3px;
    border-bottom: 1px solid var(--cream-line);
    font-size:12.5px;
    letter-spacing:1.5px;
    color:var(--ink);
    white-space:nowrap;
  }
  .nav-link:hover{ background:rgba(0,0,0,0.05); }
  .nav-link.active{ background:var(--green-soft); color:var(--ink); font-weight:700; }
  .nav-link .icon{ color:var(--green-deep); }

  .sidebar-divider{ 
    height:90px; 
    width:100%;
    background: url('MainAssets/paperTear.png') top center/contain no-repeat, url('MainAssets/Textures/subtle-grunge.png'), var(--cream-dimmer); 
    mix-blend-mode: darken;
  }

  .sidebar-widget{ 
    padding:0 20px 10px 20px; 
    background-color: var(--cream-dimmer);
    background-blend-mode: multiply;
  }
  .widget-eyebrow{ font-size:10px; letter-spacing:3px; color:var(--green-deep); font-weight:700; margin-bottom:10px; }
  .mascot-art{ 
    background: url('MainAssets/SpaceMokey_idleStretch.gif') center/contain no-repeat;
    height: 48px;
    padding-bottom: 5px;
    }
  .mascot-card{
    background: url('Space Monkey Arcade/assets/sky.png');
    filter: sepia(75%) hue-rotate(50deg) contrast(130%);
    border:1px solid var(--cream-line);
    border-radius:12px;
    padding:5px 0;
    text-align:center;
  }
  .mascot-line{ 
    font-size:10.5px; 
    letter-spacing:1px; 
    color:var(--cream); 
    line-height:1.9;
    padding: 5px 0;
    background-color: rgba(0, 0, 0, 0.40);
    }
  .mascot-heart{ color:var(--cream); font-size:25px; }

  .sidebar-player{
    margin-top:auto;
    padding:16px 20px 122px;
    border-top:1px solid var(--cream-line);
    background-color: var(--cream-dimmer);
    box-shadow: inset 0 -6px 1px rgba(0, 0, 0, 0.10);
  }
  .player-label{ font-size:10px; letter-spacing:2px; color:var(--ink-soft); margin-bottom:4px;}
  .player-track{ font-size:12px; font-weight:700; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .player-trackTop{ font-size:10px; color:var(--cream-dimmer); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .player-collection{ font-size:11px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .player-collectionTop{ font-size:8px; color:var(--cream); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .player-artist{ font-size:11px; color:var(--ink-soft); margin-bottom:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .player-artistTop{ font-size:8px; color:var(--cream); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .player-art {width: 75px; height: 75px;}
  .player-artTop {width: 50px; height: 50px;}
  .currentSongContainer {
    display: flex; 
    justify-content: space-between;
    align-items: center;
  }
  
  #vuMeter{
    width:100%;
    height:24px;
    background:#101010;
    border-radius:3px;
    border:1px solid rgba(255,255,255,.08);
    image-rendering:pixelated;
    display:block;
  }
  #vuMeterTop{
    width:150px;
    height:24px;
    background:none;
    border-radius:3px;
    border:1px solid rgba(255,255,255,.08);
    image-rendering:pixelated;
    display:block;
  }
  #trackArt, #trackArtTop{
    user-select: none;
    -webkit-user-drag: none; 
    pointer-events: none;
  }
  .player-controls{ display:flex; align-items:center; gap:14px; color:var(--ink); }
  .player-controlsTop{ display:flex; align-items:center; gap:14px; color:white; }
  .player-controls button, .player-controlsTop button, .player-songInformation button{ background:none; border:none; padding:2px; color:inherit; display:flex; }
  .player-controls .play, .player-controlsTop .play{
    width:30px; height:30px; border-radius:50%; background:var(--green); color:var(--night);
    align-items:center; justify-content:center;
  }
  .footer-copy{ font-size:9.5px; color:var(--ink-soft); margin-bottom:10px; letter-spacing:.5px; white-space:nowrap; text-align:center; }
  #volumeSlider{
    width:100%;
    appearance:none;
    height:4px;
    border-radius:4px;
    background:rgba(0,0,0,.25);
    outline:none;
    cursor:pointer;
  }
  #volumeSliderTop{
    width:100%;
    appearance:none;
    height:4px;
    border-radius:4px;
    background:rgba(255,255,255,.15);
    outline:none;
    cursor:pointer;
  }
  #volumeSlider::-webkit-slider-thumb{
    appearance:none;
    width:14px;
    height:14px;
    border-radius:50%;
    background:var(--green);
    border:2px solid var(--ink);
    cursor:pointer;
  }
  #volumeSliderTop::-webkit-slider-thumb{
      appearance:none;
      width:14px;
      height:14px;
      border-radius:50%;
      background:var(--green);
      border:2px solid var(--cream);
      cursor:pointer;
  }
  #volumeSlider::-moz-range-thumb{
    width:14px;
    height:14px;
    border:none;
    border-radius:50%;
    background:var(--green);
    cursor:pointer;
  }
  #volumeSliderTop::-moz-range-thumb{
      width:14px;
      height:14px;
      border:none;
      border-radius:50%;
      background:var(--green);
      cursor:pointer;
  }

  /* --- collapsed state --- */
  .app.collapsed .brand-text,
  .app.collapsed .nav-link span,
  .app.collapsed .sidebar-widget,
  .app.collapsed .sidebar-divider,
  .app.collapsed .player-label,
  .app.collapsed .player-track,
  .app.collapsed .player-artist,
  .app.collapsed .player-wave,
  .app.collapsed .footer-copy
  {
    display:none;
  }
  .app.collapsed .hero-topbar{position: fixed}
  .app.collapsed .sidebar-brand{ justify-content:center; flex-direction:column; padding:16px 0; gap:20px;}
  .app.collapsed .sidebar-toggle{ margin-left:0; }
  .app.collapsed .nav-link{ justify-content:center; padding:12px 0; }
  .app.collapsed .sidebar-player{ display:none; justify-content:center; padding:16px 0 22px; }
  .app.collapsed .player-controls{ flex-direction:column; gap:10px; }
  
  .sidebar-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.75);
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease;
    z-index:125;
  }
  
  /* ============================================================
     CATALOG PANEL
  ============================================================ */
  .song-catalog-panel{
    position:fixed;
    top:0;
    right:0;
    width:min(430px, 100vw);
    height:100vh;
    display:flex;
    flex-direction:column;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    color:var(--cream);
    background-color: rgb(12 16 9 / 92%);
    transform:translateX(100%);
    transition:transform .45s ease;
    z-index:500;
    padding:30px 30px 0;
    box-shadow: -20px 0 50px rgba(0,0,0,.5);
    isolation:isolate;
  }
  .song-catalog-panel::before{
    content:"";
    position:absolute;
    inset:0;
    border: 30px solid transparent;
    background: url("MainAssets/Textures/subtle-grunge.png");
    border-image-source: url("MainAssets/Textures/grungeBorder.webp");
    border-image-slice: 175 fill;
    border-image-repeat: stretch;
    mix-blend-mode: color-dodge;
    opacity: 1;
    pointer-events:none;
    z-index:-1;
  }

  .song-catalog-panel.open{
    transform:translateX(0);
  }
  
  .song-catalog-header{
    flex:0 0 auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-bottom:15px;
    margin-bottom: 0px;
  }
  #songCatalogContent{
    flex:1 1 auto;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:30px 0 15px 0;
  }
  
  .song-catalog-header h2{
    transform: rotate(350deg);
    margin: 5px 0;
    font-family:var(--font-grunge);
    user-select: none;
    color:var(--green);
    letter-spacing: 6px;
    text-decoration: underline;
    font-weight: bold;
    font-size:30px;
  }
  
  .song-catalog-header button{
    position: relative;
    top: -10px;
    right: 10px;
    background:none;
    border:none;
  }
  #closeSongCatalog svg {
    fill: var(--green);
    width: 30px;
    height: 30px;
    transition: 150ms
  }
  #closeSongCatalog:hover svg {
    fill: var(--cream);
  }
  
  .catalog-album{
    margin-bottom:35px;
  }
  
  .catalog-song{
    display:flex;
    position: relative;
    border-radius: 12px;
    gap:15px;
    padding:12px;
    margin-bottom:8px;
    background: rgb(0 0 0 / 21%);
    transition:.1s;
    box-shadow: inset 1px 1px 6px rgb(113 156 80 / 50%), inset 0 0 36px rgb(134 166 53 / 33%);
  }
  .catalog-song::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1.5px;
    box-shadow: 
    inset 2px 2px 5px rgba(0, 0, 0, 0.6),
    inset 0 0 12px rgba(0, 0, 0, 0.4);
    background: linear-gradient(196deg, rgba(175, 220, 60, 0.9) 0%, rgba(30, 40, 15, 0.2) 10%, rgba(159, 203, 59, 0.4) 45%, rgba(175, 220, 60, 0.9) 50%, rgba(30, 40, 15, 0.2) 85%, rgba(175, 220, 60, 0.9) 100%);
    /* Mask trick: renders the gradient ONLY on the border edge */
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    /* Outer glow concentrated at top-left */
    filter: drop-shadow(-2px -2px 6px rgba(159, 203, 59, 0.4));
  }
  .catalog-song:hover{
    background:rgba(159,203,59,.15);
  }
  
  .catalog-song.now-playing{
    box-shadow: inset 1px 1px 6px rgb(229 174 75 / 42%), inset 0 0 36px rgb(213 151 39 / 33%);
  }
  .catalog-song.now-playing::before{
    background: linear-gradient(196deg, rgba(201, 172, 120, 0.9) 0%, rgba(40, 32, 15, 0.2) 10%, rgba(201, 172, 120, 0.4) 45%, rgba(201, 172, 120, 0.9) 50%, rgba(40, 32, 15, 0.2) 85%, rgba(201, 172, 120, 0.9) 100%);
    filter: drop-shadow(-2px -2px 6px rgba(229, 174, 75, 0.4));
  }
  .catalog-song.now-playing:hover{
    filter: drop-shadow(-2px -2px 6px rgba(229, 174, 75, 0.15));
  }
  
  .catalog-album-title{
    position: relative;
    width: 97%;
    display: flex;
    transform: rotate(358deg);
    gap: 10px;
    align-items: center;
    color: var(--ink);
    cursor: pointer;
    font-family: var(--font-marker);
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 4px;
    padding: 10px 20px;
    background: url("MainAssets/Textures/tapeTexture.webp");
    border-style: solid;
    border-color: transparent;
    border-width: 0 30px 0 15px;
    background-clip: padding-box;
  }
  .catalog-album-title::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -23px;
    right: -34px;
    pointer-events: none;
    border-style: solid;
    border-width: 0px 36px 0 33px;
    border-image-source: url(MainAssets/Textures/tape.webp);
    border-image-slice: 37;
    border-image-repeat: stretch;
  }
  .catalog-album-title svg{
    width: 25px;
    height: 25px;
  }
  .catalog-album-title:hover {
    filter: brightness(1.4);  
  }
  .catalog-album-title.albumComplete{
    text-shadow: 0 0 10px var(--tape);
    filter: hue-rotate(56deg) saturate(1.5);
  }
  .catalog-album-title.albumComplete:hover{
    filter: hue-rotate(56deg) saturate(1.5) brightness(1.4);
  }
  .catalog-album-title.albumComplete span:first-child {
    filter:drop-shadow(0 0 6px var(--tape));
  }
  .catalog-album-title.albumComplete .album-count {
    font-weight: bold;
  }

  .catalog-cover{
    width:70px;
    height:70px;
    object-fit:cover;
    border-radius:5px;
  }
  
  .catalog-info{
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  
  .catalog-title{
    font-family:var(--font-display);
    font-size:16px;
  }
  
  .catalog-album-title {
    display:flex;
    align-items:center;
  }

  .album-count {
    margin-left:auto;
    opacity:.7;
    letter-spacing:2px;
  }
  
  .catalog-artist{
    font-size:10px;
    color:var(--cream-dim);
    letter-spacing:1px;
  }
  
  .catalog-progress {
    background: url(MainAssets/Textures/stickyNote.webp) no-repeat;
    background-size: 100% auto;
    background-position: top left;
    font-family:var(--font-marker);
    letter-spacing: 2px;
    display: inline-block;
    color: var(--ink);
    font-weight: bold;
    user-select: none;
    box-shadow: 0px 8px 2px 0px var(--night);
    margin-bottom: 24px;
    padding: 14px 11px 11px 13px;
  }
  #catalogProgress {
    box-shadow: 0 12px 13px -8px rgb(0, 0, 0);
    z-index: 1;
  }
  
  /* UNLOCK KEY STUFF */
  .song-key-button{
    position:relative;
    margin-left:auto;
    margin-right:18px;
    align-self:center;
    font-size:16px;
    width:50px;
    height:50px;
    border-radius:50%;
    border:1px solid var(--green-soft);
    background:transparent;
    color:var(--green-soft);
    cursor:pointer;
    font-family:var(--font-display);
  }
  
  .song-key-button:hover{
      color:var(--tape);
      border-color:var(--tape);
  }

  .song-key-button-inner.catalog-attention{
    display:inline-block;
    animation: catalogPulse calc(var(--bpmVariable) * 3) ease-in-out infinite;
  }
  
  .unlock-key-popup{
    position:fixed;
    inset:0;
    background: rgba(0,0,0,.65);
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    pointer-events:none;
    transition:.3s;
    z-index:2000;
  }
  .unlock-key-popup.show{
    opacity:1;
    pointer-events:auto;
  }
  .unlock-key-content{
    width: min(400px, 85vw);
    background: url(MainAssets/Textures/spiralNotePaper.webp) no-repeat;
    background-size: 100% auto, 170%;
    background-position: top left;
    padding: 30px;
    text-align: center;
    position: relative;
    rotate: 4deg;
    scale: 1;
    translate: 0 0;
    opacity: 1;
    transition: scale .15s ease-out;
  }

  .unlock-key-content{
    cursor: grab;
    touch-action: none;
  }
  .unlock-key-content.dragging{
    cursor: grabbing;
    animation: none !important;
  }
  .unlock-key-content.in-motion, .collage-item.in-motion{
    will-change: transform;
  }
  .unlock-key-popup.show .unlock-key-content.entering{
    animation: noteArrive .9s cubic-bezier(.22,.72,.2,1) both;
  }
  .unlock-key-popup.show .unlock-key-content.floating{
    animation: noteFloat 7s ease-in-out infinite;
  }

  @keyframes noteArrive{
    0%{
      opacity: 0;
      translate: 0 70px;
      scale: 1.35;
      filter: blur(8px);
    }
    65%{
      opacity: 1;
      translate: 0 -8px;
      scale: 0.97;
      filter: blur(0px);
    }
    100%{
      opacity: 1;
      translate: 0 0;
      scale: 1;
      filter: blur(0px);
    }
  }

  @keyframes noteFloat{
    0%{   translate: var(--floatBaseX,0px) var(--floatBaseY,0px); rotate: var(--floatBaseRotate,4deg); }
    25%{  translate: calc(var(--floatBaseX,0px) + 4px) calc(var(--floatBaseY,0px) - 6px); rotate: calc(var(--floatBaseRotate,4deg) + 1deg); }
    50%{  translate: calc(var(--floatBaseX,0px) - 3px) calc(var(--floatBaseY,0px) + 4px); rotate: calc(var(--floatBaseRotate,4deg) - 0.5deg); }
    75%{  translate: calc(var(--floatBaseX,0px) + 3px) calc(var(--floatBaseY,0px) + 5px); rotate: calc(var(--floatBaseRotate,4deg) + 0.6deg); }
    100%{ translate: var(--floatBaseX,0px) var(--floatBaseY,0px); rotate: var(--floatBaseRotate,4deg); }
  }
  .unlock-key-content h3{
    color: var(--ink);
    pointer-events: none;
    user-select: none;
    letter-spacing: 4px;
    font-family: var(--font-marker);
    position: relative;
    top: -15px;
    font-size: 21px;
    line-height: 1;
    left: 18px;
  }
  .unlock-key-content p{
    position: relative;
    pointer-events: none;
    user-select: none;
    color: var(--ink-soft);
    letter-spacing: 4px;
    font-family: var(--font-marker);
    position: relative;
    top: -38px;
    font-size: 21px;
    line-height: 1;
    left: 10px;
    text-decoration-line: spelling-error;
  }
  #closeUnlockKey{
    position: absolute;
    float: right;
    background: none;
    right: -2px;
    top: 18px;
    border: none;
    transform: rotate(282deg);
    color: var(--ink);
    font-size: 25px;
    font-family: var(--font-grunge);
    padding: 0px 17px;
  }
  
  .key-spin-counter{
    position:relative;
    top: -40px;
    right: 25px;
    margin:0;
    max-height:0;
    overflow:hidden;
    opacity:0;
    font-family:var(--font-digital);
    font-weight: bold;
    color:#900909;
    text-shadow:
      0 0 5px var(--tape),
      0 0 15px rgba(200,255,100,.4);
    letter-spacing:2px;
    transition: opacity .5s ease, max-height .5s ease, margin .5s ease;
  }
  .key-spin-counter.unlocked{
    opacity:1;
    max-height:80px;
    margin: 6px 0 14px;
  }
  #keySpinCountDisplay{
    z-index: 5;
    font-size: 18px;
    position: relative;
    top: 5px;
    right: 144px;
    display:inline-block;
    transition:opacity .15s;
  }
  .key-spin-label{
    display:block;
    position: relative;
    top: -16px;
    right: 26px;
    font-size: 15px;
    opacity:.6;
    text-transform:uppercase;
    letter-spacing:3px;
    margin-top:2px;
  }
  .spin-plus-one-toast{
    position:fixed;
    transform:translate(-50%,-50%);
    font-family:var(--font-digital);
    font-size:46px;
    font-weight:bold;
    color:var(--green);
    text-shadow:
      0 0 6px rgba(201,172,120,.8),
      0 0 18px rgba(201,172,120,.5);
    letter-spacing:2px;
    pointer-events:none;
    z-index:2100;
    animation: spinPlusOneToastFloat 1.1s ease-out forwards;
  }
  @keyframes spinPlusOneToastFloat{
    0%{   opacity:0; transform:translate(-50%,-50%) scale(0.7); }
    15%{  opacity:1; transform:translate(-50%,-65%) scale(1.15); }
    100%{ opacity:0; transform:translate(-50%,-140%) scale(1); }
  }
  
  /*Locked song-------*/
  .catalog-song.locked{
    opacity:.65;
    filter:none;
    cursor:not-allowed;
  }
  
  .catalog-song.locked .catalog-cover{
    filter:
      brightness(0.15)
      contrast(1.2);
  }
  
  .catalog-song.unlocked{
    cursor:pointer;
    position:relative;
    display:block;
    padding:0;
    background:none;
    overflow:visible;
  }
  
  .catalog-song.unlocked:hover{
    background:none;
  }
  .catalog-song-sleeve{
    position:relative;
    z-index:1;
    display:flex;
    gap:15px;
    padding:12px;
    border-radius:8px;
    background:rgba(255,255,255,.05);
    transition:.1s;
  }
  .catalog-song.unlocked:hover .catalog-song-sleeve{
    background:rgba(159,203,59,.18);
  }
  .catalog-record{
    position:absolute;
    cursor: pointer;
    top:50%;
    right:30px;
    width:60px;
    height:60px;
    margin-top:-30px;
    border-radius:50%;
    box-sizing:border-box;
    border:2px solid transparent;
    z-index:2;
    transform:translateX(0);
    opacity:0;
    transition:transform .5s cubic-bezier(.22,.85,.35,1.1), opacity .35s ease, border-color .35s ease, box-shadow .35s ease;
    background:
      repeating-radial-gradient(circle at center, rgba(0,0,0,.80) 0px, rgba(0,0,0,.80) 1px, transparent 1.5px, transparent 4px),
      radial-gradient(circle at center, #1c1a13 0 100%);
    box-shadow: 0 4px 12px rgba(0,0,0,.55);
  }
  .catalog-record::before{ /* label */
    content:"";
    position:absolute;
    inset:18px;
    border-radius:50%;
    background:var(--tape);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
  }
  .catalog-record::after{ /* spindle hole */
    content:"";
    position:absolute;
    inset:27px;
    border-radius:50%;
    background:var(--ink);
  }

  .catalog-song.unlocked.revealed .catalog-record{
    transform:translateX(60px); /* shifts exactly half its 60px diameter out past the row edge */
    opacity:1;
    border-color:var(--tape);
    box-shadow: 0 4px 12px rgba(0,0,0,.55), 0 0 6px rgba(201,172,120,.4);
  }

  @media (hover: hover) and (pointer: fine){
      .catalog-song.unlocked:hover .catalog-record{
        transform:translateX(60px);
        opacity:1;
      }
    }

  .catalog-record-toggle{
    position:relative;
    z-index:2;
    margin-left:auto;
    margin-right:18px;
    align-self:center;
    width:50px;
    height:50px;
    border-radius:50%;
    border:1px solid rgba(239,235,225,.25);
    background:
      url("MainAssets/SVG/record.svg") center / 70% no-repeat,
      rgba(255,255,255,.03);
    opacity:.50;
    filter:grayscale(0);
    cursor:pointer;
    transition:opacity .25s, filter .25s, border-color .25s, box-shadow .25s, transform .1s ease;
  }

  .catalog-record-toggle:active{
    transform:scale(0.85);
  }

  .catalog-record-toggle:hover{
    opacity:.7;
  }

  .catalog-record-toggle.active{
    opacity:1;
    filter:none;
    border-color:var(--tape);
    box-shadow:0 0 8px rgba(201,172,120,.5);
  }
  
  .catalog-locked{
    font-size:18px;
    letter-spacing:3px;
    color:var(--cream-dim);
  }

  .catalog-song-list{
    padding:15px 35px 0 0;
  }
  
  /* ============================================================
     SONG ACHIEVEMENT POPUPS
  ============================================================ */
  .song-popup {
    position: fixed;
    top: 125px;
    left: calc(var(--sidebar-w) + 44px);
    display:flex;
    align-items:center;
    gap:14px;
    width:min(360px, calc(100vw - 40px));
    background:
      linear-gradient(
        145deg,
        rgba(18,26,13,0.96),
        rgba(11,15,9,0.96)
      );
    border:1px solid rgba(200,227,138,0.35);
    border-left:3px solid var(--green);
    border-radius:10px;
    padding:14px;
    color:var(--cream);
    font-family:var(--font-mono);
    box-shadow:
      0 0 50px var(--tape),
      inset 0 0 20px rgba(159,203,59,.08);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    z-index:1000;
    opacity:0;
    transform:translateY(-25px) rotate(-1deg);
    
    transition:
      opacity .75s ease,
      transform .75s ease;
  }
  
  .song-popup.show {
    opacity:1;
    transform:translateY(0) rotate(0deg);
  }
  .song-popup.hide {
    pointer-events:none;
  }
  
  /* Album artwork */
  .song-popup-art {
    width:58px;
    height:58px;
    object-fit:cover;
    flex-shrink:0;
    border-radius:4px;
    border:1px solid rgba(239,235,225,.25);
    box-shadow:
      0 5px 15px rgba(0,0,0,.45);
  }
  
  /* Text container styling */
  .song-popup-label {
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:3px;
    color:var(--green);
    font-weight:700;
    margin-bottom:5px;
  }
  
  .song-popup-title {
    font-family:var(--font-display);
    font-size:1.05rem;
    color:var(--cream);
    line-height:1.2;
    margin-bottom:4px;
    text-shadow: 1px 1px 0 rgba(0,0,0,.5);
  }
  
  .song-popup-album, .song-popup-artist {
    font-size:10px;
    letter-spacing:1px;
    color:var(--cream-dim);
    opacity:.85;
    line-height:1.5;
  }
  
  /* Tiny "terminal glow" accent */
  .song-popup::after {
    content:"";
    position:absolute;
    bottom:8px;
    right:12px;
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--green);
    box-shadow: 0 0 8px var(--green);
    opacity:.8;
  }

  /* ============================================================
     MAIN / HERO
  ============================================================ */
  .main{ background:var(--night); min-height:100vh; }

  .hero{
    position:relative;
    overflow:hidden;
    padding:26px 44px 40px;
    background:
      url('MainAssets/heroBGSpace.webp') center/cover no-repeat,
      radial-gradient(1200px 700px at 78% 20%, rgba(159,203,59,0.18), transparent 30%),
      linear-gradient(180deg, var(--night) 0%, var(--night-2) 55%, var(--night) 60%);
  }
  
  .hero-space{
    position:absolute;
    inset:0;
    background: url("MainAssets/heroBGSpace.webp") center/cover no-repeat;
    filter: blur(1px);
    z-index:0;
  }
  .hero-galaxy{
    position:absolute;
    inset:0;
    background: url("MainAssets/heroBGGalaxy.webp") center/cover no-repeat;
    z-index:1;
  }
  .hero-content{
    position:relative;
    z-index:5;
  }

  /* signature swirling audio-galaxy */
  .galaxy{
    position:absolute; right:25%; top:-20%; width:60vw; max-width:820px; aspect-ratio:1/1;
    pointer-events:none;
    opacity:.9;
    animation: spin calc(var(--bpmVariable) * 256) linear infinite;
    z-index:3;
  }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  .galaxy svg{ width:100%; height:100%; }

  .hero-topbar{
    display:flex;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:22px;
    position:absolute;
    z-index:100;
    top:26px;
    left:calc(var(--sidebar-w) + 44px);
    right:44px;
    padding:12px 18px;
    border:1px solid rgba(200,227,138,.15);
    border-radius:12px;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    overflow:hidden;
    isolation:isolate;
    will-change: transform;
  }
  .hero-topbar::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        url("MainAssets/Textures/brushed-alum.png"),
        rgba(11,15,9,.85);
    mix-blend-mode:color-dodge;
    opacity:.35;
    pointer-events:none;
    z-index:-1;
  }
  .player-controlsContainer, .player-songInformation{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:10px;
  }
  .topbar-wave{
    height:12px; width:130px;
    background:repeating-linear-gradient(90deg, var(--green-dim) 0 1px, transparent 1px 4px);
    opacity:.6;
  }
  .topbar-icons{ display:flex; gap:14px; }
  .topbar-icons button{ background:none; border:none; color:var(--cream); display:flex; }
  .topbar-icons .icon{ width:19px; height:19px; }

  .hero-grid{
    position:relative; z-index:5;
    padding-top: 80px;
    display:grid;
    grid-template-columns: minmax(280px,560px) 1fr;
    gap:40px;
    align-items:center;
  }

  .hero-title{
    font-family:var(--font-display);
    font-weight:900;
    color:var(--cream);
    font-size:clamp(40px,6vw,72px);
    line-height:.95;
    letter-spacing:1px;
    margin:0;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.35);
  }
  .hero-title .sub{
    display:block;
    font-size:.36em;
    letter-spacing:14px;
    color:var(--green);
    margin-top:14px;
    font-weight:700;
  }
  .hero-rule{ width:64px; height:3px; background:var(--green); margin:22px 0; border:none;}
  
  .hero-tag{ color:var(--cream); font-size:14px; padding: 5px 0 5px 15px; line-height:1.9; letter-spacing:.5px; max-width:420px; background-color: rgba(0, 0, 0, 0.65); 
    border-radius: 10px;
    box-shadow: 0 0 22px 11px rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(10px);
    }
  .hero-desc{ color:#B9B7A9; font-size:12.5px; padding: 5px 0 5px 15px; line-height:2; margin:25px 0 25px; max-width:420px; 
    border-radius: 10px; background-color: rgba(0, 0, 0, 0.65); 
    box-shadow: 0 0 22px 11px rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(10px);
  }
  .hero-cta{
    display:inline-flex; align-items:center; gap:8px;
    color:var(--green);
    font-size:13px; padding: 5px 0 5px 15px; letter-spacing:2px; font-weight:700;
    margin-top: 20px;
    border-bottom:1px solid transparent;
    background-color: rgba(0, 0, 0, 0.65); 
    box-shadow: 0 0 22px 11px rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(10px);
    }
  .hero-cta:hover{ border-color:var(--green); }

  /* ---- hero collage ---- */
  .collage{ position:relative; height:400px;}
  .collage-item{
    animation: noteFloat 7s ease-in-out infinite;
    cursor: grab;
    touch-action: none;
  }
  .collage-item.dragging{
    cursor: grabbing;
  }
  .collage-item.no-float{
    animation: none !important;
  }
  .stack{
    position:absolute; left:14%; bottom:0; width:200px;
  }
  
  .cassette{
    position:absolute; right:52%; bottom:75px; width:150px; height:92px;
    background:linear-gradient(160deg,#EFE9D6,#D8D0B8);
    border-radius:6px; box-shadow:var(--paper-shadow); rotate:4deg;
    padding:10px 12px;
  }
  .cassette .label{ background:#F7F3E6; border:1px solid var(--cream-line); border-radius:2px; height:34px; margin-bottom:8px; display:flex; align-items:center; justify-content:center; font-size:9px; letter-spacing:2px; color:var(--ink-soft); }
  .cassette .reels{ display:flex; justify-content:space-around; }
  .cassette .reel{ width:20px; height:20px; border-radius:50%; background:var(--night-2); box-shadow:inset 0 0 0 3px #D8D0B8; }

  .notebook{
    position:absolute; right:45%; bottom:214px; width:96px; height:118px;
    background:#EFE9D6; border-radius:3px; box-shadow:var(--paper-shadow); transform:rotate(-6deg);
    padding:12px;
  }

  .sticky{
    position:absolute; right:15%; top:8%; width:150px;
    background:#F4EFDD; border-radius:2px; box-shadow:var(--paper-shadow);
    padding:14px 14px 16px;
  }
  .sticky .tape{ position:absolute; top:-10px; left:50%; transform:translateX(-50%) rotate(-2deg); width:54px; height:18px; background:rgba(201,172,120,0.7); }
  .sticky h4{ margin:0 0 8px; font-size:11px; letter-spacing:2px; color:var(--ink); }
  .sticky li{ font-size:10px; display:flex; gap:6px; align-items:flex-start; margin-bottom:5px; color:var(--ink-soft); line-height:1.4; }
  .sticky li.done{ text-decoration:line-through; opacity:.6; }
  .sticky .box{ width:9px; height:9px; border:1px solid var(--ink-soft); margin-top:2px; flex-shrink:0; }
  .sticky .box.on{ background:var(--green-deep); border-color:var(--green-deep); }
  .sticky-measure{
    position:absolute;
    visibility:hidden;
    pointer-events:none;
    left:-9999px;
    top:0;
  }

  .photoTop{
    position:absolute; right:50%; bottom:214px; width:69px; height:84px;
    background:linear-gradient(160deg,#2B3A29,#0E140C);
    border-radius:2px; box-shadow:var(--paper-shadow); rotate:-3deg;
    padding:6px;
  }
  .photo{
    position:absolute; width:140px; height:96px;
    background:linear-gradient(160deg,#2B3A29,#0E140C);
    border-radius:2px; box-shadow:var(--paper-shadow); rotate:-3deg;
    padding:6px;
    isolation: isolate;
  }
  .photo .frame, .photoTop .frame{
    width: 100%;
    height: 79%
  }
  #tv{
    position: relative;
    height: 139px;
  }
  #tv::after{
    content: "";
    position: absolute;
    inset: 0;
    background: url("MainAssets/crtMonitor.webp") center / cover no-repeat;
    pointer-events: none;
    z-index: 4;
  }
  #tv .cap {
    position: relative;
    top: -28px;
    font-size: 10px;
    letter-spacing: 1.5px;
    color: #ffffff;
    background: rgb(0 0 0);
    opacity: 0.7;
    z-index: 1;
  }
  #tvScreen {
    position: relative;
    top: 6px;
    left: 6px;
    background: url(MainAssets/heroTVDrums.webp);
    background-size: 575px 90px;
    image-rendering: pixelated;
    animation: tvAnimate calc(var(--bpmVariable) * 2) steps(5) infinite;
  }

  #tvScreen.tvHit {
    background-size: 69px 90px !important;
  }
  #tvScreen.damage1 {
    background-size: 567px 90px;
  }
  #tvScreen.damage2 {
    background-size: 537px 90px;
  }
  #tvScreen.damage3 {
    background-size: 555px 69px;
  }
  #tvScreen.damage4 {
    background-size: 535px 45px;
  }
  #tvScreen.damage5 {
    background-size: 490px 34px;
  }
  #tvScreen.damage6 {
    background-size: 329px 50px;
  }
  #tvScreen.damage7 {
    background-size: 129px 40px;
  }
  #tvScreen.damage8 {
    background-size: 7px 15px;
  }
  @keyframes tvAnimate {
    from { background-position: 0 0; }
    to { background-position: -1150px 0; }
  }
  /* Row 1 */
  #tvScreen.damage1::after { display: block; background-position: 0px 0px; }
  #tvScreen.damage2::after { display: block; background-position: -115px 0px; }
  #tvScreen.damage3::after { display: block; background-position: -230px 0px; }
  #tvScreen.damage4::after { display: block; background-position: -345px 0px; }
  /* Row 2 */
  #tvScreen.damage5::after { display: block; background-position: 0px -75px; }
  #tvScreen.damage6::after { display: block; background-position: -115px -75px; }
  #tvScreen.damage7::after { display: block; background-position: -230px -75px; }
  #tvScreen.damage8::after { display: block; background-position: -345px -75px; }

  .photo .cap, .photoTop .cap{ font-size:8px; letter-spacing:1.5px; color:#C9C3AE; text-align:center; margin-top:5px; }
  
  #goopert{
    background-image: url('MainAssets/goopbertSpritesheet50.png');
    position: relative;
    width: 100%;
    height: 100%;
    filter: hue-rotate(135deg) contrast(200%);
    background-position: center top;
    animation: goopertMunch var(--bpmVariable) steps(2) infinite;
  }
  @keyframes goopertMunch {
    from { background-position: 0px; }
    to { background-position: -114px; }
  }

.quest-tag{
    position:absolute; left:6%; bottom:16px; background:var(--night-2); color:var(--green-soft);
    font-size:9.5px; letter-spacing:1.5px; padding:8px 12px; border-radius:2px; rotate:-2deg;
    box-shadow:var(--paper-shadow);
  }
  
  /* ============================================================
     UNLOCK CRITERIA
  ============================================================ */
  
  /* SM001 */
  #snowmanUnlock{
    position:fixed;
    inset:0;
    display:none;
    justify-content:center;
    align-items:center;
    z-index:1999;
    pointer-events:none;
  }
  
  #snowmanUnlock.show{
    display:flex;
    cursor: pointer;
  }
  
  #snowmanUnlock span{
    --pulse-start: 1;
    --pulse-peak: 1.75;
    
    display: block;
    width:140px;
    height:160px;
    background: url("MainAssets/snowman.png");
    background-size: 560px 320px;
    cursor:pointer;
    animation:
      snowBob calc(var(--bpmVariable) * 2) steps(4) infinite,
      snowBobPulse calc(var(--bpmVariable) * 3) ease-in-out infinite;
    pointer-events:auto;
    image-rendering:pixelated;
  }
  #snowmanUnlock span.snowmanHit {
    pointer-events: none; 
    filter: sepia(25%) hue-rotate(75deg);
    animation: snowBobHit 500ms steps(3) forwards;
    image-rendering:pixelated;
  }
  #snowmanUnlock span.snowBobPulse2 {
    pointer-events:auto;
    animation:
      snowBob calc(var(--bpmVariable) * 2) steps(4) infinite,
      snowBobPulse2 calc(var(--bpmVariable) * 2) ease-in-out infinite alternate;
    image-rendering:pixelated;
  }
  #snowmanUnlock span.snowBobPulse3 {
    pointer-events:auto;
    animation:
      snowBob calc(var(--bpmVariable) * 2) steps(4) infinite,
      snowBobPulse3 calc(var(--bpmVariable) * 3) ease-in-out infinite alternate;
    image-rendering:pixelated;
  }
  #snowmanUnlock span.snowmanTopple {
    pointer-events: none; 
    filter: sepia(25%) hue-rotate(190deg);
    animation: snowBobToppled 2s steps(3) forwards;
    image-rendering:pixelated;
  }
  
  @keyframes snowBob {
    from { 
      background-position: 0px 0px; 
    }
    to { 
      background-position: -560px 0px; 
    }
  }

  @keyframes snowBobHit {
    from { 
      background-position: 0px 0px; 
    }
    to { 
      background-position: -420px 0px; 
    }
  }
  @keyframes snowBobToppled {
    0% { 
      background-position: 0px -160px, 0px 0px; 
      opacity: 1;
    }
    25% { 
      background-position: -420px -160px, 0px 0px; 
      opacity: 1;
    }
    75% { 
      background-position: -420px -160px, 0px 0px; 
      opacity: 1;
    }
    100% { 
      background-position: -420px -160px, 0px 0px; 
      opacity: 0;
    }
  }
  @keyframes snowBobPulse {
    0% {transform: scale(var(--pulse-start)); filter: hue-rotate(50deg) drop-shadow(0 0 0 var(--tape)); border-color: var(--tape);}
    50% {transform: scale(var(--pulse-peak)); filter: hue-rotate(50deg) drop-shadow(0 0 12px var(--tape)); border-color: var(--tape);}
    100% {transform: scale(var(--pulse-start)); filter: hue-rotate(50deg) drop-shadow(0 0 0 var(--tape)); border-color: var(--tape);}
  }
  @keyframes snowBobPulse2 {
    0% {transform: scale(var(--pulse-start)) translateX(50%); filter: hue-rotate(170deg) drop-shadow(0 0 0 var(--tape)); border-color: var(--tape);}
    50% {transform: scale(var(--pulse-peak)) translateX(0); filter: hue-rotate(170deg) drop-shadow(0 0 12px var(--tape)); border-color: var(--tape);}
    100% {transform: scale(var(--pulse-start)) translateX(-50%); filter: hue-rotate(170deg)drop-shadow(0 0 0 var(--tape)); border-color: var(--tape);}
  }
  @keyframes snowBobPulse3 {
    0% {transform: scale(var(--pulse-start)) translateX(100%) translateY(-100%); filter: hue-rotate(200deg) drop-shadow(0 0 0 var(--tape)); border-color: var(--tape);}
    15% {transform: scale(var(--pulse-peak)) translateX(0) translateY(0); filter: hue-rotate(200deg) drop-shadow(0 0 12px var(--tape)); border-color: var(--tape);}
    30% {transform: scale(var(--pulse-start)) translateX(-100%) translateY(50%); filter: hue-rotate(200deg) drop-shadow(0 0 0 var(--tape)); border-color: var(--tape);}
    50% {transform: scale(var(--pulse-peak)) translateX(0) translateY(0); filter: hue-rotate(200deg) drop-shadow(0 0 12px var(--tape)); border-color: var(--tape);}
    70% {transform: scale(var(--pulse-start)) translateX(100%) translateY(100%); filter: hue-rotate(200deg) drop-shadow(0 0 0 var(--tape)); border-color: var(--tape);}
    85% {transform: scale(var(--pulse-peak)) translateX(0) translateY(0); filter: hue-rotate(200deg) drop-shadow(0 0 12px var(--tape)); border-color: var(--tape);}
    100% {transform: scale(var(--pulse-start)) translateX(-100%) translateY(-50%); filter: hue-rotate(200deg) drop-shadow(0 0 0 var(--tape)); border-color: var(--tape);}
  }
  
  /* SM006 */
  #kirbyStar {
    position: absolute;
    cursor: pointer;
    right: 75%;
    top: 30%;
    width: 15px;
    height: 15px;
    animation: starBounce var(--bpmVariable) ease-in-out infinite alternate;
  }
  @keyframes starBounce{ to{ transform: translateY(7px); } }
  #kirbyStar svg {
    fill: var(--tape); 
  }
  
  #kirbyFlyby{
    filter: sepia(25%) hue-rotate(50deg);
  }
  
  .kirby-flyby {
    display: none; 
    position:fixed;
    left:-100px;
    z-index:9999;
    cursor:pointer;
    pointer-events:auto;
  }
  .kirby-flyby span {
    display: block;
    background-image: url('MainAssets/kirbyFlyby.png');
    background-repeat:no-repeat;
    width: 120px;
    height: 120px;
    background-size: 480px 120px;
    image-rendering:pixelated;
  }
  @keyframes kirbyAnimation {
    from { background-position: 0px 0px; }
    to { background-position: -480px 0px; }
  }
    
  /* horizontal flight */
  .kirby-flyby.fly {
    display:block;
    animation: flyAcross 4s linear forwards;
  }
  .kirby-flyby.fly span {
    animation: 
      bobWave calc(var(--bpmVariable) * 2) ease-in-out infinite alternate,
      kirbyAnimation calc(var(--bpmVariable)*2) steps(4) infinite;
  }
  @keyframes flyAcross {
    from {left:-120px;}
    to {left:110vw;}
  }
  @keyframes bobWave {
    from {transform: translateY(-80px);}
    to {transform: translateY(40px);}
  }
  
  /* ============================================================
     CARD GRID
  ============================================================ */
  #cardSectionContainer {
    background: linear-gradient(
      180deg, 
      var(--night) 0%,
      var(--night) 35%,
      var(--green-deep) 65%,
      var(--green-deep) 100%
    ), url(MainAssets/Textures/fabric-of-squares.png);
    background-blend-mode: overlay;
  }
  
  .cards-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:3px;
    padding:0 44px 20px;
    margin-top:-8px;
    position:relative; z-index:5;
  }
  .card{
    background:var(--cream) url(MainAssets/Textures/grungeSquare.webp);
    background-blend-mode: overlay;
    border-radius:10px;
    padding:16px;
    display:flex; flex-direction:column;
  }
  .card-head{ display:flex; align-items:center; gap:15px; margin-bottom:6px; }
  .card-head .icon{ width:40px; height:40px; color:var(--green-deep); }
  .card-head h3{ margin:0; font-size:13px; letter-spacing:2px; }
  .card-sub{ font-size:10px; color:var(--ink-soft); line-height:1.6; margin-bottom:12px; min-height:32px; }

  .card-art{
    height:200px; border-radius:6px; margin-bottom:12px; position:relative; overflow:hidden;
  }
  
  /* CARD GAMES */
  .art-games{ background:linear-gradient(180deg,#1B2A3A 0%,#12202E 55%,#0C1620 100%); }
  .art-games::before{ content:""; position:absolute; left:10%; bottom:0; width:80%; height:34%; background:#25422C; clip-path:polygon(0 40%,20% 0,100% 0,100% 100%,0 100%); }
  .art-games::after{ content:""; position:absolute; right:16%; top:14%; width:22px; height:22px; border-radius:50%; background:#EFE9D6; box-shadow:0 0 14px 3px rgba(239,233,214,0.5); }

  /* CARD MUSIC */
  .art-music{ 
    position: relative;
    overflow: hidden;
    background: url(MainAssets/cardArtMusic/cardArtMusic_Player.webp) center/cover no-repeat; 
  }
  .art-music::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: radial-gradient(circle at 0% 0%, rgb(199 255 110 / 82%) 0%, rgb(212 255 50 / 40%) 45%, transparent 75%);
    animation: candleFlicker calc(var(--bpmVariable) * 7.95) ease-in-out infinite alternate;
    animation-delay: -0.75s;
  }
  .art-music::after{
    content:"";
    position:absolute;
    inset:0;
    background: url(MainAssets/cardArtMusic/cardArtMusic_Record.webp) center/cover no-repeat;
    z-index: 3;
    pointer-events:none;
  }
  .art-music:hover .record-display{
    opacity: 1;
    filter: brightness(2);
  }
  .art-music:hover .record-art {
    animation:recordSpin calc(var(--bpmVariable) * 4) linear infinite;
  }
  .art-music:hover .record-needle{
    animation: needleHover calc(var(--bpmVariable) * 2) ease-in-out infinite alternate;
  }
    
  .record-art{
    position:absolute;
    width: 46%;
    aspect-ratio: 1;
    top: 48%;
    left: 42%;
    transform: translate(-50%,-50%);
    border-radius:50%;
    overflow:hidden;
    z-index: 1;
    animation:recordSpin calc(var(--bpmVariable) * 8) linear infinite;
  }
  .record-art img{
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .record-display{
    position:absolute;
    bottom:12px;
    left:50%;
    transform:translateX(-50%);
    width:70%;
    text-align:center;
    user-select: none;
    z-index:6;
    color:var(--green);
    font-family:var(--font-digital);
    letter-spacing:3px;
    text-transform:uppercase;
    opacity:.8;
    text-shadow:
      0 0 5px var(--tape),
      0 0 15px rgba(200,255,100,.4);
  }
  .record-display div{
    animation: digitalFlicker calc(var(--bpmVariable) * 16) infinite;
  }
  
  #featuredSongTitle{
    font-size:14px;
  }
  
  #featuredSongAlbum{
    font-size:10px;
    margin-top:5px;
    opacity:.7;
  }

  .record-needle{
    position:absolute;
    inset:0;
    background: url("MainAssets/cardArtMusic/cardArtMusic_Needle.webp") center/cover no-repeat;
    z-index:5;
    pointer-events:none;
    transform-origin: 88% 8%;
    animation: needleHover calc(var(--bpmVariable) * 4) ease-in-out infinite alternate;
  }

  @keyframes needleHover{
    from{transform:rotate(3deg);}
    to{transform:rotate(-2deg);}
  }
  @keyframes recordSpin{
    from{
      transform:
      translate(-50%,-50%)
      rotate(0deg);
    }
    to{
      transform:
      translate(-50%,-50%)
      rotate(360deg);
    }
  }
  @keyframes digitalFlicker{
    0%,100%{opacity:1;}
    5%{opacity:.45;}
    10%{opacity:.9;}
    40%{opacity:.75;}
    45%{opacity:.1;}
    50%{opacity:.95;}
  }

  /* CARD VIDEOS */
  .art-video{ background:radial-gradient(circle at 50% 30%, #3A2E1C, #0B0906 70%); }
  .art-video::before{ content:""; position:absolute; left:50%; top:0; width:2px; height:100%; background:linear-gradient(180deg,rgba(255,235,180,0.5),transparent); transform:translateX(-40px) rotate(10deg); }
  .art-video::after{ content:""; position:absolute; left:50%; top:0; width:2px; height:100%; background:linear-gradient(180deg,rgba(255,235,180,0.5),transparent); transform:translateX(30px) rotate(-8deg); }

  /* CARD POEMS */
  .art-poems { 
    position: relative;
    background: url(MainAssets/cardArtPoem.webp) center/cover no-repeat; 
    overflow: hidden;
  }
  .art-poems::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(circle at 0% 0%, rgb(255 200 110 / 94%) 0%, rgb(255 140 50 / 40%) 45%, transparent 75%);
    animation: candleFlicker calc(var(--bpmVariable) * 8) ease-in-out infinite alternate;
  }
  @keyframes candleFlicker {
    0% {
      opacity: 0.75;
      transform: scale(1);
    }
    15% {
      opacity: 0.90;
      transform: scale(1.05);
    }
    22% {
      opacity: 0.60;
      transform: scale(1);
    }
    38% {
      opacity: 0.85;
      transform: scale(1.08);
    }
    50% {
      opacity: 0.70;
      transform: scale(1.01);
    }
    73% {
      opacity: 0.95;
      transform: scale(1.10);
    }
    88% {
      opacity: 0.65;
      transform: scale(1.03);
    }
    100% {
      opacity: 0.80;
      transform: scale(1.15);
    }
  }

  #poemHighlight{
    position:absolute;
    inset:14px;
    color:var(--night);
    font-family:var(--font-display);
    user-select: none;
    font-style:italic;
    font-size:11px;
    line-height:1.7;
    z-index: 7;
  }
  .poem-title{
    font-size:13px;
    text-transform: uppercase;
    letter-spacing:1px;
    margin-bottom:8px;
    font-style:normal;
    font-weight:bold;
    transform: translate(1px, 15px) rotate(-5deg);
  }
  .poem-snippet{
    transform: translate(0px, 18px) rotate(-5deg);
    line-height: 1.95;
  }

  .art-shows{ background:radial-gradient(ellipse at 50% 0%, rgba(159,203,59,0.35), transparent 60%), #0B0F09; }
  .art-shows::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:40%; background-image:radial-gradient(rgba(237,231,216,0.5) 1px, transparent 1.4px); background-size:6px 6px; }

  .card-list{ font-size:10.5px; color:var(--ink); flex:1; }
  .card-list li{ padding:3px 0; letter-spacing:.3px; }
  .card-list li::before{ content:"> "; color:var(--green-deep); font-weight:700; }

  .card-btn{
    margin-top:12px;
    display:flex; align-items:center; justify-content:center; gap:8px;
    border:1px solid var(--ink); border-radius:6px;
    padding:10px; font-size:11px; letter-spacing:2px; font-weight:700;
    background:transparent;
  }
  .card-btn:hover{ background:var(--ink); color:var(--cream); }

  .continue-reading-btn{
    display:block;
    text-align: right;
    margin-bottom: 15px;
    font-size:10px;
    letter-spacing:1.5px;
    color:var(--ink-soft);
    text-decoration:underline;
    text-underline-offset:3px;
    transition:.15s;
  }
  .continue-reading-btn:hover{
    color:var(--green-deep);
  }
  .cardHR {
    border-bottom: 0px solid var(--cream-dim);
    color: var(--cream-dimmer);
    width: 100%;
  }

  /* ============================================================
     BOTTOM ROW
  ============================================================ */
  .bottom-grid{
    display:grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap:3px;
    padding:0 44px 40px;
    position:relative; z-index:2;
  }
  .panel{ background:var(--cream) url(MainAssets/Textures/grungeSquare.webp); background-blend-mode: overlay; border-radius:10px; padding:18px;}

  .log-panel{ display:grid; grid-template-columns:1.2fr 1fr; gap:14px; align-items:stretch; }
  .log-head{ display:flex; align-items:center; gap:8px; font-size:10px; letter-spacing:2px; color:var(--ink-soft); margin-bottom:10px; }
  .log-dot{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(159,203,59,0.25); }
  .log-date{ font-size:11px; font-weight:700; margin-bottom:6px; }
  .log-text{ font-size:11px; line-height:1.8; color:var(--ink-soft); margin-bottom:12px; }
  .log-more{ font-size:10px; letter-spacing:2px; font-weight:700; color:var(--green-deep); }
  .log-photo{ border-radius:6px; background:linear-gradient(160deg,#2E2A22,#0B0906); position:relative; overflow:hidden; min-height:120px; }
  .log-photo::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 30%, rgba(159,203,59,0.2), transparent 60%); }
  .log-photo::after{ content:""; position:absolute; left:16%; bottom:0; width:68%; height:56%; background:#171B12; clip-path:polygon(0 100%,0 40%,40% 10%,60% 30%,100% 0,100% 100%); }

  .tools-panel h4{ font-size:10px; letter-spacing:2px; color:var(--ink-soft); margin:0 0 18px; }
  .tools-labels{ display:flex; justify-content:space-between; font-size:8.5px; letter-spacing:1px; color:var(--ink-soft); }

  .tools-row{ 
    display:grid;
    grid-template-columns:repeat(7, 1fr);
    justify-items:center;
    align-items:center;
  }
  .iconMusic{ 
    width:50px; 
    height:50px;
    stroke:var(--cream); 
    fill:var(--ink); 
    stroke-width:2; 
    stroke-linecap:round; 
    stroke-linejoin:round; 
    flex-shrink:0; 
  }
  
  .tool-btn {
    background: none;
    border: 1px solid transparent;
  }
  .tool-btn.active{
    border: 1px solid var(--tape);
    background: rgba(197,220,110,.15);
  }
  .tool-btn.active .iconMusic{
    stroke:var(--tape);
    filter:drop-shadow(0 0 8px var(--tape));
  }

  .quote-panel{ background:linear-gradient(155deg,#5C7A2E,#39531C), url('MainAssets/Textures/cassette.webp') center/cover no-repeat; background-blend-mode: multiply; color:var(--cream); position:relative; overflow:hidden; }
  .quote-eyebrow{ font-size:9.5px; letter-spacing:2px; opacity:.85; margin-bottom:10px; }
  .quote-body{ font-family:var(--font-display); font-size:15px; line-height:1.5; }
  .quote-attr{ margin-top:14px; font-size:11px; letter-spacing:1px; opacity:.85; }

  /* ============================================================
     FOOTER
  ============================================================ */
  .site-footer{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 44px; border-top:1px solid var(--night-line);
    font-size:9.5px; letter-spacing:2px; color:#9A9782;
    position:relative; z-index:2;
  }
  .site-footer .heart{ color:var(--green); }

  /* ============================================================
     RESPONSIVE
  ============================================================ */
  @media (max-width: 1530px){
    .cards-grid{ grid-template-columns:repeat(4,1fr); }
  }
  @media (max-width: 1326px){
    .cards-grid{ grid-template-columns:repeat(3,1fr); }
    .bottom-grid{ grid-template-columns:1fr 1fr; }
    .log-panel{ grid-column:1 / -1; }
    .tools-row{grid-template-columns:repeat(4, 1fr);}
  }
  @media (max-width: 860px){
    body.menu-open{
      overflow:hidden;
    }
    .hero-space {
    }
    .galaxy {
      width:90vw;
      top: 40%;
    }
    .app{ grid-template-columns: 1fr; }
    .app.collapsed{ grid-template-columns:1fr; }
    .sidebar{
      position:fixed; left:0; top:0; width:var(--sidebar-w);
      transform:translateX(-100%); transition:transform .3s ease; box-shadow:0 0 40px rgba(0,0,0,0.4); touch-action: pan-y;
    }
    .sidebar.dragging{
      transition:none;
    }
    #hamburgerToggle{display: inline;}
    .app.nav-open .sidebar{ transform:translateX(0); }
    .app.collapsed .sidebar{ width:var(--sidebar-w); }
    .app.collapsed .brand-text,
    .app.collapsed .nav-link span,
    .app.collapsed .sidebar-widget,
    .app.collapsed .sidebar-divider,
    .app.collapsed .player-label,
    .app.collapsed .player-track,
    .app.collapsed .player-artist,
    .app.collapsed .player-wave,
    .app.collapsed .footer-copy{ display:revert; }
    .app.collapsed .sidebar-brand{ justify-content:flex-start; padding:22px 20px 16px; }
    .app.collapsed .nav-link{ justify-content:flex-start; padding:11px 12px; }
    .app.collapsed .sidebar-player{ display:block; padding:16px 20px 22px; }
    .app.collapsed .player-controls{ flex-direction:row; }
    .cards-grid{ grid-template-columns:repeat(2,1fr); padding:0 20px 20px; }
    .bottom-grid{ grid-template-columns:1fr; padding:0 20px 30px; }
    .log-panel{ grid-template-columns:1fr; }
    .hero-topbar{
      top: 12px;
      left: 20px;
      right: 20px;
      gap: 0;
      position: fixed;
      padding: 10px 14px;
      font-size: 9px;
      letter-spacing: 2px;
      flex-direction: column;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      background: rgba(11,15,9,.85);
    }
    .hero-cta, .hero-desc, .hero-tag{backdrop-filter: blur(0); }
    #kirbyStar {
      right: 40%;
      top: 19%;
      width: 15px;
      height: 15px;
    }
    .player-controlsContainer, .player-songInformation{
      gap: 8px; 
    }
    #vuMeterTop, #volumeSliderTop{
      width: 100%; 
    }
    #songCatalogTop {
      margin-left: auto;
    }
    
    .song-catalog-panel{
      width:100vw;
      height:100dvh;
      padding:20px 20px 0;
      touch-action: pan-y;
      backdrop-filter:blur(0);
      -webkit-backdrop-filter:blur(0);
    }
    #songCatalogContent{
      padding-bottom:20px;
    }
    .song-catalog-panel.dragging{
      transition:none;
    }
    .song-catalog-header h2{
      font-size: 27px;
      transform: rotate(355deg);
    }
    .catalog-song{
      padding:10px;
    }
    .catalog-cover{
      width:55px;
      height:55px;
    }
    .catalog-title{
      font-size:14px;
    }
    
    .song-popup {
      top:145px;
      left:20px;
      padding:12px;
    }
    .song-popup-art {
      width:48px;
      height:48px;
    }
    
    .player-meterVolume{
      width: auto;
    }
    .hero{ padding:20px 20px 30px; }
    .hero-grid{ grid-template-columns:1fr; padding-top: 115px}
    .collage{ height:280px; }
    .site-footer{ padding:14px 20px; flex-direction:column; gap:6px; text-align:center; }
    /* --- sidebar opened state --- */
    .app.nav-open .sidebar-overlay{
      opacity:1;
      pointer-events:auto;
    }
    @keyframes catalogPulse {
      0% {transform: scale(1); filter: drop-shadow(0 0 0 var(--tape)); color: var(--tape); border-color: var(--tape);border-width: 1px;}
      50% {transform: scale(1.50); filter: drop-shadow(0 0 12px var(--tape)); color: var(--tape); border-color: var(--tape); border-width: 3px;}
      100% {transform: scale(1); filter: drop-shadow(0 0 0 var(--tape)); color: var(--tape); border-color: var(--tape); border-width: 1px;}
    }
  
  }
  @media (max-width:520px){
    .cards-grid{ grid-template-columns:1fr; }
  }
  @media (max-width:475px){
    .unlock-key-content {
      width: 300px; 
      padding-left: 8px;
    }
    .unlock-key-content h3 {
      top: -22px;
      font-size: 17px;
    }
    .key-spin-counter.unlocked {
      top: -40px;
      right: 30px;
    }
    .key-spin-label {
      top: -5px;
      right: -28px;
    }
    #keySpinCountDisplay {
      font-size: 14px;
      top: 15px;
      right: 85px;
    }
    .unlock-key-content p {
      top: -53px;
      font-size: 17px;
    }
  }

  :focus-visible{ outline:2px solid var(--green); outline-offset:2px; }
  @media (prefers-reduced-motion: reduce){
    .galaxy{ animation:none; }
  }