'+slot.name+\n ''+slot.hint+'

'+\n '

';\n const opts = wrap.querySelector('.opts');\n slot.options.forEach(opt=>{\n const b=document.createElement('button');\n b.className='opt';b.type='button';\n b.setAttribute('aria-pressed', state[slot.key]===opt.id ? 'true':'false');\n b.dataset.slot=slot.key;b.dataset.id=opt.id;\n const sw = opt.swatch && opt.swatch!=='transparent'\n ? '' : '';\n b.innerHTML = sw + ''+opt.label+''+(opt.note?''+opt.note+'':'');\n b.addEventListener('click',()=>choose(slot.key,opt.id,wrap));\n opts.appendChild(b);\n });\n toolbar.appendChild(wrap);\n });\n\n // -------- Category carousel: swipe (scroll-snap) + stepper --------\n (function initCarousel(){\n const track=document.getElementById('slots');\n const dotsEl=document.getElementById('catDots');\n const catLabel=document.getElementById('catLabel');\n const catHint=document.getElementById('catHint');\n const prevBtn=document.getElementById('prevCat');\n const nextBtn=document.getElementById('nextCat');\n if(!track||!dotsEl||!catLabel) return;\n const N=GAME_DATA.slots.length;\n GAME_DATA.slots.forEach((s,i)=>{const d=document.createElement('span');d.className='dot'+(i===0?' on':'');dotsEl.appendChild(d);});\n const idx=()=>Math.round(track.scrollLeft/Math.max(1,track.clientWidth));\n const go=i=>{i=Math.max(0,Math.min(N-1,i));track.scrollTo({left:i*track.clientWidth,behavior:'smooth'});};\n function sync(){const i=idx();catLabel.textContent=GAME_DATA.slots[i].name;if(catHint)catHint.textContent=GAME_DATA.slots[i].hint||'';[...dotsEl.children].forEach((d,j)=>d.classList.toggle('on',j===i));prevBtn.disabled=i<=0;nextBtn.disabled=i>=N-1;}\n let raf=0;track.addEventListener('scroll',()=>{cancelAnimationFrame(raf);raf=requestAnimationFrame(sync);});\n prevBtn.addEventListener('click',()=>go(idx()-1));\n nextBtn.addEventListener('click',()=>go(idx()+1));\n sync();\n })();\n\n function getOpt(slotKey,id){\n const s=GAME_DATA.slots.find(s=>s.key===slotKey);\n return s.options.find(o=>o.id===id);\n }\n\n function choose(slotKey,id,wrapEl){\n state[slotKey]=id;\n // update pressed states within this slot\n wrapEl.querySelectorAll('.opt').forEach(b=>{\n b.setAttribute('aria-pressed', b.dataset.id===id ? 'true':'false');\n });\n // per-slot feedback\n const fb = wrapEl.querySelector('[data-fb]');\n fb.innerHTML = getOpt(slotKey,id).feedback;\n fb.classList.remove('flash'); void fb.offsetWidth; fb.classList.add('flash');\n update();\n }\n\n // -------- Scoring --------\n function compute(){\n let score = GAME_DATA.baseScore;\n let loudCount=0, hasFoundation=false;\n GAME_DATA.slots.forEach(s=>{\n const o=getOpt(s.key,state[s.key]);\n score += (o.weight||0);\n if(o.loud) loudCount++;\n if(o.foundation) hasFoundation=true;\n });\n const R=GAME_DATA.rules;\n let reasons=[];\n if(hasFoundation){score+=R.lineBonus; reasons.push('+ the line holds');}\n if(loudCount<=1){score+=R.restraintBonus; reasons.push('+ restraint');}\n if(loudCount>1){const p=(loudCount-1)*R.loudPenaltyEach; score-=p; reasons.push('− trying too hard');}\n score=Math.max(R.minScore,Math.min(R.maxScore,Math.round(score)));\n return {score,loudCount,hasFoundation,reasons};\n }\n\n function verdictFor(score){\n let v=GAME_DATA.verdicts[0];\n GAME_DATA.verdicts.forEach(x=>{if(score>=x.min)v=x;});\n return v.text;\n }\n function endingFor(score){\n let e=GAME_DATA.endings[0];\n GAME_DATA.endings.forEach(x=>{if(score>=x.min)e=x;});\n return e;\n }\n\n // -------- Render --------\n const scoreNum=document.getElementById('scoreNum');\n const meterFill=document.getElementById('meterFill');\n const meterTarget=document.getElementById('meterTarget');\n const verdictEl=document.getElementById('verdict');\n let displayScore=0;\n\n meterTarget.style.left = GAME_DATA.targetScore + '%';\n\n function update(){\n const {score}=compute();\n // animate number\n animateNum(score);\n meterFill.style.width = score + '%';\n // gold when near/above target, muted below\n meterFill.style.background = score>=GAME_DATA.targetScore\n ? 'var(--gold)'\n : '#c9bda9';\n verdictEl.innerHTML = verdictFor(score);\n finishBtn.disabled = false;\n finishBtn.textContent = score>=GAME_DATA.targetScore ? 'Claim His Look ✓' : 'See His Final Look';\n drawFigure(document.getElementById('figureBox'));\n }\n\n function animateNum(target){\n const start=displayScore, t0=performance.now(), dur=500;\n function step(now){\n const p=Math.min(1,(now-t0)/dur);\n const e=1-Math.pow(1-p,3);\n displayScore=Math.round(start+(target-start)*e);\n scoreNum.textContent=displayScore;\n if(p<1)requestAnimationFrame(step); else displayScore=target;\n }\n requestAnimationFrame(step);\n }\n\n /* =====================================================================\n FIGURE — inline SVG editorial line-art man, redrawn from traits.\n DRAW NOTES (for authors): a piece's svg.{...} fields flip features on:\n shirt / shirtStripe / shirtFloral / shirtBase : shirt colour+pattern\n braces (colour) / garter(bool) / belt(colour)\n tie (colour) / tieKnit(bool) / bow(colour) / bowLoud(bool)\n pocket (colour) / pocketLoud(bool)\n shoes (colour) / shoesLoud(bool)\n pose : \"easy\" | \"hands\" | \"slouch\" | \"stiff\"\n You generally won't need to touch the SVG builder itself.\n ===================================================================== */\n function traits(){\n const t={};\n GAME_DATA.slots.forEach(s=>{\n const o=getOpt(s.key,state[s.key]);\n Object.assign(t,o.svg||{});\n });\n return t;\n }\n\n // Art-directed crop box (SVG user units). Single source of truth for figure framing:\n // drives the viewBox AND, via height-driven CSS, the on-screen size. Tightly bounds the\n // ink (x~82-178, y~44-352; hair curve peaks ~44) with px pad so no posture clips. Tighter than the\n // old \"0 40 260 320\" — kills ~63% horizontal dead margin so the man commands the frame\n // and the waist/braces line (hero product) reads bigger. A future central character\n // template carries one of these per character.\n const INK_BOUNDS = { x:78, y:40, w:104, h:316 };\n\n function buildSVG(t, mini){\n const ink=\"#333333\";\n const skin=\"#e7c9a8\", hair=\"#2b2622\";\n const shirt = t.shirtBase || t.shirt || \"#fbfbf8\";\n const trouser = \"#3a4150\";\n const pose = t.pose || \"easy\";\n\n // arm + slight posture lean\n let lean=0, shoulderY=128, hands=false, slouch=false;\n if(pose===\"slouch\"){lean=4;shoulderY=134;slouch=true;}\n else if(pose===\"stiff\"){lean=0;shoulderY=124;}\n else if(pose===\"hands\"){hands=true;}\n // body x-center\n const cx=130;\n\n // ---- pattern defs ----\n let defs='';\n if(t.shirtStripe){\n defs+=''+\n ''+\n '';\n }\n if(t.shirtFloral){\n defs+=''+\n ''+\n ''+\n ''+\n '';\n }\n const shirtFill = t.shirtFloral ? 'url(#floral)' : (t.shirtStripe ? 'url(#stripe)' : shirt);\n\n // ---- head ----\n const headY=70 + (slouch?6:0);\n let s='';\n s+='';\n // hair\n s+='';\n // face\n s+='';\n // jaw line / neck\n s+='';\n // simple features\n s+='';\n s+='';\n s+='';\n s+='';\n\n // ---- torso group (with lean) ----\n s+='';\n // shoulders/shirt body\n const torsoTop=shoulderY-12;\n s+='';\n // collar\n s+='';\n // button placket\n s+='';\n\n // ---- braces ----\n if(t.braces){\n const bc=t.braces;\n s+='';\n s+='';\n s+='';\n // brass clasp hints\n s+='';\n s+='';\n s+='';\n }\n if(t.belt){\n s+='';\n s+='';\n }\n\n // ---- neckwear ----\n if(t.tie){\n s+='';\n s+='';\n if(t.tieKnit){\n s+='';\n }\n }\n if(t.bow){\n s+='';\n s+='';\n s+='';\n if(t.bowLoud){\n for(let i=0;i<8;i++){\n const a=Math.random()*6.28, r=10;\n s+='';\n }\n }\n }\n\n // ---- pocket square ----\n if(t.pocket){\n if(t.pocketLoud){\n s+='';\n }else{\n s+='';\n }\n }\n\n // ---- arms ----\n function arm(side){ // side -1 left, +1 right\n const sx=cx+side*28, sy=shoulderY+2;\n if(hands){\n // bent into pocket\n const ex=cx+side*20, ey=200;\n return ''+\n '';\n }\n const ex=cx+side*24, ey=232+(slouch?6:0);\n let a='';\n a+=''; // hand\n return a;\n }\n s+=arm(-1)+arm(1);\n s+=''; // torso group\n\n // ---- trousers / legs (less affected by lean) ----\n const legTop=246;\n s+='';\n s+='';\n s+='';\n // garter hint at sock line\n if(t.garter){\n s+='';\n s+='';\n }\n s+='';\n\n // ---- shoes ----\n if(t.shoes){\n const sc=t.shoes;\n function shoe(side){\n const x=cx+side*14;\n if(t.shoesLoud){\n return ''+\n '';\n }\n return '';\n }\n s+=shoe(-1)+shoe(1);\n } else {\n s+='';\n s+='';\n }\n\n // baseline shadow\n s+='';\n\n return '';\n }\n\n function drawFigure(el){ el.innerHTML = buildSVG(traits(), false); }\n\n // -------- End screen --------\n const overlay=document.getElementById('overlay');\n function openEnd(){\n const {score}=compute();\n const e=endingFor(score);\n document.getElementById('endKicker').innerHTML=e.kicker;\n document.getElementById('endTitle').innerHTML=e.title;\n document.getElementById('endSummary').innerHTML=e.text;\n document.getElementById('finalNum').textContent=score;\n document.getElementById('finalFig').innerHTML=buildSVG(traits(),true);\n // reward only \"earns\" at/above target; otherwise show how to unlock\n const earned = score>=GAME_DATA.targetScore;\n const promoCode=document.getElementById('promoCode');\n const promoDesc=document.getElementById('promoDesc');\n if(earned){\n promoCode.textContent=GAME_DATA.reward.code;\n promoDesc.innerHTML=GAME_DATA.reward.desc;\n document.getElementById('copyBtn').style.display='';\n }else{\n promoCode.textContent='LOCKED';\n promoDesc.innerHTML='Reach '+GAME_DATA.targetScore+'+ to earn your code. '+GAME_DATA.reward.minScoreLabel;\n document.getElementById('copyBtn').style.display='none';\n }\n document.getElementById('copiedMsg').textContent='';\n overlay.classList.add('show');\n }\n function closeEnd(){overlay.classList.remove('show');}\n\n finishBtn.addEventListener('click',openEnd);\n document.getElementById('restyleBtn').addEventListener('click',closeEnd);\n overlay.addEventListener('click',e=>{if(e.target===overlay)closeEnd();});\n document.addEventListener('keydown',e=>{if(e.key==='Escape')closeEnd();});\n\n document.getElementById('copyBtn').addEventListener('click',()=>{\n const code=GAME_DATA.reward.code;\n const done=()=>{document.getElementById('copiedMsg').textContent='Copied. Wear it well.';};\n if(navigator.clipboard&&navigator.clipboard.writeText){\n navigator.clipboard.writeText(code).then(done).catch(done);\n }else{ // file:// fallback\n const ta=document.createElement('textarea');ta.value=code;document.body.appendChild(ta);\n ta.select();try{document.execCommand('copy');}catch(e){}ta.remove();done();\n }\n });\n\n resetBtn.addEventListener('click',()=>{\n defaults();\n controlsEl.querySelectorAll('.slot').forEach((wrap,i)=>{\n const key=GAME_DATA.slots[i].key;\n wrap.querySelectorAll('.opt').forEach(b=>b.setAttribute('aria-pressed', b.dataset.id===state[key]?'true':'false'));\n wrap.querySelector('[data-fb]').innerHTML='';\n });\n update();\n });\n\n // first paint\n update();\n})();\n\n/* Self-resize hook for iframe embedding (StoryPress freeform) */\nconst fit=()=>{if(window.frameElement)window.frameElement.style.height=document.documentElement.scrollHeight+'px'};\ntry{ new ResizeObserver(fit).observe(document.body); }catch(_){}\naddEventListener('load',fit);","css","438f4999-6977-4ea7-b54c-0a08027f2953","html","\n\n\n\n\nSTYLE HIM UP — KK & Jay Supply Co.\n\n\n\n\n

