:root {
  --accent: #ffffff;
  --accent-soft: #d7d7d7;
  --glass: rgba(255, 255, 255, 0.13);
  --glass-strong: rgba(255, 255, 255, 0.20);
  --border: rgba(255, 255, 255, 0.25);
  --shadow: rgba(255, 255, 255, 0.42);
  --content-scale: 1;
  --player-bottom: 90px;
  --font-main: Inter, Arial, Helvetica, sans-serif;
  --volume-pct: 72%;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body {
  overflow: hidden;
  background: #000;
  color: #fff;
  font-family: var(--font-main);
  user-select: none;
}
button, input, textarea, select { font: inherit; }
a { color: inherit; text-decoration: none; }

.background-host {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #000;
  overflow: hidden;
  opacity: 0;
  transition: opacity .55s ease;
}
body.entered .background-host { opacity: 1; }
.background-host img,
.background-host video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: blur(var(--bg-blur, 0px));
  transform: scale(var(--bg-scale, 1));
}
.background-host video { background: #000; }
.shade {
  position: fixed;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.10), rgba(0,0,0,.1) 22%, rgba(0,0,0,.72) 78%),
    rgba(0,0,0,var(--overlay, .56));
  pointer-events: none;
  opacity: 0;
  transition: opacity .55s ease;
}
body.entered .shade { opacity: 1; }

.enter-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: #000;
  transition: opacity .55s ease, visibility .55s ease;
}
.enter-overlay::before,
.enter-overlay::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  width: 110px;
  height: 110px;
  filter: blur(28px);
  opacity: .15;
  background: #fff;
}
.enter-overlay::before { top: 25px; left: 25px; }
.enter-overlay::after { left: 50%; top: 38%; transform: translate(-50%, -50%); opacity: .06; }
body.entered .enter-overlay { opacity: 0; visibility: hidden; pointer-events: none; }
.enter-text {
  color: #fff;
  font-weight: 800;
  font-size: clamp(18px, 1.8vw, 31px);
  letter-spacing: -.03em;
  text-shadow: 0 0 18px rgba(255,255,255,.85), 0 2px 20px rgba(255,255,255,.16);
  animation: breathe 1.9s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { opacity: .86; transform: scale(1); } 50% { opacity: 1; transform: scale(1.025); } }

.stage {
  position: fixed;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(8px) scale(.985);
  transition: opacity .7s ease .1s, transform .7s cubic-bezier(.2,.8,.2,1) .1s;
  pointer-events: none;
}
body.entered .stage { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.hero {
  transform: scale(var(--content-scale));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  min-width: min(92vw, 680px);
  padding: 18px;
  will-change: transform;
}
.avatar-wrap {
  position: relative;
  width: 112px;
  height: 112px;
  margin-bottom: -2px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 0 26px rgba(255,255,255,.42));
}
.avatar {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  object-fit: cover;
  background: #080808;
  border: 2px solid rgba(255,255,255,.72);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), 0 0 35px rgba(255,255,255,.32);
}
.avatar-decoration {
  display: none;
  position: absolute;
  inset: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
}
.avatar-decoration[src]:not([src=""]) { display: block; }
.nameplate {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 11px 4px;
  border-radius: 9px;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .05em;
  line-height: 1;
  color: #101010;
  text-shadow: 0 1px rgba(255,255,255,.25);
  background: linear-gradient(180deg, #c9ff41, #39d4ff 55%, #0769ff);
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 0 16px rgba(0, 210, 255, .7), inset 0 0 12px rgba(255,255,255,.45);
}
.username {
  margin: -2px 0 0;
  line-height: .9;
  font-size: clamp(34px, 4.3vw, 50px);
  font-weight: 900;
  letter-spacing: -.055em;
  text-shadow: 0 0 13px rgba(255,255,255,.88), 0 0 32px rgba(255,255,255,.30);
}
.username span { position: relative; }
body.particle-text .username span::after {
  content: "";
  position: absolute;
  inset: auto 3px -11px 3px;
  height: 18px;
  background-image: radial-gradient(circle, rgba(255,255,255,.9) 1.2px, transparent 2px);
  background-size: 9px 7px;
  opacity: .52;
  filter: blur(.2px);
  pointer-events: none;
}
.subtitle, .location {
  margin: 0;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(255,255,255,.4);
}
.subtitle { font-size: clamp(14px, 1.25vw, 18px); max-width: min(86vw, 720px); line-height: 1.28; white-space: normal; overflow-wrap: anywhere; }
.location { font-size: 14px; opacity: .95; }
.location::before { content: "●"; font-size: 10px; margin-right: 6px; color: var(--accent); filter: drop-shadow(0 0 6px rgba(255,255,255,.8)); }

.discord-card {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 296px;
  max-width: min(86vw, 370px);
  min-height: 78px;
  padding: 10px 15px 10px 12px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,.25), rgba(255,255,255,.11));
  border: 1px solid rgba(255,255,255,.27);
  box-shadow: inset 0 1px rgba(255,255,255,.19), 0 20px 52px rgba(0,0,0,.36), 0 0 26px rgba(255,255,255,.14);
  backdrop-filter: blur(17px) saturate(145%);
  -webkit-backdrop-filter: blur(17px) saturate(145%);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.discord-card:hover { transform: translateY(-2px) scale(1.018); background: linear-gradient(135deg, rgba(255,255,255,.32), rgba(255,255,255,.15)); box-shadow: inset 0 1px rgba(255,255,255,.25), 0 18px 60px rgba(0,0,0,.38), 0 0 38px rgba(255,255,255,.18); }
