/* Core Styles */
html, body {
    min-height: 100vh;
}

body {
    font-family: "Roboto", sans-serif;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Changed from center to flex-start */
    margin: 0;
    background-color: #f0f0f0;
    background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    overscroll-behavior-y: contain;
    /* overflow: hidden; /* Prevent body scroll */ /* Removed to allow scrolling */
}

/* Base Container Styling for main views */
.game-container {
    text-align: center;
    background-color: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    width: 600px;
    min-height: 630px;
    max-height: 95vh;
    overflow-y: auto;
    position: relative;
}

/* Top Right Buttons */
#topRightButtons {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    gap: 10px;
    z-index: 10;
}

/* Game Board and Clues Container */
#gameBoardAndCluesContainer {
    position: relative;
    width: var(--spectrum-width);
    height: var(--spectrum-total-height); /* Use total height variable */
    margin: 1.25rem auto 0 auto; /* Standardized from 20px */
    z-index: 1;
}

/* Reveal Overlay */
.reveal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Align content to the bottom */
    align-items: center;
    z-index: 100;
    cursor: pointer;
    font-size: 2em;
    font-weight: bold;
    color: #333;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-in-out;
    border-radius: calc(var(--spectrum-width) / 2) calc(var(--spectrum-width) / 2) 0 0;
    overflow: hidden;
}

    .reveal-overlay.active {
        opacity: 1;
        pointer-events: auto;
        box-shadow: 0 0 20px 5px rgba(66, 133, 244, 0.7); /* Mimic board highlight */
    }

    .reveal-overlay p {
        text-align: center;
        margin: 0;
        font-size: 0.6em; /* Smaller for mobile */
        padding-bottom: 30px;
        animation: pulse-text 1.5s infinite ease-in-out alternate;
        word-break: break-word; /* Allow long words to break */
        white-space: normal; /* Ensure text wraps */
    }
@keyframes pulse-text {
    from {
        transform: scale(1);
        opacity: 0.7;
    }
    to {
        transform: scale(1.05);
        opacity: 1;
    }
}


/* Specific Button Styles */
#howToPlayButton {
    background-color: #4A90E2;
    color: white;
    border-radius: 5px;
    z-index: 10;
    border: none;
    transition: background-color 0.3s ease;
}

#newGameButton {
    background-color: #f75d59;
    color: white;
    border-radius: 5px;
    z-index: 10;
    border: none;
    transition: background-color 0.3s ease;
}

#howToPlayButton:hover {
    background-color: #357ABD;
}

#newGameButton:hover {
    background-color: #eb4d4b;
}

.title {
    font-family: "Orbitron", sans-serif;
    font-size: 48px;
    font-weight: 700;
    color: #4A90E2;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 1.25rem; /* Standardized from 20px */
    letter-spacing: 2px;
}

.subtitle {
    font-size: 24px;
    color: #2f3542;
    margin-bottom: 1.875rem; /* Standardized from 30px */
}

.board {
    width: var(--spectrum-width);
    height: calc(var(--spectrum-width) / 2);
    background-color: #e0e0e0;
    border-radius: calc(var(--spectrum-width) / 2) calc(var(--spectrum-width) / 2) 0 0;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
}

.board.highlight {
    box-shadow: 0 0 20px 5px rgba(66, 133, 244, 0.7); /* Example blue glow */
    transition: box-shadow 0.3s ease-in-out;
}

.target-area {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    position: absolute;
    overflow: hidden;
}

.needle-container {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: calc(var(--spectrum-width) * 0.1);
    height: calc(var(--spectrum-width) * 0.45);
    transform: translateX(-50%);
    cursor: pointer;
}

    .needle {
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 4px;
        height: 100%;
        background-color: #ff4757;
        transform-origin: bottom center;
        transition: none; /* Remove transition to avoid interference with JS animation */
    }
.clues-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.25rem; /* Standardized from 20px */
    height: auto; /* Changed from fixed 60px to auto */
}

.clue {
    flex: 1;
    font-size: 18px;
    font-weight: bold;
    color: #2f3542;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 10px;
}

.bidirectional-arrow {
    width: calc(var(--spectrum-width) * 0.25);
    height: 2px;
    background-color: #4A90E2;
    position: relative;
    margin: 0 20px;
    flex-shrink: 0;
}

.bidirectional-arrow::before,
.bidirectional-arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    border-top: 2px solid #4A90E2;
    border-right: 2px solid #4A90E2;
}

.bidirectional-arrow::before {
    left: 0;
    transform: translateY(-50%) rotate(-135deg);
}

.bidirectional-arrow::after {
    right: 0;
    transform: translateY(-50%) rotate(45deg);
}

.controls {
    margin-top: 1.25rem; /* Standardized from 20px */
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

button {
    font-size: 16px;
    padding: 12px 24px;
    cursor: pointer;
    background-color: #357ABD;
    color: white;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    flex: 1 0 auto;
    max-width: 150px;
    min-width: 120px;
    box-sizing: border-box;
}

button:hover {
    background-color: #4A90E2;
}

#score,
#totalScore {
    margin-top: 1.25rem; /* Standardized from 20px */
    font-size: 24px;
    font-weight: bold;
    color: #2f3542;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
}

.modal-content {
    background-color: #ffffff;
    margin: 10% auto;
    padding: 1.875rem; /* Standardized from 30px */
    width: 90%;
    max-width: 600px;
    border-radius: 15px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
    transform: translateY(-50px);
    opacity: 0;
    transition: all 0.3s ease-out;
}

.modal.show .modal-content {
    transform: translateY(0);
    opacity: 1;
}

.modal h2 {
    color: #4A90E2;
    font-size: 28px;
    margin-bottom: 1.25rem; /* Standardized from 20px */
    text-align: center;
}

.modal-body {
    color: #2f3542;
    font-size: 16px;
    line-height: 1.6;
}

.modal-body ol {
    padding-left: 20px;
}

.modal-body ul {
    padding-left: 30px;
    margin-top: 0.625rem; /* Standardized from 10px */
    text-align: left; /* Left align bullet points */
}

.score-5 {
    color: #4A90E2;
    font-weight: bold;
}

.score-3 {
    color: #feca57;
    font-weight: bold;
}

.score-1 {
    color: #ff6b6b;
    font-weight: bold;
}

.score-0 {
    color: #a4b0be;
    font-weight: bold;
}

.close-button {
    display: block;
    width: 100%;
    padding: 12px;
    background-color: #4A90E2;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 1.25rem; /* Standardized from 20px */
}

.close-button:hover {
    background-color: #357ABD;
}

/* Team Management Styles */
.team-management-instructions {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 10px;
}

.team-score-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    margin-bottom: 5px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    background-color: #f9f9f9;
    min-height: 35px;
}

.edit-icon {
    font-size: 0.8em;
    margin-left: 5px;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    cursor: pointer;
}

.team-score-item:hover .edit-icon {
    opacity: 1;
}

.team-name-display {
    cursor: pointer;
    border-bottom: 1px dashed transparent;
}

.team-name-display:hover {
    border-bottom-color: rgba(0, 0, 0, 0.3);
}

.team-name-input-inline {
    width: 100px;
    padding: 2px;
    border: 1px solid #4A90E2;
    border-radius: 3px;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    background-color: transparent;
}

.delete-team-button {
    background: none;
    border: none;
    color: #ff6b6b;
    font-size: 1.2em;
    cursor: pointer;
    padding: 0 5px;
    transition: transform 0.2s ease;
    max-width: fit-content;
}

