/* Agent World — marketing site styles.
   Self-contained (vanilla, no framework) so the page hosts as a static site.
   Tokens come from the design system's styles.css. */

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;font-family:var(--font-body);color:var(--text-body);
  background-color:var(--bg-base);
  background-image:var(--scanlines),var(--grid-pixel);
  background-size:auto,var(--grid-size);
  -webkit-font-smoothing:antialiased;line-height:var(--leading-normal);
}
img{display:block;}
a{color:var(--teal);text-decoration:none;}
.pixel-art{image-rendering:pixelated;}

.wrap{max-width:var(--maxw-page);margin:0 auto;padding-inline:var(--gutter);}
@media(min-width:900px){.wrap{padding-inline:var(--gutter-lg);}}

/* ---------- type helpers ---------- */
.eyebrow{font-family:var(--font-pixel);font-size:var(--pixel-xs);color:var(--teal);
  letter-spacing:var(--tracking-label);text-transform:uppercase;margin:0 0 var(--space-4);}
.h-pixel{font-family:var(--font-pixel);color:var(--text-strong);line-height:var(--leading-pixel);
  letter-spacing:var(--tracking-pixel);margin:0;}
.h-soft{font-family:var(--font-pixel-soft);font-weight:700;color:var(--text-strong);line-height:1.1;margin:0;}
.lede{font-size:var(--text-xl);color:var(--text-body);max-width:var(--maxw-prose);margin:0;}
.muted{color:var(--text-muted);}
.teal{color:var(--teal);}.amber{color:var(--amber);}.grass{color:var(--grass-bright);}

/* ---------- buttons (mirror PixelButton) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:var(--font-pixel);letter-spacing:var(--tracking-pixel);line-height:1;cursor:pointer;
  border:var(--bw) solid var(--border-strong);border-radius:var(--radius-md);
  background:var(--bg-card);color:var(--text-strong);text-decoration:none;white-space:nowrap;
  box-shadow:var(--shadow-hard);font-size:var(--pixel-sm);padding:14px 22px;
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),filter var(--dur-fast) var(--ease-out),background var(--dur-fast);}
.btn:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow-hard-lg);filter:brightness(1.08);}
.btn:active{transform:translate(2px,2px);box-shadow:var(--shadow-hard-sm);}
.btn:focus-visible{outline:var(--bw) solid var(--teal-bright);outline-offset:3px;}
.btn--lg{font-size:var(--pixel-md);padding:18px 28px;}
.btn--sm{font-size:var(--pixel-xs);padding:10px 14px;}
.btn--primary{background:var(--amber);color:var(--text-on-accent);border-color:var(--amber-deep);box-shadow:var(--shadow-amber);}
.btn--primary:active{box-shadow:2px 2px 0 0 var(--amber-deep);}
.btn--secondary{background:transparent;color:var(--teal);border-color:var(--teal);box-shadow:var(--shadow-teal);}
.btn--secondary:hover{background:var(--teal-dim);}
.btn--secondary:active{box-shadow:2px 2px 0 0 var(--teal-deep);}
.btn--ghost{background:transparent;color:var(--text-body);border-color:var(--border);box-shadow:none;}
.btn--ghost:hover{background:var(--bg-card-hi);box-shadow:none;transform:none;filter:none;}

/* ---------- badge ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-pixel);font-size:var(--pixel-xs);
  line-height:1;letter-spacing:var(--tracking-pixel);padding:6px 9px;border-radius:var(--radius-sm);
  border:var(--bw) solid var(--teal-deep);color:var(--teal);background:var(--teal-dim);white-space:nowrap;}
.badge .dot{width:7px;height:7px;border-radius:var(--radius-sm);background:currentColor;}
.badge--amber{color:var(--amber);background:var(--amber-dim);border-color:var(--amber-deep);}
.badge--neutral{color:var(--text-muted);background:var(--bg-card);border-color:var(--border);}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(8px);
  background:color-mix(in srgb,var(--bg-base) 86%, transparent);
  border-bottom:var(--bw) solid var(--border-faint);}
.nav__inner{display:flex;align-items:center;gap:var(--space-5);height:64px;}
.brand{display:flex;align-items:center;gap:var(--space-3);}
.brand img{width:28px;height:28px;}
.brand b{font-family:var(--font-pixel);font-size:var(--pixel-sm);color:var(--text-strong);letter-spacing:var(--tracking-pixel);}
.nav__links{display:none;gap:var(--space-5);margin-left:auto;}
.nav__links a{font-size:var(--text-sm);color:var(--text-muted);font-weight:500;}
.nav__links a:hover{color:var(--text-strong);}
.nav__cta{margin-left:auto;}
@media(min-width:900px){.nav__links{display:flex;}.nav__cta{margin-left:var(--space-6);}}

/* ---------- sections ---------- */
section{padding-block:var(--section-y);}
.section-head{max-width:var(--maxw-prose);margin:0 auto var(--space-8);text-align:center;}
.section-head .lede{margin-inline:auto;}

