:root {
  --yellow: #ffac3f;
  --orange: #f8931f;
  --orange-deep: #cf6819;
  --ink: #100d0b;
  --panel: #2f1915;
  --panel-soft: #4c3028;
  --text: #fff8ef;
  --muted: #c9aea4;
  --green: #8df24c;
  --blue: #2f9bd5;
  --radius: 8px;
  --content: 1240px;
  --side-gap: clamp(24px, 7.5vw, 118px);
  --wiki-bg: #3a2825;
}
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html {
  scroll-behavior: smooth;
  scrollbar-color: rgba(255, 172, 63, 0.45) rgba(255, 248, 239, 0.04);
  scrollbar-width: thin;
}

@media (prefers-reduced-motion: no-preference) {
  body {
    animation: page-fade-in 0.38s ease both;
  }
main > section,
main > .site-view,
  .players-head,
  .players-layout,
  .feed-layout,
  .music-layout,
  .album-layout,
  .artist-layout,
  .profile-layout,
  .towns-layout,
  .history-page .container,
  .team-page .container {
    animation: content-rise 0.5s cubic-bezier(0.2, 0.85, 0.25, 1) both;
  }
  main {
    transition:
      opacity 0.16s ease,
      transform 0.16s ease,
      filter 0.16s ease;
  }
  main.is-page-leaving {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(2px);
  }
  main.is-page-entering {
    opacity: 0;
    transform: translateY(10px);
  }
  .info-card,
  .player-card,
  .music-track,
  .music-album-card,
  .music-playlist-card,
  .album-track-row,
  .artist-track-row,
  .town-list-item,
  .project-tab,
  .character-card {
    transition:
      transform 0.22s ease,
      border-color 0.22s ease,
      background 0.22s ease,
      box-shadow 0.22s ease,
      opacity 0.22s ease;
  }
  .info-card:hover,
  .player-card:hover,
  .music-track:hover,
  .music-album-card:hover,
  .music-playlist-card:hover,
  .artist-track-row:hover,
  .town-list-item:hover,
  .project-tab:hover,
  .character-card:hover {
    transform: translateY(-3px);
  }
}

@keyframes page-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes content-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

* {
  scrollbar-color: rgba(255, 172, 63, 0.42) rgba(255, 248, 239, 0.035);
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: rgba(255, 248, 239, 0.035);
}

*::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(255, 172, 63, 0.42);
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 172, 63, 0.62);
  background-clip: padding-box;
}

#server-online {
  margin-left: 4px;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background-color: #080806;
  color: var(--text);
  font-family: Manrope, Arial, sans-serif;
  font-weight: 600;
  position: relative;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 223, 63, 0.12), transparent 45%),
    radial-gradient(circle at 80% 60%, rgba(248, 147, 31, 0.08), transparent 50%),
    radial-gradient(circle at 50% 90%, rgba(31, 119, 213, 0.06), transparent 60%),
    linear-gradient(180deg, #080806 0%, #15100e 45%, #0a0807 100%);
  animation: bgMesh 14s ease-in-out infinite alternate;
  pointer-events: none;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.04;
  pointer-events: none;
}
@keyframes bgMesh {
  0% { transform: scale(1) translate(0, 0); }
  50% { transform: scale(1.03) translate(1%, 2%); filter: hue-rotate(6deg); }
  100% { transform: scale(1) translate(-1%, -1%); filter: hue-rotate(-6deg); }
}
a {
  color: inherit;
  text-decoration: none;
}
a,
button {
  -webkit-tap-highlight-color: transparent;
}
button {
  font: inherit;
}
.container {
  width: min(var(--content), calc(100% - (var(--side-gap) * 2)));
  margin: 0 auto;
}
.section {
  position: relative;
  padding: 92px 0;
}
.site-header {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: minmax(170px, 1fr) auto auto minmax(150px, 1fr);
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  padding: 0 max(24px, calc((100vw - var(--content)) / 2));
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.brand strong {
  display: block;
  color: var(--yellow);
  font-family: Unbounded, Manrope, sans-serif;
  line-height: 0.86;
  letter-spacing: 0;
}
.brand small {
  display: block;
  min-height: 22px;
  color: var(--text);
  line-height: 1.2;
  transition:
    color 0.25s,
    opacity 0.25s,
    transform 0.25s;
}
.brand small.is-changing {
  opacity: 0;
  transform: translateY(-8px);
}
.brand-mark,
.footer-block {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 34px;
  background: var(--yellow);
  box-shadow:
    inset 0 -8px 0 var(--orange),
    0 0 28px rgba(255, 223, 63, 0.24);
  animation: 4s ease-in-out infinite markPulse;
}
.brand-mark::before,
.footer-block::before {
  content: "";
  position: absolute;
  left: 6px;
  top: -8px;
  width: 32px;
  height: 9px;
  background: #ffa652;
}
.brand-mark::after,
.footer-block::after {
  content: "";
  position: absolute;
  left: 12px;
  bottom: -9px;
  width: 20px;
  height: 14px;
  background: var(--ink);
  box-shadow: inset 0 5px 0 var(--yellow);
}
.site-nav {
  grid-column: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(28px, 4vw, 58px);
  white-space: nowrap;
}
.site-nav a {
  position: relative;
  color: var(--text);
  transition:
    color 0.22s,
    transform 0.22s;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -10px;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--yellow), var(--orange));
  transition:
    left 0.22s,
    right 0.22s;
}
.site-nav a:hover,
.site-nav a.is-active {
  color: var(--yellow);
  transform: translateY(-1px);
}
.site-nav a:hover::after,
.site-nav a.is-active::after {
  left: 0;
  right: 0;
}
.button,
.login-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  line-height: 1;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
  transition:
    transform 0.2s,
    box-shadow 0.2s,
    filter 0.2s;
}
.login-button {
  justify-self: end;
  grid-column: 4;
  background: linear-gradient(135deg, var(--yellow), var(--orange));
}
.account-menu {
  position: relative;
  grid-column: 4;
  justify-self: end;
}
.account-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 6px 14px 6px 8px;
  border: 1px solid rgba(255, 248, 239, 0.14);
  border-radius: var(--radius);
  background: rgba(16, 13, 11, 0.72);
  color: var(--text);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  transition:
    transform 0.2s,
    border-color 0.2s,
    background 0.2s;
}
.account-trigger:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 172, 63, 0.5);
  background: rgba(47, 25, 21, 0.9);
}
.account-trigger img {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  image-rendering: pixelated;
  background: rgba(255, 255, 255, 0.08);
}
.account-trigger span {
  max-width: 150px;
  overflow: hidden;
  color: #fff8ef;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  display: none;
  min-width: 210px;
  padding: 8px;
  border: 1px solid rgba(255, 248, 239, 0.14);
  border-radius: var(--radius);
  background: rgba(21, 15, 13, 0.96);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.36);
}
.account-menu.is-open .account-dropdown {
  display: grid;
}
.account-dropdown a,
.account-dropdown button {
  width: 100%;
  padding: 12px 13px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 248, 239, 0.78);
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}
.account-dropdown a:hover,
.account-dropdown button:hover {
  background: rgba(255, 172, 63, 0.12);
  color: var(--yellow);
}
.button svg,
.login-button svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.button:hover,
.login-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.32);
}
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 3px;
  margin: 4px auto;
  background: currentColor;
}
.hero {
  display: flex;
  align-items: center;
}
.hero-grid {
  grid-template-columns: minmax(0, 0.95fr) minmax(470px, 0.85fr);
  align-items: center;
  gap: clamp(34px, 5vw, 76px);
}
.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 980px;
}
.season-countdown {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255, 212, 59, 0.1);
  border: 1px solid rgba(255, 212, 59, 0.2);
  padding: 12px 20px;
  border-radius: 12px;
  margin-bottom: 28px;
  width: fit-content;
  position: relative;
  overflow: hidden;
}

/* Runtime performance: keep off-screen cards out of layout/paint work and
   suspend decorative animation while the tab is not visible. */
body.is-page-hidden *,
body.is-page-hidden *::before,
body.is-page-hidden *::after {
  animation-play-state: paused !important;
}

.feature-card,
.community-slide,
.town-card,
.player-card,
.story-card,
.music-track,
.album-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}

@media (hover: none), (pointer: coarse) {
  .feature-card,
  .town-card,
  .player-card,
  .album-card,
  .button,
  .login-button {
    transform: none !important;
  }
}
.season-countdown::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,212,59,0.1), transparent);
  transform: translateX(-100%);
  animation: shimmer 3s infinite;
}
@keyframes shimmer {
  100% { transform: translateX(100%); }
}
.season-countdown-label {
  color: var(--yellow);
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.season-countdown-timer {
  display: flex;
  gap: 12px;
}
.time-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 44px;
}
.time-block b {
  font-family: Unbounded, Manrope, sans-serif;
  font-size: 24px;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 10px rgba(255,212,59,0.4);
}
.time-block span {
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 4px;
}
.time-block.is-seconds b {
  color: var(--yellow);
  animation: pulse-second 1s infinite;
}
@keyframes pulse-second {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.season-countdown.is-finished .season-countdown-timer {
  display: none;
}
.season-countdown.is-finished .season-countdown-label {
  font-size: 22px;
  animation: tada 1s infinite;
}
@keyframes tada {
  0% { transform: scale(1); }
  10%, 20% { transform: scale(0.9) rotate(-3deg); }
  30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
  40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
  100% { transform: scale(1); }
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}
.map-card span,
.pills span,
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 16px;
  border-radius: var(--radius);
  background: rgba(255, 223, 63, 0.15);
  color: var(--yellow);
  font-size: 16px;
}
.community h2,
.feature-heading h2,
.feature-list h3,
.hero h1,
.map-card strong,
.price-copy h2 {
  font-family: Unbounded, Manrope, sans-serif;
  letter-spacing: 0;
}
.hero h1 {
  margin: 0;
  color: #fff;
}
.hero h1 span {
  display: block;
  color: var(--yellow);
  text-shadow: 0 0 34px rgba(255, 223, 63, 0.18);
}
.hero p {
  margin: 26px 0 34px;
  color: var(--muted);
  line-height: 1.45;
}
.hero p strong {
  color: var(--text);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}
