@import url('https://fonts.cdnfonts.com/css/minecraft-3');

:root {
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;

  /* Seraphyx: obsidian, eclipse violet, and cold silver. */
  --bg: #090811;
  --panel: #121020;
  --panel-raised: #19162a;
  --line: #38304f;
  --silver: #d9d4e9;
  --tx: #f0edf8;
  --mu: #a49cb9;
  --vi: #a27aff;
  --vi2: #7049c7;
  --ice: #8ed9e8;
  --ok: #82d4ad;
  --bad: #f08c9a;
  --warn: #e8bd76;
  --ease-out: cubic-bezier(.2, .75, .25, 1);
}

html {
  scroll-padding-top: calc(72px + env(safe-area-inset-top, 0px));
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  overflow-x: hidden;
  margin: 0;
  color: var(--tx);
  font: 16px/1.7 'Minecraft', sans-serif;
  background:
    radial-gradient(ellipse 48rem 25rem at 50% 8%, rgb(133 94 215 / 31%), transparent 72%),
    radial-gradient(circle at 50% 10%, transparent 0 126px, rgb(219 199 255 / 13%) 128px 130px, transparent 133px 250px),
    radial-gradient(circle, rgb(235 225 255 / 64%) 0 1px, transparent 1.8px) 0 0 / 72px 72px,
    radial-gradient(circle, rgb(177 148 240 / 54%) 0 1px, transparent 1.8px) 31px 26px / 112px 112px,
    radial-gradient(ellipse at 100% 42%, rgb(91 62 157 / 18%), transparent 43%),
    linear-gradient(180deg, #100c1d 0%, #0c0a17 49%, #090811 100%);
}

/* Stepped pixel clouds and chunk seams give the sky a voxel texture. */
body::before {
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: .42;
  background:
    linear-gradient(rgb(205 183 255 / 12%) 0 0) 9% 24% / 112px 16px no-repeat,
    linear-gradient(rgb(205 183 255 / 12%) 0 0) 12% calc(24% - 16px) / 64px 16px no-repeat,
    linear-gradient(rgb(205 183 255 / 12%) 0 0) 15% calc(24% - 32px) / 32px 16px no-repeat,
    linear-gradient(rgb(205 183 255 / 10%) 0 0) 77% 20% / 144px 16px no-repeat,
    linear-gradient(rgb(205 183 255 / 10%) 0 0) 81% calc(20% - 16px) / 80px 16px no-repeat,
    linear-gradient(rgb(205 183 255 / 10%) 0 0) 84% calc(20% - 32px) / 48px 16px no-repeat,
    linear-gradient(90deg, transparent 47px, rgb(190 164 246 / 8%) 47px 48px) 0 0 / 48px 48px,
    linear-gradient(0deg, transparent 47px, rgb(190 164 246 / 8%) 47px 48px) 0 0 / 48px 48px,
    linear-gradient(90deg, transparent 7px, rgb(220 207 255 / 4%) 7px 8px) 16px 16px / 192px 192px,
    linear-gradient(0deg, transparent 7px, rgb(220 207 255 / 4%) 7px 8px) 16px 16px / 192px 192px;
  mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / 84%) 72%, transparent 100%);
}

/* A layered, block-cut horizon glows beneath the violet halo. */
body::after {
  position: fixed;
  z-index: 0;
  right: -6vw;
  bottom: 0;
  left: -6vw;
  height: min(40vh, 390px);
  pointer-events: none;
  content: "";
  clip-path: polygon(0 38%, 6% 38%, 6% 28%, 13% 28%, 13% 13%, 23% 13%, 23% 22%, 29% 22%, 29% 35%, 39% 35%, 39% 17%, 47% 17%, 47% 8%, 58% 8%, 58% 21%, 65% 21%, 65% 34%, 72% 34%, 72% 20%, 80% 20%, 80% 29%, 85% 29%, 85% 12%, 94% 12%, 94% 38%, 100% 38%, 100% 100%, 0 100%);
  background:
    linear-gradient(90deg, transparent 31px, rgb(210 191 255 / 8%) 31px 32px) 0 0 / 32px 32px,
    linear-gradient(0deg, transparent 31px, rgb(210 191 255 / 8%) 31px 32px) 0 0 / 32px 32px,
    linear-gradient(180deg, rgb(222 202 255 / 48%) 0 3px, rgb(142 104 203 / 48%) 3px 7%, rgb(53 42 83 / 70%) 7% 42%, rgb(19 18 33 / 94%) 42% 100%);
  opacity: .56;
  animation: voxel-horizon 30s ease-in-out infinite alternate;
}

