/* Minilands — voxel adventure aesthetic (Minecraft-inspired) */
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Fredoka:wght@500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  --sky-light: #7ec0ee;
  --sky: #4a9ee0;
  --sky-deep: #2563b8;
  --night: #0e1a3a;
  --night-deep: #07102a;

  --grass: #6abe30;
  --grass-deep: #3e8917;
  --dirt: #8b5a2b;
  --dirt-deep: #5c3a17;
  --stone: #6b7280;

  --gold: #f7c93b;
  --gold-deep: #c8941b;
  --gold-dark: #6b4a08;
  --orange: #f08a1c;
  --lava: #ef4035;
  --magic: #b14cff;
  --magic-glow: #d57bff;
  --water: #2aaee0;
  --emerald: #10b981;

  --paper: #f5e9c8;
  --paper-line: #c8a96a;
  --ink: #2a1d0a;
  --ink-soft: #4a3a1a;

  --card-bg: rgba(11, 22, 48, 0.78);
  --card-border: rgba(247, 201, 59, 0.4);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--night-deep);
  color: #fff;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

.display { font-family: 'Luckiest Guy', cursive; letter-spacing: 0.02em; font-weight: 400; }
.mono { font-family: 'JetBrains Mono', monospace; }

.container { width: min(1320px, 94vw); margin-inline: auto; }

h1, h2, h3 { font-family: 'Luckiest Guy', cursive; font-weight: 400; line-height: 1; letter-spacing: 0.02em; }

/* Bevel-stroked display text (Minecraft logo style)
   Solid color fills + multi-stroke + chunky drop = readable everywhere
   (no -webkit-background-clip so it survives screenshots too). */
.bevel-text {
  font-family: 'Luckiest Guy', cursive;
  color: #fff;
  text-shadow:
    -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
    -3px 0 0 #000, 3px 0 0 #000, 0 -3px 0 #000, 0 3px 0 #000,
    0 5px 0 #2a1808, 0 7px 0 #000,
    0 10px 16px rgba(0,0,0,0.7);
}
.bevel-text-gold {
  font-family: 'Luckiest Guy', cursive;
  color: #f7c93b;
  text-shadow:
    -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
    -3px 0 0 #000, 3px 0 0 #000, 0 -3px 0 #000, 0 3px 0 #000,
    0 4px 0 #6b4a08, 0 6px 0 #000,
    0 0 22px rgba(247, 201, 59, 0.55),
    0 10px 16px rgba(0,0,0,0.6);
}
.bevel-text-green {
  font-family: 'Luckiest Guy', cursive;
  color: #7cd23e;
  text-shadow:
    -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
    -3px 0 0 #000, 3px 0 0 #000, 0 -3px 0 #000, 0 3px 0 #000,
    0 4px 0 #1c4a08, 0 6px 0 #000,
    0 0 22px rgba(124, 210, 62, 0.55),
    0 10px 16px rgba(0,0,0,0.6);
}

/* Premium wordmark — gold→emerald metallic fill with thick double outline + 3D drop + glow.
   Looks like a finished game logotype, not just styled text. */
