/* Which costs more? Poster style duel cards. Loaded after ../poster.css. */
body.game-compare .intro{background:var(--indigo)}
body.game-compare .intro .eyebrow{color:var(--gold)}
body.game-compare .intro::after{background:var(--tomato)}
body.game-compare .subhead{color:var(--cream)}

.cmp-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;max-width:1240px;width:100%;margin:0 auto}
@media(min-width:960px){.cmp-layout{grid-template-columns:minmax(0,1fr) 340px;align-items:start}}
.cmp-side{display:grid;gap:16px}
.cmp-side .card{padding:16px 18px}
.cmp-how{margin:6px 0 0;font-size:15px}

/* progress */
.cmp-progress{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 2px 14px}
.cmp-pips{display:flex;gap:8px;list-style:none;margin:0;padding:0}
.pip{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;border:3px solid var(--ink);background:var(--paper);box-shadow:2px 2px 0 var(--ink);font:800 13px var(--mono)}
.pip-now{background:var(--gold)}
.pip-right{background:var(--exact);color:var(--cream)}
.pip-wrong{background:var(--tomato);color:var(--cream)}
.cmp-count{margin:0;font:700 12px var(--mono);text-transform:uppercase;letter-spacing:.06em}

/* round */
.cmp-round{background:var(--paper);border:4px solid var(--ink);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
.cmp-head{padding:16px 18px 12px;background:var(--sand);border-bottom:4px solid var(--ink)}
.cmp-head h2{margin:4px 0 2px;font:800 clamp(22px,5.5vw,30px)/1.05 var(--disp);text-transform:uppercase;letter-spacing:-.02em}
.cmp-sub{margin:0;font-size:15px;color:var(--ink)}
.cmp-q{display:inline-block;margin:10px 0 0;padding:4px 12px;background:var(--ink);color:var(--cream);border-radius:999px;font:700 12px var(--mono);text-transform:uppercase;letter-spacing:.07em}
.cmp-offers{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:16px 14px}
@media(min-width:680px){.cmp-offers{grid-template-columns:1fr 1fr;padding:18px}}

/* poster offer cards */
.offer{position:relative;display:flex;flex-direction:column;gap:10px;width:100%;min-height:44px;padding:14px;text-align:left;color:var(--ink);background:var(--paper);border:4px solid var(--ink);border-radius:18px;box-shadow:6px 6px 0 var(--ink);font:inherit;transition:transform .1s,box-shadow .1s,background-color .15s}
.offer-a{background:#FFF1CF}
.offer-b{background:#E7E6F7}
.offer:hover:not(.is-locked){transform:translate(-1px,-1px);box-shadow:7px 7px 0 var(--ink)}
.offer:active:not(.is-locked){transform:translate(4px,4px);box-shadow:2px 2px 0 var(--ink)}
.offer:focus-visible{outline:4px solid var(--indigo);outline-offset:3px}
.offer.is-locked{cursor:default}
.of-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.of-art{display:inline-flex;min-width:48px;min-height:48px}
.of-tag{padding:3px 10px;border:2px solid var(--ink);border-radius:999px;background:var(--gold);font:800 11px var(--mono);text-transform:uppercase;letter-spacing:.08em;transform:rotate(-2deg)}
.offer-b .of-tag{background:var(--tomato);color:var(--cream);transform:rotate(2deg)}
.of-name{font:800 clamp(20px,5vw,24px)/1.05 var(--disp);text-transform:uppercase;letter-spacing:-.02em;overflow-wrap:anywhere}
.of-rows{display:grid;gap:5px}
.of-row{display:flex;justify-content:space-between;gap:10px;padding-bottom:4px;border-bottom:2px dashed rgba(20,17,15,.35);font-size:14px;line-height:1.35}
.of-row span{min-width:0;overflow-wrap:anywhere}
.of-row b{flex:none;max-width:62%;text-align:right;font:700 13px var(--mono);overflow-wrap:anywhere}
.of-total{display:flex;flex-direction:column;gap:2px;margin-top:2px;padding:10px 12px;background:var(--ink);color:var(--cream);border-radius:12px}
.of-tl{font:700 11px var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--gold)}
.of-tv{font:800 clamp(26px,7vw,34px)/1.05 var(--disp);font-variant-numeric:tabular-nums}
.of-badge{position:absolute;right:10px;top:-14px;padding:3px 12px;border:3px solid var(--ink);border-radius:999px;background:var(--gold);box-shadow:2px 2px 0 var(--ink);font:800 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;transform:rotate(3deg)}
.offer.is-more{background:var(--gold)}
.offer.is-more .of-total{background:var(--tomato)}
.offer.is-more .of-tl{color:var(--cream)}
.offer.is-less .of-total{background:var(--green)}
.offer.is-picked{outline:4px solid var(--indigo);outline-offset:3px}

.cmp-verdict{min-height:1.5em;margin:0;padding:0 18px;font-weight:800;font-size:17px}
.cmp-verdict.is-right{color:#0B3D2E}
.cmp-verdict.is-wrong{color:var(--tomato)}
.cmp-reveal{display:grid;gap:12px;padding:12px 18px 18px}
.cmp-diff{margin:0;font:700 12px var(--mono);text-transform:uppercase;letter-spacing:.06em}
.cmp-formula{border:3px solid var(--ink);border-radius:14px;background:var(--sand);overflow:hidden}
.cmp-formula summary{display:flex;align-items:center;min-height:44px;padding:0 14px;font:800 14px var(--mono);text-transform:uppercase;letter-spacing:.05em;cursor:pointer}
.cmp-formula summary:focus-visible{outline:4px solid var(--indigo);outline-offset:-4px}
.cmp-formula[open] summary{border-bottom:3px solid var(--ink);background:var(--gold)}
.cmp-fx{display:grid;gap:3px;margin:0;padding:10px 14px;font-size:14px;line-height:1.5}
.cmp-fx+.cmp-fx{border-top:2px dashed var(--ink)}
.cmp-fx b{font:800 12px var(--mono);text-transform:uppercase;letter-spacing:.06em}
.cmp-fx span{overflow-wrap:anywhere}
.cmp-idea{margin:0;padding:10px 14px;border-left:8px solid var(--tomato);background:var(--paper);font-weight:700;font-size:16px;line-height:1.45}
.cmp-next{justify-self:start;min-width:180px}

/* result and side cards */
.cmp-result{padding:20px}
.cmp-result h2{margin:4px 0 6px;font-size:clamp(28px,7vw,40px);line-height:1}
.cmp-streakline{margin:10px 0 0;font-weight:800}
.cmp-recap{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.cmp-recap li{padding:8px 12px;border:2px solid var(--ink);border-radius:10px;background:var(--paper);font-size:14px;line-height:1.4}
.cmp-recap li.is-wrong{background:#FBD6CE}
.cmp-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px;margin:10px 0 0}
.cmp-stats div{padding:8px 10px;border:3px solid var(--ink);border-radius:12px;background:var(--paper)}
.cmp-stats dt{font:700 11px var(--mono);text-transform:uppercase;letter-spacing:.06em}
.cmp-stats dd{margin:0;font:800 24px/1.1 var(--disp)}
.share-fallback{display:block;width:100%;margin-top:10px;padding:8px;border:3px solid var(--ink);border-radius:10px;font:13px var(--mono)}

@media(max-width:380px){.cmp-head,.cmp-reveal{padding-left:12px;padding-right:12px}.cmp-verdict{padding:0 12px}.cmp-offers{padding:14px 10px}.offer{padding:12px}.pip{width:30px;height:30px}.cmp-pips{gap:6px}}
@media(prefers-reduced-motion:reduce){.offer{transition:none}}