.overlay[hidden] { display: none; }
.hero-character.hero-q { right: -8px; bottom: -4px; width: 48%; height: 90%; overflow: hidden; }
.hero-character.hero-q img { width: 100%; height: 88%; object-fit: contain; object-position: center bottom; border-radius: 24px; }
.q-bubble { position: absolute; z-index: 2; top: 24px; right: 5px; width: 128px; padding: 11px 8px; border: 3px solid #f26486; border-radius: 18px; background: #fff; color: #d94f74; font-size: 14px; line-height: 1.35; font-weight: 900; text-align: center; box-shadow: 5px 6px 0 #f8cbd5; }
.blank-wrap { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 3px; line-height: 1.15; }
.blank-wrap small { color: #ffd4de; font-size: 11px; letter-spacing: 0; margin-top: 5px; white-space: nowrap; }
.hint-pop { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(45,33,48,.66); z-index: 40; }
.hint-pop.show { display: flex; }
.hint-pop>div { width: min(360px,92vw); background: #fff8f6; border-radius: 26px; padding: 18px 20px 24px; text-align: center; box-shadow: 0 22px 60px rgba(35,20,39,.3); }
.hint-pop img { display: block; width: 130px; height: 130px; object-fit: contain; margin: -4px auto 4px; }
.hint-pop span,.hint-pop small { display: block; color: #8d8795; }
.hint-pop b { display: block; color: #f26486; font-size: 46px; letter-spacing: .25em; margin: 18px 0; }
.hint-pop button { border: 0; border-radius: 14px; padding: 13px 18px; background: #f26486; color: #fff; font-weight: 800; margin-top: 18px; }
@media (max-width: 480px) { .hero-character.hero-q { right: 0; width: 47%; height: 82%; } .q-bubble { width: 105px; top: 14px; right: 0; font-size: 12px; } .blank-wrap small { font-size: 10px; } }
.q-state-image { object-fit: contain !important; object-position: center bottom !important; border-radius: 22px; }
.state-feedback { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.state-feedback img { flex: 0 0 62px; width: 62px; height: 62px; object-fit: contain; }
.result-character.q-state-image { height: 170px; right: 0; bottom: -68px; }
.blocked-character.q-state-image { height: 235px; right: -12px; bottom: -96px; }
.fail-character.q-state-image { height: 190px; right: -8px; top: -18px; }
.revealed-blank { color: #ff9bb1; background: rgba(255,155,177,.16); border-bottom: 2px solid #ff9bb1; padding: 0 2px; }