/* ============================================================================
   TimeQuest — versus-mode layout (index.html)
   Loaded LAST, after theme-adventure.css. Layout only; the theme keeps its
   colours.

   Same scaling contract as layout-fit.css on the single-player page:

     * ONE root unit, `--tq-u`, derived from BOTH viewport axes, so the whole
       screen scales as one piece with resolution and with browser zoom instead
       of some parts moving while others stay a fixed pixel size.
     * The GAME screen fits the window and does not scroll the page; the board
       and the hand scroll inside their own boxes.
     * The LOBBY is an ordinary form and keeps normal page scrolling — it has
       more content than a window can hold and nothing there is time-critical.
   ========================================================================== */

:root {
    --tq-u: clamp(8px, min(100vw / 128, 100vh / 78), 17px);

    --tq-card-w: calc(var(--tq-u) * 10.4);
    --tq-card-h: calc(var(--tq-u) * 15.8);
    --tq-placed-w: calc(var(--tq-u) * 9.3);
    --tq-placed-h: calc(var(--tq-u) * 14.1);
    --tq-slot-w: calc(var(--tq-u) * 8.4);
    --tq-slot-h: calc(var(--tq-u) * 13.2);
    --tq-gap: calc(var(--tq-u) * 0.62);
}

/* ---------- lobby: difficulty picker ---------- */
.difficulty-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.difficulty-btn {
    flex: 1 1 120px;
    min-width: 100px;
    padding: 12px 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid #333;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}
.difficulty-btn:hover { border-color: #e94560; }
.difficulty-btn.selected { border-color: #e94560; background: rgba(233, 69, 96, 0.2); }
.difficulty-btn h3 { font-size: 0.95rem; margin-bottom: 3px; }
.difficulty-btn .diff-hand { display: block; font-size: 0.7rem; color: #9aa1ad; line-height: 1.25; }
.difficulty-btn.easy h3 { color: #4ade80; }
.difficulty-btn.medium h3 { color: #f59e0b; }
.difficulty-btn.hard h3 { color: #ef4444; }
.difficulty-btn.expert h3 { color: #b98cf0; }

/* The "all of history" option spans the picker so it reads as its own mode. */
.cat-option.cat-option-feature {
    grid-column: 1 / -1;
    border-color: rgba(185, 140, 240, 0.55);
    background: linear-gradient(100deg, rgba(185, 140, 240, 0.14), rgba(0, 0, 0, 0.2));
}
.cat-option.cat-option-feature:hover,
.cat-option.cat-option-feature.selected { border-color: #b98cf0; }
.cat-option.cat-option-feature .cat-name { color: #b98cf0; font-weight: 600; }

/* ============================================================================
   GAME SCREEN — fits the window; only the board and hand scroll
   ========================================================================== */
/* :has() scopes all of this to the game screen, leaving the lobby untouched. */
body:has(.game-container.active) { overflow-x: hidden; }

.container:has(.game-container.active) {
    height: 100dvh;
    /* Below this the layout needs more room than the window has. min-height
       beats height, so the page scrolls rather than clipping the hand out of
       reach — the failure mode that makes high zoom unusable. */
    min-height: calc(var(--tq-u) * 46);
    max-width: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0 calc(var(--tq-u) * 1.6) calc(var(--tq-u) * 0.9);
}

/* The page header is worth more as playing space once a game is running. */
.container:has(.game-container.active) > .header { display: none; }

.game-container.active {
    flex: 1 1 auto;
    min-height: 0;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
}

.game-container.active .scoreboard {
    flex: 0 0 auto;
    padding: calc(var(--tq-u) * 0.7) calc(var(--tq-u) * 1.2) !important;
    margin-bottom: calc(var(--tq-u) * 0.6) !important;
    flex-wrap: wrap;
    gap: calc(var(--tq-u) * 0.6);
}
.game-container.active .player-score h3 { font-size: calc(var(--tq-u) * 0.85) !important; }
.game-container.active .player-score .score { font-size: calc(var(--tq-u) * 1.5) !important; }
.game-container.active .round-indicator { font-size: calc(var(--tq-u) * 0.72) !important; }
.game-container.active .turn-indicator { font-size: calc(var(--tq-u) * 1) !important; }

/* The timeline absorbs whatever height is left over. */
.game-container.active .timeline-section {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-bottom: calc(var(--tq-u) * 0.7) !important;
}
.game-container.active .timeline-section h2,
.game-container.active .hand-section h2 {
    flex: 0 0 auto;
    font-size: calc(var(--tq-u) * 0.9) !important;
    margin-bottom: calc(var(--tq-u) * 0.4) !important;
}

/* ---------- the board's own viewer ----------
   `.timeline` is the fixed board and keeps the theme's frame plus the rule
   line behind the cards; `.timeline-track` is the strip that scrolls. */
.timeline {
    flex: 1 1 auto;
    min-height: 0 !important;
    display: flex !important;
    overflow: hidden !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: calc(var(--tq-u) * 0.85) calc(var(--tq-u) * 0.9) !important;
    gap: 0 !important;
}

.timeline-track {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    /* `safe center` centres a short timeline but falls back to flush-left once
       the strip is wider than the board, so the first card can never end up in
       unreachable overflow. */
    justify-content: flex-start;
    justify-content: safe center;
    flex-wrap: nowrap;
    gap: var(--tq-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    padding-bottom: calc(var(--tq-u) * 0.25);
    z-index: 1;
}

.hand-section {
    flex: 0 0 auto;
    margin-top: 0 !important;
}
.player-hand {
    min-height: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: calc(var(--tq-u) * 0.7) calc(var(--tq-u) * 0.8) !important;
    gap: 0 !important;
}
.hand-track {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    justify-content: safe center;
    flex-wrap: nowrap;
    gap: var(--tq-gap);
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: calc(var(--tq-u) * 0.25);
}

.timeline-track::-webkit-scrollbar,
.hand-track::-webkit-scrollbar { height: calc(var(--tq-u) * 0.5); }
.timeline-track::-webkit-scrollbar-track,
.hand-track::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.35); }
.timeline-track::-webkit-scrollbar-thumb,
.hand-track::-webkit-scrollbar-thumb { background: rgba(233, 69, 96, 0.6); }
.timeline-track,
.hand-track { scrollbar-width: thin; }

/* The how-to-play strip is the first thing to go when height runs short. */
.game-container.active .instructions {
    flex: 0 0 auto;
    margin-top: calc(var(--tq-u) * 0.6) !important;
    padding: calc(var(--tq-u) * 0.55) !important;
}
.game-container.active .instructions p { font-size: calc(var(--tq-u) * 0.72) !important; }
@media (max-height: 820px) {
    .game-container.active .instructions { display: none !important; }
}

/* ---------- cards scale with the root unit ---------- */
.game-container.active .card {
    width: var(--tq-card-w) !important;
    height: var(--tq-card-h) !important;
    flex: 0 0 auto;
}
.game-container.active .card.placed {
    width: var(--tq-placed-w) !important;
    height: var(--tq-placed-h) !important;
}
.game-container.active .card-content {
    padding: calc(var(--tq-u) * 0.4) calc(var(--tq-u) * 0.42) !important;
    min-height: 0 !important;
    overflow: hidden;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: calc(var(--tq-u) * 0.12);
}
.game-container.active .card-title {
    flex: 0 1 auto;
    min-height: 0;
    font-size: calc(var(--tq-u) * 0.72) !important;
    line-height: 1.2 !important;
    overflow: hidden;
}
/* flex-shrink: 0 — a long event name must never squeeze the date out of view. */
.game-container.active .card-date {
    flex: 0 0 auto;
    font-size: calc(var(--tq-u) * 0.76) !important;
}
.game-container.active .drop-zone {
    width: var(--tq-slot-w) !important;
    height: var(--tq-slot-h) !important;
    font-size: calc(var(--tq-u) * 0.7) !important;
    flex: 0 0 auto;
}