/* ============================================================
   STOCKPAWS - Cartoon Playground v2 (matched to the OG mock)
   World: periwinkle sky, drifting clouds, purple castles,
          rolling green hills, floating coins + confetti.
   Cards: cream stickers, purple ribbons, dashed money boxes.
   Type:  Baloo 2 (bubble display) · Nunito (body) · Space Mono
   ============================================================ */

:root{
  --sky-top:#8FC7FF; --sky-mid:#6FA8F5; --sky-low:#7E8FE8;
  --grass:#6DC24B; --grass-deep:#3F9A34; --grass-dark:#2E7D28;
  --purple:#A44DE8; --purple-deep:#7E2FC4; --purple-dark:#5B1E93;
  --pink:#FF5FA2; --pink-deep:#E0347F;
  --sunny:#FFC531; --sunny-deep:#E89B00;
  --cream:#FFF7E8; --cream-2:#FFFDF6; --ink:#4A2B7A; --ink-soft:#8A74B8;
  --green-good:#2FAE4E; --red-bad:#F5484D;
  --r-lg:26px; --r-md:18px; --r-sm:13px;
  --outline:3px solid var(--ink);
  --shadow:0 7px 0 rgba(74,43,122,.30);
  --shadow-sm:0 4px 0 rgba(74,43,122,.26);
  --font-display:"Baloo 2",system-ui,sans-serif;
  --font-body:"Nunito",system-ui,sans-serif;
  --font-mono:"Space Mono",ui-monospace,monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

body{
  font-family:var(--font-body);font-weight:700;color:var(--ink);
  background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 45%,var(--sky-low) 100%);
  min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;
  padding-bottom:84px; /* room for bottom nav */
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
.mono{font-family:var(--font-mono)}

h1,h2,h3{font-family:var(--font-display);line-height:1.06}
h2{font-size:clamp(1.6rem,5.4vw,2.5rem);font-weight:800;text-align:center;
   color:#fff;text-shadow:2.5px 2.5px 0 var(--ink),-1.5px -1.5px 0 var(--ink),1.5px -1.5px 0 var(--ink),-1.5px 1.5px 0 var(--ink),0 5px 0 rgba(74,43,122,.35)}

/* ============ THE WORLD (your art, fixed for the whole site) ============ */
.world{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}

/* mobile: portrait art. desktop: wide art. Fixed => one continuous world while scrolling */
.world-art{
  position:absolute;inset:0;
  background:url("../assets/art/hero-tall.jpg") center center / cover no-repeat;
}
@media (min-width:760px){
  .world-art{background-image:url("../assets/art/hero-wide.jpg")}
}

/* readability scrim so white text and cards sit cleanly on the art everywhere */
.world-veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(38,16,78,.30) 0%,rgba(38,16,78,.44) 46%,rgba(38,16,78,.56) 100%);
}

#fx3d{position:absolute;inset:0;width:100%;height:100%}

/* ============ WORDMARK (bubble letters like the logo) ============ */
.wordmark{font-family:var(--font-display);font-weight:800;font-size:1.28rem;letter-spacing:.5px;white-space:nowrap;display:inline-flex;align-items:baseline;gap:.1em}
.wordmark em{font-style:normal;color:#C566FF;
  text-shadow:2px 2px 0 var(--purple-dark),-1px -1px 0 var(--purple-dark),1px -1px 0 var(--purple-dark),-1px 1px 0 var(--purple-dark)}
