/* Home page */
.home-welcome {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 20px;
    padding: 18px 22px;
}

.home-welcome .hero-kicker { margin: 0 0 4px; }
.home-welcome .headshot.lg { height: 84px; width: 84px; }
.welcome-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }

.home-hero-new {
    align-items: center;
    background:
        radial-gradient(circle at 88% 20%, rgba(255, 204, 41, 0.22), transparent 30%),
        linear-gradient(145deg, #fff 0%, #eef5fd 100%);
    border: 2px solid #d7e3f1;
    border-radius: 22px;
    box-shadow: 0 10px 0 #dce6f1, 0 20px 38px rgba(51, 81, 116, 0.1);
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1.3fr) minmax(220px, 1fr);
    padding: clamp(26px, 5vw, 54px);
}

.home-hero-text .hero-title { margin-bottom: 14px; text-align: left; }
.home-hero-text .welcome-text { margin: 0 0 24px; text-align: left; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn.big { font-size: 18px; min-height: 52px; padding: 0 26px; }
.btn.small { font-size: 13px; min-height: 32px; padding: 0 12px; }
.hero-canvas { aspect-ratio: 3 / 4; cursor: grab; display: block; margin: 0 auto; max-height: 340px; width: 100%; }

.home-social-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    margin-top: 18px;
}

.card-title { color: var(--ink); font: bold 18px/1.3 var(--display); margin: 0 0 10px; }
.card-title-row { align-items: baseline; display: flex; justify-content: space-between; }
.home-list { display: grid; gap: 4px; list-style: none; margin: 0; padding: 0; }
.home-list li { align-items: center; border-radius: 10px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; padding: 8px; }
.home-list .home-notification-item { align-items: center !important; justify-content: flex-start !important; padding: 8px; }
.home-notification-item span { color: var(--text); }
.home-notification-item.unread { background: var(--wash); }
.home-request-actions { display: flex; gap: 6px; }
.home-list-empty { color: var(--muted); list-style: none; }
.home-list-empty a { color: var(--brand); font-weight: bold; }

@media (max-width: 760px) {
    .home-hero-new { grid-template-columns: minmax(0, 1fr); }
    .home-hero-art { order: -1; }
    .hero-canvas { max-height: 220px; }
    .welcome-actions { margin-left: 0; }
}

/* 0.8.0: a friend in a game */
.online-dot.playing { background: #2f7fd8; }
.friend-playing { color: #2f7fd8; display: block; font-size: 11px; line-height: 1.3; margin-top: 2px; max-width: 110px; overflow: hidden; text-align: center; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.friend-playing:hover { text-decoration: underline; }