#displayName,
.enterText {
  position: relative;
}


#displayName::before,
#displayName::after,
.enterText::before,
.enterText::after {
  content: attr(data-glitch-text);
  position: absolute;
  inset: 0;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  white-space: pre;
  color: inherit;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  visibility: hidden;
}

#displayName.glitch-active::before,
.enterText.glitch-active::before {
  visibility: visible;
  text-shadow: -2px 0 rgba(255, 83, 99, 0.78);
  animation: tan-glitch-top 280ms steps(2, end) both;
}

#displayName.glitch-active::after,
.enterText.glitch-active::after {
  visibility: visible;
  text-shadow: 2px 0 rgba(100, 225, 255, 0.78);
  animation: tan-glitch-bottom 280ms steps(2, end) both;
}

@keyframes tan-glitch-top {
  0%, 100% { opacity: 0; transform: translateX(0); clip-path: inset(0 0 65% 0); }
  15% { opacity: .86; transform: translateX(2px); clip-path: inset(9% 0 59% 0); }
  38% { opacity: .70; transform: translateX(-3px); clip-path: inset(37% 0 40% 0); }
  64% { opacity: .85; transform: translateX(1px); clip-path: inset(16% 0 64% 0); }
  82% { opacity: .65; transform: translateX(-1px); clip-path: inset(29% 0 48% 0); }
}

@keyframes tan-glitch-bottom {
  0%, 100% { opacity: 0; transform: translateX(0); clip-path: inset(67% 0 0 0); }
  17% { opacity: .75; transform: translateX(-2px); clip-path: inset(62% 0 9% 0); }
  43% { opacity: .85; transform: translateX(3px); clip-path: inset(56% 0 21% 0); }
  70% { opacity: .72; transform: translateX(-1px); clip-path: inset(72% 0 4% 0); }
  88% { opacity: .70; transform: translateX(2px); clip-path: inset(48% 0 31% 0); }
}


.profileCard {
  position: relative;
  transition: border-color 260ms ease, box-shadow 260ms ease;
}

.profileCard:hover {
  border-color: rgba(255, 255, 255, 0.17);
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.52),
              0 0 25px rgba(255, 255, 255, 0.045);
}


.profileCard::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 3px,
    rgba(255, 255, 255, .22) 3px,
    rgba(255, 255, 255, .22) 4px
  );
  opacity: 0;
  transition: opacity 280ms ease;
}

.profileCard:hover::after {
  opacity: .07;
}


.profileCard.signal-lock {
  animation: tan-signal-lock 340ms linear both;
}

@keyframes tan-signal-lock {
  0% { filter: none; }
  18% { filter: brightness(1.11); }
  23% { filter: none; }
  45% { filter: brightness(1.06); }
  51%, 100% { filter: none; }
}


.socialButton:focus-visible {
  outline: 1px solid rgba(255, 255, 255, .8);
  outline-offset: 6px;
  border-radius: 5px !important;
}


.glitch-menu {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  width: min(290px, calc(100vw - 24px));
  padding: 10px;
  border-radius: 16px;
  background: rgba(7, 10, 14, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55),
              0 0 20px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.98);
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
  pointer-events: none;
  overflow: hidden;
}

.glitch-menu.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.glitch-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 3px,
    rgba(255,255,255,0.18) 3px,
    rgba(255,255,255,0.18) 4px
  );
  opacity: 0.06;
  pointer-events: none;
}

.glitch-menu-header {
  position: relative;
  padding: 8px 10px 12px;
  font-size: 12px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
}

.glitch-menu-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.glitch-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 12px 14px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: white;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: default;
  user-select: none;
  pointer-events: auto;
}

.glitch-menu-item:hover {
  background: rgba(255,255,255,0.055);
}

.glitch-menu-item:focus,
.glitch-menu-item:active {
  outline: none;
}

.glitch-menu-item .shortcut {
  color: rgba(255,255,255,0.46);
  font-size: 12px;
  letter-spacing: 0.5px;
}

