/* ================================================================ Bunk Card (OpCard component) · W5
   Everything inside the card is sized in em: the card's font-size is its width / 28, so a 280px card has 1em = 10px
   and every size (hero / mini / locked) is the same card scaled. Only transform and opacity animate. The flip rotates
   each face on its own (no preserve-3d) and swaps visibility at the half-way point, so composited children can never
   bleed through a back-facing face (WebKit). Tilt, foil and glare are driven by opcard.js mount(); they are off under
   reduced motion and html.lowpower. */

.op-card {
  /* Bunk Classic is brushed steel inside the card (base.css [data-tier="classic"] resolves --tier from this);
     matches OpCard.tier('classic').color in opcard.js */
  --tier-classic: #A9BAC6;
  --metal-classic: linear-gradient(135deg, #E4EBF1 0%, #7D8A95 28%, #39424A 50%, #7D8A95 72%, #E4EBF1 100%);
  --cw: 280px;
  --oc-oct: polygon(2.8em 0, calc(100% - 1em) 0, 100% 1em, 100% calc(100% - 2.8em), calc(100% - 2.8em) 100%, 1em 100%, 0 calc(100% - 1em), 0 2.8em);
  --oc-oct-in: polygon(2.62em 0, calc(100% - .82em) 0, 100% .82em, 100% calc(100% - 2.62em), calc(100% - 2.62em) 100%, .82em 100%, 0 calc(100% - .82em), 0 2.62em);
  --oc-line: rgba(237, 230, 211, .1);
  --holo-idle: .06;
  --holo-on: .34;
  position: relative;
  isolation: isolate;
  display: block;
  flex: none;
  width: var(--cw);
  height: calc(var(--cw) * 1.4); /* aspect 3 / 4.2 without relying on aspect-ratio */
  font-size: calc(var(--cw) / 28);
  line-height: 1;
  color: var(--bone);
  text-align: left;
  touch-action: pan-y; /* horizontal drags tilt, vertical swipes still scroll the page */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.op-card[data-tier="uncommon"] { --holo-idle: .08; --holo-on: .42; }
.op-card[data-tier="rare"] { --holo-idle: .1; --holo-on: .52; }

/* sizes */
.op-card[data-size="hero"] { --cw: max(200px, min(280px, 76vw, calc((100vh - 220px) / 1.4))); }
@supports (height: 100svh) {
  .op-card[data-size="hero"] { --cw: max(200px, min(280px, 76vw, calc((100svh - 220px) / 1.4))); }
}
@media (min-width: 600px) { .op-card[data-size="hero"] { --cw: 320px; } }
@media (min-width: 1100px) and (min-height: 860px) { .op-card[data-size="hero"] { --cw: 360px; } }
.op-card[data-size="mini"] { --cw: 180px; }
@media (min-width: 400px) { .op-card[data-size="mini"] { --cw: 200px; } }
.op-card[data-size="locked"] { --cw: 240px; }
@media (min-width: 900px) { .op-card[data-size="locked"] { --cw: 300px; } }

/* floor shadow + tier aura (static; never animated) */
.op-card::before {
  content: '';
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -5%;
  height: 10%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.oc-aura {
  position: absolute;
  left: -22%;
  right: -22%;
  top: -12%;
  bottom: -12%;
  z-index: -2;
  background: radial-gradient(closest-side, var(--tier), rgba(0, 0, 0, 0));
  opacity: .14;
  pointer-events: none;
}
.op-card[data-tier="uncommon"] .oc-aura { opacity: .18; }
.op-card[data-tier="rare"] .oc-aura { opacity: .22; }
.op-card[data-size="locked"] .oc-aura { left: -8%; right: -8%; opacity: .1; }
.op-card[data-size="mini"] .oc-aura { display: none; }

/* ---------------------------------------------------------------- 3D structure */
.oc-tilt {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  transition: transform .4s var(--e-out);
}
.oc-flip { position: absolute; inset: 0; perspective: 1400px; }
.oc-face, .oc-back {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: rotateY(0deg);
  transition: transform 600ms var(--e-inout), visibility 0s linear 300ms;
}
.oc-back { visibility: hidden; transform: rotateY(180deg); }
.op-card.flipped .oc-face { visibility: hidden; transform: rotateY(-180deg); }
.op-card.flipped .oc-back { visibility: visible; transform: rotateY(0deg); }
/* while opcard.js eases the tilt frame by frame, transforms must not also transition; opacity still fades */
.op-card.dragging .oc-tilt,
.op-card.dragging .oc-art { transition: none; }
.op-card.dragging .oc-holo,
.op-card.dragging .oc-glare { transition-property: opacity; }
/* flip lift: one-shot, rises to 1.06 at the half-way point of the 600ms flip */
.op-card.flipping .oc-flip { animation: oc-lift 600ms var(--e-inout) both; }
html.lowpower .op-card.flipping .oc-flip { animation: none; }

/* ---------------------------------------------------------------- frame (metal) + body */
.oc-frame { position: absolute; inset: 0; clip-path: var(--oc-oct); background: #4A524D; }
.oc-m { position: absolute; inset: 0; opacity: 0; transition: opacity 600ms var(--e-out); }
.oc-m::after { /* brushed foil grain over the metal */
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .1) 0 1px, rgba(255, 255, 255, 0) 1px 3px);
}
.m-classic { background: var(--metal-classic); }
.m-uncommon { background: var(--metal-uncommon); }
.m-rare { background: var(--metal-rare); }
.op-card:not([data-tier]) .m-classic,
.op-card[data-tier="classic"] .m-classic,
.op-card[data-tier="uncommon"] .m-uncommon,
.op-card[data-tier="rare"] .m-rare { opacity: 1; }
html.lowpower .oc-m { transition: none; }

.oc-body {
  position: absolute;
  inset: .3em;
  overflow: hidden;
  clip-path: var(--oc-oct-in);
  background: linear-gradient(180deg, #141B18 0%, #07090A 100%);
}
.oc-body > i { position: absolute; display: block; pointer-events: none; }
/* tier sunburst behind the patch (static), centred on the patch (card 14em, 11.6em = body 13.7em, 11.3em) */
.oc-rays {
  left: 50%;
  width: 44em;
  margin-left: -22em;
  top: -6.7em;
  height: 36em;
  background: repeating-conic-gradient(from 0deg at 50% 50%, var(--tier) 0deg 2deg, rgba(0, 0, 0, 0) 2deg 15deg);
  opacity: .07;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(closest-side, #000 30%, rgba(0, 0, 0, 0) 100%);
}
.oc-glow {
  left: 50%;
  width: 30em;
  margin-left: -15em;
  top: -1.7em;
  height: 26em;
  background: radial-gradient(closest-side, var(--pc), rgba(0, 0, 0, 0)); /* not var(--glow-pc): that resolves --pc at :root */
  opacity: .45;
}
/* etched micro-lines + a top bevel light */
.oc-tex {
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 18%),
    repeating-linear-gradient(-35deg, rgba(237, 230, 211, .028) 0 1px, rgba(237, 230, 211, 0) 1px 6px);
}
/* holo foil: a rainbow band that follows the pointer; faint at rest */
.oc-holo {
  top: 0;
  bottom: 0;
  left: 0;
  width: 300%;
  background: linear-gradient(105deg,
    rgba(255, 255, 255, 0) 30%, rgba(255, 92, 196, .55) 40%, rgba(94, 230, 208, .55) 47%,
    rgba(255, 213, 79, .55) 54%, rgba(61, 184, 255, .5) 60%, rgba(255, 255, 255, 0) 70%);
  opacity: var(--holo-idle);
  transform: translateX(-33.3%);
  transition: opacity .3s var(--e-out), transform .4s var(--e-out);
}
.op-card.tilting .oc-holo { opacity: var(--holo-on); }
/* idle sheen: 300%-wide band, -66% to 0 over 6s alternate (paused off-screen by [data-loop]) */
.oc-sheen {
  top: 0;
  bottom: 0;
  left: 0;
  width: 300%;
  background: var(--sheen);
  mix-blend-mode: screen;
  transform: translateX(-66.7%);
  transition: transform .4s var(--e-out);
}
.op-card[data-size="hero"] .oc-sheen,
.op-card[data-size="locked"] .oc-sheen { animation: oc-sheen 6s ease-in-out infinite alternate; }
.op-card:not(.flipped) .oc-back .oc-sheen,
.op-card.flipped .oc-face .oc-sheen { animation: none; } /* only the visible face loops: hero stays at 2 loops */
/* pointer glare spot */
.oc-glare {
  left: -30%;
  top: -30%;
  width: 160%;
  height: 160%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .3), rgba(255, 255, 255, .06) 22%, rgba(255, 255, 255, 0) 40%);
  opacity: 0;
  transition: opacity .3s var(--e-out), transform .4s var(--e-out);
}
.op-card.tilting .oc-glare { opacity: 1; }
/* one-shot sweep (reveal + revisit) */
.oc-sweep {
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 70%;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, .34) 48%, rgba(255, 255, 255, .08) 56%, rgba(255, 255, 255, 0) 80%);
  transform: translateX(-110%);
}
.op-card.oc-sweeping .oc-sweep { animation: oc-sweep 900ms var(--e-out) 1 both; }

