/* Reset all default browser margins and paddings */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

:root {
    /* --- Theme colors (dark by default) --- */
    --bg: #313030;
    --card-bg: rgba(255, 255, 255, 0.06);
    --card-border: rgba(255, 255, 255, 0.08);
    --text: #ffffff;
    --text-secondary: #ddd;
    --text-muted: #aaa;
    --accent: #f4a261;
    --btn-bg: white;
    --link-btn-bg: white;
    --btn-text: #111;
    --link-btn-text: #111;
    --btn-hover: rgb(191, 230, 207);
    --link-btn-hover: rgb(191, 230, 207);
    --btn-hover-text: #111;
    --link-btn-hover-text: #111;
    --skip-bg: #e0dcd5;
    --guessed-bg: #b7c9a8;
    --dialog-bg: #2a2a2a;
    --timer-bg: rgba(255, 255, 255, 0.08);
    --input-bg: white;
    --input-text: #111;
    --table-border: 2px solid rgba(255, 255, 255, 0.2);
    --table-border-light: 1px solid rgba(255, 255, 255, 0.1);

    /* --- Sizes --- */
    --card-max-w: 300px;
    --card-ratio: 1 / 1;
    --card-vw: 85vw;
    --game-gap: 0.75rem;
    --game-inline-pad: 1.25rem;
    --plate-w: min(500px, calc(100vw - 4rem));
    --plate-h: calc(100dvh - 4rem);
    --page-pad: 2rem;
    --cat-hero-size: 270px;
    --cat-waiting-size: 200px;
}

.theme-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 100;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--text);
    font-size: 1.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

.theme-toggle:hover {
    background: var(--btn-hover);
}


/* --- Light theme --- */
body.light-theme {
    --bg: #f0ebe3;
    --card-bg: rgba(255, 255, 255, 0.8);
    --card-border: rgba(0, 0, 0, 0.1);
    --text: #2c1810;
    --text-secondary: #4a3520;
    --text-muted: #7a6a5a;
    --accent: #d4782f;
    --btn-bg: #5a8a6a;
    --link-btn-bg: #c5dcc5;
    --btn-text: #ffffff;
    --link-btn-text: #1a2a14;
    --btn-hover: #4a7a5a;
    --link-btn-hover: #a8c8a0;
    --btn-hover-text: #ffffff;
    --link-btn-hover-text: #1a2a14;
    --skip-bg: #d4cec4;
    --guessed-bg: #a8bf9a;
    --dialog-bg: #f5f0e8;
    --timer-bg: rgba(0, 0, 0, 0.05);
    --input-bg: #f5f0e8;
    --input-text: #2c1810;
    --table-border: 2px solid rgba(0, 0, 0, 0.2);
    --table-border-light: 1px solid rgba(0, 0, 0, 0.1);
}

/* Main page settings */
body {
    background-color: var(--bg); color: var(--text);
    /* System font stack for maximum performance - no external requests, instant rendering */
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    min-height: 100vh;         /* full viewport height for all browsers*/
    min-height: 100dvh;        /* For mobile devices */
    min-height: -webkit-fill-available;  /* for old Safari */
    padding: var(--page-pad);


    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0;
}

/* Light vertical card - wraps all content */
.main-card {
    background: var(--card-bg); border: 1px solid var(--card-border);
    border-radius: 24px;
    padding: 2.5rem;
    width: var(--plate-w);
    height: var(--plate-h);
    min-height: var(--plate-h);
    max-width: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}


.main-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1rem;
}


/* ========== HEADINGS ========== */
/* Primary site title - Play games. Practice English. */
.main-title {
    font-size: 2rem;
    font-weight: 700; /* Bold */
    margin-bottom: 2rem;
    padding-top: 1rem;
    letter-spacing: 2px;
}

/* Choose a game */
.subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    font-weight: 500; /* Medium weight for emphasis */
}

/* Container for game links */
.links-container {
    display: flex;
    flex-direction: column;   /* buttons are stacked vertically */
    margin-bottom: 1.5rem;
}

/* Add bottom margin to each game link for spacing */
.links-container a {
    margin-bottom: 1rem;
}

