/* Shared PlayStyle visual primitive, extracted from equipment.css.
   generate.cjs share also exports these tokens for Canvas; edit values here. */
/* BEGIN PLAYSTYLE STICKER TOKENS */
:root {
  --ps-sticker-size: 62px;
  --ps-sticker-frame-inset: 3px;
  --ps-sticker-core-inset: 10px;
  --ps-sticker-icon-size: 32px;
  --ps-sticker-icon16-offset: 2px;
  --ps-sticker-angle: -1deg;
  --ps-sticker-even-angle: 1deg;
  --ps-sticker-third-angle: -.75deg;
  --ps-sticker-edge-color: #ece5d7;
  --ps-sticker-gold-frame: #B58B31;
  --ps-sticker-gold-highlight: #E3C367;
  --ps-sticker-gold-shadow: #74551F;
  --ps-sticker-gold-core: #211D16;
  --ps-sticker-silver-frame: #A7A8A4;
  --ps-sticker-silver-highlight: #D7D8D4;
  --ps-sticker-silver-shadow: #686A68;
  --ps-sticker-silver-core: #222423;
  --ps-sticker-gold-cut: polygon(13% 5%,34% 2%,56% 4%,86% 2%,98% 39%,96% 46%,53% 98%,48% 96%,3% 46%,2% 39%);
  --ps-sticker-gold-frame-cut: polygon(13% 4%,35% 2%,57% 4%,87% 3%,98% 41%,95% 46%,52% 99%,48% 97%,2% 44%,3% 39%);
  --ps-sticker-gold-core-cut: polygon(14% 5%,85% 3%,97% 42%,51% 98%,3% 43%);
  --ps-sticker-silver-cut: polygon(48% 2%,53% 1%,98% 47%,99% 52%,54% 98%,48% 99%,2% 55%,1% 49%);
  --ps-sticker-silver-frame-cut: polygon(48% 1%,53% 2%,99% 48%,98% 53%,53% 99%,47% 98%,1% 53%,2% 48%);
  --ps-sticker-silver-core-cut: polygon(49% 1%,99% 49%,51% 99%,1% 51%);
  --ps-sticker-label-cut: polygon(1% 8%,17% 2%,35% 5%,54% 1%,73% 4%,99% 2%,98% 31%,100% 58%,97% 95%,82% 92%,66% 98%,49% 94%,30% 100%,14% 95%,1% 98%,3% 70%,0 44%);
  --ps-sticker-label-width: 66px;
  --ps-sticker-label-min-height: 18px;
  --ps-sticker-label-overlap: 13px;
  --ps-sticker-label-padding-x: 6px;
  --ps-sticker-label-padding-y: 3px;
  --ps-sticker-label-font-size: 11.5px;
  --ps-sticker-label-font-weight: 900;
  --ps-sticker-label-font-family: 'Noto Sans KR','Malgun Gothic',sans-serif;
  --ps-sticker-label-line-height: 1.25;
  --ps-sticker-label-angle-ratio: .35;
  --ps-sticker-label-paper: var(--paper-raised, #FFFDF8);
  --ps-sticker-label-ink: var(--ink, #252B2D);
  --ps-sticker-label-gold-fill: var(--highlighter-yellow-soft, rgba(243,230,129,.55));
  --ps-sticker-label-border: rgba(67,64,58,.135);
  --ps-sticker-shadow: rgba(46,37,26,.24);
  --ps-sticker-shadow-y: 3px;
  --ps-sticker-shadow-blur: 2px;
  --ps-sticker-core-edge-color: rgba(255,255,255,.1);
  --ps-sticker-core-edge-width: 1px;
  --ps-sticker-core-shadow-color: rgba(0,0,0,.38);
  --ps-sticker-core-shadow-x: 2px;
  --ps-sticker-core-shadow-y: 3px;
  --ps-sticker-core-shadow-blur: 5px;
  --ps-sticker-icon-filter: brightness(0) invert(1) drop-shadow(0 1px 0 rgba(0,0,0,.45));
  --ps-sticker-label-shadow: rgba(59,48,33,.22);
  --ps-sticker-label-shadow-y: 3px;
  --ps-sticker-label-shadow-blur: 3px;
  --ps-sticker-frame-stop1: 22%;
  --ps-sticker-frame-stop2: 44%;
  --ps-sticker-frame-stop3: 69%;
  --ps-sticker-label-mark-start: 46%;
  --ps-sticker-label-mark-end: 88%;
}
/* END PLAYSTYLE STICKER TOKENS */

.ps-sticker {
  --ps-visual-angle: var(--ps-sticker-angle);
  --ps-visual-frame: var(--ps-sticker-silver-frame);
  --ps-visual-highlight: var(--ps-sticker-silver-highlight);
  --ps-visual-shadow: var(--ps-sticker-silver-shadow);
  --ps-visual-core: var(--ps-sticker-silver-core);
  --ps-visual-cut: var(--ps-sticker-silver-cut);
  --ps-visual-frame-cut: var(--ps-sticker-silver-frame-cut);
  --ps-visual-core-cut: var(--ps-sticker-silver-core-cut);
  --ps-visual-label-fill: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.ps-sticker:nth-child(2n) { --ps-visual-angle: var(--ps-sticker-even-angle); }
.ps-sticker:nth-child(3n) { --ps-visual-angle: var(--ps-sticker-third-angle); }
.ps-sticker.ps-gold {
  --ps-visual-frame: var(--ps-sticker-gold-frame);
  --ps-visual-highlight: var(--ps-sticker-gold-highlight);
  --ps-visual-shadow: var(--ps-sticker-gold-shadow);
  --ps-visual-core: var(--ps-sticker-gold-core);
  --ps-visual-cut: var(--ps-sticker-gold-cut);
  --ps-visual-frame-cut: var(--ps-sticker-gold-frame-cut);
  --ps-visual-core-cut: var(--ps-sticker-gold-core-cut);
  --ps-visual-label-fill: var(--ps-sticker-label-gold-fill);
}

.ps-sticker-emblem {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--ps-sticker-display-size,var(--ps-sticker-size));
  height: var(--ps-sticker-display-size,var(--ps-sticker-size));
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--ps-sticker-edge-color) var(--paper-grain);
  clip-path: var(--ps-visual-cut);
  transform: rotate(var(--ps-visual-angle));
  filter: drop-shadow(0 var(--ps-sticker-shadow-y) var(--ps-sticker-shadow-blur) var(--ps-sticker-shadow));
}
.ps-sticker-emblem::before,
.ps-sticker-emblem::after {
  position: absolute;
  display: block;
  content: '';
  pointer-events: none;
}
.ps-sticker-emblem::before {
  inset: var(--ps-sticker-frame-inset);
  z-index: 0;
  clip-path: var(--ps-visual-frame-cut);
  background: linear-gradient(135deg,var(--ps-visual-highlight) 0 var(--ps-sticker-frame-stop1),var(--ps-visual-frame) var(--ps-sticker-frame-stop2) var(--ps-sticker-frame-stop3),var(--ps-visual-shadow) 100%);
}
.ps-sticker-emblem::after {
  inset: var(--ps-sticker-display-core-inset,var(--ps-sticker-core-inset));
  z-index: 1;
  clip-path: var(--ps-visual-core-cut);
  background: var(--ps-visual-core);
  box-shadow: inset 0 0 0 var(--ps-sticker-core-edge-width) var(--ps-sticker-core-edge-color),inset var(--ps-sticker-core-shadow-x) var(--ps-sticker-core-shadow-y) var(--ps-sticker-core-shadow-blur) var(--ps-sticker-core-shadow-color);
}
.ps-sticker-emblem :is(img,svg) {
  position: relative;
  z-index: 2;
  width: var(--ps-sticker-display-icon-size,var(--ps-sticker-icon-size));
  height: var(--ps-sticker-display-icon-size,var(--ps-sticker-icon-size));
  padding: 0;
  object-fit: contain;
  transform: none;
  filter: var(--ps-sticker-icon-filter);
}
.ps-sticker-emblem img[src$="icontrait16.png"] { transform: translateY(var(--ps-sticker-icon16-offset)); }

.ps-sticker-label {
  position: relative;
  z-index: 4;
  display: var(--ps-sticker-label-display,block);
  box-sizing: border-box;
  width: var(--ps-sticker-display-label-width,var(--ps-sticker-label-width));
  min-width: var(--ps-sticker-display-label-min-width,0);
  max-width: 100%;
  min-height: var(--ps-sticker-display-label-min-height,var(--ps-sticker-label-min-height));
  margin-top: calc(-1 * var(--ps-sticker-display-label-overlap,var(--ps-sticker-label-overlap)));
  padding: var(--ps-sticker-display-label-padding-y,var(--ps-sticker-label-padding-y)) var(--ps-sticker-display-label-padding-x,var(--ps-sticker-label-padding-x));
  border: 1px solid var(--ps-sticker-label-border);
  border-radius: 2px;
  background: linear-gradient(transparent var(--ps-sticker-label-mark-start),var(--ps-visual-label-fill) var(--ps-sticker-label-mark-start) var(--ps-sticker-label-mark-end),transparent var(--ps-sticker-label-mark-end)),var(--paper-grain),linear-gradient(var(--ps-visual-label-fill),var(--ps-visual-label-fill)),var(--ps-sticker-label-paper);
  color: var(--ps-sticker-label-ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.65),0 var(--ps-sticker-label-shadow-y) var(--ps-sticker-label-shadow-blur) var(--ps-sticker-label-shadow);
  font: var(--ps-sticker-label-font-weight) var(--ps-sticker-display-label-font-size,var(--ps-sticker-label-font-size))/var(--ps-sticker-label-line-height) var(--ps-sticker-label-font-family);
  text-align: center;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
  clip-path: var(--ps-sticker-label-cut);
  transform: rotate(calc(var(--ps-visual-angle) * var(--ps-sticker-label-angle-ratio)));
}