html.lowpower .oc-sheen { mix-blend-mode: normal; opacity: .5; animation: none !important; } /* no idle loop on low-power devices */
html.lowpower .oc-holo, html.lowpower .oc-glare { display: none; }

/* hairline + bone brackets (svg, non-scaling strokes) */
.oc-deco { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.oc-deco .oc-hair { fill: none; stroke: var(--tier); stroke-opacity: .42; stroke-width: 1; vector-effect: non-scaling-stroke; }
.oc-deco .oc-brk { fill: none; stroke: var(--bone); stroke-width: 2; stroke-linecap: square; vector-effect: non-scaling-stroke; }
.oc-deco .oc-tick { fill: none; stroke: var(--tier); stroke-width: 2; vector-effect: non-scaling-stroke; }

/* ---------------------------------------------------------------- patch in its lock-on ring
   The story card's composition: the embroidered disc (about 90% of the 17.6em art box) is centred at (14em, 11.6em)
   inside a thin tier ring, with the OVR column clear on the left and the tier chip + Enneagram hex in their own
   column on the right. */
.oc-art {
  position: absolute;
  z-index: 3;
  left: 5.2em;
  top: 2.8em;
  width: 17.6em;
  height: 17.6em;
  background-position: 50% 50%; /* opcard.js puts the 192px patch here while the hero art loads */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transition: transform .4s var(--e-out);
  pointer-events: none;
}
.oc-art.is-loaded { background-image: none !important; }
/* archetype-colour wash right behind the patch, so even the steel tier carries the archetype's colour */
.oc-art::before {
  content: '';
  position: absolute;
  left: -14%;
  right: -14%;
  top: -14%;
  bottom: -14%;
  background: radial-gradient(closest-side, var(--pc), rgba(0, 0, 0, 0)); /* not var(--glow-pc): that resolves --pc at :root */
  opacity: .3;
}
.oc-ring { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.oc-ring circle, .oc-ring path { fill: none; stroke: var(--tier); }
.oc-ring-o { stroke-opacity: .35; stroke-width: 1; vector-effect: non-scaling-stroke; }
.oc-ring-a { stroke-opacity: .85; stroke-width: 2.4; stroke-dasharray: 38.01 117.5; stroke-dashoffset: -58.75; }
.oc-ring-t { stroke-opacity: .6; stroke-width: 2.4; }
.oc-patch {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
  transition: opacity 200ms var(--e-out);
}
.oc-art.is-loading .oc-patch { opacity: 0; }
.oc-shadow {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: .2em;
  height: 3.2em;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0));
}
.op-card[data-size="hero"] .oc-patch { animation: fx-float 4s ease-in-out infinite alternate; }
html.lowpower .op-card .oc-patch { animation: none; }
.op-card.is-locked .oc-patch { opacity: .92; }

