/* Small additions on top of the network stylesheet: things our pages need that it does not cover. */
[hidden] { display: none !important; }

/* header user menu */
.user-menu { cursor: pointer; color: var(--text-primary); }
.user-menu img { width: 28px; height: 28px; border-radius: 6px; image-rendering: pixelated; }
.user-menu-info span { font-size: 0.8125rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-dropdown-icon { font-size: 0.7rem; color: var(--text-tertiary); transition: transform 0.2s; }
.user-dropdown { position: absolute; right: 0; top: calc(100% + 8px); min-width: 190px; padding: 6px; background: var(--bg-elevated); border: 1px solid var(--border-medium); border-radius: 12px; box-shadow: 0 16px 40px rgba(31, 30, 27, 0.175); display: none; z-index: 60; }
.user-dropdown.active { display: block; }
.user-dropdown a, .user-dropdown button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); background: none; border: 0; border-radius: 8px; cursor: pointer; text-align: left; }
.user-dropdown a:hover, .user-dropdown button:hover { color: var(--text-primary); background: rgba(31, 30, 27, 0.05); }
.user-dropdown i { width: 16px; text-align: center; color: var(--accent); }
.mobile-nav form { display: contents; }
.mobile-nav button.mobile-nav-link { width: 100%; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; }

/* news list */
.news-load-more { display: flex; justify-content: center; margin-top: 32px; }
.news-recent-no-image { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 160px; background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-secondary) 100%); color: var(--text-tertiary); font-size: 2rem; }
.news-featured-image .news-recent-no-image { min-height: 260px; }

/* match inventory counts */
.slot { position: relative; }
.slot-count { position: absolute; right: 3px; bottom: 1px; font-size: 0.75rem; font-weight: 800; line-height: 1; color: var(--text-primary); text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; pointer-events: none; }

/* skin renders that fell back to a plain head */
.lb-player-avatar.is-fallback { width: 44px !important; height: 44px !important; margin: 0 12px; border-radius: 6px; }
.profile-skin-render.is-fallback { width: 120px; }

/* tickets */
.tickets-list-row .col-arrow { color: var(--text-tertiary); text-align: center; }
.tickets-list-row .col-status { text-align: center; }
.ticket-detail-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; }
.ticket-detail-label { font-size: 0.75rem; font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
.ticket-detail-user img { width: 24px; height: 24px; border-radius: 4px; image-rendering: pixelated; vertical-align: middle; }
.ticket-category-pill { display: inline-flex; align-items: center; min-height: 30px; padding: 0 14px; margin-left: 8px; font-size: 0.75rem; font-weight: 700; border-radius: 999px; background: rgba(31, 30, 27, 0.06); color: var(--text-secondary); }
.ticket-message-body { padding: 16px 20px; color: var(--text-secondary); font-size: 0.9375rem; line-height: 1.6; }
.ticket-message-author strong { font-size: 0.9375rem; color: var(--text-primary); }
.ticket-message-staff .ticket-message-header { background: rgba(59, 130, 246, 0.06); }
.ticket-closed-notice { display: flex; align-items: center; gap: 10px; padding: 16px 20px; margin-bottom: 20px; border: 1px solid var(--border-subtle); border-radius: 12px; color: var(--text-tertiary); font-size: 0.875rem; }
.page-header-action { align-self: center; }
.page-header-title-row-split { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.container-narrow { max-width: 860px; }

/* auth extras */
.auth-form .alert { margin-bottom: 8px; }
.auth-player { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 16px; border: 1px solid var(--border-subtle); border-radius: 12px; background: rgba(31, 30, 27, 0.02); }
.auth-player-skin { width: 48px; height: 48px; border-radius: 8px; image-rendering: pixelated; }
.auth-footer { margin-top: 20px; text-align: center; font-size: 0.875rem; color: var(--text-tertiary); }
.auth-footer a { color: var(--accent); font-weight: 600; }

/* practice chart drawn on the client */
.practice-chart-card { min-height: 230px; }
.practice-chart-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-tertiary); font-size: 0.875rem; }