/* Remove bottom margin from the last game link to avoid extra space */
.links-container a:last-child {
    margin-bottom: 0;
}

/* Common style for all elements that look like buttons.
Game links are styled as buttons for better UX. */
.links-container a,
.btn {
    background: var(--link-btn-bg);
    color: var(--link-btn-text);
    padding: 0.8rem 1.5rem;
    border-radius: 10px;
    text-decoration: none;
    display: inline-block;
    transition: none;
}

/* Hover state - soft mint green feedback */
#submit_name_btn:hover,
#startGame:hover,
#new-game-btn:hover,
#next-round-btn:hover,
#back-to-main-btn:hover {
    background: var(--btn-hover);
    color: var(--btn-hover-text);
}

.links-container a:hover,
.btn:hover {
    background: var(--link-btn-hover);
    color: var(--link-btn-hover-text);
}


/* Small descriptive text under each game title (e.g., "A word-guessing adventure") */
.game-description {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 5px;
    font-weight: normal;
}

.cat-wrapper {
    display: flex;
    justify-content: center;
    margin-top: auto;
    }

/* Cat images — fixed size (index, rules); do not shrink with plate width */
.cat-image {
    display: block;
    width: var(--cat-hero-size);
    max-width: none;
    height: auto;
    margin-bottom: 0.5rem;
    border-radius: 16px;
}

/* Contact me */
/* Container for the entire contact block */
.contactme {
    padding-bottom: 1rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-align: center;
    width: 100%;
    margin-top: auto;
}

/* The prompt "Any questions or suggestions?" */
.contactme-questions {
    margin-bottom: 0.2rem;
    font-size: 1rem; /* Readable size */
    color: var(--text-secondary);
}

/* Wrapper for the email and GitHub links - stacks them vertically */
.contactme-links {
    display: flex;
    flex-direction: column;
    gap: 0.1rem; /* Space between stacked links */
    align-items: center;
}

.contactme a {
    color: inherit;  /* Takes color from .contactme */
    text-decoration: none;
    background: transparent;
    padding: 0;
}

.contactme a:hover {
    color: white;
    background: transparent;
}

@media (max-width: 768px) {
    .contactme {
        margin-top: 1rem;
    }
}

.name-error {
    color: var(--accent);
    font-size: 0.95rem;
    margin-top: 0.5rem;
    min-height: 1.5rem;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.name-error.show {
    opacity: 1;
    transform: translateY(0);
}

#becomeExplainerBtn {
    background: linear-gradient(135deg, #d4c5a0, #c4b080);
    border: 2px solid #8b7b5a;
    color: #3a2a10;
    font-family: 'Georgia', serif;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    padding: 0.75rem 1.5rem;
    font-size: 1.1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

#becomeExplainerBtn:hover {
    background: linear-gradient(135deg, #e0d4a8, #d0c090);
    border-color: #6b5b3a;
    color: #2a1a05;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
}

#becomeExplainerBtn:active {
    transform: scale(0.97);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* "Who'll help us guess words?" — античный стиль */
.explainer-prompt {
    font-family: 'Georgia', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 1px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    margin: 0 auto 0.75rem;
}


/* ----------- Game 1 - Describe & Guess ---------*/
/* ------------ The rules (rules.html) ----------*/
.rules-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}


.rules-title {
     margin: 0;
    padding-top: 0.5rem;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 2px;
}

.howtoplay {
    max-width: 32rem;
    margin: 0;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* Waiting room cat — same idea: fixed width when image is added */
.waiting-cat {
    display: block;
    width: var(--cat-waiting-size);
    max-width: none;
    height: auto;
    margin-top: 1rem;
    border-radius: 16px;
}

/* ------------------ game.html -------------*/

#screen-name {
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

#screen-name input[type="text"] {
    margin: 1rem 0;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    border-radius: 8px;
    border: 2px solid var(--card-border);
    background: var(--input-bg);
    color: var(--input-text);
    min-width: 12rem;
    text-align: center;
}

/* ---- submit_name_btn - submit player name to join the game ---- */
#submit_name_btn,
#startGame,
#next-round-btn {
    margin: 0.5rem auto 0;
    padding: 0.6rem 1.25rem;
    font-size: 1rem;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    background: var(--btn-bg); color: var(--btn-text);
}

