/* Roblox 2020-style home page. */
.home2020{max-width:1000px;position:relative}
.home-header{display:flex;align-items:center;gap:24px;margin-bottom:30px}
.home-headshot{width:128px;height:128px;flex-shrink:0;border-radius:50%;overflow:hidden;background:#d4d6d8;display:block}
.home-headshot>[data-avatar-headshot]{display:block;width:100%;height:100%}
.home-header h1{display:flex;align-items:center;gap:8px;margin:0;font-size:32px;font-weight:bold}
.home-header h1 a{color:inherit;text-decoration:none}
.home-header h1 a:hover{text-decoration:underline}
.home-header .account-badge{width:26px;height:26px}
.home-header-guest{display:block}
.home-header-guest p{margin-top:8px}
.home-music{margin-left:auto;display:flex;align-items:stretch;gap:12px;flex:0 0 338px;width:338px;max-width:338px;min-width:0;height:132px;overflow:hidden;padding:9px;border:1px solid #574b66;border-radius:18px;background:#35303d;box-shadow:0 7px 20px #0004;color:#fff;font-size:12px}
.home-music-cover{display:block;flex:0 0 112px;width:112px;min-width:112px;max-width:112px;height:112px;max-height:112px;object-fit:cover;border-radius:12px;background:#080c13}
.home-music-body{display:flex;flex-direction:column;min-width:0;max-width:calc(100% - 124px);flex:1;overflow:hidden}
.home-music-top{display:flex;align-items:center;justify-content:space-between;gap:5px;min-height:19px}
.home-music-kicker{font-size:9px;font-weight:700;letter-spacing:.09em;color:#c8bbd5}
.home-music-title{font-size:17px;line-height:1.1;font-weight:800;color:#fff}
.home-music-artist{font-size:11px;color:#c8bbd5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-music-mute{border:0;background:transparent;color:#e3d8ee;font-size:10px;line-height:1;padding:3px 0 3px 5px;cursor:pointer}
.home-music-controls{display:flex;align-items:center;justify-content:center;gap:18px;flex:1}
.home-music-controls button{border:0;background:transparent;color:#fff;padding:2px;font-size:18px;font-weight:800;cursor:pointer}
.home-music-controls .home-music-toggle{font-size:25px;min-width:27px}
.home-music-controls button:hover,.home-music-mute:hover{color:#c7a2ff}
.home-music-volume{display:flex;align-items:center;gap:5px;font-size:10px;color:#c8bbd5}
.home-music-volume input{width:100%;min-width:25px;accent-color:#b27aff;cursor:pointer;height:14px}
.home-music-level{min-width:27px;text-align:right;font-variant-numeric:tabular-nums}
.home-header-guest .home-music{position:absolute;top:0;right:0}

.home-section{margin-bottom:30px}
.home-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.home-section-head h2{font-size:21px;font-weight:bold;margin:0}
.home-see-all{font-size:14px;font-weight:500;color:inherit;padding:6px 10px;border-radius:4px}
.home-see-all:hover{background:rgba(0,0,0,.08);text-decoration:none}
body.dark .home-see-all:hover{background:rgba(255,255,255,.1)}

.home-friends-row{display:flex;gap:16px;overflow:hidden;min-height:118px;align-items:flex-start}
.home-friends-row .notice{margin:0}
.home-friend{width:90px;flex-shrink:0;text-align:center;color:inherit;text-decoration:none}
.home-friend-avatar{position:relative;display:flex;align-items:center;justify-content:center;width:90px;height:90px;border-radius:50%;background:#d4d6d8;font-size:34px;color:#606162}
.home-friend-photo{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden}
.home-friend-photo>[data-avatar-headshot]{display:block;width:100%;height:100%}
.home-friend-online{position:absolute;right:5px;bottom:5px;width:16px;height:16px;border-radius:50%;background:#02b757;border:3px solid var(--surface)}
.home-friend-name{display:block;margin-top:8px;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-friend:hover .home-friend-name{text-decoration:underline}
.home-add-friend .home-friend-avatar{border:2px dashed #a2a6a9;background:transparent}
body.dark .home-friend-avatar{background:#393b3d;color:#b9bdc1}
body.dark .home-add-friend .home-friend-avatar{background:transparent;border-color:#656668}
body.dark .home-friend-online{border-color:#232527}

.home-game-row{display:grid;grid-template-columns:repeat(auto-fill,150px);gap:18px}
.home-game-card a{color:inherit;text-decoration:none;display:block}
.home-game-thumb{width:150px;height:150px;border-radius:8px;overflow:hidden;background:#d4d6d8}
.home-game-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:filter .15s}
.home-game-card a:hover img{filter:brightness(.9)}
.home-game-card h3{margin:8px 0 4px;font-size:16px;font-weight:bold;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.home-game-stats{display:flex;align-items:center;gap:4px;margin:0;font-size:12px;color:var(--muted)}
.home-game-stats svg{width:13px;height:13px}
body.dark .home-game-thumb{background:#393b3d}

@media(max-width:700px){.home-headshot{width:90px;height:90px}.home-header h1{font-size:24px}.home-header{flex-wrap:wrap}.home-music{flex:0 1 338px;width:min(338px,100%);max-width:100%;margin-left:0}.home-header-guest .home-music{position:static}.home-game-row{grid-template-columns:repeat(2,minmax(0,1fr))}.home-game-thumb{width:100%;height:auto;aspect-ratio:1}}
.home-friend-name{display:flex;align-items:center;justify-content:center;gap:2px}.home-friend-label{min-width:0;overflow:hidden;text-overflow:ellipsis}.home-friend-name .account-badge{flex-shrink:0;margin-left:1px}
/* Roblox 2020 status colors: blue = online on the website, green = in a game. */
.home-friend-online{background:#00a2ff}
.home-friend-online.in-game{background:#02b757}
.home-friend-playing{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-width:100%;margin-top:1px;font-size:12px;line-height:1.25;color:#02b757;text-align:center;overflow:hidden;overflow-wrap:anywhere}