#main-list
{
  padding-bottom: 260px; /* tweak number until it feels right */
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;

  /* warm off-white base */
  background-color: #F6F3EF;

  /* super subtle paper texture – low alphas everywhere */
  background-image:
    /* very light chromatic bleed */
    radial-gradient(circle at 30% 20%,
      rgba(255,   0,  80, 0.015),
      transparent 55%
    ),
    radial-gradient(circle at 70% 80%,
      rgba(  0, 120, 255, 0.015),
      transparent 60%
    ),

    /* faint vertical line imperfections */
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.015) 0px,
      rgba(0, 0, 0, 0.015) 1px,
      transparent 1px,
      transparent 20px
    ),

    /* micro horizontal fibres */
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.015) 0px,
      rgba(0, 0, 0, 0.015) 2px,
      transparent 2px,
      transparent 26px
    ),

    /* light speckle */
    repeating-linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.02) 0px,
      rgba(0, 0, 0, 0.02) 3px,
      transparent 3px,
      transparent 10px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(0, 0, 0, 0.018) 0px,
      rgba(0, 0, 0, 0.018) 3px,
      transparent 3px,
      transparent 12px
    );

  background-size:
    100% 100%,   /* chroma 1 */
    100% 100%,   /* chroma 2 */
    140px 100%,  /* vertical lines */
    100% 140px,  /* horizontal fibres */
    18px 18px,   /* speckle 1 */
    22px 22px;   /* speckle 2 */

  background-attachment: scroll; /* scrolls with content = real paper */
}

h1
{
    font-size: 9vw;
    color: white;
    background: black;
    text-align: center;
    vertical-align: middle;
}

.title
{
  /* Reserve a clear band above the banner for the AV monogram. Derived from the
     monogram's own size (top:6px + its height + ~22px gap) so the clearance is
     constant at every viewport — the mark never droops into the title text. */
  margin-top: calc(var(--av-mono-size) + 28px);
  margin-bottom: 0;
  font-family: 'Major Mono Display', monospace;
  font-size: 9vw;
  color: white;
  background: black;
  position: relative;

  text-align: center;
  vertical-align: middle;
  width: 100%;
  overflow: hidden; /* Keeps everything contained */

  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none;
}

.tab-buttons
{
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center; /* center the group of tabs */
}
.secret-btn
{
  display: inline-block;
  text-align: center;
  margin: 0 10px 0px 10px;
  padding: 8px 16px;
  border: 3px solid black;
  color: black;
  text-decoration: none;
  font-family: 'Major Mono Display', monospace;
  font-size: 44px;
  letter-spacing: 9px;
  transition: 0.4s;
}
.secret-btn:hover
{
  background-color: black;
  color: white;
}

:root
{
  --cardW: 169px;
  /* AV monogram size — scales with the viewport like the 9vw title (≈5.2rem at
     1366px), with a floor for phones and a cap for very wide screens. Both the
     mark and the title's top gap derive from this so they never collide. */
  --av-mono-size: clamp(2.4rem, 6vw, 9rem);
}

.tier-label
{
    display: flex;
    flex: 0 0 var(--cardW);
    align-items: center;
    justify-content: center;
    background: black;
    color: white;
    font-family: 'Major Mono Display', monospace;
    font-size: calc(var(--cardW) / 2.31) !important;
    width: var(--cardW);
    height: calc(var(--cardW) * 3 / 2);
    margin-right: 10px;
    padding: 10px 0;
    align-self: flex-start;
  }


/* Fixed-size cards with consistent box art ratio (2:3) */

.game-card
{
  width: 100%;
  aspect-ratio: 2 / 3;
  position: relative;
  border: 2px solid black;
  background-color: #000;
  overflow: hidden;
}

