/* AnomicFlip — home page: sub-nav, Welcome card, promo cards, games grid */
.home, .home * { box-sizing: border-box; }
.home { font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; color: #fff; }

/* sub-nav */
.subnav {
  display: flex; align-items: center; gap: 28px; height: 56px; padding: 0 28px;
  border-bottom: 1px solid #23272c;
  /* stays pinned under the top bar while you scroll */
  position: sticky; top: var(--bar-h, 91px); z-index: 40; background: #14171a;
}
.subnav a { display: inline-flex; align-items: center; gap: 8px; color: #8b8f97; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.subnav a:hover { color: #fff; }
.subnav svg { width: 17px; height: 17px; flex: none; }

.home-wrap { max-width: 1640px; margin: 0 auto; padding: 40px 40px 72px; display: grid; gap: 48px; }

/* ---------- top row ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 2.2fr) repeat(2, minmax(0, 1fr)); gap: 16px; }

.welcome {
  position: relative; min-height: 330px; padding: 34px 36px;
  background: radial-gradient(120% 140% at 85% 100%, rgba(63,214,143,.10), transparent 60%), #1e2125;
  border-radius: 14px;
}
.wc-left { position: relative; z-index: 1; width: min(100%, 56%); display: grid; gap: 14px; }
.wc-eyebrow { font-size: 15px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #8b8f97; }
.wc-name { display: flex; align-items: center; gap: 14px; min-width: 0; }
.wc-name b { font-size: 36px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-pill { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 99px; background: #2c3036; color: #c9ccd1; font-size: 16px; font-weight: 700; }
.wc-pill svg { width: 16px; height: 16px; }
.wc-bar { height: 9px; border-radius: 99px; background: #2c3036; overflow: hidden; }
.wc-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #f5c84a, #f0a93b); transition: width .5s; }
.wc-next { font-size: 16px; color: #7d8189; }
.wc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.wc-stat { background: #17191c; border-radius: 10px; padding: 14px 18px; min-width: 0; }
.wc-stat span { display: block; font-size: 15px; color: #7d8189; }
.wc-stat b { display: block; margin-top: 6px; font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.wc-btn { height: 56px; margin-top: 6px; border: 0; border-radius: 10px; font: 800 19px 'Archivo', system-ui, sans-serif; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.wc-btn.dep { background: #2bb36b; } .wc-btn.dep:hover { background: #33c477; }
.wc-btn:focus-visible { outline: 2px solid #3fd68f; outline-offset: 2px; }

.wc-avatar {
  position: absolute; right: 3%; top: 8%; bottom: 8%; width: 38%;
  background: center / contain no-repeat;
  pointer-events: none; user-select: none;
}
.wc-avatar.head { top: auto; height: 62%; bottom: 50%; transform: translateY(50%); background-position: center; border-radius: 16px; }
.wc-avatar.letter { top: auto; display: grid; place-items: center; font-size: 72px; font-weight: 800; color: rgba(63,214,143,.35); height: 100%; transform: none; bottom: 0; }


/* Torn, faded Eastdike Town Hall photo behind the avatar */
.wc-scene {
  position: absolute; right: 1.5%; top: 9%; bottom: 9%; width: 42%;
  transform: rotate(-2deg); pointer-events: none; user-select: none;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
}
.wc-scene i { position: absolute; display: block; }
.wc-scene .paper { inset: 0; background: #d8d0bf; opacity: .22; clip-path: polygon(1.62% 0%, 3.25% 3.85%, 2.68% 7.69%, 0.29% 11.54%, 0.19% 15.38%, 0.35% 19.23%, 2.12% 23.08%, 0.62% 26.92%, 3.14% 30.77%, 2.89% 34.62%, 4.88% 38.46%, 4.29% 42.31%, 0.72% 46.15%, 1.54% 50%, 0.9% 53.85%, 3.19% 57.69%, 2.74% 61.54%, 0.3% 65.38%, 3.4% 69.23%, 1.57% 73.08%, 2.27% 76.92%, 3.97% 80.77%, 1.22% 84.62%, 2.63% 88.46%, 3.65% 92.31%, 4.9% 96.15%, 2.09% 100%, 96.21% 100%, 99.41% 96.15%, 98.56% 92.31%, 95.62% 88.46%, 97.13% 84.62%, 96.51% 80.77%, 98.5% 76.92%, 97.07% 73.08%, 97.86% 69.23%, 98.97% 65.38%, 99.69% 61.54%, 98.14% 57.69%, 97.09% 53.85%, 95.92% 50%, 99.41% 46.15%, 98.55% 42.31%, 99.77% 38.46%, 98.02% 34.62%, 95.26% 30.77%, 98.88% 26.92%, 95.87% 23.08%, 99.55% 19.23%, 97.83% 15.38%, 97.46% 11.54%, 98.17% 7.69%, 99.64% 3.85%, 99.25% 0%); }
.wc-scene .photo {
  inset: 5px 6px; clip-path: polygon(2.71% 0%, 5.55% 3.85%, 3.05% 7.69%, 1.11% 11.54%, 3.78% 15.38%, 0.56% 19.23%, 0.54% 23.08%, 4.16% 26.92%, 5.89% 30.77%, 3.92% 34.62%, 0.94% 38.46%, 3.17% 42.31%, 1.14% 46.15%, 0.18% 50%, 2.64% 53.85%, 3.11% 57.69%, 3% 61.54%, 2.74% 65.38%, 5.99% 69.23%, 5.04% 73.08%, 1.89% 76.92%, 1.73% 80.77%, 4.6% 84.62%, 5.08% 88.46%, 5.75% 92.31%, 0% 96.15%, 5.46% 100%, 97.18% 100%, 98.74% 96.15%, 94.92% 92.31%, 97.68% 88.46%, 97.6% 84.62%, 99.58% 80.77%, 98.62% 76.92%, 95.75% 73.08%, 94.03% 69.23%, 98.33% 65.38%, 96.03% 61.54%, 96.16% 57.69%, 94.95% 53.85%, 97.22% 50%, 98.55% 46.15%, 99.64% 42.31%, 99.91% 38.46%, 96.31% 34.62%, 94.21% 30.77%, 99.75% 26.92%, 95.14% 23.08%, 98.18% 19.23%, 95.24% 15.38%, 96.93% 11.54%, 96.48% 7.69%, 97.21% 3.85%, 96.64% 0%);
  background: url('/wc-bg.webp') center 40% / cover no-repeat;
  filter: saturate(.7) brightness(.9) contrast(1.05);
  opacity: .7;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
.wc-scene .photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(63,214,143,.10), rgba(20,23,26,.35)); }
.wc-avatar { z-index: 1; }

/* promo cards */
.promo {
  position: relative; overflow: hidden; min-height: 330px; padding: 24px;
  border-radius: 14px; text-decoration: none; color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform .2s ease, box-shadow .2s ease;
}
.promo:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(0,0,0,.45); }
.promo:focus-visible { outline: 2px solid #3fd68f; outline-offset: 3px; }
.promo .tag { align-self: flex-start; padding: 8px 12px; border-radius: 7px; font-size: 15px; font-weight: 800; color: #0d1f16; background: #3fd68f; }
.promo .art { position: absolute; right: -14px; top: 30px; width: 62%; height: auto; opacity: .9; pointer-events: none; }
.promo h3 { position: relative; margin: 0; font-size: 36px; font-weight: 900; font-style: italic; letter-spacing: -.5px; text-transform: uppercase; text-shadow: 0 3px 0 rgba(0,0,0,.35); }
.promo p { position: relative; margin: 6px 0 0; min-height: 2.6em; font-size: 14px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: rgba(255,255,255,.8); }

/* Torn photo scraps on the promo cards (ripped along the bottom, unlike the Welcome card's sides) */
.promo .scrap {
  position: absolute; left: 7%; right: 7%; top: 13%; height: 56%;
  pointer-events: none; user-select: none;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.45));
  transition: transform .25s ease;
}
.p-referral .scrap { transform: rotate(2deg); }
.p-discord  .scrap { transform: rotate(-2.5deg); }
.p-referral:hover .scrap { transform: rotate(3deg) scale(1.02); }
.p-discord:hover  .scrap { transform: rotate(-3.5deg) scale(1.02); }
.promo .scrap i { position: absolute; display: block; }
.promo .scrap .paper { inset: 0; background: #d8d0bf; opacity: .22; clip-path: polygon(0.59% 0%, 98.64% 0%, 99.08% 6.14%, 98.49% 12.29%, 98.44% 18.43%, 99.84% 24.57%, 99.97% 30.71%, 97.91% 36.86%, 99.35% 43.0%, 99.41% 49.14%, 97.51% 55.29%, 98.82% 61.43%, 97.91% 67.57%, 98.81% 73.71%, 98.4% 79.86%, 100.0% 98.64%, 95.45% 94.29%, 90.91% 92.19%, 86.36% 95.29%, 81.82% 93.33%, 77.27% 93.96%, 72.73% 99.42%, 68.18% 93.18%, 63.64% 94.68%, 59.09% 97.29%, 54.55% 99.72%, 50.0% 92.21%, 45.45% 95.75%, 40.91% 93.53%, 36.36% 92.09%, 31.82% 93.57%, 27.27% 91.71%, 22.73% 96.45%, 18.18% 92.79%, 13.64% 96.0%, 9.09% 91.58%, 4.55% 92.09%, 0.0% 99.12%, 0.34% 79.86%, 0.54% 73.71%, 2.41% 67.57%, 1.09% 61.43%, 1.57% 55.29%, 0.75% 49.14%, 1.27% 43.0%, 0.96% 36.86%, 0.88% 30.71%, 1.46% 24.57%, 1.46% 18.43%, 2.26% 12.29%, 1.7% 6.14%); }
.promo .scrap .photo {
  inset: 5px 5px 7px; clip-path: polygon(1.87% 0%, 97.77% 0%, 97.61% 6.14%, 97.17% 12.29%, 97.78% 18.43%, 97.23% 24.57%, 99.91% 30.71%, 98.6% 36.86%, 97.17% 43.0%, 98.05% 49.14%, 97.3% 55.29%, 99.66% 61.43%, 98.59% 67.57%, 99.26% 73.71%, 98.37% 79.86%, 100.0% 92.54%, 95.45% 99.83%, 90.91% 97.18%, 86.36% 96.37%, 81.82% 88.09%, 77.27% 90.05%, 72.73% 97.93%, 68.18% 89.64%, 63.64% 98.2%, 59.09% 91.97%, 54.55% 98.35%, 50.0% 99.98%, 45.45% 88.67%, 40.91% 97.28%, 36.36% 97.2%, 31.82% 87.23%, 27.27% 88.66%, 22.73% 96.24%, 18.18% 87.5%, 13.64% 92.99%, 9.09% 91.19%, 4.55% 97.34%, 0.0% 87.77%, 2.07% 79.86%, 2.9% 73.71%, 2.68% 67.57%, 0.9% 61.43%, 1.08% 55.29%, 0.5% 49.14%, 0.44% 43.0%, 0.2% 36.86%, 0.9% 30.71%, 1.81% 24.57%, 0.01% 18.43%, 2.03% 12.29%, 1.01% 6.14%);
  background: center / cover no-repeat;
  filter: saturate(.75) brightness(.85) contrast(1.05); opacity: .7;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
.promo .scrap .photo::after { content: ''; position: absolute; inset: 0; }
.p-referral .scrap .photo { background-image: url('/promo-referrals.webp'); }
.p-referral .scrap .photo::after { background: linear-gradient(160deg, rgba(63,214,143,.14), rgba(20,23,26,.35)); }
.p-discord  .scrap .photo { background-image: url('/promo-discord.webp'); }
.p-discord  .scrap .photo::after { background: linear-gradient(160deg, rgba(88,101,242,.22), rgba(20,23,26,.35)); }
.promo .tag, .promo .art { z-index: 1; }
.promo .tag { position: relative; }
.promo .art { width: 46%; right: 2%; top: 22%; filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)); }
@media (prefers-reduced-motion: reduce) { .promo .scrap { transition: none; } }

.p-race     { background: linear-gradient(160deg, #263a31, #1c2621); }
.p-race .art { color: #f5c84a; }
.p-referral { background: linear-gradient(160deg, #2c3a2a, #1d241c); }
.p-referral .art-referrals {
  display: block; aspect-ratio: 453 / 545; width: 44%; top: 16%; right: -5%;
  background: url('/referrals-icon.png') center / contain no-repeat;
  user-select: none; -webkit-user-drag: none;
}
.p-discord  { background: linear-gradient(160deg, #2a2f4a, #1d2030); }
.p-discord .tag { background: #5865f2; color: #fff; }
.p-discord .art-discord {
  display: block; aspect-ratio: 360 / 280; top: 26%;
  background: url('/discord-icon.png') center / contain no-repeat;
  user-select: none; -webkit-user-drag: none;
}

/* ---------- games ---------- */
.sec-head { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; font-size: 30px; font-weight: 800; }
.sec-head svg { width: 30px; height: 30px; color: #8b8f97; }
.games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 22px 18px; }
.game { display: grid; gap: 10px; text-decoration: none; color: inherit; }
.game-card {
  display: block; border-radius: 12px; overflow: hidden; background: #1f5e45;
  aspect-ratio: 283 / 382; max-width: 100%;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.game-card img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.game:hover .game-card, .game:focus-visible .game-card { transform: translateY(-8px); box-shadow: 0 16px 30px rgba(0,0,0,.5); filter: brightness(1.06); }
.game:focus-visible { outline: none; }
.game:focus-visible .game-card { outline: 2px solid #3fd68f; outline-offset: 2px; }
.game-playing { display: flex; align-items: center; gap: 9px; padding-left: 2px; font-size: 17px; font-weight: 500; color: #8b8f97; }
.game-playing .dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #2ee66b; box-shadow: 0 0 8px rgba(46,230,107,.6); }
.game-playing b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 1300px) {
  .hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .welcome { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .home-wrap { padding: 24px 16px 48px; gap: 32px; }
  .subnav { padding: 0 16px; gap: 20px; }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .promo { min-height: 150px; }
  .promo .art { width: 38%; top: 14px; }
  .wc-left { width: 100%; }
  .wc-avatar, .wc-scene { display: none; }
  .games-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px 12px; }
  .welcome, .promo { min-height: 0; }
  .wc-name b { font-size: 28px; }
  .wc-stat b { font-size: 20px; }
  .promo { min-height: 170px; }
}
@media (prefers-reduced-motion: reduce) { .promo, .game-card, .wc-bar i { transition: none; } }