/* NETHERNET — SAR operator card. All classes start with "sar-" (plus .cn.sar). Used with js/sar-card.js. */
/* Rarity finish. SAR (Soul Archive): gold foil. UR (Prototype): magenta / cyan holo, like the UR coating. */
.cn.sar, .sar-skin {
  --rar-edge: #F6E7B0; --rar-edge-a: rgba(246,231,176,.55); --rar-deep: rgba(40,25,0,.9);
  --rar-foil: linear-gradient(115deg, #B8964F 0%, #F6E7B0 22%, #FFF8DC 30%, #E2C77F 42%, #A9853F 58%, #F6E7B0 76%, #FFF8DC 84%, #C9A75E 100%);
  --rar-foil-hi: rgba(255,250,225,.75); --rar-foil-lo: rgba(36,22,0,.95);
  --rar-plate: linear-gradient(180deg, #FFF8DC, #F6E7B0 45%, #C9A75E); --rar-plate-ink: #141210; --rar-plate-lo: rgba(60,40,0,.5);
  --rar-frame: linear-gradient(160deg, #7A5A22 0%, #E9D29A 14%, #FFF6D2 22%, #C9A75E 34%, #8C6A2A 46%, #D9BC74 60%, #FFF3CC 72%, #B08A44 86%, #6E5020 100%);
  --rar-line: rgba(255,240,200,.85);
  --rar-sheen: linear-gradient(115deg, transparent 40%, rgba(255,252,235,.75) 48%, rgba(255,255,255,.95) 50%, rgba(255,252,235,.75) 52%, transparent 60%);
}
.cn.sar.rar-UR, .sar-skin.rar-UR {
  --rar-edge: #FF3EA5; --rar-edge-a: rgba(255,62,165,.65); --rar-deep: rgba(46,0,28,.9);
    --rar-foil: linear-gradient(115deg, #FF3EA5 0%, #FF9AD0 16%, #FFFFFF 26%, #9FEBFF 36%, #3EC8FF 48%, #B07CFF 62%, #FF3EA5 76%, #FFD2EC 88%, #3EC8FF 100%);
  --rar-foil-hi: rgba(255,232,246,.8); --rar-foil-lo: rgba(44,0,30,.95);
  --rar-plate: linear-gradient(180deg, #FF9AD0, #FF3EA5 48%, #B0186A); --rar-plate-ink: #FFFFFF; --rar-plate-lo: rgba(60,0,32,.55);
  --rar-frame: linear-gradient(160deg, #B0186A 0%, #FF3EA5 12%, #FFC2E2 22%, #FFFFFF 27%, #9FEBFF 36%, #3EC8FF 46%, #6A4CFF 58%, #B07CFF 66%, #FF3EA5 78%, #FFD2EC 88%, #3EC8FF 100%);
  --rar-line: rgba(160,235,255,.9);
  --rar-sheen: linear-gradient(115deg, transparent 38%, rgba(62,200,255,.7) 46%, rgba(255,255,255,.9) 50%, rgba(255,62,165,.7) 54%, transparent 62%);
}
.cn.sar { background: #040507; color: #ECE8DF; isolation: isolate; cursor: pointer;
  box-shadow: 0 0 0 calc(.15 * var(--mm)) rgba(0,0,0,.75), 0 calc(2 * var(--mm)) calc(6 * var(--mm)) rgba(0,0,0,.55); }
.sar-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; }
/* two copies of the clip take turns (seamless loop); only the one playing is shown, the poster sits under both */
.cn.sar video.sar-art { opacity: 0; }
.cn.sar video.sar-art.on { opacity: 1; }
/* only the very foot is darkened a little, under the skills; the figure stays untouched */
.sar-shade { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(4,5,7,0) 0%, rgba(4,5,7,.38) 45%, rgba(4,5,7,.62) 100%); transition: opacity .35s; }

/* Thick metal frame, like a physical high-rarity card: a bevelled metallic ring around the art,
   a dark rim and a fine bright line where it meets the art, and a sheen that runs along the ring.
   --frame-w is the ring width; the type layer keeps clear of it. */
.cn.sar { --frame-w: calc(2.5 * var(--mm)); }
.sar-frame { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; padding: var(--frame-w);
  background:
    linear-gradient(135deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 22%, rgba(0,0,0,0) 70%, rgba(0,0,0,.38) 100%),
    var(--rar-frame);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
/* bevel: a light edge on the outside, a dark groove halfway, the art window's rim */
.sar-bevel { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 calc(.18 * var(--mm)) rgba(255,255,255,.55), inset 0 0 0 calc(.32 * var(--mm)) rgba(0,0,0,.35),
    inset 0 0 0 calc(1.15 * var(--mm)) transparent, inset 0 0 0 calc(1.3 * var(--mm)) rgba(0,0,0,.28); }
.sar-window { position: absolute; inset: var(--frame-w); z-index: 2; pointer-events: none; border-radius: calc(1.1 * var(--mm));
  box-shadow: 0 0 0 calc(.2 * var(--mm)) rgba(0,0,0,.85), 0 0 0 calc(.42 * var(--mm)) var(--rar-line),
    inset 0 0 calc(2.4 * var(--mm)) rgba(0,0,0,.55), inset 0 0 0 calc(.15 * var(--mm)) rgba(0,0,0,.6); }
/* a sheen running round the ring */
.sar-frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--rar-sheen) 0 0 / 300% 100%; animation: sar-sheen 5.5s linear infinite; }
@media (prefers-reduced-motion: reduce) { .sar-frame::after { animation: none; } }

/* ---------- type layer ---------- */
.sar-type { position: absolute; inset: 0; z-index: 3; padding: calc(4.3 * var(--mm)) calc(4.4 * var(--mm)) calc(4 * var(--mm));
  display: flex; flex-direction: column; transition: opacity .35s; }
.cn.sar.sar-art-only .sar-type, .cn.sar.sar-art-only .sar-shade { opacity: 0; }

/* Emboss: light fill, a bright edge above and a deep edge below (raised letters on the art). */
.sar-emb { color: rgba(236,232,223,.94);
  text-shadow: 0 calc(-.1 * var(--mm)) 0 rgba(255,255,255,.45), 0 calc(.16 * var(--mm)) 0 rgba(0,0,0,.95), 0 0 calc(1.2 * var(--mm)) rgba(0,0,0,.9); }
/* Gold foil: a metallic gradient clipped to the letters, embossed with drop-shadows, a slow sheen passing over. */
.sar-foil { background: var(--rar-foil);
  background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 calc(-.1 * var(--mm)) 0 var(--rar-foil-hi)) drop-shadow(0 calc(.22 * var(--mm)) 0 var(--rar-foil-lo)) drop-shadow(0 0 calc(1 * var(--mm)) rgba(0,0,0,.75));
  animation: sar-sheen 6s linear infinite; }
@keyframes sar-sheen { from { background-position: 100% 0; } to { background-position: -160% 0; } }

.sar-top { display: flex; align-items: center; gap: calc(1.6 * var(--mm)); }
.sar-plate { font: 700 calc(2.3 * var(--mm))/1 'IBM Plex Mono', monospace; letter-spacing: .18em; color: var(--rar-plate-ink); padding: calc(.7 * var(--mm)) calc(1.2 * var(--mm)) calc(.6 * var(--mm)) calc(1.4 * var(--mm));
  border-radius: calc(.5 * var(--mm)); background: var(--rar-plate);
  box-shadow: inset 0 calc(.12 * var(--mm)) 0 rgba(255,255,255,.8), inset 0 calc(-.15 * var(--mm)) 0 var(--rar-plate-lo), 0 calc(.2 * var(--mm)) calc(.6 * var(--mm)) rgba(0,0,0,.6); }
.sar-no { font: 600 calc(1.9 * var(--mm))/1 'IBM Plex Mono', monospace; letter-spacing: .16em; }
.sar-covert { margin-left: auto; font-weight: 900; font-size: calc(2.2 * var(--mm)); letter-spacing: .2em; padding: calc(.3 * var(--mm)) calc(1 * var(--mm));
  border: calc(.2 * var(--mm)) solid rgba(236,232,223,.7); border-radius: calc(.4 * var(--mm)); }

/* name: vertical, down the right edge, clear of the figure in the middle */
.sar-name { position: absolute; right: calc(4.2 * var(--mm)); top: calc(9.6 * var(--mm)); display: flex; flex-direction: row-reverse; align-items: flex-start; gap: calc(.6 * var(--mm)); }
.sar-name b { writing-mode: vertical-rl; font-family: var(--f-display); font-weight: 400; line-height: 1;
  font-size: clamp(calc(4.6 * var(--mm)), calc(30 * var(--mm) / var(--nlen)), calc(8.2 * var(--mm))); letter-spacing: .04em; }
.cn.sar.l-zh .sar-name b { font-family: var(--f-body); font-weight: 900; }
.cn.sar.l-en .sar-name b { font-size: clamp(calc(4.2 * var(--mm)), calc(34 * var(--mm) / var(--nlen)), calc(6 * var(--mm))); letter-spacing: .06em; }
.sar-name small { writing-mode: vertical-rl; font: 600 calc(1.8 * var(--mm))/1 'IBM Plex Mono', monospace; letter-spacing: .3em; padding-top: calc(.6 * var(--mm)); opacity: .9; }

/* skills: over the dark foot of the art */
.sar-foot { margin-top: auto; display: flex; flex-direction: column; gap: calc(.9 * var(--mm)); }
/* skill name: top left, under the SAR plate (empty sky in the art) */
.sar-sname { font-family: var(--f-display); font-size: calc(3.4 * var(--mm)); line-height: 1.1; letter-spacing: .06em; align-self: flex-start;
  margin-top: calc(1.4 * var(--mm)); max-width: 52%; }
.cn.sar.l-zh .sar-sname { font-family: var(--f-body); font-weight: 900; }
.sar-sk { display: block; }
/* timing tag sits inline at the start of the text, so the text gets the card's full width */
.sar-badge { display: inline-flex; align-items: center; gap: calc(.5 * var(--mm)); vertical-align: calc(.15 * var(--mm)); margin-right: calc(1 * var(--mm));
  padding: calc(.25 * var(--mm)) calc(.9 * var(--mm)) calc(.2 * var(--mm)) calc(.7 * var(--mm)); border-radius: calc(.5 * var(--mm)); color: #ECE8DF; background: rgba(236,232,223,.08);
  box-shadow: inset 0 calc(.12 * var(--mm)) 0 rgba(255,255,255,.28), inset 0 calc(-.15 * var(--mm)) 0 rgba(0,0,0,.7), 0 0 0 calc(.15 * var(--mm)) rgba(236,232,223,.5);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); text-shadow: none; }
.sar-badge i { font-style: normal; font-weight: 900; font-size: calc(2.2 * var(--mm)); line-height: 1; }
.sar-badge b { font-size: calc(1.6 * var(--mm)); font-weight: 700; line-height: 1; white-space: nowrap; }
.cn.sar.l-en .sar-badge b { font-size: calc(1.5 * var(--mm)); letter-spacing: .02em; }
.sar-sk.tm-DEATH .sar-badge { color: #FF6A55; box-shadow: inset 0 calc(.12 * var(--mm)) 0 rgba(255,255,255,.25), inset 0 calc(-.15 * var(--mm)) 0 rgba(0,0,0,.7), 0 0 0 calc(.15 * var(--mm)) rgba(255,106,85,.75); }
.sar-sk { font-weight: 700; font-size: calc(2.4 * var(--mm)); line-height: 1.42;
  color: rgba(236,232,223,.96);
  text-shadow: 0 calc(-.1 * var(--mm)) 0 rgba(255,255,255,.35), 0 calc(.16 * var(--mm)) 0 rgba(0,0,0,1), 0 0 calc(1 * var(--mm)) rgba(0,0,0,.95), 0 0 calc(2.2 * var(--mm)) rgba(0,0,0,.7); }
.cn.sar.l-en .sar-sk { font-size: calc(2.25 * var(--mm)); line-height: 1.32; }
.cn.sar .kw { font-weight: 900; }
@media (prefers-reduced-motion: reduce) { .sar-foil { animation: none; } }

.cn.sar.rar-UR .sar-plate { text-shadow: 0 1px 0 rgba(60,0,32,.6); }

/* ---------- the player's operator panel with a SAR / UR skin ----------
   The animated art fills the panel; the header text sits on a dark fade at the top, the skill box stays
   readable as frosted paper over the art, and a thin metal ring in the rarity colours frames the panel. */
.role-panel.has-art { background: #040507; border-color: transparent; isolation: isolate; }
.role-panel.has-art > :not(.rp-art):not(.rp-art-shade):not(.rp-art-frame) { position: relative; z-index: 3; }
.rp-art { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; }
.rp-art .sar-bg { position: absolute; inset: 0; }
.rp-art .sar-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
.rp-art video.sar-art { opacity: 0; }
.rp-art video.sar-art.on { opacity: 1; }
.rp-art-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(4,5,7,.78) 0%, rgba(4,5,7,.35) 30%, rgba(4,5,7,.1) 46%, rgba(4,5,7,.45) 100%),
    linear-gradient(to right, rgba(4,5,7,.55) 0%, rgba(4,5,7,0) 60%); }
.rp-art-frame { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; padding: 3px;
  background: linear-gradient(135deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 22%, rgba(0,0,0,0) 70%, rgba(0,0,0,.38) 100%), var(--rar-frame);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.rp-art-frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--rar-sheen) 0 0 / 300% 100%; animation: sar-sheen 5.5s linear infinite; }