/* ---------- hero ---------- */
.hero{position:relative;padding-top:var(--space-9);padding-bottom:0;overflow:hidden;}
.hero__inner{text-align:center;padding-bottom:var(--space-9);}
.hero__title{font-size:clamp(26px,6vw,var(--pixel-xl));margin:var(--space-5) 0;
  text-shadow:0 0 24px rgba(90,209,200,.25);}
.hero__title .ln2{color:var(--amber);text-shadow:0 0 24px rgba(240,180,41,.28);display:block;margin-top:.6em;}
.hero__tag{font-size:clamp(18px,2.6vw,var(--text-2xl));color:var(--text-body);max-width:660px;
  margin:0 auto var(--space-7);}
.hero__cta{display:flex;gap:var(--space-4);justify-content:center;flex-wrap:wrap;}
.hero__meta{display:flex;gap:var(--space-5);justify-content:center;flex-wrap:wrap;margin-top:var(--space-6);
  font-size:var(--text-sm);color:var(--text-muted);}
.hero__meta span{display:inline-flex;align-items:center;gap:8px;}

/* grass strip + walkers */
.grassland{position:relative;height:140px;margin-top:var(--space-7);
  background:var(--grass-dark);
  background-image:url('../../assets/textures/grass-strip.png');
  background-repeat:repeat-x;background-size:auto 100%;
  border-top:var(--bw) solid var(--grass-deep);
  image-rendering:pixelated;}
.grassland::before{content:"";position:absolute;left:0;right:0;top:-48px;height:48px;
  background:linear-gradient(transparent,color-mix(in srgb,var(--grass-dark) 60%,transparent));pointer-events:none;}
.walker{position:absolute;bottom:54px;height:88px;width:auto;image-rendering:pixelated;
  animation:walk-across 18s linear infinite;}
.walker--a{animation-duration:16s;animation-delay:0s;bottom:48px;height:96px;}
.walker--b{animation-duration:22s;animation-delay:-7s;bottom:62px;height:74px;}
@keyframes walk-across{
  0%{left:-120px;transform:scaleX(1);}
  49%{left:calc(100% + 40px);transform:scaleX(1);}
  50%{left:calc(100% + 40px);transform:scaleX(-1);}
  99%{left:-120px;transform:scaleX(-1);}
  100%{left:-120px;transform:scaleX(1);}
}
@media(prefers-reduced-motion:reduce){.walker{animation:none;left:20%;}.walker--b{left:62%;}}

/* ---------- why a world ---------- */
.why{text-align:center;}
.why__big{font-size:clamp(22px,3.4vw,var(--text-3xl));color:var(--text-strong);
  max-width:760px;margin:0 auto;font-weight:600;line-height:1.4;}
.why__big b{color:var(--teal);font-weight:700;}
.why__big .amber{font-weight:700;}

/* ---------- roster grid ---------- */
.roster{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4);}
@media(min-width:680px){.roster{grid-template-columns:repeat(3,1fr);}}
@media(min-width:980px){.roster{grid-template-columns:repeat(6,1fr);gap:var(--space-4);}}
.char{--c:var(--teal);position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  background:var(--bg-card);border:var(--bw) solid var(--border);border-radius:var(--radius-md);
  padding:var(--space-5) var(--space-3) var(--space-4);box-shadow:var(--shadow-hard);cursor:pointer;
  transition:transform var(--dur) var(--ease-pop),box-shadow var(--dur) var(--ease-out),border-color var(--dur),background var(--dur);}
