/* The damage meter (ui/dps/): a dark translucent floating panel, one bar per player coloured by class, a detail view with the timeline, small dropdown menus. Sizes come from variables set by DpsMeter (--dps-w, --dps-bar, --dps-font, --dps-bg). */
.dps { position: fixed; z-index: var(--z-widget); width: var(--dps-w, 300px); font: 600 var(--dps-font, 12px)/1.25 GfFont, system-ui, -apple-system, 'Segoe UI', sans-serif; color: #f2f4f8; background: var(--dps-bg, rgba(9, 12, 18, .6)); border: 1px solid rgba(255, 255, 255, .14); border-radius: 7px; box-shadow: 0 4px 16px rgba(0, 0, 0, .45); user-select: none; transition: opacity .35s; backdrop-filter: blur(2px); }
.dps.hidden { display: none; }
.dps.faded { opacity: .12; }
.dps.faded:hover { opacity: 1; }
.dps-head { display: flex; align-items: center; gap: 3px; padding: 3px 4px; background: rgba(255, 255, 255, .07); border-radius: 6px 6px 0 0; cursor: grab; }
.dps.locked .dps-head { cursor: default; }
.dps-spacer { flex: 1; }
.dps-btn { background: rgba(255, 255, 255, .08); color: #f2f4f8; border: 1px solid rgba(255, 255, 255, .16); border-radius: 4px; padding: 1px 6px; font: inherit; font-size: .92em; cursor: pointer; white-space: nowrap; max-width: 46%; overflow: hidden; text-overflow: ellipsis; }
.dps-btn:hover { background: rgba(255, 255, 255, .22); }
.dps-sum { padding: 2px 8px 3px; font-size: .9em; color: #c9d1dc; border-bottom: 1px solid rgba(255, 255, 255, .08); font-variant-numeric: tabular-nums; }
.dps-bars { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; padding: 2px 0; }
.dps-empty, .dps-mute { color: #98a3b3; font-weight: 500; font-size: .9em; padding: 6px 10px; margin: 0; }
.dps-row { position: relative; display: flex; align-items: center; gap: 5px; height: var(--dps-bar, 18px); margin: 1px 3px; padding: 0 6px; border-radius: 3px; cursor: pointer; overflow: hidden; background: rgba(255, 255, 255, .05); }
.dps-row:hover { background: rgba(255, 255, 255, .12); }
.dps-row.me .dps-nm { text-decoration: underline; text-underline-offset: 2px; }
.dps-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--c, #7872a1); opacity: .78; border-radius: 3px; pointer-events: none; }
.dps.animate .dps-fill { transition: width .3s ease-out; }
.dps[data-skin=smooth] .dps-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 55%, #000), var(--c)); }
.dps[data-skin=glass] .dps-fill { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, #fff) 0%, var(--c) 45%, color-mix(in srgb, var(--c) 70%, #000) 100%); opacity: .85; }
.dps[data-skin=striped] .dps-fill { background: repeating-linear-gradient(135deg, var(--c) 0 6px, color-mix(in srgb, var(--c) 78%, #000) 6px 12px); }
.dps-rk, .dps-nm, .dps-val { position: relative; text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 3px rgba(0, 0, 0, .8); white-space: nowrap; }
.dps-rk { min-width: 1.6em; text-align: right; opacity: .85; }
.dps-rk:empty { display: none; }
.dps-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dps-val { font-variant-numeric: tabular-nums; }
.dps-grip { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 50%, rgba(255, 255, 255, .45) 50% 58%, transparent 58% 70%, rgba(255, 255, 255, .45) 70% 78%, transparent 78%); border-radius: 0 0 6px 0; }
.dps.locked .dps-grip { display: none; }
.dps-menu { position: absolute; z-index: 5; min-width: 190px; padding: 3px; background: rgba(14, 18, 26, .97); border: 1px solid rgba(255, 255, 255, .22); border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .6); }
.dps-menu-head { padding: 4px 8px 2px; color: #98a3b3; font-size: .85em; text-transform: uppercase; letter-spacing: .05em; }
.dps-menu-item { display: flex; gap: 6px; width: 100%; text-align: left; padding: 3px 8px; background: none; color: inherit; border: 0; border-radius: 4px; font: inherit; cursor: pointer; }
.dps-menu-item:hover { background: rgba(255, 255, 255, .14); }
.dps-menu-item.on { color: #b3afca; }
.dps-check { width: 1em; color: #b3afca; }
.dps-tip { position: absolute; z-index: 6; min-width: 150px; max-width: 260px; padding: 5px 8px; background: rgba(8, 10, 14, .96); border: 1px solid rgba(255, 255, 255, .25); border-radius: 5px; pointer-events: none; font-weight: 500; }
.dps-tip.hidden { display: none; }
.dps-tip-row { display: flex; justify-content: space-between; gap: 10px; font-size: .92em; color: #dfe5ee; }
.dps-detail { padding: 2px 3px 4px; display: flex; flex-direction: column; gap: 5px; }
.dps-detail-head { display: flex; align-items: center; gap: 6px; padding: 2px 3px; }
.dps-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.dps-tile { background: rgba(255, 255, 255, .07); border-radius: 4px; padding: 2px 5px; display: flex; flex-direction: column; }
.dps-tile b { font-size: 1.05em; font-variant-numeric: tabular-nums; }
.dps-tile span { color: #98a3b3; font-size: .78em; font-weight: 500; }
.dps-chart { width: 100%; height: auto; display: block; }
.dps-chart-bg { fill: rgba(255, 255, 255, .05); }
.dps-chart-txt { fill: #c9d1dc; font: 500 var(--fs-caption) GfFont, system-ui, sans-serif; }
.dps-chips { display: flex; gap: 4px; }
.dps-chip { padding: 1px 8px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; color: inherit; font: inherit; font-size: .9em; cursor: pointer; }
.dps-chip.on { background: #7872a1; border-color: #7872a1; color: #111018; }
.dps-rows { display: flex; flex-direction: column; }
.dps-sub { cursor: default; }
.dps-sub .dps-val { font-size: .88em; }
/* Réglages > Jeu */
.dps-set-grid { display: grid; grid-template-columns: 1fr; gap: 4px; margin: 6px 0; }
.dps-set-row { display: grid; grid-template-columns: minmax(150px, 1.2fr) 2fr minmax(40px, auto); align-items: center; gap: 8px; font-size: var(--fs-strong); }
.dps-set-row select { grid-column: 2 / 4; }
.dps-set-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2px 12px; margin: 6px 0; }
.dps-set-btns { display: flex; flex-wrap: wrap; gap: 6px; }
/* Compact and mini versions: a thin strip of bars; the header floats above it while the mouse is over the panel */
.dps:not([data-layout=full]) { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; }
.dps:not([data-layout=full]):hover { border-color: rgba(255, 255, 255, .18); background: var(--dps-bg, rgba(9, 12, 18, .6)); }
.dps:not([data-layout=full]) .dps-sum { display: none; }
.dps:not([data-layout=full]) .dps-head { position: absolute; left: 0; right: 0; bottom: 100%; margin-bottom: 2px; background: rgba(9, 12, 18, .92); border: 1px solid rgba(255, 255, 255, .18); border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 3; }
.dps:not([data-layout=full]):hover .dps-head, .dps:not([data-layout=full]):focus-within .dps-head { opacity: 1; pointer-events: auto; }
.dps:not([data-layout=full]) .dps-bars { padding: 0; cursor: grab; }
.dps:not([data-layout=full]) .dps-row { margin: 0 0 1px; padding: 0 4px; border-radius: 2px; background: rgba(9, 12, 18, .45); }
.dps:not([data-layout=full]) .dps-empty { padding: 1px 6px; }
.dps[data-layout=mini] { min-width: 0; }
.dps[data-layout=mini] .dps-grip { display: none; }
.dps[data-layout=mini] .dps-row { border-radius: 999px; padding: 0 8px; }
.dps[data-layout=mini] .dps-fill { border-radius: 999px; }