@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;700&family=League+Spartan:wght@700;800;900&display=swap');

:root { --ink:#151515; --paper:#f7f1e3; --red:#ff5c4d; --blue:#3155d9; --yellow:#f9bd19; --white:#fffdf6; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--paper); font-family:'DM Sans',Arial,sans-serif; background-image:radial-gradient(#15151512 0.7px,transparent 0.7px); background-size:7px 7px; }
button,textarea { font:inherit; }
button { color:inherit; }
main { max-width:1180px; margin:auto; padding:0 clamp(24px,4vw,56px); }
.screen { min-height:100vh; }
.setup-screen { display:grid; grid-template-columns:minmax(0,1fr) minmax(380px,460px); gap:clamp(52px,7vw,96px); align-items:center; padding:clamp(56px,8vh,92px) 0; }
.eyebrow { margin:0 0 18px; font-size:12px; font-weight:800; letter-spacing:2px; }
.eyebrow span { color:var(--yellow); text-shadow:1px 1px var(--ink); }
h1 { font-family:'League Spartan',Impact,sans-serif; font-weight:900; letter-spacing:-4px; line-height:.86; margin:0; }
.hero-copy { max-width:560px; padding-bottom:8px; }
.hero-copy h1 { font-size:clamp(82px,9.2vw,126px); }
.hero-copy h1 span { color:var(--red); -webkit-text-stroke:3px var(--ink); text-shadow:6px 6px 0 var(--ink); }
.lede { max-width:450px; font-size:18px; line-height:1.55; margin:28px 0 30px; }
.mini-demo { display:flex; align-items:center; gap:0; transform:rotate(-2deg); width:max-content; margin-left:8px; }
.demo-card { border:3px solid var(--ink); padding:14px 22px; border-radius:9px; font:800 16px 'League Spartan',sans-serif; box-shadow:4px 4px 0 var(--ink); }
.demo-symbol { display:grid; place-items:center; width:84px; height:62px; padding:0; font-size:34px; line-height:1; }
.demo-card.coral { background:var(--red); }.demo-card.blue { background:var(--blue); color:white; }
.demo-vs { z-index:2; display:grid; place-items:center; width:42px; height:42px; margin:0 -4px; color:white; background:var(--ink); border-radius:50%; font:800 12px 'League Spartan',sans-serif; }
.entry-panel { position:relative; width:100%; background:var(--white); border:3px solid var(--ink); border-radius:18px; box-shadow:8px 8px 0 var(--ink); padding:38px 36px 34px; }
.panel-step { position:absolute; top:-17px; right:24px; background:var(--yellow); border:3px solid var(--ink); border-radius:6px; padding:6px 10px; font:800 11px 'League Spartan',sans-serif; transform:rotate(3deg); }
.entry-panel label { display:block; font:800 24px 'League Spartan',sans-serif; }
.entry-panel > p { margin:7px 0 20px; color:#666; font-size:13px; }
.textarea-wrap { position:relative; }
textarea { width:100%; resize:none; min-height:220px; background:#f1ecdf; border:2px solid var(--ink); border-radius:10px; padding:18px; font-size:17px; line-height:1.6; outline:none; }
textarea:focus { box-shadow:0 0 0 4px #f9bd1955; }
.item-count { position:absolute; right:10px; bottom:10px; background:var(--ink); color:white; padding:5px 8px; border-radius:4px; font:700 10px 'League Spartan',sans-serif; letter-spacing:1px; }
.entry-panel .error { min-height:18px; margin:9px 0; color:#b42318; font-weight:700; }
.primary-button,.secondary-button { width:100%; border:3px solid var(--ink); border-radius:9px; padding:17px 20px; cursor:pointer; font:800 15px 'League Spartan',sans-serif; letter-spacing:.5px; box-shadow:4px 4px 0 var(--ink); transition:transform .12s,box-shadow .12s; }
.primary-button { display:flex; justify-content:center; gap:12px; background:var(--yellow); }.primary-button span { font-size:20px; line-height:13px; }
.primary-button:hover,.secondary-button:hover { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
.compare-screen { padding:56px 2vw; }
.compare-topline { display:flex; justify-content:space-between; align-items:end; }
.compare-topline h1 { font-size:clamp(44px,7vw,82px); letter-spacing:-3px; }
.text-button { border:0; background:none; cursor:pointer; font-size:11px; font-weight:800; text-decoration:underline; letter-spacing:1px; }
.progress-row { display:flex; align-items:center; gap:16px; margin:30px 0 45px; }
.progress-track { height:12px; flex:1; border:2px solid var(--ink); border-radius:20px; background:white; overflow:hidden; }.progress-track span { display:block; width:10%; height:100%; background:var(--yellow); transition:width .25s; }
.progress-row > span { font:800 11px 'League Spartan',sans-serif; white-space:nowrap; }
.battle { display:grid; grid-template-columns:1fr 70px 1fr; align-items:center; }
.choice-card { position:relative; min-height:310px; border:4px solid var(--ink); border-radius:20px; padding:42px 24px 30px; cursor:pointer; box-shadow:9px 9px 0 var(--ink); transition:transform .15s,box-shadow .15s; overflow:hidden; }
.choice-card:hover,.choice-card:focus-visible { transform:translate(4px,4px) rotate(-1deg); box-shadow:5px 5px 0 var(--ink); outline:none; }
.choice-card:active { transform:translate(8px,8px); box-shadow:1px 1px 0 var(--ink); }
.choice-a { background:var(--red); }.choice-b { background:var(--blue); color:white; }
.choice-card strong { display:block; font:900 clamp(30px,5vw,66px)/1 'League Spartan',sans-serif; overflow-wrap:anywhere; }
.key-hint { position:absolute; top:15px; left:15px; background:var(--paper); color:var(--ink); border:2px solid var(--ink); border-radius:5px; padding:5px 8px; font:800 10px 'League Spartan',sans-serif; }
.pick-label { position:absolute; bottom:20px; left:0; right:0; font:800 12px 'League Spartan',sans-serif; letter-spacing:2px; }
.versus { z-index:3; display:grid; place-items:center; width:76px; height:76px; margin-left:-3px; background:var(--yellow); border:4px solid var(--ink); border-radius:50%; box-shadow:4px 4px 0 var(--ink); font:900 21px 'League Spartan',sans-serif; transform:rotate(-7deg); }
.round-label { text-align:center; margin-top:30px; font:800 11px 'League Spartan',sans-serif; letter-spacing:2px; }
.results-screen { padding:60px 10vw 80px; }
.results-heading { text-align:center; margin-bottom:44px; }.results-heading h1 { font-size:clamp(54px,8vw,92px); }
.ranking-list { max-width:760px; margin:0 auto 36px; padding:0; list-style:none; counter-reset:rank; display:grid; gap:12px; }
.ranking-list li { counter-increment:rank; display:grid; grid-template-columns:65px 1fr auto; align-items:center; min-height:74px; background:var(--white); border:3px solid var(--ink); border-radius:12px; box-shadow:4px 4px 0 var(--ink); padding:8px 18px 8px 0; font:800 23px 'League Spartan',sans-serif; }
.ranking-list li::before { content:counter(rank,decimal-leading-zero); display:grid; place-items:center; align-self:stretch; border-right:3px solid var(--ink); margin-right:18px; color:#777; font-size:15px; }
.ranking-list li:first-child { background:var(--yellow); transform:scale(1.025) rotate(-.4deg); }.ranking-list li:first-child::after { content:'TOP PICK'; border:2px solid var(--ink); padding:5px 7px; border-radius:4px; font-size:9px; letter-spacing:1px; }
.result-actions { max-width:760px; margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:16px; }.secondary-button { background:var(--white); }
[hidden] { display:none !important; }
@media (max-width:900px) {
  main { max-width:680px; }
  .setup-screen { grid-template-columns:1fr; gap:52px; align-content:center; padding:56px 0 72px; }
  .hero-copy { max-width:100%; display:grid; grid-template-columns:1fr auto; column-gap:36px; align-items:end; }
  .hero-copy h1 { grid-column:1; font-size:clamp(78px,15vw,112px); }
  .lede { grid-column:1; margin-bottom:0; }
  .mini-demo { grid-column:2; grid-row:1 / span 2; margin:0 4px 10px 0; transform:rotate(-2deg); }
  .entry-panel { max-width:100%; }
}
@media (max-width:760px) {
  main { padding:0 18px; }
  .setup-screen { gap:44px; padding:38px 0 56px; }
  .hero-copy { display:block; }
  .hero-copy h1 { font-size:clamp(70px,22vw,92px); }
  .lede { margin:24px 0 26px; font-size:17px; }
  .entry-panel { padding:30px 22px 26px; box-shadow:6px 6px 0 var(--ink); }
  .compare-screen { padding:35px 0; }.compare-topline { align-items:start; }.compare-topline h1 { font-size:48px; }.progress-row { margin:25px 0 32px; }
  .battle { grid-template-columns:1fr; gap:0; }.choice-card { min-height:210px; }.versus { margin:-14px auto; width:62px;height:62px; }.choice-b { z-index:2; }.choice-card strong { font-size:42px; }
  .results-screen { padding:44px 0 65px; }.results-heading h1 { font-size:54px; letter-spacing:-2px; }.result-actions { grid-template-columns:1fr; }.ranking-list li { font-size:19px; }
  .mini-demo { transform:scale(.9) rotate(-2deg); transform-origin:left; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }