.surf{padding-top:40px;padding-bottom:72px}.surf-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 40px;margin-bottom:28px;display:flex}.surf-head h1{font-family:var(--font-display);text-transform:uppercase;margin:0;font-size:clamp(2rem,4vw,3rem);font-weight:800;line-height:1}.surf-head p{color:var(--muted);max-width:52ch;margin:8px 0 0}.surf-stats{gap:12px;margin:0;display:flex}.surf-stats div{background:var(--surface-1);box-shadow:inset 0 0 0 1px var(--line);border-radius:10px;padding:10px 16px}.surf-stats dt{font-family:var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-size:12px;font-weight:600}.surf-stats dd{color:var(--text);margin:2px 0 0;font-size:20px}.surf-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin:0;padding:0;list-style:none;display:grid}.surf-card{background:var(--surface-1);box-shadow:inset 0 0 0 1px var(--line);border-radius:12px;flex-direction:column;display:flex;overflow:hidden}.surf-card-art{background:var(--surface-2);flex-direction:column;justify-content:flex-end;height:120px;padding:14px 16px;display:flex;position:relative}.surf-card-art img{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.surf-card-art:after{content:"";background:linear-gradient(to top, var(--surface-1) 5%, #08060b40);position:absolute;inset:0}@supports (color:lab(0% 0 0)){.surf-card-art:after{background:linear-gradient(to top, var(--surface-1) 5%, lab(1.92764% .898719 -1.7132/.25))}}.surf-card-art h2,.surf-card-file{z-index:1;margin:0;position:relative}.surf-card-art h2{font-family:var(--font-display);text-transform:uppercase;font-size:26px;font-weight:800;line-height:1}.surf-card-file{color:var(--muted);font-size:12px}.surf-card-body{flex-direction:column;flex:1;gap:10px;padding:14px 16px 16px;display:flex}.surf-top{background:linear-gradient(100deg,#e7b64329,#0000 70%);background:linear-gradient(100deg,lab(77.0057% 10.1238 62.6808/.16),#0000 70%);border-radius:10px;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:10px;text-decoration:none;display:grid;box-shadow:inset 0 0 0 1px #e7b64373;box-shadow:inset 0 0 0 1px lab(77.0057% 10.1238 62.6808/.45)}.surf-top-avatar{width:56px;height:56px;position:relative}.surf-top-avatar img,.surf-top-avatar>span:first-child{object-fit:cover;background:var(--surface-3);border-radius:8px;width:56px;height:56px;display:block}.surf-crown{color:#fac547;color:lab(82.8172% 10.8991 67.3469)}.surf-top-avatar .surf-crown{text-shadow:0 2px 6px #0009;text-shadow:0 2px 6px lab(0% 0 0/.6);font-size:22px;position:absolute;top:-12px;left:-6px;rotate:-18deg}.surf-top-who{min-width:0;display:grid}.surf-top-who .label{color:#fac547;color:lab(82.8172% 10.8991 67.3469)}.surf-top-who strong{white-space:nowrap;text-overflow:ellipsis;font-size:17px;font-weight:600;overflow:hidden}.surf-top-time{color:#fcd176;color:lab(86.3231% 7.54684 50.6262);font-size:17px}@media (hover:hover) and (pointer:fine){.surf-top:hover{box-shadow:inset 0 0 0 1px #e7b643cc;box-shadow:inset 0 0 0 1px lab(77.0057% 10.1238 62.6808/.8)}}.surf-rest{gap:4px;margin:0;padding:0;list-style:none;display:grid}.surf-rest li{color:var(--muted);grid-template-columns:32px 1fr auto;align-items:center;gap:8px;font-size:14px;display:grid}.surf-rest a{min-width:0;min-height:32px;color:var(--text);align-items:center;gap:8px;text-decoration:none;display:flex}.surf-rest img,.surf-mini{background:var(--surface-3);border-radius:4px;flex:none;width:24px;height:24px}.surf-rest-name{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}@media (hover:hover) and (pointer:fine){.surf-rest a:hover .surf-rest-name{text-decoration:underline}}.surf-pos{color:var(--faint)}.surf-meta{color:var(--faint);margin-top:auto;font-size:12px}.surf-card-empty{color:var(--muted);flex-direction:row;align-items:center;gap:10px;font-size:14px}.surf-card-empty .surf-crown{opacity:.6;font-size:22px}@media (max-width:719px){.surf-stats{width:100%}.surf-stats div{flex:1}.surf-grid{grid-template-columns:1fr}}