.dbk-medal-viewer {
    --dbk-tilt: 0;
    margin-bottom: 1.5rem;
    user-select: none;
}

.dbk-medal-viewer__stage {
    position: relative;
}

.dbk-medal-viewer__scene {
    perspective: 1400px;
    cursor: grab;
    touch-action: pan-y;             /* horizontal swipe turns, vertical scroll stays */
}

.dbk-medal-viewer__scene:active {
    cursor: grabbing;
}

.dbk-medal-viewer__card {
    position: relative;
    aspect-ratio: 1;
    transform-style: preserve-3d;
}

.dbk-medal-viewer__card.is-animating {
    transition: transform 1s cubic-bezier(.25, .8, .25, 1);
}

.dbk-medal-viewer__face {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dbk-medal-viewer__face.is-back {
    transform: rotateY(180deg);
}

/* Round medal (both photos have a measured rim): cut out along the rim, faces in front of
   and behind the centre plane (half the thickness each), rim as a cylinder of strips (medal-viewer.js). */
.dbk-medal-viewer {
    --dbk-size: 500px;
    --dbk-fill: .92;
    --dbk-thickness: .0375;          /* 1.5 mm at Ø 40 mm, set by medal-viewer.js */
    --dbk-strips: 64;
    --dbk-diameter: calc(var(--dbk-size) * var(--dbk-fill));
    --dbk-depth: calc(var(--dbk-diameter) * var(--dbk-thickness));
}

/* Cut out with a soft mask instead of clip-path: a hard clip shows stair-stepping along the rim,
   especially while turning. The ~1 % transition is about 2 px at usual sizes. */
.dbk-medal-viewer__face.is-round,
.dbk-medal-viewer__copy.is-round {
    --dbk-rim-mask: radial-gradient(closest-side circle at 50% 50%,
        #000 calc(var(--dbk-fill) * 100% - 1.2%),
        transparent calc(var(--dbk-fill) * 100% - 0.1%));
    -webkit-mask-image: var(--dbk-rim-mask);
    mask-image: var(--dbk-rim-mask);
}

.dbk-medal-viewer__face.is-round .dbk-medal-viewer__photo,
.dbk-medal-viewer__copy.is-round .dbk-medal-viewer__photo {
    position: absolute;
}

.dbk-medal-viewer.is-round .dbk-medal-viewer__face.is-front {
    transform: translateZ(calc(var(--dbk-depth) / 2));
}

.dbk-medal-viewer.is-round .dbk-medal-viewer__face.is-back {
    transform: rotateY(180deg) translateZ(calc(var(--dbk-depth) / 2));
}

.dbk-medal-viewer__edge {
    position: absolute;
    inset: 0;
    display: none;
    transform-style: preserve-3d;
    pointer-events: none;
    --dbk-strip-w: calc(var(--dbk-diameter) * 3.14159 / var(--dbk-strips) * 1.08);   /* slight overlap: no gaps */
}

.dbk-medal-viewer.is-round .dbk-medal-viewer__edge {
    display: block;
}

.dbk-medal-viewer__edge span {
    position: absolute;
    left: calc(50% - var(--dbk-strip-w) / 2);
    top: calc(50% - var(--dbk-depth) / 2);
    width: var(--dbk-strip-w);
    height: var(--dbk-depth);
    /* the rim sits slightly inside the soft edge of the photo mask, so no background shows
       through between photo and rim; its ends fade only a little */
    transform: rotateZ(var(--dbk-angle)) translateY(calc(var(--dbk-diameter) / -2 * .99)) rotateX(90deg);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
    outline: 1px solid transparent;  /* Firefox: smooths the edges of transformed elements */
}

/* Which face is visible is decided here, not by backface-visibility: Firefox gets that wrong
   as soon as a face contains blend modes or filters. data-side switches at 90 degrees. */
.dbk-medal-viewer[data-side="front"] .dbk-medal-viewer__face.is-back,
.dbk-medal-viewer[data-side="back"] .dbk-medal-viewer__face.is-front {
    visibility: hidden;
}

/* light sweeping across the metal while turning */
.dbk-medal-viewer__face::after {
    content: "";
    position: absolute;
    inset: calc((1 - var(--dbk-fill)) * 50%);
    border-radius: 50%;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%);
    background-size: 300% 100%;
    background-position: calc(50% + var(--dbk-tilt) * 120%) 0;
    mix-blend-mode: soft-light;
}

.dbk-medal-viewer__photo {
    position: relative;
    width: 100%;
}

