/* ==========================================================================
   Waiting to play a person: the quick-match search screen and the card at an
   open table. Loaded last, after the older searching-screen rules it restyles.
   ========================================================================== */

/* ── Search screen ─────────────────────────────────────────────────────────── */

#screen-searching .tp-seek {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: calc(100dvh - 32px);
    margin: 16px;
    padding: 32px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    border: 1px solid color-mix(in srgb, var(--tp-color-text) 8%, transparent);
    border-radius: 28px;
    background:
        radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--tp-color-primary) 10%, transparent), transparent 70%),
        color-mix(in srgb, var(--tp-color-surface-raised) 70%, transparent);
    text-align: center;
}

#screen-searching .searching-spinner { display: none; }

.tp-seek__orb {
    position: relative;
    display: grid;
    place-items: center;
    width: 140px;
    height: 140px;
    margin-bottom: 14px;
}

/* A slow ring of light around the time control, and two ripples. */
.tp-seek__orb::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 55%, color-mix(in srgb, var(--tp-color-primary) 85%, transparent) 85%, transparent 100%);
    -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    animation: tp-seek-spin 2.4s linear infinite;
}

.tp-seek__ring {
    position: absolute;
    inset: 18px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--tp-color-primary) 40%, transparent);
    animation: tp-seek-ripple 2.8s ease-out infinite;
}
.tp-seek__ring--late { animation-delay: 1.4s; }

.tp-seek__core {
    position: relative;
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--tp-color-surface-raised) 85%, transparent);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--tp-color-text) 10%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 10px 28px -12px rgba(0, 0, 0, 0.5);
    color: var(--tp-color-text);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

@keyframes tp-seek-spin { to { transform: rotate(360deg); } }
@keyframes tp-seek-ripple {
    0% { transform: scale(0.85); opacity: 0.9; }
    100% { transform: scale(1.35); opacity: 0; }
}

#screen-searching .searching-title {
    margin: 0;
    color: var(--tp-color-text);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.015em;
}

#screen-searching .searching-subtitle {
    color: var(--tp-color-text-muted);
    font-size: 14px;
}

.tp-seek__facts {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.tp-seek__facts > span {
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tp-color-text) 6%, transparent);
    color: var(--tp-color-text-muted);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.tp-seek__facts > span[hidden] { display: none; }

#screen-searching .tp-matchmaking-wait__connection {
    margin: 2px 0 6px;
    color: var(--tp-color-text-muted);
    font-size: 13px;
}

.tp-seek__alone {
    width: min(100%, 360px);
    margin-top: 6px;
    padding: 16px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--tp-color-surface-raised) 88%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tp-color-text) 8%, transparent);
    animation: tp-seek-appear 260ms ease-out both;
}
.tp-seek__alone[hidden] { display: none; }

.tp-seek__alone strong {
    display: block;
    color: var(--tp-color-text);
    font-size: 15px;
}

.tp-seek__alone p {
    margin: 6px 0 12px;
    color: var(--tp-color-text-muted);
    font-size: 13px;
    line-height: 1.45;
}

.tp-seek__alone-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.tp-seek__option,
.tp-wait-card__primary,
.tp-wait-card__secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 14px;
    border: 0;
    border-radius: 14px;
    background: color-mix(in srgb, var(--tp-color-text) 8%, transparent);
    color: var(--tp-color-text);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 100ms ease-out, background-color 160ms ease;
}

.tp-seek__option--primary,
.tp-wait-card__primary {
    background: var(--tp-color-primary);
    color: var(--tp-color-primary-ink, #fff);
}

.tp-seek__option:active,
.tp-wait-card__primary:active,
.tp-wait-card__secondary:active { transform: scale(0.97); }

:is(.tp-seek__option, .tp-wait-card__primary, .tp-wait-card__secondary, .tp-wait-card__close):focus-visible {
    outline: 2px solid var(--tp-color-focus, var(--tp-color-primary));
    outline-offset: 2px;
}

#screen-searching .cancel-search-btn {
    min-height: 44px;
    margin-top: 10px;
    padding: 0 22px;
    border: 1px solid color-mix(in srgb, var(--tp-color-text) 16%, transparent);
    border-radius: 999px;
    background: transparent;
    color: var(--tp-color-text-muted);
    font-weight: 700;
}