.discord-avatar-wrap { position: relative; flex: 0 0 auto; }
.discord-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  background: #050505;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
.status-dot {
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #747f8d;
  border: 3px solid rgba(40,40,40,.96);
  box-shadow: 0 0 10px rgba(255,255,255,.2);
}
.status-dot.online { background: #23a55a; }
.status-dot.idle { background: #f0b232; }
.status-dot.dnd { background: #f23f43; }
.discord-info { min-width: 0; flex: 1; text-align: left; display: grid; gap: 3px; }
.discord-title-row { display: flex; align-items: center; gap: 5px; min-width: 0; }
.discord-title-row strong { font-size: 17px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.discord-subtitle { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.78); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.guild-tag, .tiny-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.23);
  flex: 0 0 auto;
}
.guild-tag { color: #101010; background: linear-gradient(135deg,#ff9f1c,#fff); }
.tiny-badges { display: inline-flex; gap: 3px; }

.socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: min(90vw, 430px);
  margin-top: 6px;
}
.social {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  filter: drop-shadow(0 0 11px rgba(255,255,255,.68));
  transition: transform .16s ease, filter .16s ease;
}
.social:hover { transform: translateY(-3px) scale(1.1); filter: drop-shadow(0 0 18px rgba(255,255,255,.92)); }
.social img { width: 31px; height: 31px; object-fit: contain; display: block; }
.badges {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 4px;
}
.badge {
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.52);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 0 18px rgba(0,0,0,.35);
  font-size: 13px;
  font-weight: 800;
}
.views {
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 12px rgba(255,255,255,.68);
  filter: drop-shadow(0 0 7px rgba(255,255,255,.24));
}
.eye { width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center; }
.eye svg { width: 17px; height: 17px; fill: #fff; display: block; }

.volume-control {
  position: fixed;
  top: 17px;
  left: 14px;
  z-index: 8;
  height: 55px;
  width: 55px;
  border-radius: 15px;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(115,115,115,.42);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  overflow: hidden;
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 11px 38px rgba(0,0,0,.36), inset 0 1px rgba(255,255,255,.12);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: width .22s cubic-bezier(.2,.8,.2,1), background .18s ease, opacity .28s ease, transform .28s ease, box-shadow .18s ease;
  cursor: default;
}
body.entered .volume-control { opacity: 1; pointer-events: auto; transform: translateY(0); }
.volume-control:hover,
.volume-control:focus-within,
.volume-control.open { width: 196px; background: rgba(132,132,132,.58); box-shadow: 0 12px 42px rgba(0,0,0,.40), inset 0 1px rgba(255,255,255,.16), 0 0 20px rgba(255,255,255,.08); }
.volume-control.muted { opacity: .92; }
.volume-icon {
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.volume-icon svg { width: 27px; height: 27px; fill: currentColor; filter: drop-shadow(0 0 4px rgba(255,255,255,.35)); }
.volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 118px;
  height: 28px;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease .05s;
  cursor: pointer;
  touch-action: none;
}
.volume-control:hover .volume-slider,
.volume-control:focus-within .volume-slider,
.volume-control.open .volume-slider { opacity: 1; pointer-events: auto; }
.volume-slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.97) 0 var(--volume-pct), rgba(255,255,255,.28) var(--volume-pct) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -5px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.0);
  box-shadow: none;
}
.volume-control:hover .volume-slider::-webkit-slider-thumb,
.volume-control.open .volume-slider::-webkit-slider-thumb,
.volume-slider:focus::-webkit-slider-thumb { background: rgba(255,255,255,.95); box-shadow: 0 0 10px rgba(255,255,255,.55); }
.volume-slider::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.28);
}
.volume-slider::-moz-range-progress {
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.97);
}
.volume-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 0;
  background: transparent;
}
.volume-control:hover .volume-slider::-moz-range-thumb,
.volume-control.open .volume-slider::-moz-range-thumb,
.volume-slider:focus::-moz-range-thumb { background: rgba(255,255,255,.95); box-shadow: 0 0 10px rgba(255,255,255,.55); }

