/* "Authentic Signature" is declared by Astro's experimental Fonts API
   (astro.config.mjs) and injected by the <Font> component in SiteHead.astro,
   not by a @font-face here. */
:root {
  --bg: #000;
  --panel: #090909;
  --panel2: #111;
  --pink: #b13a5d;
  --pink2: #d35e7e;
  --pink3: #7a2a43;
  --text: #f7f4f4;
  --muted: #8f7d84;
  --line: #5b2337;
  --mono: "Space Mono", monospace;
  --marker: "Permanent Marker", cursive;
  --display: "Archivo Black", sans-serif;
  --right-panel-radius: 12px;
  --right-panel-inner-radius: 6px;
  /* Literals promoted to tokens (identical computed values). */
  --white: #fff;
  --black: #000;
  --surface: #050505; /* the most common dark panel surface */
  --pink-rgb: 177, 58, 93; /* --pink as an rgba()-ready triplet */
  /* v105 — site-wide small-text readability pass (merged from its own :root) */
  --readability-xs: 12px;
  --readability-small: 13px;
  --readability-meta: 13.5px;
  --readability-body: 14px;
  /* Final Tablet Cover silhouette + restored v8 hover behavior */
  --tablet-cover-radius: 14px;
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  background: #2f2f2f;
  color: var(--text);
  font-family: var(--mono);
}
body {
  overflow-x: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
}
::selection {
  background: var(--pink2);
  color: var(--black);
}

#viewport {
  width: 100vw;
  overflow: hidden;
  background: #2f2f2f;
}

#site-stage {
  width: 1920px;
  height: 1280px;
  transform-origin: top left;
  background: var(--black);
  display: grid;
  grid-template-columns: 250px 1280px 390px;
  grid-template-rows: 1180px 100px;
  border: 1px solid #555;
}

.left-rail {
  grid-column: 1;
  grid-row: 1;
  border-right: 1px solid #6b6b6b;
  padding: 46px 38px 28px;
  position: relative;
  background: var(--black);
}

.brand-small {
  font-size: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid #ddd;
  margin-bottom: 46px;
  width: 180px;
}

.main-nav {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.nav-link {
  display: block;
  font-size: 17px;
  line-height: 1.15;
  transition: 0.2s ease;
}
.nav-link:hover {
  transform: translateX(5px);
  color: white;
}
.nav-link .sub {
  display: block;
  color: var(--pink2);
  font-size: 13px;
  margin-top: 4px;
}

.visitor {
  position: absolute;
  bottom: 28px;
  left: 38px;
  font-size: 11px;
  color: #aaa;
}
.counter {
  display: flex;
  gap: 3px;
  margin: 10px 0 8px;
}
.counter span {
  width: 26px;
  height: 38px;
  border: 1px dashed var(--pink2);
  display: grid;
  place-items: center;
  color: white;
  font-size: 16px;
}
.visitor strong {
  color: var(--pink2);
  font-weight: 400;
}

.center {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  overflow: hidden;
  background: var(--black);
}

.hero {
  height: 650px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.05),
      rgba(0, 0, 0, 0.12) 58%,
      var(--black) 100%
    ),
    radial-gradient(circle at 50% 30%, rgba(var(--pink-rgb), 0.08), transparent 42%);
}
.hero-photo {
  position: absolute;
  inset: 0 0 0 0;
  background-position: center;
  background-size: cover;
  opacity: 0.84;
  filter: saturate(0.86) contrast(1.06) brightness(0.72);
}
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.02) 0%,
    rgba(0, 0, 0, 0.12) 52%,
    rgba(0, 0, 0, 0.92) 100%
  );
}

.tags {
  position: absolute;
  top: 22px;
  left: 18px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.tag {
  background: #c96883;
  color: white;
  padding: 5px 10px;
  font-weight: 700;
  font-size: 13px;
}

.latest-note {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 5;
  width: 300px;
  min-height: 125px;
  background: rgba(7, 7, 7, 0.94);
  border: 1px solid var(--pink2);
  border-radius: 7px;
  padding: 17px 18px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
.note-head {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-bottom: 14px;
}
.note-name {
  color: var(--pink2);
}
.note-date {
  color: #c8c8c8;
}
.note-body {
  font-size: 12px;
  line-height: 1.6;
  color: #ddd;
}
.note-label {
  position: absolute;
  right: 0;
  bottom: -25px;
  font-family: var(--marker);
  font-size: 15px;
  color: #eee;
  transform: rotate(-4deg);
}

.things {
  position: absolute;
  top: 205px;
  right: 12px;
  width: 200px;
  min-height: 168px;
  z-index: 4;
  border: 1px solid var(--pink2);
  border-radius: 6px;
  background: rgba(5, 5, 5, 0.9);
  padding: 16px;
}
.things .title {
  color: var(--pink2);
  font-size: 12px;
  margin-bottom: 10px;
}
.things ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 11px;
  line-height: 1.45;
}

.hero-wordmark {
  position: absolute;
  left: 22px;
  top: 330px;
  z-index: 3;
  user-select: none;
  white-space: nowrap;
}
.hero-wordmark .block {
  font-family: var(--display);
  font-size: 98px;
  letter-spacing: -4px;
  line-height: 0.9;
}
.hero-wordmark .script {
  position: absolute;
  left: 190px;
  top: -3px;
  color: #a94465;
  font-family: var(--marker);
  font-size: 64px;
  font-weight: 400;
  transform: rotate(-3deg);
  transition: 0.25s ease;
}
.hero-wordmark:hover .script {
  transform: translate(5px, -4px) rotate(-5deg);
  text-shadow: 0 0 16px rgba(211, 94, 126, 0.25);
}

.now-playing {
  position: absolute;
  right: 12px;
  top: 387px;
  width: 405px;
  min-height: 178px;
  z-index: 4;
  background: rgba(5, 5, 5, 0.92);
  border: 1px solid var(--pink2);
  border-radius: 6px;
  padding: 14px 16px;
}
.np-title {
  font-size: 13px;
  margin-bottom: 14px;
}
.np-title span {
  color: var(--pink2);
}
.np-body {
  display: flex;
  gap: 14px;
  align-items: center;
}
.np-cover {
  width: 86px;
  height: 72px;
  background: #1a1a1a;
  border: 1px solid #333;
  background-size: cover;
  background-position: center;
  flex: none;
}
.np-meta {
  flex: 1;
  min-width: 0;
}
.np-song {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 8px;
}
.np-artist {
  color: var(--pink2);
  font-size: 11px;
  margin-bottom: 11px;
}
.wave {
  height: 24px;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 5px,
    rgba(211, 94, 126, 0.95) 6px 8px,
    transparent 9px 12px
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    var(--black) 8%,
    var(--black) 92%,
    transparent
  );
  opacity: 0.85;
}
.progress {
  height: 3px;
  background: #4c4c4c;
  margin: 12px 0 6px;
  position: relative;
}
.progress i {
  display: block;
  height: 100%;
  background: var(--pink2);
  width: 28%;
}
.np-controls {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #aaa;
}
.np-icons {
  letter-spacing: 8px;
  color: #ddd;
}

.content-lower {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 570px;
  padding: 0 25px;
}

.projects {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 38px;
  transform: translateY(-32px);
}
.project-card {
  height: 255px;
  border: 1px solid var(--pink2);
  border-radius: 7px;
  position: relative;
  overflow: visible;
  background: var(--surface);
  transition: 0.25s ease;
}
.project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 25px rgba(var(--pink-rgb), 0.17);
}
.project-card .image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  opacity: 0.75;
  transition: 0.25s ease;
}
.project-card:hover .image {
  opacity: 0.92;
  filter: saturate(1.06);
}
.project-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.18),
    transparent 45%,
    rgba(0, 0, 0, 0.18)
  );
  pointer-events: none;
}
.card-kicker {
  position: absolute;
  left: 4px;
  top: -37px;
  color: #b94a6c;
  font-family: var(--font-authentic-signature);
  font-size: 26px;
  transform: rotate(-2deg);
}
.project-card h2 {
  position: absolute;
  z-index: 3;
  left: 12px;
  top: 8px;
  margin: 0;
  font-weight: 400;
  font-size: 18px;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9);
}
.project-card .btn {
  position: absolute;
  z-index: 4;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 145px;
  padding: 9px 16px;
  background: var(--surface);
  border: 1px solid var(--pink2);
  text-align: center;
  font-size: 12px;
  transition: 0.2s ease;
}
.project-card:hover .btn {
  background: var(--pink);
  color: white;
}

.covers-section {
  margin-top: -2px;
}
.covers-head {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 20px;
}
.covers-pill {
  background: #a94465;
  color: var(--panel);
  padding: 7px 22px;
  border-radius: 22px;
  font-size: 26px;
  line-height: 1;
  letter-spacing: 2px;
}
.covers-line {
  height: 1px;
  background: #6c6c6c;
  flex: 1;
}
.covers-all {
  color: var(--pink2);
  font-size: 11px;
}

.covers-wrap {
  position: relative;
  overflow: hidden;
}
.covers-track {
  display: flex;
  gap: 40px;
  transition: transform 0.35s ease;
}
.cover-card {
  width: 280px;
  height: 177px;
  flex: 0 0 280px;
  border: 1px solid var(--pink2);
  background: var(--surface);
  overflow: hidden;
  position: relative;
  transition: 0.22s ease;
}
.cover-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(var(--pink-rgb), 0.14);
}
.cover-image {
  height: 132px;
  background: var(--surface);
  background-size: cover;
  background-position: center;
}
.cover-caption {
  height: 45px;
  background: #95344f;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 8px;
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 11px;
}
.arrow {
  position: absolute;
  top: 59px;
  z-index: 8;
  border: 0;
  background: transparent;
  color: var(--pink2);
  font-size: 52px;
  line-height: 1;
}
.arrow.prev {
  left: -23px;
}
.arrow.next {
  right: -23px;
}

.right-rail {
  grid-column: 3;
  grid-row: 1;
  border-left: 1px solid #6b6b6b;
  padding: 11px 14px 12px;
  background: var(--black);
}
.panel {
  border: 1px solid var(--pink2);
  border-radius: var(--right-panel-radius);
  padding: 18px 20px;
  margin-bottom: 18px;
  background: #030303;
}
.panel h2 {
  font-size: 18px;
  margin: 0 0 5px;
  font-weight: 400;
}
.commission-status {
  font-family: var(--marker);
  font-size: 29px;
  color: #a94465;
  margin-bottom: 30px;
}
.panel p {
  font-size: 12px;
  line-height: 1.6;
  margin: 0 0 28px;
}
.gb-sub {
  color: var(--pink2);
  font-family: var(--marker);
  font-size: 12px;
  margin-bottom: 14px;
}
label {
  display: block;
  font-size: 11px;
  color: #cfcfcf;
  margin: 12px 0 8px;
}
input,
textarea {
  width: 100%;
  background: #181818;
  color: white;
  border: 1px solid #333;
  padding: 10px;
  outline: none;
}
textarea {
  height: 104px;
  resize: none;
}
input:focus,
textarea:focus {
  border-color: var(--pink2);
}
.gb-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
.char-count {
  font-size: 10px;
  color: #999;
}
.outline-btn {
  background: var(--surface);
  color: white;
  border: 1px solid var(--pink2);
  padding: 8px 18px;
  font-size: 11px;
}
.outline-btn:hover {
  background: var(--pink);
  color: white;
}
.gb-all {
  display: block;
  width: max-content;
  margin: 14px auto 0;
}

.discord-panel {
  padding: 18px 20px;
}
.discord-head {
  display: flex;
  align-items: center;
  gap: 11px;
  position: relative;
  margin-bottom: 4px;
}
.discord-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--pink2);
  background: #141414;
}
.discord-title {
  font-family: var(--display);
  font-size: 17px;
}
.discord-arrow {
  position: absolute;
  right: 0;
  top: 0;
  color: var(--pink2);
}
.discord-sub {
  color: var(--pink2);
  font-size: 9px;
  margin-left: 49px;
  margin-bottom: 22px;
}
.discord-stats {
  display: flex;
  gap: 18px;
  font-size: 10px;
  margin-bottom: 22px;
}
.dot {
  color: var(--pink2);
}
.voice-label {
  font-size: 9px;
  color: #aaa;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.voice-box {
  border: 1px solid #222;
  background: #0b0b0b;
  padding: 12px 13px;
  margin-bottom: 9px;
}
.voice-name {
  font-size: 13px;
  color: var(--pink2);
  font-weight: 700;
  margin-bottom: 6px;
}
.voice-members {
  font-size: 9px;
  line-height: 1.8;
  color: #ddd;
}
.discord-join {
  display: block;
  margin: 14px auto 0;
}

.build-note {
  font-size: 9px;
  color: #555;
  text-align: center;
  margin-top: 2px;
}

.footer {
  grid-column: 1 / 4;
  grid-row: 2;
  border-top: 1px solid #555;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: var(--black);
}
.social {
  color: #c84a70;
  font-size: 24px;
  transition: 0.2s ease;
}
.social:hover {
  transform: translateY(-4px) scale(1.12);
  color: #f07197;
}

/* placeholder treatment */
.placeholder {
  background: linear-gradient(135deg, #0a0a0a, #121212);
}

/* no reflow responsive; only the 1920 stage gets scaled */
/* ========================================================================== */
/* Homepage layout correction                                                  */
/* Keeps the 1920px stage fixed while preventing the center blocks overlapping */
/* ========================================================================== */

.center {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  overflow: hidden;
  background: var(--black);
  padding: 0;
}

.hero {
  height: 610px;
  position: relative;
  overflow: hidden;
  background: var(--black);
}

.hero-photo {
  position: absolute;
  inset: 0;
  background-position: center 48%;
  background-size: cover;
  opacity: 0.84;
  filter: saturate(0.86) contrast(1.06) brightness(0.72);
}

.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.04) 0%,
    rgba(0, 0, 0, 0.08) 55%,
    var(--black) 100%
  );
}

.hero-wordmark {
  position: absolute;
  left: 24px;
  top: 300px;
  z-index: 6;
  width: 760px;
  height: auto;
  white-space: normal;
}

.hero-logo-image {
  display: block;
  width: 760px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.28));
  transition:
    transform 0.22s ease,
    filter 0.22s ease;
}

.hero-wordmark:hover .hero-logo-image {
  transform: translateY(-3px) scale(1.008);
  filter: drop-shadow(0 10px 18px rgba(var(--pink-rgb), 0.18));
}

.tags {
  top: 22px;
  left: 18px;
}

.latest-note {
  top: 10px;
  right: 12px;
}

.things {
  top: 205px;
  right: 12px;
}

.now-playing {
  top: 385px;
  right: 12px;
  width: 405px;
}

/* The three navigation cards now live below the hero instead of inside it. */
.projects {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 38px;
  margin: 0 45px;
  transform: none;
  height: 250px;
}

.project-card {
  height: 242px;
}

.card-kicker {
  top: -35px;
}

/* Covers get their own row below the project cards. */
.covers-section {
  position: relative;
  margin: 54px 25px 0;
}

.covers-head {
  margin-bottom: 20px;
}

.covers-wrap {
  height: 180px;
  overflow: hidden;
  position: relative;
}

.covers-track {
  padding-left: 0;
}

/* Old absolute wrapper is no longer used. */
.content-lower {
  position: static;
  height: auto;
  padding: 0;
}

/* subtle hover interactions for the right-side widgets */
.latest-note,
.things,
.now-playing,
.right-rail .panel {
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}
.latest-note:hover,
.things:hover,
.now-playing:hover,
.right-rail .panel:hover {
  transform: translateY(-3px);
  border-color: var(--pink2);
  box-shadow: 0 10px 24px rgba(var(--pink-rgb), 0.13);
}

/* project handwritten labels use Authentic Signature when the font file is present */
.card-kicker {
  font-family: var(--font-authentic-signature) !important;
  font-size: 26px !important;
  letter-spacing: 0.2px;
  line-height: 1;
}

/* cleaner tablet-cover carousel: arrows live inside the carousel, never clipped */
.covers-wrap {
  position: relative;
  overflow: hidden;
  padding: 0 34px;
}
.covers-track {
  gap: 40px;
  will-change: transform;
}
.arrow {
  top: 50% !important;
  transform: translateY(-50%);
  width: 32px;
  height: 64px;
  display: grid;
  place-items: center;
  z-index: 20;
  font-size: 46px !important;
  background: var(--black) !important;
  border: 1px solid transparent !important;
  color: var(--pink2) !important;
  line-height: 1 !important;
  opacity: 0.9;
  transition: 0.18s ease;
}
.arrow:hover {
  border-color: var(--pink2) !important;
  background: var(--panel) !important;
  opacity: 1;
}
.arrow.prev {
  left: 0 !important;
}
.arrow.next {
  right: 0 !important;
}

