/* Public profile page. Visuals are driven by CSS variables and body classes
   set by profile.js from the owner's settings. */

:root {
  --accent: #e4e7ec;
  --accent-rgb: 228, 231, 236;
  --on-accent: #0b0c0f;
  --text: #ffffff;
  --text-rgb: 255, 255, 255;
  --hover-rgb: var(--accent-rgb);
  --bg-color: #0a0a0f;
  --card-alpha: 0.35;
  --card-blur: 12px;
  --card-radius: 22px;
  --card-border: 1px;
  --bg-blur: 0px;
  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --icon-color: var(--text);
  --ui-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --soft: rgba(var(--text-rgb), 0.08);
  --soft-2: rgba(var(--text-rgb), 0.13);
  --line: rgba(var(--text-rgb), 0.11);
  --muted: rgba(var(--text-rgb), 0.62);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg-color);
  color: var(--text);
  font-family: var(--font-family);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

body.custom-cursor, body.custom-cursor * { cursor: var(--cursor) !important; }

/* ---------- Background ---------- */

.bg { position: fixed; inset: -24px; z-index: 0; overflow: hidden; will-change: transform; }
.bg img, .bg video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: blur(var(--bg-blur));
  transform: scale(1.04);
}
.bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.55) 100%);
}
body:not(.has-bg) .bg {
  background:
    radial-gradient(800px 500px at 20% 10%, rgba(var(--accent-rgb), 0.22), transparent 60%),
    radial-gradient(700px 500px at 85% 90%, rgba(var(--accent-rgb), 0.14), transparent 60%),
    var(--bg-color);
}

.overlay { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
body.fx-night .overlay {
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 10, 0.75) 100%),
    linear-gradient(180deg, rgba(10, 15, 50, 0.45), rgba(0, 0, 0, 0.55));
}
body.fx-old_tv .overlay {
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.28) 0, rgba(0, 0, 0, 0.28) 1px, transparent 2px, transparent 4px);
  animation: tv-flicker 0.15s steps(2) infinite;
}
body.fx-old_tv .overlay::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.6) 100%); }
body.fx-old_tv .bg img, body.fx-old_tv .bg video { filter: blur(var(--bg-blur)) saturate(0.6) contrast(1.15) sepia(0.25); }
@keyframes tv-flicker { 0% { opacity: 0.85; } 100% { opacity: 1; } }

.effects, .cursor-fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.effects { z-index: 2; }
.cursor-fx { z-index: 30; }

/* ---------- Enter screen ---------- */

/* Look is set by the owner: style (enter-classic / -text / -icon / -minimal),
   animation (enter-anim-*), blur (--enter-blur) and color (--enter-color).
   The dashboard has a matching live preview in site.css (.ep-*). */
.enter {
  --enter-blur: 22px;
  --enter-color: #ffffff;
  --enter-rgb: var(--accent-rgb);
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(var(--enter-blur)); -webkit-backdrop-filter: blur(var(--enter-blur));
  cursor: pointer; transition: opacity 0.7s var(--ease), backdrop-filter 0.7s;
  color: var(--enter-color);
}
.enter-inner { display: flex; flex-direction: column; align-items: center; gap: 1rem; transition: transform 0.7s var(--ease); }
.enter-ring {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 1.1rem;
  border: 1px solid rgba(var(--enter-rgb), 0.6);
  background: rgba(var(--enter-rgb), 0.18);
  box-shadow: 0 0 0 0 rgba(var(--enter-rgb), 0.45);
  transition: transform 0.2s;
}
.enter-ring i { margin-left: 3px; }
.enter span#enter-text {
  position: relative; font-size: 1rem; letter-spacing: 0.18em; opacity: 0.9;
  font-family: var(--ui-font); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); min-height: 1.4em;
  text-align: center; max-width: min(90vw, 36rem); padding: 0 1rem; overflow-wrap: anywhere;
}
.enter span#enter-text.typing::after { content: "|"; margin-left: 2px; animation: blink 1s steps(1) infinite; }
.enter:hover .enter-ring { transform: scale(1.06); }
.enter.leaving { opacity: 0; pointer-events: none; }
.enter.leaving .enter-inner { transform: scale(1.15); }

/* Styles */
.enter-text .enter-ring, .enter-minimal .enter-ring { display: none; }
.enter-icon span#enter-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.enter-icon .enter-ring { width: 84px; height: 84px; font-size: 1.5rem; }
.enter-text span#enter-text { font-size: clamp(1.1rem, 4.5vw, 1.6rem); font-weight: 700; letter-spacing: 0.22em; }
.enter-minimal { place-items: end center; padding-bottom: max(3rem, calc(env(safe-area-inset-bottom) + 2rem)); }
.enter-minimal span#enter-text { font-size: 0.8rem; letter-spacing: 0.3em; opacity: 0.7; }

/* Animations */
.enter-anim-pulse .enter-ring { animation: ring 2.2s infinite; }
.enter-anim-pulse.enter-text span#enter-text, .enter-anim-pulse.enter-minimal span#enter-text { animation: fade-pulse 2.2s ease-in-out infinite; }
.enter-anim-glow .enter-ring { animation: glow-ring 2.4s ease-in-out infinite; }
.enter-anim-glow span#enter-text { animation: glow-text 2.4s ease-in-out infinite; }
.enter-anim-float .enter-inner { animation: float 3.2s ease-in-out infinite; }
.enter-anim-glitch span#enter-text::before, .enter-anim-glitch span#enter-text::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none; padding: inherit;
}
.enter-anim-glitch span#enter-text::before { color: #ff2d75; animation: glitch-a 2.6s infinite steps(1); }
.enter-anim-glitch span#enter-text::after { color: #2de2ff; animation: glitch-b 2.6s infinite steps(1); }
.enter-anim-glitch .enter-ring { animation: glitch-ring 2.6s infinite steps(1); }

@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(var(--enter-rgb), 0.45); } 70%, 100% { box-shadow: 0 0 0 22px transparent; } }
@keyframes fade-pulse { 0%, 100% { opacity: 0.9; } 50% { opacity: 0.45; } }
@keyframes glow-ring { 0%, 100% { box-shadow: 0 0 12px rgba(var(--enter-rgb), 0.35); } 50% { box-shadow: 0 0 34px rgba(var(--enter-rgb), 0.85); } }
@keyframes glow-text { 0%, 100% { text-shadow: 0 0 6px rgba(var(--enter-rgb), 0.4); } 50% { text-shadow: 0 0 18px rgba(var(--enter-rgb), 0.95), 0 0 2px #fff; } }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes glitch-a { 0%, 86%, 100% { opacity: 0; transform: none; } 88% { opacity: 0.8; transform: translate(-3px, 1px); clip-path: inset(10% 0 55% 0); } 92% { opacity: 0.8; transform: translate(2px, -1px); clip-path: inset(60% 0 5% 0); } }
@keyframes glitch-b { 0%, 87%, 100% { opacity: 0; transform: none; } 89% { opacity: 0.8; transform: translate(3px, -1px); clip-path: inset(40% 0 30% 0); } 93% { opacity: 0.8; transform: translate(-2px, 1px); clip-path: inset(0 0 70% 0); } }
@keyframes glitch-ring { 0%, 86%, 100% { transform: none; } 88% { transform: translate(-2px, 1px) skewX(6deg); } 92% { transform: translate(2px, -1px) skewX(-4deg); } }

/* ---------- Stage & card ---------- */

.stage {
  position: relative; z-index: 3; min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center;
  padding: max(2rem, env(safe-area-inset-top)) clamp(0.85rem, 4vw, 2rem) max(4.5rem, calc(env(safe-area-inset-bottom) + 3.5rem));
  perspective: 1400px;
}

/* The card is a 3D object: the surface (glass background) sits at the back,
   the glare above it, and the content floats in front at different depths.
   preserve-3d needs the card itself to have no backdrop-filter, filter,
   overflow or isolation, so those live on .card-surface instead. */
.card {
  --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 50%; --s: 1; --glare: 0; --lift: 0;
  position: relative;
  padding: clamp(1.4rem, 5vw, 2.25rem) clamp(1.1rem, 5vw, 2rem) clamp(1.1rem, 4vw, 1.5rem);
  text-align: center;
  border-radius: var(--card-radius);
  transform: rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--s));
  transform-style: preserve-3d;
  will-change: transform;
  touch-action: pan-y pinch-zoom; /* vertical swipes scroll, pinch zooms */
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
.card .bio, .card .presence .p-activity, .card .presence .p-detail { -webkit-user-select: text; user-select: text; }
.card-surface {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(var(--text-rgb), 0.06), transparent 40%),
    rgba(var(--card-rgb, 8, 8, 14), var(--card-alpha));
  border: var(--card-border) solid rgba(var(--border-rgb, var(--accent-rgb)), var(--border-alpha, 0.32));
  box-shadow:
    0 calc(30px + var(--lift) * 20px) calc(80px + var(--lift) * 30px) -20px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(var(--card-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--card-blur)) saturate(140%);
  transform: translateZ(0);
}
body.glow-card .card-surface {
  box-shadow:
    0 0 60px -10px rgba(var(--accent-rgb), calc(var(--card-glow, 0.35) + var(--lift) * 0.25)),
    0 calc(30px + var(--lift) * 20px) calc(80px + var(--lift) * 30px) -20px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; overflow: hidden;
  transform: translateZ(1px);
  opacity: var(--glare);
  background:
    radial-gradient(520px circle at var(--gx) var(--gy), rgba(255, 255, 255, 0.16), transparent 42%),
    linear-gradient(calc(100deg + var(--ry) * 4), transparent 35%, rgba(255, 255, 255, 0.06) 50%, transparent 65%);
}

/* Content floats above the surface. */
.card > :not(.card-surface):not(.glare) { position: relative; transform: translateZ(var(--depth, 18px)); }
.card > .head { --depth: 46px; }
.card > .links, .card > .link-buttons { --depth: 32px; }
.card > .player, .card > .presence { --depth: 26px; }

/* Entrance: each block fades up in sequence once the page is entered.
   Uses opacity and "translate" so it never overrides the depth transform. */
.reveal { opacity: 0; translate: 0 12px; }
body.entered .reveal { animation: reveal 0.7s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 70ms + 80ms); }
@keyframes reveal { to { opacity: 1; translate: 0 0; } }

/* ---------- Header ---------- */

.head { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; }
.identity { display: flex; flex-direction: column; align-items: center; min-width: 0; max-width: 100%; }

.avatar-wrap { position: relative; flex: none; width: calc(clamp(96px, 26vw, 118px) * var(--avatar-scale, 1)); aspect-ratio: 1; }
.avatar-ring {
  position: absolute; inset: -5px; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--accent), transparent 30%, var(--accent) 50%, transparent 80%, var(--accent));
  animation: spin 6s linear infinite; opacity: 0.85;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
}
.avatar {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  background: linear-gradient(rgba(var(--accent-rgb), 0.3), rgba(var(--accent-rgb), 0.3)), #111;
  display: grid; place-items: center; font-size: clamp(2.2rem, 7vw, 2.7rem); font-weight: 800;
  box-shadow: 0 10px 30px -6px rgba(var(--accent-rgb), 0.55);
  transition: transform 0.4s var(--ease);
}
.avatar-wrap:hover .avatar { transform: scale(1.05) rotate(-2deg); }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

