.play-together-page { --play-together-line: var(--color-base-300); --play-together-soft: var(--color-base-200); --play-together-ink: var(--color-base-content); }
.play-together__hero-card { position: relative; overflow: hidden; min-height: 19rem; border-radius: var(--radius-box); padding: 2rem; background: radial-gradient(circle at 92% 8%, color-mix(in oklab, var(--color-secondary) 35%, transparent) 0 18%, transparent 19%), radial-gradient(circle at 8% 90%, color-mix(in oklab, var(--color-accent) 30%, transparent) 0 22%, transparent 23%), var(--color-neutral); box-shadow: 0 1rem 2.5rem color-mix(in oklab, var(--color-neutral) 20%, transparent); }
.play-together__hero-tile, .play-together__game-mark { display: inline-flex; align-items: center; justify-content: center; font-weight: 900; line-height: 1; }
.play-together__hero-tile { width: 3.8rem; height: 3.8rem; border-radius: .9rem; font-size: 1.55rem; box-shadow: 0 .55rem 1rem color-mix(in oklab, var(--color-neutral) 24%, transparent); }
.play-together__hero-tile:nth-child(1) { transform: rotate(-7deg); } .play-together__hero-tile:nth-child(2) { transform: translateY(-.4rem) rotate(5deg); } .play-together__hero-tile:nth-child(3) { transform: rotate(-3deg); }
.play-together__hero-tile--primary { background: var(--color-primary); color: var(--color-primary-content); } .play-together__hero-tile--secondary { background: var(--color-secondary); color: var(--color-secondary-content); } .play-together__hero-tile--accent { background: var(--color-accent); color: var(--color-accent-content); }
.play-together__game-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.play-together__game-option { position: relative; display: flex; min-height: 15rem; align-items: flex-start; gap: 1rem; border: 1px solid var(--play-together-line); border-radius: var(--radius-box); padding: 1.25rem; background: var(--color-base-100); color: var(--play-together-ink); text-align: left; transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
.play-together__game-option:hover { border-color: var(--color-neutral); background: var(--play-together-soft); transform: translateY(-.1rem); }
.play-together__game-option:focus-visible, .play-together__count-option:focus-visible, .play-together__match-card:focus-visible, .play-together__answer-button:focus-visible, .play-together__story-form textarea:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.play-together__game-option.is-selected { border-color: var(--color-primary); background: color-mix(in oklab, var(--color-primary) 8%, var(--color-base-100)); box-shadow: 0 .75rem 1.75rem color-mix(in oklab, var(--color-primary) 12%, transparent); }
.play-together__game-option.secondary.is-selected { border-color: var(--color-secondary); background: color-mix(in oklab, var(--color-secondary) 8%, var(--color-base-100)); }
.play-together__game-option.accent.is-selected { border-color: var(--color-accent); background: color-mix(in oklab, var(--color-accent) 10%, var(--color-base-100)); }
.play-together__game-mark { width: 3.25rem; height: 3.25rem; flex: 0 0 auto; border-radius: 1rem; background: color-mix(in oklab, var(--color-primary) 15%, transparent); color: var(--color-primary); font-size: 1.7rem; }
.play-together__game-option.secondary .play-together__game-mark { background: color-mix(in oklab, var(--color-secondary) 16%, transparent); color: color-mix(in oklab, var(--color-secondary) 65%, var(--play-together-ink)); }
.play-together__game-option.accent .play-together__game-mark { background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: color-mix(in oklab, var(--color-accent) 72%, var(--play-together-ink)); }
.play-together__game-check { position: absolute; right: 1rem; top: 1rem; display: grid; width: 1.6rem; height: 1.6rem; place-items: center; border: 1px solid var(--play-together-line); border-radius: 50%; color: transparent; font-size: .8rem; font-weight: 900; }
.play-together__game-option.is-selected .play-together__game-check { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-primary-content); }
.play-together__game-option.secondary.is-selected .play-together__game-check { border-color: var(--color-secondary); background: var(--color-secondary); color: var(--color-secondary-content); }
.play-together__game-option.accent.is-selected .play-together__game-check { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-accent-content); }
.play-together__setup-panel { border: 1px solid var(--play-together-line); border-radius: var(--radius-box); padding: clamp(1.25rem, 4vw, 2rem); background: var(--color-base-100); box-shadow: 0 .75rem 2rem color-mix(in oklab, var(--color-neutral) 7%, transparent); }
.play-together__count-option { border: 1px solid var(--play-together-line); border-radius: 999px; padding: .65rem 1rem; background: var(--color-base-100); color: var(--play-together-ink); font-size: .85rem; font-weight: 750; transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease; }
.play-together__count-option:hover { border-color: var(--color-primary); }
.play-together__count-option[aria-pressed="true"] { border-color: var(--color-neutral); background: var(--color-neutral); color: var(--color-neutral-content); }
.play-together__team-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.play-together__team-field { min-width: 0; }
.play-together__game-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--play-together-line); padding-bottom: 1rem; }
.play-together__current-team { border: 1px solid color-mix(in oklab, var(--color-primary) 30%, var(--play-together-line)); border-radius: 999px; padding: .45rem .8rem; background: color-mix(in oklab, var(--color-primary) 8%, var(--color-base-100)); color: var(--color-primary); font-size: .8rem; font-weight: 800; }
.play-together__scoreboard { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-top: 1.25rem; }
.play-together__score, .play-together__result-score { display: flex; min-width: 0; flex-direction: column; border: 1px solid var(--play-together-line); border-radius: var(--radius-field); padding: .8rem 1rem; background: var(--color-base-100); }
.play-together__score.is-current { border-color: var(--color-primary); background: color-mix(in oklab, var(--color-primary) 8%, var(--color-base-100)); }
.play-together__score strong, .play-together__result-score strong { margin-top: .25rem; font-size: 1.8rem; line-height: 1; }
.play-together__score small, .play-together__result-score small { margin-top: .35rem; color: color-mix(in oklab, var(--play-together-ink) 55%, transparent); font-size: .7rem; }
.play-together__stage { position: relative; min-height: 34rem; margin-top: 1.5rem; border: 1px solid var(--play-together-line); border-radius: var(--radius-box); padding: clamp(1.25rem, 5vw, 3.5rem); background: linear-gradient(180deg, color-mix(in oklab, var(--color-primary) 7%, var(--color-base-100)), var(--color-base-100) 14rem); color: var(--play-together-ink); box-shadow: 0 1rem 2.5rem color-mix(in oklab, var(--color-neutral) 10%, transparent); }
.play-together__stage:focus { outline: none; } .play-together__stage:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 4px; }
.play-together__prompt { max-width: 54rem; margin: 0 auto; text-align: center; } .play-together__challenge-title { margin-top: .45rem; font-size: clamp(1.7rem, 4vw, 2.75rem); font-weight: 900; line-height: 1.1; }
.play-together__match-board { display: grid; grid-template-columns: repeat(4, minmax(5rem, 8rem)); gap: clamp(.6rem, 2vw, 1rem); justify-content: center; margin: 3rem auto 0; }
.play-together__match-card { aspect-ratio: .78; perspective: 900px; border: 0; border-radius: 1rem; background: transparent; color: var(--play-together-ink); }
.play-together__match-card:disabled { cursor: default; }
.play-together__match-card-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 220ms ease; }
.play-together__match-card.is-visible .play-together__match-card-inner { transform: rotateY(180deg); }
.play-together__match-card-face { position: absolute; inset: 0; display: flex; backface-visibility: hidden; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--play-together-line); border-radius: 1rem; box-shadow: 0 .5rem 1rem color-mix(in oklab, var(--color-neutral) 9%, transparent); }
.play-together__match-card-front { background: linear-gradient(145deg, color-mix(in oklab, var(--color-primary) 18%, var(--color-base-100)), var(--color-base-100)); color: var(--color-primary); font-size: 2.4rem; font-weight: 900; }
.play-together__match-card-back { transform: rotateY(180deg); gap: .45rem; background: var(--color-base-100); color: var(--color-primary); }
.play-together__match-card-back > span { font-size: clamp(2.1rem, 5vw, 3.7rem); line-height: 1; }
.play-together__match-card-back small { color: var(--play-together-ink); font-size: .7rem; font-weight: 800; text-transform: capitalize; }
.play-together__match-card.is-matched .play-together__match-card-back { border-color: var(--color-success); background: color-mix(in oklab, var(--color-success) 10%, var(--color-base-100)); }
.play-together__choice-grid { display: grid; grid-template-columns: repeat(4, minmax(7rem, 1fr)); gap: .8rem; max-width: 52rem; margin: 3rem auto 0; }
.play-together__answer-button { min-height: 4.2rem; border: 1px solid var(--play-together-line); border-radius: var(--radius-field); background: var(--color-base-100); color: var(--play-together-ink); font-size: 1.3rem; font-weight: 850; transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease; }
.play-together__answer-button:hover:not(:disabled) { border-color: var(--color-secondary); background: color-mix(in oklab, var(--color-secondary) 9%, var(--color-base-100)); transform: translateY(-.1rem); }
.play-together__answer-button:disabled { cursor: default; opacity: .55; }
.play-together__number-sequence { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(.5rem, 2vw, 1rem); margin: 4rem auto 0; font-size: clamp(2.3rem, 7vw, 4.5rem); font-weight: 900; font-variant-numeric: tabular-nums; }
.play-together__number-sequence span { min-width: 3rem; text-align: center; } .play-together__number-sequence b { color: var(--color-secondary); } .play-together__number-sequence .is-answer { border-bottom: .25rem solid var(--color-secondary); color: color-mix(in oklab, var(--color-secondary) 50%, var(--play-together-ink)); }
.word-relay__chain { display: flex; align-items: center; justify-content: center; gap: clamp(.7rem, 3vw, 1.5rem); margin: 3.5rem auto 2rem; }
.word-relay__current-word, .word-relay__next-word { display: inline-flex; min-width: 8rem; min-height: 5rem; align-items: center; justify-content: center; border: 1px solid color-mix(in oklab, var(--color-primary) 28%, var(--play-together-line)); border-radius: var(--radius-box); padding: .8rem 1.25rem; background: var(--color-base-100); color: var(--play-together-ink); font-size: clamp(1.6rem, 5vw, 2.75rem); font-weight: 900; letter-spacing: .02em; box-shadow: 0 .5rem 1.25rem color-mix(in oklab, var(--color-neutral) 8%, transparent); }
.word-relay__next-word { border-style: dashed; background: color-mix(in oklab, var(--color-primary) 8%, var(--color-base-100)); color: color-mix(in oklab, var(--color-primary) 72%, var(--play-together-ink)); }
.word-relay__next-word strong { color: var(--color-primary); }
.word-relay__last-letter { border-bottom: .22rem solid var(--color-primary); color: var(--color-primary); }
.word-relay__arrow { color: var(--color-primary); font-size: 2rem; font-weight: 900; }
.word-relay__clue { display: flex; max-width: 36rem; flex-direction: column; gap: .45rem; margin: 0 auto; border: 1px solid var(--play-together-line); border-radius: var(--radius-field); padding: 1rem 1.25rem; background: color-mix(in oklab, var(--color-secondary) 7%, var(--color-base-100)); text-align: center; }
.word-relay__clue strong { font-size: 1.1rem; line-height: 1.4; }
.word-relay__choices { margin-top: 2rem; }
.word-relay__handoff { max-width: 36rem; margin: 2rem auto 0; border: 1px solid color-mix(in oklab, var(--color-primary) 30%, var(--play-together-line)); border-radius: var(--radius-box); padding: 1.25rem; background: color-mix(in oklab, var(--color-primary) 7%, var(--color-base-100)); text-align: center; }
.clue-duel__word-card { max-width: 32rem; margin: 3rem auto 0; border: 1px solid color-mix(in oklab, var(--color-secondary) 32%, var(--play-together-line)); border-radius: var(--radius-box); padding: 1.5rem 1.75rem; background: color-mix(in oklab, var(--color-secondary) 8%, var(--color-base-100)); text-align: center; box-shadow: 0 .5rem 1.25rem color-mix(in oklab, var(--color-neutral) 8%, transparent); }
.clue-duel__word { display: block; margin-top: .5rem; color: color-mix(in oklab, var(--color-secondary) 72%, var(--play-together-ink)); font-size: clamp(2rem, 6vw, 3.25rem); font-weight: 900; letter-spacing: .02em; }
.clue-duel__banned { max-width: 32rem; margin: 1.25rem auto 0; text-align: center; }
.clue-duel__banned-list { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .55rem; margin-top: .6rem; }
.clue-duel__banned-word { display: inline-flex; border: 1px solid color-mix(in oklab, var(--color-error) 40%, var(--play-together-line)); border-radius: var(--radius-field); padding: .35rem .85rem; background: color-mix(in oklab, var(--color-error) 8%, var(--color-base-100)); color: color-mix(in oklab, var(--color-error) 68%, var(--play-together-ink)); font-weight: 850; text-decoration: line-through; text-decoration-thickness: .12em; }
.clue-duel__handoff { max-width: 36rem; margin: 2rem auto 0; border: 1px solid color-mix(in oklab, var(--color-secondary) 30%, var(--play-together-line)); border-radius: var(--radius-box); padding: 1.25rem; background: color-mix(in oklab, var(--color-secondary) 7%, var(--color-base-100)); text-align: center; }
.clue-duel__result-list { grid-column: 1 / -1; border: 1px solid color-mix(in oklab, var(--color-secondary) 30%, var(--play-together-line)); border-radius: var(--radius-box); padding: 1.25rem 1.5rem; background: color-mix(in oklab, var(--color-secondary) 7%, var(--color-base-100)); }
.clue-duel__result-list ul { display: grid; gap: .55rem; margin-top: 1rem; }
.clue-duel__result-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; color: var(--play-together-ink); }
.clue-duel__result-list li span { color: color-mix(in oklab, var(--play-together-ink) 58%, transparent); font-size: .78rem; font-weight: 700; text-align: right; }
.play-together__feedback { min-height: 1.75rem; margin: 1rem auto 0; text-align: center; font-size: .95rem; font-weight: 800; } .play-together__feedback[data-state="correct"] { color: var(--color-success); } .play-together__feedback[data-state="incorrect"] { color: var(--color-error); }
.play-together__story-prompt { display: inline-block; max-width: 44rem; border-radius: var(--radius-field); padding: 1rem 1.25rem; background: color-mix(in oklab, var(--color-accent) 12%, var(--color-base-100)); color: var(--play-together-ink); font-size: 1.15rem; font-weight: 750; }
.play-together__story-form { max-width: 44rem; margin: 2rem auto 0; } .play-together__story-form textarea { width: 100%; resize: vertical; }
.play-together__story-so-far { max-width: 44rem; margin: 2.5rem auto 0; border-top: 1px solid var(--play-together-line); padding-top: 1.25rem; text-align: left; }
.play-together__story-line { margin-top: .7rem; color: color-mix(in oklab, var(--play-together-ink) 80%, transparent); line-height: 1.5; } .play-together__story-line > span { display: inline-block; width: 1.5rem; color: color-mix(in oklab, var(--play-together-ink) 45%, transparent); font-variant-numeric: tabular-nums; }
.play-together__story-line strong { color: var(--color-accent-content); }
.play-together__handoff { max-width: 44rem; margin: 5rem auto 0; border: 1px solid color-mix(in oklab, var(--color-secondary) 35%, var(--play-together-line)); border-radius: var(--radius-box); padding: clamp(1.5rem, 4vw, 2.5rem); background: color-mix(in oklab, var(--color-secondary) 8%, var(--color-base-100)); text-align: center; }
.play-together__same-page-reveal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; max-width: 44rem; margin: 2.5rem auto 0; }
.play-together__same-page-answer { display: flex; min-height: 5rem; flex-direction: column; justify-content: center; border: 1px solid color-mix(in oklab, var(--color-secondary) 25%, var(--play-together-line)); border-radius: var(--radius-field); padding: .8rem 1rem; background: var(--color-base-100); text-align: left; }
.play-together__same-page-answer strong { margin-top: .35rem; color: var(--color-secondary); font-size: 1.1rem; }
.play-together__same-page-popular { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .55rem; margin-top: 1.5rem; text-align: center; }
.play-together__same-page-popular p { width: 100%; }
.play-together__same-page-popular span { border-radius: 999px; padding: .45rem .75rem; background: color-mix(in oklab, var(--color-primary) 10%, var(--color-base-100)); color: var(--play-together-ink); font-size: .82rem; font-weight: 800; }
.play-together__same-page-result-list { grid-column: 1 / -1; border: 1px solid color-mix(in oklab, var(--color-secondary) 30%, var(--play-together-line)); border-radius: var(--radius-box); padding: 1.25rem 1.5rem; background: color-mix(in oklab, var(--color-secondary) 7%, var(--color-base-100)); }
.play-together__same-page-result-list ul { display: grid; gap: .7rem; margin-top: 1rem; }
.play-together__same-page-result-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-top: 1px solid color-mix(in oklab, var(--color-secondary) 16%, var(--play-together-line)); padding-top: .7rem; }
.play-together__same-page-result-list li span { color: color-mix(in oklab, var(--play-together-ink) 62%, transparent); font-size: .85rem; font-weight: 700; text-align: right; }
.play-together__common-ground-handoff { border-color: color-mix(in oklab, var(--color-accent) 35%, var(--play-together-line)); background: color-mix(in oklab, var(--color-accent) 8%, var(--color-base-100)); }
.play-together__common-ground-reveal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; max-width: 44rem; margin: 2.5rem auto 0; }
.play-together__common-ground-answer { display: flex; min-height: 5rem; flex-direction: column; justify-content: center; border: 1px solid color-mix(in oklab, var(--color-accent) 28%, var(--play-together-line)); border-radius: var(--radius-field); padding: .8rem 1rem; background: var(--color-base-100); text-align: left; }
.play-together__common-ground-answer strong { margin-top: .35rem; color: var(--color-accent-content); font-size: 1.1rem; }
.play-together__common-ground-shared { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .55rem; margin-top: 1.5rem; text-align: center; }
.play-together__common-ground-shared p { width: 100%; }
.play-together__common-ground-shared span { border-radius: 999px; padding: .45rem .75rem; background: color-mix(in oklab, var(--color-accent) 12%, var(--color-base-100)); color: var(--play-together-ink); font-size: .82rem; font-weight: 800; }
.play-together__common-ground-spark { max-width: 44rem; margin: 1.25rem auto 0; border: 1px dashed color-mix(in oklab, var(--color-accent) 42%, var(--play-together-line)); border-radius: var(--radius-field); padding: 1rem 1.15rem; background: color-mix(in oklab, var(--color-accent) 6%, var(--color-base-100)); text-align: center; }
.play-together__common-ground-spark p:last-child { margin-top: .4rem; color: color-mix(in oklab, var(--play-together-ink) 78%, transparent); font-weight: 700; }
.play-together__common-ground-result { border-color: color-mix(in oklab, var(--color-accent) 35%, var(--play-together-line)); background: color-mix(in oklab, var(--color-accent) 9%, var(--color-base-100)); }
.play-together__common-ground-result-list { grid-column: 1 / -1; border: 1px solid color-mix(in oklab, var(--color-accent) 30%, var(--play-together-line)); border-radius: var(--radius-box); padding: 1.25rem 1.5rem; background: color-mix(in oklab, var(--color-accent) 7%, var(--color-base-100)); }
.play-together__common-ground-result-list ul { display: grid; gap: .7rem; margin-top: 1rem; }
.play-together__common-ground-result-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-top: 1px solid color-mix(in oklab, var(--color-accent) 16%, var(--play-together-line)); padding-top: .7rem; }
.play-together__common-ground-result-list li span { color: color-mix(in oklab, var(--play-together-ink) 62%, transparent); font-size: .85rem; font-weight: 700; text-align: right; }
.play-together__results { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 1rem; max-width: 60rem; margin-right: auto; margin-left: auto; }
.play-together__winner, .play-together__story-result { border: 1px solid color-mix(in oklab, var(--color-primary) 32%, var(--play-together-line)); border-radius: var(--radius-box); padding: 1.5rem; background: color-mix(in oklab, var(--color-primary) 8%, var(--color-base-100)); }
.play-together__result-scores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.play-together__story-result { grid-column: 1 / -1; border-color: color-mix(in oklab, var(--color-accent) 35%, var(--play-together-line)); background: color-mix(in oklab, var(--color-accent) 9%, var(--color-base-100)); }
.word-relay__result-list { grid-column: 1 / -1; border: 1px solid color-mix(in oklab, var(--color-primary) 30%, var(--play-together-line)); border-radius: var(--radius-box); padding: 1.25rem 1.5rem; background: color-mix(in oklab, var(--color-primary) 7%, var(--color-base-100)); }
.word-relay__team-links-grid { display: grid; gap: 1rem; margin-top: 1rem; }
.word-relay__team-links { border-top: 1px solid color-mix(in oklab, var(--color-primary) 16%, var(--play-together-line)); padding-top: .85rem; }
.word-relay__team-links > div > span { color: var(--color-primary); font-size: .85rem; font-weight: 800; }
.word-relay__team-links ul { display: grid; gap: .55rem; margin-top: .7rem; }
.word-relay__team-links li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; color: var(--play-together-ink); }
.word-relay__team-links li span { color: color-mix(in oklab, var(--play-together-ink) 58%, transparent); font-size: .78rem; font-weight: 700; text-align: right; }
@media (max-width: 820px) { .play-together__game-picker { grid-template-columns: 1fr; } .play-together__game-option { min-height: auto; } .play-together__team-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .play-together__scoreboard { grid-template-columns: repeat(2, minmax(0, 1fr)); } .play-together__results { grid-template-columns: 1fr; } .play-together__result-scores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .play-together__hero-card { min-height: 16rem; padding: 1.5rem; } .play-together__game-topbar { align-items: flex-start; flex-direction: column; } .play-together__stage { min-height: 31rem; padding: 1.25rem; } .play-together__match-board { grid-template-columns: repeat(4, minmax(3.5rem, 1fr)); gap: .5rem; margin-top: 2.25rem; } .play-together__match-card-face { border-radius: .7rem; } .play-together__match-card-back > span { font-size: 2rem; } .play-together__match-card-back small { font-size: .58rem; } .play-together__choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2.5rem; } .play-together__number-sequence { margin-top: 2.75rem; font-size: clamp(2rem, 12vw, 3.2rem); } .word-relay__chain { gap: .45rem; margin-top: 2.5rem; } .word-relay__current-word, .word-relay__next-word { min-width: 0; min-height: 4rem; padding: .65rem .75rem; font-size: clamp(1.35rem, 8vw, 2rem); } .word-relay__arrow { font-size: 1.4rem; } .play-together__team-fields { grid-template-columns: 1fr; } .play-together__same-page-reveal, .play-together__common-ground-reveal { grid-template-columns: 1fr; } .play-together__same-page-result-list li, .play-together__common-ground-result-list li, .word-relay__team-links li { align-items: flex-start; flex-direction: column; gap: .25rem; } .play-together__same-page-result-list li span, .play-together__common-ground-result-list li span, .word-relay__team-links li span { text-align: left; } .clue-duel__result-list li { align-items: flex-start; flex-direction: column; gap: .25rem; } .clue-duel__result-list li span { text-align: left; } }
@media (prefers-reduced-motion: reduce) { .play-together__game-option, .play-together__match-card-inner, .play-together__answer-button { transition: none; } }
.clue-race__score-note { display: flex; max-width: 36rem; align-items: center; justify-content: space-between; gap: 1rem; margin: 2rem auto 0; border: 1px solid color-mix(in oklab, var(--color-primary) 25%, var(--play-together-line)); border-radius: var(--radius-field); padding: .85rem 1.1rem; background: color-mix(in oklab, var(--color-primary) 7%, var(--color-base-100)); color: color-mix(in oklab, var(--play-together-ink) 72%, transparent); }
.clue-race__score-note strong { color: var(--color-primary); font-size: .95rem; }
.clue-race__clues { display: grid; max-width: 44rem; gap: .7rem; margin: 1.5rem auto 0; padding: 0; list-style: none; }
.clue-race__clue { display: flex; align-items: baseline; gap: .85rem; border-left: .25rem solid color-mix(in oklab, var(--color-primary) 55%, var(--play-together-line)); border-radius: 0 var(--radius-field) var(--radius-field) 0; padding: .8rem 1rem; background: color-mix(in oklab, var(--color-primary) 5%, var(--color-base-100)); }
.clue-race__clue span { min-width: 1.35rem; color: var(--color-primary); font-size: .8rem; font-weight: 900; text-align: center; }
.clue-race__clue strong { color: var(--play-together-ink); line-height: 1.4; }
.clue-race__choices { margin-top: 1.5rem; }
.clue-race__reveal { display: block; margin: 1rem auto 0; }
.clue-race__last-clue { margin-top: 1.1rem; color: color-mix(in oklab, var(--play-together-ink) 58%, transparent); text-align: center; font-size: .9rem; font-weight: 700; }
.clue-race__handoff { max-width: 36rem; margin: 2rem auto 0; border: 1px solid color-mix(in oklab, var(--color-primary) 30%, var(--play-together-line)); border-radius: var(--radius-box); padding: 1.25rem; background: color-mix(in oklab, var(--color-primary) 7%, var(--color-base-100)); text-align: center; }
.clue-race__explanation { margin: 1rem auto 0; color: color-mix(in oklab, var(--play-together-ink) 74%, transparent); font-size: .92rem; line-height: 1.45; }
.clue-race__result-list { grid-column: 1 / -1; border: 1px solid color-mix(in oklab, var(--color-primary) 30%, var(--play-together-line)); border-radius: var(--radius-box); padding: 1.25rem 1.5rem; background: color-mix(in oklab, var(--color-primary) 7%, var(--color-base-100)); }
.clue-race__result-list ul { display: grid; gap: .55rem; margin-top: 1rem; }
.clue-race__result-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; color: var(--play-together-ink); }
.clue-race__result-list li span { color: color-mix(in oklab, var(--play-together-ink) 58%, transparent); font-size: .78rem; font-weight: 700; text-align: right; }
@media (max-width: 560px) { .clue-race__score-note { align-items: flex-start; flex-direction: column; gap: .25rem; } .clue-race__result-list li { align-items: flex-start; flex-direction: column; gap: .25rem; } .clue-race__result-list li span { text-align: left; } }
.relay-studio__spark-note { display: flex; max-width: 42rem; align-items: center; justify-content: space-between; gap: 1rem; margin: 2rem auto 0; border: 1px solid color-mix(in oklab, var(--color-accent) 30%, var(--play-together-line)); border-radius: var(--radius-field); padding: .85rem 1.1rem; background: color-mix(in oklab, var(--color-accent) 8%, var(--color-base-100)); color: color-mix(in oklab, var(--play-together-ink) 66%, transparent); }
.relay-studio__spark-note strong { color: var(--color-accent-content); font-size: 1rem; }
.relay-studio__choices { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1.5rem; }
.relay-studio__choice { display: flex; min-height: 9rem; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .35rem; padding: 1rem; text-align: left; }
.relay-studio__choice > span { display: inline-flex; width: 2.3rem; height: 2.3rem; align-items: center; justify-content: center; border-radius: .7rem; background: color-mix(in oklab, var(--color-accent) 16%, transparent); color: var(--color-accent-content); font-size: 1.15rem; }
.relay-studio__choice strong { margin-top: .25rem; font-size: 1.05rem; line-height: 1.2; }
.relay-studio__choice small { color: color-mix(in oklab, var(--play-together-ink) 62%, transparent); font-size: .82rem; line-height: 1.35; }
.relay-studio__handoff { max-width: 38rem; margin: 2rem auto 0; border: 1px solid color-mix(in oklab, var(--color-accent) 35%, var(--play-together-line)); border-radius: var(--radius-box); padding: 1.5rem; background: color-mix(in oklab, var(--color-accent) 8%, var(--color-base-100)); text-align: center; }
.relay-studio__handoff-detail { max-width: 30rem; margin: 1rem auto 0; color: color-mix(in oklab, var(--play-together-ink) 70%, transparent); line-height: 1.45; }
.relay-studio__cosign-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; max-width: 52rem; margin: 2rem auto 0; }
.relay-studio__cosign { display: flex; min-height: 9rem; flex-direction: column; align-items: flex-start; gap: .4rem; border: 1px solid color-mix(in oklab, var(--color-accent) 25%, var(--play-together-line)); border-radius: var(--radius-field); padding: 1rem; background: var(--color-base-100); color: var(--play-together-ink); text-align: left; transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease; }
.relay-studio__cosign:hover { border-color: var(--color-accent); background: color-mix(in oklab, var(--color-accent) 8%, var(--color-base-100)); transform: translateY(-.1rem); }
.relay-studio__cosign:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.relay-studio__cosign strong { font-size: 1.05rem; line-height: 1.2; }
.relay-studio__cosign small { color: color-mix(in oklab, var(--play-together-ink) 62%, transparent); font-size: .82rem; line-height: 1.35; }
.relay-studio__result-winner { border-color: color-mix(in oklab, var(--color-accent) 35%, var(--play-together-line)); background: color-mix(in oklab, var(--color-accent) 9%, var(--color-base-100)); }
.relay-studio__artifact, .relay-studio__result-list { grid-column: 1 / -1; border: 1px solid color-mix(in oklab, var(--color-accent) 30%, var(--play-together-line)); border-radius: var(--radius-box); padding: 1.25rem 1.5rem; background: color-mix(in oklab, var(--color-accent) 7%, var(--color-base-100)); }
.relay-studio__artifact-line { margin-top: .9rem; color: var(--play-together-ink); font-size: clamp(1.2rem, 3vw, 1.7rem); font-weight: 850; line-height: 1.35; }
.relay-studio__cosign-result { margin-top: .9rem; border-top: 1px solid color-mix(in oklab, var(--color-accent) 18%, var(--play-together-line)); padding-top: .8rem; color: color-mix(in oklab, var(--play-together-ink) 70%, transparent); }
.relay-studio__result-list ul { display: grid; gap: .6rem; margin-top: 1rem; }
.relay-studio__result-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; color: var(--play-together-ink); }
.relay-studio__result-list li span { color: color-mix(in oklab, var(--play-together-ink) 58%, transparent); font-size: .82rem; font-weight: 700; text-align: right; }
@media (max-width: 820px) { .relay-studio__choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) { .relay-studio__cosign-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .relay-studio__spark-note { align-items: flex-start; flex-direction: column; gap: .25rem; } .relay-studio__choices { grid-template-columns: 1fr; } .relay-studio__result-list li { align-items: flex-start; flex-direction: column; gap: .25rem; } .relay-studio__result-list li span { text-align: left; } }
.paraphrase-telephone__source-card, .paraphrase-telephone__original-card, .paraphrase-telephone__final-card { max-width: 46rem; margin: 2rem auto 0; border: 1px solid color-mix(in oklab, var(--color-secondary) 32%, var(--play-together-line)); border-radius: var(--radius-box); padding: 1.35rem 1.5rem; background: color-mix(in oklab, var(--color-secondary) 8%, var(--color-base-100)); box-shadow: 0 .5rem 1.25rem color-mix(in oklab, var(--color-neutral) 8%, transparent); text-align: center; }
.paraphrase-telephone__comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; max-width: 46rem; margin: 2rem auto 0; }
.paraphrase-telephone__comparison .paraphrase-telephone__original-card, .paraphrase-telephone__comparison .paraphrase-telephone__final-card { width: 100%; margin: 0; }
.paraphrase-telephone__source, .paraphrase-telephone__original-card > p:last-child { margin-top: .65rem; color: var(--play-together-ink); font-size: clamp(1.2rem, 3vw, 1.65rem); font-weight: 800; line-height: 1.4; }
.paraphrase-telephone__instruction { max-width: 42rem; margin: 1rem auto 0; color: color-mix(in oklab, var(--play-together-ink) 68%, transparent); font-size: .92rem; line-height: 1.45; text-align: center; }
.paraphrase-telephone__form { max-width: 46rem; margin: 1.5rem auto 0; }
.paraphrase-telephone__form textarea { width: 100%; resize: vertical; }
.paraphrase-telephone__handoff { border-color: color-mix(in oklab, var(--color-secondary) 35%, var(--play-together-line)); background: color-mix(in oklab, var(--color-secondary) 8%, var(--color-base-100)); }
.paraphrase-telephone__reveal { max-width: 54rem; margin: 0 auto; text-align: center; }
.paraphrase-telephone__original-card { margin-top: 2rem; border-style: dashed; background: color-mix(in oklab, var(--color-primary) 7%, var(--color-base-100)); }
.paraphrase-telephone__final-card { border-color: color-mix(in oklab, var(--color-secondary) 42%, var(--play-together-line)); background: color-mix(in oklab, var(--color-secondary) 10%, var(--color-base-100)); }
.paraphrase-telephone__chain { display: grid; max-width: 46rem; gap: .75rem; margin: 1.5rem auto 0; padding: 0; list-style: none; text-align: left; }
.paraphrase-telephone__chain-line { border-left: .25rem solid color-mix(in oklab, var(--color-secondary) 55%, var(--play-together-line)); border-radius: 0 var(--radius-field) var(--radius-field) 0; padding: .85rem 1rem; background: color-mix(in oklab, var(--color-secondary) 5%, var(--color-base-100)); }
.paraphrase-telephone__chain-line > span { color: var(--color-secondary); font-size: .76rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.paraphrase-telephone__chain-line p { margin-top: .35rem; color: var(--play-together-ink); line-height: 1.45; }
.paraphrase-telephone__result-winner { border-color: color-mix(in oklab, var(--color-secondary) 35%, var(--play-together-line)); background: color-mix(in oklab, var(--color-secondary) 9%, var(--color-base-100)); }
.paraphrase-telephone__result-list { grid-column: 1 / -1; border: 1px solid color-mix(in oklab, var(--color-secondary) 30%, var(--play-together-line)); border-radius: var(--radius-box); padding: 1.25rem 1.5rem; background: color-mix(in oklab, var(--color-secondary) 7%, var(--color-base-100)); }
.paraphrase-telephone__result-chain { margin-top: 1.25rem; border-top: 1px solid color-mix(in oklab, var(--color-secondary) 18%, var(--play-together-line)); padding-top: 1rem; }
.paraphrase-telephone__result-original { margin-top: .65rem; color: color-mix(in oklab, var(--play-together-ink) 75%, transparent); line-height: 1.45; }
.paraphrase-telephone__result-original strong { color: var(--color-primary); }
.paraphrase-telephone__result-chain ol { display: grid; gap: .6rem; margin-top: .8rem; padding-left: 1.25rem; }
.paraphrase-telephone__result-chain li { padding-left: .25rem; color: var(--play-together-ink); line-height: 1.45; }
.paraphrase-telephone__result-chain li strong, .paraphrase-telephone__result-chain li span { display: block; }
.paraphrase-telephone__result-chain li strong { color: var(--color-secondary); font-size: .82rem; }
.paraphrase-telephone__result-chain li span { margin-top: .2rem; }
@media (max-width: 560px) { .paraphrase-telephone__comparison { grid-template-columns: 1fr; } .paraphrase-telephone__source-card, .paraphrase-telephone__original-card, .paraphrase-telephone__final-card { padding: 1.1rem; } .paraphrase-telephone__form .flex { align-items: flex-start; flex-direction: column; } .paraphrase-telephone__form .btn { width: 100%; } }
.grammar-court__sentence-card, .grammar-court__verdict-card { max-width: 48rem; margin: 2rem auto 0; border: 1px solid color-mix(in oklab, var(--color-primary) 28%, var(--play-together-line)); border-radius: var(--radius-box); padding: 1.35rem 1.5rem; background: color-mix(in oklab, var(--color-primary) 7%, var(--color-base-100)); text-align: center; box-shadow: 0 .5rem 1.25rem color-mix(in oklab, var(--color-neutral) 8%, transparent); }
.grammar-court__sentence { margin-top: .7rem; color: var(--play-together-ink); font-size: clamp(1.35rem, 3.5vw, 2rem); font-weight: 850; line-height: 1.4; }
.grammar-court__vote-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; max-width: 48rem; margin: 2rem auto 0; }
.grammar-court__vote { display: flex; min-height: 7rem; flex-direction: column; align-items: flex-start; justify-content: center; gap: .35rem; border: 1px solid var(--play-together-line); border-radius: var(--radius-box); padding: 1rem 1.25rem; background: var(--color-base-100); color: var(--play-together-ink); text-align: left; transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease; }
.grammar-court__vote:hover { transform: translateY(-.1rem); }
.grammar-court__vote:focus-visible, .grammar-court__word:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.grammar-court__vote--guilty { border-color: color-mix(in oklab, var(--color-error) 28%, var(--play-together-line)); background: color-mix(in oklab, var(--color-error) 5%, var(--color-base-100)); }
.grammar-court__vote--guilty:hover { border-color: var(--color-error); background: color-mix(in oklab, var(--color-error) 10%, var(--color-base-100)); }
.grammar-court__vote--innocent { border-color: color-mix(in oklab, var(--color-success) 28%, var(--play-together-line)); background: color-mix(in oklab, var(--color-success) 5%, var(--color-base-100)); }
.grammar-court__vote--innocent:hover { border-color: var(--color-success); background: color-mix(in oklab, var(--color-success) 10%, var(--color-base-100)); }
.grammar-court__vote strong { font-size: 1.35rem; font-weight: 900; }
.grammar-court__vote--guilty strong { color: var(--color-error); }
.grammar-court__vote--innocent strong { color: var(--color-success); }
.grammar-court__vote span { color: color-mix(in oklab, var(--play-together-ink) 64%, transparent); font-size: .88rem; }
.grammar-court__handoff { border-color: color-mix(in oklab, var(--color-primary) 35%, var(--play-together-line)); background: color-mix(in oklab, var(--color-primary) 8%, var(--color-base-100)); }
.grammar-court__word-board { display: flex; max-width: 52rem; align-items: center; justify-content: center; flex-wrap: wrap; gap: .65rem; margin: 3rem auto 0; }
.grammar-court__word { border: 1px solid color-mix(in oklab, var(--color-primary) 28%, var(--play-together-line)); border-radius: .7rem; padding: .75rem .95rem; background: var(--color-base-100); color: var(--play-together-ink); font-size: clamp(1rem, 2.5vw, 1.25rem); font-weight: 800; transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease; }
.grammar-court__word:hover { border-color: var(--color-primary); background: color-mix(in oklab, var(--color-primary) 9%, var(--color-base-100)); transform: translateY(-.1rem); }
.grammar-court__selected-word { margin-top: 1rem; color: var(--color-primary); font-size: .9rem; }
.grammar-court__explanation { margin-top: 1rem; color: color-mix(in oklab, var(--play-together-ink) 72%, transparent); line-height: 1.45; }
.grammar-court__vote-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; max-width: 48rem; margin: 1.5rem auto 0; }
.grammar-court__vote-result { display: flex; align-items: center; justify-content: space-between; gap: .8rem; border: 1px solid var(--play-together-line); border-radius: var(--radius-field); padding: .8rem 1rem; background: var(--color-base-100); }
.grammar-court__vote-result strong { color: var(--color-primary); font-size: .85rem; text-transform: capitalize; }
.grammar-court__result-winner { border-color: color-mix(in oklab, var(--color-primary) 34%, var(--play-together-line)); background: color-mix(in oklab, var(--color-primary) 8%, var(--color-base-100)); }
.grammar-court__result-stats { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.grammar-court__result-stats > div { display: flex; flex-direction: column; border: 1px solid color-mix(in oklab, var(--color-primary) 24%, var(--play-together-line)); border-radius: var(--radius-field); padding: .9rem 1rem; background: color-mix(in oklab, var(--color-primary) 5%, var(--color-base-100)); }
.grammar-court__result-stats strong { font-size: 1.7rem; line-height: 1; }
.grammar-court__result-stats span { margin-top: .35rem; color: color-mix(in oklab, var(--play-together-ink) 58%, transparent); font-size: .75rem; font-weight: 750; }
.grammar-court__result-list { grid-column: 1 / -1; border: 1px solid color-mix(in oklab, var(--color-primary) 28%, var(--play-together-line)); border-radius: var(--radius-box); padding: 1.25rem 1.5rem; background: color-mix(in oklab, var(--color-primary) 6%, var(--color-base-100)); }
.grammar-court__result-list ul { display: grid; gap: .65rem; margin-top: 1rem; }
.grammar-court__result-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-top: 1px solid color-mix(in oklab, var(--color-primary) 16%, var(--play-together-line)); padding-top: .7rem; }
.grammar-court__result-list li span { color: color-mix(in oklab, var(--play-together-ink) 62%, transparent); font-size: .82rem; line-height: 1.4; text-align: right; }
@media (max-width: 560px) { .grammar-court__vote-grid, .grammar-court__vote-results, .grammar-court__result-stats { grid-template-columns: 1fr; } .grammar-court__result-list li { align-items: flex-start; flex-direction: column; gap: .25rem; } .grammar-court__result-list li span { text-align: left; } }