/* ---------------------------------------------------------------- top: OVR readout + tier chip / hex */
.oc-top {
  position: absolute;
  z-index: 5;
  top: 1.3em;
  left: 1.3em;
  right: 1.3em;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
}
/* the OVR column sits clear of the patch now, so no backing plate: just the tier bar, the hairline and a soft shadow */
.oc-rate {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 6.6em;
  padding: .55em .9em .6em .6em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
}
.oc-rate::before { content: ''; position: absolute; left: 0; width: 72%; top: 0; height: .25em; background: var(--tier); }
.oc-rate::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, var(--tier), rgba(0, 0, 0, 0)); opacity: .6; }
.oc-ovr {
  display: block;
  min-width: 2ch;
  font: 400 5.6em/.86 var(--f-display);
  font-synthesis: none;
  letter-spacing: .005em;
  text-align: left;
  font-variant-numeric: tabular-nums;
  color: var(--bone);
}
.oc-ovr-l { margin-top: .25em; font: 700 1.2em/1 var(--f-hud); letter-spacing: .2em; padding-left: .05em; color: var(--dust); }
.oc-holland {
  margin-top: .45em;
  padding-top: .4em;
  border-top: 1px solid var(--line-2);
  font: 700 1.6em/1 var(--f-hud);
  text-shadow: none;
  letter-spacing: .08em;
  color: var(--tier);
}
.oc-badges { display: flex; flex-direction: column; align-items: flex-end; gap: .6em; }
.op-card .oc-tier { min-height: 2.1em; padding: 0 .75em; font-size: 1.2em; letter-spacing: .14em; }
.op-card .oc-hex { --hx: 2.86em; font-size: 1.4em; }
.op-card.is-sealed .oc-tier::before { background: var(--metal-classic); }