\n \n\n \n

A blank slate. Dress with intent.

\n\n \n

\n \n

Shirt

the canvas

\n \n

\n\n \n

\n \n

\n\n\n

The Verdict

Sharp.

0/100

\n \n

\n \n \n

\n\n\n\n\n","isolate","freeform","iframeHeight","min(820px, calc(100dvh - 24px))","iframeAllowScripts","iframeHeightMobile","iframeInjectThemeVars","","Game — Sharp or Sloppy (Swipe)","2026-06-16T16:48:32.333Z","2026-06-18T18:00:14.759Z",188165784941903,"306adf5c-4d15-4ff5-bc16-0610c3798a84",{"_56":57,"_58":172,"_60":173,"_62":174,"_64":65,"_66":67,"_68":175,"_70":176},"sharp-or-sloppy","kk-jay-games-experiment/sharp-or-sloppy",-20,[],"eab70a20-2507-4d76-b008-544d1c070ad5",[],[191],[188],[184],[177,178],"",{"_20":181,"_103":104,"_13":182,"_106":104,"_107":104,"_108":104,"_109":183,"_111":104,"_112":113},{"_20":179,"_103":104,"_106":104,"_107":104,"_108":104,"_109":180,"_111":104,"_112":113},188891167416770,"https://a.storyblok.com/f/334678/697f942f0d/screenshot_2026_06_18_at_135958.png",188890615312827,"screenshot_2026_06_18_at_135241.png","https://a.storyblok.com/f/334678/09b13cbfec/screenshot_2026_06_18_at_135241.png",{"_56":115,"_107":185,"_117":67,"_64":62,"_118":186,"_70":187},"Sharp or Sloppy — KK & Jay","Swipe sharp or sloppy.","",{"_56":189,"_123":124,"_64":60,"_125":126,"_127":126,"_128":126,"_129":130,"_131":132,"_133":132,"_134":132,"_135":136,"_137":126,"_138":139,"_140":136,"_141":139,"_142":67,"_70":190},"71614ecf-0676-48f6-b965-0d4d7b507ae0","",{"_20":192,"_146":193,"_148":194,"_56":195,"_150":196,"_152":67,"_64":153,"_154":155,"_156":67,"_157":155,"_158":36,"_70":197},"kkj-swipe","\n/* ================================================================\n ███ GAME_DATA — EDIT EVERYTHING HERE, NO CODE BELOW NEEDED ███\n ================================================================\n This single object holds ALL content: copy, the men (\"cards\"),\n their drawn appearance (traits), the correct verdict, reveal\n teaching text, scoring ranks and the promo-code reward.\n\n A non-coder can:\n • Add a man -> copy a {…} block inside `cards` and edit fields.\n • Change a verdict -> set answer: \"SHARP\" or \"SLOPPY\".\n • Edit reveal copy -> change lessonRight / lessonWrong / note.\n • Change the reward -> edit promo.code / promo.off / promo.desc.\n • Reorder / trim rounds -> the deck plays `cards` top to bottom.\n\n ── Each card's APPEARANCE is DRAWN FROM TRAITS (inline SVG, no\n photos). Allowed trait values are listed beside each field.\n\n ── LOADING FROM AN EXTERNAL SOURCE (later):\n Instead of the literal object below you could fetch it, e.g.\n\n const GAME_DATA = await fetch('cards.json').then(r => r.json());\n\n …or have a StoryPress freeform component output the same shape:\n\n const GAME_DATA = window.STORYPRESS_FREEFORM.gameData;\n\n The game logic only reads GAME_DATA.* — swap the source freely.\n ================================================================ */\nconst GAME_DATA = {\n\n // ---- Top-level brand copy -------------------------------------\n startLede : \"Twelve men. One glance each. The clock is unkind. \" +\n \"Reward intention over noise — the quiet man may outrank the loud one.\",\n\n timerSeconds : 5.5, // seconds per card before it auto-resolves as a miss\n\n // ---- The men (one card = one round) ---------------------------\n // TRAIT GLOSSARY (use these exact words):\n // skin : \"fair\" | \"tan\" | \"olive\" | \"brown\" | \"deep\"\n // hair : \"short\" | \"bald\" | \"wavy\" | \"swept\" | \"curls\" | \"buzz\"\n // build : \"lean\" | \"regular\" | \"broad\"\n // posture: \"upright\" | \"relaxed\" | \"slouch\" | \"hipsout\"\n // suit / shirt / tie / square / brace : ink hex colors or \"\" (none)\n // braces : true/false -> draws KK&Jay suspenders over the shirt\n // layer : \"suit\" | \"shirt\" | \"vest\" (what the torso wears)\n // loud : 0..3 -> visual \"trying too hard\" cues (clashing pop, sheen)\n // answer : \"SHARP\" or \"SLOPPY\" (the correct call)\n cards: [\n {\n name:\"The Banker\", meta:\"Mon · 8:14 AM\",\n quote:\"Navy. Again. He hasn’t thought about it in years.\",\n hint:\"He doesn’t fuss. He just holds the line.\",\n traits:{ skin:\"fair\", hair:\"short\", build:\"regular\", posture:\"upright\",\n layer:\"suit\", suit:\"#27384f\", shirt:\"#f3efe6\", tie:\"#3d2f2a\",\n square:\"#f3efe6\", braces:false, loud:0 },\n answer:\"SHARP\",\n lessonRight:\"Restraint reads as confidence.\",\n lessonWrong:\"You mistook quiet for plain.\",\n note:\"Nothing shouts. The fit is settled, the palette deep. He dressed on purpose — years ago — and never had to again.\"\n },\n {\n name:\"The Influencer\", meta:\"Fri · 11:02 PM\",\n quote:\"Four trends at once. None of them his.\",\n hint:\"Expensive isn’t the same as considered.\",\n traits:{ skin:\"tan\", hair:\"swept\", build:\"lean\", posture:\"hipsout\",\n layer:\"suit\", suit:\"#7a2f8a\", shirt:\"#10e0c0\", tie:\"#ff3b6b\",\n square:\"#ffd23b\", braces:false, loud:3 },\n answer:\"SLOPPY\",\n lessonRight:\"Loud is not the same as sharp.\",\n lessonWrong:\"The price tag fooled you.\",\n note:\"Everything competes; nothing agrees. Cost without composure. The eye finds no place to rest — and neither does he.\"\n },\n {\n name:\"The Groomsman\", meta:\"Sat · 3:40 PM\",\n quote:\"Braces under the jacket. The shirt stays put through the toast.\",\n hint:\"The engineering you can’t see.\",\n traits:{ skin:\"brown\", hair:\"short\", build:\"regular\", posture:\"upright\",\n layer:\"shirt\", suit:\"\", shirt:\"#f5f1e8\", tie:\"#2c5a4a\",\n square:\"\", braces:true, loud:0 },\n answer:\"SHARP\",\n lessonRight:\"The line that holds all day.\",\n lessonWrong:\"That’s the invisible work paying off.\",\n note:\"No gaping shirt, no untucking by noon. Suspenders doing the quiet labour. Sharp is a thing maintained, not just chosen.\"\n },\n {\n name:\"The Show-Off\", meta:\"Sat · 9:55 PM\",\n quote:\"Shirt open three buttons. He wants you to notice.\",\n hint:\"Effort that announces itself.\",\n traits:{ skin:\"olive\", hair:\"wavy\", build:\"broad\", posture:\"hipsout\",\n layer:\"shirt\", suit:\"\", shirt:\"#0f0f12\", tie:\"\",\n square:\"\", braces:false, loud:2, chain:true },\n answer:\"SLOPPY\",\n lessonRight:\"Effort that begs to be seen isn’t restraint.\",\n lessonWrong:\"Confidence doesn’t need an audience.\",\n note:\"The flash is the point, and that’s the flaw. Sharp men let the clothes recede so the man can step forward.\"\n },\n {\n name:\"The Professor\", meta:\"Tue · 9:30 AM\",\n quote:\"A vest, a worn watch, nothing new in a decade.\",\n hint:\"Old, kept well, worn with intent.\",\n traits:{ skin:\"fair\", hair:\"bald\", build:\"lean\", posture:\"relaxed\",\n layer:\"vest\", suit:\"#5a4a32\", shirt:\"#efe9da\", tie:\"#6b3b2e\",\n square:\"\", braces:true, loud:0 },\n answer:\"SHARP\",\n lessonRight:\"Patina beats novelty.\",\n lessonWrong:\"Age isn’t neglect when it’s tended.\",\n note:\"Earth tones, a vest that fits, braces holding the day together. He owns little and wears it completely. That is composure.\"\n },\n {\n name:\"The Gym Bro\", meta:\"Sun · 1:15 PM\",\n quote:\"Tailoring two sizes too eager to show the work.\",\n hint:\"Fit that strains is still a poor fit.\",\n traits:{ skin:\"tan\", hair:\"buzz\", build:\"broad\", posture:\"hipsout\",\n layer:\"shirt\", suit:\"\", shirt:\"#d63a3a\", tie:\"\",\n square:\"\", braces:false, loud:2 },\n answer:\"SLOPPY\",\n lessonRight:\"Strained seams are not sharp seams.\",\n lessonWrong:\"Tight isn’t tailored.\",\n note:\"The shirt fights the body instead of dressing it. Sharp fit lets a man breathe and move. This one only flexes.\"\n },\n {\n name:\"The Quiet Founder\", meta:\"Wed · 7:50 AM\",\n quote:\"Grey on grey. You’d forget the outfit and remember him.\",\n hint:\"Forgettable clothes, memorable man.\",\n traits:{ skin:\"deep\", hair:\"short\", build:\"regular\", posture:\"upright\",\n layer:\"suit\", suit:\"#3a3f45\", shirt:\"#eceae4\", tie:\"#2a2d31\",\n square:\"#cfcabf\", braces:false, loud:0 },\n answer:\"SHARP\",\n lessonRight:\"The quiet signal. He dressed on purpose.\",\n lessonWrong:\"You overlooked the discipline of grey.\",\n note:\"Tonal, exact, unbothered. The clothes step back so the person reads first. The highest form of dressed is nearly invisible.\"\n },\n {\n name:\"The Best Man\", meta:\"Sat · 6:20 PM\",\n quote:\"A pocket square that matches the tie too perfectly.\",\n hint:\"Matchy is its own kind of trying.\",\n traits:{ skin:\"olive\", hair:\"swept\", build:\"regular\", posture:\"relaxed\",\n layer:\"suit\", suit:\"#1f2a3c\", shirt:\"#f3efe6\", tie:\"#b03a52\",\n square:\"#b03a52\", braces:false, loud:1 },\n answer:\"SLOPPY\",\n lessonRight:\"Matched sets read as a costume.\",\n lessonWrong:\"Too coordinated tips into trying-too-hard.\",\n note:\"The tie and square sing the exact same note — a rental-counter trick. Sharp men echo a colour; they don’t photocopy it.\"\n },\n {\n name:\"The Old Tailor\", meta:\"Thu · 10:05 AM\",\n quote:\"Sleeves rolled, braces on, measuring tape forgotten on his neck.\",\n hint:\"Dressed for the work, dressed well.\",\n traits:{ skin:\"tan\", hair:\"short\", build:\"lean\", posture:\"relaxed\",\n layer:\"shirt\", suit:\"\", shirt:\"#e9e2d2\", tie:\"\",\n square:\"\", braces:true, loud:0 },\n answer:\"SHARP\",\n lessonRight:\"Function, worn with intention, is style.\",\n lessonWrong:\"Workwear done right is still sharp.\",\n note:\"Rolled clean, braces squared, every choice earns its place. Sharp isn’t the occasion — it’s the care brought to it.\"\n },\n {\n name:\"The Peacock\", meta:\"Fri · 8:40 PM\",\n quote:\"A suit the colour of a traffic cone, and proud of it.\",\n hint:\"Bold, yes. Considered, no.\",\n traits:{ skin:\"fair\", hair:\"wavy\", build:\"regular\", posture:\"hipsout\",\n layer:\"suit\", suit:\"#e8631c\", shirt:\"#ffffff\", tie:\"#1ea7ff\",\n square:\"#27e36b\", braces:false, loud:3 },\n answer:\"SLOPPY\",\n lessonRight:\"Volume is not vision.\",\n lessonWrong:\"Bravery in colour still needs a plan.\",\n note:\"Every element shouts in a different language. Boldness can be sharp — but only when something restrains it. Here, nothing does.\"\n },\n {\n name:\"The Diplomat\", meta:\"Mon · 12:00 PM\",\n quote:\"Charcoal, white, one good watch. He says little.\",\n hint:\"He lets the silence dress him.\",\n traits:{ skin:\"brown\", hair:\"short\", build:\"regular\", posture:\"upright\",\n layer:\"suit\", suit:\"#2d3138\", shirt:\"#f4f1ea\", tie:\"#4a5566\",\n square:\"#f4f1ea\", braces:true, loud:0 },\n answer:\"SHARP\",\n lessonRight:\"Composure is the whole wardrobe.\",\n lessonWrong:\"Understatement was the achievement.\",\n note:\"Charcoal, a true white, the braces unseen but felt in how nothing shifts. He never reaches for attention — so it comes to him.\"\n },\n {\n name:\"The Heir\", meta:\"Sun · 2:30 PM\",\n quote:\"Logos on the belt, the shoes, the socks. In case you missed it.\",\n hint:\"Labels aren’t a personality.\",\n traits:{ skin:\"olive\", hair:\"curls\", build:\"lean\", posture:\"slouch\",\n layer:\"suit\", suit:\"#0a3a8a\", shirt:\"#f2c43b\", tie:\"#d11f4a\",\n square:\"#f2c43b\", braces:false, loud:3 },\n answer:\"SLOPPY\",\n lessonRight:\"Borrowed status isn’t earned style.\",\n lessonWrong:\"Money on display is the opposite of restraint.\",\n note:\"The wardrobe does the talking, and it only talks about price. Sharp keeps its receipts to itself.\"\n }\n ],\n\n // ---- Reveal headline words (kept short for the big serif line) -\n verdictWords : { SHARP:\"Sharp.\", SLOPPY:\"Sloppy.\" },\n\n // ---- End-screen ranks (chosen by % correct, high→low) --------\n ranks: [\n { min:1.0, title:[\"A Tailor’s\",\"Eye\"], blurb:\"Flawless. You read intention past every distraction. The line holds — and so does your judgement.\" },\n { min:0.8, title:[\"A Sharp\",\"Read\"], blurb:\"You see past the noise. A few loud men slipped by, but composure rarely fooled you.\" },\n { min:0.55, title:[\"Coming Into\",\"Focus\"], blurb:\"You’re learning the difference between expensive and considered. Keep training the eye.\" },\n { min:0.0, title:[\"Dazzled by\",\"the Loud\"], blurb:\"The flashy fooled you more than once. Remember: best dressed is never the loudest in the room.\" }\n ],\n\n // ---- The reward (a real coupon field) -------------------------\n promo: {\n code : \"SHARP10\",\n off : \"$10 off your first order\",\n desc : \"On any pair of KK & Jay suspenders or shirttail garters. Because the best fit is the one that holds.\"\n }\n};\n/* =================== END OF EDITABLE DATA ===================== */\n\n\n/* ================================================================\n GAME LOGIC — generic; reads GAME_DATA only. No content here.\n ================================================================ */\n(function(){\n \"use strict\";\n const D = GAME_DATA;\n const $ = s => document.querySelector(s);\n\n // skin tone hex map for the figure drawer\n const SKIN = { fair:\"#e8c4a2\", tan:\"#cf9c72\", olive:\"#bd9264\", brown:\"#9a6a44\", deep:\"#6e4a30\" };\n\n /* ---------- SVG FIGURE DRAWER (traits -> editorial line art) ---------- */\n function drawFigure(t){\n const skin = SKIN[t.skin] || SKIN.fair;\n const ink = \"#333333\";\n const W = 260, H = 360;\n const cx = W/2;\n\n // posture -> slight lean / hip offset\n const lean = ({upright:0, relaxed:3, slouch:7, hipsout:0})[t.posture] || 0;\n const hip = (t.posture===\"hipsout\") ? 10 : 0;\n const build= ({lean:.86, regular:1, broad:1.16})[t.build] || 1;\n const shoulder = 64 * build;\n\n // colors\n const torso = t.layer === \"shirt\" ? (t.shirt||\"#efe9da\") : (t.suit||\"#27384f\");\n const showSuit = t.layer === \"suit\";\n const showVest = t.layer === \"vest\";\n const shirtC = t.shirt || \"#f1ece2\";\n\n // hair path by style\n function hair(){\n const hx=cx, hy=64;\n switch(t.hair){\n case \"bald\": return ``;\n case \"buzz\": return ``;\n case \"wavy\": return ``;\n case \"swept\":return ``;\n case \"curls\":return ``;\n default: return ``; // short\n }\n }\n\n // \"loud\" decorative clash: floating chips behind a try-hard man\n let loudFx = \"\";\n if(t.loud>=2){\n const chips = [\"#ff3b6b\",\"#10e0c0\",\"#ffd23b\",\"#9b59ff\",\"#27e36b\"];\n for(let i=0;i`;\n }\n }\n\n const sx = cx + hip - lean; // shoulder center, shifted by posture\n const sL = sx - shoulder, sR = sx + shoulder;\n\n // suspenders (braces) — KK&Jay signature, drawn over shirt\n let braces = \"\";\n if(t.braces){\n const bw = 7;\n braces = `\n \n \n \n \n \n `;\n }\n\n // tie / open collar\n let neck = \"\";\n if(t.tie){\n neck = ``;\n } else {\n // open collar V\n neck = ``;\n if(t.chain) neck += ``;\n }\n\n // pocket square\n const square = (t.square && (showSuit||showVest))\n ? `` : \"\";\n\n // jacket lapels for suit\n let jacket = \"\";\n if(showSuit){\n jacket = `\n \n \n \n `;\n }\n let vest = \"\";\n if(showVest){\n vest = `\n `;\n }\n\n return `\n `;\n }\n\n // darken/lighten a hex by amount (-100..100)\n function shade(hex, amt){\n if(!hex || hex[0] !== \"#\") return hex || \"#000\";\n let c = hex.slice(1);\n if(c.length===3) c = c.split(\"\").map(x=>x+x).join(\"\");\n const n = parseInt(c,16);\n let r=(n>>16)&255, g=(n>>8)&255, b=n&255;\n const f = amt/100;\n const ad = v => Math.max(0,Math.min(255, Math.round(v + (f<0? v*f : (255-v)*f))));\n return \"#\" + [ad(r),ad(g),ad(b)].map(v=>v.toString(16).padStart(2,\"0\")).join(\"\");\n }\n\n /* ---------- STATE ---------- */\n let idx=0, score=0, streak=0, best=0, locked=false, timer=null, tStart=0, tRAF=null;\n const cards = D.cards;\n\n /* ---------- ELEMENTS ---------- */\n const deck=$(\"#deck\"), reveal=$(\"#reveal\");\n const scoreVal=$(\"#scoreVal\"), scoreOf=$(\"#scoreOf\"), streakVal=$(\"#streakVal\"), streakFire=$(\"#streakFire\");\n const timerbar=$(\"#timerbar\"), dotsEl=$(\"#dots\");\n\n /* ---------- DOTS ---------- */\n function buildDots(){\n dotsEl.innerHTML=\"\";\n cards.forEach(()=>{ const d=document.createElement(\"div\"); d.className=\"dot\"; dotsEl.appendChild(d); });\n }\n function paintDots(){\n [...dotsEl.children].forEach((d,i)=>{\n d.className = \"dot\" + (i\n