/* if you add real social SVG/PNG icons later they fit here without changing layout */
.social {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  font-size: 0 !important;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.social[data-icon="osu!"] {
  background-image: url("../assets/social/osu.png");
}
.social[data-icon="discord"] {
  background-image: url("../assets/social/discord.png");
}
.social[data-icon="twitch"] {
  background-image: url("../assets/social/twitch.png");
}
.social[data-icon="tiktok"] {
  background-image: url("../assets/social/tiktok.png");
}
.social[data-icon="instagram"] {
  background-image: url("../assets/social/instagram.png");
}
.social[data-icon="kofi"] {
  background-image: url("../assets/social/kofi.png");
}
.social[data-icon="mail"] {
  background-image: url("../assets/social/mail.png");
}
.social::after {
  content: attr(data-fallback);
  font-size: 18px;
  color: #c84a70;
}
.social.has-image::after {
  display: none;
}

.discord-icon:not([src]) {
  display: grid;
  place-items: center;
  background:
    radial-gradient(
      circle at 35% 35%,
      rgba(211, 94, 126, 0.22),
      transparent 45%
    ),
    var(--panel2);
}

/* v4 — tablet covers: automatic finite carousel, no manual arrows */
.covers-wrap {
  overflow: hidden !important;
  padding: 0 !important;
}
.covers-track {
  gap: 40px !important;
  will-change: transform;
}
.arrow {
  display: none !important;
}

/* v4 — real social icons, all recolored pink */
.social {
  width: 30px !important;
  height: 30px !important;
  display: grid !important;
  place-items: center !important;
  background: none !important;
  font-size: 0 !important;
}
.social img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
  transition:
    transform 0.18s ease,
    filter 0.18s ease;
}
.social:hover img {
  transform: translateY(-3px) scale(1.08);
  filter: brightness(1.15);
}
.social::after {
  display: none !important;
}

/* v4 — keep JOIN COCA centered no matter what happens above it */
.discord-join {
  display: block !important;
  width: max-content !important;
  margin: 16px auto 0 !important;
  text-align: center !important;
}

/* slightly calmer widget movement */
.latest-note:hover,
.things:hover,
.now-playing:hover,
.right-rail .panel:hover {
  transform: translateY(-2px);
}

/* v5 — stronger but still clean interaction on the main VANILLEEU wordmark */
.hero-wordmark {
  transform-origin: center;
  transition:
    transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.32s ease;
  cursor: default;
}

.hero-wordmark .block {
  display: inline-block;
  transition:
    transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
    letter-spacing 0.32s ease,
    text-shadow 0.32s ease;
}

.hero-wordmark .script {
  transition:
    transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
    text-shadow 0.32s ease,
    color 0.32s ease;
}

.hero-wordmark:hover {
  transform: translateY(-6px) scale(1.035) rotate(-0.25deg);
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35));
}

.hero-wordmark:hover .block {
  transform: translateX(-3px);
  letter-spacing: -2px;
  text-shadow:
    3px 0 0 rgba(var(--pink-rgb), 0.18),
    -2px 0 0 rgba(255, 255, 255, 0.08);
}

.hero-wordmark:hover .script {
  transform: translate(14px, -10px) rotate(-6deg) scale(1.08);
  color: #cf5a7d;
  text-shadow:
    0 0 10px rgba(207, 90, 125, 0.35),
    0 0 24px rgba(207, 90, 125, 0.18);
}

/* tiny press-like feedback if clicked/tapped */
.hero-wordmark:active {
  transform: translateY(-2px) scale(1.01);
}

/* keep clickable cards feeling alive without going full casino UI */
.project-card:hover {
  border-color: var(--pink2);
}
.project-card:hover .btn {
  box-shadow:
    0 0 0 1px rgba(211, 94, 126, 0.18),
    0 5px 14px rgba(var(--pink-rgb), 0.12);
}

/* v6 — longer tablet-cover tour */
.covers-wrap {
  overflow: hidden !important;
}
.covers-track {
  gap: 40px !important;
  will-change: transform;
}
.cover-card {
  flex: 0 0 280px;
}

/* v7 — keep the tablet-cover carousel strictly inside the center column */
.covers-section {
  overflow: hidden;
}
.covers-wrap {
  width: 100%;
  max-width: 100%;
  overflow: hidden !important;
}
.covers-track {
  max-width: none;
}
.cover-card {
  flex: 0 0 278px !important;
  width: 278px !important;
}

/* v7 — small hover motion for the hero tags */
.tag {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
  transform-origin: left center;
}
.tag:hover {
  transform: translateX(4px) translateY(-1px);
  background: #d47490;
  box-shadow: 0 4px 10px rgba(var(--pink-rgb), 0.12);
}

/* v7 — softer footer icon hover */
.social {
  transition:
    opacity 0.16s ease,
    transform 0.16s ease !important;
}
.social img {
  transition:
    opacity 0.16s ease,
    transform 0.16s ease !important;
}
.social:hover {
  transform: none !important;
}
.social:hover img {
  transform: translateY(-1px) scale(1.025) !important;
  filter: none !important;
  opacity: 0.82;
}

/* v7 — cleaner Discord header */
.discord-head {
  gap: 0 !important;
}
.discord-icon {
  display: none !important;
}
.discord-title {
  font-family: var(--mono) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px;
}
.discord-sub {
  margin-left: 0 !important;
  margin-top: 5px;
}
.discord-arrow {
  display: none !important;
}

/* v8 — real tablet-cover images */
.cover-card {
  color: inherit;
  text-decoration: none;
}
.cover-image {
  transition:
    transform 0.28s ease,
    filter 0.28s ease;
}
.cover-card:hover .cover-image {
  transform: scale(1.025);
  filter: brightness(1.04) saturate(1.03);
}

/* v10 — homepage hero fallback so the background never disappears */
#hero-photo {
  background-image: url("../assets/hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* v11 — fixed 1920px desktop canvas */
html,
body {
  min-width: 1920px;
}

body {
  overflow-x: auto;
}

#site-shell {
  width: 1920px !important;
  min-width: 1920px !important;
  max-width: 1920px !important;
  margin-left: auto;
  margin-right: auto;
  flex: 0 0 1920px;
}

/* Homepage feature images */
#tile-osu,
#tile-stuff,
#tile-music {
  position: relative;
  overflow: hidden;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

#tile-osu {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.18)),
    url("../assets/homepage/osu-projects.png") !important;
}

#tile-stuff {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.16)),
    url("../assets/homepage/vanilleeu-stuff.png") !important;
}

#tile-music {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.16)),
    url("../assets/homepage/music-corner.jpg") !important;
}

/* v12 — feature cards: natural images, no dark overlay */
#tile-osu {
  background-image: url("../assets/homepage/osu-projects.png") !important;
}
#tile-stuff {
  background-image: url("../assets/homepage/vanilleeu-stuff.png") !important;
}
#tile-music {
  background-image: url("../assets/homepage/music-corner.jpg") !important;
}

/* Keep the bottom CTA fully inside each card instead of clipping it */
#tile-osu,
#tile-stuff,
#tile-music {
  overflow: visible !important;
}

#tile-osu .portal-btn,
#tile-stuff .portal-btn,
#tile-music .portal-btn,
#tile-osu .card-btn,
#tile-stuff .card-btn,
#tile-music .card-btn {
  z-index: 5;
}

/* v12 exact CTA clipping fix */
#tile-osu .outline-btn,
#tile-osu .btn,
#tile-stuff .outline-btn,
#tile-stuff .btn,
#tile-music .outline-btn,
#tile-music .btn {
  bottom: -18px !important;
  z-index: 10 !important;
}

/* =========================================================
   v13 — homepage feature images: TRUE original rendering
   ========================================================= */

#tile-osu,
#tile-stuff,
#tile-music {
  background-color: transparent !important;
  background-blend-mode: normal !important;
  filter: none !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

#tile-osu {
  background-image: url("../assets/homepage/osu-projects.png") !important;
}
#tile-stuff {
  background-image: url("../assets/homepage/vanilleeu-stuff.png") !important;
}
#tile-music {
  background-image: url("../assets/homepage/music-corner.jpg") !important;
}

/* Kill any old darkening layer that may still sit above the photos */
#tile-osu::before,
#tile-osu::after,
#tile-stuff::before,
#tile-stuff::after,
#tile-music::before,
#tile-music::after {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Keep text/buttons themselves normal */
#tile-osu > *,
#tile-stuff > *,
#tile-music > * {
  filter: none !important;
  opacity: 1 !important;
}

/* Preserve the CTA fix from v12 */
#tile-osu,
#tile-stuff,
#tile-music {
  overflow: visible !important;
}

/* =========================================================
   v14 — FIX: real homepage feature image layers
   ========================================================= */

#osu-card-img,
#stuff-card-img,
#music-card-img {
  opacity: 1 !important;
  filter: none !important;
  background-blend-mode: normal !important;
  background-color: var(--surface) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* use the supplied images directly */
#osu-card-img {
  background-image: url("../assets/homepage/osu-projects.png") !important;
}
#stuff-card-img {
  background-image: url("../assets/homepage/vanilleeu-stuff.png") !important;
}
#music-card-img {
  background-image: url("../assets/homepage/music-corner.jpg") !important;
}

/* legacy project-card overlay was darkening them */
.project-card::after {
  display: none !important;
  content: none !important;
}

/* hover can stay alive without changing image brightness */
.project-card:hover #osu-card-img,
.project-card:hover #stuff-card-img,
.project-card:hover #music-card-img {
  opacity: 1 !important;
  filter: none !important;
  transform: scale(1.018);
}

/* preserve readable title without dimming the entire image */
.project-card h2 {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.95),
    0 0 7px rgba(0, 0, 0, 0.7);
}

/* v15 — homepage tablet cover preview */
.cover-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}
.cover-lightbox.is-open {
  display: flex;
}
.cover-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(2px);
}
.cover-lightbox-panel {
  position: relative;
  z-index: 1;
  width: min(920px, 72vw);
  max-height: 82vh;
  border: 1px solid var(--pink);
  background: var(--surface);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.65);
  padding: 14px 14px 0;
}
.cover-lightbox-image {
  display: block;
  width: 100%;
  max-height: 68vh;
  object-fit: contain;
  background: var(--black);
}
.cover-lightbox-caption {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 46px;
  color: var(--white);
  font-family: var(--mono);
  font-size: 14px;
}
.cover-lightbox-close {
  position: absolute;
  right: -13px;
  top: -13px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border: 1px solid var(--pink);
  background: var(--surface);
  color: var(--pink2);
  font: 22px/1 var(--mono);
  cursor: pointer;
  transition: 0.16s;
}
.cover-lightbox-close:hover {
  background: var(--pink);
  color: var(--white);
  transform: scale(1.05);
}

/* v16 — cover cards are buttons, visually identical to the old cards */
#covers-track button.cover-card {
  border: 1px solid var(--pink2);
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: var(--surface);
  text-align: inherit;
  cursor: pointer;
}

/* v17 — tablet cover preview polish */
.cover-lightbox-panel {
  width: min(980px, 76vw);
}
.cover-lightbox-image {
  max-height: 70vh;
}
.cover-lightbox-caption {
  color: var(--white);
  letter-spacing: 0.2px;
}
#covers-track .cover-card {
  cursor: zoom-in !important;
}

/* =========================================================
   v18 — product-style quick view for homepage tablet covers
   ========================================================= */

#covers-track .cover-card {
  cursor: pointer !important;
}

.cover-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}
.cover-lightbox.is-open {
  display: flex;
}

.cover-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(3px);
}

.cover-quickview {
  position: relative;
  z-index: 2;
  width: min(1120px, 82vw);
  min-height: 520px;
  max-height: 84vh;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr);
  background: #070707;
  border: 1px solid var(--pink2);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.72);
  overflow: hidden;
}

.cover-qv-media {
  padding: 18px;
  border-right: 1px solid #26151b;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cover-lightbox-image {
  display: block;
  width: 100%;
  height: 430px;
  max-height: 62vh;
  object-fit: contain;
  background: var(--black);
}

.cover-qv-thumbs {
  display: flex;
  gap: 9px;
  margin-top: 12px;
  min-height: 58px;
  overflow-x: auto;
}

.cover-qv-thumb {
  width: 78px;
  height: 52px;
  flex: 0 0 auto;
  border: 1px solid #352027;
  padding: 0;
  background: #0b0b0b;
  cursor: pointer;
  opacity: 0.62;
  transition:
    opacity 0.16s ease,
    border-color 0.16s ease,
    transform 0.16s ease;
}
.cover-qv-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cover-qv-thumb:hover,
.cover-qv-thumb.active {
  opacity: 1;
  border-color: var(--pink2);
  transform: translateY(-1px);
}

.cover-qv-info {
  padding: 44px 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.cover-qv-kicker {
  color: var(--pink2);
  font-family: var(--marker);
  font-size: 15px;
  margin-bottom: 8px;
}

.cover-qv-info h3 {
  margin: 0 0 28px;
  font-family: var(--display);
  font-size: 29px;
  line-height: 1.08;
  letter-spacing: 0.4px;
}

.cover-qv-meta {
  border-top: 1px solid #262626;
  border-bottom: 1px solid #262626;
  margin-bottom: 24px;
}
.cover-qv-meta > div {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 13px 0;
  font-size: 12px;
}
.cover-qv-meta > div + div {
  border-top: 1px solid #1b1b1b;
}
.cover-qv-meta span {
  color: #7d6a70;
}
.cover-qv-meta strong {
  color: var(--white);
  font-weight: 400;
  text-transform: uppercase;
}

.cover-lightbox-caption {
  display: block !important;
  min-height: 0 !important;
  padding: 0 !important;
  color: #ad979f !important;
  text-align: left !important;
  justify-content: flex-start !important;
  font-size: 11px !important;
  line-height: 1.6;
}

.cover-lightbox-close {
  position: absolute;
  z-index: 5;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--pink2);
  background: #070707;
  color: var(--pink2);
  font: 22px/1 var(--mono);
  cursor: pointer;
  transition:
    background 0.16s ease,
    color 0.16s ease;
}
.cover-lightbox-close:hover {
  background: var(--pink2);
  color: var(--white);
  transform: none;
}

/* v20 — Things I Love removed */
.latest-note {
  max-width: 300px;
}

/* v21 — right rail scrollbar breathing room */
.right-rail {
  box-sizing: border-box;
  padding-right: 16px;
  scrollbar-gutter: stable;
}

.right-rail > * {
  max-width: 100%;
  box-sizing: border-box;
}

/* v22 — keep right-side cards clear of the scrollbar */
.right-rail {
  box-sizing: border-box;
  padding-right: 26px !important;
  scrollbar-gutter: stable;
}

.right-rail > * {
  width: calc(100% - 8px) !important;
  max-width: calc(100% - 8px) !important;
  box-sizing: border-box;
}

/* v27 — stronger right rail headings */
.right-rail .panel h2,
.right-rail .panel h3,
.right-rail .commissions-title,
.right-rail .guestbook-title {
  font-weight: 800 !important;
}

/* v28 — inverted pink guestbook */
.guestbook-panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #b63c63 !important;
  color: var(--black) !important;
}

.guestbook-panel h2,
.guestbook-panel h3,
.guestbook-panel label,
.guestbook-panel .guestbook-title,
.guestbook-panel .guestbook-subtitle,
.guestbook-panel .char-count {
  color: var(--black) !important;
}

.guestbook-panel input,
.guestbook-panel textarea {
  background: #d96b8e !important;
  color: var(--black) !important;
  border-color: var(--black) !important;
  box-shadow: none !important;
}

.guestbook-panel input::placeholder,
.guestbook-panel textarea::placeholder {
  color: rgba(0, 0, 0, 0.55) !important;
}

.guestbook-panel button,
.guestbook-panel .btn,
.guestbook-panel a.button {
  background: #b63c63 !important;
  color: var(--black) !important;
  border-color: var(--black) !important;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease !important;
}

.guestbook-panel button:hover,
.guestbook-panel .btn:hover,
.guestbook-panel a.button:hover {
  background: var(--surface) !important;
  color: #f5f5f5 !important;
  border-color: var(--surface) !important;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.22) !important;
}

/* v29 — guestbook polish */
.guestbook-panel .guestbook-subtitle {
  color: var(--white) !important;
}

/* Keep form fields dark grey, like the rest of the site */
.guestbook-panel input,
.guestbook-panel textarea {
  background: #1a1a1a !important;
  color: #f3f3f3 !important;
  border-color: var(--black) !important;
}

.guestbook-panel input::placeholder,
.guestbook-panel textarea::placeholder {
  color: #858585 !important;
}

