/* PLS UI: foundations, shared components, pages and responsive layouts.
   This is the only stylesheet used by current pages. */
:root {
 color-scheme:dark; --bg:#101114; --surface:#181a1e; --raised:#202329; --line:#30343b;
 --text:#f4f4f5; --muted:#adb2bd; --red:#e60012; --red-hover:#c90010; --accent:#ff3030;
 --red-soft:#2e1114; --red-line:#8c1821;
 --success:#79d6aa; --warning:#edc277; --radius:6px; --content:1200px;
 --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px; --space-5:48px;
 --font:'Segoe UI',system-ui,-apple-system,BlinkMacSystemFont,sans-serif; --ease:160ms ease;
}
* { box-sizing:border-box; }
html { background:var(--bg); scroll-behavior:smooth; scroll-padding-top:96px; scrollbar-gutter:stable; }
body { margin:0; min-width:280px; min-height:100vh; color:var(--text); background:var(--bg); font:15px/1.6 var(--font); -webkit-font-smoothing:antialiased; }
[hidden] { display:none!important; }
::selection { background:var(--red-hover); color:#fff; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; border-radius:var(--radius); }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; color:var(--text); border:1px solid var(--line); background:var(--raised); }
button:disabled { cursor:wait; opacity:.6; }
button,a { transition:background-color var(--ease),border-color var(--ease),color var(--ease),transform var(--ease); }
a:hover { color:#fff; }
:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
input,select,textarea { font-size:14px; min-width:0; width:100%; min-height:46px; padding:11px 13px; color:var(--text); background:#111317; border:1px solid #444952; transition:border-color var(--ease); }
input:hover,select:hover,textarea:hover { border-color:#717987; }
input:focus,select:focus,textarea:focus { border-color:var(--accent); }
input::placeholder,textarea::placeholder { color:#9299a6; opacity:1; }
input[type=checkbox] { width:18px; min-height:18px; height:18px; margin:0; accent-color:var(--red); }
textarea { min-height:110px; resize:vertical; }
label { display:grid; gap:8px; font-size:12px; font-weight:600; letter-spacing:.3px; color:var(--muted); }
img { max-width:100%; display:block; }
svg { width:20px; height:20px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.7; }
p { margin:0 0 16px; }
h1,h2,h3 { margin:0; line-height:1.15; letter-spacing:-.035em; }
h1 { font-size:clamp(32px,4vw,48px); font-weight:750; } h2 { font-size:26px; } h3 { font-size:19px; }
em { color:var(--accent); font-style:normal; } small { font-size:12px; }
code { font:13px/1.5 Consolas,monospace; overflow-wrap:anywhere; }
main,section,article,aside,form,nav { min-width:0; }
.wrap,.site-header__inner,.site-footer__inner,.stats-main-inner,.media-library-inner,.panel-shell,.admin-shell,.clan-shell,.login-main { width:min(var(--content),calc(100% - 64px)); margin-inline:auto; }
.page,.stats-main,.media-library { padding-block:56px 72px; min-height:calc(100vh - 330px); }
.kicker,.stats-heading>div>p,.media-page-head>div>p,.clan-content-head>div>p,.panel-title>div>p,.connect>p { color:var(--muted); font-weight:650; font-size:11px; letter-spacing:1.8px; text-transform:uppercase; margin-bottom:14px; }
.kicker::before { content:''; width:22px; height:2px; background:var(--red); display:inline-block; vertical-align:middle; margin-right:10px; }
.title { font-size:clamp(32px,4vw,48px); }
.page-intro { max-width:700px; margin:20px 0 32px; color:var(--muted); }
.skip-link { position:fixed; left:16px; top:-80px; z-index:100; background:var(--text); color:#101114; padding:12px 18px; border-radius:var(--radius); }
.skip-link:focus { top:12px; color:#101114; }
.sr-only,.site-logo__mark,.site-logo__name { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
/* Navigation */
.site-header { position:sticky; top:0; z-index:30; background:var(--bg); border-bottom:1px solid var(--line); }
.site-header__inner { display:flex; gap:24px; align-items:center; min-height:78px; }
.site-logo { display:block; width:156px; height:48px; flex:0 0 156px; }
.site-logo::before { content:''; display:block; width:100%; height:100%; background:url('assets/pls-logo-wide-transparent.png') center/contain no-repeat; }
.site-nav { display:flex; align-items:center; justify-content:center; gap:4px; margin-left:auto; }
.site-nav a { display:flex; align-items:center; min-height:44px; padding:10px 12px; font-size:12px; font-weight:650; color:var(--muted); position:relative; white-space:nowrap; }
.site-nav a:hover,.site-nav a.active { color:var(--text); background:var(--surface); border-radius:var(--radius); }
.site-nav a.active::after { content:''; position:absolute; bottom:3px; left:12px; right:12px; height:2px; background:var(--red); }
.site-header__actions { display:flex; align-items:center; gap:10px; }
.site-login,.site-play { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:9px 17px; font-size:12px; font-weight:700; border-radius:var(--radius); white-space:nowrap; }
.site-login { border:1px solid var(--line); } .site-login:hover { background:var(--raised); border-color:#646b76; }
.site-play { border:1px solid var(--red); background:var(--red); color:#fff; } .site-play:hover { background:var(--red-hover); border-color:var(--red-hover); }
.site-menu-toggle,.site-nav .site-nav__mobile-action { display:none; }
.site-notice { padding:10px 24px; text-align:center; background:var(--red-soft); border-bottom:1px solid var(--red-line); font-size:13px; overflow-wrap:anywhere; }
/* Shared controls and feedback */
.button,.clan-primary-button,.submit-video-button,.dialog-submit,.mini-button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:46px; padding:11px 20px; border:1px solid var(--line); border-radius:var(--radius); background:var(--raised); color:var(--text); font-size:12px; font-weight:700; line-height:1.4; text-align:center; }
.button span { font-size:17px; }
.primary,.clan-primary-button,.submit-video-button,.dialog-submit { background:var(--red); border-color:var(--red); color:#fff; }
.primary:hover,.clan-primary-button:hover,.submit-video-button:hover,.dialog-submit:hover { background:var(--red-hover); border-color:var(--red-hover); }
.outline { background:transparent; border-color:#535965; } .outline:hover,.mini-button:hover { background:var(--raised); border-color:#89919d; }
.button:active,.site-play:active,.mini-button:active { transform:translateY(1px); }
.mini-button { min-height:38px; padding:8px 12px; font-size:11px; } .danger { color:var(--accent); border-color:var(--red-line); }
.card-actions,.actions { display:flex; gap:10px; flex-wrap:wrap; }
.panel-card,.match-card,.community-video-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--space-3); }
.panel-card h3 { margin-bottom:16px; } .panel-card>p,.match-card>p { color:var(--muted); overflow-wrap:anywhere; }
.panel-card>small { display:block; color:var(--muted); margin-bottom:12px; }
.global-toast,.media-toast { position:fixed; z-index:100; bottom:24px; left:50%; transform:translate(-50%,10px); width:max-content; max-width:min(520px,calc(100% - 32px)); padding:14px 20px; border:1px solid #667061; border-left:3px solid var(--success); border-radius:var(--radius); background:#252c28; box-shadow:0 8px 24px #0005; color:#fff; opacity:0; visibility:hidden; transition:opacity var(--ease),transform var(--ease),visibility var(--ease); overflow-wrap:anywhere; }
.global-toast.show,.media-toast.show { opacity:1; visibility:visible; transform:translate(-50%,0); }
.global-toast[data-kind=error] { background:var(--red-soft); border-color:var(--red-line); border-left-color:var(--accent); }
.form-message,.dialog-error { font-size:13px; color:var(--accent); margin:0; }
.form-message:empty,.dialog-error:empty { display:none; } .form-message[data-kind=loading] { color:var(--muted); }
.load-status { display:flex; align-items:center; gap:12px; padding:18px 20px; border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); margin-bottom:20px; color:var(--muted); flex-wrap:wrap; }
.load-status[data-state=error] { border-color:var(--red-line); color:var(--accent); }
.load-status[data-state=loading]::before { content:''; flex:0 0 14px; height:14px; border:2px solid #555c68; border-top-color:var(--text); border-radius:50%; animation:spin .8s linear infinite; }
.load-status button { margin-left:auto; min-height:38px; padding:7px 14px; }
[aria-busy=true]>:not(.load-status) { opacity:.55; }
/* Home */
.hero { position:relative; isolation:isolate; overflow:hidden; border-bottom:1px solid var(--line); min-height:620px; display:grid; align-items:center; padding-block:64px; background:var(--bg); }
.hero::after { content:''; position:absolute; top:0; left:50%; height:100%; aspect-ratio:1672 / 941; transform:translateX(-50%); z-index:-2; background:url('assets/pls-dust-character-hero-v4.png') center top/100% 100% no-repeat; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 86%,transparent); }
.hero::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#101114f5 0%,#101114cc 40%,#10111410 78%); }
.hero-copy { position:relative; }
.hero h1 { font-size:clamp(42px,4.8vw,66px); line-height:1.04; letter-spacing:-.045em; max-width:680px; } .hero h1 em { color:var(--text); }
.hero .intro { max-width:510px; margin-block:24px; font-size:16px; color:#c3c7cf; line-height:1.65; }
.hero-tags { display:flex; flex-wrap:wrap; gap:8px 18px; margin:0 0 28px; color:#c3c7cf; font-size:10px; font-weight:600; letter-spacing:.7px; }
.hero-tags span+span { padding-left:18px; border-left:1px solid #626976; }
.hero-statusbar { margin-top:30px; display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; }
.live { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; }
.live b { font-size:11px; font-weight:650; letter-spacing:.4px; }
.dot { width:7px; height:7px; border-radius:50%; background:var(--muted); }
.live[data-online=true] .dot { background:var(--success); } .live[data-online=false] .dot { background:var(--accent); }
.server-address { color:#bdc2cc; font-size:12px; }
.hero-quick-info { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:min(660px,100%); margin-top:30px; padding-top:20px; border-top:1px solid #464a52; }
.hero-quick-info>div { padding-right:16px; } .hero-quick-info span { display:block; color:#b0b6c0; font-size:10px; letter-spacing:.7px; margin-bottom:5px; } .hero-quick-info b { font-size:12px; font-weight:600; }
.hero-side { position:absolute; right:max(32px,calc((100% - var(--content))/2)); bottom:36px; width:235px; padding:16px 0 16px 20px; border-left:2px solid var(--red); background:#101114b8; }
.hero-side div { color:var(--muted); font-size:10px; letter-spacing:1.2px; } .hero-side b { display:block; margin-top:8px; font-size:14px; line-height:1.4; } .hero-side p { margin:5px 0 0; color:var(--muted); font-size:12px; }
.home-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; padding-block:40px 56px; }
.home-links a { position:relative; padding:24px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.home-links a:hover { border-color:#666d79; transform:translateY(-3px); }
.home-links a>span { display:block; color:var(--accent); font-size:11px; font-weight:650; letter-spacing:1px; margin-bottom:24px; }
.home-links b { font-size:23px; line-height:1.2; letter-spacing:-.5px; } .home-links p { color:var(--muted); font-size:14px; margin:12px 0 0; max-width:280px; }
.home-links i { position:absolute; right:24px; top:24px; font-style:normal; color:var(--muted); }
.connect { padding:56px 24px; text-align:center; background:var(--surface); border-block:1px solid var(--line); }
.connect .title { font-size:clamp(30px,3.6vw,44px); } .connect em { color:var(--text); }
.connect code { display:block; margin:24px auto 16px; color:#d9dce2; font-size:clamp(14px,2vw,18px); }
.connect .button { background:var(--red); border-color:var(--red); }
.connect-steps { display:flex; justify-content:center; flex-wrap:wrap; gap:18px 32px; margin:32px 0 16px; font-size:11px; letter-spacing:.3px; }
.connect-steps b { color:var(--accent); margin-right:8px; } .connect>small { color:var(--muted); }
/* Footer */
.site-footer { border-top:1px solid var(--line); background:var(--bg); }
.site-footer__inner { display:grid; grid-template-columns:2fr 1fr 1.4fr; gap:40px; padding-block:40px; }
.site-footer .site-logo { width:124px; height:38px; }
.site-footer p { margin:16px 0 0; color:var(--muted); font-size:12px; }
.site-footer nav,.site-footer__server { display:flex; flex-direction:column; align-items:flex-start; gap:9px; color:var(--muted); font-size:13px; }
.site-footer nav>b,.site-footer__server>b { color:var(--text); font-size:11px; letter-spacing:1px; margin-bottom:7px; }
.footer-copy { min-height:38px; padding:8px 12px; font-size:11px; font-weight:600; background:transparent; }
/* Headings and tabular data */
.stats-heading,.media-page-head,.clan-content-head,.panel-title { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:32px; }
.stats-heading>span,.panel-title>span { font-size:11px; color:var(--muted); letter-spacing:.5px; }
.stats-heading>span { white-space:nowrap; padding:7px 12px; border:1px solid var(--line); border-radius:var(--radius); }
.stats-heading>span i { display:inline-block; width:6px; height:6px; margin-right:5px; background:var(--success); border-radius:50%; }
.rank-control-panel { display:grid; grid-template-columns:1fr 1fr 1.5fr; gap:24px; padding:24px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:24px; align-items:end; }
.rank-control-panel small { display:block; color:var(--muted); font-size:11px; margin-bottom:8px; font-weight:650; letter-spacing:.5px; } .rank-control-panel label { display:block; }
.rank-periods,.clan-rank-filters,.media-sort { display:flex; gap:4px; }
.rank-periods button,.clan-rank-filters button,.media-sort-button { padding:10px 14px; min-height:44px; background:transparent; border-color:transparent; color:var(--muted); font-size:12px; font-weight:650; }
.rank-periods { background:#111317; border:1px solid #444952; border-radius:var(--radius); padding:3px; }
.rank-periods button { min-height:38px; flex:1; padding:8px 12px; }
.rank-periods button.active,.media-sort-button.active,.clan-rank-filters button.active { background:#35323a; color:#fff; }
.rank-periods button:hover,.clan-rank-filters button:hover,.media-sort-button:hover { background:var(--raised); color:var(--text); }
.rank-search>div { display:flex; gap:8px; }
.rank-search button,.clan-search-bar>button { font-size:11px; font-weight:700; padding:10px 16px; min-height:46px; }
.stats-table-panel { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.stats-table-caption,.clan-table-caption { display:flex; justify-content:space-between; align-items:center; gap:16px; background:var(--surface); border-bottom:1px solid var(--line); padding:20px; }
.stats-table-caption h2,.clan-table-caption>b { font-size:13px; letter-spacing:.4px; font-weight:650; }
.stats-table-caption>span,.clan-table-caption>span { font-size:11px; color:var(--muted); white-space:nowrap; }
.stats-table-scroll,.clan-table-scroll,.simple-table { overflow-x:auto; max-width:100%; scrollbar-width:thin; scrollbar-color:#606774 var(--surface); }
.simple-table { border:1px solid var(--line); border-radius:var(--radius); }
table { border-collapse:collapse; width:100%; text-align:left; font-variant-numeric:tabular-nums; font-size:13px; }
th { padding:15px 18px; color:var(--muted); font-size:10px; font-weight:650; letter-spacing:.5px; white-space:nowrap; background:#1b1e23; border-bottom:1px solid var(--line); }
td { padding:15px 18px; border-bottom:1px solid #292d34; white-space:nowrap; }
tbody tr:last-child td { border-bottom:0; } tbody tr:hover { background:#1c1f24; }
.stats-position,.clan-position { color:var(--muted); width:48px; }
tr:nth-child(-n+3) .stats-position,tr:nth-child(-n+3) .clan-position { color:var(--accent); font-weight:750; }
.active-stat { color:var(--text); font-weight:700; }
.stats-player-cell,.clan-team-cell,.member-player { display:flex; align-items:center; gap:12px; }
.stats-player-cell strong,.clan-team-cell strong { display:block; font-size:13px; }
.stats-player-cell small,.clan-team-cell small { display:block; font-size:10px; color:var(--muted); margin-top:3px; }
.rank-skin { width:36px; height:42px; overflow:hidden; flex-shrink:0; display:grid; place-items:center; background:var(--raised); border-radius:4px; }
.rank-skin img { width:100%; height:100%; object-fit:contain; }
.clan-emblem { display:grid; place-items:center; width:38px; height:38px; background:var(--red-soft); color:var(--accent); border:1px solid var(--red-line); border-radius:4px; font-weight:750; }
.member-player img { height:42px; width:32px; object-fit:contain; }
.stats-empty,.clan-empty-state,.media-empty { text-align:center; padding:48px 24px; color:var(--muted); }
.stats-empty b,.stats-empty span { display:block; } .stats-empty b { color:var(--text); margin-bottom:8px; font-size:14px; } .stats-empty span { font-size:13px; }
.clan-empty-state h2,.media-empty h2 { margin-bottom:14px; color:var(--text); }
.stats-disclaimer { color:var(--muted); font-size:12px; margin:18px 0 0; }
/* Clans and private panels */
.clan-shell,.panel-shell,.admin-shell { display:grid; grid-template-columns:218px minmax(0,1fr); gap:32px; padding-block:40px 64px; min-height:calc(100vh - 79px); align-items:start; }
.clan-sidebar,.panel-sidebar,.admin-sidebar { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px 16px; position:sticky; top:103px; }
.clan-sidebar>div>p { color:var(--muted); font-size:10px; letter-spacing:1px; margin-bottom:8px; }
.clan-sidebar h2,.admin-sidebar h1 { font-size:21px; margin-bottom:24px; }
.clan-sidebar nav,.panel-sidebar nav,.admin-sidebar nav { display:grid; gap:6px; }
.clan-sidebar nav a,.panel-sidebar nav a,.admin-sidebar nav button { display:flex; align-items:center; min-height:44px; gap:10px; padding:12px; font-size:11px; font-weight:600; color:var(--muted); background:transparent; border:1px solid transparent; border-radius:var(--radius); text-align:left; }
.clan-sidebar nav a.active,.panel-sidebar nav a.active,.admin-sidebar nav button.active { background:var(--red-soft); color:var(--accent); border-color:var(--red-line); }
.clan-sidebar nav a:hover,.panel-sidebar nav a:hover,.admin-sidebar nav button:hover { color:var(--text); background:var(--raised); }
.clan-sidebar nav i { margin-left:auto; font-style:normal; } .clan-sidebar nav span { font-size:10px; opacity:.7; }
.clan-season { margin-top:28px; padding:20px 12px 0; border-top:1px solid var(--line); }
.clan-season small,.clan-season b,.clan-season span { display:block; }
.clan-season small { font-size:10px; color:var(--muted); letter-spacing:.5px; } .clan-season b { margin:6px 0; font-size:16px; } .clan-season span { font-size:10px; color:var(--success); }
.clan-content-head { align-items:start; } .clan-content-head h1 { font-size:clamp(30px,3vw,42px); }
.clan-content-head>div>span { display:block; margin-top:16px; font-size:14px; color:var(--muted); }
.clan-primary-button { flex-shrink:0; font-size:11px; padding-inline:14px; }
.clan-search-bar { display:flex; gap:10px; margin:0 0 16px; }
.clan-search-bar label,.video-search { position:relative; flex:1; display:flex; align-items:center; }
.clan-search-bar svg,.video-search svg { position:absolute; left:14px; color:var(--muted); pointer-events:none; }
.clan-search-bar input,.video-search input { padding-left:44px; }
.clan-rank-filters { margin-bottom:24px; }
.clan-table-caption { border:1px solid var(--line); border-radius:6px 6px 0 0; }
.clan-table-scroll { border:1px solid var(--line); border-top:0; border-radius:0 0 6px 6px; }
.clan-detail { margin-top:32px; padding:32px; }
.clan-detail-head { display:flex; align-items:center; gap:24px; margin-bottom:32px; }
.clan-detail-logo { display:grid; place-items:center; width:88px; min-height:88px; flex:0 0 88px; font-size:22px; font-weight:750; background:var(--red-soft); border:1px solid var(--red-line); border-radius:var(--radius); color:var(--accent); overflow-wrap:anywhere; }
.clan-detail-head small { color:var(--muted); } .clan-detail-head h2 { margin:6px 0 12px; overflow-wrap:anywhere; }
.clan-detail-head p { color:var(--muted); font-size:13px; margin:0; }
.clan-detail-metrics { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border-block:1px solid var(--line); margin-bottom:24px; }
.clan-detail-metrics>div { padding:20px 12px; } .clan-detail-metrics small { color:var(--muted); display:block; font-size:10px; } .clan-detail-metrics b { font-size:24px; font-variant-numeric:tabular-nums; }
.clan-leadership { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:24px; }
.clan-leadership span,.clan-leadership b { display:block; } .clan-leadership span { color:var(--muted); font-size:10px; margin-bottom:6px; } .clan-leadership b { font-size:14px; overflow-wrap:anywhere; }
.dashboard-identity { padding:0 8px 24px; margin-bottom:20px; border-bottom:1px solid var(--line); }
.dashboard-skin { display:grid; place-items:center; height:140px; background:#22262d; border-radius:var(--radius); margin-bottom:20px; }
.dashboard-skin img { height:130px; width:80px; object-fit:contain; }
.dashboard-identity .kicker { font-size:9px; letter-spacing:1px; }
.dashboard-identity h1 { font-size:23px; overflow-wrap:anywhere; margin-bottom:10px; }
.dashboard-identity>span,.dashboard-clan-tag { display:inline-block; padding:4px 8px; background:var(--red-soft); color:var(--accent); border:1px solid var(--red-line); border-radius:4px; font-size:10px; font-weight:650; }
.sidebar-logout { width:100%; min-height:44px; margin-top:24px; padding:10px; font-size:11px; background:transparent; }
.panel-title h2 { font-size:clamp(28px,3.3vw,42px); }
.metric-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(135px,1fr)); gap:16px; margin-bottom:32px; }
.metric-grid>div { min-width:0; background:var(--surface); border:1px solid var(--line); padding:20px; border-radius:var(--radius); }
.metric-grid small { display:block; color:var(--muted); font-size:10px; font-weight:650; letter-spacing:.6px; margin-bottom:12px; }
.metric-grid b { display:block; font-size:clamp(23px,2.2vw,30px); letter-spacing:-.8px; line-height:1.2; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.dashboard-section-title { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.dashboard-section-title h3 { font-size:13px; letter-spacing:.6px; } .dashboard-section-title span { color:var(--muted); font-size:10px; }
.panel-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } .panel-grid h3 { font-size:13px; letter-spacing:.7px; }
.stat-list p { display:flex; justify-content:space-between; gap:12px; padding:12px 0; margin:0; border-bottom:1px solid var(--line); font-size:13px; }
.stat-list p:last-child { border:0; padding-bottom:0; } .stat-list span { color:var(--muted); } .stat-list b { text-align:right; }
.clan-dashboard-card { display:flex; flex-direction:column; justify-content:space-between; gap:24px; }
#clan-info h3 { margin:14px 0 8px; font-size:22px; letter-spacing:-.5px; } #clan-info p { font-size:13px; color:var(--muted); }
.admin-sidebar .kicker { font-size:10px; }
#admin-user { font-size:12px; color:var(--muted); padding-bottom:20px; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.admin-view { display:none; } .admin-view.active { display:block; }
.admin-toolbar { display:flex; gap:12px; margin-bottom:24px; } .admin-toolbar input { max-width:440px; }
.admin-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.admin-readonly-note { color:var(--muted); font-size:14px; margin-bottom:24px; }
.panel-form { display:grid; gap:20px; padding:24px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); margin-bottom:24px; }
.panel-form.compact { grid-template-columns:repeat(2,minmax(0,1fr)); } .panel-form .form-wide { grid-column:1 / -1; } .panel-form>button { justify-self:start; }
.invite-row { display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--line); padding-block:16px; }
.invite-row small { display:block; color:var(--muted); } .invite-row>div:last-child { display:flex; flex-wrap:wrap; gap:8px; } #admin-entry-panel { margin-top:24px; }
/* Sign-in */
.login-main { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding-block:48px; gap:64px; align-items:stretch; }
.login-panel { padding:24px 0; max-width:460px; width:100%; } .login-panel .title { font-size:clamp(36px,4vw,50px); }
.login-panel>p:not(.kicker),.admin-login-card>p:not(.kicker) { color:var(--muted); font-size:14px; margin:20px 0 28px; }
#login-form,#admin-login-form,#video-submit-form { display:grid; gap:20px; }
.login-row { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.check { display:flex; align-items:center; gap:8px; font-size:10px; }
.login-row a,.text-button { color:var(--muted); font-size:11px; }
.text-button { border:0; padding:8px 0; background:none; text-align:left; text-decoration:underline; text-underline-offset:4px; } .text-button:hover { color:var(--text); }
.register { border-top:1px solid var(--line); margin-top:28px; padding-top:20px; color:var(--muted); font-size:11px; }
.register a { display:block; color:var(--accent); margin-top:8px; font-size:12px; }
.login-art { display:flex; align-items:end; padding:32px; min-height:480px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(0deg,#101114ee,#10111400 80%),url('assets/pls-dust-character-hero-v4.png') 75% center/cover; }
.login-art h2 { font-size:clamp(30px,3.8vw,48px); } .login-art h2 em { color:var(--text); }
.admin-login-main { min-height:calc(100vh - 79px); padding:56px 24px; display:grid; place-items:center; }
.admin-login-card { width:min(100%,480px); padding:36px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.admin-lock { color:var(--accent); font-size:22px; margin-bottom:24px; } .admin-login-card h1 { font-size:38px; }
.admin-login-card>small { color:var(--muted); display:block; margin-top:24px; font-size:11px; }
/* Championships and media */
.champ-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.match-card { display:flex; flex-direction:column; align-items:start; }
.match-card>small { display:inline-block; padding:4px 8px; margin-bottom:24px; border:1px solid #415f50; color:var(--success); font-size:10px; font-weight:650; border-radius:4px; }
.match-card h3 { font-size:26px; margin-bottom:16px; overflow-wrap:anywhere; }
.match-card .prize { border-block:1px solid var(--line); padding:18px 0; margin-block:auto 20px; width:100%; color:var(--muted); font-size:11px; }
.prize strong { color:var(--text); display:block; font-size:18px; margin-top:4px; } .match-card .button { margin-top:8px; }
.media-page-head>span { color:var(--muted); max-width:360px; font-size:14px; }
.media-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:16px; padding-bottom:24px; border-bottom:1px solid var(--line); margin-bottom:28px; }
.video-search { min-width:220px; } .media-sort-button { white-space:nowrap; }
.community-videos { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.community-video-card { padding:0; overflow:hidden; } .community-video-card:hover { border-color:#67707c; }
.video-thumb { position:relative; display:block; width:100%; aspect-ratio:16/9; padding:0; border:0; border-radius:0; background:#22262d; overflow:hidden; }
.video-thumb img { width:100%; height:100%; object-fit:cover; }
.video-thumb>span { position:absolute; inset:0; margin:auto; display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:#101114de; color:#fff; border:1px solid #ffffff65; } .video-thumb:hover>span { background:var(--red); }
.video-card-info { position:relative; padding:20px; } .video-card-info small { color:var(--muted); font-size:10px; }
.video-card-info h2 { margin:10px 0 16px; font-size:19px; overflow-wrap:anywhere; }
.video-card-info p { margin:0; padding-right:62px; font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
.media-like { position:absolute; bottom:14px; right:14px; min-height:38px; padding:7px 10px; font-size:12px; }
.media-like.liked { color:var(--accent); border-color:var(--red-line); background:var(--red-soft); }
.my-media-status { margin-top:40px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
#my-media-list>p { margin:0; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; border-bottom:1px solid var(--line); font-size:13px; } #my-media-list>p:last-child { border:0; }
.media-status { color:var(--warning); font-size:10px; white-space:nowrap; } .media-status.approved { color:var(--success); } .media-status.rejected { color:var(--accent); }
.media-empty>span { display:inline-grid; place-items:center; width:56px; height:56px; border:1px solid var(--line); border-radius:var(--radius); margin-bottom:20px; }
/* Native dialogs retain focus management and Escape */
.media-dialog { width:min(520px,calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow-y:auto; margin:auto; padding:32px; border:1px solid #58606b; border-radius:8px; background:var(--surface); color:var(--text); box-shadow:0 24px 80px #0007; }
.media-dialog::backdrop { background:#000b; } .media-dialog[open] { animation:enter .18s ease both; }
.dialog-close { position:absolute; right:12px; top:12px; width:38px; height:38px; border:0; font-size:26px; line-height:1; }
.dialog-kicker { color:var(--muted); font-size:10px; letter-spacing:1px; margin:8px 36px 12px 0; }
.media-dialog h2 { margin:0 28px 16px 0; font-size:26px; }
.dialog-description { font-size:14px; color:var(--muted); margin-bottom:24px; } .media-dialog>small { display:block; color:var(--muted); margin-top:20px; }
.player-dialog { width:min(920px,calc(100% - 32px)); padding-top:60px; }
.video-frame { aspect-ratio:16/9; background:#000; } .video-frame iframe { width:100%; height:100%; border:0; display:block; } .player-dialog h2 { margin:20px 0 0; font-size:20px; }
/* Responsive layout */
@media(max-width:1100px) {
 .site-header__inner { gap:16px; } .site-logo { width:136px; flex-basis:136px; }
 .site-nav a { padding-inline:8px; font-size:11px; } .site-login,.site-play { padding-inline:12px; font-size:11px; }
 .hero-side { display:none; }
 .clan-shell,.panel-shell,.admin-shell { grid-template-columns:184px minmax(0,1fr); gap:24px; }
 .clan-content-head { flex-wrap:wrap; } .panel-title { align-items:start; flex-wrap:wrap; gap:12px; }
 .rank-control-panel { grid-template-columns:1fr 1fr; gap:20px; } .rank-search { grid-column:1 / -1; }
 .community-videos { grid-template-columns:repeat(2,minmax(0,1fr)); } .login-main { gap:40px; }
}
@media(max-width:850px) {
 .wrap,.site-header__inner,.site-footer__inner,.stats-main-inner,.media-library-inner,.panel-shell,.admin-shell,.clan-shell,.login-main { width:calc(100% - 40px); }
 .site-header__inner { min-height:68px; }
 .site-menu-toggle { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:44px; height:44px; margin-left:auto; background:transparent; order:3; }
 .site-menu-toggle span { width:18px; height:2px; background:var(--text); transition:transform var(--ease),opacity var(--ease); }
 .site-menu-toggle.is-open span:first-child { transform:translateY(7px) rotate(45deg); }
 .site-menu-toggle.is-open span:nth-child(2) { opacity:0; } .site-menu-toggle.is-open span:last-child { transform:translateY(-7px) rotate(-45deg); }
 .site-header__actions { margin-left:auto; }
 .site-nav { position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; padding:16px 20px; gap:4px; border-bottom:1px solid var(--line); background:#181a1e; max-height:calc(100dvh - 68px); overflow-y:auto; visibility:hidden; opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity var(--ease),transform var(--ease),visibility var(--ease); }
 .site-nav.open { visibility:visible; opacity:1; transform:translateY(0); pointer-events:auto; }
 .site-nav a,.site-nav .site-nav__mobile-action { display:flex; min-height:46px; padding:12px 16px; font-size:13px; }
 .site-nav a.active { background:#2c252b; } .site-nav a.active::after { left:0; top:12px; bottom:12px; width:2px; height:auto; right:auto; }
 .site-nav__mobile-action { border-top:1px solid var(--line); } .site-nav__mobile-play { color:var(--accent)!important; }
 .hero { min-height:600px; padding-block:48px; } .hero::after { left:40%; } .hero::before { background:#101114bd; } .hero h1 { max-width:620px; }
 .home-links { gap:12px; } .home-links a { padding:20px; } .home-links b { font-size:20px; }
 .clan-shell,.panel-shell,.admin-shell { grid-template-columns:1fr; padding-top:28px; }
 .clan-sidebar,.panel-sidebar,.admin-sidebar { position:static; padding:20px; }
 .clan-sidebar>div:first-child,.clan-season,.admin-sidebar>.kicker,.admin-sidebar>h1 { display:none; }
 .clan-sidebar nav,.panel-sidebar nav,.admin-sidebar nav { display:flex; flex-wrap:wrap; gap:6px; }
 .clan-sidebar nav a,.panel-sidebar nav a,.admin-sidebar nav button { flex:1 0 auto; }
 .dashboard-identity { display:grid; grid-template-columns:64px 1fr; column-gap:16px; padding:0 0 20px; }
 .dashboard-skin { grid-row:1 / 4; height:86px; margin:0; } .dashboard-skin img { height:80px; width:56px; }
 .dashboard-identity .kicker,.dashboard-identity h1 { margin-bottom:8px; } .dashboard-identity>span { justify-self:start; }
 .sidebar-logout { width:auto; padding-inline:16px; margin-top:16px; }
 .metric-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } .admin-view .metric-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .login-art { padding:24px; } .login-art h2 { font-size:34px; }
 .site-footer__inner { gap:24px; grid-template-columns:1.5fr 1fr; }
 .site-footer__server { grid-column:1 / -1; flex-direction:row; align-items:center; flex-wrap:wrap; } .site-footer__server>b { margin:0; }
}
@media(max-width:600px) {
 input,select,textarea { font-size:16px; }
 .page,.stats-main,.media-library { padding-block:32px 48px; }
 .site-header__actions .site-login,.site-header__actions .site-play[href] { display:none; }
 .site-header__actions:has(>a:only-child) { display:none; } .site-header__actions { gap:6px; }
 .panel-logout { min-height:40px; padding-inline:10px; font-size:10px; } .site-logo { width:130px; flex-basis:130px; height:44px; }
 .hero { min-height:auto; padding-block:40px; } .hero h1 { font-size:clamp(36px,9vw,50px); }
 .hero .intro { font-size:14px; margin-block:20px; } .hero .kicker { font-size:9px; letter-spacing:1px; }
 .hero-tags { font-size:9px; gap:8px 12px; } .hero-tags span+span { padding-left:12px; }
 .hero .actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .hero .button { padding-inline:12px; font-size:11px; }
 .hero-statusbar { gap:10px; flex-direction:column; align-items:start; }
 .hero-quick-info { gap:16px; } .hero-quick-info>div { padding:0; } .hero-quick-info span { font-size:9px; letter-spacing:.2px; } .hero-quick-info b { font-size:11px; line-height:1.4; display:block; }
 .home-links { grid-template-columns:1fr; padding-block:24px 32px; } .home-links a { padding:20px; } .home-links a>span { margin-bottom:14px; } .home-links p { max-width:none; }
 .connect { padding-block:40px; } .connect-steps { display:grid; text-align:left; width:max-content; max-width:100%; margin-inline:auto; gap:14px; } .connect .title br { display:none; }
 .stats-heading,.media-page-head,.panel-title,.clan-content-head { flex-direction:column; align-items:start; gap:16px; margin-bottom:24px; }
 .stats-heading h1,.media-page-head h1,.clan-content-head h1 { font-size:34px; }
 .rank-control-panel { grid-template-columns:1fr; padding:20px; gap:18px; } .rank-search { grid-column:auto; }
 .stats-table-caption,.clan-table-caption { align-items:start; padding:16px; flex-direction:column; gap:8px; }
 th,td { padding:12px 14px; }
 .stats-table-scroll th:nth-child(2),.stats-table-scroll td:nth-child(2),.clan-table-scroll th:nth-child(2),.clan-table-scroll td:nth-child(2) { position:sticky; left:0; background:var(--bg); border-right:1px solid var(--line); }
 .stats-table-scroll th:nth-child(2),.clan-table-scroll th:nth-child(2) { background:#1b1e23; }
 .clan-search-bar { flex-wrap:wrap; } .clan-search-bar label { flex-basis:100%; } .clan-search-bar>button { width:100%; }
 .clan-rank-filters button { flex:1; padding-inline:9px; font-size:11px; }
 .clan-detail { padding:20px; } .clan-detail-head { gap:16px; align-items:start; }
 .clan-detail-logo { width:60px; min-height:60px; flex-basis:60px; font-size:17px; } .clan-detail-head h2 { font-size:24px; }
 .clan-detail-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .clan-detail-metrics>div { padding-left:0; } .clan-leadership { grid-template-columns:1fr; gap:4px; }
 .metric-grid,.admin-view .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:24px; } .metric-grid>div { padding:16px; }
 .panel-grid,.admin-cards,.panel-form.compact,.champ-grid,.community-videos { grid-template-columns:1fr; }
 .panel-card,.panel-form,.match-card { padding:20px; } .panel-form>button { width:100%; }
 .dashboard-section-title { flex-wrap:wrap; gap:6px; } .invite-row { flex-wrap:wrap; }
 .login-main { grid-template-columns:1fr; padding-block:24px 40px; gap:24px; } .login-panel { max-width:none; }
 .login-art { min-height:220px; background-position:75% 35%; } .login-art h2 { font-size:30px; }
 .admin-login-main { padding:32px 20px; align-items:start; } .admin-login-card { padding:24px; } .admin-login-card h1 { font-size:34px; }
 .media-toolbar { gap:14px; } .video-search { flex-basis:100%; min-width:0; } .media-sort { width:100%; } .media-sort-button { flex:1; } .submit-video-button { width:100%; }
 .media-dialog { padding:24px; } .player-dialog { padding:56px 16px 20px; }
 #my-media-list>p { align-items:start; flex-direction:column; gap:6px; }
 .site-footer__inner { grid-template-columns:1fr 1fr; gap:28px 20px; padding-block:32px; }
 .site-footer__brand { grid-column:1 / -1; } .site-footer__server { grid-column:auto; flex-direction:column; align-items:start; gap:9px; } .site-footer__server code { font-size:11px; }
}
/* Finite motion, no scroll listeners. */
@keyframes enter { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@keyframes spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:no-preference) { .hero-copy,.stats-main-inner,.media-library-inner,.login-panel,.panel-content,.admin-view.active { animation:enter .25s ease both; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }