html { scroll-behavior: smooth; }
body { margin: 0; }
#stream, #archive, #contact { scroll-margin-top: 1rem; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--c-accent, #FF9E00); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* Geometry Dash levels table refinements */
.gd-level-table {
  table-layout: auto;
}

.gd-level-table thead th {
  white-space: nowrap;
}

.gd-level-table tbody td {
  vertical-align: middle;
}

.gd-level-table .author-link {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gd-level-table .author-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 900px) {
  .gd-level-table {
    min-width: 900px;
  }
}

/* Showcase layouts: grid + compact (expanded is the original look) */
.syx-music-toggle {
  display: inline-flex;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.syx-music-toggle button {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.5);
  padding: 0.6rem 1rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s;
}

.syx-music-toggle button + button {
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.syx-music-toggle button:hover {
  color: #fff;
}

.syx-music-toggle button.active {
  background: var(--c-accent, #FF9E00);
  color: var(--c-background, #0A0A0B);
}

.syx-music-list {
  padding: 0 1.5rem;
}

@media (min-width: 768px) {
  .syx-music-list {
    padding: 0 3rem;
  }
}

.syx-music-item {
  display: block;
  color: inherit;
  text-decoration: none;
}

.syx-music-cover {
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--c-surface, #1A1A1C);
}

.syx-music-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: transform 0.6s ease, opacity 0.3s ease;
}

.syx-music-info {
  display: block;
  min-width: 0;
}

.syx-music-title {
  display: block;
  color: #fff;
  font-family: var(--font-heading, inherit);
  font-weight: 700;
  transition: color 0.2s;
}

.syx-music-artist {
  display: block;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.875rem;
}

.syx-music-meta {
  display: block;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Grid layout */
.syx-music-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (min-width: 768px) {
  .syx-music-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

.syx-music-grid .syx-music-info {
  margin-top: 0.75rem;
}

.syx-music-grid .syx-music-title {
  font-size: 1.05rem;
}

.syx-music-grid .syx-music-artist {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.syx-music-grid .syx-music-meta {
  margin-top: 0.35rem;
}

.syx-music-grid a.syx-music-item:hover .syx-music-cover img {
  transform: scale(1.05);
  opacity: 1;
}

/* Compact layout */
.syx-music-compact {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.syx-music-compact .syx-music-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 0.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: background-color 0.2s;
}

.syx-music-compact a.syx-music-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.syx-music-compact a.syx-music-item:hover .syx-music-title {
  color: var(--c-accent, #FF9E00);
}

.syx-music-compact .syx-music-cover {
  width: 48px;
  height: 48px;
}

.syx-music-compact .syx-music-title,
.syx-music-compact .syx-music-artist {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.syx-music-compact .syx-music-meta {
  text-align: right;
  white-space: nowrap;
}


/* ==========================================================
   Spacing rhythm
   One set of gaps used everywhere, instead of the stacked
   py-24 / md:py-32 + mb-12 + mt-20 / md:mt-32 utilities.
   Change these three values to loosen or tighten the whole page.
   (IDs are used so these win over the utility classes in styles.css.)
   ========================================================== */
:root {
  --space-section: clamp(3rem, 7vw, 5rem);    /* top/bottom padding of each section */
  --space-head: clamp(1.5rem, 3.5vw, 2.5rem); /* section title -> its controls/content */
  --space-tools: 1rem;                        /* controls row -> list/table */
}

/* Hero: use the real visible height on phones, and keep the centered text clear of the top/bottom bars */
#root section:first-of-type {
  min-height: 100vh;
  min-height: 100svh;
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}

/* Music + Geometry Dash sections */
/* Sections only pad at the top, so the gap between two sections is one value, not two stacked. */
#stream,
#archive {
  padding-top: var(--space-section);
  padding-bottom: 0;
}

#stream > div:first-child,
#archive > div:first-child {
  margin-bottom: var(--space-head);
}

#stream > div:nth-child(2),
#archive > div:nth-child(2) {
  margin-bottom: var(--space-tools);
}

/* The archive had its own hard-coded solid background while the music section was transparent, which
   showed up as a tinted band between them (and ignored the Theme Editor's background colour).
   Letting it be transparent like the rest of the page removes that seam. */
#archive {
  background-color: transparent;
}

/* Footer */
#contact {
  padding-top: var(--space-section);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

#contact > div:nth-child(2) > div:last-child {
  margin-top: clamp(2rem, 4vw, 3rem);
}

#contact > div:last-child {
  margin-top: clamp(2.5rem, 6vw, 4rem);
}


