/* Button Game product view. The approved comparison designs stay unchanged. */
body.button-game .site-nav{gap:15px}
body.button-game .game-brand{font-size:22px;gap:10px}
body.button-game .brand-key{width:29px;height:29px;display:grid;place-items:center;background:#253fbd;border-radius:9px;box-shadow:0 3px 0 #c5cbea}
body.button-game .brand-key i{display:block;width:26px;height:25px;border-radius:7px;background:#3155f5;transform:translateY(-3px);position:relative}
body.button-game .brand-key i:after{content:"";position:absolute;inset:8px;background:white;border-radius:3px}
body.button-game .game-divider{color:#bec3d0;font-size:22px;font-weight:300;margin:0 2px 0 4px}
body.button-game .game-name{font-size:14px;font-weight:650;letter-spacing:-.4px;white-space:nowrap}
body.button-game .slogan{margin-left:10px;font-size:12px}
body.button-game .poll-panel{padding:27px 24px 25px}
body.button-game .question-row h1{font-size:32px}
body.button-game .mood-options{margin-top:27px;padding:16px 10px 13px;gap:9px;border-radius:20px;background:#f0f2f8;border:1px solid #e5e8f1;box-shadow:inset 0 2px 3px #202b4508}
body.button-game .mood-options:before,body.button-game .mood-options:after,body.button-game .mood-options:has([aria-pressed=true]):after{display:none}
body.button-game .mood-option{--key-top:#edf0ff;--key-base:#b7c4f2;--key-ink:#2649cc;background:var(--key-base);border-radius:13px;padding:0;min-height:0;display:block;transform:none;box-shadow:0 3px 5px #2632520d;transition:none;isolation:isolate}
body.button-game .mood-2{--key-top:#f2f4ff;--key-base:#c8d1ed;--key-ink:#405aab}
body.button-game .mood-3{--key-top:#fafbfe;--key-base:#d0d5e1;--key-ink:#626b7d}
body.button-game .mood-4{--key-top:#fff3ed;--key-base:#f0c2b1;--key-ink:#a3482e}
body.button-game .mood-5{--key-top:#ffede8;--key-base:#e5a18f;--key-ink:#b73620}
body.button-game .keycap{width:100%;min-height:123px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:18px 5px 11px;position:relative;border:1px solid #ffffffdb;border-radius:13px;background:var(--key-top);color:var(--key-ink);box-shadow:0 1px 0 #ffffff,inset 0 -2px 3px #26325205;transform:translateY(-6px);transition:transform 150ms ease-out,box-shadow 150ms ease-out}
body.button-game .mood-option .emotion-face{width:55px;max-width:100%;transform:none;transition:transform 150ms ease-out}
body.button-game .key-label{font-size:13px;font-weight:750;line-height:1.3;letter-spacing:-.3px;white-space:nowrap}
body.button-game .key-led{position:absolute;top:8px;right:8px;width:6px;height:6px;background:#27345320;border-radius:50%;box-shadow:inset 0 1px 1px #27345320}
body.button-game .mood-option[aria-pressed=true]{background:var(--key-base);box-shadow:0 1px 2px #26325212;transform:none}
body.button-game .mood-option[aria-pressed=true] .keycap{transform:translateY(-1px);box-shadow:inset 0 0 0 1.5px var(--key-ink)}
body.button-game .mood-option[aria-pressed=true] .emotion-face{transform:none}
body.button-game .mood-option[aria-pressed=true] .key-led{background:var(--key-ink);box-shadow:0 0 0 2px var(--key-top),0 0 0 3px var(--key-ink)}
body.button-game .mood-option:active .keycap{transform:translateY(1px)}
body.button-game .mood-axis{margin:13px 3px 23px}
body.button-game .neutral-axis{display:none}
body.button-game .submit-vote{min-width:146px;border-radius:12px;box-shadow:0 4px 0 #0f1529;transform:translateY(-2px)}
body.button-game .submit-vote:disabled{box-shadow:0 3px 0 #d2d7e5;transform:none}
body.button-game .submit-vote:not(:disabled):active{transform:translateY(1px);box-shadow:0 1px 0 #0f1529}
body.button-game .receipt-button{box-shadow:0 4px 0 #213ba4;gap:8px}
body.button-game .choice-status{color:#626b7d}
body.button-game .mood-options:has([aria-pressed=true])~.vote-actions #moodMeaning{font-weight:650;color:var(--ink)}
@media(hover:hover){body.button-game .mood-option:hover{transform:none;background:var(--key-base)}body.button-game .mood-option:not([aria-pressed=true]):hover .keycap{transform:translateY(-8px)}body.button-game .mood-option:active:hover .keycap{transform:translateY(1px)}}
@media(max-width:1100px){body.button-game .slogan{display:none}body.button-game .question-row h1{font-size:29px}body.button-game .poll-panel{padding:25px 19px 23px}body.button-game .mood-options{gap:7px;padding:15px 8px 11px}body.button-game .keycap{min-height:112px;gap:10px}body.button-game .key-label{font-size:12px}body.button-game .mood-option .emotion-face{width:48px}}
@media(max-width:900px){body.button-game .question-row{flex-wrap:wrap}body.button-game .mood-options{gap:5px;padding:14px 6px 10px}body.button-game .keycap{padding:17px 4px 10px;min-height:104px;border-radius:10px}body.button-game .mood-option{border-radius:10px}body.button-game .key-led{width:5px;height:5px;top:6px;right:6px}body.button-game .key-label{font-size:11px}body.button-game .submit-vote{min-width:128px}}
@media(max-width:680px){body.button-game .site-nav{gap:10px}body.button-game .game-brand{font-size:20px;gap:8px}body.button-game .game-name{font-size:12px}body.button-game .game-divider{font-size:19px;margin:0}body.button-game .nav-right{gap:0}body.button-game .demo-label{display:none}body.button-game .question-row{flex-wrap:nowrap}body.button-game .question-row h1{font-size:26px}body.button-game .poll-panel{padding:25px 18px 24px}body.button-game .mood-options{margin-top:24px;padding:14px 7px 10px;gap:6px;border-radius:15px}body.button-game .keycap{min-height:101px;gap:9px;padding:17px 4px 10px}body.button-game .mood-option .emotion-face{width:43px}body.button-game .key-label{font-size:11px}body.button-game .mood-axis{margin:13px 1px 23px}body.button-game .mood-axis small{font-size:11px}body.button-game .submit-vote{min-width:128px}body.button-game .vote-actions{gap:8px}body.button-game .help-panel{top:106px}}
@media(max-width:375px){body.button-game .game-brand{font-size:18px;gap:7px}body.button-game .brand-key{width:25px;height:26px}body.button-game .brand-key i{width:23px;height:23px}body.button-game .brand-key i:after{inset:7px}body.button-game .game-name{font-size:11px}body.button-game .site-nav{gap:8px}body.button-game .poll-panel{padding:23px 14px 22px}body.button-game .question-row{flex-wrap:wrap;gap:9px}body.button-game .question-row h1{font-size:26px}body.button-game .mood-options{gap:4px;padding:13px 5px 9px;margin-top:22px}body.button-game .keycap{min-height:92px;gap:9px;padding:17px 2px 9px}body.button-game .key-label{font-size:10px}body.button-game .mood-axis small{font-size:10px}body.button-game .submit-vote{min-width:121px;padding:10px 9px}body.button-game .choice-status{font-size:11px}body.button-game .help-panel{top:142px}}
@media(prefers-reduced-motion:reduce){body.button-game .keycap,body.button-game .mood-option:hover .keycap,body.button-game .mood-option[aria-pressed=true] .keycap,body.button-game .mood-option:active .keycap{transform:translateY(-6px)!important}body.button-game .mood-option[aria-pressed=true]{outline:none}body.button-game .mood-option:focus-visible{outline:3px solid var(--fear);outline-offset:4px}body.button-game .submit-vote,body.button-game .submit-vote:not(:disabled):active{transform:none}}