/* =========================================================================
   CRAFTY — stylesheet. Blocky / pixel GUI theme inspired by crafting-table
   inventory screens: gray inset/outset panel borders, chunky pixel font,
   grass/dirt/stone/diamond palette, 3D tilts and scroll reveals.
   ========================================================================= */

:root{
  --grass:#5aa83c;
  --grass-light:#7cbb4a;
  --dirt:#7a4b2a;
  --dirt-dark:#5c3a1f;
  --stone:#8b8b8b;
  --stone-dark:#4a4a4a;
  --wood:#c99a54;
  --wood-dark:#8a5a2e;
  --diamond:#6cf6f2;
  --diamond-dark:#2fb9c4;
  --gold:#ffdd55;
  --gold-dark:#c99420;
  --redstone:#dc2a1c;
  --bg-deep:#12100d;
  --bg-panel:#211c16;
  --bg-panel-2:#2b2419;
  --panel-border-light:#4f4535;
  --panel-border-dark:#0c0a07;
  --text-main:#f2ecd8;
  --text-dim:#b8ad93;
  --font-pixel:'Press Start 2P', monospace;
  --font-body:'VT323', monospace;
  --radius:2px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg-deep);
  color:var(--text-main);
  font-family:var(--font-body);
  font-size:19px;
  line-height:1.5;
  overflow-x:hidden;
  image-rendering:pixelated;
}
body.no-scroll{ overflow:hidden; height:100vh; }
body.custom-cursor-on, body.custom-cursor-on *{ cursor:none !important; }

img{ max-width:100%; display:block; image-rendering:pixelated; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-pixel); line-height:1.4; margin:0; }
p{ margin:0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:var(--font-body); }
code{ font-family:var(--font-body); }

::selection{ background:var(--gold); color:#231a0e; }

/* ---------------------------------------------------------------- layout */
.section{ position:relative; padding:110px 0; }
.section-inner{ max-width:1180px; margin:0 auto; padding:0 28px; position:relative; z-index:2; }
.section-title{ font-size:clamp(22px,3.4vw,36px); margin-bottom:18px; display:flex; flex-direction:column; gap:10px; }
.section-title.center{ align-items:center; text-align:center; }
.section-title-tag{
  font-size:12px; color:var(--diamond); letter-spacing:2px; background:rgba(108,246,242,.08);
  border:1px solid var(--diamond-dark); padding:6px 10px; width:max-content; border-radius:var(--radius);
}
.section-title.center .section-title-tag{ margin:0 auto; }
.section-lead{ font-size:22px; color:var(--text-dim); max-width:760px; margin-bottom:46px; }
.section-lead.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* scroll reveal */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
[data-reveal].in-view{ opacity:1; transform:translateY(0); }

/* ---------------------------------------------------------------- bg fx */
.bg-particles{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }

/* ---------------------------------------------------------------- pixel panel base */
.pixel-panel, .slot, .pixel-btn, .ca-box, .howto-card, .roadmap-card, .token-stat-card,
.chart-frame, .stat-pill, .book, .toast, .recipe-card{
  border:3px solid var(--panel-border-light);
  border-right-color:var(--panel-border-dark);
  border-bottom-color:var(--panel-border-dark);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.08), inset -2px -2px 0 rgba(0,0,0,.4);
  border-radius:var(--radius);
  background:var(--bg-panel);
}

/* ---------------------------------------------------------------- buttons */
.pixel-btn{
  font-family:var(--font-pixel);
  font-size:12px;
  letter-spacing:.5px;
  color:var(--text-main);
  padding:14px 18px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  cursor:pointer; user-select:none;
  transition:transform .08s ease, filter .15s ease;
  background:var(--bg-panel-2);
  white-space:nowrap;
}
.pixel-btn:hover{ filter:brightness(1.15); }
.pixel-btn:active, .pixel-btn.pressed{
  transform:translateY(3px);
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.4), inset -2px -2px 0 rgba(255,255,255,.05);
}
.pixel-btn.xl{ padding:20px 30px; font-size:15px; }
.pixel-btn svg{ width:16px; height:16px; fill:currentColor; }