.logo-wordmark {
  display: inline-block;
  font-family: 'Luckiest Guy', cursive;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1;
  /* Gold-top → emerald-bottom metallic gradient */
  background: linear-gradient(180deg,
    #fff8c4 0%,
    #ffd75a 22%,
    #f0a720 42%,
    #b8e25a 58%,
    #5fb820 80%,
    #2d6a08 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Thick black outline — chunky game-logo feel */
  -webkit-text-stroke: 2.5px #000;
  paint-order: stroke fill;
  /* Stacked filters: hard 3D drop, soft golden glow, ambient depth */
  filter:
    drop-shadow(0 2px 0 #1a3a05)
    drop-shadow(0 3px 0 #000)
    drop-shadow(0 0 16px rgba(247, 201, 59, 0.55))
    drop-shadow(0 6px 14px rgba(0, 0, 0, 0.75));
}
.bevel-text-blue {
  font-family: 'Luckiest Guy', cursive;
  color: #5dabe8;
  text-shadow:
    -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
    -3px 0 0 #000, 3px 0 0 #000, 0 -3px 0 #000, 0 3px 0 #000,
    0 4px 0 #1a3a78, 0 6px 0 #000,
    0 0 22px rgba(93, 171, 232, 0.55),
    0 10px 16px rgba(0,0,0,0.6);
}
.bevel-text-magic {
  font-family: 'Luckiest Guy', cursive;
  color: #c266ff;
  text-shadow:
    -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
    -3px 0 0 #000, 3px 0 0 #000, 0 -3px 0 #000, 0 3px 0 #000,
    0 4px 0 #4a1a78, 0 6px 0 #000,
    0 0 22px rgba(194, 102, 255, 0.55),
    0 10px 16px rgba(0,0,0,0.6);
}

/* Buttons - chunky 3D voxel style */
.btn-3d {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 18px 32px;
  font-family: 'Luckiest Guy', cursive;
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: relative;
  cursor: pointer;
  border: 3px solid #1a0e04;
  border-radius: 8px;
  transition: all 120ms ease-out;
  user-select: none;
}
.btn-3d:active { transform: translateY(4px); }

.btn-gold {
  background: linear-gradient(180deg, #fde583 0%, #f7c93b 50%, #c8941b 100%);
  color: #4a2c08;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.6),
    inset 0 -3px 0 rgba(74,44,8,0.5),
    0 6px 0 #6b4a08,
    0 10px 16px rgba(0,0,0,0.5);
}
.btn-gold:hover {
  background: linear-gradient(180deg, #fff0b0 0%, #fad65a 50%, #d8a428 100%);
  transform: translateY(-2px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.7),
    inset 0 -3px 0 rgba(74,44,8,0.5),
    0 8px 0 #6b4a08,
    0 14px 20px rgba(0,0,0,0.6);
}
.btn-gold:active {
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.5),
    inset 0 -3px 0 rgba(74,44,8,0.5),
    0 2px 0 #6b4a08,
    0 4px 8px rgba(0,0,0,0.4);
}

.btn-green {
  background: linear-gradient(180deg, #9ee35a 0%, #6abe30 50%, #3e8917 100%);
  color: #0a1f04;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.5),
    inset 0 -3px 0 rgba(10,31,4,0.4),
    0 6px 0 #1c4a08,
    0 10px 16px rgba(0,0,0,0.5);
}
.btn-green:hover {
  background: linear-gradient(180deg, #b8eb78 0%, #7cd23e 50%, #4ea21f 100%);
  transform: translateY(-2px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.6),
    inset 0 -3px 0 rgba(10,31,4,0.4),
    0 8px 0 #1c4a08,
    0 14px 20px rgba(0,0,0,0.6);
}

.btn-magic {
  background: linear-gradient(180deg, #e0a8ff 0%, #b14cff 50%, #7c2dd6 100%);
  color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,0.4);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.4),
    inset 0 -3px 0 rgba(30,5,60,0.5),
    0 6px 0 #4a1a78,
    0 10px 16px rgba(0,0,0,0.5),
    0 0 30px rgba(177, 76, 255, 0.4);
}
.btn-magic:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.5),
    inset 0 -3px 0 rgba(30,5,60,0.5),
    0 8px 0 #4a1a78,
    0 14px 24px rgba(0,0,0,0.6),
    0 0 50px rgba(177, 76, 255, 0.6);
}

/* Eyebrow chip */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 18px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #fff;
  background: rgba(0,0,0,0.5);
  border: 2px solid var(--gold);
  border-radius: 100px;
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
  box-shadow: 0 0 16px rgba(247, 201, 59, 0.3);
}
.eyebrow::before {
  content: ""; width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
}

/* Wood-plank panel (Minecraft sign feel) */
.wood-panel {
  background:
    repeating-linear-gradient(180deg,
      #a0703a 0 4px,
      #8b5a2b 4px 14px,
      #6e441f 14px 18px,
      #8b5a2b 18px 28px),
    #8b5a2b;
  border: 4px solid #4a2c10;
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.08),
    inset 0 -8px 16px rgba(0,0,0,0.3),
    inset 0 4px 8px rgba(255,255,255,0.1),
    0 8px 0 #2a1808,
    0 14px 24px rgba(0,0,0,0.5);
  position: relative;
}
.wood-panel::before, .wood-panel::after {
  content: ""; position: absolute;
  width: 12px; height: 12px;
  background: #2a1808;
  border-radius: 50%;
  box-shadow: inset 0 2px 2px rgba(255,255,255,0.2);
}
.wood-panel::before { top: 8px; left: 8px; }
.wood-panel::after { top: 8px; right: 8px; }

/* Stone-block panel */
.stone-panel {
  background:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,0.2) 0%, transparent 30%),
    radial-gradient(circle at 80% 70%, rgba(0,0,0,0.15) 0%, transparent 30%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05) 0%, transparent 50%),
    linear-gradient(180deg, #8a94a4 0%, #6b7280 50%, #4b5563 100%);
  border: 3px solid #2a3340;
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.15),
    inset 0 -6px 12px rgba(0,0,0,0.3),
    0 6px 0 #1a2030,
    0 10px 20px rgba(0,0,0,0.5);
}

/* Game card (the bottom-strip cards in key art) */
.game-card {
  background: linear-gradient(180deg, rgba(20, 30, 60, 0.92) 0%, rgba(8, 14, 36, 0.96) 100%);
  border: 2px solid rgba(247, 201, 59, 0.5);
  border-radius: 10px;
  padding: 18px 20px;
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(247, 201, 59, 0.15),
    0 8px 16px rgba(0, 0, 0, 0.5);
  transition: all 200ms ease-out;
}
.game-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(247, 201, 59, 0.3),
    0 12px 28px rgba(0, 0, 0, 0.6),
    0 0 30px rgba(247, 201, 59, 0.25);
}