.game-card img
{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-title-overlay
{
  position: absolute;
  font-size: 21px;
  bottom: 100%; /* slide in from above */
  left: 0;
  width: 100%;
  background: black;
  color: white;
  font-family: 'Major Mono Display', monospace;
  font-size: 14px;
  padding: 9px;
  opacity: 0;
  transform: translateY(100%) scaleY(0);
  transform-origin: bottom;
  transition: transform 0.3s ease, opacity 0.3s ease;
  white-space: normal;
  text-align: center;
  box-sizing: border-box;
  border: 3px solid black;
}

.game-title-overlay a
{
  color: white;
  text-decoration: none;
}

/* hover over the overlay itself */
.game-title-overlay:hover {
  cursor: pointer; /* optional */
}

/* text + link color on hover */
.game-title-overlay:hover,
.game-title-overlay:hover a {
  color: darkorchid;
}

.game-title-overlay:hover a {
  text-decoration: underline;
}

/* ========== EXP OVERLAY: SLIDE RIGHT ========== */
.game-exp-overlay
{
  position: absolute;
  top: 0;
  left: 100%;

  width: max-content;      /* grow to the width of the longest line */
  min-width: 150%;        /* still at least card-width-ish */
  max-width: none;
  overflow: visible;
  min-height: 100%;
  max-height: 100%;

  transform: scaleX(0);
  transform-origin: left;
  background: black;
  color: white;
  font-family: 'Major Mono Display', monospace;
  font-size: 16.8px;
  padding: 9.6px;
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  white-space: normal;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* << keep PLATFORM/PLAYED/SCORE at the top */
  word-break: keep-all;      /* NEVER break inside words */
  overflow-wrap: break-word; /* but break whole words if too long */
}

/* ========== INFO OVERLAY: SLIDE DOWN ========== */
.game-details-overlay {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;                 /* match card width */
  background: black;
  color: white;
  font-family: 'Major Mono Display', monospace;
  font-size: 16.8px;
  padding: 9.6px;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s ease, opacity 0.3s ease;
  overflow: hidden;
  white-space: normal;
  box-sizing: border-box;
}

/* ===== SCORE STRIP UNDER CARD (SORT BY SCORE MODE) ===== */
.game-score-overlay
{
  width: 100%;
  /* height will be auto from padding/line-height, but you can fix it if you want */
  padding: 4px 0;
  margin-top: 4px;

  background: black;
  color: white;
  font-family: 'Major Mono Display', monospace;
  font-size: 18px;
  text-align: center;
  letter-spacing: 4px;

  border-left: 2px solid black;
  border-right: 2px solid black;
  border-bottom: 2px solid black;

  box-sizing: border-box;
  user-select: none;
}

.game-card-wrapper
{
  display: flex;
  flex-direction: column;
  width: var(--cardW);
  position: relative;
  overflow: visible;
  z-index: 1;
}

/* Smooth transforms for FLIP */
/* Base wrapper - Keep it static so JS can set the 'Invert' state instantly */
.game-card-wrapper {
  display: flex;
  flex-direction: column;
  width: var(--cardW);
  position: relative;
  overflow: visible;
  z-index: 1;
  will-change: transform, opacity;
  /* transition: 0.3s; <-- REMOVE THIS IF IT'S STILL THERE */
}

/* 1. MOVE & EXIT - Keep these as transitions */
.game-card-wrapper.is-moving {
  transition: transform 2.0s cubic-bezier(0.2, 0.9, 0.2, 1),
              opacity 0.5s ease;
}

.game-card-wrapper.is-leaving {
  transition: transform 2.0s cubic-bezier(0.7, 0, 0.3, 1),
              opacity 1.5s ease;
}

/* 3. ENTER: The "Loader-Style" Drop */
.game-card-wrapper.is-entering {
  /* We use 'animation' instead of 'transition' for a multi-phase drop */
  animation: card-click-in 0.8s ease-out forwards;
}

@keyframes card-click-in {
  0% {
    opacity: 0;
    /* JS sets the starting translateY, so we start from 'current' */
    transform: translateY(-250px);
  }
  /* The "Impact" - it dips slightly below the slot at 70% */
  70% {
    opacity: 1;
    transform: translateY(12px);
  }
  /* The "Click" - snaps back up to 0 */
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* :is(:hover, .tap-reveal) so touch devices can reveal a card with one tap
   (the .tap-reveal class is toggled in core.js on (hover:none) devices). */
.game-card-wrapper:is(:hover, .tap-reveal) {
  z-index: 200000 !important;            /* bring whole card + overlays above neighbors */
}

.game-card-wrapper:is(:hover, .tap-reveal) .game-details-overlay
{
  opacity: 1;
  transform: scaleY(1);
}

.game-card-wrapper:is(:hover, .tap-reveal) .game-exp-overlay {
  opacity: 1;
  transform: scaleX(1);
}

.game-card-wrapper:is(:hover, .tap-reveal) .game-title-overlay {
  opacity: 1;
  transform: translateY(0%) scaleY(1);
}

/* When we want to *force* the card to behave like it's not hovered */
.game-card-wrapper.force-collapse .game-title-overlay,
.game-card-wrapper.force-collapse .game-details-overlay,
.game-card-wrapper.force-collapse .game-exp-overlay {
  opacity: 0 !important;
  pointer-events: none !important;
}

.game-exp-overlay.open-left {
  left: auto;
  right: 100%;        /* attach to left side of card */
  transform-origin: right;  /* so scaleX animation comes from the right side */
}

.game-card-wrapper.exp-open-left .game-exp-overlay {
  left: auto;
  right: 100%;
  transform-origin: right;
}

.game-details-overlay p {
  margin: 5px 0;
  font-family: 'Major Mono Display', monospace;
}

.game-details-overlay a,
.game-comment a
{
  color: #33ccff !important;    /* or darkcyan */
  text-decoration: underline !important;
}
.game-details-overlay p span {
  font-family: Consolas, monospace;
  color: darkorchid;
}

.game-exp-overlay p
{
  margin: 5px 0;
  font-family: 'Major Mono Display', monospace;
}

.game-exp-overlay p span
{
  font-family: Consolas, monospace;
  color: darkorchid;
}

.game-comment
{
  font-style: bold;
  color: #E2DAF0;
  margin-top: auto;
  margin-bottom: 0;
  flex-shrink: 1;
  width: 100%;

  font-size: 18px;      /* was ~16.8 via parent */
  line-height: 1.35;    /* keeps it readable */
  letter-spacing: 0.3px;

  white-space: nowrap;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-shadow: 0 0 4px rgba(181,140,255,0.08);
}

.comment em {
  font-style: normal; /* kill italics if you want */
  color: #B58CFF;
}

.exp-spacer
{
  flex-grow: 1;     /* this fills all remaining vertical space */
  min-height: 0;    /* prevents weird rounding issues */
}

/* ===== YEAR GROUPING (when sorting by played/released) ===== */
.year-group
{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 18px;
  position: relative;       /* for frame corners */
}

/* cards inside a year group */
.year-group-cards {
  display: flex;
  flex-wrap: wrap;          /* allow wrapping inside a year */
  gap: 10px;
}

/* year text in the middle */
.year-label {
  margin-top: 4px;
  font-family: 'Major Mono Display', monospace;
  font-size: 18px;
  letter-spacing: 4px;
  text-align: center;
  position: relative;
  padding-top: 6px;
}

/* horizontal bottom line split into left + right, leaving gap under year text */
.year-label::before,
.year-label::after {
  content: "";
  position: absolute;
  bottom: 0;
  border-bottom: 2px solid black;
}

.year-label::before {
  left: 0;
  right: 50%;          /* line from left up to middle */
  margin-right: 40px;  /* widen the gap under the year text */
}

.year-label::after {
  right: 0;
  left: 50%;           /* line from middle to right  */
  margin-left: 40px;
}

/* vertical “frame corners” at ends */
.year-group::before,
.year-group::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 10px;             /* how tall the corner legs are */
}

.year-group::before {
  left: 0;
  border-left: 2px solid black;
}

.year-group::after {
  right: 0;
  border-right: 2px solid black;
}

/* Tab button styling */
/* Tab button styling - FLEXBOX FIX */

/* 1. Turn all row containers into Flex grids */
.tab-buttons,
.tab-row-category,
.tab-row-decade,
.tab-row-platform,
.tab-row-vibe,
.tab-row-sort,
.tab-row-columns
{
  display: flex;
  flex-wrap: wrap;         /* Allows buttons to wrap to next line if needed */
  justify-content: center; /* Centers them horizontally */
  align-items: center;     /* Vertically aligns labels with buttons */
  gap: 15px;               /* THE FIX: Adds consistent space between items (H & V) */
  margin-top: 20px;        /* Space between the distinct rows */
  margin-bottom: 0;
  text-align: center;
}

/* 2. Specific Tweaks for Bottom Rows */
.tab-row-sort,
.tab-row-columns
{
  margin-bottom: 30px;     /* Extra space at the bottom of the header area */
}

/* Search input */
.search-label { margin-left: auto; }
.search-input {
  font-family: 'Major Mono Display', monospace;
  font-size: 18px;
  letter-spacing: 4px;
  color: black;
  background: transparent;
  border: none;
  border-bottom: 2px solid black;
  outline: none;
  padding: 8px 4px;
  width: 180px;
}
.search-input::placeholder { opacity: 0.3; }

/* 3. Labels: Remove margins (Gap handles it now) */
.sort-label {
  font-family: 'Major Mono Display', monospace;
  font-size: 22px;
  letter-spacing: 7px;
  color: black;
  padding: 8px 16px;       /* Matches button padding for perfect alignment */
  margin: 0;               /* Reset margin */
  display: inline-block;
  border: none;
  background: transparent;
  pointer-events: none;
}

/* 4. Buttons: Remove margins (Gap handles it now) */
.tab-buttons .secret-btn
{
  display: inline-block;
  text-align: center;
  margin: 0;               /* Reset margin (Gap handles it) */
  padding: 8px 16px;
  border: 3px solid black;
  color: black;
  text-decoration: none;
  font-family: 'Major Mono Display', monospace;
  font-size: 22px;
  letter-spacing: 7px;
  transition: 0.4s;
}

.tab-buttons .secret-btn:hover
{
  background-color: black;
  color: white;
}

.tab-buttons .secret-btn.active,
.tab-buttons .secret-btn.active:hover
{
  background-color: black;
  color: white;
  border-color: white;
  box-shadow: 0 0 0 2px white;
}

.tier-section
{
    display: flex;
    align-items: flex-start;
    margin-bottom: 0px;
    /*extra line at the bottom, not needed 4 now
     border-bottom: 2px solid #000;
    padding-bottom: 20px; */
    position: relative;
    overflow: visible;

}

.tier-row
{
    display: flex;
    align-items: center;
    width: 100%;
  }

.row {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    gap: 10px;
    flex: 1;
  }

  .art-divider {
    width: 100%;          /* full width of the content column */
    max-width: 100vw;     /* never wider than viewport */
    height: 2.5vw;

    background: url('img/tier-list.svg') center center no-repeat;

    /* stretch horizontally, keep full vertical:
       tweak 130% to 140–150% if you want it even longer */
    background-size: 92% 100%;

    margin: 5px 0;        /* top = 5, right = 0, bottom = 5, left = 0 */
    display: block;
  }

/* ===== LOADER OVERLAY ===== */

#loader-overlay
{
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;

  /* copy page background so it looks identical */
  background-color: #F6F3EF;
  background-image:
    radial-gradient(circle at 30% 20%,
      rgba(255,   0,  80, 0.015),
      transparent 55%
    ),
    radial-gradient(circle at 70% 80%,
      rgba(  0, 120, 255, 0.015),
      transparent 60%
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.015) 0px,
      rgba(0, 0, 0, 0.015) 1px,
      transparent 1px,
      transparent 20px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.015) 0px,
      rgba(0, 0, 0, 0.015) 2px,
      transparent 2px,
      transparent 26px
    ),
    repeating-linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.02) 0px,
      rgba(0, 0, 0, 0.02) 3px,
      transparent 3px,
      transparent 10px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(0, 0, 0, 0.018) 0px,
      rgba(0, 0, 0, 0.018) 3px,
      transparent 3px,
      transparent 12px
    );

  background-size:
    100% 100%,
    100% 100%,
    140px 100%,
    100% 140px,
    18px 18px,
    22px 22px;
}

