.color-match-page { --color-purple: #6354db; --color-green: #1b9d69; --color-red: #dc4e69; }
body.dark-mode .color-header h1, body.dark-mode .color-header p { color: #f4f4f8; }
body.dark-mode .color-header p { color: #aeb2c3; }
.color-match-container { max-width: 760px; }
.color-top-label { color: #6354db; font-size: .72rem; font-weight: 900; letter-spacing: .12em; }
.color-heading-icon { width: 70px; height: 70px; margin: 0 auto 12px; border-radius: 19px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #ffe0e9, #dcd3ff); color: #6354db; font-size: 2.3rem; font-weight: 900; }
.color-panel { padding: clamp(18px, 4vw, 30px); }
.color-toolbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.color-toolbar div { min-width: 0; padding: 13px 8px; border-radius: 13px; background: var(--secondary-bg, #f3f4f6); text-align: center; }
.color-toolbar span { display: block; color: var(--muted-text, #74798a); font-size: .62rem; font-weight: 900; letter-spacing: .08em; }
.color-toolbar strong { display: block; margin-top: 3px; color: var(--text-color, #171a2b); font-size: 1.35rem; }
.color-progress { height: 7px; margin: 14px 0 21px; overflow: hidden; border-radius: 99px; background: var(--secondary-bg, #f3f4f6); }
.color-progress span { display: block; width: 100%; height: 100%; transform-origin: left; background: linear-gradient(90deg, #6354db, #eb6484); transition: width .2s linear; }
.color-stage { min-height: 245px; padding: 25px 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border-radius: 20px; background: #fafaff; border: 1px solid #e9e6ff; text-align: center; }
.color-stage.is-correct { animation: colorCorrect .22s ease; }
.color-stage.is-wrong { animation: colorWrong .22s ease; }
.color-stage-kicker { color: #74798a; font-size: .72rem; font-weight: 900; letter-spacing: .15em; }
.color-stage strong { font-size: clamp(2.5rem, 12vw, 5rem); font-weight: 900; letter-spacing: .02em; line-height: 1; }
.color-feedback { min-height: 20px; color: #74798a; font-size: .82rem; font-weight: 800; }
@keyframes colorCorrect { 50% { transform: scale(1.03); background: #e5faef; } }
@keyframes colorWrong { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.color-answers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 16px; }
.color-actions { margin-top: 21px; }
.color-answer { min-height: 52px; padding: 10px; border: 2px solid transparent; border-radius: 13px; color: #fff; font-size: .78rem; font-weight: 900; cursor: pointer; transition: transform .12s ease, filter .12s ease; touch-action: manipulation; }
.color-answer:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.05); }
.color-answer:active:not(:disabled) { transform: scale(.97); }
.color-answer:disabled { opacity: .5; cursor: not-allowed; }
.color-answer[data-color="red"] { background: #df4e5f; }.color-answer[data-color="blue"] { background: #3876dd; }.color-answer[data-color="green"] { background: #249a63; }.color-answer[data-color="yellow"] { background: #d79c24; }.color-answer[data-color="orange"] { background: #e47732; }.color-answer[data-color="purple"] { background: #7b59c7; }
.color-tip { margin: 17px 0 0; color: var(--muted-text, #74798a); text-align: center; font-size: .75rem; }
.color-summary { margin-top: 18px; text-align: center; }
.color-summary[hidden] { display: none; }
.color-summary-kicker { color: #6354db; font-size: .72rem; font-weight: 900; letter-spacing: .14em; }
.color-summary h2 { margin: 7px 0 20px; color: var(--text-color, #171a2b); }
.color-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-bottom: 22px; }
.color-summary-grid div { padding: 13px 6px; border-radius: 13px; background: var(--secondary-bg, #f3f4f6); }
.color-summary-grid span { display: block; color: var(--muted-text, #74798a); font-size: .65rem; font-weight: 800; }
.color-summary-grid strong { display: block; margin-top: 4px; color: var(--text-color, #171a2b); font-size: 1.25rem; }
body.dark-mode .color-stage { background: #202334; border-color: #343851; }
@media (max-width: 520px) { .color-top-label { display: none; } .color-stage { min-height: 205px; } .color-answer { min-height: 48px; padding-inline: 4px; font-size: .68rem; } .color-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .color-stage, .color-answer { animation: none !important; transition: none; } }