/* ===========================================================
   Gemstone Crab - $CRAB
   RuneScape-styled design system
   =========================================================== */

:root{
  --ink:#0b0906; --ink-2:#14100a; --line:#2a2218;
  --paper:#f1e9d6; --mute:#a2957c;
  --gold:#ffd21f; --gold-deep:#c79a0b; --orange:#ff981f; --yellow:#ffe14d;
  --chat-yellow:#ffff00; --chat-cyan:#00ffff; --chat-green:#00ff00; --chat-red:#ff3d3d;
  --stone:#3e3529; --stone-hi:#6b5c43; --stone-lo:#14100a; --edge:#1c1710;
  --tan:#c8b68f; --tan-lo:#9f8e69;

  /* gem palette, sampled from the crab */
  --gem-red:#c4423a; --gem-purple:#b63fb0; --gem-blue:#3b5fc0;
  --gem-green:#3ea56b; --gem-white:#dcdcd4; --gem-shell:#6f7154;

  --rs:"Jersey 15","Jersey 10",monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --gutter:clamp(18px,5vw,72px);
  --max:1180px;
  --shadow:2px 2px 0 rgba(0,0,0,.9);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-size:16px;line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(62,165,107,.16), transparent 62%),
    radial-gradient(900px 560px at 8% 4%, rgba(182,63,176,.11), transparent 60%),
    radial-gradient(1000px 700px at 50% 108%, rgba(59,95,192,.12), transparent 62%);
}
body > *{position:relative;z-index:1}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

h1,h2,h3,.rs,.eyebrow,.cta,.ge h2,.ge-big,.ge-label,.ge-tab,.ge-live,
.graph-head,.graph-tabs button,.slot b,.slot span,.chat-lines,.chat-input,
.chat-name,.delta,.foot-mark,.foot-links a,.nav-links a,.q-steps li,.q-meta,
.quest-head,.skill-row,.drop-row,.drop-head span,.examine,.curve-top,
.lvl b,.lvl span,.toast,.ca code,.crab-card figcaption,.brand b,.tip{
  font-family:var(--rs);
  font-weight:400;
  letter-spacing:.01em;
  text-shadow:var(--shadow);
}

h1{font-size:clamp(54px,8.4vw,120px);line-height:.9;color:var(--yellow)}
h1 em{font-style:normal;color:var(--gem-green)}
h2{font-size:clamp(32px,4.6vw,58px);line-height:1;color:var(--yellow)}
h3{font-size:clamp(21px,2.2vw,27px);line-height:1.05;color:var(--gold);font-family:var(--rs);text-shadow:var(--shadow)}
.eyebrow{font-size:20px;letter-spacing:.12em;color:var(--orange);margin-bottom:14px}
.lede{font-size:clamp(15px,1.35vw,18px);color:#d8cfb8;max-width:62ch;margin-top:18px}
.lede b{color:var(--yellow);font-weight:600}
.wrap{width:min(var(--max),100% - var(--gutter)*2);margin-inline:auto}
section{padding-block:clamp(52px,7vw,100px)}

/* ---------- stone panel (rivet corners) ---------- */
.stone,.ge,.graph,.item,.quest,.skill,.ca,.drops{
  background:
    radial-gradient(circle at 14px 14px, var(--stone-hi) 0 2.5px, transparent 3px),
    radial-gradient(circle at calc(100% - 14px) 14px, var(--stone-hi) 0 2.5px, transparent 3px),
    radial-gradient(circle at 14px calc(100% - 14px), var(--stone-hi) 0 2.5px, transparent 3px),
    radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), var(--stone-hi) 0 2.5px, transparent 3px),
    linear-gradient(180deg,#4a3e2f 0,#33291e 100%);
  border:2px solid var(--edge);
  box-shadow:inset 0 0 0 2px rgba(160,138,96,.28), 0 6px 0 var(--stone-lo);
}

