/* ============================================================
   HONDUCRAFT — Pixel/voxel design system
   Minecraft-GUI-inspired: beveled blocks, hotbar slots, parchment
   ============================================================ */

/* Tokens — Classic palette by default; overridden by [data-palette] */
:root {
  /* Greens */
  --grass-1: #4a8a25;
  --grass-2: #5d9c2e;
  --grass-3: #7cba3c;
  --grass-4: #8fdb52;
  --grass-5: #b6ec78;
  /* Earth */
  --dirt-1: #4a2f1a;
  --dirt-2: #6b4423;
  --dirt-3: #8b5a2b;
  --dirt-4: #a87539;
  --dirt-5: #c89968;
  /* Stone */
  --stone-1: #0e0f12;
  --stone-2: #1d1f24;
  --stone-3: #2b2e36;
  --stone-4: #3b3f49;
  --stone-5: #5a5f6c;
  --stone-6: #8a8f9a;
  /* Sky / accent */
  --sky-1: #4a8fc4;
  --sky-2: #88c5e8;
  --sky-3: #bfe0f5;
  --gold: #f4c430;
  --gold-2: #c8930b;
  --emerald: #17c0a0;
  --redstone: #d83232;
  /* Surface */
  --cream: #f4eedb;
  --cream-2: #e6dcc0;
  --paper: #faf6e8;

  /* Bevel mixes */
  --bev-light: rgba(255, 255, 255, 0.55);
  --bev-dark: rgba(0, 0, 0, 0.35);

  /* Type */
  --f-display: 'Press Start 2P', ui-monospace, monospace;
  --f-mono: 'VT323', ui-monospace, monospace;
  --f-body: 'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --pad: 8px;
}

/* ── Nether palette ─────────────────────────────────────────── */
[data-palette="nether"] {
  --grass-1: #4a1010;
  --grass-2: #6b1414;
  --grass-3: #a82a18;
  --grass-4: #d8551c;
  --grass-5: #f49a3a;
  --dirt-1: #1a0808;
  --dirt-2: #2c1010;
  --dirt-3: #4a1810;
  --dirt-4: #6e2414;
  --dirt-5: #8a3a1a;
  --sky-1: #4a1414;
  --sky-2: #d8551c;
  --sky-3: #f49a3a;
  --cream: #f3d9a2;
  --cream-2: #d6a85a;
  --paper: #2a1410;
}

/* ── Tropical hondureño ─────────────────────────────────────── */
[data-palette="tropical"] {
  --grass-1: #0d6b5a;
  --grass-2: #119980;
  --grass-3: #17c0a0;
  --grass-4: #4cd9b8;
  --grass-5: #8fecd0;
  --dirt-1: #2a1a08;
  --dirt-2: #5c3a14;
  --dirt-3: #8a5e1f;
  --dirt-4: #b58435;
  --dirt-5: #d4a85a;
  --sky-1: #1f7fb8;
  --sky-2: #4ab3e0;
  --sky-3: #a8dcef;
  --gold: #f4b41a;
  --cream: #fdf3d9;
  --cream-2: #f0e0b0;
  --paper: #fff9e8;
}

/* Reset */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--f-body);
  font-size: 16px;
  color: var(--stone-1);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; }
button { font-family: inherit; }

/* Pixel rendering for any block icons */
.pixelated, .pixelated * { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ── Display headings ───────────────────────────────────────── */
.h-disp {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: uppercase;
}
.h-mono {
  font-family: var(--f-mono);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 0.95;
}

/* ============================================================
   BLOCK / BEVEL SURFACES
   ============================================================ */

/* Generic beveled block — Minecraft GUI button look */
.block {
  position: relative;
  display: inline-block;
  background: var(--stone-4);
  color: #fff;
  border: 3px solid var(--stone-1);
  box-shadow:
    inset 3px 3px 0 var(--bev-light),
    inset -3px -3px 0 var(--bev-dark),
    4px 4px 0 var(--stone-1);
  image-rendering: pixelated;
}

/* Variants */
.block--grass { background: var(--grass-2); }
.block--grass-light { background: var(--grass-3); }
.block--dirt { background: var(--dirt-3); }
.block--stone { background: var(--stone-4); }
.block--gold { background: var(--gold); color: var(--stone-1); }
.block--emerald { background: var(--emerald); color: var(--stone-1); }
.block--redstone { background: var(--redstone); color: #fff; }
.block--cream { background: var(--cream); color: var(--stone-1); }
.block--paper { background: var(--paper); color: var(--stone-1); }
.block--sky { background: var(--sky-2); color: var(--stone-1); }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 14px 20px 12px;
  border: 3px solid var(--stone-1);
  cursor: default;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--stone-4);
  color: #fff;
  box-shadow:
    inset 3px 3px 0 var(--bev-light),
    inset -3px -3px 0 var(--bev-dark),
    4px 4px 0 var(--stone-1);
  transition: transform 0.05s, box-shadow 0.05s;
  text-decoration: none;
  position: relative;
}
.btn:hover {
  filter: brightness(1.08);
}
.btn:active {
  transform: translate(2px, 2px);
  box-shadow:
    inset 3px 3px 0 var(--bev-light),
    inset -3px -3px 0 var(--bev-dark),
    2px 2px 0 var(--stone-1);
}
.btn--grass { background: var(--grass-3); color: #fff; }
.btn--gold { background: var(--gold); color: var(--stone-1); }
.btn--gold:hover { color: var(--stone-1); }
.btn--emerald { background: var(--emerald); color: var(--stone-1); }
.btn--dirt { background: var(--dirt-3); color: #fff; }
.btn--ghost { background: transparent; color: var(--stone-1); border-color: var(--stone-3); box-shadow: inset 2px 2px 0 var(--bev-light), inset -2px -2px 0 var(--bev-dark); }
.btn--lg { font-size: 14px; padding: 18px 26px 16px; }
.btn--xl { font-size: 16px; padding: 22px 30px 20px; }
.btn--sm { font-size: 9px; padding: 10px 14px 8px; }

/* ── Hotbar slot — for store / inventory items ──────────────── */
.slot {
  position: relative;
  width: 100%;
  background: var(--stone-5);
  border: 3px solid var(--stone-1);
  box-shadow:
    inset -3px -3px 0 rgba(255, 255, 255, 0.18),
    inset 3px 3px 0 rgba(0, 0, 0, 0.45);
  padding: 14px;
  image-rendering: pixelated;
}
.slot--cream {
  background: var(--cream-2);
  box-shadow:
    inset -3px -3px 0 rgba(255, 255, 255, 0.55),
    inset 3px 3px 0 rgba(0, 0, 0, 0.18);
}

/* ── Panel — parchment / signage ────────────────────────────── */
.panel {
  background: var(--cream);
  border: 4px solid var(--stone-1);
  box-shadow:
    inset 4px 4px 0 rgba(255, 255, 255, 0.5),
    inset -4px -4px 0 rgba(0, 0, 0, 0.18),
    6px 6px 0 var(--stone-1);
  padding: 24px;
  position: relative;
}
.panel--dark {
  background: var(--stone-3);
  color: #fff;
  box-shadow:
    inset 4px 4px 0 rgba(255, 255, 255, 0.12),
    inset -4px -4px 0 rgba(0, 0, 0, 0.5),
    6px 6px 0 var(--stone-1);
}
.panel--grass {
  background: var(--grass-2);
  color: #fff;
  box-shadow:
    inset 4px 4px 0 rgba(255, 255, 255, 0.35),
    inset -4px -4px 0 rgba(0, 0, 0, 0.3),
    6px 6px 0 var(--stone-1);
}

/* ── Tag / chip ─────────────────────────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-display);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px 5px;
  background: var(--stone-1);
  color: var(--gold);
  border: 2px solid var(--stone-1);
}
.tag--gold { background: var(--gold); color: var(--stone-1); }
.tag--emerald { background: var(--emerald); color: var(--stone-1); }
.tag--redstone { background: var(--redstone); color: #fff; }
.tag--grass { background: var(--grass-3); color: #fff; }
.tag--sky { background: var(--sky-2); color: var(--stone-1); }

/* ── Live dot ───────────────────────────────────────────────── */
.live-dot {
  width: 10px;
  height: 10px;
  background: #2dd75e;
  border: 2px solid var(--stone-1);
  display: inline-block;
  animation: pulse-live 1.4s steps(2, end) infinite;
}
@keyframes pulse-live {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* ── Pixel-step underline (for headings) ────────────────────── */
.h-underline::after {
  content: '';
  display: block;
  margin-top: 14px;
  width: 80px;
  height: 8px;
  background:
    linear-gradient(90deg, var(--grass-3) 50%, var(--grass-1) 50%);
  border: 2px solid var(--stone-1);
}

/* ── Sky strip backdrop ─────────────────────────────────────── */
.sky-strip {
  background:
    linear-gradient(to bottom, var(--sky-3) 0%, var(--sky-2) 60%, var(--grass-4) 60%, var(--grass-2) 100%);
}

/* ── Container ──────────────────────────────────────────────── */
.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ── Section spacing ────────────────────────────────────────── */
.section {
  padding: 96px 0;
}
.section--tight { padding: 56px 0; }

/* ── Grid helpers ───────────────────────────────────────────── */
.grid { display: grid; gap: 20px; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.g-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 900px) {
  .g-3, .g-4 { grid-template-columns: repeat(2, 1fr); }
  .g-6 { grid-template-columns: repeat(3, 1fr); }
  .section { padding: 64px 0; }
  .wrap { padding: 0 20px; }
}
@media (max-width: 600px) {
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .g-6 { grid-template-columns: repeat(2, 1fr); }
}

/* ── Voxel block (the iconic cube) ──────────────────────────── */
.cube {
  position: relative;
  display: inline-block;
  width: var(--cube-s, 64px);
  height: var(--cube-s, 64px);
  transform-style: preserve-3d;
}
.cube__face {
  position: absolute;
  inset: 0;
  background: var(--cube-c, var(--grass-3));
  border: 2px solid var(--stone-1);
}
.cube__top {
  background: var(--cube-top, var(--grass-4));
  height: 30%;
  border-bottom: 2px solid var(--stone-1);
}
.cube__side {
  top: 30%;
  background: var(--cube-side, var(--dirt-3));
  height: 70%;
  background-image:
    linear-gradient(0deg, var(--dirt-2) 0 8%, transparent 8% 24%, var(--dirt-2) 24% 32%, transparent 32%);
}

/* ── Striped placeholder for imagery ────────────────────────── */
.ph-stripe {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(0, 0, 0, 0.1) 0 8px,
    rgba(0, 0, 0, 0.04) 8px 16px
  );
  background-color: var(--stone-5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mono);
  font-size: 18px;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  padding: 16px;
  border: 3px solid var(--stone-1);
}

/* ── Marquee strip (top) ────────────────────────────────────── */
.marquee {
  display: flex;
  overflow: hidden;
  background: var(--stone-1);
  color: var(--gold);
  border-bottom: 3px solid var(--stone-3);
}
.marquee__track {
  display: flex;
  gap: 48px;
  padding: 8px 0;
  white-space: nowrap;
  animation: scroll-x 40s linear infinite;
  font-family: var(--f-display);
  font-size: 10px;
  letter-spacing: 0.06em;
}
@keyframes scroll-x {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ── Pixel divider ──────────────────────────────────────────── */
.pix-div {
  height: 12px;
  background:
    repeating-linear-gradient(90deg,
      var(--stone-1) 0 12px,
      var(--stone-1) 12px 24px),
    var(--stone-3);
  background-size: 24px 12px, 100% 100%;
  border-top: 3px solid var(--stone-1);
  border-bottom: 3px solid var(--stone-1);
}

/* ── Hero pixel landscape ───────────────────────────────────── */
.landscape {
  position: relative;
  height: 100%;
  width: 100%;
  background:
    linear-gradient(to bottom,
      var(--sky-3) 0%,
      var(--sky-2) 35%,
      var(--sky-2) 50%,
      var(--grass-4) 50%,
      var(--grass-2) 70%,
      var(--dirt-3) 78%,
      var(--dirt-2) 100%);
  overflow: hidden;
  image-rendering: pixelated;
}

/* clouds */
.cloud {
  position: absolute;
  background: #fff;
  box-shadow:
    16px 0 0 #fff,
    32px 0 0 #fff,
    48px 0 0 #fff,
    16px -16px 0 #fff,
    32px -16px 0 #fff;
  width: 16px;
  height: 16px;
  opacity: 0.92;
}

/* mountain (pyramid of pixels) */
.mountain {
  position: absolute;
  bottom: 22%;
  background:
    linear-gradient(180deg, var(--stone-6) 0 15%, var(--stone-5) 15% 50%, var(--stone-4) 50% 100%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* tree */
.tree-leaves {
  position: absolute;
  background: var(--grass-1);
  border: 3px solid var(--stone-1);
  box-shadow: inset 4px 4px 0 var(--grass-2), inset -4px -4px 0 #2a5a14;
}
.tree-trunk {
  position: absolute;
  background: var(--dirt-2);
  border: 3px solid var(--stone-1);
}

/* sun */
.sun {
  position: absolute;
  background: var(--gold);
  border: 3px solid var(--gold-2);
  box-shadow:
    -8px 0 0 var(--gold),
    8px 0 0 var(--gold),
    0 -8px 0 var(--gold),
    0 8px 0 var(--gold);
}

/* ── Section header ─────────────────────────────────────────── */
.sect-eyebrow {
  font-family: var(--f-display);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--grass-2);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.sect-eyebrow::before, .sect-eyebrow::after {
  content: '';
  width: 14px;
  height: 14px;
  background: var(--grass-3);
  border: 2px solid var(--stone-1);
  display: inline-block;
}
.sect-title {
  font-family: var(--f-display);
  font-size: 28px;
  line-height: 1.4;
  margin: 16px 0 12px;
  color: var(--stone-1);
}
.sect-sub {
  font-family: var(--f-body);
  font-size: 17px;
  color: var(--stone-4);
  max-width: 60ch;
  line-height: 1.55;
}
@media (max-width: 700px) {
  .sect-title { font-size: 20px; }
}

/* ── Scrolling hide for navbar shadow ───────────────────────── */
.nav-shadow {
  box-shadow: 0 4px 0 var(--stone-1);
}

/* ============================================================
   ANIMATIONS — parallax hero, potion bubbles, sparkles
   ============================================================ */

/* Floating ornament blocks */
@keyframes float-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
}
@keyframes float-bob-r {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(-3deg); }
}
.float-bob { animation: float-bob 3.6s ease-in-out infinite; }
.float-bob-r { animation: float-bob-r 4.2s ease-in-out infinite; }

/* Sparkle particle */
@keyframes sparkle-rise {
  0% { transform: translateY(0) scale(0); opacity: 0; }
  20% { opacity: 1; transform: translateY(-8px) scale(1); }
  80% { opacity: 0.85; }
  100% { transform: translateY(-90px) scale(0.4); opacity: 0; }
}

/* Potion bubble */
@keyframes bubble-rise {
  0%   { transform: translate(0, 0) scale(0.4); opacity: 0; }
  20%  { opacity: 0.9; }
  60%  { opacity: 0.6; }
  100% { transform: translate(var(--bx, 0), -42px) scale(1); opacity: 0; }
}
.potion-jar {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.1) 0 50%, rgba(0,0,0,0.18) 100%);
}
.bubble {
  position: absolute;
  bottom: 4px;
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255,255,255,0.95);
  animation: bubble-rise 1.8s linear infinite;
}