/* POST NOTE keeps the pink-panel button treatment */
.guestbook-panel button[type="submit"] {
  background: #b63c63 !important;
  color: var(--black) !important;
  border-color: var(--black) !important;
}
.guestbook-panel button[type="submit"]:hover {
  background: var(--surface) !important;
  color: var(--white) !important;
}

/* VIEW ALL NOTES: pink normally, black only on hover */
.guestbook-panel .view-notes-btn,
.guestbook-panel a[href*="guestbook"],
.guestbook-panel a[href*="notes"] {
  background: #b63c63 !important;
  color: var(--black) !important;
  border-color: var(--black) !important;
}
.guestbook-panel .view-notes-btn:hover,
.guestbook-panel a[href*="guestbook"]:hover,
.guestbook-panel a[href*="notes"]:hover {
  background: var(--surface) !important;
  color: var(--white) !important;
  border-color: var(--surface) !important;
}

/* v30 — final guestbook text/border fixes */
.guestbook-panel .guestbook-subtitle {
  color: var(--white) !important;
}

.guestbook-panel input,
.guestbook-panel textarea {
  border: 1px solid var(--white) !important;
}

/* v31 — ONLY force "LEAVE A LITTLE NOTE!" to white */
.guestbook-panel .guestbook-subtitle,
.guestbook-panel .guestbook-subtitle *,
.guestbook-panel .panel-kicker,
.guestbook-panel .panel-kicker *,
.guestbook-panel .guestbook-kicker,
.guestbook-panel .guestbook-kicker * {
  color: var(--white) !important;
  -webkit-text-fill-color: var(--white) !important;
}

/* v32 — exact guestbook subtitle color fix */
.gb-sub,
.guestbook-panel .gb-sub,
.gb-sub * {
  color: var(--white) !important;
  -webkit-text-fill-color: var(--white) !important;
  opacity: 1 !important;
  filter: none !important;
}

/* v33 — guestbook final styling */
.guestbook-panel .gb-sub {
  font-family: var(--font-authentic-signature) !important;
  color: var(--white) !important;
  -webkit-text-fill-color: var(--white) !important;
  font-weight: 400 !important;
}

/* Both guestbook buttons: black → white on hover */
.guestbook-panel button[type="submit"],
.guestbook-panel .view-notes-btn,
.guestbook-panel a[href*="guestbook"],
.guestbook-panel a[href*="notes"] {
  background: var(--black) !important;
  color: var(--black) !important;
  border-color: var(--black) !important;
}

.guestbook-panel button[type="submit"]:hover,
.guestbook-panel .view-notes-btn:hover,
.guestbook-panel a[href*="guestbook"]:hover,
.guestbook-panel a[href*="notes"]:hover {
  background: var(--white) !important;
  color: var(--black) !important;
  border-color: var(--white) !important;
}

/* v34 — exact guestbook button states */

/* POST NOTE: black normally, white on hover */
.guestbook-panel #gb-submit,
.guestbook-panel .gb-submit,
.guestbook-panel .post-note,
.guestbook-panel button[type="submit"],
.guestbook-panel input[type="submit"] {
  background: var(--black) !important;
  background-color: var(--black) !important;
  color: var(--white) !important;
  -webkit-text-fill-color: var(--white) !important;
  border-color: var(--black) !important;
}
.guestbook-panel #gb-submit:hover,
.guestbook-panel .gb-submit:hover,
.guestbook-panel .post-note:hover,
.guestbook-panel button[type="submit"]:hover,
.guestbook-panel input[type="submit"]:hover {
  background: var(--white) !important;
  background-color: var(--white) !important;
  color: var(--black) !important;
  -webkit-text-fill-color: var(--black) !important;
  border-color: var(--white) !important;
}

/* VIEW ALL NOTES: black + white text normally, white + black text on hover */
.guestbook-panel #gb-view-all,
.guestbook-panel .gb-view-all,
.guestbook-panel .view-notes-btn,
.guestbook-panel a[href*="guestbook"],
.guestbook-panel a[href*="notes"] {
  background: var(--black) !important;
  background-color: var(--black) !important;
  color: var(--white) !important;
  -webkit-text-fill-color: var(--white) !important;
  border-color: var(--black) !important;
}
.guestbook-panel #gb-view-all:hover,
.guestbook-panel .gb-view-all:hover,
.guestbook-panel .view-notes-btn:hover,
.guestbook-panel a[href*="guestbook"]:hover,
.guestbook-panel a[href*="notes"]:hover {
  background: var(--white) !important;
  background-color: var(--white) !important;
  color: var(--black) !important;
  -webkit-text-fill-color: var(--black) !important;
  border-color: var(--white) !important;
}

/* v36 — guestbook fields only; buttons remain exactly as in v34 */
.guestbook-panel input,
.guestbook-panel textarea,
.guestbook-panel input[type="text"],
.guestbook-panel textarea {
  background: var(--black) !important;
  background-color: var(--black) !important;
  border-color: var(--white) !important;
}

/* v38 — make the Guestbook handwritten subtitle readable */
.guestbook-panel .script-note,
.guestbook-panel .guestbook-subtitle,
.guestbook-panel .handwritten,
.guestbook-panel .script {
  color: var(--white) !important;
  -webkit-text-fill-color: var(--white) !important;
  font-size: 1.3em !important;
  line-height: 1.15 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65) !important;
  display: inline-block;
  margin-top: 3px;
  margin-bottom: 8px;
}

.guestbook-readable-note {
  color: var(--white) !important;
  -webkit-text-fill-color: var(--white) !important;
  font-size: 1.3em !important;
  line-height: 1.15 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65) !important;
  display: inline-block !important;
  margin-top: 3px !important;
  margin-bottom: 8px !important;
}

/* v42 — tablet-covers page footer spacing when reused from homepage */
body .tablet-stage + footer,
body .tablet-stage + .site-footer {
  margin-top: 0;
}

/* v46 — prevent font flash / layout twitch while navigating */
html.fonts-loading #site-stage {
  visibility: hidden !important;
}
html.fonts-ready #site-stage {
  visibility: visible;
}

/* v51 — discourage casual dragging/selecting of personal images site-wide */
img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

/* v60 — homepage interaction polish */
.project-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--pink2);
  border-radius: 7px;
  pointer-events: none;
  z-index: 8;
  box-sizing: border-box;
}
.project-card:hover::before {
  border-color: var(--pink2);
}
.project-card:hover {
  border-color: var(--pink2) !important;
}

.covers-pill-link {
  display: inline-block;
  color: var(--panel);
  text-decoration: none;
  cursor: pointer;
}
.covers-pill-link:hover {
  color: var(--panel);
  text-decoration: none;
  filter: brightness(1.08);
}

#covers-track .cover-card {
  text-decoration: none;
  color: inherit;
}

/* v61 — keep project pink border visible during hover */
.project-card {
  position: relative;
  border: 1px solid var(--pink2) !important;
}
.project-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border: 1px solid var(--pink2) !important;
  border-radius: 7px !important;
  pointer-events: none !important;
  z-index: 50 !important;
  display: block !important;
  box-sizing: border-box !important;
}
.project-card:hover {
  border-color: var(--pink2) !important;
}
.project-card:hover::before {
  border-color: var(--pink2) !important;
  opacity: 1 !important;
}
.project-card .image {
  border-radius: 6px !important;
}

/* clickable TABLET COVERS heading */
.covers-pill-link {
  display: inline-block;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease,
    letter-spacing 0.18s ease;
  transform-origin: center;
}
.covers-pill-link:hover {
  transform: translateY(-3px) scale(1.025);
  box-shadow: 0 8px 18px rgba(var(--pink-rgb), 0.24);
  filter: brightness(1.08);
  letter-spacing: 2.6px;
}
.covers-pill-link:active {
  transform: translateY(-1px) scale(0.995);
}

/* v62 — robust project outline + calmer tablet covers hover */

/* The actual image scales on hover, so keep it clipped just inside the card.
   The outline is drawn by the card itself and cannot be covered by the image. */
.project-card {
  isolation: isolate;
  outline: 1px solid var(--pink2) !important;
  outline-offset: -1px !important;
}
.project-card .image {
  clip-path: inset(1px round 6px);
}
.project-card:hover {
  outline: 1px solid var(--pink2) !important;
  outline-offset: -1px !important;
  border-color: var(--pink2) !important;
  box-shadow:
    inset 0 0 0 1px var(--pink2),
    0 12px 25px rgba(var(--pink-rgb), 0.17) !important;
}
.project-card:hover .image {
  clip-path: inset(1px round 6px);
}

/* Tablet Covers: subtle button-like feedback, without stretching the label. */
.covers-pill-link {
  transition:
    transform 0.16s ease,
    background-color 0.16s ease,
    box-shadow 0.16s ease,
    filter 0.16s ease !important;
}
.covers-pill-link:hover {
  transform: translateY(-1px) !important;
  letter-spacing: inherit !important;
  filter: brightness(1.06) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 5px 12px rgba(var(--pink-rgb), 0.18) !important;
}
.covers-pill-link:active {
  transform: translateY(0) scale(0.99) !important;
}

/* v63 — actual fix: the image no longer sits on top of the pink border */
.project-card .image {
  inset: 1px !important;
  width: auto !important;
  height: auto !important;
  border-radius: 5px !important;
  clip-path: none !important;
}
.project-card:hover #osu-card-img,
.project-card:hover #stuff-card-img,
.project-card:hover #music-card-img {
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
}
.project-card,
.project-card:hover {
  border: 1px solid var(--pink2) !important;
  outline: none !important;
}
.project-card::before {
  display: none !important;
  content: none !important;
}

/* Tablet Covers pill: no stretching / jumping. Just a clean glow + color shift. */
.covers-pill-link,
.covers-pill-link:hover,
.covers-pill-link:active {
  transform: none !important;
  letter-spacing: 2px !important;
}
.covers-pill-link {
  transition:
    background-color 0.16s ease,
    box-shadow 0.16s ease,
    filter 0.16s ease !important;
}
.covers-pill-link:hover {
  background: #c25578 !important;
  filter: brightness(1.04) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14),
    0 0 16px rgba(var(--pink-rgb), 0.28) !important;
}
.covers-pill-link:active {
  background: #9d3c5d !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

/* v66 — VANILLEEU'S STUFF: fill the tiny black side gaps without changing the card */
#stuff-card-img {
  width: calc(100% + 6px) !important;
  max-width: none !important;
  left: -3px !important;
  right: auto !important;
}

/* v86 — shell consistency + navigation polish */
html,
body {
  background: var(--black) !important;
  min-width: 0 !important;
}
body {
  overflow-x: hidden !important;
}
#viewport {
  background: var(--black) !important;
  overflow-x: hidden !important;
}

/* A tiny black-to-page reveal instead of the old grey/font flash. */
html.fonts-ready #site-stage {
  animation: vanilleeuPageIn 0.16s ease-out both;
}
@keyframes vanilleeuPageIn {
  from {
    opacity: 0.72;
  }
  to {
    opacity: 1;
  }
}

/* Homepage: keep the Discord widget + build note inside the fixed right rail. */
#site-stage:not(.inner-page-stage) > .right-rail .discord-panel {
  padding: 14px 20px 12px !important;
  margin-bottom: 10px !important;
}
#site-stage:not(.inner-page-stage) > .right-rail .discord-sub {
  margin-bottom: 13px !important;
}
#site-stage:not(.inner-page-stage) > .right-rail .discord-stats {
  margin-bottom: 13px !important;
}
#site-stage:not(.inner-page-stage) > .right-rail .voice-label {
  margin-bottom: 7px !important;
}
#site-stage:not(.inner-page-stage) > .right-rail .voice-box {
  padding: 8px 11px !important;
  margin-bottom: 6px !important;
}
#site-stage:not(.inner-page-stage) > .right-rail .voice-name {
  margin-bottom: 3px !important;
}
#site-stage:not(.inner-page-stage) > .right-rail .voice-members {
  line-height: 1.55 !important;
}
#site-stage:not(.inner-page-stage) > .right-rail .discord-join {
  margin-top: 9px !important;
}
#site-stage:not(.inner-page-stage) > .right-rail .build-note {
  margin-top: 0 !important;
  padding-top: 1px !important;
}

/* About + osu must use the exact same right-rail geometry as homepage/tablet covers. */
#site-stage.inner-page-stage > .inner-right-rail {
  width: 390px !important;
  min-width: 390px !important;
  max-width: 390px !important;
  box-sizing: border-box !important;
  padding: 11px 26px 12px 14px !important;
  scrollbar-gutter: stable !important;
}
#site-stage.inner-page-stage > .inner-right-rail > * {
  width: calc(100% - 8px) !important;
  max-width: calc(100% - 8px) !important;
  box-sizing: border-box !important;
}

/* =========================================================
   v87 — homepage tablet-cover carousel inside Tablet Covers
   ========================================================= */
.tablet-page-carousel {
  margin: 20px 0 30px;
  overflow: hidden;
}
.tablet-page-carousel .covers-wrap {
  width: 100%;
  max-width: 100%;
  overflow: hidden !important;
}
.tablet-page-carousel .covers-track {
  display: flex;
  gap: 40px !important;
  width: max-content;
  max-width: none;
  will-change: transform;
}
.tablet-page-carousel .cover-card {
  flex: 0 0 278px !important;
  width: 278px !important;
  height: 177px;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--pink2);
  background: var(--surface);
  overflow: hidden;
  position: relative;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
}
.tablet-page-carousel .cover-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(var(--pink-rgb), 0.14);
}
.tablet-page-carousel button.cover-card {
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: inherit;
  cursor: zoom-in;
}
.tablet-page-carousel .cover-image {
  height: 132px;
  background: var(--surface) center/cover no-repeat;
}
.tablet-page-carousel .cover-caption {
  height: 45px;
  background: #95344f;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 8px;
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 11px;
  color: var(--white);
}

/* v89 — ONE right rail geometry everywhere.
   Homepage is the reference: 390px rail, 14px left / 26px right padding,
   342px cards. No page is allowed to improvise anymore. */
#site-stage > .right-rail,
#site-stage > .inner-right-rail {
  grid-column: 3 !important;
  grid-row: 1 !important;
  width: 390px !important;
  min-width: 390px !important;
  max-width: 390px !important;
  box-sizing: border-box !important;
  padding: 11px 26px 12px 14px !important;
  background: var(--black) !important;
  border-left: 1px solid #6b6b6b !important;
  scrollbar-gutter: stable !important;
}

#site-stage > .right-rail > .panel,
#site-stage > .inner-right-rail > .panel,
#site-stage > .right-rail > .guestbook-panel,
#site-stage > .inner-right-rail > .guestbook-panel {
  width: 342px !important;
  min-width: 342px !important;
  max-width: 342px !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Internal pages keep their own shell height, but not their own rail sizing. */
#site-stage.inner-page-stage > .inner-right-rail {
  height: var(--inner-content-height, 1180px) !important;
  min-height: var(--inner-content-height, 1180px) !important;
  overflow: hidden !important;
}

/* v90 — exact homepage card width */
#site-stage > .right-rail > .panel,
#site-stage > .inner-right-rail > .panel,
#site-stage > .right-rail > .guestbook-panel,
#site-stage > .inner-right-rail > .guestbook-panel {
  width: 334px !important;
  min-width: 334px !important;
  max-width: 334px !important;
  box-sizing: border-box !important;
}

/* =========================================================
   v91 — homepage is the literal master shell
   ========================================================= */

/* Same three columns, same rails, same card geometry on every page. */
#site-stage,
#site-stage.inner-page-stage {
  width: 1920px !important;
  min-width: 1920px !important;
  max-width: 1920px !important;
  display: grid !important;
  grid-template-columns: 250px 1280px 390px !important;
  background: var(--black) !important;
  border: 1px solid #555 !important;
  box-sizing: border-box !important;
}

#site-stage > .left-rail {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  padding: 46px 38px 28px !important;
  border-right: 1px solid #6b6b6b !important;
  background: var(--black) !important;
  box-sizing: border-box !important;
}

#site-stage > .right-rail,
#site-stage > .right-rail.inner-right-rail {
  grid-column: 3 !important;
  grid-row: 1 !important;
  width: 390px !important;
  min-width: 390px !important;
  max-width: 390px !important;
  padding: 11px 26px 12px 14px !important;
  border-left: 1px solid #6b6b6b !important;
  background: var(--black) !important;
  box-sizing: border-box !important;
  scrollbar-gutter: stable !important;
}