.delete-team-button:hover {
    transform: scale(1.2);
    background-color: transparent;
}

.delete-team-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Turn Indicator */
#turn-indicator {
    font-size: 22px;
    font-weight: bold;
    color: #357ABD;
    height: 30px;
    margin-bottom: 0.9375rem; /* Standardized from 15px */
    transition: all 0.3s ease-in-out;
}

/* Info Balloon */
.info-balloon {
    display: none; /* Initially hidden */
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 0.3rem 0.75rem; /* Adjusted padding */
    font-size: 0.85em;
    color: #333;
    text-align: center;
    margin: 0.625rem auto; /* Standardized from 10px */
    max-width: 280px; /* Slightly adjusted max-width */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.info-balloon p {
    margin: 0;
}

.psychic-turn {
    animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
    from {
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 0 10px #c7b9ff;
    }
    to {
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 0 20px #7a4fa3;
    }
}

@keyframes shake-zero-points {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}

.shake-zero-points {
    animation: shake-zero-points 0.5s ease-in-out;
}

@keyframes points-rain-down {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.8) rotate(0deg); /* Relative translation from its own dynamic position */
    }
    20% {
        opacity: 1;
        transform: translate(0, -10px) scale(1.1) rotate(5deg);
    }
    80% {
        opacity: 1;
        transform: translate(0, -50px) scale(1) rotate(-5deg);
    }
    100% {
        opacity: 0;
        transform: translate(0, -100px) scale(0.7) rotate(0deg);
    }
}

.score-popup {
    position: absolute;
    /* Top, left, and initial transform will be set by JS for randomization */
    font-size: 2em;
    font-weight: bold;
    color: #4CAF50; /* Green for points */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    z-index: 1001;
    animation: points-rain-down 1.5s ease-out forwards;
    white-space: nowrap;
}

/* Team Colors */
:root {
  --team-color-0-primary: #4f8cff;
  --team-color-0-secondary: #7aa7ff;
  --team-color-1-primary: #ff6b9c;
  --team-color-1-secondary: #ff9ab8;
  --team-color-2-primary: #5cb85c;
  --team-color-2-secondary: #8cd68c;
  --team-color-3-primary: #f0ad4e;
  --team-color-3-secondary: #f4c27a;
  --team-color-4-primary: #5bc0de;
  --team-color-4-secondary: #8cdff4;

  /* Spectrum Sizing Variables */
  --game-container-padding: 2rem;
  --base-game-container-width: 600px;
  --calculated-spectrum-width: calc(var(--base-game-container-width) - (2 * var(--game-container-padding)));
  --spectrum-width: var(--calculated-spectrum-width);
  /* Board height (width / 2) + clues-container margin-top (20px) + clues-container height (60px) */
  --spectrum-total-height: calc(var(--spectrum-width) / 2 + 20px + 60px);
}

.current-team {
    font-weight: bold;
    color: #4A90E2;
}

#startGame {
    margin-top: 1rem;
}

/* Current Team Indicator */
.team-indicator {
  position: relative;
  top: 1rem; /* Standardized from 16px */
  margin: 0 auto 1rem auto; /* Standardized from 16px */
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  font-family: system-ui, -apple-system, sans-serif;
  font-weight: 600;
  letter-spacing: 0.3px;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  transition: all 0.35s ease;
  animation: pulseGlow 2.5s ease-in-out infinite;
  z-index: 5;
}

.team-indicator__icon {
  font-size: 18px;
}

.team-indicator__label {
  font-size: 12px;
  opacity: 0.8;
  text-transform: uppercase;
}

.team-indicator__name {
  font-size: 16px;
  font-weight: 700;
}

.team-color-0 {
  background: linear-gradient(135deg, var(--team-color-0-primary), var(--team-color-0-secondary));
  color: white;
  box-shadow: 0 0 20px var(--team-color-0-primary);
}

.team-color-1 {
  background: linear-gradient(135deg, var(--team-color-1-primary), var(--team-color-1-secondary));
  color: white;
  box-shadow: 0 0 20px var(--team-color-1-primary);
}

.team-color-2 {
  background: linear-gradient(135deg, var(--team-color-2-primary), var(--team-color-2-secondary));
  color: white;
  box-shadow: 0 0 20px var(--team-color-2-primary);
}

.team-color-3 {
  background: linear-gradient(135deg, var(--team-color-3-primary), var(--team-color-3-secondary));
  color: white;
  box-shadow: 0 0 20px var(--team-color-3-primary);
}

.team-color-4 {
  background: linear-gradient(135deg, var(--team-color-4-primary), var(--team-color-4-secondary));
  color: white;
  box-shadow: 0 0 20px var(--team-color-4-primary);
}

@keyframes pulseGlow {
  0% {
    transform: scale(1);
    box-shadow: 0 0 16px var(--team-color-current-primary, rgba(0,0,0,0.2));
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 0 28px var(--team-color-current-primary, rgba(255,255,255,0.25));
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 16px var(--team-color-current-primary, rgba(0,0,0,0.2));
  }
}

@media (max-width: 600px) {
  .team-indicator {
    font-size: 14px;
    padding: 8px 14px;
  }
  .team-indicator__icon {
    font-size: 16px;
  }
  .team-indicator__label {
    font-size: 10px;
  }
  .team-indicator__name {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
    body {
        background-color: white;
    }

            .game-container {
                width: 100%;
                padding: 1rem;
                border-radius: 0;
                box-shadow: none;
                display: flex; /* Make it a flex container */
                flex-direction: column; /* Stack children vertically */
                justify-content: flex-start; /* Align content to the top */
                gap: 0; /* Remove any default gap between flex items */
            }

            .game-container > #gameBoardAndCluesContainer {
                margin-bottom: 0; /* Ensure no bottom margin */
                height: 14.375rem; /* Explicitly set height to contain board and clues (standardized from 230px) */
            }

            .game-container > .controls {
                margin-top: 0; /* Ensure no top margin */
            }


    .reveal-overlay {
        border-radius: 9.375rem 9.375rem 0 0; /* Standardized from 150px */
        font-size: 1.2em;
        width: 18.75rem; /* Standardized from 300px */
        left: 50%;
        transform: translateX(-50%);
        height: 9.375rem; /* Standardized from 150px */
    }

    .board {
        width: 18.75rem; /* Standardized from 300px */
        height: 9.375rem; /* Standardized from 150px */
        margin: 0 auto;
    }

    .target-area {
        width: 18.75rem; /* Standardized from 300px */
        height: 9.375rem; /* Standardized from 150px */
    }

    .clues-container {
        height: auto !important; /* Force auto height */
    }

    .clue {
        height: auto !important; /* Force auto height */
    }

    #gameBoardAndCluesContainer {
        height: auto !important; /* Force auto height */
        width: 18.75rem; /* Standardized from 300px */
        margin: 0 auto 0 auto; /* Set top margin to 0, keep centered */
    }

    #score {
        margin-top: 0; /* Remove top margin */
        margin-bottom: 1rem; /* Consistent gap below score */
    }

    #psychic-info-balloon {
        margin-bottom: 0.5rem; /* Reduced gap below the info balloon */
    }

    .controls {
        margin-top: 0; /* Removed negative margin, set to 0 */
    }

    #totalScore {
        margin-top: 20px; /* Revert margin for mobile */
    }

    #turn-indicator {
        display: none; /* Hide for mobile to save space and avoid redundancy */
    }
}