.buy-btn{ background:linear-gradient(180deg,var(--grass-light),var(--grass)); color:#12240a; border-color:#9fe07a; }
.buy-btn.nav-buy{ padding:10px 16px; font-size:11px; }
.ghost-btn{ background:transparent; border-color:var(--stone); color:var(--text-main); }
.copy-btn{ font-size:11px; padding:10px 14px; background:var(--bg-panel-2); }
.copy-btn.copied{ background:var(--grass); color:#12240a; }
.danger{ background:linear-gradient(180deg,#e15a4a,#a5342a); color:#fff0e8; border-color:#f29488; }
.gold{ background:linear-gradient(180deg,var(--gold),var(--gold-dark)); color:#332400; border-color:#fff0b0; }

.social-mini{ font-size:11px; padding:11px 14px; }
.social-mini.tg{ background:linear-gradient(180deg,#3fb2e8,#1d84c9); border-color:#8fd8ff; color:#03253d; }
.social-mini.x{ background:linear-gradient(180deg,#3a3a3a,#151515); border-color:#666; color:#fff; }
.social-mini.dex{ background:linear-gradient(180deg,#9a7cf0,#6c4bd6); border-color:#c9b6ff; color:#20123f; }
.social-mini.pump{ background:linear-gradient(180deg,var(--grass-light),var(--grass)); border-color:#9fe07a; color:#12240a; }

.social-big{ font-size:14px; padding:22px 26px; min-width:220px; }
.social-big svg{ width:22px; height:22px; }
.social-big.tg{ background:linear-gradient(180deg,#3fb2e8,#1d84c9); border-color:#8fd8ff; color:#03253d; }
.social-big.x{ background:linear-gradient(180deg,#3a3a3a,#151515); border-color:#666; color:#fff; }
.social-big.dex{ background:linear-gradient(180deg,#9a7cf0,#6c4bd6); border-color:#c9b6ff; color:#20123f; }
.social-big.pump{ background:linear-gradient(180deg,var(--grass-light),var(--grass)); border-color:#9fe07a; color:#12240a; }

/* ---------------------------------------------------------------- header */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:60;
  background:rgba(18,16,13,.55);
  backdrop-filter: blur(6px);
  border-bottom:3px solid var(--panel-border-dark);
  transition:background .3s ease, padding .3s ease;
  padding:10px 0;
}
.site-header.scrolled{ background:rgba(18,16,13,.92); padding:4px 0; }
.header-inner{ max-width:1280px; margin:0 auto; padding:0 24px; display:flex; align-items:center; gap:24px; }
.brand{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.brand-logo{ width:34px; height:34px; border-radius:6px; image-rendering:auto; }
.brand-name{ font-family:var(--font-pixel); font-size:16px; color:var(--grass-light); text-shadow:2px 2px 0 #000; }
.site-nav{ display:flex; align-items:center; gap:20px; }
.nav-link{ font-family:var(--font-pixel); font-size:10.5px; letter-spacing:.5px; color:var(--text-dim); padding:6px 2px; border-bottom:2px solid transparent; }
.nav-link:hover, .nav-link.active{ color:var(--gold); border-bottom-color:var(--gold); }
.nav-social{ display:flex; gap:8px; }
.icon-btn{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; border:2px solid var(--panel-border-light); background:var(--bg-panel-2); border-radius:var(--radius); font-size:16px; line-height:1; cursor:pointer; padding:0; }
.icon-btn svg{ width:16px; height:16px; fill:var(--text-main); }
.icon-btn.tg:hover{ background:#1d84c9; }
.icon-btn.x:hover{ background:#000; }
.mute-btn{ font-family:var(--font-body); }
.mute-btn[aria-pressed="true"]{ border-color:var(--redstone); opacity:.7; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; }
.nav-toggle span{ width:24px; height:3px; background:var(--text-main); }

/* ---------------------------------------------------------------- hero */
.hero-section{ min-height:100vh; display:flex; align-items:center; padding-top:140px; overflow:hidden; }
.hero-bg-blocks{
  position:absolute; inset:-10% -10%; z-index:0;
  background:
    radial-gradient(circle at 15% 20%, rgba(124,187,74,.18), transparent 40%),
    radial-gradient(circle at 85% 30%, rgba(108,246,242,.14), transparent 40%),
    radial-gradient(circle at 50% 90%, rgba(255,221,85,.12), transparent 45%);
}
.hero-inner{ max-width:1280px; margin:0 auto; padding:0 28px; display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center; position:relative; z-index:2; }
.eyebrow{ font-family:var(--font-pixel); font-size:10px; color:var(--diamond); letter-spacing:1.5px; }
.hero-title{ font-size:clamp(36px,6vw,64px); margin:16px 0; display:flex; align-items:center; flex-wrap:wrap; gap:14px; text-shadow:4px 4px 0 #000; color:var(--grass-light); }
.ticker-pill{ font-size:15px; background:var(--bg-panel-2); border:2px solid var(--gold); color:var(--gold); padding:8px 12px; border-radius:var(--radius); }
.hero-sub{ font-size:23px; color:var(--text-dim); max-width:560px; }
.hero-cta-row{ display:flex; gap:16px; flex-wrap:wrap; margin:26px 0; }
.ca-box{ display:flex; align-items:center; gap:12px; padding:14px 16px; max-width:520px; flex-wrap:wrap; }
.ca-label{ font-family:var(--font-pixel); font-size:9px; color:var(--text-dim); }
.ca-value{ font-size:19px; color:var(--gold); flex:1; overflow-wrap:anywhere; }
.ca-value.ca-placeholder{ color:var(--text-dim); font-style:italic; font-size:15px; }
.hero-links{ display:flex; gap:12px; margin-top:20px; flex-wrap:wrap; }

.hero-visual{ position:relative; height:460px; }
.crafting-photo-3d{ position:relative; width:100%; height:100%; border-radius:8px; overflow:hidden; transition:transform .15s ease; will-change:transform; }
.hero-photo{ width:100%; height:100%; object-fit:cover; border:4px solid var(--panel-border-light); border-radius:8px; }
.hero-photo-glow{ position:absolute; inset:0; box-shadow:0 30px 80px -20px rgba(124,187,74,.5), inset 0 0 0 4px rgba(255,255,255,.05); border-radius:8px; pointer-events:none; }
.floating-item{ position:absolute; font-size:34px; filter:drop-shadow(3px 3px 0 rgba(0,0,0,.6)); animation:floaty 4.5s ease-in-out infinite; }
.fi-1{ top:-6%; left:-4%; animation-delay:0s; }
.fi-2{ bottom:6%; right:-6%; animation-delay:.6s; }
.fi-3{ bottom:-8%; left:12%; animation-delay:1.2s; }
.fi-4{ top:14%; right:-8%; animation-delay:1.8s; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-16px) rotate(8deg); } }

.scroll-cue{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; z-index:2; }
.scroll-cue span{ font-family:var(--font-pixel); font-size:9px; color:var(--text-dim); letter-spacing:2px; }
.scroll-cue-arrow{ width:14px; height:14px; border-right:3px solid var(--gold); border-bottom:3px solid var(--gold); transform:rotate(45deg); animation:bounceDown 1.6s ease-in-out infinite; }
@keyframes bounceDown{ 0%,100%{ transform:rotate(45deg) translate(0,0); } 50%{ transform:rotate(45deg) translate(6px,6px); } }

/* ---------------------------------------------------------------- custom cursor */
.custom-cursor{ position:fixed; top:0; left:0; width:32px; height:32px; margin:-6px 0 0 -4px; pointer-events:none; z-index:9999; opacity:0; transition:opacity .2s ease; }
.custom-cursor.hover{ transform-origin:center; filter:drop-shadow(0 0 4px var(--gold)); }
.custom-cursor.swing svg{ animation:swing .18s ease; }
@keyframes swing{ 0%{ transform:rotate(0deg); } 50%{ transform:rotate(-35deg); } 100%{ transform:rotate(0deg); } }
.click-bit{
  position:fixed; width:6px; height:6px; background:var(--wood); top:0; left:0; z-index:9998; pointer-events:none;
  animation:bitfly .5s ease-out forwards;
}
@keyframes bitfly{ to{ transform:translate(var(--dx),var(--dy)) scale(0); opacity:0; } }

/* ---------------------------------------------------------------- GAME */
.game-section{ background:linear-gradient(180deg, rgba(90,168,60,.05), transparent 20%); }
.game-stats-bar{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:30px; }
.stat-pill{ padding:10px 16px; font-size:15px; color:var(--text-dim); }
.stat-pill b{ color:var(--gold); font-family:var(--font-pixel); font-size:12px; margin-left:4px; }

.crafting-panel{ display:grid; grid-template-columns:1fr 1.2fr; gap:28px; align-items:start; }
.palette{ padding:16px; min-height:420px; }
.palette-tabs{ display:flex; gap:8px; margin-bottom:14px; }
.tab-btn{
  font-family:var(--font-pixel); font-size:10px; padding:9px 12px; background:var(--bg-panel-2);
  border:2px solid var(--panel-border-light); border-right-color:var(--panel-border-dark); border-bottom-color:var(--panel-border-dark);
  color:var(--text-dim); cursor:pointer; border-radius:var(--radius);
}
.tab-btn.active{ color:var(--gold); background:#3a3120; border-color:var(--gold); }
.palette-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); gap:8px; max-height:420px; overflow-y:auto; padding-right:4px; }
.palette-empty{ grid-column:1/-1; color:var(--text-dim); font-size:16px; padding:20px 6px; }

.slot{
  position:relative; width:100%; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  background:#2e2717; cursor:pointer; padding:4px;
}
.supply-slot, .inv-slot{ flex-direction:column; gap:2px; }
.slot .item-icon{ width:60%; height:60%; }
.slot-label{ font-size:9px; color:var(--text-dim); text-align:center; line-height:1.1; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.slot-badge{
  position:absolute; bottom:3px; right:3px; font-family:var(--font-pixel); font-size:9px; background:#000; color:var(--gold);
  padding:2px 4px; border-radius:2px; line-height:1;
}
.slot-badge.inf{ color:var(--diamond); }
.slot.selected{ border-color:var(--gold); box-shadow:0 0 0 2px var(--gold), inset 2px 2px 0 rgba(255,255,255,.15); }
.slot:hover{ filter:brightness(1.2); }
.inv-slot.static{ cursor:default; }

.crafting-table-wrap{ display:flex; flex-direction:column; gap:22px; }
.crafting-table-frame{
  display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap;
  padding:26px; background:var(--bg-panel); border:3px solid var(--panel-border-light); border-right-color:var(--panel-border-dark); border-bottom-color:var(--panel-border-dark); border-radius:var(--radius);
}
.crafting-grid{ display:grid; grid-template-columns:repeat(3,64px); grid-template-rows:repeat(3,64px); gap:6px; }
.crafting-grid .slot{ width:64px; height:64px; }
.craft-arrow{ font-size:28px; color:var(--gold); }
.output-slot{ width:76px; height:76px; background:#3a3120; }
.output-slot.has-result{ border-color:var(--gold); box-shadow:0 0 14px rgba(255,221,85,.5), inset 2px 2px 0 rgba(255,255,255,.15); }
.output-slot.pop{ animation:pop .26s ease; }
@keyframes pop{ 0%{ transform:scale(1); } 50%{ transform:scale(1.22); } 100%{ transform:scale(1); } }

.side-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.inventory-panel{ margin-top:40px; padding:20px; }
.inventory-panel h3{ font-size:16px; margin-bottom:16px; color:var(--gold); }
.inventory-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:8px; }
.inventory-grid .slot{ width:64px; height:64px; }

/* ---------------------------------------------------------------- confetti */
.confetti-burst{ position:fixed; top:50%; left:50%; width:0; height:0; z-index:9997; pointer-events:none; }
.confetti-burst span{ position:absolute; width:8px; height:8px; top:0; left:0; animation:confettiFly .95s ease-out forwards; }
@keyframes confettiFly{ to{ transform:translate(var(--dx),var(--dy)) rotate(var(--rot)); opacity:0; } }

/* ---------------------------------------------------------------- toasts */
.toast-container{ position:fixed; bottom:20px; right:20px; z-index:9999; display:flex; flex-direction:column; gap:10px; max-width:320px; }
.toast{ padding:14px 16px; font-size:15px; background:var(--bg-panel); opacity:0; transform:translateX(30px); transition:all .3s ease; }
.toast.show{ opacity:1; transform:translateX(0); }
.toast-success{ border-color:var(--grass-light); }
.toast-warn{ border-color:var(--gold); }
.toast-info{ border-color:var(--diamond); }

/* ---------------------------------------------------------------- recipe book modal */
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:200; display:flex; align-items:center; justify-content:center; padding:20px; }
.modal.hidden{ display:none; }
body.modal-open{ overflow:hidden; }
.book{ width:100%; max-width:900px; max-height:85vh; display:flex; flex-direction:column; background:var(--bg-panel); }
.book-header{ display:flex; align-items:center; gap:14px; padding:18px; border-bottom:3px solid var(--panel-border-dark); }
.book-header h3{ font-size:15px; color:var(--gold); white-space:nowrap; }
.book-header input{
  flex:1; font-family:var(--font-body); font-size:17px; padding:10px 12px; background:#2e2717; border:2px solid var(--panel-border-light);
  color:var(--text-main); border-radius:var(--radius);
}
.icon-close{ background:none; border:none; color:var(--text-main); font-size:18px; cursor:pointer; }
.book-tabs{ display:flex; gap:8px; flex-wrap:wrap; padding:14px 18px 0; }
.book-list{ padding:18px; overflow-y:auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
.recipe-card{ padding:12px; text-align:left; cursor:pointer; background:#2e2717; }
.recipe-card.known{ border-color:var(--grass-light); }
.recipe-card-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.recipe-card-title{ font-size:15px; }
.rc-count{ color:var(--gold); font-size:13px; }
.rc-check{ color:var(--grass-light); }
.mini-shape{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; width:100px; margin:0 auto; }
.mini-cell{ aspect-ratio:1/1; background:#211c16; border:1px solid #000; display:flex; align-items:center; justify-content:center; }
.mini-shapeless{ font-size:12px; color:var(--text-dim); text-align:center; padding:8px 0; grid-column:1/-1; }

/* ---------------------------------------------------------------- how to buy */
.howto-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.howto-card{ padding:26px 20px; position:relative; }
.howto-num{ position:absolute; top:-14px; left:-14px; width:34px; height:34px; background:var(--gold); color:#332400; font-family:var(--font-pixel); font-size:14px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:3px solid var(--bg-deep); }
.howto-icon{ font-size:34px; margin-bottom:12px; }
.howto-card h3{ font-size:15px; margin-bottom:10px; color:var(--grass-light); }
.howto-card p{ font-size:16px; color:var(--text-dim); margin:0; }
.howto-cta{ margin-top:40px; display:flex; justify-content:center; }

/* ---------------------------------------------------------------- tokenomics */
.tokenomics-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:30px; align-items:start; }
.token-stats{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.token-stat-card{ padding:18px; display:flex; flex-direction:column; gap:6px; }
.ts-label{ font-size:13px; color:var(--text-dim); font-family:var(--font-pixel); }
.ts-value{ font-size:20px; color:var(--gold); }
.token-stats .ca-box{ grid-column:1/-1; }
.token-stats > a.ghost-btn{ grid-column:1/-1; text-align:center; }
.chart-frame{ position:relative; min-height:420px; padding:0; overflow:hidden; }
.chart-frame iframe{ width:100%; height:420px; border:0; display:block; }
.chart-frame iframe.hidden{ display:none; }
.chart-placeholder{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:#1a1610; z-index:2; }
.chart-placeholder.hidden{ display:none; }
.chart-placeholder-inner{ text-align:center; padding:30px; color:var(--text-dim); font-size:16px; }
.chart-ph-icon{ font-size:38px; display:block; margin-bottom:10px; }
.chart-placeholder-inner code{ color:var(--gold); }

/* ---------------------------------------------------------------- lore */
.lore-content{ display:grid; grid-template-columns:.8fr 1.2fr; gap:40px; align-items:center; }
.lore-photo{ position:relative; border-radius:8px; overflow:hidden; border:4px solid var(--panel-border-light); }
.lore-photo img{ width:100%; height:100%; object-fit:cover; }
.lore-photo-caption{ position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,.65); color:var(--gold); font-size:13px; padding:8px 10px; text-align:center; }
.lore-text p{ font-size:20px; color:var(--text-dim); }
.lore-quote{ font-family:var(--font-pixel); font-size:14px; color:var(--gold); padding:16px 0; }
.lore-signoff{ color:var(--grass-light) !important; font-style:italic; }

/* ---------------------------------------------------------------- roadmap */
.roadmap-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.roadmap-card{ padding:24px 20px; }
.rm-phase{ font-family:var(--font-pixel); font-size:10px; color:var(--text-dim); }
.roadmap-card h3{ font-size:16px; margin:10px 0 16px; }
.roadmap-card li{ font-size:16px; color:var(--text-dim); padding:6px 0 6px 20px; position:relative; }
.roadmap-card li::before{ content:"▪"; position:absolute; left:0; color:var(--gold); }
.roadmap-card.wood{ border-color:var(--wood); }
.roadmap-card.wood h3{ color:var(--wood); }
.roadmap-card.stone{ border-color:var(--stone); }
.roadmap-card.stone h3{ color:#cfcfcf; }
.roadmap-card.iron{ border-color:#e4e2da; }
.roadmap-card.iron h3{ color:#e4e2da; }
.roadmap-card.diamond{ border-color:var(--diamond); }
.roadmap-card.diamond h3{ color:var(--diamond); }

/* ---------------------------------------------------------------- community */
.community-section{ text-align:center; }
.community-buttons{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }

/* ---------------------------------------------------------------- footer */
.site-footer{ background:#0c0a07; border-top:3px solid var(--panel-border-light); padding:50px 0 20px; }
.footer-inner{ display:grid; grid-template-columns:1fr 1.4fr 1fr; gap:30px; align-items:start; }
.footer-brand{ display:flex; flex-direction:column; gap:6px; }
.footer-brand .brand-logo{ margin-bottom:4px; }
.footer-brand p{ color:var(--text-dim); font-size:15px; }
.footer-nav{ display:flex; flex-wrap:wrap; gap:14px; align-content:flex-start; }
.footer-nav a{ font-family:var(--font-pixel); font-size:10px; color:var(--text-dim); }
.footer-nav a:hover{ color:var(--gold); }
.footer-socials{ display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; }
.footer-ca{ grid-column:1/-1; display:flex; align-items:center; gap:12px; padding:12px 16px; margin-top:10px; flex-wrap:wrap; border:3px solid var(--panel-border-light); border-right-color:var(--panel-border-dark); border-bottom-color:var(--panel-border-dark); }
.footer-copy{ text-align:center; color:var(--text-dim); font-size:13px; margin-top:30px; padding:0 20px; }

/* ---------------------------------------------------------------- loading screen */
.loading-screen{
  position:fixed; inset:0; z-index:10000; background:radial-gradient(circle at 50% 30%, #24361a, #0d0b08 75%);
  display:flex; align-items:center; justify-content:center; transition:opacity .9s ease;
}
.loading-screen.loaded{ opacity:0; pointer-events:none; }
.loading-inner{ display:flex; flex-direction:column; align-items:center; gap:16px; padding:20px; text-align:center; }
.loading-photo-frame{ width:180px; height:130px; border:4px solid var(--panel-border-light); border-radius:6px; overflow:hidden; position:relative; }
.loading-photo{ width:100%; height:100%; object-fit:cover; }
.loading-photo-scan{ position:absolute; left:0; right:0; height:6px; background:linear-gradient(180deg, rgba(124,246,242,0), rgba(124,246,242,.8), rgba(124,246,242,0)); animation:scan 1.8s linear infinite; }
@keyframes scan{ 0%{ top:-6px; } 100%{ top:130px; } }
.loading-gif{ width:64px; height:64px; }
.loading-title{ font-size:26px; color:var(--grass-light); text-shadow:3px 3px 0 #000; letter-spacing:2px; }
.loading-bar-track{ width:260px; height:18px; background:#2e2717; border:3px solid var(--panel-border-light); border-right-color:var(--panel-border-dark); border-bottom-color:var(--panel-border-dark); padding:2px; }
.loading-bar-fill{ height:100%; width:0%; background:linear-gradient(180deg,var(--grass-light),var(--grass)); transition:width .12s linear; }
.loading-meta{ display:flex; justify-content:space-between; width:260px; font-size:14px; color:var(--text-dim); }
.loading-pct{ color:var(--gold); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 980px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-visual{ height:320px; order:-1; }
  .crafting-panel{ grid-template-columns:1fr; }
  .lore-content{ grid-template-columns:1fr; }
  .tokenomics-grid{ grid-template-columns:1fr; }
  .howto-grid{ grid-template-columns:repeat(2,1fr); }
  .roadmap-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-inner{ grid-template-columns:1fr; }
  .footer-socials{ justify-content:flex-start; }
}
@media (max-width: 720px){
  .site-nav{
    position:fixed; top:0; right:-100%; width:78%; max-width:320px; height:100vh; background:#151109;
    flex-direction:column; align-items:flex-start; padding:100px 24px 24px; gap:18px; transition:right .3s ease;
    border-left:3px solid var(--panel-border-light);
  }
  .site-nav.open{ right:0; }
  .nav-social{ margin-top:10px; }
  .nav-toggle{ display:flex; }
  .howto-grid{ grid-template-columns:1fr; }
  .roadmap-grid{ grid-template-columns:1fr; }
  .crafting-grid{ grid-template-columns:repeat(3,50px); grid-template-rows:repeat(3,50px); }
  .crafting-grid .slot{ width:50px; height:50px; }
}

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}