:root {
  color-scheme: dark;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  background: #10140d;
  color: #fff8dc;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(10, 14, 9, 0.28), rgba(10, 14, 9, 0.82) 58%, rgba(9, 8, 5, 0.96)),
    url("/assets/minecraft-bg.png") center / cover fixed no-repeat;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 32px 32px;
  mix-blend-mode: soft-light;
}

.store-shell {
  display: grid;
  gap: 24px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 54px 18px 42px;
  width: min(1080px, 100%);
}

.hero,
.checkout {
  background:
    linear-gradient(180deg, rgba(65, 68, 57, 0.94), rgba(33, 37, 28, 0.94)),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 8px, transparent 8px 16px);
  border: 4px solid #15190f;
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, 0.12),
    0 14px 0 rgba(13, 14, 9, 0.76),
    0 22px 34px rgba(0, 0, 0, 0.42);
}

.hero {
  align-self: end;
  padding: clamp(24px, 5vw, 46px);
}

.checkout {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 4vw, 30px);
}

.eyebrow {
  color: #9be353;
  font-weight: 900;
  letter-spacing: 0;
  margin: 0 0 12px;
  text-shadow: 3px 3px 0 #12310e;
  text-transform: uppercase;
}

h1 {
  color: #fff7c2;
  font-size: clamp(42px, 8vw, 88px);
  line-height: 0.92;
  margin: 0;
  max-width: 850px;
  text-shadow:
    4px 4px 0 #2d2414,
    7px 7px 0 rgba(0, 0, 0, 0.5);
}

.sub {
  color: #f2e7c7;
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.45;
  margin: 18px 0 0;
  max-width: 720px;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
}

.sign {
  align-items: center;
  background: linear-gradient(180deg, #8f622b, #5e3b18);
  border: 3px solid #2a1909;
  box-shadow: inset 0 0 0 2px rgba(255, 233, 177, 0.18), 0 5px 0 #1b1107;
  color: #ffe7a1;
  display: flex;
  font-size: 18px;
  font-weight: 900;
  justify-content: center;
  min-height: 48px;
  text-shadow: 2px 2px 0 #211206;
  text-transform: uppercase;
}

.fields {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

label {
  color: #f8e9c5;
  display: grid;
  font-size: 15px;
  font-weight: 800;
  gap: 8px;
  text-shadow: 2px 2px 0 #12120c;
}

input {
  background: #1a1d15;
  border: 3px solid #0b0d08;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12), inset 0 4px 0 rgba(0, 0, 0, 0.35);
  color: #ffffff;
  font: inherit;
  min-height: 52px;
  padding: 13px 14px;
}

input:focus {
  border-color: #e4c05a;
  outline: 0;
}

.packs {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.pack,
.button {
  background:
    linear-gradient(180deg, rgba(111, 174, 60, 0.96), rgba(48, 110, 35, 0.98)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 12px, transparent 12px 24px);
  border: 4px solid #153010;
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, 0.16),
    0 7px 0 #11250e,
    0 14px 20px rgba(0, 0, 0, 0.3);
  color: #fffbe5;
  cursor: pointer;
  display: grid;
  gap: 8px;
  min-height: 150px;
  padding: 18px;
  text-align: left;
  text-decoration: none;
  text-shadow: 2px 2px 0 #10220b;
}

.pack:hover,
.button:hover {
  background:
    linear-gradient(180deg, rgba(137, 205, 69, 0.98), rgba(59, 137, 39, 1)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 12px, transparent 12px 24px);
  transform: translateY(-2px);
}

.pack:active,
.button:active {
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.16), 0 3px 0 #11250e;
  transform: translateY(4px);
}

.pack span {
  color: #d8ffd0;
  font-size: 16px;
  font-weight: 900;
  text-transform: uppercase;
}

.pack strong {
  font-size: clamp(25px, 4vw, 34px);
  line-height: 1;
}

.pack em {
  align-self: end;
  color: #ffe476;
  font-size: 20px;
  font-style: normal;
  font-weight: 900;
}

.message {
  color: #ffe476;
  font-weight: 800;
  line-height: 1.4;
  margin: 0;
  min-height: 22px;
  text-shadow: 2px 2px 0 #2e1f08;
}

.button {
  display: inline-grid;
  margin-top: 24px;
  min-height: 0;
}

.success-shell {
  align-content: center;
}

@media (max-width: 640px) {
  .store-shell {
    padding-top: 24px;
  }

  .hero,
  .checkout {
    border-width: 3px;
  }

  .pack {
    min-height: 132px;
  }
}