.loader-hidden
{
  display: none !important;
}

.loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* NUMBER: same font + size as title */
.loader-number {
  font-family: 'Major Mono Display', monospace;
  font-size: 18vw;
  letter-spacing: 12px;
  margin-bottom: 6rem;
  text-align: center;
}

/* we'll re-trigger this class from JS on every tick */
.loader-number.animate-in {
  animation: loader-number-enter 0.7s ease-out forwards;
}

/* slow fall, quick snap into place */
@keyframes loader-number-enter {
  0% {
    opacity: 0;
    transform: translateY(-150px);
  }
  60% {
    opacity: 1;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* DOTS */

.loader-dots {
  display: flex;
  gap: 26px;                        /* generous gap */
  font-family: 'Major Mono Display', monospace;
  font-size: 6.2vw;                 /* big but smaller than number */
}

.loader-dots span {
  display: inline-block;
  animation: loader-dot-wave 1.1s infinite ease-in-out;
}

/* phase offset → wave effect */
.loader-dots span:nth-child(2) {
  animation-delay: 0.15s;
}
.loader-dots span:nth-child(3) {
  animation-delay: 0.30s;
}

/* nice up-down wave (roughly sinus-ish) */
@keyframes loader-dot-wave {
  0%, 100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-12px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(8px);
  }
}

/* dots shake a bit when number clicks in */
.loader-dots.shake {
  animation: loader-dots-shake 0.25s ease;
}

@keyframes loader-dots-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  50%      { transform: translateX(4px); }
  75%      { transform: translateX(-2px); }
}