/* ---------------------------------------------------------------- bottom: nameplate + stat row */
.oc-bot { position: absolute; z-index: 5; left: 1.2em; right: 1.2em; bottom: 1.25em; pointer-events: none; }
.oc-plate { position: relative; padding: 0 .2em .8em; }
/* nameplate: 'CALLSIGN' + the ORD chip on one line, the callsign itself on its own full-width line below, so a
   real name (ZHI XUAN, MUHAMMAD) is never squeezed into an ellipsis by the two labels */
.oc-plate-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "micro ord" "name name";
  align-items: center;
  column-gap: .6em;
  row-gap: .3em;
  min-width: 0;
}
.oc-micro { grid-area: micro; min-width: 0; font: 600 1.1em/1 var(--f-hud); letter-spacing: .22em; color: var(--dim); }
.oc-name {
  grid-area: name;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 700 1.5em/1.15 var(--f-hud);
  letter-spacing: .14em;
  color: var(--bone);
}
.oc-ord {
  grid-area: ord;
  justify-self: end;
  padding: .35em .5em .3em;
  border: 1px solid var(--line-2);
  background: rgba(237, 230, 211, .05);
  font: 700 1.1em/1 var(--f-hud);
  letter-spacing: .12em;
  color: var(--dim);
  white-space: nowrap;
}
.oc-ord b { color: var(--bone); font-weight: 700; }
/* screenshot sizes keep their micro labels at 11px or more (the mini card is a thumbnail and stays em-scaled) */
.op-card[data-size="hero"] .oc-micro, .op-card[data-size="hero"] .oc-ord, .op-card[data-size="hero"] .oc-stat .oc-code,
.op-card[data-size="locked"] .oc-micro, .op-card[data-size="locked"] .oc-ord, .op-card[data-size="locked"] .oc-stat .oc-code,
.op-card[data-size="hero"] .oc-tag-l, .op-card[data-size="hero"] .oc-bk-ratio { font-size: max(11px, 1.1em); }
.op-card[data-size="hero"] .oc-micro, .op-card[data-size="hero"] .oc-ord { color: var(--dust); }
.oc-arch {
  display: block;
  margin-top: .3em;
  overflow: hidden;
  white-space: nowrap;
  font: 400 3.2em/1.02 var(--f-display);
  font-synthesis: none;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--bone);
}
.oc-flavor {
  display: -webkit-box;
  margin-top: .45em;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font: italic 500 1.2em/1.3 var(--f-body);
  color: var(--dust);
}
.oc-stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: .75em 0 .7em;
  background: linear-gradient(180deg, rgba(7, 9, 10, .74), rgba(7, 9, 10, .5));
  border-top: 1px solid var(--line-2);
}
.oc-stats::before { /* tier rule along the top of the stat row */
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  width: 30%;
  height: 2px;
  background: var(--tier);
}
.oc-stat { display: flex; flex-direction: column; align-items: center; gap: .32em; min-width: 0; }
.oc-stat + .oc-stat { border-left: 1px solid var(--line); }
.oc-v {
  display: block;
  min-width: 2ch;
  font: 400 2.4em/1 var(--f-display);
  font-synthesis: none;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--bone);
}
.oc-stat.top .oc-v { color: var(--tier); }
.oc-code { font: 700 1.1em/1 var(--f-hud); letter-spacing: .14em; padding-left: .14em; color: var(--dust); }
.oc-bar { position: relative; display: block; width: 58%; height: .22em; background: var(--steel); overflow: hidden; }
.oc-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--dust);
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  transition: transform 800ms var(--e-gauge) calc(var(--i, 0) * 60ms);
}
.oc-stat.top .oc-bar::after { background: var(--tier); }
.op-card.is-sealed .oc-bar::after { transform: scaleX(0); }
.op-card.is-sealed .oc-v, .op-card.is-sealed .oc-ovr { color: var(--dim); }
.oc-foot { margin-top: .7em; pointer-events: auto; }

