/* duel-procs.css: the proc and stack tracker over your bars (30 Oct 2026, tools/pick_looks/yard/duel_procs.js). Gold and dark as the
   game's own frames; one soft pulse when a stack fills or a proc comes, none with reduced motion. Placed by the script (left, top). */
.dl-procs{position:absolute;left:50%;top:70%;z-index:3;display:flex;align-items:center;gap:8px;pointer-events:none;opacity:0;transition:opacity .2s}
.dl-procs.on{opacity:1}
.dl-over .dl-procs{opacity:0}
.dl-pk{display:flex;align-items:center;gap:6px}
.dl-pk-ic{position:relative;width:38px;height:38px;flex:none;border-radius:4px;overflow:hidden;background:#0d0b09;box-shadow:0 0 0 1px #000,0 0 0 2px rgba(201,162,74,.75),0 2px 8px rgba(0,0,0,.6)}
.dl-pk-ic img{display:block;width:100%;height:100%;transform:scale(1.08)}
.dl-pk-sw{position:absolute;inset:0}
.dl-pk-n{position:absolute;right:2px;bottom:0;font:700 12px/1.1 'Open Sans',Arial,sans-serif;color:#fff;text-shadow:0 0 2px #000,0 0 2px #000,1px 1px 0 #000}
.dl-pk-tm{position:absolute;left:0;right:0;top:38%;transform:translateY(-50%);text-align:center;font:700 13px/1 'Open Sans',Arial,sans-serif;color:#ffe9a8;text-shadow:0 0 3px #000,0 0 2px #000,1px 1px 0 #000}
.dl-pk-soon .dl-pk-tm{color:#ffb070}
/* the pips: one a stack, a small diamond in a dark well; filled gold, and all of them lit at the most */
.dl-pk-pips{display:flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:4px;background:rgba(10,8,6,.62);box-shadow:inset 0 0 0 1px rgba(201,162,74,.35),0 2px 8px rgba(0,0,0,.45)}
.dl-pk-pips i{width:10px;height:10px;transform:rotate(45deg);background:#1a1510;box-shadow:inset 0 0 0 1px #000,0 0 0 1px #4a3b22;transition:background .15s,box-shadow .15s}
.dl-pk-pips i.on{background:linear-gradient(135deg,#fff1c2,#f0c25a 45%,#a8701c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 0 0 1px #000,0 0 5px rgba(255,200,90,.5)}
.dl-pk-zero .dl-pk-ic{opacity:.55;filter:saturate(.55)}
.dl-pk-zero .dl-pk-pips{opacity:.7}
.dl-pk-full .dl-pk-ic{box-shadow:0 0 0 1px #000,0 0 0 2px #ffe3a0,0 0 16px rgba(255,204,96,.9)}
.dl-pk-full .dl-pk-pips{background:rgba(42,30,10,.72);box-shadow:inset 0 0 0 1px rgba(240,214,142,.8),0 0 14px rgba(255,200,90,.45)}
.dl-pk-full .dl-pk-pips i.on{box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),0 0 0 1px #000,0 0 8px rgba(255,214,110,.85)}
/* a proc or a window: the icon alone, ringed gold */
.dl-pk-proc .dl-pk-ic,.dl-pk-win .dl-pk-ic{box-shadow:0 0 0 1px #000,0 0 0 2px #f0d68e,0 0 10px rgba(255,210,110,.45)}
/* one pulse: the stack filling, a proc coming in */
.dl-pk-pop .dl-pk-ic,.dl-pk-pop .dl-pk-pips{animation:dl-pk-pop .6s ease-out}
.dl-pk-in{animation:dl-pk-in .22s ease-out}
.dl-pk-in .dl-pk-ic::after,.dl-pk-pop .dl-pk-ic::after{content:'';position:absolute;inset:0;border-radius:4px;box-shadow:inset 0 0 0 2px rgba(255,240,190,.9),inset 0 0 12px rgba(255,214,120,.8);opacity:0;animation:dl-pk-ring .6s ease-out}
@keyframes dl-pk-pop{0%{transform:scale(1)}30%{transform:scale(1.14);filter:brightness(1.35)}100%{transform:scale(1);filter:none}}
@keyframes dl-pk-in{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@keyframes dl-pk-ring{0%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.dl-procs{transition:none}.dl-pk-pips i{transition:none}.dl-pk-pop .dl-pk-ic,.dl-pk-pop .dl-pk-pips,.dl-pk-in,.dl-pk-in .dl-pk-ic::after,.dl-pk-pop .dl-pk-ic::after{animation:none}}
/* a phone: smaller, and closer together */
.dl-procs-t{gap:6px}
.dl-procs-t .dl-pk{gap:4px}
.dl-procs-t .dl-pk-ic{width:28px;height:28px}
.dl-procs-t .dl-pk-n,.dl-procs-t .dl-pk-tm{font-size:10px}
.dl-procs-t .dl-pk-pips{height:18px;gap:4px;padding:0 6px}
.dl-procs-t .dl-pk-pips i{width:7px;height:7px}
/* the switch, in Key Bindings and in a phone's corner menu (as the chat's language filter, duel-chat.css) */
.dl-ui .dl-prtog{min-height:0;height:24px;padding:0 10px;border:1px solid rgba(201,162,74,.5);border-radius:4px;box-shadow:none;background:rgba(255,255,255,.06);color:#ffd27a;font:600 12px/22px 'Open Sans',Arial,sans-serif;letter-spacing:0;cursor:pointer;pointer-events:auto}
.dl-menu-pop .dl-prtog{display:inline;height:auto;padding:0;border:0;background:none;color:inherit;font:inherit}