/* extra photocopy grain on loader */
.loader-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: multiply;

  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.05) 0px,
      rgba(0, 0, 0, 0.05) 1px,
      transparent 1px,
      transparent 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.04) 0px,
      rgba(0, 0, 0, 0.04) 1px,
      transparent 1px,
      transparent 4px
    ),
    repeating-linear-gradient(
      135deg,
      rgba(0, 0, 0, 0.035) 0px,
      rgba(0, 0, 0, 0.035) 1px,
      transparent 1px,
      transparent 6px
    );
}

/*----------VARIATION 1------------------*/
/* Alternative Pillar View */

body:not(.pillar-view-active) .tab-row-columns {
  display: none !important;
}
.pillar-view-active .tab-row-columns {
  display: block !important;
}
.pillar-view-active .tab-row-sort {
  display: none !important;
}
/* Docking buttons to the title */
.view-toggles
{
  background: black;
  display: flex;
  justify-content: center;
  padding-bottom: 10px; /* Some breathing room at bottom */
  margin-bottom: 20px;
}

.view-btn
{
  background: transparent;
  border: 2px solid white;
  color: white;
  font-family: 'Major Mono Display', monospace;
  font-size: 18px;
  padding: 6px 20px;
  margin: 0 5px;
  cursor: pointer;
  transition: 0.3s;
}

.view-btn.active
{
  background: white;
  color: black;
}

/* ==================== INSPIRATION VIEW ==================== */

.inspiration-subtitle {
  display: none;
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: 56px;
  font-weight: 500;
  letter-spacing: 8px;
  text-transform: lowercase;
  color: #2a2a2a;
  margin: 40px auto 70px;
  text-shadow:
    0 2px 10px rgba(255,255,255,0.75),
    0 0 26px rgba(255,228,176,0.55),
    0 0 1px rgba(0,0,0,0.15);
  position: relative;
  z-index: 6;
}
.inspiration-mode .inspiration-subtitle {
  display: block;
  animation: subtitle-glow 6s ease-in-out infinite;
}
@keyframes subtitle-glow {
  0%, 100% { text-shadow: 0 2px 10px rgba(255,255,255,0.75), 0 0 22px rgba(255,228,176,0.40), 0 0 1px rgba(0,0,0,0.15); }
  50%      { text-shadow: 0 2px 12px rgba(255,255,255,0.85), 0 0 40px rgba(255,224,160,0.75), 0 0 1px rgba(0,0,0,0.15); }
}
.inspiration-mode .tab-buttons,
.inspiration-mode .tab-row { display: none !important; }
/* Golden-hour sky: cool zenith fading to a warm, hazy horizon. */
.inspiration-mode {
  background:
    radial-gradient(120% 80% at 50% 110%, rgba(255,236,196,0.85) 0%, rgba(255,236,196,0) 55%),
    linear-gradient(180deg, #9cc1de 0%, #c4dcef 38%, #ecdfc6 78%, #f6e9cf 100%);
  background-attachment: fixed;
  overflow-x: hidden;                /* wide clouds/flares must not cause sideways scroll */
}
/* Cinematic vignette — frames the whole scene like a film still. */
.inspiration-mode::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(125% 95% at 50% 42%,
    transparent 55%, rgba(40,55,80,0.10) 78%, rgba(28,40,66,0.28) 100%);
}

/* BG: 1 static sky + 3 horizontally-drifting cloud bands; element is injected
   only while inspiration view is active. */
.inspiration-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.cloud-layer {
  position: absolute;
  inset: 0;
  background-repeat: repeat;
  will-change: background-position, transform;
}
.cloud-layer-1 {
  background-image: url("img/clouds/cloud_bg.png");
  background: url("img/clouds/cloud_bg.png") center bottom / cover no-repeat;
  opacity: 0.45;
}
/* Layers 2-4 tile only horizontally; the mask hides each band's flat top/bottom
   so the assets don't cut a hard horizontal line across the sky. */
.cloud-layer-2 {
  background-image: url("img/clouds/cloud_bg2.png");
  background-size: 1000px auto;
  background-repeat: repeat-x;
  opacity: 0.45;
  animation: drift-2 160s linear infinite;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 28%, transparent 40%);
          mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 28%, transparent 40%);
}
.cloud-layer-3 {
  background-image: url("img/clouds/cloud_bg3.png");
  background-size: 800px auto;
  background-repeat: repeat-x;
  opacity: 0.65;
  animation: drift-3 110s linear infinite;
  -webkit-mask-image: linear-gradient(to bottom, transparent 35%, black 45%, black 60%, transparent 72%);
          mask-image: linear-gradient(to bottom, transparent 35%, black 45%, black 60%, transparent 72%);
}
.cloud-layer-4 {
  background-image: url("img/clouds/cloud_bg4.png");
  background-size: 600px auto;
  background-repeat: repeat-x;
  opacity: 0.85;
  animation: drift-4 70s linear infinite;
  -webkit-mask-image: linear-gradient(to bottom, transparent 62%, black 72%, black 88%, transparent 98%);
          mask-image: linear-gradient(to bottom, transparent 62%, black 72%, black 88%, transparent 98%);
}
@keyframes drift-2 { from { background-position:    0  20%; } to { background-position: -1000px 20%; } }
@keyframes drift-3 { from { background-position:    0  50%; } to { background-position:   800px 50%; } }
@keyframes drift-4 { from { background-position:    0  78%; } to { background-position:  -600px 78%; } }

