/* =====================================================================
   shrine.css — all styles for bjorkslefteyelash
   ===================================================================== */
:root {
  --baby-blue:   #b6e6ff;
  --frost:       #d8f0ff;
  --ice:         #f0f8ff;
  --hot-pink:    #ff3eb5;
  --bubblegum:   #ffb3e6;
  --lavender:    #cdb8ff;
  --acid:        #d4ff3a;
  --tangerine:   #ff8a3a;
  --vermillion:  #ff2a1a;
  --discord:     #5865f2;
  --statsfm:     #1ed760;
  --ink:         #1a1538;
  --ink-soft:    #5b4e87;
  --rule:        #6f5fb5;
  --gold:        #f5c34a;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: "Times New Roman", Times, serif;
  font-size: 14px; line-height: 1.5; color: var(--ink);
  background-color: #d6bdf0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='%23ffffff' fill-opacity='.55'><polygon points='10,4 12,8 16,8.5 13,11 14,15 10,13 6,15 7,11 4,8.5 8,8'/><polygon points='62,22 63,25 66,25 63.5,27 64.5,30 62,28 59.5,30 60.5,27 58,25 61,25'/><polygon points='30,52 31,55 34,55 31.5,57 32.5,60 30,58.4 27.5,60 28.5,57 26,55 29,55'/><polygon points='70,66 71,68 73.5,68.5 71.5,70 72,72.5 70,71 68,72.5 68.5,70 66.5,68.5 69,68'/></g><g fill='%23fff7a8'><circle cx='20' cy='40' r='1.2'/><circle cx='52' cy='10' r='1'/><circle cx='44' cy='66' r='1'/><circle cx='8' cy='70' r='1'/></g></svg>"),
    linear-gradient(180deg, #b6e6ff 0%, #cdb8ff 40%, #ffb3e6 80%, #b6e6ff 100%);
  background-attachment: fixed, fixed;
  background-repeat: repeat, no-repeat;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><polygon points='12,1 14,9 22,11 14,13 12,21 10,13 2,11 10,9' fill='%23ff3eb5' stroke='%23ffffff' stroke-width='1.2'/></svg>") 12 12, auto;
  min-height: 100vh; text-align: center;
}

a { color: #1a1abf; text-decoration: underline; }
a:visited { color: #6a1abf; }
a:hover { color: var(--hot-pink); background: yellow; }

.dim { font-style: italic; color: var(--ink-soft); }

/* ===== TOP MARQUEE ===== */
.toprail {
  background: linear-gradient(90deg, var(--hot-pink), var(--acid), var(--baby-blue), var(--hot-pink));
  background-size: 200% 100%; animation: railshift 8s linear infinite;
  color: #fff; font-family: "Comic Sans MS", "Comic Neue", "Chalkboard SE", cursive;
  font-weight: bold; text-shadow: 1px 1px 0 #1a1538, -1px -1px 0 #1a1538;
  padding: 6px 0; font-size: 14px; border-bottom: 3px ridge #fff;
}
@keyframes railshift { from { background-position: 0% 0; } to { background-position: 200% 0; } }

/* ===== HEADER ===== */
.shrine-header { margin: 22px auto 12px; max-width: 980px; padding: 0 14px; position: relative; }
.title-block { display: inline-block; text-align: center; position: relative; padding: 8px 32px; }
.title-block::before, .title-block::after {
  content: "✿"; position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 36px; color: var(--hot-pink); text-shadow: 0 0 8px #fff; animation: spin 6s linear infinite;
}
.title-block::before { left: -4px; }
.title-block::after  { right: -4px; animation-direction: reverse; }
@keyframes spin { to { transform: translateY(-50%) rotate(360deg); } }
.suptitle { font-family: "Comic Sans MS", "Comic Neue", cursive; font-style: italic; color: #fff; text-shadow: 1px 1px 0 var(--hot-pink), 2px 2px 0 var(--ink); font-size: 14px; letter-spacing: .12em; margin-bottom: 4px; }
h1.title {
  font-family: "Comic Sans MS", "Comic Neue", "Chalkboard SE", cursive;
  margin: 0; font-weight: 900; font-style: italic; font-size: clamp(40px, 7vw, 68px); line-height: 1.05; letter-spacing: -.01em;
  background: linear-gradient(90deg, #ff2a8b, #ffb01a, #d4ff3a, #1aeaff, #b86bff, #ff2a8b); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 1.5px #fff; color: transparent;
  text-shadow: 3px 3px 0 rgba(26, 21, 56, .35); animation: titleshift 6s ease-in-out infinite;
}
@keyframes titleshift { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
.subtitle { font-family: "Comic Sans MS", "Comic Neue", cursive; font-size: 15px; color: var(--ink); margin-top: 8px; }
.subtitle .heart { color: var(--hot-pink); font-size: 18px; vertical-align: -2px; }

/* ===== NAV TABS ===== */
.navtabs {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 2px;
  width: min(1080px, 96vw); margin: 0 auto; padding: 0 6px;
  border-bottom: 3px ridge var(--rule);
}
.navtab {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "Comic Sans MS", "Comic Neue", cursive; font-style: italic; font-size: 15px;
  text-decoration: none; color: var(--ink);
  padding: 7px 16px 6px; margin-bottom: -3px;
  background: linear-gradient(180deg, #fff, var(--frost));
  border: 3px ridge var(--lavender); border-bottom: 0;
  border-radius: 8px 8px 0 0;
  position: relative; top: 3px;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><polygon points='12,1 14,9 22,11 14,13 12,21 10,13 2,11 10,9' fill='%23ff3eb5' stroke='%23ffffff' stroke-width='1.2'/></svg>") 12 12, pointer;
}
.navtab:hover { background: linear-gradient(180deg, var(--acid), #fff); color: var(--ink); }
.navtab .nt-glyph { font-size: 16px; color: var(--hot-pink); }
.navtab.is-active {
  background: linear-gradient(180deg, var(--hot-pink), var(--bubblegum));
  color: #fff; text-shadow: 1px 1px 0 var(--ink);
  border-style: groove; border-color: var(--hot-pink); top: 0;
  box-shadow: 0 -3px 6px rgba(255,62,181,.3);
}
.navtab.is-active .nt-glyph { color: #fff; }
.navtab.is-active::after { content: "✦"; margin-left: 2px; font-size: 12px; color: #fff; }
.nav-gifs.is-active   { background: linear-gradient(180deg, var(--baby-blue), #e2f4ff); color: var(--ink); text-shadow: 1px 1px 0 #fff; border-color: var(--baby-blue); }
.nav-shrine.is-active { background: linear-gradient(180deg, var(--lavender), #ece3ff); color: var(--ink); text-shadow: 1px 1px 0 #fff; border-color: var(--lavender); }
.nav-search.is-active { background: linear-gradient(180deg, var(--acid), #f9ffb6); color: var(--ink); text-shadow: 1px 1px 0 #fff; border-color: var(--acid); }
.nav-search.is-active .nt-glyph, .nav-gifs.is-active .nt-glyph, .nav-shrine.is-active .nt-glyph { color: var(--hot-pink); }
.nav-msg.is-active    { background: linear-gradient(180deg, var(--discord), #8b94f5); color: #fff; text-shadow: 1px 1px 0 var(--ink); border-color: var(--discord); }

/* ===== PAGES ===== */
.page { display: none; width: min(1080px, 96vw); margin: 18px auto 28px; text-align: left; }
.page.is-active { display: block; animation: pagein .25s ease-out; }
@keyframes pagein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ===== PANELS ===== */
.panel {
  background: var(--ice); border: 3px ridge var(--lavender); padding: 12px 14px 14px;
  box-shadow: 4px 4px 0 rgba(26, 21, 56, .25); position: relative; margin-bottom: 14px;
}
.panel h2 {
  font-family: "Comic Sans MS", "Comic Neue", cursive; font-weight: 700; font-style: italic; font-size: 18px;
  margin: -12px -14px 10px; padding: 7px 12px;
  background: repeating-linear-gradient(135deg, var(--hot-pink) 0 12px, var(--bubblegum) 12px 24px);
  color: #fff; text-shadow: 1px 1px 0 var(--ink); border-bottom: 3px ridge var(--lavender);
}
.panel h2 .star { display: inline-block; transform: translateY(-1px); margin-right: 4px; }
.panel.flavor-blue h2 { background: repeating-linear-gradient(135deg, var(--baby-blue) 0 12px, #e2f4ff 12px 24px); color: var(--ink); text-shadow: 1px 1px 0 #fff; }
.panel.flavor-acid h2 { background: repeating-linear-gradient(135deg, var(--acid) 0 12px, #f9ffb6 12px 24px); color: var(--ink); text-shadow: 1px 1px 0 #fff; }
.panel.flavor-tang h2 { background: repeating-linear-gradient(135deg, var(--tangerine) 0 12px, #ffd8b3 12px 24px); color: #fff; text-shadow: 1px 1px 0 var(--ink); }
.panel.flavor-lav  h2 { background: repeating-linear-gradient(135deg, var(--lavender) 0 12px, #ece3ff 12px 24px); color: var(--ink); text-shadow: 1px 1px 0 #fff; }
.panel.flavor-vermillion h2 { background: repeating-linear-gradient(135deg, var(--vermillion) 0 12px, #ff7a6e 12px 24px); color: #fff; text-shadow: 1px 1px 0 var(--ink); }
.panel.flavor-discord    h2 { background: repeating-linear-gradient(135deg, var(--discord) 0 12px, #8b94f5 12px 24px); color: #fff; text-shadow: 1px 1px 0 var(--ink); }
.panel.flavor-gold       h2 { background: repeating-linear-gradient(135deg, var(--gold) 0 12px, #f9e1a1 12px 24px); color: var(--ink); text-shadow: 1px 1px 0 #fff; }
.panel p, .panel li { font-family: "Times New Roman", Times, serif; font-size: 13.5px; color: var(--ink); line-height: 1.5; }
.panel p { margin: 0 0 8px; }

.stat { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; border-bottom: 1px dotted var(--rule); font-size: 12.5px; }
.stat:last-child { border-bottom: 0; }
.stat .k { font-family: "Comic Sans MS", "Comic Neue", cursive; color: var(--ink-soft); }
.stat .v { font-weight: bold; color: var(--ink); }
.stat .v.lit { color: var(--hot-pink); }
.stat .v.blink { animation: blink 1.4s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }

.visitor { display: inline-block; padding: 4px 10px; background: #000; color: var(--acid); font-family: "VT323", "Courier New", monospace; font-size: 22px; letter-spacing: 4px; border: 2px inset #ccc; margin-top: 4px; }

.live-foot { text-align: center; font-style: italic; color: var(--ink-soft); font-size: 12px; }

/* ===== SHRINE COLUMNS ===== */
.shrine-cols { display: grid; grid-template-columns: 1fr 270px; gap: 14px; align-items: start; }
.shrine-side .panel:last-child { margin-bottom: 0; }

/* ===== WELCOME ===== */
.welcome { background: linear-gradient(180deg, #fff 0%, var(--frost) 100%); border: 4px double var(--hot-pink); padding: 18px; position: relative; margin-bottom: 14px; }
.welcome h2 { font-family: "Comic Sans MS", "Comic Neue", cursive; font-style: italic; margin: 0 0 8px; font-size: 22px; color: var(--hot-pink); text-shadow: 1px 1px 0 #fff; }
.welcome p { margin: 0 0 10px; font-size: 14px; line-height: 1.6; }
.welcome p em { font-style: italic; background: yellow; padding: 0 2px; }
.welcome p strong { color: var(--hot-pink); }
.welcome .sig { font-family: "Comic Sans MS", "Comic Neue", cursive; font-style: italic; text-align: right; color: var(--ink-soft); margin-top: 12px; font-size: 13px; }
.under-construction {
  display: inline-block; background: repeating-linear-gradient(45deg, #fff200 0 12px, #1a1538 12px 24px);
  color: #fff; text-shadow: 1px 1px 0 #000; font-family: "Comic Sans MS", "Comic Neue", cursive;
  font-weight: bold; font-size: 11px; letter-spacing: .12em; padding: 4px 8px; margin: 2px 4px; vertical-align: 2px; border: 1px solid #fff;
}

/* ===== GIF GRID ===== */
.gif-board { background: linear-gradient(180deg, var(--bubblegum), var(--baby-blue)); border: 4px ridge var(--hot-pink); padding: 16px 14px; text-align: center; }
.gif-board > .label { font-family: "Comic Sans MS", "Comic Neue", cursive; font-style: italic; font-weight: 700; font-size: 22px; color: var(--ink); text-shadow: 2px 2px 0 #fff; margin: 0 0 6px; }
.gif-board > .sub { font-family: "Times New Roman", serif; font-style: italic; font-size: 13px; margin-bottom: 14px; color: var(--ink-soft); }
.sparkle-rule { font-size: 16px; letter-spacing: 8px; color: var(--hot-pink); text-shadow: 0 0 4px #fff; margin: 4px 0 14px; }
.gif-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.gif-cell { background: #fff; padding: 6px 6px 4px; border: 3px outset var(--lavender); transition: transform .2s; text-decoration: none; position: relative; }
.gif-cell:hover { transform: scale(1.03) rotate(-1.5deg); border-style: inset; background: var(--acid); }
.gif-cell:nth-child(3n)   { border-color: var(--hot-pink); }
.gif-cell:nth-child(3n+1) { border-color: var(--baby-blue); }
.gif-cell:nth-child(3n+2) { border-color: var(--acid); }
.gif-frame { position: relative; aspect-ratio: 1/1; background: #000; overflow: hidden; }
.gif-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.gif-cell .gif-num { display: block; font-family: "VT323", "Courier New", monospace; font-size: 14px; color: var(--hot-pink); margin-top: 3px; letter-spacing: 1px; }
.gif-cell.copied .gif-frame::after {
  content: "copied ✦"; position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 62, 181, .85); color: #fff;
  font-family: "Comic Sans MS", "Comic Neue", cursive; font-style: italic; font-weight: bold; font-size: 15px;
  text-shadow: 1px 1px 0 var(--ink);
}

/* ===== ROTATION ===== */
.rotation-list { padding: 0; margin: 0; list-style: none; }
.rotation-list li { font-family: "Times New Roman", serif; font-size: 13.5px; padding: 6px 0; border-bottom: 1px dashed var(--rule); position: relative; padding-right: 24px; }
.rotation-list li:last-child { border-bottom: 0; }
.rot-item .icon { display: inline-block; width: 12px; text-align: center; margin-right: 4px; }
.rot-item .what { font-style: italic; font-weight: bold; color: var(--ink); }
.rot-item .why  { color: var(--ink-soft); display: block; font-size: 12px; margin-top: 2px; }

/* ===== LINKS / AFFILIATES ===== */
.linklist { list-style: none; padding: 0; margin: 0; }
.linklist li { padding: 6px 0; border-bottom: 1px dotted var(--rule); font-size: 13px; position: relative; padding-right: 24px; }
.linklist li:last-child { border-bottom: 0; }
.linklist .glyph { display: inline-block; width: 18px; text-align: center; color: var(--hot-pink); font-size: 14px; }
.linklist a.copied::after { content: " ✓ copied"; color: var(--hot-pink); font-style: italic; font-size: 11px; }
.affiliates { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.aff-wrap { position: relative; }
.button88 {
  display: inline-flex; align-items: center; justify-content: center; width: 88px; height: 31px; border: 1px solid #000;
  font-family: "VT323", "Courier New", monospace; font-size: 13px; text-decoration: none; text-shadow: 1px 1px 0 rgba(0,0,0,.35);
  color: #fff; letter-spacing: 1px; overflow: hidden; position: relative;
}
.button88::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.4), transparent 40%, transparent 60%, rgba(0,0,0,.3)); }
.button88 span { position: relative; z-index: 1; }
.b-ig   { background: linear-gradient(135deg, #f9ce34, #ee2a7b, #6228d7); }
.b-gif  { background: linear-gradient(135deg, #00c2ff, #00ff85); color: #000; text-shadow: 1px 1px 0 #fff; }
.b-sfm  { background: linear-gradient(135deg, #1ed760, #0a8f3c); }
.b-lfm  { background: linear-gradient(135deg, #d51007, #ff6a3d); }
.b-dc   { background: linear-gradient(135deg, #5865f2, #8b94f5); }
.b-fan  { background: linear-gradient(135deg, #b86bff, #ff3eb5); }
.b-mail { background: linear-gradient(135deg, #ff5b5b, #ffb031); }

/* ===== NOW PLAYING ===== */
.np-current { display: flex; gap: 10px; align-items: center; padding: 4px 0 8px; border-bottom: 1px dashed var(--rule); margin-bottom: 8px; }
.np-cover { width: 64px; height: 64px; flex: 0 0 64px; background: #000; border: 1px solid var(--ink); aspect-ratio: 1/1; }
.np-cover img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.np-noart { width: 100%; height: 100%; color: var(--acid); display: flex; align-items: center; justify-content: center; font-size: 24px; font-family: "VT323", monospace; }
.np-text { flex: 1; min-width: 0; }
.np-label { font-family: "VT323", monospace; font-size: 14px; color: var(--ink-soft); letter-spacing: 1px; }
.np-label.is-live { color: var(--vermillion); animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }
.np-track  { font-family: "Times New Roman", serif; font-style: italic; font-weight: bold; font-size: 15px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-artist { font-family: "Times New Roman", serif; font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-list { list-style: none; padding: 0; margin: 0; font-size: 12px; }
.np-list li { padding: 3px 0; border-bottom: 1px dotted rgba(111,95,181,.4); display: flex; gap: 4px; align-items: baseline; }
.np-list li:last-child { border-bottom: 0; }
.np-li-track { font-style: italic; color: var(--ink); flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-li-artist { color: var(--ink-soft); font-size: 11px; }
.np-footer { font-size: 11px; font-style: italic; color: var(--ink-soft); margin: 6px 0 0; }
.np-override { font-style: normal; color: var(--ink); }

/* ===== RANGE TOGGLE ===== */
.range-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.range-label { font-family: "Comic Sans MS", "Comic Neue", cursive; font-style: italic; font-size: 13px; color: var(--ink-soft); margin-right: 2px; }
.range-btn {
  font-family: "Comic Sans MS", "Comic Neue", cursive; font-style: italic; font-size: 13px;
  padding: 4px 13px; color: var(--ink); background: linear-gradient(180deg, #fff, var(--frost));
  border: 3px ridge var(--lavender); cursor: pointer; border-radius: 12px;
}
.range-btn:hover { background: var(--acid); }
.range-btn.is-active { background: linear-gradient(180deg, var(--hot-pink), var(--bubblegum)); color: #fff; text-shadow: 1px 1px 0 var(--ink); border-style: groove; border-color: var(--hot-pink); }

/* ===== TOP ARTISTS ===== */
.ta-list { list-style: none; padding: 0; margin: 0; }
.ta-list li { display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: start; padding: 6px 0; border-bottom: 1px dashed var(--rule); }
.ta-list li:last-child { border-bottom: 0; }
.ta-rank { font-family: "VT323", monospace; font-size: 16px; color: var(--hot-pink); padding-top: 1px; }
.ta-body { min-width: 0; }
.ta-name { font-style: italic; font-weight: bold; color: var(--ink); text-decoration: none; display: block; }
.ta-name:hover { color: var(--hot-pink); background: yellow; }
.ta-barrow { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.ta-bar  { flex: 1; min-width: 24px; height: 8px; background: rgba(111,95,181,.18); position: relative; border: 1px solid var(--rule); }
.ta-bar-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--hot-pink), var(--acid)); transition: width .5s; }
.ta-figs { font-family: "VT323", monospace; font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; flex: 0 0 auto; }
.ta-footer { font-style: italic; color: var(--ink-soft); font-size: 11.5px; margin: 8px 0 0; }

/* ===== TOP ALBUMS ===== */
.alb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.alb-cell { background: #000; position: relative; aspect-ratio: 1/1; text-decoration: none; border: 2px outset var(--lavender); overflow: hidden; display: block; }
.alb-cell img { aspect-ratio: 1/1; width: 100%; height: auto; object-fit: cover; object-position: center; display: block; }
.alb-noart { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--acid); font-size: 32px; font-family: "VT323", monospace; }
.alb-rank { position: absolute; top: 4px; left: 4px; font-family: "VT323", monospace; font-size: 14px; color: #fff; background: var(--hot-pink); padding: 1px 5px; z-index: 2; letter-spacing: 1px; }
.alb-meta { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(transparent, rgba(0,0,0,.85)); color: #fff; padding: 16px 6px 6px; font-size: 11px; line-height: 1.25; opacity: 0; transition: opacity .25s; text-shadow: 1px 1px 0 #000; }
.alb-cell:hover .alb-meta { opacity: 1; }
.alb-cell:hover { border-style: inset; }
.alb-title { display: block; font-style: italic; font-weight: bold; font-size: 12px; }
.alb-artist { display: block; color: #ffcce9; }
.alb-plays { display: block; font-family: "VT323", monospace; color: var(--acid); font-size: 12px; margin-top: 2px; }

/* ===== TOP TRACKS ===== */
.tt-list { list-style: none; padding: 0; margin: 0; }
.tt-list li { display: grid; grid-template-columns: 26px 44px 1fr; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px dashed var(--rule); }
.tt-list li:last-child { border-bottom: 0; }
.tt-rank { font-family: "VT323", monospace; font-size: 15px; color: var(--hot-pink); }
.tt-cover { position: relative; width: 44px; height: 44px; background: #000; border: 1px solid var(--ink); display: flex; align-items: center; justify-content: center; color: var(--acid); font-family: "VT323", monospace; overflow: hidden; }
.tt-cover img { width: 100%; height: 100%; object-fit: cover; }
.tt-cover.has-preview { cursor: pointer; }
.tt-cover.has-preview::after { content: "▶"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45); color: #fff; font-size: 15px; opacity: 0; transition: opacity .15s; text-shadow: 0 0 4px #000; }
.tt-cover.has-preview:hover::after { opacity: 1; }
.tt-cover.playing::after { content: "⏸"; opacity: 1; background: rgba(255,42,26,.55); animation: pulse 1.4s ease-in-out infinite; }
.tt-meta { min-width: 0; }
.tt-name { display: block; font-style: italic; font-weight: bold; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-artist { display: block; font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-figs { display: block; font-family: "VT323", monospace; font-size: 12px; color: var(--ink-soft); }

/* ===== GENRE PILLS ===== */
.genre-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.genre-pill {
  display: inline-block; padding: 4px 12px; border-radius: 14px; font-family: "Comic Sans MS", "Comic Neue", cursive;
  font-style: italic; font-size: 12.5px; border: 2px solid var(--ink); text-shadow: 1px 1px 0 rgba(0,0,0,.15); color: var(--ink);
}
.genre-pill.gp-0 { background: var(--bubblegum); }
.genre-pill.gp-1 { background: var(--baby-blue); }
.genre-pill.gp-2 { background: var(--acid); }
.genre-pill.gp-3 { background: var(--lavender); }
.genre-pill.gp-4 { background: var(--gold); }

/* ===== COUNTERS ===== */
.counter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.counter-cell { text-align: center; }
.counter-odo { display: block; font-family: "VT323", monospace; font-size: 30px; letter-spacing: 2px; color: var(--acid); background: #000; border: 2px inset #ccc; padding: 4px 6px; }
.counter-k { display: block; font-family: "Comic Sans MS", "Comic Neue", cursive; font-style: italic; font-size: 11.5px; color: var(--ink-soft); margin-top: 4px; }

/* ===== GRIND ===== */
#grind-panel iframe { border: 0; }
.grind-blurb { font-style: italic; color: var(--ink-soft); font-size: 13px; }

/* ===== SEARCH ===== */
.search-form { display: flex; gap: 6px; margin: 0 0 8px; }
.search-form input { flex: 1; font-family: "Times New Roman", serif; font-size: 15px; padding: 7px 10px; background: #fff; border: 2px inset var(--lavender); color: var(--ink); }
.search-form input:focus { outline: 2px solid var(--hot-pink); border-color: var(--hot-pink); }
.search-form button {
  font-family: "Comic Sans MS", "Comic Neue", cursive; font-weight: bold; font-style: italic;
  background: linear-gradient(180deg, var(--hot-pink), var(--bubblegum)); color: #fff; text-shadow: 1px 1px 0 var(--ink);
  border: 3px outset var(--hot-pink); padding: 6px 14px; font-size: 15px; cursor: pointer;
}
.search-form button:active { border-style: inset; }
.search-types { font-size: 13px; display: flex; gap: 14px; margin-bottom: 8px; }
.search-types label { font-family: "Comic Sans MS", "Comic Neue", cursive; font-style: italic; color: var(--ink-soft); cursor: pointer; }
.ask-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ask-label { font-family: "Comic Sans MS", "Comic Neue", cursive; font-style: italic; font-size: 12px; color: var(--ink-soft); }
.ask-chip {
  font-family: "Times New Roman", serif; font-size: 12.5px; padding: 3px 10px;
  background: var(--frost); border: 2px ridge var(--lavender); color: var(--ink); cursor: pointer; border-radius: 12px;
}
.ask-chip:hover { background: var(--acid); }
.sr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sr-card { background: #fff; border: 2px outset var(--lavender); padding: 8px; text-align: center; position: relative; }
.sr-card.clickable { cursor: pointer; }
.sr-card.clickable:hover { border-style: inset; background: var(--frost); }
.sr-cover { width: 100%; aspect-ratio: 1/1; background: #000; color: var(--acid); display: flex; align-items: center; justify-content: center; font-family: "VT323", monospace; font-size: 28px; overflow: hidden; margin-bottom: 6px; }
.sr-cover img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.sr-name { font-style: italic; font-weight: bold; font-size: 13.5px; color: var(--ink); }
.sr-sub { font-size: 11.5px; color: var(--ink-soft); }
.sr-badge { font-family: "VT323", monospace; font-size: 13px; color: var(--vermillion); margin: 4px 0; min-height: 16px; }
.sr-badge.dim { color: var(--ink-soft); }
.sr-link { font-size: 11px; }
.answer-big { font-size: 17px; line-height: 1.4; }
.ad-body { display: flex; gap: 14px; align-items: flex-start; }
.ad-img { width: 120px; height: 120px; object-fit: cover; border: 2px outset var(--lavender); flex: 0 0 120px; }
.ad-stats { flex: 1; min-width: 0; }
.ad-tracks ol { margin: 4px 0 8px; padding-left: 22px; }
.ad-tracks li { font-style: italic; }
.ad-sub { font-family: "Comic Sans MS", "Comic Neue", cursive; font-style: italic; color: var(--ink-soft); font-size: 13px; }

/* ===== MSG BOX ===== */
.msg-form { display: grid; gap: 8px; }
.msg-form label { font-family: "Comic Sans MS", "Comic Neue", cursive; font-style: italic; font-size: 13px; color: var(--ink-soft); }
.msg-form input, .msg-form textarea { font-family: "Times New Roman", serif; font-size: 14px; padding: 6px 8px; width: 100%; background: #fff; border: 2px inset var(--lavender); color: var(--ink); }
.msg-form input:focus, .msg-form textarea:focus { outline: 2px solid var(--hot-pink); border-color: var(--hot-pink); }
.msg-form textarea { min-height: 120px; resize: vertical; }
.msg-form button {
  font-family: "Comic Sans MS", "Comic Neue", cursive; font-weight: bold; font-style: italic;
  background: linear-gradient(180deg, var(--hot-pink), var(--bubblegum)); color: #fff; text-shadow: 1px 1px 0 var(--ink);
  border: 3px outset var(--hot-pink); padding: 8px 14px; font-size: 16px;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><polygon points='12,1 14,9 22,11 14,13 12,21 10,13 2,11 10,9' fill='%23ff3eb5' stroke='%23ffffff' stroke-width='1.2'/></svg>") 12 12, pointer;
  justify-self: start;
}
.msg-form button:hover { background: linear-gradient(180deg, var(--acid), var(--hot-pink)); }
.msg-form button:active { border-style: inset; }
.msg-form button:disabled { opacity: .6; }
.msg-hp { display: none; }
.fineprint { margin: 6px 0 0; font-size: 11px; }
.fineprint summary { font-style: italic; color: var(--ink-soft); cursor: pointer; list-style: none; width: fit-content; opacity: .7; }
.fineprint summary::before { content: "ⓘ "; }
.fineprint summary::-webkit-details-marker { display: none; }
.fineprint summary:hover { color: var(--hot-pink); opacity: 1; }
.fineprint p { margin: 5px 0 0; color: var(--ink-soft); font-style: italic; }

/* ===== WEBRING ===== */
.webring { background: var(--ink); color: #fff; border: 3px ridge var(--hot-pink); margin: 28px auto; padding: 12px 14px; width: min(900px, 92vw); font-family: "Comic Sans MS", "Comic Neue", cursive; font-size: 13px; text-shadow: 1px 1px 0 #000; text-align: center; }
.webring a { color: var(--acid); background: transparent; margin: 0 4px; text-decoration: none; border-bottom: 1px dotted var(--acid); }
.webring a:hover { color: var(--hot-pink); background: transparent; border-bottom-color: var(--hot-pink); }
.webring .ring-name { display: inline-block; color: var(--bubblegum); font-style: italic; margin-right: 8px; }

/* ===== FOOTER ===== */
footer { margin: 24px auto 36px; font-family: "Comic Sans MS", "Comic Neue", cursive; font-size: 12px; color: var(--ink); width: min(900px, 92vw); text-align: center; }
footer p { margin: 4px 0; }
footer .best { font-family: "Times New Roman", serif; font-style: italic; color: var(--ink-soft); }

/* ===== SPARKLES ===== */
.sparkle { position: fixed; pointer-events: none; width: 14px; height: 14px; z-index: 9999; animation: sparklefade .9s ease-out forwards; }
@keyframes sparklefade { 0% { opacity: 1; transform: scale(.6) rotate(0deg); } 100% { opacity: 0; transform: scale(1.6) rotate(180deg); } }

/* ===== EDIT MODE ===== */
html.edit-mode body { padding-bottom: 220px; }
html.edit-mode .editable { outline: 1px dashed var(--hot-pink); outline-offset: 2px; background: rgba(212, 255, 58, .15); cursor: text; }
html.edit-mode .editable:focus { outline: 2px solid var(--hot-pink); background: #fff; }
html.edit-mode .editable:empty::before { content: "(empty — click to type)"; color: var(--ink-soft); font-style: italic; }
html.edit-mode [data-remove] { padding-right: 56px; }
.edit-ctrl { position: absolute; right: 0; top: 2px; display: inline-flex; gap: 2px; }
html.edit-mode .edit-rm, html.edit-mode .edit-mv {
  background: var(--rule); color: #fff; border: 0; width: 16px; height: 18px; cursor: pointer;
  font-family: "VT323", monospace; font-size: 12px; line-height: 1; padding: 0;
}
html.edit-mode .edit-rm { background: var(--vermillion); width: 18px; }
html.edit-mode .edit-rm:hover, html.edit-mode .edit-mv:hover { background: var(--hot-pink); }

#edit-toolbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10000;
  background: linear-gradient(180deg, var(--ink), #2a225b); color: #fff; padding: 10px 14px;
  border-top: 4px ridge var(--hot-pink); font-family: "Comic Sans MS", "Comic Neue", cursive; font-size: 13px; text-shadow: 1px 1px 0 #000;
}
#edit-toolbar .et-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin: 4px 0; }
.et-title { color: var(--acid); font-weight: bold; font-style: italic; margin-right: 8px; }
.et-help { color: var(--bubblegum); font-style: italic; font-size: 12px; }
.et-btn { font-family: "Comic Sans MS", "Comic Neue", cursive; font-size: 13px; background: linear-gradient(180deg, var(--baby-blue), #6aa6c8); color: var(--ink); border: 2px outset var(--baby-blue); padding: 4px 10px; cursor: pointer; text-shadow: none; }
.et-btn:hover { border-style: inset; }
.et-btn.primary { background: linear-gradient(180deg, var(--hot-pink), var(--bubblegum)); color: #fff; text-shadow: 1px 1px 0 var(--ink); border-color: var(--hot-pink); }
.et-btn.warn    { background: linear-gradient(180deg, var(--vermillion), #ff7a6e); color: #fff; text-shadow: 1px 1px 0 #000; border-color: var(--vermillion); }
.et-flash { position: fixed; bottom: 20px; right: 20px; z-index: 10001; background: var(--ink); color: var(--acid); font-family: "VT323", monospace; font-size: 18px; padding: 8px 14px; border: 2px ridge var(--hot-pink); animation: flashIn .25s ease-out; }
.et-flash.success { color: #c8ff00; }
@keyframes flashIn { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ===== 📥 INBOX / 🕓 HISTORY OVERLAY (editor-only) ===== */
#inbox-overlay, #history-overlay {
  position: fixed; inset: 0; z-index: 10002;
  background: rgba(26, 21, 56, .55); backdrop-filter: blur(2px);
  display: flex; align-items: flex-start; justify-content: center; padding: 30px 16px 90px;
  overflow: auto;
}
.inbox-panel {
  width: min(1100px, 96vw); max-height: 100%;
  background: var(--ice); border: 3px ridge var(--lavender); box-shadow: 4px 4px 0 var(--ink);
  display: flex; flex-direction: column;
}
.inbox-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px; border-bottom: 3px ridge var(--lavender);
  background: repeating-linear-gradient(135deg, var(--discord) 0 12px, #8b94f5 12px 24px);
}
.inbox-title { font-family: "Comic Sans MS", "Comic Neue", cursive; font-weight: 700; font-style: italic; font-size: 16px; color: #fff; text-shadow: 1px 1px 0 var(--ink); }
.inbox-x { font-family: "Comic Sans MS", "Comic Neue", cursive; font-size: 15px; background: linear-gradient(180deg, var(--vermillion), #ff7a6e); color: #fff; text-shadow: 1px 1px 0 #000; border: 2px outset var(--vermillion); padding: 2px 9px; cursor: pointer; }
.inbox-x:hover { border-style: inset; }
.inbox-scroll { overflow: auto; }
.inbox-empty { font-family: "Comic Sans MS", "Comic Neue", cursive; color: var(--ink-soft); text-align: center; padding: 24px; }

.inbox-table { border-collapse: collapse; width: 100%; font-family: "Times New Roman", Times, serif; font-size: 12.5px; color: var(--ink); }
.inbox-table th {
  position: sticky; top: 0; z-index: 1;
  font-family: "Comic Sans MS", "Comic Neue", cursive; font-size: 11.5px; text-align: left;
  background: var(--lavender); color: var(--ink); padding: 5px 7px; border: 1px solid var(--rule);
}
.inbox-table td { padding: 5px 7px; border: 1px solid #d8cffa; vertical-align: top; }
.inbox-table tbody tr:nth-child(even) { background: #f3ecff; }
.inbox-table tr.is-blocked { background: #ffe4e0; }
.inbox-table tr.is-blocked td { color: var(--ink); }
.inbox-table .nowrap { white-space: nowrap; }
.inbox-table .mono { font-family: "VT323", "Courier New", monospace; font-size: 13px; }
.inbox-body { max-width: 320px; white-space: pre-wrap; word-break: break-word; }
.inbox-ua { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); }
.inbox-reach { font-size: 11px; color: var(--ink-soft); font-style: italic; margin-top: 2px; }

.inbox-badge { display: inline-block; margin-left: 5px; padding: 0 5px; font-family: "Comic Sans MS", "Comic Neue", cursive; font-size: 10px; background: var(--gold); color: var(--ink); border: 1px solid var(--ink); border-radius: 3px; }
.inbox-badge.blk { background: var(--vermillion); color: #fff; }

.inbox-acts { white-space: nowrap; }
.inbox-acts button {
  font-family: "Comic Sans MS", "Comic Neue", cursive; font-size: 11px; cursor: pointer;
  background: linear-gradient(180deg, var(--vermillion), #ff7a6e); color: #fff; text-shadow: 1px 1px 0 #000;
  border: 2px outset var(--vermillion); padding: 2px 7px; margin: 0 3px 3px 0;
}
.inbox-acts button:hover { border-style: inset; }
.inbox-acts button[data-act="unblock"] { background: linear-gradient(180deg, var(--statsfm), #15a847); border-color: var(--statsfm); }
.inbox-acts button:disabled { opacity: .5; cursor: default; }

/* ===== LOGIN TRIGGER (discreet ✦) ===== */
#edit-trigger {
  position: fixed; right: 10px; bottom: 10px; width: 28px; height: 28px; font-size: 18px; line-height: 1;
  background: rgba(255, 62, 181, .15); color: var(--hot-pink); border: 1px solid rgba(255, 62, 181, .35); border-radius: 50%;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><polygon points='12,1 14,9 22,11 14,13 12,21 10,13 2,11 10,9' fill='%23ff3eb5' stroke='%23ffffff' stroke-width='1.2'/></svg>") 12 12, pointer;
  opacity: .35; transition: opacity .2s, transform .2s, background .2s; z-index: 100;
  display: flex; align-items: center; justify-content: center; font-family: "Comic Sans MS", "Comic Neue", cursive;
}
#edit-trigger:hover { opacity: 1; transform: scale(1.15) rotate(72deg); background: var(--hot-pink); color: #fff; }
html.edit-mode #edit-trigger { display: none; }

/* ===== RESPONSIVE ===== */
@media (max-width: 880px) {
  .shrine-cols { grid-template-columns: 1fr; }
  /* nav becomes clean uniform pills that wrap & center — drops the desktop
     folder-tab vertical offset that made the strip look jumpy on phones */
  .navtabs { flex-wrap: wrap; overflow: visible; justify-content: center; gap: 5px; padding: 0 6px 8px; border-bottom: 3px ridge var(--rule); }
  .navtab { flex: 0 0 auto; top: 0; margin-bottom: 0; padding: 6px 13px; font-size: 14px;
            border: 3px ridge var(--lavender); border-radius: 10px; box-shadow: 2px 2px 0 rgba(26,21,56,.18); }
  .navtab.is-active { top: 0; border-style: groove; box-shadow: 0 2px 7px rgba(255,62,181,.4); }
  .title-block { padding: 8px 26px; }
  .title-block::before, .title-block::after { font-size: 22px; }
  .ad-body { flex-direction: column; }
  .ad-img { flex: 0 0 auto; }
}
@media (max-width: 520px) {
  h1.title { font-size: clamp(26px, 8.2vw, 44px); }
  /* artist rows: bar on its own line, figures right-aligned beneath — no cramping */
  .ta-barrow { flex-wrap: wrap; row-gap: 3px; }
  .ta-bar { flex-basis: 100%; }
  .ta-figs { flex-basis: 100%; text-align: right; }
  .range-bar { gap: 5px; }
  .range-btn { padding: 5px 11px; }
  .counter-odo { font-size: 26px; }
}