/* keep the off-canvas mobile drawer from widening the page */
html, body { overflow-x: hidden; }

/* brand: SVG mark + the site's own wordmark */
.header-logo, .footer-logo { display: flex; align-items: center; gap: 10px; }
.header-logo-mark { width: 40px; height: 40px; }
.footer-logo .header-logo-mark { width: 32px; height: 32px; }
.header-wordmark { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: 0.06em; color: var(--text-primary); white-space: nowrap; }
.footer-logo .header-wordmark { font-size: 1.05rem; }

/* Arena tiles stay dark photo cards on the ivory page: white type over a darkened, blurred render. */
.gamemode-image::after { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.18) 45%, rgba(0, 0, 0, 0.55) 100%); }
.gamemode-footer { background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.12) 80%, transparent 100%); }
.gamemode-title, .gamemode-footer-label, .top-rank { color: #fff; }
.gamemode-title { text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); }
.gamemode-top-player { background: rgba(255, 255, 255, 0.14); }
.top-rank { background: rgba(255, 255, 255, 0.22); }
.top-name { color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.gamemode-top-player:nth-child(1) .top-name { color: #fcd34d; }
@media (max-width: 768px) { .header-wordmark { display: none; } }

/* the mark and wordmark never give way to the nav on mid-sized screens */
.header-logo { flex-shrink: 0; }
.header-nav { flex-shrink: 0; }
@media (max-width: 1100px) { .search-input { width: 150px; } .nav-link { padding: 10px 12px; } }

/* Sub-page hero: the render sits faintly under an ivory wash instead of being crushed to black. */
.page-hero-bg { filter: blur(2px) saturate(0.7); opacity: 0.45; }
.page-hero-overlay { background: linear-gradient(to right, rgba(250, 249, 245, 0.92) 0%, rgba(250, 249, 245, 0.55) 70%, rgba(250, 249, 245, 0.35) 100%); }
/* Profile widgets: keep the arena render as a whisper behind the numbers. */
.pw-widget .pw-widget-bg img, .pw-widget:hover .pw-widget-bg img, .pw-practice-panel .pw-widget-bg img, .pw-activity-widget .pw-widget-bg img { opacity: 0.28 !important; filter: blur(4px) brightness(1.05) saturate(0.7) !important; }
/* Forms: white fields with a hairline, not tinted blocks. */
.auth-form input:not([type="checkbox"]):not([type="submit"]), .auth-form textarea, .auth-form select { background: #ffffff; border: 1px solid var(--border-medium); }

/* Recent matches: below the sidebar breakpoint the five fixed columns no longer fit, so the kit takes a line of its own. */
@media (max-width: 960px) {
    .practice-match-row { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); row-gap: 8px; column-gap: 10px; }
    .practice-match-kit { grid-column: 1 / -1; }
    .practice-match-row > i, .practice-match-row > .practice-match-arrow, .practice-match-row > svg { display: none; }
}

/* Play dialog: with the tutorial gone the close button shares the row with the copy button, so leave it room. */
.play-dialog-content { padding-right: 68px; }

/* whitelist review */
.wl-row { cursor: default; align-items: flex-start; }
.wl-head { width: 20px; height: 20px; border-radius: 4px; vertical-align: -4px; image-rendering: pixelated; }
.wl-reason { margin: 6px 0 0; font-size: 0.85rem; color: var(--text-secondary); white-space: pre-wrap; }
.wl-failure { color: var(--error); }
.wl-actions { display: flex; gap: 8px; justify-content: flex-end; }
.wl-actions form { display: inline; }
.wl-btn { padding: 8px 12px; font-size: 0.8125rem; }
.wl-btn-reject { background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border-medium); }
.wl-btn-reject:hover { border-color: var(--error); color: var(--error); }
.wl-card-gap { margin-top: 24px; }
.wl-header, .wl-row { grid-template-columns: minmax(0, 1fr) 120px 120px 230px; }
@media (max-width: 900px) { .wl-header, .wl-row { grid-template-columns: minmax(0, 1fr) 100px 100px 190px; } }