.bottom-mist {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 35vh;
  background: linear-gradient(to top,
    rgba(245,250,255,0.88) 0%, rgba(245,250,255,0.55) 35%,
    rgba(245,250,255,0.20) 65%, transparent 100%);
  pointer-events: none;
}

/* Layout: tiles are absolutely positioned by JS within a relative grid. */
.inspiration-grid {
  position: relative;
  width: 100%;
  z-index: 1;
}
.inspiration-tile {
  position: absolute;
  width: var(--tile-w, 280px);
  margin-left: calc(var(--tile-w, 280px) / -2);          /* center on the `left` coord */
  animation: tile-enter 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
  animation-delay: var(--enter-delay, 0s);
}
@keyframes tile-enter {
  from { opacity: 0; transform: translateY(46px) scale(0.92); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    filter: blur(0);   }
}
/* perspective here drives the magnetic-system 3D tilt on .game-card-wrapper. */
.inspiration-tile-card {
  position: relative;
  perspective: 1000px;
  animation: cloud-drift var(--float-dur, 7s) ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
  filter: drop-shadow(0 16px 24px rgba(60,80,120,0.22));
}
.inspiration-tile-card::after {                           /* the cloud under each tile */
  content: '';
  position: absolute;
  left: 50%;
  bottom: -120px;
  transform: translateX(-60%);
  width: 253%;
  height: 242px;
  background: var(--cloud-img) center / contain no-repeat;
  z-index: 3;
  pointer-events: none;
}
@keyframes cloud-drift {
  0%,100% { transform: translate(0,    0)    rotate(-0.4deg); }
  25%     { transform: translate(8px, -10px) rotate(0.2deg);  }
  50%     { transform: translate(-6px,-18px) rotate(0.4deg);  }
  75%     { transform: translate(10px,-6px)  rotate(-0.2deg); }
}

.inspiration-tile:hover { z-index: 100; }
.inspiration-tile .game-card-wrapper {
  transition: transform 0.22s ease-out;
  transform-origin: center center;
  will-change: transform;
}
/* Fallback only — the JS magnetic system overrides this with scale + tilt. */
.inspiration-tile:hover .game-card-wrapper { transform: scale(1.11); }

/* ==================== FOCUSED-CARD LIGHTING ====================
   All four layers are driven by .magnetic-active + --light-strength (0-1). */

.light-beam {
  position: absolute;
  inset: -60%;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  background:
    radial-gradient(closest-side at var(--beam-x, 32%) var(--beam-y, 28%),
      rgba(255,244,212,0.85) 0%, rgba(255,244,212,0.40) 35%,
      rgba(255,244,212,0.12) 65%, transparent 100%),
    linear-gradient(var(--beam-angle, 155deg),
      transparent 30%, rgba(255,248,222,0.28) 44%,
      rgba(255,248,222,0.55) 50%, rgba(255,248,222,0.28) 56%,
      transparent 70%);
  filter: blur(8px);
}
.inspiration-tile.magnetic-active .light-beam { opacity: var(--light-strength, 1); }

.light-dust {
  position: absolute;
  inset: -32%;                                             /* reach past the 1.22x-scaled card */
  z-index: 5;                                              /* float in front, like motes in the beam */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.55s ease;
  background-image:
    radial-gradient(circle 1.5px at 22% 18%, rgba(255,250,220,0.95), transparent),
    radial-gradient(circle 1px   at 47% 32%, rgba(255,250,220,0.85), transparent),
    radial-gradient(circle 2px   at 68% 24%, rgba(255,250,220,0.90), transparent),
    radial-gradient(circle 1px   at 35% 48%, rgba(255,250,220,0.75), transparent),
    radial-gradient(circle 1.5px at 82% 55%, rgba(255,250,220,0.95), transparent),
    radial-gradient(circle 1px   at 18% 65%, rgba(255,250,220,0.70), transparent),
    radial-gradient(circle 2px   at 55% 72%, rgba(255,250,220,0.85), transparent),
    radial-gradient(circle 1px   at 75% 84%, rgba(255,250,220,0.65), transparent),
    radial-gradient(circle 1.5px at 38% 92%, rgba(255,250,220,0.80), transparent);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: dust-rise 9s linear infinite;
  filter: blur(0.6px);
}
.inspiration-tile.magnetic-active .light-dust { opacity: calc(var(--light-strength, 1) * 0.9); }
@keyframes dust-rise {
  from { background-position: 0 0;     }
  to   { background-position: 0 -180px; }
}