.button.primary {
  background: linear-gradient(135deg, var(--yellow), var(--orange));
}
.button.light {
  color: #111;
}
.button.telegram {
  color: #fff;
}
.hero-art {
  position: relative;
}
.render-stage {
  position: absolute;
}
.render-stage::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 8%;
  bottom: 8px;
  height: 46px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28);
  filter: blur(10px);
}
.bubble {
  position: absolute;
  z-index: 4;
  border: 5px solid rgba(255, 245, 232, 0.2);
  background: rgba(255, 255, 255, 0.09);
  color: rgba(255, 248, 239, 0.82);
  font-family: Unbounded, Manrope, sans-serif;
  font-weight: 700;
  line-height: 1;
  transform: rotate(-3deg);
  backdrop-filter: blur(2px);
  animation: 5s ease-in-out infinite bubbleFloat;
}
.bubble::after {
  content: "";
  position: absolute;
  right: 24px;
  bottom: -24px;
  width: 24px;
  height: 24px;
  border-right: 5px solid rgba(255, 245, 232, 0.2);
  border-bottom: 5px solid rgba(255, 245, 232, 0.2);
  background: rgba(255, 255, 255, 0.09);
  transform: rotate(45deg);
}
.bubble-two {
  transform: rotate(10deg);
  animation-delay: 0.8s;
}
.character,
.community-characters span {
  position: absolute;
  bottom: 0;
  border-radius: 4px;
  background:
    linear-gradient(#ffd9bd 0 16%, transparent 16%),
    linear-gradient(90deg, transparent 0 18%, #fff 18% 82%, transparent 82%),
    linear-gradient(#222 16% 38%, #fff 38% 70%, #1c1c1c 70%);
  box-shadow:
    inset 16px 0 rgba(255, 255, 255, 0.1),
    inset -16px 0 rgba(0, 0, 0, 0.2),
    0 24px 54px rgba(0, 0, 0, 0.32);
}
.character::before,
.community-characters span::before {
  content: "";
  position: absolute;
  background: var(--yellow);
  box-shadow: 0 46px 0 #1a1a1a;
}
.character::after,
.community-characters span::after {
  content: "";
  position: absolute;
  background: inherit;
  transform: rotate(18deg);
  transform-origin: top right;
}
.character-left {
  background:
    linear-gradient(#313a40 0 18%, transparent 18%),
    linear-gradient(90deg, transparent 0 18%, #f8fafc 18% 82%, transparent 82%),
    linear-gradient(#111 18% 34%, #e9eef1 34% 74%, #1297f2 74%);
}
.character-center {
  z-index: 2;
  background:
    linear-gradient(#222a2f 0 20%, transparent 20%),
    linear-gradient(90deg, transparent 0 18%, #fff 18% 82%, transparent 82%),
    linear-gradient(#111 20% 44%, #fff 44% 70%, #0c0b0b 70%);
  animation-delay: 0.35s;
}
.character-center::before {
  background: var(--orange);
  box-shadow: 0 54px 0 #fff;
}
.character-right {
  background:
    linear-gradient(#ffc078 0 18%, transparent 18%),
    linear-gradient(90deg, transparent 0 18%, #b97632 18% 82%, transparent 82%),
    linear-gradient(#f2c578 18% 42%, #d49345 42% 70%, #7ba7a9 70%);
  animation-delay: 0.7s;
}
.community-panel {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  width: min(var(--content), calc(100% - (var(--side-gap) * 2)));
  margin: 0 auto;
}
.community h2 {
  text-transform: uppercase;
}
.community p {
  font-size: 21px;
}
.community-characters span:first-child {
  transform: scale(0.9) rotate(-4deg);
}
.community-characters span:nth-child(3) {
  transform: scale(0.88) rotate(5deg);
}
.quote p {
  width: min(980px, 100%);
  margin: 0 auto 18px;
  color: var(--muted);
  text-align: center;
  line-height: 1.58;
}
.wiki-shell {
  overflow: hidden;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
}
.section-title {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 34px;
  text-align: center;
}
.section-title span {
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 248, 239, 0.11);
}
.section-title h2 {
  margin: 0;
  font-family: Unbounded, Manrope, sans-serif;
}
.section-title h2 strong {
  color: var(--yellow);
  font-weight: 700;
}
.section-title p {
  margin: 4px 0 0;
  color: var(--muted);
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.info-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 34px;
  transform: translate3d(0, 0, 0);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition:
    background 0.22s,
    transform 0.22s,
    box-shadow 0.22s;
}
.info-card:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-5px);
  box-shadow: 0 22px 42px rgba(0, 0, 0, 0.18);
}
.info-card h3 {
  margin: 0 0 34px;
  color: #ead9d2;
  line-height: 1.04;
}
.info-card p {
  max-width: 390px;
  margin: 0 0 28px;
  color: var(--muted);
  line-height: 1.45;
}
.info-card a {
  display: inline-flex;
  align-items: center;
  padding: 0 18px;
  border-radius: var(--radius);
  background: rgba(255, 223, 63, 0.22);
  color: var(--text);
  transition:
    background 0.2s,
    color 0.2s;
}
.info-card a:hover {
  background: linear-gradient(135deg, var(--yellow), var(--orange));
}
.tag {
  position: absolute;
  top: 34px;
  right: 34px;
  min-height: 32px;
  font-size: 15px;
}
.tag.green {
  color: #9df65c;
  background: rgba(135, 239, 76, 0.24);
}
.tag.orange {
  color: #ffb56a;
  background: rgba(248, 147, 31, 0.28);
}
.tag.yellow {
  color: var(--yellow);
  background: rgba(255, 223, 63, 0.24);
}
.wiki-tools {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin: 34px 0 22px;
}
.wiki-search-field {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 18px;
  border: 1px solid rgba(255, 248, 239, 0.14);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
}
.wiki-search-field input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}
.wiki-search-field input::placeholder {
  color: rgba(255, 248, 239, 0.52);
}
.wiki-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
.wiki-tags button {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(255, 248, 239, 0.14);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.2s;
}
.wiki-tags button:hover,
.wiki-tags button.is-active {
  border-color: rgba(255, 172, 63, 0.54);
  background: rgba(255, 172, 63, 0.2);
  transform: translateY(-1px);
}
.wiki-empty {
  margin: 24px 0 0;
  color: var(--muted);
  text-align: center;
}
@media (max-width: 1180px) {
  .wiki-tools {
    grid-template-columns: 1fr;
  }
  .wiki-tags {
    justify-content: flex-start;
  }
}
@media (max-width: 860px) {
  .wiki-tools {
    margin-top: 26px;
  }
  .wiki-tags {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wiki-tags button {
    width: 100%;
  }
}
.not-found-card {
  border: 1px solid rgba(255, 248, 239, 0.1);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.07);
}
.not-found-page {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
}
.not-found-card {
  width: min(680px, 100%);
  padding: clamp(30px, 5vw, 56px);
  text-align: center;
}
.not-found-card > span {
  color: var(--yellow);
  font-family: Unbounded, Manrope, sans-serif;
  font-size: clamp(70px, 13vw, 132px);
  line-height: 0.9;
}
.not-found-card h1 {
  margin: 18px 0 10px;
  color: var(--text);
  font-family: Unbounded, Manrope, sans-serif;
}
.not-found-card p {
  color: var(--muted);
}
@media (max-width: 860px) {
  .not-found-card .actions {
    align-items: stretch;
  }
  .not-found-card .actions > * {
    width: 100%;
  }
}
.feature-heading {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: flex-start;
}
.feature-heading h2,
.feature-list h3 {
  margin: 0;
  color: #fff8ff;
  line-height: 1.08;
}
.feature-heading p,
.feature-list p {
  max-width: 700px;
  color: var(--muted);
  font-size: 22px;
  line-height: 1.38;
}
.feature-heading strong {
  color: var(--yellow);
}
.feature-heading > span,
.feature-list span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  height: 58px;
  border-radius: 18px;
  background: rgba(255, 223, 63, 0.2);
  color: var(--yellow);
  font-size: 22px;
}
.map-card {
  position: relative;
  display: flex;
  align-items: center;
  margin: 30px 0 66px;
  overflow: hidden;
  border-radius: 22px;
  background:
    linear-gradient(90deg, rgba(54, 88, 22, 0.94), rgba(54, 88, 22, 0.5)),
    repeating-linear-gradient(90deg, #456d24 0 90px, #6d8f3a 90px 180px);
  box-shadow: 0 24px 46px rgba(0, 0, 0, 0.2);
}
.map-card.has-image {
  background-position: center;
  background-size: cover;
}
.squaremap-image {
  background-image:
    linear-gradient(90deg, rgba(37, 67, 16, 0.95), rgba(37, 67, 16, 0.44)),
    url("img/squaremap-cover.webp");
}
.map-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 0 40%,
    rgba(255, 255, 255, 0.12) 50%,
    transparent 60%
  );
  transform: translateX(-100%);
  transition: transform 0.75s;
}
.map-card:hover::before {
  transform: translateX(100%);
}
.map-card::after {
  content: "";
  position: absolute;
  right: 6%;
  top: 11%;
  width: 320px;
  height: 320px;
  background: linear-gradient(#8ab66e 0 32%, #473b24 32% 48%, #9bbf80 48% 100%);
  clip-path: polygon(30% 0, 100% 8%, 82% 100%, 18% 88%, 0 28%);
  opacity: 0.84;
  transform: rotate(10deg);
}
.map-card.has-image::after {
  display: none;
}
.map-card div {
  position: relative;
  z-index: 2;
  padding-left: clamp(34px, 7vw, 92px);
}
.map-card span {
  background: rgba(135, 239, 76, 0.2);
  color: var(--green);
}
.map-card strong {
  display: block;
  margin: 18px 0 8px;
  color: #d9f0c0;
  line-height: 1;
  text-transform: uppercase;
}
.map-card small {
  color: var(--green);
  font-size: 20px;
}
.feature-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
.feature-list article {
  position: relative;
  padding-right: 84px;
}
.feature-list span {
  position: absolute;
  top: -8px;
  right: 0;
}
.shop {
  padding-top: 58px;
}
.price-card {
  position: relative;
  display: grid;
  grid-template-columns: 360px 1fr;
  align-items: center;
  min-height: 340px;
  width: min(980px, 100%);
  margin: 0 auto;
  border-radius: 30px;
  background:
    radial-gradient(
      circle at 18% 28%,
      rgba(255, 255, 255, 0.9),
      transparent 15rem
    ),
    linear-gradient(120deg, #e9f7ff, #78c3f4);
  color: #08213a;
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.24);
}
.flying-cube {
  position: absolute;
  left: -58px;
  top: -95px;
  width: 330px;
  height: 252px;
  background: linear-gradient(135deg, #6b93ac 0 42%, #263848 42% 100%);
  clip-path: polygon(14% 15%, 65% 0, 100% 34%, 74% 100%, 20% 85%, 0 42%);
  filter: drop-shadow(0 26px 36px rgba(43, 134, 223, 0.35));
  animation: 5.8s ease-in-out infinite cubeFlight;
}
.flying-cube::after {
  content: "";
  position: absolute;
  inset: 68px 80px;
  background: #80b9ff;
  box-shadow: inset 0 0 0 23px #162a45;
}
.price-copy {
  grid-column: 2;
  text-align: center;
  padding-right: 50px;
}
.price-copy p {
  margin: 0 0 20px;
  font-family: Unbounded, Manrope, sans-serif;
  text-transform: uppercase;
}
.price-copy h2 {
  margin: 0 0 20px;
  color: #072849;
  line-height: 1;
  text-transform: uppercase;
}
.price-copy span {
  display: block;
  margin-bottom: 62px;
  font-weight: 700;
}
.actions.compact {
  justify-content: center;
  gap: 30px;
}
.footer {
  position: relative;
  padding: 70px var(--side-gap) 28px;
  overflow: hidden;
}
.footer-night {
  position: absolute;
  inset: auto var(--side-gap) 0;
  height: 190px;
  pointer-events: none;
  opacity: 0.7;
}
.footer-star,
.footer-comet,
.footer-wave {
  position: absolute;
  display: block;
}
.footer-star {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: #ffdf3f;
  box-shadow: 0 0 16px rgba(255, 223, 63, 0.75);
  animation: footer-star-pulse 3.8s ease-in-out infinite;
}
.footer-star-a {
  left: 12%;
  bottom: 82px;
}
.footer-star-b {
  left: 52%;
  bottom: 122px;
  animation-delay: 1.2s;
}
.footer-star-c {
  right: 14%;
  bottom: 72px;
  animation-delay: 2s;
}
.footer-comet {
  width: 84px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 223, 63, 0.85));
  transform: rotate(-16deg);
  animation: footer-comet-drift 8s linear infinite;
}
.footer-comet-a {
  left: 20%;
  bottom: 145px;
}
.footer-comet-b {
  right: 18%;
  bottom: 112px;
  animation-delay: 4.5s;
}
.footer-wave {
  left: 50%;
  bottom: 0;
  width: min(820px, 82vw);
  height: 84px;
  border: 1px solid rgba(255, 223, 63, 0.14);
  border-color: rgba(255, 223, 63, 0.16) transparent transparent;
  border-radius: 50% 50% 0 0;
  transform: translateX(-50%);
  animation: footer-wave-float 7s ease-in-out infinite;
}
.footer-wave-b {
  width: min(620px, 68vw);
  bottom: 18px;
  opacity: 0.55;
  animation-delay: -2.5s;
}
.footer-shell {
  position: relative;
  z-index: 1;
  width: min(var(--content), 100%);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(255, 223, 63, 0.1);
  border-radius: 22px;
  background:
    radial-gradient(
      circle at 12% 0,
      rgba(255, 223, 63, 0.13),
      transparent 18rem
    ),
    linear-gradient(135deg, #2f1915 0, #3b241d 58%, #241210 100%);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28);
  color: var(--muted);
}
.footer-shell > .container {
  width: 100%;
}
.footer-bottom,
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.footer-top {
  min-height: 72px;
  padding: 14px 34px;
  background: rgba(255, 223, 63, 0.08);
  box-shadow: inset 0 -1px rgba(255, 223, 63, 0.08);
}
.footer-bottom {
  min-height: 112px;
  padding: 24px 34px 28px;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  font-size: 20px;
  font-weight: 800;
}
.footer-brand strong {
  color: var(--yellow);
  font-family: Unbounded, Manrope, sans-serif;
  font-size: 34px;
}
.footer-logo {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  background: url("img/logo-pivo.png") center/contain no-repeat;
}
.footer-brand a {
  color: var(--muted);
}
.socials {
  display: flex;
  align-items: center;
  gap: 26px;
}
.socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-size: 24px;
  font-weight: 900;
  transition:
    background 0.2s,
    color 0.2s,
    transform 0.2s;
}
.socials i {
  display: block;
  font-size: 25px;
  line-height: 1;
}
.socials svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.socials a[aria-label="Telegram"] svg,
.socials a[aria-label="YouTube"] svg {
  fill: currentColor;
  stroke: none;
}
.socials span {
  font-family: Unbounded, Manrope, sans-serif;
  font-size: 18px;
  letter-spacing: 0;
}
.socials a:hover {
  background: rgba(255, 223, 63, 0.18);
  color: var(--yellow);
  transform: translateY(-2px);
}
.footer-bottom p {
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.45;
}
.footer-bottom p + p {
  margin-top: 2px;
}
.footer-bottom > div:last-child {
  text-align: right;
  font-weight: 800;
}
@keyframes footer-star-pulse {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.86);
  }
  50% {
    opacity: 1;
    transform: scale(1.18);
  }
}
@keyframes footer-comet-drift {
  0% {
    opacity: 0;
    transform: translate3d(-80px, 18px, 0) rotate(-16deg);
  }
  12%,
  42% {
    opacity: 1;
  }
  58%,
  100% {
    opacity: 0;
    transform: translate3d(160px, -24px, 0) rotate(-16deg);
  }
}
@keyframes footer-wave-float {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-8px);
  }
}
@media (max-width: 860px) {
  .footer {
    padding-right: 18px;
    padding-bottom: 18px;
    padding-left: 18px;
  }
  .footer-bottom,
  .footer-top {
    align-items: flex-start;
    flex-direction: column;
  }
  .footer-top {
    min-height: 132px;
    padding: 22px;
  }
  .footer-bottom {
    padding: 22px;
  }
  .footer-brand {
    flex-wrap: wrap;
    gap: 10px 14px;
  }
  .footer-brand strong {
    font-size: 28px;
  }
  .socials {
    gap: 14px;
  }
  .footer-bottom > div:last-child {
    text-align: left;
  }
  .footer-bottom p {
    font-size: 16px;
  }
}
.toast {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: 28px;
  min-width: 220px;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: #fff;
  color: #111;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 16px);
  transition:
    opacity 0.2s,
    transform 0.2s;
}
.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s,
    transform 0.7s;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.wiki-ajax-page {
  min-height: 100vh;
  padding-top: 82px;
  background: #120d0a;
}
.wiki-ajax-page .wiki-app > .site-header,
.wiki-ajax-page .wiki-nav-player {
  display: none !important;
}
@keyframes markPulse {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.12);
  }
}
@keyframes bubbleFloat {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -10px;
  }
}
@keyframes characterFloat {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -12px;
  }
}
@keyframes cubeFlight {
  0%,
  100% {
    transform: rotate(-18deg) translateY(0);
  }
  50% {
    transform: rotate(-14deg) translateY(-12px);
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  ::after,
  ::before {
    scroll-behavior: auto !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
  }
}
@media (max-width: 1180px) {
  :root {
    --side-gap: clamp(18px, 5vw, 52px);
  }
  .site-header {
    grid-template-columns: auto 1fr auto;
  }
  .site-nav {
    gap: 24px;
  }
  .community-panel,
  .feature-list,
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero {
    min-height: auto;
  }
  .hero-art {
    min-height: 510px;
  }
  .render-stage {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  .community-characters {
    display: none;
  }
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .price-card {
    grid-template-columns: 260px 1fr;
  }
}
.hero-grid {
  grid-template-columns: minmax(0, 0.9fr) minmax(430px, 0.82fr);
}
.hero p {
  font-size: clamp(16px, 1.08vw, 20px);
}
.hero-art {
  min-height: 500px;
}
.render-stage {
  right: 12px;
  bottom: -4px;
  width: min(100%, 575px);
  height: 470px;
}
.bubble {
  font-size: 17px;
  padding: 16px 24px;
}
.bubble-one {
  top: 38px;
  left: 10px;
}
.bubble-two {
  right: 0;
  top: 180px;
}
.character,
.community-characters span {
  width: 145px;
  height: 332px;
  animation: none;
}
.character::before,
.community-characters span::before {
  left: 24px;
  top: 58px;
  width: 96px;
  height: 22px;
  box-shadow: 0 39px 0 #1a1a1a;
}
.character::after,
.community-characters span::after {
  left: -35px;
  top: 101px;
  width: 42px;
  height: 178px;
}
.character-left {
  left: 64px;
  transform: scale(0.92) rotate(-4deg);
}
.character-center {
  left: 208px;
  height: 388px;
  transform: rotate(1deg);
}
.character-right {
  right: 34px;
  transform: scale(0.9) rotate(5deg);
}
.community p,
.feature-heading p,
.feature-list p,
.quote p,
.section-title p {
  font-size: clamp(16px, 1.08vw, 20px);
}
.info-card p {
  font-size: 16px;
}
.map-card {
  min-height: 360px;
}
.map-card strong {
  font-size: clamp(34px, 3.8vw, 60px);
}
.feature-list-top {
  margin-bottom: 34px;
}
.media-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px 44px;
  align-items: start;
}
.media-placeholder {
  position: relative;
  min-height: 315px;
  overflow: hidden;
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 223, 63, 0.18), rgba(248, 147, 31, 0.12)),
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.06) 0 16px,
      rgba(255, 255, 255, 0.02) 16px 32px
    );
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
}
.emote-image,
.story-image,
.voice-image {
  background-position: center;
  background-size: cover;
}
.story-image {
  background-image:
    linear-gradient(180deg, rgba(23, 10, 18, 0.08), rgba(23, 10, 18, 0.26)),
    url("img/feature-history-dragon.webp");
}
.emote-image {
  background-image:
    linear-gradient(180deg, rgba(23, 10, 18, 0.02), rgba(23, 10, 18, 0.12)),
    url("img/feature-emotes-axolotl.webp");
}
.voice-image {
  background-image:
    linear-gradient(180deg, rgba(23, 10, 18, 0.02), rgba(23, 10, 18, 0.16)),
    url("img/feature-voice-pigs.webp");
}
.media-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 28% 22%,
      rgba(255, 223, 63, 0.34),
      transparent 11rem
    ),
    radial-gradient(
      circle at 72% 72%,
      rgba(248, 147, 31, 0.28),
      transparent 12rem
    );
}
.emote-image::before,
.story-image::before,
.voice-image::before {
  display: none;
}
.media-placeholder span {
  position: absolute;
  left: 24px;
  bottom: 22px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.36);
  color: rgba(255, 248, 239, 0.78);
  font-size: 14px;
}
.media-purple {
  min-height: 520px;
  background:
    linear-gradient(135deg, rgba(116, 33, 120, 0.72), rgba(255, 223, 63, 0.12)),
    repeating-linear-gradient(90deg, #3a202e 0 70px, #4d2646 70px 140px);
}
.media-placeholder.story-image {
  min-height: 520px;
  background:
    linear-gradient(180deg, rgba(23, 10, 18, 0.08), rgba(23, 10, 18, 0.26)),
    url("img/feature-history-dragon.webp") center/cover;
}
.media-sun {
  min-height: 315px;
  background:
    linear-gradient(135deg, rgba(255, 223, 63, 0.38), rgba(248, 147, 31, 0.18)),
    repeating-linear-gradient(90deg, #644f2d 0 70px, #896a35 70px 140px);
}
.media-voice {
  min-height: 310px;
  margin-top: 26px;
  background:
    linear-gradient(135deg, rgba(74, 167, 255, 0.6), rgba(255, 223, 63, 0.2)),
    repeating-linear-gradient(90deg, #4d8fc9 0 80px, #66a345 80px 160px);
}
.media-placeholder.emote-image {
  background:
    linear-gradient(180deg, rgba(23, 10, 18, 0.02), rgba(23, 10, 18, 0.12)),
    url("img/feature-emotes-axolotl.webp") center/cover;
}
.media-placeholder.voice-image {
  background:
    linear-gradient(180deg, rgba(23, 10, 18, 0.02), rgba(23, 10, 18, 0.16)),
    url("img/feature-voice-pigs.webp") center/cover;
}
.faq-card,
.season-card,
.voice-card {
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.07);
}
.season-card {
  min-height: 310px;
}
.faq-card h3,
.faq-head h2,
.season-card h3,
.voice-card h3 {
  margin: 0;
  font-family: Unbounded, Manrope, sans-serif;
  letter-spacing: 0;
}
.season-card h3 {
  font-size: 30px;
}
.season-head,
.season-row {
  display: grid;
  grid-template-columns: 1fr 88px 82px 126px 34px;
  align-items: center;
  gap: 16px;
}
.season-head {
  color: var(--muted);
  font-size: 15px;
}
.season-row {
  padding: 0 14px;
  color: #f6e9e3;
}
.season-row b,
.season-row small,
.season-row time {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.09);
  color: var(--muted);
  font-style: normal;
}
.season-row small {
  color: var(--yellow);
  text-transform: uppercase;
}
.season-row small:empty {
  visibility: hidden;
}
.season-row i {
  font-style: normal;
  color: var(--yellow);
  font-size: 24px;
}
.voice-card {
  position: relative;
  padding: 0;
  background: 0 0;
  box-shadow: none;
}
.voice-card > span {
  position: absolute;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  height: 58px;
  border-radius: 18px;
  background: rgba(255, 223, 63, 0.22);
  color: var(--yellow);
  font-size: 20px;
  top: -6px;
}
.voice-card h3 {
  padding-right: 82px;
  color: #fff8ff;
  font-size: clamp(30px, 2.8vw, 46px);
}
.voice-card p {
  max-width: 720px;
  color: var(--muted);
  font-size: clamp(16px, 1.08vw, 20px);
  line-height: 1.45;
}
.faq {
  padding-top: 34px;
}
.faq-head {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 42px;
  margin-bottom: 34px;
}
.faq-head h2 {
  color: #fff;
  font-size: clamp(32px, 3vw, 48px);
}
.faq-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 54px;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
}
.faq-tabs button {
  border: 0;
  border-radius: 12px;
  background: 0 0;
  color: #d7d1df;
  cursor: pointer;
  font-size: 17px;
  font-weight: 800;
  transition:
    background 0.2s,
    color 0.2s;
}
.faq-tabs button.is-active {
  background: linear-gradient(135deg, var(--yellow), var(--orange));
}
.faq-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.faq-grid.is-hidden {
  display: none;
}
.faq-card {
  min-height: 290px;
  padding: 34px;
}
.faq-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 30px;
  border-radius: 16px;
  background: rgba(255, 223, 63, 0.16);
  color: var(--yellow);
  font-size: 24px;
}
.faq-card h3 {
  color: #fff;
  font-size: 24px;
  line-height: 1.25;
}
.faq-card p {
  margin: 28px 0 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.52;
}
.price-copy p {
  font-size: 24px;
}
.price-copy h2 {
  font-size: clamp(42px, 4vw, 62px);
}
.price-copy span {
  font-size: 18px;
}
@media (max-width: 1180px) {
  .faq-grid,
  .faq-head,
  .media-grid {
    grid-template-columns: 1fr;
  }
  .season-head,
  .season-row {
    grid-template-columns: 1fr 76px 68px 112px 30px;
  }
}
@media (max-width: 860px) {
  :root {
    --side-gap: 14px;
  }
  .site-header {
    height: 68px;
    grid-template-columns: 1fr auto auto;
    padding: 0 14px;
  }
  .brand strong {
    font-size: 22px;
  }
  .brand small,
  .login-button {
    font-size: 0;
  }
  .brand-mark {
    width: 38px;
    height: 30px;
  }
  .nav-toggle {
    display: block;
  }
  .site-nav {
    position: absolute;
    left: 14px;
    right: 14px;
    top: 78px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px;
    border-radius: var(--radius);
  }
  .site-nav.is-open {
    display: flex;
  }
  .site-nav a {
    padding: 15px;
  }
  .site-nav a::after {
    display: none;
  }
  .login-button {
    width: 52px;
    min-height: 52px;
    padding: 0;
  }
  .account-trigger {
    width: 52px;
    min-height: 52px;
    padding: 0;
  }
  .account-trigger span {
    display: none;
  }
  .account-trigger img {
    width: 34px;
    height: 34px;
  }
  .account-dropdown {
    right: 0;
    min-width: 190px;
  }
  .section {
    padding: 62px 0;
  }
  .hero {
    padding-top: 112px;
  }
  .actions {
    gap: 12px;
  }
  .button {
    width: 100%;
    min-height: 52px;
    font-size: 18px;
  }
  .hero-art {
    min-height: 335px;
  }
  .render-stage {
    width: 360px;
    height: 315px;
  }
  .bubble {
    display: none;
  }
  .character {
    width: 96px;
    height: 230px;
  }
  .character::before {
    left: 18px;
    top: 48px;
    width: 62px;
    height: 18px;
    box-shadow: 0 34px 0 #1a1a1a;
  }
  .character::after {
    left: -25px;
    top: 78px;
    width: 30px;
    height: 124px;
  }
  .character-left {
    left: 20px;
  }
  .character-center {
    left: 130px;
    height: 270px;
  }
  .character-right {
    right: 20px;
  }
  .community {
    padding-bottom: 54px;
  }
  .community-panel {
    min-height: 300px;
  }
  .wiki-shell {
    max-height: none;
    padding: 38px 16px;
    border-radius: 26px 26px 0 0;
  }
  .section-title {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .section-title span {
    display: none;
  }
  .card-grid {
    grid-template-columns: 1fr;
  }
  .info-card {
    min-height: 250px;
    padding: 28px;
  }
  .tag {
    position: static;
    margin-bottom: 20px;
  }
  .map-card {
    min-height: 330px;
  }
  .map-card::after {
    right: -130px;
    opacity: 0.38;
  }
  .feature-heading {
    display: block;
  }
  .feature-list article {
    padding-right: 0;
  }
  .feature-list span {
    position: static;
    margin-top: 10px;
  }
  .price-card {
    grid-template-columns: 1fr;
    min-height: 430px;
    overflow: hidden;
    padding: 170px 18px 42px;
  }
  .flying-cube {
    left: 50%;
    top: -78px;
    width: 250px;
    height: 198px;
    transform: translateX(-50%) rotate(-18deg);
  }
  .price-copy {
    grid-column: 1;
    padding: 0;
  }
  .price-copy span {
    margin-bottom: 34px;
  }
  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
    padding: 28px;
  }
  .footer-brand {
    flex-wrap: wrap;
  }
}
.site-header {
  padding: 0 max(28px, calc((100vw - var(--content)) / 2));
}
.brand strong {
  font-weight: 800;
}
.brand-status::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  background: currentColor;
  vertical-align: -0.14em;
  animation: 0.85s steps(1) infinite caretBlink;
}
.site-nav a {
  font-weight: 700;
}
.hero-grid {
  display: block;
}
.hero h1 {
  max-width: 1040px;
  font-size: clamp(38px, 4.1vw, 66px);
  font-weight: 800;
  line-height: 1.08;
}
.hero-line {
  display: block;
  white-space: nowrap;
  color: #fff;
}
.hero h1 span:last-child {
  font-weight: 800;
}
.hero p {
  max-width: 650px;
  font-weight: 600;
}
.button,
.login-button,
.map-card span,
.pills span,
.tag {
  font-weight: 700;
}
.faq-card h3,
.faq-head h2,
.feature-heading h2,
.feature-list h3,
.price-copy h2,
.price-copy p,
.season-card h3,
.section-title h2,
.voice-card h3 {
  font-weight: 800;
}
.feature-heading h2,
.feature-list h3 {
  font-size: clamp(28px, 2.55vw, 42px);
}
.faq-card p,
.feature-heading p,
.feature-list p,
.voice-card p {
  font-weight: 600;
}
.voice-card {
  padding-top: 0;
}
.voice-card h3 {
  padding-top: 4px;
}
@keyframes caretBlink {
  0%,
  48% {
    opacity: 1;
  }
  100%,
  49% {
    opacity: 0;
  }
}
.emote-image > span,
.story-image > span,
.voice-image > span {
  display: none;
}
.brand-mark {
  width: 54px;
  height: 54px;
  background: url("img/logo-pivo.png") center/contain no-repeat;
  box-shadow: none;
  animation: none;
}
.brand-mark::after,
.brand-mark::before {
  display: none;
}
.hero {
  align-items: center;
  min-height: 760px;
  align-items: flex-start;
  padding-top: 245px;
}
.community {
  padding: 0;
}
.community-panel {
  grid-template-columns: 0.82fr 1.18fr;
  align-items: center;
}
.community-characters span {
  bottom: -42px;
  width: 126px;
  height: 292px;
  display: none;
}
.community-characters span::before {
  left: 20px;
  top: 50px;
  width: 84px;
  height: 20px;
  box-shadow: 0 34px 0 #1a1a1a;
}
.community-characters span::after {
  left: -31px;
  top: 88px;
  width: 37px;
  height: 152px;
}
.community-characters span:first-child {
  left: 18%;
}
.community-characters span:nth-child(2) {
  z-index: 2;
  left: 41%;
  height: 355px;
}
.community-characters span:nth-child(3) {
  left: 66%;
}
@media (max-width: 1180px) {
  :root {
    --side-gap: clamp(22px, 7vw, 82px);
    --side-gap: clamp(20px, 6vw, 72px);
  }
  .hero-line {
    white-space: normal;
  }
  .voice-card {
    margin-top: 0;
  }
  .hero {
    padding-top: 170px;
  }
  .community-panel {
    min-height: 230px;
  }
  .community {
    margin-top: 56px;
  }
  .community-characters {
    transform: translateY(-70px);
  }
}
@media (max-width: 860px) {
  .brand-mark {
    width: 42px;
    height: 42px;
  }
  .hero {
    padding-top: 130px;
  }
}
.site-header {
  height: 84px;
  border-bottom: 0;
}
.brand strong {
  font-size: 30px;
}
.brand small {
  font-size: 16px;
}
.site-nav a {
  font-size: 19px;
}
.community {
  padding-top: 0;
}
.community::before {
  content: "";
  content: "";
}
.quote {
  padding-top: 36px;
  padding-bottom: 34px;
}
.wiki.section {
  padding-top: 30px;
  padding-bottom: 52px;
}
.features.section {
  padding-top: 44px;
}
.section-title {
  margin-bottom: 34px;
}
.section-title p {
  font-weight: 600;
}
.faq-tabs {
  position: relative;
  overflow: hidden;
}
.faq-tabs::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc(50% - 2px);
  border-radius: 12px;
  background: var(--yellow);
  transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.faq-tabs.is-server::before {
  transform: translateX(100%);
}
.faq-tabs button {
  position: relative;
  z-index: 1;
}
@media (max-width: 860px) {
  .site-header {
    height: 72px;
  }
  .brand strong {
    font-size: 23px;
  }
  .site-nav a {
    font-size: 17px;
  }
  .community {
    margin-top: 28px;
  }
}
.hero h1 .hero-line {
  color: #fff;
}
.button,
.login-button {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  font-size: 15px;
  box-shadow: none;
}
.button.primary,
.faq-tabs button.is-active,
.info-card a:hover,
.login-button {
  background: var(--yellow);
  color: #1d1507;
}
.button.telegram {
  background: #2f9bd5;
}
.button.light {
  background: #fff;
}
.wiki-shell {
  overflow-y: auto;
  scrollbar-color: rgba(255, 223, 63, 0.24) transparent;
  scrollbar-width: thin;
}
.season-list::-webkit-scrollbar,
.wiki-shell::-webkit-scrollbar {
  width: 6px;
}
.season-list::-webkit-scrollbar-track,
.wiki-shell::-webkit-scrollbar-track {
  background: 0 0;
}
.season-list::-webkit-scrollbar-thumb,
.wiki-shell::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: rgba(255, 223, 63, 0.24);
}
.card-grid {
  padding-right: 10px;
}
.info-card {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.075);
}
.info-card h3 {
  font-size: 22px;
}
.info-card a {
  min-height: 42px;
  font-size: 15px;
}
.season-card {
  max-height: 360px;
  overflow: hidden;
  padding: 28px 30px 24px;
}
.season-head {
  grid-template-columns: 1fr 78px 120px 34px;
  padding: 0 16px 0 0;
  margin: 2px 6px 14px 0;
}
.season-head span:first-child {
  grid-column: 3;
  grid-column: 3;
  text-align: center;
}
.season-list {
  max-height: 260px;
  overflow-y: auto;
  padding-right: 10px;
  scrollbar-color: rgba(255, 223, 63, 0.24) transparent;
  scrollbar-width: thin;
}
.season-row {
  grid-template-columns: 1fr 82px 76px 120px 32px;
  min-height: 60px;
  margin-top: 9px;
  border-radius: 16px;
  background: 0 0;
}
.season-row.active {
  background: rgba(255, 223, 63, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 223, 63, 0.06);
}
.season-row strong {
  font-size: 17px;
}
.season-row b,
.season-row small,
.season-row time {
  min-height: 30px;
  font-size: 15px;
}
.voice-card {
  margin-top: -170px;
}
@media (max-width: 1180px) {
  .voice-card {
    margin-top: 0;
  }
  .season-head {
    display: none;
  }
  .season-row {
    grid-template-columns: 1fr 72px 106px 30px;
  }
  .season-row small {
    display: none;
  }
}
.faq-tabs button.is-active {
  background: 0 0;
  color: #1d1507;
}
.community {
  margin-top: 0;
}
.wiki-shell {
  max-height: 510px;
  padding: 34px 34px 30px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.08);
}
.wiki-shell .section-title {
  position: sticky;
  z-index: 4;
  top: -34px;
  margin: -34px -34px 30px;
  padding: 30px 34px 24px;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}
.section-title h2 {
  font-size: 28px;
  font-weight: 700;
}
.section-title p {
  font-size: 19px;
}
.info-card {
  min-height: 220px;
}
@media (max-width: 860px) {
  :root {
    --side-gap: 18px;
  }
  .hero h1 {
    font-size: clamp(34px, 11vw, 48px);
  }
}
.community-panel {
  align-items: center;
  overflow: visible;
  isolation: isolate;
  min-height: 260px;
  grid-template-columns: 0.52fr 0.48fr;
  position: relative;
}
.wiki-shell,
.wiki-shell .section-title {
  background: var(--wiki-bg);
}
.community {
  position: relative;
  background: 0 0;
  overflow: visible;
}
.community::before {
  content: "";
  display: block;
  background: 0 0;
}
.community-panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #e8cf2e 0, #f8931f 100%);
}
.community-characters {
  transform: translateY(-150px);
  position: absolute;
  z-index: 3;
  right: -34px;
  top: -208px;
  width: min(720px, 60vw);
  height: 468px;
  min-height: 0;
  transform: none;
  background: url("img/community-three-players.png") center top/contain
    no-repeat;
}
.community {
  z-index: 1;
  background: linear-gradient(90deg, #e8cf2e 0, #f4b21f 50%, #f8931f 100%);
}
.community::before {
  height: 54px;
  background: linear-gradient(90deg, #e8cf2e 0, #f4b21f 50%, #f8931f 100%);
}
.community::after {
  display: none;
}
.community-slider {
  z-index: 1;
  display: block;
  min-height: 380px;
  padding: 0;
  overflow: hidden;
}
.community-slider::before {
  display: none;
}
.community-track {
  position: relative;
  min-height: 380px;
}
.community-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.95fr);
  align-items: center;
  gap: clamp(22px, 4vw, 58px);
  padding-bottom: 58px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(42px) scale(0.98);
  transition:
    opacity 0.65s,
    transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.community-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}
