@font-face {
  font-family: Unbounded;
  src: url("../assets/fonts/Unbounded-Variable.ttf") format("truetype");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Pixel;
  src: url("../assets/fonts/PressStart2P-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: Russo;
  src: url("../assets/fonts/RussoOne-Regular.ttf") format("truetype");
  font-display: swap;
}
:root {
  color-scheme: dark;
  --bg: #101114;
  --surface: #1a1b20;
  --text: #f3f0eb;
  --muted: #aaa7af;
  --accent-soft: #d7b28d;
  --orange: #ffad61;
  --border: #303137;
  --wordmark: Unbounded, Russo, "Segoe UI", sans-serif;
  --pixel: Pixel, monospace;
  --display: Russo, "Segoe UI", sans-serif;
  --body: "Segoe UI", Arial, sans-serif;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}
body {
  margin: 0;
  min-width: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 var(--body);
  letter-spacing: 0;
}
body.modal-open {
  overflow: hidden;
}
button,
input {
  font: inherit;
}
button,
a,
label {
  -webkit-tap-highlight-color: transparent;
}
button,
a {
  touch-action: manipulation;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: wait;
  opacity: 0.65;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible,
.file-control:focus-within {
  outline: 2px solid var(--orange);
  outline-offset: 6px;
}
img {
  max-width: 100%;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.2;
}
i[data-lucide],
.lucide {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  stroke-width: 1.7;
  vertical-align: middle;
}
.hidden {
  display: none !important;
}
[hidden] { display: none !important; }
.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 16px;
  padding: 8px 16px;
  background: var(--accent-soft);
  color: #111;
  transform: translateY(-150%);
}
.skip-link:focus {
  transform: none;
}

/* A wide graphite frame with warm accents around the navigation. */
.site-header {
  position: relative;
  z-index: 20;
  inset: auto;
  width: calc(100% - 40px);
  max-width: 1440px;
  margin: 12px auto 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 10px 20px;
  border: 1px solid #ffffff12;
  border-radius: 12px;
  background: linear-gradient(110deg, #1c1c22f5, #151519f5 65%);
  box-shadow: inset 0 1px #ffffff04, 0 12px 32px #00000026;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 800 16px/1.25 var(--wordmark);
  letter-spacing: -.06em;
  white-space: nowrap;
}
.brand img {
  width: 28px;
  height: 32px;
  image-rendering: pixelated;
  object-fit: contain;
  filter: drop-shadow(0 3px 4px #0005);
}
.brand-accent { color: var(--orange); }
.main-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.status-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--accent-soft);
  flex-shrink: 0;
}
.nav-button,
.primary-action,
.secondary-action,
.purchase-button,
.inline-control button,
.close-button {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 18px;
  border: 1px solid #35333d;
  border-radius: 5px;
  background: #24242c;
  color: var(--text);
  box-shadow: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  transition: background .18s, border-color .18s, color .18s, transform .18s;
}
.nav-button {
  min-width: 0;
  min-height: 40px;
  padding: 10px 16px;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #b7b3be;
  font-size: 12px;
  white-space: nowrap;
}
.nav-button .lucide,
.nav-button i[data-lucide] {
  display: block;
  width: 16px;
  height: 16px;
  color: #827e8c;
  stroke-width: 1.8;
}
.header-play { justify-self: end; min-width: 148px; border-color: #ffc78e; background: linear-gradient(135deg, #ffc383, #ffad61); color: #302011; font-weight: 700; box-shadow: inset 0 1px #ffe5c18c, 0 3px 12px #ff9b3712; }
.header-play .lucide { color: #553719; }
.header-play:hover, .header-play:focus-visible { border-color: #ffe1b6; background: #ffc48c; color: #302011; }
.vine-button::before,
.vine-button::after { content: none; }
.nav-button:hover,
.nav-button:focus-visible {
  border-color: #ffffff0e;
  background: #ffffff07;
  color: #fff6e5;
  transform: translateY(-1px);
}
.primary-action:hover,
.primary-action:focus-visible,
.secondary-action:hover,
.secondary-action:focus-visible,
.purchase-button:hover,
.purchase-button:focus-visible {
  border-color: #e6b077;
  background-color: #323038;
  color: #fff5df;
  transform: translateY(-2px);
  box-shadow: none;
}
.nav-button:active,
.primary-action:active,
.secondary-action:active,
.purchase-button:active { transform: translateY(1px); }
.primary-action,
.secondary-action {
  min-height: 54px;
  padding: 14px 24px;
  font-size: 14px;
  font-weight: 650;
}
.primary-action {
  min-width: 200px;
  color: #21190f;
  background: #ffb76c;
  border-color: #ffc78e;
  box-shadow: inset 0 1px #ffdfae;
}
.primary-action:hover,
.primary-action:focus-visible {
  color: #21190f;
  background: #ffc184;
  border-color: #ffd5aa;
}
.primary-action .lucide:last-child { margin-left: 8px; }
.secondary-action {
  min-width: 180px;
  background: #17171dd9;
  border-color: #ffffff24;
  color: #e0dce4;
}
.secondary-action .lucide { color: var(--orange); }

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 480px;
  height: clamp(480px, calc(100svh - 190px), 620px);
  padding: 56px 24px 60px;
  overflow: hidden;
  background: #141319;
}
.page-home .hero {
  height: auto;
  min-height: max(620px, 100svh);
  padding-top: 112px;
  padding-bottom: 100px;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: url("../assets/kaifmine-halloween-hero.png") center 54% / cover no-repeat;
}
.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, #090e1066, #0b10142e 30%, #0b10145c 70%, #101114),
    radial-gradient(ellipse at 50% 47%, #0c10158c 5%, transparent 67%);
}
.hanging-vine { display: none; }
.hero-content {
  width: min(860px, 100%);
  text-align: center;
  animation: appear .7s ease-out both;
}
.hero-logo {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 32px auto 12px;
  padding-top: 14px;
}
.hero-logo h1 {
  display: flex;
  justify-content: center;
  font: 900 clamp(46px, 5.4vw, 76px)/1.12 var(--wordmark);
  letter-spacing: -.075em;
  white-space: nowrap;
  transform: skewX(-5deg);
  padding: 0 .055em .08em 0;
  filter: drop-shadow(0 8px 18px #0005);
}
.hero-logo h1 span {
  background: linear-gradient(180deg, #fffef6 18%, #e2e6da 85%);
  color: #f7f5ec;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
.hero-logo h1 span:last-child {
  background-image: linear-gradient(180deg, #ffddb0 8%, #ffb96d 48%, #f48b46 100%);
  filter: drop-shadow(0 0 18px #ff9c3020);
}
.pumpkin-track {
  position: absolute;
  z-index: 2;
  top: -42px;
  left: 8%;
  right: 8%;
  height: 70px;
  pointer-events: none;
}
.pumpkin-runner {
  position: absolute;
  left: 50%;
  width: 0;
  animation: pumpkin-travel 12s ease-in-out infinite alternate;
}
.logo-pumpkin {
  display: block;
  object-fit: contain;
  max-width: none;
  margin-left: -31px;
  transform-origin: 50% 90%;
  animation: pumpkin-hop 1.8s ease-in-out infinite;
  filter: drop-shadow(0 5px 0 #0b0b1099) drop-shadow(0 0 18px #ff9d2930);
  image-rendering: pixelated;
}
@keyframes pumpkin-travel {
  from { left: 0; }
  to { left: 100%; }
}
@keyframes pumpkin-hop {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(var(--pumpkin-jump, -12px)) rotate(6deg); }
}
.hero-copy {
  font-size: 16px;
  line-height: 1.65;
  color: #e3e3d8;
  text-shadow: 0 2px 12px #0008;
  margin: 0 auto 18px;
  max-width: 500px;
}
.hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
}
.hero-play {
  min-width: 228px;
  min-height: 52px;
  padding: 8px 16px 8px 9px;
  gap: 14px;
  border: 1px solid #ffdcac;
  border-radius: 10px;
  background: linear-gradient(135deg, #ffd393, #ffad5b 70%);
  color: #302011;
  box-shadow: inset 0 1px #fff0cfb3, 0 10px 32px #ff9d3a24, 0 5px 18px #0003;
  font-size: 14px;
  font-weight: 750;
}
.hero-play-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid #5b35191a;
  border-radius: 7px;
  background: #4b2b0b0d;
}
.hero-play-icon .lucide { width: 18px; height: 18px; fill: #4b2b0b12; }
.hero-play > .lucide:last-child { margin-left: auto; transition: transform .2s; }
.hero-play:hover,
.hero-play:focus-visible {
  border-color: #ffe9c7;
  background: linear-gradient(135deg, #ffdfa9, #ffbb79 70%);
  color: #302011;
  box-shadow: inset 0 1px #fff4db, 0 14px 38px #ff9d3a35, 0 7px 18px #0003;
}
.hero-play:hover > .lucide:last-child { transform: translateX(3px); }
.hero-actions > .hero-auth {
  min-width: 208px;
  min-height: 52px;
  padding: 8px 20px 8px 9px;
  gap: 13px;
  border: 1px solid #ffc18445;
  border-radius: 10px;
  background: linear-gradient(135deg, #29212bef, #17151eee);
  color: #f4d6b5;
  font-size: 13px;
  font-weight: 650;
  box-shadow: inset 0 1px #ffffff08, 0 5px 18px #0003;
}
.hero-auth-icon { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border: 1px solid #ffc18425; border-radius: 7px; background: #ffb8730a; color: #ffc184; }
.hero-auth-icon .lucide { width: 17px; height: 17px; }
.hero-actions > .hero-auth:hover, .hero-actions > .hero-auth:focus-visible { border-color: #ffc18490; background: linear-gradient(135deg, #3b2a30f5, #211b23f5); color: #ffe6ca; box-shadow: inset 0 1px #ffffff0d, 0 8px 24px #0004; }
.opening-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  color: #bdb7c3;
  font-size: 12px;
  letter-spacing: .025em;
}
.opening-status .lucide { width: 14px; height: 14px; color: #a29ba9; }
.hero-bottom {
  position: absolute;
  bottom: 28px;
  left: max(32px, calc((100% - 1384px) / 2));
  right: max(32px, calc((100% - 1384px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #aaa5b1;
  font-size: 9px;
  letter-spacing: .08em;
}
.hero-bottom a {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid #ffffff18;
  border-radius: 5px;
}
.hero-bottom a:hover { border-color: var(--orange); color: var(--orange); }
.hero-bottom .lucide { color: inherit; }

.world-strip {
  border-top: 1px solid #ffffff18;
  border-bottom: 1px solid #ffffff18;
  background: #17171c;
}
.world-strip-inner {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 24px;
  gap: 28px;
}
.world-strip article {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-width: 0;
  border-right: 1px solid #35333d;
}
.world-strip article:last-child {
  border: 0;
}
.world-strip article > div {
  min-width: 0;
  overflow-wrap: anywhere;
}
.world-strip img {
  flex-shrink: 0;
  image-rendering: pixelated;
  filter: drop-shadow(3px 4px 0 #080c09);
  object-fit: contain;
}
.world-strip h2 {
  font-size: 15px;
  margin-bottom: 5px;
}
.world-strip p {
  font-size: 12px;
  color: var(--muted);
}

.content-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 52px 24px;
  scroll-margin-top: 20px;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 32px;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-soft);
  font-size: 10px;
  font-weight: 650;
  margin-bottom: 14px;
}
.eyebrow .lucide {
  width: 14px;
  height: 14px;
}
.section-heading :is(h1, h2),
.rules-intro :is(h1, h2) {
  font-size: 36px;
  line-height: 1.35;
}
.section-heading :is(h1, h2) span,
.rules-intro :is(h1, h2) span,
.join-band h2 span {
  color: var(--orange);
}
.section-note {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.8;
}
.stone-panel {
  position: relative;
  background: #1b1b22;
  border: 1px solid #ffffff1f;
  border-radius: 8px;
  box-shadow: none;
}

.tile-grid,
.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.offer-tile {
  padding: 26px 26px 24px;
  overflow: visible;
  text-align: center;
  background: linear-gradient(140deg, #29263270, #1b1b22 60%);
}
.offer-tile::before { content: none; }

.offer-number {
  display: block;
  text-align: left;
  color: #aaa5b1;
  font: 9px/1.5 var(--display);
}
.offer-badge {
  position: absolute;
  top: -13px;
  right: 20px;
  padding: 4px 8px;
  font: 8px/1.5 var(--display);
  background: #c98436;
  color: #171811;
  z-index: 1;
}
.offer-tile.featured {
  border-color: #9c713d;
  background: linear-gradient(140deg, #4e3b2350, #1c1b22 60%);
}
.offer-tile.featured::before { content: none; }

.coin-art {
  position: relative;
  display: grid;
  place-items: center;
  height: 130px;
  margin: 8px 0 14px;
}
.pixel-coin {
  position: relative;
  z-index: 2;
  display: block;
  width: 96px;
  height: 96px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(3px 5px 0 #080d09);
}
.currency-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  object-fit: contain;
  image-rendering: pixelated;
  vertical-align: middle;
}
.coin-back,
.coin-third {
  position: absolute;
  left: calc(50% - 24px);
  top: 10px;
  z-index: 0;
  filter: brightness(0.78);
}
.coin-third {
  left: calc(50% - 70px);
  top: 6px;
  filter: brightness(0.9);
}
.coin-shadow {
  position: absolute;
  bottom: 11px;
  width: 92px;
  height: 8px;
  background: #0e0e13;
  box-shadow: 8px 5px #0c100c44;
}
.offer-tile h3 {
  font: 32px/1.5 var(--display);
  margin-bottom: 8px;
}
.offer-tile h3 span {
  color: var(--orange);
  font-size: 21px;
}
.offer-tile p {
  font-size: 13px;
  color: var(--muted);
  min-height: 42px;
  max-width: 250px;
  margin: auto;
  line-height: 1.6;
}
.purchase-button {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 24px;
  background: #302b32;
  border-color: #35333d;
  min-height: 47px;
  padding-left: 20px;
  font-family: var(--display);
  font-size: 17px;
}
.featured .purchase-button {
  background: #6b4c28;
  border-color: #b48a4d;
}
.purchase-button::before {
  width: 27px;
  height: 42px;
}
.purchase-button::after {
  width: 20px;
  height: 31px;
}
.section-footnote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
  font-size: 11px;
  color: #aaa5b1;
}
.section-footnote .lucide {
  width: 13px;
  height: 13px;
  color: var(--accent-soft);
}
.balance-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 32px;
}
.balance-footer .section-footnote {
  margin-top: 0;
  text-align: left;
}
.balance-footer .secondary-action {
  min-height: 46px;
  font-size: 13px;
}
.profile-topup {
  margin-top: 24px;
  font-size: 13px;
}

.news-section {
  border-bottom: 1px solid #35333d;
}
.news-section .section-heading > button {
  flex-shrink: 0;
}
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.news-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 26px;
}
.news-date {
  color: #aaa5b1;
  font-size: 11px;
}
.news-card h3 {
  margin: 15px 0;
  font-size: 22px;
  overflow-wrap: anywhere;
}
.news-excerpt {
  flex: 1;
  margin-bottom: 24px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.news-card .text-action {
  align-self: flex-start;
}
.news-cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  margin-bottom: 20px;
  background: #121217;
}
.news-gallery {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}
.news-image-link {
  display: block;
  min-width: 0;
}
.news-full-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: contain;
  background: #121217;
}
.news-image-unavailable {
  padding: 24px 12px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.news-image-editor {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.news-field-label {
  color: #e0dce4;
  font-size: 12px;
}
.news-image-previews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
}
.news-image-preview {
  position: relative;
  min-width: 0;
  margin: 0;
  border: 1px solid #35333d;
  background: #121217;
}
.news-image-preview img {
  display: block;
  width: 100%;
  height: 128px;
  object-fit: contain;
}
.news-image-preview .news-icon-button {
  position: absolute;
  top: 5px;
  right: 5px;
  background: #1a191fed;
}
.news-image-editor:has(input:disabled) .file-control {
  opacity: 0.65;
  cursor: wait;
}
.news-state {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  min-height: 150px;
  color: var(--muted);
  font-size: 14px;
  border-block: 1px solid #35333d;
}
.news-state > .lucide {
  color: #bdb7c3;
}
.news-more {
  display: flex;
  margin: 30px auto 0;
}
#newsModal .modal-panel {
  width: min(720px, 100%);
}
.news-full-text {
  margin: 24px 0 30px;
  line-height: 1.9;
  font-size: 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
#newsAdminModal .modal-panel {
  width: min(1000px, 100%);
}
.news-admin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
}
#newsForm h3 {
  font-size: 18px;
}
#newsForm textarea {
  display: block;
  width: 100%;
  min-height: 190px;
  max-height: 400px;
  resize: vertical;
  padding: 14px;
  border: 1px solid #35333d;
  border-bottom: 2px solid #35333d;
  border-radius: 0;
  background: #121217;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1.7;
}
#newsForm textarea:focus {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
.news-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}
.news-admin-posts {
  min-width: 0;
}
#newsAdminList {
  max-height: 430px;
  overflow: auto;
  padding-right: 4px;
}
.news-admin-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #35333d;
  padding-bottom: 12px;
}
.news-admin-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
}
.news-admin-tabs button.active {
  background: #302b32;
  color: #e0dce4;
  border-color: #35333d;
}
.news-admin-tabs .lucide {
  width: 14px;
  height: 14px;
}
.news-admin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0;
  border-bottom: 1px solid #35333d;
}
.news-admin-row-text {
  min-width: 0;
}
.news-admin-row h3 {
  font-family: inherit;
  font-size: 14px;
  overflow-wrap: anywhere;
  margin-bottom: 6px;
}
.news-row-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.news-icon-button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 36px;
  padding: 7px;
  color: #bdb7c3;
  background: #302b32;
  border: 1px solid #35333d;
  border-radius: 0;
}
.news-icon-button .lucide {
  width: 16px;
  height: 16px;
}
.news-icon-button:hover {
  color: var(--orange);
  border-color: var(--orange);
}
.news-admin-empty {
  padding: 24px 0;
  color: var(--muted);
  font-size: 13px;
}
#newsAdminMessage {
  margin-top: 20px;
}
.shop-section {
  border-top: 1px solid #35333d;
}
.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
  padding-bottom: 20px;
  border-bottom: 1px solid #35333d;
}
.shop-category {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: #e0dce4;
  font-size: 13px;
}
.shop-category span {
  font-size: 10px;
  opacity: 0.65;
}
.privilege-fan {
  isolation: isolate;
  max-width: 1000px;
  margin: 0 auto;
  padding: 54px 28px 72px;
  gap: 0;
}
.privilege-fan .product-card {
  --fan-angle: 0deg;
  --fan-offset: -12px;
  z-index: 2;
  min-width: 0;
  margin-inline: 0;
  transform-origin: 50% 90%;
  transform: translateY(var(--fan-offset)) rotate(var(--fan-angle));
}
.privilege-fan .cool-privilege {
  --fan-angle: -7deg;
  --fan-offset: 26px;
  z-index: 1;
}
.privilege-fan .kaif-privilege {
  --fan-angle: 7deg;
  --fan-offset: 26px;
  z-index: 1;
}
.privilege-fan .product-card:hover,
.privilege-fan .product-card:focus-within {
  z-index: 3;
  transform: translateY(-28px) rotate(0deg);
}
.shop-currency {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: #aaa5b1;
}
.shop-currency .lucide {
  color: var(--orange);
  width: 14px;
  height: 14px;
}
.product-card {
  --catalog-accent: #82be88;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition:
    border-color 0.25s,
    box-shadow 0.25s,
    transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cool-privilege {
  --catalog-accent: #66d8d2;
}
.featured-privilege {
  --catalog-accent: #ffa24a;
  border-color: #ad793c;
}
.featured-privilege .product-tag {
  border-color: #e4a95877;
  color: #ffd291;
  background: #3e291dd9;
}
.product-card:hover,
.product-card:focus-within {
  border-color: var(--catalog-accent);
  box-shadow:
    0 10px 24px #0005,
    0 0 24px color-mix(in srgb, var(--catalog-accent) 24%, transparent);
  transform: translateY(-6px);
}
.product-art {
  position: relative;
  overflow: hidden;
  height: 190px;
  display: grid;
  place-items: center;
  border-bottom: 1px solid #35333d;
  background-color: #23212a;
  background-image:
    linear-gradient(
      45deg,
      #00000012 25%,
      transparent 25%,
      transparent 75%,
      #00000012 75%
    ),
    linear-gradient(
      45deg,
      #00000012 25%,
      transparent 25%,
      transparent 75%,
      #00000012 75%
    );
  background-position:
    0 0,
    10px 10px;
  background-size: 20px 20px;
}
.pumpkin-art {
  background-color: #322b20;
}
.diamond-art {
  background-color: #25212e;
}
.product-art::after {
  content: "";
  position: absolute;
  bottom: 30px;
  left: calc(50% - 42px);
  width: 84px;
  height: 7px;
  background: #0d0c1266;
}
.product-art::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -40%;
  pointer-events: none;
  background: linear-gradient(
    110deg,
    transparent 36%,
    #ffffff21 49%,
    transparent 62%
  );
  transform: translateX(-110%);
}
.product-art img {
  position: relative;
  z-index: 1;
  image-rendering: pixelated;
  object-fit: contain;
  filter: drop-shadow(6px 8px 0 #080b0a66);
  transition: transform 0.25s;
}
.product-card:hover .product-art img,
.product-card:focus-within .product-art img {
  animation: catalog-item-float 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 12px var(--catalog-accent))
    drop-shadow(5px 7px 0 #080b0a66);
}
.product-card:hover .product-art::before,
.product-card:focus-within .product-art::before {
  animation: catalog-shine 0.85s ease-out both;
}
@keyframes catalog-item-float {
  0%,
  100% {
    transform: translateY(-3px) rotate(-3deg);
  }
  50% {
    transform: translateY(-11px) rotate(3deg);
  }
}
@keyframes catalog-shine {
  to {
    transform: translateX(110%);
  }
}
.product-tag {
  position: absolute;
  top: 15px;
  left: 18px;
  color: #bdb7c3;
  font: 8px/1.5 var(--display);
  padding: 4px 7px;
  border: 1px solid #ffffff1f;
  background: #0f0e1455;
}
.product-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px;
}
.product-kind {
  font-size: 9px;
  color: #aaa5b1;
  margin-bottom: 7px;
}
.product-body h3 {
  font-size: 25px;
  margin-bottom: 13px;
}
.product-body > p:not(.product-kind) {
  flex: 1;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
  min-height: 46px;
}
.product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  margin-top: 21px;
  padding: 15px 0 0;
  border-top: 1px solid #35333d;
  color: #e0dce4;
}
.product-price {
  flex-shrink: 0;
  font: 23px/1 var(--display);
}
.product-price small {
  font-size: 12px;
  color: #aaa5b1;
}
.product-details-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid #35333d;
  background: #302b32;
  color: #bdb7c3;
  font-size: 12px;
  line-height: 1.4;
  transition:
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
}
.product-details-button:hover,
.product-details-button:focus-visible {
  border-color: var(--catalog-accent);
  color: var(--catalog-accent);
  box-shadow: 0 0 15px
    color-mix(in srgb, var(--catalog-accent) 20%, transparent);
}
.product-details-button .lucide {
  width: 15px;
  height: 15px;
}

