:root {
  --docenka-video-frame-shadow:
    inset 0 0 0 1px rgba(238, 214, 188, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(78, 108, 180, 0.14);
}

.badge-3d-mount,
.catalog-badge-3d {
  position: relative;
  overflow: hidden;
  background: transparent;
  touch-action: pan-y;
  overscroll-behavior: auto;
}

.badge-tile .badge-3d-mount,
.catalog-badge-3d,
.sent-badge-mount {
  background:
    radial-gradient(
      circle at 50% 38%,
      color-mix(in srgb, var(--badge-color, #F59E0B) 22%, #171b2f) 0%,
      color-mix(in srgb, var(--badge-color, #F59E0B) 14%, #12182a) 22%,
      color-mix(in srgb, var(--badge-color, #F59E0B) 7%, #0f1727) 46%,
      rgba(12, 18, 32, 0) 100%
    ),
    linear-gradient(180deg, rgba(16, 14, 28, 0.92) 0%, rgba(9, 13, 24, 0.96) 52%, rgba(6, 10, 18, 0.99) 100%);
}

.badge-tile .badge-3d-mount::after,
.catalog-badge-3d::after,
.sent-badge-mount::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    var(--docenka-video-frame-shadow);
  z-index: 3;
}

[data-theme="light"] .badge-tile .badge-3d-mount,
[data-theme="light"] .catalog-badge-3d,
[data-theme="light"] .sent-badge-mount {
  background:
    radial-gradient(
      circle at 50% 38%,
      color-mix(in srgb, var(--badge-color, #F59E0B) 22%, #171b2f) 0%,
      color-mix(in srgb, var(--badge-color, #F59E0B) 14%, #12182a) 22%,
      color-mix(in srgb, var(--badge-color, #F59E0B) 7%, #0f1727) 46%,
      rgba(12, 18, 32, 0) 100%
    ),
    linear-gradient(180deg, rgba(16, 14, 28, 0.92) 0%, rgba(9, 13, 24, 0.96) 52%, rgba(6, 10, 18, 0.99) 100%);
}

[data-theme="light"] .badge-tile .badge-3d-mount::after,
[data-theme="light"] .catalog-badge-3d::after,
[data-theme="light"] .sent-badge-mount::after {
  box-shadow: var(--docenka-video-frame-shadow);
}

.preview-badge-mount {
  background: transparent;
}

.badge-tile--seasonal .badge-3d-mount {
  background:
    radial-gradient(
      circle at 50% 38%,
      color-mix(in srgb, var(--badge-color, #F59E0B) 22%, #171b2f) 0%,
      color-mix(in srgb, var(--badge-color, #F59E0B) 14%, #12182a) 22%,
      color-mix(in srgb, var(--badge-color, #F59E0B) 7%, #0f1727) 46%,
      rgba(12, 18, 32, 0) 100%
    ),
    linear-gradient(180deg, rgba(16, 14, 28, 0.92) 0%, rgba(9, 13, 24, 0.96) 52%, rgba(6, 10, 18, 0.99) 100%);
}

.docenka-physics-host {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  z-index: 2;
}

.docenka-physics-wrap {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 50% 38%,
      color-mix(in srgb, var(--badge-color, #F59E0B) 22%, #171b2f) 0%,
      color-mix(in srgb, var(--badge-color, #F59E0B) 14%, #12182a) 22%,
      color-mix(in srgb, var(--badge-color, #F59E0B) 7%, #0f1727) 46%,
      rgba(12, 18, 32, 0) 100%
    ),
    linear-gradient(180deg, rgba(16, 14, 28, 0.92) 0%, rgba(9, 13, 24, 0.96) 52%, rgba(6, 10, 18, 0.99) 100%);
  transition: filter 480ms ease, transform 480ms ease, opacity 220ms ease;
}

[data-theme="light"] .badge-3d-mount .docenka-physics-wrap {
  background:
    radial-gradient(
      circle at 50% 38%,
      color-mix(in srgb, var(--badge-color, #F59E0B) 22%, #171b2f) 0%,
      color-mix(in srgb, var(--badge-color, #F59E0B) 14%, #12182a) 22%,
      color-mix(in srgb, var(--badge-color, #F59E0B) 7%, #0f1727) 46%,
      rgba(12, 18, 32, 0) 100%
    ),
    linear-gradient(180deg, rgba(16, 14, 28, 0.92) 0%, rgba(9, 13, 24, 0.96) 52%, rgba(6, 10, 18, 0.99) 100%);
}

.docenka-physics-wrap.is-blurred {
  filter: blur(12px) saturate(0.84);
  transform: scale(1.045);
}

.docenka-physics-app {
  position: absolute;
  inset: 0;
  touch-action: pan-y;
}

.docenka-physics-app canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
}

#receive-badge-mount,
.post-badge-summary .badge-3d-mount,
.preview-badge-mount {
  touch-action: none;
  overscroll-behavior: contain;
}

#receive-badge-mount .docenka-physics-app,
#receive-badge-mount .docenka-physics-app canvas,
.post-badge-summary .badge-3d-mount .docenka-physics-app,
.post-badge-summary .badge-3d-mount .docenka-physics-app canvas,
.preview-badge-mount .docenka-physics-app,
.preview-badge-mount .docenka-physics-app canvas {
  touch-action: none;
}

.docenka-physics-thumb {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transition: opacity 180ms ease;
}

.docenka-video-fallback {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transition: opacity 180ms ease;
}

.docenka-video-fallback-source {
  position: absolute;
  width: 1px;
  height: 1px;
  left: -9999px;
  top: -9999px;
  opacity: 0;
  pointer-events: none;
  user-select: none;
}

.docenka-video-fallback-source::-webkit-media-controls,
.docenka-video-fallback-source::-webkit-media-controls-enclosure,
.docenka-video-fallback-source::-webkit-media-controls-panel,
.docenka-video-fallback-source::-webkit-media-controls-play-button,
.docenka-video-fallback-source::-webkit-media-controls-start-playback-button,
.docenka-video-fallback-source::-webkit-media-controls-overlay-play-button,
.docenka-video-fallback-source::-webkit-media-controls-overlay-enclosure {
  display: none !important;
  -webkit-appearance: none;
}

.docenka-physics-label {
  position: absolute;
  left: 50%;
  top: 84%;
  z-index: 3;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.06em;
  color: rgba(230, 246, 255, 0.92);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  transition: opacity 140ms ease, transform 140ms ease, filter 140ms ease, letter-spacing 140ms ease, color 140ms ease;
  will-change: transform, opacity, filter, color;
}

.badge-3d-fallback {
  display: none;
}

.badge-3d-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  text-align: center;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(230, 246, 255, 0.86);
  z-index: 4;
  pointer-events: none;
  user-select: none;
}

.badge-3d-loading.is-error {
  padding: 14px;
  pointer-events: auto;
  user-select: text;
  font-size: 12px;
  line-height: 1.45;
  flex-direction: column;
  gap: 6px;
}

.badge-3d-loading.is-error .badge-3d-error-text {
  display: block;
}

.badge-3d-loading.is-error a {
  color: inherit;
  text-decoration: underline;
  pointer-events: auto;
  display: block;
}

[data-theme="light"] .badge-3d-loading {
  color: rgba(74, 58, 34, 0.82);
}

.badge-3d-mount.physics-ready .badge-3d-fallback,
.badge-3d-mount.shared-physics-ready .badge-3d-fallback,
.catalog-badge-3d.physics-ready .badge-3d-fallback,
.catalog-badge-3d.shared-physics-ready .badge-3d-fallback {
  opacity: 0;
  transition: opacity 220ms ease;
}

.badge-3d-mount.physics-failed .badge-3d-fallback,
.catalog-badge-3d.physics-failed .badge-3d-fallback {
  opacity: 1;
}

.badge-3d-mount.physics-ready .badge-3d-loading,
.badge-3d-mount.shared-physics-ready .badge-3d-loading,
.badge-3d-mount.video-ready .badge-3d-loading,
.catalog-badge-3d.physics-ready .badge-3d-loading,
.catalog-badge-3d.shared-physics-ready .badge-3d-loading,
.catalog-badge-3d.video-ready .badge-3d-loading {
  opacity: 0;
}

.badge-3d-mount.thumb-ready .docenka-physics-thumb,
.catalog-badge-3d.thumb-ready .docenka-physics-thumb {
  opacity: 0.94;
}

.badge-3d-mount.physics-ready .docenka-physics-thumb,
.badge-3d-mount.shared-physics-ready .docenka-physics-thumb,
.badge-3d-mount.video-ready .docenka-physics-thumb,
.catalog-badge-3d.physics-ready .docenka-physics-thumb,
.catalog-badge-3d.shared-physics-ready .docenka-physics-thumb,
.catalog-badge-3d.video-ready .docenka-physics-thumb {
  opacity: 0;
}

.badge-3d-mount.video-ready .docenka-video-fallback,
.catalog-badge-3d.video-ready .docenka-video-fallback {
  opacity: 1;
}

.shared-physics-layer {
  position: fixed;
  inset: 0;
  z-index: 520;
  pointer-events: none;
}

.shared-physics-layer canvas {
  display: block;
  width: 100%;
  height: 100%;
}