.glitch-label {
  position: relative;
  display: inline-block;
}

.glitch-label::before,
.glitch-label::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.glitch-menu-item.glitch-burst .glitch-label::before {
  opacity: 0.8;
  transform: translateX(-2px);
  text-shadow: -2px 0 rgba(255, 83, 99, 0.80);
}

.glitch-menu-item.glitch-burst .glitch-label::after {
  opacity: 0.8;
  transform: translateX(2px);
  text-shadow: 2px 0 rgba(100, 225, 255, 0.80);
}

.glitch-menu-item.glitch-burst .glitch-label,
.glitch-menu.glitch-burst .glitch-menu-header {
  animation: menu-label-jitter 160ms steps(2, end) 1;
}

@keyframes menu-label-jitter {
  0% { transform: translateX(0); }
  25% { transform: translateX(1px); }
  50% { transform: translateX(-2px); }
  75% { transform: translateX(1px); }
  100% { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  #displayName::before,
  #displayName::after,
  .enterText::before,
  .enterText::after {
    display: none !important;
    animation: none !important;
  }
  .profileCard.signal-lock {
    animation: none;
  }
  .profileCard,
  .profileCard::after,
  .glitch-menu,
  .glitch-menu-item,
  .glitch-label,
  .glitch-menu-header {
    transition: none;
    animation: none !important;
  }
}




.glitch-menu.visible {
  animation: tan-menu-enter .42s steps(1, end) both;
  transform-origin: 15% 12%;
}
.glitch-menu.menu-closing {
  pointer-events: none;
  animation: tan-menu-exit .24s steps(1, end) both;
}
@keyframes tan-menu-enter {
  0% { opacity: 0; clip-path: inset(48% 0 43% 0); transform: translate(-14px, 7px) skewX(9deg) scale(.94); filter: brightness(2.2); }
  12% { opacity: .85; clip-path: inset(0 0 70% 0); transform: translate(7px,-3px) skewX(-5deg) scale(1.025); filter: brightness(1.5); }
  22% { opacity: .25; clip-path: inset(36% 0 15% 0); transform: translate(-6px,2px) skewX(4deg) scale(.99); }
  31% { opacity: 1; clip-path: inset(0); transform: translate(2px,0) skewX(-2deg) scale(1.01); filter: brightness(1.25); }
  43% { opacity: .6; clip-path: inset(73% 0 0 0); transform: translate(-4px,0); }
  55% { opacity: 1; clip-path: inset(0); transform: translate(0) scale(1); filter: brightness(1); }
  70% { transform: translate(1px,0); }
  100% { opacity: 1; clip-path: inset(0); transform: translate(0) scale(1); filter: none; }
}
@keyframes tan-menu-exit {
  0% { opacity: 1; clip-path: inset(0); transform: translateX(0); }
  45% { opacity: .95; clip-path: inset(50% 0 20% 0); transform: translateX(7px) skewX(-5deg); }
  100% { opacity: 0; clip-path: inset(0 0 95% 0); transform: translateX(-8px); }
}
.glitch-menu::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, transparent 0%, rgba(177, 6, 31, .38) 47%, transparent 52%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}
.glitch-menu.visible::after {
  animation: tan-menu-sweep .49s linear both;
}
@keyframes tan-menu-sweep {
  0% { opacity: .8; transform: translateY(-100%); }
  65% { opacity: .5; }
  100% { opacity: 0; transform: translateY(100%); }
}
.glitch-menu-item {
  transition: color .12s ease, background .12s ease;
}
.glitch-menu-item:hover,
.glitch-menu-item:focus-visible {
  color: #ff344f;
  background: rgba(175, 5, 27, .15);
}
.glitch-menu-item:focus-visible {
  outline: 1px solid rgba(240, 38, 65, .75);
}
.glitch-menu-item:active {
  background: rgba(200, 8, 33, .24);
}