.rules-section {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 65px;
  border-top: 1px solid #35333d;
}
.rules-intro :is(h1, h2) {
  font-size: 32px;
  margin-bottom: 20px;
}
.rules-intro > p:not(.eyebrow) {
  font-size: 14px;
  color: var(--muted);
}
.rules-intro > img {
  image-rendering: pixelated;
  display: block;
  margin-top: 26px;
  filter: drop-shadow(4px 5px #080d09);
}
.rules-list {
  border-top: 1px solid #35333d;
}
.rules-list details {
  border-bottom: 1px solid #35333d;
}
.rules-list summary {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--display);
  font-size: 16px;
}
.rules-list summary::-webkit-details-marker {
  display: none;
}
.rule-number {
  color: #777180;
  font: 10px/1.5 var(--pixel);
}
.rules-list summary > .lucide {
  margin-left: auto;
  color: #bdb7c3;
  width: 16px;
  height: 16px;
  transition: transform 0.2s;
}
.rules-list details[open] summary > .lucide {
  transform: rotate(45deg);
  color: var(--orange);
}
.rules-list details[open] summary {
  color: #e0dce4;
}
.rule-clauses {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0 0 24px 0;
  list-style: none;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}
.rule-clauses li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 5px;
  align-items: baseline;
  overflow-wrap: anywhere;
}
.clause-number {
  color: var(--accent-soft);
  font-family: var(--display);
  font-size: 12px;
}
.rules-penalties {
  grid-column: 1 / -1;
  min-width: 0;
  padding-top: 30px;
  border-top: 1px solid #35333d;
}
.rules-penalties h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 23px;
}
.rules-penalties h3 .lucide {
  width: 22px;
  height: 22px;
  color: var(--orange);
}
.penalty-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
  margin: 20px 0 0;
}
.penalty-list > div {
  padding: 18px 0;
  border-bottom: 1px solid #35333d;
}
.penalty-list dt {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 13px;
}
.penalty-list dd {
  margin: 0;
  color: #e0dce4;
  font-size: 15px;
}
.penalty-list > div:last-child dd {
  color: var(--orange);
}
.join-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: 18px;
  padding: 45px max(24px, calc((100% - 1152px) / 2));
  border-top: 1px solid #35333d;
  border-bottom: 1px solid #35333d;
  background: #1c1b22;
}
.join-band .eyebrow {
  font-size: 9px;
  margin-bottom: 7px;
}
.join-band h2 {
  font-size: 27px;
}
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: 1200px;
  margin: auto;
  padding: 28px 24px;
}
.site-footer p {
  font-size: 11px;
  color: #aaa5b1;
  text-align: center;
}
.site-footer p span {
  font-size: 10px;
  color: #777180;
}
.site-footer > a:last-child {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #aaa5b1;
}
.site-footer .brand {
  font-size: 17px;
}

