From 201831345f34bbf0d1eb270e1b9f32bc1ef4f86a Mon Sep 17 00:00:00 2001
From: Clove Twilight <admin@doughmination.win>
Date: Mon, 15 Jun 2026 02:42:22 +0100
Subject: [PATCH] fix css

---
 css/main.css | 478 ++++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 377 insertions(+), 101 deletions(-)

diff --git a/css/main.css b/css/main.css
index 6bef540..84862b1 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1752,11 +1752,11 @@ summary.section-title::after {
   transition: transform 0.2s ease;
 }
 
-details.waka-section[open] > summary.section-title {
+details.waka-section[open]>summary.section-title {
   margin-bottom: 1rem;
 }
 
-details.waka-section[open] > summary.section-title::after {
+details.waka-section[open]>summary.section-title::after {
   transform: rotate(-135deg);
 }
 
@@ -2310,6 +2310,7 @@ body:has(.music-wrap) {
   min-height: 100dvh;
   overflow-y: auto;
 }
+
 body:has(.music-wrap) {
   align-items: flex-start;
 }
@@ -2321,7 +2322,10 @@ body:has(.music-wrap) {
   font-family: 'Comic Code', ui-monospace, monospace;
 }
 
-.music-head { margin: 0 0 1.6rem; }
+.music-head {
+  margin: 0 0 1.6rem;
+}
+
 .music-head h1 {
   font-size: clamp(1.7rem, 5vw, 2.4rem);
   margin: 0 0 0.2rem;
@@ -2329,7 +2333,12 @@ body:has(.music-wrap) {
   letter-spacing: -0.02em;
   transition: color 0.5s ease;
 }
-.music-head p { margin: 0; color: var(--subtext-0); font-size: 0.95rem; }
+
+.music-head p {
+  margin: 0;
+  color: var(--subtext-0);
+  font-size: 0.95rem;
+}
 
 /* ---- now playing hero -------------------------------------------------- */
 .mnp {
@@ -2344,101 +2353,213 @@ body:has(.music-wrap) {
   position: relative;
   overflow: hidden;
 }
+
 /* a soft wash of the album accent behind the hero */
 .mnp::before {
   content: "";
-  position: absolute; inset: 0;
+  position: absolute;
+  inset: 0;
   background: radial-gradient(120% 140% at 0% 0%,
-    rgba(var(--accent-rgb), 0.18), transparent 60%);
-  opacity: 0; transition: opacity 0.6s ease;
+      rgba(var(--accent-rgb), 0.18), transparent 60%);
+  opacity: 0;
+  transition: opacity 0.6s ease;
   pointer-events: none;
 }
-#music.is-live .mnp::before { opacity: 1; }
+
+#music.is-live .mnp::before {
+  opacity: 1;
+}
 
 .mnp-art {
-  width: 132px; height: 132px;
+  width: 132px;
+  height: 132px;
   border-radius: 12px;
   object-fit: cover;
   background: var(--surface-0);
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
 }
-.mnp-art:not(.has-art) { display: grid; }
+
+.mnp-art:not(.has-art) {
+  display: grid;
+}
+
 .mnp-art:not(.has-art)::after {
-  content: "♪"; color: var(--overlay-0); font-size: 2.4rem;
-  display: grid; place-items: center; height: 100%;
+  content: "♪";
+  color: var(--overlay-0);
+  font-size: 2.4rem;
+  display: grid;
+  place-items: center;
+  height: 100%;
 }
-.mnp-meta { min-width: 0; position: relative; }
+
+.mnp-meta {
+  min-width: 0;
+  position: relative;
+}
+
 .mnp-state {
-  display: inline-flex; align-items: center; gap: 0.4rem;
-  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
-  color: var(--subtext-0); margin-bottom: 0.35rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--subtext-0);
+  margin-bottom: 0.35rem;
 }
-#music.is-live .mnp-state { color: rgb(var(--accent-rgb)); }
+
+#music.is-live .mnp-state {
+  color: rgb(var(--accent-rgb));
+}
+
 #music.is-live .mnp-state::before {
-  content: ""; width: 7px; height: 7px; border-radius: 50%;
+  content: "";
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
   background: rgb(var(--accent-rgb));
   box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.6);
   animation: np-pulse 2s infinite;
 }
