/* Page sheet for gold.php. Linked after style.css by includes/css.php,
   so these rules win ties against the shared sheet. */

/* Embedded so it renders even with a stale cached style.css.
   The rank-gold/silver/bronze text classes are gone: the roster's
   medal sigil carries the top three now. */
.gold-amount { font-variant-numeric: tabular-nums; color: var(--gold); font-weight: 600; }

/* "Online now" indicator — sits to the right of a player's name.
   Muted sage green, matching player.php's .pill-online (#6f8f5f).
   A soft constant glow plus a gentle expanding ring. Reduced-motion
   users get style.css's global animation:none, leaving just the
   static glow (the dot stays fully visible either way). */
.online-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 7px;
    border-radius: 50%;
    background: var(--sage);
    vertical-align: middle;
    box-shadow: 0 0 6px rgba(111, 143, 95, 0.55);
    animation: onlinePulse 2.4s ease-out infinite;
}
@keyframes onlinePulse {
    0%   { box-shadow: 0 0 6px rgba(111,143,95,0.55), 0 0 0 0   rgba(111,143,95,0.5); }
    70%  { box-shadow: 0 0 6px rgba(111,143,95,0.55), 0 0 0 5px rgba(111,143,95,0);   }
    100% { box-shadow: 0 0 6px rgba(111,143,95,0.55), 0 0 0 0   rgba(111,143,95,0);   }
}

.gold-total-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin-bottom: 22px; padding: 16px 20px;
    background: rgba(201,168,76,0.06);
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 6px;
}
.gold-total-bar .lbl {
    font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-dim); font-weight: 700;
}
.gold-total-bar .val {
    font-size: 1.4rem; font-weight: 800; color: var(--gold);
    font-variant-numeric: tabular-nums;
}

.gold-dist {
    display: flex; gap: 36px; align-items: center; flex-wrap: wrap;
    margin-bottom: 30px;
}
.pie {
    position: relative;
    width: 210px; height: 210px; flex-shrink: 0;
    border-radius: 50%;
    background: var(--pie);
    box-shadow: 0 8px 28px rgba(0,0,0,0.45);
}
.pie-hole {
    position: absolute; inset: 38px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 1px solid var(--border);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
}
.pie-hole .pv { font-size: 1.05rem; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.pie-hole .pc { font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); margin-top: 4px; }

.legend { flex: 1; min-width: 240px; display: grid; gap: 10px; }
.legend-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
    border-radius: 5px;
}
.legend-sw { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; }
.legend-name { flex: 1; color: var(--text-mid); font-size: 0.88rem; font-weight: 600; }
.legend-val  { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; }
.legend-pct  { color: var(--text-dim); font-size: 0.8rem; width: 56px; text-align: right; font-variant-numeric: tabular-nums; }

.sec-head {
    display: flex; align-items: center; gap: 12px;
    margin: 0 0 16px;
    color: var(--text-mid);
    font-size: 0.72rem; font-weight: 800;
    letter-spacing: 0.16em; text-transform: uppercase;
}
.sec-head::before { content:''; width:3px; height:13px; background:var(--accent); border-radius:2px; }
.sec-head::after  { content:''; flex:1; height:1px; background:linear-gradient(90deg,var(--border-light),transparent); }

@media (max-width: 560px) { .gold-dist { justify-content: center; } }