/* The actual homepage card width is the source of truth. */
#site-stage > .right-rail > .panel,
#site-stage > .right-rail > .guestbook-panel {
  width: 334px !important;
  min-width: 334px !important;
  max-width: 334px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/*
  Homepage owns a browser vertical scrollbar, while internal pages scroll
  inside their center column. Reserving the same browser gutter on internal
  pages makes the 1920px stage scale to the EXACT same width on navigation.
  The reserved scrollbar is black/invisible, so there is still only one
  visually useful scrollbar: the pink center scrollbar.
*/
html:has(#site-stage.inner-page-stage) {
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  scrollbar-color: var(--black) var(--black);
}
html:has(#site-stage.inner-page-stage)::-webkit-scrollbar {
  width: 16px;
  background: var(--black);
}
html:has(#site-stage.inner-page-stage)::-webkit-scrollbar-track,
html:has(#site-stage.inner-page-stage)::-webkit-scrollbar-thumb {
  background: var(--black);
  border: 0;
}
body:has(#site-stage.inner-page-stage) {
  overflow: hidden !important;
}

/* =========================================================
   v92 — homepage Previous Notes
   ========================================================= */
.latest-note {
  width: 330px !important;
  min-height: 140px !important;
  padding: 19px 20px !important;

  /* same visual language as the website visit counter */
  border: 1px dashed var(--pink2) !important;
  border-radius: 6px !important;

  background: rgba(7, 7, 7, 0.94) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28) !important;
}

.latest-note .note-head {
  font-size: 11.5px !important;
  margin-bottom: 16px !important;
}

.latest-note .note-body {
  font-size: 12.5px !important;
  line-height: 1.65 !important;
}

.latest-note .note-label {
  right: 0 !important;
  bottom: -28px !important;
  font-size: 17px !important;
}

/* v93 — stronger Previous Notes dashed outline */
.latest-note {
  border-width: 2px !important;
}

/* v101 — tool archive image protection / clean dragging */
.osu-tools-section img,
.tool-modal img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

/* v105 fallback minimums for shared tiny utility text */
.small,
.muted,
.helper,
.caption,
.meta-small {
  font-size: 11.5px !important;
  line-height: 1.45 !important;
}

/* =========================================================
   v113 — guestbook subtitle, globally readable on every page
   ========================================================= */
.guestbook-panel .gb-sub.guestbook-readable-note,
.guestbook-panel .guestbook-readable-note,
.guestbook-panel .gb-sub {
  font-family: var(--font-authentic-signature) !important;
  font-size: 22px !important;
  line-height: 1.05 !important;
  font-weight: 400 !important;
  color: var(--white) !important;
  -webkit-text-fill-color: var(--white) !important;
  display: block !important;
  margin-top: 5px !important;
  margin-bottom: 22px !important;
  opacity: 1 !important;
  transform: none !important;
}

/* v114 — global final guestbook subtitle size override */
.guestbook-panel .gb-sub.guestbook-readable-note,
.guestbook-panel .guestbook-readable-note,
.guestbook-panel .gb-sub {
  font-family: var(--font-authentic-signature) !important;
  font-size: 28px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  color: var(--white) !important;
  -webkit-text-fill-color: var(--white) !important;
  display: block !important;
  margin-top: 5px !important;
  margin-bottom: 24px !important;
  opacity: 1 !important;
}

/* =========================================================
   v124 — persistent favorite osu! mini player
   ========================================================= */
#global-favorite-player {
  position: fixed;
  right: 22px;
  bottom: 116px;
  z-index: 12000;
  width: 340px;
  height: 116px;
  display: none;
  overflow: hidden;
  border: 1px solid #7b304a;
  border-radius: var(--right-panel-radius);
  background: var(--surface);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  color: var(--white);
  font-family: var(--mono);
}
#global-favorite-player.active {
  display: block;
}
#global-favorite-player .gfp-bg {
  position: absolute;
  inset: 0;
  background: center/cover no-repeat;
  filter: brightness(0.46);
  transform: scale(1.025);
  transition: background-image 0.25s ease;
}
#global-favorite-player .gfp-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.28));
}
#global-favorite-player .gfp-copy {
  position: absolute;
  left: 15px;
  top: 13px;
  right: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: none;
}
#global-favorite-player .gfp-kicker {
  color: #e45f88;
  font-size: 8px;
  text-transform: uppercase;
}
#global-favorite-player .gfp-title {
  font-family: var(--display);
  font-size: 15px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#global-favorite-player .gfp-artist {
  color: #bbb;
  font-size: 9px;
}
#global-favorite-player .gfp-controls {
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 10px;
  display: grid;
  grid-template-columns: 30px 38px 30px 1fr;
  gap: 6px;
  align-items: center;
}
#global-favorite-player button {
  height: 28px;
  border: 1px solid #7b304a;
  background: var(--surface);
  color: var(--white);
  font-family: var(--mono);
  cursor: pointer;
}
#global-favorite-player .gfp-play {
  background: var(--pink);
}
#global-favorite-player input {
  width: 100%;
  accent-color: #d95d82;
}

/* Homepage version sits inside the empty hero area instead of floating over content. */
#global-favorite-player.home {
  position: absolute;
  right: auto;
  bottom: auto;
  left: calc(50% + 340px);
  top: 395px;
  width: 285px;
  height: 122px;
  border-style: dashed;
  box-shadow: none;
}
#global-favorite-player.home .gfp-title {
  font-size: 14px;
}

@media (max-width: 1200px) {
  #global-favorite-player.home {
    position: fixed;
    left: auto;
    right: 18px;
    top: auto;
    bottom: 90px;
  }
}

/* =========================================================
   v125 — persistent favorite osu! mini player polish
   ========================================================= */
#global-favorite-player {
  right: 24px !important;
  bottom: 104px !important;
  width: 360px !important;
  height: 132px !important;
  border: 1px solid var(--pink) !important;
  border-style: solid !important;
  border-radius: var(--right-panel-radius) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.48) !important;
}

#global-favorite-player .gfp-copy {
  left: 16px !important;
  top: 14px !important;
  right: 16px !important;
  gap: 3px !important;
}

#global-favorite-player .gfp-kicker {
  font-size: 9px !important;
  color: #dc5f86 !important;
}

#global-favorite-player .gfp-title {
  font-size: 17px !important;
  line-height: 1.12 !important;
}

#global-favorite-player .gfp-artist {
  font-size: 10.5px !important;
  color: #c5c5c5 !important;
}

#global-favorite-player .gfp-controls {
  left: 15px !important;
  right: 15px !important;
  bottom: 12px !important;
  grid-template-columns: 38px 46px 38px 1fr !important;
  gap: 8px !important;
}

/* same button language as the main osu! player */
#global-favorite-player button {
  height: 38px !important;
  border: 1px solid #8b304d !important;
  background: var(--surface) !important;
  color: var(--white) !important;
  font-family: var(--mono) !important;
  font-size: 22px !important;
  line-height: 1 !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition:
    transform 0.14s ease,
    border-color 0.14s ease,
    background 0.14s ease !important;
}

#global-favorite-player button:hover {
  transform: translateY(-1px) !important;
  border-color: #dc5f86 !important;
}

#global-favorite-player .gfp-play {
  background: #c94e75 !important;
  color: var(--surface) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

#global-favorite-player .gfp-play:hover {
  background: #df688d !important;
}

#global-favorite-player .gfp-volume {
  width: calc(100% - 12px) !important;
  accent-color: #d85b82 !important;
}

/* On the homepage, move it further down/right into the intentional empty area. */
#global-favorite-player.home {
  position: absolute !important;
  right: 34px !important;
  left: auto !important;
  top: 455px !important;
  bottom: auto !important;
  width: 330px !important;
  height: 136px !important;
  border: 1px solid var(--pink) !important;
  border-style: solid !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32) !important;
}

#global-favorite-player.home .gfp-title {
  font-size: 17px !important;
}

/* =========================================================
   v126 — homepage mini-player placement only
   Keep the v125 visual design exactly as-is.
   ========================================================= */
.hero {
  position: relative !important;
}

/* The player now lives inside .hero on the homepage,
   so these coordinates are relative to the hero itself. */
#global-favorite-player.home {
  position: absolute !important;
  top: 405px !important;
  right: 34px !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  z-index: 30 !important;
}

/* Do not let the homepage player drift into the right rail. */
.center .hero #global-favorite-player.home {
  max-width: 330px !important;
}

/* =========================================================
   v127 — lower floating mini-player on inner pages
   ========================================================= */
body:not(.homepage) #global-favorite-player:not(.home) {
  right: 24px !important;
  bottom: 42px !important;
}

/* =========================================================
   v128 — global player placement + page reveal polish
   ========================================================= */

/* Floating widget: tuck it into the actual corner. */
#global-favorite-player:not(.home) {
  right: 10px !important;
  bottom: 10px !important;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease !important;
  transform-origin: bottom right !important;
}

#global-favorite-player:not(.home):hover {
  transform: translateY(-3px) scale(1.012) !important;
  border-color: #dd6389 !important;
  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.52),
    0 0 14px rgba(var(--pink-rgb), 0.13) !important;
}

/* Homepage embed gets a slightly more "featured" hover animation. */
#global-favorite-player.home {
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease !important;
  transform-origin: center !important;
}

#global-favorite-player.home:hover {
  transform: translateY(-4px) scale(1.012) !important;
  border-color: #df668c !important;
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.38),
    0 0 15px rgba(var(--pink-rgb), 0.12) !important;
}

/* Homepage-only BPM reaction. The floating widget deliberately does NOT pulse. */
@keyframes gfpHomeBeat {
  0% {
    transform: translateY(0) scale(1);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
  }
  10% {
    transform: translateY(-1px) scale(1.004);
    box-shadow:
      0 15px 36px rgba(0, 0, 0, 0.34),
      0 0 10px rgba(var(--pink-rgb), 0.08);
  }
  26% {
    transform: translateY(-0.5px) scale(1.0015);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.33);
  }
  100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
  }
}

@keyframes gfpHomeLightBeat {
  0% {
    filter: brightness(0.46) saturate(1);
    transform: scale(1.025);
  }
  10% {
    filter: brightness(0.515) saturate(1.012);
    transform: scale(1.031);
  }
  26% {
    filter: brightness(0.485) saturate(1.006);
    transform: scale(1.028);
  }
  100% {
    filter: brightness(0.46) saturate(1);
    transform: scale(1.025);
  }
}

#global-favorite-player.home.playing {
  animation: gfpHomeBeat var(--gfp-beat-duration, 0.6667s)
    cubic-bezier(0.15, 0.68, 0.22, 1) infinite !important;
}

#global-favorite-player.home.playing .gfp-bg {
  animation: gfpHomeLightBeat var(--gfp-beat-duration, 0.6667s)
    cubic-bezier(0.15, 0.68, 0.22, 1) infinite !important;
}

/* Hover wins over the beat transform so interaction still feels responsive. */
#global-favorite-player.home.playing:hover {
  animation: none !important;
  transform: translateY(-4px) scale(1.012) !important;
}
#global-favorite-player.home.playing:hover .gfp-bg {
  animation: gfpHomeLightBeat var(--gfp-beat-duration, 0.6667s)
    cubic-bezier(0.15, 0.68, 0.22, 1) infinite !important;
}

/* ---------------------------------------------------------
   Progressive page reveal.
   Animate content, not #site-stage itself, because page-shell
   owns the stage transform/scale.
   --------------------------------------------------------- */
html.v128-enter .left-rail,
html.v128-enter .right-rail,
html.v128-enter main,
html.v128-enter .osu-center,
html.v128-enter .about-center,
html.v128-enter .tablet-center,
html.v128-enter .music-center,
html.v128-enter .guestbook-center,
html.v128-enter .footer {
  opacity: 0;
}

html.v128-ready .left-rail,
html.v128-ready .right-rail,
html.v128-ready main,
html.v128-ready .osu-center,
html.v128-ready .about-center,
html.v128-ready .tablet-center,
html.v128-ready .music-center,
html.v128-ready .guestbook-center,
html.v128-ready .footer {
  opacity: 1;
  transition: opacity 0.32s cubic-bezier(0.2, 0.72, 0.2, 1);
}

/* Rails stay spatially anchored; only the central artwork settles. */
html.v128-enter .left-rail,
html.v128-enter .right-rail {
  transform: none;
}
html.v128-enter main,
html.v128-enter .osu-center,
html.v128-enter .about-center,
html.v128-enter .tablet-center,
html.v128-enter .music-center,
html.v128-enter .guestbook-center {
  transform: translateY(6px);
}

html.v128-ready .left-rail,
html.v128-ready .right-rail,
html.v128-ready main,
html.v128-ready .osu-center,
html.v128-ready .about-center,
html.v128-ready .tablet-center,
html.v128-ready .music-center,
html.v128-ready .guestbook-center {
  transform: none;
  transition:
    opacity 0.32s cubic-bezier(0.2, 0.72, 0.2, 1),
    transform 0.4s cubic-bezier(0.18, 0.76, 0.2, 1);
}

html.v128-ready .right-rail {
  transition-delay: 0.035s;
}
html.v128-ready .footer {
  transition-delay: 0.07s;
}

/* Small stagger inside the actual page content. */
html.v128-enter .center > *,
html.v128-enter .osu-page > section,
html.v128-enter .about-page > section,
html.v128-enter .tablet-page > section {
  opacity: 0;
  transform: translateY(5px);
}
html.v128-ready .center > *,
html.v128-ready .osu-page > section,
html.v128-ready .about-page > section,
html.v128-ready .tablet-page > section {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.34s cubic-bezier(0.2, 0.72, 0.2, 1),
    transform 0.42s cubic-bezier(0.18, 0.76, 0.2, 1);
}
html.v128-ready .center > *:nth-child(2),
html.v128-ready .osu-page > section:nth-child(2),
html.v128-ready .about-page > section:nth-child(2),
html.v128-ready .tablet-page > section:nth-child(2) {
  transition-delay: 0.055s;
}
html.v128-ready .center > *:nth-child(3),
html.v128-ready .osu-page > section:nth-child(3),
html.v128-ready .about-page > section:nth-child(3),
html.v128-ready .tablet-page > section:nth-child(3) {
  transition-delay: 0.1s;
}
html.v128-ready .center > *:nth-child(4),
html.v128-ready .osu-page > section:nth-child(4),
html.v128-ready .about-page > section:nth-child(4),
html.v128-ready .tablet-page > section:nth-child(4) {
  transition-delay: 0.145s;
}

@media (prefers-reduced-motion: reduce) {
  html.v128-enter *,
  html.v128-ready * {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* =========================================================
   v129 — homepage: align the guest note + music embed edge
   ========================================================= */
body.homepage #global-favorite-player.home {
  right: 24px !important;
}

/* Keep the homepage music card visually aligned with the
   right edge of the "previous notes" / guest-note block. */
@media (min-width: 901px) {
  body.homepage #global-favorite-player.home {
    margin-right: 0 !important;
  }
}

/* =========================================================
   v130 — final floating player placement
   Slightly smaller + properly tucked into the page corner.
   Homepage featured player stays untouched.
   ========================================================= */
body:not(.homepage) #global-favorite-player:not(.home) {
  right: 6px !important;
  bottom: 6px !important;
  width: 300px !important;
  max-width: calc(100vw - 12px) !important;
  min-height: 100px !important;
  padding: 12px 13px !important;
}

body:not(.homepage) #global-favorite-player:not(.home) .gfp-title {
  font-size: 15px !important;
}

body:not(.homepage) #global-favorite-player:not(.home) .gfp-artist {
  font-size: 11px !important;
}

body:not(.homepage) #global-favorite-player:not(.home) .gfp-controls {
  gap: 8px !important;
  margin-top: 9px !important;
}

body:not(.homepage) #global-favorite-player:not(.home) .gfp-btn {
  width: 35px !important;
  height: 35px !important;
}

body:not(.homepage) #global-favorite-player:not(.home):hover {
  transform: translateY(-2px) scale(1.008) !important;
}

/* =========================================================
   v131 — floating player: better placement + visible BPM pulse
   ========================================================= */

/* Same perfect size, just brought slightly inward/up from the extreme corner. */
body:not(.homepage) #global-favorite-player:not(.home) {
  right: 24px !important;
  bottom: 22px !important;
}

/* subtle BPM animation for the floating player too */
@keyframes gfpFloatBeat {
  0% {
    transform: translateY(0) scale(1);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.48);
  }
  10% {
    transform: translateY(-1px) scale(1.0035);
    box-shadow:
      0 15px 40px rgba(0, 0, 0, 0.5),
      0 0 10px rgba(var(--pink-rgb), 0.08);
  }
  26% {
    transform: translateY(-0.4px) scale(1.0015);
    box-shadow: 0 14px 39px rgba(0, 0, 0, 0.49);
  }
  100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.48);
  }
}

@keyframes gfpFloatLightBeat {
  0% {
    filter: brightness(0.46) saturate(1);
    transform: scale(1.025);
  }
  10% {
    filter: brightness(0.505) saturate(1.01);
    transform: scale(1.03);
  }
  26% {
    filter: brightness(0.48) saturate(1.004);
    transform: scale(1.027);
  }
  100% {
    filter: brightness(0.46) saturate(1);
    transform: scale(1.025);
  }
}