.light-flare {
  position: absolute;
  left: var(--flare-x, 50%);
  top:  var(--flare-y, 40%);
  width: 320px;
  height: 320px;
  margin: -160px 0 0 -160px;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease, left 0.14s ease-out, top 0.14s ease-out;
  background:
    /* horizontal lens streak */
    linear-gradient(90deg,
      transparent 0%, rgba(255,250,235,0) 18%,
      rgba(255,250,235,0.70) 47%, rgba(255,255,255,1) 50%, rgba(255,250,235,0.70) 53%,
      rgba(255,250,235,0) 82%, transparent 100%) center / 100% 5px no-repeat,
    /* vertical lens streak */
    linear-gradient(0deg,
      transparent 0%, rgba(255,250,235,0) 30%,
      rgba(255,250,235,0.45) 48%, rgba(255,255,255,0.85) 50%, rgba(255,250,235,0.45) 52%,
      rgba(255,250,235,0) 70%, transparent 100%) center / 5px 100% no-repeat,
    /* hot core */
    radial-gradient(circle,
      rgba(255,255,255,1) 0%, rgba(255,251,232,0.95) 6%,
      rgba(255,246,214,0.60) 16%, rgba(255,236,196,0.26) 34%,
      rgba(255,226,180,0.10) 58%, transparent 82%);
  filter: blur(1.5px) brightness(1.15);
}
.inspiration-tile.magnetic-active .light-flare { opacity: var(--light-strength, 1); }

/* ---- Depth of field: the focused card pops, the rest fall back ---- */
.inspiration-grid .inspiration-tile {
  transition: opacity 0.45s ease, filter 0.45s ease;
}
.inspiration-grid.has-active .inspiration-tile:not(.magnetic-active) {
  opacity: 0.55;
  filter: blur(2.5px) saturate(0.82) brightness(0.96);
}
/* Warm cinematic grade + glow on the in-focus card. */
.inspiration-tile.magnetic-active .game-card-wrapper {
  filter: saturate(1.12) brightness(1.06) contrast(1.03)
          drop-shadow(0 8px 26px rgba(255,214,150,0.45));
}

/* PILLAR VIEW SPATIAL RULES */
#main-list.pillar-view
{
  padding-bottom: 0 !important;
  padding-top: 10px !important;
  margin-top: 0 !important;

  min-height: 0 !important;
  position: relative;
  display: block;
  overflow: hidden;
  margin-left: 1vw;
  margin-right: 1vw;
}
/* Pillar Card Base */
#main-list.pillar-view .game-card-wrapper {
  position: absolute;
  width: 45px;
  transform-origin: center center;
  /* Snappy transition for 3C feel */
  transition: left 0.6s ease, bottom 0.6s ease, transform 0.3s ease, filter 0.2s;
}

/* Ensure the Header and Tabs stay on top of the falling/sliding cards */
.title,
.tab-buttons,
.view-toggles
{
  z-index: 100001; /* Higher than the hovered card (100000) */
}

/* The Inspect Panel (HUD Window) */
/* --- PILLAR HUD (INSPECT PANEL) --- */
#pillar-inspect-panel {
  position: fixed;
  top: 26vh;
  left: 30px;
  z-index: 200000 !important;
  pointer-events: none;
  background: transparent;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#pillar-inspect-panel.inspect-hidden {
  opacity: 0;
  display: none !important;
}

/* GRID CONTAINER */
#pillar-inspect-panel .game-card-wrapper {
  display: grid !important;
  /* Two equal columns of 338px */
  grid-template-columns: 338px 338px;
  /* Row 1: Title | Row 2: Image & Comments | Row 3: Details */
  grid-template-rows: max-content 507px max-content;

  width: auto !important;
  background: transparent;
  border: none !important;
  box-shadow: none !important; /* Shadows applied to children */
}

/* =========================================
   DEFAULT LAYOUT (Panel on Right)
   [Title]    [Empty]
   [Image]    [Comment Box]
   [Details]  [Empty]
   ========================================= */

/* 1. Title (Top Left) */
#pillar-inspect-panel .game-title-overlay {
  grid-column: 1;
  grid-row: 1;
  position: static !important;
  opacity: 1 !important;
  transform: none !important;
  background: black;
  color: white;
  padding: 15px;
  text-align: center;
  border-bottom: 2px solid #333 !important;
  box-shadow: 5px 0 10px rgba(0,0,0,0.5);
}

/* 2. Image (Middle Left) */
#pillar-inspect-panel .game-card {
  grid-column: 1;
  grid-row: 2;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  box-shadow: 5px 0 10px rgba(0,0,0,0.5);
}

#pillar-inspect-panel .game-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 3. Details (Bottom Left) */
#pillar-inspect-panel .game-details-overlay {
  grid-column: 1;
  grid-row: 3;
  position: static !important;
  opacity: 1 !important;
  transform: none !important;
  background: black;
  padding: 15px;
  border-top: 2px solid #333 !important;
  box-shadow: 5px 0 10px rgba(0,0,0,0.5);
}

/* 4. EXP/Comment Panel (Middle Right) */
#pillar-inspect-panel .game-exp-overlay {
  grid-column: 2;
  /* Lock strictly to Row 2 (Image Height) */
  grid-row: 2;

  position: static !important;
  width: 100% !important;
  height: 100% !important; /* Matches Image Height (507px) */

  opacity: 1 !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column;

  background: black;
  padding: 20px;
  box-shadow: 5px 5px 15px rgba(0,0,0,0.5);

  border: none !important;
  border-left: 2px solid #333 !important; /* Separator */
  overflow: hidden; /* Cut off if comment is too long, keeps alignment */
}

/* add this class to #pillar-inspect-panel when the panel is on the RIGHT side */
#pillar-inspect-panel.dock-right .game-title-overlay   { grid-column: 2; grid-row: 1; }
#pillar-inspect-panel.dock-right .game-card            { grid-column: 2; grid-row: 2; }
#pillar-inspect-panel.dock-right .game-details-overlay { grid-column: 2; grid-row: 3; }

#pillar-inspect-panel.dock-right .game-exp-overlay
{
  grid-column: 1;
  grid-row: 2;

  /* separator on the inside */
  border-left: none !important;
  border-right: 2px solid #333 !important;
}

/* =========================================
   FLIPPED LAYOUT (Panel on Left)
   [Empty]        [Title]
   [Comment Box]  [Image]
   [Empty]        [Details]
   ========================================= */