.char:hover,.char.is-selected{transform:translate(-2px,-3px);border-color:var(--c);background:var(--bg-card-hi);
  box-shadow:var(--shadow-hard-lg),0 0 16px -2px var(--c);}
.char__chip{position:absolute;top:9px;right:9px;width:11px;height:11px;border-radius:var(--radius-sm);
  background:var(--c);box-shadow:0 0 8px var(--c);}
.char__stage{width:100%;aspect-ratio:1/1;display:flex;align-items:flex-end;justify-content:center;overflow:visible;
  position:relative;margin-bottom:var(--space-3);
  background:radial-gradient(55% 30% at 50% 96%,color-mix(in srgb,var(--c) 32%,transparent),transparent 72%);}
.char__sprite{position:relative;z-index:1;width:64%;margin-bottom:8%;image-rendering:pixelated;transition:transform var(--dur) var(--ease-pop);}
.char:hover .char__sprite{transform:translateY(-4px) scale(1.05);}
.char__name{font-family:var(--font-pixel-soft);font-weight:700;font-size:var(--text-xl);color:var(--c);margin:0 0 4px;line-height:1;}
.char__role{font-size:var(--text-xs);color:var(--text-muted);margin:0;}

/* ---------- quest steps ---------- */
.quests{display:grid;grid-template-columns:1fr;gap:var(--space-7);margin-top:var(--space-8);}
@media(min-width:780px){.quests{grid-template-columns:repeat(3,1fr);gap:var(--space-5);}}
.quest{--c:var(--amber);position:relative;background:var(--bg-card);border:var(--bw) solid var(--border);
  border-radius:var(--radius-md);box-shadow:var(--shadow-hard);padding:var(--space-7) var(--space-5) var(--space-5);}
.quest__num{position:absolute;top:-16px;left:var(--space-5);font-family:var(--font-pixel);font-size:var(--pixel-sm);
  color:var(--text-on-accent);background:var(--c);border:var(--bw) solid rgba(0,0,0,.35);border-radius:var(--radius-sm);
  padding:8px 10px;line-height:1;box-shadow:var(--shadow-hard-sm);}
.quest__icon{width:48px;height:48px;image-rendering:pixelated;margin:var(--space-2) 0 var(--space-4);}
.quest__title{font-family:var(--font-pixel-soft);font-weight:700;font-size:var(--text-2xl);color:var(--text-strong);margin:0 0 var(--space-2);line-height:1.1;}
.quest__body{font-size:var(--text-base);color:var(--text-body);margin:0;}
.quest__body b{color:var(--c);font-weight:600;}

/* ---------- demo ---------- */
.demo__frame{position:relative;border:var(--bw-thick) solid var(--teal-deep);border-radius:var(--radius-md);
  background:var(--bg-inset);box-shadow:var(--shadow-hard-lg),var(--glow-sm-teal);overflow:hidden;}
.demo__bar{display:flex;align-items:center;gap:var(--space-2);padding:10px 14px;background:var(--bg-surface);
  border-bottom:var(--bw) solid var(--border);}
.demo__dots{display:flex;gap:6px;}
.demo__dots i{width:10px;height:10px;border-radius:var(--radius-sm);display:block;}
.demo__title{font-family:var(--font-pixel);font-size:var(--pixel-xs);color:var(--text-muted);letter-spacing:var(--tracking-pixel);margin-left:4px;}
.demo__shot{width:100%;height:auto;image-rendering:pixelated;display:block;}
.demo__play{position:absolute;inset:38px 0 0;display:flex;align-items:center;justify-content:center;}
.demo__playbtn{width:84px;height:84px;border-radius:var(--radius-sm);border:var(--bw-thick) solid var(--text-on-accent);
  background:var(--amber);box-shadow:var(--shadow-hard-lg);display:grid;place-items:center;cursor:pointer;
  transition:transform var(--dur) var(--ease-pop);}