/* Changelog Specific Styles */
.changelog-content {
    text-align: left;
    margin-top: 20px;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.changelog-content h2 {
    color: #4A90E2;
    font-size: 22px;
    margin-top: 25px;
    margin-bottom: 10px;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 5px;
}

.changelog-content h2:first-of-type {
    margin-top: 0;
}

.changelog-content ul {
    list-style-type: disc;
    padding-left: 20px;
    margin-bottom: 15px;
}

.changelog-content li {
    margin-bottom: 8px;
    line-height: 1.5;
    color: #333;
}


/* --- Clue Editor (admin.html) ------------------------------------------- */

.admin-container {
    width: min(760px, 92vw);
    min-height: 0;
    text-align: left;
}

.admin-container h1,
.admin-container h2 {
    color: #2f3542;
}

.admin-intro {
    color: #57606f;
    margin-top: 0;
}

.admin-hint {
    color: #57606f;
    font-size: 0.85rem;
    margin: 0.5rem 0;
}

.admin-hint code,
.admin-container code {
    background-color: #f1f2f6;
    border-radius: 4px;
    padding: 0.1em 0.35em;
    font-size: 0.9em;
}

.admin-warning {
    background-color: #fff8e1;
    border-left: 4px solid #f0ad4e;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    font-size: 0.9rem;
    color: #6b5310;
}

.admin-status {
    min-height: 1.4rem;
    font-size: 0.9rem;
    margin: 0.5rem 0;
}

.admin-status--ok {
    color: #2d7a2d;
}

.admin-status--error {
    color: #c0392b;
}

/* Add-a-pair form */
.admin-add-form {
    background-color: #f8f9fb;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.admin-add-fields {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.admin-field {
    display: flex;
    flex-direction: column;
    flex: 1 1 200px;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: #57606f;
}

.admin-field input,
.admin-pair-input,
.admin-bulk textarea {
    font-family: inherit;
    font-size: 0.95rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid #ccd1d9;
    border-radius: 6px;
    background-color: white;
    color: #2f3542;
    width: 100%;
    box-sizing: border-box;
}

.admin-field input:focus,
.admin-pair-input:focus,
.admin-bulk textarea:focus {
    outline: 2px solid #4A90E2;
    outline-offset: 1px;
    border-color: #4A90E2;
}

.admin-arrow {
    color: #8d95a5;
    padding-bottom: 0.55rem;
    font-size: 1.1rem;
}

.admin-add-form button {
    margin-top: 0.75rem;
}

/* Bulk paste */
.admin-bulk {
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    background-color: #f8f9fb;
}

.admin-bulk summary {
    cursor: pointer;
    font-weight: 700;
    color: #357ABD;
}

.admin-bulk textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    resize: vertical;
}

.admin-bulk-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.admin-bulk-actions button,
.admin-add-form button,
.admin-actions button {
    flex: 0 0 auto;
    max-width: none;
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
}

/* Pair list */
.admin-empty {
    color: #8d95a5;
    font-style: italic;
}

.admin-pair-list {
    list-style: none;
    counter-reset: pair;
    margin: 0;
    padding: 0;
}

.admin-pair {
    counter-increment: pair;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid #f1f2f6;
}

.admin-pair::before {
    content: counter(pair);
    color: #8d95a5;
    font-size: 0.75rem;
    min-width: 2ch;
    text-align: right;
    flex: 0 0 auto;
}

.admin-pair-fields {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
}

.admin-pair-fields .admin-arrow {
    padding-bottom: 0;
}

.admin-pair-controls {
    display: flex;
    gap: 0.25rem;
    flex: 0 0 auto;
}

.admin-icon-button {
    padding: 0.35rem 0.6rem;
    font-size: 0.9rem;
    line-height: 1;
    border-radius: 6px;
    /* The global button rule sets min-width: 120px and flex: 1 0 auto. */
    flex: 0 0 auto;
    min-width: 0;
    max-width: none;
}

.admin-icon-button:disabled {
    background-color: #dfe4ea;
    color: #a4b0be;
    cursor: not-allowed;
}

.admin-icon-button--danger {
    background-color: #eb4d4b;
}

.admin-icon-button--danger:hover {
    background-color: #f75d59;
}

.admin-actions {
    margin-top: 1.5rem;
}

.admin-danger {
    background-color: #eb4d4b;
}

.admin-danger:hover {
    background-color: #f75d59;
}

.admin-danger:disabled {
    background-color: #dfe4ea;
    color: #a4b0be;
    cursor: not-allowed;
}

.admin-danger--armed {
    background-color: #b8322f;
}

/* Empty-state notice on the game page */
.no-clues-notice {
    margin: 2rem auto;
    padding: 1.5rem;
    max-width: 420px;
    background-color: #f8f9fb;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    color: #57606f;
}

.no-clues-notice h2 {
    margin-top: 0;
    color: #2f3542;
}

.no-clues-notice a {
    color: #357ABD;
    font-weight: 700;
}

@media (max-width: 560px) {
    .admin-pair {
        flex-wrap: wrap;
    }

    .admin-pair-fields {
        flex: 1 1 100%;
    }
}

/* --- Wavelength theme ----------------------------------------------------
   Visual language taken from the official Wavelength app: a starfield-dark
   ground, a teal dial that turns cream when the target is revealed, warm
   scoring bands, and a large crimson hub the needle pivots behind. Colors are
   our own approximation; no CMYK artwork or logotype is reproduced.
   ------------------------------------------------------------------------ */

:root {
    --wl-space: #0b1120;
    --wl-space-deep: #060a14;
    --wl-dial-hidden: #86b8b3;
    --wl-dial-face: #f3eee2;
    --wl-crimson: #c4453f;
    --wl-crimson-bright: #d75a53;
    --wl-band-hot: #e07b39;
    --wl-band-mid: #eaa15c;
    --wl-band-cool: #f1cba4;
    --wl-ink: #f7f4ec;
    --wl-ink-dim: #9aa6bd;
    --wl-mint: #a8cfc0;
}

body {
    background-color: var(--wl-space);
    /* Starfield, drawn with gradients so no image needs downloading. */
    background-image:
        radial-gradient(1.5px 1.5px at 12% 18%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(1.5px 1.5px at 74% 8%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 33% 62%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 88% 44%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1.5px 1.5px at 52% 88%, rgba(255, 255, 255, 0.75), transparent),
        radial-gradient(1px 1px at 6% 76%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 62% 30%, rgba(255, 255, 255, 0.55), transparent),
        radial-gradient(1.5px 1.5px at 95% 82%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(ellipse at 50% 0%, #16213c 0%, var(--wl-space) 45%, var(--wl-space-deep) 100%);
    background-size: 420px 420px, 420px 420px, 300px 300px, 300px 300px,
        520px 520px, 520px 520px, 360px 360px, 360px 360px, 100% 100%;
    background-attachment: fixed;
    color: var(--wl-ink);
}

.game-container,
.admin-container {
    background-color: transparent;
    box-shadow: none;
    color: var(--wl-ink);
}

/* The editor pages still want a readable card over the starfield. */
.admin-container {
    background-color: rgba(11, 17, 32, 0.82);
    border: 1px solid rgba(168, 207, 192, 0.18);
    backdrop-filter: blur(6px);
}

.title {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--wl-ink);
    text-shadow: none;
    font-size: 2.35rem;
}

#turn-indicator {
    color: var(--wl-ink-dim);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.8rem;
    font-weight: 700;
}

/* Dial ------------------------------------------------------------------- */

.board {
    background-color: var(--wl-dial-hidden);
    box-shadow: none;
    transition: background-color 0.45s ease;
}

.board.highlight {
    box-shadow: 0 0 40px 6px rgba(168, 207, 192, 0.35);
}

.target-area {
    background-color: var(--wl-dial-face);
}

/* The crimson hub the needle pivots behind. */
.dial-hub {
    position: absolute;
    left: 50%;
    top: calc(var(--spectrum-width) / 2);
    width: calc(var(--spectrum-width) * 0.26);
    height: calc(var(--spectrum-width) * 0.26);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, var(--wl-crimson-bright), var(--wl-crimson) 62%);
    z-index: 40;
    pointer-events: none;
}