.community-copy {
  position: relative;
  z-index: 4;
  max-width: 660px;
  text-align: center;
}
.community-copy > span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin-bottom: 18px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(45, 26, 10, 0.18);
  color: rgba(31, 20, 7, 0.82);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
}
.community h2 {
  position: relative;
  z-index: 2;
  max-width: 560px;
  max-width: none;
  margin: 0 auto;
  color: #fff;
  font-size: clamp(30px, 2.55vw, 46px);
  line-height: 1.04;
  text-align: center;
  text-shadow: 0 9px rgba(110, 69, 10, 0.34);
}
.community p {
  max-width: 620px;
  margin: 16px auto 0;
  color: rgba(42, 24, 8, 0.82);
  font-size: clamp(17px, 1.2vw, 22px);
  line-height: 1.45;
}
.community-visual {
  position: relative;
  z-index: 3;
  min-height: 300px;
}
.community-slider .community-characters {
  position: relative;
  right: auto;
  top: auto;
  width: 100%;
  height: 330px;
  min-height: 300px;
  transform: translateY(-8px);
  background: url("img/community-three-players.png") center top/contain
    no-repeat;
}
.community-art {
  min-height: 250px;
  border: 8px solid rgba(255, 255, 255, 0.24);
  border-radius: 18px;
  box-shadow: 0 26px 60px rgba(71, 34, 6, 0.24);
  overflow: hidden;
}
.community-art-community {
  background:
    linear-gradient(135deg, rgba(42, 28, 17, 0.08), rgba(248, 147, 31, 0.08)),
    url("img/community-players-desert.webp") center/cover;
}
.community-art-rp {
  background:
    linear-gradient(135deg, rgba(42, 28, 17, 0.1), rgba(248, 147, 31, 0.08)),
    url("img/community-roleplay-dragon.webp") center/cover;
}
.community-art-professions {
  background:
    linear-gradient(135deg, rgba(42, 28, 17, 0.08), rgba(248, 147, 31, 0.08)),
    url("img/community-professions-town.webp") center/cover;
}
.profession-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  align-content: center;
  gap: 16px;
  min-height: 270px;
}
.profession-board span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  border-radius: 16px;
  color: #fff;
  font-family: Unbounded, Manrope, sans-serif;
  font-size: clamp(18px, 1.45vw, 26px);
  font-weight: 800;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.26),
    0 18px 36px rgba(56, 28, 7, 0.2);
}
.profession-board span:first-child {
  background: linear-gradient(135deg, #6b4a2e, #d19135);
}
.profession-board span:nth-child(2) {
  background: linear-gradient(135deg, #356f5b, #8df24c);
}
.profession-board span:nth-child(3) {
  background: linear-gradient(135deg, #7c3d76, #d86bd8);
}
.profession-board span:nth-child(4) {
  background: linear-gradient(135deg, #2f9bd5, #80d8ff);
}
.profession-board span:nth-child(5) {
  background: linear-gradient(135deg, #49515d, #b7c0cb);
}
.profession-board span:nth-child(6) {
  background: linear-gradient(135deg, #cf6819, #ffdf3f);
}
.community-controls {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  transform: translateX(-50%);
}
.community-arrow,
.community-dots button {
  border: 0;
  cursor: pointer;
}
.community-arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(27, 17, 6, 0.16);
  color: #241604;
  transition:
    transform 0.2s,
    background 0.2s;
}
.community-arrow:hover {
  background: rgba(27, 17, 6, 0.24);
  transform: translateY(-2px);
}
.community-arrow svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.community-dots {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px;
}
.community-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 999px;
  background: rgba(36, 22, 4, 0.32);
  transition:
    width 0.25s,
    background 0.25s;
}
.community-dots button.is-active {
  width: 34px;
  background: #fff;
}
@media (max-width: 860px) {
  .community::after {
    top: -54px;
    height: 54px;
  }
  .community-slider,
  .community-track {
    min-height: 620px;
  }
  .community-slide {
    grid-template-columns: 1fr;
    align-content: center;
    gap: 18px;
    padding: 28px 14px 84px;
  }
  .community h2 {
    font-size: clamp(26px, 8vw, 34px);
    line-height: 1.08;
  }
  .community p {
    font-size: 16px;
  }
  .community-art,
  .community-slider .community-characters,
  .community-visual,
  .profession-board {
    min-height: 260px;
  }
  .community-slider .community-characters {
    height: 300px;
    transform: none;
  }
  .profession-board {
    grid-template-columns: 1fr 1fr;
  }
  .profession-board span {
    min-height: 62px;
  }
}
.site-view[hidden] {
  display: none;
}
.site-nav a.is-active {
  color: var(--yellow);
}
.site-nav a.is-active::after {
  left: 0;
  right: 0;
}
.site-nav {
  gap: clamp(18px, 2.5vw, 40px);
}
.project-page,
.squaremap-page {
  min-height: calc(100vh - 230px);
  padding-top: 150px;
}
.page-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin-bottom: 18px;
  padding: 0 16px;
  border-radius: var(--radius);
  background: rgba(141, 242, 76, 0.16);
  color: var(--green);
  font-weight: 800;
  text-transform: uppercase;
}
.squaremap-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 34px;
}
.squaremap-head h1 {
  max-width: 720px;
  margin: 0;
  color: #fff;
  font-family: Unbounded, Manrope, sans-serif;
  font-size: clamp(36px, 4vw, 62px);
  line-height: 1.05;
}
.squaremap-head p {
  max-width: 760px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: clamp(17px, 1.2vw, 21px);
  line-height: 1.5;
}
.squaremap-shell {
  overflow: hidden;
  border: 1px solid rgba(255, 223, 63, 0.13);
  border-radius: 24px;
  background:
    radial-gradient(
      circle at 18% 0,
      rgba(141, 242, 76, 0.12),
      transparent 22rem
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.035)
    );
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.28);
}
.squaremap-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 76px;
  padding: 18px 24px;
  background: rgba(15, 11, 9, 0.78);
  border-bottom: 1px solid rgba(255, 223, 63, 0.1);
}
.squaremap-toolbar span,
.squaremap-toolbar strong {
  display: block;
}
.squaremap-toolbar strong {
  color: var(--yellow);
  font-family: Unbounded, Manrope, sans-serif;
  font-size: 20px;
}
.squaremap-toolbar span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 15px;
}
.squaremap-toolbar a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: var(--radius);
  background: rgba(141, 242, 76, 0.16);
  color: var(--green);
  font-weight: 800;
}
.squaremap-embed {
  position: relative;
  min-height: 640px;
  background:
    linear-gradient(rgba(17, 46, 29, 0.88), rgba(17, 46, 29, 0.88)),
    repeating-linear-gradient(
      0deg,
      transparent 0 42px,
      rgba(141, 242, 76, 0.1) 42px 43px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 42px,
      rgba(141, 242, 76, 0.1) 42px 43px
    );
}
.squaremap-frame {
  display: block;
  width: 100%;
  min-height: 640px;
  border: 0;
  background: 0 0;
}
.price-card {
  overflow: visible;
}
.price-orbit {
  position: absolute;
  z-index: 2;
  left: -92px;
  top: -124px;
  width: clamp(390px, 35vw, 585px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 26px 34px rgba(31, 119, 213, 0.34));
  animation: 6s ease-in-out infinite orbitFloat;
}
.price-copy {
  position: relative;
  z-index: 3;
}
.project-title {
  margin-bottom: 42px;
}
.project-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 38px);
  margin-bottom: 54px;
}
.project-panels {
  display: none;
}
.project-tab {
  display: block;
  position: relative;
  min-height: clamp(390px, 29vw, 560px);
  overflow: hidden;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  color: rgba(36, 20, 5, 0.72);
  font-family: Manrope, Arial, sans-serif;
  box-shadow: 0 28px 46px rgba(0, 0, 0, 0.24);
  transition:
    filter 0.22s,
    box-shadow 0.22s;
  transform: none;
  background-position: center;
  background-size: cover;
}
.project-tab::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 4;
  border: 4px solid rgba(255, 255, 255, 0);
  border-radius: 7px;
  pointer-events: none;
  transition:
    border-color 0.22s,
    box-shadow 0.22s,
    background 0.22s;
}
.project-tab::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 16px;
  z-index: 4;
  width: 46px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0;
  transform: translateX(-50%) scaleX(0.45);
  transition:
    opacity 0.22s,
    transform 0.22s;
}
.project-tab:focus-visible,
.project-tab:hover {
  filter: brightness(1.025);
  box-shadow: 0 28px 46px rgba(0, 0, 0, 0.24);
}
.project-tab:focus-visible::before,
.project-tab:hover::before {
  border-color: rgba(255, 255, 255, 0.58);
  background: rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.04),
    0 0 0 7px rgba(255, 255, 255, 0.06);
}
.project-tab:focus-visible::after,
.project-tab:hover::after {
  opacity: 0.62;
  transform: translateX(-50%) scaleX(1);
}
.project-tab strong {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 36px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: 0 0;
  color: #fff;
  font-family: Unbounded, Manrope, sans-serif;
  font-size: clamp(26px, 2.15vw, 36px);
  font-weight: 900;
  line-height: 1.12;
  text-align: center;
  text-shadow:
    0 3px 0 rgba(0, 0, 0, 0.26),
    0 14px 26px rgba(0, 0, 0, 0.82),
    0 0 18px rgba(0, 0, 0, 0.62);
}
.project-tab-art {
  position: absolute;
  z-index: 2;
  inset: 0;
  height: auto;
  background-position: center;
  background-size: cover;
}
.project-tab-art::before {
  content: "";
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.02) 0,
    rgba(0, 0, 0, 0.12) 56%,
    rgba(0, 0, 0, 0.58) 100%
  );
}
.project-tab-art::after,
.project-tab-art::before {
  content: "";
  position: absolute;
}
.project-tab-history {
  background-image: url("img/project-card-history.webp");
  color: #117235;
}
.project-tab-history .project-tab-art::before {
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: linear-gradient(
    180deg,
    rgba(31, 86, 42, 0.05) 0,
    rgba(31, 86, 42, 0.2) 62%,
    rgba(8, 20, 10, 0.62) 100%
  );
  box-shadow: none;
  transform: none;
}
.project-tab-history .project-tab-art::after {
  display: none;
}
.project-tab-players {
  background-image: url("img/project-card-players.webp");
  color: #7a3a10;
}
.project-tab-players .project-tab-art {
  background: linear-gradient(
    180deg,
    rgba(92, 41, 4, 0.03) 0,
    rgba(92, 41, 4, 0.18) 62%,
    rgba(32, 13, 2, 0.62) 100%
  );
  border-radius: 0;
  box-shadow: none;
}
.project-tab-team {
  background-image: url("img/project-card-team.webp");
  color: #65387f;
}
.project-tab-team .project-tab-art {
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(86, 42, 112, 0.08) 0,
      rgba(86, 42, 112, 0.18) 62%,
      rgba(24, 10, 34, 0.66) 100%
    ),
    url("img/project-card-team.webp") center/cover no-repeat;
  filter: none;
}
.project-tab-towns {
  background-image: url("img/project-card-towns.webp");
  color: #81520e;
}
.project-tab-towns .project-tab-art::before {
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: linear-gradient(
    180deg,
    rgba(105, 61, 6, 0.05) 0,
    rgba(105, 61, 6, 0.2) 62%,
    rgba(38, 19, 2, 0.66) 100%
  );
  box-shadow: none;
  transform: none;
}
.project-tab-towns .project-tab-art::after {
  display: none;
}
.project-panel {
  display: none;
  min-height: 220px;
  padding: 40px 44px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
}
.project-detail-page {
  min-height: calc(100vh - 230px);
  padding-top: 140px;
}
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 34px;
  color: rgba(255, 248, 239, 0.72);
  font-size: clamp(16px, 1.2vw, 20px);
  font-weight: 800;
}
.breadcrumbs a,
.breadcrumbs b {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.breadcrumbs b {
  color: var(--text);
}
.breadcrumbs svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.breadcrumbs > span {
  width: 10px;
  height: 10px;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.72;
}
.detail-hero {
  position: relative;
  overflow: hidden;
  min-height: 430px;
  padding: clamp(34px, 5vw, 68px);
  border-radius: 24px;
  background:
    linear-gradient(90deg, rgba(26, 14, 12, 0.9), rgba(26, 14, 12, 0.45)),
    url("img/community-players-desert.webp") center/cover;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.28);
}
.detail-hero::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  pointer-events: none;
}
.detail-hero > * {
  position: relative;
  z-index: 1;
}
.detail-hero span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 15px;
  border-radius: var(--radius);
  background: rgba(255, 223, 63, 0.18);
  color: var(--yellow);
  font-weight: 900;
  text-transform: uppercase;
}
.detail-hero h1 {
  max-width: 760px;
  margin: 22px 0 18px;
  color: #fff;
  font-family: Unbounded, Manrope, sans-serif;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.04;
}
.detail-hero p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(18px, 1.35vw, 24px);
  line-height: 1.52;
}
.detail-history {
  background:
    linear-gradient(90deg, rgba(18, 76, 38, 0.94), rgba(18, 76, 38, 0.42)),
    url("img/project-card-history.webp") center/cover;
}
.detail-players {
  background:
    linear-gradient(90deg, rgba(91, 42, 7, 0.92), rgba(91, 42, 7, 0.4)),
    url("img/community-players-desert.webp") center/cover;
}
.detail-towns {
  background:
    linear-gradient(90deg, rgba(108, 63, 5, 0.92), rgba(108, 63, 5, 0.38)),
    url("img/community-professions-town.webp") center/cover;
}
.page-loader {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  display: block;
  background: rgba(255, 223, 63, 0.14);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition:
    opacity 0.12s,
    transform 0.12s;
}
.page-loader.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.page-loader > div {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: 0 0;
  box-shadow: none;
}
.page-loader span {
  display: none;
}
.page-loader i {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0;
  background: 0 0;
}
.page-loader i::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--yellow), var(--orange));
  box-shadow: 0 0 18px rgba(255, 223, 63, 0.62);
  transform: scaleX(var(--loader-progress, 0));
  transform-origin: left center;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.page-loader.is-visible i::before {
  animation: none;
}
.project-panel.is-active {
  display: block;
  animation: 0.34s both panelFade;
}
.project-panel h3 {
  margin: 0 0 18px;
  color: #fff;
  font-family: Unbounded, Manrope, sans-serif;
  font-size: clamp(28px, 2.7vw, 42px);
  line-height: 1.08;
}
.project-panel p {
  max-width: 1040px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(18px, 1.25vw, 22px);
  line-height: 1.58;
}
.project-team-panel {
  padding: 0;
  background: 0 0;
  box-shadow: none;
}
.team-slider {
  --team-duration: 8600ms;
  --team-copy-y: -22px;
  --team-render-y: -50px;
  --team-render-active-y: -78px;
  --team-thumb-size: 56px;
  --team-thumb-gap: 12px;
  --team-thumbs-width: 464px;
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(
      circle at 72% 16%,
      rgba(255, 255, 255, 0.72),
      transparent 13rem
    ),
    linear-gradient(135deg, #f6ead7 0, #edd9c8 54%, #d9eff0 100%);
  color: #120d09;
  box-shadow: 0 30px 68px rgba(0, 0, 0, 0.24);
}
.team-intro {
  position: absolute;
  z-index: 5;
  left: 58px;
  top: 40px;
  max-width: 640px;
  color: #120d09;
}
.team-intro h3 {
  margin: 0;
  color: #120d09;
  font-family: Unbounded, Manrope, sans-serif;
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1.08;
}
.team-intro p {
  margin: 8px 0 0;
  color: rgba(18, 13, 9, 0.78);
  font-size: clamp(16px, 1.2vw, 20px);
  font-weight: 700;
  line-height: 1.35;
}
.team-track {
  position: relative;
  min-height: 560px;
}
.team-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
  align-items: start;
  gap: 34px;
  padding: 168px 58px 78px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s;
}
.team-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.team-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: start;
  column-gap: 14px;
  row-gap: 14px;
  min-width: 0;
  width: min(650px, 100%);
  max-width: 650px;
  opacity: 0;
  transform: translateY(calc(var(--team-copy-y) + 14px));
  transition:
    opacity 0.42s,
    transform 0.42s;
}
.team-slide.is-active .team-copy {
  opacity: 1;
  transform: translateY(var(--team-copy-y));
  transition-delay: 0.12s;
}
.team-copy h3 {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  color: #ff3346;
  font-family: Manrope, Arial, sans-serif;
  font-size: clamp(30px, 2.8vw, 42px);
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.team-copy strong {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 0 18px;
  border-radius: var(--radius);
  background: #ff3346;
  color: #fff;
  font-size: clamp(18px, 1.35vw, 24px);
  line-height: 1.1;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  white-space: normal;
}
.team-copy p {
  flex: 0 0 100%;
  max-width: 700px;
  margin: 0;
  color: #15100b;
  font-size: clamp(16px, 1.08vw, 19px);
  font-weight: 500;
  line-height: 1.48;
}
.team-render {
  justify-self: center;
  align-self: center;
  width: min(600px, 108%);
  max-height: 590px;
  object-fit: contain;
  filter: drop-shadow(0 26px 28px rgba(62, 34, 13, 0.22));
  transform: translateY(var(--team-render-y)) scale(0.97);
  transition:
    transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.55s;
}
.team-slide.is-active .team-render {
  transform: translateY(var(--team-render-active-y)) scale(1);
  filter: drop-shadow(0 34px 32px rgba(62, 34, 13, 0.28));
}
.team-controls {
  position: absolute;
  z-index: 4;
  left: 58px;
  bottom: 36px;
  display: inline-flex;
  align-items: center;
  gap: 18px;
}
.team-arrow,
.team-thumbs button {
  border: 0;
  cursor: pointer;
}
.team-arrow {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: var(--radius);
  background: rgba(18, 13, 9, 0.08);
  color: #120d09;
  transition:
    transform 0.2s,
    background 0.2s;
}
.team-arrow:hover {
  background: rgba(255, 51, 70, 0.12);
  transform: translateY(-2px);
}
.team-arrow svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.team-thumbs {
  display: inline-flex;
  gap: var(--team-thumb-gap);
  max-width: min(var(--team-thumbs-width), calc(100vw - 220px));
  overflow-x: hidden;
  overflow-y: visible;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.team-thumbs::-webkit-scrollbar {
  display: none;
}
.team-thumbs button {
  display: grid;
  place-items: center;
  flex: 0 0 var(--team-thumb-size);
  width: var(--team-thumb-size);
  height: var(--team-thumb-size);
  padding: 0;
  border-radius: var(--radius);
  background: rgba(18, 13, 9, 0.08);
  box-shadow: inset 0 0 0 2px transparent;
  transition:
    background 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
}
.team-thumbs button.is-active {
  background: rgba(255, 51, 70, 0.14);
  box-shadow: inset 0 0 0 2px #ff3346;
}
.team-thumbs button:hover {
  transform: translateY(-2px);
}
.team-thumb {
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 6px;
  object-fit: cover;
  image-rendering: pixelated;
}
.team-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: rgba(18, 13, 9, 0.08);
}
.team-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: #ff3346;
  transform: scaleX(0);
  transform-origin: left center;
}
.team-progress.is-running span {
  animation: teamProgress var(--team-duration) linear forwards;
}
.team-progress.is-paused span {
  animation-play-state: paused;
}
@keyframes orbitFloat {
  0%,
  100% {
    transform: rotate(-9deg) translateY(0);
  }
  50% {
    transform: rotate(-5deg) translateY(-14px);
  }
}
@keyframes orbitFloatMobile {
  0%,
  100% {
    transform: translateX(-50%) rotate(-8deg) translateY(0);
  }
  50% {
    transform: translateX(-50%) rotate(-4deg) translateY(-10px);
  }
}
@keyframes teamProgress {
  to {
    transform: scaleX(1);
  }
}
@keyframes panelFade {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes loaderFill {
  to {
    transform: scaleX(1);
  }
}
@media (max-width: 1180px) {
  .project-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .squaremap-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .team-slide {
    grid-template-columns: 1fr;
    padding-right: 44px;
    padding-left: 44px;
  }
  .team-render {
    position: absolute;
    right: 32px;
    bottom: 102px;
    width: 430px;
    max-height: 500px;
    opacity: 0.28;
  }
}
@media (max-width: 860px) {
  .team-slider {
    --team-copy-y: -12px;
    --team-render-y: -36px;
    --team-render-active-y: -64px;
    --team-thumb-size: 50px;
    --team-thumb-gap: 10px;
    --team-thumbs-width: 410px;
  }
  .project-detail-page,
  .project-page,
  .squaremap-page {
    padding-top: 112px;
  }
  .breadcrumbs {
    flex-wrap: wrap;
    gap: 12px;
  }
  .squaremap-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .squaremap-embed,
  .squaremap-frame {
    min-height: 520px;
  }
  .price-card {
    overflow: hidden;
    padding-top: 190px;
  }
  .price-orbit {
    left: 50%;
    top: -76px;
    width: min(480px, 108vw);
    animation-name: orbitFloatMobile;
  }
  .project-tabs {
    gap: 16px;
  }
  .project-tab {
    min-height: 360px;
  }
  .project-tab strong {
    bottom: 28px;
    font-size: 25px;
  }
  .project-panel {
    padding: 28px 22px;
  }
  .team-slider,
  .team-track {
    min-height: 650px;
  }
  .team-slide {
    padding: 178px 22px 114px;
  }
  .team-intro {
    left: 22px;
    right: 22px;
    top: 28px;
  }
  .team-copy strong {
    margin-top: 8px;
  }
  .team-copy {
    grid-template-columns: 1fr;
    row-gap: 8px;
  }
  .team-render {
    right: 50%;
    bottom: 126px;
    width: 395px;
    max-height: 465px;
    opacity: 0.22;
    transform: translateX(50%) translateY(var(--team-render-y)) scale(0.97);
  }
  .team-slide.is-active .team-render {
    transform: translateX(50%) translateY(var(--team-render-active-y)) scale(1);
  }
  .team-controls {
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%);
    gap: 12px;
  }
  .team-arrow {
    width: 52px;
    height: 52px;
  }
  .team-thumbs {
    max-width: min(var(--team-thumbs-width), calc(100vw - 152px));
  }
  .team-thumbs button {
    width: 50px;
    height: 50px;
  }
  .team-thumb {
    width: 38px;
    height: 38px;
  }
}
@media (max-width: 560px) {
  .project-tabs {
    grid-template-columns: 1fr;
  }
  .project-tab {
    min-height: 340px;
  }
}
@media (min-width: 861px) {
  .price-orbit {
    left: -150px;
  }
}
.season-head {
  grid-template-columns: 1fr 82px 76px 120px 32px;
  padding-right: 10px;
}
.season-head span:last-child {
  grid-column: 4;
  text-align: center;
}
.season-head span {
  transform: translateX(-18px);
}
.season-link {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: var(--yellow);
  transition:
    background 0.2s,
    transform 0.2s;
}
.season-link:focus-visible,
.season-link:hover {
  background: rgba(255, 223, 63, 0.14);
  transform: translateX(3px);
  outline: 0;
}
.season-link svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.history-timeline {
  margin-top: 54px;
  padding-bottom: 30px;
}
.history-timeline-head {
  display: block;
  margin-bottom: 34px;
}
.history-timeline-head span {
  color: var(--yellow);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.history-timeline-head h2 {
  margin: 8px 0 0;
  color: #fff;
  font-family: Unbounded, Manrope, sans-serif;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.04;
}
.history-season-list {
  position: relative;
  display: grid;
  gap: 46px;
}
.history-season-list::before {
  content: "";
  position: absolute;
  top: 52px;
  bottom: 52px;
  left: 48px;
  width: 1px;
  background: linear-gradient(
    180deg,
    rgba(255, 223, 63, 0.38),
    rgba(255, 255, 255, 0.08)
  );
}
.history-season {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 38px;
  scroll-margin-top: 120px;
}
.history-season-mark {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: var(--radius);
  background: 0 0;
  box-shadow: none;
}
.history-season-mark img {
  display: block;
  width: 68px;
  height: 68px;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.28));
}
.history-season.is-current .history-season-mark {
  background: 0 0;
  box-shadow: none;
}
.history-season-body {
  min-width: 0;
  padding: 4px 0 8px;
  color: rgba(255, 248, 239, 0.84);
  transition:
    background 0.22s,
    box-shadow 0.22s;
}
.history-season:target .history-season-body {
  border-radius: 14px;
  background: rgba(255, 223, 63, 0.055);
  box-shadow: 0 0 0 18px rgba(255, 223, 63, 0.055);
}
.history-season-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.history-season-title h2 {
  margin: 0;
  color: #fff;
  font-family: Unbounded, Manrope, sans-serif;
  font-size: clamp(26px, 2.5vw, 38px);
  line-height: 1.08;
}
.history-season-title span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: var(--radius);
  background: rgba(255, 223, 63, 0.18);
  color: var(--yellow);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}