/* ---------- buttons ---------- */
.cta{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 24px;font-size:22px;line-height:1;color:var(--ink);text-shadow:none;
  cursor:pointer;border:2px solid #4a3600;border-radius:0;
  background:linear-gradient(180deg,#ffe26b,#e2ad14);
  box-shadow:inset 0 0 0 2px rgba(255,246,200,.55), inset 0 2px 0 rgba(255,255,255,.35), 0 5px 0 #4a3600;
  transition:transform .08s ease, box-shadow .08s ease, background .2s ease, color .2s ease;
  white-space:nowrap;
}
.cta:hover{background:linear-gradient(180deg,#fff09a,#f0bd1e)}
.cta:active{transform:translateY(5px);box-shadow:inset 0 0 0 2px rgba(255,246,200,.55), inset 0 2px 0 rgba(255,255,255,.35), 0 0 0 #4a3600}
.cta.ghost{
  color:var(--orange);text-shadow:var(--shadow);border-color:#0f0b06;
  background:linear-gradient(180deg,#55462f,#3a2f20);
  box-shadow:inset 0 0 0 2px rgba(160,138,96,.55), inset 0 2px 0 rgba(255,226,160,.14), 0 5px 0 #0f0b06;
}
.cta.ghost:hover{background:linear-gradient(180deg,#63523a,#453726);color:var(--yellow)}
.cta.ghost:active{box-shadow:inset 0 0 0 2px rgba(160,138,96,.55), inset 0 2px 0 rgba(255,226,160,.14), 0 0 0 #0f0b06}
.cta.small{padding:10px 16px;font-size:19px;box-shadow:inset 0 0 0 2px rgba(255,246,200,.55), inset 0 2px 0 rgba(255,255,255,.35), 0 4px 0 #4a3600}
.cta.ghost.small{box-shadow:inset 0 0 0 2px rgba(160,138,96,.55), inset 0 2px 0 rgba(255,226,160,.14), 0 4px 0 #0f0b06}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;gap:16px;
  padding:12px var(--gutter);
  border-bottom:1px solid transparent;
  transition:background .4s ease,border-color .4s ease;
}
.nav.stuck{background:rgba(11,9,6,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom-color:var(--line)}
.brand{display:inline-flex;align-items:center;gap:10px}
.brand img{width:38px;height:38px;border:2px solid var(--edge);box-shadow:0 3px 0 var(--stone-lo);object-fit:cover}
.brand b{font-weight:400;font-size:26px;color:var(--yellow)}
.nav-links{display:flex;align-items:center;gap:24px;margin-left:30px}
.nav-links a{font-size:21px;color:var(--yellow);transition:color .2s ease}
.nav-links a:hover{color:var(--orange)}
.nav .cta{margin-left:auto;padding:10px 16px;font-size:20px;box-shadow:inset 0 0 0 2px rgba(255,246,200,.55), inset 0 2px 0 rgba(255,255,255,.35), 0 4px 0 #4a3600}
.nav .cta:active{transform:translateY(4px)}

/* mobile menu */
.burger{
  display:none;font-family:var(--rs);font-size:19px;line-height:1;padding:10px 14px;cursor:pointer;
  color:var(--orange);text-shadow:var(--shadow);border:2px solid #0f0b06;
  background:linear-gradient(180deg,#55462f,#3a2f20);
  box-shadow:inset 0 0 0 2px rgba(160,138,96,.55), 0 4px 0 #0f0b06;
}
.burger[aria-expanded="true"]{color:var(--yellow)}
.sheet{
  position:fixed;top:62px;left:var(--gutter);right:var(--gutter);z-index:59;
  display:grid;gap:2px;padding:2px;background:var(--edge);
  border:2px solid var(--edge);box-shadow:0 8px 0 rgba(0,0,0,.5);
}
.sheet[hidden]{display:none}
.sheet a{
  padding:13px 16px;font-family:var(--rs);font-size:22px;color:var(--yellow);text-shadow:var(--shadow);
  background:linear-gradient(180deg,#3d3325,#2d2518);
}
.sheet a:active{background:linear-gradient(180deg,#4a3e2d,#34291b);color:var(--orange)}

/* ---------- hero ---------- */
.hero{padding-top:clamp(104px,15vw,160px);padding-bottom:clamp(34px,5vw,60px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);align-items:center}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero-note{margin-top:16px;font-size:13px;color:var(--mute)}
.crab-stage{position:relative;display:grid;place-items:center;isolation:isolate}
.crab-stage::before{
  content:"";position:absolute;inset:4% 0 16%;z-index:-1;
  background:radial-gradient(closest-side, rgba(62,165,107,.34), rgba(182,63,176,.19) 48%, transparent 74%);
  filter:blur(6px);
}
.crab-stage img{
  width:min(470px,100%);
  filter:drop-shadow(0 16px 0 rgba(0,0,0,.4));
  animation:bob 4.6s ease-in-out infinite;
  cursor:pointer;
}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-14px) rotate(1deg)}}
.examine{margin-top:6px;font-size:20px;color:var(--chat-yellow);text-align:center;min-height:1.5em}
.lvls{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.lvl{
  padding:6px 12px;border:2px solid var(--edge);
  background:linear-gradient(180deg,#3d3325,#2d2518);
  box-shadow:inset 0 0 0 1px rgba(160,138,96,.3);
}
.lvl span{display:block;font-size:14px;color:var(--mute);letter-spacing:.08em}
.lvl b{font-size:24px;color:var(--yellow);line-height:1}

/* ---------- Grand Exchange ---------- */
.ge{overflow:hidden;padding:0}
.ge-head{display:flex;align-items:center;gap:12px;padding:12px 18px;background:linear-gradient(180deg,#2e2619,#221c12);border-bottom:2px solid var(--edge);flex-wrap:wrap}
.ge-tab{font-size:16px;padding:3px 9px;color:var(--ink);background:var(--gold);border:1px solid #4a3600;text-shadow:none;font-family:var(--rs)}
.ge h2{font-size:clamp(20px,2.6vw,30px);color:var(--orange)}
.ge-live{margin-left:auto;font-size:16px;color:var(--mute);display:inline-flex;align-items:center;gap:7px}
.ge-live i{width:8px;height:8px;background:var(--chat-green);box-shadow:0 0 8px var(--chat-green);animation:pulse 2s ease-in-out infinite}
.ge-live.err i{background:var(--chat-red);box-shadow:0 0 8px var(--chat-red);animation:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.ge-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr)}
.ge-main{padding:clamp(20px,3vw,34px);display:grid;align-content:center;gap:4px;border-right:2px solid var(--edge);background:rgba(0,0,0,.18)}
.ge-label{font-size:20px;color:var(--orange);letter-spacing:.06em}
.ge-big{font-size:clamp(46px,6.2vw,84px);line-height:.95;color:var(--chat-yellow)}
.ge-big small{font-size:.42em;color:var(--yellow)}
.ge-sub{font-size:13px;font-family:var(--sans);color:var(--mute);text-shadow:none;margin-top:8px;line-height:1.5}
.ge-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;background:var(--edge)}
.slot{
  position:relative;display:grid;gap:2px;align-content:start;padding:15px 14px 13px;text-align:left;border:0;color:inherit;
  background:linear-gradient(180deg,#3d3325,#2d2518);cursor:help;
}
.slot:hover{background:linear-gradient(180deg,#4a3e2d,#34291b)}
.slot span{font-size:15px;letter-spacing:.08em;color:var(--mute)}
.slot b{font-size:clamp(21px,2.2vw,30px);line-height:1;color:var(--yellow)}
.slot b small{font-size:.55em;color:var(--mute)}
.slot.k b{color:#fff}
.slot.m b{color:var(--chat-green)}
.slot.g b{color:#7ee8a8}
.delta{display:block;font-size:.55em;margin-top:5px}
.delta.up{color:var(--chat-green)}
.delta.down{color:var(--chat-red)}
.ge-foot{padding:10px 18px;font-size:12px;color:var(--mute);border-top:2px solid var(--edge);background:#1e1811;line-height:1.6}

/* bonding curve bar */
.curve{padding:14px 18px;border-top:2px solid var(--edge);background:#241d14}
.curve-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:19px}
.curve-top span{color:var(--orange)}
.curve-top b{color:var(--chat-yellow)}
.curve-bar{margin-top:8px;height:18px;border:2px solid var(--edge);background:#15110b;box-shadow:inset 0 0 0 1px rgba(160,138,96,.25);overflow:hidden}
.curve-fill{height:100%;width:0;background:linear-gradient(180deg,#5fd18c,#2b7c4c);box-shadow:inset 0 2px 0 rgba(255,255,255,.28);transition:width .8s cubic-bezier(.16,1,.3,1)}

/* ---------- graph (gp.gold style: parchment canvas) ---------- */
.graph{margin-top:18px;padding:0;overflow:hidden}
.graph-head{display:flex;align-items:center;gap:10px;padding:10px 18px;background:linear-gradient(180deg,#2e2619,#221c12);border-bottom:2px solid var(--edge);font-size:22px;color:var(--orange);flex-wrap:wrap}
.graph-title{margin-right:auto}
.graph-tabs{display:flex;gap:4px;flex-wrap:wrap}
.graph-tabs button{font-size:17px;padding:4px 10px;color:var(--yellow);background:#1b150e;border:1px solid var(--edge);cursor:pointer}
.graph-tabs button:hover{background:#2a2114}
.graph-tabs button.on{color:var(--ink);background:var(--gold);text-shadow:none}
.graph-body{position:relative;height:340px;background:var(--tan)}
.graph-body canvas{width:100%;height:100%;display:block;cursor:crosshair;touch-action:pan-y}
.graph-empty{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--rs);font-size:22px;color:#5a1010;text-shadow:none;pointer-events:none}
.graph-empty[hidden]{display:none}
.tip{
  position:absolute;pointer-events:none;z-index:5;
  font-size:16px;text-shadow:none;line-height:1.35;
  background:#d3c39c;color:#1a1a1a;border:2px solid #5b4a2c;
  box-shadow:inset 0 0 0 2px #a08a5f;padding:6px 9px;white-space:nowrap;
}
.tip[hidden]{display:none}
.tip .up{color:#0c6b23}
.tip .down{color:#9c1010}

/* token switcher sits apart from the view tabs */
.pair-tabs{margin-right:4px}
.pair-tabs button{font-size:19px;padding:5px 13px;border-width:2px}
.pair-tabs button.on{background:linear-gradient(180deg,#ffe26b,#e2ad14);box-shadow:inset 0 0 0 1px rgba(255,246,200,.6)}

/* ---------- paired with $GP ---------- */
.pair{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:stretch;gap:14px;margin-top:34px;
}
.pair-side{
  display:grid;justify-items:center;align-content:start;gap:4px;padding:24px 20px;
  background:
    radial-gradient(circle at 14px 14px, var(--stone-hi) 0 2.5px, transparent 3px),
    radial-gradient(circle at calc(100% - 14px) 14px, var(--stone-hi) 0 2.5px, transparent 3px),
    radial-gradient(circle at 14px calc(100% - 14px), var(--stone-hi) 0 2.5px, transparent 3px),
    radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), var(--stone-hi) 0 2.5px, transparent 3px),
    linear-gradient(180deg,#4a3e2f 0,#33291e 100%);
  border:2px solid var(--edge);
  box-shadow:inset 0 0 0 2px rgba(160,138,96,.28), 0 6px 0 var(--stone-lo);
}
.pair-icon{width:64px;height:64px;filter:drop-shadow(0 4px 0 rgba(0,0,0,.5))}
img.pair-icon{border:2px solid var(--edge);object-fit:cover}
.pair-side b{font-family:var(--rs);font-weight:400;font-size:30px;color:var(--yellow);text-shadow:var(--shadow);margin-top:8px;line-height:1}
.pair-side > span{font-family:var(--sans);font-size:13px;color:var(--mute);letter-spacing:.1em;text-transform:uppercase}
.pair-x{
  align-self:center;font-family:var(--rs);font-size:38px;color:var(--orange);
  text-shadow:var(--shadow);padding:0 2px;
}
.pair-stats{width:100%;margin-top:14px;display:grid;gap:2px;background:var(--edge);border:2px solid var(--edge)}
.pair-stats > div{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:8px 12px;background:linear-gradient(180deg,#3d3325,#2d2518);
}
.pair-stats dt{font-family:var(--sans);font-size:12px;color:var(--mute);letter-spacing:.08em;text-transform:uppercase}
.pair-stats dd{font-family:var(--rs);font-size:22px;color:var(--chat-yellow);text-shadow:var(--shadow);font-variant-numeric:tabular-nums}

.payout{margin-top:22px}
.payout .q-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 26px}
.payout .q-steps li::before{background:var(--gold);border-color:#4a3600;box-shadow:0 0 7px rgba(255,210,31,.45)}

/* ---------- trade tape (RS chatbox) + holders ---------- */
.tape-row{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:18px;align-items:stretch;margin-top:18px}
.chatbox{
  display:flex;flex-direction:column;
  background:var(--tan);border:2px solid #5b4a2c;border-radius:4px;
  box-shadow:inset 0 0 0 2px #a08a5f, inset 0 0 0 3px #6e5a37, 0 5px 0 var(--stone-lo);
  overflow:hidden;
}
.chat-lines{
  flex:1 1 auto;min-height:236px;max-height:320px;padding:10px 14px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;gap:3px;
  font-size:17px;line-height:1.35;
}
.chat-lines div{color:#1a1a1a;text-shadow:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none}
.chat-lines .n{color:#00f}
.chat-lines .buy{color:#0c6b23}
.chat-lines .sell{color:#9c1010}
.chat-lines .y{color:#6e5300}
.chat-lines i{font-style:normal;color:#7a6a4a;margin-left:6px}
.chat-lines .sys{color:#9a0000}
.chat-lines .fresh{animation:flashin .6s ease}
@keyframes flashin{from{background:rgba(255,255,255,.7)}to{background:transparent}}
.chat-input{border-top:2px solid #8b7550;padding:6px 12px;font-size:17px;background:#d3c39c;color:#1a1a1a;text-shadow:none}
.chat-name{color:#1a1a1a;text-shadow:none}
.chat-caret{color:#00f}

.holders{display:flex;flex-direction:column}
.holders-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.holders-head h3{margin:0}
.skill{flex:1 1 auto;padding:15px 16px;display:flex;flex-direction:column;gap:9px}
.skill-row{display:flex;align-items:baseline;gap:10px;font-size:19px;color:var(--yellow)}
.skill-row span{color:var(--mute);font-size:16px;letter-spacing:.06em}
.skill-row b{margin-left:auto;color:var(--chat-yellow)}
.skill-row b.up{color:var(--chat-green)}
.skill-row b.down{color:var(--chat-red)}
.skill-bar{height:12px;border:2px solid var(--edge);background:#15110b;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(160,138,96,.22)}
.skill-bar i{display:block;height:100%;width:0;background:linear-gradient(180deg,#ffe26b,#c79a0b);transition:width .8s cubic-bezier(.16,1,.3,1)}
.skill-bar.two i{background:linear-gradient(180deg,#5fd18c,#2b7c4c)}
.skill-bar.three i{background:linear-gradient(180deg,#ff8a7a,#a8342a)}
.skill-xp{margin-top:auto;padding-top:6px;font-size:12px;font-family:var(--sans);color:var(--mute);line-height:1.55}

/* ---------- what is / bank grid ---------- */
.bank{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:34px}
.item{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;align-items:start;padding:24px;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.item:hover{transform:translateY(-3px)}
.item .gem{grid-row:span 2;width:32px;height:42px;margin-top:5px;filter:drop-shadow(0 4px 0 rgba(0,0,0,.5))}
.item p{color:#d8cfb8;font-size:15px}
.item p b{color:var(--yellow)}

/* ---------- drop table ---------- */
.drops{margin-top:32px;padding:0;overflow:hidden}
.drop-head,.drop-row{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) minmax(0,1.1fr);gap:2px}
.drop-head{background:linear-gradient(180deg,#2e2619,#221c12);border-bottom:2px solid var(--edge)}
.drop-head span{padding:10px 16px;font-size:18px;color:var(--orange);letter-spacing:.06em}
.drop-row{background:var(--edge)}
.drop-row > *{padding:11px 16px;background:linear-gradient(180deg,#3d3325,#2d2518);font-size:19px;color:var(--paper);display:flex;align-items:center;gap:10px;font-family:var(--rs);text-shadow:var(--shadow)}
.drop-row:hover > *{background:linear-gradient(180deg,#4a3e2d,#34291b)}
.drop-row .qty{color:var(--chat-yellow)}
.drop-row .rar{font-size:17px}
.rar.always{color:#fff}
.rar.common{color:#7ee87e}
.rar.uncommon{color:#6fc6ff}
.rar.rare{color:#d58bff}
.rar.vrare{color:#ff9d4d}
.gemdot{width:12px;height:16px;flex:none;clip-path:polygon(50% 0,100% 30%,100% 78%,50% 100%,0 78%,0 30%);box-shadow:inset 0 -3px 0 rgba(0,0,0,.28)}

/* ---------- quest ---------- */
.quest-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,5vw,64px);align-items:center}
.quest{overflow:hidden;padding:0}
.quest-head{padding:12px 18px;font-size:24px;color:var(--orange);background:linear-gradient(180deg,#2e2619,#221c12);border-bottom:2px solid var(--edge)}
.q-steps{list-style:none;padding:16px 20px;display:grid;gap:11px}
.q-steps li{font-size:20px;color:var(--paper);display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;line-height:1.3}
.q-steps li::before{content:"";width:13px;height:13px;margin-top:7px;background:var(--chat-green);border:1px solid #0b3f1c;box-shadow:0 0 7px rgba(0,255,0,.4)}
.q-steps li b{color:var(--yellow)}
.q-meta{padding:10px 20px;border-top:2px solid var(--edge);background:#1e1811;font-size:17px;color:var(--mute)}
.q-reward{padding:12px 20px;font-size:20px;color:var(--chat-yellow);border-top:2px solid var(--edge);background:#241d14;font-family:var(--rs);text-shadow:var(--shadow)}

/* ---------- buy ---------- */
.buy-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,4vw,48px);align-items:center;margin-top:34px}
.ca{padding:18px}
.ca > span{display:block;font-size:13px;color:var(--mute);letter-spacing:.1em;text-transform:uppercase;margin-bottom:9px;font-family:var(--sans);text-shadow:none}
.ca-row{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.ca code{
  flex:1 1 220px;min-width:0;padding:11px 13px;font-size:13px;line-height:1.45;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--chat-yellow);text-shadow:none;
  background:#15110b;border:2px solid var(--edge);word-break:break-all;
}
.buy-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.crab-card{display:grid;place-items:center;padding:0}
.crab-card img{border:2px solid var(--edge);box-shadow:0 6px 0 var(--stone-lo);width:100%}
.crab-card figcaption{margin-top:14px;font-size:19px;color:var(--chat-yellow);text-align:center}

/* ---------- footer ---------- */
.foot{border-top:2px solid var(--line);padding-block:34px;background:rgba(0,0,0,.35)}
.foot-top{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.foot-mark{font-size:30px;color:var(--yellow);font-family:var(--rs);text-shadow:var(--shadow)}
.foot-links{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap}
.foot-links a{font-size:20px;color:var(--orange)}
.foot-links a:hover{color:var(--yellow)}
.smallprint{margin-top:18px;font-size:12px;color:var(--mute);max-width:92ch;line-height:1.7}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:90;
  padding:11px 20px;font-size:20px;color:var(--ink);text-shadow:none;
  background:linear-gradient(180deg,#ffe26b,#e2ad14);border:2px solid #4a3600;
  box-shadow:0 5px 0 #4a3600;
}
.toast[hidden]{display:none}

/* ---------- reveal ---------- */
[data-rise]{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
[data-rise].in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero-grid,.quest-grid,.buy-grid{grid-template-columns:minmax(0,1fr)}
  .crab-stage{order:-1}
  .ge-body{grid-template-columns:minmax(0,1fr)}
  .ge-main{border-right:0;border-bottom:2px solid var(--edge)}
  .ge-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tape-row{grid-template-columns:minmax(0,1fr)}
  .tape-row .holders{order:-1}
  .bank{grid-template-columns:minmax(0,1fr)}
  .nav-links{display:none}
  .burger{display:inline-flex;align-items:center}
  .nav .cta{margin-left:auto}
  .pair{grid-template-columns:minmax(0,1fr)}
  .pair-x{justify-self:center;padding:2px 0}
  .payout .q-steps{grid-template-columns:minmax(0,1fr)}
  .graph-title{order:-1;width:100%;margin-right:0}
  .pair-tabs{margin-right:auto}
}
@media (max-width:420px){
  .nav .cta{padding:8px 11px;font-size:17px}
  .burger{padding:8px 11px;font-size:17px}
  .brand b{font-size:22px}
  .brand img{width:32px;height:32px}
}
@media (max-width:620px){
  h1{font-size:clamp(44px,13vw,76px)}
  .graph-body{height:280px}
  .drop-head,.drop-row{grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr) minmax(0,1fr)}
  .drop-row > *,.drop-head span{padding:9px 11px;font-size:17px}
  .chat-lines{font-size:15px;min-height:200px}
  .foot-links{margin-left:0}
  .ge-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  [data-rise]{opacity:1;transform:none}
}