/* Tapcade site: light-first cream, hard ink outlines + hard shadows, cobalt cabinet, butter buttons. */
:root{--ink:#14112A;--cream:#FFF4E0;--cream2:#F6E7CB;--cob:#3A4BFF;--cob-d:#2232C4;--but:#FFD23F;--but-d:#E2A700;--peach:#FF7A59;--mint:#7BD88F;--mut:#5E5873;
--disp:'Bagel Fat One',system-ui,sans-serif;--mono:'Martian Mono',ui-monospace,Consolas,monospace;--text:'DM Sans',system-ui,sans-serif;--r:18px}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:400 17px/1.55 var(--text);min-height:100vh;position:relative;
background-image:radial-gradient(rgba(20,17,42,.09) 1.3px,transparent 1.7px);background-size:22px 22px}
body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.5;background-image: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='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.07 0 0 0 0 0.16 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit}
:focus-visible{outline:3px solid var(--cob);outline-offset:3px}
.mut{color:var(--mut)}
.mono,.lab{font-family:var(--mono);font-weight:700;text-transform:uppercase;letter-spacing:.09em}
.lab{font-size:12px;color:var(--ink);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.lab a{color:var(--cob)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:20px clamp(18px,4vw,56px);position:relative;z-index:2}
.logo img{display:block;height:38px;width:auto}
.navcta{font:700 12px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;text-decoration:none;background:#fff;border:3px solid var(--ink);padding:11px 15px;border-radius:99px;box-shadow:0 4px 0 var(--ink);transition:transform .08s,box-shadow .08s}
.navcta:hover{background:var(--but)}.navcta:active{transform:translateY(4px);box-shadow:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;text-decoration:none;border:3px solid var(--ink);border-radius:99px;padding:14px 26px 12px;font:22px/1 var(--disp);color:var(--ink);background:var(--but);box-shadow:0 7px 0 var(--ink);transition:transform .08s,box-shadow .08s,background .2s}
.btn:hover{background:#ffdc5e}.btn:active{transform:translateY(7px);box-shadow:0 0 0 var(--ink)}
.btn.ghost{background:#fff}.btn.ghost:hover{background:var(--cream2)}
.btn.cob{background:var(--cob);color:var(--cream)}
.btn[disabled]{opacity:.55;pointer-events:none}
.card{background:#fff;border:3px solid var(--ink);border-radius:var(--r);box-shadow:0 6px 0 var(--ink);padding:20px}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:center;padding:clamp(18px,3vw,40px) clamp(18px,4vw,56px) clamp(60px,8vw,110px)}
.kick{display:inline-flex;align-items:center;gap:9px;font:700 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;background:var(--but);border:3px solid var(--ink);border-radius:99px;padding:8px 13px 7px 9px;box-shadow:0 3px 0 var(--ink);margin-bottom:24px}
.kick img{width:20px;height:auto}
h1.big{font:clamp(54px,7.6vw,118px)/.86 var(--disp);letter-spacing:-.02em;margin:0 0 22px}
h1.big span{display:block}h1.big .c{color:var(--cob)}h1.big .o{color:var(--cream);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:0 6px 0 var(--ink)}
.lede{font-size:clamp(17px,1.4vw,20px);color:#3b3552;max-width:44ch;margin:0 0 30px}
/* the prompt is a cabinet */
.pcab{background:var(--cob);border-radius:26px;padding:0 12px 12px;box-shadow:0 6px 0 var(--cob-d),0 6px 0 3px var(--ink);border:3px solid var(--ink);max-width:640px}
.pmq{height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 4px;color:var(--cream);font:700 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.pill{display:inline-flex;align-items:center;gap:7px;background:var(--but);color:var(--ink);border-radius:99px;padding:5px 11px 5px 7px;box-shadow:0 2px 0 var(--ink)}
.pill img{width:18px}
.pscr{background:var(--cream);border-radius:16px;border:3px solid var(--ink);padding:6px}
.pscr textarea{width:100%;background:transparent;border:0;color:var(--ink);font:500 20px/1.4 var(--text);padding:12px 12px 4px;resize:none;outline:none;min-height:92px}
.pscr textarea::placeholder{color:#9a90ad}
.pcp{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 4px 4px}
.dots3{display:flex;gap:7px}.dots3 i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 -3px 0 rgba(0,0,0,.22)}
.count{font:500 11px var(--mono);color:rgba(255,244,224,.75);letter-spacing:.06em}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px;max-width:640px}
.chip{font:500 14px/1 var(--text);color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:99px;padding:9px 13px;cursor:pointer;box-shadow:0 3px 0 var(--ink);transition:transform .08s,box-shadow .08s,background .2s}
.chip:hover{background:var(--but)}.chip:active{transform:translateY(3px);box-shadow:none}
.status{margin-top:16px;font:500 13px/1.5 var(--mono);letter-spacing:.02em;min-height:20px}
.steps{display:flex;gap:6px;margin-top:20px;max-width:640px}
.steps span{flex:1;height:10px;border-radius:99px;background:#fff;border:2px solid var(--ink);overflow:hidden;position:relative}
.steps span.on{background:var(--cob)}
.steps span.go:after{content:"";position:absolute;inset:0;background:var(--but);animation:fill 1.4s ease-in-out infinite;transform-origin:left}
@keyframes fill{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
.err{color:#c43a1a}
.result{display:none;margin-top:22px;max-width:640px;align-items:center;gap:18px}
.result.on{display:flex}.result img{width:96px;height:96px;border-radius:12px;border:3px solid var(--ink);flex:none}
.result b{display:block;font:26px/1 var(--disp);margin-bottom:6px}
.result .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}.result .btn{padding:10px 16px 8px;font-size:17px;box-shadow:0 5px 0 var(--ink)}

/* the post (an X post, dark like the timeline) */
.post{background:#000;border-radius:22px;padding:16px 18px 14px;max-width:540px;margin:0 auto;box-shadow:0 10px 0 var(--ink);border:3px solid var(--ink);font:400 15px/1.4 -apple-system,'Segoe UI',system-ui,sans-serif;color:#e7e9ea}
.post header{display:flex;gap:10px;align-items:center;margin-bottom:6px}.post header b{font-weight:700}
.post .av{width:40px;height:40px;border-radius:50%;flex:none;overflow:hidden;background:var(--cob)}.post .av img{width:100%;height:100%;display:block}
.post p{margin:0 0 12px}
.post .frame{border-radius:16px;overflow:hidden;aspect-ratio:1/1;background:var(--cob)}
.post iframe{display:block;width:100%;height:100%;border:0}
.post footer{font-size:13px;margin-top:8px;color:#71767b}.post .mut{color:#71767b}
.stage{position:relative}
.sticker{position:absolute;z-index:2;font:700 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;background:var(--but);color:var(--ink);border:3px solid var(--ink);padding:9px 12px 8px;border-radius:99px;box-shadow:0 4px 0 var(--ink)}
.sticker.a{top:-18px;right:4%;transform:rotate(4deg)}.sticker.b{bottom:70px;left:-10px;transform:rotate(-5deg);background:var(--peach)}

/* sections */
section.band{padding:clamp(60px,8vw,120px) clamp(18px,4vw,56px)}
h2{font:clamp(38px,5vw,74px)/.92 var(--disp);letter-spacing:-.015em;margin:0 0 40px;max-width:15ch}
h2 em{font-style:normal;color:var(--cob)}
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.how .card{padding:26px 26px 30px}
.how b{display:inline-grid;place-items:center;width:58px;height:58px;border-radius:50%;font:26px/1 var(--disp);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);margin-bottom:20px}
.how .card:nth-child(1) b{background:var(--but)}.how .card:nth-child(2) b{background:var(--mint)}.how .card:nth-child(3) b{background:var(--peach)}
.how h3{font:28px/1 var(--disp);margin:0 0 10px}.how p{margin:0;color:#3b3552;max-width:34ch}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px}
.gcard{text-decoration:none;display:block;border-radius:var(--r);overflow:hidden;background:#fff;border:3px solid var(--ink);box-shadow:0 6px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.gcard:hover{transform:translateY(-4px);box-shadow:0 10px 0 var(--ink)}
.gcard img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-bottom:3px solid var(--ink)}
.gcard div{padding:12px 14px 14px}.gcard b{display:block;font:22px/1.05 var(--disp)}.gcard span{display:block;font-size:13px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:6px}
.cta{background:var(--cob);color:var(--cream);border-block:3px solid var(--ink);text-align:center}
.cta h2{margin:0 auto 28px;max-width:none;color:var(--cream)}.cta h2 em{color:var(--but)}
.foot{display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding:28px clamp(18px,4vw,56px) 40px;font:500 11px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.foot span:last-child{margin-left:auto}

/* game page */
.gwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(28px,5vw,72px);padding:clamp(10px,3vw,40px) clamp(18px,4vw,56px) 80px;align-items:start}
.gside h1{font:clamp(44px,5vw,76px)/.9 var(--disp);letter-spacing:-.015em;margin:0 0 16px}
.quote{font-size:18px;color:#3b3552;margin:0 0 26px}.quote .mono{display:block;font-size:11px;color:var(--mut);margin-bottom:6px}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:34px}
.lb{margin-bottom:26px}
.lb ol{list-style:none;margin:0;padding:0;font:500 14px/1 var(--mono)}
.lb li{display:flex;justify-content:space-between;padding:11px 2px;border-bottom:2px dashed rgba(20,17,42,.18)}
.lb li:last-child{border:0}.lb li:first-child span{background:var(--but);padding:2px 8px;border-radius:99px;border:2px solid var(--ink)}
#online{color:var(--cream);background:var(--peach);border:2px solid var(--ink);border-radius:99px;padding:3px 8px;font-size:10px}#online:empty{display:none}
.remix textarea{width:100%;background:var(--cream);border:3px solid var(--ink);border-radius:14px;color:var(--ink);font:500 16px/1.4 var(--text);padding:14px;resize:vertical;outline:none;margin-bottom:16px}
.remix textarea:focus{background:#fff}

@media (max-width:900px){
  .hero,.gwrap{grid-template-columns:1fr}
  .how{grid-template-columns:1fr}
  .sticker.b{left:4px}
  .foot span:last-child{margin-left:0}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}