/* Home page: small circular avatar + greeting, then Friends row, then a
   Recently Played row sized to match the Games tab's own card size. */

.home-header-row{display:flex;align-items:center;gap:16px;margin:0 0 22px 0}
.home-greeting-heading{font-size:32px;font-weight:600;color:var(--text-heading);margin:0}

.home-avatar-circle{width:72px;height:72px;border-radius:50%;flex-shrink:0;background-color:var(--bg-panel);border:1px solid var(--border-color);cursor:pointer;overflow:hidden;display:flex;align-items:center;justify-content:center}
.home-avatar-circle .hexi-avatar-mount{width:100%;height:100%;position:relative}
.home-avatar-circle canvas{width:100%!important;height:100%!important;display:block}

.home-panel{background-color:var(--bg-panel);border:1px solid var(--border-color);border-radius:6px;padding:16px 18px;box-sizing:border-box;margin-bottom:14px}
.home-panel:last-child{margin-bottom:0}
.home-panel-title{font-size:22px;font-weight:700;color:var(--text-heading);margin:0 0 12px 0}

/* Friends panel: no background or outline, and friend chips are kept
   deliberately compact so the row reads as a quick glance, not the main
   focus of the page. */
.home-panel.home-friends-panel{background:none;border:none;padding:0 0 14px 0}
.friends-row-wrap{position:relative}
.home-friends-panel .friends-list{display:flex;flex-wrap:nowrap;flex-direction:row;overflow-x:auto;gap:10px;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px}
.home-friends-panel .friends-list::-webkit-scrollbar{display:none}
.home-friends-panel .friend-chip{width:66px;flex:0 0 66px}
.home-friends-panel .friend-chip-avatar{width:58px;height:58px}
.home-friends-panel .friend-chip-name{font-size:12px;max-width:66px}
.friends-row-more{display:none;position:absolute;top:0;right:0;bottom:2px;width:30px;background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.55) 40%);border:none;color:#fff;align-items:center;justify-content:flex-end;padding-right:6px;cursor:pointer;box-sizing:border-box}
.friends-row-more.show{display:flex}
.friends-row-more svg{width:16px;height:16px;pointer-events:none}
.friends-row-more:hover{background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.72) 40%)}

/* Recently Played: reuses the Games tab's .game-card / .game-thumbnail markup
   (see games-discover.css / index.css), just smaller for this row. The panel
   itself (.home-recent-panel below) has no background or outline. */