body:not(.homepage) #global-favorite-player:not(.home).playing {
  animation: gfpFloatBeat var(--gfp-beat-duration, 0.6667s)
    cubic-bezier(0.15, 0.68, 0.22, 1) infinite !important;
}

body:not(.homepage) #global-favorite-player:not(.home).playing .gfp-bg {
  animation: gfpFloatLightBeat var(--gfp-beat-duration, 0.6667s)
    cubic-bezier(0.15, 0.68, 0.22, 1) infinite !important;
}

/* Hover should still feel intentional instead of fighting the beat animation. */
body:not(.homepage) #global-favorite-player:not(.home).playing:hover {
  animation: none !important;
  transform: translateY(-3px) scale(1.01) !important;
}

body:not(.homepage) #global-favorite-player:not(.home).playing:hover .gfp-bg {
  animation: gfpFloatLightBeat var(--gfp-beat-duration, 0.6667s)
    cubic-bezier(0.15, 0.68, 0.22, 1) infinite !important;
}

/* v132 — floating music widget disappears cleanly when paused */
#global-favorite-player:not(.home) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.16s ease,
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease !important;
}

#global-favorite-player:not(.home).active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* v133 — birthday photo caption: simple readable white text */
.cake-caption {
  font-family: "Courier New", Courier, monospace !important;
  font-style: normal !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  color: var(--white) !important;
  text-shadow: none !important;
}

/* v137 — Discord source link at bottom of each existing OSU Tools preview */
.tool-coca-link {
  margin-top: 18px;
  padding-top: 13px;
  border-top: 1px solid #39242c;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-family: var(--mono);
  font-size: 13px;
}
.tool-coca-link span {
  color: #969197;
}
.tool-coca-link a {
  color: var(--pink2);
  text-decoration: none;
  border: 1px solid var(--pink2);
  padding: 8px 11px;
}
.tool-coca-link a:hover {
  color: var(--white);
  border-color: var(--white);
}

/* =========================================================
   v138 — OSU Tools title/readability cleanup
   ========================================================= */
.osu-tools-grid .osu-tool-post h3,
.osu-tools-grid .osu-tool-post .tool-title {
  color: var(--white) !important;
  font-size: 18px !important;
}

/* Only the Discord button remains in the preview footer. */
.tool-coca-link {
  justify-content: flex-end !important;
}
.tool-coca-link > span {
  display: none !important;
}

/* =========================================================
   v138 — HOME favorite-map player BPM pulse
   Slightly stronger ONLY on the homepage embed.
   The floating cross-page widget is intentionally untouched.
   ========================================================= */
body.home .home-favorite-player.is-playing,
body.home .home-favorite-map.is-playing,
body.home #home-favorite-player.is-playing,
body.home #home-favorite-map.is-playing {
  --home-bpm-scale: 1.012;
  --home-bpm-glow: 0 0 20px rgba(225, 77, 119, 0.22);
}

/* v138 final — stronger BPM feedback on HOME embed only */
@keyframes gfpHomeBeatV138 {
  0%,
  100% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.018);
  }
  24% {
    transform: scale(1.006);
  }
}
@keyframes gfpHomeLightBeatV138 {
  0%,
  100% {
    filter: brightness(0.48) saturate(1);
    transform: scale(1.025);
  }
  10% {
    filter: brightness(0.66) saturate(1.08);
    transform: scale(1.035);
  }
  24% {
    filter: brightness(0.53) saturate(1.03);
    transform: scale(1.029);
  }
}
body.homepage #global-favorite-player.home.playing {
  animation: gfpHomeBeatV138 var(--gfp-beat-duration, 0.6667s)
    cubic-bezier(0.15, 0.68, 0.22, 1) infinite !important;
}
body.homepage #global-favorite-player.home.playing .gfp-bg {
  animation: gfpHomeLightBeatV138 var(--gfp-beat-duration, 0.6667s)
    cubic-bezier(0.15, 0.68, 0.22, 1) infinite !important;
}

/* =========================================================
   v139 — ME & OSU peripheral image previews
   ========================================================= */
.osu-gear-preview-trigger {
  cursor: zoom-in !important;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease !important;
}
.osu-gear-preview-trigger:hover {
  transform: translateY(-3px) !important;
  border-color: #c84d72 !important;
  box-shadow: 0 10px 26px rgba(var(--pink-rgb), 0.1) !important;
}
.osu-gear-preview-trigger:focus-visible {
  outline: 1px solid #ef7699;
  outline-offset: 3px;
}

.osu-gear-lightbox {
  position: fixed;
  inset: 0;
  z-index: 30000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(5px);
}
.osu-gear-lightbox.open {
  display: flex;
}
.osu-gear-lightbox-dialog {
  position: relative;
  width: min(920px, 92vw);
  max-height: 90vh;
  padding: 18px;
  overflow: auto;
  border: 1px solid var(--pink);
  background: var(--surface);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.62);
}
.osu-gear-lightbox-dialog img {
  display: block;
  width: 100%;
  max-height: 68vh;
  object-fit: contain;
  background: var(--panel);
  border: 1px solid #38242c;
}
.osu-gear-lightbox-close {
  position: absolute;
  z-index: 2;
  top: 28px;
  right: 28px;
  padding: 9px 12px;
  border: 1px solid var(--pink);
  background: var(--surface);
  color: var(--white);
  font: 700 12px var(--mono);
  cursor: pointer;
}
.osu-gear-lightbox-caption {
  display: grid;
  gap: 4px;
  padding: 14px 3px 2px;
}
.osu-gear-lightbox-caption span {
  color: #df5c84;
  font: 700 10px var(--mono);
}
.osu-gear-lightbox-caption strong {
  color: var(--white);
  font: 700 18px var(--display);
}
.osu-gear-lightbox-caption small {
  color: #aaa;
  font: 400 12px var(--mono);
}

/* =========================================================
   v139 — stronger BPM animation for BOTH mini-player modes.
   Same rhythm/duration, just a clearer visual response.
   ========================================================= */
@keyframes gfpBeatV139 {
  0%,
  100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.46);
  }
  10% {
    transform: translateY(-1.5px) scale(1.012);
    box-shadow:
      0 16px 42px rgba(0, 0, 0, 0.5),
      0 0 18px rgba(208, 72, 112, 0.18);
  }
  26% {
    transform: translateY(-0.5px) scale(1.004);
    box-shadow:
      0 15px 40px rgba(0, 0, 0, 0.48),
      0 0 9px rgba(208, 72, 112, 0.09);
  }
}

@keyframes gfpLightBeatV139 {
  0%,
  100% {
    filter: brightness(0.46) saturate(1);
    transform: scale(1.025);
  }
  10% {
    filter: brightness(0.6) saturate(1.055);
    transform: scale(1.038);
  }
  26% {
    filter: brightness(0.505) saturate(1.018);
    transform: scale(1.03);
  }
}

#global-favorite-player.playing {
  animation: none !important;
}
#global-favorite-player.playing .gfp-bg {
  animation: none !important;
}
#global-favorite-player.playing:hover {
  animation: none !important;
}
#global-favorite-player.playing:hover .gfp-bg {
  animation: none !important;
}

/* v140 — smaller ME & OSU image preview */
.osu-gear-lightbox-dialog {
  width: min(700px, 78vw) !important;
  max-height: 82vh !important;
  padding: 15px !important;
}
.osu-gear-lightbox-dialog img {
  max-height: 56vh !important;
}
.osu-gear-lightbox-caption {
  padding-top: 11px !important;
}
.osu-gear-lightbox-caption strong {
  font-size: 16px !important;
}

/* =========================================================
   v141 — Tablet Covers: black page + image-backed accordions
   ========================================================= */

/* Remove the large decorative background from the whole tablet page. */
body.tablet-page,
.tablet-center,
.tablet-scroll,
.covers-page {
  background-color: var(--black) !important;
}
.tablet-center::before,
.tablet-center::after,
.tablet-scroll::before,
.tablet-scroll::after,
.covers-page::before,
.covers-page::after {
  background-image: none !important;
}

/* In case the old page background lives directly on one of these nodes. */
.tablet-center,
.tablet-scroll,
.covers-page {
  background-image: none !important;
}

/* Replace the old two-column info cards with simple expandable rectangles. */
.tablet-info-accordion {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 28px 0 28px;
}

.tablet-info-drop {
  position: relative;
  overflow: hidden;
  border: 1px solid #7f2c48;
  background: var(--surface);
  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

/* Reuse the old tablet-page art only inside these boxes. */
.tablet-info-drop::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.78)),
    var(--tablet-page-bg, none);
  background-size: cover;
  background-position: center;
  opacity: 0.42;
  pointer-events: none;
}
.tablet-info-drop:nth-child(2)::before {
  background-position: 72% center;
}

.tablet-info-drop:hover {
  border-color: #c14b70;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

.tablet-info-drop summary {
  position: relative;
  z-index: 1;
  min-height: 78px;
  padding: 17px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.tablet-info-drop summary::-webkit-details-marker {
  display: none;
}

.tablet-info-heading {
  display: grid;
  gap: 4px;
}
.tablet-info-heading strong {
  color: var(--white);
  font-family: var(--display);
  font-size: 22px;
  line-height: 1.05;
}
.tablet-info-heading small {
  color: #e14f7a;
  font-family: "Caveat", cursive;
  font-size: 19px;
  line-height: 1.1;
}

.tablet-info-arrow {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid #7f2c48;
  color: var(--white);
  font-family: var(--mono);
  font-size: 18px;
  transition:
    transform 0.24s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}
.tablet-info-drop:hover .tablet-info-arrow {
  border-color: #d45479;
  background: rgba(181, 56, 92, 0.12);
}
.tablet-info-drop[open] .tablet-info-arrow {
  transform: rotate(180deg);
}

.tablet-info-content {
  position: relative;
  z-index: 1;
  padding: 4px 20px 20px;
  border-top: 1px solid rgba(196, 74, 108, 0.28);
  animation: tabletInfoReveal 0.22s ease both;
}
@keyframes tabletInfoReveal {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tablet-info-content .fact-row {
  background: rgba(0, 0, 0, 0.28);
}
.tablet-info-content .request-list {
  margin-top: 14px;
}
.tablet-info-content .request-note {
  margin-bottom: 0;
}

/* Hide the obsolete intro-grid if any stale duplicate survives elsewhere. */
.covers-page > .intro-grid {
  display: none !important;
}

@media (max-width: 760px) {
  .tablet-info-drop summary {
    min-height: 70px;
    padding: 15px 16px;
  }
  .tablet-info-heading strong {
    font-size: 18px;
  }
  .tablet-info-heading small {
    font-size: 17px;
  }
  .tablet-info-content {
    padding: 3px 16px 17px;
  }
}

.covers-page {
  --tablet-page-bg: none;
}

/* =========================================================
   v142 — Tablet Covers accordion layout/background refinements
   ========================================================= */

/* Put the two dropdowns back side-by-side. */
.tablet-info-accordion {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: start !important;
}

/* Use the SAME grunge image used by the osu! skin cards. */
.tablet-info-drop::before {
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.55)),
    url("../assets/backgrounds/tablet-covers-top-v72.png") !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  opacity: 0.82 !important;
}
.tablet-info-drop:nth-child(1)::before {
  background-position: left 28% center !important;
}
.tablet-info-drop:nth-child(2)::before {
  background-position: right 24% center !important;
}

/* Keep content readable over the image, like the skin cards. */
.tablet-info-drop::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.6) 58%,
    rgba(0, 0, 0, 0.36) 100%
  );
}
.tablet-info-drop summary,
.tablet-info-content {
  position: relative;
  z-index: 1;
}

/* Pink handwritten subtitles = Authentic Signature */
.tablet-info-heading small {
  font-family: var(--font-authentic-signature) !important;
  font-size: 21px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

/* Keep the expanded content neat in a two-column layout. */
.tablet-info-content {
  min-height: 0 !important;
}

@media (max-width: 900px) {
  .tablet-info-accordion {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   v145 — OSU Tools cards: normal, reliable click targets
   ========================================================= */
.osu-tool-post {
  pointer-events: auto !important;
  cursor: pointer !important;
}
.osu-tool-post * {
  pointer-events: auto !important;
}
.osu-tool-post .osu-tool-thumb,
.osu-tool-post .osu-tool-thumb *,
.osu-tool-post .osu-tool-post-head,
.osu-tool-post h3,
.osu-tool-post > p,
.osu-tool-post .osu-tool-foot {
  cursor: pointer !important;
}

/* =========================================================
   v148 — homepage Previous Notes
   ========================================================= */
.previous-note,
.previous-note-card,
.hero-note,
.note-preview {
  border-style: solid !important;
}
.previous-note,
.previous-note-card,
.hero-note,
.note-preview {
  background: rgba(4, 4, 5, 0.91) !important;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(199, 76, 111, 0.08) !important;
}
.previous-note .note-body,
.previous-note-card .note-body,
.hero-note .note-body,
.note-preview .note-body {
  color: var(--white) !important;
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.05);
}

/* =========================================================
   v148 — Tablet Covers info dropdown visual polish
   ========================================================= */
.tablet-info-drop {
  min-height: 112px !important;
  background: var(--surface) !important;
}
.tablet-info-drop::before {
  opacity: 0.96 !important;
  filter: saturate(1.1) contrast(1.12) brightness(0.88) !important;
}
.tablet-info-drop:nth-child(1)::before {
  background-position: 18% 34% !important;
  transform: scale(1.035);
}
.tablet-info-drop:nth-child(2)::before {
  background-position: 84% 68% !important;
  transform: scale(1.06) scaleX(-1);
}
.tablet-info-drop::after {
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.62) 0%,
      rgba(0, 0, 0, 0.4) 58%,
      rgba(0, 0, 0, 0.22) 100%
    ),
    radial-gradient(circle at 86% 50%, rgba(182, 58, 93, 0.17), transparent 36%) !important;
}
.tablet-info-drop:nth-child(2)::after {
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.7) 0%,
      rgba(0, 0, 0, 0.44) 64%,
      rgba(0, 0, 0, 0.2) 100%
    ),
    radial-gradient(
      circle at 15% 50%,
      rgba(240, 164, 190, 0.11),
      transparent 38%
    ) !important;
}
.tablet-info-drop summary {
  min-height: 110px !important;
}
.tablet-info-heading strong {
  font-size: 23px !important;
  letter-spacing: 0.01em !important;
}
.tablet-info-heading small {
  font-size: 29px !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55) !important;
}
.tablet-info-arrow {
  background: rgba(0, 0, 0, 0.58) !important;
  backdrop-filter: blur(3px);
}

/* =========================================================
   v148 — Selected Covers: compact editorial grid
   ========================================================= */
#projects {
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
#projects .project {
  grid-column: span 6;
  padding: 14px !important;
  background:
    linear-gradient(145deg, rgba(var(--pink-rgb), 0.035), transparent 45%), #030303 !important;
}
#projects .project:nth-child(3n + 1) {
  grid-column: span 7;
}
#projects .project:nth-child(3n + 2) {
  grid-column: span 5;
}
#projects .project:nth-child(3n) {
  grid-column: span 6;
}
#projects .project-head {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: start !important;
  gap: 12px !important;
}
#projects .project-head h2 {
  font-size: 19px !important;
  line-height: 1 !important;
}
#projects .project-head .model,
#projects .project-head p {
  margin-top: 4px !important;
}
#projects .gallery {
  gap: 8px !important;
}
#projects .gallery-frame {
  height: 150px !important;
  background: #070707 !important;
}
#projects .project .note {
  margin: 8px 0 0 !important;
  max-width: 90% !important;
  line-height: 1.45 !important;
}
@media (max-width: 1100px) {
  #projects .project,
  #projects .project:nth-child(3n + 1),
  #projects .project:nth-child(3n + 2),
  #projects .project:nth-child(3n) {
    grid-column: span 12 !important;
  }
}

/* =========================================================
   v148 — Tablet header + artwork notice
   ========================================================= */
.covers-hero .hero-flow,
.covers-hero .order-flow,
.tablet-hero .hero-flow,
.tablet-hero .order-flow {
  transform: translateY(12px) !important;
}
.notice-strip {
  box-sizing: border-box !important;
  max-width: 100% !important;
  overflow: hidden !important;
  white-space: normal !important;
  line-height: 1.45 !important;
  padding-right: 16px !important;
}
.notice-strip > * {
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* =========================================================
   v148 — Commission Discord card polish
   ========================================================= */
.discord-commission-card {
  background: var(--surface) !important;
  min-height: 240px !important;
}
.discord-commission-card::before {
  opacity: 0.58 !important;
  filter: saturate(1.05) contrast(1.1) brightness(0.74);
  background:
    linear-gradient(145deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.72)),
    url("../assets/backgrounds/tablet-covers-top-v72.png") 80% 55% / cover
      no-repeat !important;
}
.discord-commission-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(var(--pink-rgb), 0.1), transparent 42%),
    radial-gradient(
      circle at 18% 16%,
      rgba(255, 255, 255, 0.055),
      transparent 22%
    );
}
.discord-commission-card h3 {
  font-size: 22px !important;
  line-height: 1.08 !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.8);
}
.discord-commission-card p {
  color: #f0f0f0 !important;
  font-size: 11.5px !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.78);
}
.discord-ticket-btn {
  background: rgba(3, 3, 3, 0.88) !important;
  backdrop-filter: blur(3px);
}

