body {
    margin: 0;
    background: #fdf6e3;
    color: #222;
    font-family: "JetBrains Mono", monospace;
}

.container {

    width:1400px;

    max-width:90%;

    margin:60px auto;

    display:grid;

    grid-template-columns: 2fr 1fr;

    gap:50px;

    align-items:start;

}

/* .header {
    text-align: center;
    font-size: 28px;
    margin-bottom: 10px;
} */
.header,
.sidebar h2 {

    font-size:22px;

    font-weight:bold;

    border-bottom:1px solid #888;

    padding-bottom:10px;

    margin-bottom:20px;

}

/* .chat-panel {
    width: 100%;
} */

.chat-panel {

    padding:25px 30px;

    flex: 3;

}

.sidebar {

    background:#fffff0;

    padding:25px 30px;

    border-left:1px solid #aaa;

    /* flex: 0 0 400px; */

    width: 500px;

    flex-shrink: 0;
}

#chat-window {
    min-height:450px;

    padding:30px 0;

    border-top:1px solid #aaa;

    border-bottom:1px solid #aaa;
}

.assistant-message {
    /* margin: 15px 0; */

    margin-bottom:25px;

    line-height:1.8;
}

.assistant-message::before {
    content: "GPT> ";
    color: #008000;
}

/* Shown while waiting for the host's first words */
.thinking-dots span {
    animation: thinking-blink 1.4s infinite both;
}

.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes thinking-blink {
    0%, 80%, 100% { opacity: 0.2; }
    40% { opacity: 1; }
}

.user-message::before {

    content:"> ";

    color:#555;

}

.input-container {
    margin-top:30px;
    display:flex;
}

input {
    width:80%;
    background:none;
    border:none;
    border-bottom:1px solid #555;
    font-family:inherit;
    font-size:16px;
    padding:8px;
    flex:1;
}

input:focus {

    outline:none;

}

button {
    background:none;
    border:1px solid #555;
    padding:8px 15px;
    font-family:inherit;
}

/* =========================
   Rules Modal
   ========================= */

.hidden {
    display: none !important;
}

.masked {
    opacity: 0.8;
}

.modal {

    position: fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,0.25);

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:1000;

}



.modal-content {

    width:500px;

    max-width:90%;

    /* Tall dialogs (e.g. the rules) scroll inside instead of running off small screens.
       dvh leaves out the phone browser's address bar; vh is the fallback for older browsers. */
    max-height:90vh;

    max-height:90dvh;

    overflow-y:auto;

    box-sizing:border-box;

    background:#fffff0;

    border:1px solid #555;

    padding:30px;

    font-family:"JetBrains Mono", monospace;

    color:#222;

    line-height:1.6;

}



.modal-content h2 {

    margin-top:0;

    color:#008000;

}



.modal-content ul {

    padding-left:25px;

}



.modal-content button {

    margin-top:20px;

    padding:8px 25px;

    font-family:inherit;

    background:#222;

    color:white;

    border:1px solid #222;

    cursor:pointer;

}



.modal-content button:hover {

    background:#008000;

}



.modal-buttons {

    display:flex;

    justify-content:center;

    gap:12px;

}



.modal-content .secondary-button {

    display:block;

    margin-top:10px;

    background:none;

    color:#222;

    border:1px solid #888;

}



.modal-content .secondary-button:hover {

    background:rgba(0,128,0,0.1);

    color:#222;

}

.sidebar {

    border-left:1px solid #aaa;

    padding-left:25px;

}


.counter {

    margin-bottom:10px;

}


.counter span {

    color:#008000;

    font-weight:bold;

}


#agenda {

    margin-top:20px;

    line-height:1.8;

}

.agenda-item {

    padding: 12px 15px;

    margin-bottom: 12px;

    border-radius: 6px;

    width: 100%;

    box-sizing: border-box;

}

.agenda-item.revealed {

    border-left: 4px solid #22c55e;

}