.profile-layout {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 24px;
}
.skin-panel,
.profile-info {
  padding: 26px;
}
.panel-label {
  font-size: 10px;
  font-family: var(--display);
  color: #bdb7c3;
  padding-bottom: 17px;
  border-bottom: 1px solid #35333d;
}
.skin-preview {
  position: relative;
  height: 320px;
  margin: 8px 0 12px;
  overflow: hidden;
}
.skin-preview > canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  cursor: grab;
  outline-offset: -3px;
  opacity: 0;
}
.skin-preview[data-state="ready"] > canvas {
  opacity: 1;
}
.skin-preview > canvas:active {
  cursor: grabbing;
}
.skin-viewer-status {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  color: var(--muted);
  text-align: center;
  font-size: 12px;
}
.skin-preview[data-state="ready"] .skin-viewer-status {
  display: none;
}
.skin-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-bottom: 18px;
}
.skin-tool {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  padding: 6px;
  color: #bdb7c3;
  border: 1px solid #35333d;
  background: #24232b;
  border-radius: 0;
  box-shadow: inset 0 -2px #0f1b0a66;
  transition:
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
}
.skin-tool[aria-pressed="true"] {
  color: #e0dce4;
  border-color: #35333d;
  background: #39303a;
}
.skin-tool:hover:not(:disabled) {
  color: var(--orange);
  border-color: var(--orange);
  box-shadow: 0 0 13px #ff9c4033;
}
.skin-tool:disabled {
  cursor: default;
  opacity: 0.45;
}
.skin-tool .lucide {
  width: 16px;
  height: 16px;
}
.skin-tool > span {
  display: grid;
  place-items: center;
}
.skin-reset {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 8px;
  color: #bcaa87;
}
.skin-reset:disabled {
  cursor: default;
  color: var(--muted);
  opacity: 0.4;
}
.skin-reset:hover:not(:disabled) {
  color: var(--orange);
}
.file-control {
  position: relative;
  display: block;
  cursor: pointer;
}
.file-control input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.file-control .secondary-action {
  width: 100%;
  font-size: 13px;
  min-width: 0;
}
.skin-note {
  font-size: 10px;
  color: #aaa5b1;
  text-align: center;
  margin-top: 12px;
}
.profile-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 21px 0;
  border-bottom: 1px solid #35333d;
}
.profile-row > span {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: #aaa5b1;
}
.profile-row .lucide {
  color: #777180;
  width: 16px;
  height: 16px;
}
.profile-row strong {
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
  text-align: right;
}
.balance-row strong {
  color: var(--orange);
  font: 24px/1.5 var(--display);
}
.text-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  padding: 8px 0;
  font-size: 12px;
  color: #aaa5b1;
}
.logout {
  margin-top: 19px;
  color: #cd9d7d;
}
.logout:hover {
  color: #ffbd82;
}