.needle {
    width: 6px;
    background-color: var(--wl-crimson);
    border-radius: 3px;
    z-index: 30;
}

.clues-container {
    position: relative;
    z-index: 50;
    margin-top: calc(var(--spectrum-width) * 0.16);
}

.clue {
    color: var(--wl-ink);
    font-size: 1rem;
    font-weight: 700;
}

/* Replace the solid connector with the app's opposing arrows. */
.bidirectional-arrow {
    background-color: transparent;
    height: auto;
    width: calc(var(--spectrum-width) * 0.22);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bidirectional-arrow::before,
.bidirectional-arrow::after {
    position: static;
    width: auto;
    height: auto;
    border: none;
    transform: none;
    color: var(--wl-ink-dim);
    font-size: 1.1rem;
    line-height: 1;
}

.bidirectional-arrow::before { content: "\2190"; }
.bidirectional-arrow::after { content: "\2192"; }

/* Reveal overlay --------------------------------------------------------- */

.reveal-overlay {
    background-color: rgba(11, 17, 32, 0.86);
    color: var(--wl-ink);
    backdrop-filter: blur(6px);
}

/* Controls --------------------------------------------------------------- */

button {
    background-color: var(--wl-crimson);
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.03em;
    transition: background-color 0.2s ease, transform 0.12s ease;
}

button:hover {
    background-color: var(--wl-crimson-bright);
}

button:active {
    transform: scale(0.96);
}

#howToPlayButton {
    background-color: rgba(247, 244, 236, 0.12);
    color: var(--wl-ink);
    border-radius: 999px;
}

#howToPlayButton:hover {
    background-color: rgba(247, 244, 236, 0.22);
}

#newGameButton {
    background-color: var(--wl-crimson);
    border-radius: 999px;
}

#newGameButton:hover {
    background-color: var(--wl-crimson-bright);
}

#toggleButton {
    background-color: var(--wl-mint);
    color: #10261f;
}

#toggleButton:hover {
    background-color: #bcdccd;
}

#skipQuestionButton {
    background-color: rgba(247, 244, 236, 0.12);
    color: var(--wl-ink);
}

#skipQuestionButton:hover {
    background-color: rgba(247, 244, 236, 0.22);
}

/* Audio toggles ---------------------------------------------------------- */

#audioControls {
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    gap: 8px;
    z-index: 10;
}

.audio-toggle {
    background-color: rgba(247, 244, 236, 0.1);
    color: var(--wl-ink);
    border-radius: 999px;
    font-size: 1rem;
    padding: 0.45rem 0.7rem;
    min-width: 0;
    max-width: none;
    flex: 0 0 auto;
    line-height: 1;
}

.audio-toggle:hover {
    background-color: rgba(247, 244, 236, 0.2);
}

.audio-toggle[aria-pressed="false"] {
    opacity: 0.4;
}

/* Score and teams -------------------------------------------------------- */

#score,
#totalScore {
    color: var(--wl-ink);
}

.score-5 { color: var(--wl-band-hot); }
.score-3 { color: var(--wl-band-mid); }
.score-1 { color: var(--wl-band-cool); }

#psychic-info-balloon {
    background-color: rgba(247, 244, 236, 0.08);
    color: var(--wl-ink);
    border: 1px solid rgba(247, 244, 236, 0.14);
    border-radius: 12px;
}

/* Modals ----------------------------------------------------------------- */

.modal-content {
    background-color: #101a2e;
    color: var(--wl-ink);
    border: 1px solid rgba(168, 207, 192, 0.2);
}

.modal h2 {
    color: var(--wl-mint);
}

.modal-body {
    color: var(--wl-ink);
}

/* Footer ----------------------------------------------------------------- */

footer p {
    color: var(--wl-ink-dim);
}

footer nav a {
    color: var(--wl-ink-dim);
}

footer nav a:hover {
    color: var(--wl-ink);
}

/* Animations ------------------------------------------------------------- */

@keyframes wl-dial-in {
    from { transform: scale(0.94); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.target-area.revealing {
    animation: wl-dial-in 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes wl-hub-pulse {
    0% { transform: translate(-50%, -50%) scale(1); }
    45% { transform: translate(-50%, -50%) scale(1.07); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

.dial-hub.pulse {
    animation: wl-hub-pulse 0.5s ease-out;
}

@keyframes wl-title-glow {
    from { text-shadow: none; }
    to { text-shadow: 0 0 18px rgba(168, 207, 192, 0.45); }
}

.title {
    animation: wl-title-glow 3.5s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
    .title,
    .dial-hub.pulse,
    .target-area.revealing {
        animation: none;
    }

    button:active {
        transform: none;
    }
}

/* Team panel ------------------------------------------------------------- */

#totalScore {
    background-color: rgba(247, 244, 236, 0.05);
    border: 1px solid rgba(247, 244, 236, 0.12);
    border-radius: 14px;
    padding: 0.75rem;
    font-size: 1rem;
}

.team-management-instructions {
    color: var(--wl-ink-dim);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.team-score-item {
    background-color: transparent;
    border-bottom: 1px solid rgba(247, 244, 236, 0.08);
    color: var(--wl-ink);
}

.team-score-item.current-team {
    background-color: rgba(168, 207, 192, 0.12);
    border-radius: 10px;
}

.current-team {
    color: var(--wl-mint);
}

.delete-team-button {
    background-color: transparent;
    min-width: 0;
    max-width: none;
    flex: 0 0 auto;
    padding: 0.3rem 0.5rem;
}

.delete-team-button:hover {
    background-color: rgba(196, 69, 63, 0.25);
}

#addTeamButton {
    background-color: rgba(247, 244, 236, 0.12);
    color: var(--wl-ink);
    margin-top: 0.5rem;
}

#addTeamButton:hover {
    background-color: rgba(247, 244, 236, 0.22);
}

.team-indicator {
    background-color: rgba(247, 244, 236, 0.08);
    border: 1px solid rgba(247, 244, 236, 0.16);
    box-shadow: none;
    color: var(--wl-ink);
}

.team-indicator__label {
    color: var(--wl-ink-dim);
}

/* The dial needs headroom now that the labels sit below the hub. */
:root {
    --spectrum-total-height: calc(var(--spectrum-width) / 2 + var(--spectrum-width) * 0.16 + 60px);
}

/* --- Layout: game stays centerd, teams float alongside ------------------- */

/* Hidden per request. Kept in the DOM so their handlers stay wired. */
#howToPlayButton,
#newGameButton {
    display: none !important;
}

/* Only float the team card out once there is room beside a centerd 600px
   container: 600 + gap + card, doubled for the margin on both sides. */
@media (min-width: 1150px) {
    .game-container:not(.admin-container) {
        overflow: visible;
        max-height: none;
    }

    .game-container:not(.admin-container) > #sidePanelLeft,
    .game-container:not(.admin-container) > #sidePanelRight {
        position: absolute;
        top: 4rem;
        width: 240px;
        text-align: left;
    }

    /* Rounds and teams sit to the left of the dial, controls to the right. */
    .game-container:not(.admin-container) > #sidePanelLeft {
        right: calc(100% + 1.75rem);
    }

    .game-container:not(.admin-container) > #sidePanelRight {
        left: calc(100% + 1.75rem);
    }

    #totalScore .team-score-item {
        justify-content: space-between;
    }
}

