/* Player page styles. Shared tokens and components are in ibsen-quiz.css. */
.player { min-height: 100%; display: flex; flex-direction: column; }
.player-top { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1rem; background: var(--ink-2); font-weight: 750; }
.player-top .score { margin-left: auto; font-stretch: 125%; font-weight: 900; font-variant-numeric: tabular-nums; }
.player-main { flex: 1; display: flex; flex-direction: column; padding: 1.25rem 1rem 1.5rem; gap: 1.25rem; width: min(640px, 100%); margin-inline: auto; }
.join { flex: 1; display: grid; align-content: center; gap: 2.5rem; overflow: hidden; padding-block: 2rem; }
.join-form { width: min(420px, 100% - 2rem); margin-inline: auto; display: grid; gap: 1rem; }
.brand { text-align: center; font-size: clamp(3.2rem, 15vw, 5.5rem); font-weight: 900; font-stretch: 125%; letter-spacing: -0.02em; }
.center { flex: 1; display: grid; place-content: center; text-align: center; gap: 0.9rem; }
.big-word { font-size: clamp(2.4rem, 11vw, 4.2rem); font-weight: 900; font-stretch: 125%; line-height: 1; }
.q-head { display: flex; align-items: center; gap: 1rem; }
.q-text { font-size: clamp(1.25rem, 5vw, 1.6rem); font-weight: 750; line-height: 1.2; }
.answer.is-picked { box-shadow: inset 0 0 0 5px #fff; }
.answer:not(:disabled) { cursor: pointer; }
.result-good { color: var(--good); }
.result-bad { color: #ff8b84; }
.pill { display: inline-block; padding: 0.3em 0.9em; border-radius: 999px; background: var(--ink-3); font-weight: 750; }