.history-season-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 24px;
  margin-bottom: 14px;
}
.history-meta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  color: rgba(255, 248, 239, 0.86);
  font-size: clamp(16px, 1.35vw, 21px);
  font-weight: 800;
  white-space: nowrap;
}
.history-meta b {
  font-weight: 800;
}
.history-meta i {
  position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: #fff;
  font-style: normal;
}
.history-meta-version i {
  width: 17px;
  height: 17px;
  margin-left: 2px;
  border: 2px solid currentColor;
  transform: rotate(45deg);
}
.history-meta-date i {
  border: 2px solid currentColor;
  border-radius: 5px;
}
.history-meta-date i::before {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 5px;
  border-top: 2px solid currentColor;
}
.history-meta-duration i {
  border: 2px solid currentColor;
  border-radius: 999px;
}
.history-meta-duration i::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 4px;
  width: 2px;
  height: 7px;
  background: currentColor;
  border-radius: 99px;
}
.history-meta-duration i::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 9px;
  width: 7px;
  height: 2px;
  background: currentColor;
  border-radius: 99px;
}
.history-meta-online i {
  display: grid;
  align-items: end;
  grid-template-columns: repeat(4, 3px);
  gap: 2px;
  width: 18px;
  height: 20px;
}
.history-meta-online i::before {
  content: "";
  display: block;
  width: 3px;
  height: 6px;
  background: currentColor;
  box-shadow:
    5px -3px currentColor,
    10px -7px currentColor,
    15px -11px currentColor;
}
.history-meta::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: calc(100% + 9px);
  padding: 8px 11px;
  border: 1px solid rgba(255, 223, 63, 0.18);
  border-radius: 7px;
  background: rgba(13, 11, 10, 0.96);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(4px);
  transition:
    opacity 0.16s,
    transform 0.16s;
}
.history-meta:focus-within::after,
.history-meta:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.history-season-body p {
  max-width: 980px;
  margin: 0;
  color: rgba(255, 248, 239, 0.72);
  font-size: clamp(17px, 1.3vw, 22px);
  line-height: 1.48;
}
@media (max-width: 1180px) {
  .season-head {
    display: none;
  }
}
@media (max-width: 860px) {
  .history-timeline {
    margin-top: 34px;
  }
  .history-timeline-head {
    margin-bottom: 26px;
  }
  .history-season-list {
    gap: 34px;
  }
  .history-season-list::before {
    left: 35px;
  }
  .history-season {
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 20px;
    scroll-margin-top: 96px;
  }
  .history-season-mark {
    width: 70px;
    height: 70px;
  }
  .history-season-mark img {
    width: 52px;
    height: 52px;
  }
  .history-season-meta {
    gap: 10px 14px;
  }
  .history-meta {
    font-size: 15px;
  }
}
@media (min-width: 1600px) {
  :root {
    --content: 1380px;
    --side-gap: clamp(72px, 8vw, 150px);
  }
  .hero {
    min-height: 820px;
  }
  .community-slide,
  .faq-grid,
  .faq-head,
  .footer-bottom,
  .footer-top,
  .hero-grid,
  .media-grid,
  .project-detail-page .container,
  .project-page .container,
  .squaremap-head {
    max-width: var(--content);
  }
  .project-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 1280px) {
  :root {
    --side-gap: clamp(22px, 5vw, 70px);
  }
  .site-header {
    padding-inline: var(--side-gap);
    gap: 20px;
  }
  .brand strong {
    font-size: 27px;
  }
  .site-nav {
    gap: clamp(18px, 2.6vw, 34px);
  }
  .site-nav a {
    font-size: 17px;
  }
  .hero {
    min-height: 700px;
    padding-top: 155px;
  }
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero-copy {
    max-width: 760px;
  }
  .hero-art,
  .render-stage {
    display: none;
  }
  .faq-grid,
  .faq-head,
  .media-grid,
  .project-team-panel,
  .team-slide {
    grid-template-columns: 1fr;
  }
  .project-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .project-tab {
    min-height: 420px;
  }
  .season-card {
    max-height: 390px;
  }
  .features .container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .feature-list-top,
  .media-grid {
    display: contents;
  }
  .feature-list-top article:first-child {
    order: 3;
  }
  .media-grid > .story-image {
    order: 4;
  }
  .feature-list-top article:nth-child(2) {
    order: 5;
  }
  .media-grid > .emote-image {
    order: 6;
  }
  .media-grid > .voice-card {
    order: 7;
  }
  .media-grid > .season-card {
    order: 8;
  }
}
@media (max-width: 980px) {
  body {
    overflow-x: hidden;
  }
  .container {
    width: min(100% - 36px, var(--content));
  }
  .site-header {
    grid-template-columns: 1fr auto auto;
    height: 72px;
    padding-inline: 18px;
  }
  .brand {
    gap: 10px;
  }
  .brand-mark {
    width: 38px;
    height: 30px;
  }
  .brand strong {
    font-size: 22px;
  }
  .brand small {
    min-height: 18px;
    font-size: 13px;
  }
  .nav-toggle {
    display: grid;
    place-items: center;
    justify-self: end;
  }
  .site-nav {
    position: absolute;
    top: 72px;
    left: 18px;
    right: 18px;
    display: none;
    grid-column: 1/-1;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px;
    border: 1px solid transparent;
    border-radius: var(--radius);
  }
  .site-nav.is-open {
    display: flex;
  }
  .site-nav a {
    min-height: 46px;
    padding: 13px 12px;
    font-size: 16px;
  }
  .site-nav a::after {
    display: none;
  }
  .login-button {
    width: 52px;
    height: 52px;
    min-height: 52px;
    padding: 0;
    font-size: 0;
  }
  .account-trigger {
    width: 52px;
    height: 52px;
    min-height: 52px;
    padding: 0;
  }
  .account-trigger span {
    display: none;
  }
  .account-trigger img {
    width: 34px;
    height: 34px;
  }
  .login-button svg {
    width: 30px;
    height: 30px;
  }
  .section {
    padding-block: 58px;
  }
  .hero {
    min-height: auto;
    padding-top: 126px;
    padding-bottom: 86px;
  }
  .pills {
    gap: 10px;
  }
  .pills span {
    min-height: 32px;
    padding-inline: 12px;
    font-size: 13px;
  }
  .hero h1 {
    max-width: 100%;
    font-size: clamp(36px, 9.5vw, 58px);
    line-height: 1.04;
  }
  .hero p {
    max-width: 100%;
    margin-block: 22px 28px;
    font-size: 16px;
  }
  .actions {
    gap: 12px;
  }
  .button {
    min-height: 48px;
    padding-inline: 16px;
    font-size: 15px;
  }
  .community-slider,
  .community-track {
    min-height: 610px;
  }
  .community-slide {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 38px 18px 84px;
  }
  .community-copy {
    max-width: 680px;
    margin-inline: auto;
  }
  .community h2 {
    font-size: clamp(28px, 7vw, 40px);
  }
  .community p {
    font-size: 16px;
  }
  .community-art,
  .community-visual,
  .profession-board {
    min-height: 250px;
  }
  .wiki-shell {
    max-height: none;
    padding: 28px 18px;
    border-radius: 18px;
  }
  .wiki-shell .section-title {
    position: static;
    margin: 0 0 24px;
    padding: 0;
    background: 0 0;
  }
  .section-title {
    grid-template-columns: 1fr;
    gap: 12px;
    text-align: left;
  }
  .section-title > span {
    display: none;
  }
  .section-title h2 {
    font-size: clamp(24px, 6vw, 34px);
  }
  .section-title p {
    font-size: 16px;
  }
  .card-grid,
  .faq-grid {
    grid-template-columns: 1fr;
  }
  .faq-card,
  .info-card {
    min-height: auto;
    padding: 24px;
  }
  .feature-heading {
    display: block;
  }
  .faq-head h2,
  .feature-heading h2,
  .feature-list h3 {
    font-size: clamp(26px, 7vw, 38px);
  }
  .map-card,
  .media-placeholder,
  .tall-story,
  .wide-story {
    min-height: 300px;
  }
  .media-grid {
    gap: 18px;
  }
  .season-card {
    max-height: none;
    padding: 24px 18px;
  }
  .season-head {
    display: none;
  }
  .season-list {
    max-height: 320px;
  }
  .season-row {
    grid-template-columns: minmax(0, 1fr) 64px 104px 34px;
    gap: 10px;
    padding-inline: 10px;
  }
  .season-row small {
    display: none;
  }
  .season-row strong {
    min-width: 0;
    overflow: hidden;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .season-row b,
  .season-row time {
    font-size: 13px;
  }
  .faq-head {
    gap: 22px;
  }
  .faq-tabs {
    width: 100%;
  }
  .price-card {
    grid-template-columns: 1fr;
    min-height: auto;
    overflow: hidden;
    padding: 170px 20px 34px;
    border-radius: 20px;
  }
  .price-orbit {
    left: 50%;
    top: -90px;
    width: min(440px, 105vw);
    transform: translateX(-50%);
  }
  .price-copy {
    grid-column: 1;
    padding: 0;
    text-align: center;
  }
  .price-copy p {
    font-size: clamp(17px, 5vw, 24px);
  }
  .price-copy h2 {
    font-size: clamp(34px, 9vw, 52px);
  }
  .price-copy span {
    margin-bottom: 28px;
    font-size: 16px;
  }
  .actions.compact {
    justify-content: center;
    gap: 12px;
  }
  .footer {
    padding: 52px 18px 22px;
  }
  .footer-bottom,
  .footer-top {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
    min-height: auto;
  }
  .socials {
    flex-wrap: wrap;
  }
  .project-detail-page,
  .project-page,
  .squaremap-page {
    padding-top: 112px;
  }
  .squaremap-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .detail-hero h1,
  .squaremap-head h1 {
    font-size: clamp(32px, 8.5vw, 52px);
  }
  .detail-hero,
  .squaremap-shell {
    border-radius: 18px;
  }
  .squaremap-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .squaremap-embed,
  .squaremap-frame {
    min-height: 520px;
  }
  .project-tabs {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .project-tab {
    min-height: 340px;
  }
  .project-tab strong {
    right: 18px;
    bottom: 22px;
    left: 18px;
    font-size: clamp(22px, 5vw, 30px);
  }
  .detail-hero {
    min-height: 360px;
    padding: 34px 24px;
  }
  .breadcrumbs {
    flex-wrap: wrap;
    gap: 10px;
    font-size: 15px;
  }
  .team-slider,
  .team-track {
    min-height: 650px;
  }
  .team-slide {
    grid-template-columns: 1fr;
    padding: 176px 22px 116px;
  }
  .team-intro {
    top: 28px;
    right: 22px;
    left: 22px;
  }
  .team-copy {
    grid-template-columns: 1fr;
  }
  .team-render {
    right: 50%;
    bottom: 126px;
    width: min(420px, 94vw);
    opacity: 0.2;
    transform: translateX(50%) translateY(var(--team-render-y)) scale(0.97);
  }
  .team-slide.is-active .team-render {
    transform: translateX(50%) translateY(var(--team-render-active-y)) scale(1);
  }
  .team-controls {
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
  }
  .history-timeline {
    margin-top: 36px;
  }
  .history-season-list {
    gap: 32px;
  }
  .history-season-list::before {
    left: 32px;
  }
  .history-season {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 18px;
  }
  .history-season-mark {
    width: 64px;
    height: 64px;
  }
  .history-season-mark img {
    width: 50px;
    height: 50px;
  }
  .history-season-meta {
    gap: 10px 14px;
  }
  .history-meta {
    font-size: 15px;
  }
}
@media (max-width: 640px) {
  :root {
    --side-gap: 16px;
  }
  .community-copy,
  .detail-hero,
  .faq-head,
  .feature-heading,
  .feature-list article,
  .hero-copy,
  .history-season-body,
  .price-copy,
  .section-title,
  .squaremap-head,
  .team-copy {
    min-width: 0;
    max-width: 100%;
  }
  .community-copy,
  .hero-copy {
    width: 100%;
    max-width: 100%;
  }
  .hero-line {
    white-space: normal;
  }
  .community h2,
  .detail-hero h1,
  .faq-head h2,
  .feature-heading h2,
  .feature-list h3,
  .hero h1,
  .history-season-title h2,
  .history-timeline-head h2,
  .price-copy h2,
  .section-title h2,
  .squaremap-head h1,
  .team-copy h3 {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  .community p,
  .detail-hero p,
  .faq-card p,
  .feature-list p,
  .hero p,
  .history-season-body p,
  .squaremap-head p,
  .team-copy p {
    max-width: 100%;
    overflow-wrap: break-word;
  }
  .container {
    width: calc(100% - 32px);
  }
  .site-header {
    padding-inline: 14px;
  }
  .brand strong {
    font-size: 20px;
  }
  .brand small {
    font-size: 12px;
  }
  .hero {
    padding-top: 116px;
    padding-bottom: 70px;
  }
  .hero h1 {
    font-size: clamp(29px, 10.8vw, 40px);
  }
  .actions,
  .actions.compact {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
  .button {
    width: 100%;
  }
  .community-slider,
  .community-track {
    min-height: 650px;
  }
  .community-slide {
    padding-inline: 14px;
  }
  .community-controls {
    width: calc(100% - 28px);
    justify-content: center;
  }
  .profession-board {
    grid-template-columns: 1fr;
  }
  .community-art,
  .map-card,
  .media-placeholder {
    min-height: 230px;
  }
  .media-placeholder span {
    font-size: clamp(24px, 8vw, 34px);
  }
  .season-list {
    max-height: 360px;
  }
  .season-row {
    grid-template-columns: minmax(0, 1fr) 58px 92px 30px;
    gap: 8px;
    min-height: 54px;
    padding-inline: 8px;
  }
  .season-row b,
  .season-row time {
    min-height: 28px;
    font-size: 12px;
  }
  .season-link {
    width: 30px;
    height: 30px;
  }
  .faq-tabs {
    grid-template-columns: 1fr;
  }
  .faq-tabs::before {
    display: none;
  }
  .faq-tabs button,
  .faq-tabs button.is-active {
    background: 0 0;
    color: var(--text);
  }
  .faq-tabs button.is-active {
    background: var(--yellow);
    color: #1d1507;
  }
  .price-card {
    padding-top: 150px;
  }
  .project-tabs {
    grid-template-columns: 1fr;
  }
  .project-tab {
    min-height: 300px;
  }
  .detail-hero {
    min-height: 330px;
    padding: 28px 20px;
  }
  .detail-hero::before {
    inset: 10px;
  }
  .squaremap-embed,
  .squaremap-frame {
    min-height: 420px;
  }
  .team-slider,
  .team-track {
    min-height: 700px;
  }
  .team-slide {
    padding: 188px 18px 126px;
  }
  .team-copy h3 {
    font-size: clamp(28px, 9vw, 38px);
  }
  .team-copy p {
    font-size: 15px;
  }
  .team-thumbs {
    --team-thumb-size: 46px;
    --team-thumb-gap: 8px;
    --team-thumbs-width: 370px;
  }
  .team-thumbs button {
    width: 46px;
    height: 46px;
  }
  .history-season {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 14px;
  }
  .history-season-list::before {
    left: 26px;
  }
  .history-season-mark {
    width: 52px;
    height: 52px;
  }
  .history-season-mark img {
    width: 42px;
    height: 42px;
  }
  .history-season-title h2 {
    font-size: clamp(24px, 7.5vw, 32px);
  }
  .history-season-meta {
    display: grid;
    gap: 8px;
  }
  .history-meta {
    white-space: normal;
  }
}
@media (max-width: 420px) {
  .brand strong {
    font-size: 18px;
  }
  .brand small {
    display: none;
  }
  .login-button,
  .account-trigger,
  .nav-toggle {
    width: 48px;
    height: 48px;
    min-height: 48px;
  }
  .login-button svg {
    width: 28px;
    height: 28px;
  }
  .hero h1 {
    font-size: clamp(30px, 13vw, 40px);
  }
  .pills {
    display: grid;
    grid-template-columns: 1fr;
  }
  .community h2,
  .faq-head h2,
  .feature-heading h2 {
    font-size: clamp(26px, 8.5vw, 34px);
    line-height: 1.05;
  }
  .season-row {
    grid-template-columns: 1fr 30px;
    align-items: start;
    padding-block: 10px;
  }
  .season-row b,
  .season-row time {
    display: none;
  }
  .footer-brand {
    flex-wrap: wrap;
  }
  .project-tab {
    min-height: 260px;
  }
  .detail-hero h1,
  .squaremap-head h1 {
    font-size: clamp(30px, 10vw, 42px);
  }
  .breadcrumbs {
    font-size: 14px;
  }
  .team-controls {
    width: calc(100% - 28px);
    justify-content: center;
  }
  .team-arrow {
    width: 46px;
    height: 46px;
  }
}
@media (max-width: 700px) {
  body,
  html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  *,
  ::after,
  ::before {
    min-width: 0;
  }
  .community-copy,
  .container,
  .detail-copy,
  .detail-hero,
  .faq-head,
  .feature-heading,
  .hero-copy,
  .history-season-content,
  .team-copy,
  .wiki-shell,
  main,
  section {
    max-width: 100%;
  }
  .site-header {
    width: calc(100% - 20px);
    max-width: calc(100% - 20px);
  }
  .brand small {
    display: none;
  }
  .community h2,
  .detail-hero h1,
  .faq-head h2,
  .feature-heading h2,
  .hero h1,
  .history-season-title h2,
  .squaremap-head h1,
  .team-copy h3 {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
  }
  .hero h1 {
    font-size: clamp(27px, 8.4vw, 34px);
    line-height: 1.08;
    text-shadow: 0 4px 0 rgba(62, 32, 15, 0.42);
  }
  .community h2,
  .faq-head h2,
  .feature-heading h2 {
    font-size: clamp(25px, 7.8vw, 32px);
    line-height: 1.08;
    text-shadow: 0 4px 0 rgba(62, 32, 15, 0.42);
  }
  .community p,
  .detail-copy p,
  .feature-heading p,
  .hero p,
  .history-season p,
  .team-copy p {
    overflow-wrap: anywhere;
  }
  .community p,
  .hero p,
  .history-season-body,
  .history-season-body p {
    width: 100%;
    max-width: 100%;
  }
}
@media (max-width: 440px) {
  .container {
    width: calc(100% - 28px);
  }
  .hero h1 {
    font-size: clamp(24px, 7.3vw, 29px) !important;
  }
  .community h2,
  .faq-head h2,
  .feature-heading h2 {
    font-size: clamp(22px, 6.4vw, 26px) !important;
    max-width: min(100%, 300px) !important;
    word-break: break-all;
  }
  .community p,
  .detail-copy p,
  .feature-heading p,
  .hero p,
  .history-season-body p,
  .team-copy p {
    width: auto !important;
    max-width: min(100%, 310px) !important;
    font-size: 15px !important;
    line-height: 1.45;
    overflow-wrap: anywhere !important;
    word-break: break-word;
  }
  .hero p {
    margin-right: auto;
  }
  .community p {
    margin-left: auto;
    margin-right: auto;
  }
  .actions,
  .actions.compact {
    width: 100%;
    max-width: 100%;
  }
  .button {
    max-width: 100%;
  }
  .detail-hero h1,
  .squaremap-head h1 {
    font-size: clamp(25px, 7.4vw, 31px) !important;
  }
  .history-season-title h2,
  .team-copy h3 {
    font-size: clamp(22px, 6.6vw, 27px) !important;
  }
  .history-season-body {
    width: min(100%, 270px) !important;
    max-width: min(100%, 270px) !important;
  }
}
.site-header {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition:
    background-color 0.22s,
    border-color 0.22s,
    backdrop-filter 0.22s,
    -webkit-backdrop-filter 0.22s;
}
.site-header.is-scrolled {
  background-color: rgba(10, 9, 8, 0.38) !important;
  border-bottom-color: transparent !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
}
.button.telegram i,
.login-button i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  font-size: 1.2em;
  line-height: 1;
}
.ti-login {
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M15 12H3'/%3E%3C/svg%3E")
    center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M15 12H3'/%3E%3C/svg%3E")
    center/contain no-repeat;
}
@media (max-width: 860px) {
  .site-nav {
    background: 0 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: blur(12px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(125%) !important;
  }
  .site-header:has(.site-nav.is-open) {
    background-color: rgba(10, 9, 8, 0.46) !important;
    backdrop-filter: blur(10px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
  }
  .login-button i {
    font-size: 24px;
  }
}
@media (max-width: 420px) {
  .login-button i {
    font-size: 22px;
  }
}

.hero {
  isolation: isolate;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -96px 0 0;
  background:
    linear-gradient(90deg, rgba(16, 13, 11, 0.88), rgba(47, 25, 21, 0.7) 46%, rgba(16, 13, 11, 0.8)),
    linear-gradient(180deg, rgba(32, 18, 12, 0.78), rgba(32, 18, 12, 0.2) 34%, rgba(32, 18, 12, 0.86) 100%),
    url("img/lunar_snake_banner.webp") center 30% / cover no-repeat;
}

.auth-page {
  min-height: 100vh;
  background:
    linear-gradient(90deg, rgba(16, 13, 11, 0.94), rgba(47, 25, 21, 0.7) 48%, rgba(16, 13, 11, 0.92)),
    linear-gradient(180deg, rgba(32, 18, 12, 0.9), rgba(32, 18, 12, 0.25) 36%, rgba(32, 18, 12, 0.9)),
    url("img/lunar_snake_banner.webp") center 28% / cover no-repeat,
    #100d0b;
}
.auth-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 22% 18%, rgba(255, 223, 63, 0.22), transparent 28rem);
}
.auth-shell {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  width: min(960px, calc(100% - 48px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 80px 0;
}
.auth-panel {
  width: min(760px, 100%);
}
.auth-panel-narrow {
  width: min(620px, 100%);
}
.auth-kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 34px;
  color: rgba(255, 248, 239, 0.58);
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
}
.auth-discord-icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 223, 63, 0.22);
  border-radius: 8px;
  background: rgba(255, 223, 63, 0.09);
  color: var(--yellow);
}
.auth-discord-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.auth-view h1,
.auth-panel h1 {
  margin: 0 0 16px;
  color: #fff8ef;
  font-family: Unbounded, Manrope, Arial, sans-serif;
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 800;
  line-height: 1.05;
}
.auth-view p,
.auth-panel > p {
  max-width: 680px;
  margin: 0;
  color: rgba(255, 248, 239, 0.68);
  font-size: clamp(17px, 2.1vw, 21px);
  line-height: 1.48;
}
.auth-view p strong {
  color: #fff8ef;
}
.auth-loading {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 248, 239, 0.72);
  font-size: 20px;
}
.auth-loading span {
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 248, 239, 0.2);
  border-top-color: var(--yellow);
  border-radius: 50%;
  animation: authSpin 0.8s linear infinite;
}
.auth-steps {
  margin: 34px 0 30px;
  padding: 26px;
  border: 1px solid rgba(255, 248, 239, 0.16);
  border-radius: 8px;
  background: rgba(12, 10, 9, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.auth-steps > span {
  display: block;
  margin-bottom: 14px;
  color: rgba(255, 248, 239, 0.52);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
}
.auth-steps ol {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.auth-steps li {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 12px;
  color: rgba(255, 248, 239, 0.82);
  font-size: 18px;
  line-height: 1.35;
}
.auth-steps li b {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 248, 239, 0.18);
  border-radius: 8px;
  color: rgba(255, 248, 239, 0.64);
  font-size: 14px;
}
.auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}
.auth-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition:
    transform 0.2s,
    filter 0.2s,
    border-color 0.2s,
    background 0.2s;
}
.auth-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
}
.auth-button-primary {
  background: #fff8ef;
  color: #120f0d;
}
.auth-button-secondary {
  border-color: rgba(255, 248, 239, 0.18);
  background: rgba(255, 248, 239, 0.06);
  color: #fff8ef;
}
.auth-link-icon {
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E")
    center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E")
    center/contain no-repeat;
}
.auth-help {
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 248, 239, 0.13);
  color: rgba(255, 248, 239, 0.54);
}
.auth-help a {
  color: #fff8ef;
}
.auth-profile {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 26px;
  align-items: center;
}
.auth-profile img {
  width: 128px;
  height: 128px;
  border: 4px solid rgba(255, 223, 63, 0.7);
  border-radius: 8px;
  image-rendering: pixelated;
  background: rgba(255, 255, 255, 0.08);
}
.auth-profile span,
.auth-account-row {
  color: rgba(255, 248, 239, 0.58);
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
}
.auth-profile p {
  overflow-wrap: anywhere;
  font-family: Consolas, monospace;
  font-size: 15px;
}
.auth-account-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 34px;
  text-transform: none;
}
.auth-account-row a {
  color: #fff8ef;
}
.auth-message {
  min-height: 24px;
  margin: 22px 0 0;
  color: rgba(255, 248, 239, 0.66);
}
.auth-message[data-type="error"] {
  color: #ffb6a7;
}
.auth-message[data-type="success"] {
  color: #bdfc8c;
}
.auth-dialog {
  width: min(430px, calc(100% - 32px));
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff8ef;
}
.auth-dialog::backdrop {
  background: rgba(0, 0, 0, 0.66);
  backdrop-filter: blur(6px);
}
.auth-dialog-card {
  position: relative;
  padding: 28px;
  border: 1px solid rgba(255, 248, 239, 0.16);
  border-radius: 8px;
  background: rgba(21, 15, 13, 0.96);
}
.auth-dialog-card > span {
  color: rgba(255, 248, 239, 0.52);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}
.auth-dialog-card h2 {
  margin: 10px 0 8px;
  font-family: Unbounded, Manrope, Arial, sans-serif;
  font-size: 30px;
  line-height: 1.1;
}
.auth-dialog-card p {
  margin: 0 0 18px;
  color: rgba(255, 248, 239, 0.62);
  line-height: 1.45;
}
.auth-dialog-card input {
  width: 100%;
  min-height: 56px;
  margin-bottom: 16px;
  border: 1px solid rgba(255, 248, 239, 0.18);
  border-radius: 8px;
  background: rgba(255, 248, 239, 0.08);
  color: #fff8ef;
  font: inherit;
  font-size: 24px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  outline: 0;
}
.auth-dialog-card input:focus {
  border-color: rgba(255, 223, 63, 0.88);
  box-shadow: 0 0 0 4px rgba(255, 223, 63, 0.14);
}
.auth-dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 248, 239, 0.14);
  border-radius: 8px;
  background: rgba(255, 248, 239, 0.06);
  color: #fff8ef;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
@keyframes authSpin {
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 680px) {
  .auth-shell {
    align-items: start;
    width: min(100% - 32px, 760px);
    padding: 42px 0;
  }
  .auth-kicker {
    margin-bottom: 26px;
    font-size: 13px;
  }
  .auth-steps {
    padding: 18px;
  }
  .auth-steps li {
    font-size: 16px;
  }
  .auth-actions,
  .auth-actions .auth-button {
    width: 100%;
  }
  .auth-profile {
    grid-template-columns: 1fr;
  }
}

.profile-page {
  padding-top: 128px;
}
.players-page {
  padding-top: 128px;
}
.players-head {
  max-width: 820px;
  margin-bottom: 34px;
}
.players-head > span {
  color: var(--yellow);
  font-weight: 900;
  text-transform: uppercase;
}
.players-head h1 {
  margin: 12px 0 14px;
  color: #fff8ef;
  font-family: Unbounded, Manrope, Arial, sans-serif;
  font-size: clamp(42px, 6vw, 78px);
  line-height: 1;
}
.players-head p {
  max-width: 680px;
  margin: 0;
  color: rgba(255, 248, 239, 0.68);
  font-size: 20px;
  line-height: 1.48;
}
.players-tabs {
  display: inline-flex;
  gap: 8px;
  margin-top: 24px;
  padding: 6px;
  border: 1px solid rgba(255, 248, 239, 0.12);
  border-radius: 8px;
  background: rgba(16, 13, 11, 0.72);
}
.players-tabs button {
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: rgba(255, 248, 239, 0.68);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}
.players-tabs button.is-active {
  background: linear-gradient(135deg, var(--yellow), var(--orange));
  color: #100d0b;
}
.players-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.players-filters {
  position: static;
  display: grid;
  gap: 18px;
  padding: 22px;
  border: 1px solid rgba(255, 248, 239, 0.12);
  border-radius: 8px;
  background: rgba(16, 13, 11, 0.72);
}
.filter-group {
  display: grid;
  gap: 12px;
}
.filter-group h2 {
  margin: 0 0 2px;
  color: #fff8ef;
  font-family: Unbounded, Manrope, Arial, sans-serif;
  font-size: 22px;
}
.filter-check {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 248, 239, 0.82);
  font-weight: 900;
}
.filter-check input {
  appearance: none;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255, 248, 239, 0.1);
  border-radius: 7px;
  background: rgba(154, 215, 255, 0.1);
}
.filter-check input:checked {
  border-color: rgba(255, 172, 63, 0.8);
  background:
    linear-gradient(135deg, rgba(255, 172, 63, 0.86), rgba(248, 147, 31, 0.9));
}
.role-filter-list {
  display: grid;
  gap: 10px;
}
.role-filter i {
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 22px;
  height: 22px;
  color: #fff8ef;
  font-style: normal;
  font-weight: 900;
}
.role-filter i img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
.filter-field {
  display: grid;
  gap: 8px;
}
.filter-field span {
  color: rgba(255, 248, 239, 0.56);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}
.filter-field select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(255, 248, 239, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(45deg, transparent 50%, var(--yellow) 50%) calc(100% - 18px) 18px / 7px 7px no-repeat,
    linear-gradient(135deg, rgba(255, 172, 63, 0.11), rgba(255, 248, 239, 0.07));
  color: #fff8ef;
  font: inherit;
  font-weight: 800;
  padding: 0 38px 0 12px;
  outline: 0;
}
.filter-field select option {
  background: #15100d;
  color: #fff8ef;
  font-weight: 800;
}
.filter-field select:focus {
  border-color: rgba(255, 172, 63, 0.72);
  box-shadow: 0 0 0 4px rgba(255, 172, 63, 0.12);
}
.players-results {
  display: grid;
  gap: 18px;
}
.players-toolbar {
  display: grid;
  grid-template-columns: auto minmax(220px, 360px) auto;
  align-items: center;
  gap: 16px;
  min-height: 50px;
  padding: 0 2px;
}
.players-toolbar b {
  color: #fff8ef;
  font-size: 22px;
}
.players-toolbar span {
  color: rgba(255, 248, 239, 0.56);
  font-weight: 900;
}
.player-search input {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(255, 248, 239, 0.14);
  border-radius: 8px;
  background: rgba(255, 248, 239, 0.07);
  color: #fff8ef;
  font: inherit;
  padding: 0 14px;
  outline: 0;
}
.player-search input:focus {
  border-color: rgba(255, 172, 63, 0.68);
  box-shadow: 0 0 0 4px rgba(255, 172, 63, 0.12);
}
.players-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.player-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 84px;
  padding: 10px;
  border: 1px solid rgba(255, 172, 63, 0.18);
  border-radius: 8px;
  background: rgba(16, 13, 11, 0.74);
  color: inherit;
  transition:
    transform 0.2s,
    border-color 0.2s,
    background 0.2s;
}
.player-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 172, 63, 0.46);
  background: rgba(25, 16, 12, 0.88);
}
.player-face {
  width: 54px;
  height: 54px;
  border: 2px solid rgba(255, 172, 63, 0.42);
  border-radius: 8px;
  image-rendering: pixelated;
  background: rgba(255, 255, 255, 0.08);
}
.player-card-body {
  min-width: 0;
}
.player-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.player-card h2 {
  overflow: hidden;
  margin: 0;
  color: #fff8ef;
  font-family: Unbounded, Manrope, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player-status {
  display: inline-flex;
  align-items: center;
  color: rgba(255, 248, 239, 0.42);
  font-size: 12px;
  font-weight: 900;
}
.player-status::after {
  content: none;
}
.player-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.player-status.is-online {
  color: #bdfc8c;
}
.player-card-meta {
  margin-top: 5px;
  color: rgba(255, 248, 239, 0.68);
  font-size: 13px;
}
.player-card-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.player-card-roles span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 248, 239, 0.08);
  color: rgba(255, 248, 239, 0.76);
  font-size: 12px;
  font-weight: 900;
}
.player-card-roles img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  image-rendering: pixelated;
}
.player-card-town {
  display: inline-block;
  position: relative;
  z-index: 2;
  width: max-content;
  max-width: 100%;
  margin-top: 5px;
  color: var(--yellow);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
  cursor: pointer;
}
.player-card-town:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.player-donation {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 38px;
  color: rgba(255, 248, 239, 0.48);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}
.player-donation img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  image-rendering: pixelated;
}
.player-donation span {
  max-width: 92px;
  overflow: hidden;
  color: #fff8ef;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.load-more {
  justify-self: center;
  min-width: 220px;
  min-height: 52px;
  margin-top: 10px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--yellow), var(--orange));
  color: #100d0b;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}