/* Editor text needs to invert now that its card sits on the dark theme. */
.admin-container h1,
.admin-container h2 {
    color: var(--wl-ink);
}

.admin-container .admin-intro,
.admin-container .admin-hint,
.admin-container .admin-field,
.admin-container .admin-empty {
    color: var(--wl-ink-dim);
}

.admin-container code {
    background-color: rgba(247, 244, 236, 0.12);
    color: var(--wl-ink);
}

.admin-add-form,
.admin-bulk {
    background-color: rgba(247, 244, 236, 0.05);
    border-color: rgba(247, 244, 236, 0.14);
}

.admin-bulk summary {
    color: var(--wl-mint);
}

.admin-pair {
    border-bottom-color: rgba(247, 244, 236, 0.08);
}

.admin-pair::before {
    color: var(--wl-ink-dim);
}

.admin-warning {
    background-color: rgba(240, 173, 78, 0.12);
    border-left-color: #f0ad4e;
    color: #f2d9a8;
}

.admin-status--ok {
    color: var(--wl-mint);
}

.admin-status--error {
    color: #ff9a93;
}

.admin-icon-button {
    background-color: rgba(247, 244, 236, 0.12);
}

.admin-icon-button:hover {
    background-color: rgba(247, 244, 236, 0.22);
}

.admin-icon-button:disabled,
.admin-danger:disabled {
    background-color: rgba(247, 244, 236, 0.06);
    color: rgba(247, 244, 236, 0.3);
}

/* Re-assert the delete color after the dark-theme icon-button override. */
.admin-icon-button--danger,
.admin-danger:not(:disabled) {
    background-color: var(--wl-crimson);
}

.admin-icon-button--danger:hover,
.admin-danger:not(:disabled):hover {
    background-color: var(--wl-crimson-bright);
}

/* --- Turn indicator: quieter --------------------------------------------
   Upstream renders this as a saturated team-colored pill with a pulsing
   glow. Toned down to plain text with a small team-colored dot, so the dial
   stays the loudest thing on screen.
   ------------------------------------------------------------------------ */

.team-indicator,
.team-indicator[class*="team-color-"] {
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    animation: none;
    padding: 0.25rem 0;
    top: 0;
    margin: 0 auto 1.25rem auto;
    gap: 0.5rem;
    color: var(--wl-ink-dim);
}

.team-indicator__icon {
    font-size: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--team-color-current-primary, var(--wl-mint));
}

.team-indicator__label {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    font-weight: 600;
    opacity: 1;
    color: var(--wl-ink-dim);
}

.team-indicator__name {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wl-ink);
}

/* The narrow breakpoint hardcodes a 18.75rem board but upstream left
   --spectrum-width at its desktop value, so anything derived from the variable
   (the hub, the needle length, the label offset) was sized for a 536px dial on
   a 300px one. Point the variable at the same value the breakpoint uses. */
@media (max-width: 768px) {
    :root {
        --spectrum-width: 18.75rem;
    }
}

/* --- Vertical rhythm: fit a round on one screen -------------------------- */

.game-container:not(.admin-container) {
    padding: 1rem 2rem 1.25rem;
}

.game-container:not(.admin-container) .title {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 2.1rem;
}

/* These are empty for most of a round, but they must keep their space or the
   dial jumps between phases. Reserve one line each instead of collapsing. */
#turn-indicator {
    min-height: 1.1rem;
}

#score {
    min-height: 1.9rem;
}

#turn-indicator {
    margin: 0 0 0.5rem;
}

.team-indicator,
.team-indicator[class*="team-color-"] {
    margin-bottom: 0.6rem;
}

#psychic-info-balloon {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

#gameBoardAndCluesContainer {
    margin-top: 0.5rem;
}

.clues-container {
    margin-top: calc(var(--spectrum-width) * 0.145);
}

:root {
    --spectrum-total-height: calc(var(--spectrum-width) / 2 + var(--spectrum-width) * 0.145 + 52px);
}

.controls {
    margin-top: 0.75rem;
}

#score {
    margin-top: 0.5rem;
}

footer {
    margin-top: 0.75rem;
    font-size: 0.8rem;
}

footer p {
    margin: 0 0 0.35rem;
}

/* --- Side panel: audio, actions, teams ----------------------------------- */

#sidePanelLeft,
#sidePanelRight {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1rem;
}

#audioControls {
    position: static;
    display: flex;
    gap: 0.5rem;
}

#sideActions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.side-button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.55rem 0.8rem;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    background-color: rgba(247, 244, 236, 0.1);
    color: var(--wl-ink);
    min-width: 0;
    max-width: none;
    flex: 0 0 auto;
    transition: background-color 0.2s ease, transform 0.12s ease;
}

.side-button:hover {
    background-color: rgba(247, 244, 236, 0.2);
}

.side-button:active {
    transform: scale(0.97);
}

.side-button--danger {
    background-color: rgba(196, 69, 63, 0.85);
}

.side-button--danger:hover {
    background-color: var(--wl-crimson-bright);
}

#sidePanelLeft #totalScore {
    margin-top: 0;
}

/* Confirmation modal actions */
.modal-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    margin-top: 1.25rem;
}

.modal-actions button {
    flex: 0 1 auto;
    max-width: none;
}

#resetCancelButton {
    background-color: rgba(247, 244, 236, 0.12);
    color: var(--wl-ink);
}

#resetCancelButton:hover {
    background-color: rgba(247, 244, 236, 0.22);
}

#resetConfirmButton {
    border-radius: 999px;
}

/* Stacked layout keeps the panel centerd under the board. */
@media (max-width: 1149px) {
    #sidePanelLeft,
    #sidePanelRight {
        align-items: center;
    }

    #sideActions {
        flex-direction: row;
    }

    .side-button {
        width: auto;
    }
}

/* --- Inline SVG icons ---------------------------------------------------- */

.icon {
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.135em;
}

.icon--filled {
    fill: currentColor;
    stroke: none;
}

/* --- Audio toggles: icon plus label ------------------------------------- */

#audioControls {
    flex-direction: column;
    gap: 0.4rem;
}

.audio-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    box-sizing: border-box;
    justify-content: flex-start;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.55rem 0.8rem;
    opacity: 1;
}

.audio-toggle .icon {
    width: 1.15em;
    height: 1.15em;
}

.audio-toggle__label {
    white-space: nowrap;
}

/* Show the state the toggle is currently in. */
.audio-toggle[aria-pressed="true"] .icon--off,
.audio-toggle[aria-pressed="false"] .icon--on {
    display: none;
}

.audio-toggle[aria-pressed="false"] {
    opacity: 1;
    color: var(--wl-ink-dim);
}

.audio-toggle[aria-pressed="true"] {
    color: var(--wl-mint);
}

/* --- Team rows ---------------------------------------------------------- */

.team-score-value {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--wl-band-mid);
    font-weight: 700;
}

.edit-icon {
    margin-left: 0.35rem;
    color: var(--wl-ink-dim);
}

.delete-team-button .icon {
    width: 1.05em;
    height: 1.05em;
}

/* --- Play area fills the viewport --------------------------------------- */