.dbk-medal-viewer__img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}

.dbk-medal-viewer__engraving {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.dbk-medal-viewer__engraving path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dbk-medal-viewer__glint {
    mix-blend-mode: screen;
}

/* opacity per layer is set in medal-viewer.js */
.dbk-medal-viewer__groove {
    mix-blend-mode: multiply;
}

.dbk-medal-viewer__engraving .is-sample {
    opacity: .35;
}

.dbk-medal-viewer__controls {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: .75rem;
}

.dbk-medal-viewer__controls button {
    border: 1px solid #ced4da;
    background: #fff;
    border-radius: 999px;
    padding: .3rem .9rem;
    font-size: .9rem;
}

.dbk-medal-viewer__controls button[aria-pressed="true"] {
    background: #343a40;
    border-color: #343a40;
    color: #fff;
}

.dbk-medal-viewer__hint {
    text-align: center;
    font-size: .8rem;
    color: #6c757d;
    margin: .4rem 0 0;
}

.dbk-medal-viewer__disclaimer {
    text-align: center;
    font-size: .8rem;
    color: #495057;
    margin: .5rem auto 0;
    max-width: 30rem;
}


/* Lens (medal-viewer.js): a copy of the visible side at higher magnification */
.dbk-medal-viewer__lens {
    position: absolute;
    display: none;
    overflow: hidden;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15), 0 6px 18px rgba(0, 0, 0, .25);
    pointer-events: none;
    isolation: isolate;              /* the engraving blend modes stay inside the lens */
    z-index: 5;
}

.dbk-medal-viewer__lens.is-visible {
    display: block;
}

.dbk-medal-viewer__copy {
    position: absolute;
}

/* Flat copy of the visible side while the medal lies still (medal-viewer.js): a 3D layer is
   downscaled by the browser with a faster, softer filter than a plain image. Same size and place
   as the 3D face (medal-core.js compensates the perspective), so the swap is not visible. */
.dbk-medal-viewer__still {
    position: absolute;
    inset: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    isolation: isolate;
    z-index: 1;
}

.dbk-medal-viewer.is-still .dbk-medal-viewer__still {
    visibility: visible;
}

.dbk-medal-viewer.is-zooming .dbk-medal-viewer__scene {
    cursor: zoom-in;
    touch-action: none;              /* the finger moves the lens instead of scrolling */
}

.dbk-medal-viewer__zoom {
    position: absolute;
    top: .25rem;
    right: .25rem;
    width: 2.5rem;
    height: 2.5rem;
    padding: .45rem;
    border: 1px solid #ced4da;
    border-radius: 50%;
    background: #fff;
    color: #343a40;
    z-index: 6;
}

.dbk-medal-viewer__zoom svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.dbk-medal-viewer__zoom[aria-pressed="true"] {
    background: #343a40;
    border-color: #343a40;
    color: #fff;
}

.dbk-medal-viewer__zoom[aria-pressed="true"] svg path {
    d: path("M15 15l6 6M7 10h6");    /* minus: zoom off (browsers without CSS d keep the plus) */
}

/* Band on a phone (medal-viewer.js): scrolled past, __frame keeps only the strip with the engraving
   plate and __sticky holds it at the top of the screen. The medal itself is not resized – it is
   moved up inside the frame – so the engraving stays as large as on the whole medal. */
.dbk-medal-viewer.is-band .dbk-medal-viewer__sticky {
    position: fixed;
    top: 0;
    left: var(--dbk-band-left, 0);
    width: var(--dbk-band-width, 100%);
    z-index: 30;
    padding-top: 15px;               /* the cut edge needs air, it is not the top of the screen */
    padding-bottom: .4rem;
}

/* white to both sides: the bar is as wide as the viewer, the screen is wider */
.dbk-medal-viewer.is-band .dbk-medal-viewer__sticky::before {
    content: "";
    position: absolute;
    inset: 0 -50vw;
    z-index: -1;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

.dbk-medal-viewer.is-band .dbk-medal-viewer__frame {
    height: var(--dbk-band-h);
    overflow: hidden;
}

.dbk-medal-viewer.is-band .dbk-medal-viewer__stage {
    margin-top: calc(-1 * var(--dbk-band-top));
}

.dbk-medal-viewer.is-band .dbk-medal-viewer__zoom {
    display: none;                   /* the plate is already at its normal size */
}

.dbk-medal-viewer.is-band .dbk-medal-viewer__controls {
    display: none;                   /* the band always shows the engraving side */
}