.idiom-theater__idiom, .idiom-theater__reveal-card { max-width: 48rem; margin: 2rem auto 0; border: 1px solid color-mix(in oklab, var(--color-accent) 30%, var(--play-together-line)); border-radius: var(--radius-box); padding: 1.5rem; background: color-mix(in oklab, var(--color-accent) 7%, var(--color-base-100)); text-align: center; box-shadow: 0 .5rem 1.25rem color-mix(in oklab, var(--color-neutral) 8%, transparent); }
.idiom-theater__idiom-phrase { margin-top: .7rem; color: var(--play-together-ink); font-size: clamp(1.45rem, 3.8vw, 2.2rem); font-weight: 900; line-height: 1.25; }
.idiom-theater__choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; max-width: 52rem; margin: 2rem auto 0; }
.idiom-theater__choice { min-height: 5.4rem; border: 1px solid var(--play-together-line); border-radius: var(--radius-box); padding: 1rem 1.1rem; background: var(--color-base-100); color: var(--play-together-ink); font-weight: 750; line-height: 1.35; text-align: left; transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease; }
.idiom-theater__choice:hover { border-color: var(--color-accent); background: color-mix(in oklab, var(--color-accent) 9%, var(--color-base-100)); transform: translateY(-.1rem); }
.idiom-theater__choice:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.idiom-theater__meaning, .idiom-theater__origin { margin-top: 1rem; color: color-mix(in oklab, var(--play-together-ink) 72%, transparent); line-height: 1.5; text-align: left; }
.idiom-theater__origin { border-top: 1px solid color-mix(in oklab, var(--color-accent) 20%, var(--play-together-line)); padding-top: 1rem; }
.idiom-theater__answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; max-width: 52rem; margin: 1.5rem auto 0; }
.idiom-theater__answer { display: flex; min-height: 5rem; flex-direction: column; justify-content: center; gap: .25rem; border: 1px solid var(--play-together-line); border-radius: var(--radius-field); padding: .85rem 1rem; background: var(--color-base-100); }
.idiom-theater__answer strong { color: var(--play-together-ink); line-height: 1.35; }
.idiom-theater__answer span:last-child { color: color-mix(in oklab, var(--play-together-ink) 58%, transparent); font-size: .78rem; font-weight: 700; }
.idiom-theater__result-winner { border-color: color-mix(in oklab, var(--color-accent) 28%, var(--play-together-line)); background: color-mix(in oklab, var(--color-accent) 6%, var(--color-base-100)); }
.idiom-theater__result-list { grid-column: 1 / -1; border: 1px solid color-mix(in oklab, var(--color-accent) 25%, var(--play-together-line)); border-radius: var(--radius-box); padding: 1.25rem 1.5rem; background: color-mix(in oklab, var(--color-accent) 4%, var(--color-base-100)); }
.idiom-theater__result-list ul { display: grid; gap: .65rem; margin-top: 1rem; }
.idiom-theater__result-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-top: 1px solid color-mix(in oklab, var(--color-accent) 16%, var(--play-together-line)); padding-top: .7rem; }
.idiom-theater__result-list li span { color: color-mix(in oklab, var(--play-together-ink) 62%, transparent); font-size: .82rem; line-height: 1.4; text-align: right; }
@media (max-width: 560px) { .idiom-theater__choice-grid, .idiom-theater__answers { grid-template-columns: 1fr; } .idiom-theater__result-list li { align-items: flex-start; flex-direction: column; gap: .25rem; } .idiom-theater__result-list li span { text-align: left; } }