/* Sky background */
.sky-bg {
  background:
    linear-gradient(180deg, #4a9ee0 0%, #7ec0ee 60%, #b4dcf2 100%);
  position: relative;
}
.sky-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,0.85) 0%, transparent 4%),
    radial-gradient(circle at 24% 18%, rgba(255,255,255,0.7) 0%, transparent 5%),
    radial-gradient(circle at 70% 28%, rgba(255,255,255,0.8) 0%, transparent 6%),
    radial-gradient(circle at 78% 24%, rgba(255,255,255,0.6) 0%, transparent 4%),
    radial-gradient(circle at 88% 35%, rgba(255,255,255,0.7) 0%, transparent 5%);
  pointer-events: none;
}

/* Section spacing */
.section { padding: 120px 0; position: relative; }

/* Animations */
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.float-soft { animation: float-y 4s ease-in-out infinite; }

@keyframes blink { 0%, 60% { opacity: 1; } 70%, 100% { opacity: 0.4; } }
.blink { animation: blink 1.4s ease-in-out infinite; }

@keyframes coin-spin {
  0%, 100% { transform: rotateY(0); }
  50% { transform: rotateY(180deg); }
}
.coin-spin { animation: coin-spin 3s ease-in-out infinite; }

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--night-deep); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  border: 2px solid var(--night-deep);
  border-radius: 100px;
}

::selection { background: var(--gold); color: var(--ink); }

/* ============ MOBILE RESPONSIVE ============ */
@media (max-width: 1100px) {
  .container { width: 95vw; }
  .nav-links { gap: 14px !important; font-size: 12px !important; }
  .nav-online { display: none !important; }
}

@media (max-width: 820px) {
  .nav-links { display: none !important; }
  .nav-burger { display: flex !important; }
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 880px) {
  .section { padding: 72px 0; }
  h1, h2, h3 { line-height: 1.05; }

  /* Attribute-starts-with selector targets inline grid styles directly.
     Specificity beats inline only with !important. */
  [style*="grid-template-columns: repeat(8"],
  [style*="gridTemplateColumns: repeat(8"] { grid-template-columns: repeat(4, 1fr) !important; }
  [style*="grid-template-columns: repeat(7"],
  [style*="gridTemplateColumns: repeat(7"],
  [style*="grid-template-columns: repeat(6"],
  [style*="gridTemplateColumns: repeat(6"],
  [style*="grid-template-columns: repeat(5"],
  [style*="gridTemplateColumns: repeat(5"],
  [style*="grid-template-columns: repeat(4"],
  [style*="gridTemplateColumns: repeat(4"],
  [style*="grid-template-columns: repeat(3"],
  [style*="gridTemplateColumns: repeat(3"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: 1fr 1.4fr"],
  [style*="grid-template-columns: 1fr 1.6fr"],
  [style*="grid-template-columns: 320px 1fr"],
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }

  .btn-3d { padding: 14px 22px !important; font-size: 15px !important; }
  h1.display { font-size: clamp(40px, 11vw, 72px) !important; }
  h2.display { font-size: clamp(34px, 9vw, 56px) !important; }
}

@media (max-width: 540px) {
  [style*="grid-template-columns: repeat(8"],
  [style*="gridTemplateColumns: repeat(8"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: repeat(7"],
  [style*="gridTemplateColumns: repeat(7"],
  [style*="grid-template-columns: repeat(6"],
  [style*="gridTemplateColumns: repeat(6"],
  [style*="grid-template-columns: repeat(5"],
  [style*="gridTemplateColumns: repeat(5"],
  [style*="grid-template-columns: repeat(4"],
  [style*="gridTemplateColumns: repeat(4"],
  [style*="grid-template-columns: repeat(3"],
  [style*="gridTemplateColumns: repeat(3"] { grid-template-columns: 1fr !important; }
  .container { width: 92vw !important; }
}

/* Pixel divider (block pattern) */
.pixel-divider {
  height: 16px;
  background:
    linear-gradient(90deg,
      var(--grass) 0 8px, var(--grass-deep) 8px 16px,
      var(--grass) 16px 24px, var(--grass-deep) 24px 32px);
  background-size: 32px 16px;
  border-top: 2px solid #1a3308;
  border-bottom: 2px solid #1a3308;
}

.cloud {
  position: absolute;
  background: #fff;
  box-shadow:
    8px 0 0 #fff,
    16px 0 0 #fff,
    24px 0 0 #fff,
    32px 0 0 #fff,
    8px -8px 0 #fff,
    16px -8px 0 #fff,
    24px -8px 0 #fff,
    -8px 0 0 #fff,
    16px 8px 0 #fff;
  width: 8px; height: 8px;
  opacity: 0.92;
}