/* Performance gauges: premium gradient bars (the "barres premium avec gradient" option) rather
   than circular rings, so the exact same #cpuBar/#ramBar elements that dashboard.js already
   writes style.width to (untouched JS) keep driving the live value with no extra plumbing. */

.gauge-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.gauge {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gauge-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.gauge-labels .gauge-title {
    font-size: 13px;
    font-weight: 600;
}

.gauge-labels .gauge-detail {
    font-size: 12px;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.gauge-bar-track {
    width: 100%;
    height: 5px;
    border-radius: var(--radius-pill);
    background: var(--border);
    overflow: hidden;
    margin-top: 6px;
}

.gauge-bar-fill {
    height: 100%;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--accent-blue), #7fc4ff);
    transition: width var(--duration-slow) var(--ease-out);
}

.gauge-bar-fill.tone-purple { background: linear-gradient(90deg, var(--accent-purple), #b39bff); }

/* World map card */
.worldmap-frame {
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border);
    background: #05070a;
}

.worldmap-frame iframe,
.worldmap-frame img {
    display: block;
    width: 100%;
}

.worldmap-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}

.worldmap-frame:fullscreen {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #05070a;
}

.worldmap-frame:fullscreen iframe,
.worldmap-frame:fullscreen img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Simple player/activity lists reused inside dashboard cards (not full page tables) */
.mini-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 220px;
    overflow-y: auto;
}

.mini-list li {
    padding: 8px 4px;
    font-size: 13px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
}

.mini-list li:last-child { border-bottom: none; }

.mini-list:empty::after {
    content: "Rien pour le moment.";
    color: var(--text-faint);
    font-size: 12.5px;
    display: block;
    padding: 8px 4px;
}

@media (max-width: 560px) {
    .gauge-row { grid-template-columns: 1fr; }
}