@media (prefers-reduced-motion: reduce) { .rp-art-frame::after { animation: none; } }
.role-panel.has-art::before { z-index: 3; left: 3px; top: 3px; bottom: 3px; }
.role-panel.has-art .rp-top .mono { color: rgba(236,232,223,.8); display: inline-flex; align-items: center; gap: 6px; }
.role-panel.has-art .sar-plate { font-family: var(--f-mono); font-size: 9.5px; font-weight: 900; letter-spacing: .12em; line-height: 1; padding: 2px 5px;
  border-radius: 2px; background: var(--rar-plate); color: var(--rar-plate-ink); box-shadow: 0 1px 0 var(--rar-plate-lo), inset 0 1px 0 rgba(255,255,255,.6); }
/* name and emblem in the same metal as the frame (gold for SAR, holo for UR), with the same moving sheen */
.role-panel.has-art .rp-id b { background: var(--rar-foil); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 -.5px 0 var(--rar-foil-hi)) drop-shadow(0 1px 0 var(--rar-foil-lo)) drop-shadow(0 0 4px rgba(0,0,0,.8));
  animation: sar-sheen 6s linear infinite; }
.role-panel.has-art .rp-id small { color: rgba(236,232,223,.75); text-shadow: 0 1px 2px rgba(0,0,0,.9); }
.role-panel.has-art .rp-id svg { stroke: url(#rar-foil-SAR);
  filter: drop-shadow(0 -.5px 0 var(--rar-foil-hi)) drop-shadow(0 1px 0 var(--rar-foil-lo)) drop-shadow(0 0 4px rgba(0,0,0,.8)); }
.role-panel.has-art.rar-UR .rp-id svg { stroke: url(#rar-foil-UR); }
.role-panel.has-art .rp-id svg [fill]:not([fill="none"]) { fill: url(#rar-foil-SAR); }
.role-panel.has-art.rar-UR .rp-id svg [fill]:not([fill="none"]) { fill: url(#rar-foil-UR); }
@media (prefers-reduced-motion: reduce) { .role-panel.has-art .rp-id b { animation: none; } }
/* where the picture sits in the panel: the SAR figure's head is high, the UR art's centre is lower */
.role-panel.has-art.rar-UR .rp-art .sar-art { object-position: 50% 34%; }
/* the skill text sits on a see-through dark glass so the art shows behind it (ink and paper swap: light text, dark badges' cut-outs) */
.role-panel.has-art .rp-skill { --ink: #ECE8DF; --paper: #0C0D11; color: var(--ink); margin-top: auto;
  background: linear-gradient(to bottom, rgba(6,7,10,.34), rgba(6,7,10,.66));
  box-shadow: inset 0 0 0 1px var(--rar-edge-a), 0 4px 14px rgba(0,0,0,.35);
  text-shadow: 0 1px 0 rgba(0,0,0,.95), 0 0 6px rgba(0,0,0,.85); }
.role-panel.has-art .rp-skill > b { border-bottom-color: var(--rar-edge-a); }
.role-panel.has-art .rp-skill .sk-badge { text-shadow: none; }
.role-panel.has-art .rp-used { color: rgba(236,232,223,.85); background: rgba(4,5,7,.55); border-color: rgba(236,232,223,.4); }

/* ---------- other players' seats with a SAR / UR skin ----------
   Same look as the player's own panel, darker so the seat's meters and cards stay readable.
   The seat is its own stacking context; the art layers sit behind everything (z-index -1),
   so the seat's contents and its tags/banners keep their usual positions. */
.seat.has-art { isolation: isolate; background: #040507; }
.seat.has-art > .rp-art, .seat.has-art > .s-art-shade, .seat.has-art > .rp-art-frame { z-index: -1; }
.seat.has-art > .rp-art-frame { padding: 2px; }
.seat.has-art.rar-UR .rp-art .sar-art { object-position: 50% 34%; }
.s-art-shade { position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(to bottom, rgba(4,5,7,.55) 0%, rgba(4,5,7,.72) 40%, rgba(4,5,7,.82) 100%); }
.seat.has-art .s-name { text-shadow: 0 1px 2px rgba(0,0,0,.9); }
/* emblem tile: metal rim, emblem in the same metal */
.seat.has-art .s-emb { border: 1.5px solid transparent; animation: none;
  background: linear-gradient(rgba(8,9,12,.82), rgba(8,9,12,.82)) padding-box, var(--rar-frame) border-box;
  box-shadow: 0 0 10px -2px var(--rar-edge-a); }
.seat.has-art .s-emb svg { stroke: url(#rar-foil-SAR); filter: drop-shadow(0 1px 0 var(--rar-foil-lo)); }
.seat.has-art.rar-UR .s-emb svg { stroke: url(#rar-foil-UR); }
.seat.has-art .s-emb svg [fill]:not([fill="none"]) { fill: url(#rar-foil-SAR); }
.seat.has-art.rar-UR .s-emb svg [fill]:not([fill="none"]) { fill: url(#rar-foil-UR); }
/* operator name in foil, the skill name stays plain */
.seat.has-art .s-rn { font-weight: inherit; background: var(--rar-foil); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 var(--rar-foil-lo)); animation: sar-sheen 6s linear infinite; }
.seat.has-art .s-rolename span { color: rgba(236,232,223,.72); }
@media (prefers-reduced-motion: reduce) { .seat.has-art .s-rn { animation: none; } }
/* a crashed player's art fades to grey */
.seat.dead.has-art > .rp-art { filter: grayscale(1) brightness(.6); }

/* ---------- a hidden operator with a SAR / UR skin ----------
   Only the rarity shows: the metal frame, foil "?" and label, and a slow sheen in the rarity's colours
   over a dark field. No art, so nothing hints at which operator it is. */
.seat.cover-art > .s-cover-art { position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; overflow: hidden;
  background:
    repeating-linear-gradient(-45deg, rgba(255,255,255,.035) 0 6px, transparent 6px 12px),
    radial-gradient(120% 90% at 85% 0%, var(--rar-edge-a), transparent 45%),
    linear-gradient(180deg, #0B0C11, #050608); }
.seat.cover-art > .s-cover-art::after { content: ""; position: absolute; inset: 0; opacity: .13; mix-blend-mode: screen;
  background: var(--rar-foil); background-size: 260% 100%; animation: sar-sheen 7s linear infinite; }
@media (prefers-reduced-motion: reduce) { .seat.cover-art > .s-cover-art::after { animation: none; } }
.seat.cover-art .s-emb.covert { border: 1.5px solid transparent; border-style: solid;
  background: linear-gradient(rgba(8,9,12,.85), rgba(8,9,12,.85)) padding-box, var(--rar-frame) border-box;
  box-shadow: 0 0 10px -2px var(--rar-edge-a); }
.seat.cover-art .s-q { font-size: 1.15em; background: var(--rar-foil); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 var(--rar-foil-lo)); animation: sar-sheen 6s linear infinite; }

/* ---------- phone landscape: the seats are short wide strips and the panel is a small tile,
   so the art is framed lower (the face and emblem instead of the halo above the head)
   and the seat shade is lighter so the art shows through. ---------- */
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .seat.has-art .rp-art .sar-art { object-position: 50% 44%; }
  .seat.has-art.rar-UR .rp-art .sar-art { object-position: 50% 26%; }
  .role-panel.has-art .rp-art .sar-art { object-position: 50% 40%; }
  .role-panel.has-art.rar-UR .rp-art .sar-art { object-position: 50% 26%; }
  .s-art-shade { background:
    linear-gradient(to right, rgba(4,5,7,.72) 0%, rgba(4,5,7,.38) 45%, rgba(4,5,7,.22) 100%),
    linear-gradient(to bottom, rgba(4,5,7,.25) 0%, rgba(4,5,7,0) 40%, rgba(4,5,7,.45) 100%); }
}

/* ---------- result screen: players who used a SAR / UR operator ----------
   The identity card gets the rarity's metal frame with its sheen (no rarity label);
   the operator name and emblem below it are in the same foil. */
.rs-p.sar-skin .rs-front { box-shadow: 0 0 16px -2px var(--rar-edge-a); }
.rs-p.sar-skin .rs-front > .rp-art-frame { padding: 4px; z-index: 1; }
.rs-p.sar-skin .rs-rn { font-weight: 900; background: var(--rar-foil); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 var(--rar-foil-lo)); animation: sar-sheen 6s linear infinite; }
.rs-p.sar-skin .rs-role svg { stroke: url(#rar-foil-SAR); filter: drop-shadow(0 1px 0 var(--rar-foil-lo)); }
.rs-p.sar-skin.rar-UR .rs-role svg { stroke: url(#rar-foil-UR); }
@media (prefers-reduced-motion: reduce) { .rs-p.sar-skin .rs-rn { animation: none; } }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .rs-p.sar-skin .rs-front > .rp-art-frame { padding: 2.5px; }
  }

/* ---------- UR coatings (Prototype coatings from Deep Salvage) ----------
   A UR operator can be recoated for good; the class coat-B … coat-F sits next to rar-UR wherever that
   operator's UR frame is drawn (card, seat, operator panel, results). A (no class) is the factory finish. */
/* B: Cold Chrome */
.cn.sar.rar-UR.coat-B, .sar-skin.rar-UR.coat-B {
  --rar-edge: #7FD8FF;
  --rar-edge-a: rgba(127,216,255,.6);
  --rar-deep: rgba(4,16,30,.9);
  --rar-foil: linear-gradient(115deg, #8FA3B8 0%, #E8F1FA 18%, #FFFFFF 26%, #9FE3FF 38%, #3EA8FF 50%, #C9D6E2 64%, #FFFFFF 76%, #7FD8FF 88%, #8FA3B8 100%);
  --rar-foil-hi: rgba(235,248,255,.8);
  --rar-foil-lo: rgba(4,14,26,.95);
  --rar-plate: linear-gradient(180deg, #F2F7FC, #B9C7D6 48%, #6B7C8F);
  --rar-plate-ink: #0B1420;
  --rar-plate-lo: rgba(4,14,26,.55);
  --rar-frame: linear-gradient(160deg, #4A5868 0%, #B9C7D6 12%, #F2F7FC 22%, #FFFFFF 27%, #9FE3FF 36%, #3EA8FF 46%, #2A4A6A 58%, #B9C7D6 70%, #F2F7FC 82%, #7FD8FF 92%, #4A5868 100%);
  --rar-line: rgba(170,230,255,.9);
  --rar-sheen: linear-gradient(115deg, transparent 38%, rgba(127,216,255,.65) 46%, rgba(255,255,255,.95) 50%, rgba(127,216,255,.65) 54%, transparent 62%);
}
.role-panel.has-art.rar-UR.coat-B .rp-id svg, .seat.has-art.rar-UR.coat-B .s-emb svg, .rs-p.sar-skin.rar-UR.coat-B .rs-role svg { stroke: url(#rar-foil-UR-B); }
.role-panel.has-art.rar-UR.coat-B .rp-id svg [fill]:not([fill="none"]), .seat.has-art.rar-UR.coat-B .s-emb svg [fill]:not([fill="none"]) { fill: url(#rar-foil-UR-B); }
/* C: Violet Zero-Day */
.cn.sar.rar-UR.coat-C, .sar-skin.rar-UR.coat-C {
  --rar-edge: #9B6BFF;
  --rar-edge-a: rgba(155,107,255,.6);
  --rar-deep: rgba(14,6,30,.9);
  --rar-foil: linear-gradient(115deg, #6E7480 0%, #C7CCD6 18%, #FFFFFF 26%, #C2A8FF 36%, #7B4DFF 48%, #3A2A6E 60%, #C7CCD6 74%, #E6DCFF 86%, #6E7480 100%);
  --rar-foil-hi: rgba(236,228,255,.8);
  --rar-foil-lo: rgba(12,6,26,.95);
  --rar-plate: linear-gradient(180deg, #B9A2FF, #7B4DFF 48%, #3A1E9E);
  --rar-plate-ink: #FFFFFF;
  --rar-plate-lo: rgba(14,6,40,.55);
  --rar-frame: linear-gradient(160deg, #22252C 0%, #5A606C 12%, #AEB4C0 22%, #E6E9EF 27%, #8E7CFF 36%, #5A2EE0 46%, #22252C 58%, #5A606C 68%, #C7CCD6 80%, #9B6BFF 90%, #22252C 100%);
  --rar-line: rgba(190,165,255,.9);
  --rar-sheen: linear-gradient(115deg, transparent 38%, rgba(155,107,255,.65) 46%, rgba(255,255,255,.9) 50%, rgba(155,107,255,.65) 54%, transparent 62%);
}
.role-panel.has-art.rar-UR.coat-C .rp-id svg, .seat.has-art.rar-UR.coat-C .s-emb svg, .rs-p.sar-skin.rar-UR.coat-C .rs-role svg { stroke: url(#rar-foil-UR-C); }
.role-panel.has-art.rar-UR.coat-C .rp-id svg [fill]:not([fill="none"]), .seat.has-art.rar-UR.coat-C .s-emb svg [fill]:not([fill="none"]) { fill: url(#rar-foil-UR-C); }
/* D: Prism Overflow */
.cn.sar.rar-UR.coat-D, .sar-skin.rar-UR.coat-D {
  --rar-edge: #5CF0C8;
  --rar-edge-a: rgba(92,240,200,.55);
  --rar-deep: rgba(4,20,24,.9);
  --rar-foil: linear-gradient(115deg, #3EC8FF 0%, #5CF0C8 16%, #E9FF9A 28%, #FFFFFF 34%, #9FEBFF 44%, #6A8CFF 58%, #9B6BFF 70%, #5CF0C8 84%, #3EC8FF 100%);
  --rar-foil-hi: rgba(232,255,250,.8);
  --rar-foil-lo: rgba(2,20,24,.95);
  --rar-plate: linear-gradient(180deg, #B8FFF0, #3EC8FF 50%, #6A4CFF);
  --rar-plate-ink: #06121A;
  --rar-plate-lo: rgba(2,20,30,.55);
  --rar-frame: linear-gradient(160deg, #1F6E8C 0%, #3EC8FF 10%, #5CF0C8 20%, #E9FF9A 28%, #FFFFFF 32%, #9FEBFF 40%, #6A8CFF 52%, #9B6BFF 62%, #3EC8FF 74%, #5CF0C8 86%, #1F6E8C 100%);
  --rar-line: rgba(180,255,235,.9);
  --rar-sheen: linear-gradient(115deg, transparent 38%, rgba(92,240,200,.6) 45%, rgba(255,255,255,.9) 50%, rgba(106,140,255,.6) 55%, transparent 62%);
}
.role-panel.has-art.rar-UR.coat-D .rp-id svg, .seat.has-art.rar-UR.coat-D .s-emb svg, .rs-p.sar-skin.rar-UR.coat-D .rs-role svg { stroke: url(#rar-foil-UR-D); }
.role-panel.has-art.rar-UR.coat-D .rp-id svg [fill]:not([fill="none"]), .seat.has-art.rar-UR.coat-D .s-emb svg [fill]:not([fill="none"]) { fill: url(#rar-foil-UR-D); }
/* E: Obsidian Virus */
.cn.sar.rar-UR.coat-E, .sar-skin.rar-UR.coat-E {
  --rar-edge: #7CFF4F;
  --rar-edge-a: rgba(124,255,79,.5);
  --rar-deep: rgba(6,20,4,.9);
  --rar-foil: linear-gradient(115deg, #4A5A40 0%, #C8FF9A 18%, #FFFFFF 26%, #7CFF4F 38%, #1FAE5A 50%, #283A26 62%, #C8FF9A 76%, #E9FFD9 86%, #4A5A40 100%);
  --rar-foil-hi: rgba(236,255,224,.8);
  --rar-foil-lo: rgba(4,16,4,.95);
  --rar-plate: linear-gradient(180deg, #D9FFB8, #7CFF4F 48%, #1F8A3A);
  --rar-plate-ink: #081406;
  --rar-plate-lo: rgba(4,20,4,.55);
  --rar-frame: linear-gradient(160deg, #0E120E 0%, #2E352E 12%, #6E7A6E 22%, #C8D2C8 27%, #7CFF4F 36%, #1FAE5A 46%, #0E120E 58%, #2E352E 68%, #9AA69A 80%, #7CFF4F 90%, #0E120E 100%);
  --rar-line: rgba(170,255,140,.85);
  --rar-sheen: linear-gradient(115deg, transparent 38%, rgba(124,255,79,.55) 46%, rgba(255,255,255,.9) 50%, rgba(124,255,79,.55) 54%, transparent 62%);
}
.role-panel.has-art.rar-UR.coat-E .rp-id svg, .seat.has-art.rar-UR.coat-E .s-emb svg, .rs-p.sar-skin.rar-UR.coat-E .rs-role svg { stroke: url(#rar-foil-UR-E); }
.role-panel.has-art.rar-UR.coat-E .rp-id svg [fill]:not([fill="none"]), .seat.has-art.rar-UR.coat-E .s-emb svg [fill]:not([fill="none"]) { fill: url(#rar-foil-UR-E); }
/* F: Red Alert — alarm red over dark gunmetal */
.cn.sar.rar-UR.coat-F, .sar-skin.rar-UR.coat-F {
  --rar-edge: #FF3B3B;
  --rar-edge-a: rgba(255,59,59,.6);
  --rar-deep: rgba(30,2,6,.9);
  --rar-foil: linear-gradient(115deg, #5A1218 0%, #FF8A80 16%, #FFFFFF 26%, #FF3B3B 38%, #B00020 50%, #2A0A0E 62%, #FF6A5A 76%, #FFD0CC 88%, #5A1218 100%);
  --rar-foil-hi: rgba(255,226,222,.8);
  --rar-foil-lo: rgba(26,2,6,.95);
  --rar-plate: linear-gradient(180deg, #FF9A90, #FF3B3B 48%, #8A0010);
  --rar-plate-ink: #FFFFFF;
  --rar-plate-lo: rgba(40,0,8,.55);
  --rar-frame: linear-gradient(160deg, #1A0A0C 0%, #3A2E30 12%, #8A8486 22%, #E6E0E2 27%, #FF3B3B 36%, #B00020 46%, #1A0A0C 58%, #3A2E30 68%, #A8A2A4 80%, #FF3B3B 90%, #1A0A0C 100%);
  --rar-line: rgba(255,170,160,.9);
  --rar-sheen: linear-gradient(115deg, transparent 38%, rgba(255,59,59,.6) 46%, rgba(255,255,255,.9) 50%, rgba(255,59,59,.6) 54%, transparent 62%);
}
.role-panel.has-art.rar-UR.coat-F .rp-id svg, .seat.has-art.rar-UR.coat-F .s-emb svg, .rs-p.sar-skin.rar-UR.coat-F .rs-role svg, .rar-UR.coat-F .sar-nemb svg { stroke: url(#rar-foil-UR-F); }
.role-panel.has-art.rar-UR.coat-F .rp-id svg [fill]:not([fill="none"]), .seat.has-art.rar-UR.coat-F .s-emb svg [fill]:not([fill="none"]), .rar-UR.coat-F .sar-nemb svg [fill]:not([fill="none"]) { fill: url(#rar-foil-UR-F); }
.cn.sar.rar-UR[class*="coat-"] .sar-plate { text-shadow: none; }
/* the operator panel's UR outline follows the coating */
.role-panel.has-art.sk-UR:not(.skill-ready) { box-shadow: inset 0 0 0 1.5px var(--rar-edge-a), 0 0 18px -4px var(--rar-edge); }

/* ---------- compositor-only loops ----------
   Sheens and scan lines used to animate background-position or top: the browser repainted the whole
   card (mask, foil text, shadows) or re-laid out the page on every frame, which made floating cards
   stutter. The same looks are now a gradient layer that only moves (transform), handled by the GPU. */
@keyframes sheen-x { from { transform: translate3d(-66.667%, 0, 0); } to { transform: translate3d(106.667%, 0, 0); } }
.sar-frame::after, .rp-art-frame::after, .gc-cc-frame::after {
  inset: 0 auto 0 0; width: 300%; border-radius: 0; background: var(--rar-sheen) 0 0 / 100% 100% no-repeat;
  animation: sheen-x 5.5s linear infinite; will-change: transform; }
/* scan lines: a band that slides down */
.gc-scan { top: 0; transform: translate3d(0, -100%, 0); animation: scan-y 4s linear infinite; will-change: transform; }
.gc-banner.dive .gc-scan { animation: scan-y .7s linear 3; }
@keyframes scan-y { from { transform: translate3d(0, -100%, 0); } to { transform: translate3d(0, 250%, 0); } }
.lb-scan { top: 0; transform: translate3d(0, -100%, 0); animation: scan-y30 7s linear infinite; will-change: transform; }
@keyframes scan-y30 { from { transform: translate3d(0, -100%, 0); } to { transform: translate3d(0, 333.4%, 0); } }
/* button sheens: a light band that crosses, then waits */
.gc2 .gc-btn:not(:disabled)::after, .lb-go.main::after { inset: 0 auto 0 0; width: 40%; background-size: 100% 100%; background-position: 0 0;
  background-image: linear-gradient(115deg, transparent 10%, rgba(255,255,255,.2) 50%, transparent 90%); transform: translate3d(-120%, 0, 0); will-change: transform; }
.lb-go.main::after { background-image: linear-gradient(115deg, transparent 10%, rgba(255,255,255,.7) 50%, transparent 90%); }
.gc2 .gc-btn:not(:disabled)::after { animation: btn-sheen 3.2s ease-in-out infinite; }
.lb-go.main::after { animation: btn-sheen 4.5s ease-in-out infinite; }
@keyframes btn-sheen { 0% { transform: translate3d(-120%, 0, 0); } 60%, 100% { transform: translate3d(320%, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  .sar-frame::after, .rp-art-frame::after, .gc-cc-frame::after, .gc-scan, .lb-scan, .gc2 .gc-btn::after, .lb-go.main::after { animation: none; } }
/* the foil shimmer on names repaints its own text every frame: on a layer of its own it never makes the rest of the card repaint */
.cn.sar .sar-foil { will-change: transform; transform: translateZ(0); }

/* ---------- the operator's emblem before the name (card faces and nameTag), in the rarity's foil ---------- */
.sar-ncol { display: flex; flex-direction: column; align-items: center; gap: calc(.8 * var(--mm)); }
.sar-ncol .sar-nemb { width: calc(5.4 * var(--mm)); height: calc(5.4 * var(--mm)); }
.sar-nt.sar-skin { display: inline-flex; flex-direction: row; align-items: center; gap: .32em; vertical-align: middle; max-width: 100%;
  font-size: inherit; letter-spacing: inherit; color: inherit; text-shadow: none; position: static;
  border: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.sar-nemb { display: inline-flex; flex: none; width: 1em; height: 1em; }
.sar-nemb svg { width: 100%; height: 100%; overflow: visible; stroke: url(#rar-foil-SAR);
  filter: drop-shadow(0 1px 0 var(--rar-foil-lo)) drop-shadow(0 0 3px rgba(0,0,0,.55)); }
.sar-nemb svg [fill]:not([fill="none"]) { fill: url(#rar-foil-SAR); }
.sar-nt .sar-nt-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: inherit;
  background: var(--rar-foil); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 var(--rar-foil-lo)); animation: sar-sheen 6s linear infinite; text-shadow: none; }
.rar-UR .sar-nemb svg { stroke: url(#rar-foil-UR); }
.rar-UR .sar-nemb svg [fill]:not([fill="none"]) { fill: url(#rar-foil-UR); }
.rar-UR.coat-B .sar-nemb svg { stroke: url(#rar-foil-UR-B); } .rar-UR.coat-B .sar-nemb svg [fill]:not([fill="none"]) { fill: url(#rar-foil-UR-B); }
.rar-UR.coat-C .sar-nemb svg { stroke: url(#rar-foil-UR-C); } .rar-UR.coat-C .sar-nemb svg [fill]:not([fill="none"]) { fill: url(#rar-foil-UR-C); }
.rar-UR.coat-D .sar-nemb svg { stroke: url(#rar-foil-UR-D); } .rar-UR.coat-D .sar-nemb svg [fill]:not([fill="none"]) { fill: url(#rar-foil-UR-D); }
.rar-UR.coat-E .sar-nemb svg { stroke: url(#rar-foil-UR-E); } .rar-UR.coat-E .sar-nemb svg [fill]:not([fill="none"]) { fill: url(#rar-foil-UR-E); }
@media (prefers-reduced-motion: reduce) { .sar-nt .sar-nt-n { animation: none; } }

/* ---------- SAR coatings ----------
   A SAR card can be coated too (its own unlock, separate from the operator's UR). It keeps the Soul Archive
   look (pearl and ivory highlights, soft metal) in the coating's colour. A (no class) is the gold factory finish. */
/* B: Cold Chrome */
.cn.sar.rar-SAR.coat-B, .sar-skin.rar-SAR.coat-B {
  --rar-edge: #A8DAF5; --rar-edge-a: rgba(168,218,245,.55); --rar-deep: rgba(6,18,30,.9);
  --rar-foil: linear-gradient(115deg, #6F8BA4 0%, #BFD9EC 22%, #FFF8EC 30%, #A8DAF5 42%, #6F9CC4 58%, #D6E6F2 76%, #FFF8EC 84%, #8DB4D4 100%);
  --rar-foil-hi: rgba(255,250,236,.75); --rar-foil-lo: rgba(6,18,30,.95);
  --rar-plate: linear-gradient(180deg, #FFF8EC, #A8DAF5 45%, #6F9CC4); --rar-plate-ink: #0E1824; --rar-plate-lo: rgba(6,18,30,.5);
  --rar-frame: linear-gradient(160deg, #6F8BA4 0%, #BFD9EC 14%, #FFF8EC 22%, #A8DAF5 34%, #6F9CC4 46%, #D6E6F2 60%, #FFF8EC 72%, #8DB4D4 86%, #6F8BA4 100%);
  --rar-line: rgba(255,248,236,.85);
  --rar-sheen: linear-gradient(115deg, transparent 40%, rgba(168,218,245,.55) 48%, rgba(255,255,255,.95) 50%, rgba(168,218,245,.55) 52%, transparent 60%);
}
.role-panel.has-art.rar-SAR.coat-B .rp-id svg, .seat.has-art.rar-SAR.coat-B .s-emb svg, .rs-p.sar-skin.rar-SAR.coat-B .rs-role svg, .rar-SAR.coat-B .sar-nemb svg { stroke: url(#rar-foil-SAR-B); }
.role-panel.has-art.rar-SAR.coat-B .rp-id svg [fill]:not([fill="none"]), .seat.has-art.rar-SAR.coat-B .s-emb svg [fill]:not([fill="none"]), .rar-SAR.coat-B .sar-nemb svg [fill]:not([fill="none"]) { fill: url(#rar-foil-SAR-B); }
/* C: Violet Zero-Day */
.cn.sar.rar-SAR.coat-C, .sar-skin.rar-SAR.coat-C {
  --rar-edge: #B7A0F0; --rar-edge-a: rgba(183,160,240,.55); --rar-deep: rgba(16,8,32,.9);
  --rar-foil: linear-gradient(115deg, #6C5C98 0%, #CDBDF5 22%, #FFF8EC 30%, #B7A0F0 42%, #7A5CC8 58%, #DCD0F7 76%, #FFF8EC 84%, #9E86DE 100%);
  --rar-foil-hi: rgba(255,250,236,.75); --rar-foil-lo: rgba(16,8,32,.95);
  --rar-plate: linear-gradient(180deg, #FFF8EC, #B7A0F0 45%, #7A5CC8); --rar-plate-ink: #140E24; --rar-plate-lo: rgba(16,8,32,.5);
  --rar-frame: linear-gradient(160deg, #6C5C98 0%, #CDBDF5 14%, #FFF8EC 22%, #B7A0F0 34%, #7A5CC8 46%, #DCD0F7 60%, #FFF8EC 72%, #9E86DE 86%, #6C5C98 100%);
  --rar-line: rgba(255,248,236,.85);
  --rar-sheen: linear-gradient(115deg, transparent 40%, rgba(183,160,240,.55) 48%, rgba(255,255,255,.95) 50%, rgba(183,160,240,.55) 52%, transparent 60%);
}
.role-panel.has-art.rar-SAR.coat-C .rp-id svg, .seat.has-art.rar-SAR.coat-C .s-emb svg, .rs-p.sar-skin.rar-SAR.coat-C .rs-role svg, .rar-SAR.coat-C .sar-nemb svg { stroke: url(#rar-foil-SAR-C); }
.role-panel.has-art.rar-SAR.coat-C .rp-id svg [fill]:not([fill="none"]), .seat.has-art.rar-SAR.coat-C .s-emb svg [fill]:not([fill="none"]), .rar-SAR.coat-C .sar-nemb svg [fill]:not([fill="none"]) { fill: url(#rar-foil-SAR-C); }
/* D: Prism Overflow */
.cn.sar.rar-SAR.coat-D, .sar-skin.rar-SAR.coat-D {
  --rar-edge: #A9E4F2; --rar-edge-a: rgba(169,228,242,.55); --rar-deep: rgba(4,22,24,.9);
  --rar-foil: linear-gradient(115deg, #5E8E8A 0%, #BDEDE0 22%, #FFF8EC 30%, #A9E4F2 42%, #AFA3EE 58%, #CDEFE6 76%, #FFF8EC 84%, #7FCDBE 100%);
  --rar-foil-hi: rgba(255,250,236,.75); --rar-foil-lo: rgba(4,22,24,.95);
  --rar-plate: linear-gradient(180deg, #FFF8EC, #A9E4F2 45%, #AFA3EE); --rar-plate-ink: #0C1A1C; --rar-plate-lo: rgba(4,22,24,.5);
  --rar-frame: linear-gradient(160deg, #5E8E8A 0%, #BDEDE0 14%, #FFF8EC 22%, #A9E4F2 34%, #AFA3EE 46%, #CDEFE6 60%, #FFF8EC 72%, #7FCDBE 86%, #5E8E8A 100%);
  --rar-line: rgba(255,248,236,.85);
  --rar-sheen: linear-gradient(115deg, transparent 40%, rgba(169,228,242,.55) 48%, rgba(255,255,255,.95) 50%, rgba(169,228,242,.55) 52%, transparent 60%);
}
.role-panel.has-art.rar-SAR.coat-D .rp-id svg, .seat.has-art.rar-SAR.coat-D .s-emb svg, .rs-p.sar-skin.rar-SAR.coat-D .rs-role svg, .rar-SAR.coat-D .sar-nemb svg { stroke: url(#rar-foil-SAR-D); }
.role-panel.has-art.rar-SAR.coat-D .rp-id svg [fill]:not([fill="none"]), .seat.has-art.rar-SAR.coat-D .s-emb svg [fill]:not([fill="none"]), .rar-SAR.coat-D .sar-nemb svg [fill]:not([fill="none"]) { fill: url(#rar-foil-SAR-D); }
/* E: Obsidian Virus */
.cn.sar.rar-SAR.coat-E, .sar-skin.rar-SAR.coat-E {
  --rar-edge: #9FDC86; --rar-edge-a: rgba(159,220,134,.5); --rar-deep: rgba(8,20,6,.9);
  --rar-foil: linear-gradient(115deg, #4E6A46 0%, #C3E9B2 22%, #FFF8EC 30%, #9FDC86 42%, #4E8C3E 58%, #D0EDC4 76%, #FFF8EC 84%, #86BC70 100%);
  --rar-foil-hi: rgba(255,250,236,.75); --rar-foil-lo: rgba(8,20,6,.95);
  --rar-plate: linear-gradient(180deg, #FFF8EC, #9FDC86 45%, #4E8C3E); --rar-plate-ink: #0E180C; --rar-plate-lo: rgba(8,20,6,.5);
  --rar-frame: linear-gradient(160deg, #4E6A46 0%, #C3E9B2 14%, #FFF8EC 22%, #9FDC86 34%, #4E8C3E 46%, #D0EDC4 60%, #FFF8EC 72%, #86BC70 86%, #4E6A46 100%);
  --rar-line: rgba(255,248,236,.85);
  --rar-sheen: linear-gradient(115deg, transparent 40%, rgba(159,220,134,.5) 48%, rgba(255,255,255,.95) 50%, rgba(159,220,134,.5) 52%, transparent 60%);
}
.role-panel.has-art.rar-SAR.coat-E .rp-id svg, .seat.has-art.rar-SAR.coat-E .s-emb svg, .rs-p.sar-skin.rar-SAR.coat-E .rs-role svg, .rar-SAR.coat-E .sar-nemb svg { stroke: url(#rar-foil-SAR-E); }
.role-panel.has-art.rar-SAR.coat-E .rp-id svg [fill]:not([fill="none"]), .seat.has-art.rar-SAR.coat-E .s-emb svg [fill]:not([fill="none"]), .rar-SAR.coat-E .sar-nemb svg [fill]:not([fill="none"]) { fill: url(#rar-foil-SAR-E); }
/* the operator panel's SAR outline follows the coating */
.role-panel.has-art.sk-SAR[class*="coat-"]:not(.skill-ready) { box-shadow: inset 0 0 0 1.5px var(--rar-edge-a), 0 0 18px -4px var(--rar-edge); }
/* F: Red Alert (SAR style: coral red in pearl and ivory) */
.cn.sar.rar-SAR.coat-F, .sar-skin.rar-SAR.coat-F {
  --rar-edge: #F2A0A0; --rar-edge-a: rgba(242,160,160,.55); --rar-deep: rgba(30,6,6,.9);
  --rar-foil: linear-gradient(115deg, #8E4A48 0%, #F2C4C0 22%, #FFF8EC 30%, #F2A0A0 42%, #C0504A 58%, #F5D6D2 76%, #FFF8EC 84%, #D88A84 100%);
  --rar-foil-hi: rgba(255,250,236,.75); --rar-foil-lo: rgba(30,6,6,.95);
  --rar-plate: linear-gradient(180deg, #FFF8EC, #F2A0A0 45%, #C0504A); --rar-plate-ink: #1E0C0C; --rar-plate-lo: rgba(30,6,6,.5);
  --rar-frame: linear-gradient(160deg, #8E4A48 0%, #F2C4C0 14%, #FFF8EC 22%, #F2A0A0 34%, #C0504A 46%, #F5D6D2 60%, #FFF8EC 72%, #D88A84 86%, #8E4A48 100%);
  --rar-line: rgba(255,248,236,.85);
  --rar-sheen: linear-gradient(115deg, transparent 40%, rgba(242,160,160,.55) 48%, rgba(255,255,255,.95) 50%, rgba(242,160,160,.55) 52%, transparent 60%);
}
.role-panel.has-art.rar-SAR.coat-F .rp-id svg, .seat.has-art.rar-SAR.coat-F .s-emb svg, .rs-p.sar-skin.rar-SAR.coat-F .rs-role svg, .rar-SAR.coat-F .sar-nemb svg { stroke: url(#rar-foil-SAR-F); }
.role-panel.has-art.rar-SAR.coat-F .rp-id svg [fill]:not([fill="none"]), .seat.has-art.rar-SAR.coat-F .s-emb svg [fill]:not([fill="none"]), .rar-SAR.coat-F .sar-nemb svg [fill]:not([fill="none"]) { fill: url(#rar-foil-SAR-F); }