/* Liquid surface wobble */
@keyframes liquid-wave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

/* Sun pulse */
@keyframes sun-pulse {
  0%, 100% { box-shadow:
    -8px 0 0 var(--gold), 8px 0 0 var(--gold),
    0 -8px 0 var(--gold), 0 8px 0 var(--gold),
    0 0 0 0 rgba(244,196,48,0.6); }
  50% { box-shadow:
    -8px 0 0 var(--gold), 8px 0 0 var(--gold),
    0 -8px 0 var(--gold), 0 8px 0 var(--gold),
    0 0 24px 8px rgba(244,196,48,0.4); }
}
.sun-anim { animation: sun-pulse 2.6s ease-in-out infinite; }

/* Cloud drift */
@keyframes cloud-drift {
  from { transform: translateX(-120px); }
  to { transform: translateX(calc(100vw + 120px)); }
}

/* Steve idle (subtle bob + arm swing) */
@keyframes steve-idle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes steve-arm-l {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-8deg); }
}
@keyframes steve-arm-r {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(8deg); }
}
@keyframes steve-leg-l {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(18deg); }
}
@keyframes steve-leg-r {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-18deg); }
}

/* Walking — same shape but faster + wider */
.steve--walk .steve-arm-l { animation: steve-arm-l 0.42s linear infinite; }
.steve--walk .steve-arm-r { animation: steve-arm-r 0.42s linear infinite; }
.steve--walk .steve-leg-l { animation: steve-leg-l 0.42s linear infinite; }
.steve--walk .steve-leg-r { animation: steve-leg-r 0.42s linear infinite; }
.steve--walk .steve-body { animation: steve-idle 0.42s ease-in-out infinite; }

