/* ───────────────────────────────────────────────────────────────────
   Pong Champion — global polish on top of MudBlazor.
   Drop-in replacement for wwwroot/app.css.
   ─────────────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap");

/* ── App-level resets ─────────────────────────────────────────────── */
html, body {
    margin: 0;
    padding: 0;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Tabular numerals everywhere — keeps scores and ratings aligned. */
.mud-input-control, .mud-table, .mud-typography-h1, .mud-typography-h2,
.mud-typography-h3, .mud-typography-h4, .mud-typography-h5, .mud-typography-h6 {
    font-variant-numeric: tabular-nums;
}

/* ── Score & rating displays ─────────────────────────────────────── */
.pc-mono,
.pc-score-large {
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.pc-score-large {
    font-weight: 600;
    line-height: 0.9;
    font-size: clamp(96px, 14vw, 200px);
}
.pc-score-medium {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 32px;
}

/* ── Status pills (live / scheduled / completed / match-point) ──── */
.pc-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.2px;
    line-height: 1;
    white-space: nowrap;
}
.pc-status--live      { background: var(--mud-palette-error-hover);   color: var(--mud-palette-error-darken);   }
.pc-status--active    { background: var(--mud-palette-primary-hover); color: var(--mud-palette-primary-darken); }
.pc-status--scheduled { background: var(--mud-palette-background-grey); color: var(--mud-palette-text-secondary); }
.pc-status--completed { background: var(--mud-palette-success-hover); color: var(--mud-palette-success-darken); }
.pc-status--warning   { background: var(--mud-palette-warning-hover); color: var(--mud-palette-warning-darken); }
.pc-status--info      { background: var(--mud-palette-info-hover);    color: var(--mud-palette-info-darken);    }

.pc-status .pc-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; flex-shrink: 0;
}
.pc-status--live .pc-dot {
    background: var(--mud-palette-error);
    animation: pc-pulse 1.6s ease-out infinite;
}
@keyframes pc-pulse {
    0%   { box-shadow: 0 0 0 0 var(--mud-palette-error-hover); }
    70%  { box-shadow: 0 0 0 6px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* ── Shared card + results-table styles ──────────────────────────────
   Used by the Dashboard, ScoreBoard set-history and other list/table
   surfaces. Kept global (rather than in a single component's <style>
   block) so every component renders them — a component <style> block is
   only present in the DOM while that component is mounted. */
.pc-card-no-pad { border-radius: 12px !important; overflow: hidden; }
.pc-card-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--mud-palette-divider);
    display: flex; align-items: center; justify-content: space-between;
}
.pc-card-title { font-size: 14px; font-weight: 600; color: var(--mud-palette-text-primary); }

.pc-results-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pc-results-table {
    width: 100%; border-collapse: collapse;
    font-size: 13px; color: var(--mud-palette-text-primary);
}
.pc-results-table thead th {
    text-align: left; font-weight: 600; font-size: 11.5px;
    letter-spacing: 0.3px; color: var(--mud-palette-text-disabled);
    text-transform: uppercase;
    padding: 10px 14px; border-bottom: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background-grey);
}
.pc-results-table tbody td {
    padding: 12px 14px; border-bottom: 1px solid var(--mud-palette-divider);
    vertical-align: middle;
}
.pc-results-table tbody tr:last-child td { border-bottom: none; }
.pc-results-table tbody tr:hover { background: var(--mud-palette-action-default-hover); }
.pc-winner { font-weight: 600; }
.pc-loser { color: var(--mud-palette-text-secondary); }
/* Keep long player names from breaking the row on narrow screens. */
.pc-results-table .pc-name-cell {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 420px) {
    .pc-results-table .pc-name-cell { max-width: 90px; }
}

/* ── MudBlazor density / radius polish ───────────────────────────── */
.mud-paper, .mud-card {
    border-radius: 12px !important;
    border: 1px solid var(--mud-palette-divider);
    background-color: var(--mud-palette-surface);
}
.mud-card { box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }

.mud-button {
    border-radius: 8px !important;
    text-transform: none !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    padding: 7px 14px !important;
    min-height: 36px !important;
}
.mud-button.mud-button-large { padding: 10px 18px !important; min-height: 44px !important; font-size: 14px !important; }

.mud-icon-button { border-radius: 8px !important; }