@keyframes tp-seek-appear {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

/* ── Waiting card at an open table ─────────────────────────────────────────── */

.tp-wait-card[hidden],
body:not(.table-waiting-game) #table-wait-card { display: none; }

.tp-wait-card {
    position: fixed;
    z-index: 60;
    left: 16px;
    right: 16px;
    /* Over the board, above the player's own name and clock row. */
    bottom: calc(124px + env(safe-area-inset-bottom, 0px));
    max-width: 420px;
    margin: 0 auto;
    padding: 20px 18px 14px;
    border-radius: 24px;
    background: color-mix(in srgb, var(--tp-color-surface-raised) 82%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--tp-color-text) 10%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 24px 48px -18px rgba(0, 0, 0, 0.55);
    text-align: center;
    animation: tp-seek-appear 260ms ease-out both;
}

.tp-wait-card__pulse {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--tp-color-primary);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--tp-color-primary) 60%, transparent);
    animation: tp-wait-pulse 1.8s ease-out infinite;
    vertical-align: middle;
}

@keyframes tp-wait-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tp-color-primary) 55%, transparent); }
    100% { box-shadow: 0 0 0 10px transparent; }
}

.tp-wait-card__eyebrow {
    color: var(--tp-color-text-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
}

.tp-wait-card__title {
    margin: 10px 0 6px;
    color: var(--tp-color-text);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.015em;
}

.tp-wait-card__text {
    margin: 0 0 16px;
    color: var(--tp-color-text-muted);
    font-size: 14px;
    line-height: 1.45;
}

.tp-wait-card__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.tp-wait-card__primary { grid-column: 1 / -1; min-height: 50px; font-size: 15px; }
.tp-wait-card__secondary[hidden] { display: none; }

.tp-wait-card__timer {
    margin: 14px 0 4px;
    color: var(--tp-color-text-muted);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

.tp-wait-card__close {
    min-height: 40px;
    padding: 0 14px;
    border: 0;
    background: transparent;
    color: var(--tp-color-text-muted);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .tp-seek__orb::before,
    .tp-seek__ring,
    .tp-wait-card__pulse,
    .tp-seek__alone,
    .tp-wait-card { animation: none; }
    .tp-seek__ring { opacity: 0.5; }
}

@media (prefers-reduced-transparency: reduce) {
    .tp-wait-card {
        background: var(--tp-color-surface-raised);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* ── Looking back at a move (game/board.js) ────────────────────────────────── */

/* Moves in the protocol are buttons; they keep the cell look of the table. */
#history-content .hist-turn button:is(.hist-w, .hist-b) {
    display: block;
    width: 100%;
    min-height: 32px;
    padding: 4px 6px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
}

#history-content .hist-turn button:is(.hist-w, .hist-b):hover {
    background: color-mix(in srgb, var(--tp-color-text) 7%, transparent);
}

#history-content .hist-turn button.is-shown {
    background: color-mix(in srgb, var(--tp-color-primary) 22%, transparent);
    color: var(--tp-color-text);
    font-weight: 800;
}

#history-content .hist-turn button:focus-visible {
    outline: 2px solid var(--tp-color-focus, var(--tp-color-primary));
    outline-offset: -2px;
}

.tp-peek-chip {
    position: fixed;
    z-index: 70;
    left: 50%;
    top: calc(env(safe-area-inset-top, 0px) + 72px);
    transform: translateX(-50%);
    min-height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: var(--tp-color-primary);
    color: var(--tp-color-primary-ink, #fff);
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.55);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    animation: tp-seek-appear 200ms ease-out both;
}
.tp-peek-chip[hidden] { display: none; }

/* The board shows the past: dim it slightly so it is not taken for the game. */
#screen-game.is-history-peek :is(#row-top, #row-bottom) { filter: saturate(0.75) brightness(0.92); }

/* ── Watch live ─────────────────────────────────────────────────────────────── */

#watch-finished-replay:not([hidden]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
}