.load-more:disabled {
  cursor: progress;
  opacity: 0.62;
}
.players-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}
.players-pagination[hidden] {
  display: none;
}
.players-pagination button,
.players-pagination span {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 900;
}
.players-pagination button {
  border: 1px solid rgba(255, 172, 63, 0.2);
  background: rgba(16, 13, 11, 0.78);
  color: rgba(255, 248, 239, 0.74);
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s,
    transform 0.2s;
}
.players-pagination button:hover:not(:disabled),
.players-pagination button:focus-visible {
  border-color: rgba(255, 172, 63, 0.56);
  background: rgba(255, 172, 63, 0.12);
  color: var(--yellow);
  outline: 0;
  transform: translateY(-1px);
}
.players-pagination button.is-active {
  border-color: rgba(255, 172, 63, 0.72);
  background: rgba(255, 172, 63, 0.18);
  color: var(--yellow);
}
.players-pagination button:disabled {
  opacity: 0.42;
  cursor: default;
}
.players-pagination span {
  color: rgba(255, 248, 239, 0.42);
}
.players-empty {
  grid-column: 1 / -1;
  padding: 24px;
  border: 1px dashed rgba(255, 248, 239, 0.16);
  border-radius: 8px;
  color: rgba(255, 248, 239, 0.62);
}
.feed-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.42fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.feed-composer,
.feed-post {
  border: 1px solid rgba(255, 248, 239, 0.12);
  border-radius: 8px;
  background: rgba(16, 13, 11, 0.72);
}
.feed-composer {
  position: sticky;
  top: 96px;
  padding: 22px;
}
.feed-composer h2 {
  margin: 0 0 14px;
  color: #fff8ef;
  font-family: Unbounded, Manrope, Arial, sans-serif;
  font-size: 24px;
}
.feed-composer textarea {
  width: 100%;
  min-height: 150px;
  resize: vertical;
  border: 1px solid rgba(255, 248, 239, 0.14);
  border-radius: 8px;
  background: rgba(255, 248, 239, 0.07);
  color: #fff8ef;
  font: inherit;
  padding: 14px;
  outline: 0;
}
.feed-composer textarea:focus {
  border-color: rgba(255, 172, 63, 0.68);
}
.feed-composer > div {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}
.feed-composer span {
  color: #ffb6a7;
  font-size: 14px;
}
.feed-list {
  display: grid;
  gap: 14px;
}
.feed-post {
  padding: 18px;
}
.feed-post-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.feed-post-head img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  image-rendering: pixelated;
}
.feed-post-head div {
  display: grid;
}
.feed-post-head a {
  color: #fff8ef;
  font-weight: 900;
}
.feed-post-head span,
.feed-actions span {
  color: rgba(255, 248, 239, 0.48);
  font-size: 13px;
  font-weight: 800;
}
.feed-post-content {
  margin: 14px 0;
  color: rgba(255, 248, 239, 0.86);
  line-height: 1.5;
  white-space: pre-wrap;
}
.feed-post-content a {
  color: var(--yellow);
  font-weight: 800;
  overflow-wrap: anywhere;
}
.feed-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 12px 0 14px;
}
.feed-images a {
  display: block;
  overflow: hidden;
  border: 1px solid rgba(255, 248, 239, 0.12);
  border-radius: 8px;
  background: rgba(255, 248, 239, 0.05);
}
.feed-images img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
.feed-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.feed-actions button,
.feed-reply-actions button,
.reply-form button {
  min-height: 36px;
  border: 1px solid rgba(255, 248, 239, 0.12);
  border-radius: 8px;
  background: rgba(255, 248, 239, 0.07);
  color: #fff8ef;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  padding: 0 12px;
}
.feed-actions button:disabled,
.feed-reply-actions button:disabled,
.story-like:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}
.reply-login-notice {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 248, 239, 0.12);
  border-radius: 8px;
  background: rgba(255, 248, 239, 0.06);
}
.reply-login-notice a {
  color: var(--yellow);
  font-weight: 900;
}
.feed-actions button.is-liked {
  border-color: rgba(255, 172, 63, 0.52);
  color: var(--yellow);
}
.feed-actions button.feed-like,
.feed-reply-actions button.feed-like {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.feed-like img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.feed-like.is-liked span {
  color: var(--yellow);
}
.feed-reply-actions .feed-like img {
  width: 16px;
  height: 16px;
}
.feed-replies {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}
.feed-reply {
  display: grid;
  gap: 8px;
}
.feed-reply-body {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  align-items: start;
}
.feed-reply-face {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  image-rendering: pixelated;
}
.feed-replies.is-nested {
  position: relative;
  margin: 8px 0 0 28px;
  padding-left: 18px;
}
.feed-replies.is-nested .feed-replies.is-nested {
  margin-left: 0;
  padding-left: 12px;
}
.feed-replies.is-nested::before {
  content: "";
  position: absolute;
  left: 0;
  top: -10px;
  width: 18px;
  height: 24px;
  border-left: 2px solid rgba(255, 248, 239, 0.18);
  border-bottom: 2px solid rgba(255, 248, 239, 0.18);
  border-bottom-left-radius: 8px;
}
.feed-replies-more {
  justify-self: start;
  min-height: 30px;
  border: 1px solid rgba(255, 248, 239, 0.12);
  border-radius: 8px;
  background: rgba(255, 248, 239, 0.07);
  color: #fff8ef;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  padding: 0 10px;
}
.feed-replies p {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 248, 239, 0.06);
  color: rgba(255, 248, 239, 0.78);
  overflow-wrap: anywhere;
}
.feed-replies p a {
  color: var(--yellow);
  font-weight: 800;
  overflow-wrap: anywhere;
}
.feed-reply-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.feed-reply-actions button {
  min-height: 30px;
  padding: 0 10px;
  font-size: 13px;
}
.feed-reply-actions button.is-liked {
  border-color: rgba(255, 172, 63, 0.52);
  color: var(--yellow);
}
.reply-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 12px;
}
.reply-form input {
  min-height: 38px;
  border: 1px solid rgba(255, 248, 239, 0.12);
  border-radius: 8px;
  background: rgba(255, 248, 239, 0.07);
  color: #fff8ef;
  font: inherit;
  padding: 0 12px;
  outline: 0;
}
.feed-moderation {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 248, 239, 0.12);
}
.feed-moderation-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.feed-moderation-head h2 {
  margin: 0;
  font-size: 18px;
}
.feed-moderation-head span {
  color: rgba(255, 248, 239, 0.52);
}
.feed-moderation-list {
  display: grid;
  gap: 10px;
}
.feed-moderation-item {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 248, 239, 0.12);
  border-radius: 8px;
  background: rgba(255, 248, 239, 0.05);
}
.feed-moderation-item b {
  color: #fff8ef;
}
.music-moderation-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 10px;
}
.music-moderation-card {
  display: grid;
  grid-template-rows: 82px auto 34px;
  gap: 7px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(255, 248, 239, 0.12);
  border-radius: 8px;
  background: rgba(16, 13, 11, 0.72);
}
.music-moderation-cover {
  display: block;
  width: 100%;
  height: 82px;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(255, 248, 239, 0.12);
  border-radius: 6px;
  background: rgba(5, 8, 12, 0.44);
  cursor: pointer;
}
.music-moderation-cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
.music-moderation-meta {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.music-moderation-meta h3 {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-family: Unbounded, Manrope, Arial, sans-serif;
  font-size: 11px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.music-moderation-meta p,
.music-moderation-meta span {
  margin: 0;
  overflow: hidden;
  color: rgba(255, 248, 239, 0.62);
  font-size: 10px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.music-moderation-meta span {
  color: rgba(255, 248, 239, 0.82);
  font-weight: 900;
}
.music-moderation-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.music-moderation-action {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 34px;
  border: 1px solid rgba(255, 248, 239, 0.13);
  border-radius: 7px;
  background: rgba(255, 248, 239, 0.06);
  color: rgba(255, 248, 239, 0.84);
  font: inherit;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}
.music-moderation-action:hover:not(:disabled),
.music-moderation-action:focus-visible:not(:disabled) {
  outline: none;
}
.music-moderation-action.is-approve:hover:not(:disabled),
.music-moderation-action.is-approve:focus-visible:not(:disabled) {
  border-color: rgba(82, 255, 154, 0.66);
  background: rgba(82, 255, 154, 0.16);
  color: #6dffa5;
}
.music-moderation-action.is-reject:hover:not(:disabled),
.music-moderation-action.is-reject:focus-visible:not(:disabled) {
  border-color: rgba(255, 91, 91, 0.72);
  background: rgba(255, 91, 91, 0.16);
  color: #ff7b7b;
}
.music-moderation-action:disabled {
  cursor: wait;
  opacity: 0.55;
}
.music-side .feed-moderation {
  overflow: hidden;
  margin-top: 0;
  padding: 16px;
  border: 1px solid rgba(255, 248, 239, 0.12);
  border-radius: 8px;
  background: rgba(16, 13, 11, 0.78);
}
.music-side .feed-moderation-list,
.music-side .music-moderation-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.music-side .music-moderation-card {
  grid-template-columns: 72px minmax(0, 1fr) auto;
  grid-template-rows: none;
  gap: 12px;
  align-items: center;
  min-height: 96px;
}
.music-side .music-moderation-cover {
  width: 72px;
  height: 72px;
}
.music-side .music-moderation-actions {
  grid-template-columns: 38px 38px;
}
.profile-loading {
  display: grid;
  place-items: center;
  min-height: 52vh;
  color: rgba(255, 248, 239, 0.72);
  font-size: 22px;
  text-align: center;
}
.profile-loading p {
  max-width: 520px;
  margin: 18px 0 0;
  color: rgba(255, 248, 239, 0.6);
  font-size: 16px;
}
.profile-layout {
  display: grid;
  gap: 28px;
}
.profile-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  align-items: center;
  gap: 34px;
  padding: 34px;
  border: 1px solid rgba(255, 248, 239, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 172, 63, 0.12), transparent 34%),
    rgba(16, 13, 11, 0.68);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.28);
}
.profile-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffb6a7;
  font-weight: 900;
  font-weight: 900;
  text-transform: uppercase;
}
.profile-status::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: currentColor;
}
.profile-status.is-online {
  color: #bdfc8c;
}
.profile-hero h1 {
  margin: 12px 0 14px;
  color: #fff8ef;
  font-family: Unbounded, Manrope, Arial, sans-serif;
  font-size: clamp(42px, 6vw, 76px);
  line-height: 1;
}
.profile-hero input {
  width: min(420px, 100%);
  min-height: 44px;
  border: 1px solid rgba(255, 248, 239, 0.14);
  border-radius: 8px;
  background: rgba(255, 248, 239, 0.06);
  color: rgba(255, 248, 239, 0.9);
  font: inherit;
  padding: 0 14px;
  outline: 0;
}
.profile-hero input:focus {
  border-color: rgba(255, 172, 63, 0.7);
}
.profile-hero input[readonly] {
  cursor: default;
}
.profile-hero input[readonly]:focus {
  border-color: rgba(255, 248, 239, 0.14);
}
.profile-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.role-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(255, 248, 239, 0.14);
  border-radius: 8px;
  background: rgba(255, 248, 239, 0.07);
  color: #fff8ef;
  font-size: 14px;
  font-weight: 900;
}
.role-chip i {
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 28px;
  height: 28px;
  border-radius: 0;
  background: transparent;
  color: currentColor;
  font-style: normal;
  font-size: 14px;
}
.role-chip i img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
.role-тех-админ,
.role-admin,
.role-админ {
  border-color: rgba(154, 215, 255, 0.28);
  background: rgba(47, 155, 213, 0.13);
}
.role-тех-админ i,
.role-admin i,
.role-админ i {
  background: transparent;
}
.profile-viewer {
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 248, 239, 0.12);
  border-radius: 8px;
  background: rgba(5, 8, 12, 0.56);
}
.profile-viewer iframe {
  width: min(400px, 100%);
  height: 400px;
}
.profile-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.92fr) minmax(0, 1.08fr);
  gap: 28px;
}
.profile-card {
  padding: 28px;
  border: 1px solid rgba(255, 248, 239, 0.12);
  border-radius: 8px;
  background: rgba(16, 13, 11, 0.64);
}
.profile-card h2 {
  margin: 0 0 22px;
  color: #fff8ef;
  font-family: Unbounded, Manrope, Arial, sans-serif;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.1;
}
.profile-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.mini-button,
.show-more {
  min-height: 40px;
  border: 1px solid rgba(255, 248, 239, 0.16);
  border-radius: 8px;
  background: rgba(255, 248, 239, 0.07);
  color: #fff8ef;
  font-weight: 900;
  cursor: pointer;
}
.mini-button {
  padding: 0 14px;
}
.show-more {
  width: 100%;
  margin-top: 16px;
}
.stat-row {
  display: grid;
  grid-template-columns: 86px 1fr;
  align-items: center;
  gap: 18px;
  min-height: 94px;
  margin-bottom: 16px;
  padding: 18px;
  border-radius: 8px;
  background: rgba(154, 215, 255, 0.07);
}
.stat-icon {
  display: grid;
  place-items: center;
  color: rgba(255, 248, 239, 0.76);
  font-size: 58px;
  font-weight: 900;
  line-height: 1;
}
.stat-row b {
  display: block;
  color: #fff8ef;
  font-size: 24px;
}
.stat-row p {
  margin: 2px 0 0;
  color: rgba(255, 248, 239, 0.82);
  font-size: 20px;
}
.donation-card {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-top: 20px;
  padding: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(47, 155, 213, 0.2), rgba(20, 28, 58, 0.92));
  text-align: center;
}
.donation-card img {
  width: 82px;
  height: 82px;
  object-fit: contain;
  image-rendering: pixelated;
}
.donation-card h3 {
  margin: 0;
  color: #fff8ef;
  font-family: Unbounded, Manrope, Arial, sans-serif;
  font-size: 30px;
}
.donation-card p {
  margin: 0;
  color: rgba(255, 248, 239, 0.86);
  font-size: 19px;
}
.character-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.characters-empty {
  grid-column: 1 / -1;
  margin: 0;
  color: rgba(255, 248, 239, 0.58);
}
.character-card {
  display: grid;
  gap: 10px;
  min-height: 164px;
  padding: 16px;
  border: 1px solid rgba(255, 248, 239, 0.12);
  border-radius: 8px;
  background: rgba(255, 248, 239, 0.06);
  color: #fff8ef;
  text-align: left;
}
.character-card.is-current {
  border-color: rgba(141, 242, 76, 0.46);
  background:
    linear-gradient(135deg, rgba(141, 242, 76, 0.14), rgba(255, 248, 239, 0.06) 54%),
    rgba(255, 248, 239, 0.07);
}
.character-card.is-dead:not(.is-current) {
  opacity: 0.78;
}
.character-skeleton {
  min-height: 164px;
  pointer-events: none;
}
.character-skeleton span {
  display: block;
  border-radius: 8px;
  background: rgba(255, 248, 239, 0.08);
  overflow: hidden;
  position: relative;
}
.character-skeleton span:first-child {
  width: 104px;
  height: 132px;
  grid-row: 1 / 4;
}
.character-skeleton span:nth-child(2) {
  height: 24px;
  margin-top: 18px;
}
.character-skeleton span:nth-child(3) {
  height: 46px;
}
.character-skeleton span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 248, 239, 0.14), transparent);
  animation: skeletonSweep 1.2s ease-in-out infinite;
}
.character-card-open {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
  padding: 0;
}
.character-card img {
  width: 104px;
  height: 132px;
  border-radius: 8px;
  object-fit: contain;
  image-rendering: pixelated;
  background: transparent;
}
.character-card-text {
  min-width: 0;
  padding-top: 6px;
}
.character-card b {
  display: block;
  overflow-wrap: anywhere;
  color: #fff8ef;
  font-size: 22px;
  line-height: 1.15;
}
.character-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  margin-bottom: 10px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 248, 239, 0.1);
  color: rgba(255, 248, 239, 0.72);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.character-card.is-current .character-status {
  background: rgba(141, 242, 76, 0.18);
  color: var(--green);
}
.character-card.is-dead:not(.is-current) .character-status {
  background: rgba(255, 248, 239, 0.08);
  color: rgba(255, 248, 239, 0.58);
}
.character-card-text p {
  margin: 10px 0 0;
  color: rgba(255, 248, 239, 0.68);
  font-size: 15px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.character-card-meta {
  display: block;
  margin-top: 9px;
  color: var(--yellow);
  font-size: 14px;
  font-weight: 1000;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.character-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.character-actions button {
  min-height: 32px;
  border: 1px solid rgba(255, 248, 239, 0.14);
  border-radius: 8px;
  background: rgba(255, 248, 239, 0.07);
  color: #fff8ef;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  padding: 0 10px;
}
.auth-dialog:has(.character-modal) {
  width: min(760px, calc(100% - 32px));
}
.character-modal {
  min-height: 310px;
}
.character-modal-layout {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
  gap: 26px;
  align-items: center;
}
.character-modal img {
  display: block;
  width: min(220px, 100%);
  height: 260px;
  margin: 0 auto;
  border-radius: 8px;
  object-fit: contain;
  image-rendering: pixelated;
  background: transparent;
}
.character-modal-copy {
  min-width: 0;
  max-width: 48ch;
}
.character-modal-copy h2 {
  margin-top: 0;
  overflow-wrap: anywhere;
}
.character-modal-details {
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
}
.character-modal-details span {
  width: fit-content;
  padding: 5px 9px;
  border: 1px solid rgba(255, 172, 63, 0.24);
  border-radius: 8px;
  background: rgba(255, 172, 63, 0.12);
  color: var(--yellow);
  font-size: 14px;
  font-weight: 1000;
  line-height: 1.25;
}
.character-modal-copy p {
  max-height: min(250px, 52vh);
  margin-bottom: 0;
  overflow: auto;
  color: rgba(255, 248, 239, 0.76);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.empty-posts {
  padding: 22px;
  border: 1px dashed rgba(255, 248, 239, 0.16);
  border-radius: 8px;
  color: rgba(255, 248, 239, 0.58);
}
.profile-posts {
  width: min(760px, 100%);
  min-height: 180px;
  max-height: min(680px, calc(100vh - 150px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}
.account-trigger {
  position: relative;
}
.account-badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #f04444;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}
.account-notifications-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.account-notifications-badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border: 2px solid rgba(255, 248, 239, 0.92);
  border-radius: 999px;
  background: #f04444;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(240, 68, 68, 0.18);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}
.account-notifications-panel {
  display: grid;
  gap: 8px;
  width: min(360px, calc(100vw - 32px));
  max-height: min(420px, calc(100vh - 160px));
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 248, 239, 0.1);
  overflow: auto;
}
.account-notifications-panel[hidden] {
  display: none;
}
.account-dropdown .account-notification-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 9px;
  border: 1px solid rgba(255, 248, 239, 0.1);
  border-radius: 8px;
  background: rgba(255, 248, 239, 0.05);
  color: rgba(255, 248, 239, 0.78);
}
.account-dropdown .account-notification-item:hover,
.account-dropdown .account-notification-item:focus-visible {
  border-color: rgba(255, 172, 63, 0.32);
  background: rgba(255, 172, 63, 0.1);
  color: var(--text);
  outline: 0;
}
.account-dropdown .account-notification-item.is-unread {
  border-color: rgba(255, 172, 63, 0.38);
}
.account-notification-item img {
  width: 40px;
  height: 40px;
  border-radius: 7px;
  image-rendering: pixelated;
}
.account-notification-item span {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.account-notification-item b {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-notification-item small,
.account-notifications-empty {
  color: rgba(255, 248, 239, 0.52);
  font-size: 12px;
  font-weight: 800;
}
.account-notifications-empty {
  margin: 0;
  padding: 10px 8px;
}
.notifications-modal {
  width: min(760px, calc(100vw - 32px));
  min-height: min(620px, calc(100vh - 72px));
}
.notifications-list {
  display: grid;
  gap: 12px;
  max-height: min(520px, calc(100vh - 250px));
  overflow: auto;
}
.notification-item {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 14px;
  align-items: center;
  min-height: 78px;
  padding: 14px;
  border: 1px solid rgba(255, 248, 239, 0.12);
  border-radius: 8px;
  background: rgba(255, 248, 239, 0.06);
}
.notification-item.is-unread {
  border-color: rgba(255, 172, 63, 0.34);
}
.notification-item img {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  image-rendering: pixelated;
}
.notification-item div {
  display: grid;
  gap: 4px;
}
.notification-item b {
  color: var(--text);
  font-size: 17px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.notification-item span {
  color: rgba(255, 248, 239, 0.52);
  font-size: 14px;
}
.profile-notifications-button {
  width: max-content;
  margin-top: 14px;
  padding: 0 16px;
}
.music-layout,
.feed-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}
.music-hero {
  position: relative;
  min-height: 190px;
  overflow: hidden;
  border: 1px solid rgba(255, 248, 239, 0.12);
  border-radius: 8px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 172, 63, 0.22), transparent 34%),
    radial-gradient(circle at 82% 14%, rgba(47, 155, 213, 0.18), transparent 28%),
    linear-gradient(135deg, rgba(16, 13, 11, 0.94), rgba(47, 25, 21, 0.86));
}
.music-hero-title {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 18px;
  align-content: center;
  min-height: 190px;
  padding: clamp(24px, 4vw, 42px);
}
.music-hero h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--text);
  font-family: Unbounded, Manrope, Arial, sans-serif;
  font-size: clamp(30px, 5vw, 58px);
  line-height: 1;
}
.music-hero h2 i {
  color: var(--yellow);
  filter: drop-shadow(0 0 14px rgba(255, 172, 63, 0.4));
}
.music-hero-play {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--yellow), var(--orange));
  color: #1c1008;
  font: inherit;
  font-weight: 1000;
  cursor: pointer;
  box-shadow: 0 16px 34px rgba(248, 147, 31, 0.24);
}
.music-hero-play i {
  flex: 0 0 auto;
}
.music-hero-play span {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
  line-height: 1.15;
}
.music-hero-wave {
  position: absolute;
  inset: auto 0 0;
  height: 80px;
  overflow: hidden;
  opacity: 0.95;
}
.music-hero-wave span {
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: 18px;
  height: 44px;
  border-top: 3px solid rgba(255, 172, 63, 0.72);
  border-radius: 50%;
  filter: drop-shadow(0 0 12px rgba(255, 172, 63, 0.28));
  animation: musicIdleWave 8s ease-in-out infinite;
}
.music-hero-wave span:nth-child(2) {
  bottom: 10px;
  border-color: rgba(154, 215, 255, 0.5);
  animation-delay: -2.4s;
}
.music-hero-wave span:nth-child(3) {
  bottom: 2px;
  border-color: rgba(255, 248, 239, 0.32);
  animation-delay: -4.8s;
}
body:has(.global-music-player.is-playing) .music-hero-wave span {
  animation-name: musicActiveWave;
  animation-duration: 1.65s;
}
@keyframes musicIdleWave {
  0%,
  100% {
    transform: translateX(-1%) scaleY(0.22);
  }
  35% {
    transform: translateX(1.5%) scaleY(0.72);
  }
  65% {
    transform: translateX(-0.5%) scaleY(0.42);
  }
}
@keyframes musicActiveWave {
  0%,
  100% {
    transform: translateX(-2%) scaleY(0.32) skewX(-6deg);
  }
  20% {
    transform: translateX(1%) scaleY(1.05) skewX(4deg);
  }
  45% {
    transform: translateX(-1%) scaleY(0.58) skewX(-3deg);
  }
  72% {
    transform: translateX(2%) scaleY(1.24) skewX(5deg);
  }
}

@media (max-width: 720px) {
  .character-modal-layout {
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
  }
  .character-modal img {
    height: 220px;
  }
  .character-modal-copy {
    max-width: 100%;
  }
  .music-hero-title {
    min-height: 170px;
    padding: 22px;
  }
  .music-hero h2 {
    font-size: clamp(27px, 8vw, 36px);
  }
  .music-hero-play {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .music-topbar,
  .music-section-head {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .music-section-head {
    display: grid;
  }
  .music-sort-field {
    width: 100%;
  }
  .music-chart-list,
  .music-album-list,
  .music-playlist-list {
    grid-template-columns: 1fr;
  }
  .music-playlist-panel-head,
  .music-playlist-panel-body {
    grid-template-columns: 1fr;
  }
  .music-playlist-panel-actions,
  .music-playlist-track-actions {
    justify-content: flex-start;
  }
  .music-playlist-track {
    grid-template-columns: 54px minmax(0, 1fr);
  }
  .music-playlist-track-actions {
    grid-column: 1 / -1;
  }
}
.feed-topbar,
.music-topbar {
  display: grid;
  grid-template-columns: auto auto minmax(220px, 360px);
  gap: 14px;
  align-items: end;
  padding: 16px;
  border: 1px solid rgba(255, 248, 239, 0.12);
  border-radius: 8px;
  background: rgba(16, 13, 11, 0.62);
}
.feed-topbar .auth-button,
.music-topbar .auth-button {
  align-self: end;
  width: max-content;
}
.moderation-toggle {
  border: 1px solid rgba(255, 248, 239, 0.14);
  background: rgba(255, 248, 239, 0.07);
  color: var(--text);
}
.feed-side:empty,
.music-side:empty {
  display: none;
}
.music-charts,
.music-albums,
.music-history,
.music-library-tools {
  display: grid;
  gap: 14px;
}
.music-history {
  order: 100;
}
.music-artist-panel {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 132px;
  padding: 20px;
  border: 1px solid rgba(255, 248, 239, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 172, 63, 0.14), rgba(47, 155, 213, 0.1)),
    rgba(16, 13, 11, 0.76);
}
.music-artist-panel[hidden] {
  display: none;
}
.music-artist-panel img {
  width: 92px;
  height: 92px;
  border-radius: 8px;
  object-fit: cover;
  image-rendering: pixelated;
}
.music-artist-panel span {
  color: var(--yellow);
  font-size: 13px;
  font-weight: 1000;
  text-transform: uppercase;
}
.music-artist-panel h2 {
  margin: 4px 0 6px;
  color: var(--text);
  font-family: Unbounded, Manrope, Arial, sans-serif;
  font-size: clamp(26px, 4vw, 42px);
  line-height: 1;
  overflow-wrap: anywhere;
}
.music-artist-panel p {
  margin: 0;
  color: rgba(255, 248, 239, 0.68);
}
.music-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}
.music-section-head h2 {
  margin: 0;
  color: var(--text);
  font-family: Unbounded, Manrope, Arial, sans-serif;
  font-size: clamp(22px, 3vw, 32px);
}
.music-range-tabs,
.music-library-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.music-range-tabs button,
.music-library-actions button {
  min-height: 36px;
  border: 1px solid rgba(255, 248, 239, 0.12);
  border-radius: 8px;
  background: rgba(255, 248, 239, 0.07);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  padding: 0 12px;
}
.music-range-tabs button.is-active,
.music-library-actions button.is-active {
  border-color: rgba(255, 172, 63, 0.48);
  background: rgba(255, 172, 63, 0.14);
  color: var(--yellow);
}
.music-chart-list,
.music-album-list,
.music-playlist-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 18px;
}
.music-chart-card,
.music-album-card,
.music-playlist-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 82px;
  padding: 12px;
  border: 1px solid rgba(255, 248, 239, 0.12);
  border-radius: 8px;
  background: rgba(16, 13, 11, 0.72);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.music-playlist-card > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.music-chart-card img,