.game-container:not(.admin-container) {
    box-sizing: border-box;
    min-height: 100vh;
    max-height: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Children stay full width so the centerd text layout is unchanged. */
.game-container:not(.admin-container) > * {
    flex: 0 0 auto;
}

.game-container:not(.admin-container) > footer {
    margin-top: auto;
    padding-top: 1rem;
}

/* Team rows sit flush: no border, no card of their own. */
.team-score-item,
.team-score-item.current-team {
    border: none;
    border-radius: 8px;
    margin-bottom: 0;
}

/* --- Aura: light bleeding off the arc ------------------------------------
   Drawn with box-shadow on the dial itself. The board clips its children with
   overflow: hidden, but box-shadow paints outside that, so the glow escapes the
   arc and follows its exact silhouette. Two layers: a tight rim and a wide
   atmospheric wash. The hue tracks the dial's state.
   ------------------------------------------------------------------------ */

.board {
    --aura-rim: rgba(134, 184, 179, 0.45);
    --aura-wash: rgba(134, 184, 179, 0.2);
    box-shadow:
        0 0 34px 2px var(--aura-rim),
        0 0 110px 26px var(--aura-wash);
    animation: wl-aura-breathe 5.5s ease-in-out infinite;
}

/* Cream face showing: the target is exposed, so the aura warms up. */
.board.dial-revealed {
    --aura-rim: rgba(224, 123, 57, 0.4);
    --aura-wash: rgba(241, 203, 164, 0.2);
}

/* The tap-to-start highlight keeps its brighter treatment. */
.board.highlight {
    --aura-rim: rgba(168, 207, 192, 0.6);
    --aura-wash: rgba(134, 184, 179, 0.3);
}

@keyframes wl-aura-breathe {
    0%, 100% {
        box-shadow:
            0 0 30px 2px var(--aura-rim),
            0 0 96px 20px var(--aura-wash);
    }
    50% {
        box-shadow:
            0 0 44px 5px var(--aura-rim),
            0 0 140px 34px var(--aura-wash);
    }
}

@media (prefers-reduced-motion: reduce) {
    .board {
        animation: none;
    }
}

/* Side buttons carry an icon alongside their label, like the audio toggles. */
.side-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-align: left;
}

.side-button .icon {
    width: 1.15em;
    height: 1.15em;
}

/* Upstream pulses a lavender glow around the whole container during the
   psychic's turn. On the dark theme that reads as a stray box, and the dial's
   own aura now carries that job. */
.game-container.psychic-turn {
    animation: none;
    box-shadow: none;
}

/* Explicit On/Off state, so it does not rely on reading the icon or its color.
   Driven by aria-pressed, which is also what assistive tech announces. */
.audio-toggle::after {
    content: "Off";
    margin-left: auto;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background-color: rgba(247, 244, 236, 0.1);
    color: var(--wl-ink-dim);
}

.audio-toggle[aria-pressed="true"]::after {
    content: "On";
    background-color: rgba(168, 207, 192, 0.22);
    color: var(--wl-mint);
}

/* --- Team rows: group icon, centerd Add Team ----------------------------- */

.team-row-icon {
    display: inline-flex;
    color: var(--wl-ink-dim);
    flex: 0 0 auto;
    margin-right: 0.5rem;
}

/* The name takes the slack so the score and bin stay right-aligned. */
.team-score-item .team-name-display {
    flex: 1 1 auto;
    text-align: left;
}

#addTeamButton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-left: auto;
    margin-right: auto;
    /* The global button rule caps width at 150px, which wraps the label. */
    width: auto;
    max-width: none;
    min-width: 0;
    white-space: nowrap;
    padding: 0.55rem 1.1rem;
    font-size: 0.9rem;
}

#addTeamButton .icon {
    width: 1.05em;
    height: 1.05em;
}

/* Delete stays out of the way until you reach for the row. Gated on
   (hover: hover) so touch devices — which never hover — keep it visible rather
   than losing the control entirely. :focus-within covers keyboard users. */
@media (hover: hover) {
    .delete-team-button {
        opacity: 0;
        transition: opacity 0.15s ease-in-out;
    }

    .team-score-item:hover .delete-team-button,
    .team-score-item:focus-within .delete-team-button {
        opacity: 1;
    }
}

/* --- Title waves --------------------------------------------------------- */

.game-container:not(.admin-container) .title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
}

.title-wave {
    width: 4.5rem;
    height: 1.1rem;
    flex: 0 0 auto;
    fill: none;
    stroke: var(--wl-mint);
    stroke-width: 1.6;
    stroke-linecap: round;
    opacity: 0.55;
}

/* The waves ride out from the title, so fade each one towards its outer end. */
.title-wave:first-child {
    mask-image: linear-gradient(to right, transparent, black 70%);
}

.title-wave:last-child {
    mask-image: linear-gradient(to left, transparent, black 70%);
}

@media (max-width: 600px) {
    .title-wave {
        width: 2.25rem;
    }

    .game-container:not(.admin-container) .title {
        gap: 0.5rem;
    }
}

/* With one team left, deleting is impossible — hide the control rather than
   showing a dimmed dead button. More specific than the :disabled rule above. */
.team-score-item .delete-team-button:disabled {
    opacity: 0;
    pointer-events: none;
}

/* --- Warp starfield ------------------------------------------------------
   stars.js inserts the canvas. Negative z-index puts it above the body's
   background but below every bit of UI. On the warp page the static CSS star
   dots are dropped so the two do not overlap; the nebula wash stays.
   ------------------------------------------------------------------------ */

#starfield {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    display: block;
}

body.warp {
    background-image:
        radial-gradient(ellipse at 50% 0%, #16213c 0%, var(--wl-space) 45%, var(--wl-space-deep) 100%);
    background-size: 100% 100%;
}

/* --- Keep the dial anchored across phases --------------------------------
   The psychic's hint balloon is toggled with visibility, not display, so its
   box is always reserved. Combined with the reserved turn-indicator and score
   lines above, the dial sits at the same y in every phase.
   ------------------------------------------------------------------------ */

#psychic-info-balloon {
    display: block;
}

/* --- Title waves travel outward -----------------------------------------
   Each path is drawn a wavelength longer than its viewBox at both ends, so
   shifting it by exactly one wavelength (16 user units) loops seamlessly. The
   two sides travel in opposite directions, away from the title.
   ------------------------------------------------------------------------ */

.title-wave {
    overflow: hidden;
}

.title-wave:first-child path {
    animation: wl-wave-left 3.2s linear infinite;
}

.title-wave:last-child path {
    animation: wl-wave-right 3.2s linear infinite;
}

@keyframes wl-wave-left {
    from { transform: translateX(0); }
    to { transform: translateX(-16px); }
}

@keyframes wl-wave-right {
    from { transform: translateX(0); }
    to { transform: translateX(16px); }
}

@media (prefers-reduced-motion: reduce) {
    .title-wave path {
        animation: none;
    }
}

/* The hint balloon now sits under the spectrum, between it and the controls. */
#psychic-info-balloon {
    margin: 0 auto 0.6rem;
    max-width: 26rem;
}

/* --- Round progress ------------------------------------------------------ */

#roundPanel {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.7rem 0.8rem;
    border-radius: 14px;
    background-color: rgba(247, 244, 236, 0.05);
    border: 1px solid rgba(247, 244, 236, 0.12);
}

#roundProgressLabel {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wl-ink-dim);
}

