@font-face{font-family:"Patrick Hand";src:url(assets/fonts/patrick-hand-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Inter";src:url(assets/fonts/inter-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(assets/fonts/inter-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Inter";src:url(assets/fonts/inter-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}

:root{
  --bg:#F0E0D6; --paper:#FFFDF7; --ink:#222; --green:#789922; --post:#F0E0D6; --post-border:#D9BFB7; --maroon:#800000;
  --scribble:"Patrick Hand","Comic Sans MS",cursive; --sans:"Inter",ui-sans-serif,system-ui,sans-serif;
  --radius:14px; --shadow:0 2px 0 #0001,0 8px 24px #0002;
  --banner-h:clamp(76px,9vw,120px); --header-h:92px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--sans);overflow-x:hidden}
body{line-height:1.5}
img{max-width:100%;height:auto}
a{color:inherit}
.container{width:min(1200px,92vw);margin:0 auto}
.scribble{font-family:var(--scribble);font-weight:400}
.green{color:var(--green)}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--paper);padding:.6rem 1rem;border:3px solid var(--green)}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--maroon);outline-offset:3px}

/* ---- banner: slim scrolling strip of the PFP collection ---- */
.banner-top{background:#fff;height:var(--banner-h);overflow:hidden}
.marquee{height:100%;overflow:hidden}
.marquee-track{display:flex;width:max-content;height:100%;animation:marquee 60s linear infinite}
.banner-top:hover .marquee-track,.banner-top:focus-within .marquee-track{animation-play-state:paused}
.tile{display:block;height:var(--banner-h);width:var(--banner-h);flex:none}
.tile img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .2s}
.tile:hover img,.tile:focus-visible img{transform:scale(1.08) rotate(-2deg)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---- header ---- */
.site-header{position:sticky;top:0;z-index:30}
.topbar{background:var(--paper);border-bottom:4px solid var(--green);box-shadow:var(--shadow)}
.topbar-inner{width:min(1200px,92vw);margin:0 auto;display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:.6rem .4rem}
.brand{font-size:clamp(30px,5vw,46px);text-decoration:none;color:var(--ink);line-height:1}
.top-links{display:flex;gap:.7rem}
.nav-link{background:var(--bg);padding:.75rem 1.1rem;border:3px solid var(--green);border-radius:16px;text-decoration:none;color:var(--ink);font-weight:800;box-shadow:3px 3px 0 #0002;font-size:1.3rem;transition:transform .1s}
.nav-link:hover{transform:translateY(-2px)}

/* ---- hero ---- */
.hero{background:var(--paper);border-bottom:4px solid var(--green);padding:1.4rem 0}
.hero-inner{display:grid;gap:2rem;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;width:min(1200px,92vw);margin:0 auto}
.hero-left{position:relative;max-width:520px;width:100%;justify-self:center}
.hero-apu{display:block;width:100%;padding:0;border:4px solid var(--green);border-radius:var(--radius);box-shadow:var(--shadow);background:#fff;cursor:pointer;overflow:hidden;line-height:0}
.hero-apu img{width:100%;display:block;transition:transform .15s}
.hero-apu:active img{transform:scale(.97)}
.hero-apu.shake{animation:shake .45s}
.hero-apu.happy img{animation:hop .5s 2}
@keyframes shake{20%,60%{transform:translateX(-8px) rotate(-2deg)}40%,80%{transform:translateX(8px) rotate(2deg)}}
@keyframes hop{50%{transform:translateY(-14px)}}
.bubble{position:absolute;top:-14px;right:-10px;max-width:72%;margin:0;background:#fff;border:3px solid var(--ink);border-radius:18px;padding:.5rem .9rem;font-size:1.45rem;line-height:1.2;box-shadow:4px 4px 0 #000;z-index:2}
.bubble::after{content:"";position:absolute;left:22px;bottom:-16px;border:8px solid transparent;border-top:10px solid var(--ink);border-left-color:var(--ink)}
.spill{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
h1{font-size:clamp(40px,6.2vw,68px);margin:.2rem 0;line-height:1}
.tagline{font-size:clamp(17px,2.2vw,22px);margin:.5rem 0 1.2rem}
.ca-box{margin:.6rem 0 1rem;padding:1rem;background:var(--bg);border:3px solid var(--green);border-radius:var(--radius);box-shadow:var(--shadow)}
.ca-label{font-weight:700}
.ca-row{display:flex;gap:.8rem;margin-top:.6rem;align-items:center}
.ca-input{flex:1;min-width:0;padding:1rem .8rem;border:2px dashed var(--green);background:#fff;border-radius:12px;font:500 clamp(.78rem,1.05vw,.98rem) ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);text-overflow:ellipsis}
.btn{padding:.9rem 1.15rem;border:3px solid var(--ink);border-radius:16px;text-decoration:none;color:var(--ink);font-weight:800;display:inline-block;box-shadow:4px 4px 0 #000;background:#fff;font-size:1.55rem;line-height:1.1;cursor:pointer;text-align:center;transition:transform .08s,box-shadow .08s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 #000}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 #000}
.btn.copy{font-family:var(--sans);font-size:1.15rem;min-width:7.5rem}
.btn.xl{font-size:1.55rem}
.socials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem;margin-top:.4rem}

/* ---- lore ---- */
.lore{padding:1.2rem 0 1rem}
.lore h2,.pfp h2,.community h2{font-size:clamp(32px,4.6vw,46px);margin:.2rem 0 .5rem;line-height:1.1}
.lore h3{font-size:clamp(26px,3.4vw,34px);margin:1.1rem 0 .4rem}
.lore p{max-width:70ch}
.lore-card{margin:1rem 0;border:5px solid var(--green);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;background:#FFFFEE}
.lore-card figcaption{padding:.7rem 1rem;border-top:3px dashed var(--post-border);font-size:.95rem;background:var(--paper)}

/* 4chan Yotsuba thread */
.thread{padding:1rem;font:13px/1.4 arial,helvetica,sans-serif;color:var(--maroon)}
.thread.collapsed{max-height:125vh;overflow:hidden;position:relative}
.thread.collapsed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:160px;background:linear-gradient(#ffffee00,#ffffee);pointer-events:none}
.thread-toggle{display:block;margin:.2rem auto 1rem;font-size:1.3rem}
.thread-toggle[hidden]{display:none}
.board-title{font:700 28px tahoma,sans-serif;letter-spacing:-1px;text-align:center;color:#AF0A0F;margin:.2rem 0 1rem;padding-bottom:.6rem;border-bottom:1px solid #D9BFB7}
.post{color:var(--maroon);margin:.3rem 0;overflow:hidden}
.post.reply{display:flow-root;width:fit-content;max-width:calc(100% - 1.4rem);min-width:min(420px,calc(100% - 1.4rem));background:var(--post);border:1px solid var(--post-border);border-left:none;border-top:none;padding:.3rem .6rem .5rem;margin-left:1.4rem;overflow:visible}
.post.reply::before{content:">>";float:left;margin-left:-2.1rem;color:#E0BFB7}
.post .file{font-size:12px;margin-bottom:.2rem}
.post .fname{text-decoration:underline;color:var(--maroon)}
.post .file{clear:both}
.fileThumb{float:left;margin:.2rem 1.2rem .4rem 0;line-height:0;cursor:zoom-in}
.fileThumb img{width:auto;height:auto;max-width:125px;max-height:125px;border:none}
.fileThumb.expanded{float:none;display:block;cursor:zoom-out}
.fileThumb.expanded img{max-width:100%;max-height:none}
.post.op .fileThumb img{max-width:250px;max-height:250px}
.post.hl{background:#F0C0B0;border-color:#D99F91}
.flag{vertical-align:-1px;width:16px;height:11px}
.quote{color:var(--green)}
.quotelink.dead{text-decoration:line-through;color:#a55}
.thread-tabs{display:flex;gap:.5rem;flex-wrap:wrap;padding:.8rem 1rem 0;background:#FFFFEE}
.thread-tabs [role="tab"]{font:700 1rem var(--sans);padding:.5rem .9rem;border:2px solid var(--post-border);border-radius:10px;background:var(--post);color:var(--maroon);cursor:pointer}
.thread-tabs [aria-selected="true"]{background:#fff;border-color:var(--green);color:var(--ink);box-shadow:3px 3px 0 #0002}
.postinfo{font-size:13px}
.postinfo .name{color:#117743;font-weight:700}
.post blockquote{margin:.8rem 2rem .6rem 1.2rem;font-size:15px;color:#000}
.quotelink{color:#D00;text-decoration:underline}
.timeline{list-style:none;padding:0;margin:.4rem 0;border-left:4px solid var(--green);max-width:900px}
.timeline li{position:relative;padding:.25rem 0 .5rem 1.4rem}
.timeline li::before{content:"";position:absolute;left:-11px;top:.75rem;width:14px;height:14px;border-radius:50%;background:var(--paper);border:3px solid var(--green)}
.timeline .when{display:block;font-family:var(--scribble);font-size:1.35rem;line-height:1.2;color:var(--green)}
.phrasebook{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.7rem;margin:.6rem 0 1rem}
.phrase-panel{margin:1.2rem 0;padding:.4rem 1rem 1rem;background:#D6DAF0;border:3px solid #B7C5D9;border-radius:var(--radius);box-shadow:var(--shadow)}
.phrase-panel h3{color:#0F0C5D}
.phrasebook>div{background:#EEF2FF;border:3px solid #B7C5D9;border-radius:12px;padding:.6rem .9rem;box-shadow:3px 3px 0 #0001}
.phrasebook dt{color:#0F0C5D}
.phrasebook dt{font-family:var(--scribble);font-size:1.6rem;line-height:1.1}
.phrasebook dd{margin:.15rem 0 0}
.kym-cta{display:flex;gap:.8rem 1.2rem;align-items:center;flex-wrap:wrap;margin:1rem 0 .4rem}
/* Know Your Meme block: KYM's own colours (navy header, red links) inside our frame */
.kym{margin:1.4rem 0 .4rem;padding:.6rem 1.2rem 1.2rem;background:#fff;border:3px solid #14165e;border-radius:var(--radius);box-shadow:var(--shadow)}
.kym h3{color:#14165e}
.kym-lede{margin:.2rem 0 1rem}
.kym-shots{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:1rem;align-items:start}
.kym-shot{display:block;border:2px solid #d8d8e8;border-radius:10px;overflow:hidden;line-height:0;box-shadow:3px 3px 0 #0001;transition:transform .12s}
.kym-shot:hover{transform:translateY(-2px)}
.kym-shot img{width:100%}
.kym-cap{font-size:.85rem;color:#555;margin:.5rem 0 1rem}
.kym-cap a,.kym-card strong{color:#a6191f}
.kym-related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.kym-card{display:flex;flex-direction:column;gap:.3rem;text-decoration:none;color:var(--ink);background:#f7f7fb;border:2px solid #d8d8e8;border-radius:12px;padding:.6rem;font-size:.95rem;transition:transform .12s}
.kym-card:hover{transform:translateY(-2px)}
.kym-card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px}
.kym-card strong{font-size:1.1rem}
.kym-meta{font-size:.8rem;color:#666;text-transform:uppercase;letter-spacing:.04em}
@media (max-width:820px){ .kym-shots,.kym-related{grid-template-columns:1fr} }

/* hidden game: a little pipe with Apu peeking out, tucked above the footer */
.secret-pipe{display:block;margin:0 max(4vw,16px) -4px auto;width:64px;height:78px;padding:0;border:none;background:none;cursor:pointer;position:relative;opacity:.85;transition:opacity .2s}
.secret-pipe:hover,.secret-pipe:focus-visible{opacity:1}
.secret-pipe img{position:absolute;left:4px;top:14px;width:56px;height:auto;transition:top .25s}
.secret-pipe:hover img,.secret-pipe:focus-visible img{top:-4px}
.secret-pipe .pipe{position:absolute;left:0;right:0;bottom:0;height:46px;background:linear-gradient(90deg,#3c8a2c,#6cc24a 45%,#3c8a2c);border:3px solid #1b1b1b;border-bottom:none}
.secret-pipe .pipe::before{content:"";position:absolute;left:-7px;right:-7px;top:-3px;height:14px;background:inherit;border:3px solid #1b1b1b}
.game{padding:0;border:4px solid var(--green);border-radius:var(--radius);background:var(--paper);box-shadow:0 20px 60px #0006;max-width:min(94vw,420px);width:100%}
.game::backdrop{background:#0008}
.game-head{display:flex;align-items:center;justify-content:space-between;padding:.4rem .8rem;border-bottom:3px solid var(--green)}
.game-head h2{margin:0;font-size:2rem}
.game-close{font-size:1.1rem;padding:.4rem .75rem}
#game-canvas{display:block;width:100%;height:auto;max-height:72vh;aspect-ratio:2/3;object-fit:contain;touch-action:manipulation;cursor:pointer;outline:none}
.game-tip{margin:.4rem .8rem .7rem;font-size:.9rem}
.kym-text{margin:0;font-weight:700}

/* ---- pfp ---- */
.pfp{padding:1rem 0 1.8rem;border-top:4px solid var(--green);background:var(--paper)}
.pfp-copy{margin:0 0 .9rem;max-width:75ch}
.pfp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem;align-items:start}
.pfp-controls{background:var(--bg);border:3px solid var(--green);border-radius:var(--radius);box-shadow:var(--shadow)}
.pfp-controls-inner{padding:1rem}
.traits-list{display:grid;grid-template-columns:minmax(0,1fr);gap:.7rem}
.trait{display:flex;gap:1rem;align-items:center}
.trait label{min-width:7.5rem;font-family:var(--scribble);font-size:1.45rem}
.trait select{flex:1;min-width:0;padding:.75rem;border:2px solid var(--green);border-radius:12px;background:#fff;font:inherit;font-size:1.05rem;color:var(--ink)}
.pfp-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.1rem}
.pfp-tip{font-size:.95rem;margin:.8rem 0 0}
.canvas-wrap{width:100%;border:3px dashed var(--green);border-radius:12px;background:#fff;overflow:hidden;line-height:0}
#pfp-img{width:100%;height:auto;display:block;aspect-ratio:1}

/* ---- community / X feed ---- */
.community{padding:1rem 0 1.8rem;border-top:4px solid var(--green);background:var(--bg)}
.community-card{background:var(--paper);border:3px solid var(--green);border-radius:var(--radius);box-shadow:var(--shadow);margin:.8rem 0}
.community-card-inner{padding:1rem}
.xfeed{columns:3 300px;column-gap:1rem}
.xpost{break-inside:avoid;margin:0 0 1rem;background:#fff;border:2px solid #0001;border-radius:14px;padding:.8rem;box-shadow:3px 3px 0 #0002;display:flex;flex-direction:column;gap:.5rem}
.xpost header{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;font-size:.92rem}
.xpost header img{width:32px;height:32px;border-radius:50%}
.xname{font-weight:800}
.xhandle{color:#555}
.xtext{margin:0;white-space:pre-line;font-size:1rem}
.cash,.at{color:#1d7fd1;font-weight:700}
.xmedia{display:block;border-radius:12px;overflow:hidden;border:1px solid #0001;line-height:0}
.xmedia img{width:100%}
.xlink{align-self:flex-end;font-weight:700;color:var(--green);text-decoration:none}
.xlink:hover{text-decoration:underline}

/* ---- footer ---- */
.site-footer{background:var(--paper);border-top:4px solid var(--green);padding:1rem 0 1.4rem}
.meme-line{color:var(--green);font-weight:700;font-size:1.1rem;margin:.3rem 0}
.fine{font-size:.9rem;margin:.3rem 0}
.tendie,.linkish{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer;text-decoration:underline dotted}
.tendie{margin-left:.4rem}

/* ---- easter egg chrome ---- */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;background:#fff;border:3px solid var(--ink);border-radius:16px;box-shadow:4px 4px 0 #000;padding:.6rem 1.1rem;font:1.4rem var(--scribble);max-width:min(92vw,560px);text-align:center}
.rain{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:55;display:none}
.peek{position:fixed;right:18px;bottom:0;z-index:56;width:170px;transform:translateY(calc(100% + 60px));visibility:hidden;transition:transform .45s cubic-bezier(.3,1.6,.6,1),visibility 0s .45s;pointer-events:none}
.peek canvas{width:170px;height:170px;display:block}
.peek span{position:absolute;top:-6px;left:-60px;background:#fff;border:3px solid var(--ink);border-radius:14px;padding:.2rem .7rem;font-size:1.5rem;box-shadow:3px 3px 0 #000}
.peek.show{transform:translateY(25%);visibility:visible;transition:transform .45s cubic-bezier(.3,1.6,.6,1),visibility 0s}
body.apu-speak .tagline,body.apu-speak .lore p{font-family:var(--scribble);font-size:1.2em}

#token,#links,#lore,#pfp,#frens{scroll-margin-top:var(--header-h)}

@media (max-width:980px){
  .nav-link{font-size:1.1rem;padding:.6rem .8rem}
}
@media (max-width:820px){
  :root{--header-h:120px}
  .topbar-inner{flex-direction:column;align-items:stretch;gap:.5rem}
  .brand{text-align:center;font-size:40px}
  .top-links{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.4rem}
  .nav-link{font-size:1rem;padding:.55rem .2rem;text-align:center;border-radius:12px}
  .hero-inner{grid-template-columns:1fr;gap:1.2rem}
  .hero-left{max-width:420px}
  .socials{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pfp-grid{grid-template-columns:minmax(0,1fr)}
  .ca-row{flex-wrap:wrap}
  .ca-input{flex-basis:100%;font-size:min(3.3vw,.9rem);text-overflow:clip;padding:.9rem .5rem}
  .btn.copy{width:100%}
  .pfp-preview{order:-1}
  .trait label{min-width:6rem}
  .btn,.btn.xl{font-size:1.35rem}
  .thread{padding:.6rem}
  .post.reply{margin-left:1rem}
  .post blockquote{margin:.6rem .4rem .4rem .6rem}
  .container{width:100%;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .marquee{overflow-x:auto}
  .marquee-track{animation:none}
  .tile[aria-hidden="true"]{display:none}
  .hero-apu.shake,.hero-apu.happy img{animation:none}
  .peek{transition:none}
}