.status-dot {
  position: absolute; right: 4%; bottom: 4%; width: 24%; height: 24%; min-width: 20px; min-height: 20px;
  border-radius: 50%; border: 4px solid #0b0b12; background: #747f8d; z-index: 4; /* above the decoration */
}
.status-dot.online { background: #23a55a; box-shadow: 0 0 12px #23a55a; }
.status-dot.idle { background: #f0b232; }
.status-dot.dnd { background: #f23f43; }

.name {
  position: relative; margin: 0; max-width: 100%;
  font-size: clamp(1.45rem, 6vw, 2rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15;
  overflow-wrap: anywhere; min-height: 1.15em;
}
.handle {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.3rem;
  padding: 0.18rem 0.6rem; border-radius: 999px; border: 1px solid transparent; background: transparent;
  color: var(--muted); font-size: 0.9rem; font-family: var(--ui-font); cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.handle i { font-size: 0.75rem; opacity: 0; transform: translateX(-4px); transition: opacity 0.2s, transform 0.2s; }
.handle:hover, .handle:focus-visible { background: var(--soft); border-color: var(--line); color: var(--text); }
.handle:hover i, .handle:focus-visible i { opacity: 1; transform: none; }

body.glow-username .name { text-shadow: 0 0 10px var(--accent), 0 0 26px rgba(var(--accent-rgb), 0.6); }
.name.fx-glow { text-shadow: 0 0 8px var(--accent), 0 0 18px var(--accent), 0 0 36px rgba(var(--accent-rgb), 0.6); }
.name.fx-shadow { text-shadow: 2px 2px 0 rgba(var(--accent-rgb), 0.55), 4px 4px 0 rgba(0, 0, 0, 0.55); } /* offset copy, readable with light accents */
.name.fx-rainbow {
  background: linear-gradient(90deg, #ff4d4d, #ffb84d, #f9f871, #4dff88, #4dc3ff, #a64dff, #ff4d4d);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none !important; animation: rainbow 6s linear infinite;
}
.name.fx-typewriter::after { content: "|"; margin-left: 2px; color: var(--accent); animation: blink 1s steps(1) infinite; }
.sparkle { position: absolute; pointer-events: none; color: var(--accent); font-size: 0.7rem; animation: sparkle 1.2s ease-out forwards; }
@keyframes sparkle {
  0% { opacity: 0; transform: scale(0) rotate(0deg); }
  40% { opacity: 1; transform: scale(1.1) rotate(90deg); }
  100% { opacity: 0; transform: scale(0.4) rotate(180deg) translateY(-8px); }
}
@keyframes rainbow { to { background-position: 300% 0; } }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Badges ---------- */

.badges {
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem;
  margin-top: 0.75rem; padding: 0.3rem; border-radius: 12px;
  background: var(--soft); border: 1px solid var(--line);
}
.badges:empty { display: none; }
.badge {
  position: relative; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  font-size: 0.85rem; color: var(--badge-color); outline: none; cursor: default;
  transition: transform 0.2s var(--ease), background 0.2s;
}
.badge:hover, .badge:focus-visible { transform: translateY(-2px) scale(1.12); background: rgba(var(--badge-rgb), 0.18); }
body.badges-mono .badge { --badge-color: var(--text) !important; --badge-rgb: var(--text-rgb) !important; }
body.glow-badges .badge i, body.glow-badges .badge img { filter: drop-shadow(0 0 6px rgba(var(--badge-rgb), 0.8)); }
/* A badge image from /admin, instead of the icon: sized with the badge (font-size). */
.badge img { width: 1.4em; height: 1.4em; object-fit: contain; display: block; pointer-events: none; -webkit-user-drag: none; user-select: none; }
.badge::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translate(-50%, 4px) scale(0.96);
  padding: 0.35rem 0.6rem; border-radius: 8px; white-space: nowrap;
  background: rgba(10, 10, 16, 0.96); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff;
  font-family: var(--ui-font); font-size: 0.74rem; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity 0.15s, transform 0.15s; z-index: 10;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.badge:hover::after, .badge:focus-visible::after, .badge.tip-open::after { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* ---------- Bio, meta ---------- */

.bio {
  margin: 1.05rem auto 0; max-width: 40ch;
  white-space: pre-line; overflow-wrap: anywhere; line-height: 1.6; opacity: 0.92; min-height: 1.6em;
  font-size: clamp(0.92rem, 3.6vw, 1rem);
}
.bio.typing::after { content: "|"; margin-left: 1px; color: var(--accent); animation: blink 1s steps(1) infinite; }

/* ---------- Discord presence ---------- */

.presence {
  display: flex; gap: 0.8rem; align-items: center; text-align: left;
  margin-top: 1.1rem; padding: 0.7rem; border-radius: 16px;
  background: var(--soft); border: 1px solid var(--line); font-family: var(--ui-font);
  transition: background 0.2s, transform 0.2s var(--ease);
}
.presence:hover { background: var(--soft-2); transform: translateY(-1px); }

/* ---------- Links ---------- */

.links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem; margin-top: 1.25rem; }
.links:empty { display: none; }
.links a {
  position: relative; overflow: hidden;
  height: 48px; padding: 0 1rem; gap: 0.6rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px; color: var(--icon-color); font-size: 1.25rem; text-decoration: none;
  background: var(--soft); border: 1px solid var(--line);
  transition: transform 0.2s var(--ease), box-shadow 0.25s, border-color 0.2s, background 0.2s, color 0.2s;
}
.links a.icon-only { padding: 0; width: 48px; }
body.icons-brand .links a { color: var(--brand); }
body.icons-accent .links a { color: var(--accent); }
.links a::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle at 50% 120%, rgba(var(--hover-rgb), 0.35), transparent 70%);
  opacity: 0; transition: opacity 0.25s;
}
.links a { --hover-rgb: var(--accent-rgb); }
body.icons-brand .links a { --hover-rgb: var(--brand-rgb, var(--accent-rgb)); }
.links a:hover, .links a:focus-visible {
  transform: translateY(-3px); outline: none;
  border-color: rgba(var(--hover-rgb), 0.55);
  background: var(--soft-2);
}
.links a:hover::before, .links a:focus-visible::before { opacity: 1; }
.links a:active { transform: translateY(-1px) scale(0.97); }
body.glow-socials .links a:hover, body.glow-socials .links a:focus-visible {
  box-shadow: 0 10px 28px -6px rgba(var(--hover-rgb), 0.55);
}
body.glow-socials .links a i { filter: drop-shadow(0 0 4px currentColor); }
/* Tooltip for icon-only links */
.links a.icon-only::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translate(-50%, 4px); padding: 0.3rem 0.55rem; border-radius: 7px; white-space: nowrap;
  background: rgba(10, 10, 16, 0.96); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff;
  font: 600 0.72rem var(--ui-font); opacity: 0; pointer-events: none; transition: opacity 0.15s, transform 0.15s;
}
.links { overflow: visible; }
.links a.icon-only { overflow: visible; }
.links a.icon-only::before { border-radius: inherit; overflow: hidden; }
.links a.icon-only:hover::after, .links a.icon-only:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Music player ---------- */

.player {
  margin-top: 1.25rem; padding: 0.75rem 0.85rem 0.6rem; border-radius: 18px; text-align: left;
  background: var(--soft); border: 1px solid var(--line); font-family: var(--ui-font);
}
.player-top { display: flex; align-items: center; gap: 0.75rem; }
.player-art {
  width: 42px; height: 42px; border-radius: 12px; flex: none; display: flex; align-items: flex-end; justify-content: center; gap: 3px;
  padding: 10px 9px; background: rgba(var(--accent-rgb), 0.22);
}
.player-art span { width: 4px; height: 30%; border-radius: 2px; background: var(--accent); transition: height 0.3s; }
.player.playing .player-art span { animation: eq 0.9s ease-in-out infinite alternate; }
.player.playing .player-art span:nth-child(2) { animation-delay: -0.3s; }
.player.playing .player-art span:nth-child(3) { animation-delay: -0.6s; }
.player.playing .player-art span:nth-child(4) { animation-delay: -0.15s; }
@keyframes eq { 0% { height: 20%; } 100% { height: 100%; } }
.player-info { flex: 1; min-width: 0; }
.player-title { font-weight: 700; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-sub { font-size: 0.75rem; color: var(--muted); }
.player-controls { display: flex; align-items: center; gap: 0.15rem; flex: none; }
.pbtn {
  width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent;
  display: grid; place-items: center; font-size: 0.85rem; cursor: pointer; flex: none;
  transition: background 0.15s, transform 0.15s;
}
.pbtn:hover { background: var(--soft-2); }
.pbtn:active { transform: scale(0.92); }
.pbtn.main { width: 40px; height: 40px; background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 18px -4px rgba(var(--accent-rgb), 0.7); }
.pbtn.main:hover { filter: brightness(1.1); background: var(--accent); }
.pbtn.small { width: 28px; height: 28px; font-size: 0.75rem; color: var(--muted); }
.player-bottom { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.55rem; }
.time { font-size: 0.7rem; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 2.6ch; }

.player input[type="range"] {
  -webkit-appearance: none; appearance: none; height: 4px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(90deg, var(--accent) var(--fill, 0%), var(--soft-2) var(--fill, 0%));
}
.player input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.45); transition: transform 0.15s;
}
.player input[type="range"]::-moz-range-track { background: transparent; height: 4px; }
.player input[type="range"]::-moz-range-progress { background: transparent; }
.player input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0; }
.player input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.25); }
.seek { flex: 1; min-width: 60px; }
.vol { width: 70px; flex: none; }

/* ---------- Layouts ---------- */

body.layout-wide .card { text-align: left; }
body.layout-wide .head { flex-direction: row; align-items: center; gap: 1.4rem; }
body.layout-wide .identity { align-items: flex-start; }
body.layout-wide .badges { align-self: flex-start; }
body.layout-wide .bio { margin-left: 0; max-width: none; }
body.layout-wide .links { justify-content: flex-start; }

body.layout-minimal .card-surface { display: none; }
body.layout-minimal .glare { display: none; }
body.layout-minimal .name, body.layout-minimal .bio, body.layout-minimal .handle { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75); }

@media (max-width: 420px) {
  .links { gap: 0.5rem; }
  .vol, #player-mute { display: none; }
  .player-art { display: none; }
}

/* ---------- Corner controls ---------- */

.corner-btn {
  position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 20; width: 40px; height: 40px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.45); color: var(--text);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: grid; place-items: center; cursor: pointer; opacity: 0.6; transition: opacity 0.15s, transform 0.15s, border-color 0.15s;
}
.corner-btn:hover { opacity: 1; transform: translateY(-2px); border-color: rgba(244, 63, 94, 0.5); color: #fda4af; }
/* Share sits left of the report button */
.corner-btn.corner-share { right: calc(max(1rem, env(safe-area-inset-right)) + 48px); }
.corner-btn.corner-share:hover { border-color: rgba(255, 255, 255, 0.45); color: #fff; }

/* Share sheet */
.share-modal { text-align: center; }
.share-qr { display: block; width: 180px; height: 180px; margin: 0.4rem auto 1rem; border-radius: 14px; background: #fff; }
.share-link {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.35rem 0.35rem 0.85rem; border-radius: 12px; text-align: left;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.88rem;
}
.share-link span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin: 0.9rem 0 0.4rem; }
.share-app {
  display: grid; justify-items: center; gap: 0.3rem; padding: 0.65rem 0.25rem; border-radius: 12px; text-decoration: none;
  color: inherit; font-size: 0.72rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.15s, transform 0.15s;
}
.share-app i { font-size: 1.15rem; }
.share-app:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); }

.watermark {
  position: fixed; bottom: max(1.1rem, calc(env(safe-area-inset-bottom) + 0.4rem)); left: 50%; transform: translateX(-50%); z-index: 4;
  font: 700 0.76rem var(--ui-font); letter-spacing: 0.02em;
  color: var(--text); opacity: 0.4; text-decoration: none;
  padding: 0.3rem 0.7rem; border-radius: 999px; transition: opacity 0.2s, background 0.2s;
}
.watermark:hover { opacity: 0.9; background: rgba(0, 0, 0, 0.35); }

.p-toast {
  position: fixed; left: 50%; top: max(1rem, env(safe-area-inset-top)); transform: translateX(-50%); z-index: 95;
  padding: 0.55rem 0.95rem; border-radius: 12px; font: 600 0.85rem var(--ui-font);
  background: rgba(14, 14, 22, 0.95); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); animation: toast-in 0.25s var(--ease);
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -8px); } }

