/* ============================================================
   SIDEWALK SAINTS VENDING MACHINE
   CLEAN IMAGE-SHELL OVERLAY - VERSION LOCKED
   ============================================================ */

/* Reset and body */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    min-height: 100vh;
    font-family: "Courier New", Courier, monospace;
    color: #111;
    background:
        radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.05), transparent 36%),
        linear-gradient(135deg, #202020 0%, #101010 100%);
}

/* Machine shell */
.machine-stage {
    position: relative !important;
    width: min(94vw, 680px) !important;
    aspect-ratio: 1086 / 1448 !important;
    overflow: hidden !important;
    margin: 0 auto !important;
    display: block !important;
    filter: drop-shadow(0 26px 52px rgba(0, 0, 0, 0.62));
}

.machine-shell {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    pointer-events: none !important;
    user-select: none !important;
    z-index: 1 !important;
}

/* Label grid */
.machine-stage .label-grid {
    position: absolute !important;
    left: 28.1% !important;
    top: 27.55% !important;
    width: 33.1% !important;
    height: 30.7% !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    grid-template-rows: repeat(3, 1fr) !important;
    gap: 5.3% !important;
    z-index: 20 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.machine-stage .label-slot {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 3px !important;
    overflow: hidden !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transform: none !important;
    transition: filter 0.12s ease, transform 0.12s ease !important;

    /* Hide broken-image text while images load */
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;

    /* TEMPORARY yellow alignment guide */
    background: rgba(255, 255, 0, 0.08) !important;
    outline: 2px solid rgba(255, 255, 0, 0.85) !important;
    outline-offset: -2px !important;
}

.machine-stage .label-slot::before {
    content: none !important;
}

.machine-stage .label-slot::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 5 !important;
    border-radius: 3px !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 24%, transparent 70%, rgba(255, 255, 255, 0.05)),
        radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.10), transparent 18%);
    mix-blend-mode: screen;
    opacity: 0.55;
}

.machine-stage .label-slot:hover {
    transform: scale(1.02) !important;
    filter: brightness(1.14) !important;
}

.machine-stage .label-slot:active {
    transform: scale(0.985) !important;
}

.machine-stage .label-image,
.machine-stage .label-slot img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
}

/* ============================================================
   Hotspot buttons with final positions
   ============================================================ */

.machine-stage .hotspot,
.machine-stage button.hotspot {
    position: absolute !important;
    z-index: 9999 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;

    /* TEMPORARY cyan guide */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: rgba(0, 255, 255, 0.22) !important;
    outline: 3px solid cyan !important;
    outline-offset: -3px !important;
}

/* Insert Quarter final */
.machine-stage .hotspot-insert {
    left: 72.45% !important;
    top: 26.20% !important;
    width: 7.85% !important;
    height: 8.95% !important;
}

/* Shake Machine final */
.machine-stage .hotspot-shake {
    left: 72.70% !important;
    top: 37.25% !important;
    width: 7.55% !important;
    height: 8.95% !important;
}

/* ============================================================
   Odometer overlay with final position
   ============================================================ */

.machine-stage .odometer-overlay {
    left: 23.9% !important;
    top: 83.95% !important;
    width: 5.6% !important;
    height: 1.65% !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;

    background: rgba(0, 0, 0, 0.9) !important;
    border-radius: 2px !important;
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.9),
        0 0 2px rgba(0, 0, 0, 0.8) !important;

    /* TEMPORARY magenta guide */
    outline: 3px solid magenta !important;
    outline-offset: -3px !important;
}

/* Shake animation used by script.js (shakeTheeMachine) */
@keyframes rattle {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px) rotate(-0.4deg); }
    40% { transform: translateX(5px) rotate(0.4deg); }
    60% { transform: translateX(-4px) rotate(-0.3deg); }
    80% { transform: translateX(4px) rotate(0.3deg); }
}