← back to Model Arena
data/artifacts/25835bfaba3a/claude-code.html
562 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Style Showdown — Designer Wallcoverings</title>
<style>
:root{
--bg:#faf8f4;
--surface:#ffffff;
--ink:#1c1a17;
--muted:#8f887c;
--accent:#2f4c39; /* jewel — deep forest */
--accent-soft:#e6ede8;
--line:#e2ddd2;
--hair:rgba(28,26,23,.10);
--shadow:0 8px 28px rgba(28,26,23,.10);
--shadow-lg:0 18px 52px rgba(28,26,23,.18);
--glow:0 0 30px rgba(47,76,57,.30);
--ease:cubic-bezier(.22,1,.36,1);
--serif:'Cormorant Garamond','Playfair Display','EB Garamond',Didot,'Bodoni MT',Georgia,serif;
--sans:-apple-system,'Segoe UI','Helvetica Neue',Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
background:var(--bg);
color:var(--ink);
font-family:var(--sans);
-webkit-font-smoothing:antialiased;
line-height:1.5;
min-height:100%;
background-image:
radial-gradient(1200px 600px at 15% -10%, #ffffff 0%, rgba(255,255,255,0) 60%),
radial-gradient(1000px 700px at 110% 10%, #f4f0e7 0%, rgba(244,240,231,0) 55%);
background-attachment:fixed;
}
/* ---------- HEADER / WORDMARK LOCKUP ---------- */
header.topbar{
position:fixed;top:0;left:0;right:0;z-index:50;
display:flex;align-items:center;justify-content:space-between;
gap:16px;
padding:16px 24px;
background:rgba(250,248,244,.86);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
border-bottom:1px solid var(--hair);
}
.wordmark{
display:flex;flex-direction:column;line-height:1.02;
color:var(--ink);
}
.wordmark .name{
font-family:var(--serif);
font-weight:600;
font-size:26px;
letter-spacing:.18em;
text-transform:uppercase;
white-space:nowrap;
color:var(--ink);
}
.wordmark .sub{
font-family:var(--sans);
font-size:9.5px;
letter-spacing:.34em;
text-transform:uppercase;
color:var(--muted);
margin-top:5px;
padding-left:2px;
}
.badge{
font-family:var(--sans);
font-size:10px;letter-spacing:.2em;text-transform:uppercase;
color:var(--accent);
border:1px solid var(--accent);
border-radius:100px;
padding:6px 12px;
white-space:nowrap;
}
/* ---------- STAGE ---------- */
main{
max-width:1000px;margin:0 auto;
padding:118px 22px 64px;
}
.roundhead{
text-align:center;margin-bottom:28px;
animation:fadeUp .6s var(--ease) both;
}
.roundhead .kicker{
font-family:var(--sans);
font-size:11px;letter-spacing:.28em;text-transform:uppercase;
color:var(--muted);
}
.roundhead h1{
font-family:var(--serif);
font-weight:600;
font-size:44px;
line-height:1.05;
margin:6px 0 4px;
}
.roundhead .prompt{
font-family:var(--serif);
font-style:italic;
font-size:20px;
color:var(--accent);
}
.roundhead .counter{
font-family:var(--sans);
font-size:11px;letter-spacing:.24em;text-transform:uppercase;
color:var(--muted);margin-top:12px;
}
/* ---------- MATCHUP ---------- */
.arena{
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
gap:18px;
margin:8px 0 40px;
}
.vs{
font-family:var(--serif);
font-style:italic;
font-size:30px;
color:var(--muted);
text-align:center;
user-select:none;
}
.contender{
position:relative;
background:var(--surface);
border:1px solid var(--line);
border-radius:14px;
overflow:hidden;
cursor:pointer;
box-shadow:var(--shadow);
transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease), opacity .5s var(--ease);
animation:fadeUp .7s var(--ease) both;
}
.contender:nth-child(3){animation-delay:.09s}
.contender:hover{
transform:translateY(-5px);
box-shadow:var(--shadow-lg);
border-color:var(--accent);
}
.contender:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.swatch{
height:230px;width:100%;
background-color:#eee;
background-size:cover;
border-bottom:1px solid var(--hair);
}
.meta{padding:18px 20px 20px}
.meta .nm{
font-family:var(--serif);
font-weight:600;
font-size:28px;
line-height:1.1;
}
.meta .tg{
font-family:var(--sans);
font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
color:var(--muted);
margin-top:6px;
}
.meta .choose{
margin-top:14px;
display:inline-block;
font-family:var(--sans);
font-size:10px;letter-spacing:.22em;text-transform:uppercase;
color:var(--accent);
}
/* win / lose animation states */
.contender.win{
border-color:var(--accent);
box-shadow:var(--glow),var(--shadow-lg);
transform:translateY(-6px) scale(1.02);
}
.contender.win::after{
content:"ADVANCES";
position:absolute;top:14px;right:14px;
font-family:var(--sans);font-size:9.5px;letter-spacing:.2em;
background:var(--accent);color:#fff;
padding:6px 10px;border-radius:100px;
animation:pop .4s var(--ease) both;
}
.contender.lose{
opacity:.28;
transform:scale(.96);
pointer-events:none;
filter:saturate(.4);
}
.arena.settling .vs{opacity:.2;transition:opacity .3s var(--ease)}
/* ---------- BRACKET MAP ---------- */
.bracketwrap{
border-top:1px solid var(--hair);
padding-top:26px;
overflow-x:auto;
}
.bracketwrap .label{
font-family:var(--sans);
font-size:10px;letter-spacing:.26em;text-transform:uppercase;
color:var(--muted);text-align:center;margin-bottom:18px;
}
.bracket{
display:flex;gap:14px;justify-content:center;
min-width:560px;
}
.col{display:flex;flex-direction:column;justify-content:space-around;flex:1;gap:8px}
.slot{
display:flex;align-items:center;gap:8px;
background:var(--surface);
border:1px solid var(--line);
border-radius:8px;
padding:7px 9px;
min-height:34px;
transition:all .4s var(--ease);
}
.slot .dot{width:11px;height:11px;border-radius:3px;flex:none;background:var(--line)}
.slot .txt{
font-family:var(--sans);font-size:10px;letter-spacing:.06em;
text-transform:uppercase;color:var(--ink);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.slot.empty{border-style:dashed;background:transparent}
.slot.empty .txt{color:var(--muted);opacity:.6}
.slot.live{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.slot.champ{border-color:var(--accent);background:var(--accent);}
.slot.champ .txt{color:#fff;font-weight:600}
.slot.champ .dot{background:#fff}
.colhead{
font-family:var(--sans);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
color:var(--muted);text-align:center;margin-bottom:4px;
}
/* ---------- RESULT OVERLAY ---------- */
.overlay{
position:fixed;inset:0;z-index:100;
display:none;align-items:center;justify-content:center;
padding:24px;
background:rgba(28,26,23,.55);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.overlay.show{display:flex;animation:fade .4s var(--ease) both}
.card{
background:var(--surface);
border:1px solid var(--line);
border-radius:16px;
box-shadow:var(--shadow-lg);
max-width:460px;width:100%;
overflow:hidden;
animation:fadeUp .6s var(--ease) both;
}
.card .crown{
text-align:center;padding:22px 24px 4px;
}
.card .crown .k{
font-family:var(--sans);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);
}
.card .crown .glyph{font-size:22px;color:var(--accent);margin:6px 0}
.card .champ-swatch{height:210px;margin:8px 24px 0;border-radius:12px;border:1px solid var(--hair);background-size:cover}
.card .champ-name{
font-family:var(--serif);font-weight:600;font-size:40px;text-align:center;
margin:16px 24px 2px;line-height:1;
}
.card .champ-tag{
font-family:var(--sans);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
color:var(--muted);text-align:center;
}
.card .path{
margin:18px 24px;padding-top:16px;border-top:1px solid var(--hair);
font-family:var(--sans);font-size:11px;letter-spacing:.04em;color:var(--muted);text-align:center;
}
.card .path b{color:var(--ink);font-weight:600}
.actions{display:flex;gap:10px;padding:0 24px 24px}
button.btn{
flex:1;
font-family:var(--sans);
font-size:11px;letter-spacing:.2em;text-transform:uppercase;
padding:14px 12px;border-radius:10px;cursor:pointer;
border:1px solid var(--accent);
transition:all .18s var(--ease);
}
button.btn.primary{background:var(--accent);color:#fff}
button.btn.primary:hover{filter:brightness(1.08)}
button.btn.ghost{background:transparent;color:var(--accent)}
button.btn.ghost:hover{background:var(--accent-soft)}
.toast{
position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);
background:var(--ink);color:var(--bg);
font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
padding:12px 20px;border-radius:100px;opacity:0;pointer-events:none;
transition:all .35s var(--ease);z-index:200;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* ---------- SWATCH PATTERNS ---------- */
.sw-damask{
background-color:#f4efe4;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='90' viewBox='0 0 60 90'%3E%3Crect width='60' height='90' fill='%23f4efe4'/%3E%3Cg fill='none' stroke='%232f4c39' stroke-width='1.6'%3E%3Cpath d='M30 6 C11 22 11 40 30 46 C49 40 49 22 30 6 Z'/%3E%3Cpath d='M0 46 C11 56 11 78 0 88 M60 46 C49 56 49 78 60 88'/%3E%3Cpath d='M30 46 C16 60 16 82 30 89 C44 82 44 60 30 46 Z'/%3E%3C/g%3E%3Ccircle cx='30' cy='26' r='3.4' fill='%232f4c39'/%3E%3Ccircle cx='0' cy='46' r='2.4' fill='%232f4c39'/%3E%3Ccircle cx='60' cy='46' r='2.4' fill='%232f4c39'/%3E%3C/svg%3E");
background-size:70px 105px;
}
.sw-toile{
background-color:#f6f2e8;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130' viewBox='0 0 130 130'%3E%3Crect width='130' height='130' fill='%23f6f2e8'/%3E%3Cg fill='none' stroke='%23315b7a' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M28 92 L28 70'/%3E%3Ccircle cx='28' cy='58' r='13'/%3E%3Ccircle cx='19' cy='64' r='9'/%3E%3Ccircle cx='37' cy='64' r='9'/%3E%3Cpath d='M12 92 L52 92'/%3E%3Cpath d='M92 96 L92 78 L106 66 L120 78 L120 96 Z'/%3E%3Cpath d='M92 78 L120 78'/%3E%3Cpath d='M78 96 L128 96'/%3E%3Cpath d='M70 34 q10 -12 22 0 M74 40 q9 -9 16 0'/%3E%3Ccircle cx='40' cy='24' r='6'/%3E%3Cpath d='M40 24 l0 -9 M40 24 l8 4 M40 24 l-8 4'/%3E%3C/g%3E%3C/svg%3E");
background-size:120px 120px;
}
.sw-ikat{
background-color:#f0e6dc;
background-image:
repeating-linear-gradient(45deg, rgba(176,71,46,.85) 0 6px, rgba(176,71,46,0) 6px 14px, rgba(176,71,46,.55) 14px 18px, rgba(176,71,46,0) 18px 30px),
repeating-linear-gradient(-45deg, rgba(47,76,57,.8) 0 6px, rgba(47,76,57,0) 6px 14px, rgba(47,76,57,.5) 14px 18px, rgba(47,76,57,0) 18px 30px),
repeating-linear-gradient(45deg, rgba(199,150,60,.35) 0 3px, transparent 3px 20px);
background-size:42px 42px,42px 42px,42px 42px;
}
.sw-chinoiserie{
background-color:#dfe8e0;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='150' viewBox='0 0 120 150'%3E%3Crect width='120' height='150' fill='%23dfe8e0'/%3E%3Cg fill='none' stroke='%233c5a48' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M20 150 C30 110 26 80 44 54 C58 34 70 30 84 14'/%3E%3Cpath d='M40 66 q18 -8 30 -22 M52 92 q22 -6 36 -22 M30 104 q-14 -6 -22 -20'/%3E%3C/g%3E%3Cg fill='%23b5657f'%3E%3Ccircle cx='70' cy='42' r='5'/%3E%3Ccircle cx='62' cy='38' r='4'/%3E%3Ccircle cx='68' cy='34' r='3.5'/%3E%3Ccircle cx='88' cy='68' r='5'/%3E%3Ccircle cx='82' cy='72' r='4'/%3E%3C/g%3E%3Cg fill='%23c7963c'%3E%3Ccircle cx='40' cy='68' r='3'/%3E%3Ccircle cx='30' cy='102' r='3'/%3E%3C/g%3E%3Cpath d='M92 108 q8 -6 16 -2 q-4 8 -12 8 q-6 -1 -4 -6z' fill='%233c5a48'/%3E%3C/svg%3E");
background-size:120px 150px;
}
.sw-artdeco{
background-color:#141414;
background-image:
repeating-conic-gradient(from 0deg at 50% 100%, #c9a961 0deg 6deg, #141414 6deg 18deg),
linear-gradient(#141414,#141414);
background-size:120px 120px, 100% 100%;
position:relative;
}
.sw-artdeco::before{
content:"";position:absolute;inset:0;
background-image:
repeating-linear-gradient(90deg, transparent 0 28px, rgba(201,169,97,.28) 28px 30px),
repeating-linear-gradient(0deg, transparent 0 28px, rgba(201,169,97,.18) 28px 30px);
}
.sw-boho{
background-color:#c26640;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23c26640'/%3E%3Cg fill='none' stroke='%23f2e4d3' stroke-width='1.6'%3E%3Cpath d='M40 8 L64 40 L40 72 L16 40 Z'/%3E%3Cpath d='M40 22 L52 40 L40 58 L28 40 Z'/%3E%3C/g%3E%3Cg stroke='%23f2e4d3' stroke-width='1.4' stroke-dasharray='2 4'%3E%3Cpath d='M0 40 L16 40 M64 40 L80 40 M40 0 L40 8 M40 72 L40 80'/%3E%3C/g%3E%3Ccircle cx='40' cy='40' r='3' fill='%233c2a20'/%3E%3Cg fill='%233c2a20'%3E%3Ccircle cx='2' cy='2' r='2'/%3E%3Ccircle cx='78' cy='78' r='2'/%3E%3Ccircle cx='78' cy='2' r='2'/%3E%3Ccircle cx='2' cy='78' r='2'/%3E%3C/g%3E%3C/svg%3E");
background-size:80px 80px;
}
.sw-coastal{
background-color:#fbfcfd;
background-image:
repeating-linear-gradient(0deg, #23557a 0 14px, #fbfcfd 14px 22px, #7fa9c6 22px 26px, #fbfcfd 26px 44px),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='44' viewBox='0 0 90 44'%3E%3Cpath d='M0 30 q11 -12 22 0 q11 12 22 0 q11 -12 22 0 q11 12 22 0' fill='none' stroke='%2323557a' stroke-width='2' opacity='.5'/%3E%3C/svg%3E");
background-size:100% 44px, 90px 44px;
}
.sw-grandmillennial{
background-color:#f4dfe4;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Crect width='90' height='90' fill='%23f4dfe4'/%3E%3Cg transform='translate(23,23)'%3E%3Cg fill='%23b5657f'%3E%3Ccircle cx='0' cy='-8' r='5'/%3E%3Ccircle cx='8' cy='0' r='5'/%3E%3Ccircle cx='0' cy='8' r='5'/%3E%3Ccircle cx='-8' cy='0' r='5'/%3E%3C/g%3E%3Ccircle cx='0' cy='0' r='4' fill='%23c7963c'/%3E%3C/g%3E%3Cg transform='translate(68,68)'%3E%3Cg fill='%23b5657f'%3E%3Ccircle cx='0' cy='-8' r='5'/%3E%3Ccircle cx='8' cy='0' r='5'/%3E%3Ccircle cx='0' cy='8' r='5'/%3E%3Ccircle cx='-8' cy='0' r='5'/%3E%3C/g%3E%3Ccircle cx='0' cy='0' r='4' fill='%23c7963c'/%3E%3C/g%3E%3Cg fill='none' stroke='%233c5a48' stroke-width='1.4'%3E%3Cpath d='M23 34 q4 12 22 11 M68 56 q-4 -12 -22 -11'/%3E%3Cpath d='M14 40 l-6 5 M32 44 l4 7 M60 50 l6 -5 M78 46 l-4 -7'/%3E%3C/g%3E%3C/svg%3E");
background-size:90px 90px;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@media(max-width:640px){
.wordmark .name{font-size:20px;letter-spacing:.16em}
.badge{display:none}
.roundhead h1{font-size:34px}
.arena{grid-template-columns:1fr;gap:12px}
.vs{padding:2px 0}
.swatch{height:170px}
.meta .nm{font-size:24px}
main{padding-top:100px}
}
</style>
</head>
<body>
<header class="topbar">
<div class="wordmark">
<span class="name">Designer Wallcoverings</span>
<span class="sub">Interiors · Est. Atelier</span>
</div>
<span class="badge">Style Showdown</span>
</header>
<main>
<div class="roundhead" id="roundhead">
<div class="kicker" id="kicker">The Bracket</div>
<h1 id="roundTitle">Quarterfinal</h1>
<div class="prompt" id="prompt">Which style would you live with?</div>
<div class="counter" id="counter">Match 1 of 4</div>
</div>
<div class="arena" id="arena"></div>
<div class="bracketwrap">
<div class="label">Tournament Bracket</div>
<div class="bracket" id="bracket"></div>
</div>
</main>
<div class="overlay" id="overlay">
<div class="card">
<div class="crown">
<div class="k">Your Style Champion</div>
<div class="glyph">✦</div>
</div>
<div class="champ-swatch" id="champSwatch"></div>
<div class="champ-name" id="champName">—</div>
<div class="champ-tag" id="champTag">—</div>
<div class="path" id="champPath"></div>
<div class="actions">
<button class="btn primary" id="shareBtn">Share Result</button>
<button class="btn ghost" id="againBtn">Play Again</button>
</div>
</div>
</div>
<div class="toast" id="toast">Result copied to clipboard</div>
<script>
const STYLES = [
{id:'damask', name:'Damask', cls:'sw-damask', hue:'#2f4c39', tag:'Ornate & regal'},
{id:'toile', name:'Toile', cls:'sw-toile', hue:'#315b7a', tag:'Pastoral narrative'},
{id:'ikat', name:'Ikat', cls:'sw-ikat', hue:'#b0472e', tag:'Woven blur'},
{id:'chinoiserie', name:'Chinoiserie', cls:'sw-chinoiserie', hue:'#3c5a48', tag:'Painterly garden'},
{id:'artdeco', name:'Art Deco', cls:'sw-artdeco', hue:'#c9a961', tag:'Geometric glamour'},
{id:'boho', name:'Boho', cls:'sw-boho', hue:'#c26640', tag:'Free-spirited'},
{id:'coastal', name:'Coastal', cls:'sw-coastal', hue:'#23557a', tag:'Breezy & bright'},
{id:'grandmillennial',name:'Grandmillennial',cls:'sw-grandmillennial',hue:'#b5657f', tag:'Chintz revival'}
];
const ROUND_NAMES = {8:'Quarterfinal', 4:'Semifinal', 2:'The Final'};
const KICKERS = {8:'Round of Eight', 4:'Final Four', 2:'The Last Two'};
let bracket, round, match, beaten;
function init(){
bracket = [ STYLES.slice(), Array(4).fill(null), Array(2).fill(null), Array(1).fill(null) ];
round = 0; match = 0;
beaten = {};
document.getElementById('overlay').classList.remove('show');
renderMatch();
renderBracket();
}
function renderMatch(){
const arena = document.getElementById('arena');
const cur = bracket[round];
const a = cur[match*2], b = cur[match*2+1];
const total = cur.length/2;
document.getElementById('kicker').textContent = KICKERS[cur.length] || 'The Bracket';
document.getElementById('roundTitle').textContent = ROUND_NAMES[cur.length] || 'Round';
document.getElementById('counter').textContent = cur.length===2 ? 'Crown the champion' : ('Match '+(match+1)+' of '+total);
const head = document.getElementById('roundhead');
head.style.animation='none'; void head.offsetWidth; head.style.animation='';
arena.className='arena';
arena.innerHTML =
cardHTML(a) +
'<div class="vs">vs</div>' +
cardHTML(b);
const cards = arena.querySelectorAll('.contender');
cards[0].addEventListener('click', ()=>pick(a,b,cards[0],cards[1]));
cards[1].addEventListener('click', ()=>pick(b,a,cards[1],cards[0]));
cards.forEach(c=>c.addEventListener('keydown',e=>{if(e.key==='Enter'||e.key===' '){e.preventDefault();c.click();}}));
}
function cardHTML(s){
return '<div class="contender" tabindex="0" role="button" aria-label="Choose '+s.name+'">'+
'<div class="swatch '+s.cls+'"></div>'+
'<div class="meta">'+
'<div class="nm">'+s.name+'</div>'+
'<div class="tg">'+s.tag+'</div>'+
'<span class="choose">Tap to advance →</span>'+
'</div></div>';
}
function pick(winner, loser, winEl, loseEl){
document.getElementById('arena').classList.add('settling');
winEl.classList.add('win');
loseEl.classList.add('lose');
beaten[winner.id] = beaten[winner.id] || [];
beaten[winner.id].push(loser);
bracket[round+1][match] = winner;
renderBracket(winner);
setTimeout(()=>{
match++;
if(match*2 >= bracket[round].length){
round++; match=0;
}
if(round === bracket.length-1){
finish();
} else {
renderMatch();
renderBracket();
}
}, 900);
}
function renderBracket(justWon){
const wrap = document.getElementById('bracket');
const heads = ['Eight','Four','Two','Champion'];
let html='';
for(let r=0;r<bracket.length;r++){
html += '<div class="col"><div class="colhead">'+heads[r]+'</div>';
const col = bracket[r];
for(let i=0;i<col.length;i++){
const s = col[i];
const isChampCol = (r===bracket.length-1);
let live = (r===round && (i===match*2 || i===match*2+1) && round<bracket.length-1);
let cls='slot';
if(!s) cls+=' empty';
if(live) cls+=' live';
if(isChampCol && s) cls+=' champ';
html += '<div class="'+cls+'">'+
'<span class="dot"'+(s?(' style="background:'+s.hue+'"'):'')+'></span>'+
'<span class="txt">'+(s?s.name:'—')+'</span></div>';
}
html += '</div>';
}
wrap.innerHTML = html;
}
function finish(){
const champ = bracket[bracket.length-1][0];
document.getElementById('champSwatch').className = 'champ-swatch '+champ.cls;
document.getElementById('champName').textContent = champ.name;
document.getElementById('champTag').textContent = champ.tag;
const defeated = (beaten[champ.id]||[]).map(s=>s.name);
document.getElementById('champPath').innerHTML =
'Undefeated — bested <b>'+defeated.join('</b>, <b>')+'</b>';
document.getElementById('overlay').classList.add('show');
}
document.getElementById('againBtn').addEventListener('click', init);
document.getElementById('shareBtn').addEventListener('click', ()=>{
const champ = bracket[bracket.length-1][0];
const txt = 'My interior Style Showdown champion is '+champ.name+' ✦ — Designer Wallcoverings. Which style would you crown?';
const toast = document.getElementById('toast');
const show=()=>{toast.textContent='Result copied to clipboard';toast.classList.add('show');setTimeout(()=>toast.classList.remove('show'),2200);};
if(navigator.clipboard && navigator.clipboard.writeText){
navigator.clipboard.writeText(txt).then(show).catch(()=>{toast.textContent='Champion: '+champ.name;toast.classList.add('show');setTimeout(()=>toast.classList.remove('show'),2200);});
} else {
toast.textContent='Champion: '+champ.name;toast.classList.add('show');setTimeout(()=>toast.classList.remove('show'),2200);
}
});
init();
</script>
</body>
</html>