.silent-auction__question-card, .silent-auction__settlement-card { max-width: 48rem; margin: 2rem auto 0; border: 1px solid color-mix(in oklab, var(--color-secondary) 28%, var(--play-together-line)); border-radius: var(--radius-box); padding: 1.4rem 1.5rem; background: color-mix(in oklab, var(--color-secondary) 6%, var(--color-base-100)); text-align: center; box-shadow: 0 .5rem 1.25rem color-mix(in oklab, var(--color-neutral) 8%, transparent); }
.silent-auction__question { margin-top: .7rem; color: var(--play-together-ink); font-size: clamp(1.25rem, 3.2vw, 1.85rem); font-weight: 850; line-height: 1.35; }
.silent-auction__bid-panel { max-width: 52rem; margin: 1.5rem auto 0; border: 1px solid color-mix(in oklab, var(--color-secondary) 20%, var(--play-together-line)); border-radius: var(--radius-box); padding: 1.15rem; background: color-mix(in oklab, var(--color-secondary) 3%, var(--color-base-100)); text-align: center; }
.silent-auction__bid-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; margin-top: 1rem; }
.silent-auction__bid { display: flex; min-height: 5.5rem; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; border: 1px solid var(--play-together-line); border-radius: var(--radius-field); background: var(--color-base-100); color: var(--play-together-ink); transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease; }
.silent-auction__bid:hover { border-color: var(--color-secondary); background: color-mix(in oklab, var(--color-secondary) 10%, var(--color-base-100)); transform: translateY(-.1rem); }
.silent-auction__bid:focus-visible, .silent-auction__choice:focus-visible { outline: 3px solid var(--color-secondary); outline-offset: 3px; }
.silent-auction__bid strong { font-size: 1.65rem; line-height: 1; }
.silent-auction__bid span { color: color-mix(in oklab, var(--play-together-ink) 58%, transparent); font-size: .72rem; font-weight: 700; }
.silent-auction__choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; max-width: 52rem; margin: 2rem auto 0; }
.silent-auction__choice { min-height: 5rem; border: 1px solid var(--play-together-line); border-radius: var(--radius-box); padding: 1rem 1.1rem; background: var(--color-base-100); color: var(--play-together-ink); font-size: 1rem; font-weight: 800; line-height: 1.35; text-align: left; transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease; }
.silent-auction__choice:hover { border-color: var(--color-secondary); background: color-mix(in oklab, var(--color-secondary) 9%, var(--color-base-100)); transform: translateY(-.1rem); }
.silent-auction__correct-answer { margin-top: .65rem; color: var(--play-together-ink); font-size: 1.4rem; font-weight: 900; }
.silent-auction__explanation { margin-top: .8rem; color: color-mix(in oklab, var(--play-together-ink) 70%, transparent); line-height: 1.45; }
.silent-auction__settlement-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; max-width: 52rem; margin: 1.5rem auto 0; }
.silent-auction__settlement { display: flex; min-height: 5.3rem; flex-direction: column; justify-content: center; gap: .22rem; border: 1px solid var(--play-together-line); border-radius: var(--radius-field); padding: .85rem 1rem; background: var(--color-base-100); }
.silent-auction__settlement strong { color: var(--play-together-ink); }
.silent-auction__settlement span:last-child { color: color-mix(in oklab, var(--play-together-ink) 62%, transparent); font-size: .78rem; font-weight: 700; line-height: 1.35; }
.silent-auction__result-winner { border-color: color-mix(in oklab, var(--color-secondary) 28%, var(--play-together-line)); background: color-mix(in oklab, var(--color-secondary) 6%, var(--color-base-100)); }
.silent-auction__result-list { grid-column: 1 / -1; border: 1px solid color-mix(in oklab, var(--color-secondary) 24%, var(--play-together-line)); border-radius: var(--radius-box); padding: 1.25rem 1.5rem; background: color-mix(in oklab, var(--color-secondary) 4%, var(--color-base-100)); }
.silent-auction__result-list ul { display: grid; gap: .65rem; margin-top: 1rem; }
.silent-auction__result-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-top: 1px solid color-mix(in oklab, var(--color-secondary) 16%, var(--play-together-line)); padding-top: .7rem; }
.silent-auction__result-list li span { color: color-mix(in oklab, var(--play-together-ink) 62%, transparent); font-size: .82rem; line-height: 1.4; text-align: right; }
@media (max-width: 560px) { .silent-auction__bid-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .silent-auction__choice-grid, .silent-auction__settlement-grid { grid-template-columns: 1fr; } .silent-auction__result-list li { align-items: flex-start; flex-direction: column; gap: .25rem; } .silent-auction__result-list li span { text-align: left; } }