.agenda-item.auto-revealed {

    border-left: 4px solid #ef4444;

    background: rgba(239,68,68,0.15);

}

.agenda-title {
    font-family: "JetBrains Mono", monospace;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 8px;
}


.agenda-description {
    font-family: "JetBrains Mono", monospace;
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.5;
    opacity: 0.85;
}

.agenda-modal-content {

    display: flex;
    flex-direction: column;
    width: 750px;
    max-width: calc(100vw - 80px);
}


#final-agenda {

    overflow-y: auto;

    max-height: 60vh;

    padding-right: 10px;

}

#prompt-input:disabled,
#send-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#send-button:disabled:hover {
    background: inherit;
}


.closed-screen {

    min-height:100vh;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

}



.closed-screen button {

    margin-top:20px;

    padding:8px 25px;

    font-family:inherit;

    background:#222;

    color:white;

    border:1px solid #222;

    cursor:pointer;

}



.closed-screen button:hover {

    background:#008000;

}



/* ── Avatar picker ───────────────────────────── */

.avatar-options {

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-top:15px;

}

.modal-content .avatar-option {

    margin-top:0;

    width:100%;

    background:#fffff0;

    color:#222;

    text-align:left;

}

.modal-content .avatar-option:hover {

    background:#008000;

    color:white;

}

.avatar-error {

    color:#b00020;

    margin-top:10px;

}

.player-name {

    margin-left:10px;

    font-size:0.85em;

    color:#008000;

}



/* ── Leaderboard (results dialog and insights page) ── */

.leaderboard {

    width:100%;

    border-collapse:collapse;

    margin-top:10px;

    font-size:0.9em;

}

.leaderboard th,
.leaderboard td {

    padding:4px 8px;

    border-bottom:1px solid #ddd;

    text-align:left;

}

.leaderboard tr.you td {

    background:#e6f4e6;

    font-weight:bold;

}

.leaderboard-note {

    font-size:0.85em;

    color:#555;

}



/* ── Insights page ───────────────────────────── */

.insights {

    max-width:1100px;

    margin:0 auto;

    padding:30px 20px;

}

.insights-header {

    display:flex;

    justify-content:space-between;

    align-items:baseline;

    flex-wrap:wrap;

    gap:10px;

}

.insights-meta,
.insights-meta a {

    color:#555;

    font-size:0.9em;

}

.insights-tiles {

    display:grid;

    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));

    gap:15px;

    margin:25px 0;

}

.tile {

    background:#fffff0;

    border:1px solid #555;

    padding:15px;

}

.tile-value {

    font-size:2.2em;

    font-weight:700;

    color:#008000;

}

.tile-label {

    color:#555;

}

.insights-columns {

    display:grid;

    grid-template-columns:repeat(auto-fit, minmax(min(420px, 100%), 1fr));

    gap:30px;

}

.item-row {

    display:grid;

    grid-template-columns:1fr 120px 150px;

    gap:10px;

    align-items:center;

    padding:4px 0;

    font-size:0.85em;

}

.item-bar {

    height:10px;

    background:#e8e2cf;

}

.item-fill {

    height:100%;

    background:#008000;

}

.insights-facts {

    margin-top:30px;

    padding:15px;

    border-left:4px solid #008000;

    background:#fffff0;

}

.empty {

    color:#555;

}



/* ── Results: this game vs. best game ────────── */

.results-summary {

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;

    margin:10px 0;

}

.summary-panel {

    border:1px solid #555;

    padding:10px;

    font-size:0.9em;

}

.summary-title {

    font-weight:700;

    color:#008000;

    margin-bottom:4px;

}

.leaderboard-position {

    margin-top:15px;

    font-weight:700;

}



/* ── Game stats disclaimer (rules dialog) ─────── */

.disclaimer {

    margin-top:15px;

    padding:10px 12px;

    border-left:4px solid #008000;

    background:#f4f1e4;

    font-size:0.8em;

    line-height:1.5;

}

