/* A stable reveal space keeps the character and its visual clues in place. */
.mirror-reveal{position:relative;display:flex;align-items:center;justify-content:center;gap:16px;min-height:84px;margin:2px 0 0;max-width:100%}
.mirror-reveal-button{display:inline-flex;align-items:center;justify-content:center;gap:11px;min-height:62px;padding:9px 22px;border:2px solid #d3dfbd;border-radius:22px;background:#fffdf2;color:#476b53;font-size:23px;line-height:1.2;white-space:nowrap;box-shadow:0 3px 0 #bccca53d}
.mirror-reveal-button>.reading{line-height:1.2}
.mirror-emotion-name{font-size:40px;line-height:1.3;font-weight:700;white-space:nowrap}
.mirror-emotion-name>.reading{line-height:1.3}
.mirror-reveal.is-revealed .mirror-reveal-button{font-size:19px;min-height:48px;padding:7px 13px;background:#f6f4e6;border-color:#d7dfc5;box-shadow:none}
@media(min-width:1500px){.mirror-reveal{min-height:100px;gap:22px}.mirror-reveal-button{font-size:27px;min-height:72px;padding:10px 28px}.mirror-emotion-name{font-size:48px}.mirror-reveal.is-revealed .mirror-reveal-button{font-size:23px;min-height:58px}}
@media(min-width:1000px) and (max-height:760px){.mirror-reveal{min-height:72px}.mirror-reveal-button{min-height:56px;font-size:22px}.mirror-emotion-name{font-size:36px}}
@media(max-width:700px){.mirror-reveal{min-height:80px}.mirror-reveal-button{font-size:23px}.mirror-emotion-name{font-size:38px}}