#screen-waiting {
    text-align: center;
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

#players-list {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    padding-left: 0;
    list-style-position: inside;
}

#players-list li {
    margin-bottom: 0.3rem;
    font-size: 1.1rem;
    color: var(--text-secondary);
}

.waiting-cat {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* ---- Start Game button - only the host can see it ---- */
.startGame {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

#screen-game {
    width: 100%;
    flex: 1;
    min-height: 0;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
}

#countdown {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4rem;
    font-weight: bold;
    color: white;
    background: rgba(0, 0, 0, 0.7);
    padding: 1rem 2rem;
    border-radius: 20px;
    z-index: 10;
}

/* Card - phone: square (papyrus2); desktop: vertical (papyrus) - see @media below */
.card-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: min(var(--card-max-w), var(--card-vw));
    aspect-ratio: var(--card-ratio);
    margin: 0 auto;
    padding: clamp(1rem, 4vw, 1.75rem);

    background-image: url('/static/game_1_describe_and_guess/images/papyrus2.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Desktop: vertical papyrus card */
@media (min-width: 481px) {
    :root {
        --card-max-w: 336px;
        --card-ratio: 2 / 3;
        --card-vw: 90vw;
    }

    .card-container {
        padding: clamp(1.5rem, 6vw, 3rem) var(--game-inline-pad);
        background-image: url('/static/game_1_describe_and_guess/images/papyrus.png');
    }
}

/* Word on the card */
#cardWord {
    font-size: clamp(1.5rem, 6vw, 2.5rem);
    max-width: 85%;
    font-weight: 700;
    color: #2c1810;
    text-align: center;
    z-index: 1;
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    word-wrap: break-word;
}


/* ---- Action buttons (skip and guessed), for the explainer only ---- */
.action-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.25rem;
    flex-wrap: wrap;
    max-width: 100%;
}

/* ---- Guessed and Skip buttons (phone: full width, tall tap targets) ---- */
#guessedBtn,
#skipBtn {
    display: block;
    width: 100%;
    height: auto;
    min-height: 5.5rem;
    padding: 1.15rem 1.25rem;
    font-size: 1.3rem;
    font-weight: 600;
    font-family: 'Georgia', serif;
    color: #2c1810;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s ease;
    box-sizing: border-box;
}

/* Skip button - muted gray */
#skipBtn {
    background: var(--skip-bg);
    border: 2px solid #8b8b8b;
    outline: 1px solid #bfbfbf;
    outline-offset: -5px;
}

#skipBtn:hover {
    background: #d2cec7;
}

/* Guessed button - green */
#guessedBtn {
    background: var(--guessed-bg);
    border: 2px solid #6b8a5e;
    outline: 1px solid #a0bf90;
    outline-offset: -5px;
}

#guessedBtn:hover {
    background: #a0b88e;
}

#guessedBtn:active,
#skipBtn:active {
    transform: scale(0.96);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* ---- Timer (same width as card) ---- */
.guessing-timer {
    width: min(var(--card-max-w), var(--card-vw));
    font-size: clamp(2rem, 8vw, 3rem);
    font-weight: 700;
    color: var(--text);
    background: var(--timer-bg);
    border-radius: 16px;
    padding: 0.35rem 0;
    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* ---- Guessing screen (non-explainer view) ---- */
.guessing-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.guessing-timer-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
    flex-shrink: 0;
}

.guessing-explainer {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-top: 0;
}

#explainer-name {
    color: var(--accent);
    font-weight: 600;
}

.guessing-cta {
    font-size: clamp(1.25rem, 5vw, 1.6rem);
    font-weight: 700;
    color: var(--text);
    margin-top: 0.25rem;
}


.skipped-cards-dialog {
    display: none;
    position: fixed;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--dialog-bg);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    z-index: 20;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    margin-top: -3rem;
}