/* --- POLISH --- */
/* Fix Comment Spacing to sit in the middle of the box */
#pillar-inspect-panel .game-comment {
  margin-top: auto !important;
  margin-bottom: 0 !important;
  font-size: 18px;
  line-height: 1.4;
}

/* 2. Style for cards inside the Pillar view (Micro view) */
.pillar-mini-card
{
  transition: filter 0.2s !important;
}

/* Disable all standard overlay logic for mini cards */
.pillar-mini-card .game-title-overlay,
.pillar-mini-card .game-details-overlay,
.pillar-mini-card .game-exp-overlay,
.pillar-mini-card .game-score-overlay {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.pillar-mini-card img
{
  image-rendering: pixelated;
  display: block;
  width: 100%;
  height: 100%;
}

/* Polish: Instead of overlays, just do a high-contrast border */
.pillar-mini-card:hover
{
    outline: 3px solid white;
    outline-offset: -3px;
    filter: brightness(1.1);
    z-index: 999999 !important;
    cursor: crosshair;
    transform: translateX(-50%) scale(1.7) !important;
  }

/* 3. Force the overlays to show inside the preview panel */
.force-preview-show .game-title-overlay { opacity: 1; transform: translateY(0) scaleY(1); }
.force-preview-show .game-details-overlay { opacity: 1; transform: scaleY(1); }
.force-preview-show .game-exp-overlay { opacity: 1; transform: scaleX(1); }

/* 4. STOP PIERCING: The Clipping Hack */
#main-list.pillar-view {
  margin-top: 20px;
  padding-top: 40px;
  /* This creates a hard boundary. Cards cannot exist above this container's top */
  overflow: hidden;
  border-top: 1px solid rgba(0,0,0,0.1);
}

/* Make sure tabs have a solid background so cards slide "under" them */
.tab-buttons, .view-toggles, .title {
  position: relative;
  z-index: 1000;
}

/* 5. Ruler */
.pillar-ruler {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;
  border-top: 3px solid black;
  font-family: 'Major Mono Display', monospace;
  background: #F6F3EF; /* Solid color prevents card bleed */
}

.pillar-ruler span {
  font-size: 18px;
  font-weight: bold;
  line-height: 40px;   /* Center text vertically */
  color: black;
}

/* ---- Phone: flipped histogram (values down the left, stacks to the right) ---- */
.pillar-view.pillar-phone .pillar-ruler {
  top: 0;
  bottom: auto;
  left: 0;
  width: 44px;
  height: 100%;
  border-top: none;
  border-right: 3px solid black;
}
.pillar-view.pillar-phone .pillar-ruler span {
  font-size: 13px;
  line-height: 1.1;
}
.pillar-view.pillar-phone .pillar-mini-card {
  transition: left 0.8s cubic-bezier(0.2, 0.9, 0.2, 1),
              top  0.8s cubic-bezier(0.2, 0.9, 0.2, 1),
              opacity 0.5s ease,
              filter 0.2s !important;
}
.pillar-view.pillar-phone .pillar-mini-card:hover {
  transform: scale(1.6) !important;   /* no translateX(-50%) in flipped layout */
  z-index: 999999 !important;
}

/* ---- Phone: hover-preview HUD ----
   The desktop HUD is a fixed 676px (338+338) two-column grid with a 507px tall
   image — far wider than a phone screen, so it overflowed and was unreadable.
   On narrow viewports collapse it into a single centred column that fits. */
@media (max-width: 759px) {
  #pillar-inspect-panel {
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%);
    width: min(90vw, 360px);
    max-height: 94vh;
  }
  #pillar-inspect-panel .game-card-wrapper {
    grid-template-columns: 1fr !important;
    grid-template-rows: max-content auto max-content max-content !important;
    width: 100% !important;
    max-height: 94vh;
  }
  /* Stack every cell into the one column, in reading order, regardless of
     which side the panel was docked. */
  #pillar-inspect-panel .game-title-overlay,
  #pillar-inspect-panel.dock-right .game-title-overlay {
    grid-column: 1 !important; grid-row: 1 !important;
  }
  #pillar-inspect-panel .game-card,
  #pillar-inspect-panel.dock-right .game-card {
    grid-column: 1 !important; grid-row: 2 !important; height: 40vh !important;
  }
  #pillar-inspect-panel .game-exp-overlay,
  #pillar-inspect-panel.dock-right .game-exp-overlay {
    grid-column: 1 !important; grid-row: 3 !important; height: auto !important;
    border-left: none !important; border-right: none !important;
    border-top: 2px solid #333 !important;
  }
  #pillar-inspect-panel .game-details-overlay,
  #pillar-inspect-panel.dock-right .game-details-overlay {
    grid-column: 1 !important; grid-row: 4 !important;
  }
  #pillar-inspect-panel .game-comment { font-size: 15px; }
}

/* --- PILLAR MOTION ENGINE --- */

.pillar-mini-card {
  /* 1. FORCE THE GLIDE: Override any generic wrapper transitions */
  transition: left 2.0s cubic-bezier(0.2, 0.9, 0.2, 1),
              bottom 2.0s cubic-bezier(0.2, 0.9, 0.2, 1),
              opacity 0.5s ease,
              filter 0.2s !important;

  /* 2. Hardware acceleration */
  will-change: left, bottom;

  /* 3. Strict Centering */
  transform-origin: center center;
  transform: translateX(-50%) translateZ(0);
}

/* Ensure the Dissolve is faster than the Glide so they don't linger */
.pillar-dissolve {
  opacity: 0 !important;
  transform: translateX(-50%) scale(0.9) translateY(20px) !important;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}

