/* Glassmorphism: frosted glass over what's playing. Behind everything, the cover on air, huge and blurred; with no
   cover, slow drifting colour (glass.js sets --glass-wall and the cover's accent). The side panel and the player float
   off the edges as their own panes, the player a capsule; content sits on glass cards with a lit top edge. Light: milk
   glass. Dark: smoked glass, the backdrop dimmed. Geologica throughout. */
[data-design="glass"] {
  --bg: #e7efe9;
  --glass: rgb(255 255 255 / 0.42);
  --glass-strong: rgb(255 255 255 / 0.66);
  --glass-edge: rgb(255 255 255 / 0.6);
  --glass-lit: rgb(255 255 255 / 0.8);
  --glass-shade: 0 10px 30px rgb(20 40 30 / 0.14);
  --side: var(--glass);
  --card: var(--glass-strong);
  --card-2: rgb(255 255 255 / 0.5);
  --line: rgb(17 22 27 / 0.1);
  --text: #11161b;
  --muted: rgb(17 22 27 / 0.62);
  --accent: var(--cover-accent-light, #2f7d3a);
  --accent-ink: #fff;
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --danger: #c4332a;
  --lv1: #9a6a00; --lv2: #1f6f9c; --lv3: #6e45c4; --lv4: #4d5a52; --lv5: #c4332a;
  --blobs: radial-gradient(40% 50% at 18% 22%, #8fdc7a, transparent 70%), radial-gradient(45% 45% at 82% 18%, #4cc9b0, transparent 70%),
    radial-gradient(45% 50% at 72% 82%, #f6d36b, transparent 70%), radial-gradient(40% 45% at 22% 80%, #7ab4ff, transparent 70%);
  --wall-filter: blur(64px) saturate(1.45);
  --veil: rgb(255 255 255 / 0.4); /* over the cover: dark text stays readable on any of them */
  color-scheme: light;
}
[data-design="glass"][data-theme="dark"] {
  --bg: #070b09;
  --glass: rgb(20 24 30 / 0.42);
  --glass-strong: rgb(20 24 30 / 0.7);
  --glass-edge: rgb(255 255 255 / 0.12);
  --glass-lit: rgb(255 255 255 / 0.2);
  --glass-shade: 0 14px 34px rgb(0 0 0 / 0.4);
  --card-2: rgb(255 255 255 / 0.07);
  --line: rgb(255 255 255 / 0.1);
  --text: #f1f4f2;
  --muted: rgb(241 244 242 / 0.62);
  --accent: var(--cover-accent-dark, #8fdc7a);
  --accent-ink: #0a0e0c;
  --danger: #ff7a6b;
  --lv1: #f2c25a; --lv2: #6cc3f0; --lv3: #b99cf5; --lv4: #a9b5ad; --lv5: #ff7a6b;
  --blobs: radial-gradient(40% 50% at 18% 22%, #1f6b3a, transparent 70%), radial-gradient(45% 45% at 82% 18%, #0f5a5c, transparent 70%),
    radial-gradient(45% 50% at 72% 82%, #4b2f72, transparent 70%), radial-gradient(40% 45% at 22% 80%, #173f78, transparent 70%);
  --wall-filter: blur(64px) saturate(1.35) brightness(0.6);
  --veil: rgb(0 0 0 / 0.3);
  color-scheme: dark;
}

/* behind the glass: the drifting colour, and over it the cover when there is one */
[data-design="glass"] body {
  font-family: Geologica, system-ui, sans-serif; background: var(--bg);
  padding: 14px; gap: 14px; grid-template: "side main" 1fr "bar bar" auto / 252px 1fr;
}
[data-design="glass"] body::before, [data-design="glass"] body::after { content: ''; position: fixed; pointer-events: none; }
[data-design="glass"] body::before { inset: -20%; z-index: -2; background: var(--blobs); filter: blur(30px); animation: glass-drift 38s ease-in-out infinite alternate; }
[data-design="glass"] body::after {
  inset: -80px; z-index: -1; filter: var(--wall-filter);
  background: linear-gradient(var(--veil), var(--veil)), var(--glass-wall, none) center / cover;
}
@keyframes glass-drift { to { transform: translate(-6%, 4%) rotate(9deg) scale(1.08); } }
[data-design="glass"] h1, [data-design="glass"] h2, [data-design="glass"] h3, [data-design="glass"] .tile-value { font-family: Geologica, sans-serif; letter-spacing: -0.02em; }
[data-design="glass"] .head h1 { font-size: clamp(26px, 3vw, 36px); font-weight: 600; }

/* the panes: frosted, a lit top edge, a soft shadow */
[data-design="glass"] :is(.side, .bar, .tabs, .card, .hero, .tile, .faq-item, .pl, .hint, .quick-row, .me, .seg, .vote, .toast, .menu, .design-card) {
  background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-lit), var(--glass-shade);
}
[data-design="glass"] :is(.menu, .toast) { background: var(--glass-strong); }
/* A backdrop-filter makes its box the frame for position: fixed inside it, so a menu (fixed to the window) opened
   off-screen. While a menu is open, its box goes without its own blur: the wall behind is blurred anyway. */
[data-design="glass"] :is(.side, .bar, .tabs, .card, .hero, .tile, .faq-item, .pl, .hint, .quick-row, .me, .seg, .vote):has(.dropdown[open]) {
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
[data-design="glass"] .side { border-radius: 26px; }
[data-design="glass"] main { padding: 12px clamp(8px, 2vw, 26px) 40px; }
[data-design="glass"] :is(.card, .tile, .faq-item, .pl, .vote, .design-card) { border-radius: 22px; }
[data-design="glass"] :is(.hint, .quick-row) { border-radius: 18px; }
[data-design="glass"] .faq-item[open] { border-color: color-mix(in srgb, var(--accent) 45%, var(--glass-edge)); }
[data-design="glass"] .faq-item p { color: var(--text); opacity: 0.8; }

/* the menu */
[data-design="glass"] .nav a { color: var(--muted); border-radius: 14px; font-weight: 500; }
[data-design="glass"] .nav a:hover { background: var(--card-2); color: var(--text); }
[data-design="glass"] .nav a.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
[data-design="glass"] .eyebrow { color: var(--accent); text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; }

/* controls */
[data-design="glass"] .btn { border: 1px solid var(--glass-edge); background: var(--card-2); font-weight: 500; }
[data-design="glass"] .btn:hover { border-color: var(--accent); }
[data-design="glass"] .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; box-shadow: 0 8px 22px -8px var(--accent); }
[data-design="glass"] .input { border: 1px solid var(--glass-edge); background: var(--card-2); border-radius: 14px; }
[data-design="glass"] .seg button.on { background: var(--accent); color: var(--accent-ink); }

/* the air: the cover lifted off the glass in its own colour */
[data-design="glass"] .hero { border-radius: 30px; }
[data-design="glass"] .hero-bg { display: none; }
[data-design="glass"] .cover { border-radius: 24px; box-shadow: 0 26px 50px -18px color-mix(in srgb, var(--accent) 75%, transparent); }
[data-design="glass"] .cover.placeholder { background: var(--card-2); }
[data-design="glass"] .hero h2 { font-weight: 700; }

/* lists and the rest */
[data-design="glass"] .row { border-radius: 16px; }
[data-design="glass"] .row:hover { background: var(--card-2); }
[data-design="glass"] .row.mine { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
[data-design="glass"] .thumb { border-radius: 12px; }
[data-design="glass"] .ch { border-color: var(--glass-edge); border-radius: 18px; }
[data-design="glass"] .ch.has-bot { border-color: var(--accent); background: var(--accent-soft); }
[data-design="glass"] .pl-art { background: linear-gradient(140deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #1b2530)); color: var(--accent-ink); }
[data-design="glass"] .design-card.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--glass-shade); }
[data-design="glass"] .thank > .ic, [data-design="glass"] .thank a, [data-design="glass"] .version a { color: var(--accent); }

/* the player: a capsule floating at the bottom, the listen button in the song's colour */
[data-design="glass"] .bar { justify-self: center; width: min(860px, 100%); border-radius: 999px; padding: 8px 20px 8px 8px; background: var(--glass-strong); }
[data-design="glass"] .bar .thumb { width: 48px; height: 48px; border-radius: 50%; }
[data-design="glass"] .listen { background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 24px -6px var(--accent); }
[data-design="glass"] .center .time { color: var(--text); }
[data-design="glass"] .right input { accent-color: var(--accent); }

/* a phone: the same panes, closer to the edges */
@media (max-width: 860px) {
  [data-design="glass"] body { padding: 8px; gap: 8px; grid-template: "main" 1fr "bar" auto "tabs" auto / 100%; }
  [data-design="glass"] .bar { border-radius: 24px; padding: 8px 10px 8px 8px; }
  [data-design="glass"] .tabs { border-radius: 22px; padding-bottom: 4px; margin-bottom: env(safe-area-inset-bottom); }
  [data-design="glass"] .tabs a.on { color: var(--accent); }
  [data-design="glass"] main { padding: 10px 6px 24px; }
}
[data-design="glass"] .quick-row .input, [data-design="glass"] .quick-row .input:focus { border: 0; outline: none; background: none; box-shadow: none; }