/* =========================================================
   v148 — ME & OSU stats hover
   ========================================================= */
.osu-intro-v85 .osu-meta {
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease !important;
}
.osu-intro-v85 .osu-meta:hover {
  transform: translateY(-3px) !important;
  border-color: var(--pink) !important;
  background:
    linear-gradient(135deg, rgba(var(--pink-rgb), 0.09), transparent 55%), #070707 !important;
  box-shadow: 0 8px 20px rgba(var(--pink-rgb), 0.08) !important;
}

.cta-cover .cta-muted {
  color: #777 !important;
  font-size: 10px !important;
  margin: 4px 0 0 !important;
}

/* =========================================================
   v148 — Homepage 3-card mouse-angle hover
   ========================================================= */
.home-angle-card {
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 50%;
  transform: perspective(850px) rotateX(var(--rx)) rotateY(var(--ry))
    translateY(0);
  transform-style: preserve-3d;
  transition:
    transform 0.12s ease-out,
    border-color 0.18s ease,
    box-shadow 0.18s ease !important;
  will-change: transform;
  position: relative;
}
.home-angle-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle at var(--mx) var(--my),
    rgba(255, 255, 255, 0.12),
    transparent 36%
  );
  transition: opacity 0.18s ease;
}
.home-angle-card:hover {
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(196, 73, 111, 0.14) !important;
}
.home-angle-card:hover::after {
  opacity: 1;
}

/* v149 exact fixes */
.latest-note {
  border: 2px solid #d45179 !important;
  border-style: solid !important;
  background: rgba(3, 3, 5, 0.94) !important;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.42),
    0 0 18px rgba(196, 72, 108, 0.09) !important;
}
.latest-note .note-body {
  color: var(--white) !important;
  font-weight: 500 !important;
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.055);
}
.latest-note .note-label {
  color: var(--white) !important;
  text-shadow: 0 2px 9px rgba(0, 0, 0, 0.9);
}

#tile-osu,
#tile-stuff,
#tile-music {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --light-x: 50%;
  --light-y: 50%;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))
    translateZ(0) !important;
  transform-origin: center !important;
  transform-style: preserve-3d !important;
  transition:
    transform 0.11s ease-out,
    border-color 0.18s ease,
    box-shadow 0.18s ease !important;
  will-change: transform;
}
#tile-osu::after,
#tile-stuff::after,
#tile-music::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  background: radial-gradient(
    circle at var(--light-x) var(--light-y),
    rgba(255, 255, 255, 0.16),
    rgba(255, 255, 255, 0.035) 22%,
    transparent 47%
  ) !important;
  transition: opacity 0.16s ease !important;
}
#tile-osu:hover,
#tile-stuff:hover,
#tile-music:hover {
  border-color: #d3557b !important;
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.34),
    0 0 18px rgba(var(--pink-rgb), 0.1) !important;
}
#tile-osu:hover::after,
#tile-stuff:hover::after,
#tile-music:hover::after {
  opacity: 1 !important;
}

/* equal tablet info cards + fresh distinct backgrounds */
.tablet-info-accordion {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 18px !important;
}
.tablet-info-drop {
  height: 100% !important;
  min-height: 112px !important;
  background: #050506 !important;
  isolation: isolate !important;
}
.tablet-info-drop::before {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  background-image: none !important;
}
.tablet-info-drop:nth-child(1)::before {
  background:
    radial-gradient(
      circle at 82% 24%,
      rgba(226, 94, 135, 0.17),
      transparent 18%
    ),
    radial-gradient(
      circle at 92% 72%,
      rgba(255, 255, 255, 0.075),
      transparent 15%
    ),
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.025) 0 1px,
      transparent 1px 18px
    ),
    linear-gradient(115deg, #080708 0%, #0b0809 58%, #170a10 100%) !important;
}
.tablet-info-drop:nth-child(2)::before {
  background:
    radial-gradient(
      circle at 12% 76%,
      rgba(214, 71, 112, 0.19),
      transparent 20%
    ),
    radial-gradient(
      circle at 88% 12%,
      rgba(255, 255, 255, 0.055),
      transparent 14%
    ),
    radial-gradient(
        circle at 74% 72%,
        rgba(213, 76, 116, 0.08) 0 2px,
        transparent 2.5px
      )
      0 0/18px 18px,
    linear-gradient(155deg, #080708 0%, #080808 52%, #13080e 100%) !important;
}
.tablet-info-drop::after {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.24), transparent 58%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.3)) !important;
}
.tablet-info-drop summary {
  min-height: 110px !important;
}
.tablet-info-drop[open] {
  height: 100% !important;
}
.tablet-info-heading small {
  font-family: var(--font-authentic-signature) !important;
  font-size: 29px !important;
  color: #ff5f8e !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75) !important;
}

/* clean commission card */
.discord-commission-card {
  background: linear-gradient(
    145deg,
    #090708 0%,
    var(--surface) 58%,
    #0b0809 100%
  ) !important;
  border: 1px solid #713047 !important;
  min-height: 220px !important;
}
.discord-commission-card::before {
  opacity: 1 !important;
  filter: none !important;
  background:
    radial-gradient(
      circle at 88% 18%,
      rgba(213, 76, 116, 0.13),
      transparent 22%
    ),
    radial-gradient(
      circle at 16% 88%,
      rgba(255, 255, 255, 0.035),
      transparent 18%
    ),
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.018) 0 1px,
      transparent 1px 20px
    ) !important;
}
.discord-commission-card::after {
  display: none !important;
}
.discord-commission-card h3 {
  font-size: 21px !important;
  text-shadow: none !important;
}
.discord-commission-card p {
  color: #ddd !important;
  font-size: 11px !important;
  text-shadow: none !important;
}
.discord-ticket-btn {
  background: var(--surface) !important;
  border-color: #c1496d !important;
}
.discord-ticket-btn:hover {
  background: var(--pink) !important;
  color: var(--white) !important;
}

/* exact osu meta hover */
.osu-intro-v85 .osu-meta-grid .osu-meta,
.osu-intro-v85 .osu-gear-strip .osu-gear-card {
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease !important;
}
.osu-intro-v85 .osu-gear-strip .osu-gear-card {
  transform: none !important;
}
.osu-intro-v85 .osu-meta-grid .osu-meta:hover,
.osu-intro-v85 .osu-gear-strip .osu-gear-card:hover,
.osu-intro-v85 .osu-gear-strip .osu-gear-card:focus-visible {
  transform: translateY(-3px) !important;
  border-color: #d05076 !important;
  background:
    linear-gradient(135deg, rgba(var(--pink-rgb), 0.11), transparent 58%), #080808 !important;
  box-shadow: 0 8px 18px rgba(var(--pink-rgb), 0.09) !important;
}

/* selected coverflow */
#projects {
  display: block !important;
  padding: 0 0 34px !important;
  background: var(--black) !important;
}
.selected-coverflow {
  width: 100%;
  min-height: 430px;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 150px;
  gap: 16px;
  align-items: center;
  overflow: hidden;
  border-top: 1px solid #311a23;
  border-bottom: 1px solid #311a23;
  padding: 18px 0;
}
.selected-main {
  min-width: 0;
  border: 1px solid #6d2940;
  background: var(--surface);
  overflow: hidden;
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}
.selected-main:hover {
  transform: translateY(-3px);
  border-color: #cb4e74;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.36);
}
.selected-main-image {
  height: 300px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at center, rgba(var(--pink-rgb), 0.07), transparent 48%),
    #070707;
}
.selected-main-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.selected-shift .selected-main-image img {
  animation: selectedCoverIn 0.34s ease both;
}
@keyframes selectedCoverIn {
  from {
    opacity: 0.35;
    transform: scale(0.985);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.selected-caption {
  min-height: 92px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding: 14px 16px;
  border-top: 1px solid #351923;
}
.selected-copy {
  min-width: 0;
}
.selected-count {
  color: #d65279;
  font-size: 9px;
}
.selected-caption h3 {
  margin: 4px 0 3px;
  font-family: var(--display);
  font-size: 21px;
  color: var(--white);
}
.selected-meta {
  margin: 0;
  color: #e4547e;
  font-size: 11px;
}
.selected-note {
  margin: 6px 0 0;
  color: #aaa;
  font-size: 9.5px;
  line-height: 1.4;
}
.selected-osu-link {
  flex: 0 0 auto;
  border: 1px solid var(--pink);
  padding: 9px 11px;
  color: var(--white);
  text-decoration: none;
  font-size: 10px;
}
.selected-osu-link:hover {
  background: var(--pink);
}
.selected-side {
  position: relative;
  width: 150px;
  height: 245px;
  padding: 0;
  border: 1px solid #3b2029;
  overflow: hidden;
  background: var(--surface);
  cursor: pointer;
  opacity: 0.55;
  transform: scale(0.93);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    border-color 0.18s ease;
}
.selected-side:hover {
  opacity: 0.9;
  transform: scale(0.97);
  border-color: var(--pink);
}
.selected-side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.62) saturate(0.82);
}
.selected-side span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--white);
  font-size: 38px;
  background: rgba(0, 0, 0, 0.18);
  text-shadow: 0 2px 10px var(--black);
}
.cta-cover .cta-muted {
  color: #747474 !important;
  font-family: var(--mono) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  margin: 5px 0 0 !important;
  line-height: 1.2 !important;
}
@media (max-width: 900px) {
  .selected-coverflow {
    grid-template-columns: 72px minmax(0, 1fr) 72px;
  }
  .selected-side {
    width: 72px;
    height: 190px;
  }
  .selected-main-image {
    height: 250px;
  }
}

/* =========================================================
   v151 — Homepage hero wordmark + gentler project cards
   ========================================================= */
#hero-wordmark {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --light-x: 50%;
  --light-y: 50%;
  position: relative;
  transform: perspective(950px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))
    translateZ(0) !important;
  transform-style: preserve-3d;
  transform-origin: center;
  transition:
    transform 0.11s ease-out,
    filter 0.18s ease !important;
  will-change: transform;
}
#hero-wordmark::after {
  content: "";
  position: absolute;
  inset: -3%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle at var(--light-x) var(--light-y),
    rgba(255, 255, 255, 0.14),
    transparent 38%
  );
  transition: opacity 0.16s ease;
}
#hero-wordmark:hover::after {
  opacity: 1;
}

#tile-osu,
#tile-stuff,
#tile-music {
  transition:
    transform 0.11s ease-out,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease !important;
}
#tile-osu:hover,
#tile-stuff:hover,
#tile-music:hover {
  filter: brightness(1.045) saturate(1.03);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(204, 78, 116, 0.16) !important;
}
#tile-osu:hover .image,
#tile-stuff:hover .image,
#tile-music:hover .image {
  transform: scale(1.018);
  transition: transform 0.24s ease;
}

/* =========================================================
   v151 — Tablet info cards: no texture, only corner glow
   ========================================================= */
.tablet-info-drop,
.tablet-info-drop:nth-child(1),
.tablet-info-drop:nth-child(2) {
  background: var(--surface) !important;
}
.tablet-info-drop::before,
.tablet-info-drop:nth-child(1)::before,
.tablet-info-drop:nth-child(2)::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  pointer-events: none !important;
  background:
    radial-gradient(
      circle at 94% 14%,
      rgba(215, 78, 118, 0.18),
      transparent 23%
    ),
    radial-gradient(
      circle at 82% 0%,
      rgba(255, 255, 255, 0.045),
      transparent 14%
    ),
    var(--surface) !important;
}
.tablet-info-drop:nth-child(2)::before {
  background:
    radial-gradient(
      circle at 8% 84%,
      rgba(215, 78, 118, 0.15),
      transparent 24%
    ),
    radial-gradient(
      circle at 18% 100%,
      rgba(255, 255, 255, 0.035),
      transparent 16%
    ),
    var(--surface) !important;
}
.tablet-info-drop::after,
.tablet-info-drop:nth-child(1)::after,
.tablet-info-drop:nth-child(2)::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: none !important;
  box-shadow: none !important;
}
.tablet-info-drop:hover {
  border-color: #b84467 !important;
  box-shadow: 0 0 22px rgba(199, 72, 108, 0.07) !important;
}

/* =========================================================
   v151 — Selected Covers: larger and centered
   ========================================================= */
#projects {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}
.selected-coverflow {
  width: min(100%, 1060px) !important;
  min-height: 540px !important;
  grid-template-columns: 190px minmax(0, 1fr) 190px !important;
  gap: 22px !important;
  margin: 0 auto !important;
  padding: 26px 0 34px !important;
}
.selected-main {
  width: 100% !important;
}
.selected-main-image {
  height: 390px !important;
}
.selected-side {
  width: 190px !important;
  height: 300px !important;
}
.selected-caption {
  min-height: 108px !important;
  padding: 16px 19px !important;
}
.selected-caption h3 {
  font-size: 24px !important;
}
.selected-meta {
  font-size: 12px !important;
}
.selected-note {
  font-size: 10.5px !important;
}

/* =========================================================
   v151 — restore right-rail commissions on Tablet Covers
   ========================================================= */
.tablet-page .inner-right-rail .commissions-panel,
body .inner-right-rail .commissions-panel {
  display: block !important;
}

/* =========================================================
   v151 — Favorite osu! maps: banger certified stands out
   ========================================================= */
.map-showcase-certified {
  font-family: var(--font-authentic-signature) !important;
  font-size: 34px !important;
  line-height: 0.9 !important;
  color: #8e8e8e !important;
  margin: 3px 0 20px !important;
  transform: rotate(-2deg) translateY(-2px) !important;
  opacity: 1 !important;
  letter-spacing: 0.01em !important;
}

/* =========================================================
   v152 — Selected Covers emergency layout fix
   The old #projects/grid rules were still shrinking the coverflow.
   ========================================================= */
.tablet-center .covers-page #projects {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 0 42px !important;
  overflow: visible !important;
}

.tablet-center .covers-page #projects .selected-coverflow {
  width: 100% !important;
  max-width: 1180px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 28px 10px 36px !important;

  display: grid !important;
  grid-template-columns: minmax(135px, 18%) minmax(0, 1fr) minmax(135px, 18%) !important;
  gap: 18px !important;
  align-items: center !important;

  box-sizing: border-box !important;
  overflow: visible !important;
}

.tablet-center .covers-page #projects .selected-main {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  display: block !important;
}

.tablet-center .covers-page #projects .selected-main-image {
  width: 100% !important;
  height: 420px !important;
  min-height: 420px !important;
  max-height: none !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
  background: #070707 !important;
}

.tablet-center .covers-page #projects .selected-main-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

.tablet-center .covers-page #projects .selected-side {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 310px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: center !important;
}

.tablet-center .covers-page #projects .selected-side img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.tablet-center .covers-page #projects .selected-caption {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 16px 18px !important;
}

.tablet-center .covers-page #projects .selected-copy {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.tablet-center .covers-page #projects .selected-caption h3 {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 900px) {
  .tablet-center .covers-page #projects .selected-coverflow {
    grid-template-columns: 70px minmax(0, 1fr) 70px !important;
    gap: 10px !important;
  }
  .tablet-center .covers-page #projects .selected-main-image {
    height: 300px !important;
    min-height: 300px !important;
  }
  .tablet-center .covers-page #projects .selected-side {
    height: 220px !important;
  }
}

/* v153 — tablet header flow text slightly lower */
.covers-hero .hero-flow,
.covers-hero .order-flow,
.tablet-hero .hero-flow,
.tablet-hero .order-flow {
  transform: translateY(18px) !important;
}

/* v153 — artwork disclaimer fits on one line */
.notice-strip {
  font-size: 9px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  padding-right: 8px !important;
}
.notice-strip * {
  white-space: nowrap !important;
  font-size: inherit !important;
}
@media (max-width: 1050px) {
  .notice-strip {
    white-space: normal !important;
    font-size: 8.5px !important;
  }
  .notice-strip * {
    white-space: normal !important;
  }
}

/* v153 — independent accordion sizing */
.tablet-info-accordion {
  align-items: start !important;
}
.tablet-info-drop {
  height: auto !important;
  align-self: start !important;
}
.tablet-info-drop:not([open]) .tablet-info-content {
  display: none !important;
}
.tablet-info-drop[open] .tablet-info-content {
  display: block !important;
}