.home-panel.home-recent-panel{background:none;border:none;padding:0;min-width:0}
.recent-row-wrap{position:relative}
.recent-games-grid{display:flex;flex-wrap:nowrap;flex-direction:row;overflow-x:auto;gap:14px;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px}
.recent-games-grid::-webkit-scrollbar{display:none}
.recent-games-grid .game-card{flex:0 0 112px;width:112px}
.recent-games-grid .game-thumbnail{height:112px}
.recent-games-empty{color:var(--text-muted);font-size:13px;font-style:italic;padding:10px 0}
.recent-row-more,.recent-row-back{--row-fade:255,255,255;--row-arrow-icon:#222;display:none;position:absolute;top:0;bottom:2px;width:48px;border:none;padding:0;background:none;align-items:center;cursor:pointer;z-index:2;box-sizing:border-box}
.recent-row-more.show,.recent-row-back.show{display:flex}
.recent-row-more{right:0;justify-content:flex-end;padding-right:10px;background:linear-gradient(90deg,rgba(var(--row-fade),0),rgba(var(--row-fade),.7) 55%,rgba(var(--row-fade),.9))}
.recent-row-back{left:0;justify-content:flex-start;padding-left:10px;background:linear-gradient(270deg,rgba(var(--row-fade),0),rgba(var(--row-fade),.7) 55%,rgba(var(--row-fade),.9))}
.recent-row-more svg,.recent-row-back svg{width:18px;height:18px;color:var(--row-arrow-icon);pointer-events:none;filter:drop-shadow(0 1px 3px rgba(0,0,0,.25))}
[data-theme="dark"] .recent-row-more,[data-theme="dark"] .recent-row-back{--row-fade:0,0,0;--row-arrow-icon:#fff}

/* Sub-bar under the header, styled to match the Games tab's sub-bar
   (.games-subbar in games-discover.css). */
.home-subbar{width:100%;height:34px;background-color:var(--hover-bg);box-sizing:border-box;display:flex;align-items:center;gap:22px;padding:0 30px 0 34px}
.home-subbar-link{font-family:'Poppins',sans-serif;font-size:12.5px;font-weight:500;color:var(--text-muted);text-decoration:none;transition:color .15s}
.home-subbar-link:hover{color:var(--accent)}

@media(max-width:900px){
  .home-avatar-circle{width:60px;height:60px}
}
@media(max-width:700px){
  .home-greeting-heading{font-size:24px}
  .home-header-row{gap:12px;margin-bottom:18px}
  .home-avatar-circle{width:52px;height:52px}
  .home-panel{padding:16px 16px}
  .home-panel-title{font-size:18px}
  .home-subbar{gap:16px;height:30px;padding:0 14px}
  .home-subbar-link{font-size:11.5px}
  .recent-games-grid .game-card{flex:0 0 84px;width:84px}
  .recent-games-grid .game-thumbnail{height:84px}
}

.hd-shape-1{width:22px;height:22px;top:4px;left:70px;transform:rotate(-15deg)}
.hd-shape-2{width:20px;height:20px;top:0;left:150px;transform:rotate(10deg)}
.hd-shape-3{width:15px;height:15px;top:14px;left:230px;transform:rotate(20deg)}
.hd-shape-4{width:14px;height:14px;top:44px;left:40px;transform:rotate(25deg)}
.hd-shape-5{width:26px;height:26px;top:34px;left:112px;transform:rotate(-8deg)}
.hd-shape-6{width:18px;height:18px;top:40px;left:196px;transform:rotate(-18deg)}
.hd-shape-7{width:24px;height:24px;top:70px;left:64px;transform:rotate(14deg)}
.hd-shape-8{width:16px;height:16px;top:66px;left:250px;transform:rotate(-10deg)}
.hd-chest{position:absolute;bottom:0;left:50%;margin-left:-40px;width:80px;height:60px}
.hd-chest-glow{position:absolute;top:-34px;left:50%;margin-left:-26px;width:52px;height:52px;background:radial-gradient(circle,rgba(255,214,120,.55),rgba(255,214,120,0) 70%)}
.hd-chest-lid{position:absolute;top:-30px;left:2px;width:76px;height:30px;background:linear-gradient(180deg,#e6b158,#a97327);border:2px solid #6e4c1c;border-radius:14px 14px 45% 45%/22px 22px 10px 10px;transform:rotate(-165deg);transform-origin:50% 100%;box-shadow:0 2px 3px rgba(0,0,0,.35);z-index:1}
.hd-chest-base{position:absolute;bottom:0;left:0;width:80px;height:40px;background:linear-gradient(180deg,#cf9640,#8f611e);border:2px solid #6e4c1c;border-radius:5px 5px 10px 10px;box-shadow:inset 0 -10px 12px rgba(0,0,0,.3)}
.hd-chest-band-l{position:absolute;left:12px;top:-2px;bottom:-2px;width:6px;background:#5d4019;border-radius:2px}
.hd-chest-band-r{position:absolute;right:12px;top:-2px;bottom:-2px;width:6px;background:#5d4019;border-radius:2px}
.hd-chest-lock{position:absolute;top:-5px;left:50%;margin-left:-7px;width:14px;height:14px;background:linear-gradient(180deg,#ffe38a,#d9a53a);border:2px solid #6e4c1c;border-radius:3px}