.skipped-cards-message {
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    line-height: 1.45;
    color: var(--text);
}

.skipped-cards-dialog-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
}

.skipped-btn {
    margin: 0;
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: filter 0.15s ease, background 0.15s ease;
}

.skipped-btn--yes {
    background: var(--guessed-bg);
    color: #1a2a14;
}

.skipped-btn--yes:hover {
    background: #9ab88a;
}

.skipped-btn--no {
    background: #d8d8d8;
    color: #1a1a1a;
}

.skipped-btn--no:hover {
    background: #c5c5c5;
}

.skipped-cards-time-left {
    margin-top: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent);
}

/* ---- Leave game confirmation ---- */
.exit-dialog {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 30;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.exit-dialog.is-open {
    display: flex;
}

.exit-dialog-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    animation: exit-fade-in 0.28s ease forwards;
}

.exit-dialog-panel {
    position: relative;
    z-index: 1;
    width: min(22rem, 100%);
    background: var(--dialog-bg);
    border-radius: 16px;
    padding: 1.75rem 1.5rem;
    text-align: center;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
    animation: exit-panel-in 0.32s ease forwards;
}

.exit-dialog-message {
    margin-bottom: 1.5rem;
    font-size: 1.05rem;
    line-height: 1.45;
    color: var(--text);
}

.exit-dialog-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
}

.exit-btn {
    margin: 0;
    padding: 0.85rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    font-family: 'Georgia', serif;
}

/* Yes, take me home! */
.exit-btn--leave {
    background: var(--skip-bg);
    color: #1a1a1a;
    border: 2px solid #8b8b8b;
}

.exit-btn--leave:hover {
    background: #d2cec7;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* No, let's keep playing! */
.exit-btn--stay {
    background: var(--guessed-bg);
    color: #1a2a14;
    border: 2px solid #6b8a5e;
}

.exit-btn--stay:hover {
    background: #9ab88a;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

@keyframes exit-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes exit-panel-in {
    from {
        opacity: 0;
        transform: scale(0.94) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes exit-btn-nudge {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-3px); }
    40% { transform: translateX(3px); }
    60% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
}

/* ---- There're no cards left message ---- */
.all-cards-done {
    display: none;
    margin-top: 1.5rem;
    text-align: center;
}

.all-cards-done p {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 1.5rem;
    letter-spacing: 0.5px;
}

/* --- Scroll / Papyrus background for score table --- */
#score-table {
    position: relative;
    background: linear-gradient(180deg, #e8dcc8 0%, #dfceaa 30%, #d4c098 50%, #dfceaa 70%, #e8dcc8 100%);
    border: 3px solid #8b7b5a;
    border-radius: 4px;
    border-left: 4px solid #8b7b5a;
    border-right: 4px solid #8b7b5a;
    box-shadow:
        inset 0 0 30px rgba(139, 123, 90, 0.2),
        0 4px 20px rgba(0, 0, 0, 0.3);
    padding: 1.5rem 1.5rem 1rem;
    margin: 0.5rem auto;
    max-width: 90%;
    width: auto;
}

/* Scroll edges — darker, uneven look */
#score-table::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 12px;
    background: linear-gradient(180deg, rgba(139, 123, 90, 0.4), transparent);
    border-radius: 2px 2px 0 0;
}

#score-table::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 12px;
    background: linear-gradient(0deg, rgba(139, 123, 90, 0.4), transparent);
    border-radius: 0 0 2px 2px;
}

/* Table inside scroll */
#results-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0;
}

#results-table th {
    text-align: center;
    padding: 0.5rem 1rem;
    border-bottom: 2px solid #8b7b5a;
    color: #3a2a10;
    font-family: 'Georgia', serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.5px;
}

#results-table td {
    text-align: center;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid rgba(139, 123, 90, 0.4);
    color: #3a2a10;
    font-family: 'Georgia', serif;
    font-size: 0.95rem;
}

#results-table tbody tr:last-child td {
    border-bottom: none;
}

/* Hover effect on rows */
#results-table tbody tr:hover {
    background: rgba(139, 123, 90, 0.15);
}