h1,
h2,
h3,
.disp {
  margin: .2em 0 .4em;
  font-weight: 600;
  letter-spacing: .055em;
}

h1 {
  font-size: clamp(2rem, 6vw, 3.6rem);
  line-height: 1.1;
  text-transform: uppercase;
  text-shadow: 0 0 34px rgb(162 122 255 / 20%);
  background: linear-gradient(105deg, #fff 4%, var(--silver) 48%, #bda6ff 92%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

h2 {
  color: var(--silver);
  font-size: 1.32rem;
  text-transform: uppercase;
}

h3 {
  color: var(--tx);
  font-size: 1.12rem;
}

a {
  color: var(--silver);
  text-decoration-color: rgb(162 122 255 / 55%);
  text-underline-offset: .2em;
}

header {
  position: sticky;
  z-index: 5;
  top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid rgb(162 122 255 / 18%);
  background: rgb(9 8 17 / 82%);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  max-width: 1120px;
  margin: auto;
  padding: 9px 16px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
  color: var(--silver);
  font-size: 1.05rem;
  letter-spacing: .28em;
  text-decoration: none;
}

.logo::before {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  content: "";
  transform: rotate(45deg);
  border: 1px solid var(--ice);
  background: linear-gradient(135deg, rgb(162 122 255 / 55%), transparent 70%);
  box-shadow: 0 0 14px rgb(142 217 232 / 30%);
  animation: sigil-pulse 4s ease-in-out infinite;
}

nav a.l {
  position: relative;
  padding: 10px 12px;
  color: var(--mu);
  font-size: .76rem;
  letter-spacing: .16em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .22s ease;
}

nav a.l::after {
  position: absolute;
  right: 12px;
  bottom: 5px;
  left: 12px;
  height: 1px;
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--ice), var(--vi), transparent);
  transition: transform .3s var(--ease-out);
}

nav a.l:hover,
nav a.on {
  color: var(--tx);
}

nav a.l:hover::after,
nav a.on::after {
  transform: scaleX(1);
}

main {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: auto;
  padding: 24px 16px 68px;
}

svg.ic {
  width: 1.3em;
  height: 1.3em;
  vertical-align: -.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero {
  position: relative;
  isolation: isolate;
  padding: 56px 8px 18px;
  text-align: center;
}

.hero::before {
  position: absolute;
  z-index: -1;
  top: 2px;
  left: 50%;
  width: min(70vw, 560px);
  aspect-ratio: 1;
  content: "";
  transform: translateX(-50%);
  border: 1px solid rgb(162 122 255 / 12%);
  border-radius: 50%;
  box-shadow: inset 0 0 70px rgb(142 217 232 / 3%), 0 0 70px rgb(112 73 199 / 8%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 67%);
  animation: eclipse-breathe 9s ease-in-out infinite;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ice);
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.eyebrow::before,
.eyebrow::after {
  width: 24px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--vi));
}

.eyebrow::after {
  transform: rotate(180deg);
}

.card {
  --c: 16px;
  position: relative;
  isolation: isolate;
  padding: 1px;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  background: linear-gradient(135deg, var(--ice), #342b4d 28%, var(--vi2) 72%, #3b3154);
  transition: transform .32s var(--ease-out), filter .32s ease;
  animation: card-arrive .65s var(--ease-out) both;
}

.card::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  content: "";
  transform: translateX(-140%) skewX(-18deg);
  background: linear-gradient(110deg, transparent 28%, rgb(255 255 255 / 9%) 48%, transparent 68%);
  transition: transform .8s var(--ease-out);
}