/* ==========================================================
   Sections: archived + custom (managed from the admin "Sections" tab)
   ========================================================== */
.syx-archived {
  display: none !important;
}

/* Archiving Contact hides the call-to-action but keeps the copyright bar at the bottom */
#contact.syx-archived {
  display: block !important;
  padding-top: 0;
}

#contact.syx-archived > :not(:last-child) {
  display: none;
}

.syx-custom-section {
  padding-top: var(--space-section);
  padding-bottom: 0;
  scroll-margin-top: 1rem;
}

.syx-custom-body {
  max-width: 42rem;
  margin-top: 1.25rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1rem;
  line-height: 1.7;
}

@media (min-width: 768px) {
  .syx-custom-body {
    font-size: 1.125rem;
  }
}

.syx-custom-body p {
  margin: 0 0 1rem;
  white-space: pre-line;
}

.syx-custom-body p:last-child {
  margin-bottom: 0;
}

.syx-custom-button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
  padding: 1rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.3s, border-color 0.3s, background-color 0.3s;
}

.syx-custom-button:hover {
  color: #fff;
  border-color: var(--c-accent, #FF9E00);
  background: rgb(var(--c-accent-rgb, 255 158 0) / 0.05);
}


/* Fonts: styles.css hard-codes .font-heading and .font-mono-tech, so the theme's font settings never
   reached the big titles or the small labels. These use the optional "Titles & labels" fonts from the
   Theme Editor, and fall back to the base heading / mono fonts when those are left on Default. */
.font-heading {
  font-family: var(--font-title, var(--font-heading, "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif));
}

.font-mono-tech {
  font-family: var(--font-label, var(--font-mono, "JetBrains Mono", ui-monospace, monospace));
}


/* ==========================================================
   Showcase layout switch (expanded / grid / compact)
   The list fades out, the new layout is built, its height eases from the old
   height to the new one, and the items rise in with a tiny stagger.
   Total time is well under half a second.
   ========================================================== */
#syx-showcase-public-list {
  transition: opacity 0.11s ease, transform 0.11s ease;
}

#syx-showcase-public-list[data-switch="out"] {
  opacity: 0;
  transform: translateY(4px);
}

#syx-showcase-public-list[data-switch="in"] {
  transition: height 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}

#syx-showcase-public-list[data-switch="in"] > * {
  animation: syx-item-in 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 14ms);
}

@keyframes syx-item-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* The three layout buttons: smooth colour + a quick press feel */
.syx-music-toggle button {
  transition: color 0.18s ease, background-color 0.18s ease, transform 0.12s ease;
}

.syx-music-toggle button:active {
  transform: scale(0.96);
}


/* ==========================================================
   Geometry Dash "open level" popup
   ========================================================== */
.syx-level-btn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.syx-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.16s ease;
}

.syx-modal.is-open {
  opacity: 1;
}

.syx-modal-card {
  position: relative;
  width: min(26rem, 100%);
  background: var(--c-surface, #1A1A1C);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 1.5rem;
  transform: translateY(10px) scale(0.98);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.syx-modal.is-open .syx-modal-card {
  transform: none;
}

.syx-modal-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 2.25rem;
  height: 2.25rem;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.4);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s;
}

