${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","css","7a30311c-dada-410b-a238-a679f2083670","html","\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","isolate","freeform","iframeHeight","min(600px, calc(100dvh - 24px))","iframeAllowScripts","iframeHeightMobile","iframeInjectThemeVars","",{"_21":159,"_102":103,"_13":160,"_104":103,"_105":103,"_106":103,"_107":161,"_109":103,"_110":111},188890497233335,"screenshot_2026_06_18_at_135431.png","https://a.storyblok.com/f/334678/d5ecc71978/screenshot_2026_06_18_at_135431.png",{"_58":113,"_105":163,"_115":71,"_68":66,"_116":164,"_74":165},"Dress the Man — KK & Jay","Style him to the sharpest line.","",{"_58":167,"_121":122,"_68":62,"_123":124,"_125":124,"_126":124,"_127":128,"_129":130,"_131":130,"_132":130,"_133":134,"_135":124,"_136":137,"_138":134,"_139":137,"_140":71,"_74":168,"_169":122,"_170":171,"_172":173,"_174":175,"_176":177},"c1c7f0ea-faf6-4e52-b6f1-ae912f0eafc9","","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",{"_21":179,"_144":180,"_146":103,"_58":181,"_148":182,"_150":71,"_68":151,"_152":183,"_154":71,"_155":183,"_156":37,"_74":184},"kkj-style","/* =====================================================================\n GAME_DATA — EDIT EVERYTHING HERE. NO LOGIC BELOW NEEDS TOUCHING.\n ---------------------------------------------------------------------\n A non-coder can:\n • add / remove pieces in any slot (just copy an existing {block})\n • change each piece's score weights + feedback line\n • change colors used to draw a piece on the figure (svg.fill etc.)\n • change the target score and the promo reward\n ---------------------------------------------------------------------\n HOW SCORING WORKS (plain English):\n Every chosen piece carries a \"weight\" (points it adds or removes).\n Positive weight = sharper. Negative = trying too hard / clashing.\n The base figure starts at GAME_DATA.baseScore.\n Two bonuses are computed automatically (see RULES at the bottom of\n this object) so the brand philosophy is enforced without code edits:\n + \"the line\" bonus when foundation (braces/garter) is chosen\n + \"restraint\" bonus when few loud pieces are stacked\n - \"too much\" penalty when several loud pieces pile up together\n Each piece can be flagged `loud:true` to count toward that penalty.\n ---------------------------------------------------------------------\n LOADING THIS FROM AN EXTERNAL SOURCE LATER (optional, no logic change):\n Instead of the literal object below you could do, e.g.:\n const GAME_DATA = await fetch('./style-him-up.json').then(r=>r.json());\n ...or pull it from a StoryPress freeform component field:\n const GAME_DATA = JSON.parse(\n document.getElementById('sp-freeform-styleData').textContent\n );\n As long as the shape (slots / options / weights / rules) matches,\n everything below keeps working untouched.\n ===================================================================== */\nconst GAME_DATA = {\n\n targetScore: 90, // score needed to \"win\" and unlock the reward\n baseScore: 40, // where an undressed-but-presentable figure starts\n\n // The promo reward shown on the end screen\n reward: {\n code: \"SHARP10\",\n desc: \"$10 off your first set of braces.\",\n minScoreLabel: \"Earned at 90+.\"\n },\n\n // Brand-voice verdict bands keyed by score. Highest matching min wins.\n verdicts: [\n { min: 0, text: \"A blank slate. Dress with intent.\" },\n { min: 45, text: \"Coming together. Mind the line.\" },\n { min: 60, text: \"Decent. But decent isn’t the goal.\" },\n { min: 72, text: \"Composed. He looks like he means it.\" },\n { min: 82, text: \"Quietly excellent. Almost nothing wasted.\" },\n { min: 90, text: \"Sharp. Restraint reads as confidence. The line holds.\" }\n ],\n\n // End-screen summaries by band (chosen by final score)\n endings: [\n { min: 0, kicker: \"Try Again\", title: \"Not yet.\", text: \"There’s a man in there. Strip the noise, set the foundation, and let the line do the talking.\" },\n { min: 72, kicker: \"Close\", title: \"Nearly there.\", text: \"Good instincts. A touch more restraint, a touch more structure — and he arrives.\" },\n { min: 90, kicker: \"The Verdict\", title: \"Sharp.\", text: \"Nothing shouting, nothing slack. The braces hold the line so he doesn’t have to. That’s the whole idea.\" }\n ],\n\n /* -------------------------------------------------------------------\n SLOTS — each is one control row. `key` must be unique.\n Each option:\n id unique within the slot\n label button text\n note tiny italic note under label (optional)\n weight points (can be negative)\n loud true if it counts as a \"loud / flashy\" piece\n foundation true ONLY for braces/garter pieces (drives \"the line\")\n feedback brand-voice line shown when chosen\n svg drawing instructions for the figure (see DRAW NOTES)\n ------------------------------------------------------------------- */\n slots: [\n {\n key:\"shirt\", name:\"Shirt\", hint:\"the canvas\",\n options:[\n { id:\"white\", label:\"Crisp White\", note:\"+ timeless\", weight:10, swatch:\"#fdfdfb\",\n feedback:\"White. The hardest thing to wear, the easiest to respect.\",\n svg:{ shirt:\"#fbfbf8\" } },\n { id:\"chambray\", label:\"Pale Chambray\", note:\"+ easy\", weight:8, swatch:\"#9fb4c9\",\n feedback:\"Soft blue. Warmth without effort. A good place to build.\",\n svg:{ shirt:\"#aebfd1\" } },\n { id:\"stripe\", label:\"Bengal Stripe\", note:\"+ character\", weight:6, loud:false, swatch:\"#c5d3e2\",\n feedback:\"A clean stripe earns its keep. Pattern, but disciplined.\",\n svg:{ shirt:\"#cdd9e6\", shirtStripe:\"#6f86a3\" } },\n { id:\"loud\", label:\"Loud Floral\", note:\"− busy\", weight:-12, loud:true, swatch:\"#d8714e\",\n feedback:\"The shirt is talking over the man. Quiet it down.\",\n svg:{ shirt:\"#e6a07c\", shirtFloral:true, shirtBase:\"#e6a07c\" } }\n ]\n },\n {\n key:\"braces\", name:\"Braces / Garter\", hint:\"the foundation — the line\",\n options:[\n { id:\"none\", label:\"None\", note:\"no structure\", weight:-4, foundation:false, swatch:\"transparent\",\n feedback:\"Nothing holding the line. It will sag before noon.\",\n svg:{} },\n { id:\"belt\", label:\"Just a Belt\", note:\"breaks the line\", weight:0, foundation:false, swatch:\"#5a3d28\",\n feedback:\"A belt cinches; it doesn’t lift. The torso still breaks.\",\n svg:{ belt:\"#4a3322\" } },\n { id:\"navy\", label:\"Navy Braces\", note:\"+ the line\", weight:16, foundation:true, swatch:\"#1f2a3c\",\n feedback:\"There it is. The line lifts and holds. Invisible engineering.\",\n svg:{ braces:\"#1f2a3c\" } },\n { id:\"brass\", label:\"Tan Braces + Garter\", note:\"+ the full line\", weight:20, foundation:true, swatch:\"#c8a96a\",\n feedback:\"Braces above, garter below. The whole line stays true all day.\",\n svg:{ braces:\"#b08d52\", garter:true } }\n ]\n },\n {\n key:\"neck\", name:\"Neckwear\", hint:\"restraint lives here\",\n options:[\n { id:\"open\", label:\"Open Collar\", note:\"+ ease\", weight:9, swatch:\"#fdfdfb\",\n feedback:\"An open collar, worn well, is its own statement. Confident.\",\n svg:{} },\n { id:\"knit\", label:\"Navy Knit Tie\", note:\"+ texture\", weight:12, swatch:\"#1f2a3c\",\n feedback:\"A knit tie. Texture over flash. Exactly the right amount.\",\n svg:{ tie:\"#1f2a3c\", tieKnit:true } },\n { id:\"silk\", label:\"Burgundy Silk\", note:\"+ polish\", weight:10, swatch:\"#6e2230\",\n feedback:\"Deep, considered colour. It finishes the throat without shouting.\",\n svg:{ tie:\"#6e2230\" } },\n { id:\"bowloud\", label:\"Sequin Bow Tie\", note:\"− costume\", weight:-14, loud:true, swatch:\"#d4b13a\",\n feedback:\"This is a costume choice. The man disappears behind it.\",\n svg:{ bow:\"#d4b13a\", bowLoud:true } }\n ]\n },\n {\n key:\"pocket\", name:\"Pocket Square\", hint:\"a whisper, not a shout\",\n options:[\n { id:\"none\", label:\"None\", note:\"clean\", weight:6, swatch:\"transparent\",\n feedback:\"Empty pocket. Never wrong. Restraint is a choice too.\",\n svg:{} },\n { id:\"white\", label:\"White Linen\", note:\"+ classic\", weight:11, swatch:\"#fdfdfb\",\n feedback:\"A flash of white linen. The oldest trick, still the best.\",\n svg:{ pocket:\"#fbfbf8\" } },\n { id:\"tonal\", label:\"Tonal Fold\", note:\"+ subtle\", weight:9, swatch:\"#9aa7b8\",\n feedback:\"Picks up the suit without matching the tie. Quietly clever.\",\n svg:{ pocket:\"#aab6c6\" } },\n { id:\"loud\", label:\"Neon Paisley Puff\", note:\"− too much\", weight:-10, loud:true, swatch:\"#e0532a\",\n feedback:\"An explosion in the breast pocket. Trying far too hard.\",\n svg:{ pocket:\"#e0532a\", pocketLoud:true } }\n ]\n },\n {\n key:\"shoes\", name:\"Shoes\", hint:\"the foundation everyone forgets\",\n options:[\n { id:\"sneak\", label:\"White Sneakers\", note:\"− breaks tone\", weight:-6, loud:true, swatch:\"#f2f2ee\",\n feedback:\"Sneakers undercut everything above them. The tone snaps.\",\n svg:{ shoes:\"#eeeeea\" } },\n { id:\"suede\", label:\"Tan Suede\", note:\"+ relaxed\", weight:9, swatch:\"#a87b4a\",\n feedback:\"Suede softens the formality just enough. Considered ease.\",\n svg:{ shoes:\"#a87b4a\" } },\n { id:\"oxford\", label:\"Black Oxfords\", note:\"+ anchor\", weight:13, swatch:\"#1a1a1a\",\n feedback:\"Polished oxfords anchor the whole figure. The base holds.\",\n svg:{ shoes:\"#191919\" } },\n { id:\"loud\", label:\"Gold Hi-Tops\", note:\"− circus\", weight:-13, loud:true, swatch:\"#d4af37\",\n feedback:\"Gold high-tops. The line dies at the ankle.\",\n svg:{ shoes:\"#d4af37\", shoesLoud:true } }\n ]\n },\n {\n key:\"attitude\", name:\"Attitude / Posture\", hint:\"matters as much as the cloth\",\n options:[\n { id:\"slouch\", label:\"Slouched\", note:\"− folds the line\", weight:-10, swatch:\"#8a8a8a\",\n feedback:\"The clothes can’t fix a folded spine. Stand into it.\",\n svg:{ pose:\"slouch\" } },\n { id:\"stiff\", label:\"Stiff & Anxious\", note:\"− tries too hard\", weight:-5, swatch:\"#6f6f6f\",\n feedback:\"Rigid reads as nervous. Composure isn’t tension.\",\n svg:{ pose:\"stiff\" } },\n { id:\"easy\", label:\"Easy & Upright\", note:\"+ composed\", weight:14, swatch:\"#1f2a3c\",\n feedback:\"Upright, unhurried. The posture wears the clothes — not the reverse.\",\n svg:{ pose:\"easy\" } },\n { id:\"hands\", label:\"Hands in Pockets\", note:\"+ unbothered\", weight:11, swatch:\"#3a4759\",\n feedback:\"Relaxed, unbothered, in command. Nothing to prove.\",\n svg:{ pose:\"hands\" } }\n ]\n }\n ],\n\n /* RULES — the brand philosophy, enforced automatically. Tune freely. */\n rules: {\n lineBonus: 12, // added when a foundation (braces/garter) piece is chosen\n restraintBonus: 10, // added when 0–1 \"loud\" pieces are worn\n loudPenaltyEach: 7, // subtracted per loud piece beyond the first\n maxScore: 100,\n minScore: 0\n }\n};\n\n/* =====================================================================\n GAME LOGIC — generic. Driven entirely by GAME_DATA above.\n ===================================================================== */\n(function(){\n const state = {}; // slotKey -> chosen optionId\n const controlsEl = document.getElementById('controls');\n const finishBtn = document.getElementById('finishBtn');\n const resetBtn = document.getElementById('resetBtn');\n const toolbar = document.getElementById('slots');\n\n // Default selections (first option of each slot)\n function defaults(){\n GAME_DATA.slots.forEach(s => state[s.key] = s.options[0].id);\n }\n defaults();\n\n // -------- Build control UI from data --------\n GAME_DATA.slots.forEach(slot=>{\n const wrap = document.createElement('div');\n wrap.className='slot';\n wrap.innerHTML =\n '

'+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);","438f4999-6977-4ea7-b54c-0a08027f2953","\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","min(820px, calc(100dvh - 24px))","","isSignedIn","verifyMFA","userData",{"_189":-7,"_190":-7,"_191":-7,"_192":-5,"_193":-5,"_194":-7,"_195":-7,"_196":-7,"_197":-7},"first_name","last_name","email","email_confirmed_at","last_sign_in_at","wallets","factors","user_metadata","app_metadata","hasDatabase","theme",{"_204":205,"_206":207,"_208":209,"_210":211,"_62":-7,"_212":213,"_214":-7,"_215":103,"_216":-7,"_217":103,"_218":-7,"_219":220,"_221":222,"_223":103,"_224":225,"_226":220,"_227":103,"_228":-7,"_229":103,"_230":103,"_231":232,"_233":103,"_234":37,"_235":103,"_236":237,"_238":239,"_240":-7,"_241":242},"isTouchScreen","error",{},"hostname","sp-staging.sp0007.workers.dev","userGeo",{"_404":405,"_406":407,"_408":409,"_410":411},"redirectRules",[],"tone","light","colors",{"_339":340,"_341":342,"_343":344,"_345":346,"_347":348,"_349":350,"_351":352,"_353":354,"_355":356,"_357":358,"_359":360,"_361":362,"_363":364,"_365":366,"_367":366,"_368":369,"_370":335,"_371":372,"_373":374,"_375":376,"_377":378,"_379":362,"_380":381,"_382":383,"_384":385,"_386":362,"_387":381,"_388":389,"_390":381,"_391":362,"_392":381,"_393":394,"_395":396,"_397":398,"_399":381,"_400":401,"_402":362,"_403":381},"footer","gtm_id","favicons","maxWidth","animation","siteTitle","StoryPress","navigation",{"_58":263,"_264":265,"_266":267,"_68":221,"_268":37,"_269":71,"_270":37,"_74":271},"termly_uuid","imageQuality","50","authorDefault","cookieyes_key","authentication","termlyWhitelist","componentMaxWidth","termlyConsentPrefLabel","Consent Preferences","relatedPostThumbnailAspectRatio","cookieyesRenderRevisitConsentButton","relatedPostThumbnailCustomAspectRatio","languages",{"_236":254,"_255":256},"langPref","en","langRoute","env",{"_243":244,"_245":246,"_247":248,"_249":250,"_251":-7,"_252":-7,"_253":-7},"TURNSTILE_SITE_KEY","0x4AAAAAABJj7J6weoMDklK-","STORYBLOK_REGION","eu","STORYBLOK_VERSION","draft","CONTENT_BACKEND","storyblok","CLOUDFLARE_IMAGE_DOMAIN","STRIPE_PUBLISHABLE_KEY","HEADERS_NONCE",[258,259],"i18n",["S",239,257],"it",{"_260":239,"_13":262},{"_260":257,"_13":261},"code","Italian","English","d61595af-0bc9-4a30-98f5-8d9bc97274e9","logo",[304],"menu",[272],"alwaysMobileMenu","additionalPaddingX","additionalPaddingY","",{"_58":273,"_274":275,"_276":277,"_68":266,"_278":71,"_74":279},"6be559c5-f6af-4aef-9d94-45b2e0364364","items",[280,281],"heading",[],"showBreadcrumb","",{"_58":298,"_283":299,"_286":300,"_288":301,"_68":290,"_74":302},{"_58":282,"_283":284,"_285":103,"_286":287,"_288":289,"_68":290,"_74":291},"83a9af5d-e4c0-4244-aa1b-a4c5a2f3a8c7","link",{"_21":292,"_293":103,"_294":11,"_110":295,"_296":297},"type","label","About","submenu",[],"menuItem","","0f18481c-a400-40b3-8ce0-7a83e880ba3f","url","linktype","multilink","cached_url","about","8feb382a-c9db-47b1-b8d7-4fbe70c1c1fd",{"_21":103,"_293":303,"_294":293,"_110":295,"_296":303},"Products",[],"","/products",{"_58":305,"_306":307,"_68":264,"_308":309,"_310":311,"_74":312},"e76425f3-b061-416d-970b-cf26814da965","text",[313],"textWidth","250","imageMaxWidth","150","",{"_58":314,"_306":315,"_316":37,"_317":318,"_68":319,"_74":320},"8040fc3c-4394-4bf0-a36f-7344eb76d02a",{"_285":321,"_25":322},"prose","alignment","justify","textRich","","doc",[323],{"_285":276,"_324":325,"_25":326},"attrs",{"_336":337,"_338":-5},[327],{"_306":328,"_285":306,"_329":330},"Exp. 0007","marks",[331],{"_285":332,"_324":333},"textStyle",{"_334":335},"color","var(--black-color)","level",1,"textAlign","--primary-color","deeppink","--primary-hover-color","oklch(from var(--primary-color) calc(l + 0.05) c h / 0.95)","--secondary-color","darkcyan","--secondary-hover-color","oklch(from var(--secondary-color) calc(l + 0.05) c h / 0.95)","--tertiary-color","orange","--tertiary-hover-color","oklch(from var(--tertiary-color) calc(l + 0.05) c h / 0.95)","--red-color","red","--green-color","green","--white-color","white","--black-color","black","--main-outer-color","var(--border-color)","--main-inner-color","var(--bg-color)","--main-inner-max-width-color","var(--main-inner-color)","--canvas-color","var(--white-color)","--bg-color","--bg-hover-color","oklch(from var(--bg-color) calc(l + 0.05) c h / 0.95)","--text-color","--text-hover-color","oklch(from var(--text-color) calc(l + 0.05) c h / 0.95)","--border-color","hsl(from var(--text-color) h s calc(l + 25))","--border-invert-color","hsl(from var(--white-color) h s calc(l - 25))","--prose-color","hsl(from var(--text-color) h s calc(l + 20))","--nav-bg-color","--nav-text-color","var(--text-color)","--nav-mobile-bg-color","var(--nav-bg-color)","--nav-mobile-text-color","var(--nav-text-color)","--footer-bg-color","--footer-text-color","--thumbnail-bg-color","oklch(from var(--bg-color) l c h / 90%)","--thumbnail-text-color","--button-bg-color","--button-text-color","--button-hover-bg-color","oklch(from var(--button-bg-color) calc(l + 0.05) c h / 0.95)","--button-hover-text-color","oklch(from var(--button-text-color) calc(l + 0.05) c h / 0.95)","--input-bg-color","rgb(212 212 212)","--input-text-color","--input-placeholder-text-color","rgb(82 82 82)","--lightbox-bg-color","--lightbox-text-color","lat",39.96118,"lon",-82.99879,"country","US","city","Columbus"]

Game — Spot the Best Dressed Man (Lineup)