/* Compact hanging corner: no seat padding, minimum height or grid changes. */
.vm > .level-badge {
  --level-atlas: url('./assets/levels/rank-emblems-v1.webp');
  position: absolute; left: 7px; bottom: -8px; top: auto;
  width: 69px; height: 32px; display: flex; flex-direction: row; align-items: center;
  padding: 0; margin: 0; z-index: 5; isolation: isolate; pointer-events: none;
}
.level-badge > .level-crest { position: relative; display: block; width: 32px; height: 32px; flex: none; }
/* Classic seats may have several certification rows; hang below their edge. */
body.soft-ui .mic-strip[data-layout="classic"] .vm > .level-badge { bottom: -32px; }
body.soft-ui .mic-strip[data-layout="classic"] { row-gap: 38px; padding-bottom: 40px; }
.level-crest > .level-art, .level-crest > .level-sheen {
  position: absolute; inset: 0;
  background-image: var(--level-atlas); background-size: 400% var(--level-sprite-height);
  background-position: var(--level-x) var(--level-y); background-repeat: no-repeat;
}
.level-crest > .level-art { filter: drop-shadow(0 1px 1px #0006); }
.level-crest > .level-sheen {
  background: none; overflow: hidden; opacity: .6;
  mask-image: var(--level-atlas); mask-size: 400% var(--level-sprite-height);
  mask-position: var(--level-x) var(--level-y); mask-repeat: no-repeat;
}
.level-sheen::after {
  content: ''; position: absolute; inset: -25%;
  background: linear-gradient(110deg, transparent 37%, #fff9de00 42%, #fff8dedd 49%, #fff9de00 56%, transparent 63%);
  transform: translateX(-120%); animation: level-emblem-sweep 4.8s ease-in-out infinite;
  mix-blend-mode: screen;
}
.level-crest > .level-halo {
  position: absolute; inset: 10%; border-radius: 50%; z-index: -1;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--level-color) 44%, transparent), transparent 70%);
  filter: blur(5px); opacity: .6; animation: level-emblem-breathe 3.8s ease-in-out infinite;
}
.level-badge > .level-plate {
  position: relative; z-index: 3; display: inline-flex; align-items: center; justify-content: center;
  gap: 3px; min-width: 43px; height: 19px; flex: none; padding: 0 5px; margin: 0 0 0 -6px;
  border: 1px solid color-mix(in srgb, var(--level-color) 65%, #c6b181); border-radius: 4px;
  color: #fff6df; background: linear-gradient(135deg, color-mix(in srgb, var(--level-color) 28%, #25212b), #191922);
  box-shadow: inset 0 1px #ffffff22, 0 1px 3px #0003;
  font: 500 11px/1 "Segoe UI", "Microsoft YaHei", sans-serif;
  white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.level-plate > small { font: inherit; opacity: .8; }
.level-crest > .level-star {
  position: absolute; z-index: 2; width: 6px; height: 6px; background: #fff0b6;
  clip-path: polygon(50% 0,59% 40%,100% 50%,59% 60%,50% 100%,41% 60%,0 50%,41% 40%);
  filter: drop-shadow(0 0 2px var(--level-color)); animation: level-emblem-twinkle 3.8s ease-in-out infinite;
}
.level-crest > .level-star-a { left: 5%; top: 40%; animation-delay: -.8s; }
.level-crest > .level-star-b { right: 5%; top: 17%; width: 5px; height: 5px; animation-delay: -2s; }
@keyframes level-emblem-sweep {
  0%,18% { transform: translateX(-110%); opacity: 0; } 25% { opacity: .8; }
  65%,100% { transform: translateX(110%); opacity: 0; }
}
@keyframes level-emblem-breathe { 0%,100% { transform: scale(.85); } 50% { transform: scale(1.15); } }
@keyframes level-emblem-twinkle {
  0%,12%,85%,100% { opacity: .1; transform: scale(.45) rotate(0); }
  40% { opacity: .95; transform: scale(1.05) rotate(18deg); }
}
@media (prefers-reduced-motion: reduce) {
  .level-badge *, .level-badge *::after { animation: none !important; }
  .level-crest > .level-sheen { display: none; }
  .level-crest > .level-star { opacity: .65; }
}