.syx-modal-close:hover { color: #fff; }

.syx-modal-eyebrow {
  font-family: var(--font-label, var(--font-mono, ui-monospace, monospace));
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-secondary, #00F5FF);
}

.syx-modal-title {
  margin: 0.35rem 2rem 0 0;
  font-family: var(--font-title, var(--font-heading, inherit));
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.15;
  color: #fff;
  overflow-wrap: anywhere;
}

.syx-modal-sub {
  margin-top: 0.35rem;
  font-family: var(--font-label, var(--font-mono, ui-monospace, monospace));
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
}

.syx-modal-options {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.syx-modal-option {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.2s, background-color 0.2s, transform 0.12s;
}

.syx-modal-option:hover {
  border-color: var(--c-accent, #FF9E00);
  background: rgb(var(--c-accent-rgb, 255 158 0) / 0.07);
}

.syx-modal-option:active { transform: scale(0.99); }

.syx-modal-option-text { display: block; min-width: 0; flex: 1; }

.syx-modal-option-name {
  display: block;
  font-weight: 700;
}

.syx-modal-option-hint {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
}

.syx-modal-option svg {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  color: rgba(255, 255, 255, 0.4);
}

.syx-modal-option:hover svg { color: var(--c-accent, #FF9E00); }

@media (prefers-reduced-motion: reduce) {
  .syx-modal, .syx-modal-card { transition: none; }
}


/* ==========================================================
   Chromatic mode (page-wide moving gradient)
   The Theme Editor only sets the --cm-* variables (in /theme.css). When chromatic mode is
   off, --cm-aurora and --cm-sweep are not defined, so both layers stay display:none.
   The layers sit on top of the solid background colour and underneath the grid, the vignette
   and all content, so buttons, cards and text keep their normal solid colours.
   Both layers only animate `transform`, so they run on the GPU.
   ========================================================== */
.syx-cm,
#root .fixed.inset-0.z-0.pointer-events-none > div:first-child {
  overflow: hidden;
}

.syx-cm::before,
.syx-cm::after,
#root .fixed.inset-0.z-0.pointer-events-none > div:first-child::before,
#root .fixed.inset-0.z-0.pointer-events-none > div:first-child::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: var(--cm-alpha, 0.45);
  will-change: transform;
}

/* Aurora: soft colour glows that slowly orbit and breathe */
.syx-cm::before,
#root .fixed.inset-0.z-0.pointer-events-none > div:first-child::before {
  display: var(--cm-aurora, none);
  width: calc(150vmax * var(--cm-scale, 1));
  height: calc(150vmax * var(--cm-scale, 1));
  left: 50%;
  top: 50%;
  background:
    radial-gradient(circle at 22% 28%, var(--cm-c1, #FF9E00) 0, transparent 38%),
    radial-gradient(circle at 78% 22%, var(--cm-c2, #00F5FF) 0, transparent 38%),
    radial-gradient(circle at 72% 78%, var(--cm-c3, #8B5CF6) 0, transparent 40%),
    radial-gradient(circle at 24% 80%, var(--cm-c4, #EC4899) 0, transparent 38%);
  transform: translate(-50%, -50%) rotate(0deg);
  animation: syx-cm-orbit calc(var(--cm-dur, 28s) * 2) linear infinite;
}

@keyframes syx-cm-orbit {
  0%   { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  50%  { transform: translate(-50%, -50%) rotate(180deg) scale(1.12); }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}

/* Sweep: flowing bands of colour at a chosen angle */
.syx-cm::after,
#root .fixed.inset-0.z-0.pointer-events-none > div:first-child::after {
  display: var(--cm-sweep, none);
  --cm-p: calc(100vmax * var(--cm-scale, 1));
  width: calc(var(--cm-p) * 3);
  height: 150vmax;
  left: calc(50% - 75vmax);
  top: calc(50% - 75vmax);
  transform-origin: 75vmax 75vmax;
  background: linear-gradient(90deg, var(--cm-c1, #FF9E00), var(--cm-c2, #00F5FF), var(--cm-c3, #8B5CF6), var(--cm-c4, #EC4899), var(--cm-c1, #FF9E00));
  background-size: var(--cm-p) 100%;
  background-repeat: repeat-x;
  transform: rotate(var(--cm-angle, 135deg)) translateX(0);
  animation: syx-cm-sweep var(--cm-dur, 28s) linear infinite;
}

@keyframes syx-cm-sweep {
  from { transform: rotate(var(--cm-angle, 135deg)) translateX(0); }
  to   { transform: rotate(var(--cm-angle, 135deg)) translateX(calc(var(--cm-p) * -1)); }
}

@media (prefers-reduced-motion: reduce) {
  .syx-cm::before, .syx-cm::after,
  #root .fixed.inset-0.z-0.pointer-events-none > div:first-child::before,
  #root .fixed.inset-0.z-0.pointer-events-none > div:first-child::after {
    animation: none !important;
  }
}


/* ==========================================================
   Chromatic text
   When "Tint text" is on, /theme.css defines --cm-t100 ... --cm-t20 (the flowing gradient colour at
   the chosen text brightness, at different opacities). Each rule falls back to the original
   white when those variables are missing, so nothing changes with chromatic text off.
   :where() keeps the specificity low so hover colours (accent on hover etc.) still win.
   ========================================================== */
@property --cm-text {
  syntax: "<color>";
  inherits: true;
  initial-value: #ffffff;
}

@keyframes syx-cm-text {
  0%, 100% { --cm-text: var(--cm-c1); }
  25%      { --cm-text: var(--cm-c2); }
  50%      { --cm-text: var(--cm-c3); }
  75%      { --cm-text: var(--cm-c4); }
}

:root {
  animation: var(--cm-text-anim);
}

:where(#root) .text-white       { color: var(--cm-t100, rgb(255 255 255 / var(--tw-text-opacity, 1))); }
:where(#root) .text-white\/60   { color: var(--cm-t60, rgba(255, 255, 255, 0.72)); }
:where(#root) .text-white\/50   { color: var(--cm-t50, rgba(255, 255, 255, 0.66)); }
:where(#root) .text-white\/40   { color: var(--cm-t40, rgba(255, 255, 255, 0.6)); }
:where(#root) .text-white\/30   { color: var(--cm-t30, rgba(255, 255, 255, 0.55)); }
:where(#root) .text-white\/20   { color: var(--cm-t20, rgba(255, 255, 255, 0.5)); }

:where(#root) .syx-music-title  { color: var(--cm-t100, #fff); }
:where(#root) .syx-music-artist { color: var(--cm-t50, rgba(255, 255, 255, 0.66)); }
:where(#root) .syx-music-meta   { color: var(--cm-t30, rgba(255, 255, 255, 0.6)); }
:where(#root) .syx-custom-body  { color: var(--cm-t60, rgba(255, 255, 255, 0.72)); }

@media (prefers-reduced-motion: reduce) {
  :root { animation: none !important; }
}



/* ==========================================================
   Spotlight page links ("Details"), search button, footer tools, motion switch
   ========================================================== */
.syx-page-link {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.6rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: rgba(10, 10, 11, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(4px);
  transition: color 0.2s, border-color 0.2s;
}

.syx-page-link:hover,
.syx-page-link:focus-visible {
  color: var(--c-accent, #FF9E00);
  border-color: var(--c-accent, #FF9E00);
}

.syx-page-link-low { top: auto; bottom: 1rem; right: 1rem; }
@media (min-width: 768px) { .syx-page-link-low { bottom: 1.5rem; right: 1.5rem; } }

/* Music cards: the card links out, the Details link is its sibling */
.syx-music-wrap { position: relative; }
.syx-music-compact .syx-page-link { top: 50%; right: 0.25rem; transform: translateY(-50%); }
.syx-music-compact .syx-music-wrap .syx-music-item { padding-right: 5.25rem; }

/* Title link inside the big music cards (the whole card also opens it when clicked) */
.syx-stretched { color: inherit; text-decoration: none; }
.syx-stretched:hover { color: var(--c-accent, #FF9E00); }

/* Footer: last updated + motion switch */
.syx-footer-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 2rem;
  margin-top: 4rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
}
.syx-footer-tools p { margin: 0; }
.syx-motion-toggle {
  padding: 0.4rem 0.8rem;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.syx-motion-toggle:hover:not(:disabled) { color: var(--c-accent, #FF9E00); border-color: var(--c-accent, #FF9E00); }
.syx-motion-toggle[aria-pressed="true"] { border-color: rgb(var(--c-accent-rgb, 255 158 0) / 0.7); }
.syx-motion-toggle:disabled { cursor: default; opacity: 0.85; }

/* The on-page "reduced motion" switch does the same as the device setting above */
html[data-motion="reduced"] { scroll-behavior: auto; }
html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}
html[data-motion="reduced"] .syx-cm::before,
html[data-motion="reduced"] .syx-cm::after,
html[data-motion="reduced"] #root .fixed.inset-0.z-0.pointer-events-none > div:first-child::before,
html[data-motion="reduced"] #root .fixed.inset-0.z-0.pointer-events-none > div:first-child::after {
  animation: none !important;
}