/* pressings: the record icon, the header counter next to the level ring, the flying records. Tokens only; flat print. */
.prs{display:inline-block;vertical-align:-.2em;flex:none}
.prc{display:inline-flex;align-items:center;gap:5px;text-decoration:none;color:var(--text);padding:2px 4px;border-radius:var(--r-sm);min-height:28px}
.prc .prn{font:700 14px Outfit,sans-serif;font-variant-numeric:tabular-nums;color:var(--butter);display:inline-block;min-width:1ch}
.prc:hover .prn{color:var(--text)}.prc:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
@media(pointer:coarse){.prc{min-height:44px}}
/* phones: the header has no room beside the ring (it would wrap), so the counter becomes a small badge on the ring's lower edge */
@media(max-width:480px){
  #acct{position:relative}
  #acct .prc{position:absolute;right:-6px;bottom:-9px;z-index:2;min-height:0;padding:1px 6px 1px 3px;gap:3px;background:var(--ink);border:1.5px solid var(--line);border-radius:var(--r-pill)}
  #acct .prc .prn{font-size:11px;line-height:1.35}#acct .prc .prs{width:12px;height:12px}
}
/* the coin that pops in where a pressing was earned, is tossed up tumbling, then flies to the counter (pressing.js drives it with the Web Animations API; this is the 3D box).
   .prf = the flying layer (perspective 600px); .prf-coin keeps its children in 3D: a front face, a back face turned 180deg, and 7 thin darker-butter discs between them for the rim
   (edge-on it is a solid yellow band, never a line). */
.prf{position:fixed;left:0;top:0;width:40px;height:40px;z-index:9997;pointer-events:none;line-height:0;perspective:600px;will-change:transform,filter}
.prf-coin{position:absolute;inset:0;transform-style:preserve-3d}
.prf-t{position:absolute;inset:4%;border-radius:50%;background:color-mix(in srgb,var(--butter),var(--ink) 25%);transform:translateZ(var(--z,0))}
.prf-t:nth-child(2),.prf-t:nth-child(6){background:color-mix(in srgb,var(--butter),var(--ink) 32%)}
.prf-t:first-child,.prf-t:last-child{background:color-mix(in srgb,var(--butter),var(--ink) 40%)}   /* the outermost layers a little darker */
.prf-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.prf-front{transform:translateZ(4px)}
.prf-back{transform:translateZ(-4px) rotateY(180deg)}
.prf-face .prs{display:block;width:100%;height:100%}
@media(prefers-reduced-motion:reduce){.prf{display:none}}
/* record next to the words wherever pressings show */
.pv .prs,.shop .lab .prs,.deco .prs,.lu-perk .prs{margin-right:4px}
.btn .prs{margin-left:2px;vertical-align:-.15em}