*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{--bk:#0b0b0b;--pa:#f4efe4;--ice:#7fe7ff;--red:#e8202a;--yel:#ffe14d}
html,body{background:#1a1a1a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");color:var(--pa);font-family:Inter,system-ui,sans-serif;min-height:100%}
#frame{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px 0}
#app{position:relative;width:390px;height:844px;overflow:hidden;background:var(--bk);border-radius:34px;outline:3px solid #000;box-shadow:0 0 0 9px #2c2c2c,0 40px 80px rgba(0,0,0,.6)}
#app::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:90;opacity:.09;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='1.1' numOctaves='1'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
.side{font:600 11px Inter;opacity:.6;text-align:center;max-width:380px}
@media(max-width:500px){#frame{padding:0;gap:0}#app{width:100vw;height:100dvh;border-radius:0;box-shadow:none;outline:0}.side{display:none}}
#view{position:absolute;inset:0;overflow-y:auto;padding:108px 16px 40px;scrollbar-width:none}#view::-webkit-scrollbar{display:none}
#view.feedv{padding:0;overflow:hidden}
.pop{animation:pop .18s cubic-bezier(.2,1.4,.4,1)}@keyframes pop{from{opacity:0;transform:scale(.97) translateY(10px)}}
.A{font-family:Anton,Impact,sans-serif;text-transform:uppercase;letter-spacing:.5px;line-height:.95}
.M{font-family:'Permanent Marker',cursive}
h1{font:400 44px Anton,Impact;text-transform:uppercase;line-height:.92}h2{font:400 26px Anton;text-transform:uppercase}
.s{font-size:12.5px}.dim{opacity:.6}.row{display:flex;align-items:center;gap:10px}.sp{justify-content:space-between}
/* top nav */
#nav{position:absolute;left:0;right:0;top:0;z-index:50;padding:14px 12px 8px;background:linear-gradient(#0b0b0b,rgba(11,11,11,.85) 70%,transparent)}
#nav.ov{background:linear-gradient(rgba(0,0,0,.55),transparent)}
.brand{display:flex;align-items:center;justify-content:space-between;padding:0 4px 8px}
.brand b{font:400 26px Anton;letter-spacing:2px}.brand i{font:13px 'Permanent Marker';color:var(--yel);transform:rotate(-4deg);display:inline-block;margin-left:6px}
.bagb{position:relative;background:var(--pa);color:#000;border:2px solid #000;font:400 14px Anton;padding:6px 12px;border-radius:4px;cursor:pointer;box-shadow:3px 3px 0 #000}
.bagb em{position:absolute;top:-8px;right:-8px;background:var(--red);color:#fff;font:700 10px Inter;font-style:normal;border-radius:10px;padding:2px 6px}
.seg{display:flex;background:#000;border:2px solid var(--pa);border-radius:6px;overflow:hidden}
.seg button{flex:1;background:none;border:0;color:var(--pa);font:400 13px Anton;letter-spacing:1px;padding:8px 0;cursor:pointer}
.seg button.on{background:var(--pa);color:#000}
.seg button.plug.on{background:var(--yel)}
/* stickers & buttons */
.stk{display:inline-block;font:400 12px Anton;letter-spacing:1px;padding:4px 9px;background:var(--yel);color:#000;border:2px solid #000;transform:rotate(-3deg);box-shadow:2px 2px 0 #000}
.stk.r{background:var(--red);color:#fff}.stk.i{background:var(--ice)}.stk.w{background:var(--pa)}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;border:2px solid #000;background:var(--pa);color:#000;font:400 18px Anton;letter-spacing:1px;text-transform:uppercase;cursor:pointer;box-shadow:4px 4px 0 #000;border-radius:4px;transition:transform .08s}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 #000}
.btn.y{background:var(--yel)}.btn.r{background:var(--red);color:#fff}.btn.k{background:#000;color:var(--pa);border-color:var(--pa);box-shadow:4px 4px 0 var(--pa)}
.paper{background:var(--pa);color:#111;border:2px solid #000;box-shadow:5px 5px 0 #000;padding:16px;border-radius:3px}
.tape{position:relative}.tape::before{content:'';position:absolute;top:-10px;left:40%;width:70px;height:20px;background:rgba(255,225,77,.75);transform:rotate(-4deg)}
.foot{font:600 10px Inter;opacity:.55;text-align:center;margin:26px 0 10px;line-height:1.5}
/* feed */
.feed{position:absolute;inset:0;overflow-y:scroll;scroll-snap-type:y mandatory;scrollbar-width:none}.feed::-webkit-scrollbar{display:none}
.slide{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;background:#111}
.slide>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide .sh{position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(0,0,0,.85))}
.slide .cap{position:absolute;left:16px;right:70px;bottom:28px}
.slide .cap h1{font-size:50px;text-shadow:3px 3px 0 #000}
.slide .side-r{position:absolute;right:12px;bottom:110px;display:flex;flex-direction:column;gap:18px;align-items:center}
.side-r button{width:46px;height:46px;border-radius:50%;background:rgba(0,0,0,.55);border:2px solid var(--pa);color:var(--pa);font-size:19px;cursor:pointer}
.side-r button.on{background:var(--red);border-color:var(--red)}
.side-r small{display:block;font:700 10px Inter;margin-top:3px;text-align:center}
.hot{position:absolute;transform:translate(-50%,-50%);z-index:3}
.hot>b{display:block;width:26px;height:26px;border-radius:50%;background:var(--yel);border:3px solid #000;cursor:pointer;animation:pl 1.6s infinite}
@keyframes pl{0%{box-shadow:0 0 0 0 rgba(255,225,77,.8)}100%{box-shadow:0 0 0 14px rgba(255,225,77,0)}}
.hot span{position:absolute;left:32px;top:-4px;white-space:nowrap;background:var(--pa);color:#000;font:700 11px Inter;padding:5px 8px;border:2px solid #000;display:none;cursor:pointer}
.hot.open span{display:block}
.prog{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:5px;z-index:4}.prog i{width:4px;height:14px;background:rgba(255,255,255,.3)}.prog i.on{background:var(--yel)}
.hint{position:absolute;bottom:8px;left:0;right:0;text-align:center;font:12px 'Permanent Marker';color:var(--yel);animation:bob 1.2s infinite alternate}@keyframes bob{to{transform:translateY(-4px)}}
.verse{background:#f4efe4;color:#111;display:flex;flex-direction:column;justify-content:center;padding:40px 28px}
/* shop */
.chips{display:flex;gap:8px;overflow-x:auto;margin:6px -16px 14px;padding:0 16px 4px;scrollbar-width:none}
.chip{flex:none;font:400 13px Anton;letter-spacing:1px;padding:7px 13px;border:2px solid var(--pa);background:none;color:var(--pa);cursor:pointer;border-radius:3px}
.chip.on{background:var(--yel);color:#000;border-color:var(--yel)}
.list .it{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px dashed rgba(244,239,228,.25);cursor:pointer}
.list .it img{width:84px;height:104px;object-fit:cover;background:#ddd;border:2px solid var(--pa)}
.list .it .n{font:400 18px Anton;text-transform:uppercase;line-height:1.05}
.price{font:400 22px Anton;color:var(--yel)}
.big2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{cursor:pointer;position:relative}.tile img{width:100%;aspect-ratio:3/4;object-fit:cover;background:#ddd;border:2px solid var(--pa);display:block}.tile .n{font:400 14px Anton;text-transform:uppercase;margin-top:6px;line-height:1.1}.tile .stk{position:absolute;top:8px;left:-4px}
.pd img.main{width:calc(100% + 32px);margin:-108px -16px 0;height:470px;object-fit:cover;display:block;background:#ddd}
.th{display:flex;gap:8px;margin:10px 0}.th img{width:56px;height:70px;object-fit:cover;border:2px solid transparent;cursor:pointer}.th img.on{border-color:var(--yel)}
.sizes{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}.sizes button{min-width:46px;height:40px;border:2px solid var(--pa);background:none;color:var(--pa);font:400 15px Anton;cursor:pointer}.sizes button.on{background:var(--pa);color:#000}
.icb{width:52px;height:52px;flex:none;border:2px solid var(--pa);background:#000;color:var(--pa);font-size:22px;cursor:pointer;border-radius:4px}.icb.on{background:var(--red);border-color:var(--red)}
/* plug chat */
.plughead{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.ava{width:54px;height:54px;flex:none;border-radius:50%;background:var(--yel);border:3px solid #000;box-shadow:3px 3px 0 #000;display:flex;align-items:center;justify-content:center;font:400 18px Anton;color:#000;transform:rotate(-6deg)}
.msgs{display:flex;flex-direction:column;gap:10px;padding-bottom:10px}
.b{max-width:84%;padding:10px 13px;font-size:14px;line-height:1.4;border:2px solid #000;box-shadow:3px 3px 0 #000;border-radius:16px}
.b.me{align-self:flex-end;background:var(--ice);color:#000;border-bottom-right-radius:3px}
.b.ai{align-self:flex-start;background:var(--pa);color:#111;border-bottom-left-radius:3px}
.b.ai .pc{display:flex;gap:8px;margin-top:8px;overflow-x:auto}.b.ai .pc div{flex:none;width:96px;cursor:pointer;font:700 10px Inter}.b.ai .pc img{width:96px;height:120px;object-fit:cover;display:block}
.b.typing{font:15px 'Permanent Marker'}
.sugs{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 12px}.sugs button{font:700 12px Inter;padding:7px 11px;border:2px solid var(--pa);background:none;color:var(--pa);border-radius:20px;cursor:pointer}
.ptt{position:sticky;bottom:0;margin:0 -16px -40px;padding:12px 16px 16px;background:linear-gradient(transparent,#0b0b0b 30%)}
.ptt .row input{flex:1;height:46px;border:2px solid var(--pa);background:#000;color:var(--pa);padding:0 12px;font:14px Inter;border-radius:4px}
.ptt .row button.go{width:46px;height:46px;background:var(--yel);border:2px solid #000;font:400 18px Anton;cursor:pointer;border-radius:4px}
.hold{margin-top:10px;width:100%;height:74px;border-radius:14px;border:3px solid #000;background:var(--yel);color:#000;font:400 22px Anton;letter-spacing:1px;cursor:pointer;box-shadow:5px 5px 0 #000;display:flex;align-items:center;justify-content:center;gap:12px;user-select:none;-webkit-user-select:none;touch-action:none;transition:transform .08s,background .15s}
.hold .led{width:14px;height:14px;border-radius:50%;background:#000}
.hold[data-s=rec]{background:var(--red);color:#fff;transform:scale(.97)}.hold[data-s=rec] .led{background:#fff;animation:bl .5s infinite alternate}
.hold[data-s=think]{background:#333;color:var(--pa)}.hold[data-s=think] .led{background:var(--yel);animation:bl .25s infinite alternate}
.hold[data-s=air]{background:var(--ice)}.hold[data-s=air] .led{background:#000;animation:bl .35s infinite alternate}
@keyframes bl{to{opacity:.2}}
.meter{display:flex;gap:3px;height:22px;align-items:center}.meter i{width:4px;height:100%;background:currentColor;transform:scaleY(.2);transition:transform .08s}
.stline{font:13px 'Permanent Marker';text-align:center;margin-top:8px;color:var(--yel);min-height:18px}
/* fit check, board, wall, drops, club */
.drop{border:3px dashed var(--pa);border-radius:6px;height:260px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;cursor:pointer;overflow:hidden;position:relative}
.drop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.score{font:400 86px Anton;color:var(--yel);line-height:1;text-shadow:4px 4px 0 #000}
.board{position:relative;height:330px;background:#f4efe4;border:2px solid #000;box-shadow:5px 5px 0 #000;overflow:hidden}
.board .slot{position:absolute;left:50%;transform:translateX(-50%);border:2px dashed #999;color:#777;font:13px 'Permanent Marker';display:flex;align-items:center;justify-content:center}
.board .slot img{width:100%;height:100%;object-fit:contain}
.board .slot.on{border-color:transparent}
.tray{display:flex;gap:8px;overflow-x:auto;padding:12px 0;scrollbar-width:none}.tray img{flex:none;width:66px;height:82px;object-fit:cover;border:2px solid var(--pa);cursor:grab;touch-action:none;background:#ddd}
.ghost{position:fixed;width:80px;pointer-events:none;z-index:99;opacity:.9;transform:translate(-50%,-50%) rotate(-5deg);border:2px solid #000}
.wall{columns:2;column-gap:10px}.post{break-inside:avoid;margin-bottom:10px;background:var(--pa);color:#111;padding:6px 6px 10px;border:2px solid #000;box-shadow:3px 3px 0 #000}.post img{width:100%;display:block}.post:nth-child(odd){transform:rotate(-1.2deg)}.post:nth-child(even){transform:rotate(1deg)}
.post b{font:13px 'Permanent Marker'}.post .s{font-size:11px}
.counter{font:400 64px Anton;color:var(--red);line-height:1}
.clock{display:flex;gap:6px}.clock div{flex:1;background:var(--pa);color:#000;border:2px solid #000;text-align:center;padding:6px 0;box-shadow:3px 3px 0 #000}.clock b{font:400 34px Anton;display:block;line-height:1}.clock span{font:700 9px Inter;letter-spacing:1px}
.mem{position:relative;height:220px;border:3px solid #000;box-shadow:6px 6px 0 #000;background:#111 url(img/12_1.webp) center/cover;padding:16px;color:var(--pa);transform:rotate(-1.5deg);overflow:hidden}
.mem::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,rgba(0,0,0,.85),rgba(0,0,0,.35))}.mem>*{position:relative}
#toast{position:absolute;left:50%;bottom:30px;transform:translate(-50%,40px) rotate(-2deg);opacity:0;background:var(--yel);color:#000;border:2px solid #000;box-shadow:3px 3px 0 #000;font:400 15px Anton;letter-spacing:.5px;padding:10px 14px;z-index:95;transition:.2s;white-space:nowrap;max-width:92%;overflow:hidden;text-overflow:ellipsis}#toast.show{opacity:1;transform:translate(-50%,0) rotate(-2deg)}
.splash{position:absolute;inset:0;z-index:98;background:var(--yel);color:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform .35s cubic-bezier(.7,0,.3,1);cursor:pointer}
.splash.out{transform:translateY(-100%)}
.splash h1{font-size:92px;letter-spacing:2px;animation:slam .4s cubic-bezier(.2,1.6,.4,1)}@keyframes slam{from{transform:scale(2.2);opacity:0}}
.feedv>.pop{position:absolute;inset:0}.slide .hot{z-index:3}