.player {
  position: fixed;
  left: 50%;
  bottom: var(--player-bottom);
  z-index: 7;
  transform: translate(-50%, 18px);
  width: min(650px, calc(100vw - 28px));
  display: grid;
  grid-template-columns: 62px minmax(92px, 155px) 45px minmax(170px, 1fr) 45px 32px 42px 32px;
  align-items: center;
  gap: 11px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .55s ease .2s, transform .55s ease .2s;
  text-shadow: 0 0 10px rgba(255,255,255,.34);
  --seek-pct: 0%;
}
body.entered .player { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.track-cover {
  width: 62px;
  height: 62px;
  object-fit: cover;
  border-radius: 10px;
  background: rgba(255,255,255,.16);
  box-shadow: 0 0 20px rgba(0,0,0,.25), 0 0 18px rgba(255,255,255,.06);
  flex: 0 0 auto;
}
.track-meta { min-width: 0; text-align: left; line-height: 1.05; }
.track-meta strong { display: block; font-size: 18px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.track-meta span { display: block; margin-top: 3px; font-size: 13px; color: rgba(255,255,255,.78); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.track-meta span:empty { display: none; }
.time { font-size: 16px; font-weight: 800; color: rgba(255,255,255,.88); min-width: 42px; font-variant-numeric: tabular-nums; }
.seek {
  appearance: none;
  width: 100%;
  height: 18px;
  background: transparent;
  cursor: pointer;
}
.seek::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, rgba(255,255,255,.98) 0 var(--seek-pct), rgba(255,255,255,.42) var(--seek-pct) 100%); border-radius: 99px; }
.seek::-webkit-slider-thumb { appearance: none; width: 12px; height: 12px; margin-top: -5px; border-radius: 50%; background: rgba(255,255,255,0); box-shadow: none; }
.seek:hover::-webkit-slider-thumb, .seek:focus::-webkit-slider-thumb { background: rgba(255,255,255,.95); box-shadow: 0 0 11px rgba(255,255,255,.65); }
.seek::-moz-range-track { height: 2px; background: rgba(255,255,255,.42); border-radius: 99px; }
.seek::-moz-range-progress { height: 2px; background: rgba(255,255,255,.98); border-radius: 99px; }
.seek::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: transparent; }
.seek:hover::-moz-range-thumb, .seek:focus::-moz-range-thumb { background: rgba(255,255,255,.95); box-shadow: 0 0 11px rgba(255,255,255,.65); }
.player-btn {
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.92);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  font-weight: 900;
  cursor: pointer;
  filter: drop-shadow(0 0 5px rgba(255,255,255,.32));
  transition: transform .12s ease, color .12s ease, filter .12s ease;
}
.player-btn svg { width: 22px; height: 22px; fill: currentColor; display:block; }
.player-btn:hover { transform: scale(1.14); color: #fff; filter: drop-shadow(0 0 9px rgba(255,255,255,.55)); }
.player-btn.play svg { width: 26px; height: 26px; }
.spotify-panel {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 11px;
  width: min(340px, calc(100vw - 36px));
  padding: 10px;
  border-radius: 20px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
}
.spotify-panel img { width: 58px; height: 58px; object-fit: cover; border-radius: 12px; }
.spotify-meta { min-width: 0; flex: 1; display: grid; gap: 3px; }
.spotify-meta strong, .spotify-meta span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.spotify-meta span { opacity: .75; font-size: 13px; }
.spotify-progress { height: 4px; background: rgba(255,255,255,.18); border-radius: 99px; overflow: hidden; }
.spotify-progress i { display: block; height: 100%; width: 0%; background: #fff; border-radius: inherit; box-shadow: 0 0 8px rgba(255,255,255,.55); }

body.ready .hero { animation: floatIn .8s cubic-bezier(.2,.8,.2,1) both; }
@keyframes floatIn { from { opacity: 0; transform: translateY(16px) scale(.98); filter: blur(6px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }

@media (max-width: 720px) {
  .hero { min-width: 100vw; padding: 16px 12px; gap: 10px; }
  .username { font-size: 38px; }
  .player {
    bottom: 42px;
    grid-template-columns: 54px 1fr 38px 44px 38px;
    grid-template-areas:
      "cover meta meta meta meta"
      "elapsed seek seek seek duration"
      ". prev play next .";
    gap: 8px;
    padding: 0 12px;
  }
  .track-cover { grid-area: cover; width: 54px; height: 54px; }
  .track-meta { grid-area: meta; }
  #elapsed { grid-area: elapsed; }
  #seek { grid-area: seek; }
  #duration { grid-area: duration; }
  #prevBtn { grid-area: prev; }
  #playBtn { grid-area: play; }
  #nextBtn { grid-area: next; }
  .spotify-panel { display: none !important; }
}

/* Added: cleaned UI */
.player.empty {
  display: none !important;
}
.spotify-panel {
  display: none !important;
}

/* Robust uploaded cursor support.
   PNG/GIF/WebP/SVG/JPG cursors use a JS overlay so big images and animated GIFs work.
   .cur files still use the native CSS cursor. */
.custom-cursor-layer {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147483647;
  width: 34px;
  height: 34px;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-9999px, -9999px, 0);
  will-change: transform;
  transition: opacity .08s ease;
}
.custom-cursor-layer.visible.loaded { opacity: 1; }
.custom-cursor-layer img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
@media (pointer: fine) {
  html.custom-cursor-overlay-active,
  html.custom-cursor-overlay-active *,
  body.custom-cursor-overlay-active,
  body.custom-cursor-overlay-active * {
    cursor: none !important;
  }
  html.custom-cursor-native,
  html.custom-cursor-native *,
  body.custom-cursor-native,
  body.custom-cursor-native * {
    cursor: var(--custom-cursor) !important;
  }
}

/* Premium RPC card upgrade */
.discord-card {
  position: relative;
  isolation: isolate;
  max-width: min(90vw, 430px);
  min-width: min(90vw, 340px);
  align-items: center;
  overflow: hidden;
}
.discord-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.075));
  opacity: .95;
}
.discord-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -2;
  border-radius: inherit;
  background: radial-gradient(circle at 12% 50%, var(--presence-glow, rgba(255,255,255,.22)), transparent 55%);
  opacity: .82;
  filter: blur(12px);
}
.discord-card.status-online { --presence-glow: rgba(35,165,90,.40); }
.discord-card.status-idle { --presence-glow: rgba(240,178,50,.40); }
.discord-card.status-dnd { --presence-glow: rgba(242,63,67,.42); }
.discord-card.presence-spotify { --presence-glow: rgba(29,185,84,.40); }
.presence-kicker {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 1px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.84);
  font-size: 10px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .05em;
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.discord-detail {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.62);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.discord-detail[hidden] { display: none !important; }
.activity-art-wrap {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,.34);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px rgba(255,255,255,.10), 0 0 18px rgba(255,255,255,.08);
}
.activity-art-wrap[hidden] { display: none !important; }
.activity-art { width: 100%; height: 100%; object-fit: cover; display: block; }
.presence-progress {
  display: block;
  height: 3px;
  margin-top: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  overflow: hidden;
}
.presence-progress[hidden] { display: none !important; }
.presence-progress i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: rgba(255,255,255,.95);
  box-shadow: 0 0 12px rgba(255,255,255,.65);
}
.presence-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}
.presence-platforms:empty { display: none; }
.presence-platforms span {
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.70);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

