.intro-card { padding: clamp(20px, 4vw, 32px); display: grid; gap: 16px; max-width: 620px; }
.intro-card .btn { justify-self: start; }
.play { margin-top: 20px; padding: clamp(16px, 4vw, 30px); display: grid; gap: 18px; max-width: 820px; }
.play-head { display: grid; gap: 10px; }
.round-label { color: var(--ink-soft); }
.round-label strong { color: var(--ink); }
.stage-wrap { position: relative; }
.stage { width: 100%; height: auto; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.memory-count { position: absolute; top: 12px; right: 14px; padding: 4px 12px; border-radius: 99px; background: rgba(22,19,30,.8); color: #fff; font-weight: 800; }
.options { display: flex; flex-wrap: wrap; gap: 10px; }
.opt { min-height: 48px; padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--line-strong); background: var(--panel); cursor: pointer; font-weight: 700; transition: border-color .2s, transform .2s var(--ease-out); }
.opt:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-2px); }
.opt.swatch { width: 72px; height: 72px; padding: 0; border-radius: 18px; border: 3px solid var(--panel); box-shadow: 0 0 0 1.5px var(--line-strong), 0 8px 18px -12px rgba(0,0,0,.5); }
.opt.right { box-shadow: 0 0 0 3px var(--good); border-color: var(--good); }
.opt.wrong { box-shadow: 0 0 0 3px var(--warn); border-color: var(--warn); opacity: .8; }
.opt:disabled { cursor: default; }
.reveal { display: grid; gap: 10px; justify-items: start; padding: 16px 18px; border-radius: 18px; background: var(--accent-soft); }
.verdict { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; }
.result { margin-top: 20px; padding: clamp(20px, 4vw, 40px); display: grid; gap: 22px; max-width: 900px; }
.result .lede { color: var(--ink-soft); }
.score-line { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.score-line strong { font-family: var(--font-display); font-size: 3.4rem; line-height: 1; background: linear-gradient(120deg, var(--purple), var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.score-line span { font-weight: 700; color: var(--ink-soft); }
.how { padding: 20px; display: grid; gap: 10px; background: var(--canvas-deep); box-shadow: none; }
.how ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.result-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.share-note { min-height: 1.2em; font-size: .88rem; color: var(--accent); font-weight: 600; }