← back to Model Arena
data/artifacts/25835bfaba3a/gpt.html
1853 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Style Showdown — Designer Wallcoverings</title>
<style>
:root {
/* Design tokens */
--bg: #f5f2ea;
--surface: #ffffff;
--ink: #151219;
--muted: #8a8578;
--accent: #c9a961; /* soft gold */
--accent-soft: #e5d4a0;
--line: rgba(12, 8, 16, 0.13);
--shadow-soft: 0 18px 45px rgba(12, 8, 16, 0.14);
--shadow-subtle: 0 1px 3px rgba(0,0,0,0.06);
--radius-card: 18px;
--radius-pill: 999px;
--radius-chip: 999px;
--ease-swift: cubic-bezier(.22,.9,.24,1);
--ease-hero: cubic-bezier(.22,1,.36,1);
--transition-fast: 160ms var(--ease-swift);
--transition-med: 260ms var(--ease-swift);
--font-display: "Playfair Display", Georgia, "Times New Roman", serif;
--font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
--font-sans: "Avenir Next", "Century Gothic", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
--fs-caption: 12px;
--fs-body: 16px;
--fs-lead: 21px;
--fs-h3: 28px;
--fs-h2: 38px;
--fs-h1: 50px;
--bracket-gap: 18px;
}
/* HyperFrames-inspired keyframes */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: none; }
}
@keyframes scaleIn {
from { opacity: 0; transform: scale(.92); }
to { opacity: 1; transform: none; }
}
@keyframes blurIn {
from { opacity: 0; filter: blur(12px); }
to { opacity: 1; filter: blur(0); }
}
@keyframes clipReveal {
from { clip-path: inset(0 100% 0 0); }
to { clip-path: inset(0); }
}
@keyframes crownGlow {
0% { box-shadow: 0 0 0 0 rgba(201,169,97,0.6); }
70% { box-shadow: 0 0 0 14px rgba(201,169,97,0); }
100% { box-shadow: 0 0 0 0 rgba(201,169,97,0); }
}
/* Base layout */
*,
*::before,
*::after {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
background: radial-gradient(circle at top left, #ffffff 0, #f5f2ea 52%, #e6e0d1 100%);
color: var(--ink);
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* Header / wordmark */
.app-shell {
max-width: 1100px;
margin: 0 auto;
padding: 80px 20px 32px;
}
header.app-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
z-index: 20;
pointer-events: none;
}
.header-inner {
max-width: 1100px;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 16px 20px 10px;
pointer-events: auto;
}
.wordmark-lockup {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: 8px 14px 6px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.72);
box-shadow:
0 18px 45px rgba(12, 8, 16, 0.14),
inset 0 0 0 1px rgba(255, 255, 255, 0.8),
0 0 0 1px rgba(12, 8, 16, 0.02);
backdrop-filter: blur(14px);
}
.wordmark-text {
font-family: var(--font-serif);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink);
white-space: normal;
max-width: 260px;
line-height: 1.3;
}
.wordmark-emblem {
width: 18px;
height: 18px;
border-radius: 999px;
margin-right: 10px;
background:
radial-gradient(circle at 30% 20%, #fff8e5 0, #c9a961 38%, #7d6a45 80%);
position: relative;
flex-shrink: 0;
}
.wordmark-emblem::before {
content: "";
position: absolute;
inset: 4px;
border-radius: inherit;
border: 1px solid rgba(245,242,234,0.85);
box-shadow:
inset 0 0 0 1px rgba(31,18,0,0.4),
0 0 0 1px rgba(255,255,255,0.7);
}
.wordmark-row {
display: flex;
align-items: center;
gap: 8px;
}
/* Main card */
.main-card {
background: rgba(255, 255, 255, 0.9);
border-radius: var(--radius-card);
box-shadow: var(--shadow-soft);
padding: 22px 22px 18px;
border: 1px solid rgba(255,255,255,0.9);
position: relative;
overflow: hidden;
animation: fadeUp 0.7s var(--ease-hero) both;
}
.main-card::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at top right, rgba(201,169,97,0.16), transparent 55%);
opacity: 1;
pointer-events: none;
}
.main-card-inner {
position: relative;
z-index: 1;
}
/* Title rows */
.subheading-label {
font-size: var(--fs-caption);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 4px;
}
.main-title {
font-family: var(--font-display);
font-size: 30px;
letter-spacing: 0.03em;
text-transform: uppercase;
line-height: 1.1;
color: var(--ink);
margin: 0 0 6px;
}
.main-title span.em {
font-style: italic;
letter-spacing: 0;
}
.main-intro {
font-size: 13px;
line-height: 1.6;
color: var(--muted);
max-width: 420px;
}
/* Meta bar */
.meta-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 18px;
margin-bottom: 14px;
border-top: 1px solid var(--line);
padding-top: 10px;
}
.meta-left {
display: flex;
align-items: center;
gap: 10px;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
}
.meta-dot {
width: 3px;
height: 3px;
border-radius: 999px;
background: var(--muted);
opacity: 0.6;
}
.seed-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: var(--radius-pill);
border: 1px solid rgba(201,169,97,0.4);
background: linear-gradient(135deg, #fdfaf2, #f1e3c4);
color: #4e4122;
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.seed-pill-dot {
width: 5px;
height: 5px;
border-radius: 999px;
background: var(--accent);
}
.progress-indicator {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
}
.progress-dots {
display: inline-flex;
gap: 3px;
}
.progress-dots span {
width: 14px;
height: 2px;
border-radius: 999px;
background: rgba(21,18,25,0.1);
overflow: hidden;
position: relative;
}
.progress-dots span::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, var(--accent), #f1d9a0);
transform-origin: left;
transform: scaleX(0);
transition: transform 220ms var(--ease-swift);
}
.progress-dots span.active::after {
transform: scaleX(1);
}
/* Bracket layout */
.bracket-grid {
display: grid;
grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.2fr);
gap: 18px;
}
@media (max-width: 900px) {
.bracket-grid {
grid-template-columns: minmax(0, 1fr);
}
}
.round-column {
display: flex;
flex-direction: column;
gap: var(--bracket-gap);
}
.round-label {
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 4px;
}
.round-label span.phase {
display: inline-flex;
align-items: center;
gap: 8px;
}
.round-label span.phase::after {
content: "";
width: 28px;
height: 1px;
background: linear-gradient(to right, rgba(12,8,16,0.05), rgba(12,8,16,0.26));
}
/* Match card */
.match {
position: relative;
border-radius: 14px;
border: 1px solid var(--line);
background: linear-gradient(135deg, #ffffff, #f7f2e6);
box-shadow: var(--shadow-subtle);
padding: 8px 10px;
display: flex;
flex-direction: column;
gap: 8px;
overflow: hidden;
transition:
box-shadow var(--transition-med),
border-color var(--transition-fast),
transform var(--transition-fast),
background var(--transition-med);
}
.match[data-active="true"] {
border-color: rgba(201,169,97,0.5);
box-shadow: 0 9px 30px rgba(12,8,16,0.18);
transform: translateY(-1px);
}
.match-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.match-seed-tag {
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
}
.match-status {
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
}
/* Option buttons */
.option-row {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 8px;
}
.option-tile {
position: relative;
border-radius: 11px;
padding: 6px 7px 5px;
border: 1px solid rgba(12,8,16,0.09);
background: rgba(255,255,255,0.9);
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
overflow: hidden;
transition:
border-color var(--transition-fast),
box-shadow var(--transition-fast),
background var(--transition-fast),
transform var(--transition-fast);
}
.option-tile::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at top left, rgba(201,169,97,0.18), transparent 55%);
opacity: 0;
transition: opacity var(--transition-fast);
}
.option-tile:hover {
border-color: rgba(201,169,97,0.7);
box-shadow: 0 6px 18px rgba(12,8,16,0.12);
transform: translateY(-1px);
}
.option-tile:hover::before {
opacity: 1;
}
.option-tile.selected {
border-color: var(--accent);
background: linear-gradient(135deg, #fdf7ec, #f2e2c4);
box-shadow: 0 9px 26px rgba(12,8,16,0.25);
transform: translateY(-1px);
}
.option-tile.selected::before {
opacity: 0.8;
}
.option-meta {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.option-label {
font-family: var(--font-serif);
font-size: 13px;
letter-spacing: 0.12em;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.option-style-tag {
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--muted);
}
/* Swatch shapes */
.pattern-swatch {
width: 46px;
height: 46px;
border-radius: 12px;
border: 1px solid rgba(12,8,16,0.25);
overflow: hidden;
flex-shrink: 0;
position: relative;
background-color: #eee;
}
/* Damask: ornamental, baroque */
.pattern-damask {
background:
radial-gradient(circle at 20% 0, rgba(255,255,255,0.25), transparent 55%),
radial-gradient(circle at 80% 100%, rgba(0,0,0,0.2), transparent 52%),
repeating-radial-gradient(circle at 50% 50%, #3f3647 0, #3f3647 8px, #2a2033 8px, #2a2033 16px);
}
.pattern-damask::after {
content: "";
position: absolute;
inset: 7px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.35);
background-image:
radial-gradient(circle at 50% 25%, rgba(255,255,255,0.4) 0, transparent 52%),
radial-gradient(circle at 20% 70%, rgba(0,0,0,0.35) 0, transparent 50%);
mix-blend-mode: screen;
opacity: 0.75;
}
/* Toile: scenic etching */
.pattern-toile {
background:
linear-gradient(135deg, #fdfaf5, #f1ecdf);
position: relative;
}
.pattern-toile::before,
.pattern-toile::after {
content: "";
position: absolute;
inset: 5px 7px;
border-radius: 10px;
background-image:
repeating-linear-gradient(140deg, rgba(84,95,122,0.9) 0, rgba(84,95,122,0.9) 1px, transparent 1px, transparent 5px),
repeating-linear-gradient(40deg, rgba(84,95,122,0.7) 0, rgba(84,95,122,0.7) 1px, transparent 1px, transparent 6px);
opacity: 0.35;
}
.pattern-toile::after {
inset: 10px;
border-radius: 8px;
clip-path: polygon(5% 10%, 60% 5%, 95% 25%, 85% 95%, 15% 85%);
opacity: 0.4;
}
/* Ikat: blurred chevrons */
.pattern-ikat {
background-image:
repeating-linear-gradient(135deg,
#f6f3f0 0,
#f6f3f0 6px,
#b3643b 6px,
#b3643b 12px),
repeating-linear-gradient(45deg,
transparent 0,
transparent 10px,
rgba(0,0,0,0.08) 10px,
rgba(0,0,0,0.08) 12px);
background-size: 160% 100%, 100% 100%;
background-position: 0 0;
filter: blur(0.3px);
position: relative;
}
.pattern-ikat::before {
content: "";
position: absolute;
inset: -6px 0;
background-image:
repeating-linear-gradient(135deg,
transparent 0,
transparent 8px,
rgba(255,255,255,0.9) 8px,
rgba(255,255,255,0.9) 9px);
mix-blend-mode: screen;
opacity: 0.6;
}
/* Chinoiserie: painterly flora */
.pattern-chinoiserie {
background:
radial-gradient(circle at 15% 20%, #fef7f1 0, #f8e4d1 36%, #e4c2b0 80%);
position: relative;
}
.pattern-chinoiserie::before {
content: "";
position: absolute;
width: 130%;
height: 130%;
top: -15%;
left: -10%;
background-image:
radial-gradient(circle at 20% 40%, rgba(65,105,92,0.9) 0, transparent 30%),
radial-gradient(circle at 60% 75%, rgba(156,71,70,0.9) 0, transparent 26%),
radial-gradient(circle at 80% 25%, rgba(221,178,110,0.85) 0, transparent 22%);
filter: blur(0.2px);
opacity: 0.9;
}
.pattern-chinoiserie::after {
content: "";
position: absolute;
inset: 8px 10px;
border-radius: 13px;
border: 1px solid rgba(255,255,255,0.7);
}
/* Art Deco: geometric fan */
.pattern-artdeco {
background:
radial-gradient(circle at 0 100%, #1d1620 0, #09060b 40%, #040205 80%);
position: relative;
}
.pattern-artdeco::before {
content: "";
position: absolute;
inset: 6px;
border-radius: 10px;
background-image:
repeating-linear-gradient(135deg,
transparent 0,
transparent 6px,
rgba(201,169,97,0.9) 6px,
rgba(201,169,97,0.9) 7px);
opacity: 0.4;
}
.pattern-artdeco::after {
content: "";
position: absolute;
inset: 10px;
border-radius: 2px;
border: 1px solid rgba(201,169,97,0.9);
box-shadow:
0 0 0 1px rgba(0,0,0,0.5),
inset 0 0 0 1px rgba(0,0,0,0.5);
clip-path: polygon(0 35%, 50% 0, 100% 35%, 100% 100%, 0 100%);
}
/* Boho: sun + woven */
.pattern-boho {
background:
radial-gradient(circle at 20% 0, #ffe9bf 0, #f4c98c 32%, #c98b52 85%);
position: relative;
}
.pattern-boho::before {
content: "";
position: absolute;
inset: 10px;
border-radius: 10px;
background-image:
linear-gradient(90deg, rgba(255,255,255,0.75) 1px, transparent 1px),
linear-gradient(180deg, rgba(255,255,255,0.7) 1px, transparent 1px);
background-size: 5px 5px;
mix-blend-mode: screen;
opacity: 0.9;
}
.pattern-boho::after {
content: "";
position: absolute;
width: 60%;
height: 60%;
left: 20%;
top: 20%;
border-radius: 50% 50% 42% 42%;
border: 2px solid rgba(171,104,51,0.95);
box-shadow:
0 0 0 3px rgba(255,244,228,0.7),
0 6px 10px rgba(120,68,25,0.6);
}
/* Coastal: striped seascape */
.pattern-coastal {
background-image:
linear-gradient(to bottom,
#e9f4ff 0,
#e9f4ff 20%,
#bfd7f0 21%,
#bfd7f0 34%,
#8cb0cc 35%,
#8cb0cc 50%,
#3c6b86 51%,
#3c6b86 70%,
#244456 71%,
#244456 100%);
position: relative;
}
.pattern-coastal::before {
content: "";
position: absolute;
left: -10%;
right: -10%;
top: 40%;
height: 55%;
background-image:
radial-gradient(circle at 20% 40%, rgba(255,255,255,0.8) 0, transparent 55%),
radial-gradient(circle at 45% 70%, rgba(255,255,255,0.7) 0, transparent 40%);
opacity: 0.8;
}
.pattern-coastal::after {
content: "";
position: absolute;
top: 10%;
right: 14%;
width: 14px;
height: 14px;
border-radius: 999px;
background: radial-gradient(circle at 30% 30%, #ffffff 0, #ffe9a8 40%, #f1b54d 100%);
box-shadow: 0 0 0 4px rgba(255,255,255,0.7);
}
/* Grandmillennial: chintz florals */
.pattern-grandmillennial {
background:
radial-gradient(circle at 20% 20%, #fef8ff 0, #f3e1f8 38%, #d4badf 80%);
position: relative;
}
.pattern-grandmillennial::before {
content: "";
position: absolute;
inset: 5px;
border-radius: 10px;
background-image:
radial-gradient(circle at 20% 30%, #f6a6ba 0, transparent 32%),
radial-gradient(circle at 68% 40%, #f7d27f 0, transparent 26%),
radial-gradient(circle at 40% 80%, #9ec3dd 0, transparent 28%);
opacity: 0.9;
}
.pattern-grandmillennial::after {
content: "";
position: absolute;
inset: 9px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.9);
}
/* Right column: finals + controls */
.finals-column {
border-radius: 14px;
border: 1px solid var(--line);
background: linear-gradient(135deg, #ffffff, #f7f2e6);
padding: 10px 10px 12px;
display: flex;
flex-direction: column;
gap: 12px;
box-shadow: var(--shadow-subtle);
position: relative;
overflow: hidden;
}
.finals-column::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at top right, rgba(201,169,97,0.18), transparent 55%);
opacity: 0.8;
pointer-events: none;
}
.finals-column-inner {
position: relative;
z-index: 1;
}
.final-match {
border-radius: 12px;
border: 1px solid rgba(201,169,97,0.6);
background: linear-gradient(150deg, #fdf7ec, #f2e0bf);
padding: 10px 10px 9px;
box-shadow: 0 8px 24px rgba(12,8,16,0.18);
display: flex;
flex-direction: column;
gap: 6px;
}
.final-header-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #6f5937;
}
.final-badge {
display: inline-flex;
align-items: center;
gap: 6px;
}
.final-badge-dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: #c9a961;
box-shadow: 0 0 0 3px rgba(255,244,216,0.9);
}
.final-body {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 6px;
}
.final-body.two {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.champion-slot {
border-radius: 12px;
border: 1px solid rgba(201,169,97,0.9);
background: radial-gradient(circle at 20% 0, #fffaf0 0, #f1dab0 40%, #e3c387 100%);
padding: 7px 8px;
display: flex;
align-items: center;
gap: 8px;
position: relative;
overflow: hidden;
}
.champion-slot.empty {
opacity: 0.7;
}
.champion-crown {
width: 42px;
height: 42px;
border-radius: 12px;
border: 1px solid rgba(105,81,40,0.8);
background:
radial-gradient(circle at 20% 20%, #fff6de 0, #f4c76b 40%, #c99741 80%);
position: relative;
box-shadow:
0 0 0 1px rgba(255,255,255,0.6),
0 10px 18px rgba(111,81,40,0.65);
}
.champion-crown::before,
.champion-crown::after {
content: "";
position: absolute;
}
.champion-crown::before {
inset: 8px 6px 6px;
border-radius: 999px 999px 6px 6px;
border: 1px solid rgba(117,81,25,0.95);
box-shadow: inset 0 0 0 1px rgba(255,248,225,0.9);
clip-path: polygon(0 45%, 20% 10%, 35% 45%, 50% 10%, 65% 45%, 80% 10%, 100% 45%, 100% 100%, 0 100%);
background: linear-gradient(180deg, #ffe8a8, #f1c762);
}
.champion-crown::after {
inset: 10px 13px auto;
height: 7px;
border-radius: 999px;
background:
radial-gradient(circle at 10% 60%, #fffdf4 0, #f8e7b6 40%, #e3a73b 100%);
box-shadow:
0 0 0 1px rgba(96,63,10,0.5),
0 6px 12px rgba(115,75,16,0.7);
}
.champion-meta {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.champion-label {
font-family: var(--font-serif);
font-size: 13px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #4e3a1b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.champion-caption {
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(78,58,27,0.8);
}
.final-vs-row {
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(90,70,45,0.8);
text-align: center;
}
/* Semi slots */
.semi-wrapper {
display: flex;
flex-direction: column;
gap: 6px;
}
.semi-slot {
border-radius: 11px;
border: 1px dashed rgba(201,169,97,0.7);
padding: 5px 6px;
min-height: 40px;
display: flex;
align-items: center;
gap: 7px;
background: rgba(255,250,241,0.9);
position: relative;
}
.semi-slot.empty {
opacity: 0.55;
}
.semi-swatch {
width: 30px;
height: 30px;
border-radius: 9px;
overflow: hidden;
border: 1px solid rgba(12,8,16,0.25);
flex-shrink: 0;
}
.semi-label {
font-family: var(--font-serif);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Controls */
.controls-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 2px;
}
.btn {
border-radius: var(--radius-pill);
border: 1px solid rgba(12,8,16,0.2);
background: rgba(255,255,255,0.95);
padding: 7px 14px 6px;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 7px;
cursor: pointer;
color: var(--ink);
transition:
background var(--transition-fast),
box-shadow var(--transition-fast),
border-color var(--transition-fast),
transform var(--transition-fast);
}
.btn span.dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--accent);
box-shadow: 0 0 0 3px rgba(233,214,166,0.9);
}
.btn-primary {
border-color: rgba(201,169,97,0.8);
background: linear-gradient(130deg, #fdf7ec, #f0dcaf);
color: #4e3a1b;
box-shadow: 0 8px 20px rgba(12,8,16,0.2);
}
.btn-primary:hover {
background: linear-gradient(130deg, #fff9f0, #f4deb4);
transform: translateY(-0.5px);
box-shadow: 0 10px 22px rgba(12,8,16,0.24);
}
.btn-ghost {
border-style: dashed;
color: var(--muted);
}
.btn-ghost:hover {
background: rgba(245,242,234,0.9);
}
.share-hint {
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
}
/* Result overlay */
.result-overlay {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
z-index: 40;
}
.result-overlay.active {
display: flex;
}
.result-backdrop {
position: absolute;
inset: 0;
background: radial-gradient(circle at top, rgba(21,18,25,0.62), rgba(21,18,25,0.9));
opacity: 0;
animation: fadeUp 0.4s var(--ease-hero) forwards;
}
.result-card {
position: relative;
max-width: 420px;
width: 100%;
border-radius: 22px;
background: linear-gradient(150deg, #fdf7ec, #efe0c0);
box-shadow:
0 24px 70px rgba(0,0,0,0.7),
0 0 0 1px rgba(255,255,255,0.6);
padding: 18px 16px 14px;
animation:
scaleIn 0.55s var(--ease-hero) both,
blurIn 0.65s var(--ease-hero) both;
}
.result-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.result-lockup {
display: flex;
align-items: center;
gap: 8px;
}
.result-wordmark {
font-family: var(--font-serif);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink);
}
.result-tag {
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(78,58,27,0.8);
}
.result-body {
border-radius: 16px;
border: 1px solid rgba(201,169,97,0.7);
background: radial-gradient(circle at 20% 0, #fff9f0 0, #f5e3c5 40%, #e0c487 100%);
padding: 12px 12px 11px;
display: grid;
grid-template-columns: 90px minmax(0, 1fr);
gap: 12px;
align-items: center;
position: relative;
}
.result-crown {
width: 74px;
height: 74px;
border-radius: 20px;
overflow: hidden;
position: relative;
animation: crownGlow 1.6s var(--ease-hero) 0.6s 2;
}
.result-crown-inner {
position: absolute;
inset: 7px;
border-radius: 16px;
border: 1px solid rgba(110,78,20,0.9);
overflow: hidden;
}
.result-crown-inner::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 0, #fff8dd 0, #f1c867 40%, #b57e1f 90%);
}
.result-crown-inner::after {
content: "";
position: absolute;
inset: 10px 8px 6px;
border-radius: 12px;
border: 1px solid rgba(72,45,6,0.9);
box-shadow:
inset 0 0 0 1px rgba(255,248,221,0.8),
0 0 0 1px rgba(255,229,176,0.9);
clip-path: polygon(0 40%, 20% 5%, 35% 40%, 50% 5%, 65% 40%, 80% 5%, 100% 40%, 100% 100%, 0 100%);
background: linear-gradient(180deg, #ffe39f, #f1ba4c);
}
.result-maintext {
display: flex;
flex-direction: column;
gap: 4px;
}
.result-label {
font-size: 11px;
letter-spacing: 0.19em;
text-transform: uppercase;
color: rgba(98,73,34,0.9);
}
.result-style {
font-family: var(--font-serif);
font-size: 24px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #4e3a1b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.result-caption {
font-size: 12px;
line-height: 1.5;
color: rgba(78,58,27,0.85);
}
.result-footer {
margin-top: 8px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.result-buttons {
display: flex;
align-items: center;
gap: 8px;
}
.result-chip {
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(78,58,27,0.85);
}
.btn-icon {
width: 24px;
height: 24px;
border-radius: 999px;
border: 1px solid rgba(64,50,23,0.45);
background: radial-gradient(circle at 30% 0, #fffdf7 0, #f7e3b5 55%, #ce9e49 100%);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 6px 12px rgba(78,58,27,0.6);
transition:
transform var(--transition-fast),
box-shadow var(--transition-fast),
background var(--transition-fast);
}
.btn-icon:hover {
transform: translateY(-1px);
box-shadow: 0 8px 16px rgba(78,58,27,0.7);
}
.btn-icon svg {
width: 12px;
height: 12px;
fill: none;
stroke: #4e3a1b;
stroke-width: 1.4;
stroke-linecap: round;
stroke-linejoin: round;
}
.result-close {
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(21,18,25,0.7);
cursor: pointer;
}
/* Utility hidden */
.hidden {
display: none !important;
}
</style>
</head>
<body>
<header class="app-header">
<div class="header-inner">
<div class="wordmark-lockup">
<div class="wordmark-row">
<div class="wordmark-emblem"></div>
<div class="wordmark-text">DESIGNER WALLCOVERINGS</div>
</div>
</div>
</div>
</header>
<main class="app-shell">
<section class="main-card" aria-label="Style Showdown tournament bracket">
<div class="main-card-inner">
<div class="subheading-label">Style Showdown</div>
<h1 class="main-title"><span class="em">Pattern</span> Bracket</h1>
<p class="main-intro">Advance your favorite wallpaper moods from quarterfinals to a crowning champion. Tap a swatch to send it through each round and reveal your signature style card.</p>
<div class="meta-row">
<div class="meta-left">
<span>8 styles</span>
<span class="meta-dot"></span>
<span>3 rounds</span>
</div>
<div class="meta-left">
<span class="progress-indicator">
<span>Progress</span>
<span class="progress-dots">
<span id="step-dot-1" class="active"></span>
<span id="step-dot-2"></span>
<span id="step-dot-3"></span>
</span>
</span>
</div>
</div>
<div class="bracket-grid">
<!-- Left Column: Quarterfinals & Semis -->
<div class="round-column">
<div>
<div class="round-label">
<span class="phase">Quarterfinals</span>
<span>Tap to advance</span>
</div>
<!-- Match 1: Damask vs Toile -->
<article class="match" data-match="q1" data-active="true">
<div class="match-header">
<span class="match-seed-tag">Match 1 · Ornamental vs Scenic</span>
<span class="match-status" data-status="q1">Pick winner</span>
</div>
<div class="option-row">
<button class="option-tile" type="button" data-match-id="q1" data-style-id="damask">
<div class="pattern-swatch pattern-damask" aria-hidden="true"></div>
<div class="option-meta">
<div class="option-label">Damask</div>
<div class="option-style-tag">Lush, Baroque, Statement</div>
</div>
</button>
<button class="option-tile" type="button" data-match-id="q1" data-style-id="toile">
<div class="pattern-swatch pattern-toile" aria-hidden="true"></div>
<div class="option-meta">
<div class="option-label">Toile</div>
<div class="option-style-tag">Pastoral, Etched, Storybook</div>
</div>
</button>
</div>
</article>
<!-- Match 2: Ikat vs Chinoiserie -->
<article class="match" data-match="q2" data-active="true">
<div class="match-header">
<span class="match-seed-tag">Match 2 · Global vs Painterly</span>
<span class="match-status" data-status="q2">Pick winner</span>
</div>
<div class="option-row">
<button class="option-tile" type="button" data-match-id="q2" data-style-id="ikat">
<div class="pattern-swatch pattern-ikat" aria-hidden="true"></div>
<div class="option-meta">
<div class="option-label">Ikat</div>
<div class="option-style-tag">Handwoven, Energetic</div>
</div>
</button>
<button class="option-tile" type="button" data-match-id="q2" data-style-id="chinoiserie">
<div class="pattern-swatch pattern-chinoiserie" aria-hidden="true"></div>
<div class="option-meta">
<div class="option-label">Chinoiserie</div>
<div class="option-style-tag">Scenic, Gilded, Botanical</div>
</div>
</button>
</div>
</article>
<!-- Match 3: Art Deco vs Boho -->
<article class="match" data-match="q3" data-active="true">
<div class="match-header">
<span class="match-seed-tag">Match 3 · Glam vs Laid-back</span>
<span class="match-status" data-status="q3">Pick winner</span>
</div>
<div class="option-row">
<button class="option-tile" type="button" data-match-id="q3" data-style-id="artdeco">
<div class="pattern-swatch pattern-artdeco" aria-hidden="true"></div>
<div class="option-meta">
<div class="option-label">Art Deco</div>
<div class="option-style-tag">Glam, Geometric, Noir</div>
</div>
</button>
<button class="option-tile" type="button" data-match-id="q3" data-style-id="boho">
<div class="pattern-swatch pattern-boho" aria-hidden="true"></div>
<div class="option-meta">
<div class="option-label">Boho</div>
<div class="option-style-tag">Sun-drenched, Collected</div>
</div>
</button>
</div>
</article>
<!-- Match 4: Coastal vs Grandmillennial -->
<article class="match" data-match="q4" data-active="true">
<div class="match-header">
<span class="match-seed-tag">Match 4 · Breezy vs Heirloom</span>
<span class="match-status" data-status="q4">Pick winner</span>
</div>
<div class="option-row">
<button class="option-tile" type="button" data-match-id="q4" data-style-id="coastal">
<div class="pattern-swatch pattern-coastal" aria-hidden="true"></div>
<div class="option-meta">
<div class="option-label">Coastal</div>
<div class="option-style-tag">Airy, Striped, Sea-glass</div>
</div>
</button>
<button class="option-tile" type="button" data-match-id="q4" data-style-id="grandmillennial">
<div class="pattern-swatch pattern-grandmillennial" aria-hidden="true"></div>
<div class="option-meta">
<div class="option-label">Grandmillennial</div>
<div class="option-style-tag">Chintz, Collected, Cozy</div>
</div>
</button>
</div>
</article>
</div>
<!-- Semi-finals display -->
<div>
<div class="round-label">
<span class="phase">Semi-finals</span>
<span id="semi-status-label">Awaiting picks</span>
</div>
<div class="semi-wrapper">
<div class="semi-slot empty" data-semi-slot="1">
<div class="semi-swatch" data-semi-swatch="1"></div>
<div class="semi-label" data-semi-label="1">Winner Match 1 vs 2</div>
</div>
<div class="semi-slot empty" data-semi-slot="2">
<div class="semi-swatch" data-semi-swatch="2"></div>
<div class="semi-label" data-semi-label="2">Winner Match 3 vs 4</div>
</div>
</div>
</div>
</div>
<!-- Right Column: Semi picks + Finals -->
<div class="finals-column">
<div class="finals-column-inner">
<div class="round-label">
<span class="phase">Finals & Champion</span>
<span id="final-status-label">Choose your winner</span>
</div>
<!-- Semi-final selection (interactive) -->
<article class="final-match" aria-label="Semi-finals selection">
<div class="final-header-row">
<span class="final-badge">
<span class="final-badge-dot"></span>
<span>Semi-final picks</span>
</span>
<span id="semi-picker-status">Tap to choose finalists</span>
</div>
<div class="final-body" id="semi-pairings">
<!-- Semi pairing 1 vs 2, will mirror selections -->
</div>
<div class="final-vs-row" id="semi-vs-label">Waiting for quarterfinal winners</div>
</article>
<!-- Final champion match -->
<article class="final-match" aria-label="Final match">
<div class="final-header-row">
<span>Final · Style Showdown</span>
<span id="final-match-status">Complete the ladder</span>
</div>
<div class="final-body two" id="final-pair">
<!-- Filled when semifinalists chosen -->
</div>
<div class="champion-slot empty" id="champion-slot" aria-live="polite">
<div class="champion-crown"></div>
<div class="champion-meta">
<div class="champion-label" id="champion-label">Your champion awaits</div>
<div class="champion-caption" id="champion-caption">Finish the bracket to unveil your signature wallpaper mood.</div>
</div>
</div>
</article>
<div class="controls-row">
<button class="btn btn-ghost" type="button" id="reset-btn">
<span>Reset bracket</span>
</button>
<div>
<button class="btn btn-primary" type="button" id="share-btn">
<span class="dot"></span>
<span>Share my champion</span>
</button>
<div class="share-hint">Creates a shareable result card · no login needed</div>
</div>
</div>
</div>
</div>
</div> <!-- /bracket-grid -->
</div>
</section>
</main>
<!-- Result overlay -->
<section class="result-overlay" id="result-overlay" aria-hidden="true">
<div class="result-backdrop"></div>
<div class="result-card" role="dialog" aria-modal="true" aria-labelledby="result-style-text">
<div class="result-header">
<div class="result-lockup">
<div class="wordmark-emblem"></div>
<div>
<div class="result-wordmark">Designer Wallcoverings</div>
<div class="result-tag">Style Showdown · Champion</div>
</div>
</div>
<div class="result-chip" id="result-chip"></div>
</div>
<div class="result-body">
<div class="result-crown">
<div class="result-crown-inner"></div>
</div>
<div class="result-maintext">
<div class="result-label">Your winning pattern mood</div>
<div class="result-style" id="result-style-text">Art Deco</div>
<div class="result-caption" id="result-caption-text">
Bold geometrics, gilded edges, and a little midnight shimmer — your walls were made for cinematic evenings.
</div>
</div>
</div>
<div class="result-footer">
<div class="result-buttons">
<button class="btn-icon" type="button" id="download-btn" aria-label="Download style card">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M6 19h12M12 4v10m0 0-4-4m4 4 4-4"/>
</svg>
</button>
<button class="btn-icon" type="button" id="close-overlay-btn" aria-label="Close style card">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M6 6l12 12M18 6L6 18"/>
</svg>
</button>
</div>
<div class="result-close" id="tap-to-close-text">Tap outside to close</div>
</div>
</div>
</section>
<script>
(function() {
const styles = {
damask: {
id: "damask",
name: "Damask",
tag: "Lush, Baroque, Statement",
chip: "Old-world drama",
description: "You gravitate toward romance and ritual — intricate motifs, candlelight, and a hint of palace drama suit your rooms perfectly."
},
toile: {
id: "toile",
name: "Toile",
tag: "Pastoral, Etched, Storybook",
chip: "Pastoral storytelling",
description: "You love a lived-in tale. Delicate scenes, heirloom china, and sunlit corners turn your walls into quiet storybooks."
},
ikat: {
id: "ikat",
name: "Ikat",
tag: "Handwoven, Energetic",
chip: "Global energy",
description: "Pattern, pulse, and passports — you collect memories, not things, and your walls hum with that kinetic, handwoven energy."
},
chinoiserie: {
id: "chinoiserie",
name: "Chinoiserie",
tag: "Scenic, Gilded, Botanical",
chip: "Gilded botanicals",
description: "Romantic gardens, lacquered accents, and painterly panoramas — you curate rooms that feel like a private, enchanted pavilion."
},
artdeco: {
id: "artdeco",
name: "Art Deco",
tag: "Glam, Geometric, Noir",
chip: "Midnight glamour",
description: "You’re drawn to sharp lines and soft light — think jazz-age cocktails, polished brass, and a skyline just beyond the curtains."
},
boho: {
id: "boho",
name: "Boho",
tag: "Sun-drenched, Collected",
chip: "Collected sunshine",
description: "Your spaces are layered and barefoot-friendly — woven textures, sunbursts, and well-traveled color tell your story in every corner."
},
coastal: {
id: "coastal",
name: "Coastal",
tag: "Airy, Striped, Sea-glass",
chip: "Salt-kissed calm",
description: "You chase the horizon line — airy stripes, sea-glass blues, and breezy light make your home feel perpetually offshore."
},
grandmillennial: {
id: "grandmillennial",
name: "Grandmillennial",
tag: "Chintz, Collected, Cozy",
chip: "Modern heirloom",
description: "You mix ruffles with rigor — chintz florals, pleated lampshades, and polished antiques create a future classic in every room."
}
};
const quarterMatches = ["q1","q2","q3","q4"];
const semiSlots = { 1: null, 2: null };
let semiPair = { a: null, b: null };
let finalPair = { a: null, b: null };
let champion = null;
const optionButtons = document.querySelectorAll(".option-tile");
const stepDots = {
1: document.getElementById("step-dot-1"),
2: document.getElementById("step-dot-2"),
3: document.getElementById("step-dot-3")
};
const semiStatusLabel = document.getElementById("semi-status-label");
const semiPickerStatus = document.getElementById("semi-picker-status");
const semiVsLabel = document.getElementById("semi-vs-label");
const finalStatusLabel = document.getElementById("final-status-label");
const finalMatchStatus = document.getElementById("final-match-status");
const championSlot = document.getElementById("champion-slot");
const championLabel = document.getElementById("champion-label");
const championCaption = document.getElementById("champion-caption");
const semiPairingsContainer = document.getElementById("semi-pairings");
const finalPairContainer = document.getElementById("final-pair");
const shareBtn = document.getElementById("share-btn");
const resetBtn = document.getElementById("reset-btn");
const overlay = document.getElementById("result-overlay");
const resultStyleText = document.getElementById("result-style-text");
const resultCaptionText = document.getElementById("result-caption-text");
const resultChip = document.getElementById("result-chip");
const downloadBtn = document.getElementById("download-btn");
const closeOverlayBtn = document.getElementById("close-overlay-btn");
function clearSelection(matchId) {
document.querySelectorAll('.option-tile[data-match-id="' + matchId + '"]').forEach(btn => {
btn.classList.remove("selected");
});
}
function updateMatchStatus(matchId, winnerId) {
const status = document.querySelector('[data-status="' + matchId + '"]');
if (!status) return;
if (winnerId) {
status.textContent = styles[winnerId].name + " advances";
} else {
status.textContent = "Pick winner";
}
}
function computeQuarterWinners() {
const winners = {};
quarterMatches.forEach(id => {
const selected = document.querySelector('.option-tile[data-match-id="' + id + '"].selected');
winners[id] = selected ? selected.getAttribute("data-style-id") : null;
});
return winners;
}
function refreshProgress() {
const winners = computeQuarterWinners();
const quarterDone = Object.values(winners).every(Boolean);
const semiDone = semiPair.a && semiPair.b;
const finalDone = champion != null;
stepDots[1].classList.toggle("active", true);
stepDots[2].classList.toggle("active", quarterDone || semiDone || finalDone);
stepDots[3].classList.toggle("active", finalDone);
semiStatusLabel.textContent = quarterDone ? "Seeded from quarters" : "Awaiting picks";
semiPickerStatus.textContent = quarterDone ? (semiDone ? "Finalists locked" : "Tap to send through") : "Finish quarterfinals first";
semiVsLabel.textContent = quarterDone
? (semiDone ? "Finalists chosen — pick your champion" : "Choose who reaches the final")
: "Waiting for quarterfinal winners";
if (finalDone) {
finalStatusLabel.textContent = "Champion crowned";
finalMatchStatus.textContent = "Share your style card";
} else if (semiDone) {
finalStatusLabel.textContent = "Finalists ready";
finalMatchStatus.textContent = "Tap a swatch to crown your champion";
} else {
finalStatusLabel.textContent = "Choose your winner";
finalMatchStatus.textContent = "Reach the final to crown a champion";
}
}
function renderSemiSlots() {
const winners = computeQuarterWinners();
const slot1 = winners.q1 && winners.q2 ? [winners.q1, winners.q2] : null;
const slot2 = winners.q3 && winners.q4 ? [winners.q3, winners.q4] : null;
const semiSlotEl1 = document.querySelector('[data-semi-slot="1"]');
const semiSlotEl2 = document.querySelector('[data-semi-slot="2"]');
const semiLabel1 = document.querySelector('[data-semi-label="1"]');
const semiLabel2 = document.querySelector('[data-semi-label="2"]');
const semiSwatch1 = document.querySelector('[data-semi-swatch="1"]');
const semiSwatch2 = document.querySelector('[data-semi-swatch="2"]');
function resetSemiSlot(el, labelEl, swatchEl, placeholder) {
el.classList.add("empty");
labelEl.textContent = placeholder;
swatchEl.className = "semi-swatch";
}
if (slot1) {
semiSlots[1] = slot1;
semiSlotEl1.classList.remove("empty");
semiLabel1.textContent = styles[slot1[0]].name + " / " + styles[slot1[1]].name;
swatchAssign(swatchEl => {
swatchEl.className = "semi-swatch pattern-" + slot1[0];
}, semiSwatch1);
} else {
semiSlots[1] = null;
resetSemiSlot(semiSlotEl1, semiLabel1, semiSwatch1, "Winner Match 1 vs 2");
}
if (slot2) {
semiSlots[2] = slot2;
semiSlotEl2.classList.remove("empty");
semiLabel2.textContent = styles[slot2[0]].name + " / " + styles[slot2[1]].name;
swatchAssign(swatchEl => {
swatchEl.className = "semi-swatch pattern-" + slot2[0];
}, semiSwatch2);
} else {
semiSlots[2] = null;
resetSemiSlot(semiSlotEl2, semiLabel2, semiSwatch2, "Winner Match 3 vs 4");
}
renderSemiPairings();
}
function swatchAssign(fn, el) {
if (!el) return;
fn(el);
}
function renderSemiPairings() {
semiPairingsContainer.innerHTML = "";
semiPair = { a: null, b: null };
champion = null;
finalPair = { a: null, b: null };
finalPairContainer.innerHTML = "";
championSlot.classList.add("empty");
championLabel.textContent = "Your champion awaits";
championCaption.textContent = "Finish the bracket to unveil your signature wallpaper mood.";
if (!semiSlots[1] || !semiSlots[2]) {
refreshProgress();
return;
}
const [s1a, s1b] = semiSlots[1];
const [s2a, s2b] = semiSlots[2];
const createSemiButton = (styleId, position) => {
const style = styles[styleId];
const btn = document.createElement("button");
btn.type = "button";
btn.className = "option-tile";
btn.setAttribute("data-semi-position", position);
btn.setAttribute("data-style-id", styleId);
btn.innerHTML = `
<div class="pattern-swatch pattern-${styleId}" aria-hidden="true"></div>
<div class="option-meta">
<div class="option-label">${style.name}</div>
<div class="option-style-tag">${style.tag}</div>
</div>
`;
btn.addEventListener("click", () => {
document.querySelectorAll('.option-tile[data-semi-position="' + position + '"]').forEach(el => el.classList.remove("selected"));
btn.classList.add("selected");
semiPair[position] = styleId;
renderFinalPair();
refreshProgress();
});
return btn;
};
// Two positions (a and b) for the finalists
semiPairingsContainer.appendChild(createSemiButton(s1a, "a"));
semiPairingsContainer.appendChild(createSemiButton(s2a, "b"));
semiPairingsContainer.appendChild(createSemiButton(s1b, "a"));
semiPairingsContainer.appendChild(createSemiButton(s2b, "b"));
semiVsLabel.textContent = "Tap one from each column to reach the final";
}
function renderFinalPair() {
finalPairContainer.innerHTML = "";
champion = null;
championSlot.classList.add("empty");
championLabel.textContent = "Your champion awaits";
championCaption.textContent = "Tap a finalist to crown your signature style.";
if (!semiPair.a || !semiPair.b) {
finalMatchStatus.textContent = "Choose both finalists";
return;
}
finalPair.a = semiPair.a;
finalPair.b = semiPair.b;
const makeFinalBtn = (styleId) => {
const style = styles[styleId];
const btn = document.createElement("button");
btn.type = "button";
btn.className = "option-tile";
btn.setAttribute("data-final-style-id", styleId);
btn.innerHTML = `
<div class="pattern-swatch pattern-${styleId}" aria-hidden="true"></div>
<div class="option-meta">
<div class="option-label">${style.name}</div>
<div class="option-style-tag">${style.tag}</div>
</div>
`;
btn.addEventListener("click", () => {
document.querySelectorAll("[data-final-style-id]").forEach(el => el.classList.remove("selected"));
btn.classList.add("selected");
champion = styleId;
reflectChampion();
refreshProgress();
});
return btn;
};
finalPairContainer.appendChild(makeFinalBtn(finalPair.a));
finalPairContainer.appendChild(makeFinalBtn(finalPair.b));
finalMatchStatus.textContent = "Tap a finalist to crown your champion";
}
function reflectChampion() {
if (!champion) return;
const style = styles[champion];
championSlot.classList.remove("empty");
championLabel.textContent = style.name;
championCaption.textContent = style.tag;
}
// Quarterfinal selection handling
optionButtons.forEach(btn => {
btn.addEventListener("click", function() {
const matchId = this.getAttribute("data-match-id");
const styleId = this.getAttribute("data-style-id");
clearSelection(matchId);
this.classList.add("selected");
updateMatchStatus(matchId, styleId);
renderSemiSlots();
refreshProgress();
});
});
// Reset
function resetBracket() {
document.querySelectorAll(".option-tile.selected").forEach(btn => btn.classList.remove("selected"));
quarterMatches.forEach(id => updateMatchStatus(id, null));
semiSlots[1] = semiSlots[2] = null;
semiPair = { a: null, b: null };
finalPair = { a: null, b: null };
champion = null;
renderSemiSlots();
finalPairContainer.innerHTML = "";
championSlot.classList.add("empty");
championLabel.textContent = "Your champion awaits";
championCaption.textContent = "Finish the bracket to unveil your signature wallpaper mood.";
refreshProgress();
}
resetBtn.addEventListener("click", resetBracket);
// Share / result overlay
function openOverlay() {
if (!champion) {
return;
}
const style = styles[champion];
overlay.classList.add("active");
overlay.setAttribute("aria-hidden", "false");
resultStyleText.textContent = style.name;
resultCaptionText.textContent = style.description;
resultChip.textContent = style.chip;
}
shareBtn.addEventListener("click", openOverlay);
function closeOverlay() {
overlay.classList.remove("active");
overlay.setAttribute("aria-hidden", "true");
}
closeOverlayBtn.addEventListener("click", function(e) {
e.stopPropagation();
closeOverlay();
});
overlay.addEventListener("click", function(e) {
if (e.target === overlay || e.target.classList.contains("result-backdrop")) {
closeOverlay();
}
});
downloadBtn.addEventListener("click", function(e) {
e.stopPropagation();
// Non-network, quiet UX: slight emphasis only
downloadBtn.style.transform = "translateY(-1px) scale(0.96)";
setTimeout(() => {
downloadBtn.style.transform = "";
}, 180);
});
// Initial setup
renderSemiSlots();
refreshProgress();
})();
</script>
</body>
</html>