.music-album-card img,
.music-playlist-card img {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  image-rendering: pixelated;
}
.music-chart-card > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.music-chart-card b,
.music-chart-card span,
.music-chart-card small {
  display: block;
  min-width: 0;
  line-height: 1.25;
}
.music-chart-card b,
.music-album-card b,
.music-playlist-card b,
.music-chart-card span,
.music-album-card span,
.music-playlist-card span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.music-chart-card small,
.music-album-card small,
.music-playlist-card small,
.music-track-stats {
  color: rgba(255, 248, 239, 0.58);
  font-size: 12px;
  font-weight: 900;
}
.music-sort-field {
  min-width: 190px;
  margin: 0;
}
.music-upload,
.music-track {
  border: 1px solid rgba(255, 248, 239, 0.12);
  border-radius: 8px;
  background: rgba(16, 13, 11, 0.72);
}
.music-upload {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 12px;
  padding: 22px;
}
.music-upload h2,
.music-track h3 {
  margin: 0;
  color: var(--text);
  font-family: Unbounded, Manrope, Arial, sans-serif;
}
.music-upload input {
  min-height: 42px;
  border: 1px solid rgba(255, 248, 239, 0.14);
  border-radius: 8px;
  background: rgba(255, 248, 239, 0.07);
  color: var(--text);
  font: inherit;
  padding: 0 12px;
}
.music-upload input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.music-upload label {
  display: grid;
  gap: 6px;
  color: rgba(255, 248, 239, 0.72);
  font-size: 14px;
}
.file-drop {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  min-height: 72px;
  padding: 12px;
  border: 1px solid rgba(255, 248, 239, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 212, 59, 0.12), rgba(255, 248, 239, 0.035)),
    rgba(255, 248, 239, 0.06);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.file-drop:hover,
.file-drop:focus-visible {
  border-color: rgba(255, 212, 59, 0.48);
  background:
    linear-gradient(135deg, rgba(255, 212, 59, 0.17), rgba(255, 248, 239, 0.05)),
    rgba(255, 248, 239, 0.08);
  outline: 0;
  transform: translateY(-1px);
}
.file-drop i {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: rgba(255, 212, 59, 0.16);
  color: var(--yellow);
  font-size: 22px;
  line-height: 1;
}
.file-drop b {
  min-width: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.25;
}
.file-drop small {
  min-width: 0;
  color: rgba(255, 248, 239, 0.58);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-drop.has-file {
  border-color: rgba(189, 252, 140, 0.36);
}
.file-drop.has-file i {
  background: rgba(189, 252, 140, 0.14);
  color: #bdfc8c;
}
.file-drop.has-file small {
  color: rgba(255, 248, 239, 0.78);
}
.music-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 24px;
}
.music-track {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  min-width: 0;
  min-height: 280px;
  aspect-ratio: 0.9;
  padding: 0;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.music-track:hover {
  border-color: rgba(255, 172, 63, 0.38);
  transform: translateY(-2px);
}
.music-track.is-playing {
  border-color: rgba(255, 172, 63, 0.7);
  box-shadow: 0 0 0 1px rgba(255, 172, 63, 0.2), 0 18px 44px rgba(255, 172, 63, 0.14);
}
.music-track.is-playing::before {
  content: "Сейчас играет";
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(255, 172, 63, 0.92);
  color: #1c1008;
  font-size: 11px;
  font-weight: 1000;
}
.music-skeleton {
  pointer-events: none;
}
.music-skeleton span {
  position: relative;
  z-index: 1;
  align-self: end;
  display: block;
  height: 12px;
  margin: 0 14px 10px;
  border-radius: 999px;
  background: rgba(255, 248, 239, 0.1);
  overflow: hidden;
}
.music-skeleton span:first-child {
  height: auto;
  margin: 0;
  aspect-ratio: 1;
  background: rgba(255, 248, 239, 0.06);
}
.music-skeleton span::after,
.music-artist-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 248, 239, 0.14), transparent);
  animation: skeletonSweep 1.2s ease-in-out infinite;
}
.music-artist-skeleton {
  position: relative;
  grid-column: 1 / -1;
  min-height: 92px;
  border-radius: 8px;
  background: rgba(255, 248, 239, 0.08);
  overflow: hidden;
}
@keyframes skeletonSweep {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}
.music-track-art {
  position: absolute;
  inset: 0;
}
.music-track-art img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
  image-rendering: pixelated;
  background: rgba(5, 8, 12, 0.44);
}
.music-track-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 8, 12, 0.06) 18%, rgba(5, 8, 12, 0.56) 58%, rgba(5, 8, 12, 0.92));
}
.music-track-body {
  position: relative;
  z-index: 1;
  align-self: end;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 14px;
  background: linear-gradient(180deg, transparent, rgba(5, 8, 12, 0.28));
}
.music-track-head {
  display: grid;
  gap: 12px;
}
.music-track-head > div:first-child {
  min-width: 0;
}
.music-track h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.music-track p {
  overflow: hidden;
  margin: 0;
  color: rgba(255, 248, 239, 0.72);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.music-author-link {
  display: block;
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 248, 239, 0.72);
  font: inherit;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.music-author-link:hover,
.music-author-link:focus-visible {
  color: var(--yellow);
  outline: 0;
}
.music-playlist-panel {
  display: grid;
  gap: 18px;
  padding: 22px;
  border: 1px solid rgba(255, 248, 239, 0.12);
  border-radius: 8px;
  background: rgba(16, 13, 11, 0.72);
}
.music-playlist-panel[hidden] {
  display: none;
}
.music-playlist-panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
}
.music-playlist-panel-head span,
.music-playlist-panel-head p {
  margin: 0;
  color: rgba(255, 248, 239, 0.6);
  font-size: 13px;
  font-weight: 900;
}
.music-playlist-panel-head h2,
.music-playlist-add h3 {
  margin: 0;
  color: var(--text);
  font-family: Unbounded, Manrope, Arial, sans-serif;
}
.music-playlist-panel-head h2 {
  overflow: hidden;
  margin: 4px 0 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.music-playlist-panel-actions,
.music-playlist-track-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.music-playlist-panel-actions button,
.music-playlist-track-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  border: 1px solid rgba(255, 248, 239, 0.12);
  border-radius: 8px;
  background: rgba(255, 248, 239, 0.07);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  padding: 0 12px;
}
.music-playlist-panel-actions button:hover,
.music-playlist-track-actions button:hover,
.music-playlist-card.is-active {
  border-color: rgba(255, 172, 63, 0.48);
  color: var(--yellow);
}
.music-playlist-panel-actions button:disabled,
.music-playlist-track-actions button:disabled {
  cursor: default;
  opacity: 0.45;
}
.music-playlist-panel-actions .is-danger {
  border-color: rgba(240, 68, 68, 0.34);
  color: #ffb6a7;
}
.music-playlist-panel-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
  gap: 18px;
  align-items: start;
}
.music-playlist-track-list,
.music-playlist-add,
.music-playlist-add-list {
  display: grid;
  gap: 10px;
}
.music-playlist-add input {
  min-height: 42px;
  width: 100%;
  border: 1px solid rgba(255, 248, 239, 0.14);
  border-radius: 8px;
  background: rgba(255, 248, 239, 0.07);
  color: var(--text);
  font: inherit;
  padding: 0 12px;
}
.music-playlist-track,
.music-playlist-add-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 248, 239, 0.1);
  border-radius: 8px;
  background: rgba(255, 248, 239, 0.045);
}
.music-playlist-track-cover,
.music-playlist-add-row {
  cursor: pointer;
}
.music-playlist-track-cover {
  width: 54px;
  height: 54px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
}
.music-playlist-track img,
.music-playlist-add-row img {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  object-fit: cover;
  image-rendering: pixelated;
}
.music-playlist-track b,
.music-playlist-track span,
.music-playlist-add-row b,
.music-playlist-add-row small {
  display: block;
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.music-playlist-track span,
.music-playlist-add-row small {
  color: rgba(255, 248, 239, 0.62);
  font-size: 13px;
  font-weight: 900;
}
.music-playlist-add-row {
  grid-template-columns: 44px minmax(0, 1fr);
  width: 100%;
  color: var(--text);
  text-align: left;
}
.music-playlist-add-row img {
  width: 44px;
  height: 44px;
}
@media (max-width: 720px) {
  .music-playlist-panel-head,
  .music-playlist-panel-body {
    grid-template-columns: 1fr;
  }
  .music-playlist-panel-actions,
  .music-playlist-track-actions {
    justify-content: flex-start;
  }
  .music-playlist-track {
    grid-template-columns: 54px minmax(0, 1fr);
  }
  .music-playlist-track-actions {
    grid-column: 1 / -1;
  }
}
.artist-page {
  min-height: 100vh;
  padding-top: 128px;
  background:
    radial-gradient(circle at 24% 0%, rgba(255, 172, 63, 0.14), transparent 34rem),
    linear-gradient(180deg, rgba(40, 27, 18, 0.96), rgba(5, 8, 12, 0.99) 390px, rgba(5, 8, 12, 0.99));
}
.artist-loading {
  min-height: 240px;
  display: grid;
  place-items: center;
  color: rgba(255, 248, 239, 0.7);
  font-size: 18px;
  font-weight: 900;
}
.artist-layout {
  display: grid;
  gap: 38px;
  max-width: 1400px;
  margin: 0 auto;
}
.artist-hero {
  position: relative;
  display: grid;
  grid-template-columns: 312px minmax(0, 1fr) 86px;
  gap: 34px;
  align-items: center;
  overflow: hidden;
  min-height: 360px;
  padding: 42px 54px;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(113, 78, 72, 0.78), rgba(31, 28, 36, 0.82) 55%, rgba(5, 8, 12, 0.92)),
    rgba(16, 13, 11, 0.78);
  animation: music-page-enter 0.46s ease both;
}
.artist-avatar-shell {
  position: relative;
  display: grid;
  place-items: center;
  width: 312px;
  height: 312px;
  border: 0;
  border-radius: 8px;
  background: rgba(5, 8, 12, 0.32);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
}
.artist-avatar-shell img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
  image-rendering: pixelated;
}
.artist-hero-copy > span {
  display: none;
}
.artist-hero-copy h1 {
  margin: 0;
  color: var(--text);
  font-family: Manrope, Arial, sans-serif;
  font-size: clamp(48px, 5.4vw, 78px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}
.artist-hero-copy p {
  max-width: 720px;
  margin: 20px 0 0;
  color: rgba(255, 248, 239, 0.68);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.55;
}
.artist-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.artist-stats span {
  padding: 8px 11px;
  border-radius: 8px;
  background: rgba(255, 248, 239, 0.07);
  color: rgba(255, 248, 239, 0.72);
  font-size: 13px;
  font-weight: 900;
}
.artist-hero-play {
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  border: 2px solid rgba(255, 212, 59, 0.72);
  border-radius: 50%;
  background: rgba(255, 212, 59, 0.08);
  color: var(--text);
  font-size: 34px;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}
.artist-hero-play:hover,
.artist-hero-play:focus-visible {
  border-color: var(--yellow);
  background: rgba(255, 212, 59, 0.14);
  outline: none;
  transform: translateY(-2px);
}
.artist-tracks {
  display: grid;
  gap: 24px;
  padding: 0 54px 34px;
}
.artist-tracks .music-section-head {
  justify-content: flex-start;
}
.artist-tracks .music-section-head h2 {
  font-family: Manrope, Arial, sans-serif;
  font-size: clamp(28px, 2.2vw, 36px);
  font-weight: 700;
}
.artist-tracks .music-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 48px;
}
.artist-track-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  width: 100%;
  min-height: 88px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition:
    color 0.18s ease,
    transform 0.18s ease;
}
.artist-track-row:hover {
  transform: translateY(-2px);
}
.artist-track-row img {
  width: 88px;
  height: 88px;
  border-radius: 8px;
  object-fit: cover;
  image-rendering: pixelated;
}
.artist-track-row b,
.artist-track-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.artist-track-row b {
  color: var(--text);
  font-size: 25px;
  font-weight: 800;
}
.artist-track-row small,
.artist-track-row em {
  color: rgba(255, 248, 239, 0.58);
  font-style: normal;
  font-weight: 900;
}
.artist-track-row small {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 20px;
}
.artist-track-row em {
  align-self: center;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(255, 248, 239, 0.06);
  font-size: 16px;
}
.album-page {
  min-height: 100vh;
  padding-top: 112px;
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 172, 63, 0.12), transparent 30rem),
    linear-gradient(180deg, rgba(28, 19, 11, 0.95), rgba(5, 8, 12, 0.98));
}
.album-layout {
  display: grid;
  gap: 26px;
  max-width: 1120px;
  margin: 0 auto;
}
.album-hero {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  gap: 28px;
  align-items: end;
  min-height: 330px;
  animation: music-page-enter 0.46s ease both;
}
.album-hero img {
  width: 252px;
  height: 252px;
  border-radius: 8px;
  object-fit: cover;
  image-rendering: pixelated;
}
.album-hero span,
.album-hero p {
  color: rgba(255, 248, 239, 0.58);
  font-weight: 900;
}
.album-hero h1 {
  margin: 12px 0 10px;
  color: var(--text);
  font-family: Unbounded, Manrope, Arial, sans-serif;
  font-size: clamp(34px, 5vw, 58px);
}
.album-track-section {
  display: grid;
  gap: 8px;
}
.album-table-head,
.album-track-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 90px 88px;
  gap: 14px;
  align-items: center;
}
.album-table-head {
  color: rgba(255, 248, 239, 0.68);
  font-weight: 900;
}
.album-track-list {
  display: grid;
  gap: 8px;
}
.album-track-row {
  min-height: 86px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  padding: 6px 0;
  transition:
    background 0.18s ease,
    transform 0.18s ease;
}
.album-track-row:hover {
  background: rgba(255, 248, 239, 0.045);
  transform: translateY(-2px);
}
.album-track-info {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0;
}
.album-track-info img {
  width: 74px;
  height: 74px;
  border-radius: 8px;
  object-fit: cover;
  image-rendering: pixelated;
}
.album-track-info b,
.album-track-info small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.album-track-info b {
  font-size: 18px;
}
.album-track-info small,
.album-track-plays,
.album-track-duration {
  color: rgba(255, 248, 239, 0.6);
  font-weight: 900;
}
.music-entity-editor {
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 1px solid rgba(255, 248, 239, 0.12);
  border-radius: 8px;
  background: rgba(16, 13, 11, 0.72);
  animation: music-page-enter 0.28s ease both;
}
.music-entity-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.music-entity-editor label {
  display: grid;
  gap: 8px;
  color: rgba(255, 248, 239, 0.72);
  font-weight: 900;
}
.music-entity-editor input {
  min-height: 44px;
  width: 100%;
  border: 1px solid rgba(255, 248, 239, 0.14);
  border-radius: 8px;
  background: rgba(255, 248, 239, 0.07);
  color: var(--text);
  font: inherit;
  padding: 0 12px;
}
.music-entity-editor input[type="file"] {
  display: flex;
  align-items: center;
  padding: 9px;
}
.playlist-track-row {
  grid-template-columns: 42px minmax(0, 1fr) 90px 88px auto;
  background: rgba(255, 248, 239, 0.025);
  padding: 6px 10px;
}
.playlist-track-row .album-track-info {
  border-radius: 8px;
}
.playlist-track-row .album-track-info:hover,
.playlist-track-row .album-track-info:focus-visible {
  color: var(--yellow);
  outline: none;
}
.artist-hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  min-width: 0;
}
.artist-editor .music-section-head > span {
  color: var(--yellow);
  font-size: 13px;
  font-weight: 1000;
  text-transform: uppercase;
}
.artist-editor {
  display: grid;
  gap: 14px;
  padding: 22px;
  border: 1px solid rgba(255, 248, 239, 0.12);
  border-radius: 8px;
  background: rgba(16, 13, 11, 0.72);
}
.artist-editor[hidden] {
  display: none;
}
.artist-editor textarea {
  width: 100%;
  min-height: 118px;
  resize: vertical;
  border: 1px solid rgba(255, 248, 239, 0.14);
  border-radius: 8px;
  background: rgba(255, 248, 239, 0.07);
  color: var(--text);
  font: inherit;
  line-height: 1.45;
  padding: 12px;
}
.artist-editor-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.artist-editor-actions span {
  color: rgba(255, 248, 239, 0.68);
  font-size: 13px;
  font-weight: 900;
}
@media (max-width: 1120px) {
  .artist-hero {
    grid-template-columns: 220px minmax(0, 1fr) 72px;
    padding: 34px;
  }
  .artist-avatar-shell {
    width: 220px;
    height: 220px;
  }
  .artist-tracks {
    padding-inline: 34px;
  }
  .artist-tracks .music-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 34px;
  }
}
@media (max-width: 860px) {
  .artist-page {
    padding-top: 98px;
  }
  .artist-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 24px;
  }
  .artist-avatar-shell {
    width: min(220px, 70vw);
    height: min(220px, 70vw);
  }
  .artist-avatar-shell img {
    width: 100%;
    height: 100%;
  }
  .artist-hero-play {
    width: 58px;
    height: 58px;
  }
  .artist-tracks {
    padding-inline: 0;
  }
  .artist-tracks .music-list {
    grid-template-columns: 1fr;
  }
  .artist-track-row {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 14px;
  }
  .artist-track-row img {
    width: 64px;
    height: 64px;
  }
  .artist-track-row b {
    font-size: 18px;
  }
  .artist-track-row small {
    font-size: 15px;
  }
  .album-hero,
  .album-table-head,
  .album-track-row,
  .playlist-track-row {
    grid-template-columns: 1fr;
  }
  .album-table-head {
    display: none;
  }
  .album-track-info {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  .album-track-info img {
    width: 64px;
    height: 64px;
  }
  .playlist-row-actions {
    justify-content: flex-start;
  }
}
.music-status {
  display: inline-flex;
  width: fit-content;
  margin-top: 4px;
  padding: 4px 8px;
  border: 1px solid rgba(255, 172, 63, 0.34);
  border-radius: 999px;
  background: rgba(255, 172, 63, 0.14);
  color: var(--yellow);
  font-size: 12px;
  font-weight: 900;
}
.music-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.music-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 36px;
  min-height: 36px;
  border: 1px solid rgba(255, 248, 239, 0.12);
  border-radius: 8px;
  background: rgba(255, 248, 239, 0.07);
  color: var(--text);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  padding: 0 10px;
}
.music-icon-button:hover:not(:disabled) {
  border-color: rgba(255, 172, 63, 0.42);
  background: rgba(255, 172, 63, 0.12);
}
.music-icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.music-like img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.music-like.is-liked {
  border-color: rgba(255, 172, 63, 0.52);
  color: var(--yellow);
}
.music-favorite.is-active {
  border-color: rgba(255, 172, 63, 0.52);
  background: rgba(255, 172, 63, 0.14);
  color: var(--yellow);
}
.music-delete {
  color: #ffd7c8;
  font-size: 22px;
  line-height: 1;
}
.music-player {
  display: grid;
  grid-template-columns: 42px auto minmax(120px, 1fr) auto 88px;
  gap: 10px;
  align-items: center;
  margin-top: 4px;
  padding: 10px;
  border: 1px solid rgba(255, 248, 239, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 172, 63, 0.11), rgba(154, 215, 255, 0.07)),
    rgba(255, 248, 239, 0.045);
}
.music-player audio {
  display: none;
}
.music-play {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 172, 63, 0.95), rgba(248, 147, 31, 0.92));
  color: #1c1008;
  font: inherit;
  font-weight: 1000;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(248, 147, 31, 0.22);
}
.music-player.is-playing .music-play {
  background: linear-gradient(135deg, rgba(154, 215, 255, 0.95), rgba(255, 172, 63, 0.85));
}
.music-time {
  color: rgba(255, 248, 239, 0.64);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  text-align: center;
}
.music-progress,
.music-volume {
  width: 100%;
  accent-color: var(--yellow);
}
.music-progress {
  min-width: 0;
}
.music-volume {
  max-width: 88px;
}
.global-music-expanded {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 34px;
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 172, 63, 0.16), transparent 24rem),
    radial-gradient(circle at 20% 18%, rgba(255, 212, 59, 0.08), transparent 18rem),
    linear-gradient(135deg, rgba(33, 22, 12, 0.98), rgba(8, 9, 10, 0.98));
}
.global-music-expanded[hidden] {
  display: none;
}
.has-expanded-music-player {
  overflow: hidden;
}
.global-music-expanded-close {
  position: fixed;
  top: 24px;
  left: 24px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 248, 239, 0.12);
  border-radius: 8px;
  background: rgba(255, 248, 239, 0.06);
  color: var(--text);
  font-size: 22px;
  cursor: pointer;
}
.global-music-expanded-shell {
  display: grid;
  justify-items: center;
  gap: 22px;
  width: min(760px, 100%);
  animation: music-page-enter 0.42s ease both;
}
.global-music-expanded-cover {
  width: min(420px, 82vw);
  aspect-ratio: 1;
  border: 2px solid rgba(255, 172, 63, 0.54);
  border-radius: 8px;
  object-fit: cover;
  image-rendering: pixelated;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
}
.global-music-expanded-meta {
  display: grid;
  gap: 8px;
  max-width: 100%;
  text-align: center;
}
.global-music-expanded-meta h2 {
  overflow: hidden;
  margin: 0;
  color: var(--text);
  font-family: Unbounded, Manrope, Arial, sans-serif;
  font-size: clamp(24px, 4vw, 42px);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.global-music-expanded-author {
  justify-self: center;
  margin: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 248, 239, 0.62);
  font: inherit;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
}
.global-music-expanded-author:hover,
.global-music-expanded-author:focus-visible {
  color: var(--yellow);
  outline: none;
}
.global-music-expanded-actions,
.global-music-expanded-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.global-music-expanded-progress {
  display: grid;
  grid-template-columns: auto minmax(220px, 520px) auto;
  gap: 12px;
  align-items: center;
  width: min(620px, 100%);
  color: rgba(255, 248, 239, 0.72);
  font-size: 13px;
  font-weight: 900;
}
.global-music-expanded-progress input {
  width: 100%;
  accent-color: var(--yellow);
}
.global-music-player {
  position: fixed;
  z-index: 60;
  left: 22px;
  right: auto;
  bottom: 22px;
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  width: min(392px, calc(100vw - 44px));
  min-height: 44px;
  padding: 8px 12px 8px 16px;
  border: 1px solid rgba(255, 248, 239, 0.1);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.92);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(16px);
  animation: music-player-rise 0.32s ease both;
}
.global-music-player audio {
  display: none;
}
.global-music-now {
  display: block;
  min-width: 0;
}
.global-music-cover-button {
  display: block;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}