/* =========================================================
   v154 — Selected Covers click-to-preview
   ========================================================= */
.selected-main-image {
  cursor: zoom-in !important;
  position: relative !important;
}
.selected-main-image::after {
  content: "click to preview ↗";
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  padding: 7px 9px;
  border: 1px solid rgba(210, 75, 114, 0.72);
  background: rgba(0, 0, 0, 0.72);
  color: var(--white);
  font-size: 9px;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
  pointer-events: none;
}
.selected-main-image:hover::after {
  opacity: 1;
  transform: translateY(0);
}

.selected-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 40000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 26px;
  background: rgba(0, 0, 0, 0.86);
  backdrop-filter: blur(6px);
}
.selected-preview-modal.open {
  display: flex;
}
.selected-preview-dialog {
  position: relative;
  width: min(980px, 92vw);
  max-height: 90vh;
  overflow: auto;
  border: 1px solid var(--pink);
  background: var(--surface);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.62);
}
.selected-preview-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  padding: 9px 12px;
  border: 1px solid var(--pink);
  background: rgba(0, 0, 0, 0.82);
  color: var(--white);
  font: 700 11px var(--mono);
  cursor: pointer;
}
.selected-preview-close:hover {
  background: var(--pink);
}
.selected-preview-image-wrap {
  display: grid;
  place-items: center;
  min-height: 520px;
  max-height: 68vh;
  padding: 24px;
  background:
    radial-gradient(circle at center, rgba(var(--pink-rgb), 0.08), transparent 48%),
    #060606;
}
.selected-preview-image-wrap img {
  width: 100%;
  height: 100%;
  max-height: 62vh;
  object-fit: contain;
  display: block;
}
.selected-preview-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 18px 18px;
  border-top: 1px solid #351923;
}
.selected-preview-count {
  color: #d65279;
  font-size: 9px;
}
.selected-count,
.selected-preview-count {
  display: none !important;
}
.selected-preview-caption h3 {
  margin: 4px 0 3px;
  color: var(--white);
  font-family: var(--display);
  font-size: 24px;
}
.selected-preview-caption p {
  margin: 0;
}
#selected-preview-meta {
  color: #e4547e;
  font-size: 11px;
}
#selected-preview-note {
  margin-top: 7px;
  color: #aaa;
  font-size: 10px;
  line-height: 1.45;
}
#selected-preview-osu {
  flex: 0 0 auto;
  border: 1px solid var(--pink);
  padding: 9px 11px;
  color: var(--white);
  text-decoration: none;
  font-size: 10px;
}
#selected-preview-osu:hover {
  background: var(--pink);
}

@media (max-width: 760px) {
  .selected-preview-dialog {
    width: min(96vw, 760px);
  }
  .selected-preview-image-wrap {
    min-height: 300px;
    padding: 14px;
  }
  .selected-preview-caption {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* =========================================================
   v155 — Selected Covers / preview mouse-angle hover
   Same family as homepage cards, slightly restrained.
   ========================================================= */
.selected-main,
.selected-preview-dialog {
  --sel-tilt-x: 0deg;
  --sel-tilt-y: 0deg;
  --sel-light-x: 50%;
  --sel-light-y: 50%;
  position: relative;
  transform: perspective(900px) rotateX(var(--sel-tilt-x))
    rotateY(var(--sel-tilt-y)) translateZ(0) !important;
  transform-style: preserve-3d !important;
  transform-origin: center !important;
  transition:
    transform 0.11s ease-out,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease !important;
  will-change: transform;
}

.selected-main::after,
.selected-preview-dialog::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle at var(--sel-light-x) var(--sel-light-y),
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.025) 24%,
    transparent 46%
  );
  transition: opacity 0.16s ease;
}

.selected-main:hover::after,
.selected-preview-dialog:hover::after {
  opacity: 1;
}

.selected-main:hover {
  border-color: #d3557b !important;
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(204, 78, 116, 0.15),
    0 0 18px rgba(var(--pink-rgb), 0.09) !important;
  filter: brightness(1.035) saturate(1.02);
}

.selected-main:hover .selected-main-image img {
  transform: scale(1.015);
  transition: transform 0.24s ease;
}

.selected-preview-dialog:hover {
  border-color: #d3557b !important;
  box-shadow:
    0 28px 82px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(204, 78, 116, 0.13),
    0 0 20px rgba(var(--pink-rgb), 0.08) !important;
}

.selected-preview-dialog:hover .selected-preview-image-wrap img {
  transform: scale(1.012);
  transition: transform 0.24s ease;
}

/* Keep close button and caption above the light overlay. */
.selected-preview-caption {
  position: relative;
  z-index: 10;
}

/* =========================================================
   v157 — no glow block on homepage VANILLEEU wordmark
   ========================================================= */
#hero-wordmark::after {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}
#hero-wordmark:hover::after {
  opacity: 0 !important;
}
#hero-wordmark {
  filter: none !important;
  box-shadow: none !important;
}

/* =========================================================
   v157 — Selected Covers: pure 3D tilt, no cursor glow
   ========================================================= */
.selected-main::after,
.selected-preview-dialog::after {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}
.selected-main:hover,
.selected-preview-dialog:hover {
  filter: none !important;
  box-shadow: none !important;
}
.selected-main:hover {
  border-color: #9a3956 !important;
}
.selected-preview-dialog:hover {
  border-color: var(--pink) !important;
}

/* =========================================================
   v157 — artwork disclaimer actually fits the column
   ========================================================= */
.notice-strip {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 7px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 9px 0 !important;
  margin: 2px 0 30px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  font-size: 7.25px !important;
  line-height: 1.15 !important;
}
.notice-strip .symbol {
  width: 18px !important;
  min-width: 18px !important;
  font-size: 11px !important;
  line-height: 1 !important;
}
.notice-strip > :not(.symbol) {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
  font-size: inherit !important;
  line-height: inherit !important;
}
.notice-strip strong,
.notice-strip b {
  font-size: inherit !important;
  white-space: nowrap !important;
}

/* =========================================================
   v158 — homepage interaction polish
   ========================================================= */

/* The visible logo stays the same size, but the mouse-reactive plane
   now extends above and below the transparent PNG content. */
#hero-wordmark {
  box-sizing: border-box !important;
  padding-top: 58px !important;
  padding-bottom: 58px !important;
  margin-top: -58px !important;
  margin-bottom: -58px !important;
  transform-origin: center center !important;
}
#hero-wordmark .hero-logo-image {
  position: relative !important;
  z-index: 1 !important;
}

/* Keep the existing mouse-angle animation and add a clean hover lift
   to the three project cards, without reintroducing the ugly glow block. */
#tile-osu,
#tile-stuff,
#tile-music {
  --hover-lift: 0px;
  --hover-scale: 1;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))
    translateY(var(--hover-lift)) scale(var(--hover-scale)) translateZ(0) !important;
  transition:
    transform 0.2s cubic-bezier(0.2, 0.75, 0.2, 1),
    border-color 0.18s ease,
    filter 0.18s ease !important;
}
#tile-osu:hover,
#tile-stuff:hover,
#tile-music:hover {
  --hover-lift: -5px;
  --hover-scale: 1.012;
  filter: brightness(1.045) !important;
  box-shadow: none !important;
}
#tile-osu::after,
#tile-stuff::after,
#tile-music::after {
  content: none !important;
  display: none !important;
}
#tile-osu .image,
#tile-stuff .image,
#tile-music .image {
  transition:
    filter 0.2s ease,
    transform 0.2s cubic-bezier(0.2, 0.75, 0.2, 1) !important;
}
#tile-osu:hover .image,
#tile-stuff:hover .image,
#tile-music:hover .image {
  filter: brightness(1.035) contrast(1.015) !important;
  transform: translateZ(8px) scale(1.006) !important;
}

/* v163 footer socials */
.footer .social img,
.footer-socials .social img {
  width: 22px !important;
  height: 22px !important;
}
.footer .social,
.footer-socials .social {
  width: 34px !important;
  height: 34px !important;
}

/* Current-page navigation uses the established hover treatment. */
.nav-link.active,
.nav-link[aria-current="page"] {
  color: var(--white);
  transform: translateX(5px);
}

/* v105 — shared small-text readability pass (formerly duplicated inline) */
/* =========================================================
   v105 — site-wide small-text readability pass
   Keep the visual hierarchy, stop making humans squint.
   ========================================================= */

/* GLOBAL / HOME / SHARED SHELL */
.visitor,
.note-head,
.np-song,
.np-artist,
.np-controls,
.covers-all,
.cover-caption,
label,
.char-count,
.outline-btn,
.discord-sub,
.discord-stats,
.voice-label,
.cover-lightbox-caption {
  font-size: var(--readability-small) !important;
  line-height: 1.4 !important;
}

.char-count,
.discord-sub,
.voice-label {
  font-size: 12.5px !important;
}

.panel p {
  font-size: var(--readability-body) !important;
}

.gb-sub {
  font-size: var(--readability-body) !important;
}

/* TABLET COVERS */
.notice-strip {
  font-size: var(--readability-small) !important;
  line-height: 1.5 !important;
}

.mini-link,
.osu-link {
  font-size: var(--readability-small) !important;
}

.fact-row {
  font-size: var(--readability-meta) !important;
}

.meta {
  font-size: var(--readability-body) !important;
}

.pricing-table {
  font-size: var(--readability-meta) !important;
}

/* ABOUT */
.coca-trigger,
.coca-story figcaption {
  font-size: var(--readability-small) !important;
  line-height: 1.5 !important;
}

/* OSU — intro / peripherals / metadata */
.osu-hero .since {
  font-size: var(--readability-small) !important;
}

.story-pill b,
.archive-card p,
.link-btn,
.skin-card p,
.feature-card p,
.event-card p,
.tools-copy p,
.oreo-copy p,
.collab-card p,
.cta-cover p,
.cake-trigger {
  font-size: var(--readability-meta) !important;
}

.osu-gear-card figcaption span {
  font-size: var(--readability-small) !important;
}

.osu-gear-card figcaption strong {
  font-size: var(--readability-body) !important;
}

.osu-gear-card figcaption small {
  font-size: var(--readability-meta) !important;
  line-height: 1.45 !important;
}

.osu-intro-v85 .osu-meta span,
.osu-meta span {
  font-size: 12.5px !important;
}

.osu-intro-v85 .osu-meta b,
.osu-meta b {
  font-size: var(--readability-meta) !important;
  line-height: 1.4 !important;
}

/* FAVORITE MAPS PLAYER */
.map-showcase-count {
  font-size: 12.5px !important;
}

.map-showcase-artist {
  font-size: var(--readability-body) !important;
}

.map-showcase-meta span {
  font-size: 12.5px !important;
}

.map-showcase-meta strong {
  font-size: var(--readability-body) !important;
}

.map-showcase-nav,
.map-showcase-open,
.map-showcase-all {
  font-size: var(--readability-small) !important;
}

.map-preview-time {
  font-size: 12.5px !important;
}

.map-volume {
  font-size: var(--readability-xs) !important;
}

.map-volume b {
  font-size: 12.5px !important;
}

/* OSU TOOLS */
.osu-tools-channel {
  font-size: 12.5px !important;
}

.osu-tool-post-head {
  font-size: 12.5px !important;
}

.osu-tool-type {
  font-size: var(--readability-xs) !important;
}

.osu-tool-post > p {
  font-size: var(--readability-meta) !important;
  line-height: 1.5 !important;
}

.osu-tool-foot {
  font-size: 12.5px !important;
  line-height: 1.35 !important;
}

.osu-tool-foot span:last-child {
  font-size: var(--readability-small) !important;
}

.tool-modal-author {
  font-size: var(--readability-small) !important;
}

.tool-modal-close {
  font-size: var(--readability-small) !important;
}

.tool-modal-body {
  font-size: var(--readability-body) !important;
}

/* FAVORITE MAPS ARCHIVE */
.favorite-archive-back {
  font-size: var(--readability-small) !important;
}

.favorite-archive-copy span {
  font-size: 12.5px !important;
}

.favorite-archive-index {
  font-size: var(--readability-xs) !important;
}

.favorite-archive-meta {
  font-size: 12.5px !important;
  line-height: 1.35 !important;
}

.favorite-archive-meta em {
  font-size: 12.5px !important;
}

/* Make thin mono copy a touch easier on the eyes without making it bold. */
.visitor,
.note-head,
.np-song,
.np-artist,
.np-controls,
.covers-all,
label,
.char-count,
.discord-sub,
.discord-stats,
.voice-label,
.notice-strip,
.mini-link,
.osu-link,
.fact-row,
.coca-trigger,
.coca-story figcaption,
.osu-hero .since,
.archive-card p,
.link-btn,
.skin-card p,
.feature-card p,
.event-card p,
.tools-copy p,
.oreo-copy p,
.collab-card p,
.cta-cover p,
.cake-trigger,
.osu-gear-card figcaption,
.osu-meta,
.map-showcase-count,
.map-showcase-meta,
.map-showcase-open,
.map-showcase-all,
.map-preview-time,
.map-volume,
.osu-tools-channel,
.osu-tool-post-head,
.osu-tool-post > p,
.osu-tool-foot,
.tool-modal-author,
.tool-modal-close,
.tool-modal-body,
.favorite-archive-back,
.favorite-archive-copy span,
.favorite-archive-index,
.favorite-archive-meta {
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

/* Fast exit: audio keeps playing during this brief visual settle and the
   next document begins restoring it immediately from its head script. */
html.v128-leave main,
html.v128-leave .center,
html.v128-leave .osu-center,
html.v128-leave .about-center,
html.v128-leave .tablet-center,
html.v128-leave .favorite-archive-main,
html.v128-leave .stub {
  opacity: 0.86;
  transform: translateY(2px);
  transition:
    opacity 85ms ease-out,
    transform 85ms ease-out !important;
}

html.v128-leave .left-rail,
html.v128-leave .right-rail,
html.v128-leave .footer {
  opacity: 0.94;
  transition: opacity 85ms ease-out !important;
}

/* One cross-browser range geometry for the homepage and floating widgets.
   The thumb centre aligns with the real 0%/100% track endpoints. */
#global-favorite-player .gfp-volume {
  --volume-percent: 10%;
  appearance: none !important;
  -webkit-appearance: none !important;
  display: block !important;
  width: calc(100% - 12px) !important;
  height: 18px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0;
  cursor: pointer;
  background: linear-gradient(
      to right,
      #d85b82 0 var(--volume-percent),
      rgba(255, 255, 255, 0.55) var(--volume-percent) 100%
    )
    center / calc(100% - 14px) 4px no-repeat !important;
}

#global-favorite-player .gfp-volume::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#global-favorite-player .gfp-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 0;
  border-radius: 50%;
  background: #d85b82;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28);
}

#global-favorite-player .gfp-volume::-moz-range-track {
  width: 100%;
  height: 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#global-favorite-player .gfp-volume::-moz-range-progress {
  height: 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#global-favorite-player .gfp-volume::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: #d85b82;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28);
}

/* This final accessibility guard must win over later historical animation rules. */
/* v164 — targeted interaction/readability fixes */
a.brand-small {
  display: block;
  color: inherit;
  text-decoration: none;
}
a.brand-small:focus-visible {
  outline: 1px dashed var(--pink2);
  outline-offset: 5px;
}

.osu-intro-v85 .osu-gear-strip .osu-gear-card:hover,
.osu-intro-v85 .osu-gear-strip .osu-gear-card:focus-visible {
  box-shadow:
    0 8px 20px rgba(var(--pink-rgb), 0.16),
    0 0 18px rgba(208, 80, 118, 0.16) !important;
}
.osu-intro-v85 .osu-meta span,
.osu-meta span {
  font-size: 14px !important;
}
.osu-intro-v85 .osu-meta b,
.osu-meta b {
  font-size: 15px !important;
  line-height: 1.4 !important;
}
.osu-gear-card figcaption span {
  font-size: 14px !important;
}
.osu-profile-heading {
  display: block;
  width: max-content;
  max-width: 100%;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.osu-profile-heading:focus-visible {
  outline: 1px dashed var(--pink2);
  outline-offset: 4px;
}

.cover-lightbox-image,
.osu-gear-lightbox-dialog > img {
  transform: translate3d(var(--preview-img-x, 0), var(--preview-img-y, 0), 14px)
    scale(1) !important;
  transition:
    filter 0.22s ease,
    transform 0.12s linear !important;
  will-change: transform;
}
.cover-qv-media:hover .cover-lightbox-image,
.osu-gear-lightbox-dialog:hover > img {
  transform: translate3d(var(--preview-img-x, 0), var(--preview-img-y, 0), 14px)
    scale(1.006) !important;
}

.latest-note .note-body {
  font-size: 14px !important;
  line-height: 1.65 !important;
}
.latest-note .note-date {
  font-family: var(--mono) !important;
  font-size: 12.5px !important;
  font-style: normal !important;
  letter-spacing: 0.02em !important;
}
.latest-note .note-label {
  font-size: 17px !important;
}

@keyframes gfpHomeBeatV138 {
  0%,
  100% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.022);
  }
  24% {
    transform: scale(1.008);
  }
}
@keyframes gfpHomeLightBeatV138 {
  0%,
  100% {
    filter: brightness(0.48) saturate(1);
    transform: scale(1.025);
  }
  10% {
    filter: brightness(0.71) saturate(1.11);
    transform: scale(1.039);
  }
  24% {
    filter: brightness(0.55) saturate(1.04);
    transform: scale(1.03);
  }
}
@keyframes gfpBeatV139 {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  10% {
    transform: translateY(-1px) scale(1.018);
  }
  26% {
    transform: translateY(0) scale(1.006);
  }
}
@keyframes gfpLightBeatV139 {
  0%,
  100% {
    filter: brightness(0.46) saturate(1);
    transform: scale(1.025);
  }
  10% {
    filter: brightness(0.66) saturate(1.085);
    transform: scale(1.041);
  }
  26% {
    filter: brightness(0.52) saturate(1.025);
    transform: scale(1.031);
  }
}