${c.name}

${c.meta||\"\"}

\n \n

${drawFigure(c.traits)}

“${c.quote}”

${c.hint||\"\"}

Sharp

Sloppy

`;\n return el;\n }\n\n /* ---------- RENDER DECK (current + 2 behind for depth) ---------- */\n function renderDeck(){\n deck.innerHTML=\"\";\n for(let k=Math.min(idx+2,cards.length-1); k>=idx; k--){\n const el=makeCard(k);\n if(k===idx+1) el.classList.add(\"behind\");\n else if(k===idx+2) el.classList.add(\"behind2\");\n deck.appendChild(el);\n if(k===idx) attachDrag(el);\n }\n paintDots();\n startTimer();\n }\n\n /* ---------- TIMER ---------- */\n function startTimer(){\n cancelTimer();\n tStart = performance.now();\n timerbar.classList.remove(\"warn\");\n timerbar.style.transform=\"scaleX(1)\";\n const dur = (D.timerSeconds||5.5)*1000;\n function step(now){\n const left = Math.max(0, 1 - (now - tStart)/dur);\n timerbar.style.transform = \"scaleX(\"+left+\")\";\n if(left < .33) timerbar.classList.add(\"warn\");\n if(left<=0){ resolve(null); return; } // timeout -> auto miss\n tRAF = requestAnimationFrame(step);\n }\n tRAF = requestAnimationFrame(step);\n }\n function cancelTimer(){ if(tRAF) cancelAnimationFrame(tRAF); tRAF=null; }\n\n /* ---------- DRAG / FLING PHYSICS ---------- */\n function attachDrag(el){\n let down=false, sx=0, sy=0, dx=0, dy=0, id=null;\n const sharpStamp = el.querySelector(\".stamp.sharp\");\n const sloppyStamp= el.querySelector(\".stamp.sloppy\");\n\n function setT(x,y,rot,trans){\n el.style.transition = trans||\"none\";\n el.style.transform = `translate(${x}px,${y}px) rotate(${rot}deg)`;\n const r = Math.min(1, Math.abs(x)/120);\n sharpStamp.style.opacity = x>10? r : 0;\n sloppyStamp.style.opacity= x<-10? r : 0;\n }\n function onDown(e){\n if(locked) return;\n down=true; id=e.pointerId;\n sx=e.clientX; sy=e.clientY; dx=0; dy=0;\n el.setPointerCapture && el.setPointerCapture(id);\n el.style.transition=\"none\";\n }\n function onMove(e){\n if(!down) return;\n dx=e.clientX-sx; dy=e.clientY-sy;\n setT(dx,dy*.4, dx*.05);\n }\n function onUp(){\n if(!down) return; down=false;\n const TH=95;\n if(dx>TH) fling(el, +1);\n else if(dx<-TH)fling(el, -1);\n else setT(0,0,0,\"transform .32s cubic-bezier(.34,1.4,.5,1)\"); // snap back\n }\n el.addEventListener(\"pointerdown\",onDown);\n el.addEventListener(\"pointermove\",onMove);\n el.addEventListener(\"pointerup\",onUp);\n el.addEventListener(\"pointercancel\",onUp);\n el.addEventListener(\"lostpointercapture\",onUp);\n\n // expose for button/keyboard triggered fling\n el._fling = dir => fling(el, dir);\n }\n\n function fling(el, dir){\n if(locked) return;\n const off = (window.innerWidth||500)*1.2*dir;\n el.style.transition=\"transform .42s cubic-bezier(.4,.1,.4,1)\";\n el.style.transform = `translate(${off}px,-40px) rotate(${dir*22}deg)`;\n resolve(dir>0 ? \"SHARP\" : \"SLOPPY\");\n }\n\n /* ---------- RESOLVE A VERDICT ---------- */\n function resolve(choice){\n if(locked) return; locked=true;\n cancelTimer();\n const c = cards[idx];\n const correct = (choice === c.answer);\n scoreOfUpdate();\n\n if(correct){ score++; streak++; best=Math.max(best,streak); }\n else { streak=0; }\n\n // HUD update\n scoreVal.textContent = score;\n streakVal.textContent = streak;\n bump(scoreVal);\n streakFire.classList.add(\"streak-pop\");\n setTimeout(()=>streakFire.classList.remove(\"streak-pop\"),200);\n if(navigator.vibrate) navigator.vibrate(correct? 18 : [10,40,10]);\n\n showReveal(c, choice, correct);\n }\n function scoreOfUpdate(){ scoreOf.textContent = \"/ \" + (idx+1); }\n function bump(node){ node.animate([{transform:\"scale(1.4)\"},{transform:\"scale(1)\"}],{duration:240,easing:\"cubic-bezier(.34,1.56,.64,1)\"}); }\n\n /* ---------- REVEAL OVERLAY ---------- */\n function showReveal(c, choice, correct){\n const badge=$(\"#revealBadge\"), verdict=$(\"#revealVerdict\"),\n lesson=$(\"#revealLesson\"), note=$(\"#revealNote\");\n\n badge.className = \"reveal-badge \" + (correct?\"ok\":\"miss\");\n badge.textContent = correct ? \"✓ Correct\" : \"✕ Look Again\";\n\n const word = (D.verdictWords && D.verdictWords[c.answer]) || c.answer;\n verdict.innerHTML = `He was ${word}`;\n lesson.textContent = correct ? (c.lessonRight||\"\") : (c.lessonWrong||\"\");\n note.textContent = c.note||\"\";\n\n reveal.classList.add(\"show\");\n }\n\n function advance(){\n reveal.classList.remove(\"show\");\n idx++;\n locked=false;\n if(idx>=cards.length){ endGame(); return; }\n renderDeck();\n }\n // tap anywhere on reveal to continue\n reveal.addEventListener(\"click\", ()=>{ if(reveal.classList.contains(\"show\")) advance(); });\n\n /* ---------- BUTTON + KEYBOARD CONTROLS ---------- */\n function triggerCurrent(dir){\n if(locked) return;\n const cur = deck.querySelector(\".card:not(.behind):not(.behind2)\");\n if(cur && cur._fling) cur._fling(dir);\n }\n $(\"#btnYes\").addEventListener(\"click\",()=>triggerCurrent(+1));\n $(\"#btnNo\").addEventListener(\"click\",()=>triggerCurrent(-1));\n document.addEventListener(\"keydown\", e=>{\n if($(\"#startScreen\").classList.contains(\"hidden\")===false){\n if(e.key===\"Enter\"||e.key===\" \") startGame();\n return;\n }\n if(reveal.classList.contains(\"show\")){\n if(e.key===\"Enter\"||e.key===\" \"||e.key===\"ArrowRight\"||e.key===\"ArrowLeft\") advance();\n return;\n }\n if(e.key===\"ArrowRight\") triggerCurrent(+1);\n else if(e.key===\"ArrowLeft\") triggerCurrent(-1);\n });\n\n /* ---------- START / END ---------- */\n function startGame(){\n idx=0;score=0;streak=0;best=0;locked=false;\n scoreVal.textContent=0; streakVal.textContent=0; scoreOf.textContent=\"/ 0\";\n $(\"#startScreen\").classList.add(\"hidden\");\n $(\"#endScreen\").classList.add(\"hidden\");\n buildDots();\n renderDeck();\n }\n\n function endGame(){\n cancelTimer();\n const pct = score / cards.length;\n const rank = (D.ranks||[]).find(r=>pct>=r.min) || {title:[\"—\",\"\"],blurb:\"\"};\n $(\"#endRank\").innerHTML = `${rank.title[0]} ${rank.title[1]||\"\"}`;\n $(\"#endSummary\").textContent = rank.blurb;\n $(\"#endScore\").textContent = score + \" / \" + cards.length;\n $(\"#endStreak\").textContent = best;\n if(D.promo){\n $(\"#promoCode\").textContent = D.promo.code||\"\";\n $(\"#promoOff\").textContent = D.promo.off||\"\";\n $(\"#promoDesc\").textContent = D.promo.desc||\"\";\n }\n $(\"#endScreen\").classList.remove(\"hidden\");\n $(\"#endScreen\").classList.add(\"fade-in\");\n }\n\n /* ---------- PROMO COPY ---------- */\n $(\"#copyBtn\").addEventListener(\"click\", function(){\n const code = (D.promo&&D.promo.code)||\"\";\n const btn=this;\n const done=()=>{ btn.textContent=\"Copied ✓\"; btn.classList.add(\"done\"); setTimeout(()=>{btn.textContent=\"Copy Code\";btn.classList.remove(\"done\");},1800); };\n if(navigator.clipboard&&navigator.clipboard.writeText){\n navigator.clipboard.writeText(code).then(done).catch(done);\n } else {\n const ta=document.createElement(\"textarea\"); ta.value=code; document.body.appendChild(ta);\n ta.select(); try{document.execCommand(\"copy\");}catch(e){} ta.remove(); done();\n }\n });\n\n /* ---------- WIRE START BUTTONS ---------- */\n $(\"#startLede\").textContent = D.startLede || \"\";\n $(\"#startBtn\").addEventListener(\"click\", startGame);\n $(\"#replayBtn\").addEventListener(\"click\", startGame);\n\n})();\n\n/* Self-resize hook for iframe embedding (StoryPress freeform) */\nconst fit=()=>{if(window.frameElement)window.frameElement.style.height=document.documentElement.scrollHeight+'px'};\ntry{ new ResizeObserver(fit).observe(document.body); }catch(_){}\naddEventListener('load',fit);\n","47,42,32,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,10,32,32,32,71,65,77,69,95,68,65,84,65,32,226,128,148,32,69,86,69,82,89,84,72,73,78,71,32,65,32,78,79,78,45,67,79,68,69,82,32,78,69,69,68,83,32,76,73,86,69,83,32,72,69,82,69,46,10,32,32,32,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,10,32,32,32,69,100,105,116,32,116,101,120,116,44,32,97,100,100,47,114,101,109,111,118,101,32,114,111,117,110,100,115,44,32,97,100,100,47,101,100,105,116,32,109,101,110,44,32,99,104,97,110,103,101,32,116,104,101,32,112,114,111,109,111,32,99,111,100,101,32,226,128,148,32,97,108,108,10,32,32,32,98,101,108,111,119,46,32,89,111,117,32,110,101,118,101,114,32,110,101,101,100,32,116,111,32,116,111,117,99,104,32,116,104,101,32,103,97,109,101,32,108,111,103,105,99,32,117,110,100,101,114,110,101,97,116,104,32,116,104,105,115,32,111,98,106,101,99,116,46,10,10,32,32,32,72,79,87,32,69,65,67,72,32,80,73,69,67,69,32,87,79,82,75,83,58,10,32,32,32,45,32,109,101,116,97,58,32,32,32,32,116,105,116,108,101,115,44,32,105,110,116,114,111,32,38,32,101,110,100,32,99,111,112,121,44,32,115,99,111,114,105,110,103,32,114,97,110,107,115,44,32,97,110,100,32,116,104,101,32,80,82,79,77,79,32,114,101,119,97,114,100,46,10,32,32,32,45,32,114,111,117,110,100,115,91,93,58,32,101,97,99,104,32,114,111,117,110,100,32,61,32,111,110,101,32,108,105,110,101,117,112,32,111,102,32,109,101,110,46,32,83,101,116,32,34,99,111,114,114,101,99,116,34,32,116,111,32,116,104,101,32,105,100,32,111,102,32,116,104,101,10,32,32,32,32,32,32,32,32,32,32,32,32,32,32,32,109,97,110,32,119,104,111,32,105,115,32,116,104,101,32,115,104,97,114,112,101,115,116,32,40,117,115,117,97,108,108,121,32,116,104,101,32,85,78,68,69,82,83,84,65,84,69,68,32,111,110,101,44,32,110,111,116,32,116,104,101,10,32,32,32,32,32,32,32,32,32,32,32,32,32,32,32,102,108,97,115,104,105,101,115,116,41,46,32,87,114,105,116,101,32,116,104,101,32,114,101,118,101,97,108,32,99,111,112,121,32,116,104,97,116,32,116,101,97,99,104,101,115,32,87,72,89,46,10,32,32,32,45,32,69,97,99,104,32,109,97,110,32,105,115,32,68,82,65,87,78,32,102,114,111,109,32,34,116,114,97,105,116,115,34,32,40,110,111,32,105,109,97,103,101,115,44,32,110,111,32,112,104,111,116,111,115,41,46,32,74,117,115,116,32,112,105,99,107,32,102,114,111,109,32,116,104,101,10,32,32,32,32,32,97,108,108,111,119,101,100,32,118,97,108,117,101,115,32,108,105,115,116,101,100,32,105,110,32,116,104,101,32,99,111,109,109,101,110,116,115,32,97,110,100,32,97,32,99,108,101,97,110,32,83,86,71,32,102,105,103,117,114,101,32,105,115,32,103,101,110,101,114,97,116,101,100,46,10,10,32,32,32,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,10,32,32,32,76,65,84,69,82,58,32,108,111,97,100,32,116,104,105,115,32,102,114,111,109,32,97,110,32,101,120,116,101,114,110,97,108,32,102,105,108,101,32,111,114,32,97,32,83,116,111,114,121,80,114,101,115,115,32,102,114,101,101,102,111,114,109,32,99,111,109,112,111,110,101,110,116,46,10,32,32,32,82,101,112,108,97,99,101,32,116,104,101,32,108,105,116,101,114,97,108,32,111,98,106,101,99,116,32,119,105,116,104,32,97,32,102,101,116,99,104,44,32,101,46,103,46,58,10,10,32,32,32,32,32,32,32,99,111,110,115,116,32,71,65,77,69,95,68,65,84,65,32,61,32,97,119,97,105,116,32,102,101,116,99,104,40,39,108,105,110,101,117,112,46,106,115,111,110,39,41,46,116,104,101,110,40,114,32,61,62,32,114,46,106,115,111,110,40,41,41,59,10,10,32,32,32,111,114,32,112,117,108,108,32,105,116,32,102,114,111,109,32,97,32,83,116,111,114,121,80,114,101,115,115,32,102,114,101,101,102,111,114,109,47,74,83,79,78,32,102,105,101,108,100,58,10,10,32,32,32,32,32,32,32,99,111,110,115,116,32,71,65,77,69,95,68,65,84,65,32,61,32,74,83,79,78,46,112,97,114,115,101,40,10,32,32,32,32,32,32,32,32,32,100,111,99,117,109,101,110,116,46,103,101,116,69,108,101,109,101,110,116,66,121,73,100,40,39,115,116,111,114,121,112,114,101,115,115,45,108,105,110,101,117,112,45,100,97,116,97,39,41,46,116,101,120,116,67,111,110,116,101,110,116,10,32,32,32,32,32,32,32,41,59,10,10,32,32,32,84,104,101,32,114,101,115,116,32,111,102,32,116,104,101,32,99,111,100,101,32,105,115,32,97,103,110,111,115,116,105,99,32,116,111,32,119,104,101,114,101,32,71,65,77,69,95,68,65,84,65,32,99,111,109,101,115,32,102,114,111,109,46,10,32,32,32,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,32,42,47,10,99,111,110,115,116,32,71,65,77,69,95,68,65,84,65,32,61,32,123,10,10,32,32,109,101,116,97,58,32,123,10,32,32,32,32,105,110,116,114,111,84,105,116,108,101,58,32,34,83,112,111,116,32,116,104,101,32,66,101,115,116,32,68,114,101,115,115,101,100,32,77,97,110,34,44,10,32,32,32,32,105,110,116,114,111,84,97,103,58,32,34,65,32,83,116,117,100,121,32,105,110,32,82,101,115,116,114,97,105,110,116,34,44,10,32,32,32,32,47,47,32,85,115,101,32,97,32,115,105,110,103,108,101,32,60,101,109,62,46,46,46,60,47,101,109,62,32,102,111,114,32,116,104,101,32,99,108,111,115,105,110,103,32,105,116,97,108,105,99,32,108,105,110,101,32,105,102,32,121,111,117,32,108,105,107,101,46,10,32,32,32,32,105,110,116,114,111,76,101,100,101,58,32,34,70,111,117,114,32,109,101,110,46,32,79,110,101,32,104,111,108,100,115,32,116,104,101,32,114,111,111,109,32,119,105,116,104,111,117,116,32,114,97,105,115,105,110,103,32,104,105,115,32,118,111,105,99,101,46,32,66,101,115,116,32,100,114,101,115,115,101,100,32,105,115,32,110,111,116,32,116,104,101,32,108,111,117,100,101,115,116,32,226,128,148,32,105,116,32,105,115,32,116,104,101,32,109,111,115,116,32,60,101,109,62,105,110,116,101,110,100,101,100,60,47,101,109,62,46,32,70,105,110,100,32,116,104,101,32,108,105,110,101,32,116,104,97,116,32,104,111,108,100,115,32,97,108,108,32,100,97,121,46,60,101,109,62,83,116,121,108,101,32,105,115,32,110,111,116,32,100,101,99,111,114,97,116,105,111,110,46,32,73,116,32,105,115,32,116,104,101,32,102,105,114,115,116,32,115,101,110,116,101,110,99,101,32,97,32,109,97,110,32,100,101,108,105,118,101,114,115,46,60,47,101,109,62,34,44,10,32,32,32,32,115,116,97,114,116,76,97,98,101,108,58,32,34,66,101,103,105,110,32,116,104,101,32,76,105,110,101,117,112,34,44,10,10,32,32,32,32,110,101,120,116,76,97,98,101,108,58,32,34,78,101,120,116,32,77,97,110,34,44,10,32,32,32,32,102,105,110,105,115,104,76,97,98,101,108,58,32,34,83,101,101,32,89,111,117,114,32,86,101,114,100,105,99,116,34,44,10,10,32,32,32,32,101,110,100,84,105,116,108,101,58,32,34,84,104,101,32,86,101,114,100,105,99,116,34,44,10,32,32,32,32,47,47,32,123,115,99,111,114,101,125,32,97,110,100,32,123,116,111,116,97,108,125,32,97,114,101,32,102,105,108,108,101,100,32,105,110,32,97,117,116,111,109,97,116,105,99,97,108,108,121,46,10,32,32,32,32,101,110,100,83,117,109,109,97,114,121,58,32,34,89,111,117,32,106,117,100,103,101,100,32,123,115,99,111,114,101,125,32,111,102,32,123,116,111,116,97,108,125,32,108,105,110,101,117,112,115,32,119,105,116,104,32,97,32,99,108,101,97,114,32,101,121,101,46,32,80,114,101,115,101,110,99,101,32,105,115,110,39,116,32,98,111,117,103,104,116,32,226,128,148,32,105,116,39,115,32,60,101,109,62,98,117,105,108,116,60,47,101,109,62,44,32,113,117,105,101,116,108,121,44,32,111,110,32,97,32,108,105,110,101,32,116,104,97,116,32,110,101,118,101,114,32,115,108,105,112,115,46,60,101,109,62,84,104,101,32,109,97,110,32,119,104,111,32,110,101,101,100,115,32,110,111,32,115,101,99,111,110,100,32,103,108,97,110,99,101,32,104,97,115,32,97,108,114,101,97,100,121,32,119,111,110,32,116,104,101,32,114,111,111,109,46,60,47,101,109,62,34,44,10,32,32,32,32,112,108,97,121,65,103,97,105,110,76,97,98,101,108,58,32,34,74,117,100,103,101,32,65,103,97,105,110,34,44,10,10,32,32,32,32,47,47,32,83,99,111,114,101,32,114,97,110,107,115,32,226,128,148,32,112,105,99,107,32,97,32,108,97,98,101,108,32,98,121,32,109,105,110,105,109,117,109,32,99,111,114,114,101,99,116,32,97,110,115,119,101,114,115,32,40,104,105,103,104,101,115,116,32,109,97,116,99,104,32,119,105,110,115,41,46,10,32,32,32,32,114,97,110,107,115,58,32,91,10,32,32,32,32,32,32,123,32,109,105,110,58,32,48,44,32,108,97,98,101,108,58,32,34,65,32,87,97,110,100,101,114,105,110,103,32,69,121,101,34,32,125,44,10,32,32,32,32,32,32,123,32,109,105,110,58,32,52,44,32,108,97,98,101,108,58,32,34,65,32,68,105,115,99,101,114,110,105,110,103,32,71,117,101,115,116,34,32,125,44,10,32,32,32,32,32,32,123,32,109,105,110,58,32,54,44,32,108,97,98,101,108,58,32,34,65,32,77,97,110,32,111,102,32,84,97,115,116,101,34,32,125,44,10,32,32,32,32,32,32,123,32,109,105,110,58,32,56,44,32,108,97,98,101,108,58,32,34,84,104,101,32,72,111,117,115,101,32,84,97,105,108,111,114,39,115,32,69,113,117,97,108,34,32,125,10,32,32,32,32,93,44,10,10,32,32,32,32,47,47,32,84,72,69,32,82,69,87,65,82,68,32,226,128,148,32,101,100,105,116,32,102,114,101,101,108,121,46,10,32,32,32,32,112,114,111,109,111,58,32,123,10,32,32,32,32,32,32,108,97,98,101,108,58,32,34,89,111,117,114,32,82,101,119,97,114,100,34,44,10,32,32,32,32,32,32,99,111,100,101,58,32,34,83,72,65,82,80,49,48,34,44,10,32,32,32,32,32,32,111,102,102,58,32,34,36,49,48,32,111,102,102,32,121,111,117,114,32,102,105,114,115,116,32,115,101,116,32,111,102,32,98,114,97,99,101,115,34,44,10,32,32,32,32,32,32,116,101,114,109,115,58,32,34,79,110,101,32,117,115,101,32,112,101,114,32,99,117,115,116,111,109,101,114,46,32,72,111,108,100,32,116,104,101,32,108,105,110,101,32,97,116,32,99,104,101,99,107,111,117,116,46,34,10,32,32,32,32,125,10,32,32,125,44,10,10,32,32,47,42,32,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,61,10,32,32,32,32,32,82,79,85,78,68,83,10,32,32,32,32,32,69,97,99,104,32,114,111,117,110,100,58,32,123,32,105,100,44,32,113,117,101,115,116,105,111,110,44,32,104,105,110,116,44,32,99,111,114,114,101,99,116,32,40,109,97,110,32,105,100,41,44,32,109,101,110,91,93,44,32,114,101,118,101,97,108,123,125,32,125,10,10,32,32,32,32,32,77,65,78,32,84,82,65,73,84,83,32,226,128,148,32,97,108,108,111,119,101,100,32,118,97,108,117,101,115,32,40,97,110,121,116,104,105,110,103,32,101,108,115,101,32,102,97,108,108,115,32,98,97,99,107,32,103,114,97,99,101,102,117,108,108,121,41,58,10,32,32,32,32,32,32,32,115,107,105,110,58,32,32,32,32,32,32,34,102,97,105,114,34,32,124,32,34,116,97,110,34,32,124,32,34,100,101,101,112,34,10,32,32,32,32,32,32,32,104,97,105,114,58,32,32,32,32,32,32,34,100,97,114,107,34,32,124,32,34,108,105,103,104,116,34,32,124,32,34,103,114,101,121,34,32,124,32,34,98,97,108,100,34,32,124,32,34,97,117,98,117,114,110,34,10,32,32,32,32,32,32,32,115,117,105,116,58,32,32,32,32,32,32,97,110,121,32,104,101,120,32,99,111,108,111,114,32,40,116,104,101,32,106,97,99,107,101,116,47,116,114,111,117,115,101,114,115,41,32,32,32,101,46,103,46,32,34,35,49,102,50,97,51,99,34,10,32,32,32,32,32,32,32,115,104,105,114,116,58,32,32,32,32,32,97,110,121,32,104,101,120,32,99,111,108,111,114,32,32,32,32,32,32,32,32,32,32,32,32,32,32,32,32,32,32,32,32,32,32,32,32,32,32,101,46,103,46,32,34,35,102,102,102,98,102,50,34,10,32,32,32,32,32,32,32,98,114,97,99,101,115,58,32,32,32,32,102,97,108,115,101,32,32,79,82,32,97,32,104,101,120,32,99,111,108,111,114,32,40,118,105,115,105,98,108,101,32,115,117,115,112,101,110,100,101,114,115,41,32,32,101,46,103,46,32,34,35,55,97,50,101,50,101,34,10,32,32,32,32,32,32,32,116,105,101,58,32,32,32,32,32,32,32,102,97,108,115,101,32,124,32,34,35,104,101,120,34,32,40,110,101,99,107,116,105,101,41,32,32,124,32,32,115,101,116,32,116,105,101,84,121,112,101,32,98,101,108,111,119,10,32,32,32,32,32,32,32,116,105,101,84,121,112,101,58,32,32,32,34,116,105,101,34,32,124,32,34,98,111,119,34,32,124,32,34,110,111,110,101,34,10,32,32,32,32,32,32,32,112,111,99,107,101,116,58,32,32,32,32,102,97,108,115,101,32,124,32,34,35,104,101,120,34,32,32,40,112,111,99,107,101,116,32,115,113,117,97,114,101,41,10,32,32,32,32,32,32,32,108,97,112,101,108,80,105,110,58,32,32,102,97,108,115,101,32,124,32,34,35,104,101,120,34,32,32,40,98,111,117,116,111,110,110,105,101,114,101,32,47,32,112,105,110,32,226,128,148,32,117,115,117,97,108,108,121,32,97,32,34,116,114,121,105,110,103,32,116,111,111,32,104,97,114,100,34,32,116,101,108,108,41,10,32","d51ac292-4eb5-4cb1-8c75-4312f8b26232","\n

\n\n \n

KK & JaySupply Co.

The Line Holds

Correct

0/ 0

Streak

▲0

\n\n \n

\n \n \n

← Sloppy • Drag the card • Sharp →

\n\n \n

Tap to continue

\n\n \n

An Exercise in Judgement

Sharp or Sloppy

← SloppyTrying too hard.

Sharp →Dressed on purpose.

\n \n

Best dressed isn't loudest. It's the line that holds.

\n\n \n

The Verdict Is In

Score

Best Streak

\n\n \n \n

\n\n

","",{"_20":199,"_103":104,"_106":104,"_107":104,"_108":104,"_109":200,"_111":104,"_112":113},188891452854730,"https://a.storyblok.com/f/334678/59f84c2541/screenshot_2026_06_18_at_140105.png",{"_56":115,"_107":202,"_117":67,"_64":62,"_118":203,"_70":204},"Spot the Best Dressed Man — KK & Jay","Pick the sharpest-dressed man.","",{"_56":206,"_123":124,"_64":60,"_125":126,"_127":126,"_128":126,"_129":130,"_131":132,"_133":132,"_134":132,"_135":136,"_137":126,"_138":139,"_140":136,"_141":139,"_142":67,"_70":207,"_208":124,"_209":210,"_211":212,"_213":214,"_215":216},"84cbff72-b64d-446f-a12c-f54ebd332dc8","","multipleHref","headingHref","https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap","headingFamily","\"pf-marlet-display\",sans-serif","paragraphFamily","\"transat\",sans-serif","multipleStyleSheet","/*\n * The Typekit service used to deliver this font or fonts for use on websites\n * is provided by Adobe and is subject to these Terms of Use\n * http://www.adobe.com/products/eulas/tou_typekit. For font license\n * information, see the list below.\n *\n * pf-marlet-display:\n * - http://typekit.com/eulas/0000000000000000774f2ae7\n * transat:\n * - http://typekit.com/eulas/00000000000000007735b637\n *\n * © 2009-2026 Adobe Systems Incorporated. All Rights Reserved.\n */\n/*{\"last_published\":\"2025-11-21 18:54:39 UTC\"}*/\n\n@import url(\"https://p.typekit.net/p.css?s=1&k=pdj4rqt&ht=tk&f=42045.53191&a=87267439&app=typekit&e=css\");\n\n@font-face {\nfont-family:\"transat\";\nsrc:url(\"https://use.typekit.net/af/316462/00000000000000007735b637/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"woff2\"),url(\"https://use.typekit.net/af/316462/00000000000000007735b637/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"woff\"),url(\"https://use.typekit.net/af/316462/00000000000000007735b637/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"opentype\");\nfont-display:auto;font-style:normal;font-weight:400;font-stretch:normal;\n}\n\n@font-face {\nfont-family:\"pf-marlet-display\";\nsrc:url(\"https://use.typekit.net/af/7b230d/0000000000000000774f2ae7/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"woff2\"),url(\"https://use.typekit.net/af/7b230d/0000000000000000774f2ae7/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"woff\"),url(\"https://use.typekit.net/af/7b230d/0000000000000000774f2ae7/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"opentype\");\nfont-display:auto;font-style:normal;font-weight:400;font-stretch:normal;\n}\n\n.tk-transat { font-family: \"transat\",sans-serif; }\n.tk-pf-marlet-display { font-family: \"pf-marlet-display\",sans-serif; }\n",{"_20":218,"_146":219,"_148":104,"_56":220,"_150":221,"_152":67,"_64":153,"_154":222,"_156":67,"_157":222,"_158":36,"_70":223},"kkj-lineup","\n/* ============================================================================\n GAME_DATA — EVERYTHING A NON-CODER NEEDS LIVES HERE.\n ----------------------------------------------------------------------------\n Edit text, add/remove rounds, add/edit men, change the promo code — all\n below. You never need to touch the game logic underneath this object.\n\n HOW EACH PIECE WORKS:\n - meta: titles, intro & end copy, scoring ranks, and the PROMO reward.\n - rounds[]: each round = one lineup of men. Set \"correct\" to the id of the\n man who is the sharpest (usually the UNDERSTATED one, not the\n flashiest). Write the reveal copy that teaches WHY.\n - Each man is DRAWN from \"traits\" (no images, no photos). Just pick from the\n allowed values listed in the comments and a clean SVG figure is generated.\n\n ----------------------------------------------------------------------------\n LATER: load this from an external file or a StoryPress freeform component.\n Replace the literal object with a fetch, e.g.:\n\n const GAME_DATA = await fetch('lineup.json').then(r => r.json());\n\n or pull it from a StoryPress freeform/JSON field:\n\n const GAME_DATA = JSON.parse(\n document.getElementById('storypress-lineup-data').textContent\n );\n\n The rest of the code is agnostic to where GAME_DATA comes from.\n ========================================================================== */\nconst GAME_DATA = {\n\n meta: {\n introTitle: \"Spot the Best Dressed Man\",\n introTag: \"A Study in Restraint\",\n // Use a single ... for the closing italic line if you like.\n introLede: \"Four men. One holds the room without raising his voice. Best dressed is not the loudest — it is the most intended. Find the line that holds all day.Style is not decoration. It is the first sentence a man delivers.\",\n startLabel: \"Begin the Lineup\",\n\n nextLabel: \"Next Man\",\n finishLabel: \"See Your Verdict\",\n\n endTitle: \"The Verdict\",\n // {score} and {total} are filled in automatically.\n endSummary: \"You judged {score} of {total} lineups with a clear eye. Presence isn't bought — it's built, quietly, on a line that never slips.The man who needs no second glance has already won the room.\",\n playAgainLabel: \"Judge Again\",\n\n // Score ranks — pick a label by minimum correct answers (highest match wins).\n ranks: [\n { min: 0, label: \"A Wandering Eye\" },\n { min: 4, label: \"A Discerning Guest\" },\n { min: 6, label: \"A Man of Taste\" },\n { min: 8, label: \"The House Tailor's Equal\" }\n ],\n\n // THE REWARD — edit freely.\n promo: {\n label: \"Your Reward\",\n code: \"SHARP10\",\n off: \"$10 off your first set of braces\",\n terms: \"One use per customer. Hold the line at checkout.\"\n }\n },\n\n /* ==========================================================================\n ROUNDS\n Each round: { id, question, hint, correct (man id), men[], reveal{} }\n\n MAN TRAITS — allowed values (anything else falls back gracefully):\n skin: \"fair\" | \"tan\" | \"deep\"\n hair: \"dark\" | \"light\" | \"grey\" | \"bald\" | \"auburn\"\n suit: any hex color (the jacket/trousers) e.g. \"#1f2a3c\"\n shirt: any hex color e.g. \"#fffbf2\"\n braces: false OR a hex color (visible suspenders) e.g. \"#7a2e2e\"\n tie: false | \"#hex\" (necktie) | set tieType below\n tieType: \"tie\" | \"bow\" | \"none\"\n pocket: false | \"#hex\" (pocket square)\n lapelPin: false | \"#hex\" (boutonniere / pin — usually a \"trying too hard\" tell)\n posture: \"easy\" | \"stiff\" | \"slouch\" | \"preen\" (preen/slouch read as off)\n build: \"lean\" | \"reg\" | \"broad\"\n ========================================================================== */\n rounds: [\n\n {\n id: \"r1\",\n question: \"Who is the best dressed man?\",\n hint: \"Three men at a Tuesday luncheon. One belongs there without effort.\",\n correct: \"m_b\",\n men: [\n { id:\"m_a\", name:\"The Salesman\", plinth:\"All Shine\", traits:{\n skin:\"tan\", hair:\"dark\", suit:\"#3a3f8c\", shirt:\"#fffdf5\",\n braces:false, tieType:\"tie\", tie:\"#d23b3b\", pocket:\"#d23b3b\", lapelPin:\"#e0b020\", posture:\"preen\", build:\"reg\" } },\n { id:\"m_b\", name:\"The Quiet One\", plinth:\"The Line Holds\", traits:{\n skin:\"fair\", hair:\"dark\", suit:\"#1f2a3c\", shirt:\"#fffbf2\",\n braces:\"#6b5535\", tieType:\"tie\", tie:\"#3a4a5e\", pocket:\"#eae3d2\", lapelPin:false, posture:\"easy\", build:\"lean\" } },\n { id:\"m_c\", name:\"The Drifter\", plinth:\"Half-Tucked\", traits:{\n skin:\"deep\", hair:\"dark\", suit:\"#5a5048\", shirt:\"#efe7d6\",\n braces:false, tieType:\"none\", tie:false, pocket:false, lapelPin:false, posture:\"slouch\", build:\"reg\" } }\n ],\n reveal: {\n good: \"The Quiet One.\",\n body: \"He spends nothing on noise. Navy that means it, a tie a half-shade down, a square that is folded, not flaunted. His braces sit unseen beneath the jacket — yet the shirt never breaks at the waist all afternoon. That is the whole trick.\",\n lesson: \"The loudest man in the room is rarely the one being looked at.\"\n }\n },\n\n {\n id: \"r2\",\n question: \"Which man holds the room?\",\n hint: \"A gallery opening. Watch the fit, not the flash.\",\n correct: \"m_e\",\n men: [\n { id:\"m_d\", name:\"The Peacock\", plinth:\"Borrowed Glory\", traits:{\n skin:\"fair\", hair:\"light\", suit:\"#7a1f5c\", shirt:\"#fff7fb\",\n braces:false, tieType:\"bow\", tie:\"#e0b020\", pocket:\"#e0b020\", lapelPin:\"#d23b3b\", posture:\"preen\", build:\"reg\" } },\n { id:\"m_e\", name:\"The Architect\", plinth:\"Measured\", traits:{\n skin:\"tan\", hair:\"grey\", suit:\"#2b2f33\", shirt:\"#fffbf2\",\n braces:\"#2b2f33\", tieType:\"tie\", tie:\"#7a2e2e\", pocket:\"#eae3d2\", lapelPin:false, posture:\"easy\", build:\"reg\" } },\n { id:\"m_f\", name:\"The Apprentice\", plinth:\"Almost\", traits:{\n skin:\"fair\", hair:\"auburn\", suit:\"#3c4a3a\", shirt:\"#fffdf5\",\n braces:false, tieType:\"tie\", tie:\"#3c4a3a\", pocket:false, lapelPin:false, posture:\"stiff\", build:\"lean\" } }\n ],\n reveal: {\n good: \"The Architect.\",\n body: \"Charcoal, a single oxblood note, nothing pleading for attention. The Apprentice is close — but his shoulders are braced like he's bracing, and his shirt rides up when he reaches. Composure is a fit you forget you're wearing.\",\n lesson: \"Ease is earned by engineering, not by trying to look at ease.\"\n }\n },\n\n {\n id: \"r3\",\n question: \"Who dressed with intention?\",\n hint: \"Two are decorated. One is composed.\",\n correct: \"m_h\",\n men: [\n { id:\"m_g\", name:\"The Collector\", plinth:\"Too Much\", traits:{\n skin:\"deep\", hair:\"dark\", suit:\"#0d3b2e\", shirt:\"#fff7e8\",\n braces:\"#e0b020\", tieType:\"tie\", tie:\"#e0b020\", pocket:\"#d23b3b\", lapelPin:\"#d23b3b\", posture:\"preen\", build:\"broad\" } },\n { id:\"m_h\", name:\"The Editor\", plinth:\"Exactly Enough\", traits:{\n skin:\"fair\", hair:\"dark\", suit:\"#26303f\", shirt:\"#fffbf2\",\n braces:\"#26303f\", tieType:\"tie\", tie:\"#8a8f99\", pocket:\"#eae3d2\", lapelPin:false, posture:\"easy\", build:\"lean\" } },\n { id:\"m_i\", name:\"The Tourist\", plinth:\"Adrift\", traits:{\n skin:\"tan\", hair:\"light\", suit:\"#9a8f6f\", shirt:\"#fffdf5\",\n braces:false, tieType:\"none\", tie:false, pocket:false, lapelPin:false, posture:\"slouch\", build:\"reg\" } }\n ],\n reveal: {\n good: \"The Editor.\",\n body: \"A silver tie, no pin, no contest. The Collector wears every good idea he ever had — at once. Good taste is mostly the courage to remove. The Editor's line is unbroken because the braces do the holding so the man can do the talking.\",\n lesson: \"Editing is the discipline that separates dressed from costumed.\"\n }\n },\n\n {\n id: \"r4\",\n question: \"Best dressed — choose carefully.\",\n hint: \"All four are well-off. Only one is well-dressed.\",\n correct: \"m_k\",\n men: [\n { id:\"m_j\", name:\"The Financier\", plinth:\"Loud Money\", traits:{\n skin:\"fair\", hair:\"grey\", suit:\"#101b33\", shirt:\"#eaf2ff\",\n braces:false, tieType:\"tie\", tie:\"#d23b3b\", pocket:\"#ffffff\", lapelPin:\"#e0b020\", posture:\"stiff\", build:\"broad\" } },\n { id:\"m_k\", name:\"The Diplomat\", plinth:\"Quiet Authority\", traits:{\n skin:\"tan\", hair:\"dark\", suit:\"#1c2733\", shirt:\"#fffbf2\",\n braces:\"#3a2e1f\", tieType:\"tie\", tie:\"#2f3b4a\", pocket:\"#d8cdb6\", lapelPin:false, posture:\"easy\", build:\"reg\" } },\n { id:\"m_l\", name:\"The Heir\", plinth:\"Trying\", traits:{\n skin:\"fair\", hair:\"light\", suit:\"#5b6e9a\", shirt:\"#fff7fb\",\n braces:false, tieType:\"bow\", tie:\"#7a1f5c\", pocket:\"#7a1f5c\", lapelPin:\"#d23b3b\", posture:\"preen\", build:\"lean\" } },\n { id:\"m_m\", name:\"The Clerk\", plinth:\"Unfinished\", traits:{\n skin:\"deep\", hair:\"dark\", suit:\"#454c52\", shirt:\"#efe7d6\",\n braces:false, tieType:\"tie\", tie:\"#454c52\", pocket:false, lapelPin:false, posture:\"slouch\", build:\"reg\" } }\n ],\n reveal: {\n good: \"The Diplomat.\",\n body: \"He could outspend the room and chooses not to. The Financier's whole look is a price tag; the Heir is in costume. The Diplomat trusts a deep navy and lets the cut speak. Authority whispers — it never has to shout.\",\n lesson: \"Money buys the cloth. Restraint buys the respect.\"\n }\n },\n\n {\n id: \"r5\",\n question: \"Which line will hold all day?\",\n hint: \"Subtler now. Look at the waist, the shoulders, the calm.\",\n correct: \"m_o\",\n men: [\n { id:\"m_n\", name:\"The Groomsman\", plinth:\"Rented\", traits:{\n skin:\"fair\", hair:\"dark\", suit:\"#23272b\", shirt:\"#fffdf5\",\n braces:false, tieType:\"bow\", tie:\"#23272b\", pocket:\"#ffffff\", lapelPin:\"#d23b3b\", posture:\"stiff\", build:\"broad\" } },\n { id:\"m_o\", name:\"The Regular\", plinth:\"His Own\", traits:{\n skin:\"tan\", hair:\"grey\", suit:\"#24323f\", shirt:\"#fffbf2\",\n braces:\"#24323f\", tieType:\"tie\", tie:\"#5a6b52\", pocket:\"#e6ddc8\", lapelPin:false, posture:\"easy\", build:\"reg\" } },\n { id:\"m_p\", name:\"The Newcomer\", plinth:\"Eager\", traits:{\n skin:\"deep\", hair:\"dark\", suit:\"#2d3a52\", shirt:\"#fffbf2\",\n braces:false, tieType:\"tie\", tie:\"#c8a96a\", pocket:\"#c8a96a\", lapelPin:\"#c8a96a\", posture:\"preen\", build:\"lean\" } }\n ],\n reveal: {\n good: \"The Regular.\",\n body: \"Nothing about him is new, and that is the point. The Newcomer has matched his pin to his square to his tie — a trio that tries too hard. The Regular's braces keep the trouser at its mark and the shirt at its line, so at hour nine he looks exactly as he did at hour one.\",\n lesson: \"True elegance is durability — looking deliberate after the day has tried to undo you.\"\n }\n },\n\n {\n id: \"r6\",\n question: \"Who understands his own clothes?\",\n hint: \"Two near-equals. The tell is in the matching.\",\n correct: \"m_r\",\n men: [\n { id:\"m_q\", name:\"The Matcher\", plinth:\"Coordinated\", traits:{\n skin:\"fair\", hair:\"light\", suit:\"#3b2f4a\", shirt:\"#fff7fb\",\n braces:\"#7a1f5c\", tieType:\"tie\", tie:\"#7a1f5c\", pocket:\"#7a1f5c\", lapelPin:false, posture:\"stiff\", build:\"reg\" } },\n { id:\"m_r\", name:\"The Tailor's Friend\", plinth:\"Composed\", traits:{\n skin:\"tan\", hair:\"dark\", suit:\"#222c38\", shirt:\"#fffbf2\",\n braces:\"#6b5535\", tieType:\"tie\", tie:\"#4a3b2e\", pocket:\"#d8cdb6\", lapelPin:false, posture:\"easy\", build:\"lean\" } },\n { id:\"m_s\", name:\"The Understudy\", plinth:\"Nearly\", traits:{\n skin:\"deep\", hair:\"grey\", suit:\"#2e3a33\", shirt:\"#fffdf5\",\n braces:false, tieType:\"tie\", tie:\"#2e3a33\", pocket:\"#e6ddc8\", lapelPin:false, posture:\"easy\", build:\"reg\" } }\n ],\n reveal: {\n good: \"The Tailor's Friend.\",\n body: \"The Matcher made everything the same purple — coordination mistaken for taste. The Tailor's Friend lets earth tones converse rather than chant in unison: a brown tie, a cream square, braces that never show but always work. Harmony, not uniform.\",\n lesson: \"Matching is arithmetic. Harmony is judgment.\"\n }\n },\n\n {\n id: \"r7\",\n question: \"The hardest call yet.\",\n hint: \"All three are restrained. One is restrained on purpose.\",\n correct: \"m_u\",\n men: [\n { id:\"m_t\", name:\"The Minimalist\", plinth:\"Empty\", traits:{\n skin:\"fair\", hair:\"dark\", suit:\"#2a2e33\", shirt:\"#fffdf5\",\n braces:false, tieType:\"none\", tie:false, pocket:false, lapelPin:false, posture:\"slouch\", build:\"lean\" } },\n { id:\"m_u\", name:\"The Considered Man\", plinth:\"Intentional\", traits:{\n skin:\"tan\", hair:\"dark\", suit:\"#1d2733\", shirt:\"#fffbf2\",\n braces:\"#1d2733\", tieType:\"tie\", tie:\"#3a4656\", pocket:\"#e6ddc8\", lapelPin:false, posture:\"easy\", build:\"reg\" } },\n { id:\"m_v\", name:\"The Severe One\", plinth:\"Cold\", traits:{\n skin:\"deep\", hair:\"bald\", suit:\"#0e0f10\", shirt:\"#ffffff\",\n braces:false, tieType:\"tie\", tie:\"#0e0f10\", pocket:false, lapelPin:false, posture:\"stiff\", build:\"broad\" } }\n ],\n reveal: {\n good: \"The Considered Man.\",\n body: \"The Minimalist mistook doing nothing for restraint — he simply gave up. The Severe One is all hardness, no warmth. The Considered Man chose every quiet thing: tonal tie, a soft cream square, the braces holding a line you'll never see and never doubt. Restraint is a decision, not an absence.\",\n lesson: \"Minimalism without intention is just neglect in a good jacket.\"\n }\n },\n\n {\n id: \"r8\",\n question: \"Name the best dressed man.\",\n hint: \"The final lineup. Trust what you've learned.\",\n correct: \"m_x\",\n men: [\n { id:\"m_w\", name:\"The Showman\", plinth:\"Encore\", traits:{\n skin:\"fair\", hair:\"auburn\", suit:\"#5e1d1d\", shirt:\"#fff7f0\",\n braces:\"#e0b020\", tieType:\"bow\", tie:\"#e0b020\", pocket:\"#e0b020\", lapelPin:\"#ffffff\", posture:\"preen\", build:\"broad\" } },\n { id:\"m_x\", name:\"The Gentleman\", plinth:\"The Whole Lesson\", traits:{\n skin:\"tan\", hair:\"grey\", suit:\"#1b2430\", shirt:\"#fffbf2\",\n braces:\"#3a2e1f\", tieType:\"tie\", tie:\"#37434f\", pocket:\"#dccfb6\", lapelPin:false, posture:\"easy\", build:\"reg\" } },\n { id:\"m_y\", name:\"The Hopeful\", plinth:\"So Close\", traits:{\n skin:\"deep\", hair:\"dark\", suit:\"#202a39\", shirt:\"#fffbf2\",\n braces:\"#202a39\", tieType:\"tie\", tie:\"#6e5a8a\", pocket:\"#6e5a8a\", lapelPin:false, posture:\"stiff\", build:\"lean\" } }\n ],\n reveal: {\n good: \"The Gentleman.\",\n body: \"Everything you've learned, standing in one man. No pin, no contest of colors, no plea. Just navy with intent, a tie a shade calmer than the suit, and the invisible engineering at the waist that lets him forget what he's wearing — so the room can't. The Hopeful is one matched square away from arriving.\",\n lesson: \"Presence is what remains after a man removes everything he was trying to prove.\"\n }\n }\n\n ]\n};\n\n/* ============================================================================\n ---- GAME LOGIC BELOW — non-coders need not edit past this point. ----\n ============================================================================ */\n(function(){\n \"use strict\";\n const app = document.getElementById('app');\n const M = GAME_DATA.meta;\n const ROUNDS = GAME_DATA.rounds;\n\n let idx = 0; // current round index\n let score = 0;\n let results = []; // true=correct, false=miss, null=pending\n\n /* ---------- SVG figure generator (drawn from traits) ---------- */\n const SKIN = { fair:\"#e9c6a6\", tan:\"#c89b73\", deep:\"#8a5a3c\" };\n const HAIR = { dark:\"#2a2320\", light:\"#caa869\", grey:\"#9a9690\", auburn:\"#7a3a22\", bald:null };\n\n function esc(s){ return String(s).replace(/[&<>\"]/g, c => ({'&':'&','<':'<','>':'>','\"':'"'}[c])); }\n\n function buildFigure(t){\n t = t || {};\n const skin = SKIN[t.skin] || SKIN.fair;\n const hairColor = (t.hair in HAIR) ? HAIR[t.hair] : HAIR.dark;\n const suit = t.suit || \"#1f2a3c\";\n const shirt = t.shirt || \"#fffbf2\";\n const build = t.build || \"reg\";\n const posture = t.posture || \"easy\";\n\n // build width\n const bw = build === \"broad\" ? 1.16 : build === \"lean\" ? 0.9 : 1.0;\n // posture transforms applied to the upper torso group\n let tilt = 0, headShift = 0, shoulder = 0;\n if (posture === \"slouch\"){ tilt = 2.2; headShift = 3; shoulder = 4; }\n else if (posture === \"stiff\"){ tilt = 0; headShift = 0; shoulder = -2; }\n else if (posture === \"preen\"){ tilt = -2; headShift = -2; shoulder = -1; }\n // 'easy' = neutral, very slight natural set\n\n const cx = 75; // canvas center\n // torso geometry\n const shW = 46 * bw;\n const waistW = 30 * bw;\n const torsoTop = 78 + shoulder;\n const torsoBot = 196;\n\n // shoulders/jacket path\n const lapelDark = shade(suit, -14);\n const jacket = `\n M ${cx-shW} ${torsoTop+10}\n C ${cx-shW} ${torsoTop}, ${cx-shW+6} ${torsoTop-6}, ${cx-22*bw} ${torsoTop-8}\n L ${cx-10} ${torsoTop-6}\n L ${cx} ${torsoTop+4}\n L ${cx+10} ${torsoTop-6}\n L ${cx+22*bw} ${torsoTop-8}\n C ${cx+shW-6} ${torsoTop-6}, ${cx+shW} ${torsoTop}, ${cx+shW} ${torsoTop+10}\n L ${cx+waistW+4} ${torsoBot}\n L ${cx-waistW-4} ${torsoBot}\n Z`;\n\n // shirt placket (visible triangle)\n const shirtPath = `M ${cx-13} ${torsoTop-4} L ${cx} ${torsoTop+6} L ${cx+13} ${torsoTop-4} L ${cx+9} ${torsoBot-6} L ${cx-9} ${torsoBot-6} Z`;\n\n // lapels\n const lapelL = `M ${cx-10} ${torsoTop-6} L ${cx-2} ${torsoTop+8} L ${cx-9} ${torsoBot-30} L ${cx-22*bw} ${torsoTop+2} Z`;\n const lapelR = `M ${cx+10} ${torsoTop-6} L ${cx+2} ${torsoTop+8} L ${cx+9} ${torsoBot-30} L ${cx+22*bw} ${torsoTop+2} Z`;\n\n // braces (suspenders) — only if visible color given; drawn over shirt placket\n let bracesSVG = \"\";\n if (t.braces){\n const bc = t.braces;\n bracesSVG = `\n \n \n \n `;\n }\n\n // neckwear\n let neckSVG = \"\";\n const tieType = t.tieType || (t.tie ? \"tie\" : \"none\");\n if (tieType === \"tie\" && t.tie){\n neckSVG = `\n `;\n } else if (tieType === \"bow\" && t.tie){\n neckSVG = `\n \n `;\n }\n\n // collar (always)\n const collar = ``;\n\n // pocket square\n let pocketSVG = \"\";\n if (t.pocket){\n pocketSVG = ``;\n }\n // lapel pin / boutonniere\n let pinSVG = \"\";\n if (t.lapelPin){\n pinSVG = ``;\n }\n\n // head + hair\n const headY = torsoTop - 26 + headShift;\n let hairSVG = \"\";\n if (hairColor){\n hairSVG = ``;\n }\n\n const groupTransform = `rotate(${tilt} ${cx} ${torsoBot})`;\n\n return `\n`;\n }\n\n // lighten/darken a hex color by percent (-100..100)\n function shade(hex, pct){\n let h = String(hex).replace('#','');\n if (h.length === 3) h = h.split('').map(c=>c+c).join('');\n if (h.length !== 6) return hex;\n const num = parseInt(h,16);\n let r = (num>>16)&255, g=(num>>8)&255, b=num&255;\n const f = pct/100;\n const adj = (c)=> Math.max(0, Math.min(255, Math.round(c + (f<0? c*f : (255-c)*f))));\n r=adj(r); g=adj(g); b=adj(b);\n return '#'+[r,g,b].map(x=>x.toString(16).padStart(2,'0')).join('');\n }\n\n /* ---------- Screens ---------- */\n\n function renderIntro(){\n // a little parade of sample figures for flavor\n const samples = [\n {skin:\"tan\", hair:\"grey\", suit:\"#1f2a3c\", shirt:\"#fffbf2\", braces:\"#6b5535\", tieType:\"tie\", tie:\"#3a4a5e\", pocket:\"#eae3d2\", posture:\"easy\"},\n {skin:\"fair\", hair:\"dark\", suit:\"#26303f\", shirt:\"#fffbf2\", braces:\"#26303f\", tieType:\"tie\", tie:\"#8a8f99\", pocket:\"#eae3d2\", posture:\"easy\"},\n {skin:\"deep\", hair:\"dark\", suit:\"#1b2430\", shirt:\"#fffbf2\", braces:\"#3a2e1f\", tieType:\"tie\", tie:\"#37434f\", pocket:\"#dccfb6\", posture:\"easy\"}\n ];\n const figs = samples.map(s=>`

${buildFigure(s)}

`).join('');\n app.innerHTML = `\n

${esc(M.introTag)}

${esc(M.introTitle)}

${figs}

${M.introLede}

`;\n document.getElementById('startBtn').addEventListener('click', ()=>{ idx=0; score=0; results=[]; renderRound(); });\n }\n\n function renderScorebar(){\n const dots = ROUNDS.map((_,i)=>{\n let cls = 'dot';\n if (results[i] === true) cls += ' done';\n else if (results[i] === false) cls += ' miss';\n if (i === idx) cls += ' cur';\n return ``;\n }).join('');\n return `\n

Round ${idx+1} / ${ROUNDS.length}

${dots}

${score} / ${ROUNDS.length}

`;\n }\n\n function renderRound(){\n const r = ROUNDS[idx];\n const cards = r.men.map(man=>`\n `).join('');\n\n app.innerHTML = `\n

\n ${renderScorebar()}\n

${esc(r.question)}

${esc(r.hint||'')}

${cards}

`;\n\n const lineup = document.getElementById('lineup');\n lineup.querySelectorAll('.man').forEach(btn=>{\n btn.addEventListener('click', ()=> choose(btn.dataset.id));\n });\n }\n\n function choose(chosenId){\n const r = ROUNDS[idx];\n if (results[idx] === true || results[idx] === false) return; // already answered\n const correctId = r.correct;\n const isRight = chosenId === correctId;\n results[idx] = isRight;\n if (isRight) score++;\n\n const lineup = document.getElementById('lineup');\n lineup.classList.add('locked');\n lineup.querySelectorAll('.man').forEach(btn=>{\n const id = btn.dataset.id;\n if (id === correctId){ btn.classList.add('right'); btn.querySelector('.badge').textContent = '✓'; }\n if (id === chosenId){\n btn.classList.add('chosen');\n if (!isRight){ btn.classList.add('wrong'); btn.querySelector('.badge').textContent = '✕'; }\n }\n btn.setAttribute('tabindex','-1');\n });\n\n // update scorebar live\n const sb = document.querySelector('.scorebar');\n if (sb) sb.outerHTML = renderScorebar();\n\n // reveal (bottom-sheet overlay) - Next button appended into it\n const isLast = idx === ROUNDS.length - 1;\n const rv = document.getElementById('reveal');\n const verdictClass = isRight ? 'good' : 'bad';\n const verdictText = isRight ? 'Well judged.' : 'Look again.';\n rv.innerHTML = `\n

${verdictText}

${r.reveal.good}

${r.reveal.body}

“${r.reveal.lesson}”

`;\n const nb = document.createElement('button');\n nb.className = 'btn'; nb.id = 'nextBtn';\n nb.textContent = isLast ? M.finishLabel : M.nextLabel;\n nb.addEventListener('click', ()=>{ if (isLast){ renderEnd(); } else { idx++; renderRound(); } });\n rv.appendChild(nb);\n requestAnimationFrame(()=> rv.classList.add('show'));\n nb.focus();\n }\n\n function rankFor(s){\n let best = GAME_DATA.meta.ranks[0];\n GAME_DATA.meta.ranks.forEach(rk=>{ if (s >= rk.min && rk.min >= best.min) best = rk; });\n return best.label;\n }\n\n function renderEnd(){\n const total = ROUNDS.length;\n const summary = M.endSummary.replace('{score}', score).replace('{total}', total);\n const p = M.promo;\n app.innerHTML = `\n

${esc(M.endTitle)}

${score} / ${total}

${esc(rankFor(score))}

${summary}

\n \n

`;\n\n document.getElementById('againBtn').addEventListener('click', ()=>{ idx=0; score=0; results=[]; renderIntro(); window.scrollTo({top:0}); });\n const cb = document.getElementById('copyBtn');\n cb.addEventListener('click', ()=>{\n const code = p.code;\n const done = ()=>{ cb.textContent = 'Copied ✓'; cb.classList.add('copied'); setTimeout(()=>{ cb.textContent='Copy Code'; cb.classList.remove('copied'); }, 1800); };\n if (navigator.clipboard && navigator.clipboard.writeText){\n navigator.clipboard.writeText(code).then(done).catch(()=>fallbackCopy(code, done));\n } else { fallbackCopy(code, done); }\n });\n }\n\n function fallbackCopy(text, cb){\n try{\n const ta = document.createElement('textarea');\n ta.value = text; ta.style.position='fixed'; ta.style.opacity='0';\n document.body.appendChild(ta); ta.select();\n document.execCommand('copy'); document.body.removeChild(ta);\n cb();\n }catch(e){ /* no-op */ }\n }\n\n // boot\n renderIntro();\n})();\n\n/* Self-resize hook for iframe embedding (StoryPress freeform) */\nconst fit=()=>{if(window.frameElement)window.frameElement.style.height=document.documentElement.scrollHeight+'px'};\ntry{ new ResizeObserver(fit).observe(document.body); }catch(_){}\naddEventListener('load',fit);\n","7a30311c-dada-410b-a238-a679f2083670","\n\n\n\n\nKK & Jay Supply Co. — The Lineup\n\n\n\n\n

KK & Jay Supply Co.

The Lineup

\n\n

\n\n \n

\n\n\n\n\n","min(600px, calc(100dvh - 24px))","","isSignedIn","verifyMFA","userData",{"_228":-7,"_229":-7,"_230":-7,"_231":-5,"_232":-5,"_233":-7,"_234":-7,"_235":-7,"_236":-7},"first_name","last_name","email","email_confirmed_at","last_sign_in_at","wallets","factors","user_metadata","app_metadata","hasDatabase","theme",{"_243":244,"_245":246,"_247":248,"_249":250,"_60":-7,"_251":252,"_253":-7,"_254":104,"_255":-7,"_256":104,"_257":-7,"_258":259,"_260":261,"_262":104,"_263":264,"_265":259,"_266":104,"_267":-7,"_268":104,"_269":104,"_270":271,"_272":104,"_273":36,"_274":104,"_275":276,"_277":278,"_279":-7,"_280":281},"isTouchScreen","error",{},"hostname","sp-staging.sp0007.workers.dev","userGeo",{"_443":444,"_445":446,"_447":448,"_449":450},"redirectRules",[],"tone","light","colors",{"_378":379,"_380":381,"_382":383,"_384":385,"_386":387,"_388":389,"_390":391,"_392":393,"_394":395,"_396":397,"_398":399,"_400":401,"_402":403,"_404":405,"_406":405,"_407":408,"_409":374,"_410":411,"_412":413,"_414":415,"_416":417,"_418":401,"_419":420,"_421":422,"_423":424,"_425":401,"_426":420,"_427":428,"_429":420,"_430":401,"_431":420,"_432":433,"_434":435,"_436":437,"_438":420,"_439":440,"_441":401,"_442":420},"footer","gtm_id","favicons","maxWidth","animation","siteTitle","StoryPress","navigation",{"_56":302,"_303":304,"_305":306,"_64":260,"_307":36,"_308":67,"_309":36,"_70":310},"termly_uuid","imageQuality","50","authorDefault","cookieyes_key","authentication","termlyWhitelist","componentMaxWidth","termlyConsentPrefLabel","Consent Preferences","relatedPostThumbnailAspectRatio","cookieyesRenderRevisitConsentButton","relatedPostThumbnailCustomAspectRatio","languages",{"_275":293,"_294":295},"langPref","en","langRoute","env",{"_282":283,"_284":285,"_286":287,"_288":289,"_290":-7,"_291":-7,"_292":-7},"TURNSTILE_SITE_KEY","0x4AAAAAABJj7J6weoMDklK-","STORYBLOK_REGION","eu","STORYBLOK_VERSION","draft","CONTENT_BACKEND","storyblok","CLOUDFLARE_IMAGE_DOMAIN","STRIPE_PUBLISHABLE_KEY","HEADERS_NONCE",[297,298],"i18n",["S",278,296],"it",{"_299":278,"_13":301},{"_299":296,"_13":300},"code","Italian","English","d61595af-0bc9-4a30-98f5-8d9bc97274e9","logo",[343],"menu",[311],"alwaysMobileMenu","additionalPaddingX","additionalPaddingY","",{"_56":312,"_313":314,"_315":316,"_64":305,"_317":67,"_70":318},"6be559c5-f6af-4aef-9d94-45b2e0364364","items",[319,320],"heading",[],"showBreadcrumb","",{"_56":337,"_322":338,"_325":339,"_327":340,"_64":329,"_70":341},{"_56":321,"_322":323,"_324":104,"_325":326,"_327":328,"_64":329,"_70":330},"83a9af5d-e4c0-4244-aa1b-a4c5a2f3a8c7","link",{"_20":331,"_332":104,"_333":11,"_112":334,"_335":336},"type","label","About","submenu",[],"menuItem","","0f18481c-a400-40b3-8ce0-7a83e880ba3f","url","linktype","multilink","cached_url","about","8feb382a-c9db-47b1-b8d7-4fbe70c1c1fd",{"_20":104,"_332":342,"_333":332,"_112":334,"_335":342},"Products",[],"","/products",{"_56":344,"_345":346,"_64":303,"_347":348,"_349":350,"_70":351},"e76425f3-b061-416d-970b-cf26814da965","text",[352],"textWidth","250","imageMaxWidth","150","",{"_56":353,"_345":354,"_355":36,"_356":357,"_64":358,"_70":359},"8040fc3c-4394-4bf0-a36f-7344eb76d02a",{"_324":360,"_24":361},"prose","alignment","justify","textRich","","doc",[362],{"_324":315,"_363":364,"_24":365},"attrs",{"_375":376,"_377":-5},[366],{"_345":367,"_324":345,"_368":369},"Exp. 0007","marks",[370],{"_324":371,"_363":372},"textStyle",{"_373":374},"color","var(--black-color)","level",1,"textAlign","--primary-color","deeppink","--primary-hover-color","oklch(from var(--primary-color) calc(l + 0.05) c h / 0.95)","--secondary-color","darkcyan","--secondary-hover-color","oklch(from var(--secondary-color) calc(l + 0.05) c h / 0.95)","--tertiary-color","orange","--tertiary-hover-color","oklch(from var(--tertiary-color) calc(l + 0.05) c h / 0.95)","--red-color","red","--green-color","green","--white-color","white","--black-color","black","--main-outer-color","var(--border-color)","--main-inner-color","var(--bg-color)","--main-inner-max-width-color","var(--main-inner-color)","--canvas-color","var(--white-color)","--bg-color","--bg-hover-color","oklch(from var(--bg-color) calc(l + 0.05) c h / 0.95)","--text-color","--text-hover-color","oklch(from var(--text-color) calc(l + 0.05) c h / 0.95)","--border-color","hsl(from var(--text-color) h s calc(l + 25))","--border-invert-color","hsl(from var(--white-color) h s calc(l - 25))","--prose-color","hsl(from var(--text-color) h s calc(l + 20))","--nav-bg-color","--nav-text-color","var(--text-color)","--nav-mobile-bg-color","var(--nav-bg-color)","--nav-mobile-text-color","var(--nav-text-color)","--footer-bg-color","--footer-text-color","--thumbnail-bg-color","oklch(from var(--bg-color) l c h / 90%)","--thumbnail-text-color","--button-bg-color","--button-text-color","--button-hover-bg-color","oklch(from var(--button-bg-color) calc(l + 0.05) c h / 0.95)","--button-hover-text-color","oklch(from var(--button-text-color) calc(l + 0.05) c h / 0.95)","--input-bg-color","rgb(212 212 212)","--input-text-color","--input-placeholder-text-color","rgb(82 82 82)","--lightbox-bg-color","--lightbox-text-color","lat",39.96118,"lon",-82.99879,"country","US","city","Columbus"]

Game — Sharp or Sloppy (Swipe)

Game — Dress the Man