'+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 — Spot the Best Dressed Man (Lineup)","2026-06-16T16:03:30.187Z","2026-06-18T18:01:23.207Z",188154716951659,"e225fd44-e6a6-4152-8baf-1f1937f38399",{"_57":100,"_59":183,"_63":184,"_105":185,"_69":107,"_108":36,"_109":186,"_77":187},"spot-the-best-dressed-man","kk-jay-games-experiment/spot-the-best-dressed-man",0,[],"f1c76034-dca2-4be9-81c5-14f55d06001e",[],[198],[195],[191],[188],"",{"_20":189,"_114":115,"_117":115,"_118":115,"_119":115,"_120":190,"_122":115,"_123":124},188891452854730,"https://a.storyblok.com/f/334678/59f84c2541/screenshot_2026_06_18_at_140105.png",{"_57":126,"_118":192,"_128":36,"_69":105,"_129":193,"_77":194},"Spot the Best Dressed Man — KK & Jay","Pick the sharpest-dressed man.","",{"_57":196,"_134":135,"_69":63,"_136":137,"_138":137,"_139":137,"_140":141,"_142":143,"_144":143,"_145":143,"_146":147,"_148":137,"_149":150,"_151":147,"_152":150,"_153":36,"_77":197},"84cbff72-b64d-446f-a12c-f54ebd332dc8","",{"_20":199,"_157":200,"_159":115,"_57":201,"_161":202,"_163":36,"_69":164,"_165":203,"_167":36,"_168":203,"_169":52,"_77":204},"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))","","Game — Sharp or Sloppy (Swipe)","2026-06-16T16:48:32.333Z","2026-06-18T18:00:14.759Z",188165784941903,"306adf5c-4d15-4ff5-bc16-0610c3798a84",{"_57":100,"_59":217,"_63":218,"_105":219,"_69":107,"_108":36,"_109":220,"_77":221},"sharp-or-sloppy","kk-jay-games-experiment/sharp-or-sloppy",-20,[],"eab70a20-2507-4d76-b008-544d1c070ad5",[],[236],[233],[229],[222,223],"",{"_20":226,"_114":115,"_13":227,"_117":115,"_118":115,"_119":115,"_120":228,"_122":115,"_123":124},{"_20":224,"_114":115,"_117":115,"_118":115,"_119":115,"_120":225,"_122":115,"_123":124},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",{"_57":126,"_118":230,"_128":36,"_69":105,"_129":231,"_77":232},"Sharp or Sloppy — KK & Jay","Swipe sharp or sloppy.","",{"_57":234,"_134":135,"_69":63,"_136":137,"_138":137,"_139":137,"_140":141,"_142":143,"_144":143,"_145":143,"_146":147,"_148":137,"_149":150,"_151":147,"_152":150,"_153":36,"_77":235},"71614ecf-0676-48f6-b965-0d4d7b507ae0","",{"_20":237,"_157":238,"_159":239,"_57":240,"_161":241,"_163":36,"_69":164,"_165":166,"_167":36,"_168":166,"_169":52,"_77":242},"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