/* Stronger mobile support */
@supports (height: 100dvh) {
  html, body { min-height: 100dvh; }
  .stage, .enter-overlay, .background-host, .shade { min-height: 100dvh; }
}
@media (max-width: 760px), (max-height: 720px) {
  body { overflow: hidden; }
  .volume-control { top: calc(10px + env(safe-area-inset-top)); left: calc(10px + env(safe-area-inset-left)); height: 48px; width: 48px; border-radius: 14px; padding: 0 11px; }
  .volume-control:hover, .volume-control:focus-within, .volume-control.open { width: min(184px, calc(100vw - 20px)); }
  .volume-slider { width: 112px; }
  .hero { width: min(100vw, 520px); min-width: 0; max-height: calc(100dvh - 150px); overflow: visible; gap: 9px; padding: 12px; }
  .avatar-wrap { width: 96px; height: 96px; }
  .avatar { width: 76px; height: 76px; }
  .username { font-size: clamp(32px, 12vw, 44px); }
  .subtitle { font-size: 14px; max-width: 92vw; }
  .location { font-size: 12px; }
  .discord-card { min-width: 0; width: min(92vw, 390px); border-radius: 21px; padding: 9px 11px; gap: 9px; }
  .discord-avatar { width: 50px; height: 50px; }
  .activity-art-wrap { width: 46px; height: 46px; flex-basis: 46px; border-radius: 12px; }
  .discord-title-row strong { font-size: 15px; }
  .discord-subtitle { font-size: 12px; }
  .discord-detail { font-size: 11px; }
  .social { width: 38px; height: 38px; }
  .badges { gap: 7px; }
  .badge { padding: 6px 10px; font-size: 12px; }
  .views { font-size: 13px; }
}
@media (max-width: 520px) {
  .player {
    width: calc(100vw - 20px);
    bottom: max(16px, env(safe-area-inset-bottom));
    grid-template-columns: 48px minmax(0, 1fr) 34px 38px 34px;
    grid-template-areas:
      "cover meta meta meta meta"
      "elapsed seek seek seek duration"
      ". prev play next .";
    gap: 7px;
    padding: 10px 12px;
    border-radius: 18px;
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .track-cover { grid-area: cover; width: 48px; height: 48px; }
  .track-meta { grid-area: meta; }
  .track-meta strong { font-size: 15px; }
  .track-meta span { font-size: 12px; }
  #elapsed { grid-area: elapsed; }
  #seek { grid-area: seek; }
  #duration { grid-area: duration; }
  #prevBtn { grid-area: prev; }
  #playBtn { grid-area: play; }
  #nextBtn { grid-area: next; }
  .time { font-size: 12px; min-width: 32px; }
  .player-btn { width: 36px; height: 32px; }
}
@media (max-width: 390px) {
  .hero { transform: scale(.94); }
  .discord-card { width: 94vw; }
  .activity-art-wrap { display: none !important; }
}

/* Mobile/public polish v2.6 */
html, body {
  min-height: var(--app-height, 100dvh);
}
.enter-overlay,
.stage,
.background-host,
.shade {
  min-height: var(--app-height, 100dvh);
}
button, .social, .discord-card, .player-btn, .volume-icon {
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 720px) {
  body { overflow: hidden; touch-action: manipulation; }
  .enter-text { font-size: clamp(19px, 6vw, 28px); padding: 0 18px; text-align: center; }
  .stage { padding: max(14px, env(safe-area-inset-top)) 12px max(18px, env(safe-area-inset-bottom)); }
  .hero {
    width: min(100%, 430px);
    min-width: 0;
    max-width: calc(100vw - 22px);
    padding: 12px 10px 126px;
    gap: 9px;
  }
  .avatar-wrap { width: clamp(104px, 30vw, 132px); height: clamp(104px, 30vw, 132px); }
  .username {
    max-width: 94vw;
    font-size: clamp(34px, 11vw, 54px);
    line-height: .94;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .subtitle, .location { max-width: 92vw; font-size: 14px; }
  .discord-card {
    width: min(94vw, 390px);
    min-height: 76px;
    padding: 9px 10px;
    border-radius: 20px;
    gap: 9px;
  }
  .discord-avatar-wrap { width: 52px; height: 52px; }
  .discord-title-row { gap: 5px; }
  .discord-info { min-width: 0; }
  .discord-subtitle, .discord-detail { font-size: 12px; }
  .activity-art-wrap { width: 48px; height: 48px; border-radius: 14px; }
  .socials { gap: 8px; max-width: 94vw; }
  .social { width: 38px; height: 38px; border-radius: 11px; }
  .social img { width: 28px; height: 28px; }
  .badges { max-width: 94vw; gap: 7px; }
  .badge { font-size: 12px; padding: 6px 10px; }
  .views { font-size: 14px; }
  .volume-control {
    top: max(12px, env(safe-area-inset-top));
    left: max(10px, env(safe-area-inset-left));
    width: 48px;
    height: 48px;
    border-radius: 14px;
    padding: 0 11px;
  }
  .volume-control:hover,
  .volume-control:focus-within,
  .volume-control.open { width: min(188px, calc(100vw - 22px)); }
  .volume-icon, .volume-icon svg { width: 25px; height: 25px; }
  .volume-slider { width: 108px; }
  .player {
    bottom: max(18px, env(safe-area-inset-bottom));
    width: min(96vw, 430px);
    grid-template-columns: 52px 1fr 38px 42px 38px;
    grid-template-areas:
      "cover meta meta meta meta"
      "elapsed seek seek seek duration"
      ". prev play next .";
    row-gap: 8px;
    column-gap: 8px;
    padding: 10px 12px;
    border-radius: 22px;
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .track-cover { grid-area: cover; width: 52px; height: 52px; border-radius: 12px; }
  .track-meta { grid-area: meta; }
  .track-meta strong { font-size: 15px; }
  .track-meta span { font-size: 12px; }
  #elapsed { grid-area: elapsed; }
  #seek { grid-area: seek; min-height: 26px; }
  #duration { grid-area: duration; }
  #prevBtn { grid-area: prev; }
  #playBtn { grid-area: play; }
  #nextBtn { grid-area: next; }
  .time { font-size: 12px; min-width: 34px; text-align: center; }
  .player-btn { width: 38px; height: 38px; }
  .spotify-panel { display: none !important; }
}
@media (max-width: 390px) {
  .hero { padding-bottom: 118px; }
  .discord-card { width: calc(100vw - 18px); }
  .activity-art-wrap { display: none !important; }
  .player { width: calc(100vw - 16px); padding: 9px 10px; }
  .username { font-size: clamp(31px, 10vw, 46px); }
}


/* Server tag fix: no floating nameplate above the avatar. */
.nameplate { display: none !important; }
.guild-tag {
  gap: 4px;
  height: 22px;
  padding: 0 7px 0 5px;
  color: #fff;
  background: linear-gradient(135deg, var(--tag-a, #ff7a18), var(--tag-b, #ffd166));
  border: 1px solid rgba(255,255,255,.26);
  box-shadow: inset 0 1px rgba(255,255,255,.22), 0 0 14px color-mix(in srgb, var(--tag-a, #ff7a18) 55%, transparent);
  text-shadow: 0 1px 1px rgba(0,0,0,.38);
}
.guild-tag-emoji {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  font-size: 12px;
  line-height: 1;
}
.guild-tag-emoji img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; display: block; }
.tiny-badges { display: none !important; }

@media (max-width: 640px) {
  .guild-tag { height: 20px; padding-inline: 5px 6px; font-size: 10px; }
}


/* Better Discord-like status colors */
.status-dot.online{background:#23a559;box-shadow:0 0 12px rgba(35,165,89,.9)}
.status-dot.idle{background:#f0b232;box-shadow:0 0 12px rgba(240,178,50,.8)}
.status-dot.dnd{background:#f23f43;box-shadow:0 0 12px rgba(242,63,67,.8)}
.status-dot.offline{background:#80848e;box-shadow:none}
.discord-card.status-online{--status:#23a559}.discord-card.status-idle{--status:#f0b232}.discord-card.status-dnd{--status:#f23f43}.discord-card.status-offline{--status:#80848e}
.discord-card{box-shadow:0 18px 60px rgba(0,0,0,.38),0 0 0 1px color-mix(in srgb,var(--status,#80848e) 30%,transparent)}
.guild-tag.animated{animation:tagPulse 2.4s ease-in-out infinite}
@keyframes tagPulse{0%,100%{filter:saturate(1);transform:translateY(0)}50%{filter:saturate(1.45) brightness(1.08);transform:translateY(-1px)}}
.fx-particle{position:fixed;z-index:2;top:-30px;pointer-events:none;color:#fff;text-shadow:0 0 12px currentColor;animation:particleFall linear forwards}
.fx-hearts{color:#ff4d6d}.fx-sparks{color:#fbbf24}.fx-stars{color:#c4b5fd}.fx-rain{color:#93c5fd;filter:blur(.2px)}
@keyframes particleFall{to{transform:translate3d(var(--drift,20px),110vh,0) rotate(220deg);opacity:0}}