.echo-duet__voice-card { display: flex; max-width: 54rem; align-items: center; gap: .8rem; margin: 2rem auto 0; border: 1px solid color-mix(in oklab, var(--color-primary) 25%, var(--play-together-line)); border-radius: var(--radius-box); padding: 1rem 1.15rem; background: color-mix(in oklab, var(--color-primary) 6%, var(--color-base-100)); }
.echo-duet__voice-card strong, .echo-duet__voice-card span { display: block; }
.echo-duet__voice-card strong { color: var(--play-together-ink); }
.echo-duet__voice-card span { margin-top: .25rem; color: color-mix(in oklab, var(--play-together-ink) 58%, transparent); font-size: .78rem; line-height: 1.35; }
.echo-duet__voice-mark { display: flex !important; width: 2.8rem; height: 2.8rem; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 999px; background: color-mix(in oklab, var(--color-primary) 16%, var(--color-base-100)); color: var(--color-primary) !important; font-size: 1.35rem !important; }
.echo-duet__source { max-width: 54rem; margin: 1rem auto 0; border: 1px solid color-mix(in oklab, var(--color-secondary) 24%, var(--play-together-line)); border-radius: var(--radius-field); padding: 1rem 1.15rem; background: color-mix(in oklab, var(--color-secondary) 6%, var(--color-base-100)); }
.echo-duet__source p:last-child { margin-top: .55rem; color: var(--play-together-ink); font-size: 1.12rem; font-weight: 800; line-height: 1.45; }
.echo-duet__handoff-note { max-width: 54rem; margin: 1rem auto 0; border-left: 3px solid color-mix(in oklab, var(--color-primary) 35%, var(--play-together-line)); padding-left: .9rem; color: color-mix(in oklab, var(--play-together-ink) 63%, transparent); }
.echo-duet__form { max-width: 54rem; margin: 2rem auto 0; }
.echo-duet__input-row { display: flex; gap: .75rem; margin-top: .8rem; }
.echo-duet__input { min-width: 0; flex: 1; border: 1px solid var(--play-together-line); border-radius: var(--radius-field); padding: .9rem 1rem; background: var(--color-base-100); color: var(--play-together-ink); font-size: 1rem; }
.echo-duet__input:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.echo-duet__comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; max-width: 56rem; margin: 2rem auto 0; }
.echo-duet__comparison-card { min-height: 8rem; border: 1px solid var(--play-together-line); border-radius: var(--radius-box); padding: 1.2rem 1.35rem; background: var(--color-base-100); }
.echo-duet__comparison-card--echo { border-color: color-mix(in oklab, var(--color-primary) 28%, var(--play-together-line)); background: color-mix(in oklab, var(--color-primary) 5%, var(--color-base-100)); }
.echo-duet__comparison-card p:last-child { margin-top: .8rem; color: var(--play-together-ink); font-size: 1.1rem; font-weight: 750; line-height: 1.45; }
.echo-duet__pair-note { display: flex; max-width: 56rem; justify-content: space-between; gap: 1rem; margin: .8rem auto 0; color: color-mix(in oklab, var(--play-together-ink) 60%, transparent); font-size: .8rem; font-weight: 700; }
.echo-duet__result-winner { border-color: color-mix(in oklab, var(--color-primary) 28%, var(--play-together-line)); background: color-mix(in oklab, var(--color-primary) 6%, var(--color-base-100)); }
.echo-duet__result-list { grid-column: 1 / -1; border: 1px solid color-mix(in oklab, var(--color-primary) 24%, var(--play-together-line)); border-radius: var(--radius-box); padding: 1.25rem 1.5rem; background: color-mix(in oklab, var(--color-primary) 4%, var(--color-base-100)); }
.echo-duet__result-list ul { display: grid; gap: .65rem; margin-top: 1rem; }
.echo-duet__result-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-top: 1px solid color-mix(in oklab, var(--color-primary) 16%, var(--play-together-line)); padding-top: .7rem; }
.echo-duet__result-list li span { color: color-mix(in oklab, var(--play-together-ink) 62%, transparent); font-size: .82rem; line-height: 1.4; text-align: right; }
@media (max-width: 680px) { .echo-duet__voice-card, .echo-duet__input-row { align-items: stretch; flex-direction: column; } .echo-duet__voice-card .echo-duet__voice-mark { align-self: flex-start; } .echo-duet__comparison { grid-template-columns: 1fr; } .echo-duet__pair-note { align-items: flex-start; flex-direction: column; gap: .3rem; } .echo-duet__result-list li { align-items: flex-start; flex-direction: column; gap: .25rem; } .echo-duet__result-list li span { text-align: left; } }