#roundProgressTrack {
    height: 6px;
    border-radius: 999px;
    background-color: rgba(247, 244, 236, 0.12);
    overflow: hidden;
}

#roundProgressFill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--wl-mint), var(--wl-band-mid));
    transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

#roundLengthPicker {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.round-picker-label {
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wl-ink-dim);
    margin-right: auto;
}

.round-option {
    min-width: 0;
    max-width: none;
    flex: 0 0 auto;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 999px;
    background-color: rgba(247, 244, 236, 0.1);
    color: var(--wl-ink-dim);
}

.round-option:hover {
    background-color: rgba(247, 244, 236, 0.2);
}

.round-option[aria-pressed="true"] {
    background-color: rgba(168, 207, 192, 0.22);
    color: var(--wl-mint);
}

/* --- Final scores -------------------------------------------------------- */

.final-scores {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
}

.final-scores li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid rgba(247, 244, 236, 0.1);
}

.final-scores li:first-child strong {
    color: var(--wl-band-mid);
}

#playAgainButton {
    background-color: var(--wl-mint);
    color: #10261f;
    border-radius: 999px;
}

#playAgainButton:hover {
    background-color: #bcdccd;
}

#gameOverCloseButton {
    background-color: rgba(247, 244, 236, 0.12);
    color: var(--wl-ink);
}

#gameOverCloseButton:hover {
    background-color: rgba(247, 244, 236, 0.22);
}

/* --- Clue editor option rows -------------------------------------------- */

.admin-option {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    border-radius: 10px;
    background-color: rgba(247, 244, 236, 0.05);
    border: 1px solid rgba(247, 244, 236, 0.14);
    cursor: pointer;
}

.admin-option input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.15rem;
    accent-color: var(--wl-mint);
    flex: 0 0 auto;
}

.admin-option strong {
    display: block;
    color: var(--wl-ink);
    font-size: 0.95rem;
}

.admin-option small {
    display: block;
    margin-top: 0.2rem;
    color: var(--wl-ink-dim);
    font-size: 0.8rem;
    line-height: 1.45;
}

/* --- Clue editor header and options ------------------------------------- */

.admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.admin-header h1 {
    margin: 0;
}

.admin-play-button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    background-color: var(--wl-mint);
    color: #10261f;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    white-space: nowrap;
}

.admin-play-button:hover {
    background-color: #bcdccd;
}

.admin-play-button .icon {
    width: 1.05em;
    height: 1.05em;
    fill: currentColor;
    stroke: none;
}

.admin-option--inline {
    align-items: center;
    justify-content: space-between;
    cursor: default;
}

.admin-option--inline input[type="number"] {
    width: 5rem;
    flex: 0 0 auto;
    font-family: inherit;
    font-size: 0.95rem;
    text-align: center;
    padding: 0.45rem 0.5rem;
    border: 1px solid #ccd1d9;
    border-radius: 8px;
}

/* The empty-state card predates the dark theme. */
.no-clues-notice {
    background-color: rgba(247, 244, 236, 0.06);
    border-color: rgba(247, 244, 236, 0.14);
    color: var(--wl-ink-dim);
}

.no-clues-notice h2 {
    color: var(--wl-ink);
}

.no-clues-notice a {
    color: var(--wl-mint);
}

/* Says which list the editor is showing and where it is stored. */
.admin-source-note {
    margin: 0.25rem 0 0.75rem;
    font-size: 0.85rem;
    color: var(--wl-mint);
}

.admin-source-note--default {
    color: var(--wl-band-mid);
}

.admin-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.admin-actions button {
    flex: 0 0 auto;
    max-width: none;
    min-width: 0;
    padding: 0.55rem 1rem;
    font-size: 0.9rem;
}

#restoreDefaultsButton {
    background-color: rgba(247, 244, 236, 0.12);
    color: var(--wl-ink);
}

#restoreDefaultsButton:hover {
    background-color: rgba(247, 244, 236, 0.22);
}

/* --- Saved decks --------------------------------------------------------- */

.admin-decks {
    padding: 0.9rem 1rem;
    margin-bottom: 1.5rem;
    border-radius: 10px;
    background-color: rgba(247, 244, 236, 0.05);
    border: 1px solid rgba(247, 244, 236, 0.14);
}

.admin-deck-list {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
}

.admin-deck {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid rgba(247, 244, 236, 0.08);
}

.admin-deck-name {
    flex: 1 1 auto;
    font-weight: 700;
    color: var(--wl-ink);
    min-width: 0;
    overflow-wrap: anywhere;
}

.admin-deck-count {
    flex: 0 0 auto;
    font-size: 0.8rem;
    color: var(--wl-ink-dim);
}

.admin-deck-button {
    flex: 0 0 auto;
    min-width: 0;
    max-width: none;
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
    border-radius: 999px;
    background-color: rgba(247, 244, 236, 0.12);
    color: var(--wl-ink);
}

.admin-deck-button:hover {
    background-color: rgba(247, 244, 236, 0.22);
}

.admin-deck-button--danger {
    background-color: rgba(196, 69, 63, 0.75);
}

.admin-deck-button--danger:hover {
    background-color: var(--wl-crimson-bright);
}

.admin-deck-save {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.admin-deck-save .admin-field {
    flex: 1 1 220px;
}

.admin-deck-save button {
    flex: 0 0 auto;
    min-width: 0;
    max-width: none;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

/* --- Deck sticker --------------------------------------------------------
   A starburst pinned beside the title on a deck page, in the manner of a
   "brand new!" flash on packaging. Injected by tools-make-deck.py.
   ------------------------------------------------------------------------ */

.birthday-sticker {
    position: absolute;
    /* Sits in a band of its own above the content. The result messages run the
       full width of the container, so anything overlapping their line gets
       covered by a long one. */
    /* The rotated bounding box reaches ~10px above the CSS box, so this cannot
       sit flush against the container's top edge. */
    /* At this size the rotated bounding box reaches ~14px above the CSS box. */
    top: 1.25rem;
    right: -1.5rem;
    width: 9rem;
    height: 9rem;
    transform: rotate(-12deg);
    pointer-events: none;
    z-index: 20;
    animation: wl-sticker-pop 4s ease-in-out infinite;
    transform-origin: center;
}

.birthday-sticker svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45));
}

.birthday-sticker polygon {
    fill: var(--wl-crimson);
    stroke: var(--wl-dial-face);
    stroke-width: 3;
}

.sticker-line {
    /* y is the visual middle of the line rather than its baseline, so the three
       lines sit centered in the star instead of riding high. */
    dominant-baseline: middle;
    fill: var(--wl-dial-face);
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-size: 22px;
    text-anchor: middle;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.sticker-line--big {
    font-size: 38px;
    fill: #ffe6a8;
}

@keyframes wl-sticker-pop {
    0%, 100% { transform: rotate(-12deg) scale(1); }
    50% { transform: rotate(-9deg) scale(1.05); }
}

/* Room for the sticker above the title. It lives on the audience screen now,
   so the presenter's window needs no allowance. */
body.audience .game-container {
    padding-top: 4.25rem;
}

@media (prefers-reduced-motion: reduce) {
    .birthday-sticker {
        animation: none;
    }
}

/* Below the two-column breakpoint the container is narrower, so tuck it in. */
@media (max-width: 1149px) {
    .birthday-sticker {
        width: 7.5rem;
        height: 7.5rem;
        top: 0.25rem;
        right: 0.25rem;
    }
}

@media (max-width: 600px) {
    .birthday-sticker {
        width: 5.25rem;
        height: 5.25rem;
        top: 0;
        right: 0;
    }
}

/* The Julie edition plays a short, deliberately ordered list, so skipping a
   question would burn one of the eleven. Hidden here rather than removed from
   the markup so the button's handler stays intact. !important because
   script.js sets display inline when entering the psychic phase. */
body[data-deck="julie"] #skipQuestionButton {
    display: none !important;
}