-@keyframes np-pulse {
-  0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.5); }
-  70% { box-shadow: 0 0 0 7px rgba(var(--accent-rgb), 0); }
-  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
-}
-.mnp-title {
-  display: block; font-size: 1.3rem; font-weight: 700; color: var(--text);
-  margin: 0 0 0.15rem; line-height: 1.2;
-  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-}
-.mnp-title:hover { color: rgb(var(--accent-rgb)); }
-.mnp-artist { display: block; color: var(--subtext-1); font-size: 0.95rem; }
-.mnp-album { display: block; color: var(--subtext-0); font-size: 0.82rem; margin-top: 0.1rem; }
 
-.mnp-progress { margin-top: 0.8rem; display: flex; align-items: center; gap: 0.6rem; }
+@keyframes np-pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.5);
+  }
+
+  70% {
+    box-shadow: 0 0 0 7px rgba(var(--accent-rgb), 0);
+  }
+
+  100% {
+    box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0);
+  }
+}
+
+.mnp-title {
+  display: block;
+  font-size: 1.3rem;
+  font-weight: 700;
+  color: var(--text);
+  margin: 0 0 0.15rem;
+  line-height: 1.2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mnp-title:hover {
+  color: rgb(var(--accent-rgb));
+}
+
+.mnp-artist {
+  display: block;
+  color: var(--subtext-1);
+  font-size: 0.95rem;
+}
+
+.mnp-album {
+  display: block;
+  color: var(--subtext-0);
+  font-size: 0.82rem;
+  margin-top: 0.1rem;
+}
+
+.mnp-progress {
+  margin-top: 0.8rem;
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+}
+
 .mnp-bar {
-  flex: 1; height: 6px; border-radius: 999px;
-  background: var(--surface-0); overflow: hidden;
+  flex: 1;
+  height: 6px;
+  border-radius: 999px;
+  background: var(--surface-0);
+  overflow: hidden;
 }
+
 .mnp-fill {
-  height: 100%; width: 0%;
+  display: block;
+  height: 100%;
+  width: 0%;
   background: rgb(var(--accent-rgb));
-  border-radius: 999px; transition: width 0.4s linear;
+  border-radius: 999px;
+  transition: width 0.4s linear;
+}
+
+.mnp-time {
+  font-size: 0.72rem;
+  color: var(--subtext-0);
+  font-variant-numeric: tabular-nums;
 }
-.mnp-time { font-size: 0.72rem; color: var(--subtext-0); font-variant-numeric: tabular-nums; }
 
 /* ---- lyrics (the centrepiece) ------------------------------------------ */
 .sec-title {
-  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em;
-  color: var(--subtext-0); margin: 2.4rem 0 0.7rem; font-weight: 500;
+  font-size: 0.78rem;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: var(--subtext-0);
+  margin: 2.4rem 0 0.7rem;
+  font-weight: 500;
 }
+
 .sec-row {
-  display: flex; align-items: baseline; justify-content: space-between;
-  gap: 0.8rem; margin: 2.4rem 0 0.7rem;
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.8rem;
+  margin: 2.4rem 0 0.7rem;
 }
-.sec-row .sec-title { margin: 0; }
+
+.sec-row .sec-title {
+  margin: 0;
+}
+
 .ly-lock {
-  font-family: inherit; font-size: 0.72rem; letter-spacing: 0.04em;
-  cursor: pointer; border-radius: 999px;
+  font-family: inherit;
+  font-size: 0.72rem;
+  letter-spacing: 0.04em;
+  cursor: pointer;
+  border-radius: 999px;
   padding: 0.28rem 0.8rem 0.28rem 0.7rem;
-  background: var(--surface-0); color: var(--subtext-1);
+  background: var(--surface-0);
+  color: var(--subtext-1);
   border: 1px solid transparent;
-  display: inline-flex; align-items: center; gap: 0.4rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
   transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
 }
+
 .ly-lock::before {
-  content: ""; width: 7px; height: 7px; border-radius: 50%;
-  background: currentColor; opacity: 0.6;
+  content: "";
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: currentColor;
+  opacity: 0.6;
 }
+
 .ly-lock.is-locked {
   color: rgb(var(--accent-rgb));
   border-color: rgba(var(--accent-rgb), 0.4);
   background: rgba(var(--accent-rgb), 0.1);
 }
-.ly-lock.is-locked::before { opacity: 1; }
-.ly-lock:not(.is-locked):hover { color: var(--text); border-color: var(--surface-1); }
+
+.ly-lock.is-locked::before {
+  opacity: 1;
+}
+
+.ly-lock:not(.is-locked):hover {
+  color: var(--text);
+  border-color: var(--surface-1);
+}
 
 .lyrics {
-  position: relative;          /* anchor offsetTop for the follow scroll */
+  position: relative;
+  /* anchor offsetTop for the follow scroll */
   height: 340px;
   overflow-y: auto;
   scroll-behavior: smooth;
@@ -2453,94 +2574,248 @@ body:has(.music-wrap) {
   -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
   mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
 }
-.lyrics::-webkit-scrollbar { width: 8px; }
-.lyrics::-webkit-scrollbar-thumb { background: var(--surface-1); border-radius: 999px; }
+
+.lyrics::-webkit-scrollbar {
+  width: 8px;
+}
+
+.lyrics::-webkit-scrollbar-thumb {
+  background: var(--surface-1);
+  border-radius: 999px;
+}
 
 .ly-line {
-  margin: 0; padding: 0.32rem 0;
-  font-size: 1.18rem; line-height: 1.4;
+  margin: 0;
+  padding: 0.32rem 0;
+  font-size: 1.18rem;
+  line-height: 1.4;
   color: var(--overlay-0);
   transition: color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
 }
-.is-synced .ly-line { opacity: 0.55; }
+
+.is-synced .ly-line {
+  opacity: 0.55;
+}
+
 .is-synced .ly-line.is-active {
   color: rgb(var(--accent-rgb));
   opacity: 1;
   font-weight: 700;
   transform: translateX(2px);
 }
-.ly-static { color: var(--subtext-1); opacity: 1; font-size: 1.05rem; }
+
+.ly-static {
+  color: var(--subtext-1);
+  opacity: 1;
+  font-size: 1.05rem;
+}
+
 .ly-note {
-  color: var(--subtext-0); font-size: 0.95rem; text-align: center;
-  margin: 0; padding-top: 1rem;
+  color: var(--subtext-0);
+  font-size: 0.95rem;
+  text-align: center;
+  margin: 0;
+  padding-top: 1rem;
 }
-.lyrics.is-instrumental, .lyrics.is-empty, .lyrics.is-loading {
-  display: grid; place-content: center; height: 180px;
-  -webkit-mask-image: none; mask-image: none;
+
+.lyrics.is-instrumental,
+.lyrics.is-empty,
+.lyrics.is-loading {
+  display: grid;
+  place-content: center;
+  height: 180px;
+  -webkit-mask-image: none;
+  mask-image: none;
+}
+
+.lyrics.is-instrumental .ly-note {
+  color: rgb(var(--accent-rgb));
+  font-size: 1.2rem;
 }
-.lyrics.is-instrumental .ly-note { color: rgb(var(--accent-rgb)); font-size: 1.2rem; }
 
 /* ---- recently played --------------------------------------------------- */
-.recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
+.recent {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 0.35rem;
+}
+
 .rc-item a {
-  display: grid; grid-template-columns: 44px 1fr auto; gap: 0.7rem;
-  align-items: center; text-decoration: none;
-  padding: 0.45rem 0.55rem; border-radius: 12px;
+  display: grid;
+  grid-template-columns: 44px 1fr auto;
+  gap: 0.7rem;
+  align-items: center;
+  text-decoration: none;
+  padding: 0.45rem 0.55rem;
+  border-radius: 12px;
   transition: background 0.15s ease;
 }
-.rc-item a:hover { background: var(--surface-0); }
+
+.rc-item a:hover {
+  background: var(--surface-0);
+}
+
 .rc-art {
-  width: 44px; height: 44px; border-radius: 8px;
-  object-fit: cover; background: var(--surface-0);
+  width: 44px;
+  height: 44px;
+  border-radius: 8px;
+  object-fit: cover;
+  background: var(--surface-0);
 }
-.rc-art-blank { display: grid; place-items: center; color: var(--overlay-0); font-size: 1.1rem; }
-.rc-text { min-width: 0; }
+
+.rc-art-blank {
+  display: grid;
+  place-items: center;
+  color: var(--overlay-0);
+  font-size: 1.1rem;
+}
+
+.rc-text {
+  min-width: 0;
+}
+
 .rc-name {
-  display: block; color: var(--text); font-size: 0.92rem;
-  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  display: block;
+  color: var(--text);
+  font-size: 0.92rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
+
 .rc-artist {
-  display: block; color: var(--subtext-0); font-size: 0.78rem;
-  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  display: block;
+  color: var(--subtext-0);
+  font-size: 0.78rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-.rc-when, .rc-now { font-size: 0.72rem; white-space: nowrap; }
-.rc-when { color: var(--subtext-0); }
-.rc-now { color: rgb(var(--accent-rgb)); font-weight: 700; }
-.is-now { background: rgba(var(--accent-rgb), 0.08); border-radius: 12px; }
-.rc-note { color: var(--subtext-0); font-size: 0.86rem; padding: 0.6rem 0.4rem; line-height: 1.5; }
+
+.rc-when,
+.rc-now {
+  font-size: 0.72rem;
+  white-space: nowrap;
+}
+
+.rc-when {
+  color: var(--subtext-0);
+}
+
+.rc-now {
+  color: rgb(var(--accent-rgb));
+  font-weight: 700;
+}
+
+.is-now {
+  background: rgba(var(--accent-rgb), 0.08);
+  border-radius: 12px;
+}
+
+.rc-note {
+  color: var(--subtext-0);
+  font-size: 0.86rem;
+  padding: 0.6rem 0.4rem;
+  line-height: 1.5;
+}
+
 .rc-note code {
-  background: var(--surface-0); color: var(--text);
-  padding: 0.1rem 0.35rem; border-radius: 6px; font-size: 0.9em;
+  background: var(--surface-0);
+  color: var(--text);
+  padding: 0.1rem 0.35rem;
+  border-radius: 6px;
+  font-size: 0.9em;
 }
 
 /* ---- top artists ------------------------------------------------------- */
-.top-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
+.top-chips {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
 .top-chip a {
-  display: inline-flex; align-items: baseline; gap: 0.45rem;
-  background: var(--mantle); border: 1px solid var(--surface-0);
-  border-radius: 999px; padding: 0.35rem 0.8rem; text-decoration: none;
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.45rem;
+  background: var(--mantle);
+  border: 1px solid var(--surface-0);
+  border-radius: 999px;
+  padding: 0.35rem 0.8rem;
+  text-decoration: none;
   transition: border-color 0.15s ease;
 }
-.top-chip a:hover { border-color: rgb(var(--accent-rgb)); }
-.top-rank { color: rgb(var(--accent-rgb)); font-weight: 700; font-size: 0.78rem; }
-.top-name { color: var(--text); font-size: 0.85rem; }
-.top-plays { color: var(--subtext-0); font-size: 0.72rem; }
 
-.music-back { display: inline-block; margin-top: 2.6rem; font-size: 0.85rem; color: rgb(var(--accent-rgb)); }
+.top-chip a:hover {
+  border-color: rgb(var(--accent-rgb));
+}
+
+.top-rank {
+  color: rgb(var(--accent-rgb));
+  font-weight: 700;
+  font-size: 0.78rem;
+}
+
+.top-name {
+  color: var(--text);
+  font-size: 0.85rem;
+}
+
+.top-plays {
+  color: var(--subtext-0);
+  font-size: 0.72rem;
+}
+
+.music-back {
+  display: inline-block;
+  margin-top: 2.6rem;
+  font-size: 0.85rem;
+  color: rgb(var(--accent-rgb));
+}
 
 /* ---- responsive -------------------------------------------------------- */
 @media (max-width: 560px) {
-  .mnp { grid-template-columns: 96px 1fr; gap: 0.85rem; padding: 0.9rem; }
-  .mnp-art { width: 96px; height: 96px; }
-  .mnp-title { font-size: 1.1rem; }
-  .lyrics { height: 300px; }
-  .ly-line { font-size: 1.05rem; }
+  .mnp {
+    grid-template-columns: 96px 1fr;
+    gap: 0.85rem;
+    padding: 0.9rem;
+  }
+
+  .mnp-art {
+    width: 96px;
+    height: 96px;
+  }
+
+  .mnp-title {
+    font-size: 1.1rem;
+  }
+
+  .lyrics {
+    height: 300px;
+  }
+
+  .ly-line {
+    font-size: 1.05rem;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .mnp-fill { transition: none; }
-  #music.is-live .mnp-state::before { animation: none; }
-  .ly-line { transition: color 0.15s ease; }
+  .mnp-fill {
+    transition: none;
+  }
+
+  #music.is-live .mnp-state::before {
+    animation: none;
+  }
+
+  .ly-line {
+    transition: color 0.15s ease;
+  }
 }
 
 /* ============================================================
@@ -2549,7 +2824,8 @@ body:has(.music-wrap) {
    ============================================================ */
 #visitor-counter {
   position: fixed;
-  top: 4rem;        /* clears the ~48px beta-bar + gap */
+  top: 4rem;
+  /* clears the ~48px beta-bar + gap */
   right: 1rem;
   z-index: 6;
   display: flex;