:root{color-scheme:dark;--navy:#08121f;--pane:#0d1d30;--pane2:#12263b;--gold:#e7c58e;--line:#31445a;--muted:#a1b2c4;--white:#f1f4f7;font-family:system-ui,-apple-system,"Malgun Gothic","Segoe UI",sans-serif}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 30% -15%,#1e3855 0%,#0b1b2c 43%,#07111e 90%);color:var(--white);min-height:100vh}
a{color:inherit;text-decoration:none}.head{padding:22px clamp(20px,4vw,72px);display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:4px solid var(--gold);border-bottom:1px solid #293c51}
.brand{display:flex;align-items:center;gap:14px;font-size:12px;font-weight:700;letter-spacing:.17em}.brand small{display:block;font-size:10px;letter-spacing:.3em;margin-top:5px;color:var(--gold)}
.brand-mark{display:grid;place-items:center;flex-shrink:0;width:57px;height:57px;border:1px solid var(--gold);color:var(--gold);font:700 24px Georgia,serif}.back{font-size:12px;color:var(--gold);border-bottom:1px solid currentColor;padding:6px 0}
.layout{max-width:1220px;margin:0 auto;padding:20px 24px 70px}.intro{padding:60px 0 32px}.eyebrow{margin:0;color:var(--gold);font-weight:700;letter-spacing:.25em;font-size:11px}
.intro h1{font:500 clamp(40px,6vw,76px)/1.05 Georgia,serif;letter-spacing:-.045em;margin:17px 0 15px}.intro h1 span{color:var(--gold)}.intro>p:last-child{color:var(--muted);line-height:1.8;font-size:13px;max-width:680px}
.filters{display:flex;gap:14px;align-items:end;flex-wrap:wrap;background:#10243a;padding:19px;border:1px solid var(--line)}.filters label{display:grid;gap:7px;font-size:11px;font-weight:700;color:var(--muted);min-width:155px;flex:1}
.filters select,.filters button{height:43px;border:1px solid #4a6076;background:#0a1929;color:var(--white);padding:9px 13px;border-radius:3px;font:inherit}.filters button{color:var(--gold);cursor:pointer;flex:0 0 auto}.filters :focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.key-metrics{margin:20px 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.key-metrics>div{background:linear-gradient(140deg,#142942,#0d1d31);padding:19px;border:1px solid #31465c}
.key-metrics span{display:block;font-size:11px;color:var(--muted);margin-bottom:8px}.key-metrics strong{font:500 clamp(20px,3vw,32px) Georgia,serif;color:var(--gold)}
.ranking-panel{background:var(--pane);border:1px solid #40556b}.panel-heading{padding:24px 26px;border-bottom:1px solid var(--line);display:flex;align-items:end;justify-content:space-between;gap:12px}.panel-heading p{color:var(--gold);letter-spacing:.14em;font-size:10px;margin:0 0 8px}.panel-heading h2{margin:0;font-size:21px;font-weight:600}.panel-heading>span{font-size:11px;color:var(--muted);text-align:right}.table-scroll{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:660px;text-align:left}th{color:#9ab0c3;font-size:11px;font-weight:600;letter-spacing:.07em;background:#102136;padding:15px 23px}td{padding:18px 23px;border-bottom:1px solid rgba(151,182,204,.12);font-size:13px}tbody tr:hover{background:rgba(213,173,108,.055)}td:nth-child(3){font-size:18px;font-weight:750;color:var(--gold);font-variant-numeric:tabular-nums}.rank{font:700 17px Georgia,serif;color:#dfc18b}.person{display:flex;align-items:center;gap:12px}.portrait{width:43px;height:43px;object-fit:cover;background:#23384c;border:1px solid #536980;display:grid;place-items:center;color:var(--gold);font:20px Georgia,serif;flex:0 0 auto}.person-name{font-weight:600}.person small{display:block;color:var(--muted);font-size:11px;margin-top:4px}.provisional{color:#c2b392;font-size:11px}.stable{color:#94cdb7;font-size:11px}.empty{text-align:center;padding:55px 25px;color:#a9b7c4!important;font-size:13px!important;font-weight:400!important}
.rules{margin-top:20px;border:1px solid #2e4259;padding:22px 25px}.rules h2{font-size:16px;margin:0 0 12px;color:var(--gold)}.rules p{color:#a6b6c6;font-size:12px;line-height:1.8;margin:0 0 7px}footer{border-top:1px solid #2f4357;color:#8b9fb3;font-size:11px;display:flex;justify-content:space-between;gap:12px;padding:20px clamp(20px,4vw,72px)}
@media(max-width:680px){.head{padding:15px}.brand{font-size:10px;letter-spacing:.08em}.brand-mark{width:42px;height:42px;font-size:18px}.back{font-size:11px}.layout{padding:10px 12px 55px}.intro{padding:32px 6px 23px}.intro h1{font-size:42px}.filters{padding:12px;gap:8px}.filters label{min-width:90px}.key-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.key-metrics>div{padding:14px}.panel-heading{padding:16px;align-items:start}.panel-heading h2{font-size:17px}footer{flex-direction:column;gap:6px;padding:15px}.rules{padding:16px}}

/* Mobile layout QA: prevent an off-viewport header or control row. */
@media(max-width:680px){
 html,body{width:100%;max-width:100%;overflow-x:hidden}
 .head{width:100%;min-width:0;flex-wrap:wrap;justify-content:center;gap:8px}
 .head .brand{width:100%;flex:1 1 100%;justify-content:center;min-width:0;gap:9px}
 .head .brand>span{min-width:0;overflow-wrap:anywhere}
 .head .back{margin:0 auto}
 .brand-mark{width:52px;height:52px;object-fit:contain;background:#060b12;border:1px solid #856b43}
 .layout{max-width:100%;width:100%;min-width:0}
 .intro,.intro p{max-width:100%;overflow-wrap:anywhere}
 .filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;min-width:0}
 .filters label{min-width:0;width:100%;overflow:hidden}
 .filters select{width:100%;min-width:0}
 .filters button{grid-column:1/-1;width:100%}
 .key-metrics,.ranking-panel,.rules{min-width:0;max-width:100%}
 .table-scroll{width:100%;min-width:0;overflow-x:auto}
 .panel-heading{min-width:0;flex-wrap:wrap}
 .panel-heading>span{width:100%;text-align:left}
}

/* 2026 official badge art: 8 individual + 8 team, identical to Unity atlas. */
.public-nav{display:flex;align-items:center;gap:25px;flex-wrap:wrap;justify-content:flex-end}
.tier-cell{padding:11px 8px!important;text-align:center;width:65px}
.rank-badge{display:inline-block;width:44px;height:44px;background-image:url('/dfc-tier-emblems-premium-v2.png');background-repeat:no-repeat;background-size:800% 200%;filter:drop-shadow(0 3px 5px #060d14);vertical-align:middle}
.emblem-link-panel{display:flex;gap:20px;justify-content:space-between;align-items:center;margin-top:20px;padding:24px 28px;background:linear-gradient(115deg,#182d42,#0b1827);border:1px solid #68563d}
.emblem-link-panel p{letter-spacing:.21em;color:#e5c58d;font-size:10px;font-weight:750;margin:0 0 9px}
.emblem-link-panel h2{font:500 25px Georgia,serif;margin:0 0 9px;color:#f1f2f2}.emblem-link-panel div>span{font-size:12px;line-height:1.7;color:#a7b7c8}
.emblem-link-panel a{display:inline-flex;gap:22px;align-items:center;justify-content:center;padding:14px 18px;min-width:190px;white-space:nowrap;border:1px solid #c4a16c;color:#efca8c;font-size:12px;font-weight:700}
.emblem-link-panel a:hover{background:#d9b26b21}.ranking-panel table{min-width:780px}.ranking-panel th:nth-child(2){padding-left:9px;padding-right:8px;text-align:center}
@media(max-width:680px){.public-nav{width:100%;justify-content:center;gap:22px}.emblem-link-panel{flex-wrap:wrap;padding:21px 15px}.emblem-link-panel a{width:100%}.emblem-link-panel h2{font-size:21px}}

/* True 3D prestigious ranks from the same original Blender source as VRChat. */
.rank-badge{width:51px;height:51px;filter:drop-shadow(0 4px 7px #000c)}
@media(max-width:680px){.rank-badge{width:44px;height:44px}}