.tan-load-glitch {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.26) 0px, rgba(0,0,0,.26) 2px, transparent 3px, transparent 6px),
    linear-gradient(93deg, transparent 35%, rgba(230,16,52,.14) 49%, rgba(67,217,246,.11) 53%, transparent 66%);
  mix-blend-mode: screen;
  opacity: 0;
  visibility: hidden;
}
.tan-load-glitch.running {
  visibility: visible;
  animation: tan-reload-interference .80s steps(1, end) both;
}
.tan-load-glitch.running.strong {
  animation-duration: 1.05s;
}
.tan-load-glitch.leaving {
  visibility: visible;
  animation: tan-reload-out .39s steps(1, end) both;
}
@keyframes tan-reload-interference {
  0% { opacity: .60; clip-path: inset(0 0 88% 0); transform: translateX(-8px); }
  12% { opacity: .48; clip-path: inset(30% 0 40% 0); transform: translateX(7px); }
  19% { opacity: .12; clip-path: inset(10% 0 10% 0); transform: translateX(0); }
  26% { opacity: .6; clip-path: inset(62% 0 4% 0); transform: translateX(-12px); }
  32% { opacity: 0; }
  40% { opacity: .36; clip-path: inset(0); transform: translateX(2px); }
  52% { opacity: 0; }
  64% { opacity: .28; clip-path: inset(14% 0 55% 0); transform: translateX(-5px); }
  73% { opacity: .10; clip-path: inset(0); transform: none; }
  100% { opacity: 0; visibility: hidden; transform: none; clip-path: inset(0); }
}
@keyframes tan-reload-out {
  0% { opacity: 0; }
  18% { opacity: .7; clip-path: inset(0 0 74% 0); transform: translateX(11px); }
  36% { opacity: .25; clip-path: inset(30% 0 14% 0); transform: translateX(-13px); }
  50% { opacity: .9; clip-path: inset(0); transform: translateX(5px); }
  66% { opacity: .1; }
  80% { opacity: .8; clip-path: inset(0 0 10% 0); transform: translateX(-4px); }
  100% { opacity: .9; clip-path: inset(0); transform: none; }
}
body.tan-loading #enterScreen .enterText,
body.tan-loading .page.visible {
  animation: tan-page-sync .70s steps(1, end) both;
}
@keyframes tan-page-sync {
  0%, 19% { filter: none; }
  20% { filter: drop-shadow(-4px 0 #f71738) drop-shadow(3px 0 #34c7d9); transform: translateX(4px); }
  25%, 49% { filter: none; transform: none; }
  50% { filter: brightness(1.5); transform: translateX(-3px); }
  53%, 100% { filter: none; transform: none; }
}


.volumeControl { isolation: isolate; }
.volumeControl::before,
.volumeControl::after {
  content: "";
  position: absolute;
  inset: -10px -12px;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  border-radius: 9px;
}
.volumeControl::before {
  border: 1px solid rgba(250, 23, 52, .52);
  box-shadow: 0 0 18px rgba(205, 9, 35, .26);
}
.volumeControl::after {
  background: repeating-linear-gradient(180deg, transparent 0, transparent 2px, rgba(255,0,52,.18) 3px, transparent 4px);
}
.volumeControl:hover::before,
.volumeControl:focus-within::before {
  opacity: .35;
}
.volumeControl:hover::after,
.volumeControl:focus-within::after {
  opacity: .18;
}
.volumeControl:hover .volumeIcon,
.volumeControl:hover #volumeNumber,
.volumeControl:focus-within #volumeNumber {
  color: #ff3347 !important;
  text-shadow: -1px 0 #ff1633, 1px 0 rgba(61,210,244,.6), 0 0 9px rgba(245,0,29,.5) !important;
}
.volumeControl:hover input[type="range"]::-webkit-slider-thumb { background: #ff2338; }
.volumeControl:hover input[type="range"]::-moz-range-thumb { background: #ff2338; }
.volumeControl.volume-glitch:not(.visible) { animation: none; }
.volumeControl.volume-glitch.visible { animation: tan-volume-jitter .33s steps(1, end) both; }
.volumeControl.volume-glitch::before { opacity: .85; animation: tan-volume-slice .32s steps(1, end) both; }
.volumeControl.volume-glitch::after { opacity: .40; }
.volumeControl.volume-glitch #volumeNumber,
.volumeControl.volume-glitch .volumeIcon {
  color: #fb173a !important;
  filter: drop-shadow(-2px 0 rgba(244,16,45,.8)) drop-shadow(2px 0 rgba(70,209,235,.7));
}
@keyframes tan-volume-jitter {
  0%, 100% { transform: translateY(0); }
  18% { transform: translate(-2px, 0); }
  35% { transform: translate(2px, -1px); }
  53% { transform: translate(-1px, 1px); }
  70% { transform: translate(1px, 0); }
}
@keyframes tan-volume-slice {
  0%, 100% { clip-path: inset(0); transform: none; }
  20% { clip-path: inset(0 0 58% 0); transform: translateX(-6px); }
  50% { clip-path: inset(52% 0 0 0); transform: translateX(5px); }
  74% { clip-path: inset(20% 0 32% 0); transform: translateX(-3px); }
}


.socialButton { position: relative; isolation: isolate; }
.socialButton > img:not(.social-glitch-ghost) { position: relative; z-index: 2; }
.socialButton .social-glitch-ghost {
  position: absolute;
  inset: 3px auto auto 3px;
  width: 30px;
  height: 30px;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  user-select: none;
}
.socialButton:hover > img:not(.social-glitch-ghost),
.socialButton:focus-visible > img:not(.social-glitch-ghost) {
  animation: tan-blood-base .52s steps(1, end) both;
  filter: brightness(0) saturate(100%) invert(15%) sepia(100%) saturate(5800%) hue-rotate(349deg) brightness(115%) contrast(126%) drop-shadow(0 0 6px rgba(255,0,43,.95));
}
.socialButton.blood-burst > img:not(.social-glitch-ghost) {
  animation: tan-blood-base .35s steps(1, end) both;
}
.socialButton:hover .social-glitch-ghost,
.socialButton.blood-burst .social-glitch-ghost,
.socialButton:focus-visible .social-glitch-ghost {
  opacity: .9;
}
.socialButton:hover .social-glitch-ghost:nth-of-type(2),
.socialButton.blood-burst .social-glitch-ghost:nth-of-type(2),
.socialButton:focus-visible .social-glitch-ghost:nth-of-type(2) {
  filter: brightness(0) saturate(100%) invert(16%) sepia(90%) saturate(7200%) hue-rotate(343deg) brightness(98%) contrast(130%);
  animation: tan-red-fragment .53s steps(1, end) both;
}
.socialButton:hover .social-glitch-ghost:nth-of-type(3),
.socialButton.blood-burst .social-glitch-ghost:nth-of-type(3),
.socialButton:focus-visible .social-glitch-ghost:nth-of-type(3) {
  filter: brightness(0) saturate(100%) invert(70%) sepia(81%) saturate(665%) hue-rotate(146deg) brightness(105%) contrast(115%);
  animation: tan-cyan-fragment .53s steps(1, end) both;
}
@keyframes tan-blood-base {
  0%, 100% { transform: translateX(0) scale(1.08); }
  22% { transform: translateX(-3px) scale(1.14); }
  31% { transform: translateX(2px) scale(1.10); }
  62% { transform: translateX(-1px) scale(1.11); }
}
@keyframes tan-red-fragment {
  0%, 100% { opacity: 0; clip-path: inset(0); transform: none; }
  17% { opacity: .95; clip-path: inset(7% 0 65% 0); transform: translateX(-7px); }
  33% { opacity: .85; clip-path: inset(55% 0 12% 0); transform: translateX(5px); }
  67% { opacity: .9; clip-path: inset(26% 0 53% 0); transform: translateX(-4px); }
  82% { opacity: .5; clip-path: inset(70% 0 1% 0); transform: translateX(3px); }
}
@keyframes tan-cyan-fragment {
  0%, 100% { opacity: 0; clip-path: inset(0); transform: none; }
  12% { opacity: .7; clip-path: inset(67% 0 4% 0); transform: translateX(6px); }
  40% { opacity: .9; clip-path: inset(30% 0 43% 0); transform: translateX(-5px); }
  72% { opacity: .6; clip-path: inset(4% 0 74% 0); transform: translateX(5px); }
}

.socialButton:not(:hover):not(.blood-burst):not(:focus-visible) .social-glitch-ghost { opacity: 0; }


.tan-toast {
  position: fixed;
  left: 50%;
  bottom: 44px;
  z-index: 10004;
  transform: translateX(-50%);
  padding: 11px 18px;
  border: 1px solid rgba(255,30,70,.45);
  border-radius: 10px;
  background: rgba(10, 10, 13, .95);
  color: #ff5265;
  box-shadow: 0 0 20px rgba(140,0,31,.32);
  font: 12px Arial, sans-serif;
  letter-spacing: 1.5px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}
.tan-toast.show { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .glitch-menu.visible, .glitch-menu.menu-closing,
  .glitch-menu.visible::after,
  .tan-load-glitch.running, .tan-load-glitch.leaving,
  .volumeControl.volume-glitch, .volumeControl.volume-glitch::before,
  .socialButton > img, .socialButton .social-glitch-ghost,
  body.tan-loading #enterScreen .enterText,
  body.tan-loading .page.visible {
    animation: none !important;
    transform: none !important;
  }
  .tan-load-glitch { display: none; }
  .socialButton .social-glitch-ghost { display: none; }
}

:root {
  color-scheme: dark;
}

html, body {
  background: #090b0f;
  min-height: 100%;
}

body {
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
}

body::before,
body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  z-index: -3;
  pointer-events: none;
}

body::before {
  top: 0;
  height: max(50px, calc(env(safe-area-inset-top, 0px) + 20px));
  background: linear-gradient(to bottom, rgba(7,8,12,.58), transparent);
}

body::after {
  bottom: 0;
  height: max(75px, calc(env(safe-area-inset-bottom, 0px) + 42px));
  background: linear-gradient(to top, rgba(7,8,12,.76), transparent);
}

.profileCard {
  isolation: isolate;
  background: linear-gradient(138deg, rgba(17,18,22,.65), rgba(8,9,13,.54) 58%, rgba(21,9,14,.52));
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 25px 80px rgba(0,0,0,.54), inset 0 1px 0 rgba(255,255,255,.055), 0 0 34px rgba(146,2,28,.045);
}

.profileCard::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
  opacity: .36;
  background: radial-gradient(ellipse at 100% 0, rgba(210,17,44,.14), transparent 55%), linear-gradient(135deg, rgba(255,255,255,.035), transparent 50%);
  transition: opacity .3s ease;
}

.profileCard:hover {
  border-color: rgba(221,43,67,.25);
  box-shadow: 0 25px 80px rgba(0,0,0,.54), inset 0 1px 0 rgba(255,255,255,.07), 0 0 36px rgba(154,2,32,.15);
}

.profileCard:hover::before {
  opacity: .65;
}

.profileCard.card-distort {
  animation: tan-card-signal .48s steps(1,end) both;
}

.profileCard.card-distort::before {
  opacity: .92;
  animation: tan-card-light .48s steps(1,end) both;
}

.profileCard.card-distort::after {
  animation: tan-card-lines .48s steps(1,end) both;
}

@keyframes tan-card-signal {
  0%, 100% { filter: none; border-color: rgba(255,255,255,.12); transform: none; }
  14% { filter: drop-shadow(-2px 0 rgba(250,16,53,.50)) drop-shadow(2px 0 rgba(42,206,235,.25)); }
  25% { filter: none; }
  43% { border-color: rgba(255,39,72,.65); filter: brightness(1.10); }
  52% { filter: brightness(.96); }
  62% { filter: drop-shadow(-1px 0 rgba(222,18,41,.36)); }
  74% { filter: none; }
}

@keyframes tan-card-light {
  0%,100% { opacity: .4; clip-path: inset(0); }
  18% { opacity: .9; clip-path: inset(0 0 71% 0); }
  42% { opacity: 1; clip-path: inset(48% 0 17% 0); }
  62% { opacity: .8; clip-path: inset(76% 0 0 0); }
}

@keyframes tan-card-lines {
  0%,100% { opacity: .05; clip-path: inset(0); }
  17% { opacity: .27; clip-path: inset(12% 0 63% 0); }
  49% { opacity: .34; clip-path: inset(68% 0 9% 0); }
  67% { opacity: .16; clip-path: inset(34% 0 39% 0); }
}

#displayName.char-scrambling,
#username.char-scrambling,
#statusText.char-scrambling,
.statusTitle.char-scrambling,
.enterText.char-scrambling {
  animation: tan-letter-error .25s steps(1,end) both;
}

@keyframes tan-letter-error {
  0%,100% { filter: none; text-shadow: inherit; }
  18% { text-shadow: -2px 0 rgba(255,30,62,.8), 2px 0 rgba(70,220,243,.60); }
  48% { filter: brightness(1.4); text-shadow: 2px 0 #f21f3e, -2px 0 #4dc6da; }
  78% { text-shadow: -1px 0 rgba(255,30,62,.48); }
}

.volumeControl {
  isolation: isolate;
  background: rgba(9,11,16,.73) !important;
  border: 1px solid rgba(176,27,47,.24) !important;
  border-radius: 12px;
  padding: 10px 13px !important;
  gap: 10px !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  box-shadow: 0 8px 25px rgba(0,0,0,.37), inset 0 1px 0 rgba(255,255,255,.065) !important;
  right: max(16px, calc(env(safe-area-inset-right, 0px) + 20px));
  bottom: max(16px, calc(env(safe-area-inset-bottom, 0px) + 20px));
  transition: opacity .6s ease, transform .6s ease, box-shadow .24s ease, border-color .24s ease;
}

.volumeControl::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid rgba(255,29,62,.3);
  background: linear-gradient(112deg, transparent 5%, rgba(172,9,38,.15) 55%, transparent 95%);
  box-shadow: 0 0 15px rgba(193,5,37,.14);
  pointer-events: none;
  z-index: 0;
  opacity: .3;
  transition: opacity .2s ease;
}

.volumeControl::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(255,15,50,.13) 3px 4px);
  opacity: 0;
}