/* ---------- Report modal ---------- */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 90; /* above the cookie banner (85) */ display: grid; place-items: center; padding: 1rem;
  background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-family: var(--ui-font); animation: fade 0.2s ease;
}
@keyframes fade { from { opacity: 0; } }
.modal {
  width: min(420px, 100%); background: #11111a; color: #f5f5f7;
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 18px; padding: 1.3rem; text-align: left;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5); animation: pop 0.25s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: scale(0.96) translateY(6px); } }
.modal h3 { margin: 0 0 0.3rem; font-size: 1.1rem; }
.modal p { margin: 0 0 1rem; color: #9b9bab; font-size: 0.9rem; }
.modal label { display: block; font-size: 0.82rem; font-weight: 600; color: #9b9bab; margin: 0.6rem 0 0.35rem; }
.modal select, .modal textarea {
  width: 100%; padding: 0.65rem 0.75rem; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.4); color: #f5f5f7; font: inherit; font-size: 0.92rem;
}
.modal select:focus, .modal textarea:focus { outline: none; border-color: #e11d48; }
.modal textarea { min-height: 80px; resize: vertical; }
.modal .row { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }
.modal button {
  padding: 0.6rem 1rem; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06); color: #f5f5f7; font-weight: 600; cursor: pointer;
}
.modal button.primary { background: #e11d48; border-color: #e11d48; }
/* The share sheet uses the profile's own accent color, not the report red. */
.share-modal button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #0b0c0f); }
.modal button:disabled { opacity: 0.5; cursor: not-allowed; }
.modal .msg { font-size: 0.85rem; margin-top: 0.75rem; }
.modal .msg.error { color: #fda4af; }
.modal .msg.ok { color: #86efac; }

@media (hover: none) {
  .links a:hover, .link-btn:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; translate: none; }
  body.entered .reveal { animation: none; }
  .avatar-ring, .enter-ring, .name.fx-rainbow, .name.fx-typewriter::after, .sparkle,
  body.fx-old_tv .overlay, .player.playing .player-art span, .presence-loading i,
  .p-toast, .modal, .stats.stats-corner { animation: none !important; }
  .stats.stats-corner { opacity: 1; }
  .card, .bg { transition: none; }
}

/* iOS: avoid input zoom in the report form */
@media (hover: none) and (pointer: coarse) { .modal select, .modal textarea { font-size: 16px; } }
/* Very small phones */
@media (max-width: 360px) {
  .player-controls .pbtn:not(.main) { width: 30px; height: 30px; }
  .time { display: none; }
}
/* Short landscape screens: start at the top so nothing is cut off */
@media (max-height: 520px) and (orientation: landscape) {
  .stage { place-items: start center; padding-top: 1rem; }
  .avatar-wrap { width: calc(84px * min(var(--avatar-scale, 1), 1.2)); }
}
/* Browsers without backdrop-filter: make the card more opaque so text stays readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card-surface { background: rgba(var(--card-rgb, 8, 8, 14), max(var(--card-alpha), 0.75)); }
  .enter { background: rgba(0, 0, 0, 0.85); }
}

/* The grid track must never grow wider than the screen (long names, many
   links or the player's minimum width would otherwise push the card out). */
.stage { grid-template-columns: minmax(0, 1fr); }
.stage > .card { justify-self: center; min-width: 0; }
.card > *, .head, .identity, .player, .player-top, .player-bottom, .presence { min-width: 0; max-width: 100%; }

/* Phones and short screens: the card is often taller than the screen, so the
   watermark and report button scroll with the page instead of covering links. */
@media (max-width: 640px), (max-height: 520px) {
  .stage { padding-bottom: 1rem; }
  .watermark {
    position: relative; left: auto; bottom: auto; transform: none;
    display: block; width: max-content; margin: 0 auto max(1.25rem, env(safe-area-inset-bottom));
  }
  .corner-btn { position: absolute; top: max(0.75rem, env(safe-area-inset-top)); bottom: auto; }
}

/* ---------- Link buttons (custom links and labeled links) ---------- */

.link-buttons { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 1.1rem; text-align: left; }
.link-buttons:empty { display: none; }
.links:empty + .link-buttons { margin-top: 1.25rem; }
.link-btn {
  --brand-rgb: var(--accent-rgb);
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; gap: 0.8rem;
  min-height: 58px; padding: 0.55rem 0.9rem 0.55rem 0.55rem;
  border-radius: calc(var(--card-radius) * 0.6 + 4px);
  background: var(--soft); border: 1px solid var(--line);
  color: var(--text); text-decoration: none; font-family: var(--ui-font);
  transition: transform 0.25s var(--ease), border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.link-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(var(--accent-rgb), 0.22), transparent 70%);
  transform: translateX(-101%); transition: transform 0.45s var(--ease);
}
.link-btn:hover, .link-btn:focus-visible {
  transform: translateY(-2px); outline: none;
  border-color: rgba(var(--accent-rgb), 0.55); background: var(--soft-2);
}
body.glow-socials .link-btn:hover, body.glow-socials .link-btn:focus-visible { box-shadow: 0 12px 30px -10px rgba(var(--accent-rgb), 0.55); }
.link-btn:hover::before, .link-btn:focus-visible::before { transform: none; }
.link-btn:active { transform: scale(0.985); }
.lb-icon {
  width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center;
  background: rgba(var(--text-rgb), 0.08); font-size: 1.2rem; overflow: hidden;
  transition: transform 0.3s var(--ease);
}
body.icons-brand .lb-icon { color: var(--brand); background: rgba(var(--brand-rgb), 0.14); }
body.icons-accent .lb-icon { color: var(--accent); background: rgba(var(--accent-rgb), 0.14); }
.link-btn:hover .lb-icon { transform: scale(1.08) rotate(-4deg); }
.lb-icon .link-img { width: 26px; height: 26px; border-radius: 6px; object-fit: contain; }
.lb-icon .link-img[src*="/media/"] { width: 100%; height: 100%; border-radius: 0; object-fit: cover; }
.lb-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lb-title { font-weight: 700; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-sub { font-size: 0.76rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-go { flex: none; font-size: 0.85rem; color: var(--muted); transition: transform 0.25s var(--ease), color 0.25s; }
.link-btn:hover .lb-go { transform: translateX(3px); color: var(--text); }
.links .link-img { width: 22px; height: 22px; border-radius: 5px; object-fit: contain; }

/* Tap / click ripple */
.ripple {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  background: rgba(var(--text-rgb), 0.18); transform: scale(0); animation: ripple 0.6s ease-out forwards;
}
@keyframes ripple { to { transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .link-btn::before { transition: none; } }

/* Touch screens: shallower depth so content never pokes out while pressed. */
@media (hover: none) {
  .card > :not(.card-surface):not(.glare) { --depth: 10px; }
  .card > .head { --depth: 26px; }
  .card > .links, .card > .link-buttons { --depth: 18px; }
  .card > .player, .card > .presence { --depth: 14px; }
}
/* Phones: keep the report button clear of the card. */
@media (max-width: 640px), (max-height: 520px) {
  .stage { padding-top: max(3.75rem, calc(env(safe-area-inset-top) + 3rem)); }
  .corner-btn { top: max(0.75rem, env(safe-area-inset-top)); right: max(0.75rem, env(safe-area-inset-right)); width: 36px; height: 36px; }
  .corner-btn.corner-share { right: calc(max(0.75rem, env(safe-area-inset-right)) + 44px); }
}

/* ======================================================================
   guns.lol-style card designs
   ====================================================================== */

.stage { align-content: center; row-gap: 1rem; }
.stage > .player-card { justify-self: center; }

/* Name and badges on one line */
.name-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem 0.6rem; max-width: 100%; }
.name-row .badges { margin-top: 0; }
.identity .bio { margin-top: 0.55rem; }
.joined { margin-top: 0.35rem; font-family: var(--ui-font); font-size: 0.82rem; color: var(--muted); }
.identity .handle { margin-top: 0.4rem; }
body.glow-username .name { text-shadow: 0 0 10px var(--name-glow), 0 0 26px rgba(var(--name-glow-rgb), 0.6); }
.name.fx-glow { text-shadow: 0 0 8px var(--name-glow), 0 0 18px var(--name-glow), 0 0 36px rgba(var(--name-glow-rgb), 0.6); }

/* Avatar shapes and decoration frame */
body.avatar-rounded .avatar { border-radius: 24%; }
body.avatar-square .avatar { border-radius: 8%; }
body.avatar-rounded .avatar-ring, body.avatar-square .avatar-ring { display: none; }
body.avatar-rounded .avatar, body.avatar-square .avatar { box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.55), 0 10px 30px -6px rgba(var(--accent-rgb), 0.5); }
.avatar-deco {
  position: absolute; inset: -20%; width: 140%; height: 140%; object-fit: contain;
  pointer-events: none; z-index: 3; transform: translateZ(8px);
}

/* Card styles */
/* --card-alpha-style and --card-blur-style come from the Opacity and Blur
   sliders, adjusted per style in profile/index.js (default look unchanged). */
body.card-outline .card-surface {
  background: rgba(var(--card-rgb, 8, 8, 14), var(--card-alpha-style, 0));
  backdrop-filter: blur(var(--card-blur-style, 0px)); -webkit-backdrop-filter: blur(var(--card-blur-style, 0px));
  border: max(1px, var(--card-border)) solid rgba(var(--border-rgb, var(--text-rgb)), var(--border-alpha, 0.28));
  box-shadow: none;
}
body.card-outline.glow-card .card-surface { box-shadow: 0 0 30px -12px rgba(var(--accent-rgb), min(1, calc(var(--card-glow, 0.35) * 1.7))); }
body.card-solid .card-surface {
  background: rgba(var(--card-rgb, 10, 10, 12), var(--card-alpha-style, 0.94));
  backdrop-filter: blur(var(--card-blur-style, 0px)); -webkit-backdrop-filter: blur(var(--card-blur-style, 0px));
}

/* Pop-out layout: the avatar sits on the card's top edge, info beside it */
body.layout-popout .card { text-align: left; margin-top: calc(clamp(96px, 26vw, 118px) * var(--avatar-scale, 1) * 0.55); padding-top: 1rem; }
body.layout-popout .head { flex-direction: row; align-items: flex-end; gap: 1rem; }
body.layout-popout .avatar-wrap { margin-top: calc(clamp(96px, 26vw, 118px) * var(--avatar-scale, 1) * -0.62); }
body.layout-popout .identity { align-items: flex-start; padding-bottom: 0.2rem; }
body.layout-popout .name-row { justify-content: flex-start; }
body.layout-popout .bio { margin-left: 0; text-align: left; }
body.layout-popout .links, body.layout-popout .stats { justify-content: flex-start; }

/* Side-by-side layout */
body.layout-wide .name-row, body.layout-wide .stats { justify-content: flex-start; }
body.layout-wide .bio { text-align: left; }

/* Stats bar: "👁 1,392 | 📍 Los Angeles" */
.stats { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.3rem 0; margin-top: 1.2rem; font-family: var(--ui-font); }
.stats .stat { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--muted); }
.stats .stat i { font-size: 0.8rem; color: var(--text); opacity: 0.85; }
.stats .stat:not([hidden]) ~ .stat:not([hidden])::before { content: ""; width: 1px; height: 0.9em; background: rgba(var(--text-rgb), 0.25); margin: 0 0.75rem; }
.stats.stats-corner {
  position: fixed; z-index: 6; left: max(1rem, env(safe-area-inset-left)); bottom: max(1rem, env(safe-area-inset-bottom));
  margin: 0; justify-content: flex-start; opacity: 0; animation: reveal 0.6s 0.4s var(--ease) forwards;
}
body:not(.entered) .stats.stats-corner { animation: none; }

/* Separate music player card */
.player-card { position: relative; border-radius: var(--card-radius); transform-style: preserve-3d; }
.player-card .player { margin-top: 0; background: transparent; border: 0; padding: 0.85rem 1rem 0.75rem; }
.player-card .player-art { width: 56px; height: 56px; border-radius: 14px; }

/* Discord presence */
.presence { gap: 0.85rem; padding: 0.75rem 0.85rem; }
.presence.presence-loading { justify-content: center; color: var(--muted); font-size: 0.9rem; gap: 0.55rem; }
.presence.presence-loading i { font-size: 1.1rem; color: var(--text); animation: pulse 1.6s infinite; }
.p-avatar { position: relative; width: 58px; height: 58px; flex: none; }
.p-avatar > img:not(.p-deco), .p-avatar > i { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--soft-2); font-size: 1.4rem; }
.p-deco { position: absolute; inset: -12%; width: 124%; height: 124%; pointer-events: none; }
.p-status {
  position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px; border-radius: 50%;
  border: 3px solid #0b0b10; background: #747f8d; display: grid; place-items: center; font-size: 0.5rem; color: #fff;
}
.p-status.online { background: #23a55a; } .p-status.idle { background: #f0b232; } .p-status.dnd { background: #f23f43; }
.p-status.streaming { background: #9146ff; width: 22px; height: 22px; }
.p-status.listening { background: #1db954; width: 22px; height: 22px; }
.p-text { min-width: 0; flex: 1; }
.p-name-row { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.p-name { font-weight: 700; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-custom { font-size: 0.75rem; color: var(--muted); padding: 0.1rem 0.45rem; border-radius: 6px; background: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%; }
.p-activity { font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 0.1rem; }
.p-activity strong { font-weight: 700; }
.p-activity span { color: var(--muted); }
.p-detail { font-size: 0.78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-bar { height: 4px; border-radius: 999px; background: var(--soft-2); margin-top: 0.45rem; overflow: hidden; }
.p-bar > div { height: 100%; width: 0; background: #1db954; transition: width 1s linear; }
.p-art { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex: none; background: var(--soft-2); display: grid; place-items: center; font-size: 1.3rem; }

/* Discord server widget */
.invite {
  position: relative; display: flex; align-items: center; gap: 0.85rem; text-align: left;
  margin-top: 0.75rem; padding: 0.75rem 0.85rem; border-radius: 16px;
  background: var(--soft); border: 1px solid var(--line); font-family: var(--ui-font);
}
.invite-loading { color: var(--muted); font-size: 0.85rem; display: flex; gap: 0.5rem; align-items: center; }
.invite-icon { width: 58px; height: 58px; border-radius: 16px; overflow: hidden; flex: none; background: #5865f2; display: grid; place-items: center; }
.invite-icon img { width: 100%; height: 100%; object-fit: cover; }
.invite-initials { font-weight: 800; color: #fff; }
.invite-text { min-width: 0; flex: 1; }
.invite-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 4.5rem; }
.invite-counts { display: flex; flex-wrap: wrap; gap: 0.15rem 0.75rem; font-size: 0.75rem; color: var(--muted); margin-top: 0.15rem; }
.invite-count .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #80848e; }
.invite-count.online .dot { background: #23a55a; }
.invite-join {
  display: inline-block; margin-top: 0.4rem; padding: 0.2rem 0.75rem; border-radius: 6px;
  background: #248046; color: #fff; font-weight: 700; font-size: 0.78rem; text-decoration: none;
  transition: background 0.15s, transform 0.15s;
}
.invite-join:hover { background: #1a6334; transform: translateY(-1px); }
.invite-tag { position: absolute; top: 0.6rem; right: 0.8rem; font-size: 0.72rem; color: var(--muted); opacity: 0.8; }

/* Side-by-side stays side by side on phones (like guns.lol), with a smaller avatar. */
@media (max-width: 640px) {
  body.layout-wide .card { text-align: left; }
  body.layout-wide .head { flex-direction: row; align-items: center; gap: 0.9rem; }
  body.layout-wide .avatar-wrap { width: calc(clamp(76px, 24vw, 96px) * min(var(--avatar-scale, 1), 1.25)); }
  body.layout-wide .identity { align-items: flex-start; }
  body.layout-wide .name-row, body.layout-wide .stats { justify-content: flex-start; }
  body.layout-wide .bio { text-align: left; margin-left: 0; }
}
/* Too narrow for side by side (very small phones, or a big avatar): stack. */
@media (max-width: 400px) {
  body.layout-wide.avatar-big .head { flex-direction: column; align-items: center; }
  body.layout-wide.avatar-big .identity { align-items: center; }
  body.layout-wide.avatar-big .name-row, body.layout-wide.avatar-big .links, body.layout-wide.avatar-big .stats { justify-content: center; }
  body.layout-wide.avatar-big .bio { text-align: center; }
}
@media (max-width: 340px) {
  body.layout-wide .head { flex-direction: column; align-items: center; }
  body.layout-wide .identity { align-items: center; }
  body.layout-wide .name-row, body.layout-wide .links, body.layout-wide .stats { justify-content: center; }
  body.layout-wide .bio { text-align: center; }
}

/* ======================================================================
   Show / hide switches from the dashboard, and layout fixes
   ====================================================================== */

body.no-avatar .avatar-wrap { display: none; }
body.no-ring .avatar-ring { display: none; }
body.no-glare .glare { display: none; }
body.no-vignette .bg::after { display: none; }
body.no-vignette:not(.has-bg) .bg { background: var(--bg-color); }
body.no-reveal .reveal { opacity: 1; translate: none; }
body.no-reveal.entered .reveal { animation: none; }
body.no-reveal .stats.stats-corner { opacity: 1; animation: none; }

/* The enter screen covers the whole window: show focus on the button inside. */
.enter:focus-visible { outline: none; }
.enter:focus-visible .enter-ring, .enter-text:focus-visible span#enter-text, .enter-minimal:focus-visible span#enter-text {
  outline: 2px solid var(--enter-color); outline-offset: 6px; border-radius: 999px;
}

/* Pop-out layout: the avatar stays on the card's top edge however tall the text is. */
body.layout-popout .avatar-wrap { align-self: flex-start; }
@media (max-width: 640px) {
  body.layout-popout .head { flex-direction: column; align-items: center; }
  body.layout-popout .avatar-wrap { align-self: center; }
  body.layout-popout .identity { align-items: center; text-align: center; }
  body.layout-popout .name-row, body.layout-popout .links, body.layout-popout .stats { justify-content: center; }
  body.layout-popout .bio { text-align: center; }
  body.layout-popout .card { text-align: center; }
}

/* Long text in the toast (e.g. the link when copying failed) wraps on phones. */
.p-toast { width: max-content; max-width: calc(100vw - 2rem); overflow-wrap: anywhere; text-align: center; }

/* Corner stats: a small pill so long locations stay readable, and on phones
   (or when the card is taller than the window) they sit under the card. */
.stats.stats-corner {
  max-width: calc(50vw - 5rem); padding: 0.35rem 0.75rem; border-radius: 999px;
  background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
/* Phones: the corner stats stay in the corner (wider there); only a card
   taller than the screen (body.tall) moves them under the card. */
@media (max-width: 640px), (max-height: 520px) {
  /* Phones: the watermark is in the page flow here, so a fixed pill would
     cover it. The stats sit in the flow too, just above the site name. */
  .stats.stats-corner { position: static; max-width: calc(100% - 2rem); margin: 0 auto 0.75rem; justify-content: center; }
  .stage { min-height: calc(100dvh - 3rem); }
}
/* Desktop with a card taller than the window (index.js adds .tall): the
   watermark, corner stats and buttons scroll with the page instead of covering links. */
body.tall .watermark { position: relative; left: auto; bottom: auto; transform: none; display: block; width: max-content; margin: 0 auto 1.25rem; }
body.tall .stats.stats-corner { position: static; max-width: calc(100% - 2rem); margin: 0 auto 0.75rem; justify-content: center; }
body.tall .corner-btn { position: absolute; top: 1rem; bottom: auto; }

/* Loading icon in the Discord box */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* Typewriter text: the cursor goes away when typing is finished. */
.bio.typing.done::after, .name.fx-typewriter.done::after, .enter span#enter-text.typing.done::after { content: none; }

/* ======================================================================
   Finer styling (dashboard: Appearance). Defaults keep the original look.
   ====================================================================== */

/* Name color */
.name { color: var(--name-color, inherit); }

/* Card width (card color and border color: see .card-surface) */
.card, .player-card { width: min(var(--card-width, 480px), 100%); }
body.layout-popout .card, body.layout-popout .player-card { width: min(calc(var(--card-width, 480px) + 80px), 100%); }
body.layout-wide .card, body.layout-wide .player-card { width: min(calc(var(--card-width, 480px) + 300px), 100%); }

/* Background dimming */
.bg::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(0, 0, 0, var(--bg-dim, 0)); }

/* Avatar frame (avatar size: see .avatar-wrap) */
body.no-avatar.layout-popout .card { margin-top: 0; padding-top: clamp(1.4rem, 5vw, 2.25rem); }
body.frame-border .avatar-ring, body.frame-glow .avatar-ring, body.frame-none .avatar-ring { display: none; }
body.frame-border .avatar { box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.75); }
body.frame-glow .avatar { box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.35), 0 0 34px 2px rgba(var(--accent-rgb), 0.55); }
/* No frame: no circle, background or shadow, so a transparent PNG floats freely. */
body.frame-none .avatar { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
body.frame-none .avatar img { object-fit: contain; }
body.frame-none .avatar-wrap:hover .avatar { transform: scale(1.03); }

/* Link icons: shape and size */
body.icon-shape-circle .links a.icon-only { border-radius: 50%; }
body.icon-shape-plain .links a.icon-only { background: transparent; border-color: transparent; }
body.icon-shape-plain .links a.icon-only:hover, body.icon-shape-plain .links a.icon-only:focus-visible { background: var(--soft); }
body.icon-shape-filled .links a.icon-only { background: rgba(var(--text-rgb), 0.92); border-color: transparent; color: var(--on-text, #0b0c0f); }
body.icon-shape-filled.icons-accent .links a.icon-only { background: var(--accent); color: var(--on-accent); }
body.icon-shape-filled.icons-brand .links a.icon-only { background: var(--brand); color: var(--on-brand, #fff); }
body.icon-shape-filled .links a.icon-only:hover, body.icon-shape-filled .links a.icon-only:focus-visible { background: rgba(var(--text-rgb), 1); }
body.icon-shape-filled.icons-accent .links a.icon-only:hover, body.icon-shape-filled.icons-accent .links a.icon-only:focus-visible { background: var(--accent); }
body.icon-shape-filled.icons-brand .links a.icon-only:hover, body.icon-shape-filled.icons-brand .links a.icon-only:focus-visible { background: var(--brand); }
body.icon-size-small .links a.icon-only { width: 40px; height: 40px; font-size: 1.05rem; }
body.icon-size-large .links a.icon-only { width: 58px; height: 58px; font-size: 1.5rem; }
body.icon-size-small .links .link-img { width: 18px; height: 18px; }
body.icon-size-large .links .link-img { width: 28px; height: 28px; }

/* Badges without the box */
body.badges-plain .badges { background: transparent; border-color: transparent; padding: 0; }

/* Left-aligned content */
body.align-left .card { text-align: left; }
body.align-left .head, body.align-left .identity { align-items: flex-start; }
body.align-left .name-row, body.align-left .links, body.align-left .stats, body.align-left .badges { justify-content: flex-start; }
body.align-left .bio { margin-left: 0; text-align: left; }
/* Left-aligned text: pull the handle's pill padding back so "@name" lines up with the bio. */
body.align-left .handle, body.layout-wide .handle, body.layout-popout .handle { margin-left: -0.6rem; }
@media (max-width: 340px) { body.layout-wide .handle { margin-left: 0; } }
@media (max-width: 400px) { body.layout-wide.avatar-big .handle { margin-left: 0; } }
@media (max-width: 640px) { body.layout-popout:not(.align-left) .handle { margin-left: 0; } }

/* Small text under the card */
.page-footer {
  justify-self: center; margin: 0.25rem 0 0; max-width: min(var(--card-width, 480px), 100%); text-align: center;
  font: 600 0.78rem var(--ui-font); letter-spacing: 0.08em; color: var(--muted); overflow-wrap: anywhere;
}

/* ---------- Widgets (GitHub, Spotify, YouTube, clock, weather, Telegram, Roblox, Last.fm) ---------- */

.widgets { display: grid; gap: 0.6rem; margin-top: 0.75rem; text-align: left; font-family: var(--ui-font); }
.widget {
  position: relative; display: flex; align-items: center; gap: 0.8rem; min-width: 0;
  padding: 0.7rem 0.8rem; border-radius: 16px; background: var(--soft); border: 1px solid var(--line);
  transition: background 0.2s, transform 0.2s var(--ease);
}
.widget:hover { background: var(--soft-2); transform: translateY(-1px); }
.widget.w-loading { opacity: 0.7; }
.widget.w-loading .w-art i { animation: pulse 1.6s infinite; }
.w-art {
  width: 52px; height: 52px; flex: none; border-radius: 13px; overflow: hidden;
  display: grid; place-items: center; font-size: 1.35rem; background: var(--soft-2); color: var(--text);
}
.w-art img { width: 100%; height: 100%; object-fit: cover; }
.widget-github .w-art img { border-radius: 50%; }
.widget-spotify .w-art { color: #1db954; }
.widget-lastfm .w-art i { color: #d51007; }
.widget-telegram .w-art { color: #fff; background: #26a5e4; }
.widget-weather .w-art { color: #fcd34d; background: rgba(96, 165, 250, 0.18); }
.widget-timezone .w-art { color: var(--accent); }
.widget-roblox .w-art { background: rgba(255, 255, 255, 0.92); color: #111; }
.w-text { min-width: 0; flex: 1; padding-right: 4.5rem; }
.w-title { font-weight: 700; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-sub { font-size: 0.78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 0.1rem; }
.w-btn {
  display: inline-block; margin-top: 0.4rem; padding: 0.2rem 0.75rem; border-radius: 7px;
  background: rgba(var(--accent-rgb), 0.22); border: 1px solid rgba(var(--accent-rgb), 0.45);
  color: var(--text); font-weight: 700; font-size: 0.76rem; text-decoration: none; transition: background 0.15s, transform 0.15s;
}
.w-btn:hover { background: rgba(var(--accent-rgb), 0.38); transform: translateY(-1px); }
.w-tag { position: absolute; top: 0.6rem; right: 0.8rem; font-size: 0.7rem; color: var(--muted); opacity: 0.85; white-space: nowrap; }
.widget.w-live .w-tag { color: #1db954; opacity: 1; }
.widget-timezone .w-title, .widget-weather .w-title { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.widget.w-embed-card { padding: 0; overflow: hidden; display: block; background: transparent; border: 0; }
.widget.w-embed-card:hover { transform: none; }
.w-embed { display: block; width: 100%; border: 0; border-radius: 14px; background: rgba(0, 0, 0, 0.3); }
.w-embed-video { aspect-ratio: 16 / 9; height: auto; }
.w-yt {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; cursor: pointer; background: #000; color: #fff; font: inherit;
}
.w-yt img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; transition: opacity 0.2s, transform 0.4s var(--ease); }
.w-yt:hover img { opacity: 1; transform: scale(1.03); }
.w-yt-play {
  position: absolute; left: 50%; top: 50%; width: 62px; height: 44px; margin: -22px 0 0 -31px; border-radius: 12px;
  display: grid; place-items: center; background: #ff0033; font-size: 1.1rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.w-yt-title {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem 0.8rem 0.6rem; text-align: left; font-weight: 700; font-size: 0.85rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 420px) { .w-text { padding-right: 0; } .w-tag { display: none; } }

/* ---------- More card styles (Appearance -> Card style) ---------- */

/* Neon: a sharp glowing border in the accent (or border) color. */
body.card-neon .card-surface {
  background: rgba(var(--card-rgb, 6, 6, 10), var(--card-alpha-style, max(var(--card-alpha), 0.55)));
  border: max(1.5px, var(--card-border)) solid rgba(var(--border-rgb, var(--accent-rgb)), 0.95);
  box-shadow:
    0 0 calc(10px + var(--card-glow, 0.35) * 30px) rgba(var(--border-rgb, var(--accent-rgb)), calc(0.25 + var(--card-glow, 0.35) * 0.6)),
    inset 0 0 calc(8px + var(--card-glow, 0.35) * 22px) rgba(var(--border-rgb, var(--accent-rgb)), calc(0.12 + var(--card-glow, 0.35) * 0.3)),
    0 30px 80px -20px rgba(0, 0, 0, 0.7);
}

/* Gradient: the card is filled with the accent color fading into the card color. */
body.card-gradient .card-surface {
  background:
    linear-gradient(150deg, rgba(var(--accent-rgb), calc(0.2 + var(--card-alpha) * 0.5)) 0%, rgba(var(--card-rgb, 8, 8, 14), var(--card-alpha-style, max(var(--card-alpha), 0.6))) 72%);
  border-color: rgba(var(--border-rgb, var(--accent-rgb)), var(--border-alpha, 0.45));
}

/* Aurora: a slowly turning band of color around the edge. */
@property --aurora-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
body.card-aurora .card-surface {
  border: max(2px, var(--card-border)) solid transparent;
  background:
    linear-gradient(rgba(var(--card-rgb, 8, 8, 14), var(--card-alpha-style, 0.7)), rgba(var(--card-rgb, 8, 8, 14), var(--card-alpha-style, 0.7))) padding-box,
    conic-gradient(from var(--aurora-angle), rgba(var(--accent-rgb), 1), #38bdf8, #a78bfa, #f472b6, rgba(var(--accent-rgb), 1)) border-box;
  animation: aurora-spin 8s linear infinite;
  box-shadow: 0 0 calc(20px + var(--card-glow, 0.35) * 40px) -10px rgba(var(--accent-rgb), calc(0.2 + var(--card-glow, 0.35) * 0.5)), 0 30px 80px -20px rgba(0, 0, 0, 0.65);
}
@keyframes aurora-spin { to { --aurora-angle: 360deg; } }

/* Frost: bright, milky glass. */
body.card-frosted .card-surface {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.1)), rgba(var(--card-rgb, 30, 30, 40), calc(var(--card-alpha) * 0.6));
  border-color: rgba(var(--border-rgb, 255, 255, 255), var(--border-alpha, 0.35));
  backdrop-filter: blur(max(14px, var(--card-blur))) saturate(160%);
  -webkit-backdrop-filter: blur(max(14px, var(--card-blur))) saturate(160%);
}

/* Retro: solid card with a hard offset shadow in the accent color. */
body.card-retro .card-surface {
  background: rgba(var(--card-rgb, 14, 14, 18), var(--card-alpha-style, 0.96));
  backdrop-filter: blur(var(--card-blur-style, 0px)); -webkit-backdrop-filter: blur(var(--card-blur-style, 0px));
  border: max(2px, var(--card-border)) solid rgba(var(--border-rgb, var(--text-rgb)), 0.9);
  box-shadow: 8px 8px 0 0 rgba(var(--accent-rgb), calc(0.45 + var(--card-glow, 0.35) * 0.55));
}
body.card-retro .card { --lift: 0 !important; }
@media (prefers-reduced-motion: reduce) { body.card-aurora .card-surface { animation: none; } }

/* ---------- 3D model (Media & music -> 3D model) ---------- */

.model-layer {
  position: fixed; z-index: 15; width: var(--model-size, 180px); height: var(--model-size, 180px);
  max-width: 70vw; max-height: 70vw; transform: translate(-50%, -50%);
  opacity: 0; transition: opacity 0.6s ease; pointer-events: none;
}
.model-layer.model-back { z-index: 2; }
body.entered .model-layer { opacity: 1; }
.model-layer canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.model-layer.interactive canvas { pointer-events: auto; cursor: grab; }
.model-layer.interactive canvas:active { cursor: grabbing; }
/* Touch screens: the model must not block taps on links or page scrolling. */
@media (pointer: coarse) {
  .model-layer.interactive canvas { pointer-events: none; touch-action: auto; }
}
/* In the dashboard preview the owner drags it to place it. */
.model-layer.placing { pointer-events: auto; cursor: move; outline: 1.5px dashed rgba(255, 255, 255, 0.45); outline-offset: 4px; border-radius: 12px; }
.model-layer.placing canvas { pointer-events: none; }
.model-layer.dragging { outline-color: rgba(var(--accent-rgb), 0.9); }
.model-note {
  position: absolute; left: 50%; top: 100%; transform: translate(-50%, 6px); white-space: nowrap;
  padding: 0.2rem 0.5rem; border-radius: 7px; font: 600 11px var(--ui-font); color: #fff; background: rgba(0, 0, 0, 0.7);
}

/* Discord presence: song link, times, server emoji */
.p-link { color: inherit; text-decoration: none; }
.p-link:hover span { text-decoration: underline; }
.p-times { display: flex; justify-content: space-between; margin-top: 0.2rem; font-size: 0.68rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.p-elapsed { font-variant-numeric: tabular-nums; }
.p-emoji-img { width: 18px; height: 18px; object-fit: contain; flex: none; }

/* ======================================================================
   Link button and badge look (Appearance -> Link buttons, Badges -> Badge layout)
   The default classes (btn-fill-soft, btn-shape-card, btn-h-normal,
   btn-align-left, btn-hover-lift, badge-size-medium, badge-shape-rounded,
   badge-gap-normal, badges-pos-name) have no rules: they are the original look.
   ====================================================================== */

/* Fill */
body.btn-has-color.btn-fill-soft .link-btn { background: rgba(var(--btn-rgb), 0.16); }
body.btn-has-color.btn-fill-soft .link-btn:hover, body.btn-has-color.btn-fill-soft .link-btn:focus-visible { background: rgba(var(--btn-rgb), 0.26); }
body.btn-fill-solid .link-btn { background: rgb(var(--btn-rgb, var(--accent-rgb))); border-color: transparent; color: var(--btn-text, var(--on-btn, var(--on-accent))); }
body.btn-fill-solid .link-btn:hover, body.btn-fill-solid .link-btn:focus-visible { background: rgb(var(--btn-rgb, var(--accent-rgb))); filter: brightness(1.08); }
body.btn-fill-solid .link-btn::before { background: linear-gradient(100deg, rgba(255, 255, 255, 0.2), transparent 70%); }
body.btn-fill-solid .link-btn .lb-sub, body.btn-fill-solid .link-btn .lb-go { color: inherit; opacity: 0.72; }
body.btn-fill-solid .lb-icon { background: rgba(255, 255, 255, 0.18); }
body.btn-fill-solid:not(.icons-brand):not(.icons-accent) .lb-icon { color: inherit; }
body.btn-fill-outline .link-btn { background: transparent; border: 1.5px solid rgba(var(--btn-border-rgb, var(--btn-rgb, var(--text-rgb))), 0.55); }
body.btn-fill-outline .link-btn:hover, body.btn-fill-outline .link-btn:focus-visible { background: rgba(var(--btn-rgb, var(--text-rgb)), 0.08); }
body.btn-fill-glass .link-btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)), rgba(var(--btn-rgb, var(--text-rgb)), 0.08);
  border-color: rgba(255, 255, 255, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
}
body.btn-fill-plain .link-btn { background: transparent; border-color: transparent; }
body.btn-fill-plain .link-btn:hover, body.btn-fill-plain .link-btn:focus-visible { background: var(--soft); }

/* Custom text and border colors (any fill) */
body.btn-has-text .link-btn { color: var(--btn-text); }
body.btn-has-text .link-btn .lb-sub, body.btn-has-text .link-btn .lb-go { color: var(--btn-text); opacity: 0.7; }
body.btn-has-border .link-btn { border-color: rgba(var(--btn-border-rgb), 0.8); }
body.btn-has-border .link-btn:hover, body.btn-has-border .link-btn:focus-visible { border-color: rgb(var(--btn-border-rgb)); }

/* Shape */
body.btn-shape-square .link-btn { border-radius: 4px; }
body.btn-shape-rounded .link-btn { border-radius: 14px; }
body.btn-shape-pill .link-btn { border-radius: 999px; padding-left: 0.45rem; padding-right: 1.1rem; }

/* Height */
body.btn-h-compact .link-btn { min-height: 44px; padding-top: 0.35rem; padding-bottom: 0.35rem; gap: 0.65rem; }
body.btn-h-compact .lb-icon { width: 32px; height: 32px; font-size: 0.95rem; border-radius: 9px; }
body.btn-h-compact .lb-title { font-size: 0.9rem; }
body.btn-h-large .link-btn { min-height: 72px; padding-top: 0.7rem; padding-bottom: 0.7rem; gap: 0.95rem; }
body.btn-h-large .lb-icon { width: 54px; height: 54px; font-size: 1.4rem; border-radius: 14px; }
body.btn-h-large .lb-title { font-size: 1.05rem; }
/* Icon corners follow the button shape (after the height rules so they win) */
body.btn-shape-square .lb-icon { border-radius: 3px; }
body.btn-shape-pill .lb-icon { border-radius: 50%; }

/* Text alignment */
body.btn-align-center .lb-text { align-items: center; text-align: center; }

/* Hover */
body.btn-hover-glow .link-btn:hover, body.btn-hover-glow .link-btn:focus-visible {
  transform: none; box-shadow: 0 0 0 1px rgba(var(--btn-rgb, var(--accent-rgb)), 0.5), 0 0 26px -4px rgba(var(--btn-rgb, var(--accent-rgb)), 0.75);
}
body.btn-hover-none .link-btn:hover, body.btn-hover-none .link-btn:focus-visible { transform: none; box-shadow: none; }
body.btn-hover-none .link-btn::before { display: none; }
body.btn-hover-none .link-btn:hover .lb-icon, body.btn-hover-none .link-btn:hover .lb-go { transform: none; }

/* Two columns (one on narrow screens) */
body.btn-cols-2 .link-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.btn-cols-2 .link-btn:last-child:nth-child(odd) { grid-column: 1 / -1; } /* an odd last button uses the full row */
@media (max-width: 480px) { body.btn-cols-2 .link-buttons { grid-template-columns: minmax(0, 1fr); } }

/* Parts */
body.btn-no-icon .lb-icon { display: none; }
body.btn-no-icon .link-btn { padding-left: 1rem; }
body.btn-no-icon.btn-shape-pill .link-btn { padding-left: 1.2rem; }
body.btn-no-sub .lb-sub:not(.lb-desc) { display: none; } /* a description the owner wrote stays */
body.btn-no-arrow .lb-go { display: none; }
body.btn-profile-font .link-btn { font-family: var(--font-family); }

/* Badges: size, shape, spacing, tiles, names, position */
body.badge-size-small .badge { width: 22px; height: 22px; font-size: 0.7rem; }
body.badge-size-large .badge { width: 36px; height: 36px; font-size: 1.1rem; }
body.badge-shape-circle .badge { border-radius: 50%; }
body.badge-size-xlarge .badge { width: 44px; height: 44px; font-size: 1.35rem; }
body.badge-shape-square .badge { border-radius: 3px; }
body.badge-shape-squircle .badge { border-radius: 34%; }
body.badge-shape-leaf .badge { border-radius: 50% 4px; }
body.badge-gap-tight .badges { gap: 0.1rem; }
body.badge-gap-wide .badges { gap: 0.6rem; }
/* "Tile behind each badge" belongs to the plain style; the other styles draw their own. */
body.badges-tiles.badge-style-plain .badge { background: rgba(var(--badge-rgb), 0.14); }
body.badges-tiles.badge-style-plain .badge:hover, body.badges-tiles.badge-style-plain .badge:focus-visible { background: rgba(var(--badge-rgb), 0.24); }
body.badges-no-tips .badge::after { display: none; }
body.badges-pos-above .identity > .badges { margin: 0 0 0.6rem; }
body.badges-pos-below .identity > .badges { margin: 0.55rem 0 0.15rem; }

/* ======================================================================
   Cursor effects (Effects -> Cursor effect)
   ====================================================================== */

/* Above the enter screen and dialogs (it never takes clicks); the spotlight
   dims the page, so it stays under the enter screen. */
.cursor-fx { z-index: 96; }
.cursor-fx.cursor-fx-spotlight { z-index: 30; }
/* Effects that draw their own pointer hide the system one (not over text fields). */
body.cursor-own, body.cursor-own * { cursor: none; }
body.cursor-own input, body.cursor-own textarea, body.cursor-own select, body.cursor-own [contenteditable] { cursor: auto; }

/* ======================================================================
   More card styles (Appearance -> Card style)
   ====================================================================== */

/* Elevated: a calm, opaque surface with layered soft shadows. */
body.card-elevated .card-surface {
  background: linear-gradient(180deg, rgba(var(--text-rgb), 0.05), rgba(var(--text-rgb), 0.015) 60%), rgba(var(--card-rgb, 17, 17, 23), var(--card-alpha-style, 0.86));
  border: var(--card-border) solid rgba(var(--border-rgb, var(--text-rgb)), var(--border-alpha, 0.09));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 2px 4px rgba(0, 0, 0, 0.22),
    0 12px 24px -8px rgba(0, 0, 0, 0.35),
    0 calc(32px + var(--lift) * 16px) calc(64px + var(--lift) * 24px) -18px rgba(0, 0, 0, 0.6);
}
body.card-elevated.glow-card .card-surface {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 2px 4px rgba(0, 0, 0, 0.22),
    0 12px 24px -8px rgba(0, 0, 0, 0.35),
    0 calc(32px + var(--lift) * 16px) calc(64px + var(--lift) * 24px) -18px rgba(0, 0, 0, 0.6),
    0 0 70px -24px rgba(var(--accent-rgb), calc(var(--card-glow, 0.35) * 0.8));
}

/* Midnight: deep, dark gradient with a lit top edge. */
body.card-midnight .card-surface {
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(var(--accent-rgb), calc(0.08 + var(--card-glow, 0.35) * 0.22)), transparent 62%),
    linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.45)),
    rgba(var(--card-rgb, 10, 12, 24), var(--card-alpha-style, 0.9));
  border: var(--card-border) solid rgba(var(--border-rgb, var(--accent-rgb)), var(--border-alpha, 0.14));
  box-shadow:
    inset 0 1px 0 rgba(var(--border-rgb, var(--accent-rgb)), 0.6),
    0 0 60px -22px rgba(var(--accent-rgb), var(--card-glow, 0.35)),
    0 calc(30px + var(--lift) * 20px) calc(80px + var(--lift) * 30px) -20px rgba(0, 0, 0, 0.75);
}

/* Holographic: a rainbow sheen that drifts slowly and follows the tilt. */
body.card-holo .card-surface {
  border: max(1.5px, var(--card-border)) solid transparent;
  background:
    radial-gradient(130% 90% at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.12), transparent 50%) padding-box,
    linear-gradient(115deg, rgba(255, 110, 196, 0.16), rgba(110, 210, 255, 0.16) 30%, rgba(160, 255, 175, 0.12) 55%, rgba(255, 220, 120, 0.15) 80%, rgba(255, 110, 196, 0.16)) padding-box,
    linear-gradient(rgba(var(--card-rgb, 10, 10, 18), var(--card-alpha-style, 0.5)), rgba(var(--card-rgb, 10, 10, 18), var(--card-alpha-style, 0.5))) padding-box,
    linear-gradient(115deg, #ff7ac8, #7ad7ff, #a8ffb0, #ffe17a, #ff7ac8) border-box;
  background-size: 100% 100%, 240% 240%, 100% 100%, 240% 240%;
  animation: holo-shift 9s ease-in-out infinite alternate;
  box-shadow: 0 0 calc(20px + var(--card-glow, 0.35) * 40px) -14px rgba(160, 200, 255, calc(0.2 + var(--card-glow, 0.35) * 0.5)), 0 30px 80px -20px rgba(0, 0, 0, 0.65);
}
@keyframes holo-shift {
  from { background-position: 0 0, 0% 50%, 0 0, 0% 50%; }
  to { background-position: 0 0, 100% 50%, 0 0, 100% 50%; }
}

/* Luxe: a fine double border (the inner line is an outline inside the card). */
body.card-luxe .card-surface {
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.08), transparent 32%), rgba(var(--card-rgb, 12, 11, 12), var(--card-alpha-style, 0.9));
  border: 1px solid rgba(var(--border-rgb, var(--accent-rgb)), 0.75);
  outline: 1px solid rgba(var(--border-rgb, var(--accent-rgb)), 0.28); outline-offset: -7px;
  box-shadow:
    0 0 0 4px rgba(0, 0, 0, 0.28),
    0 0 0 5px rgba(var(--border-rgb, var(--accent-rgb)), 0.35),
    0 0 50px -14px rgba(var(--accent-rgb), var(--card-glow, 0.35)),
    0 calc(30px + var(--lift) * 20px) calc(80px + var(--lift) * 30px) -20px rgba(0, 0, 0, 0.7);
}

/* Spotlight: the border lights up where the pointer is. */
body.card-spotlight .card-surface {
  border: max(1px, var(--card-border)) solid transparent;
  background:
    radial-gradient(420px circle at var(--gx, 50%) var(--gy, 0%), rgba(var(--accent-rgb), calc(0.06 + var(--card-glow, 0.35) * 0.18)), transparent 45%) padding-box,
    linear-gradient(rgba(var(--card-rgb, 12, 12, 18), var(--card-alpha-style, 0.82)), rgba(var(--card-rgb, 12, 12, 18), var(--card-alpha-style, 0.82))) padding-box,
    radial-gradient(340px circle at var(--gx, 50%) var(--gy, 0%), rgba(var(--border-rgb, var(--accent-rgb)), 0.95), rgba(var(--text-rgb), 0.1) 60%) border-box;
  box-shadow: 0 calc(30px + var(--lift) * 20px) calc(80px + var(--lift) * 30px) -20px rgba(0, 0, 0, 0.7);
}

/* Bold: thick border and a hard, offset block shadow (neo-brutalism). */
body.card-brutal .card-surface {
  border-radius: min(var(--card-radius), 12px);
  background: rgba(var(--card-rgb, 20, 20, 24), var(--card-alpha-style, 1));
  backdrop-filter: blur(var(--card-blur-style, 0px)); -webkit-backdrop-filter: blur(var(--card-blur-style, 0px));
  border: max(3px, var(--card-border)) solid rgb(var(--border-rgb, var(--accent-rgb)));
  box-shadow: 10px 10px 0 0 rgba(0, 0, 0, 0.92), 10px 10px 0 3px rgb(var(--border-rgb, var(--accent-rgb)));
}
body.card-brutal .card { --lift: 0 !important; }
body.card-brutal .glare { display: none; }
@media (max-width: 420px) {
  body.card-brutal .card-surface { box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0.92), 6px 6px 0 2px rgb(var(--border-rgb, var(--accent-rgb))); }
}

/* No card: the content sits on the page, clean and readable, with an accent
   line under the name block like a business card. */
body.card-none .card-surface, body.card-none .glare { display: none; }
body.card-none .name, body.card-none .bio, body.card-none .handle, body.card-none .joined, body.card-none .stats {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 18px rgba(0, 0, 0, 0.4);
}
body.card-none .identity::after {
  content: ""; display: block; width: 44px; height: 2px; margin-top: 0.95rem; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb), 0.25));
}
body.card-none .player-card .player { background: var(--soft); border: 1px solid var(--line); border-radius: 18px; }
body.card-none.has-bg .link-btn, body.card-none.has-bg .presence, body.card-none.has-bg .widget, body.card-none.has-bg .invite {
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
body.layout-minimal .identity::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  body.card-holo .card-surface { animation: none; }
}

/* ======================================================================
   More name effects (Effects -> Name effect)
   ====================================================================== */

.name.fx-gradient {
  background: linear-gradient(100deg, var(--name-color, var(--text)) 25%, var(--accent) 42%, #ffffff 50%, var(--accent) 58%, var(--name-color, var(--text)) 75%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: name-shimmer 4.5s linear infinite;
}
@keyframes name-shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.name.fx-neon {
  color: #fff;
  text-shadow: 0 0 3px #fff, 0 0 10px var(--name-glow), 0 0 22px var(--name-glow), 0 0 44px rgba(var(--name-glow-rgb), 0.75);
  animation: name-neon 5s infinite;
}
@keyframes name-neon {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: 0.55; text-shadow: none; }
}
.name.fx-glitch::before, .name.fx-glitch::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none;
}
.name.fx-glitch::before { color: #ff2d75; animation: glitch-a 3s infinite steps(1); }
.name.fx-glitch::after { color: #2de2ff; animation: glitch-b 3s infinite steps(1); }
.name.fx-chrome {
  background: linear-gradient(180deg, #ffffff 0%, #dfe3e8 38%, #8a9099 50%, #eef1f4 64%, #ffffff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}
@media (prefers-reduced-motion: reduce) {
  .name.fx-gradient, .name.fx-neon, .name.fx-glitch::before, .name.fx-glitch::after { animation: none; }
  .name.fx-glitch::before, .name.fx-glitch::after { display: none; }
}

/* ======================================================================
   More link button looks (Appearance -> Link buttons) and per-link options
   (own color, description, highlight). Defaults keep the original look.
   ====================================================================== */

/* Fills (the text color setting still wins: --btn-text) */
body.btn-fill-gradient .link-btn {
  background: linear-gradient(120deg, rgb(var(--btn-rgb, var(--accent-rgb))), rgba(var(--btn-rgb, var(--accent-rgb)), 0.62));
  border-color: transparent; color: var(--btn-text, var(--on-btn, var(--on-accent)));
}
body.btn-fill-gradient .link-btn:hover, body.btn-fill-gradient .link-btn:focus-visible { background: linear-gradient(120deg, rgb(var(--btn-rgb, var(--accent-rgb))), rgba(var(--btn-rgb, var(--accent-rgb)), 0.8)); }
body.btn-fill-brand .link-btn { background: rgb(var(--brand-rgb)); border-color: transparent; color: var(--btn-text, var(--on-brand, #fff)); }
body.btn-fill-brand .link-btn:hover, body.btn-fill-brand .link-btn:focus-visible { background: rgb(var(--brand-rgb)); filter: brightness(1.1); }
body.btn-fill-brand .link-btn.lb-colored { background: rgb(var(--btn-rgb)); color: var(--btn-text, var(--on-btn)); }
body.btn-fill-gradient .link-btn .lb-sub, body.btn-fill-gradient .link-btn .lb-go,
body.btn-fill-brand .link-btn .lb-sub, body.btn-fill-brand .link-btn .lb-go { color: inherit; opacity: 0.75; }
body.btn-fill-gradient .lb-icon, body.btn-fill-brand .lb-icon { background: rgba(255, 255, 255, 0.18); color: inherit; }
body.btn-fill-gradient .link-btn::before, body.btn-fill-brand .link-btn::before { background: linear-gradient(100deg, rgba(255, 255, 255, 0.22), transparent 70%); }
body.btn-fill-neon .link-btn {
  background: rgba(var(--btn-rgb, var(--accent-rgb)), 0.06);
  border: 1.5px solid rgba(var(--btn-border-rgb, var(--btn-rgb, var(--accent-rgb))), 0.95);
  box-shadow: 0 0 12px rgba(var(--btn-rgb, var(--accent-rgb)), 0.4), inset 0 0 12px rgba(var(--btn-rgb, var(--accent-rgb)), 0.18);
}
body.btn-fill-neon .lb-title { text-shadow: 0 0 10px rgba(var(--btn-rgb, var(--accent-rgb)), 0.65); }
body.btn-fill-neon .link-btn:hover, body.btn-fill-neon .link-btn:focus-visible {
  background: rgba(var(--btn-rgb, var(--accent-rgb)), 0.12);
  box-shadow: 0 0 22px rgba(var(--btn-rgb, var(--accent-rgb)), 0.65), inset 0 0 16px rgba(var(--btn-rgb, var(--accent-rgb)), 0.3);
}
body.btn-fill-raised .link-btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent), rgba(var(--btn-rgb, var(--text-rgb)), 0.1);
  border-color: rgba(var(--btn-border-rgb, var(--btn-rgb, var(--text-rgb))), 0.2);
  box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
body.btn-fill-raised .link-btn:hover, body.btn-fill-raised .link-btn:focus-visible { box-shadow: 0 6px 0 0 rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.14); }
body.btn-fill-raised .link-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.55); }
body.btn-fill-underline .link-btn {
  background: transparent; border: 0; border-radius: 0;
  border-bottom: 1px solid rgba(var(--btn-border-rgb, var(--btn-rgb, var(--text-rgb))), 0.2);
  padding-left: 0.15rem; padding-right: 0.25rem;
}
body.btn-fill-underline .link-btn:hover, body.btn-fill-underline .link-btn:focus-visible {
  background: transparent; border-bottom-color: rgba(var(--btn-rgb, var(--accent-rgb)), 0.9);
}
body.btn-fill-underline .link-btn::before { background: linear-gradient(90deg, rgba(var(--btn-rgb, var(--accent-rgb)), 0.1), transparent 80%); }
body.btn-fill-underline .lb-icon { background: transparent; }
body.btn-fill-underline .link-btn:last-child { border-bottom-color: transparent; }
body.btn-fill-underline .link-btn:last-child:hover { border-bottom-color: rgba(var(--btn-rgb, var(--accent-rgb)), 0.9); }

/* Hovers */
body.btn-hover-shine .link-btn::before {
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 0.75s var(--ease);
}
body.btn-hover-shine .link-btn:hover::before, body.btn-hover-shine .link-btn:focus-visible::before { transform: translateX(120%); }
body.btn-hover-grow .link-btn:hover, body.btn-hover-grow .link-btn:focus-visible { transform: scale(1.03); }
body.btn-hover-grow .link-btn:active { transform: scale(0.99); }
body.btn-hover-slide .link-btn:hover, body.btn-hover-slide .link-btn:focus-visible { transform: translateX(6px); }
body.btn-hover-slide .link-btn:hover .lb-go { transform: translateX(6px); }
body.btn-hover-fill .link-btn:hover, body.btn-hover-fill .link-btn:focus-visible {
  background: rgb(var(--btn-rgb, var(--accent-rgb))); border-color: transparent; color: var(--on-btn, var(--on-accent));
}
body.btn-hover-fill .link-btn:hover .lb-sub, body.btn-hover-fill .link-btn:hover .lb-go,
body.btn-hover-fill .link-btn:focus-visible .lb-sub, body.btn-hover-fill .link-btn:focus-visible .lb-go { color: inherit; opacity: 0.75; }
body.btn-hover-fill .link-btn:hover .lb-icon, body.btn-hover-fill .link-btn:focus-visible .lb-icon { color: inherit; background: rgba(255, 255, 255, 0.2); }
body.btn-hover-fill .link-btn::before { display: none; }

/* Shadow */
body.btn-shadow-soft .link-btn { box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.6); }
body.btn-shadow-strong .link-btn { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 16px 30px -12px rgba(0, 0, 0, 0.85); }
body.btn-shadow-glow .link-btn { box-shadow: 0 0 26px -8px rgba(var(--btn-rgb, var(--accent-rgb)), 0.7); }

/* Spacing */
body.btn-gap-tight .link-buttons { gap: 0.32rem; }
body.btn-gap-wide .link-buttons { gap: 0.9rem; }

/* Icon style */
body.btn-icon-circle .link-btn .lb-icon { border-radius: 50%; }
body.btn-icon-plain .link-btn .lb-icon { background: transparent; width: 30px; }
body.btn-icon-plain .link-btn .lb-icon .link-img[src*="/media/"] { border-radius: 6px; width: 28px; height: 28px; }

/* Text size and capitals */
body.btn-text-small .link-btn .lb-title { font-size: 0.86rem; }
body.btn-text-small .link-btn .lb-sub { font-size: 0.7rem; }
body.btn-text-large .link-btn .lb-title { font-size: 1.1rem; }
body.btn-text-large .link-btn .lb-sub { font-size: 0.84rem; }
body.btn-caps .link-btn .lb-title { text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.86em; }

/* Entrance: buttons appear one by one (--n is the button's place). Uses the
   separate translate/scale properties so hover transforms still work. */
body.btn-enter-rise .link-btn, body.btn-enter-slide .link-btn, body.btn-enter-pop .link-btn { opacity: 0; }
body.entered.btn-enter-rise .link-btn { animation: lb-rise 0.55s var(--ease) forwards; }
body.entered.btn-enter-slide .link-btn { animation: lb-slide 0.55s var(--ease) forwards; }
body.entered.btn-enter-pop .link-btn { animation: lb-pop 0.45s var(--ease) forwards; }
body.entered.btn-enter-rise .link-btn, body.entered.btn-enter-slide .link-btn, body.entered.btn-enter-pop .link-btn {
  animation-delay: calc(var(--n, 0) * 70ms + 300ms);
}
@keyframes lb-rise { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes lb-slide { from { opacity: 0; translate: -22px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes lb-pop { from { opacity: 0; scale: 0.9; } 70% { scale: 1.02; } to { opacity: 1; scale: 1; } }
body.no-reveal .link-btn { opacity: 1 !important; animation: none !important; }

/* Own color for one link */
.link-btn.lb-colored { border-color: rgba(var(--btn-rgb), 0.45); }
.link-btn.lb-colored:hover, .link-btn.lb-colored:focus-visible { border-color: rgba(var(--btn-rgb), 0.75); }
.link-btn.lb-colored::before { background: linear-gradient(100deg, rgba(var(--btn-rgb), 0.26), transparent 70%); }
body.btn-fill-soft .link-btn.lb-colored { background: rgba(var(--btn-rgb), 0.15); }
body.btn-fill-soft .link-btn.lb-colored:hover, body.btn-fill-soft .link-btn.lb-colored:focus-visible { background: rgba(var(--btn-rgb), 0.25); }
body:not(.btn-fill-solid):not(.btn-fill-brand):not(.btn-fill-gradient) .link-btn.lb-colored .lb-icon { color: var(--link-color); background: rgba(var(--btn-rgb), 0.16); }
body.btn-fill-underline .link-btn.lb-colored .lb-icon, body.btn-icon-plain .link-btn.lb-colored .lb-icon { background: transparent; }
body .links a.lb-colored { color: var(--link-color); }
body.icon-shape-filled .links a.icon-only.lb-colored, body.icon-shape-filled .links a.icon-only.lb-colored:hover { background: var(--link-color); color: var(--on-btn, #fff); }

/* Highlighted link: a light running around the edge */
@property --lb-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
body .link-btn.lb-featured {
  box-shadow: 0 0 0 1px rgba(var(--btn-rgb, var(--accent-rgb)), 0.35), 0 10px 30px -12px rgba(var(--btn-rgb, var(--accent-rgb)), 0.85);
}
.link-btn.lb-featured::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--lb-angle), transparent 0 55%, rgba(var(--btn-rgb, var(--accent-rgb)), 1) 75%, #ffffff 80%, rgba(var(--btn-rgb, var(--accent-rgb)), 1) 85%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: lb-spin 3.2s linear infinite;
}
@keyframes lb-spin { to { --lb-angle: 360deg; } }
.links a.lb-featured { border-color: rgba(var(--hover-rgb), 0.7); animation: lb-pulse 2.4s ease-in-out infinite; }
@keyframes lb-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--hover-rgb), 0.55); } 50% { box-shadow: 0 0 0 7px rgba(var(--hover-rgb), 0); } }
@media (prefers-reduced-motion: reduce) {
  .link-btn.lb-featured::after { animation: none; background: rgba(var(--btn-rgb, var(--accent-rgb)), 0.9); }
  .links a.lb-featured { animation: none; box-shadow: 0 0 0 2px rgba(var(--hover-rgb), 0.6); }
}

/* Small phones: tighter buttons so long titles still fit. */
@media (max-width: 380px) {
  .link-btn { gap: 0.65rem; padding-right: 0.75rem; }
  .lb-icon { width: 38px; height: 38px; font-size: 1.05rem; }
  body.btn-h-large .lb-icon { width: 46px; height: 46px; }
  body.btn-hover-slide .link-btn:hover { transform: none; }
}

/* ======================================================================
   Link cards (big image), locked and scheduled links
   ====================================================================== */

.link-btn.link-card { flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
.link-card .lc-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--soft-2); }
.link-card .lc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--ease); }
.link-card:hover .lc-thumb img, .link-card:focus-visible .lc-thumb img { transform: scale(1.04); }
.link-card .lc-row { display: flex; align-items: center; gap: 0.8rem; padding: 0.6rem 0.9rem 0.65rem 0.6rem; min-width: 0; }
body.btn-cols-2 .link-btn.link-card { grid-column: 1 / -1; }
body.btn-fill-underline .link-btn.link-card { border-radius: 10px; border: 1px solid var(--line); }

.link-btn.lb-locked .lb-go { font-size: 0.8rem; }
.links a.lb-locked::after { content: attr(data-tip) " · locked"; }
.links a.lb-age::after { content: attr(data-tip) " · 18+"; }
/* Dashboard preview only: a scheduled link outside its time shows dimmed. */
.lb-scheduled { opacity: 0.45; filter: grayscale(0.6); }
.lb-scheduled::before { content: none !important; }

.modal .modal-link {
  display: inline-flex; align-items: center; padding: 0.6rem 1rem; border-radius: 10px; font-weight: 600; text-decoration: none;
  background: var(--accent); color: var(--on-accent, #0b0c0f); border: 1px solid var(--accent);
}
.lock-modal h3 i { font-size: 0.9em; opacity: 0.75; margin-right: 0.15rem; }
.lock-modal input[type="password"] {
  width: 100%; padding: 0.65rem 0.75rem; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.4); color: #f5f5f7; font: inherit; font-size: 0.95rem;
}
.lock-modal input[type="password"]:focus { outline: none; border-color: var(--accent); }
.lock-modal button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #0b0c0f); }
@media (hover: none) and (pointer: coarse) { .lock-modal input[type="password"] { font-size: 16px; } }

/* ======================================================================
   Content blocks (text, image, gallery, video, divider)
   ====================================================================== */

.blocks { display: grid; gap: 0.75rem; margin-top: 1rem; text-align: left; font-family: var(--ui-font); }
.block { min-width: 0; }
.block-text { padding: 0.85rem 1rem; border-radius: 16px; background: var(--soft); border: 1px solid var(--line); }
.block-title { margin: 0 0 0.3rem; font: 700 1rem var(--font-family); letter-spacing: -0.01em; }
.block-body { margin: 0; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.55; font-size: 0.92rem; opacity: 0.9; }
.block-image { margin: 0; }
.block-image img, .block-image-link { display: block; width: 100%; border-radius: 16px; }
.block-image img { max-height: 520px; object-fit: cover; background: var(--soft-2); cursor: zoom-in; }
.block-image-link img { cursor: pointer; transition: transform 0.3s var(--ease), filter 0.3s; }
.block-image-link:hover img { filter: brightness(1.06); }
.block-image figcaption, .block-caption { margin: 0.4rem 0.2rem 0; font-size: 0.8rem; color: var(--muted); }
.block-gallery { display: grid; gap: 0.4rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.block-gallery.g-1 { grid-template-columns: minmax(0, 1fr); }
.block-gallery.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.block-gallery.g-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery-item { padding: 0; border: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 1; background: var(--soft-2); cursor: zoom-in; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s var(--ease); }
.gallery-item:hover img, .gallery-item:focus-visible img { transform: scale(1.05); }
.block-video .w-yt { border-radius: 16px; }
.block-video .w-embed-video { border-radius: 16px; }
.block-video-file { display: block; width: 100%; border-radius: 16px; background: #000; max-height: 520px; }
.block-divider { display: flex; align-items: center; gap: 0.75rem; color: var(--muted); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; }
.block-divider::before, .block-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.block-divider.plain::after { display: none; }
@media (max-width: 420px) { .block-gallery.g-3, .block-gallery.g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Photo viewer */
.lightbox {
  position: fixed; inset: 0; z-index: 92; display: grid; place-items: center; padding: 3.5rem 1rem;
  background: rgba(0, 0, 0, 0.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade 0.2s ease;
}
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 12px; object-fit: contain; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); }
.lb-btn {
  position: absolute; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(20, 20, 28, 0.8); color: #fff; display: grid; place-items: center; cursor: pointer; font-size: 1rem;
}
.lb-btn:hover { background: rgba(40, 40, 52, 0.95); }
.lb-close { top: max(0.9rem, env(safe-area-inset-top)); right: max(0.9rem, env(safe-area-inset-right)); }
.lb-prev { left: max(0.6rem, env(safe-area-inset-left)); top: 50%; translate: 0 -50%; }
.lb-next { right: max(0.6rem, env(safe-area-inset-right)); top: 50%; translate: 0 -50%; }

/* ======================================================================
   Dashboard preview: click-to-edit and drag to reorder
   ====================================================================== */

body.edit-mode .card :is(.avatar-wrap, #name, #bio, #badges:not(:empty), #handle, .presence, .widgets, .player, .stats, [data-li], [data-block]),
body.edit-mode .page-footer { cursor: pointer; }
body.edit-mode .card :is(.avatar-wrap, #name, #bio, #badges:not(:empty), .presence, .widgets, .player, .stats, [data-li], [data-block]):hover,
body.edit-mode .page-footer:hover {
  outline: 2px dashed rgba(var(--accent-rgb), 0.85); outline-offset: 4px; border-radius: 12px;
}
body.edit-drag, body.edit-drag * { cursor: grabbing !important; user-select: none; }
.edit-dragging { position: relative; z-index: 20; opacity: 0.9; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important; transition: none !important; }
.edit-drop { outline: 2px solid var(--accent) !important; outline-offset: 3px; }

/* ======================================================================
   Live Discord status: layouts, edge colors and extras (Widgets -> Live status look)
   ====================================================================== */

.presence { position: relative; overflow: hidden; isolation: isolate; flex-wrap: wrap; }
.presence > .p-text { flex: 1; }
.p-devices { display: inline-flex; gap: 0.3rem; margin-left: auto; color: var(--muted); font-size: 0.72rem; }
.p-watch {
  display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.4rem; padding: 0.2rem 0.65rem; border-radius: 7px;
  background: #9146ff; color: #fff; font-weight: 700; font-size: 0.75rem; text-decoration: none;
}
.p-watch:hover { filter: brightness(1.1); }
.p-recent { flex-basis: 100%; display: grid; gap: 0.2rem; margin-top: 0.15rem; padding-top: 0.55rem; border-top: 1px solid var(--line); font-size: 0.75rem; }
.p-recent-title { color: var(--muted); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; }
.p-recent-row { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.p-recent-row i { width: 1rem; text-align: center; color: var(--muted); }
.p-recent-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-recent-when { color: var(--muted); flex: none; }

/* Edge color */
.presence-accent-status.presence-online { border-color: rgba(35, 165, 90, 0.55); }
.presence-accent-status.presence-idle { border-color: rgba(240, 178, 50, 0.55); }
.presence-accent-status.presence-dnd { border-color: rgba(242, 63, 67, 0.55); }
.presence-accent-activity.presence-listening { border-color: rgba(29, 185, 84, 0.6); box-shadow: inset 0 0 0 1px rgba(29, 185, 84, 0.15); }
.presence-accent-activity.presence-streaming { border-color: rgba(145, 70, 255, 0.65); }
.presence-accent-activity.presence-playing { border-color: rgba(var(--accent-rgb), 0.55); }
.presence-accent-theme:not(.presence-loading) { border-color: rgba(var(--accent-rgb), 0.28); }

/* Compact: one line */
.presence.presence-compact { padding: 0.5rem 0.65rem; gap: 0.6rem; }
.presence-compact .p-avatar { width: 36px; height: 36px; }
.presence-compact .p-avatar > img:not(.p-deco), .presence-compact .p-avatar > i { font-size: 1rem; }
.presence-compact .p-status { width: 13px; height: 13px; border-width: 2px; }
.presence-compact .p-status i { display: none; }
.presence-compact .p-name-row { font-size: 0.88rem; }
.presence-compact .p-detail:not(.p-elapsed) { display: none; }
.presence-compact .p-art { width: 36px; height: 36px; border-radius: 9px; }

/* Banner: bigger, with the album or game art blurred behind */
.presence.presence-banner { padding: 1rem; gap: 1rem; min-height: 112px; }
.presence-banner .p-avatar { width: 72px; height: 72px; }
.presence-banner .p-art { width: 72px; height: 72px; border-radius: 14px; }
.presence-banner .p-name { font-size: 1.1rem; }
.presence-banner.has-banner::before {
  content: ""; position: absolute; inset: -20px; z-index: -1;
  background: var(--p-banner) center / cover no-repeat; filter: blur(22px) saturate(140%); opacity: 0.45;
}
.presence-banner.has-banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.2)); }

/* Status only: a small pill */
.presence.presence-minimal {
  display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 0.45rem; width: auto; max-width: 100%;
  padding: 0.35rem 0.75rem; border-radius: 999px; font-size: 0.85rem; justify-self: center;
}
.card .presence.presence-minimal { margin-left: auto; margin-right: auto; }
body.align-left .card .presence.presence-minimal, body.layout-wide .card .presence.presence-minimal { margin-left: 0; }
.p-dot { width: 9px; height: 9px; border-radius: 50%; background: #747f8d; flex: none; }
.p-dot.online { background: #23a55a; box-shadow: 0 0 8px #23a55a; }
.p-dot.idle { background: #f0b232; }
.p-dot.dnd { background: #f23f43; }
.p-word { font-weight: 700; }
.p-mini { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@media (max-width: 420px) {
  .presence.presence-banner { padding: 0.8rem; gap: 0.75rem; }
  .presence-banner .p-avatar, .presence-banner .p-art { width: 58px; height: 58px; }
}

/* Countdown and FAQ blocks */
.block-countdown, .block-faq { padding: 0.85rem 1rem; border-radius: 16px; background: var(--soft); border: 1px solid var(--line); }
.cd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.cd-cell { display: grid; justify-items: center; gap: 0.1rem; padding: 0.6rem 0.25rem; border-radius: 12px; background: var(--soft-2); }
.cd-cell strong { font: 800 clamp(1.25rem, 5vw, 1.6rem) / 1 var(--font-family); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.cd-cell small { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.cd-done { margin: 0.2rem 0; font: 800 1.2rem var(--font-family); text-align: center; color: var(--accent); }
.cd-when { display: block; margin-top: 0.5rem; text-align: center; font-size: 0.75rem; color: var(--muted); }
.faq-item { border-top: 1px solid var(--line); }
.block-faq .block-title + .faq-item, .block-faq .faq-item:first-child { border-top: 0; }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.65rem 0; cursor: pointer; list-style: none; font-weight: 600; font-size: 0.92rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i { font-size: 0.75rem; color: var(--muted); transition: transform 0.25s var(--ease); }
.faq-item[open] summary i { transform: rotate(180deg); }
.faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.faq-item p { margin: 0 0 0.75rem; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.55; font-size: 0.88rem; opacity: 0.85; }
.lb-copy .lb-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ======================================================================
   Badge styles (Badges -> Badge layout -> Style). "plain" is the original
   look and has no rules. Sizes and shapes from the other options still apply.
   ====================================================================== */
body.badge-style-glass .badges, body.badge-style-solid .badges, body.badge-style-ring .badges,
body.badge-style-gradient .badges, body.badge-style-labeled .badges, body.badge-style-hexagon .badges,
body.badge-style-raised .badges, body.badge-style-holo .badges, body.badge-style-floating .badges,
body.badge-style-stacked .badges { background: transparent; border-color: transparent; }
body.badge-style-glass .badges, body.badge-style-ring .badges, body.badge-style-raised .badges { gap: 0.4rem; }

body.badge-style-glass .badge {
  border-radius: 50%; background: rgba(var(--text-rgb), 0.08); border: 1px solid rgba(var(--text-rgb), 0.18);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 4px 14px rgba(0, 0, 0, 0.3);
}
body.badge-style-solid .badge { background: var(--badge-color); color: #0b0c10; box-shadow: 0 3px 10px rgba(var(--badge-rgb), 0.35); }
body.badge-style-solid .badge:hover, body.badge-style-solid .badge:focus-visible { background: var(--badge-color); }
body.badge-style-ring .badge { border-radius: 50%; border: 1.5px solid rgba(var(--badge-rgb), 0.85); }
body.badge-style-neon .badges { background: rgba(0, 0, 0, 0.35); }
body.badge-style-neon .badge { border: 1px solid rgba(var(--badge-rgb), 0.9); box-shadow: 0 0 8px rgba(var(--badge-rgb), 0.65), inset 0 0 8px rgba(var(--badge-rgb), 0.3); }
body.badge-style-neon .badge i, body.badge-style-neon .badge img { filter: drop-shadow(0 0 4px rgba(var(--badge-rgb), 0.95)); }
body.badge-style-gradient .badge {
  color: #fff; border-radius: 10px;
  background: linear-gradient(145deg, rgba(var(--badge-rgb), 1), rgba(var(--badge-rgb), 0.45) 70%, rgba(0, 0, 0, 0.4));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 12px rgba(var(--badge-rgb), 0.3);
}
body.badge-style-gradient .badge i, body.badge-style-gradient .badge img { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4)); }
body.badge-style-labeled .badge {
  width: auto; padding: 0 0.6rem 0 0.5rem; gap: 0.35rem; display: inline-flex; align-items: center; border-radius: 999px;
  background: rgba(var(--badge-rgb), 0.14); border: 1px solid rgba(var(--badge-rgb), 0.35);
}
body.badge-style-labeled .badge i { font-size: 0.75em; }
body.badge-style-labeled .badge img { width: 1.05em; height: 1.05em; }
.badge-name { font: 700 0.74rem var(--ui-font); white-space: nowrap; }
body.badge-style-shine .badge {
  background: linear-gradient(110deg, rgba(var(--badge-rgb), 0.16) 40%, rgba(255, 255, 255, 0.42) 50%, rgba(var(--badge-rgb), 0.16) 60%);
  background-size: 260% 100%; animation: badge-shine 2.8s ease-in-out infinite;
}
body.badge-style-shine .badge:nth-child(2) { animation-delay: 0.2s; }
body.badge-style-shine .badge:nth-child(3) { animation-delay: 0.4s; }
body.badge-style-shine .badge:nth-child(4) { animation-delay: 0.6s; }
body.badge-style-shine .badge:nth-child(n+5) { animation-delay: 0.8s; }
@keyframes badge-shine { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0 0; } }
body.badge-style-hexagon .badges { gap: 0.2rem; }
body.badge-style-hexagon .badge {
  border-radius: 0; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); color: #fff;
  background: linear-gradient(180deg, rgba(var(--badge-rgb), 0.6), rgba(var(--badge-rgb), 0.22));
}
body.badge-style-hexagon .badge::after { display: none; } /* clip-path would cut the tip: the name shows as a title instead */
body.badge-style-raised .badge {
  background: linear-gradient(180deg, #2b2b36, #1a1a22); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--badge-color);
  box-shadow: 0 3px 0 rgba(var(--badge-rgb), 0.75), 0 6px 12px rgba(0, 0, 0, 0.45); transform: translateY(-2px);
}
body.badge-style-raised .badge:hover, body.badge-style-raised .badge:focus-visible { transform: translateY(-3px); background: linear-gradient(180deg, #30303c, #1d1d26); }
@property --badge-turn { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
body.badge-style-holo .badge {
  color: #fff; border: 1.5px solid transparent;
  background: linear-gradient(#15151c, #15151c) padding-box,
    conic-gradient(from var(--badge-turn), #ff6ad5, #c774e8, #ad8cff, #8795e8, #94d0ff, #7cffcb, #ff6ad5) border-box;
  animation: badge-turn 4s linear infinite;
}
@keyframes badge-turn { to { --badge-turn: 360deg; } }
body.badge-style-floating .badge { border-radius: 50%; background: rgba(var(--badge-rgb), 0.15); animation: badge-bob 2.4s var(--ease) infinite; }
body.badge-style-floating .badge:nth-child(2) { animation-delay: 0.15s; }
body.badge-style-floating .badge:nth-child(3) { animation-delay: 0.3s; }
body.badge-style-floating .badge:nth-child(4) { animation-delay: 0.45s; }
body.badge-style-floating .badge:nth-child(n+5) { animation-delay: 0.6s; }
@keyframes badge-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
body.badge-style-stacked .badges { gap: 0; padding-left: 0.6rem; }
body.badge-style-stacked .badge {
  border-radius: 50%; margin-left: -0.5rem; background: #16161d; border: 2px solid #0e0e14;
  box-shadow: inset 0 0 0 1.5px rgba(var(--badge-rgb), 0.7);
}
body.badge-style-stacked .badge:hover, body.badge-style-stacked .badge:focus-visible { z-index: 2; background: #1d1d26; }
body.badge-style-frame .badges { background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); border-color: rgba(250, 204, 21, 0.25); border-radius: 8px; }
body.badge-style-frame .badge {
  border-radius: 4px; border: 1px solid rgba(var(--badge-rgb), 0.6);
  background: radial-gradient(circle at 50% 35%, rgba(var(--badge-rgb), 0.35), rgba(0, 0, 0, 0.4));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}
@media (prefers-reduced-motion: reduce) {
  body.badge-style-shine .badge, body.badge-style-holo .badge, body.badge-style-floating .badge { animation: none; }
}

/* ======================================================================
   Music player look (Media & music -> Music player look). "classic",
   "bars" and "rounded" are the original look and have no rules.
   --player-color / --player-rgb: the owner's player color (else the accent).
   ====================================================================== */
.player { --pc: var(--player-color, var(--accent)); --pc-rgb: var(--player-rgb, var(--accent-rgb)); --on-pc: var(--on-player, var(--on-accent)); }
.player .pbtn.main { background: var(--pc); color: var(--on-pc); box-shadow: 0 6px 18px -4px rgba(var(--pc-rgb), 0.7); }
.player .pbtn.main:hover { background: var(--pc); }
.player .player-art { background: rgba(var(--pc-rgb), 0.22); position: relative; overflow: hidden; }
.player .player-art span { background: var(--pc); }
.player input[type="range"] { background: linear-gradient(90deg, var(--pc) var(--fill, 0%), var(--soft-2) var(--fill, 0%)); }
.player input[type="range"]::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(var(--pc-rgb), 0.45); }
.player.player-no-title .player-title { display: none; }
.player.player-no-title .player-sub { font-size: 0.82rem; color: var(--text); }

/* Shapes */
body.player-shape-pill .player { border-radius: 999px; padding-left: 0.6rem; padding-right: 1rem; }
body.player-shape-pill .player .player-art { border-radius: 50%; }
body.player-shape-square .player, body.player-shape-square .player-card .card-surface { border-radius: 4px; }
body.player-shape-square .player .player-art { border-radius: 3px; }
body.player-shape-square .player .pbtn { border-radius: 4px; }

/* Art: a record (disc), the owner's avatar, or none */
body.player-art-disc .player-art, body.player-art-avatar .player-art { border-radius: 50%; padding: 0; }
body.player-art-disc .player-art span, body.player-art-avatar .player-art span { display: none; }
body.player-art-disc .player-art {
  background: radial-gradient(circle, rgba(var(--pc-rgb), 0.9) 0 16%, #111 17% 22%, #1d1d24 23% 40%, #111 41% 43%, #1d1d24 44% 62%, #111 63% 65%, #1d1d24 66%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
body.player-art-avatar .player-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.player-art-disc .player.playing .player-art, body.player-art-avatar .player.playing .player-art { animation: player-spin 4s linear infinite; }
body.player-art-none .player-art { display: none; }
@keyframes player-spin { to { rotate: 360deg; } }

/* Compact: one row, a thin progress line under it */
body.player-layout-compact .player { padding: 0.5rem 0.6rem; }
body.player-layout-compact .player-art { width: 34px; height: 34px; padding: 8px 7px; }
body.player-layout-compact .player-bottom { margin-top: 0.35rem; }
body.player-layout-compact .player .time, body.player-layout-compact #player-mute, body.player-layout-compact .vol { display: none; }
body.player-layout-compact .player input.seek { height: 3px; }

/* Vinyl: a big spinning record next to the song */
body.player-layout-vinyl .player-top { gap: 1rem; }
body.player-layout-vinyl .player-art { width: 64px; height: 64px; }
body.player-layout-vinyl:not(.player-art-avatar):not(.player-art-none) .player-art {
  border-radius: 50%; padding: 0;
  background: radial-gradient(circle, rgba(var(--pc-rgb), 0.9) 0 16%, #111 17% 22%, #1d1d24 23% 40%, #111 41% 43%, #1d1d24 44% 62%, #111 63% 65%, #1d1d24 66%);
}
body.player-layout-vinyl:not(.player-art-avatar) .player-art span { display: none; }
body.player-layout-vinyl .player.playing .player-art { animation: player-spin 3.2s linear infinite; }
body.player-layout-vinyl .player-title { font-size: 1rem; }

/* Floating and bar: on the screen itself, outside the card */
.player.player-docked {
  position: fixed; z-index: 15; margin: 0;
  background: rgba(12, 12, 18, 0.72); border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.6); color: #fff;
  --soft-2: rgba(255, 255, 255, 0.16); --muted: rgba(255, 255, 255, 0.62);
}
body.player-layout-floating .player.player-docked {
  left: max(1rem, env(safe-area-inset-left)); bottom: max(1rem, env(safe-area-inset-bottom)); width: min(300px, calc(100vw - 2rem));
}
body.player-layout-bar .player.player-docked {
  left: 0; right: 0; bottom: 0; border-radius: 0; border-width: 1px 0 0; padding: 0.55rem max(1rem, env(safe-area-inset-right)) max(0.55rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  display: flex; align-items: center; gap: 1rem;
}
body.player-layout-bar .player.player-docked .player-top { flex: 0 1 auto; min-width: 0; }
body.player-layout-bar .player.player-docked .player-bottom { flex: 1; margin: 0; max-width: 520px; }
body.player-layout-bar .stage { padding-bottom: 5rem; }
body.player-layout-bar .watermark { bottom: calc(max(1.1rem, env(safe-area-inset-bottom)) + 4.2rem); }
body.player-layout-bar .corner-btn { bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 4.2rem); }
body.player-layout-floating .stats.stats-corner { left: auto; right: max(1rem, env(safe-area-inset-right)); }
body.player-shape-pill.player-layout-bar .player.player-docked { border-radius: 0; }
/* Phones: floating and bar both sit across the bottom */
@media (max-width: 640px) {
  body.player-layout-floating .player.player-docked { left: 0.6rem; right: 0.6rem; width: auto; bottom: max(0.6rem, env(safe-area-inset-bottom)); }
  body.player-layout-bar .player.player-docked { display: block; }
  body.player-layout-bar .player.player-docked .player-bottom { margin-top: 0.4rem; max-width: none; }
  body.player-layout-floating .stage, body.player-layout-bar .stage { padding-bottom: 6.5rem; }
  body.player-layout-floating .watermark, body.player-layout-bar .watermark { margin-bottom: 6.5rem; }
}

/* Hidden: only a small round sound button */
.player-mini {
  position: fixed; z-index: 15; left: max(1rem, env(safe-area-inset-left)); bottom: max(1rem, env(safe-area-inset-bottom));
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 0.95rem;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform 0.15s, background 0.15s;
}
.player-mini:hover { transform: scale(1.06); }
.player-mini.playing { background: var(--player-color, var(--accent)); color: var(--on-player, var(--on-accent)); border-color: transparent; box-shadow: 0 0 0 0 rgba(var(--player-rgb, var(--accent-rgb)), 0.5); animation: ring 2.2s infinite; }
.player-mini:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .player.playing .player-art, .player-mini.playing { animation: none !important; }
}

/* ======================================================================
   Enter screen button and look (Effects -> Enter screen). "play",
   "circle", "medium", "dark", "center", "zoom" and "ui" are the original look.
   ====================================================================== */
.enter.enter-icon-custom .enter-ring i { margin-left: 0; }
.enter-ring { position: relative; overflow: hidden; }
.enter-ring-avatar { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.enter.enter-icon-avatar .enter-ring { padding: 0; }
.enter-btn-rounded .enter-ring { border-radius: 30%; }
.enter-btn-square .enter-ring { border-radius: 6px; }
.enter-btn-outline .enter-ring { background: transparent; border-width: 2px; border-color: rgba(var(--enter-rgb), 0.9); }
.enter-btn-glass .enter-ring {
  background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.enter-btn-solid .enter-ring { background: rgb(var(--enter-rgb)); border-color: transparent; color: #0b0c10; }
.enter-btn-bare .enter-ring { background: transparent; border-color: transparent; box-shadow: none !important; font-size: 1.8rem; }
.enter-btn-bare .enter-ring i { filter: drop-shadow(0 2px 12px rgba(var(--enter-rgb), 0.7)); }
.enter-size-small .enter-ring { width: 48px; height: 48px; font-size: 0.9rem; }
.enter-size-large .enter-ring { width: 92px; height: 92px; font-size: 1.6rem; }
.enter-size-large.enter-icon .enter-ring { width: 112px; height: 112px; font-size: 2rem; }
.enter-size-small.enter-btn-bare .enter-ring { font-size: 1.3rem; }
.enter-size-large.enter-btn-bare .enter-ring { font-size: 2.6rem; }
.enter-overlay-light { background: rgba(255, 255, 255, 0.22); }
.enter-overlay-gradient { background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.85) 100%); }
.enter-overlay-clear { background: transparent; }
.enter-pos-bottom { place-items: end center; padding-bottom: max(4rem, calc(env(safe-area-inset-bottom) + 3rem)); }
.enter-pos-top { place-items: start center; padding-top: max(5rem, calc(env(safe-area-inset-top) + 4rem)); }
.enter-font-profile span#enter-text, .enter-font-profile .enter-who-name { font-family: var(--font-family); }
.enter-who { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; margin-bottom: 0.25rem; }
.enter-who-avatar { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px rgba(var(--enter-rgb), 0.5), 0 12px 40px rgba(0, 0, 0, 0.5); }
.enter-who-name { font: 800 clamp(1.4rem, 6vw, 2.1rem) var(--ui-font); letter-spacing: -0.01em; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6); text-align: center; max-width: 90vw; overflow-wrap: anywhere; }
/* How it leaves */
.enter.enter-exit-fade.leaving .enter-inner { transform: none; }
.enter.enter-exit-slide { transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.enter.enter-exit-slide.leaving { transform: translateY(-100%); opacity: 1; }
.enter.enter-exit-slide.leaving .enter-inner { transform: none; }
.enter.enter-exit-blur { transition: opacity 0.7s var(--ease), filter 0.7s var(--ease); }
.enter.enter-exit-blur.leaving { filter: blur(24px); }
.enter.enter-exit-blur.leaving .enter-inner { transform: scale(0.96); }
@media (prefers-reduced-motion: reduce) {
  .enter.enter-exit-slide.leaving { transform: none; opacity: 0; }
}
/* Phones hide the small player picture to save room; the vinyl look keeps its record. */
@media (max-width: 420px) {
  body.player-layout-vinyl:not(.player-art-none) .player-art { display: flex; width: 52px; height: 52px; }
}