/* Share card and game styles. Colors come from the tokens in style.css. */
[hidden] { display: none !important; }
.share-card { display: block; width: 100%; max-width: 600px; height: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); margin: 12px 0; background: var(--panel); }
.share-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.share-actions button, .game-btn { font: inherit; font-weight: 700; padding: 10px 16px; min-height: 40px; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: var(--radius-sm); cursor: pointer; }
.share-actions button.ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.share-status { min-height: 1.5em; color: var(--muted); margin: 4px 0 0; }
.share-text { width: 100%; min-height: 5em; font: inherit; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); }
.game-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
@media (min-width: 820px) { .game-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.game-facts div { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); padding: 12px 14px; }
.game-facts dt { font-size: 13px; color: var(--muted); }
.game-facts dd { margin: 2px 0 0; font-size: 22px; font-weight: 700; overflow-wrap: anywhere; }
.guess-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 14px 0; }
.guess-row input[type="range"] { flex: 1 1 240px; min-width: 0; accent-color: var(--accent); }
.guess-out { font-size: 28px; font-weight: 700; color: var(--accent); min-width: 4.5em; }
.game-feedback { min-height: 1.6em; font-weight: 600; }
.big-grade { font-size: clamp(64px, 12vw, 120px); font-weight: 700; color: var(--accent); line-height: 1; margin: 0; }
.recap { padding-left: 20px; }