/* --- Spectrum labels tight under the arc ---------------------------------
   The labels used to sit below the hub, a long way from the dial. They now sit
   directly beneath the arc's flat edge, flanking the hub. The single centre
   arrow is dropped — the hub covers that spot — and each label carries its own
   outward arrow instead, as the official app does.
   ------------------------------------------------------------------------ */

.clues-container {
    margin-top: 0.4rem;
    align-items: flex-start;
}

.bidirectional-arrow {
    display: none;
}

/* Keep the text clear of the hub, which overlaps the inner half of each side. */
#leftClue {
    padding-right: calc(var(--spectrum-width) * 0.15);
}

#rightClue {
    padding-left: calc(var(--spectrum-width) * 0.15);
}

#leftClue::before {
    content: "\2190\00a0";
    color: var(--wl-ink-dim);
    font-weight: 400;
}

#rightClue::after {
    content: "\00a0\2192";
    color: var(--wl-ink-dim);
    font-weight: 400;
}

/* The dial block no longer needs room for a label row below the hub. */
:root {
    --spectrum-total-height: calc(var(--spectrum-width) / 2 + var(--spectrum-width) * 0.19 + 24px);
}

.final-scores-label {
    margin: 0 0 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wl-ink-dim);
    text-align: left;
}

/* Confetti canvas stacks above the modal, which the library's default canvas
   does not. Pointer events off so it never blocks the panel's buttons. */
#confettiCanvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    pointer-events: none;
}

/* --- Audience screen -----------------------------------------------------
   A read-only mirror for the room: bigger type, no controls, and no target
   until the round is revealed.
   ------------------------------------------------------------------------ */

.audience-container {
    width: min(1100px, 94vw);
    text-align: center;
    --spectrum-width: min(760px, 82vw);
}

.audience-waiting {
    margin: 4rem auto;
    color: var(--wl-ink-dim);
    font-size: 1.2rem;
}

.audience-hint {
    font-size: 0.9rem;
    opacity: 0.75;
}

.audience-round {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--wl-ink-dim);
    min-height: 1.2rem;
}

.audience-turn {
    margin: 0.2rem 0 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--wl-ink);
    min-height: 1.9rem;
}

.audience-message {
    font-size: 1.05rem;
    color: var(--wl-mint);
    min-height: 1.6rem;
    margin-bottom: 0.25rem;
}

/* The spectrum ends are what the room reads most, so they get the largest type. */
.audience .clue {
    font-size: 1.5rem;
}

.audience-scores {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem 1.25rem;
    margin: 1rem 0 0;
    padding: 0;
}

.audience-score {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    background-color: rgba(247, 244, 236, 0.06);
    font-size: 1.1rem;
}

.audience-score strong {
    color: var(--wl-band-mid);
    font-size: 1.25rem;
}

.audience-score.is-current {
    background-color: rgba(168, 207, 192, 0.16);
    color: var(--wl-mint);
}

.audience-score.is-current strong {
    color: var(--wl-mint);
}

/* The audience's larger labels wrap to two lines, so the dial block cannot use
   the fixed height the presenter's tighter type allows. */
.audience #gameBoardAndCluesContainer {
    height: auto;
    padding-bottom: 0.5rem;
    /* The hub hangs below the arc by 13% of the dial's width. Without room for
       that overhang the centre score chip ended up behind it. */
    min-height: calc(var(--spectrum-width) * 0.5 + var(--spectrum-width) * 0.13 + 0.75rem);
}

/* --- Full-screen control on the audience screen -------------------------- */

.fullscreen-button {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    max-width: none;
    flex: 0 0 auto;
    padding: 0.5rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 999px;
    background-color: rgba(247, 244, 236, 0.1);
    color: var(--wl-ink);
    /* Out of the way until wanted: the room should be looking at the dial. */
    opacity: 0.25;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

.fullscreen-button:hover,
.fullscreen-button:focus-visible {
    opacity: 1;
    background-color: rgba(247, 244, 236, 0.2);
}

.fullscreen-button .icon {
    width: 1.1em;
    height: 1.1em;
}

.fullscreen-button .icon--exit,
.fullscreen-button[aria-pressed="true"] .icon--enter {
    display: none;
}

.fullscreen-button[aria-pressed="true"] .icon--exit {
    display: block;
}

.audience-hint kbd {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 5px;
    background-color: rgba(247, 244, 236, 0.14);
    border: 1px solid rgba(247, 244, 236, 0.2);
    font-family: inherit;
    font-size: 0.85em;
    font-weight: 700;
}

/* The audience dial is draggable while the guessers have it. */
.audience .board {
    cursor: grab;
    touch-action: none;
}

.audience .board:active {
    cursor: grabbing;
}

/* --- Ripples off the dial ------------------------------------------------
   Arcs that expand out from the hub and fade, echoing the arc's own shape.
   They live in the dial container rather than the board, which clips its
   children, and sit behind everything so they never obscure the target.
   ------------------------------------------------------------------------ */

.dial-waves {
    position: absolute;
    left: 50%;
    top: 0;
    width: var(--spectrum-width);
    height: calc(var(--spectrum-width) / 2);
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 0;
}

.dial-waves span {
    position: absolute;
    inset: 0;
    /* A closed semicircle, flat edge included, so the ripple reads as the dial's
       own outline expanding rather than an open arc. */
    border: 3px solid rgba(134, 184, 179, 0.55);
    border-radius: calc(var(--spectrum-width) / 2) calc(var(--spectrum-width) / 2) 0 0;
    /* Grow about the shape's own centre, not the hub, so the flat bottom edge
       travels downward as the arc travels up and out. */
    transform-origin: 50% 50%;
    opacity: 0;
    /* Softened so they read as light spreading rather than drawn outlines. */
    filter: blur(3px);
    animation: wl-ripple 5.4s ease-out infinite;
}

.dial-waves span:nth-child(2) { animation-delay: 1.8s; }
.dial-waves span:nth-child(3) { animation-delay: 3.6s; }

/* Warm to match the dial once the target is showing. */
#gameBoardAndCluesContainer:has(.board.dial-revealed) .dial-waves span {
    border-color: rgba(224, 123, 57, 0.45);
}

@keyframes wl-ripple {
    0% { transform: scale(1); opacity: 0.55; filter: blur(2px); }
    80% { opacity: 0.08; }
    100% { transform: scale(1.45); opacity: 0; filter: blur(7px); }
}

@media (prefers-reduced-motion: reduce) {
    .dial-waves {
        display: none;
    }
}

/* The audience's final card is for reading across a room, and has no buttons:
   the presenter decides what happens next. */
.audience #audienceGameOver .modal-content {
    margin-top: 12vh;
    max-width: 640px;
}

.audience #audienceWinner {
    font-size: 2rem;
}

.audience #audienceGameOver .final-scores li {
    font-size: 1.35rem;
    padding: 0.6rem 0;
}

.audience #audienceGameOver .final-scores li:first-child strong {
    color: var(--wl-band-mid);
}

/* Progress bar on the audience screen: wider and thicker, to read from a sofa. */
.audience #roundProgressTrack {
    height: 8px;
    max-width: 420px;
    margin: 0.5rem auto 0;
}