.volumeControl > * {
  position: relative;
  z-index: 1;
}

.volumeControl:hover,
.volumeControl:focus-within {
  border-color: rgba(255,42,71,.49) !important;
  box-shadow: 0 8px 25px rgba(0,0,0,.38), 0 0 19px rgba(188,11,39,.19) !important;
}

.volumeControl input[type="range"] {
  width: clamp(78px, 18vw, 102px);
  touch-action: pan-x;
  accent-color: #e72b46;
}

.volumeControl input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(to right, #be213b, rgba(252,252,255,.7));
  height: 3px;
}

.volumeControl input[type="range"]::-moz-range-track {
  background: linear-gradient(to right, #be213b, rgba(252,252,255,.7));
  height: 3px;
}

.volumeControl input[type="range"]::-webkit-slider-thumb {
  background: #e8d4d9;
  box-shadow: 0 0 7px rgba(243,21,61,.44);
}

.volumeControl input[type="range"]::-moz-range-thumb {
  background: #e8d4d9;
  box-shadow: 0 0 7px rgba(243,21,61,.44);
}

.volumeControl.volume-glitch.visible {
  animation: tan-volume-jitter .46s steps(1,end) both;
}

.volumeControl.volume-glitch::before {
  opacity: 1;
  animation: tan-volume-slice .46s steps(1,end) both;
}

.volumeControl.volume-glitch::after {
  opacity: .48;
  animation: tan-volume-lines .46s steps(1,end) both;
}

.volumeControl.volume-glitch .volumeIcon,
.volumeControl.volume-glitch #volumeNumber {
  color: #ff274d !important;
  text-shadow: -2px 0 #f52045, 2px 0 #39c9dd, 0 0 9px rgba(245,0,45,.65) !important;
  filter: drop-shadow(-1px 0 rgba(231,9,44,.75));
}

