/* PixelScene Dramatic v1.1.0 */

/* ---- Wrapper ---- */
.psd-wrapper {
    position: relative; width: 100%; overflow: hidden;
    background: #050508; border-radius: 4px;
    -webkit-user-select: none; user-select: none;
}
.psd-canvas {
    display: block; width: 100% !important; height: 100% !important;
    position: absolute; top: 0; left: 0; cursor: grab; touch-action: none;
}
.psd-canvas:active { cursor: grabbing; }

/* ---- Overlay (Gyro-Button) ---- */
.psd-overlay-ui {
    position: absolute; top: 14px; left: 14px; z-index: 10;
    display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.psd-gyro-btn {
    pointer-events: all;
    background: rgba(0,255,200,.15); border: 1px solid rgba(0,255,200,.5);
    color: #00ffc8; font-family: monospace; font-size: 12px;
    padding: 6px 14px; border-radius: 4px; cursor: pointer;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    transition: background .2s, box-shadow .2s;
}
.psd-gyro-btn:hover { background: rgba(0,255,200,.30); box-shadow: 0 0 14px rgba(0,255,200,.5); }

/* ---- Farb-Switcher-Bar ---- */
.psd-switcher-bar {
    position: absolute; z-index: 15;
    display: flex; gap: 6px; align-items: center;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    pointer-events: all;
}

/* Positionen */
.psd-sw-bottom-center { bottom: 18px; left: 50%; transform: translateX(-50%); flex-direction: row; }
.psd-sw-bottom-right  { bottom: 18px; right: 18px; flex-direction: row; }
.psd-sw-bottom-left   { bottom: 18px; left: 18px;  flex-direction: row; }
.psd-sw-top-right     { top: 14px;    right: 14px;  flex-direction: row; }
.psd-sw-top-left      { top: 14px;    left: 14px;   flex-direction: column; gap: 5px; }

/* ---- Switcher Buttons (Basis) ---- */
.psd-sw-btn {
    border: none; cursor: pointer; font-family: monospace;
    font-size: 11px; font-weight: 600; letter-spacing: 1px;
    transition: color .22s, background .22s, box-shadow .22s, border-color .22s;
    white-space: nowrap; line-height: 1;
}
.psd-sw-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Pill */
.psd-sw-style-pill .psd-sw-btn {
    padding: 7px 14px; border-radius: 50px;
    border: 1px solid rgba(255,255,255,.18);
}
/* Square */
.psd-sw-style-square .psd-sw-btn {
    padding: 7px 13px; border-radius: 4px;
    border: 1px solid rgba(255,255,255,.18);
}
/* Minimal */
.psd-sw-style-minimal .psd-sw-btn {
    padding: 5px 10px; border-radius: 0; background: transparent !important;
    border: none; border-bottom: 2px solid transparent;
}
.psd-sw-style-minimal .psd-sw-btn.psd-sw-active {
    border-bottom-color: currentColor !important;
}
/* Icon */
.psd-sw-style-icon .psd-sw-btn {
    padding: 6px 11px; border-radius: 6px;
    border: 1px solid rgba(255,255,255,.18);
    display: flex; align-items: center; gap: 5px;
}
.psd-sw-btn-icon { font-size: 14px; line-height: 1; }

/* Aktiv-Zustand (wird per JS gesetzt + --psd-active-color) */
.psd-sw-btn.psd-sw-active {
    box-shadow: 0 0 12px color-mix(in srgb, var(--psd-active-color,#00ffc8) 60%, transparent);
}

/* ---- No-Image Placeholder ---- */
.psd-no-image {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg,#0a0a12 0%,#12041e 100%); z-index: 5;
}
.psd-no-image-inner { text-align: center; color: rgba(255,255,255,.3); }
.psd-no-image-icon  { font-size: 40px; display: block; margin-bottom: 12px; opacity: .4; }
.psd-no-image p     { font-family: monospace; font-size: 13px; letter-spacing: 1px; margin: 0; }

/* ---- Loading Spinner ---- */
.psd-loading {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: #050508; z-index: 20; pointer-events: none; transition: opacity .5s ease;
}
.psd-loading.psd-hidden { opacity: 0; pointer-events: none; }
.psd-loading-ring {
    width: 44px; height: 44px; border: 3px solid rgba(255,255,255,.1);
    border-top-color: #00ffc8; border-radius: 50%; animation: psd-spin .75s linear infinite;
}
@keyframes psd-spin { to { transform: rotate(360deg); } }

/* Editor */
.elementor-editor-active .psd-wrapper { min-height: 200px; }