.global-music-player[hidden] {
  display: none;
}
.has-global-music-player {
  padding-bottom: 0;
}
.global-music-cover {
  width: 58px;
  height: 58px;
  border-radius: 8px;
  object-fit: cover;
  image-rendering: pixelated;
  box-shadow: 0 0 0 1px rgba(255, 172, 63, 0.22);
}
.global-music-meta {
  display: block;
  min-width: 0;
}
.global-music-center {
  display: block;
}
.global-music-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.global-music-progress-row {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
}
.global-music-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}
.global-music-meta b,
.global-music-author {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.global-music-meta b {
  color: var(--text);
  font-weight: 900;
}
.global-music-author,
.global-music-time {
  color: rgba(255, 248, 239, 0.58);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.global-music-author {
  width: fit-content;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}
.global-music-author:hover,
.global-music-author:focus-visible {
  color: var(--yellow);
  outline: none;
}
.global-music-button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 248, 239, 0.58);
  font: inherit;
  font-size: 18px;
  font-weight: 1000;
  cursor: pointer;
}
.global-music-button:hover,
.global-music-button:focus-visible {
  background: rgba(255, 248, 239, 0.07);
  color: var(--yellow);
  outline: none;
}
.global-music-button i {
  display: grid;
  place-items: center;
  line-height: 1;
}
.global-music-button.is-primary {
  width: 50px;
  height: 50px;
  background: rgba(255, 172, 63, 0.14);
  color: var(--yellow);
  font-size: 24px;
}
.global-music-button.is-active {
  border-color: rgba(255, 172, 63, 0.52);
  color: var(--yellow);
}
.global-music-button.is-active i {
  color: var(--yellow);
}
.global-music-close:hover,
.global-music-close:focus-visible {
  border-color: rgba(255, 91, 91, 0.68);
  background: rgba(255, 91, 91, 0.14);
  color: #ff7b7b;
}
.global-music-volume-wrap {
  position: relative;
}
.global-music-volume-panel {
  position: absolute;
  right: -46px;
  bottom: calc(100% + 58px);
  display: none;
  place-items: center;
  width: 136px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(255, 248, 239, 0.1);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.92);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
  transform: rotate(-90deg);
  transform-origin: center;
}
.global-music-volume-wrap.is-open .global-music-volume-panel,
.global-music-volume-wrap:focus-within .global-music-volume-panel {
  display: grid;
}
.global-music-volume {
  width: 120px;
  accent-color: var(--yellow);
}
.global-music-progress {
  width: 100%;
  accent-color: var(--yellow);
}
.global-music-cover-button,
.global-music-author,
.global-music-progress-row,
.global-music-button[data-global-music-like],
.global-music-button[data-global-music-favorite],
.global-music-button[data-global-music-loop] {
  display: none;
}
.global-music-meta b {
  display: block;
  overflow: hidden;
  color: #fff8ef;
  font-family: Manrope, Arial, sans-serif;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.global-music-controls {
  gap: 12px;
}
.global-music-button {
  width: 28px;
  height: 28px;
  color: rgba(255, 248, 239, 0.34);
  font-size: 20px;
}
.global-music-button:hover,
.global-music-button:focus-visible {
  background: transparent;
  color: rgba(255, 248, 239, 0.78);
}
.global-music-button.is-primary {
  width: 30px;
  height: 30px;
  background: transparent;
  color: rgba(255, 248, 239, 0.62);
  font-size: 24px;
}
.global-music-button.is-primary:hover,
.global-music-button.is-primary:focus-visible {
  color: #fff8ef;
}
body.is-music-page .global-music-player {
  left: 0;
  right: 0;
  bottom: 0;
  grid-template-columns: minmax(220px, 320px) minmax(280px, 1fr) minmax(150px, 260px);
  gap: 18px;
  width: 100%;
  min-height: 84px;
  padding: 8px 16px;
  border: 0;
  border-top: 1px solid rgba(255, 172, 63, 0.2);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(28, 21, 15, 0.98), rgba(16, 13, 11, 0.98));
  box-shadow: 0 -12px 34px rgba(0, 0, 0, 0.34);
}
body.is-music-page.has-global-music-player {
  padding-bottom: 92px;
}
body.is-music-page .global-music-now {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}
body.is-music-page .global-music-cover-button,
body.is-music-page .global-music-author,
body.is-music-page .global-music-progress-row,
body.is-music-page .global-music-right,
body.is-music-page .global-music-button[data-global-music-like],
body.is-music-page .global-music-button[data-global-music-favorite],
body.is-music-page .global-music-button[data-global-music-loop] {
  display: revert;
}
body.is-music-page .global-music-cover-button {
  display: block;
}
body.is-music-page .global-music-author {
  display: block;
}
body.is-music-page .global-music-progress-row {
  display: grid;
}
body.is-music-page .global-music-right,
body.is-music-page .global-music-controls {
  display: flex;
}
body.is-music-page .global-music-meta {
  display: grid;
  gap: 3px;
}
body.is-music-page .global-music-center {
  display: grid;
  gap: 8px;
}
body.is-music-page .global-music-meta b {
  color: var(--text);
  font-family: inherit;
  font-size: inherit;
  line-height: normal;
  text-transform: none;
}
body.is-music-page .global-music-controls {
  gap: 8px;
}
body.is-music-page .global-music-button {
  display: grid;
  width: 38px;
  height: 38px;
  color: rgba(255, 248, 239, 0.58);
  font-size: 18px;
}
body.is-music-page .global-music-button[data-global-music-like],
body.is-music-page .global-music-button[data-global-music-favorite],
body.is-music-page .global-music-button[data-global-music-loop] {
  display: grid;
}
body.is-music-page .global-music-button:hover,
body.is-music-page .global-music-button:focus-visible {
  background: rgba(255, 248, 239, 0.07);
  color: var(--yellow);
}
body.is-music-page .global-music-button.is-primary {
  width: 50px;
  height: 50px;
  background: rgba(255, 172, 63, 0.14);
  color: var(--yellow);
  font-size: 24px;
}
.page-load-bar {
  position: fixed;
  z-index: 120;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  pointer-events: none;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--yellow), var(--orange), #9ad7ff);
  box-shadow: 0 0 18px rgba(255, 172, 63, 0.45);
}
.page-load-bar.is-loading {
  opacity: 1;
  animation: page-load 1.1s ease-in-out infinite;
}
.page-load-bar.is-done {
  opacity: 1;
  transform: scaleX(1);
  transition:
    opacity 0.28s ease,
    transform 0.16s ease;
}
@keyframes page-load {
  0% {
    transform: scaleX(0.08);
  }
  55% {
    transform: scaleX(0.72);
  }
  100% {
    transform: scaleX(0.96);
  }
}
.playlist-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.playlist-page-actions button,
.playlist-row-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid rgba(255, 248, 239, 0.13);
  border-radius: 8px;
  background: rgba(255, 248, 239, 0.07);
  color: var(--text);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  padding: 0 12px;
}
.playlist-page-actions button:hover,
.playlist-page-actions button:focus-visible,
.playlist-row-actions button:hover:not(:disabled),
.playlist-row-actions button:focus-visible:not(:disabled) {
  border-color: rgba(255, 172, 63, 0.48);
  color: var(--yellow);
  outline: none;
}
.playlist-page-actions .is-danger,
.playlist-row-actions button:last-child {
  border-color: rgba(255, 91, 91, 0.28);
  color: #ffb6a7;
}
.playlist-add-panel {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(255, 248, 239, 0.12);
  border-radius: 8px;
  background: rgba(16, 13, 11, 0.74);
  animation: music-page-enter 0.3s ease both;
}
.playlist-add-panel[hidden] {
  display: none;
}
.playlist-add-panel h2 {
  margin: 0;
  color: var(--text);
  font-family: Unbounded, Manrope, Arial, sans-serif;
  font-size: 20px;
}
.playlist-add-panel input {
  min-height: 42px;
  border: 1px solid rgba(255, 248, 239, 0.14);
  border-radius: 8px;
  background: rgba(255, 248, 239, 0.07);
  color: var(--text);
  font: inherit;
  padding: 0 12px;
}
.playlist-track-row {
  grid-template-columns: 42px minmax(0, 1fr) 90px 88px auto;
}
.playlist-row-actions {
  display: inline-flex;
  gap: 6px;
  justify-content: end;
}
.music-moderation-card,
.music-playlist-add-row,
.artist-track-row,
.album-track-row {
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease;
}
.music-moderation-card:hover,
.music-playlist-add-row:hover {
  border-color: rgba(255, 172, 63, 0.34);
  transform: translateY(-2px);
}
@keyframes music-page-enter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes music-player-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.feed-sort-field {
  margin-top: 0;
}
.player-stories-shell {
  display: grid;
  gap: 20px;
  margin-top: 28px;
}
.player-stories-list {
  display: grid;
  gap: 16px;
  max-width: 920px;
}
.player-story-card {
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid rgba(255, 248, 239, 0.12);
  border-radius: 8px;
  background: rgba(16, 13, 11, 0.72);
}
.player-story-head {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: center;
}
.player-story-head img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  image-rendering: pixelated;
}
.player-story-head div div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.player-story-head a {
  color: var(--text);
  font-weight: 900;
}
.player-story-head span {
  padding: 4px 9px;
  border: 1px solid rgba(255, 172, 63, 0.24);
  border-radius: 999px;
  color: var(--yellow);
  font-size: 13px;
  font-weight: 900;
}
.player-story-head small,
.player-story-coauthors {
  color: rgba(255, 248, 239, 0.56);
}
.player-story-card h2 {
  margin: 0;
  color: var(--text);
  font-family: Unbounded, Manrope, Arial, sans-serif;
  font-size: clamp(22px, 3vw, 32px);
}
.player-story-coauthors,
.player-story-text {
  margin: 0;
}
.player-story-text {
  color: rgba(255, 248, 239, 0.82);
  line-height: 1.62;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.player-story-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.story-like {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  border: 1px solid rgba(255, 248, 239, 0.12);
  border-radius: 8px;
  background: rgba(255, 248, 239, 0.07);
  color: var(--text);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  padding: 0 12px;
}
.story-like.is-liked {
  border-color: rgba(255, 172, 63, 0.52);
  color: var(--yellow);
}
.story-like img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.story-delete {
  min-height: 36px;
  border: 1px solid rgba(255, 139, 92, 0.28);
  border-radius: 8px;
  background: rgba(255, 139, 92, 0.09);
  color: #ffd7c8;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  padding: 0 12px;
}
.story-delete:hover {
  border-color: rgba(255, 139, 92, 0.5);
  background: rgba(255, 139, 92, 0.15);
}
.story-dialog-card {
  width: min(900px, calc(100vw - 32px));
}
.auth-dialog:has(.story-dialog-card),
.auth-dialog:has(.notifications-modal) {
  width: min(900px, calc(100vw - 32px));
}
.story-dialog-card textarea {
  width: 100%;
  min-height: 360px;
  resize: vertical;
  border: 1px solid rgba(255, 248, 239, 0.14);
  border-radius: 8px;
  background: rgba(255, 248, 239, 0.07);
  color: var(--text);
  font: inherit;
  padding: 12px;
  outline: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.story-dialog-card textarea::-webkit-scrollbar {
  display: none;
}
.profile-post-list {
  display: grid;
  gap: 12px;
  max-width: 760px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 6px;
}
.profile-feed-post {
  min-width: 0;
  overflow: hidden;
}
.profile-feed-post .feed-post-content,
.profile-feed-post .feed-replies p,
.profile-feed-post .reply-form input {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.profile-post-item {
  padding: 14px;
  border: 1px solid rgba(255, 248, 239, 0.12);
  border-radius: 8px;
  background: rgba(255, 248, 239, 0.06);
}
.profile-post-item p {
  margin: 0 0 8px;
  color: rgba(255, 248, 239, 0.84);
  line-height: 1.45;
}
.profile-post-item span {
  color: rgba(255, 248, 239, 0.48);
  font-size: 13px;
  font-weight: 800;
}
.towns-shell {
  margin-top: 34px;
}
.towns-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid rgba(255, 248, 239, 0.1);
  border-radius: 8px;
  background: rgba(255, 248, 239, 0.05);
}
.towns-toolbar b {
  display: block;
  color: var(--text);
  font-size: 20px;
  font-weight: 900;
}
.towns-toolbar span {
  display: block;
  margin-top: 4px;
  color: rgba(255, 248, 239, 0.58);
  font-size: 14px;
}
.towns-search {
  width: min(100%, 320px);
}
.towns-layout {
  display: grid;
  grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.towns-list {
  display: grid;
  gap: 10px;
}
.town-list-item {
  display: grid;
  gap: 5px;
  width: 100%;
  padding: 15px;
  border: 1px solid rgba(255, 248, 239, 0.09);
  border-radius: 8px;
  background: rgba(255, 248, 239, 0.05);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.town-list-item:hover,
.town-list-item.is-active {
  border-color: rgba(255, 212, 59, 0.42);
  background: rgba(255, 212, 59, 0.09);
}
.town-list-item b {
  font-size: 17px;
  font-weight: 900;
}
.town-list-item span,
.town-list-item small {
  color: rgba(255, 248, 239, 0.62);
  font-size: 13px;
  font-weight: 800;
}
.town-detail {
  min-width: 0;
  padding: 24px;
}
.town-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.town-detail h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
}
.town-detail h3 {
  margin: 28px 0 14px;
  color: #fff;
  font-size: 21px;
}
.town-detail-head p,
.town-description,
.town-muted {
  color: rgba(255, 248, 239, 0.68);
  font-weight: 700;
  line-height: 1.55;
}
.town-description {
  margin: 18px 0;
  white-space: pre-wrap;
}
.town-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.town-facts span {
  display: grid;
  gap: 5px;
  min-height: 72px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(255, 248, 239, 0.06);
  color: rgba(255, 248, 239, 0.72);
  font-size: 14px;
  font-weight: 800;
}
.town-facts b {
  color: var(--yellow);
  font-size: 12px;
  text-transform: uppercase;
}
.town-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.town-gallery-item {
  position: relative;
  min-width: 0;
}
.town-gallery a {
  display: grid;
  gap: 8px;
  color: rgba(255, 248, 239, 0.72);
  font-size: 13px;
  font-weight: 800;
}
.town-gallery img {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(255, 248, 239, 0.06);
}
.town-gallery-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(255, 248, 239, 0.18);
  border-radius: 8px;
  background: rgba(14, 10, 8, 0.82);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  backdrop-filter: blur(10px);
}
.town-gallery-remove:hover,
.town-gallery-remove:focus-visible {
  border-color: rgba(255, 92, 92, 0.58);
  background: rgba(120, 20, 20, 0.86);
  outline: 0;
}
.town-gallery-remove:disabled {
  cursor: wait;
  opacity: 0.65;
}
.town-members {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.town-member {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255, 248, 239, 0.06);
}
.town-member img {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  object-fit: cover;
}
.town-member span {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.town-member b,
.town-member small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.town-member small {
  color: rgba(255, 248, 239, 0.58);
  font-weight: 800;
}
.town-editor {
  display: grid;
  gap: 12px;
}
.town-editor label {
  display: grid;
  gap: 8px;
  color: rgba(255, 248, 239, 0.72);
  font-weight: 900;
}
.town-editor textarea,
.town-media-row input {
  width: 100%;
  border: 1px solid rgba(255, 248, 239, 0.12);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
  color: var(--text);
  outline: 0;
}
.town-editor textarea {
  min-height: 140px;
  padding: 12px;
  resize: vertical;
}
.town-media-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  gap: 8px;
  margin-bottom: 8px;
}
.town-media-row input {
  min-height: 42px;
  padding: 0 9px;
}
.town-media-row button {
  min-height: 42px;
  border: 1px solid rgba(255, 248, 239, 0.12);
  border-radius: 8px;
  background: rgba(255, 248, 239, 0.08);
  color: var(--text);
  cursor: pointer;
  font-weight: 900;
}
.town-editor-message {
  min-height: 20px;
  margin: 0;
  color: rgba(255, 248, 239, 0.62);
  font-size: 14px;
}
.profile-town-row .stat-icon,
.profile-town-row a {
  color: var(--yellow);
}
.profile-town-row a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 920px) {
  .towns-toolbar,
  .town-detail-head {
    display: grid;
  }
  .towns-search {
    width: 100%;
  }
  .towns-layout {
    grid-template-columns: 1fr;
  }
  .town-facts,
  .town-gallery,
  .town-members {
    grid-template-columns: 1fr;
  }
  .town-media-row {
    grid-template-columns: 1fr;
  }
}
.profile-page {
  padding-top: 118px;
}
.profile-layout {
  grid-template-columns: minmax(300px, 438px) minmax(0, 1fr);
  align-items: start;
  gap: 38px;
}
.profile-sidebar {
  display: grid;
  gap: 14px;
  position: sticky;
  top: 96px;
  align-self: start;
}
.profile-main {
  display: grid;
  gap: 34px;
  min-width: 0;
}
.profile-breadcrumb {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 38px;
  color: rgba(255, 248, 239, 0.78);
  font-family: Unbounded, Manrope, Arial, sans-serif;
  font-size: 18px;
  font-weight: 800;
}
.profile-breadcrumb a {
  color: var(--text);
}
.profile-breadcrumb span[aria-hidden] {
  color: rgba(255, 248, 239, 0.48);
  font-size: 30px;
  line-height: 1;
}
.profile-breadcrumb img {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  object-fit: cover;
  image-rendering: pixelated;
}
.profile-hero {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.profile-status {
  min-height: 0;
  margin-bottom: 12px;
  color: #ffb6a7;
  font-size: 14px;
  letter-spacing: 0;
}
.profile-status::before {
  width: 10px;
  height: 10px;
}
.profile-hero h1 {
  margin: 0 0 14px;
  font-size: clamp(42px, 5vw, 58px);
}
.profile-hero input {
  display: block;
  width: min(520px, 100%);
  min-height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 248, 239, 0.9);
  font-size: 22px;
}
.profile-hero input:focus,
.profile-hero input[readonly]:focus {
  border-color: transparent;
}
.profile-roles {
  margin-top: 16px;
  gap: 8px;
}
.role-chip {
  min-height: 38px;
  border-radius: 12px;
  border-color: rgba(255, 172, 63, 0.48);
  background: rgba(255, 172, 63, 0.08);
  color: #ffd188;
  font-size: 15px;
}
.role-chip i {
  width: 30px;
  height: 30px;
}
.profile-viewer {
  min-height: 564px;
  border: 0;
  border-radius: 22px;
  background: rgba(154, 215, 255, 0.07);
}
.profile-viewer iframe {
  width: 100%;
  height: 540px;
  background: transparent;
}
.profile-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.profile-action {
  display: grid;
  place-items: center;
  min-height: 60px;
  border: 1px solid rgba(154, 215, 255, 0.12);
  border-radius: 8px;
  background: rgba(47, 155, 213, 0.12);
  color: var(--text);
  font-size: 34px;
  font-weight: 900;
  cursor: pointer;
}
.profile-action i {
  display: grid;
  place-items: center;
  line-height: 1;
}
.profile-action.is-active {
  border-color: rgba(255, 172, 63, 0.42);
  background: rgba(255, 172, 63, 0.18);
}
.profile-card {
  padding: 0;
  border: 0;
  background: transparent;
}
.profile-card h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  font-size: clamp(28px, 3vw, 36px);
}
.profile-card h2 span {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(154, 215, 255, 0.08);
  color: var(--text);
  font-family: Manrope, Arial, sans-serif;
  font-size: 17px;
}
.profile-card-head {
  align-items: start;
}
.mini-button,
.show-more {
  border-color: rgba(255, 172, 63, 0.26);
  background: rgba(255, 172, 63, 0.1);
}
.character-grid {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 20px;
}
.character-card {
  position: relative;
  min-height: 330px;
  padding: 28px 18px 22px;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: rgba(154, 215, 255, 0.07);
  text-align: center;
}
.character-card.is-current {
  background:
    linear-gradient(180deg, rgba(141, 242, 76, 0.16), rgba(154, 215, 255, 0.07) 54%),
    rgba(154, 215, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(141, 242, 76, 0.34), 0 18px 54px rgba(141, 242, 76, 0.08);
}
.character-card::after {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 108px;
  height: 42px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(5, 8, 12, 0), rgba(5, 8, 12, 0.55));
  filter: blur(8px);
  pointer-events: none;
}
.character-card-open {
  position: relative;
  z-index: 1;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 16px;
  text-align: center;
}
.character-card img {
  width: min(124px, 88%);
  height: 178px;
}
.character-card-text {
  padding-top: 0;
}
.character-card b {
  font-size: 20px;
}
.character-status {
  margin-inline: auto;
}
.character-card-text p {
  margin-top: 6px;
  font-size: 15px;
}
.character-card-meta {
  margin-top: 8px;
  color: var(--yellow);
}
.character-actions {
  position: relative;
  z-index: 1;
  justify-content: center;
}
.show-more {
  width: auto;
  justify-self: center;
  min-width: 170px;
  margin-top: 18px;
  padding: 0 18px;
}
.profile-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.profile-stats h2,
.donation-card {
  grid-column: 1 / -1;
}
.profile-stats h2 {
  display: none;
}
.stat-row {
  grid-template-columns: 42px 1fr;
  min-height: 92px;
  margin: 0;
  background: rgba(255, 248, 239, 0.06);
}
.profile-pass-row {
  border: 1px solid rgba(255, 172, 63, 0.24);
  background: rgba(255, 172, 63, 0.1);
}
.profile-pass-row .stat-icon,
.profile-pass-row p {
  color: #ffd188;
}
.profile-points-row {
  border: 1px solid rgba(255, 223, 63, 0.2);
  background: rgba(255, 223, 63, 0.08);
}
.profile-points-row .stat-icon,
.profile-points-row p {
  color: var(--yellow);
}
.pass-extension-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(255, 172, 63, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 172, 63, 0.12), rgba(255, 248, 239, 0.04)),
    rgba(255, 248, 239, 0.05);
}
.pass-extension-card > span {
  color: var(--yellow);
  font-weight: 900;
}
.pass-extension-card button {
  width: 100%;
}
.pass-extension-card button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.6);
  opacity: 0.55;
}
.pass-extension-card p {
  min-height: 20px;
  margin: 0;
  color: rgba(255, 248, 239, 0.64);
  font-size: 14px;
}
.stat-icon {
  font-size: 34px;
}
.stat-icon i {
  display: grid;
  place-items: center;
  line-height: 1;
}
.stat-row b {
  font-size: 17px;
}
.stat-row p {
  font-size: 16px;
}
.donation-card {
  justify-items: start;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 6px 14px;
  margin-top: 0;
  padding: 18px;
  border: 1px solid rgba(255, 172, 63, 0.18);
  background: rgba(255, 248, 239, 0.06);
  text-align: left;
}
.donation-card img {
  grid-row: span 2;
  width: 58px;
  height: 58px;
}
.donation-card h3 {
  align-self: end;
  font-size: 22px;
}
.donation-card p {
  align-self: start;
  font-size: 15px;
}
.profile-post-item,
.empty-posts {
  background: rgba(255, 248, 239, 0.06);
}
@media (max-width: 980px) {
  .players-layout {
    grid-template-columns: 1fr;
  }
  .players-filters {
    position: static;
  }
  .players-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .feed-layout {
    grid-template-columns: 1fr;
  }
  .feed-composer {
    position: static;
  }
  .music-layout {
    grid-template-columns: 1fr;
  }
  .feed-topbar,
  .music-topbar {
    grid-template-columns: 1fr;
  }
  .music-upload {
    position: static;
  }
  .profile-hero,
  .profile-grid {
    grid-template-columns: 1fr;
  }
  .profile-layout {
    grid-template-columns: 1fr;
  }
  .profile-sidebar {
    position: static;
  }
  .profile-viewer {
    min-height: 440px;
  }
  .profile-viewer iframe {
    height: 430px;
  }
  .character-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .profile-stats {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  .players-page {
    padding-top: 98px;
  }
  .player-card {
    grid-template-columns: 54px minmax(0, 1fr);
  }
  .player-face {
    width: 54px;
    height: 54px;
  }
  .player-donation {
    grid-column: auto;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .players-toolbar {
    grid-template-columns: 1fr;
  }
  .reply-form {
    grid-template-columns: 1fr;
  }
  .music-track {
    grid-template-columns: 1fr;
  }
  .music-track-head {
    grid-template-columns: 1fr;
  }
  .music-actions {
    justify-content: flex-start;
  }
  .music-player {
    grid-template-columns: 42px 1fr auto;
  }
  .music-progress {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .music-volume {
    display: none;
  }
  .global-music-player {
    left: 12px;
    right: auto;
    bottom: 12px;
    width: min(336px, calc(100vw - 24px));
    grid-template-columns: minmax(120px, 1fr) auto auto;
    gap: 12px;
    padding: 8px 12px 8px 16px;
  }
  .global-music-button[data-global-music-loop] {
    display: none;
  }
  .global-music-volume-panel {
    right: -46px;
    bottom: calc(100% + 58px);
  }
  .global-music-progress-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .global-music-progress-row .global-music-time {
    display: none;
  }
  .profile-page {
    padding-top: 98px;
  }
  .profile-hero,
  .profile-card {
    padding: 20px;
  }
  .profile-card,
  .profile-hero {
    padding: 0;
  }
  .profile-breadcrumb {
    font-size: 15px;
  }
  .profile-viewer iframe {
    height: 360px;
  }
  .profile-viewer {
    min-height: 372px;
  }
  .stat-row,
  .character-card {
    grid-template-columns: 1fr;
  }
  .stat-icon {
    justify-content: start;
  }
  .character-grid {
    grid-template-columns: 1fr;
  }
}

.read-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;

  padding: 12px 18px;
  border-radius: 12px;

  background: #8b4a68;
  color: #fff;

  font-weight: 700;
  text-decoration: none;

  transition: 0.2s ease;
}

.read-more i {
  font-size: 18px;
  line-height: 1;
  display: flex;
}

.read-more:hover {
  background: #a35a7a;
  transform: translateY(-2px);
}

.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -96px 0 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 24% 31%, rgba(255, 223, 63, 0.24), transparent 28rem),
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), transparent 28%, rgba(16, 13, 11, 0.36));
}

.site-nav {
  gap: clamp(18px, 2.8vw, 44px);
}

@media (max-width: 860px) {
  .site-nav {
    max-height: calc(100vh - 92px);
    overflow-y: auto;
  }
}

@media (max-width: 720px) {
  .character-modal-layout {
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
  }
  .character-modal img {
    height: 220px;
  }
  .character-modal-copy {
    max-width: 100%;
  }
  .music-hero-title {
    min-height: 170px;
    padding: 22px;
  }
  .music-hero h2 {
    font-size: clamp(27px, 8vw, 36px);
  }
  .music-topbar,
  .music-section-head {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .music-sort-field {
    width: 100%;
  }
  .music-chart-list,
  .music-album-list,
  .music-playlist-list {
    grid-template-columns: 1fr;
  }
}

.site-header {
  grid-template-columns: minmax(170px, 1fr) auto minmax(150px, 1fr);
  gap: clamp(14px, 2vw, 30px);
}
.site-header .brand {
  grid-column: 1;
}
.site-header .site-nav {
  grid-column: 2;
}
.site-header .login-button,
.site-header .account-menu {
  grid-column: 3;
}

@media (max-width: 980px) {
  .site-header {
    grid-template-columns: 1fr auto auto;
  }
  .site-header .brand {
    grid-column: 1;
  }
  .site-header .nav-toggle,
  .site-header .login-button,
  .site-header .account-menu {
    grid-column: 3;
  }
  .site-header .site-nav {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }
  .site-header .nav-toggle,
  .site-header .login-button,
  .site-header .account-menu {
    grid-column: 2;
  }
  .site-header .site-nav {
    top: 92px;
  }
}

.playlist-track-row .album-track-info,
.playlist-track-row .playlist-row-actions button,
.album-page-actions button {
  background: rgba(255, 248, 239, 0.07);
  color: var(--text);
}
.playlist-track-row .album-track-info {
  border: 0;
}
.playlist-track-row .playlist-row-actions button:hover:not(:disabled),
.album-page-actions button:hover:not(:disabled) {
  color: var(--yellow);
}

@media (max-width: 860px) {
  .music-entity-editor-grid {
    grid-template-columns: 1fr;
  }
  .playlist-track-row {
    grid-template-columns: 1fr;
  }
}

.site-header .site-nav a.is-active:not(:hover) {
  color: var(--text);
  transform: none;
}

.site-header .site-nav a.is-active:not(:hover)::after {
  left: 50%;
  right: 50%;
}

/* --- PREMIUM DESIGN OVERRIDES v2 --- */

/* ---- AMBIENT BACKGROUND ---- */
.site-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 10% 40%, rgba(255, 172, 63, 0.07) 0%, transparent 100%),
    radial-gradient(ellipse 50% 60% at 90% 25%, rgba(47, 155, 213, 0.06) 0%, transparent 100%),
    radial-gradient(ellipse 40% 40% at 50% 80%, rgba(207, 104, 25, 0.04) 0%, transparent 100%);
  background-color: var(--ink);
  pointer-events: none;
}
.site-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.035;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ---- NAVBAR: transparent → blur on scroll ---- */
.site-header {
  background-color: transparent !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition:
    background-color 0.4s ease,
    backdrop-filter 0.4s ease,
    -webkit-backdrop-filter 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.35s ease !important;
}
.site-header.is-scrolled {
  background-color: rgba(16, 13, 11, 0.25) !important;
  border-bottom-color: rgba(255, 223, 63, 0.1) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2) !important;
}