@keyframes tan-volume-lines {
  0%,100% { opacity: 0; clip-path: inset(0); }
  18% { opacity: .8; clip-path: inset(0 0 68% 0); }
  41% { opacity: .5; clip-path: inset(39% 0 27% 0); }
  72% { opacity: .7; clip-path: inset(66% 0 0 0); }
}

@media (max-width: 600px) {
  .page {
    width: 100%;
    height: 100dvh;
    min-height: 100svh;
    padding: calc(22px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(88px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  }
  .profileCard {
    width: 100%;
    max-width: 560px;
    padding: clamp(18px, 5vw, 24px);
    border-radius: 19px;
  }
  .profileTop { gap: clamp(12px, 4vw, 20px); }
  #displayName { font-size: clamp(21px, 6.4vw, 26px); overflow-wrap: anywhere; }
  #username { font-size: clamp(12px, 4vw, 16px); overflow-wrap: anywhere; }
  .avatarContainer { width: clamp(67px, 21vw, 82px); height: clamp(67px, 21vw, 82px); }
  .volumeControl {
    right: max(14px, calc(env(safe-area-inset-right, 0px) + 14px));
    bottom: max(14px, calc(env(safe-area-inset-bottom, 0px) + 14px));
    padding: 9px 12px !important;
  }
  .tan-toast { bottom: calc(83px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 30px); text-align: center; white-space: normal; }
  .glitch-menu { max-height: calc(100dvh - 24px - env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
}

@media (max-height: 540px) {
  html, body { height: auto; min-height: 100%; overflow-y: auto; overflow-x: hidden; }
  .page { height: auto; min-height: 100dvh; padding-top: calc(20px + env(safe-area-inset-top, 0px)); padding-bottom: calc(36px + env(safe-area-inset-bottom, 0px)); }
  .volumeControl { position: relative; right: auto; bottom: auto; width: max-content; margin: 0 max(16px, env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) auto; }
}

@media (prefers-reduced-motion: reduce) {
  .profileCard.card-distort,
  .profileCard.card-distort::before,
  .profileCard.card-distort::after,
  .volumeControl.volume-glitch.visible,
  .volumeControl.volume-glitch::before,
  .volumeControl.volume-glitch::after,
  #displayName.char-scrambling,
  #username.char-scrambling,
  #statusText.char-scrambling,
  .statusTitle.char-scrambling,
  .enterText.char-scrambling {
    animation: none !important;
  }
}

#backgroundVideo {
  z-index: 0;
}

.backgroundShade,
body::before,
body::after {
  z-index: 1;
  pointer-events: none;
}

.page {
  position: relative;
  z-index: 2;
}

@media (max-width: 600px), (pointer: coarse) and (max-height: 540px) {
  html {
    background-color: #17070a;
  }

  body {
    background-color: #17070a;
    background-image: url('../video-poster.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  #backgroundVideo {
    position: fixed;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100lvh;
    min-height: 100dvh;
    object-fit: cover;
    object-position: center center;
    background: #17070a url('../video-poster.jpg') center center / cover no-repeat;
    pointer-events: none;
  }

  body::before,
  body::after {
    display: none;
  }

  #enterScreen {
    min-height: 100dvh;
  }
}