.p2b-game-ui {
    display: grid;
    gap: 1.25rem;
}

.p2b-game-ui .round-heading {
    text-align: center;
}

.p2b-game-ui .round-heading h3,
.p2b-game-ui .prompt-block h3 {
    margin: 0;
    color: #15243a;
}

.p2b-game-ui .round-heading p,
.p2b-game-ui .round-label,
.p2b-game-ui .muted,
.p2b-game-ui .wait-copy {
    margin: .25rem 0 0;
    color: #6e7b8f;
}

.p2b-game-ui .color-options {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
}

.p2b-game-ui .color-options form {
    display: contents;
}

.p2b-game-ui .option-list {
    display: grid;
    gap: 1rem;
}

.p2b-game-ui .option-list form {
    margin: 0;
}

.p2b-game-ui .color-button,
.p2b-game-ui .joke-option,
.p2b-game-ui .continue-button {
    border: 1px solid #dce7f0;
    border-radius: 1rem;
    background: #fff;
    color: #15243a;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.p2b-game-ui .color-button {
    width: 100%;
    min-height: 7rem;
    display: grid;
    place-items: center;
    gap: .5rem;
}

.p2b-game-ui .joke-option {
    width: 100%;
    padding: 1rem;
    text-align: left;
}

.p2b-game-ui .color-button.selected,
.p2b-game-ui .joke-option.selected {
    border-color: #2388e8;
    box-shadow: 0 0 0 2px rgba(35, 136, 232, .16);
}

.p2b-game-ui .color-button:disabled,
.p2b-game-ui .joke-option:disabled,
.p2b-game-ui .continue-button:disabled {
    cursor: not-allowed;
    opacity: .62;
}

.p2b-game-ui .color-swatch {
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    box-shadow: inset 0 -12px 18px rgba(0, 0, 0, .12);
}

.p2b-game-ui .prompt-block {
    border-radius: 1.25rem;
    background: #f8fbfe;
    border: 1px solid #dce7f0;
    padding: 1.2rem;
}

.p2b-game-ui .prompt-block h3 {
    margin-top: .35rem;
    line-height: 1.2;
}

.p2b-game-ui .info-stack {
    display: grid;
    gap: 1rem;
}

.p2b-game-ui .state-card,
.p2b-game-ui .summary-card {
    border: 1px solid #dce7f0;
    border-radius: .85rem;
    background: rgba(255, 255, 255, .78);
    padding: 1rem;
}

.p2b-game-ui .state-title {
    margin: 0 0 .55rem;
    color: #314056;
    font-size: .85rem;
    font-weight: 900;
}

.p2b-game-ui .selection-line,
.p2b-game-ui .result-line {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
}

.p2b-game-ui .mini-swatch {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
}

.p2b-game-ui .time {
    margin-left: auto;
    color: #6e7b8f;
}

.p2b-game-ui .partner-state.ready {
    color: #16823a;
    font-weight: 800;
}

.p2b-game-ui .result-topline {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.p2b-game-ui .result-topline span,
.p2b-game-ui .score {
    border-radius: 999px;
    background: #dff1ff;
    color: #1266c3;
    font-weight: 900;
    padding: .35rem .7rem;
}

.p2b-game-ui .divider {
    width: 1px;
    height: 1.5rem;
    background: #dce7f0;
}

.p2b-game-ui .selected-answer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.p2b-game-ui .selected-answer span {
    color: #6e7b8f;
}

.p2b-game-ui .answer-grid,
.p2b-game-ui .style-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.p2b-game-ui .answer-grid div,
.p2b-game-ui .style-summary div {
    display: grid;
    gap: .25rem;
}

.p2b-game-ui .answer-grid span,
.p2b-game-ui .answer-grid small {
    color: #6e7b8f;
}

.p2b-game-ui .continue-button {
    justify-self: center;
    min-width: min(100%, 18rem);
    padding: .9rem 1.3rem;
    background: linear-gradient(135deg, #ff8500, #ff9f2e);
    color: #fff;
    border: 0;
}

.p2b-game-ui form:has(.continue-button) {
    display: grid;
    justify-items: center;
}

.p2b-game-ui .wait-copy {
    text-align: center;
}

@media (max-width: 640px) {
    .p2b-game-ui .color-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .p2b-game-ui .answer-grid,
    .p2b-game-ui .style-summary {
        grid-template-columns: 1fr;
    }
}