/* ---------------------------------------------------------------- holo seal sticker (sealed cards) */
.oc-seal {
  position: absolute;
  z-index: 6;
  left: 7%;
  right: 7%;
  bottom: 3.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.4em;
  padding: .4em .8em;
  overflow: hidden;
  background:
    linear-gradient(105deg, rgba(255, 92, 196, .28), rgba(94, 230, 208, .28) 40%, rgba(255, 213, 79, .3) 75%, rgba(61, 184, 255, .26)),
    var(--bone);
  color: var(--ink);
  font: 700 1.15em/1.15 var(--f-hud);
  letter-spacing: .16em;
  text-align: center;
  clip-path: polygon(0 0, calc(100% - .8em) 0, 100% .8em, 100% 100%, .8em 100%, 0 calc(100% - .8em));
  transform: rotate(-4deg);
  transform-origin: 0 50%;
  pointer-events: none;
}
.oc-seal span { position: relative; z-index: 1; }
.oc-seal i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 60%;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, 0) 80%);
  transform: translateX(-120%);
}
.op-card[data-size="mini"].is-sealed .oc-seal i { animation: oc-seal-sheen 3.2s ease-in-out 1.2s infinite; }
.op-card.is-peeling .oc-seal { animation: oc-peel 420ms var(--e-inout) forwards; }
.op-card.is-revealed .oc-seal { display: none; }