/* ---- FOOTER REDESIGN ---- */
.footer {
  padding-top: 100px !important;
}
.footer-night {
  height: 240px !important;
  opacity: 0.85 !important;
}
.footer-shell {
  border: 1px solid rgba(255, 223, 63, 0.12) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(ellipse 70% 60% at 8% -10%, rgba(255, 223, 63, 0.14), transparent 50%),
    radial-gradient(ellipse 50% 50% at 95% 100%, rgba(207, 104, 25, 0.08), transparent 50%),
    linear-gradient(145deg, #2f1915 0%, #3b241d 40%, #1e0f0c 100%) !important;
  box-shadow:
    0 -1px 0 rgba(255, 223, 63, 0.06) inset,
    0 32px 80px rgba(0, 0, 0, 0.35) !important;
}
.footer-top {
  min-height: 78px !important;
  padding: 18px 38px !important;
  background: rgba(255, 223, 63, 0.06) !important;
  border-bottom: 1px solid rgba(255, 223, 63, 0.08) !important;
  box-shadow: none !important;
}
.footer-brand strong {
  background: linear-gradient(135deg, var(--yellow), var(--orange)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.footer-brand a {
  color: var(--muted) !important;
  transition: color 0.25s ease !important;
  font-size: 14px !important;
  opacity: 0.7 !important;
}
.footer-brand a:hover {
  color: var(--yellow) !important;
  opacity: 1 !important;
}
.socials a {
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s cubic-bezier(0.2, 0.85, 0.25, 1),
    border-color 0.25s ease,
    box-shadow 0.25s ease !important;
}
.socials a:hover {
  background: rgba(255, 223, 63, 0.15) !important;
  color: var(--yellow) !important;
  transform: translateY(-3px) !important;
  border-color: rgba(255, 223, 63, 0.2) !important;
  box-shadow: 0 4px 16px rgba(255, 172, 63, 0.15) !important;
}
.footer-bottom {
  padding: 28px 38px 32px !important;
}
.footer-bottom p {
  font-size: 14px !important;
  color: rgba(201, 174, 164, 0.6) !important;
  line-height: 1.55 !important;
}

/* ---- SECTION BACKGROUNDS (fill empty areas) ---- */
.quote.section {
  position: relative;
}
.quote.section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 80% at 20% 50%, rgba(255, 172, 63, 0.04), transparent),
    radial-gradient(ellipse 40% 60% at 80% 30%, rgba(47, 155, 213, 0.03), transparent);
  pointer-events: none;
}
.features.section {
  position: relative;
}
.features.section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 40% at 70% 20%, rgba(207, 104, 25, 0.04), transparent);
  pointer-events: none;
}
.faq.section {
  position: relative;
}
.faq.section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 50% at 30% 60%, rgba(141, 242, 76, 0.03), transparent);
  pointer-events: none;
}
.shop.section {
  position: relative;
}
.shop.section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 40% 50% at 50% 40%, rgba(255, 223, 63, 0.05), transparent);
  pointer-events: none;
}

/* ---- LOGIN BUTTON ---- */
.login-button {
  background: linear-gradient(135deg, var(--yellow) 0%, var(--orange-deep) 100%) !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
  border: none !important;
  text-shadow: none !important;
  transition:
    transform 0.25s cubic-bezier(0.2, 0.85, 0.25, 1),
    box-shadow 0.25s ease !important;
}
.login-button i {
  color: var(--ink) !important;
}
.login-button:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 6px 20px rgba(255, 172, 63, 0.35) !important;
}

/* ---- FOOTER LINKS COLUMNS ---- */
.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding: 32px 38px;
  border-top: 1px solid rgba(255, 223, 63, 0.06);
}
.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.footer-col h4 {
  margin: 0 0 14px;
  color: var(--text);
  font-family: Unbounded, Manrope, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
}
.footer-col a {
  display: block;
  padding: 5px 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
  transition: color 0.2s ease, transform 0.2s ease;
}
.footer-col a:hover {
  color: var(--yellow);
  transform: translateX(4px);
}

.footer-bottom a {
  color: var(--muted);
  font-size: 14px;
  opacity: 0.5;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.footer-bottom a:hover {
  color: var(--yellow);
  opacity: 1;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 223, 63, 0.06) !important;
}

@media (max-width: 860px) {
  .footer-links {
    grid-template-columns: 1fr 1fr;
    padding: 24px 22px;
    gap: 24px;
  }
}
@media (max-width: 520px) {
  .footer-links {
    grid-template-columns: 1fr;
    padding: 20px 22px;
    gap: 20px;
  }
  .footer-top {
    padding: 16px 22px !important;
  }
  .footer-bottom {
    padding: 20px 22px 24px !important;
  }
}

/* --- PREMIUM REDESIGN: PLAYERS, PROFILES, POSTS, TOWNS --- */
.player-card, .profile-card, .feed-post, .town-list-item, .team-slide, .player-story-card, .character-card, .town-detail {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25) !important;
  transform: translate3d(0, 0, 0);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
  contain: paint;
  clip-path: inset(0 round 16px) !important;
  transition: transform 0.3s cubic-bezier(0.2, 0.85, 0.25, 1), box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease !important;
}

.player-card:hover, .town-list-item:hover, .team-slide:hover, .character-card:hover {
  transform: translateY(-4px) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  border-color: rgba(255, 212, 59, 0.2) !important;
  box-shadow: 0 12px 32px rgba(255, 172, 63, 0.08), 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

.feed-post-content {
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
  color: #f0f0f2 !important;
}

/* Avatar/Image styling inside cards */
.player-face, .team-render img, .feed-reply-face, .feed-post-head img {
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
}

/* Chips and Badges */
.role-chip, .tag, .history-season-meta span {
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 6px !important;
}

.music-track, .music-album-card {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(8px) !important;
  border-radius: 12px !important;
  transition: all 0.3s ease !important;
}
.music-track:hover, .music-album-card:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  transform: translateX(4px) !important;
}

/* --- EASYDONATE SHOP COMPONENT --- */
.easydonate-store {
  margin-top: 60px;
}
.easydonate-header {
  text-align: center;
  margin-bottom: 40px;
}
.easydonate-header h2 {
  font-size: 32px;
  margin-bottom: 12px;
  color: var(--text);
}
.easydonate-header p {
  color: var(--muted);
  font-size: 16px;
  max-width: 600px;
  margin: 0 auto;
}
.easydonate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.easydonate-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s cubic-bezier(0.2, 0.85, 0.25, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.easydonate-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 212, 59, 0.2);
  box-shadow: 0 12px 32px rgba(255, 172, 63, 0.08), 0 4px 10px rgba(0, 0, 0, 0.3);
}
.easydonate-image {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.easydonate-image-placeholder {
  width: 100%;
  height: 160px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.easydonate-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.easydonate-title {
  font-size: 20px;
  margin: 0 0 10px 0;
  color: var(--text);
}
.easydonate-desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 20px 0;
  flex-grow: 1;
}
.easydonate-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}
.easydonate-price {
  font-size: 22px;
  font-weight: 800;
  color: var(--yellow);
  font-family: Unbounded, sans-serif;
}
.easydonate-buy {
  padding: 10px 20px !important;
  font-size: 14px !important;
}
.easydonate-loading, .easydonate-empty, .easydonate-error {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px;
  color: var(--muted);
  font-size: 16px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
}

.character-card { overflow: hidden !important; transform: translateZ(0) !important; }



/* --- TOWN ICONS & BANNERS --- */
.town-list-item {
  display: grid !important;
  grid-template-columns: 42px 1fr !important;
  gap: 14px !important;
  align-items: center !important;
  text-align: left !important;
}
.town-list-info {
  display: flex;
  flex-direction: column;
}
.town-list-info b {
  font-size: 16px;
  color: #fff;
  margin-bottom: 2px;
}
.town-list-info span, .town-list-info small {
  color: var(--muted);
  font-size: 13px;
}
.town-list-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.town-list-icon.is-placeholder {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--yellow), var(--orange-deep));
  color: var(--ink);
  font-weight: 900;
  font-size: 20px;
}

.town-banner {
  position: relative;
  width: calc(100% + 48px);
  margin: -24px -24px 24px -24px;
  height: 240px;
  background-size: cover;
  background-position: center;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-shadow: inset 0 -60px 80px -20px rgba(13, 13, 14, 0.98);
}
.town-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(13, 13, 14, 0) 30%, rgba(13, 13, 14, 0.95) 100%);
  display: flex;
  align-items: flex-end;
  padding: 24px;
}
.town-banner-overlay .town-detail-head h2 {
  text-shadow: 0 4px 16px rgba(0,0,0,0.9);
}
.town-banner-overlay .town-detail-head p {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 8px rgba(0,0,0,0.9);
}







::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--ink);
  border-left: 1px solid rgba(255, 255, 255, 0.05);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--yellow), var(--orange-deep));
  border-radius: 10px;
  border: 2px solid var(--ink);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ffd766, var(--yellow));
}



@keyframes drunkWave {
  0% { filter: blur(0px) hue-rotate(0deg); transform: scale(1) rotate(0deg); }
  25% { filter: blur(4px) hue-rotate(15deg); transform: scale(1.02) rotate(1deg); }
  50% { filter: blur(8px) hue-rotate(-15deg); transform: scale(1.05) rotate(-2deg); }
  75% { filter: blur(4px) hue-rotate(15deg); transform: scale(1.02) rotate(1deg); }
  100% { filter: blur(0px) hue-rotate(0deg); transform: scale(1) rotate(0deg); }
}
.drunk-effect {
  animation: drunkWave 1s ease-in-out;
  overflow-x: hidden;
}

.site-header {
  transition: transform 0.4s cubic-bezier(0.2, 0.85, 0.25, 1), background-color 0.3s ease !important;
}
.site-header.is-hidden {
  transform: translateY(-100%) !important;
}


.wiki-body #root { padding-top: 100px; }







.season-finish-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #fff;
  pointer-events: none;
  animation: flash-out 3.5s forwards cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes flash-out {
  0% { opacity: 0; transform: scale(1); }
  10% { opacity: 1; transform: scale(1); }
  30% { background: var(--yellow); opacity: 1; }
  100% { opacity: 1; background: #fff; }
}
.season-countdown.is-finished {
  animation: countdown-explode 3.5s forwards;
}
@keyframes countdown-explode {
  0% { transform: scale(1); filter: brightness(1); }
  10% { transform: scale(1.1); filter: brightness(2); }
  20% { transform: scale(1.3) translateY(-20px); filter: brightness(3); opacity: 1; }
  100% { transform: scale(3) translateY(-50px); filter: brightness(5); opacity: 0; }
}
.pills .season-finished-pill {
  background: var(--yellow);
  color: #111;
  text-shadow: none;
  box-shadow: 0 0 15px rgba(255, 212, 59, 0.4);
}
.privacy-page .hero-title {
  text-align: center;
}
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--yellow);
  color: #1a1a1a;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(20px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.3s;
}
.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.back-to-top:hover {
  transform: translateY(-4px) scale(1.05);
  background: #ffec8a;
  box-shadow: 0 15px 25px rgba(255, 212, 59, 0.4);
}
.drunk-effect {
  animation: drunkWobble 4s ease-in-out infinite alternate;
  filter: blur(2px) hue-rotate(15deg) contrast(1.1);
  transition: filter 2s ease;
}
@keyframes drunkWobble {
  0% { transform: perspective(1000px) rotateX(1deg) rotateY(2deg) scale(1.02); }
  50% { transform: perspective(1000px) rotateX(-2deg) rotateY(-1deg) scale(1.04); filter: blur(4px) hue-rotate(-10deg) contrast(1.2); }
  100% { transform: perspective(1000px) rotateX(2deg) rotateY(3deg) scale(1.01); filter: blur(3px) hue-rotate(30deg) contrast(1.1); }
}
.owl-final-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(10, 9, 8, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--yellow);
  text-align: center;
  animation: finalFadeIn 0.5s ease-out forwards;
  transition: opacity 1s ease;
}
.owl-final-overlay h1 {
  font-family: Unbounded, sans-serif;
  font-size: clamp(32px, 5vw, 64px);
  margin-bottom: 20px;
  animation: bounceScale 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.owl-final-overlay p {
  font-size: 24px;
  color: #fff;
}
@keyframes finalFadeIn {
  from { opacity: 0; backdrop-filter: blur(0px); }
  to { opacity: 1; backdrop-filter: blur(10px); }
}
@keyframes bounceScale {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.discord .price-card { background: radial-gradient(circle at 18% 28%, rgba(255, 255, 255, 0.1), transparent 15rem), linear-gradient(120deg, #5865F2, #3942a2); color: #ffffff; box-shadow: 0 28px 60px rgba(88, 101, 242, 0.24); } .discord .price-card h2 { color: #ffffff; } .discord .price-card p { color: rgba(255, 255, 255, 0.9); } .discord .price-card a.button-yellow { background: #ffffff; color: #5865F2; }
.discord-banner.section {
  padding: 60px 0;
}
.discord-banner-card {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(135deg, #404EED 0%, #5865F2 40%, #7289DA 100%);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 48px 56px;
  box-shadow:
    0 32px 80px rgba(88, 101, 242, 0.45),
    0 0 0 1px rgba(255,255,255,0.08) inset;
}
.discord-banner-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.discord-banner-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
}
.discord-banner-orb-1 {
  width: 300px;
  height: 300px;
  background: #7289DA;
  top: -80px;
  right: 100px;
  animation: orbFloat 8s ease-in-out infinite;
}
.discord-banner-orb-2 {
  width: 200px;
  height: 200px;
  background: rgba(255,255,255,0.3);
  bottom: -60px;
  left: 200px;
  animation: orbFloat 10s ease-in-out infinite reverse;
}
.discord-banner-orb-3 {
  width: 150px;
  height: 150px;
  background: #404EED;
  top: 20px;
  left: 50px;
  animation: orbFloat 7s ease-in-out infinite 2s;
}
@keyframes orbFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-20px) scale(1.05); }
}
.discord-banner-icon {
  position: relative;
  z-index: 1;
  width: 80px;
  height: 80px;
  background: rgba(255,255,255,0.15);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
}
.discord-banner-content {
  position: relative;
  z-index: 1;
}
.discord-banner-kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: 8px;
}
.discord-banner-title {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}
.discord-banner-text {
  font-size: 15px;
  color: rgba(255,255,255,0.78);
  line-height: 1.6;
  margin: 0;
  max-width: 480px;
}
.discord-banner-action {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.discord-banner-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  color: #5865F2;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 50px;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.discord-banner-btn:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
  background: #f0f0ff;
}
.discord-banner-btn svg {
  transition: transform 0.2s;
}
.discord-banner-btn:hover svg {
  transform: translateX(3px);
}
.discord-banner-members {
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  white-space: nowrap;
}
@media (max-width: 768px) {
  .discord-banner-card {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 36px 24px;
    gap: 24px;
  }
  .discord-banner-icon {
    margin: 0 auto;
  }
  .discord-banner-action {
    align-items: center;
  }
  .discord-banner-text {
    max-width: 100%;
  }
}

.discord-card {
  position: relative;
  display: grid;
  grid-template-columns: 360px 1fr;
  align-items: center;
  min-height: 320px;
  width: min(980px, 100%);
  margin: 0 auto;
  border-radius: 28px;
  overflow: visible;
  background:
    radial-gradient(circle at 14% 30%, rgba(255,255,255,0.92), transparent 55%),
    linear-gradient(130deg, #daeeff 0%, #8ec8f8 55%, #5fa9ef 100%);
  box-shadow:
    0 32px 72px rgba(31, 100, 200, 0.28),
    0 0 0 1px rgba(255,255,255,0.5) inset;
}

.discord-card-orbit {
  position: absolute;
  z-index: 2;
  left: -80px;
  top: -110px;
  width: clamp(340px, 34vw, 520px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 24px 40px rgba(31, 100, 200, 0.3));
  animation: 6s ease-in-out infinite orbitFloat;
}

.discord-card-body {
  position: relative;
  z-index: 3;
  grid-column: 2;
  padding: 44px 52px 44px 20px;
}

.discord-card-kicker {
  display: block;
  font-family: Unbounded, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2d6bbd;
  margin-bottom: 10px;
}

.discord-card-title {
  font-family: Unbounded, sans-serif;
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #05203a;
  margin: 0 0 16px;
  text-transform: uppercase;
}

.discord-card-sub {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(5, 32, 58, 0.7);
  margin: 0 0 28px;
  max-width: 400px;
}

.discord-card-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.discord-join-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #5865F2;
  color: #fff;
  font-family: Unbounded, sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 14px 26px;
  border-radius: 50px;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 8px 28px rgba(88, 101, 242, 0.45);
  letter-spacing: 0.02em;
}

.discord-join-btn:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 16px 40px rgba(88, 101, 242, 0.6);
}

@media (max-width: 760px) {
  .discord-card {
    grid-template-columns: 1fr;
    padding-top: 200px;
    overflow: hidden;
  }
  .discord-card-orbit {
    width: min(480px, 110vw);
    left: 50%;
    top: -80px;
    transform: translateX(-50%);
    animation-name: orbitFloatMobile;
  }
  .discord-card-body {
    grid-column: 1;
    padding: 0 24px 36px;
    text-align: center;
  }
  .discord-card-actions {
    justify-content: center;
  }
  .discord-card-sub {
    max-width: 100%;
  }
}

.discord-card-kicker {
  font-family: Unbounded, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2a5fa8;
  margin: 0 0 8px;
}
.discord-card-title {
  font-family: Unbounded, sans-serif;
  font-size: clamp(40px, 6vw, 68px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #05203a;
  margin: 0 0 14px;
  text-transform: uppercase;
}
.discord-card-meta {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: rgba(5, 32, 58, 0.55);
  margin-bottom: 28px;
  letter-spacing: 0.01em;
}
.discord-card-orbit {
  position: absolute;
  z-index: 2;
  left: -120px;
  top: -130px;
  width: clamp(350px, 36vw, 540px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 24px 44px rgba(31, 100, 200, 0.32));
  animation: 6s ease-in-out infinite orbitFloat;
}
.discord-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(5, 32, 58, 0.08);
  color: #05203a;
  font-family: Unbounded, sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 13px 22px;
  border-radius: 50px;
  text-decoration: none;
  border: 1.5px solid rgba(5, 32, 58, 0.15);
  transition: transform 0.2s, background 0.2s, border-color 0.2s;
  white-space: nowrap;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.discord-copy-btn:hover {
  transform: translateY(-2px);
  background: rgba(5, 32, 58, 0.13);
  border-color: rgba(5, 32, 58, 0.28);
}

.discord-card-orbit {
  position: absolute;
  z-index: 2;
  left: -150px;
  top: -140px;
  width: clamp(380px, 38vw, 560px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 24px 44px rgba(31, 100, 200, 0.32));
  animation: 6s ease-in-out infinite orbitFloat;
}

button.discord-copy-btn {
  /* Reset button default styles just in case */
  appearance: none;
  font-family: inherit;
}

::selection {
  background: rgba(255, 212, 64, 0.4); /* soft yellow */
  color: inherit;
  text-shadow: none;
}
::-moz-selection {
  background: rgba(255, 212, 64, 0.4);
  color: inherit;
  text-shadow: none;
}

.discord-card-highlight {
  background: linear-gradient(135deg, #ff9d00, #ff5500);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  font-weight: 900;
  margin-left: 4px;
  filter: drop-shadow(0 2px 4px rgba(255, 153, 0, 0.2));
}

/* Override previous highlight to match card colors (Discord theme) */
.discord-card-highlight {
  background: none !important;
  -webkit-text-fill-color: #5865F2 !important;
  color: #5865F2 !important;
  font-size: 15px !important; /* kicker is 12px, 15px is slightly bigger */
  font-weight: 900 !important;
  letter-spacing: 0.15em !important;
  filter: none !important;
}

[data-site-view] {
  position: relative;
}

/* Low-load mode is the default. Continuous animation and live blur were the
   main source of GPU usage while the page was otherwise idle. */
html.performance-mode {
  scroll-behavior: auto !important;
}

html.performance-mode *,
html.performance-mode *::before,
html.performance-mode *::after {
  animation: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.performance-mode main,
html.performance-mode main.is-page-leaving,
html.performance-mode main.is-page-entering {
  filter: none !important;
}

html.performance-mode .hero-content,
html.performance-mode .player-card,
html.performance-mode .town-card,
html.performance-mode .feature-card,
html.performance-mode .album-card,
html.performance-mode .button,
html.performance-mode .login-button {
  transform: none !important;
}

html.performance-mode .site-header,
html.performance-mode .global-music-player,
html.performance-mode .global-music-expanded,
html.performance-mode dialog,
html.performance-mode .account-dropdown {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ====================================================================
   MOBILE ADAPTIVE FIX — Full overhaul
   ==================================================================== */

/* ---- 980px: Tablet — hamburger menu appears ---- */
@media (max-width: 980px) {
  .site-header {
    display: grid !important;
    grid-template-columns: 1fr auto auto !important;
    align-items: center !important;
    height: 72px !important;
    padding-inline: 18px !important;
    gap: 10px !important;
  }
  .site-header .brand { grid-column: 1; grid-row: 1; }
  .site-header .nav-toggle { grid-column: 2; grid-row: 1; display: grid !important; }
  .site-header .login-button,
  .site-header .account-menu { grid-column: 3; grid-row: 1; }

  /* Nav dropdown — hidden by default */
  .site-header .site-nav {
    position: absolute !important;
    top: 72px !important;
    left: 14px !important;
    right: 14px !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    grid-column: 1 / -1 !important;
    padding: 10px !important;
    border-radius: 16px !important;
    background: rgba(16, 13, 11, 0.85) !important;
    border: 1px solid rgba(255, 223, 63, 0.08) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important;
    z-index: 100 !important;
    max-height: calc(100dvh - 92px) !important;
    overflow-y: auto !important;
  }
  .site-header .site-nav.is-open {
    display: flex !important;
  }
  .site-header .site-nav a {
    display: flex !important;
    align-items: center !important;
    min-height: 48px !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    color: var(--text) !important;
    transition: background 0.2s !important;
  }
  .site-header .site-nav a:hover {
    background: rgba(255, 223, 63, 0.08) !important;
  }
  .site-header .site-nav a::after { display: none !important; }

  /* Login button — icon-only */
  .login-button {
    width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 !important;
    font-size: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Hero */
  .hero {
    min-height: auto !important;
    padding-top: 110px !important;
    padding-bottom: 70px !important;
  }
  .hero-grid {
    grid-template-columns: 1fr !important;
  }
  .hero-art, .render-stage { display: none !important; }

  /* Season countdown — proper wrapping */
  .season-countdown {
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 10px 16px !important;
    width: 100% !important;
  }
  .season-countdown-label {
    width: 100% !important;
    font-size: 12px !important;
    text-align: center !important;
  }
  .season-countdown-timer {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Buttons stack vertically */
  .actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .button {
    width: 100% !important;
    min-height: 50px !important;
    font-size: 16px !important;
    justify-content: center !important;
  }

  /* Cards */
  .card-grid,
  .faq-grid,
  .project-tabs { grid-template-columns: 1fr !important; }
  .section-title { grid-template-columns: 1fr !important; }
  .section-title > span { display: none !important; }
}

/* ---- 680px: Phone landscape ---- */
@media (max-width: 680px) {
  .site-header {
    grid-template-columns: 1fr auto auto !important;
    height: 68px !important;
    padding-inline: 14px !important;
  }
  .site-header .site-nav {
    top: 68px !important;
    left: 10px !important;
    right: 10px !important;
  }
  .brand strong { font-size: 20px !important; }
  .brand-mark { width: 34px !important; height: 26px !important; }
  .brand small { font-size: 11px !important; }
  .brand { gap: 8px !important; }

  .login-button,
  .account-trigger,
  .nav-toggle {
    width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
  }

  .hero {
    padding-top: 100px !important;
    padding-bottom: 56px !important;
  }
  .hero h1 {
    font-size: clamp(28px, 9vw, 38px) !important;
    line-height: 1.06 !important;
    max-width: 100% !important;
  }
  .hero p {
    font-size: 15px !important;
    max-width: 100% !important;
    width: auto !important;
    margin-block: 18px 24px !important;
  }
  .pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .pills span {
    min-height: 30px !important;
    padding-inline: 10px !important;
    font-size: 12px !important;
  }

  /* Discord card mobile */
  .discord-card {
    grid-template-columns: 1fr !important;
    padding-top: 180px !important;
  }
  .discord-card-orbit {
    width: min(420px, 100vw) !important;
    left: 50% !important;
    top: -60px !important;
    transform: translateX(-50%) !important;
  }
  .discord-card-body {
    grid-column: 1 !important;
    padding: 0 20px 32px !important;
    text-align: center !important;
  }
  .discord-card-actions {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  /* Fix text max-width limitations */
  .community p,
  .detail-copy p,
  .feature-heading p,
  .hero p,
  .history-season-body p,
  .team-copy p {
    max-width: 100% !important;
    width: auto !important;
  }

  /* Footer */
  .footer {
    padding: 48px 14px 20px !important;
  }
  .footer-bottom,
  .footer-top {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
}

/* ---- 420px: Small phone ---- */
@media (max-width: 420px) {
  .site-header {
    height: 60px !important;
    padding-inline: 10px !important;
  }
  .site-header .site-nav {
    top: 60px !important;
    left: 8px !important;
    right: 8px !important;
  }
  .brand strong { font-size: 17px !important; }
  .brand small { display: none !important; }
  .brand-mark { width: 30px !important; height: 24px !important; }
  .brand { gap: 6px !important; }

  .login-button,
  .account-trigger,
  .nav-toggle {
    width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
  }
  .login-button svg { width: 24px !important; height: 24px !important; }

  .hero {
    padding-top: 86px !important;
    padding-bottom: 48px !important;
  }
  .hero h1 {
    font-size: clamp(24px, 7.8vw, 32px) !important;
  }
  .hero p {
    font-size: 14px !important;
  }
  .pills {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  .button {
    min-height: 48px !important;
    font-size: 15px !important;
  }

  /* Season countdown compact */
  .season-countdown {
    padding: 8px 12px !important;
    border-radius: 10px !important;
  }
  .season-countdown-label { font-size: 11px !important; }
  .time-block b { font-size: 22px !important; }
  .time-block span { font-size: 10px !important; }

  /* Discord card */
  .discord-card {
    padding-top: 150px !important;
    border-radius: 18px !important;
  }
  .discord-card-orbit {
    width: min(340px, 95vw) !important;
    top: -50px !important;
  }
  .discord-card-title {
    font-size: clamp(30px, 10vw, 44px) !important;
  }
  .discord-card-body {
    padding: 0 16px 28px !important;
  }

  /* Price card */
  .price-card {
    padding-top: 140px !important;
    border-radius: 18px !important;
  }
  .price-orbit {
    width: min(360px, 100vw) !important;
  }
  .price-copy h2 {
    font-size: clamp(28px, 9vw, 40px) !important;
  }

  /* Community */
  .community-slider,
  .community-track {
    min-height: 580px !important;
  }
  .community h2 { font-size: clamp(22px, 7vw, 30px) !important; }

  /* Team */
  .team-slider,
  .team-track { min-height: 620px !important; }
  .team-copy h3 { font-size: clamp(24px, 8vw, 32px) !important; }

  /* Squaremap */
  .squaremap-embed,
  .squaremap-frame { min-height: 360px !important; }
}