/*
 * Drill Pattern — stage chrome.
 * The canvas paints everything inside the stage; this file only owns the frame,
 * the transport bar, and how the block behaves full-bleed on a phone.
 */

.cjdp {
    --cjdp-gold: var(--msd-gold, #C9A84C);
    position: relative;
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    background: #08080A;
    border: 1px solid rgba(201, 168, 76, 0.18);
}

.cjdp-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    cursor: pointer;
}

/* Older Safari without aspect-ratio */
@supports not (aspect-ratio: 3 / 2) {
    .cjdp-stage { padding-top: 66.6667%; }
    .cjdp-canvas { position: absolute; inset: 0; }
}

.cjdp-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* ── transport bar ───────────────────────────────────────────────────────── */

.cjdp-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.25));
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cjdp-btn {
    flex: 0 0 auto;
    min-width: 34px;
    height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    border: 1px solid rgba(201, 168, 76, 0.35);
    background: rgba(201, 168, 76, 0.10);
    color: var(--cjdp-gold);
    font: 600 12px/1 "DM Sans", system-ui, sans-serif;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}

.cjdp-btn:hover { background: rgba(201, 168, 76, 0.20); }
.cjdp-btn:active { transform: scale(0.94); }

/* Handedness toggle. Pressed = the stage is showing the left-handed view. */
.cjdp-hand { letter-spacing: 0.04em; white-space: nowrap; }
.cjdp-hand[aria-pressed="true"] {
    background: var(--cjdp-gold);
    color: #0a0a0a;
    border-color: var(--cjdp-gold);
}
.cjdp-hand[aria-pressed="true"]:hover { background: var(--cjdp-gold); filter: brightness(1.08); }

.cjdp-scrub {
    flex: 1 1 auto;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    cursor: pointer;
    overflow: hidden;
}

.cjdp-scrub-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(201, 168, 76, 0.55), #F0D688);
}

/* ── compact (thumb / card preview) ──────────────────────────────────────── */

.cjdp-compact {
    border-radius: 10px;
}

.cjdp-compact .cjdp-stage {
    cursor: default;
}

/* ── caption + full-bleed on phones ──────────────────────────────────────── */

.cjdp-cap {
    position: absolute;
    top: 8px;
    left: 10px;
    z-index: 2;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(8, 8, 10, 0.72);
    border: 1px solid rgba(201, 168, 76, 0.3);
    color: var(--cjdp-gold);
    font: 600 10px/1.5 "Barlow Condensed", system-ui, sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    pointer-events: none;
}

@media (max-width: 640px) {
    .cjdp-full {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        margin-left: calc(var(--cj-bleed, 16px) * -1);
        margin-right: calc(var(--cj-bleed, 16px) * -1);
        width: auto;
    }
}