/* ---------------------------------------------------------------- back face */
.oc-body-back {
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, var(--olive-deep) 0%, #141A10 100%);
}
.oc-body-back .oc-rays, .oc-body-back .oc-glow { display: none; }
.oc-body-back .oc-tex {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 18%),
    var(--hazard-dim) 0 0 / 100% 2.2em no-repeat,
    repeating-linear-gradient(45deg, rgba(237, 230, 211, .03) 0 1px, rgba(237, 230, 211, 0) 1px 7px);
}
.oc-bk {
  position: absolute;
  z-index: 5;
  inset: 1.5em 1.5em 1.6em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: .9em;
}
.oc-bk-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8em;
  padding: .5em 0 .7em;
  border-bottom: 1px solid var(--line-2);
}
.oc-bk-k { font: 700 1.2em/1 var(--f-hud); letter-spacing: .2em; color: var(--intel); white-space: nowrap; }
.oc-bk-s { font: 600 1.1em/1 var(--f-hud); letter-spacing: .14em; color: var(--dust); white-space: nowrap; }
.oc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; }
.oc-pair > :only-child { grid-column: 1 / -1; }
.oc-pal {
  --pal: var(--confirm);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55em;
  padding: .9em .5em 1em;
  background: rgba(7, 9, 10, .55);
  border: 1px solid var(--line-2);
  text-align: center;
}
.oc-pal::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: .3em; background: var(--pal); }
.oc-clash { --pal: var(--alert); }
.oc-pal-l { font: 700 1.05em/1 var(--f-hud); letter-spacing: .16em; color: var(--pal); white-space: nowrap; }
.oc-pal img { width: 7.6em; height: 7.6em; object-fit: contain; }
.oc-pal b {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font: 700 1.2em/1.2 var(--f-hud);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bone);
}
.oc-dossier { display: grid; gap: .8em; }
.oc-dossier > div { padding: .9em 1em; background: rgba(7, 9, 10, .55); border: 1px solid var(--line-2); border-left: .3em solid var(--tier); }
.oc-dossier span { display: block; font: 600 1.05em/1 var(--f-hud); letter-spacing: .2em; color: var(--dust); }
.oc-dossier b { display: block; margin-top: .4em; font: 400 2.4em/1 var(--f-display); text-transform: uppercase; color: var(--bone); }
/* mini dogtag */
.oc-tag {
  position: relative;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3em;
  min-width: 70%;
  padding: .8em 1.6em .7em 2.4em;
  border-radius: 1em;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, rgba(255, 255, 255, 0) 1px 3px),
    var(--gunmetal);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 0 rgba(0, 0, 0, .25);
}
.oc-tag::before { /* punched hole */
  content: '';
  position: absolute;
  left: .9em;
  top: 50%;
  width: .9em;
  height: .9em;
  margin-top: -.45em;
  border-radius: 50%;
  background: #141A10;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .5);
}
.oc-tag-l { font: 600 1em/1 var(--f-hud); letter-spacing: .2em; color: rgba(10, 13, 11, .72); }
.oc-tag .oc-code {
  font: 400 2.8em/1 var(--f-display);
  font-synthesis: none;
  letter-spacing: .03em;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55), 0 -1px 0 rgba(0, 0, 0, .35);
  white-space: nowrap;
}
.oc-bk-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8em;
  padding: .7em 0;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.op-card .oc-bk-rank .tier-chip { flex: none; min-height: 2em; padding: 0 .7em; font-size: 1.1em; }
.oc-bk-ratio { min-width: 0; font: 700 1.05em/1.2 var(--f-hud); letter-spacing: .1em; color: var(--tier); }
.oc-bk-cta { margin: 0; font: 600 1.2em/1.2 var(--f-hud); letter-spacing: .2em; text-align: center; color: var(--intel); }

/* ---------------------------------------------------------------- keyframes */
@keyframes oc-sheen { from { transform: translateX(-66.7%); } to { transform: translateX(0); } }
@keyframes oc-lift { 0%, 100% { transform: none; } 50% { transform: scale(1.06); } }
@keyframes oc-sweep { from { transform: translateX(-110%); } to { transform: translateX(160%); } }
@keyframes oc-seal-sheen { 0% { transform: translateX(-120%); } 45%, 100% { transform: translateX(220%); } }
@keyframes oc-peel {
  0% { transform: rotate(-4deg) scaleX(1); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: rotate(-4deg) scaleX(0); opacity: 0; }
}

/* ---------------------------------------------------------------- reduced motion: no tilt, flip is a 150ms crossfade */
@media (prefers-reduced-motion: reduce) {
  .op-card .oc-tilt { transform: none !important; }
  .op-card .oc-face, .op-card .oc-back {
    transform: none !important;
    transition: opacity 150ms linear, visibility 0s linear 150ms !important;
  }
  .op-card .oc-back { opacity: 0; }
  .op-card.flipped .oc-face { opacity: 0; }
  .op-card.flipped .oc-back, .op-card:not(.flipped) .oc-face { opacity: 1; transition: opacity 150ms linear, visibility 0s linear 0s !important; }
  .op-card .oc-sheen, .op-card .oc-patch, .op-card .oc-seal i, .op-card .oc-flip { animation: none !important; }
  .op-card .oc-patch { transition: none; }
  .op-card .oc-holo, .op-card .oc-glare { display: none; }
}