/* ===================== GAME-JAM LAYER (v10) =====================
   Street, gym floor, xerox flyers, tape, marker, spray tags.
   An original take on the mid-2000s b-boy game atmosphere: no assets, names or layouts copied. */
:root{
  --paper:#F1ECE3; --paper-2:#E5DED2; --line:#D3C9BA; --ink:#16130F; --ink-2:#3A342C; --muted:#6B6258; --black:#13110E;
  --court:#E9B949;
  --grain-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .08 0 0 0 0 .05 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --halftone:radial-gradient(circle,rgba(0,0,0,.22) 1.1px,transparent 1.6px) 0 0/6px 6px;
}
html,body{background:var(--paper)}
body{background-image:var(--grain-d)}
.sec.alt{background:#DAD3C7;background-image:var(--grain-d),repeating-linear-gradient(90deg,transparent 0 119px,rgba(0,0,0,.035) 119px 121px)}

/* rough ink for big type */
.hero-h,.phead h1,.sec-h h2,.band h2{filter:url(#rough)}
.sec-h h2{position:relative;padding-bottom:10px}
.sec-h h2::after{content:"";position:absolute;left:-4px;bottom:0;width:min(220px,80%);height:12px;background:var(--red);clip-path:polygon(0 40%,6% 15%,30% 30%,55% 5%,80% 25%,100% 0,98% 70%,75% 95%,50% 75%,25% 100%,4% 85%);opacity:.95}

/* page heads: a tag on the wall */
.phead{background:#1A1714;background-image:var(--grain),linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(0,0,0,.35))}
.phead::before{content:attr(data-tag);position:absolute;left:-1%;bottom:-0.18em;font:400 clamp(110px,21vw,290px)/1 var(--f-spray);color:rgba(255,255,255,.07);transform:rotate(-5deg);white-space:nowrap;pointer-events:none;z-index:0}

/* hero: cipher circle on the floor, warmer duotone */
.hero-img{filter:grayscale(1) sepia(.35) contrast(1.25) brightness(.85)}
.cipher{position:absolute;right:6%;top:50%;width:min(46vw,520px);transform:translateY(-46%) rotate(-8deg);z-index:0;pointer-events:none;overflow:visible}
.cipher circle{fill:none;stroke:var(--court);stroke-width:7;stroke-linecap:round;stroke-dasharray:1060 80;opacity:.9;filter:url(#rough)}
@media (max-width:640px){ .cipher{right:-22%;width:78vw;opacity:.7} }

/* ticker: a strip of tape across the page */
.ticker{transform:rotate(-1.1deg) scale(1.02);box-shadow:0 6px 14px rgba(0,0,0,.25);margin-block:-6px 6px;position:relative;z-index:2;background-image:var(--grain)}

/* buttons: drawn with a marker */
.btn{border-radius:255px 18px 225px 18px/18px 225px 18px 255px;border-width:3px;box-shadow:3px 3px 0 var(--ink);transition:transform .12s ease,box-shadow .12s ease}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.hero .btn,.band .btn,.phead .btn,.vs .btn{box-shadow:3px 3px 0 rgba(0,0,0,.6)}
.btn-login{border-radius:255px 18px 225px 18px/18px 225px 18px 255px;box-shadow:2px 2px 0 rgba(0,0,0,.35)}

/* quick menu: stickers */
.qt{background:#FBF8F2;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);border-radius:10px}
.qt:nth-child(odd){transform:rotate(-1.2deg)}
.qt:nth-child(even){transform:rotate(1deg)}
.qt:hover{transform:rotate(0) translate(-2px,-2px);box-shadow:6px 6px 0 var(--red)}

/* event cards: photocopied jam flyers with tape */
.rail{padding-top:14px}
.evc{background:#F8F5EF;border:0;border-radius:2px;box-shadow:0 2px 0 rgba(0,0,0,.08),0 10px 18px rgba(40,25,10,.18);position:relative;overflow:visible}
.evc::before{content:"";position:absolute;top:-10px;left:50%;width:78px;height:22px;transform:translateX(-50%) rotate(-3deg);background:rgba(238,232,214,.85);box-shadow:0 1px 3px rgba(0,0,0,.2);z-index:2}
.rail .evc:nth-child(odd){transform:rotate(-1.4deg)}
.rail .evc:nth-child(even){transform:rotate(1.1deg)}
.rail .evc:hover{transform:rotate(0) translateY(-4px)}
.evc-date{background:var(--ink);background-image:var(--halftone);position:relative}
.evc.world .evc-date{background:var(--red);background-image:var(--halftone)}
.evc-date b{font-size:52px;letter-spacing:-.02em}
.evc-body h3{font-size:23px}
.ev-d{background:var(--ink);background-image:var(--halftone);border-radius:2px;transform:rotate(-2deg)}
.ev.world .ev-d{background:var(--red);background-image:var(--halftone)}

/* person cards: stickers on a wall */
.pc{border:3px solid var(--ink);border-radius:8px;box-shadow:4px 4px 0 var(--ink);background:#FBF8F2}
.grid .pc:nth-child(3n+1){transform:rotate(-.8deg)}
.grid .pc:nth-child(3n+2){transform:rotate(.6deg)}
.pc:hover{transform:rotate(0) translate(-2px,-2px);box-shadow:6px 6px 0 var(--red)}
.pc-art{background:#1A1714;background-image:var(--grain)}
.pc-art b{font-family:var(--f-spray);font-weight:400;font-size:clamp(50px,8vw,66px);transform:rotate(-6deg);text-shadow:3px 3px 0 var(--red)}

/* tiles, panels, notes */
.tile.wh,.panel,.rc,.nc,.rep,.chat,details.how{background:#FBF8F2}
.tile{border-radius:4px}
.tile.sp,.tile.yt{background-image:var(--grain)}
.panel,.rep,details.how,.chat{border-width:3px;box-shadow:5px 5px 0 var(--ink)}
.note{background:#FBF8F2;border-left-width:6px}
.rc{border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.rc-art{background-image:var(--halftone)}
.nc{border-top:6px solid var(--red);padding:14px 12px 10px;box-shadow:0 8px 16px rgba(40,25,10,.12)}
.chip{border-radius:2px}
.seg{border-width:3px;box-shadow:3px 3px 0 var(--ink)}
.seg.on-dark{box-shadow:3px 3px 0 rgba(0,0,0,.6)}

/* hype arc */
.hype-arc{display:block;width:100%;max-width:340px;margin:2px auto 0;overflow:visible}
.hype-arc path{fill:none;stroke-linecap:round}
.hype-arc .bg{stroke:#2E2A26;stroke-width:18;filter:url(#rough)}
.hype-arc .fg{stroke:url(#hypeGrad);stroke-width:14;stroke-dasharray:283;stroke-dashoffset:283;transition:stroke-dashoffset .4s cubic-bezier(.2,.8,.2,1);filter:url(#rough)}
.hype-arc .edge{stroke:#F1ECE3;stroke-width:3;opacity:.85;filter:url(#rough)}

.deck{background-image:var(--grain)}
.tabbar{background:#FBF8F2}
@media (prefers-reduced-motion:reduce){ .qt,.evc,.pc,.ev-d{transform:none!important} }