","","Game — Find What Breaks the Line","2026-06-16T16:48:37.423Z","2026-06-18T17:59:11.041Z",188165805794640,"fbce9b4c-20e3-4357-991d-47b4e0733b8b",{"_57":100,"_59":255,"_63":256,"_69":107,"_108":36,"_109":257,"_77":258},"find-what-breaks-the-line","kk-jay-games-experiment/find-what-breaks-the-line",-30,[],"ef0542c2-cf5b-4e80-bd29-7dd7fecb25e5",[],[265,266],[262],[259],"",{"_20":260,"_114":115,"_117":115,"_118":115,"_119":115,"_120":261,"_122":115,"_123":124},188890902446526,"https://a.storyblok.com/f/334678/8e8314958a/screenshot_2026_06_18_at_135844.png",{"_57":263,"_134":135,"_69":63,"_136":137,"_138":137,"_139":137,"_140":141,"_142":143,"_144":143,"_145":143,"_146":147,"_148":137,"_149":150,"_151":147,"_152":150,"_153":36,"_77":264},"1019c3dd-8160-4bbc-80aa-406a02609cb8","",{"_20":270,"_157":271,"_159":115,"_57":272,"_161":273,"_163":36,"_69":164,"_165":166,"_167":36,"_168":166,"_169":52,"_77":274},{"_57":126,"_118":267,"_128":36,"_69":105,"_129":268,"_77":269},"Find What Breaks the Line — KK & Jay","Spot the flaw that breaks his line.","","kkj-flaw","\n/* =============================================================================\n GAME DATA — EDIT HERE, NOT THE LOGIC BELOW\n -----------------------------------------------------------------------------\n A non-coder can add rounds, move hotspots, rewrite reveals, and change the\n promo code entirely within this object. Nothing below this block needs edits.\n\n HOW EACH FIGURE IS DRAWN:\n Every \"man\" is built from `traits` (no images/photos). Each trait toggles\n a piece of the inline SVG line-art (collar, tie, jacket, fit, etc.). The\n SAME drawing code reads these traits — so authoring a man = setting fields.\n\n HOTSPOTS / FLAWS:\n - Coordinates are PERCENTAGES of the figure box (0–100), so they stay put\n on any screen size. x = left%, y = top%, r = radius in px (tap target).\n - Set `flaw: true` on the ONE region that breaks his line (or none, if the\n man is genuinely sharp). `label` is the little tag shown on reveal.\n - If NO hotspot has flaw:true, the correct answer is \"He's clean.\"\n\n TO LOAD FROM AN EXTERNAL SOURCE LATER (instead of this inline object):\n // const GAME_DATA = await fetch('rounds.json').then(r => r.json());\n // — or pulled from a StoryPress freeform component field:\n // const GAME_DATA = JSON.parse(storypress.field('spot_the_flaw_data'));\n Keep the SAME shape and the game just works.\n============================================================================= */\n\nconst GAME_DATA = {\n\n meta: {\n lede: \"Best dressed isn't the loudest man in the room. It's the one whose line holds — collar to cuff to waist — at hour nine.\",\n sub: \"Six men. Some are sharp. Some have a flaw that breaks the line. Tap the flaw — or call him clean. Trust your eye.\",\n // promo shown on the end screen as the reward\n promo: {\n code: \"SHARP10\",\n off: \"$10 off your first set\",\n desc: \"Suspenders + a shirttail garter. Built so the line you just learned to spot never breaks on you.\"\n },\n // end-screen verdicts keyed by how well the player scored (high to low)\n verdicts: [\n { min: 1.0, line: \"A perfect read. You see the line the way we cut it.\",\n sub: \"Nothing got past you. Now keep your own line as honest as your eye.\" },\n { min: 0.7, line: \"A sharp eye. You catch what most men wear out the door.\",\n sub: \"Close to flawless. The difference between good and unimpeachable is the waist.\" },\n { min: 0.4, line: \"A working eye. You see the loud flaws; the quiet ones still slip by.\",\n sub: \"The quiet flaws — the creep, the ride-up — are the ones that ruin hour nine.\" },\n { min: 0.0, line: \"The eye is trainable. The line is learnable. Run it again.\",\n sub: \"Every flaw you missed today is one the right hardware would have prevented.\" }\n ]\n },\n\n /* ---------------------------------------------------------------------------\n ROUNDS\n traits (all optional, sensible defaults):\n build: 'lean' | 'broad' silhouette width\n collar: 'spread' | 'point' | 'open' collar style ('open' = no tie)\n tie: true|false necktie present\n jacket: true|false wearing a jacket\n skin: css color for face/hands\n suit: css color for jacket/trousers\n shirt: css color for shirt\n hair: css color\n fit cues (these visibly DRAW the flaw into the figure):\n shirtCreep: true -> shirt bunches/blouses above the waistband\n gapPlacket: true -> button placket gapes open at chest\n tailRideUp: true -> shirttail escapes / untucks at the hip\n waistBunch: true -> bunched, rumpled waistband\n noGarter: (narrative only; shown via creep/ride-up)\n hotspots[]: {x,y,r, flaw:bool, label, ...} percentages of figure box\n reveal: { hitName, hitCopy, missName, missCopy }\n hit* -> shown when player answers CORRECTLY\n miss* -> shown when player answers WRONG\n --------------------------------------------------------------------------- */\n rounds: [\n\n {\n name: \"The Banker\",\n tag: \"9:12 a.m. — the meeting hasn't started yet\",\n traits:{ build:'lean', collar:'spread', tie:true, jacket:true,\n suit:'#26303f', shirt:'#f4f1e9', tie_color:'#7a2530',\n skin:'#d9b48f', hair:'#2b241d' },\n fit:{ /* genuinely sharp */ },\n hotspots:[\n { x:50, y:24, r:34, label:\"Collar\" },\n { x:50, y:40, r:32, label:\"Placket\" },\n { x:50, y:58, r:36, label:\"Waist\" },\n { x:30, y:48, r:30, label:\"Cuff\" }\n ],\n // No flaw:true anywhere -> correct answer is \"He's clean.\"\n reveal:{\n hitName:\"Nothing. He's clean.\",\n hitCopy:\"The collar sits. The placket lies flat. The shirt is anchored and the line runs unbroken from throat to waist. Not the flashiest man here — the sharpest. You saw it.\",\n missName:\"He was clean.\",\n missCopy:\"There was nothing to find. The collar sits, the placket lies flat, the line holds. Restraint reads as a flaw only to an untrained eye.\"\n }\n },\n\n {\n name: \"The Groomsman\",\n tag: \"6:40 p.m. — three hours into the reception\",\n traits:{ build:'broad', collar:'point', tie:true, jacket:false,\n suit:'#3a3f33', shirt:'#eef0ee', tie_color:'#3a3f33',\n skin:'#c89a6e', hair:'#1f1a16' },\n fit:{ shirtCreep:true, noGarter:true },\n hotspots:[\n { x:50, y:22, r:30, label:\"Collar\" },\n { x:35, y:38, r:28, label:\"Chest\" },\n { x:50, y:57, r:40, flaw:true, label:\"Shirt creep\" },\n { x:68, y:44, r:28, label:\"Sleeve\" }\n ],\n reveal:{\n hitName:\"The shirt crept.\",\n hitCopy:\"The jacket came off and the truth showed: the shirt has climbed and bloused over the waistband. Hour three, and the line is already gone. A shirttail garter holds it down for the whole night.\",\n missName:\"The flaw was the waist.\",\n missCopy:\"Look again at the middle — the shirt has crept up and bunched over the belt. Hour nine doesn't forgive a loose tail. That's exactly what the garter prevents.\"\n }\n },\n\n {\n name: \"The New Hire\",\n tag: \"8:55 a.m. — first day, lobby, watched\",\n traits:{ build:'lean', collar:'spread', tie:true, jacket:true,\n suit:'#4a4f57', shirt:'#f4f1e9', tie_color:'#1f2a3c',\n skin:'#e2c19c', hair:'#4a3422' },\n fit:{ gapPlacket:true },\n hotspots:[\n { x:50, y:23, r:30, label:\"Collar\" },\n { x:50, y:41, r:36, flaw:true, label:\"Gaping placket\" },\n { x:50, y:60, r:34, label:\"Waist\" },\n { x:70, y:50, r:26, label:\"Pocket\" }\n ],\n reveal:{\n hitName:\"The placket gaped.\",\n hitCopy:\"Between the buttons, the shirt pulls open and shows a sliver of skin. A gap at the chest undoes a good jacket instantly. The eye goes straight to the break in the line.\",\n missName:\"The flaw was the chest.\",\n missCopy:\"The placket gapes between the buttons — a small gap, a loud tell. The line is a continuous thing; one open seam ends it.\"\n }\n },\n\n {\n name: \"The Regular\",\n tag: \"1:15 p.m. — lunch, corner table, unhurried\",\n traits:{ build:'broad', collar:'open', tie:false, jacket:true,\n suit:'#5b4a36', shirt:'#ede7d6', tie_color:'#000',\n skin:'#b07b4f', hair:'#262019' },\n fit:{ /* sharp — open collar done right */ },\n hotspots:[\n { x:50, y:24, r:34, label:\"Open collar\" },\n { x:50, y:42, r:32, label:\"Chest\" },\n { x:50, y:59, r:36, label:\"Waist\" },\n { x:32, y:52, r:28, label:\"Lapel\" }\n ],\n reveal:{\n hitName:\"Nothing. He's clean.\",\n hitCopy:\"No tie, and still no flaw. The open collar sits flat, the shirt stays put, the jacket frames it. Sharp isn't formal — it's a line that holds. He has it.\",\n missName:\"He was clean.\",\n missCopy:\"An open collar isn't a flaw when the rest of the line is true — and here it is. Don't mistake ease for a mistake.\"\n }\n },\n\n {\n name: \"The Best Man\",\n tag: \"11:20 p.m. — after the speech, after the floor\",\n traits:{ build:'lean', collar:'point', tie:true, jacket:true,\n suit:'#22252b', shirt:'#f4f1e9', tie_color:'#6a1f25',\n skin:'#d9b48f', hair:'#15110d' },\n fit:{ tailRideUp:true, noGarter:true },\n hotspots:[\n { x:50, y:23, r:28, label:\"Collar\" },\n { x:50, y:40, r:28, label:\"Placket\" },\n { x:68, y:62, r:38, flaw:true, label:\"Shirttail riding up\" },\n { x:50, y:50, r:24, label:\"Button\" }\n ],\n reveal:{\n hitName:\"The shirttail rode up.\",\n hitCopy:\"At the hip the tail has worked loose and pulled free of the waistband. One dance and the whole line unravels from the bottom. A garter clips it down so midnight looks like noon.\",\n missName:\"The flaw was the hip.\",\n missCopy:\"Down at the right hip the shirttail has escaped the waistband. The line fails from the bottom up — and no one tucks fast enough. The garter does it for you.\"\n }\n },\n\n {\n name: \"The Closer\",\n tag: \"5:50 p.m. — last call of the day, still composed\",\n traits:{ build:'broad', collar:'spread', tie:true, jacket:false,\n suit:'#1f2a3c', shirt:'#eaf0f4', tie_color:'#9a7b3a',\n skin:'#cfa376', hair:'#33291d' },\n fit:{ waistBunch:true },\n hotspots:[\n { x:50, y:22, r:28, label:\"Collar\" },\n { x:35, y:40, r:28, label:\"Chest\" },\n { x:50, y:60, r:40, flaw:true, label:\"Bunched waistband\" },\n { x:66, y:42, r:26, label:\"Sleeve\" }\n ],\n reveal:{\n hitName:\"The waistband bunched.\",\n hitCopy:\"No jacket to hide it: the shirt is rumpled and gathered where the belt cinches it. A bunched waist is a tired waist — it tells the whole room how long the day's been. Suspenders hold the trouser without the cinch.\",\n missName:\"The flaw was the waist.\",\n missCopy:\"The waistband is bunched and gathered under the belt. A clean waist is the quiet center of the line — lose it and everything above looks borrowed.\"\n }\n }\n\n ]\n};\n\n/* =============================================================================\n GAME LOGIC — no edits needed below to author content\n============================================================================= */\n(function(){\n const D = GAME_DATA;\n const rounds = D.rounds;\n let idx = 0, score = 0, locked = false;\n\n const $ = id => document.getElementById(id);\n const screens = {\n start: $('screen-start'), play: $('screen-play'), end: $('screen-end')\n };\n function show(name){\n Object.values(screens).forEach(s=>s.classList.remove('active'));\n screens[name].classList.add('active');\n }\n\n /* ---------- SVG figure builder (reads traits + fit) ---------- */\n function buildFigure(r){\n const t = r.traits || {};\n const f = r.fit || {};\n const skin = t.skin || '#d9b48f';\n const hair = t.hair || '#2b241d';\n const suit = t.suit || '#26303f';\n const shirt = t.shirt || '#f4f1e9';\n const tieC = t.tie_color || '#7a2530';\n const broad = t.build === 'broad';\n const hasJacket = t.jacket !== false;\n const hasTie = t.tie === true && t.collar !== 'open';\n const ink = '#333333';\n\n // silhouette widths\n const shW = broad ? 92 : 78; // shoulder half-ish\n const bodyTopY = 150;\n const cx = 150;\n\n // jacket / shirt body coordinates\n const jacketLapelL = cx - shW*0.78;\n const jacketLapelR = cx + shW*0.78;\n\n // ---- fit-driven shapes ----\n // waist line: shirt creep raises the bunched fabric; default clean hem\n const creep = f.shirtCreep ? 16 : 0;\n const waistY = 300;\n\n // shirt placket center line drawing (gap if gapPlacket)\n const placket = f.gapPlacket\n ? `\n `\n : ``;\n\n // buttons\n let buttons = '';\n if(!hasJacket || true){\n for(let i=0;i<5;i++){\n const by = bodyTopY+40 + i*26;\n if(f.gapPlacket && i===1) continue; // skip a button at the gap\n buttons += ``;\n }\n }\n\n // ---- collar ----\n let collar = '';\n const cy = bodyTopY+4;\n if(t.collar === 'spread'){\n collar = ``;\n } else if(t.collar === 'open'){\n collar = ``;\n } else { // point\n collar = ``;\n }\n\n // ---- tie ----\n let tie = '';\n if(hasTie){\n tie = `\n `;\n }\n\n // ---- shirt body (under jacket or alone) ----\n // bunched / creep render at the waist\n const waistEdge = f.waistBunch\n ? ``\n : '';\n\n const shirtCreepShape = f.shirtCreep\n ? ``\n : '';\n\n // ---- shirttail ride-up (escapes at right hip) ----\n const tailRide = f.tailRideUp\n ? `\n `\n : '';\n\n // ---- jacket ----\n let jacket = '';\n if(hasJacket){\n jacket = `\n \n \n \n \n `;\n }\n\n // arms / sleeves\n const sleeveFill = hasJacket ? suit : shirt;\n const arms = `\n \n \n \n `;\n\n // trousers\n const trouserC = suit;\n const trousers = `\n \n `;\n\n // belt / waistband (hidden if bunch drawn over)\n const belt = ``;\n\n // head\n const head = `\n \n \n \n `;\n // neck shading edges\n const neck = ``;\n\n // shirt base (visible at neck/chest always)\n const shirtBase = ``;\n\n // assemble in z-order\n return `\n `;\n }\n\n /* ---------- render a round ---------- */\n function renderRound(){\n const r = rounds[idx];\n locked = false;\n $('manName').textContent = r.name;\n $('manTag').textContent = r.tag;\n $('playPrompt').textContent = \"Tap what breaks his line\";\n $('btnClean').disabled = false;\n $('reveal').classList.remove('up');\n\n // progress\n $('pCount').innerHTML = `${idx+1} / ${rounds.length}`;\n $('pBar').style.width = ((idx)/rounds.length*100) + '%';\n\n const frame = $('figFrame');\n frame.classList.remove('locked');\n frame.innerHTML = buildFigure(r);\n\n // hotspots\n r.hotspots.forEach((h,i)=>{\n const el = document.createElement('button');\n el.className = 'hotspot';\n el.setAttribute('aria-label', h.label || 'region');\n const d = (h.r||30)*2;\n el.style.width = d+'px';\n el.style.height = d+'px';\n el.style.left = h.x+'%';\n el.style.top = h.y+'%';\n el.innerHTML = `${h.label||''}`;\n el.addEventListener('click', ()=>onHotspot(i, el));\n frame.appendChild(el);\n });\n }\n\n function correctIsClean(r){ return !r.hotspots.some(h=>h.flaw); }\n\n /* ---------- answers ---------- */\n function onHotspot(i, el){\n if(locked) return;\n const r = rounds[idx];\n const h = r.hotspots[i];\n const hit = !!h.flaw; // tapped the flaw correctly?\n resolve(hit, el);\n }\n function onClean(){\n if(locked) return;\n const r = rounds[idx];\n const hit = correctIsClean(r); // \"clean\" correct only if no flaw exists\n resolve(hit, null);\n }\n\n function resolve(hit, chosenEl){\n locked = true;\n const r = rounds[idx];\n const frame = $('figFrame');\n frame.classList.add('locked');\n $('btnClean').disabled = true;\n if(hit) score++;\n\n // mark wrong choice\n if(chosenEl && !hit) chosenEl.classList.add('chosen-wrong');\n\n // always reveal the true answer location\n const flawSpot = [...frame.querySelectorAll('.hotspot')]\n .find((_,i)=>r.hotspots[i].flaw);\n if(flawSpot){\n flawSpot.classList.add('correct');\n flawSpot.querySelector('.tag').textContent = r.hotspots.find(x=>x.flaw).label;\n } else {\n // clean man: briefly flag the \"clean\" button as the right call\n $('btnClean').style.borderColor = 'var(--good)';\n $('btnClean').style.color = 'var(--good)';\n }\n\n // reveal copy\n const rv = r.reveal;\n const v = $('rVerdict');\n if(hit){\n v.className = 'verdict hit';\n v.querySelector('.mark').textContent = '✓';\n $('rVerdictTxt').textContent = 'Sharp eye';\n $('rName').textContent = rv.hitName;\n $('rCopy').innerHTML = rv.hitCopy;\n } else {\n v.className = 'verdict miss';\n v.querySelector('.mark').textContent = '✕';\n $('rVerdictTxt').textContent = 'The line broke';\n $('rName').textContent = rv.missName;\n $('rCopy').innerHTML = rv.missCopy;\n }\n $('btnNext').textContent = (idx+1 >= rounds.length) ? 'See the Verdict' : 'Next Man';\n\n setTimeout(()=> $('reveal').classList.add('up'), 360);\n }\n\n function next(){\n // reset clean btn styling\n $('btnClean').style.borderColor = '';\n $('btnClean').style.color = '';\n idx++;\n if(idx >= rounds.length){ endGame(); return; }\n renderRound();\n }\n\n /* ---------- end ---------- */\n function endGame(){\n $('pBar').style.width = '100%';\n $('pCount').innerHTML = `✓`;\n const total = rounds.length;\n const pct = score/total;\n $('endScore').innerHTML = `${score}`;\n $('endOf').textContent = `of ${total} read correctly`;\n\n const verdict = D.meta.verdicts.find(v=>pct >= v.min) || D.meta.verdicts[D.meta.verdicts.length-1];\n $('endLine').textContent = verdict.line;\n $('endSub').textContent = verdict.sub;\n\n const p = D.meta.promo;\n $('promoCode').textContent = p.code;\n $('promoOff').textContent = p.off;\n $('promoDesc').textContent = p.desc;\n $('copyNote').textContent = '';\n\n show('end');\n }\n\n /* ---------- copy promo ---------- */\n function copyPromo(){\n const code = D.meta.promo.code;\n const done = ()=>{ $('copyNote').textContent = 'Copied — bring it to checkout.'; };\n if(navigator.clipboard && navigator.clipboard.writeText){\n navigator.clipboard.writeText(code).then(done).catch(()=>fallback());\n } else fallback();\n function fallback(){\n const ta=document.createElement('textarea'); ta.value=code;\n document.body.appendChild(ta); ta.select();\n try{ document.execCommand('copy'); done(); }catch(e){}\n document.body.removeChild(ta);\n }\n }\n\n /* ---------- init / wire ---------- */\n function start(){\n idx = 0; score = 0;\n renderRound();\n show('play');\n }\n\n $('startLede').textContent = D.meta.lede;\n $('startSub').textContent = D.meta.sub;\n $('pCount').innerHTML = `—`;\n\n $('btnStart').addEventListener('click', start);\n $('btnNext').addEventListener('click', next);\n $('btnClean').addEventListener('click', onClean);\n $('btnAgain').addEventListener('click', start);\n $('promoBox').addEventListener('click', copyPromo);\n $('btnShop').addEventListener('click', ()=>{ /* hook to store URL */ window.scrollTo(0,0); });\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","bace53de-f60d-44be-971d-309419621915","\n\n\n\n\nFind What Breaks the Line — KK & Jay Supply Co.\n\n\n\n\n