.true-or-tale__prompt { max-width: 54rem; margin: 0 auto; text-align: center; }
.true-or-tale__statements { display: grid; gap: .75rem; max-width: 54rem; margin: 1.5rem auto 0; padding: 0; list-style: none; }
.true-or-tale__statement { display: grid; grid-template-columns: auto 1fr; gap: .9rem; border: 1px solid color-mix(in oklab, var(--color-accent) 24%, var(--play-together-line)); border-radius: var(--radius-box); padding: 1rem 1.15rem; background: color-mix(in oklab, var(--color-accent) 5%, var(--color-base-100)); }
.true-or-tale__statement-number { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; background: color-mix(in oklab, var(--color-accent) 20%, var(--color-base-100)); color: var(--color-accent); font-weight: 900; }
.true-or-tale__statement p { color: var(--play-together-ink); font-size: 1.05rem; font-weight: 750; line-height: 1.45; }
.true-or-tale__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; max-width: 54rem; margin: 1.5rem auto 0; }
.true-or-tale__choice { display: flex; min-height: 10rem; flex-direction: column; align-items: flex-start; gap: .8rem; border: 1px solid color-mix(in oklab, var(--color-accent) 25%, var(--play-together-line)); border-radius: var(--radius-box); padding: 1.1rem; background: var(--color-base-100); color: var(--play-together-ink); text-align: left; font-weight: 750; line-height: 1.4; transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease; }
.true-or-tale__choice:hover { border-color: var(--color-accent); background: color-mix(in oklab, var(--color-accent) 10%, var(--color-base-100)); transform: translateY(-.1rem); }
.true-or-tale__choice:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.true-or-tale__choice > span { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; background: color-mix(in oklab, var(--color-accent) 18%, var(--color-base-100)); color: var(--color-accent); font-weight: 900; }
.true-or-tale__action { display: flex; justify-content: center; }
.true-or-tale__verdict { display: inline-flex; margin-top: .55rem; border-radius: 999px; padding: .25rem .55rem; font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.true-or-tale__verdict.is-true { background: color-mix(in oklab, var(--color-success) 15%, var(--color-base-100)); color: var(--color-success); }
.true-or-tale__verdict.is-tale { background: color-mix(in oklab, var(--color-error) 13%, var(--color-base-100)); color: var(--color-error); }
.true-or-tale__explanation { margin-top: .65rem; color: color-mix(in oklab, var(--play-together-ink) 70%, transparent); font-size: .9rem; font-weight: 500 !important; }
.true-or-tale__source { display: block; margin-top: .35rem; font-size: .78rem; }
.true-or-tale__source a { color: var(--color-primary); text-decoration: underline; text-underline-offset: .15em; }
.true-or-tale__result-list { grid-column: 1 / -1; margin-top: 1.5rem; border: 1px solid color-mix(in oklab, var(--color-accent) 25%, var(--play-together-line)); border-radius: var(--radius-box); padding: 1.25rem 1.5rem; background: color-mix(in oklab, var(--color-accent) 5%, var(--color-base-100)); }
.true-or-tale__result-list ol { display: grid; gap: .7rem; margin-top: 1rem; padding-left: 1.3rem; }
.true-or-tale__result-list li { padding-left: .25rem; color: var(--play-together-ink); }
.true-or-tale__result-list li strong, .true-or-tale__result-list li span { display: block; }
.true-or-tale__result-list li span { margin-top: .2rem; color: color-mix(in oklab, var(--play-together-ink) 62%, transparent); font-size: .82rem; }
@media (max-width: 680px) { .true-or-tale__choices { grid-template-columns: 1fr; } .true-or-tale__choice { min-height: auto; } }

.tall-tales__word-card, .tall-tales__reveal, .mix-up-monster__reveal { max-width: 54rem; margin: 1.5rem auto 0; border: 1px solid color-mix(in oklab, var(--color-accent) 28%, var(--play-together-line)); border-radius: var(--radius-box); padding: 1.35rem; background: color-mix(in oklab, var(--color-accent) 6%, var(--color-base-100)); }
.tall-tales__word-card { text-align: center; }
.tall-tales__word-card strong { display: block; margin-top: .65rem; color: var(--play-together-ink); font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 950; }
.tall-tales__form, .mix-up-monster__name-form { max-width: 54rem; margin: 1.5rem auto 0; border: 1px solid var(--play-together-line); border-radius: var(--radius-box); padding: 1.1rem 1.25rem; background: var(--color-base-100); }
.tall-tales__form textarea { display: block; width: 100%; min-height: 8rem; margin-top: .7rem; resize: vertical; border: 1px solid var(--play-together-line); border-radius: var(--radius-field); padding: .9rem 1rem; background: var(--color-base-100); color: var(--play-together-ink); font: inherit; line-height: 1.5; }
.tall-tales__options { display: grid; gap: .8rem; max-width: 54rem; margin: 1.5rem auto 0; }
.tall-tales__option { display: grid; grid-template-columns: 2rem 1fr; gap: .8rem; align-items: start; border: 1px solid var(--play-together-line); border-radius: var(--radius-box); padding: 1rem; background: var(--color-base-100); color: var(--play-together-ink); text-align: left; }
.tall-tales__option:hover { border-color: var(--color-accent); background: color-mix(in oklab, var(--color-accent) 8%, var(--color-base-100)); }
.tall-tales__option > span { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; background: color-mix(in oklab, var(--color-accent) 18%, var(--color-base-100)); color: var(--color-accent); font-weight: 900; }
.tall-tales__reveal-list, .mix-up-monster__result-list ul { display: grid; gap: .7rem; max-width: 54rem; margin: 1.5rem auto 0; padding: 0; list-style: none; }
.tall-tales__reveal-option { display: flex; flex-direction: column; gap: .35rem; border-top: 1px solid color-mix(in oklab, var(--color-accent) 16%, var(--play-together-line)); padding: .8rem 0 0; }
.tall-tales__reveal-option strong { color: color-mix(in oklab, var(--play-together-ink) 60%, transparent); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.tall-tales__reveal-option span { color: var(--play-together-ink); line-height: 1.45; }
.tall-tales__reveal-option.is-real { border-top-color: color-mix(in oklab, var(--color-success) 42%, var(--play-together-line)); }
.tall-tales__result-list, .mix-up-monster__result-list { grid-column: 1 / -1; margin-top: 1.5rem; border: 1px solid color-mix(in oklab, var(--color-accent) 24%, var(--play-together-line)); border-radius: var(--radius-box); padding: 1.25rem 1.5rem; background: color-mix(in oklab, var(--color-accent) 4%, var(--color-base-100)); }
.tall-tales__result-list ul, .mix-up-monster__result-list ul { display: grid; gap: .7rem; margin-top: 1rem; padding: 0; list-style: none; }
.tall-tales__result-list li, .mix-up-monster__result-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-top: 1px solid color-mix(in oklab, var(--color-accent) 16%, var(--play-together-line)); padding-top: .7rem; }
.tall-tales__result-list li span, .mix-up-monster__result-list li span { color: color-mix(in oklab, var(--play-together-ink) 62%, transparent); text-align: right; }
.mix-up-monster__choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; max-width: 54rem; margin: 1.5rem auto 0; }
.mix-up-monster__choice { display: flex; min-height: 7rem; flex-direction: column; align-items: flex-start; gap: .5rem; border: 1px solid var(--play-together-line); border-radius: var(--radius-box); padding: 1rem; background: var(--color-base-100); color: var(--play-together-ink); text-align: left; }
.mix-up-monster__choice:hover { border-color: var(--color-secondary); background: color-mix(in oklab, var(--color-secondary) 9%, var(--color-base-100)); }
.mix-up-monster__choice > span { color: var(--color-secondary); font-size: 1.7rem; font-weight: 900; }
.mix-up-monster__sliver { display: flex; align-items: center; gap: .7rem; max-width: 25rem; margin: 1.25rem auto 0; border-radius: .7rem; background: color-mix(in oklab, var(--color-secondary) 8%, var(--color-base-100)); padding: .7rem .9rem; color: color-mix(in oklab, var(--play-together-ink) 62%, transparent); font-size: .82rem; }
.mix-up-monster__sliver span { width: 1rem; height: 2.5rem; border-radius: 999px; background: var(--color-secondary); }
.mix-up-monster__art { max-width: 30rem; margin: 1.25rem auto 0; overflow: hidden; border-radius: 1rem; }
.mix-up-monster__result-list { border-color: color-mix(in oklab, var(--color-secondary) 24%, var(--play-together-line)); background: color-mix(in oklab, var(--color-secondary) 4%, var(--color-base-100)); }
@media (max-width: 620px) { .mix-up-monster__choices { grid-template-columns: 1fr; } .tall-tales__result-list li, .mix-up-monster__result-list li { align-items: flex-start; flex-direction: column; gap: .25rem; } .tall-tales__result-list li span, .mix-up-monster__result-list li span { text-align: left; } }