.steve--idle .steve-arm-l { animation: steve-arm-l 2.4s ease-in-out infinite; }
.steve--idle .steve-arm-r { animation: steve-arm-r 2.4s ease-in-out infinite; }
.steve--idle .steve-body  { animation: steve-idle 2.4s ease-in-out infinite; }

/* ── Card 3D shine / tilt (for item cards) ─────────────────── */
.card-shine {
  position: relative;
  overflow: hidden;
  transition: transform 0.18s cubic-bezier(.2,.7,.2,1.2), box-shadow 0.18s;
}
.card-shine::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.55s ease;
  pointer-events: none;
  z-index: 2;
}
.card-shine:hover::before { transform: translateX(120%); }

.card-shine:hover {
  transform: translate(-3px, -5px);
}

/* Glow ring on slot (rarity) */
.slot--glow {
  position: relative;
}
.slot--glow::after {
  content: '';
  position: absolute;
  inset: -4px;
  background: radial-gradient(circle at center, var(--glow, rgba(244,196,48,0.55)) 0%, transparent 70%);
  z-index: -1;
  filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s;
}
.card-shine:hover .slot--glow::after { opacity: 1; }

/* Item icon hover lift */
.card-shine:hover .item-icon-wrap {
  transform: translateY(-4px) rotate(-2deg) scale(1.06);
}
.item-icon-wrap {
  transition: transform 0.25s cubic-bezier(.2,.7,.2,1.4);
}

/* Rarity flame swirl behind icon */
@keyframes rarity-rotate {
  to { transform: rotate(360deg); }
}
.rarity-rays {
  position: absolute;
  inset: -20%;
  background:
    conic-gradient(from 0deg,
      transparent 0deg, var(--rays, rgba(244,196,48,0.4)) 12deg,
      transparent 24deg, transparent 60deg,
      var(--rays, rgba(244,196,48,0.4)) 72deg, transparent 84deg,
      transparent 120deg,
      var(--rays, rgba(244,196,48,0.4)) 132deg, transparent 144deg,
      transparent 180deg,
      var(--rays, rgba(244,196,48,0.4)) 192deg, transparent 204deg,
      transparent 240deg,
      var(--rays, rgba(244,196,48,0.4)) 252deg, transparent 264deg,
      transparent 300deg,
      var(--rays, rgba(244,196,48,0.4)) 312deg, transparent 324deg);
  filter: blur(10px);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 0;
}
.card-shine:hover .rarity-rays {
  opacity: 0.95;
  animation: rarity-rotate 6s linear infinite;
}

/* Parallax cloud row */
.cloud-row {
  position: absolute; left: 0; right: 0;
  pointer-events: none;
  will-change: transform;
}