.card > .in {
  display: flex;
  height: 100%;
  flex-direction: column;
  padding: 20px;
  clip-path: inherit;
  background:
    radial-gradient(ellipse at 100% 0%, rgb(112 73 199 / 12%), transparent 48%),
    linear-gradient(145deg, #171426, var(--panel) 62%);
}

.card:hover {
  transform: translateY(-5px);
  filter: drop-shadow(0 14px 24px rgb(0 0 0 / 30%));
}

.card:hover::before {
  transform: translateX(140%) skewX(-18deg);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 18px;
}

.grid > .card:nth-child(2) { animation-delay: .06s; }
.grid > .card:nth-child(3) { animation-delay: .12s; }
.grid > .card:nth-child(4) { animation-delay: .18s; }
.grid > .card:nth-child(5) { animation-delay: .24s; }
.grid > .card:nth-child(6) { animation-delay: .3s; }

.sec {
  margin-top: 40px;
}

.rule {
  display: flex;
  align-items: center;
  gap: 14px;
}

.rule::after {
  height: 1px;
  flex: 1;
  content: "";
  background: linear-gradient(90deg, var(--line), rgb(142 217 232 / 18%), transparent);
}

.tier {
  display: flex;
  height: 22px;
  align-items: flex-end;
  gap: 4px;
  margin: 5px 0 12px;
}

.tier i {
  display: block;
  width: 9px;
  border-radius: 2px 2px 0 0;
  background: #2a253d;
}

.tier i.f {
  background: linear-gradient(180deg, var(--ice), var(--vi));
  box-shadow: 0 0 9px rgb(162 122 255 / 24%);
}

.price {
  color: var(--tx);
  font-size: 1.55rem;
}

.coins {
  color: #c3aaff;
  font-size: .9rem;
  letter-spacing: .08em;
}

.tag {
  color: var(--mu);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.mu { color: var(--mu); }

ul.perks {
  margin: 8px 0;
  padding-left: 18px;
  color: var(--tx);
}

ul.perks li::marker {
  color: var(--ice);
}

.pend {
  margin: 8px 0;
  padding: 9px 11px;
  border: 1px dashed var(--line);
  color: var(--mu);
  font-size: .85rem;
  background: rgb(9 8 17 / 35%);
}

.btn {
  position: relative;
  display: inline-block;
  min-height: 46px;
  overflow: hidden;
  padding: 12px 20px;
  clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  border: 1px solid #b59aff;
  color: #fff;
  background: linear-gradient(110deg, #6944b9, #8b62e6 54%, #6540b2);
  font: inherit;
  font-size: .8rem;
  letter-spacing: .16em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .2s var(--ease-out), box-shadow .2s ease, filter .2s ease;
}

.btn::after {
  position: absolute;
  inset: -80% auto -80% -45%;
  width: 32%;
  content: "";
  transform: rotate(20deg);
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 25%), transparent);
  transition: left .55s var(--ease-out);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgb(112 73 199 / 28%);
  filter: brightness(1.1);
}

.btn:hover::after {
  left: 125%;
}

.btn:active {
  transform: translateY(0) scale(.985);
}

.btn.ghost {
  border-color: var(--silver);
  color: var(--silver);
  background: rgb(217 212 233 / 4%);
}

.btn.ok {
  border-color: var(--ok);
  background: linear-gradient(110deg, #205d49, #26775b);
}

.btn.bad {
  border-color: var(--bad);
  background: linear-gradient(110deg, #6e2737, #96384a);
}

.push {
  margin-top: auto;
  padding-top: 14px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

:focus-visible {
  outline: 2px solid var(--ice);
  outline-offset: 4px;
}

label {
  display: block;
  margin: 14px 0 5px;
  color: var(--silver);
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

input,
select,
textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-bottom: 2px solid #7655c2;
  border-radius: 2px;
  color: var(--tx);
  background: #0c0a14;
  font: inherit;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

input::placeholder,
textarea::placeholder {
  color: #777187;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--ice);
  outline: none;
  background: #100e1a;
  box-shadow: 0 0 0 3px rgb(142 217 232 / 9%);
}

input[type="radio"] {
  width: auto;
  min-height: 0;
  accent-color: var(--vi);
}

.opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 8px 0;
  padding: 12px;
  border: 1px solid var(--line);
  color: var(--tx);
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s var(--ease-out);
}

.opt:hover {
  transform: translateX(3px);
  border-color: var(--vi);
  background: rgb(162 122 255 / 5%);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.chip {
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  color: var(--mu);
  background: transparent;
  font: inherit;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s var(--ease-out);
}

.chip:hover {
  transform: translateY(-2px);
  border-color: var(--silver);
  color: var(--tx);
}

.chip.on {
  border-color: var(--vi);
  color: var(--tx);
  background: linear-gradient(110deg, rgb(139 92 246 / 18%), rgb(142 217 232 / 6%));
  box-shadow: inset 0 0 18px rgb(139 92 246 / 7%);
}

.st {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px;
  border: 1px solid currentColor;
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.st::before {
  width: 6px;
  height: 6px;
  content: "";
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.st.awaiting_payment { color: var(--mu); }
.st.pending_verification { color: var(--warn); }
.st.paid { color: var(--vi); }
.st.delivered { color: var(--ok); }
.st.rejected { color: var(--bad); }

.note {
  margin: 14px 0;
  padding: 11px 14px;
  border-left: 3px solid var(--warn);
  background: linear-gradient(90deg, rgb(232 189 118 / 9%), transparent);
  font-size: .92rem;
}

.note.bad {
  border-color: var(--bad);
  background: linear-gradient(90deg, rgb(240 140 154 / 9%), transparent);
}

.note.cur {
  border-color: var(--vi);
  background: linear-gradient(90deg, rgb(162 122 255 / 10%), transparent);
}

.qr {
  display: flex;
  width: 170px;
  height: 170px;
  align-items: center;
  justify-content: center;
  margin: 8px 0;
  padding: 8px;
  border: 1px dashed #8d7cb5;
  color: var(--mu);
  background:
    linear-gradient(45deg, rgb(162 122 255 / 5%) 25%, transparent 25% 75%, rgb(162 122 255 / 5%) 75%),
    #0c0a14;
  background-size: 18px 18px;
  text-align: center;
  font-size: .85rem;
}

.ip {
  display: inline-block;
  margin: 4px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  color: var(--ice);
  background: #0c0a14;
  box-shadow: inset 0 0 18px rgb(142 217 232 / 3%);
}

.ladder {
  display: flex;
  height: 120px;
  align-items: flex-end;
  justify-content: center;
  gap: 9px;
  margin: 28px 0;
}

.ladder a {
  flex: 1;
  max-width: 120px;
  padding-top: 9px;
  border: 1px solid var(--line);
  border-bottom: 0;
  color: var(--silver);
  background: linear-gradient(180deg, rgb(162 122 255 / 15%), rgb(162 122 255 / 2%) 72%, transparent);
  font-size: .7rem;
  letter-spacing: .13em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .25s var(--ease-out), border-color .25s ease, color .25s ease;
}

.ladder a:hover {
  transform: translateY(-5px);
  border-color: var(--ice);
  color: #fff;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}

td,
th {
  padding: 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--silver);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

tbody tr {
  transition: background .2s ease;
}

tbody tr:hover {
  background: rgb(162 122 255 / 5%);
}

.scr {
  overflow-x: auto;
}

footer {
  position: relative;
  z-index: 1;
  padding: 22px 16px;
  border-top: 1px solid var(--line);
  color: var(--mu);
  background: rgb(9 8 17 / 45%);
  text-align: center;
  font-size: .88rem;
}

@keyframes voxel-horizon {
  from { transform: translate3d(-1.5vw, 0, 0); opacity: .36; }
  to { transform: translate3d(1.5vw, -5px, 0); opacity: .52; }
}

@keyframes eclipse-breathe {
  0%, 100% { opacity: .46; transform: translateX(-50%) scale(.98); }
  50% { opacity: .85; transform: translateX(-50%) scale(1.025); }
}

@keyframes sigil-pulse {
  0%, 100% { box-shadow: 0 0 10px rgb(142 217 232 / 22%); }
  50% { box-shadow: 0 0 18px rgb(162 122 255 / 48%); }
}

@keyframes card-arrive {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 520px) {
  .logo { gap: 9px; font-size: .94rem; letter-spacing: .19em; }
  nav { padding-right: 10px; padding-left: 10px; }
  nav a.l { padding: 9px 8px; font-size: .69rem; letter-spacing: .11em; }
  main { padding-right: 12px; padding-left: 12px; }
  .hero { padding-top: 42px; }
  .ladder { height: 100px; gap: 5px; }
  .ladder a { font-size: .62rem; letter-spacing: .08em; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}