/* Minecraft-inspired user page skin. The functional markup stays shared with the legacy pages. */
.home-v2 {
  --bg: #0a100f;
  --panel: #121917;
  --ink: #edf4ef;
  --ink-soft: #a7b5ad;
  --ink-faint: #738078;
  --line: rgba(219, 237, 225, .14);
  --pink: #d56a7c;
  --cyan: #63d493;
  --violet: #759bd8;
  --sun: #d7a75c;
  color: var(--ink);
  background: var(--bg);
}
.home-v2 .scroll-progress i {
  background: linear-gradient(90deg, var(--pink), var(--sun), var(--cyan));
  box-shadow: none;
}
.home-v2 .nav {
  background: rgba(9, 14, 13, .78);
  border-bottom-color: rgba(219, 237, 225, .1);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.home-v2 .nav.scrolled { background: rgba(9, 14, 13, .96); }
.home-v2 .brand span { color: var(--cyan); }
.home-v2 .nav-links a::after { background: var(--cyan); }
.home-v2 .hero-action.primary { border-color: var(--cyan); background: var(--cyan); }
.home-v2 .hero-action.primary:hover { background: #7be0a5; }
.home-v2 .hero-sound { border-color: rgba(219, 237, 225, .2); background: rgba(9, 14, 13, .72); }
.home-v2 .hero-sound:hover { border-color: var(--cyan); background: rgba(9, 14, 13, .9); box-shadow: 0 10px 28px rgba(99, 212, 147, .16); }

/* Keep section backgrounds active while adding a slow block-grid drift. */
.home-v2 .worlds-portal,
.home-v2 .hub,
.home-v2 .community,
.home-v2 .gallery,
.home-v2 .streams {
  position: relative;
  isolation: isolate;
}
.home-v2 .worlds-portal::before,
.home-v2 .hub::before,
.home-v2 .community::before,
.home-v2 .gallery::before,
.home-v2 .streams::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .42;
  background:
    linear-gradient(135deg, rgba(99, 212, 147, .06), transparent 42%),
    repeating-linear-gradient(90deg, rgba(219, 237, 225, .018) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg, rgba(219, 237, 225, .014) 0 1px, transparent 1px 80px);
  background-position: 0 0, 0 0, 0 0;
  background-size: auto, 80px 80px, 80px 80px;
  animation: homeGridDrift 26s linear infinite;
}
.home-v2 .worlds-portal::after,
.home-v2 .hub::after,
.home-v2 .community::after,
.home-v2 .gallery::after,
.home-v2 .streams::after {
  content: "";
  position: absolute;
  left: clamp(18px, 6vw, 72px);
  right: clamp(18px, 6vw, 72px);
  bottom: 0;
  height: 1px;
  background: var(--line);
  pointer-events: none;
}
@keyframes homeGridDrift {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 0 0, 80px 40px, -40px 80px; }
}

