/* ============================================================
   Games Panel — Chain Forge, Specter, Art Sleuth
   ============================================================ */

/* ── Panel shell ─────────────────────────────────────────── */

/* Dedicated /games site shell. These styles intentionally echo the public
   Guide and Articles pages while retaining the user's selected app theme. */
.games-site {
    min-height: 100vh;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    color: var(--text-color);
    background:
        radial-gradient(circle at 18% 0%, rgba(var(--accent-rgb), 0.14), transparent 30rem),
        var(--bg-gradient);
    scroll-behavior: smooth;
}

.games-site-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}

.games-site-topbar {
    position: sticky;
    top: 0;
    z-index: 210;
    border-bottom: 1px solid var(--glass-border);
    background: color-mix(in srgb, var(--bg-color) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.games-site-topbar-inner {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.games-site-brand {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.games-site-brand img {
    display: block;
    width: auto;
    height: 34px;
}

.games-site-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.games-site-nav-icon {
    display: none;
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
}

.games-site-nav-icon-brand {
    width: 21px;
    height: 21px;
}

.games-site-nav-link,
.games-site-button {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border: 1px solid var(--button-border);
    border-radius: 8px;
    background: var(--button-bg);
    color: var(--button-text);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: none;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease,
        filter 0.2s ease;
}

button.games-site-nav-link {
    cursor: pointer;
}

.games-site-nav-link:hover,
.games-site-button:hover {
    border-color: var(--accent-color);
    background: var(--accent-bg-hover);
    color: var(--text-color);
    filter: none;
}

.games-site-button-primary {
    border-color: transparent;
    background: var(--accent-gradient);
    color: var(--button-primary-text, white);
    box-shadow: 0 0 18px var(--accent-glow);
}

.games-site-button-primary:hover {
    border-color: transparent;
    background: var(--accent-gradient);
    color: var(--button-primary-text, white);
    filter: brightness(1.08);
}

.games-site-user {
    max-width: 180px;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sized to its two lines of text rather than to a fixed banner height: this is a
   page title, and every pixel it does not take is a pixel the puzzle below gets.
   Its bottom border is the only rule between the hero and the game frame — the
   frame drops its own top edge so the tab strip reads as attached to the header
   rather than floating in a separate card. */
.games-site-hero {
    display: flex;
    align-items: flex-end;
    padding: 30px 0 26px;
    border-bottom: 1px solid var(--glass-border);
    background:
        linear-gradient(90deg, rgba(13, 17, 23, 0.96) 0%, rgba(13, 17, 23, 0.73) 56%, rgba(13, 17, 23, 0.38) 100%),
        linear-gradient(180deg, rgba(13, 17, 23, 0.04) 0%, rgba(13, 17, 23, 0.92) 100%),
        var(--games-hero-art) center 38% / cover no-repeat;
}

.games-site-hero-copy {
    text-align: left;
}

.games-site-hero h1 {
    max-width: 760px;
    margin: 0 0 8px;
    background: none;
    color: #fff;
    -webkit-text-fill-color: #fff;
    text-align: left;
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.1;
}

.games-site-hero p {
    max-width: 62ch;
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.5;
}

.games-site-play-section {
    padding: 0 0 56px;
}

.games-site-game-frame {
    min-height: 690px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    border-top: 0;
    border-radius: 0 0 16px 16px;
    background: color-mix(in srgb, var(--panel-bg) 94%, transparent);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.games-site .games-panel {
    min-height: 690px;
    height: auto;
    overflow: visible;
}

.games-site .games-tab-header {
    padding: 10px 10px 0;
}

.games-site .games-content {
    min-height: 620px;
    overflow: visible;
    padding: 16px 10px;
}

.games-site :focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.games-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.games-tab-header {
    padding: 8px 0 0;
    flex-shrink: 0;
}

.games-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px 0;
    display: flex;
    flex-direction: column;
}

/* ── Shared game container ───────────────────────────────── */

.game-container {
    padding: 0 12px;
}

/* ── Auth gate ───────────────────────────────────────────── */

.games-auth-gate {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 24px;
    text-align: center;
    color: var(--text-secondary);
}

.games-auth-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-color);
}

.games-auth-sub {
    margin: 0;
    font-size: 0.9rem;
    max-width: 320px;
}

.games-auth-btn {
    margin-top: 8px;
    padding: 0.6rem 1.6rem;
    border-radius: 8px;
    border: none;
    background: var(--accent-color, #7c6fff);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}

.games-auth-btn:hover {
    opacity: 0.85;
}

/* ── Lobby ───────────────────────────────────────────────── */

.chain-forge-lobby {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 40px 24px;
    text-align: center;
    max-width: min(650px, 100%);
    width: 100%;
    margin: 0 auto;
}

.lobby-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.lobby-game-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-color);
    letter-spacing: 0.02em;
}

.lobby-date {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-light, #7c6fff);
    margin: 4px 0 12px 0;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

.lobby-rules {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
    max-width: min(540px, 100%);
}

.lobby-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.2);
    padding: 6px 20px;
    border-radius: 99px;
    margin-bottom: 8px;
    width: fit-content;
}

.lobby-meta-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.lobby-difficulty {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.lobby-scoring {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary);
}

/* A fact the puzzle has not delivered yet. Dimmed and gently pulsing so the lobby
   reads as "still arriving" rather than as a real value that happens to be a dash. */
.lobby-value--pending {
    color: var(--text-muted, #6b6b7a);
    animation: lobby-pending-pulse 1.4s ease-in-out infinite;
}

@keyframes lobby-pending-pulse {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 0.85; }
}

.lobby-warning {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: min(440px, 100%);
    line-height: 1.5;
}

.lobby-begin-btn {
    margin-top: 8px;
    padding: 0.7rem 2.5rem;
    border-radius: 8px;
    border: none;
    background: var(--accent-color, #7c6fff);
    color: var(--button-primary-text, white);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: opacity 0.15s, transform 0.1s;
}

.lobby-begin-btn:hover:not(:disabled) {
    opacity: 0.88;
    transform: translateY(-1px);
}

.lobby-begin-btn:active:not(:disabled) {
    transform: translateY(0);
}

/* Held until the puzzle arrives: the lobby is drawn in anticipation of a successful
   load, so the only thing missing is something to begin. */
.lobby-begin-btn:disabled {
    opacity: 0.45;
    cursor: default;
    transform: none;
}

/* ── Timer states ────────────────────────────────────────── */

.game-timer--running {
    color: var(--accent-color);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.game-loading,
.game-error,
.game-coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 24px;
    color: var(--text-muted);
    text-align: center;
}

.game-error {
    color: var(--error-color, #e05c4b);
}

.game-error-detail {
    font-size: 12px;
    opacity: 0.7;
}

.game-coming-soon-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
}

.game-coming-soon-sub {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

/* ── Game titles ─────────────────────────────────────────── */

.game-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-color);
    margin: 0 0 4px;
}

.game-subtitle {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0 0 8px;
    line-height: 1.4;
}

/* ── Timer ───────────────────────────────────────────────── */

.chain-forge-timer {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 4px auto 12px;
    max-width: 480px;
    width: 100%;
}

/* Hint icon button — positioned to the right of the centred timer */
.chain-hint-btn {
    position: absolute;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    background: rgba(42, 42, 56, 0.4);
    border: 1px solid var(--border-color, #2a2a38);
    border-radius: 99px;
    color: var(--text-muted, #6b6b7a);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.chain-hint-btn:hover {
    border-color: var(--accent-color, #7c6fff);
    color: var(--text-color, #ffffff);
    background: rgba(var(--accent-rgb, 124, 111, 255), 0.15);
    transform: translateY(-1px);
}

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

.chain-hint-btn--exhausted {
    opacity: 0.5;
    cursor: not-allowed;
    background: transparent;
}

.hint-icon {
    flex-shrink: 0;
    opacity: 0.8;
}

.hint-text {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.chain-hint-count {
    font-size: 0.72rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
    margin-left: 2px;
}

.chain-hint-btn svg {
    display: block;
}

.game-timer {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.game-timer--idle {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 400;
}

.game-timer--running {
    color: var(--accent-color, #7c6fff);
}

.game-timer--done {
    color: var(--accent-color, #7c6fff);
}

/* ── Chain Forge layout ──────────────────────────────────── */

.chain-forge-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    padding-bottom: 32px;
}

.chain-forge-header {
    margin-bottom: 8px;
    position: relative;
}


/* ── Chain slots ─────────────────────────────────────────── */

.chain-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
}

.chain-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.chain-slot:last-child .chain-arrow {
    display: none;
}

.chain-arrow {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1;
    user-select: none;
    margin: 2px 0;
}

/* Revealed card name badge */
.chain-badge {
    width: 100%;
    padding: 8px 14px;
    background: var(--widget-bg, #1a1a24);
    border: 1px solid var(--border-color, #2a2a38);
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-color);
    text-align: center;
    box-sizing: border-box;
}


/* ── Word-box input row (hidden slots) ───────────────────── */

.chain-word-boxes {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 4px 6px;
    width: 100%;
    padding: 6px 10px;
    background: var(--input-bg, #12121a);
    border: 1px solid var(--border-color, #2a2a38);
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color 0.15s, background 0.15s;
}

.chain-word-boxes--correct {
    border-color: var(--accent-color, #7c6fff) !important;
    background: rgba(var(--accent-rgb, 124, 111, 255), 0.06) !important;
}

/* Per-word wrapper: input above, dots below */
.chain-word-box-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.chain-word-box-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.chain-word-separator {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-muted);
    padding-bottom: 11px; /* Align with input text, offset the dots */
    user-select: none;
    opacity: 0.8;
}

/* Sized so the whole word is always visible while it is being typed. Three things
   have to hold at once for that, and each needs a selector that actually wins:

   1. `box-sizing: content-box` - `.standard-text-field > input` in components.css
      is (0,1,1) and forces `border-box`, which silently ate the padding and border
      out of the declared width.
   2. `padding` - `input[type="text"]` in forms.css is also (0,1,1) and forced
      `10px` per side, so 22px of the box went to chrome rather than text.
   3. `font-family: inherit` - inputs do NOT inherit the page font, so these
      rendered in the browser's default form font (Arial) while the `ch` width was
      being reasoned about as if it were Inter. Pinning the font is what makes the
      `ch` arithmetic below mean anything at all.

   Hence the two-class selector: (0,2,0) beats both (0,1,1) rules above.

   Width is worst-case rather than fitted: `maxlength` caps the field at N
   characters, and the widest glyph that can appear is 'W' - measured at 1.697ch
   in Arial and 1.740ch in system-ui - so N * 1.75ch cannot overflow whatever the
   user types. Worst-case also means the box never resizes mid-word, which matters
   more here than snugness: this is a timed game and a reflowing row would move the
   next box out from under the cursor. */
.chain-word-boxes .chain-word-input {
    box-sizing: content-box;
    font-family: inherit;
    padding: 4px 5px;
    width: calc(var(--chain-word-len, 3) * 1.75ch + 2px);
    max-width: none;
    background: transparent;
    border: 1px solid var(--border-color, #2a2a38);
    border-radius: 4px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-color);
    text-align: center;
    outline: none;
    min-width: 1ch;
    transition: border-color 0.15s, background 0.15s;
}

/* The shared widget wrapper is `width: 100%`; inside the shrink-wrapping column
   here that makes it fight the input's own width instead of hugging it. */
.chain-word-box-wrap .standard-text-field {
    width: auto;
    max-width: none;
}

.chain-word-input:focus {
    border-color: var(--accent-color, #7c6fff);
    background: rgba(var(--accent-rgb, 124, 111, 255), 0.05);
}

.chain-word-input:disabled {
    opacity: 0.8;
    cursor: default;
}

.chain-word-boxes--correct .chain-word-input {
    color: var(--accent-color, #7c6fff);
    border-color: rgba(var(--accent-rgb, 124, 111, 255), 0.35);
}

/* Individual word correct — locked blue highlight before the whole slot is done.
   Must beat :disabled opacity, so we reset it here. */
.chain-word-input--correct,
.chain-word-input--correct:disabled {
    color: var(--accent-color, #7c6fff);
    border-color: var(--accent-color, #7c6fff);
    background: rgba(var(--accent-rgb, 124, 111, 255), 0.08);
    cursor: default;
    opacity: 1;
}

/* Letter-count dots below each word box */
.chain-letter-dots {
    display: flex;
    gap: 2px;
    align-items: center;
    min-height: 6px;
}

.chain-letter-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-muted, #6b6b7a);
    opacity: 0.5;
    flex-shrink: 0;
}

/* Correct checkmark — flex sibling at end of .chain-word-boxes */
.chain-correct-badge {
    display: flex;
    align-items: center;
    align-self: center;
    margin-left: 4px;
    color: var(--accent-color, #7c6fff);
    font-size: 1.1rem;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.chain-correct-badge--visible {
    opacity: 1;
}

/* ── Completion / share card ─────────────────────────────── */

.game-share-card {
    margin-top: 20px;
    padding: 20px;
    background: var(--widget-bg, #1a1a24);
    border: 1px solid var(--border-color, #2a2a38);
    border-radius: 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    animation: fadeInUp 0.4s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.game-share-result {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--success-color, #27ae60);
}

.game-share-time {
    font-family: 'Courier New', Courier, monospace;
    font-size: 2rem;
    font-weight: 700;
}

.game-share-sub {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
}

.game-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: var(--accent-gradient, linear-gradient(135deg, #7c6fff, #5e4fcf));
    color: var(--button-primary-text, white);
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}

.game-share-btn:hover {
    opacity: 0.88;
}

.game-share-btn:active {
    transform: translateY(1px);
}

/* ── Banner share preview ─────────────────────────────── */

.game-share-banner-preview {
    width: 100%;
    margin-bottom: 4px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color, #2a2a38);
    background: var(--bg-color);
    aspect-ratio: 1200 / 630;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.game-result-banner-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.game-share-actions {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 4px;
}

/* =========================================================
   Specter
   ========================================================= */

.specter-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 4px;
}

.specter-header {
    margin-bottom: 4px;
    position: relative;
}

/* ── Clue list ───────────────────────────────────────────── */

.specter-clue-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.specter-clue {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 14px;
    background: var(--widget-bg, #1a1a24);
    border: 1px solid var(--border-color, #2a2a38);
    border-radius: 8px;
    animation: specter-clue-in 0.35s ease both;
}

@keyframes specter-clue-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.specter-clue-number {
    flex-shrink: 0;
    min-width: 1.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-color, #7c6fff);
    opacity: 0.8;
}

.specter-clue.unearned {
    opacity: 0.45;
    background: transparent;
    border-style: dashed;
    filter: saturate(0.5);
}

.specter-clue.unearned .specter-clue-number {
    color: var(--text-muted);
}

.specter-clue-text {
    font-size: 0.9rem;
    color: var(--text-color);
    line-height: 1.45;
}

/* ── Guess section ───────────────────────────────────────── */

.specter-guess-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.specter-guess-error {
    font-size: 0.8rem;
    color: var(--danger-color, #f14668);
    margin: 0;
}

.specter-input-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

/* ── Shared card-name autocomplete (CardNameInput) ───────── */

/* Autocomplete wrapper — position:relative so the dropdown anchors to it */
.game-card-autocomplete {
    position: relative;
    flex: 1;
}

.game-card-input {
    width: 100%;
    padding: 8px 12px;
    background: var(--input-bg, #12121a);
    border: 1px solid var(--border-color, #2a2a38);
    border-radius: 8px;
    color: var(--text-color);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.game-card-input:focus {
    border-color: var(--accent-color, #7c6fff);
}

.game-card-input:disabled {
    opacity: 0.5;
}

/* ── Name autocomplete dropdown ──────────────────────────── */

.game-card-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: var(--widget-bg, #1a1a24);
    border: 1px solid var(--border-color, #2a2a38);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    /* The list is capped at 8 suggestions (~38px each plus the 4px end padding), and 260px
       cut the eighth in half so the entry you were reaching for sat under the fold. Size the
       box to hold the full result set, and only fall back to scrolling on short viewports.

       This is the ceiling, not the actual height: CardNameInput measures the room between
       the field and the window edge and sets a smaller `max-height` inline when there isn't
       340px to spare. Without that, a field sitting low on the page (the games pages put
       this one just above the footer) opened a list that ran off the bottom of an
       already-fully-scrolled page, putting its last entries out of reach entirely. */
    max-height: min(340px, 60vh);
    overflow-y: auto;
}

/* Flipped above the field, for when there is more room up than down. `top: auto` is
   required to release the downward anchor set above. */
.game-card-dropdown--above {
    top: auto;
    bottom: calc(100% + 4px);
}

.game-card-dropdown-li {
    display: block;
    width: 100%;
}

.game-card-dropdown-item {
    display: block;
    width: 100%;
    padding: 9px 14px;
    font-size: 0.875rem;
    color: var(--text-color);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: transparent;
    border: none;
    text-align: left;
    font-family: inherit;
    transition: background 0.1s, color 0.1s;
}

.game-card-dropdown-item:hover,
.game-card-dropdown-item--highlighted {
    background: var(--accent-bg, rgba(255, 255, 255, 0.06));
    color: var(--accent-color, #7c6fff);
    outline: none;
}

.specter-submit-btn {
    padding: 8px 18px;
    background: var(--accent-gradient, linear-gradient(135deg, #7c6fff, #5e4fcf));
    color: var(--button-primary-text, white);
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    white-space: nowrap;
}

.specter-submit-btn:hover:not(:disabled) {
    opacity: 0.88;
}

.specter-submit-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

/* ── Clue progress pips ──────────────────────────────────── */

.specter-clue-progress {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.specter-clue-progress-text {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-right: 4px;
}

.specter-pip {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.specter-pip--used {
    background: var(--danger-color, #f14668);
    opacity: 0.7;
}

.specter-pip--remaining {
    background: transparent;
    border: 1.5px solid var(--border-color, #2a2a38);
}

/* ── Wrong guess history ─────────────────────────────────── */

.specter-guess-history {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.specter-wrong-guess {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-decoration: line-through;
    opacity: 0.75;
}

.specter-wrong-x {
    color: var(--danger-color, #f14668);
    font-size: 0.8rem;
    text-decoration: none;
    opacity: 1;
}

/* ── Card reveal ─────────────────────────────────────────── */

.specter-card-reveal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
    background: var(--widget-bg, #1a1a24);
    border: 1px solid var(--border-color, #2a2a38);
    border-radius: 12px;
    animation: fadeInUp 0.4s ease;
}

.specter-card-reveal--dnf {
    border-color: var(--danger-border);
}

.specter-result-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.specter-result-header--win {
    color: var(--accent-color, #7c6fff);
}

.specter-result-header--dnf {
    color: var(--danger-color, #f14668);
}

.specter-result-title {
    font-size: 1.2rem;
    font-weight: 700;
}

.specter-result-card-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-color);
    letter-spacing: 0.02em;
    margin: 0;
    text-align: center;
}

.specter-result-image {
    width: 220px;
    max-width: 100%;
}

.specter-image-loading {
    width: 220px;
    aspect-ratio: 63/88;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--widget-bg, #1a1a24);
    border-radius: 8px;
    color: var(--text-muted);
    opacity: 0.5;
}

/* =========================================================
   Art Sleuth
   ========================================================= */

.art-sleuth-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 4px;
}

.art-sleuth-header {
    margin-bottom: 4px;
    position: relative;
}

/* ── Image frame ─────────────────────────────────────────── */

.art-sleuth-frame {
    /*
     * Width: whichever is smaller — 100% of the panel, or the width that
     * produces a 4:3 frame at 44vh tall (leaving room for pips + input below).
     */
    width: min(100%, calc(44vh * 4 / 3));
    aspect-ratio: 4 / 3;
    max-height: 44vh;
    overflow: hidden;
    border-radius: 8px;
    background: var(--widget-bg, #1a1a24);
    position: relative;
    margin: 0 auto;
    flex-shrink: 0;
}

.art-sleuth-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease, transform-origin 0.6s ease, opacity 0.3s ease;
}

/* Loading + error overlays inside the frame */
.art-sleuth-img-placeholder,
.art-sleuth-img-error {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-muted);
    pointer-events: none;
}

.art-sleuth-img-error {
    color: var(--danger-color, #f14668);
}

/* ── Stage pips ──────────────────────────────────────────── */

.art-sleuth-pips {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
}

.art-sleuth-pip {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.art-sleuth-pip--wrong {
    background: var(--danger-color, #f14668);
    opacity: 0.8;
}

.art-sleuth-pip--correct {
    background: var(--success-color, #27ae60);
}

.art-sleuth-pip--current {
    background: var(--accent-color, #7c6fff);
    animation: art-sleuth-pip-pulse 1.4s ease-in-out infinite;
}

.art-sleuth-pip--remaining {
    background: transparent;
    border: 1.5px solid var(--border-color, #2a2a38);
}

@keyframes art-sleuth-pip-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(0.85);
    }
}

/* ── Guess section ───────────────────────────────────────── */

.art-sleuth-guess-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.art-sleuth-guess-error {
    font-size: 0.8rem;
    color: var(--danger-color, #f14668);
    margin: 0;
}

.art-sleuth-input-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.art-sleuth-submit-btn {
    padding: 8px 18px;
    background: var(--accent-gradient, linear-gradient(135deg, #7c6fff, #5e4fcf));
    color: var(--button-primary-text, white);
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    white-space: nowrap;
}

.art-sleuth-submit-btn:hover:not(:disabled) {
    opacity: 0.88;
}

.art-sleuth-submit-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

/* ── Wrong guess history ─────────────────────────────────── */

.art-sleuth-guess-history {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.art-sleuth-wrong-guess {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-decoration: line-through;
    opacity: 0.75;
}

.art-sleuth-wrong-x {
    color: var(--danger-color, #f14668);
    font-size: 0.8rem;
    text-decoration: none;
    opacity: 1;
}

/* ── Card reveal ─────────────────────────────────────────── */

.art-sleuth-card-reveal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
    background: var(--widget-bg, #1a1a24);
    border: 1px solid var(--border-color, #2a2a38);
    border-radius: 12px;
    animation: fadeInUp 0.4s ease;
}

.art-sleuth-card-reveal--dnf {
    border-color: var(--danger-border);
}

.art-sleuth-result-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.art-sleuth-result-header--win {
    color: var(--accent-color, #7c6fff);
}

.art-sleuth-result-header--dnf {
    color: var(--danger-color, #f14668);
}

.art-sleuth-result-title {
    font-size: 1.2rem;
    font-weight: 700;
}

.art-sleuth-result-card-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-color);
    letter-spacing: 0.02em;
    margin: 0;
    text-align: center;
}

.art-sleuth-result-image {
    width: 220px;
    max-width: 100%;
}

.art-sleuth-image-loading {
    width: 220px;
    aspect-ratio: 63/88;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--widget-bg, #1a1a24);
    border-radius: 8px;
    color: var(--text-muted);
    opacity: 0.5;
}

/* =========================================================
   Leaderboard
   ========================================================= */

.leaderboard-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 4px;
}

/* Sub-tab row */
.leaderboard-sub-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.leaderboard-sub-tab {
    padding: 4px 12px;
    border: 1px solid var(--border-color, #333);
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted, #888);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.leaderboard-sub-tab:hover {
    background: var(--widget-bg, #1a1a24);
    color: var(--text-color);
}

.leaderboard-sub-tab--active {
    background: var(--accent-color, #7c6fff);
    border-color: var(--accent-color, #7c6fff);
    color: var(--button-primary-text, white);
}

/* Period toggle (Daily / All Time) */
.leaderboard-period-toggle {
    display: flex;
    gap: 2px;
    margin-bottom: 12px;
    background: var(--widget-bg, #1a1a24);
    border: 1px solid var(--border-color, #333);
    border-radius: 6px;
    padding: 3px;
    width: fit-content;
}

.leaderboard-period-btn {
    padding: 4px 14px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted, #888);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.leaderboard-period-btn:hover {
    color: var(--text-color);
}

.leaderboard-period-btn--active {
    background: var(--accent-color);
    color: var(--button-primary-text, white);
}

/* Table */
.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
}

.leaderboard-table th {
    text-align: left;
    font-size: 0.75rem;
    color: var(--text-muted, #888);
    padding: 4px 8px;
    border-bottom: 1px solid var(--border-color, #333);
}

.leaderboard-table td {
    padding: 6px 8px;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--border-color, #222);
    background: color-mix(in srgb, var(--bg-color) 84%, transparent);
}

.leaderboard-rank {
    font-weight: 700;
    min-width: 2rem;
    display: inline-block;
}

/* The reader's own row keeps the same panel background as every other row. Tinting it
   with a translucent accent replaced the 84%-opaque fill the other rows get, which let
   the seasonal art behind the table read through at full strength — that, not the accent
   itself, is what made the row's text hard to pick out. The accent is a ring around the
   row instead: 2px so it wins the border-collapse contest against the 1px rules of the
   rows either side, which would otherwise take the shared edges. */
.leaderboard-row--me td {
    border-top: 2px solid var(--accent-color);
    border-bottom: 2px solid var(--accent-color);
}

.leaderboard-row--me td:first-child {
    border-left: 2px solid var(--accent-color);
}

.leaderboard-row--me td:last-child {
    border-right: 2px solid var(--accent-color);
}

.leaderboard-username {
    font-weight: 500;
}

.leaderboard-profile-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-weight: 500;
    color: var(--accent-color);
    cursor: pointer;
    text-decoration: none;
}

.leaderboard-profile-link:hover {
    color: var(--accent-light, var(--accent-color));
    text-decoration: underline;
}

.leaderboard-score {
    font-family: monospace;
    text-align: right;
}

.leaderboard-guesses {
    text-align: right;
    color: var(--text-muted, #888);
    font-size: 0.8rem;
}

.leaderboard-empty {
    text-align: center;
    padding: 40px 0;
    color: var(--text-muted, #888);
    font-size: 0.9rem;
}

/* ── Game share banner ───────────────────────────────────── */
.game-share-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    margin-top: 32px;
    width: 100%;
    box-sizing: border-box;
}

.game-share-preview {
    width: 100%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-color);
    aspect-ratio: 1200 / 630;
    display: flex;
    align-items: center;
    justify-content: center;
}

.game-share-preview img {
    width: 100%;
    height: auto;
    display: block;
}

.game-share-preview img.hidden-banner {
    display: none;
}

.game-share-copy-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--accent-color);
    color: var(--button-primary-text, white);
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.2s;
}

.game-share-copy-btn:hover {
    filter: brightness(1.1);
}

.game-share-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: var(--text-muted);
}

.game-share-loader-text {
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.icon-spinning {
    animation: icon-spin 2s linear infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
}

@keyframes icon-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ── PRO Past Puzzles Calendar ───────────────────────────── */

.pro-calendar {
    margin-top: 24px;
    border-top: 1px solid var(--border-color);
    padding: 16px;
    width: 100%;
    box-sizing: border-box;
    background: color-mix(in srgb, var(--bg-color) 84%, transparent);
    backdrop-filter: blur(6px);
    border-radius: 8px;
}

/* --- Pro Calendar Header & Intro --- */
.pro-calendar-intro {
    text-align: center;
    margin-bottom: 20px;
}
.pro-calendar-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-light, #7c6fff);
    margin: 0 0 4px 0;
}
.pro-calendar-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

.pro-cal-container {
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
}

.pro-cal-upsell {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: rgba(10, 11, 14, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.pro-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.pro-cal-month-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.pro-cal-nav-btn {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 2px 8px;
    transition: border-color 0.15s, color 0.15s;
}

.pro-cal-nav-btn:hover:not(:disabled) {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.pro-cal-nav-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

/* 7-column grid */
.pro-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.pro-cal-dow {
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
    color: var(--text-muted, var(--text-secondary));
    padding-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pro-cal-blank {
    /* invisible spacer */
}

/* Base day cell */
.pro-cal-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: none;
    border: 1px solid transparent;
    cursor: default;
    transition: background 0.12s, border-color 0.12s;
    min-width: 0;
    padding: 0;
}

/* Future dates — not playable */
.pro-cal-day--future {
    opacity: 0.2;
}

/* Past dates with no scheduled puzzle in the database — not playable */
.pro-cal-day--unavailable {
    opacity: 0.4;
    color: var(--text-muted);
    cursor: default;
}

/* Today's puzzle (not yet completed) */
.pro-cal-day--today {
    color: var(--accent-light, #7c6fff);
    border-color: rgba(var(--accent-rgb, 124, 111, 255), 0.35);
    cursor: pointer;
    font-weight: 700;
}

.pro-cal-day--today:hover {
    background: rgba(var(--accent-rgb, 124, 111, 255), 0.12);
    border-color: var(--accent-light, #7c6fff);
}

/* Past puzzle available (not yet completed) */
.pro-cal-day--available {
    color: var(--accent-light, #7c6fff);
    border-color: rgba(var(--accent-rgb, 124, 111, 255), 0.35);
    cursor: pointer;
}

.pro-cal-day--available:hover {
    background: rgba(var(--accent-rgb, 124, 111, 255), 0.12);
    border-color: var(--accent-light, #7c6fff);
}

/* Completed past puzzle */
.pro-cal-day--completed {
    color: var(--success-color, #4caf50);
    border-color: var(--success-border, rgba(76, 175, 80, 0.35));
}

/* Started but not yet finished */
.pro-cal-day--in-progress {
    color: var(--warning-color, #ffca28); /* Amber/Yellow for 'caution/in-progress' */
    border-color: var(--warning-border, rgba(255, 202, 40, 0.35));
}

/* Currently selected date */
.pro-cal-day--selected {
    background: rgba(var(--accent-rgb, 124, 111, 255), 0.18) !important;
    border-color: var(--accent-color, #7c6fff) !important;
    color: var(--accent-color, #7c6fff) !important;
    font-weight: 700;
}

/* "Back to today" button */
.pro-cal-today-btn {
    display: block;
    width: 100%;
    margin-top: 10px;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 6px 0;
    text-align: center;
    transition: border-color 0.15s, color 0.15s;
}

.pro-cal-today-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.pro-cal-loading {
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 6px;
}

/* ── Back-to-lobby button (top-right corner of game header) ── */

.game-back-to-lobby-btn {
    position: absolute;
    top: 0;
    right: 0;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.78rem;
    padding: 4px 10px;
    transition: border-color 0.15s, color 0.15s;
}

.game-back-to-lobby-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/* ── Mobile Overrides ────────────────────────────────────── */

@media (max-width: 768px) {
    .games-site {
        height: auto;
        min-height: 100vh;
        padding-bottom: 0;
        overflow: visible;
    }

    .games-site-shell {
        width: min(100% - 24px, 1180px);
    }

    /* One row, always. This bar is sticky, so stacking it into a column cost
       a row of every screenful for the whole visit; the links drop to their
       icons instead. */
    .games-site-topbar-inner {
        min-height: 52px;
        align-items: center;
        flex-direction: row;
        gap: 10px;
        padding: 6px 0;
    }

    .games-site-brand img {
        height: 28px;
    }

    .games-site-nav {
        flex-wrap: nowrap;
        justify-content: flex-end;
        gap: 6px;
    }

    .games-site-nav-icon {
        display: block;
    }

    /* Hidden visually only; each control carries an `aria-label`. */
    .games-site-nav-label {
        display: none;
    }

    .games-site-nav-link,
    .games-site-button {
        flex: 0 0 auto;
        min-width: 40px;
        padding: 8px 10px;
    }

    .games-site-user {
        display: none;
    }

    .games-site-hero {
        padding: 22px 0 20px;
        background-position: center;
    }

    .games-site-hero h1 {
        font-size: clamp(1.6rem, 7vw, 2.2rem);
    }

    .games-site-play-section {
        padding: 0 0 30px;
    }

    .games-site-game-frame,
    .games-site .games-panel {
        min-height: 620px;
        border-radius: 0 0 12px 12px;
    }

    .games-site .games-content {
        min-height: 570px;
        padding: 12px 4px 20px;
    }

    /* Standalone Games has no primary app tab bar. Keep its game selector in
       normal flow at the top of the frame, matching the desktop hierarchy. */
    .games-site .sub-tab-bar {
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        border: 0 !important;
        border-radius: 8px !important;
        box-shadow: none !important;
        transform: none !important;
        padding: 4px !important;
    }

    .games-site .games-tab-header {
        height: auto !important;
        padding: 10px 10px 0 !important;
        margin: 0 !important;
        overflow: visible;
    }

    .game-container {
        padding: 0 4px;
    }

    .chain-forge-lobby {
        padding: 24px 12px;
        gap: 12px;
    }

    .lobby-game-name {
        font-size: 1.2rem;
    }

    .lobby-date {
        font-size: 1rem;
        margin-bottom: 8px;
    }

    .lobby-rules {
        font-size: 0.85rem;
    }

    .lobby-meta {
        padding: 4px 12px;
        margin-bottom: 4px;
    }

    .pro-calendar {
        margin-top: 16px;
        padding-top: 12px;
    }
}