.mud-table .mud-table-cell {
    border-bottom: 1px solid var(--mud-palette-divider);
    padding: 12px 14px;
}
.mud-table .mud-table-head {
    background: var(--mud-palette-background-grey);
}
.mud-table .mud-table-head .mud-table-cell {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
}
.mud-table-container { border-radius: 12px; overflow: hidden; }

/* ── Tabs ─────────────────────────────────────────────────────────── */
.mud-tabs .mud-tab {
    text-transform: none;
    font-size: 13px;
    font-weight: 500;
    min-height: 44px;
    color: var(--mud-palette-text-secondary);
}
.mud-tabs .mud-tab.mud-tab-active {
    color: var(--mud-palette-primary);
    font-weight: 600;
}
.mud-tabs .mud-tab-slider { background-color: var(--mud-palette-primary); height: 2px; }

/* ── Chips (status, filter, leaderboard) ─────────────────────────── */
.mud-chip {
    border-radius: 6px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px;
    font-size: 11.5px !important;
    padding: 3px 9px !important;
    height: auto !important;
}
.mud-chip-small {
    font-size: 10.5px !important;
    padding: 2px 7px !important;
}

/* ── Alerts ──────────────────────────────────────────────────────── */
.mud-alert { border-radius: 10px !important; border: 1px solid transparent; }

/* ── Dialogs ─────────────────────────────────────────────────────── */
.mud-dialog { border-radius: 14px !important; }
.mud-dialog-title { font-family: 'Inter Tight', 'Inter', sans-serif; font-weight: 600; letter-spacing: -0.01em; }

/* ── Scrollbars ──────────────────────────────────────────────────── */
::-webkit-scrollbar      { width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{
    background: var(--mud-palette-lines-default);
    border: 2px solid transparent;
    background-clip: content-box;
    border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover{
    background: var(--mud-palette-lines-inputs);
    background-clip: content-box;
    border: 2px solid transparent;
}

/* ── Scoreboard page (fullscreen broadcast mode) ─────────────────── */
.pc-scoreboard-page {
    background: var(--mud-palette-background);
    min-height: calc(100vh - 64px);
    padding: 32px;
}
.pc-scoreboard-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}
.pc-scoreboard-card--serving {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--mud-palette-primary) 22%, transparent),
                0 12px 40px rgba(0, 0, 0, 0.08);
}
.pc-scoreboard-card--match-point {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--mud-palette-warning) 28%, transparent),
                0 12px 40px rgba(0, 0, 0, 0.08);
    border-color: var(--mud-palette-warning);
}

/* ── Data Grid hover ─────────────────────────────────────────────── */
/* Only grids with per-row action buttons use Hover="true". */
.mud-table-hover tbody .mud-table-row:hover {
    background-color: var(--mud-palette-table-hover) !important;
}

/* ── Form validation ─────────────────────────────────────────────── */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--mud-palette-success);
}

.invalid {
    outline: 1px solid var(--mud-palette-error);
}

.validation-message {
    color: var(--mud-palette-error);
    font-size: 0.8rem;
}

/* ── Blazor error UI ─────────────────────────────────────────────── */
#blazor-error-ui {
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-error);
    bottom: 0;
    color: var(--mud-palette-text-primary);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: var(--mud-palette-error);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* ── Utility ─────────────────────────────────────────────────────── */
h1:focus {
    outline: none;
}

/* ── Coin Toss ───────────────────────────────────────────────────── */
.coin-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 1.35s cubic-bezier(.18,.7,.2,1);
}

.coin-face {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    font-weight: 800;
    gap: 3px;
}

.coin-face-back {
    transform: rotateY(180deg);
}

.coin-toss-server-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    width: 100%;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: border-color .15s, background .15s;
    background: transparent;
}

.coin-toss-server-card:hover {
    opacity: 0.9;
}

.coin-step-badge {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    background: var(--mud-palette-primary-hover);
    color: var(--mud-palette-primary);
    flex-shrink: 0;
}

@keyframes ct-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ct-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.ct-fade { animation: ct-fade .5s .9s both; }
.ct-rise { animation: ct-rise .45s 1s both; }

@media (prefers-reduced-motion: reduce) {
    .coin-flip-inner { transition: none !important; }
    .ct-fade, .ct-rise { animation: none !important; }
    .pc-status--live .pc-dot { animation: none !important; }
}