/* ===== CAH No-JS: Stylesheet ===== */
/* Zero JavaScript. Pure CSS interactivity. */

/* --- Reset & Base --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: #1a1a1a;
    color: #e0e0e0;
    min-height: 100vh;
    line-height: 1.5;
}

a {
    color: #fff;
    text-decoration: underline;
}

a:hover {
    color: #ccc;
}

/* --- HTMX Transition Styles --- */
.htmx-swapping {
    opacity: 0;
}
.htmx-settling {
    transition: opacity 200ms ease-in;
}

/* --- Typography --- */
h1 {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

/* --- Buttons --- */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.btn:active {
    transform: translateY(0);
}

.btn-white {
    background: #fff;
    color: #000;
}

.btn-black {
    background: #000;
    color: #fff;
    border: 2px solid #fff;
}

.btn-outline {
    background: transparent;
    color: #fff;
    border: 2px solid #555;
}

.btn-outline:hover {
    border-color: #fff;
}

.btn-danger {
    background: #c0392b;
    color: #fff;
}

.btn-danger:hover {
    background: #e74c3c;
}

.btn-large {
    padding: 1rem 2rem;
    font-size: 1.1rem;
}

.btn-small {
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
}

/* --- Cards --- */
.card {
    display: block;
    padding: 1.25rem;
    border-radius: 12px;
    min-height: 140px;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease, outline 0.15s ease;
    cursor: pointer;
}

.white-card {
    background: #fff;
    color: #000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.white-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.black-card {
    background: #000;
    color: #fff;
    border: 2px solid #333;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    max-width: 600px;
    position: relative;
}

.card-text {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
}

.pick-badge {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.25rem 0.75rem;
    background: #fff;
    color: #000;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* --- Card Selection (No JS!) --- */
/* Hide the actual radio/checkbox inputs */
.card-grid input[type="radio"],
.card-grid input[type="checkbox"],
.submission-grid input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Selected card styling */
.card-grid input[type="radio"]:checked + label.card,
.card-grid input[type="checkbox"]:checked + label.card {
    outline: 3px solid #fff;
    outline-offset: 2px;
    transform: translateY(-8px);
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.3);
}

.card-grid input[type="radio"]:focus-visible + label.card,
.card-grid input[type="checkbox"]:focus-visible + label.card {
    outline: 3px solid #4da6ff;
    outline-offset: 2px;
}

/* Submission card selection */
.submission-grid input[type="radio"]:checked + label.submission-card {
    outline: 3px solid #fff;
    outline-offset: 4px;
    transform: translateY(-4px);
}

.submission-grid input[type="radio"]:focus-visible + label.submission-card {
    outline: 3px solid #4da6ff;
    outline-offset: 4px;
}

/* --- Card Grid Layout --- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.card-slot {
    position: relative;
}

.card-small {
    min-height: 100px;
    padding: 0.75rem;
}

.card-small .card-text {
    font-size: 0.85rem;
}

/* --- Submission Grid --- */
.submission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.25rem;
    margin: 1rem 0;
}

.submission-slot {
    position: relative;
}

.submission-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 12px;
    transition: transform 0.2s ease, outline 0.15s ease;
}

.submission-card:hover {
    transform: translateY(-2px);
}

.submission-card .card {
    cursor: pointer;
}

/* Eliminate target styling */
.eliminate-target {
    border: 2px solid transparent;
}

input[type="radio"]:checked + .eliminate-target {
    border-color: #c0392b;
    outline: 3px solid #c0392b;
    outline-offset: 2px;
}

/* --- Gamble Section (CSS :checked reveal) --- */
.gamble-section {
    margin: 1.5rem 0;
    padding: 1rem;
    border: 1px solid #333;
    border-radius: 12px;
}

.gamble-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 700;
}

.gamble-extra {
    display: none;
    margin-top: 1rem;
}

#gamble:checked ~ .gamble-extra {
    display: block;
}

.gamble-hint {
    margin-bottom: 0.75rem;
    color: #aaa;
}

/* --- Forms --- */
.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 700;
    font-size: 0.9rem;
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="password"] {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #555;
    border-radius: 8px;
    background: #222;
    color: #fff;
    font-size: 1rem;
    font-family: inherit;
}

.form-group input:focus {
    outline: none;
    border-color: #fff;
}

.code-input {
    font-family: "Courier New", monospace;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-align: center;
}