.demo__playbtn:hover{transform:scale(1.08);}
.demo__playbtn::before{content:"";width:0;height:0;border-style:solid;border-width:18px 0 18px 30px;
  border-color:transparent transparent transparent var(--text-on-accent);margin-left:6px;}
.demo__grid{display:grid;grid-template-columns:1fr;gap:var(--space-7);align-items:center;}
@media(min-width:900px){.demo__grid{grid-template-columns:1.3fr 1fr;gap:var(--space-8);}}
.demo__note .badge{margin-bottom:var(--space-4);}
.callout{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-4);margin-top:var(--space-5);
  background:var(--amber-dim);border:var(--bw) solid var(--amber-deep);border-radius:var(--radius-md);
  font-size:var(--text-sm);color:var(--text-body);}
.callout b{color:var(--amber);}

/* ---------- code block (mirror CodeBlock) ---------- */
.code{border:var(--bw) solid var(--border);border-radius:var(--radius-md);background:var(--bg-inset);
  box-shadow:var(--shadow-hard);overflow:hidden;font-family:var(--font-mono);}
.code__bar{display:flex;align-items:center;gap:var(--space-2);padding:10px 12px;background:var(--bg-surface);border-bottom:var(--bw) solid var(--border);}
.code__dots{display:flex;gap:6px;}
.code__dots i{width:10px;height:10px;border-radius:var(--radius-sm);display:block;}
.code__title{font-family:var(--font-pixel);font-size:var(--pixel-xs);color:var(--text-muted);letter-spacing:var(--tracking-pixel);margin-left:4px;}
.code__copy{margin-left:auto;font-family:var(--font-pixel);font-size:var(--pixel-xs);color:var(--text-muted);
  background:var(--bg-card);border:var(--bw) solid var(--border);border-radius:var(--radius-sm);padding:6px 9px;cursor:pointer;letter-spacing:var(--tracking-pixel);}
.code__copy:hover{color:var(--teal);border-color:var(--teal-deep);}
.code pre{margin:0;padding:var(--space-4) var(--space-5);font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--text-body);overflow-x:auto;white-space:pre;}
.code .pr{color:var(--grass-bright);user-select:none;margin-right:10px;}
.code .cm{color:var(--text-faint);}
.code .st{color:var(--text-strong);}

/* ---------- open source ---------- */
.os__grid{display:grid;grid-template-columns:1fr;gap:var(--space-7);align-items:start;}
@media(min-width:900px){.os__grid{grid-template-columns:1fr 1.1fr;gap:var(--space-8);}}
.os__list{list-style:none;padding:0;margin:var(--space-5) 0 0;display:flex;flex-direction:column;gap:var(--space-4);}
.os__list li{display:flex;gap:var(--space-3);align-items:flex-start;font-size:var(--text-base);color:var(--text-body);}
.os__list .k{width:12px;height:12px;margin-top:5px;flex:none;border-radius:var(--radius-sm);background:var(--teal);box-shadow:0 0 8px var(--teal);}
.os__list .k.amber{background:var(--amber);box-shadow:0 0 8px var(--amber);}
.os__list .k.grass{background:var(--grass);box-shadow:0 0 8px var(--grass);}
.os__list b{color:var(--text-strong);}

/* ---------- footer ---------- */
.footer{border-top:var(--bw) solid var(--border-faint);padding-block:var(--space-7);}
.footer__inner{display:flex;flex-direction:column;gap:var(--space-4);align-items:center;text-align:center;}
@media(min-width:760px){.footer__inner{flex-direction:row;justify-content:space-between;text-align:left;}}
.footer a{color:var(--text-muted);font-size:var(--text-sm);}
.footer a:hover{color:var(--teal);}
.footer__links{display:flex;gap:var(--space-5);flex-wrap:wrap;justify-content:center;}
.footer__made{font-size:var(--text-sm);color:var(--text-faint);}
.footer__made b{color:var(--text-muted);font-weight:600;}