/* Hallmark · component: game mode · existing Mindal editorial tokens
 * pressed and pending modes, local result; inherited spin loading/error · P4 H4 E4 S5 R4 V4 */
.fortune-mode{display:flex;justify-content:center;gap:4px;width:fit-content;max-width:100%;margin:0 auto 18px;padding:4px;border:1px solid var(--color-rule);border-radius:var(--radius-pill);background:var(--color-panel)}
.fortune-mode button{border:0;border-radius:var(--radius-pill);padding:11px 20px;background:var(--color-clear);color:var(--color-muted);font:400 13px/1.2 var(--font-body);white-space:nowrap;cursor:pointer;transition:background .18s,color .18s}
.fortune-mode button[aria-pressed="true"]{background:var(--color-paper);color:var(--color-paper-ink)}
.fortune-mode button:hover:not(:disabled){background:var(--color-rule);color:var(--color-ink)}
.fortune-mode button[aria-pressed="true"]:hover:not(:disabled){background:var(--color-paper-rule);color:var(--color-paper-ink)}
.fortune-mode button:focus-visible,#privacy-demo:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
.fortune-mode button:active:not(:disabled){transform:translateY(1px)}
.fortune-mode button:disabled{opacity:.55;cursor:wait}
.fortune-demo-result{max-width:440px;margin:20px auto 0;padding:20px 24px;border-top:1px solid var(--color-rule);text-align:center}
.fortune-demo-result[hidden]{display:none}
.fortune-demo-result small{display:block;color:var(--color-accent-light);font:400 10px/1.4 var(--font-body);letter-spacing:.12em;text-transform:uppercase}
.fortune-demo-result strong{display:block;min-width:0;margin-top:10px;color:var(--color-ink);font:400 23px/1.45 var(--font-display);overflow-wrap:anywhere}
.fortune-demo-result p{margin:12px 0 0;color:var(--color-muted);font:300 13px/1.6 var(--font-body)}
#privacy-demo{grid-column:1/-1;background:var(--color-clear);color:var(--color-accent-light);border:1px solid var(--color-rule);border-radius:var(--radius-pill);white-space:nowrap}
#privacy-demo:hover{background:var(--color-rule)}
#privacy-demo:active{transform:translateY(1px)}
@media(max-width:700px){.fortune-mode button{padding:11px 17px}.fortune-demo-result{padding:18px 8px}.fortune-demo-result strong{font-size:20px}}
@media(prefers-reduced-motion:reduce){.fortune-mode button{transition:none}}
@supports not (backdrop-filter:blur(1px)){.fortune-winner-toast{background:var(--color-panel)}}