fieldset {
    border: 1px solid #333;
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

legend {
    font-weight: 900;
    font-size: 1.1rem;
    padding: 0 0.5rem;
}

.fieldset-desc {
    color: #999;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

/* --- Deck & Rule Checkboxes --- */
.deck-option,
.rule-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.deck-option:hover,
.rule-option:hover {
    background: #2a2a2a;
}

.deck-option input[type="checkbox"],
.rule-option input[type="checkbox"] {
    margin-top: 0.25rem;
    width: 20px;
    height: 20px;
    accent-color: #fff;
    flex-shrink: 0;
}

.deck-option label,
.rule-option label {
    cursor: pointer;
    flex: 1;
}

.deck-icon {
    font-size: 1.5rem;
    margin-right: 0.5rem;
}

.deck-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.deck-info small,
.rule-option small {
    color: #999;
    font-size: 0.8rem;
    display: block;
}

.deck-desc {
    font-style: italic;
}

/* --- Home Page --- */
.home-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1rem;
    text-align: center;
}

.home-header {
    margin-bottom: 3rem;
}

.home-header h1 {
    font-size: 3rem;
    letter-spacing: -0.03em;
}

.subtitle {
    color: #999;
    margin-top: 0.5rem;
    font-size: 1.1rem;
}

.home-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    text-align: left;
}

.home-card {
    background: #222;
    border-radius: 16px;
    padding: 2rem;
}

.home-card h2 {
    margin-bottom: 1rem;
}

.join-form .btn {
    width: 100%;
    margin-top: 0.5rem;
}

.home-footer {
    margin-top: 3rem;
    color: #666;
    font-size: 0.8rem;
}

.logout-form {
    margin-top: 1rem;
}

