/* ==========================================================================
   The damage meter (ui/meter.js): each gladiator's damage, bottom left over the crowd's favor      owner: the damage breakdown
   Paper and ink like the favor panel under it. A row per gladiator whose bar is the row itself, in that gladiator's
   colour (blue for you; a partner's teal, violet or amber: coop.css --g-mate), its name and numbers in white Lilita with an
   ink stroke over the bar and the paper alike. Rows slide to their place (--y) and bars grow to their share (--f).
   ========================================================================== */
/* the HUD button, on while the meter is: held pressed in and gold, as the Auto button beside it (qol.css) */
#btn-meter[aria-pressed="true"]{background:var(--g-gold);transform:translateY(3px);box-shadow:inset 0 3px 0 rgba(255,255,255,.55),inset 0 -4px 0 rgba(110,60,10,.22),0 2px 0 var(--ink)}
@media (hover:hover) and (pointer:fine){
  #btn-meter[aria-pressed="true"]:hover{transform:translateY(2px);box-shadow:inset 0 3px 0 rgba(255,255,255,.55),inset 0 -4px 0 rgba(110,60,10,.22),0 3px 0 var(--ink)}
}
#btn-meter[aria-pressed="true"]:active{transform:translateY(4px);box-shadow:inset 0 3px 0 rgba(255,255,255,.55),0 1px 0 var(--ink)}

.dmeter{
  position:fixed;z-index:2;left:max(16px,env(safe-area-inset-left,0px));bottom:var(--dm-bottom,108px);width:min(360px,calc(100vw - 32px));
  display:flex;flex-direction:column-reverse;align-items:flex-start;gap:8px;pointer-events:none;zoom:var(--big,1);
}
.dmeter[hidden]{display:none}
/* part of the HUD: like the favor panel under it, it keeps its size at any Settings > Text size (its tips scale) */
.dm-pill{display:none}
.dm-panel{
  box-sizing:border-box;width:100%;pointer-events:auto;padding:7px 9px 9px;
  background:var(--g-paper);border:var(--line) solid var(--ink);border-radius:var(--r-panel);box-shadow:var(--lip),var(--drop);
  animation:dm-in .18s var(--out);
}
@keyframes dm-in{from{opacity:0;translate:0 8px}}
.dm-head{display:flex;align-items:center;gap:8px;padding:0 2px 7px}
.dm-title{font:var(--w-strong) var(--t-caption)/1 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-2)}
/* this round, or the whole life (the match in co-op) */
.dm-scope{display:inline-flex;padding:2px;border-radius:999px;background:rgba(42,26,46,.08)}
.dm-scope button{
  all:unset;cursor:pointer;padding:3px 9px 4px;border-radius:999px;font:var(--w-strong) var(--t-label)/1 var(--f-ui);color:var(--ink-3);
  transition:background-color .12s var(--out),color .12s var(--out),box-shadow .12s var(--out);
}
.dm-scope button[aria-pressed="true"]{background:var(--paper);color:var(--ink);box-shadow:0 0 0 1.5px var(--ink)}
.dm-scope button:focus-visible{outline:var(--focus-ring);outline-offset:2px}
.dm-all{margin-left:auto;font:400 var(--t-name-s)/1 var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums}
/* the rows: 26 px bars, 4 px apart (ui/meter.js ROW), placed by translate so a change of order slides */
.dm-rows{position:relative;margin:0;padding:0;list-style:none;transition:height .25s var(--out)}
/* more rows than the room above the panel (ui/meter.js fitRows): they scroll inside it */
.dm-rows.scroll{overflow-y:auto;overscroll-behavior:contain}
.dm-row{
  position:absolute;left:0;right:0;top:0;height:26px;box-sizing:border-box;translate:0 var(--y,0);
  display:flex;align-items:center;gap:8px;padding:0 10px;cursor:default;outline:none;
  border:var(--line-xs) solid var(--ink);border-radius:999px;background:var(--paper-2);
  transition:translate .3s var(--out),box-shadow .12s var(--out);
}
/* the bar keeps to the row's round ends in a box of its own: the row itself clips nothing, so no letter is ever cut at
   its edge (Mike, 2026-10-25: "text should never be clipped"; tools/audit/meter-clip.mjs checks it) */
.dm-bar{position:absolute;inset:0;border-radius:inherit;overflow:hidden}
.dm-fill{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--f,0));background:var(--g-blue);transition:transform .35s var(--out)}
.dm-row.mate .dm-fill{background:var(--g-mate)}
/* a companion on its own row (Settings: Own row): its owner's colour, lighter */
.dm-row.pet .dm-fill{opacity:.55}
.dm-name,.dm-n,.dm-pc{position:relative;white-space:nowrap;font:400 15px/1 var(--f-display);color:#fff;-webkit-text-stroke:3.5px var(--ink);paint-order:stroke fill}
/* a long name ends in an ellipsis in its own box, which reaches 4 px past the letters on every side (the margin gives the
   room back): their ink outline, a Y's or a V's arm and a p's tail stay inside it */
.dm-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;padding:4px;margin:-4px}
.dm-n{font-variant-numeric:tabular-nums}
.dm-pc{min-width:2.6em;text-align:right;font-size:12.5px;-webkit-text-stroke:3px var(--ink);font-variant-numeric:tabular-nums}
.dm-pc:empty{display:none}
/* pointing at a row (its tip opens beside the panel): a paper and ink ring round it */
.dm-row:is(:hover,:focus-visible){box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink)}

/* a phone held sideways (a short, wide screen): your plate and the partners' fill the left down to the crowd's favor, so
   the meter sits on the right, over the bottom row (ui/meter.js place), and its tips open on its left */
@media (max-height:500px) and (min-width:601px){
  .dmeter{left:auto;right:max(16px,env(safe-area-inset-right,0px));align-items:flex-end}
}
/* a phone: a pill (the meter's icon, your damage and share) that opens the panel over it */
@media (max-width:600px){
  .dmeter{width:auto}
  .dm-pill{
    all:unset;box-sizing:border-box;pointer-events:auto;cursor:pointer;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px 0 5px;
    border:var(--line-s) solid var(--ink);border-radius:999px;background:var(--g-paper);box-shadow:var(--lip),var(--drop-s);
    font:400 var(--t-name-s)/1 var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums;touch-action:manipulation;
    transition:transform .12s var(--out);
  }
  .dm-pill:active{transform:scale(.97)}
  .dm-pill:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-off)}
  .dm-pill .ic{width:26px;height:26px}
  .dm-pill em{font:var(--w-strong) var(--t-label)/1 var(--f-ui);font-style:normal;color:var(--ink-3)}
  .dm-pill em:empty{display:none}
  .dmeter.open .dm-pill{background:var(--g-gold)}
  .dm-panel{display:none;width:min(300px,calc(100vw - 32px))}
  .dmeter.open .dm-panel{display:block}
}
@media (prefers-reduced-motion:reduce){
  .dm-panel{animation:none}
  .dm-rows,.dm-row,.dm-fill,.dm-scope button,.dm-pill{transition:none}
}