.wordmark strong{color:var(--sunny);
  text-shadow:2px 2px 0 #A66300,-1px -1px 0 #A66300,1px -1px 0 #A66300,-1px 1px 0 #A66300}
.o-paw{font-size:.72em}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  font-family:var(--font-display);font-weight:800;font-size:1.02rem;
  padding:.72rem 1.5rem;border-radius:999px;border:var(--outline);
  box-shadow:var(--shadow-sm);color:#fff;background:var(--purple);
  transition:transform .12s ease,box-shadow .12s ease;
  -webkit-tap-highlight-color:transparent;user-select:none;
  text-shadow:1px 1px 0 rgba(0,0,0,.22);
}
.btn:active{transform:translateY(4px);box-shadow:0 0 0 rgba(0,0,0,0)}
.btn:focus-visible{outline:3px dashed var(--pink);outline-offset:3px}
.btn-buy{background:linear-gradient(180deg,var(--sunny),var(--sunny-deep));color:var(--ink);text-shadow:none}
.btn-purple{background:linear-gradient(180deg,var(--purple),var(--purple-deep))}
.btn-connect{background:linear-gradient(180deg,var(--pink),var(--pink-deep));font-size:.92rem;padding:.58rem 1.05rem;white-space:nowrap}
.btn-act{background:var(--cream-2);color:var(--ink);text-shadow:none;padding:.55rem .4rem;font-size:.92rem;border-width:2.5px}
.btn-scan{background:linear-gradient(180deg,var(--pink),var(--pink-deep));color:#fff}
.btn-approve{background:linear-gradient(180deg,#43C767,var(--green-good));flex:1}
.btn-veto{background:linear-gradient(180deg,#FF6B6F,var(--red-bad));flex:1}
.btn-block{width:100%;margin-top:.7rem}
.btn-icon{
  width:42px;height:42px;border-radius:50%;border:2.5px solid var(--ink);
  background:var(--cream-2);font-size:1.15rem;box-shadow:var(--shadow-sm);flex-shrink:0;
}
.btn-icon:active{transform:translateY(3px);box-shadow:none}

/* ============ TOPBAR ============ */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:.7rem;
  padding:.6rem clamp(.8rem,3.5vw,1.8rem);
  background:rgba(255,247,232,.94);backdrop-filter:blur(8px);
  border-bottom:var(--outline);
}
.topnav{display:none;gap:1.2rem;font-family:var(--font-display);font-weight:800}
.topnav a{padding:.2rem .1rem;border-bottom:3px solid transparent}
.topnav a:hover{border-color:var(--pink);color:var(--purple-deep)}
.topbar-right{display:flex;align-items:center;gap:.55rem}

/* ============ HERO ============ */
.hero{position:relative;text-align:center;padding:clamp(1.8rem,6vw,3.6rem) 1rem 0}
.hero-logo{font-family:var(--font-display);font-weight:800;line-height:.92;
  font-size:clamp(3rem,14vw,6rem);letter-spacing:1px;transform:rotate(-2deg);
  display:flex;flex-direction:column;align-items:center;gap:.02em}
.hl-stock{color:#C566FF;
  text-shadow:0 4px 0 var(--purple-dark),3px 3px 0 var(--purple-dark),-2px -2px 0 var(--purple-dark),2px -2px 0 var(--purple-dark),-2px 2px 0 var(--purple-dark),0 9px 0 rgba(74,43,122,.35)}
.hl-paws{color:var(--sunny);
  text-shadow:0 4px 0 #A66300,3px 3px 0 #A66300,-2px -2px 0 #A66300,2px -2px 0 #A66300,-2px 2px 0 #A66300,0 9px 0 rgba(74,43,122,.35)}
.hero-logo{animation:logo-pop .7s cubic-bezier(.34,1.56,.64,1) both}
@keyframes logo-pop{0%{transform:rotate(-2deg) scale(.6);opacity:0}100%{transform:rotate(-2deg) scale(1);opacity:1}}
.hl-paw{font-size:.62em;vertical-align:.06em;text-shadow:none;filter:drop-shadow(2px 2px 0 var(--purple-dark))}
.hero-tag{
  display:inline-block;margin-top:1rem;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;background:var(--cream-2);border:2.5px solid var(--ink);
  border-radius:999px;padding:.42rem .95rem;box-shadow:var(--shadow-sm);
}
.hero-title{margin:1rem 0 .7rem;font-size:clamp(1.5rem,6vw,2.4rem);font-weight:800;color:#fff;
  text-shadow:2.5px 2.5px 0 var(--ink),-1.5px -1.5px 0 var(--ink),1.5px -1.5px 0 var(--ink),-1.5px 1.5px 0 var(--ink)}
.hunt{color:var(--sunny);
  text-shadow:2.5px 2.5px 0 #A66300,-1.5px -1.5px 0 #A66300,1.5px -1.5px 0 #A66300,-1.5px 1.5px 0 #A66300}
.hero-sub{max-width:33rem;margin:0 auto;font-size:1.02rem;font-weight:800;color:#fff;
  text-shadow:1.5px 1.5px 0 rgba(74,43,122,.75)}
.hero-cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.3rem}

.hero-pack{display:flex;justify-content:center;align-items:flex-end;gap:clamp(.1rem,1.5vw,1rem);margin-top:clamp(1.2rem,4vw,2.2rem)}
.pack-pet{width:clamp(72px,20vw,165px);filter:drop-shadow(0 6px 0 rgba(74,43,122,.3));
  animation:bob 3.4s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem;max-width:34rem;margin:1.3rem auto 0;padding:0 .2rem}
.strip-card{background:var(--cream);border:2.5px solid var(--ink);border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);text-align:center;padding:.7rem .3rem}
.strip-big{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(1.15rem,4.4vw,1.7rem);color:var(--purple-deep)}
.strip-small{font-size:.74rem;font-weight:800;color:var(--ink-soft)}

/* ============ SECTIONS ============ */
.section{padding:clamp(2.4rem,7vw,4.4rem) clamp(.9rem,4vw,2rem);max-width:72rem;margin:0 auto;text-align:center}
.ribbon{
  display:inline-block;font-family:var(--font-display);font-weight:800;font-size:.9rem;letter-spacing:.06em;
  color:#fff;background:linear-gradient(180deg,var(--purple),var(--purple-deep));
  border:2.5px solid var(--ink);border-radius:999px;padding:.34rem 1.15rem;margin-bottom:.85rem;
  box-shadow:var(--shadow-sm);text-shadow:1px 1px 0 rgba(0,0,0,.25);transform:rotate(-1.5deg);
}
.section-sub{max-width:32rem;margin:.7rem auto 0;font-weight:800;color:#fff;text-shadow:1.5px 1.5px 0 rgba(74,43,122,.75)}

/* ============ DESK CARD (the mock) ============ */
.desk-card{
  max-width:26.5rem;margin:1.4rem auto 0;padding:1rem;text-align:left;
  background:linear-gradient(180deg,#FFEFF7 0%,var(--cream) 22%);
  border:var(--outline);border-radius:28px;box-shadow:var(--shadow);
}
.desk-head{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.desk-status{display:flex;align-items:center;gap:.45rem;font-family:var(--font-mono);font-size:.74rem}
.dot{width:11px;height:11px;border-radius:50%;background:#D9CFEE;border:2px solid var(--ink);flex-shrink:0}
.dot.on{background:#5BE06B}
.badge{font-family:var(--font-mono);font-size:.68rem;font-weight:700;border:2px solid var(--ink);border-radius:999px;padding:.18rem .55rem;background:#fff}
.badge-lv{background:var(--sunny)}
.badge-sim{background:var(--sunny)}
.desk-notice{margin-top:.7rem;background:#EFFBDC;border:2.5px dashed var(--grass-deep);border-radius:var(--r-sm);padding:.6rem .8rem;font-size:.86rem;font-weight:800}

.desk-pet{display:flex;gap:.85rem;align-items:center;margin-top:.9rem}
.desk-avatar-wrap{flex-shrink:0;background:linear-gradient(180deg,#FFD9EC,#FFC6E2);
  border:3px solid var(--ink);border-radius:22px;padding:7px;box-shadow:var(--shadow-sm)}
.desk-avatar-wrap img{width:84px;height:84px;object-fit:contain}
.desk-id{flex:1;min-width:0}
.desk-id h3{font-size:1.7rem;font-weight:800;color:var(--ink)}
.pet-role-line{font-family:var(--font-display);font-weight:700;font-size:.86rem;color:var(--pink-deep)}
.mood-box{display:inline-flex;align-items:center;gap:.5rem;margin-top:.4rem;
  background:var(--cream-2);border:2.5px dashed var(--ink-soft);border-radius:var(--r-sm);padding:.28rem .7rem}
.mood-label{font-family:var(--font-display);font-weight:800;font-size:.85rem}
.mood-emoji{font-size:1.25rem}

.money-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.9rem}
.money-box{background:var(--cream-2);border-radius:var(--r-md);padding:.55rem .7rem;text-align:center}
.dash-purple{border:2.5px dashed var(--purple)}
.dash-green{border:2.5px dashed var(--green-good)}
.money-label{display:block;font-family:var(--font-display);font-weight:800;font-size:.85rem}
.sim-tag{font-style:normal;font-family:var(--font-mono);font-size:.6rem;background:var(--sunny);border:1.5px solid var(--ink);border-radius:6px;padding:0 .3rem;vertical-align:middle}
.money-val{font-family:var(--font-display);font-weight:800;font-size:1.45rem;color:var(--purple-deep)}
.money-val.pnl{color:var(--green-good)}
.money-val.pnl.neg{color:var(--red-bad)}

.vault-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.6rem}
.vault-box{background:#fff;border:2.5px solid var(--ink);border-radius:var(--r-sm);padding:.5rem .65rem}
.vault-label{display:block;font-size:.66rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft)}
.vault-val{font-weight:900;font-size:.92rem;word-break:break-all}

.xp-row{display:flex;align-items:center;gap:.5rem;margin-top:.8rem}
.xp-label{font-family:var(--font-display);font-weight:800;font-size:.85rem}
.xp-bar,.bar{flex:1;height:14px;background:#EDE4FA;border:2.5px solid var(--ink);border-radius:999px;overflow:hidden}
.xp-bar i,.bar i{display:block;height:100%;background:linear-gradient(90deg,#5BE06B,#38C173);transition:width .4s ease}
.xp-text{font-family:var(--font-mono);font-size:.7rem;white-space:nowrap}

.pet-picker{display:flex;gap:.55rem;margin-top:.9rem}
.pick{width:56px;height:56px;border:2.5px solid var(--ink);border-radius:var(--r-sm);
  background:#fff;padding:5px;box-shadow:var(--shadow-sm);transition:transform .12s ease}
.pick img{width:100%;height:100%;object-fit:contain}
.pick.active{background:#FFE1F0;transform:translateY(-3px);border-color:var(--pink-deep)}
.pick:focus-visible{outline:3px dashed var(--pink);outline-offset:2px}

.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:.9rem}
.stat{background:#fff;border:2.5px solid var(--ink);border-radius:var(--r-sm);padding:.45rem .2rem;text-align:center}
.stat-label{display:block;font-size:.66rem;font-weight:900;color:var(--ink-soft)}
.stat-val{font-family:var(--font-display);font-weight:800;font-size:1.08rem}

.bar-row{display:flex;align-items:center;gap:.6rem;margin-top:.75rem;font-size:.85rem;font-weight:900}
.bar-row>span:first-child{width:76px;text-align:left;font-family:var(--font-display)}
.bar-row>span:last-child{width:40px;text-align:right;font-family:var(--font-mono);font-size:.74rem}
input[type=range]{flex:1;accent-color:var(--pink-deep);height:14px}

.desk-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:.95rem}

.proposal{margin-top:.95rem;background:#fff;border:2.5px solid var(--ink);border-radius:var(--r-md);box-shadow:var(--shadow-sm);padding:.85rem}
.proposal-head{display:flex;justify-content:space-between;align-items:center}
.proposal-head strong{font-family:var(--font-mono);font-size:1.05rem}
.proposal-body{font-family:var(--font-mono);font-size:.95rem;margin:.4rem 0 .7rem}
.proposal-actions{display:flex;gap:.6rem}

.trades{margin-top:.95rem;background:var(--cream-2);border:2.5px solid var(--ink);border-radius:var(--r-md);box-shadow:var(--shadow-sm);padding:1.1rem .8rem .7rem;position:relative}
.trades-ribbon{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%) rotate(-1deg);
  font-family:var(--font-display);font-weight:800;font-size:.85rem;color:#fff;white-space:nowrap;
  background:linear-gradient(180deg,var(--purple),var(--purple-deep));
  border:2.5px solid var(--ink);border-radius:999px;padding:.2rem 1rem;
  text-shadow:1px 1px 0 rgba(0,0,0,.25);
}
.trades ul{list-style:none;margin-top:.3rem}
.trades li{display:flex;align-items:center;gap:.6rem;padding:.42rem .1rem;border-bottom:2px dotted #E4D8F5}
.trades li:last-child{border-bottom:none}
.tchip{width:34px;height:34px;border-radius:9px;border:2.5px solid var(--ink);flex-shrink:0;
  display:grid;place-items:center;font-family:var(--font-display);font-weight:800;color:#fff;font-size:1rem;
  text-shadow:1px 1px 0 rgba(0,0,0,.3)}
.tinfo{flex:1;min-width:0;line-height:1.15}
.tinfo .tk{font-family:var(--font-display);font-weight:800;font-size:.95rem}
.tinfo .dt{font-family:var(--font-mono);font-size:.68rem;color:var(--ink-soft)}
.tpl{font-family:var(--font-display);font-weight:800;font-size:.95rem;white-space:nowrap}
.tpl.pos{color:var(--green-good)}.tpl.neg{color:var(--red-bad)}
.tpaw{font-size:.85rem}
.trade-empty{color:var(--ink-soft);font-weight:800;justify-content:center}

.petlog{margin-top:.95rem;background:var(--ink);color:#D8FBB2;border-radius:var(--r-sm);
  padding:.7rem .85rem;font-family:var(--font-mono);font-size:.76rem;line-height:1.5}
.log-name{color:var(--sunny);font-weight:700;margin-right:.4rem}
.memory-note{margin:.95rem auto 0;max-width:29rem;font-size:.78rem;font-weight:800;color:#fff;text-shadow:1.5px 1.5px 0 rgba(74,43,122,.7)}

/* ============ LOOP ============ */
.loop-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.6rem;text-align:left}
.loop-card{background:var(--cream);border:var(--outline);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:1.1rem 1.2rem}
.loop-num{font-family:var(--font-mono);font-weight:700;color:#fff;border:2.5px solid var(--ink);border-radius:10px;padding:.1rem .5rem;font-size:.8rem}
.n1{background:var(--pink)}.n2{background:var(--sunny);color:var(--ink)}.n3{background:var(--purple)}.n4{background:var(--green-good)}
.loop-card h3{margin:.55rem 0 .3rem;font-size:1.4rem;font-weight:800}
.loop-card p{font-weight:800;color:var(--ink-soft)}

/* ============ PACK ============ */
.pack-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;margin-top:1.6rem}
.pet-card{border:var(--outline);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:1.15rem;text-align:center}
.pc-blue{background:linear-gradient(180deg,#E3F2FF,var(--cream))}
.pc-yellow{background:linear-gradient(180deg,#FFF3D1,var(--cream))}
.pc-green{background:linear-gradient(180deg,#E5FADF,var(--cream))}
.pc-pink{background:linear-gradient(180deg,#FFE3F0,var(--cream))}
.pet-card img{width:min(56%,185px);margin:0 auto .55rem;filter:drop-shadow(0 5px 0 rgba(74,43,122,.22))}
.pet-card h3{font-size:1.6rem;font-weight:800}
.pet-role{font-family:var(--font-display);font-weight:700;font-size:.85rem;color:var(--pink-deep);margin:.1rem 0 .35rem}
.pet-bio{font-weight:800;color:var(--ink-soft)}
.pet-tickers{font-family:var(--font-mono);font-size:.85rem;font-weight:700;color:var(--grass-dark);margin-top:.5rem}

/* ============ TICKERS ============ */
.filter-row{display:flex;align-items:center;gap:.7rem;max-width:26rem;margin:1.2rem auto 0}
.filter-input{flex:1;font-family:var(--font-body);font-weight:800;font-size:.95rem;color:var(--ink);
  background:var(--cream-2);border:2.5px solid var(--ink);border-radius:999px;padding:.6rem 1rem;box-shadow:var(--shadow-sm)}
.filter-input:focus{outline:3px dashed var(--pink);outline-offset:2px}
.filter-count{font-family:var(--font-mono);font-size:.74rem;color:#fff;text-shadow:1.5px 1.5px 0 rgba(74,43,122,.7);white-space:nowrap}
.ticker-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;margin-top:1.1rem}
.ticker-chip{display:flex;align-items:center;gap:.6rem;background:var(--cream-2);border:2.5px solid var(--ink);
  border-radius:var(--r-md);box-shadow:var(--shadow-sm);padding:.6rem .7rem;text-align:left}
.ticker-chip .tchip{width:36px;height:36px}
.ticker-chip .tk{font-family:var(--font-display);font-weight:800;font-size:.98rem;display:block}
.ticker-chip .nm{display:block;font-size:.74rem;font-weight:800;color:var(--ink-soft)}

/* ============ TOKEN ============ */
.proto-card{max-width:29rem;margin:1.5rem auto 0;padding:1.2rem;text-align:left;
  background:var(--cream);border:var(--outline);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.proto-row{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.62rem 0;border-bottom:2px dotted #E4D8F5;font-weight:900}
.proto-row span{color:var(--ink-soft);font-size:.82rem;text-transform:uppercase;letter-spacing:.06em}
.proto-ca strong{font-size:.7rem;text-align:right;word-break:break-all;max-width:64%}
.proto-list{list-style:none;margin-top:.85rem}
.proto-list li{font-weight:800;color:var(--ink-soft);padding:.2rem 0}
.proto-list li::before{content:"🐾";margin-right:.5rem;font-size:.8em}
.socials{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:1rem}
.social{display:flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--font-display);font-weight:800;font-size:.92rem;
  background:#fff;border:2.5px solid var(--ink);border-radius:var(--r-md);box-shadow:var(--shadow-sm);padding:.7rem;transition:transform .12s ease}
.social:active{transform:translateY(3px);box-shadow:none}
.social svg{width:20px;height:20px}

/* ============ FINAL / FOOTER ============ */
.final-card{background:var(--cream);border:var(--outline);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:1.9rem 1.2rem 0;overflow:hidden}
.final-card h2{color:var(--ink);text-shadow:none}
.final-card p{font-weight:800;color:var(--ink-soft);margin:.5rem 0 1rem}
.final-pets{display:flex;justify-content:center;align-items:flex-end;gap:.4rem;margin-top:1.3rem}
.final-pets img{width:clamp(62px,16vw,118px);filter:drop-shadow(0 4px 0 rgba(74,43,122,.22))}
.footer{text-align:center;padding:1.5rem 1.2rem 2rem;font-size:.78rem;font-weight:800;color:#EAF7DC;
  background:var(--grass-dark);border-top:var(--outline)}
.footer p+p{margin-top:.35rem}

/* ============ BOTTOM NAV (mock) ============ */
.bottomnav{
  position:fixed;left:50%;bottom:10px;transform:translateX(-50%);z-index:60;
  display:flex;align-items:flex-end;gap:1.6rem;
  background:rgba(255,247,232,.96);border:var(--outline);border-radius:999px;
  padding:.45rem 1.5rem;box-shadow:var(--shadow);
}
.bn-item{display:flex;flex-direction:column;align-items:center;gap:.06rem;
  font-family:var(--font-display);font-weight:800;font-size:.72rem;color:var(--ink)}
.bn-ico{width:38px;height:38px;display:grid;place-items:center;font-size:1.25rem;
  background:#fff;border:2.5px solid var(--ink);border-radius:12px;box-shadow:var(--shadow-sm)}
.bn-trade{margin-top:-18px}
.bn-paw{width:56px;height:56px;display:grid;place-items:center;font-size:1.7rem;
  background:linear-gradient(180deg,var(--pink),var(--pink-deep));
  border:3px solid var(--ink);border-radius:50%;box-shadow:var(--shadow-sm)}
.bn-item:active .bn-ico,.bn-item:active .bn-paw{transform:translateY(3px);box-shadow:none}

/* ============ MODAL / TOAST ============ */
.modal-backdrop{position:fixed;inset:0;z-index:100;background:rgba(74,43,122,.55);display:grid;place-items:center;padding:1rem}
.modal{width:100%;max-width:24rem;padding:1.2rem;text-align:left;max-height:88vh;overflow:auto;
  background:var(--cream);border:var(--outline);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.modal-head{display:flex;justify-content:space-between;align-items:center}
.modal-head h3{font-weight:800;font-size:1.35rem}
.modal-close{background:#fff;border:2.5px solid var(--ink);border-radius:50%;width:34px;height:34px;font-size:1rem;box-shadow:var(--shadow-sm)}
.modal-sub{font-size:.84rem;font-weight:800;color:var(--ink-soft);margin:.6rem 0 .9rem}
.wallet-list{display:grid;gap:.6rem}
.wallet-opt{display:flex;align-items:center;gap:.7rem;background:#fff;border:2.5px solid var(--ink);
  border-radius:var(--r-md);box-shadow:var(--shadow-sm);padding:.7rem .8rem;
  font-family:var(--font-display);font-weight:800;font-size:.98rem;width:100%;text-align:left;transition:transform .12s ease}
.wallet-opt:active{transform:translateY(3px);box-shadow:none}
.wallet-opt img{width:30px;height:30px;border-radius:8px}
.deeplink-row{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.wallet-status{margin-top:.9rem;background:#EFFBDC;border:2.5px dashed var(--grass-deep);
  border-radius:var(--r-sm);padding:.65rem .8rem;font-size:.84rem;font-weight:800;word-break:break-all}
.wallet-status.err{background:#FFE3E3;border-color:var(--red-bad)}
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:120;
  background:var(--ink);color:#fff;font-family:var(--font-display);font-weight:800;font-size:.92rem;
  border-radius:999px;padding:.7rem 1.3rem;border:2.5px solid #fff;
  box-shadow:0 6px 18px rgba(0,0,0,.3);max-width:90vw;text-align:center}

/* ============ DESKTOP ============ */
@media (min-width:760px){
  body{padding-bottom:0}
  .bottomnav{display:none}
  .topnav{display:flex}
  .loop-grid{grid-template-columns:repeat(2,1fr)}
  .pack-grid{grid-template-columns:repeat(2,1fr)}
  .ticker-grid{grid-template-columns:repeat(4,1fr)}
  .desk-card{max-width:29rem;padding:1.2rem}
  .castle{width:96px;height:190px;bottom:18vh}
}
@media (min-width:1100px){
  .pack-grid{grid-template-columns:repeat(4,1fr)}
  .pet-card img{width:100%;height:225px;object-fit:contain}
  .ticker-grid{grid-template-columns:repeat(5,1fr)}
  .hero-logo{flex-direction:row;gap:.25em}
}

/* ticker chip text wrapper */
.ticker-chip .tx{min-width:0}

/* ============ GENERATED ART INTEGRATION ============ */
.hero{
  position:relative;padding:0;display:flex;flex-direction:column;
  min-height:calc(100vh - 62px);
}
.hero-inner{padding:clamp(1.4rem,5vw,2.6rem) 1rem 0;position:relative;z-index:2}
.hero-spacer{flex:1;min-height:34vh}       /* keeps the art's characters clear of the copy */
.hero .strip{position:relative;z-index:2;margin:0 auto;padding:0 .9rem 1.1rem}
.hero .strip-card{box-shadow:0 4px 0 rgba(30,12,60,.5)}
.hero-logo{filter:drop-shadow(0 8px 16px rgba(24,8,52,.5))}
@media (min-width:760px){
  .hero-spacer{min-height:30vh}
  .hero-inner{padding-top:clamp(1.6rem,4vw,3rem)}
}

/* pack cards use the generated action scenes */
.pet-card .card-art{
  width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  border:3px solid var(--ink);border-radius:20px;box-shadow:var(--shadow-sm);
  margin:0 0 .7rem;filter:none;
}

/* final CTA keeps the charging-banner art */
.final-art{
  position:relative;padding:0;overflow:hidden;
  background:url("../assets/art/banner-tall.jpg") center bottom / cover no-repeat;
  min-height:460px;display:flex;flex-direction:column;
}
.final-overlay{
  padding:1.9rem 1.2rem 0;position:relative;z-index:2;
  background:linear-gradient(180deg,rgba(38,16,78,.5) 0%,rgba(38,16,78,.2) 62%,transparent 100%);
}
.final-art h2{color:#fff;text-shadow:2.5px 2.5px 0 var(--ink),-1.5px -1.5px 0 var(--ink),1.5px -1.5px 0 var(--ink),-1.5px 1.5px 0 var(--ink)}
.final-art p{color:#fff;text-shadow:1.5px 1.5px 0 rgba(38,16,78,.85)}
.final-spacer{flex:1;min-height:250px}
@media (min-width:760px){
  .final-art{background-image:url("../assets/art/banner.jpg");min-height:470px}
  .final-spacer{min-height:240px}
}

/* footer sits on the art, not on a flat green band */
.footer{background:rgba(46,20,90,.72);border-top:var(--outline);color:#F1E7FF;backdrop-filter:blur(3px)}

/* real stock brand marks */
.tchip{overflow:hidden}
.tchip-logo{padding:5px}
.tchip-logo svg{width:100%;height:100%;display:block}
.tchip-text{font-size:.6rem;letter-spacing:.02em;text-shadow:none}
.ticker-chip .tchip-text{font-size:.66rem}

/* ============ AGENT DESK v2 ============ */
.pick{position:relative}
.pick-lv{position:absolute;right:-5px;top:-6px;min-width:20px;height:20px;padding:0 4px;
  display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:.66rem;
  background:var(--sunny);color:var(--ink);border:2px solid var(--ink);border-radius:999px}

.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;margin-top:1rem;
  background:#EDE4FA;border:2.5px solid var(--ink);border-radius:999px;padding:.28rem}
.tab{border:none;background:transparent;border-radius:999px;padding:.5rem .2rem;
  font-family:var(--font-display);font-weight:800;font-size:.86rem;color:var(--ink)}
.tab.active{background:linear-gradient(180deg,var(--pink),var(--pink-deep));color:#fff;
  box-shadow:0 3px 0 rgba(74,43,122,.3);text-shadow:1px 1px 0 rgba(0,0,0,.25)}
.tabpane{margin-top:.85rem}
.pane-hint{font-size:.84rem;font-weight:800;color:var(--ink-soft);margin-bottom:.7rem}

.focus-row{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:.8rem}
.focus-pill{display:inline-flex;align-items:center;gap:.35rem;background:#fff;
  border:2.5px solid var(--ink);border-radius:999px;padding:.32rem .7rem;
  font-family:var(--font-mono);font-size:.76rem;font-weight:700;opacity:.45}
.focus-pill.on{opacity:1;background:#EFFBDC;border-color:var(--green-good);box-shadow:var(--shadow-sm)}

.train-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:.8rem}
.btn-scold{background:#FFE3E3}
.snack-list{display:grid;gap:.55rem}
.snack{display:grid;grid-template-columns:1fr auto;gap:.2rem .5rem;text-align:left;
  background:#fff;border:2.5px solid var(--ink);border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);padding:.6rem .75rem;transition:transform .12s ease}
.snack:active{transform:translateY(3px);box-shadow:none}
.snack-name{font-family:var(--font-display);font-weight:800;font-size:1rem}
.snack-tag{font-family:var(--font-mono);font-size:.62rem;background:#DFF7CE;border:1.5px solid var(--green-good);
  border-radius:6px;padding:0 .35rem;align-self:center;color:var(--grass-dark)}
.snack-eff{grid-column:1/-1;font-family:var(--font-mono);font-size:.7rem;color:var(--ink-soft)}

.amount-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem;margin-bottom:.6rem}
.amt{background:#fff;border:2.5px solid var(--ink);border-radius:var(--r-sm);padding:.5rem .2rem;
  display:grid;gap:.05rem;box-shadow:var(--shadow-sm);font-family:var(--font-display);font-weight:800}
.amt strong{font-size:.9rem}
.amt span{font-size:.6rem;color:var(--ink-soft)}
.amt.active{background:var(--sunny)}
.custom-amt{display:flex;align-items:center;gap:.5rem;margin-bottom:.7rem}
.custom-amt input{flex:1;font-family:var(--font-body);font-weight:800;font-size:.95rem;color:var(--ink);
  background:#fff;border:2.5px solid var(--ink);border-radius:999px;padding:.55rem 1rem}
.amt-unit{font-family:var(--font-display);font-weight:800}
.fund-note{margin-top:.6rem;font-size:.8rem;font-weight:800;word-break:break-word}
.fund-note a{text-decoration:underline;color:var(--purple-deep)}

.chat-log{background:#fff;border:2.5px solid var(--ink);border-radius:var(--r-md);
  padding:.7rem;height:230px;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem}
.bubble{max-width:85%;padding:.5rem .7rem;border-radius:14px;font-size:.88rem;font-weight:700;line-height:1.35;
  border:2px solid var(--ink);white-space:pre-wrap;word-break:break-word}
.bubble.me{align-self:flex-end;background:var(--sunny)}
.bubble.them{align-self:flex-start;background:#EFE6FF}
.chat-empty{color:var(--ink-soft);font-weight:800;font-size:.85rem;margin:auto;text-align:center}
.chat-input-row{display:flex;gap:.5rem;margin-top:.6rem}
.chat-input-row input{flex:1;font-family:var(--font-body);font-weight:700;font-size:.92rem;color:var(--ink);
  background:#fff;border:2.5px solid var(--ink);border-radius:999px;padding:.6rem 1rem}
.chat-input-row .btn{padding:.6rem 1.1rem}

.pt-wrap{display:inline-flex;align-items:center;gap:.25rem;margin:0 .3rem .3rem 0}
.pt{font-family:var(--font-mono);font-size:.78rem;font-weight:700;color:var(--grass-dark)}
.raise-btn{margin-top:.7rem;width:100%;font-size:.92rem;padding:.55rem 1rem}

/* ============ DOCS PAGE ============ */
.docs{max-width:52rem;margin:0 auto;padding:clamp(1.6rem,5vw,3rem) clamp(1rem,4vw,2rem) 3rem}
.docs-title{font-size:clamp(1.9rem,6vw,2.8rem);font-weight:800;color:#fff;text-align:left;
  text-shadow:2.5px 2.5px 0 var(--ink),-1.5px -1.5px 0 var(--ink),1.5px -1.5px 0 var(--ink),-1.5px 1.5px 0 var(--ink)}
.docs-lead{margin-top:.7rem;font-weight:800;color:#fff;text-shadow:1.5px 1.5px 0 rgba(38,16,78,.8)}
.docs-toc{display:flex;flex-wrap:wrap;gap:.45rem;margin:1.2rem 0 1.6rem}
.docs-toc a{background:var(--cream-2);border:2.5px solid var(--ink);border-radius:999px;
  padding:.32rem .8rem;font-family:var(--font-display);font-weight:800;font-size:.82rem;box-shadow:var(--shadow-sm)}
.docs-sec{background:var(--cream);border:var(--outline);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:1.2rem 1.2rem 1.4rem;margin-bottom:1.2rem;scroll-margin-top:80px}
.docs-sec h2{text-align:left;color:var(--ink);text-shadow:none;font-size:clamp(1.3rem,4.5vw,1.8rem);margin-bottom:.7rem}
.docs-sec p{font-weight:700;color:var(--ink-soft);margin-bottom:.7rem}
.docs-sec strong{color:var(--ink)}
.docs-steps,.docs-list{margin:0 0 .7rem 1.1rem;font-weight:700;color:var(--ink-soft)}
.docs-steps li,.docs-list li{margin-bottom:.45rem}
.docs-table{width:100%;border-collapse:collapse;margin:.4rem 0 .9rem;font-size:.86rem}
.docs-table th{background:var(--purple);color:#fff;text-align:left;padding:.5rem .6rem;font-family:var(--font-display)}
.docs-table td{border-bottom:2px dotted #E4D8F5;padding:.5rem .6rem;font-weight:700;color:var(--ink-soft);vertical-align:top}
.docs-table tr:last-child td{border-bottom:none}
.docs-note{background:#FFF3D1;border:2.5px dashed var(--sunny-deep);border-radius:var(--r-sm);padding:.6rem .75rem;font-size:.84rem}
.docs-note code{font-family:var(--font-mono);font-size:.76rem;word-break:break-all}
.docs-agents{display:grid;gap:.9rem}
.docs-agent{display:flex;gap:.8rem;align-items:flex-start;background:#fff;border:2.5px solid var(--ink);
  border-radius:var(--r-md);box-shadow:var(--shadow-sm);padding:.75rem}
.docs-agent img{width:74px;height:74px;object-fit:contain;flex-shrink:0;
  background:linear-gradient(180deg,#FFD9EC,#FFC6E2);border:2px solid var(--ink);border-radius:14px;padding:5px}
.docs-agent h3{font-size:1.25rem;font-weight:800}
.da-role{font-family:var(--font-display);font-size:.82rem;color:var(--pink-deep);font-weight:700}
.da-blurb{font-size:.84rem;font-weight:700;color:var(--ink-soft);margin:.25rem 0 .35rem}
.da-tk{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;font-family:var(--font-mono);font-size:.74rem;font-weight:700;color:var(--grass-dark)}
.da-extra{color:var(--ink-soft);opacity:.85}
.docs-back{text-align:center;margin-top:1.4rem}
.topnav a.on{border-color:var(--pink);color:var(--purple-deep)}
.footer-link{text-decoration:underline}
.docs-body{padding-bottom:0}

@media (min-width:760px){
  .docs-agents{grid-template-columns:1fr 1fr}
}

/* ============ FULL DESK (chat section, separate from the desk) ============ */
.tabs-3{grid-template-columns:repeat(3,1fr)}

.fd-card{
  max-width:29rem;margin:1.4rem auto 0;padding:1.05rem;text-align:left;
  background:linear-gradient(180deg,#EFE6FF 0%,var(--cream) 24%);
  border:var(--outline);border-radius:28px;box-shadow:var(--shadow);
}
.fd-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem}
.fd-pick{
  display:grid;justify-items:center;gap:.15rem;padding:.4rem .2rem;
  background:#fff;border:2.5px solid var(--ink);border-radius:var(--r-sm);
  box-shadow:var(--shadow-sm);font-family:var(--font-display);font-weight:800;font-size:.7rem;
  transition:transform .12s ease;
}
.fd-pick img{width:40px;height:40px;object-fit:contain}
.fd-pick.active{background:#FFE1F0;border-color:var(--pink-deep);transform:translateY(-3px)}
.fd-pick:active{transform:translateY(2px);box-shadow:none}

.fd-head{display:flex;align-items:center;gap:.75rem;margin-top:.9rem}
.fd-avatar{flex-shrink:0;background:linear-gradient(180deg,#FFD9EC,#FFC6E2);
  border:3px solid var(--ink);border-radius:18px;padding:5px;box-shadow:var(--shadow-sm)}
.fd-avatar img{width:58px;height:58px;object-fit:contain}
.fd-id{flex:1;min-width:0}
.fd-id h3{font-size:1.45rem;font-weight:800}
.fd-role{font-family:var(--font-display);font-weight:700;font-size:.82rem;color:var(--pink-deep)}

.fd-bars{margin-top:.8rem;display:grid;gap:.45rem}
.fd-bar{display:flex;align-items:center;gap:.55rem;font-size:.8rem;font-weight:900}
.fd-bar>span{width:62px;font-family:var(--font-display)}
.fd-bar>b{width:32px;text-align:right;font-family:var(--font-mono);font-size:.72rem}

.fd-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem;margin:.9rem 0 .85rem}
.fd-actions .btn{padding:.5rem .15rem;font-size:.82rem}

.chat-quick{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.6rem}
.quick-chip{
  background:#fff;border:2px solid var(--ink);border-radius:999px;
  padding:.28rem .7rem;font-family:var(--font-mono);font-size:.72rem;font-weight:700;
  color:var(--ink);box-shadow:0 2px 0 rgba(74,43,122,.22);transition:transform .12s ease;
}
.quick-chip:active{transform:translateY(2px);box-shadow:none}
.quick-chip:hover{background:#FFE1F0}

@media (min-width:760px){
  .fd-card{max-width:34rem;padding:1.3rem}
  .fd-avatar img{width:70px;height:70px}
}

/* ============ REAL TRADING UI ============ */
.badge-live{background:linear-gradient(180deg,#43C767,var(--green-good));color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.25)}
.prop-sub{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-soft)}
.prop-warn{font-family:var(--font-mono);font-size:.7rem;color:var(--red-bad);font-weight:700}
.prop-note{margin-top:.6rem;font-size:.74rem;font-weight:800;color:var(--ink-soft);line-height:1.35}
.proposal-head strong{display:flex;align-items:center;gap:.4rem}
.size-row{display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem}
.size-label{font-family:var(--font-display);font-weight:800;font-size:.84rem;white-space:nowrap}
.size-amts{display:grid;grid-template-columns:repeat(4,1fr);gap:.35rem;flex:1}
.size-amts .amt{padding:.4rem .1rem}
.size-amts .amt strong{font-size:.8rem}
.tk-price{margin-left:auto;font-family:var(--font-mono);font-size:.76rem;font-weight:700;color:var(--grass-dark)}
.tk-price.halted{color:var(--red-bad)}
.btn-sell-mini{margin-left:8px;padding:4px 12px;font-size:.72rem;font-weight:800;border-radius:10px;background:var(--grass-dark,#0a8f3c);color:#fff;border:none;cursor:pointer;flex:0 0 auto}
.btn-sell-mini:disabled{opacity:.55;cursor:default}
.tk-price.px-up{animation:pxFlashUp 1.2s ease-out}
.tk-price.px-down{animation:pxFlashDown 1.2s ease-out}
@keyframes pxFlashUp{0%{color:#0a8f3c;text-shadow:0 0 8px rgba(10,143,60,.55)}100%{color:var(--grass-dark);text-shadow:none}}
@keyframes pxFlashDown{0%{color:#d3382c;text-shadow:0 0 8px rgba(211,56,44,.55)}100%{color:var(--grass-dark);text-shadow:none}}
.ticker-chip.untradable{opacity:.5}
.tx-link{font-size:1rem;text-decoration:none;padding-left:.3rem}
.trades-ribbon b{font-family:var(--font-mono);font-size:.78rem;margin-left:.3rem}