/* Round result message - "Lida got 5 points this round!" */
#result-message {
    font-family: 'Georgia', serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #3a2a10;
    text-align: center;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, rgba(232, 220, 200, 0.7), rgba(212, 192, 152, 0.5));
    border-left: 3px solid #8b7b5a;
    border-right: 3px solid #8b7b5a;
    border-radius: 4px;
    padding: 0.6rem 1.5rem;
    margin: 0.5rem auto 1rem;
    display: inline-block;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

#result-message::before {
    content: '✨ ';
}

#result-message::after {
    content: ' ✨';
}


#new-game-btn,
#back-to-main-btn {
    display: block;
    margin: 0.5rem auto 0;
    padding: 0.6rem 1.25rem;
    font-size: 1rem;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    background: var(--btn-bg);
    color: var(--btn-text);
}

#back-to-main-btn {
    margin-top: 0.5rem;
}


/* Desktop: Skip / Guessed side by side */
@media (min-width: 481px) {
    .action-buttons {
        flex-direction: row;
        align-items: stretch;
    }

    #guessedBtn,
    #skipBtn {
        width: 160px;
        height: 130px;
        min-height: unset;
        padding: 1rem 0;
        font-size: 1.3rem;
    }

}

@media (max-height: 700px) {
    #screen-waiting h1 {
        font-size: 1.5rem;
        line-height: 1.25;
    }
    #players-list {
        margin-top: 0.75rem;
        margin-bottom: 0.75rem;
    }
    .waiting-cat {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }
    .startGame {
        margin-top: 0.75rem;
    }
}

/* Phone */
@media (max-width: 480px) {
    :root {
        --page-pad: 1rem;
        --plate-w: min(500px, calc(100vw - 2rem));
        --plate-h: calc(100dvh - 2rem);
        --card-max-w: 300px;
        --card-vw: 88vw;
    }

    body {
        padding: var(--page-pad);
    }

    .main-card {
        padding: 1.25rem 1rem;
        overflow: hidden;
    }

    /* Large tap targets on phone */
    .page-game .action-buttons {
        flex-direction: column;
        align-items: stretch;
        width: min(var(--card-max-w), var(--card-vw));
        margin-inline: auto;
        gap: 0.75rem;
    }

    .page-game #guessedBtn,
    .page-game #skipBtn {
        width: 100%;
        min-height: 6rem;
        font-size: 1.4rem;
        padding: 1.35rem 1rem;
    }
}

/* Game page - lobby screens sit in upper area; active round stays centered */
.page-game .main-card {
    padding: 1rem 1.25rem;
    justify-content: flex-start;
}

.page-game #screen-name,
.page-game #screen-waiting,
.page-game #screen-game {
    padding-top: 1.5rem;
}

/* Round in progress: card or timer visible */
.page-game #screen-game:has(.card-container[style*="flex"]),
.page-game #screen-game:has(#guessing-timer[style*="block"]) {
    justify-content: center;
    padding-top: 0;
}

.page-game .action-buttons {
    margin-top: 0;
    flex-shrink: 0;
}

/* Hide empty button row before / between rounds */
.page-game .action-buttons:has(#skipBtn[style*="none"]):has(#guessedBtn[style*="none"]) {
    display: none;
}

@media (max-height: 700px) {
    .page-game #screen-name,
    .page-game #screen-waiting,
    .page-game #screen-game:not(:has(.card-container[style*="flex"])):not(:has(#guessing-timer[style*="block"])) {
        padding-top: 1rem;
    }

    .page-game .guessing-timer {
        font-size: 2rem;
    }

    @media (max-width: 480px) {
        :root {
            --card-max-w: min(260px, 82vw);
        }

        .page-game #guessedBtn,
        .page-game #skipBtn {
            min-height: 5.25rem;
            font-size: 1.25rem;
        }
    }

    @media (min-width: 481px) {
        :root {
            --card-max-w: 280px;
        }

        #guessedBtn,
        #skipBtn {
            width: 140px;
            height: 100px;
        }
    }
}


@media (max-width: 768px) {
    .main-title {
        font-size: 2.5rem;
    }
}