/* Homepage Tablet Covers heading: black label with the established pink ink. */
.covers-section .covers-pill-link,
.covers-section .covers-pill-link:hover,
.covers-section .covers-pill-link:active {
  background: var(--surface) !important;
  color: var(--pink2) !important;
  border: 1px solid var(--pink2) !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   Final Tablet Cover silhouette + restored v8 hover behavior
   ========================================================= */

/* Outer cards keep the original movement, glow and shadow. Their contents are
   clipped to the hardware-like silhouette without suppressing the transform. */
#covers-track .cover-card,
#tablet-page-covers-track .cover-card {
  border-radius: var(--tablet-cover-radius) !important;
  overflow: hidden !important;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease !important;
}
#covers-track .cover-image,
#tablet-page-covers-track .cover-image {
  border-radius: calc(var(--tablet-cover-radius) - 1px)
    calc(var(--tablet-cover-radius) - 1px) 0 0 !important;
  overflow: hidden !important;
  transition:
    transform 0.28s ease,
    filter 0.28s ease !important;
  transform-origin: center !important;
}
#covers-track .cover-card:hover,
#tablet-page-covers-track .cover-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 24px rgba(var(--pink-rgb), 0.14) !important;
}
#covers-track .cover-card:hover .cover-image,
#tablet-page-covers-track .cover-card:hover .cover-image {
  transform: scale(1.025) !important;
  filter: brightness(1.04) saturate(1.03) !important;
}

/* Selected-cover tilt remains owned by its existing JavaScript variables. */
.selected-main,
.selected-main-image,
.selected-main-image img,
.selected-side,
.selected-side img {
  border-radius: var(--tablet-cover-radius) !important;
}
.selected-main,
.selected-main-image,
.selected-side {
  overflow: hidden !important;
}

/* Both preview systems clip the real rendered media and their visible frame. */
.cover-lightbox-panel,
.cover-lightbox-image,
.selected-preview-dialog,
.selected-preview-image-wrap,
.selected-preview-image-wrap img {
  border-radius: var(--tablet-cover-radius) !important;
}
.cover-lightbox-panel,
.selected-preview-image-wrap {
  overflow: hidden !important;
}
.selected-preview-dialog {
  overflow: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  #covers-track .cover-card,
  #tablet-page-covers-track .cover-card,
  #covers-track .cover-image,
  #tablet-page-covers-track .cover-image {
    transition: none !important;
  }
}

/* =========================================================
   Viewport-aware shell width and homepage fold
   ========================================================= */
#site-stage,
#site-stage.inner-page-stage {
  width: var(--shell-stage-width, 1920px) !important;
  min-width: var(--shell-stage-width, 1920px) !important;
  max-width: var(--shell-stage-width, 1920px) !important;
  grid-template-columns: 250px 1280px minmax(390px, 1fr) !important;
}
#site-stage > .right-rail,
#site-stage > .right-rail.inner-right-rail {
  scrollbar-gutter: auto !important;
}
#site-stage.wide-shell > .right-rail,
#site-stage.wide-shell > .right-rail.inner-right-rail {
  width: auto !important;
  min-width: 390px !important;
  max-width: none !important;
}
#site-stage.wide-shell > .right-rail .rail-context {
  width: 334px;
  max-width: 334px;
}

/* One close-button/frame treatment for every Tablet Cover preview. */
.cover-quickview,
.selected-preview-dialog {
  position: relative !important;
  border: 1px solid var(--pink2) !important;
  border-radius: var(--tablet-cover-radius) !important;
  background: var(--surface) !important;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.68) !important;
}
.cover-lightbox,
.selected-preview-modal {
  padding: clamp(12px, 2.4vw, 30px) !important;
  box-sizing: border-box !important;
}
.cover-lightbox-close,
.selected-preview-close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  left: auto !important;
  z-index: 100 !important;
  width: auto !important;
  min-width: 82px !important;
  height: 42px !important;
  min-height: 42px !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  padding: 0 13px !important;
  border: 1px solid var(--pink2) !important;
  background: rgba(5, 5, 6, 0.92) !important;
  color: var(--white) !important;
  font: 700 12px/1 var(--mono) !important;
  cursor: pointer !important;
  transform: none !important;
  transition:
    background-color 0.16s ease,
    color 0.16s ease,
    border-color 0.16s ease !important;
}
.cover-lightbox-close:hover,
.selected-preview-close:hover,
.cover-lightbox-close:focus-visible,
.selected-preview-close:focus-visible {
  background: var(--pink2) !important;
  color: var(--surface) !important;
  border-color: #ff83aa !important;
  outline: 2px solid var(--white) !important;
  outline-offset: 2px !important;
}
@media (max-width: 760px) {
  .cover-lightbox-close,
  .selected-preview-close {
    top: 10px !important;
    right: 10px !important;
    min-width: 76px !important;
    height: 40px !important;
  }
}

/* The hero absorbs viewport-height differences while cards keep their exact
   geometry. Tablet Covers starts just below the true first-screen boundary. */
#site-stage:not(.inner-page-stage) > .center {
  overflow: hidden !important;
}
#site-stage:not(.inner-page-stage) > .center > .hero {
  height: max(570px, calc(var(--home-fold-height, 1180px) - 330px)) !important;
}
#site-stage:not(.inner-page-stage) > .center > .covers-section {
  margin-top: 104px !important;
}

/* =========================================================
   Shared right-rail panel silhouette
   ========================================================= */
#site-stage > .right-rail > .panel,
#site-stage > .right-rail > .guestbook-panel,
#site-stage > .inner-right-rail > .panel,
#site-stage > .inner-right-rail > .guestbook-panel {
  border-radius: var(--right-panel-radius) !important;
  background-clip: padding-box;
}

/* The persistent player has image and shade layers that reach its edges, so
   it is the shared panel treatment that genuinely needs clipping. */
#global-favorite-player {
  border-radius: var(--right-panel-radius) !important;
  overflow: hidden !important;
}

/* Shared audio-time beat phase. These values reproduce the established v139
   pulse without letting separate CSS animation timelines drift apart. */
#global-favorite-player.playing {
  animation: none !important;
  transform: translateY(var(--vanille-beat-lift, 0px))
    scale(var(--vanille-beat-scale, 1)) !important;
  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.48),
    0 0 var(--vanille-beat-glow, 0px)
      rgba(208, 72, 112, var(--vanille-beat-glow-alpha, 0)) !important;
}
#global-favorite-player.playing .gfp-bg,
#global-favorite-player.playing:hover .gfp-bg {
  animation: none !important;
  transform: scale(var(--vanille-beat-bg-scale, 1.025)) !important;
  filter: brightness(var(--vanille-beat-brightness, 0.46))
    saturate(var(--vanille-beat-saturation, 1)) !important;
}
@media (prefers-reduced-motion: reduce) {
  #global-favorite-player.playing,
  #global-favorite-player.playing .gfp-bg {
    transform: none !important;
    animation: none !important;
  }
}

/* =========================================================
   Consistent shell width across pages
   ---------------------------------------------------------
   The homepage stage is taller than the viewport, so it scrolls; the inner
   pages size #viewport to window.innerHeight exactly, so they do not. A
   vertical scrollbar shrinks documentElement.clientWidth, and every stage
   derives its scale from that width (scale = clientWidth / 1920). The result
   was a rail that rendered a couple of pixels narrower on the homepage than
   everywhere else.

   Reserving the gutter on every page makes clientWidth - and therefore the
   scale, and therefore the 250px rail - identical across the whole site.
   Older Safari ignores this and simply keeps the previous behaviour.
   ========================================================= */
html {
  scrollbar-gutter: stable;
}

/* =========================================================
   Internal-page shell geometry — declared ONCE, here
   ---------------------------------------------------------
   page-shell.js writes the stage height and grid rows as an inline style, so
   after a client-side swap the geometry only exists once that script has
   re-executed on the brand new #site-stage. osu and tablet covers also carried
   these rules in their own <style> block, so they had a CSS floor to land on;
   About and Community Wall carried nothing, and the left rail was left to the
   base 1180px row from the top of this file until the script caught up.

   The right rail already had its height pinned globally (see v89). The left
   rail never did. It does now, for every internal page, with the same values
   the script computes - so the CSS and the inline style always agree.
   ========================================================= */
#site-stage.inner-page-stage {
  height: var(--inner-stage-height, 1280px);
  grid-template-rows: var(--inner-content-height, 1180px) 100px;
}
#site-stage.inner-page-stage > .left-rail {
  height: var(--inner-content-height, 1180px);
  overflow: hidden;
}

/* =========================================================
   v165 — floating mini-player: always there, ghosted until hovered

   Scoped to the floating widget on inner pages. The homepage embeds the same
   element with .home inside its hero, where it is a feature at full strength —
   hence :not(.home) on every rule here. favorite-player.js sets that class in
   the same synchronous pass that mounts the widget, so there is no frame where
   the homepage copy could be caught by these rules.

   Three inherited declarations are overridden, and they are the reason the
   opacity used to move only on a click:

     v124 (L2563) display:none until JS adds .active
     v132 (L3146) visibility:hidden + pointer-events:none while paused

   .active is only added while music plays, so on an inner page the widget was
   absent from the layout at rest — and an element that is not laid out, or
   that takes no pointer events, can never be hovered. Clicking play was the
   only thing that could change how it looked.
   ========================================================= */
#global-favorite-player:not(.home) {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 0.32 !important;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease !important;
}

/* Hover, and nothing else. No focus-based rule here on purpose: the widget
   holds a range input for the volume, and a range input matches :focus-visible
   on a plain mouse click in Chrome — which is exactly the "it stays lit after
   I click it" behaviour this is meant to avoid. */
#global-favorite-player:not(.home):hover {
  opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
  #global-favorite-player:not(.home) {
    transition: none !important;
  }
}

/* v168 — 2K/4K: the stage scales up (scale = width/1920, set by the stage
   scalers), and the fixed overlays OUTSIDE it follow the same factor via
   zoom. --ui-scale is 1 at <=1920, so this is a no-op there. Fixed elements
   inside #site-stage already scale with it - do not add them here. */
.cover-lightbox,
.selected-preview-modal,
#piece-dialog,
#global-favorite-player:not(.home) {
  zoom: var(--ui-scale, 1);
}

/* v166 — mini-player parked off the right edge (15% strip visible), slides
   back in on hover or keyboard focus. Uses `translate`, NOT `transform`:
   the root's transform is claimed six times with !important (hover lifts +
   the BPM pulse whose custom props favorite-player.js rewrites every frame). */
#global-favorite-player {
  /* 85% of the card + its 24px inset, so the strip sits flush with the edge
     (45px of 300px = 15%). */
  --gfp-collapse-shift: calc(85% + 24px);
  translate: var(--gfp-collapse-shift) 0;
}

/* :has(:focus-visible), not :focus-within — a mouse click on ▶ would pin the
   card open. Tab focus still pulls the parked controls back on screen. */
#global-favorite-player:hover,
#global-favorite-player:has(:focus-visible) {
  --gfp-collapse-shift: 0px;
}

/* Transition lists restated in full: the upstream owners use !important. */
#global-favorite-player:not(.home) {
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    translate 0.3s cubic-bezier(0.2, 0.72, 0.2, 1) !important;
}

#global-favorite-player.home {
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    translate 0.3s cubic-bezier(0.2, 0.72, 0.2, 1) !important;
}

/* Forgiving exit: parking waits 300ms (delay on the translate entry only),
   so grazing a few px past the edge and coming back never collapses the
   card. Reveal stays instant. overflow:hidden on the root forbids a real
   hit-area rim, hence time tolerance instead of pixels. */
#global-favorite-player:not(.home) {
  transition-delay: 0s, 0s, 0s, 0s, 0.3s !important;
}
#global-favorite-player.home {
  transition-delay: 0s, 0s, 0s, 0.3s !important;
}
#global-favorite-player:hover,
#global-favorite-player:has(:focus-visible) {
  transition-delay: 0s !important;
}

@media (prefers-reduced-motion: reduce) {
  #global-favorite-player,
  #global-favorite-player.home,
  #global-favorite-player:not(.home) {
    transition: none !important;
  }
}

/* v167 — shared page-title treatment, extracted from the community-wall
   header: display face + tight tracking, handwritten sub, pink rule wiping
   in on hover. No font-size/margins here — pages keep their own geometry.
   Hover-only, so nothing needs restarting after a ClientRouter swap.
   Still duplicated in guestbook.css (.wall-header h1 / .wall-signature)
   until guestbook.astro adopts these classes — change both places. */
.page-title {
  --page-title-rule-offset: -7px;
  --page-title-rule-height: 2px;
  --page-title-rule-color: var(--pink2);
  --page-title-tracking: -0.045em;
  --page-title-tracking-hover: -0.035em;
  /* the wall title's own shadow pink, kept literal so both titles match */
  --page-title-shadow-hover: 3px 3px 0 rgba(208, 80, 118, 0.65);

  position: relative;
  /* shrink to the text so the rule underlines the words, not the column */
  width: max-content;
  max-width: 100%;
  font-family: var(--display);
  transition: letter-spacing 0.18s ease, text-shadow 0.18s ease;
}

/* Doubled class (0,2,0): outranks each page's `.x-hero h1` letter-spacing
   in one place instead of four per-page overrides. */
.page-title.page-title {
  letter-spacing: var(--page-title-tracking);
}

.page-title.page-title:hover {
  letter-spacing: var(--page-title-tracking-hover);
}

.page-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: var(--page-title-rule-offset);
  width: 100%;
  height: var(--page-title-rule-height);
  background: var(--page-title-rule-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.page-title:hover {
  text-shadow: var(--page-title-shadow-hover);
}

.page-title:hover::after {
  transform: scaleX(1);
}

/* Handwritten sub: face, colour, tilt — the page owns size and spacing. */
.page-title-sub {
  --page-title-sub-tilt: -2deg;
  --page-title-sub-origin: left;
  color: var(--pink2);
  font-family: var(--font-authentic-signature);
  font-weight: 400;
  transform: rotate(var(--page-title-sub-tilt));
  transform-origin: var(--page-title-sub-origin);
}

/* about: drop the rule clear of the stroked last line and keep its dark
   offset shadow under the hover pink. */
#who-title.page-title {
  --page-title-rule-offset: -20px;
  --page-title-shadow-hover: 4px 4px 0 #171717, 9px 9px 0 rgba(208, 80, 118, 0.55);
}

/* tablet covers: the scribble is pinned to the hero's right edge — a left-
   origin tilt would swing it into the carousel. No tilt. */
.page-hero .scribble.page-title-sub {
  --page-title-sub-tilt: 0deg;
}

/* homepage wordmark (an image, so only the wipe transfers). ::before, not
   ::after - a v-layer kills #hero-wordmark::after with !important (L4911). */
.hero-wordmark::before {
  content: "";
  position: absolute;
  left: 0;
  /* the box has 58px vertical padding (hover hitbox): 58 - 7 = 7px under the logo */
  bottom: 51px;
  width: 100%;
  height: 2px;
  background: var(--pink2);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.hero-wordmark:hover::before {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .page-title,
  .page-title::after,
  .hero-wordmark::before {
    transition: none !important;
  }

  .page-title.page-title:hover {
    letter-spacing: var(--page-title-tracking);
  }

  .page-title:hover {
    text-shadow: none;
  }

  /* the rule still answers hover, it just arrives instead of wiping in */
  .page-title:hover::after {
    transform: scaleX(1);
  }
}