/* --- Create Page --- */
.create-page {
    max-width: 700px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.create-page header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.back-link {
    color: #999;
    text-decoration: none;
    font-size: 0.9rem;
}

.back-link:hover {
    color: #fff;
}

.create-form-row {
    margin-bottom: 1.5rem;
}

.create-form .btn-large {
    width: 100%;
    margin-top: 1rem;
}

/* --- Sticky "Create Game" FAB --- */
.create-submit-sticky {
    position: sticky;
    bottom: 0;
    z-index: 10;
    padding: 1rem 0 1.25rem;
    /* gradient fades from transparent to page background so content scrolling behind is masked */
    background: linear-gradient(to bottom, transparent 0%, #1a1a1a 35%);
    margin-top: 0.5rem;
    text-align: center;
}

.create-submit-sticky .btn-large {
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.5);
}

/* When the button is in its natural position at the bottom, no shadow needed */
.create-submit-sticky:last-child .btn-large {
    /* The gradient background handles the visual transition naturally */
}

/* --- Lobby --- */
.lobby-preamble {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem 1rem 0;
}

.game-code-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.game-code-display .label {
    color: #999;
}

.game-code-display .code {
    font-family: "Courier New", monospace;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 0.15em;
    color: #fff;
    background: #000;
    padding: 0.25rem 0.75rem;
    border-radius: 8px;
    border: 2px solid #333;
    user-select: all;
    -webkit-user-select: all;
    cursor: pointer;
}

.player-list ul {
    list-style: none;
}

.player-item {
    padding: 0.75rem 1rem;
    background: #222;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.player-item.is-host {
    border-left: 3px solid #fff;
}

.badge {
    background: #fff;
    color: #000;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
}

.start-form {
    margin-top: 1.5rem;
}

.start-form .btn {
    width: 100%;
}

.share-hint {
    margin-top: 1.5rem;
    color: #999;
    text-align: center;
}

.lobby-actions {
    margin-top: 1.5rem;
    text-align: center;
}

.game-settings-display {
    margin-top: 1.5rem;
}

/* --- Play Page --- */
.lobby-page,
.play-page,
.judge-page,
.vote-page,
.eliminate-page,
.results-page,
.gameover-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

header nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.round-badge {
    background: #fff;
    color: #000;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 900;
    text-transform: uppercase;
}

.czar-info {
    color: #999;
    font-size: 0.9rem;
}

.play-form .btn-large {
    width: 100%;
    margin-top: 1rem;
}

.reboot-form,
.happy-ending-form {
    margin-top: 1rem;
}

.reboot-form .btn,
.happy-ending-form .btn {
    width: 100%;
}

/* --- Discard Button (Never Have I Ever) --- */
.btn-discard {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #c0392b;
    color: #fff;
    border: none;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 2;
}

.card-slot:hover .btn-discard {
    opacity: 1;
}

.discard-form {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

/* --- Waiting / Spinner --- */
.waiting-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem;
    text-align: center;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #333;
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

output {
    font-size: 1.1rem;
    color: #ccc;
}

/* --- Results --- */
.winner-announcement {
    text-align: center;
    padding: 2rem 0;
}

.winner-announcement h2 {
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

.winner-rando {
    color: #c0392b;
}

.shame-text {
    color: #c0392b;
    font-style: italic;
    font-size: 1.1rem;
}

.winning-cards {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.winner-card {
    min-width: 160px;
    max-width: 220px;
    border: 3px solid gold;
    animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
    from { box-shadow: 0 0 8px rgba(255, 215, 0, 0.3); }
    to { box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); }
}

.scoreboard {
    list-style: none;
    counter-reset: scoreboard-counter;
}

.scoreboard li {
    counter-increment: scoreboard-counter;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.25rem;
    background: #222;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.scoreboard li::before {
    content: counter(scoreboard-counter) ".";
    font-weight: 700;
    color: #999;
    min-width: 1.5rem;
}

.scoreboard .player-name {
    flex: 1;
}

.scoreboard .player-score {
    font-weight: 700;
}

.scoreboard-full {
    margin-top: 2rem;
}

.round-winner {
    border-left: 3px solid gold;
}

.host-controls {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.host-controls .btn {
    width: 100%;
}

.wait-hint {
    text-align: center;
    color: #999;
    margin-top: 2rem;
}

/* --- All Submissions + Likes (Round Results) --- */
.all-submissions {
    margin-top: 2rem;
}

.all-submissions h3,
.judge-submissions h3 {
    margin-bottom: 0.5rem;
}

.judge-submissions-hint {
    color: #999;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.judge-submissions {
    margin-top: 2rem;
}

.submissions-like-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

.submission-like-card {
    background: #222;
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border: 2px solid transparent;
}

.submission-like-card.submission-winner {
    border-color: gold;
    background: #2a2200;
}

.submission-like-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.submission-player-name {
    font-weight: 700;
    font-size: 0.9rem;
}

.submission-like-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.submission-like-cards .card {
    min-height: 60px;
    flex: 1;
    min-width: 100px;
}

.submission-like-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
}

.btn-like {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: transparent;
    border: 1px solid #444;
    border-radius: 20px;
    padding: 0.3rem 0.75rem;
    color: #999;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-like:hover {
    border-color: #e74c3c;
    color: #e74c3c;
}

.btn-liked {
    background: rgba(231, 76, 60, 0.15);
    border-color: #e74c3c;
    color: #e74c3c;
}

.btn-liked:hover {
    background: rgba(231, 76, 60, 0.25);
}

.like-count {
    font-size: 0.85rem;
    font-weight: 700;
}

.like-own {
    color: #e74c3c;
    font-size: 0.9rem;
}

.like-own .like-count {
    font-weight: 700;
}

/* Like badge on czar judge page submissions */
.submission-likes-badge {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.2rem 0.6rem;
    background: rgba(231, 76, 60, 0.15);
    border: 1px solid rgba(231, 76, 60, 0.3);
    border-radius: 12px;
    color: #e74c3c;
    font-size: 0.85rem;
    font-weight: 700;
}

/* --- Fan Favorite Award (Game Over) --- */
.fan-favorite-award {
    margin: 2rem auto;
    padding: 1.5rem;
    background: rgba(231, 76, 60, 0.1);
    border: 2px solid rgba(231, 76, 60, 0.3);
    border-radius: 16px;
    max-width: 400px;
    text-align: center;
}

.fan-favorite-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.25rem;
}

.fan-favorite-award h3 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #e74c3c;
    margin-bottom: 0.25rem;
}

.fan-favorite-name {
    font-size: 1.5rem;
    font-weight: 900;
}

.fan-favorite-count {
    color: #999;
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

.likes-badge {
    color: #e74c3c;
    font-size: 0.8rem;
    margin-left: 0.3rem;
}

/* --- Game Over --- */
.gameover-page {
    text-align: center;
}

.gameover-page header {
    margin-bottom: 2rem;
}

.winner-final h2 {
    font-size: 2rem;
}

.rando-shame h2 {
    font-size: 2rem;
    color: #c0392b;
}

.final-standings {
    max-width: 500px;
    margin: 2rem auto;
    text-align: left;
}

.scoreboard-final li {
    font-size: 1.1rem;
    padding: 0.75rem 1rem;
}

.scoreboard-final .rank {
    font-weight: 900;
    min-width: 2.5rem;
}

.first-place {
    border-left: 4px solid gold;
    background: #2a2200 !important;
}

.second-place {
    border-left: 4px solid silver;
}

.third-place {
    border-left: 4px solid #cd7f32;
}

.gameover-actions {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.gameover-actions .btn-large {
    min-width: 200px;
}

.quit-form .btn {
    min-width: 200px;
}

/* --- Error Page --- */
.error-page {
    max-width: 600px;
    margin: 4rem auto;
    padding: 2rem;
    text-align: center;
}

.error-message {
    font-size: 1.2rem;
    color: #999;
    margin: 1rem 0 2rem;
}

/* --- Details/Summary --- */
details {
    border: 1px solid #333;
    border-radius: 8px;
    padding: 0.75rem;
}

summary {
    cursor: pointer;
    font-weight: 700;
    padding: 0.25rem;
}

summary:hover {
    color: #fff;
}

details[open] summary {
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #333;
}

/* --- Judge (Serious Business) --- */
.ranking-slot {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ranking-controls {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ranking-controls label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: #333;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
}

.ranking-controls input[type="radio"] {
    accent-color: #fff;
}

/* --- Eliminate Page Specifics --- */
.eliminate-hint {
    margin-bottom: 1rem;
    color: #e74c3c;
    font-weight: 700;
}

.eliminate-form .btn-large {
    width: 100%;
    margin-top: 1rem;
}

/* --- Page content structure --- */

/* --- Responsive --- */
@media (max-width: 600px) {
    .home-header h1 {
        font-size: 2rem;
    }

    .home-actions {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .card-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 0.75rem;
    }

    .card {
        min-height: 110px;
        padding: 1rem;
    }

    .submission-grid {
        grid-template-columns: 1fr;
    }

    .black-card {
        font-size: 1.1rem;
        padding: 1.25rem;
    }

    .game-code-display .code {
        font-size: 1.5rem;
    }

    h1 {
        font-size: 1.5rem;
    }
}

@media (max-width: 380px) {
    .card-grid {
        grid-template-columns: 1fr 1fr;
    }

    .card {
        min-height: 90px;
        padding: 0.75rem;
    }

    .card-text {
        font-size: 0.8rem;
    }
}

/* ===== Desktop Layout (min-width: 900px) ===== */
@media (min-width: 900px) {
    /* --- Fluid containers: remove fixed max-width, add generous padding --- */
    .create-page {
        max-width: none;
        padding: 2rem max(2rem, 5vw);
    }

    .lobby-page,
    .play-page,
    .judge-page,
    .vote-page,
    .eliminate-page,
    .results-page {
        max-width: none;
        padding: 1.5rem max(2rem, 5vw);
    }

    .lobby-preamble {
        max-width: none;
        padding: 1.5rem max(2rem, 5vw) 0;
    }

    /* --- Create page: multi-column layout --- */

    /* Player Info + Game Settings side by side */
    .create-form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        align-items: start;
    }

    .create-form-row fieldset {
        margin-bottom: 0;
    }

    /* Card Decks in 2 columns */
    .fieldset-card-decks {
        columns: 2;
        column-gap: 1.5rem;
    }

    .fieldset-card-decks > * {
        break-inside: avoid;
    }

    /* House Rules in 2-column grid */
    .fieldset-house-rules {
        columns: 2;
        column-gap: 1.5rem;
    }

    .fieldset-house-rules > .rule-option {
        break-inside: avoid;
    }

    .fieldset-house-rules > .fieldset-desc {
        column-span: all;
    }

    /* Wider submit button capped */
    .create-form .btn-large {
        max-width: 400px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    /* --- Play page: scoreboard sidebar --- */
    .play-layout {
        display: grid;
        grid-template-columns: 1fr 280px;
        gap: 2rem;
        align-items: start;
    }

    .play-sidebar {
        position: sticky;
        top: 1.5rem;
    }

    /* Force <details> open on desktop -- always show scoreboard */
    .play-sidebar details {
        border: none;
        padding: 0;
    }

    .play-sidebar details > summary {
        display: none;
    }

    .play-sidebar details > .scoreboard {
        display: block !important;
    }

    /* Style the sidebar scoreboard as a card */
    .play-sidebar details {
        background: #222;
        border-radius: 12px;
        padding: 1.25rem;
    }

    .play-sidebar details::before {
        content: "Scoreboard";
        display: block;
        font-weight: 900;
        font-size: 1rem;
        margin-bottom: 0.75rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #333;
    }

    /* Widen card grid on desktop */
    .card-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    /* Widen submission grid on desktop */
    .submission-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }

    /* Full-width buttons shouldn't stretch on wide screens */
    .play-form .btn-large,
    .reboot-form .btn,
    .happy-ending-form .btn {
        max-width: 400px;
    }

    .host-controls .btn {
        max-width: 400px;
    }
}

/* --- Player Status List (waiting screens) --- */
.player-status-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin: 1.5rem 0;
    padding: 0;
}

.player-status {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    background: #2a2a2a;
    border: 1px solid #333;
}

.player-status-icon {
    font-size: 0.9rem;
    line-height: 1;
}

.player-status-name {
    font-weight: 700;
}

.player-status-label {
    color: #999;
    font-size: 0.75rem;
}

/* Done (submitted / voted) */
.player-status--done {
    background: #1a3a1a;
    border-color: #2d5a2d;
}

.player-status--done .player-status-label {
    color: #6abf6a;
}

/* Waiting (thinking / voting) */
.player-status--waiting {
    background: #2a2a2a;
    border-color: #444;
}

/* Czar / Judging */
.player-status--czar,
.player-status--judging {
    background: #2a2200;
    border-color: #554400;
}

.player-status--czar .player-status-label,
.player-status--judging .player-status-label {
    color: #d4a017;
}

/* Eliminating */
.player-status--eliminating {
    background: #2a1a1a;
    border-color: #553333;
}

.player-status--eliminating .player-status-label {
    color: #e07070;
}

/* Away */
.player-status--away {
    opacity: 0.5;
}

/* Idle (waiting for someone else, no action needed from them) */
.player-status--idle {
    background: #222;
    border-color: #333;
}

.player-status--idle .player-status-label {
    color: #777;
}

/* (streaming toggle CSS removed — now using standard <details> elements) */

/* --- Password Gate --- */
.gate-page {
    max-width: 400px;
    margin: 0 auto;
    padding: 4rem 1rem;
    text-align: center;
}

.gate-page h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.gate-form {
    margin-top: 2rem;
    text-align: left;
}

.gate-form .btn {
    width: 100%;
    margin-top: 0.5rem;
}

.error-inline {
    color: #e74c3c;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

/* --- Away Badge --- */
.badge-away {
    background: #6c757d;
    color: #fff;
    font-size: 0.7rem;
    padding: 0.15em 0.5em;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    vertical-align: middle;
    margin-left: 0.3em;
}

.is-away .player-name {
    opacity: 0.5;
}

/* --- Player Controls (inline buttons next to player names) --- */
.player-controls {
    display: inline-flex;
    gap: 0.3rem;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.inline-form {
    display: inline;
}

.btn-tiny {
    font-size: 0.65rem;
    padding: 0.15em 0.5em;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.btn-kick {
    background: #c0392b;
    color: #fff;
    border: 2px solid #c0392b;
}

.btn-kick:hover {
    background: #a93226;
    border-color: #a93226;
}

.btn-ban {
    background: #7b241c;
    color: #fff;
    border: 2px solid #7b241c;
}

.btn-ban:hover {
    background: #641e16;
    border-color: #641e16;
}

/* --- Away Message (play page when player is away) --- */
.away-message {
    text-align: center;
    padding: 3rem 1.5rem;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    margin: 2rem auto;
    max-width: 500px;
}

.away-message p {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}

/* --- Self-service away toggle section --- */
.self-away-section {
    text-align: center;
    margin-top: 1rem;
}

/* --- Stream controls (away/back + end game in streaming pages) --- */
.stream-controls {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}

/* --- End Game Early confirmation --- */
.endgame-confirm {
    margin-top: 1.5rem;
    text-align: center;
}

.endgame-confirm summary {
    cursor: pointer;
    display: inline-block;
}

.endgame-form {
    margin-top: 0.75rem;
}

.endgame-form p {
    margin-bottom: 0.5rem;
    font-weight: 600;
}