.modal {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #08080dcc;
  backdrop-filter: blur(7px);
}
.modal-panel {
  width: min(460px, 100%);
  max-height: calc(100dvh - 48px);
  overflow: auto;
  padding: 32px;
  border: 1px solid #ffffff1f;
  border-radius: 10px;
  box-shadow: 0 24px 90px #0006;
  background: #1c1c23;
}
.modal-panel :is(h1, h2) {
  font-size: 26px;
  margin: 0 24px 26px 0;
  overflow-wrap: anywhere;
}
.modal-panel .eyebrow {
  font-size: 9px;
  margin-top: 13px;
  margin-bottom: 9px;
}
.modal-emblem {
  display: block;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(3px 4px #080d09);
}
.close-button {
  position: absolute;
  top: 17px;
  right: 17px;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 6px;
  background: #26242d;
  border: 1px solid #35333d;
  box-shadow: 0 2px #080d09;
}
.close-button:hover {
  border-color: var(--orange);
  color: var(--orange);
}
form {
  display: grid;
  gap: 16px;
}
label,
.code-field {
  display: grid;
  gap: 7px;
  font-size: 12px;
  color: #bdb7c3;
}
input {
  display: block;
  min-width: 0;
  width: 100%;
  min-height: 44px;
  border: 1px solid #35333d;
  border-radius: 5px;
  background: #111117;
  color: var(--text);
  padding: 10px 12px;
  outline: none;
  line-height: 1.5;
  font-size: 14px;
}
input::placeholder {
  color: #aaa5b1;
  font-size: 12px;
}
input:focus {
  border-color: #53505d;
  box-shadow: 0 0 0 2px #94b65d22;
}
.inline-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.inline-control button {
  min-height: 44px;
  padding: 8px 12px;
  font-size: 11px;
  gap: 6px;
  background: #3a2b30;
  border: 1px solid #35333d;
  box-shadow: inset 0 -3px #15210f77;
}
.inline-control button .lucide {
  width: 14px;
  height: 14px;
}
.password-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.full {
  width: 100%;
  min-width: 0;
}
.modal-panel .primary-action {
  min-height: 46px;
  padding: 11px 15px;
  font-size: 13px;
}
.link-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 2px;
  color: #b9d58e;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.link-button:hover {
  color: var(--orange);
}
.form-message {
  color: #bfdc9a;
  font-size: 12px;
  overflow-wrap: anywhere;
  line-height: 1.6;
}
.form-message:empty {
  display: none;
}
.form-message.error {
  color: #f6a482;
}
.modal-switch {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  border-top: 1px solid #35333d;
  margin-top: 24px;
  padding-top: 20px;
  color: #aaa5b1;
  font-size: 12px;
}
.registration-terms {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
  text-align: center;
}
.registration-terms a {
  color: var(--accent-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.registration-terms a:hover {
  color: var(--orange);
}
.modal-back {
  margin: 22px auto 0;
  display: flex;
}
.catalog-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  border-block: 1px solid #35333d;
  font-size: 13px;
  color: var(--muted);
}
.catalog-price-row strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--orange);
  font: 21px/1.3 var(--display);
}
#catalogModal .modal-panel {
  width: min(900px, 100%);
}
#catalogModal h2 {
  margin-bottom: 24px;
}
.catalog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 28px;
}
.catalog-info,
.kit-preview {
  min-width: 0;
}
#catalogDescription {
  font-size: 14px;
  line-height: 1.8;
  color: #bdb7c3;
  margin-bottom: 20px;
}
.catalog-info h3,
.kit-preview figcaption {
  font-size: 15px;
  line-height: 1.5;
  margin: 18px 0 12px;
}
.kit-preview figcaption {
  margin-top: 0;
}
.catalog-empty {
  font-size: 13px;
  line-height: 1.8;
  color: var(--muted);
}
.catalog-features {
  padding-left: 20px;
  color: #e0dce4;
  font-size: 13px;
  line-height: 1.8;
}
.catalog-features li + li {
  margin-top: 8px;
}
.kit-preview {
  margin: 0;
}
.kit-media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  border: 1px solid #35333d;
  background: #111117;
  overflow: hidden;
}
.kit-media[data-state="empty"],
.kit-media[data-state="error"] {
  border-style: dashed;
}
.kit-image-link {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kit-image-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.kit-zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: #19171fe6;
  border: 1px solid #35333d;
}
.kit-image-link:hover .kit-zoom {
  border-color: var(--orange);
  color: var(--orange);
}
.kit-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  padding: 20px;
  color: #aaa5b1;
  text-align: center;
  font-size: 12px;
  line-height: 1.7;
}
.kit-empty > .lucide {
  width: 28px;
  height: 28px;
}
.catalog-back {
  margin-top: 24px;
}
.modal-panel .secondary-action {
  min-height: 44px;
  font-size: 12px;
}
.field-note {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.6;
}
#topupModal .modal-panel {
  width: min(520px, 100%);
  padding: 26px;
}
#topupModal .modal-emblem {
  width: 32px;
  height: 32px;
}
#topupModal :is(h1, h2) {
  margin-bottom: 20px;
}
#topupForm {
  gap: 12px;
}
.topup-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 16px;
  align-items: start;
}
#topupEmailHint {
  grid-column: 1 / -1;
}
#topupNick:focus {
  border-color: #a6a98b;
  box-shadow: 0 0 0 2px #a6a98b22;
}
#topupNick[data-validation="valid"] {
  border-color: #8cbd61;
  box-shadow: 0 0 0 1px #8cbd6133;
}
#topupNick[data-validation="missing"],
#topupNick[data-validation="error"] {
  border-color: #ed786a;
  box-shadow: 0 0 0 1px #ed786a33;
}
.recipient-error {
  margin: 0;
  color: #f08b7e;
}
.recipient-error:empty {
  display: none;
}
.amount-field {
  position: relative;
}
.amount-field input {
  padding-right: 52px;
}
.amount-field > span {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--orange);
  pointer-events: none;
  font-family: var(--display);
}
.topup-summary {
  padding: 15px 0;
  border-block: 1px solid #35333d;
}
.topup-breakdown {
  display: grid;
  gap: 10px;
  margin: 0;
}
.topup-breakdown > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
  min-width: 0;
}
.topup-breakdown dt {
  color: var(--muted);
  font-size: 12px;
}
.topup-breakdown dd {
  margin: 0 0 0 auto;
  text-align: right;
  font-size: 14px;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.topup-bonus dd,
#topupBonusPercent {
  color: var(--accent-soft);
}
.topup-total {
  padding-top: 13px;
  margin-top: 3px;
  border-top: 1px solid #35333d;
}
.topup-total dd {
  color: var(--orange);
  font: 25px/1.4 var(--display);
}
.next-bonus {
  margin-top: 13px;
  color: var(--accent-soft);
  font-size: 10px;
  line-height: 1.7;
}
@keyframes appear {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1320px) {
  .site-header { gap: 14px; }
}
@media (max-width: 980px) {
  .site-header { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .main-nav { grid-column: 1 / -1; grid-row: 2; justify-content: center; }
  .header-play { grid-column: 2; grid-row: 1; }
  .brand { grid-column: 1; grid-row: 1; justify-self: start; }
}
@media (max-width: 1180px) {
  .section-heading :is(h1, h2) {
    font-size: 30px;
  }
  .world-strip-inner {
    gap: 20px;
    padding: 24px;
  }
  .world-strip article {
    gap: 13px;
  }
  .world-strip img {
    width: 34px;
    height: 34px;
  }
  .world-strip h2 {
    font-size: 14px;
  }
  .world-strip p {
    font-size: 10px;
  }
  .offer-tile {
    padding: 22px 18px;
  }
  .offer-badge {
    right: 12px;
    font-size: 7px;
  }
  .tile-grid {
    gap: 16px;
  }
  .privilege-fan {
    padding-inline: 48px;
  }
  .privilege-fan .cool-privilege {
    --fan-angle: -5deg;
  }
  .privilege-fan .kaif-privilege {
    --fan-angle: 5deg;
  }
  .product-body {
    padding: 20px;
  }
  .product-body h3 {
    font-size: 23px;
  }
  .product-body > p:not(.product-kind) {
    min-height: 66px;
  }
  .shop-currency {
    display: none;
  }
  .rules-section {
    gap: 32px;
  }
  .rules-intro :is(h1, h2) {
    font-size: 27px;
  }
  .profile-layout {
    grid-template-columns: 250px minmax(0, 1fr);
  }
  .profile-info,
  .skin-panel {
    padding: 20px;
  }
}
@media (max-width: 640px) {
  .news-grid,
  .news-admin-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .news-card {
    padding: 22px;
  }
  .news-section .section-heading {
    align-items: flex-start;
  }
  .news-admin-tabs button {
    font-size: 11px;
    padding-inline: 8px;
  }
  .catalog-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .topup-contact-grid {
    grid-template-columns: 1fr;
  }
  #topupModal .modal-panel {
    padding: 24px 20px;
  }
  html {
    scroll-padding-top: 24px;
  }
  .site-header {
    inset: auto;
    width: calc(100% - 24px);
    margin-top: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    justify-items: stretch;
    gap: 12px;
    padding: 14px;
    border-radius: 8px;
  }
  .brand { font-size: 15px; gap: 8px; }
  .brand img { width: 28px; height: 32px; }
  .main-nav { grid-column: 1 / -1; width: 100%; gap: 5px; }
  .nav-button {
    flex: 0 1 auto;
    min-width: 0;
    min-height: 42px;
    height: auto;
    padding: 9px 10px;
    font-size: 11px;
    gap: 6px;
  }
  .header-play { font-size: 11px; padding-inline: 10px; }
  .nav-button .lucide, .nav-button i[data-lucide] { width: 14px; height: 14px; }
  .hero {
    min-height: 490px;
    height: auto;
    max-height: none;
    padding: 78px 20px 82px;
  }
  .hero-bg { background-position: 58% center; }
  .hero-logo h1 { font-size: clamp(34px, 7.9vw, 46px); }
  .hero-logo { margin: 42px auto 20px; }
  .logo-pumpkin { width: 48px; height: 55px; margin-left: -24px; --pumpkin-jump: -8px; }
  .pumpkin-track { top: -34px; height: 55px; }
  .hero-copy { font-size: 15px; line-height: 1.8; }
  .hero-actions { flex-direction: column; gap: 10px; }
  .hero-actions > .primary-action,
  .hero-actions > .secondary-action { width: min(280px, 100%); min-height: 52px; font-size: 14px; }
  .opening-status { flex-wrap: wrap; max-width: 270px; margin: 22px auto 0; font-size: 10px; gap: 6px; }
  .hero-bottom { bottom: 25px; left: 22px; right: 22px; font-size: 7px; }
  .hero-bottom > span:last-child { display: none; }
  .hero-bottom a { left: auto; right: 0; transform: none; }
  .world-strip-inner {
    grid-template-columns: 1fr;
    padding: 8px 24px;
    gap: 0;
  }
  .world-strip article {
    justify-content: flex-start;
    border-right: 0;
    border-bottom: 1px solid #35333d;
    padding: 18px 0;
    gap: 19px;
  }
  .world-strip img {
    width: 37px;
    height: 37px;
  }
  .world-strip h2 {
    font-size: 16px;
  }
  .world-strip p {
    font-size: 12px;
  }
  .content-section {
    padding: 56px 22px;
  }
  .section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 27px;
  }
  .section-heading :is(h1, h2) {
    font-size: 30px;
    max-width: 360px;
  }
  .section-note {
    font-size: 12px;
  }
  .eyebrow {
    font-size: 9px;
  }
  .tile-grid,
  .shop-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .offer-tile {
    padding: 24px;
    display: grid;
    grid-template-columns: 1fr 110px;
    column-gap: 10px;
    text-align: left;
  }
  .offer-number {
    grid-column: 1;
  }
  .coin-art {
    grid-column: 2;
    grid-row: 1/4;
    height: 120px;
    margin: 0;
  }
  .offer-tile h3 {
    font-size: 30px;
    grid-column: 1;
    margin-top: 18px;
  }
  .offer-tile p {
    max-width: none;
    margin: 0;
    min-height: 0;
    grid-column: 1;
    font-size: 12px;
  }
  .purchase-button {
    grid-column: 1/-1;
    margin-top: 23px;
  }
  .offer-badge {
    font-size: 8px;
    right: 20px;
  }
  .section-footnote {
    align-items: flex-start;
    text-align: center;
    font-size: 10px;
  }
  .product-art {
    height: 185px;
  }
  .product-body > p:not(.product-kind) {
    min-height: 0;
    max-width: 300px;
  }
  .product-body {
    padding: 24px;
  }
  .shop-toolbar {
    gap: 0;
    padding-bottom: 16px;
    margin-bottom: 25px;
  }
  .rules-section {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .rules-intro :is(h1, h2) {
    font-size: 28px;
  }
  .rules-intro > img {
    display: none;
  }
  .rules-list summary {
    font-size: 15px;
    padding: 21px 0;
    gap: 14px;
  }
  .rule-clauses li {
    grid-template-columns: 30px minmax(0, 1fr);
  }
  .rules-penalties h3 {
    font-size: 20px;
  }
  .penalty-list {
    grid-template-columns: 1fr;
  }
  .join-band {
    flex-direction: column;
    align-items: flex-start;
    padding: 34px 22px;
    gap: 24px;
  }
  .join-band h2 {
    font-size: 25px;
  }
  .join-band .primary-action {
    font-size: 13px;
    min-height: 48px;
  }
  .site-footer {
    flex-wrap: wrap;
    padding: 30px 22px;
    gap: 23px;
  }
  .site-footer .brand {
    width: 100%;
  }
  .site-footer p {
    text-align: left;
    font-size: 10px;
    max-width: 220px;
  }
  .site-footer p span {
    display: block;
    font-size: 9px;
    max-width: 170px;
  }
  .site-footer > a:last-child {
    font-size: 10px;
  }
  .profile-layout {
    grid-template-columns: 1fr;
  }
  .skin-panel {
    max-width: none;
  }
  .skin-preview {
    height: 280px;
  }
  .skin-panel .file-control {
    max-width: 300px;
    margin: auto;
  }
  .profile-row > span {
    gap: 7px;
    font-size: 12px;
  }
  .profile-row strong {
    font-size: 12px;
    max-width: 48%;
  }
  .balance-row strong {
    font-size: 22px;
  }
  .modal {
    padding: 16px;
  }
  .modal-panel {
    padding: 26px 22px;
    max-height: calc(100dvh - 32px);
  }
  .modal-panel :is(h1, h2) {
    font-size: 24px;
  }
  .modal-panel .eyebrow {
    font-size: 8px;
  }
  .inline-control button {
    font-size: 10px;
    padding: 8px;
    gap: 5px;
  }
  .password-grid {
    gap: 10px;
  }
  .modal-switch {
    font-size: 11px;
  }
}
@media (max-width: 360px) {
  .hero-logo h1 {
    font-size: 34px;
  }
  .hero-copy {
    font-size: 14px;
  }
  .hero {
    padding-inline: 16px;
  }
  .nav-button {
    font-size: 10px;
  }
  .nav-button .lucide {
    width: 12px;
    height: 12px;
  }
  .content-section {
    padding-inline: 18px;
  }
  .section-heading :is(h1, h2) {
    font-size: 27px;
  }
  .offer-tile {
    padding: 20px;
    grid-template-columns: 1fr 95px;
  }
  .coin-art {
    transform: scale(0.88);
  }
  .password-grid {
    grid-template-columns: 1fr;
  }
  .site-footer > a:last-child {
    font-size: 9px;
  }
}