/* Section headers use a compact editorial layout instead of a centered billboard. */
.home-v2 .wp-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .72fr);
  align-items: end;
  gap: 8px 48px;
  max-width: 1240px;
  margin: 0 auto 38px;
  text-align: left;
}
.home-v2 .wp-kicker {
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: 0 0 10px;
  color: var(--cyan);
  font-size: .68rem;
  font-weight: 760;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.home-v2 .wp-kicker::before,
.home-v2 .wp-kicker::after {
  width: 18px;
  background: var(--cyan);
  opacity: .7;
}
.home-v2 .wp-title {
  grid-column: 1;
  margin: 0;
  padding: 0;
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(2.2rem, 4.8vw, 4.4rem);
  font-weight: 780;
  line-height: 1.06;
  letter-spacing: 0;
  background: none;
  -webkit-text-fill-color: currentColor;
  filter: none;
}
.home-v2 .wp-title em {
  margin-left: .24em;
  margin-right: 0;
  padding: 0;
  color: var(--cyan);
  font-style: normal;
  background: none;
  -webkit-text-fill-color: currentColor;
}
.home-v2 .wp-desc {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  max-width: 42ch;
  margin: 0 0 4px auto;
  color: var(--ink-soft);
  font-size: .88rem;
  line-height: 1.75;
}

/* World entry bento. The first world is the visual anchor; the other worlds stay scannable. */
.home-v2 .worlds-portal {
  max-width: 1320px;
  padding: clamp(72px, 9vh, 116px) clamp(18px, 5vw, 60px);
}
.home-v2 .wp-grid {
  display: grid;
  grid-template-columns: 1.25fr .9fr .9fr;
  grid-auto-rows: 248px;
  gap: 14px;
  max-width: 1240px;
  margin: 0 auto;
}
.home-v2 .wp-card {
  min-height: 0;
  padding: 24px;
  border-radius: 8px;
  border-color: rgba(219, 237, 225, .16);
  background: #121917;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 36px rgba(0, 0, 0, .16);
  will-change: transform;
}
.home-v2 .wp-card:first-child { grid-row: span 2; }
.home-v2 .wp-card::before { filter: saturate(.92) brightness(.64); transform: scale(1.03); }
.home-v2 .wp-card::after {
  background: linear-gradient(180deg, rgba(7, 12, 11, .03) 18%, rgba(7, 12, 11, .56) 58%, rgba(7, 12, 11, .96) 100%);
}
.home-v2 .wp-card:hover {
  border-color: var(--cyan);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 24px 48px rgba(0, 0, 0, .28);
}
.home-v2 .wp-card:hover::before { filter: saturate(1.12) brightness(.78); }
.home-v2 .wp-card:hover::after {
  background: linear-gradient(180deg, rgba(99, 212, 147, .08) 18%, rgba(7, 12, 11, .54) 58%, rgba(7, 12, 11, .94) 100%);
}
.home-v2 .wp-no {
  top: 20px;
  left: 22px;
  color: var(--cyan);
  font-family: var(--body);
  font-size: .78rem;
  font-weight: 760;
  letter-spacing: .12em;
  -webkit-text-stroke: 0;
}
.home-v2 .wp-name {
  margin-bottom: 10px;
  color: #f3f8f4;
  font-family: var(--body);
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 760;
  letter-spacing: 0;
}
.home-v2 .wp-go {
  padding: 8px 12px;
  border-radius: 5px;
  border-color: rgba(219, 237, 225, .25);
  color: #e3eee6;
  font-size: .72rem;
  letter-spacing: 0;
  text-transform: none;
}
.home-v2 .wp-card:hover .wp-go { background: var(--cyan); border-color: var(--cyan); color: #09110d; }

/* Compact tools grid with explicit spans instead of the old uneven auto-flow. */
.home-v2 .hub,
.home-v2 .community {
  max-width: 1320px;
  padding: clamp(72px, 9vh, 116px) clamp(18px, 5vw, 60px);
}
.home-v2 .hub-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 180px;
  gap: 14px;
  max-width: 1240px;
  margin: 0 auto;
}
.home-v2 .feat {
  --card-tilt-x: 0deg;
  --card-tilt-y: 0deg;
  grid-column: span 4;
  min-height: 0;
  padding: 22px;
  border-radius: 8px;
  border-color: rgba(219, 237, 225, .14);
  background: #121917;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  transform: perspective(900px) rotateX(var(--card-tilt-y)) rotateY(var(--card-tilt-x));
}
.home-v2 .feat-lg { grid-column: span 8; }
.home-v2 .feat:nth-child(6),
.home-v2 .feat:nth-child(7) { grid-column: span 6; }
.home-v2 .feat[data-accent="pink"] { --fa: #d56a7c; --far: 213, 106, 124; }
.home-v2 .feat[data-accent="cyan"] { --fa: #63d493; --far: 99, 212, 147; }
.home-v2 .feat[data-accent="violet"] { --fa: #759bd8; --far: 117, 155, 216; }
.home-v2 .feat[data-accent="sun"] { --fa: #d7a75c; --far: 215, 167, 92; }
.home-v2 .feat::before {
  background: linear-gradient(135deg, rgba(var(--far), .13), transparent 55%);
}
.home-v2 .feat::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 16px;
  width: 7px;
  height: 7px;
  background: var(--fa);
  opacity: .18;
  transition: opacity .2s ease, transform .2s ease;
}
.home-v2 .feat:hover { transform: perspective(900px) rotateX(var(--card-tilt-y)) rotateY(var(--card-tilt-x)) translateY(-4px); border-color: rgba(var(--far), .55); box-shadow: 0 22px 42px rgba(0, 0, 0, .22); }
.home-v2 .feat:hover::after { opacity: .9; transform: scale(1.5); }
.home-v2 .feat-ic { width: 42px; height: 42px; border-radius: 6px; }
.home-v2 .feat-t,
.home-v2 .feat-lg .feat-t { font-family: var(--body); font-size: 1.25rem; font-weight: 740; letter-spacing: 0; }
.home-v2 .feat-lg .feat-t { font-size: 1.6rem; }
.home-v2 .feat-d { color: var(--ink-soft); font-size: .82rem; line-height: 1.55; }
.home-v2 .feat-go { color: var(--fa); font-size: .72rem; letter-spacing: 0; text-transform: none; }
.home-v2 .feat:hover .feat-go { letter-spacing: 0; }

/* Status cards inherit the neutral palette but use a denser three-column board. */
.home-v2 .vice { background: #101419; }
.home-v2 .srvstat-board { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.home-v2 .sstat-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.home-v2 .sstat-metric { min-height: 72px; padding: 11px 10px; }
.home-v2 .sstat-metric b { min-inline-size: 0; font-size: clamp(1.1rem, 2.2vw, 1.5rem); }
.home-v2 .sstat-metric span { font-size: .58rem; }

/* Community and check-in become a clear action band, not a decorative poster. */
.home-v2 .comm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 1240px; margin: 0 auto; }
.home-v2 .comm-card {
  --card-tilt-x: 0deg;
  --card-tilt-y: 0deg;
  min-height: 220px;
  padding: 24px;
  border-radius: 8px;
  border-color: rgba(219, 237, 225, .14);
  background: #121917;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  transform: perspective(900px) rotateX(var(--card-tilt-y)) rotateY(var(--card-tilt-x));
}
.home-v2 .comm-card[data-accent="pink"] { --fa: #d56a7c; --far: 213, 106, 124; }
.home-v2 .comm-card[data-accent="cyan"] { --fa: #63d493; --far: 99, 212, 147; }
.home-v2 .comm-card[data-accent="violet"] { --fa: #759bd8; --far: 117, 155, 216; }
.home-v2 .comm-no { color: var(--fa); font-family: var(--body); font-size: .82rem; font-weight: 760; letter-spacing: .12em; -webkit-text-stroke: 0; }
.home-v2 .comm-t { font-family: var(--body); font-size: 1.25rem; font-weight: 740; letter-spacing: 0; }
.home-v2 .comm-d { color: var(--ink-soft); font-size: .82rem; line-height: 1.65; }
.home-v2 .comm-go { color: var(--fa); font-size: .72rem; letter-spacing: 0; text-transform: none; }
.home-v2 .comm-card:hover { transform: perspective(900px) rotateX(var(--card-tilt-y)) rotateY(var(--card-tilt-x)) translateY(-4px); border-color: rgba(var(--far), .55); box-shadow: 0 22px 42px rgba(0, 0, 0, .22); }
.home-v2 .comm-card:hover .comm-go { letter-spacing: 0; }
.home-v2 .checkin {
  max-width: 1240px;
  margin: 16px auto 0;
  padding: 18px 22px;
  border-radius: 8px;
  border-color: rgba(215, 167, 92, .35);
  background: #181817;
  box-shadow: none;
}
.home-v2 .ci-flame { font-size: 1.65rem; filter: none; }
.home-v2 .ci-title { font-family: var(--body); font-size: 1.05rem; font-weight: 720; }
.home-v2 .ci-sub { color: var(--ink-soft); font-size: .76rem; }
.home-v2 .ci-btn { padding: 11px 18px; border-radius: 6px; background: var(--sun); box-shadow: none; font-size: .76rem; letter-spacing: 0; }
.home-v2 .ci-btn:hover { transform: translateY(-2px); background: #e5bb73; box-shadow: none; }

/* Image wall and streams use the same frame language as the world cards. */
.home-v2 .gallery,
.home-v2 .streams { padding: clamp(72px, 9vh, 116px) clamp(18px, 5vw, 60px); }
.home-v2 .gw-aura,
.home-v2 .bz-aura { opacity: .34; background: linear-gradient(135deg, rgba(213, 106, 124, .08), rgba(99, 212, 147, .06) 55%, transparent 82%); }
.home-v2 .gw-wall,
.home-v2 .bz-grid { max-width: 1240px; }
.home-v2 .gw-wall { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 172px; gap: 14px; }
.home-v2 .gw-item { grid-column: span 3; grid-row: span 2; border-radius: 8px; border-color: rgba(219, 237, 225, .14); box-shadow: none; }
.home-v2 .gw-item.gw-tall { grid-row: span 4; }
.home-v2 .gw-item.gw-wide { grid-column: span 6; grid-row: span 2; }
.home-v2 .gw-item::after { background: linear-gradient(180deg, transparent 42%, rgba(7, 12, 11, .9) 100%); }
.home-v2 .gw-item:hover { border-color: var(--cyan); box-shadow: 0 22px 42px rgba(0, 0, 0, .24); }
.home-v2 .gw-author { color: var(--cyan); text-shadow: none; font-size: .62rem; letter-spacing: .08em; }
.home-v2 .gw-title { font-family: var(--body); font-size: 1.1rem; font-weight: 720; letter-spacing: 0; }
.home-v2 .gw-upload { padding: 11px 16px; border-radius: 6px; background: var(--cyan); box-shadow: none; font-size: .74rem; letter-spacing: 0; text-transform: none; }
.home-v2 .gw-upload:hover { background: #7be0a5; color: #09110d; box-shadow: none; }
.home-v2 .gw-hint { color: var(--ink-soft); font-size: .78rem; }
.home-v2 .bz-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.home-v2 .bz-card { --card-tilt-x: 0deg; --card-tilt-y: 0deg; border-radius: 8px; border-color: rgba(219, 237, 225, .14); background: #121917; box-shadow: none; transform: perspective(900px) rotateX(var(--card-tilt-y)) rotateY(var(--card-tilt-x)); }
.home-v2 .bz-card:hover { transform: perspective(900px) rotateX(var(--card-tilt-y)) rotateY(var(--card-tilt-x)) translateY(-4px); border-color: var(--cyan); box-shadow: 0 22px 42px rgba(0, 0, 0, .24); }
.home-v2 .bz-cover { --bz-cover: url('/assets/hero-bg-v2.svg'); }
.home-v2 .bz-play { width: 50px; height: 50px; border-radius: 6px; background: rgba(99, 212, 147, .9); color: #09110d; box-shadow: none; }
.home-v2 .bz-card:hover .bz-play:hover { background: var(--sun); color: #18130b; }
.home-v2 .bz-body { padding: 16px 18px 18px; }
.home-v2 .bz-t { font-family: var(--body); font-size: 1rem; font-weight: 720; letter-spacing: 0; }
.home-v2 .bz-more { border-radius: 6px; border-color: rgba(99, 212, 147, .35); color: var(--cyan); font-size: .74rem; letter-spacing: 0; }
.home-v2 .bz-more:hover { background: var(--cyan); color: #09110d; }
.home-v2 .bz-hint { color: var(--ink-soft); font-size: .78rem; }
.home-v2 .footer { border-top-color: var(--line); background: #090e0d; }
.home-v2 .footer-logo { font-family: var(--body); font-size: 2rem; font-weight: 760; }
.home-v2 .footer-logo span { color: var(--cyan); font-style: normal; text-shadow: none; }

@media (max-width: 980px) {
  .home-v2 .wp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 230px; }
  .home-v2 .wp-card:first-child { grid-row: span 1; }
  .home-v2 .wp-card:nth-child(1),
  .home-v2 .wp-card:nth-child(4) { grid-column: span 2; }
  .home-v2 .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 180px; }
  .home-v2 .feat,
  .home-v2 .feat-lg,
  .home-v2 .feat:nth-child(6),
  .home-v2 .feat:nth-child(7) { grid-column: span 1; }
  .home-v2 .feat-lg { grid-column: span 2; }
  .home-v2 .srvstat-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-v2 .gw-wall { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .home-v2 .gw-item { grid-column: span 3; }
  .home-v2 .gw-item.gw-wide { grid-column: span 6; }
  .home-v2 .bz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .home-v2 .wp-head { display: block; margin-bottom: 28px; }
  .home-v2 .wp-desc { max-width: 48ch; margin: 14px 0 0; }
  .home-v2 .wp-grid,
  .home-v2 .hub-grid,
  .home-v2 .srvstat-board,
  .home-v2 .comm-grid,
  .home-v2 .bz-grid { grid-template-columns: 1fr; }
  .home-v2 .wp-grid { grid-auto-rows: 250px; }
  .home-v2 .wp-card:nth-child(1),
  .home-v2 .wp-card:nth-child(4) { grid-column: auto; }
  .home-v2 .hub-grid { grid-auto-rows: minmax(165px, auto); }
  .home-v2 .feat,
  .home-v2 .feat-lg,
  .home-v2 .feat:nth-child(6),
  .home-v2 .feat:nth-child(7) { grid-column: auto; }
  .home-v2 .comm-card { min-height: 180px; }
  .home-v2 .vice-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-v2 .sstat-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-v2 .gw-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 180px; }
  .home-v2 .gw-item,
  .home-v2 .gw-item.gw-wide,
  .home-v2 .gw-item.gw-tall { grid-column: span 1; grid-row: span 2; }
  .home-v2 .gw-item.gw-wide { grid-column: span 2; }
  .home-v2 .gw-cta { align-items: flex-start; flex-direction: column; }
  .home-v2 .checkin { align-items: flex-start; }
  .home-v2 .ci-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .home-v2 .worlds-portal::before,
  .home-v2 .hub::before,
  .home-v2 .community::before,
  .home-v2 .gallery::before,
  .home-v2 .streams::before { animation: none; }
}