.disclaimer p {

    margin:6px 0 0;

}




/* ── Phone layout ────────────────────────────────
   On desktop nothing below changes the page, except hiding the phone-only elements.
   On a phone the page becomes one full-height column: header, a compact status bar
   (the sidebar's counters and hint button), the chat (the only part that scrolls),
   and the question box at the bottom. The agenda opens as a panel from the status bar. */

#agenda-toggle,
.agenda-panel-header,
#agenda-backdrop {

    display:none;

}

@media (max-width: 800px) {

    .container {

        width:100%;

        max-width:none;

        margin:0;

        height:100vh;

        height:100dvh;

        display:flex;

        flex-direction:column;

        gap:0;

    }

    /* Its children join the column directly, so the status bar can sit between header and chat */
    .chat-panel {

        display:contents;

    }

    .header {

        order:1;

        margin:0;

        padding:12px 16px 8px;

        font-size:18px;

    }

    /* The sidebar becomes the status bar */
    .sidebar {

        order:2;

        width:auto;

        display:flex;

        flex-wrap:wrap;

        align-items:center;

        gap:6px 14px;

        padding:6px 16px 10px;

        border-left:none;

        border-bottom:1px solid #aaa;

    }

    .sidebar h2,
    .sidebar hr {

        display:none;

    }

    .counter {

        margin:0;

    }

    #hint-button,
    #agenda-toggle {

        padding:6px 12px;

    }

    #agenda-toggle {

        display:inline-block;

        margin-left:auto;

    }

    #agenda-toggle.new-reveal {

        background:#008000;

        color:white;

        border-color:#008000;

    }

    #chat-window {

        order:3;

        flex:1;

        min-height:0;

        overflow-y:auto;

        padding:16px;

        border-top:none;

        border-bottom:none;

    }

    .input-container {

        order:4;

        margin:0;

        gap:8px;

        padding:10px 16px calc(10px + env(safe-area-inset-bottom));

        border-top:1px solid #aaa;

        background:#fdf6e3;

    }

    /* The agenda as a panel sliding up from the bottom */
    #agenda-panel {

        position:fixed;

        left:0;

        right:0;

        bottom:0;

        max-height:75vh;

        max-height:75dvh;

        overflow-y:auto;

        background:#fffff0;

        border-top:1px solid #555;

        padding:0 16px calc(16px + env(safe-area-inset-bottom));

        box-sizing:border-box;

        transform:translateY(100%);

        visibility:hidden;

        transition:transform 0.2s ease, visibility 0.2s;

        z-index:950;

    }

    body.agenda-open #agenda-panel {

        transform:none;

        visibility:visible;

    }

    .agenda-panel-header {

        position:sticky;

        top:0;

        display:flex;

        justify-content:space-between;

        align-items:center;

        padding:12px 0;

        background:#fffff0;

        font-weight:bold;

    }

    #agenda {

        margin-top:0;

    }

    body.agenda-open #agenda-backdrop {

        display:block;

        position:fixed;

        inset:0;

        background:rgba(0,0,0,0.25);

        z-index:940;

    }

    /* Big enough to tap */
    button {

        min-height:44px;

    }

    /* Dialogs become near full-width sheets */
    .modal-content {

        width:calc(100% - 24px);

        max-width:none;

        padding:20px;

    }

    .modal-content button,
    .modal-buttons button {

        width:100%;

    }

    .modal-buttons {

        flex-direction:column;

        gap:0;

    }

    .results-summary {

        grid-template-columns:1fr;

    }

    /* Insights page (mainly for the projector; here it just shouldn't break) */
    .insights {

        padding:20px 16px;

    }

    .item-row {

        grid-template-columns:1fr 90px;

        grid-template-areas:"title title" "bar numbers";

    }

    .item-title {

        grid-area:title;

    }

    .item-bar {

        grid-area:bar;

    }

    .item-numbers {

        grid-area:numbers;

    }

}