/* The Drop Animation (Only for NEW items) */
@keyframes pillar-drop-bounce {
  0% { opacity: 0; transform: translateX(-50%) translateY(-100vh) scale(0.5); }
  60% { opacity: 1; transform: translateX(-50%) translateY(20px) scale(1.1); }
  80% { transform: translateX(-50%) translateY(-10px) scale(0.95); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.pillar-animate-in {
  animation-name: pillar-drop-bounce;
  animation-duration: 0.8s;
  animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation-fill-mode: both;
}

/* =========================================================
   AV MONOGRAM — the personal mark (A over V, same cell).
   Pinned top-centre over the title, on the cream page bg so
   it's inked black; links home. Hidden until content loads.
   Shared by game/show/manga lists.
   ========================================================= */
.av-monogram {
  position: absolute;             /* sits at the page top, does NOT follow scroll */
  top: 6px;
  left: 50%;                      /* dead-centre horizontally, over the title */
  transform: translateX(-50%);
  z-index: 100002;                /* above title banner (100001) + hovered cards */
  display: inline-grid;
  place-items: center;
  font-family: 'Major Mono Display', monospace;
  font-size: var(--av-mono-size); /* responsive — scales with the title */
  line-height: 1;
  letter-spacing: 0;
  color: #000000;                 /* black — reads on the cream page background */
  text-decoration: none;
  /* thin white outline so the glyph stays legible where it crosses onto the
     black title banner (it spans both backgrounds at this size) */
  -webkit-text-stroke: 1.5px #ffffff;
  /* hidden until content has loaded — see body.content-ready below */
  opacity: 0;
  visibility: hidden;
  /* slow, smooth spin; quicker colour swap; gentle fade-in */
  transition: color .3s ease, -webkit-text-stroke .3s ease,
              transform 1.3s ease-in-out,
              opacity .6s ease, visibility .6s ease;
}
/* Both letters share one grid cell → they intersect into the hourglass glyph. */
.av-monogram span { grid-area: 1 / 1; text-align: center; }
.av-monogram:hover {
  /* 180° flip + the slight tilt — slow & smooth. Inverts to white with a black
     outline as the hover indication (readable on the cream background). */
  transform: translateX(-50%) scale(1.08) rotate(-183deg);
  color: #ffffff;
  -webkit-text-stroke: 1.5px #000000;
}
/* Reveal the mark only once the content is ready (set in init()). */
body.content-ready .av-monogram {
  opacity: 1;
  visibility: visible;
}

/* =========================================================
   APP-FEEL POLISH — fluency layer shared by all lists.
   Snappy button feedback, view crossfade, results counter,
   scroll-to-top. Stays strictly within the B&W language.
   ========================================================= */

html { scroll-behavior: smooth; }

/* Buttons: quicker hover, tactile press. The old blanket 0.4s transition made
   every interaction feel laggy; hover swap now reads as immediate. */
.tab-buttons .secret-btn,
.view-btn {
  cursor: pointer;
  user-select: none;
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, box-shadow .18s ease,
              transform .1s ease;
}
.tab-buttons .secret-btn:active,
.view-btn:active {
  transform: scale(0.95);
}

/* Search field: animated focus underline */
.search-input {
  transition: box-shadow .25s ease, border-color .25s ease;
}
.search-input:focus {
  box-shadow: 0 2px 0 0 black;
}

/* View switching: brief crossfade of the whole list container.
   Opacity only — a transform here would re-anchor position:fixed
   descendants (pillar inspect panel). */
@keyframes view-switch-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.games-list.view-switching {
  animation: view-switch-in .4s ease;
}

/* Results counter: lives next to the search field, ticks on change */
#result-count {
  font-family: 'Major Mono Display', monospace;
  font-size: 16px;
  letter-spacing: 3px;
  color: black;
  opacity: 0.5;
  margin-left: 14px;
  display: inline-block;
  vertical-align: middle;
  pointer-events: none;
}
@keyframes count-tick {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); opacity: 0.9; }
  100% { transform: scale(1); }
}
#result-count.tick { animation: count-tick .3s ease; }
/* Inspiration ignores filters — counter would lie, so hide it there */
body.inspiration-mode #result-count { opacity: 0; }

/* Scroll-to-top: monochrome, bottom-right, slides in after scrolling */
.scroll-top-btn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100002;
  width: 52px;
  height: 52px;
  border: 3px solid black;
  background: #f6f3ef;
  color: black;
  font-family: 'Major Mono Display', monospace;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease,
              background-color .18s ease, color .18s ease;
}
.scroll-top-btn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.scroll-top-btn:hover {
  background: black;
  color: white;
}
.scroll-top-btn:active { transform: translateY(0) scale(0.93); }
/* on the dark inspiration sky, invert so it stays visible */
body.inspiration-mode .scroll-top-btn {
  background: rgba(0, 0, 0, 0.55);
  color: white;
  border-color: white;
}

/* Accessibility: honour reduced-motion — keep the app usable, drop the show */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .games-list.view-switching,
  #result-count.tick,
  .av-monogram,
  .scroll-top-btn { animation: none !important; transition: none !important; }
}

/* =========================================================
   STICKY TIER LABELS — the SSS/SS/S… tag rides along the
   left edge while you scroll through a tall tier, so you
   always know which tier you're looking at. Pure CSS; works
   because every ancestor up to the viewport is overflow:visible.
   Grid (tierlist) view only — disabled in pillar/inspiration.
   ========================================================= */
body:not(.pillar-view-active):not(.inspiration-mode) .tier-label {
  position: sticky;
  top: 8px;
  align-self: flex-start;   /* anchor to the top of the row so it has room to travel */
  z-index: 40;              /* above sibling cards, below hover overlays (100000) */
}