@media (max-width: 740px) {
  .privilege-fan {
    grid-template-columns: minmax(0, 1fr);
    max-width: 420px;
    padding: 24px 16px;
    gap: 46px;
  }
  .privilege-fan .product-card {
    --fan-offset: 0px;
  }
  .privilege-fan .cool-privilege {
    --fan-angle: -2deg;
  }
  .privilege-fan .kaif-privilege {
    --fan-angle: 2deg;
  }
  .privilege-fan .product-card:hover,
  .privilege-fan .product-card:focus-within {
    transform: translateY(-8px) rotate(0deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}
.connection-message:not(:empty) {
  max-width: 1440px;
  margin: 8px auto 0;
  padding: 8px 16px;
  background: #291f18;
  border: 1px solid #b4773938;
  border-radius: 6px;
  font-size: 11px;
  text-align: center;
}
body:has(#connectionMessage:not(:empty)) .site-header {
  position: relative;
  inset: auto;
  width: calc(100% - 48px);
  margin: 12px auto 0;
  background: linear-gradient(110deg, #1c1c22f5, #151519f5 65%);
}

.site-page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.site-page > main {
  flex: 1;
  width: 100%;
}
.site-page > .site-footer {
  width: 100%;
  margin: 0 auto;
}
.site-page:not(.page-home) .site-header {
  position: relative;
  inset: auto;
  width: calc(100% - 40px);
  margin: 12px auto 0;
  background: linear-gradient(110deg, #1c1c22f5, #151519f5 65%);
}
.nav-button[aria-current="page"] {
  border-color: #ffad612b;
  color: #ffd2a3;
  background-color: #ffad610d;
}
.main-nav .nav-button[aria-current="page"] .lucide,
.main-nav .nav-button:hover .lucide { color: #ffbd82; }
.nav-button.header-play[aria-current="page"] {
  border-color: #ffc78e;
  color: #302011;
  background: linear-gradient(135deg, #ffc383, #ffad61);
}
.nav-button.header-play:hover,
.nav-button.header-play:focus-visible {
  border-color: #ffe1b6;
  background: linear-gradient(135deg, #ffd29e, #ffbc7b);
  color: #302011;
}
.site-page:not(.page-home) .content-section {
  width: 100%;
  padding-top: 36px;
  padding-bottom: 48px;
}
.inline-panel {
  width: 100%;
  padding: 48px 24px 64px;
  scroll-margin-top: 24px;
}
.inline-panel > .modal-panel {
  max-height: none;
  overflow: visible;
  margin: 0 auto;
}
.inline-panel .modal-panel :is(h1, h2) {
  margin-right: 0;
}
.page-gate h1 {
  font-size: 32px;
  margin-bottom: 20px;
}
.page-gate h1 span {
  color: var(--orange);
}
.page-gate p {
  color: var(--muted);
  font-size: 14px;
}
.page-gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 26px;
}
.page-balance #balance {
  border-top: 1px solid #35333d;
}
@media (max-width: 640px) {
  body:has(#connectionMessage:not(:empty)) .site-header { width: calc(100% - 24px); margin-top: 12px; }
  .site-page:not(.page-home) .site-header { width: calc(100% - 24px); margin-top: 12px; }
  .inline-panel {
    padding: 32px 18px 48px;
  }
  .site-page:not(.page-home) .content-section {
    padding-top: 32px;
    padding-bottom: 48px;
  }
  .page-gate h1 {
    font-size: 27px;
  }
}


/* Compact graphite surfaces keep the Halloween art and orange accents. */
.site-page .site-header { max-width: 1440px; }
.site-page:has(#connectionMessage:not(:empty)) .site-header { width: calc(100% - 40px); }
.site-page .connection-message:not(:empty) { width: calc(100% - 40px); max-width: 1440px; }
.site-page:not(.page-home) {
  background: linear-gradient(95deg, #111115f7, #111115eb), url("../assets/kaifmine-halloween-hero.png") center 20% / cover fixed;
}
.site-page.page-start > .site-footer,
.site-page.page-start .start-section { width: calc(100% - 40px); max-width: 1160px; margin-inline: auto; }
.site-page.page-start .start-section { padding: 36px 0 48px; }
.site-page.page-start > .site-footer { padding-inline: 0; }
.start-heading { text-align: center; margin: 0 auto 26px; }
.start-heading .eyebrow { justify-content: center; margin-bottom: 10px; }
.start-heading h1 { font: 650 clamp(25px, 2.6vw, 32px)/1.35 var(--wordmark); letter-spacing: -.055em; margin-bottom: 12px; }
.start-heading h1 span { color: var(--orange); }
.start-heading > p:last-child { color: var(--muted); font-size: 14px; }
.start-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 0; margin: 0; list-style: none; }
.start-card { display: grid; grid-template-rows: auto 1fr auto; gap: 20px; min-width: 0; padding: 24px; border: 1px solid #ffffff1f; border-radius: 12px; background: linear-gradient(145deg, #232229ed, #19181fed); transition: border-color .2s, box-shadow .2s; }
.start-card:hover { border-color: #ffad6145; box-shadow: 0 12px 32px #00000018; }
.step-heading { display: flex; align-items: center; gap: 14px; min-height: 46px; }
.step-icon { display: grid; flex: 0 0 44px; place-items: center; width: 44px; height: 44px; color: #ffb775; background: #ffac5910; border: 1px solid #ffac592e; border-radius: 10px; }
.step-icon .lucide { width: 20px; height: 20px; }
.step-number { font-size: 9px; line-height: 1.4; letter-spacing: .14em; color: #c69b6d; margin-bottom: 5px; }
.start-card h3 { font: 650 18px/1.35 var(--body); margin: 0; }
.start-card > p { min-height: 66px; color: var(--muted); font-size: 13px; line-height: 22px; margin: 0; }
.step-actions { display: grid; grid-template-rows: 44px minmax(22px, auto); align-items: center; gap: 10px; width: 100%; margin: 0; }
.step-actions .primary-action, .step-actions .secondary-action { min-width: 0; width: 100%; min-height: 44px; padding: 10px 12px; font-size: 12px; }
.step-actions .text-action { justify-self: center; padding: 0; line-height: 22px; font-size: 11px; color: #ffc18a; }
.step-note { text-align: center; color: #aaa5b1; font-size: 10px; line-height: 22px; }
.step-success { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px; margin: 0; color: #bdd39d; font-size: 11px; line-height: 22px; overflow-wrap: anywhere; }
.step-success .lucide { width: 15px; height: 15px; }
.step-complete { border-color: #a3ba6e61; }
.inline-panel.entry-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: center; gap: clamp(28px, 5vw, 64px); max-width: 1060px; padding: 36px 24px 48px; margin-inline: auto; }
.entry-intro { max-width: 430px; }
.entry-intro .eyebrow { font-size: 9px; letter-spacing: .1em; margin-bottom: 18px; color: #d0aa78; }
.entry-intro h1 { font: 650 clamp(28px, 3vw, 38px)/1.3 var(--wordmark); letter-spacing: -.065em; margin-bottom: 18px; }
.entry-intro h1 span { color: var(--orange); }
.entry-intro > p:not(.eyebrow) { max-width: 370px; color: #aaa5b1; font-size: 14px; line-height: 1.9; }
.entry-illustration { display: grid; place-items: center; width: 84px; height: 84px; margin: 30px 0 22px; border: 1px solid #ffad6126; border-radius: 17px; background: #ffad6109; transform: rotate(-8deg); }
.entry-illustration img { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 0 14px #ff9e2520); }
.entry-intro .text-action { color: #ffbb80; }
.entry-layout > .modal-panel { width: 100%; margin: 0; padding: 26px; background: #1c1c23f2; border-color: #ffffff1f; }
.entry-layout .modal-panel > .modal-emblem, .entry-layout .modal-panel > .eyebrow { display: none; }
.entry-layout .modal-panel > h2 { display: flex; align-items: center; gap: 10px; font: 650 18px/1.5 var(--body); border-bottom: 1px solid #ffffff12; padding-bottom: 18px; margin: 0 0 22px; }
.entry-layout .modal-panel > h2 .lucide { color: #e8ac72; }
.entry-layout label { font-size: 12px; }
.entry-layout input { min-height: 44px; background: #111117; border-color: #ffffff24; border-radius: 6px; }
.entry-layout .modal-switch { border-color: #ffffff12; margin-top: 20px; padding-top: 17px; }
.entry-layout .primary-action { min-height: 44px; border-radius: 6px; }
@media (max-width: 980px) {
  .start-steps { grid-template-columns: 1fr; max-width: 580px; margin: auto; }
  .start-card > p { min-height: 0; }
}
@media (max-width: 820px) {
  .start-card { padding: 24px; }
  .inline-panel.entry-layout { grid-template-columns: minmax(0, 1fr); max-width: 560px; gap: 28px; padding-top: 36px; }
  .entry-intro { max-width: none; }
  .entry-illustration { display: none; }
  .entry-intro .text-action { margin-top: 12px; }
}
@media (max-width: 560px) {
  .main-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .main-nav .nav-button { min-height: 36px; padding: 7px 10px; }
  .header-play { min-width: 0; min-height: 38px; }
  .site-header { padding: 11px 12px; gap: 10px; }
  .brand { font-size: 15px; }
  .brand img { width: 25px; height: 28px; }
  .connection-message:not(:empty) { margin-inline: 12px; }
  .start-heading { text-align: left; }
  .start-heading .eyebrow { justify-content: flex-start; }
  .inline-panel.entry-layout { padding-inline: 18px; }
}

@media (max-width: 640px) {
  .site-page:has(#connectionMessage:not(:empty)) .site-header,
  .site-page .connection-message:not(:empty),
  .site-page.page-start .site-header,
  .page-start .connection-message:not(:empty),
  .site-page.page-start > .site-footer,
  .site-page.page-start .start-section { width: calc(100% - 24px); }
  .site-page.page-start .start-section { padding-block: 32px 48px; }
}

@keyframes page-arrive {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes step-arrive {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .site-page > main > :is(.content-section, .hero, .inline-panel, .page-gate) {
    animation: page-arrive .32s cubic-bezier(.2, .7, .25, 1) backwards;
  }
  .start-card { animation: step-arrive .36s ease-out backwards; }
  .start-card:nth-child(1) { animation-delay: 40ms; }
  .start-card:nth-child(2) { animation-delay: 90ms; }
  .start-card:nth-child(3) { animation-delay: 140ms; }
}

/* Registration: rules consent and honeypot */
.registration-limit-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.terms-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #cfc9d6;
  cursor: pointer;
}
.terms-check input {
  flex: none;
  width: 18px;
  min-height: 18px;
  height: 18px;
  padding: 0;
  accent-color: var(--orange);
  cursor: pointer;
}
.terms-check a {
  color: var(--accent-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.terms-check a:hover {
  color: var(--orange);
}
.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.catalog-managed-grid { align-items: stretch; }
.catalog-managed-grid .product-card { --catalog-accent: #ffb873; }
.catalog-managed-grid .product-art:not(.product-art-screenshot) img { width: 96px; height: 96px; }
.catalog-managed-grid .product-art-screenshot { background: #111116; }
.catalog-managed-grid .product-art-screenshot img { width: 100%; height: 100%; object-fit: cover; image-rendering: auto; filter: none; }
.catalog-managed-grid .product-art-screenshot::after { content: none; }
.catalog-managed-grid .product-card:hover .product-art-screenshot img { animation: none; filter: none; }
.catalog-managed-grid .product-body { display: flex; flex: 1; flex-direction: column; }
.catalog-managed-grid .product-summary { flex: 1; }
.catalog-state { margin: 30px 0; color: var(--muted); text-align: center; }

/* Server name and live online count. */
.server-monitor {
  --monitor-color: #a49ba9;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: min(100%, 340px);
  min-height: 62px;
  margin: 24px auto 0;
  padding: 12px 14px;
  border: 1px solid #e9b37d21;
  border-radius: 12px;
  background: linear-gradient(125deg, #1d1a20f2, #121217f2 72%);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px #0004, inset 0 1px #ffffff06;
  text-align: left;
}
.server-monitor[data-state="online"] { --monitor-color: #91d76e; }
.server-monitor[data-state="offline"] { --monitor-color: #ef6a65; }
.monitor-roster { grid-column: 1 / -1; min-width: 0; border-top: 1px solid #ffffff10; padding-top: 5px; }
.monitor-roster summary { min-height: 40px; display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; color: #c2b7c8; font-size: 12px; }
.monitor-roster summary::-webkit-details-marker { display: none; }
.monitor-roster summary > span { color: #ffcc98; margin-left: auto; font-variant-numeric: tabular-nums; }
.monitor-roster summary .lucide { width: 14px; height: 14px; transition: transform .15s; }
.monitor-roster[open] summary .lucide { transform: rotate(180deg); }
.monitor-roster-content { padding: 4px 0 8px; max-height: 220px; overflow-y: auto; }
.monitor-roster-content p { margin: 0; font-size: 12px; color: #a99eaf; }
.monitor-roster-content p:empty { display: none; }
.monitor-roster-content ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.monitor-roster-content ul[hidden] { display: none; }
.monitor-roster-content li { max-width: 100%; overflow-wrap: anywhere; padding: 5px 8px; border: 1px solid #ffb87320; border-radius: 6px; font-size: 12px; color: #eee6f1; background: #ffb87308; }
.monitor-emblem {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid #ffb87320;
  border-radius: 9px;
  background: linear-gradient(140deg, #ffb87310, #ffb87304);
  color: #ffc184;
}
.monitor-emblem .lucide { width: 18px; height: 18px; stroke-width: 1.5; }
.monitor-name {
  min-width: 0;
  color: #f4ede6;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  overflow-wrap: anywhere;
}
.monitor-presence {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid #ffb87312;
  border-radius: 8px;
  background: #ffb87307;
  white-space: nowrap;
  font-size: 12px;
  line-height: 20px;
  color: #b5aab6;
}
.monitor-counter { display: inline-flex; align-items: baseline; gap: 5px; }
.monitor-presence strong { color: #ffcc98; font-size: 17px; font-weight: 650; line-height: 20px; font-variant-numeric: tabular-nums; }
.monitor-dot { flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--monitor-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--monitor-color) 10%, transparent); }
@media (max-width: 420px) {
  .server-monitor { gap: 10px; padding: 12px; }
  .monitor-name { font-size: 13px; }
  .monitor-presence { gap: 6px; padding-inline: 8px; }
}

/* The supplied PNG is unchanged. Clip only its transparent canvas margins. */
.halloween-wordmark {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1988 / 497;
  overflow: hidden;
}
.halloween-wordmark > img {
  position: absolute;
  left: -2.0121%;
  top: -26.157%;
  width: 104.5775%;
  height: 152.1127%;
  max-width: none;
  object-fit: fill;
  image-rendering: auto;
}
.brand.brand-halloween {
  width: clamp(150px, 13vw, 190px);
  gap: 0;
}
.brand.brand-halloween img { filter: none; }
.hero-logo.hero-logo-halloween {
  width: min(680px, 100%);
  margin: 12px auto 24px;
  padding: 0;
}
.hero-logo-halloween h1.halloween-wordmark {
  display: block;
  padding: 0;
  transform: none;
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
  filter: drop-shadow(0 8px 18px #0006);
}
@media (max-width: 600px) {
  .brand.brand-halloween { width: clamp(112px, 30vw, 150px); }
  .hero-logo.hero-logo-halloween { margin: 8px auto 22px; }
}