.answer-squares__board, .answer-squares__result-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; max-width: 28rem; margin: 1.6rem auto 0; }
.answer-squares__cell { display: flex; min-height: 5.6rem; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; border: 1px solid var(--play-together-line); border-radius: var(--radius-field); background: var(--color-base-100); color: var(--play-together-ink); font-weight: 900; }
.answer-squares__cell:hover:not(:disabled) { border-color: var(--color-primary); background: color-mix(in oklab, var(--color-primary) 8%, var(--color-base-100)); }
.answer-squares__cell.is-claimed { background: color-mix(in oklab, var(--color-secondary) 10%, var(--color-base-100)); }
.answer-squares__cell strong { font-size: 1.7rem; }
.answer-squares__cell span { color: color-mix(in oklab, var(--play-together-ink) 55%, transparent); font-size: .72rem; font-weight: 700; }
.answer-squares__choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; max-width: 42rem; margin: 1.5rem auto 0; }
.answer-squares__choice { display: flex; min-height: 4.4rem; align-items: center; justify-content: center; border: 1px solid var(--play-together-line); border-radius: var(--radius-field); background: var(--color-base-100); color: var(--play-together-ink); font-weight: 800; }
.answer-squares__choice:hover { border-color: var(--color-primary); background: color-mix(in oklab, var(--color-primary) 8%, var(--color-base-100)); }
.answer-squares__result-cell { display: grid; min-height: 3.4rem; place-items: center; border: 1px solid var(--play-together-line); border-radius: .6rem; background: var(--color-base-100); font-size: 1.4rem; font-weight: 950; }
@media (max-width: 620px) { .answer-squares__choices { grid-template-columns: 1fr; } .answer-squares__cell { min-height: 4.6rem; } }