\n \n

\n\n \n

A Test of the Eye

Find What
Breaks the Line

\n \n

\n\n \n

—

Tap what breaks his line

\n\n

\n \n

\n\n \n

✓Sharp eye

—

\n \n

\n\n \n

The Verdict

of 0 read correctly

—

\n\n \n\n

\n \n \n

\n\n

\n\n\n\n\n","",{"_57":276,"_277":52,"_69":75,"_278":279,"_280":281,"_282":283,"_284":52,"_285":115,"_77":286},"b1e141eb-989e-4ef3-a43b-e3e9f02459f1","hideTags","doOnHover","hide","detailsPosition","below","thumbnailAspectRatio","1/1","sharpImageBottomCorners","thumbnailCustomAspectRatio","",{"_57":288,"_289":115,"_290":291,"_69":65,"_292":293,"_294":295,"_77":296},"88cc1aba-7ed1-41a6-a246-dfab7a81bc1e","bgHover","primary","#642c2b","lightboxBg","black","lightboxText","white","",{"_57":298,"_134":135,"_69":63,"_136":137,"_138":137,"_139":137,"_140":141,"_142":143,"_144":143,"_145":143,"_146":147,"_148":137,"_149":150,"_151":147,"_152":150,"_153":36,"_77":299,"_300":135,"_301":302,"_303":304,"_305":306,"_307":308},"50d79cd4-9936-4ba2-9806-901af95de4bb","","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",{"_57":316,"_317":36,"_318":319,"_320":321,"_322":323,"_324":325,"_326":327,"_69":328,"_329":330,"_77":331},{"_57":311,"_312":313,"_69":314,"_77":315},"14772431-6455-45c6-8fb3-7cddc7c02c90","count","2","lineBreak","","a7ecde6f-9166-4034-993d-318989cdd2da","card","text",[371],"image",{"_20":-5,"_114":115,"_13":115,"_117":115,"_118":115,"_119":115,"_120":115,"_122":115,"_123":124},"images",[343],"layout","adjacent","imageFit","contain","imageTextRich","background",[332],"",{"_57":333,"_334":52,"_335":336,"_326":337,"_69":329,"_338":339,"_340":341,"_77":342},"a6960b10-8ed4-43eb-9eff-8196d6b29db5","blur","color","var(--primary-color)","cover","aspectRatio","16/9","overlayOpacity","50","",{"_57":344,"_69":322,"_345":346,"_347":348,"_77":349},"0a64819e-412e-4d02-bcb7-50a6c86a17d0","imagesLinks",[363],"preferences",[350],"",{"_351":352,"_57":353,"_326":337,"_354":52,"_69":355,"_338":339,"_356":313,"_357":36,"_358":359,"_360":361,"_77":362},"gap","16","fb24ea32-2807-411f-98a4-f35ef5db7d8c","lightbox","galleryPreferences","columnCount","sharpCorners","imagePosition","center-center","columnCountMobile","1","",{"_57":364,"_365":366,"_69":124,"_338":115,"_77":367},"c7de2d98-adf7-4870-ae43-20294f2f768b","poster",{"_20":368,"_114":115,"_13":369,"_117":115,"_118":115,"_119":115,"_120":370,"_122":115,"_123":124},"",188584253897877,"kk_jay_image_1.webp","https://a.storyblok.com/f/334678/1d3038b61b/kk_jay_image_1.webp",{"_57":372,"_318":373,"_374":52,"_375":376,"_69":377,"_77":378},"b691fd84-bd6a-4f39-b0db-5a74240cc065",{"_61":379,"_24":380},"prose","alignment","center","textRich","","doc",[381],{"_61":382,"_383":384,"_24":385},"heading","attrs",{"_396":397,"_398":-5},[386,387],{"_318":389,"_61":318,"_390":391},{"_61":388},"hardBreak","The Tailored Arcade","marks",[392],{"_61":393,"_383":394},"textStyle",{"_335":395},"#ffffff","level",2,"textAlign","isSignedIn","verifyMFA","userData",{"_403":-7,"_404":-7,"_405":-7,"_406":-5,"_407":-5,"_408":-7,"_409":-7,"_410":-7,"_411":-7},"first_name","last_name","email","email_confirmed_at","last_sign_in_at","wallets","factors","user_metadata","app_metadata","hasDatabase","theme",{"_418":419,"_420":421,"_422":423,"_424":425,"_63":-7,"_65":426,"_427":-7,"_428":115,"_429":-7,"_430":115,"_431":-7,"_432":433,"_434":435,"_436":115,"_437":341,"_438":433,"_439":115,"_440":-7,"_441":115,"_442":115,"_443":444,"_445":115,"_446":52,"_447":115,"_448":449,"_450":451,"_452":-7,"_453":454},"isTouchScreen","error",{},"hostname","sp-staging.sp0007.workers.dev","userGeo",{"_601":602,"_603":604,"_605":606,"_607":608},"redirectRules",[],"tone","light",{"_538":539,"_540":541,"_542":543,"_544":545,"_546":547,"_548":549,"_550":551,"_552":553,"_554":295,"_555":293,"_556":557,"_558":559,"_560":561,"_562":563,"_564":563,"_565":566,"_567":536,"_568":569,"_570":571,"_572":573,"_574":575,"_576":559,"_577":578,"_579":580,"_581":582,"_583":559,"_584":578,"_585":586,"_587":578,"_588":559,"_589":578,"_590":591,"_592":593,"_594":595,"_596":578,"_597":598,"_599":559,"_600":578},"footer","gtm_id","favicons","maxWidth","animation","siteTitle","StoryPress","navigation",{"_57":475,"_476":477,"_478":479,"_69":434,"_480":52,"_481":36,"_482":52,"_77":483},"termly_uuid","imageQuality","authorDefault","cookieyes_key","authentication","termlyWhitelist","componentMaxWidth","termlyConsentPrefLabel","Consent Preferences","relatedPostThumbnailAspectRatio","cookieyesRenderRevisitConsentButton","relatedPostThumbnailCustomAspectRatio","languages",{"_448":466,"_467":468},"langPref","en","langRoute","env",{"_455":456,"_457":458,"_459":460,"_461":462,"_463":-7,"_464":-7,"_465":-7},"TURNSTILE_SITE_KEY","0x4AAAAAABJj7J6weoMDklK-","STORYBLOK_REGION","eu","STORYBLOK_VERSION","draft","CONTENT_BACKEND","storyblok","CLOUDFLARE_IMAGE_DOMAIN","STRIPE_PUBLISHABLE_KEY","HEADERS_NONCE",[470,471],"i18n",["S",451,469],"it",{"_472":451,"_13":474},{"_472":469,"_13":473},"code","Italian","English","d61595af-0bc9-4a30-98f5-8d9bc97274e9","logo",[514],"menu",[484],"alwaysMobileMenu","additionalPaddingX","additionalPaddingY","",{"_57":485,"_486":487,"_382":488,"_69":478,"_489":36,"_77":490},"6be559c5-f6af-4aef-9d94-45b2e0364364","items",[491,492],[],"showBreadcrumb","",{"_57":508,"_494":509,"_496":510,"_498":511,"_69":500,"_77":512},{"_57":493,"_494":495,"_61":115,"_496":497,"_498":499,"_69":500,"_77":501},"83a9af5d-e4c0-4244-aa1b-a4c5a2f3a8c7","link",{"_20":502,"_503":115,"_504":11,"_123":505,"_506":507},"label","About","submenu",[],"menuItem","","0f18481c-a400-40b3-8ce0-7a83e880ba3f","url","linktype","multilink","cached_url","about","8feb382a-c9db-47b1-b8d7-4fbe70c1c1fd",{"_20":115,"_503":513,"_504":503,"_123":505,"_506":513},"Products",[],"","/products",{"_57":515,"_318":516,"_69":476,"_517":518,"_519":520,"_77":521},"e76425f3-b061-416d-970b-cf26814da965",[522],"textWidth","250","imageMaxWidth","150","",{"_57":523,"_318":524,"_374":52,"_375":525,"_69":377,"_77":526},"8040fc3c-4394-4bf0-a36f-7344eb76d02a",{"_61":379,"_24":527},"justify","",[528],{"_61":382,"_383":529,"_24":530},{"_396":537,"_398":-5},[531],{"_318":532,"_61":318,"_390":533},"Exp. 0007",[534],{"_61":393,"_383":535},{"_335":536},"var(--black-color)",1,"--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","--black-color","--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"]

Sharp.

${esc(M.introTitle)}

${esc(r.question)}

Sharp or Sloppy

Find WhatBreaks the Line

Find What
Breaks the Line

The Tailored Arcade

Game — Find What Breaks the Line

Game — Sharp or Sloppy (Swipe)

Game — Spot the Best Dressed Man (Lineup)

Game — Dress the Man