.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)); }
.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__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)); }
@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); } .play-together__team-fields { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .play-together__game-option, .play-together__match-card-inner, .play-together__answer-button { transition: none; } }