/* ============================= */
/* App-spezifisch: Mandala Flow  */
/* ============================= */

/* Basis */
*,
*::before,
*::after {
    box-sizing: border-box;
}

#mainContainer {
    width: 100%;
}

/* ============================= */
/* Button-Container / Sichtbarkeit
============================= */

#buttonContainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    align-items: stretch;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px;
    gap: 12px 18px;
}

.desktop-only {
    display: flex;
}

.mobile-only {
    display: none !important;
}

/* ============================= */
/* Flow-spezifische Button-Effekte
============================= */

#undoBtn,
#redoBtn,
#undoBtnMobile,
#redoBtnMobile {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    white-space: nowrap;
    animation: undoRedoGlow 2.8s ease-in-out infinite;
    text-shadow:
        0 0 8px rgba(0, 0, 0, 0.7),
        0 0 12px rgba(0, 0, 0, 0.5);
}

button:active,
button.is-pressed,
#generateBtn:active,
#generateBtn.is-pressed,
#downloadBtn:active,
#downloadBtn.is-pressed,
#shareButton:active,
#shareButton.is-pressed,
#toggleQuoteBtn:active,
#toggleQuoteBtn.is-pressed,
#newQuoteBtn:active,
#newQuoteBtn.is-pressed,
#undoBtn:active,
#undoBtn.is-pressed,
#redoBtn:active,
#redoBtn.is-pressed,
#undoBtnMobile:active,
#undoBtnMobile.is-pressed,
#redoBtnMobile:active,
#redoBtnMobile.is-pressed {
    background: linear-gradient(
        to left,
        rgba(0, 255, 255, 0.7),
        rgba(255, 255, 255, 1)
    );
    box-shadow: 0 0 12px rgba(0, 255, 200, 0.8);
    color: yellow;
    transform: scale(0.96);
}

button:disabled,
#generateBtn:disabled,
#downloadBtn:disabled,
#shareButton:disabled,
#undoBtn:disabled,
#redoBtn:disabled,
#undoBtnMobile:disabled,
#redoBtnMobile:disabled,
#toggleQuoteBtn:disabled,
#newQuoteBtn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Undo / Redo Spezialeffekt */
#undoBtn::before,
#redoBtn::before,
#undoBtnMobile::before,
#redoBtnMobile::before,
#undoBtn::after,
#redoBtn::after,
#undoBtnMobile::after,
#redoBtnMobile::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.18s ease;
    z-index: 0;
}

#undoBtn::before,
#redoBtn::before,
#undoBtnMobile::before,
#redoBtnMobile::before {
    inset: -2px;
    background: linear-gradient(
        90deg,
        rgba(0, 255, 140, 0) 0%,
        rgba(0, 255, 140, 0.75) 20%,
        rgba(0, 210, 255, 0.95) 50%,
        rgba(0, 120, 255, 0.75) 80%,
        rgba(0, 120, 255, 0) 100%
    );
    background-size: 220% 100%;
    filter: blur(8px) saturate(1.2);
    transform: scale(1.08);
}

#undoBtn::after,
#redoBtn::after,
#undoBtnMobile::after,
#redoBtnMobile::after {
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(120, 255, 220, 0.16) 30%,
        rgba(120, 220, 255, 0.22) 50%,
        rgba(80, 160, 255, 0.16) 70%,
        rgba(255, 255, 255, 0) 100%
    );
    background-size: 200% 100%;
    filter: blur(3px) saturate(1.1);
    mix-blend-mode: screen;
    transform: scale(1.02);
}

#undoBtn:active::before,
#undoBtn.is-pressed::before,
#redoBtn:active::before,
#redoBtn.is-pressed::before,
#undoBtnMobile:active::before,
#undoBtnMobile.is-pressed::before,
#redoBtnMobile:active::before,
#redoBtnMobile.is-pressed::before,
#undoBtn:active::after,
#undoBtn.is-pressed::after,
#redoBtn:active::after,
#redoBtn.is-pressed::after,
#undoBtnMobile:active::after,
#undoBtnMobile.is-pressed::after,
#redoBtnMobile:active::after,
#redoBtnMobile.is-pressed::after {
    opacity: 1;
}

#undoBtn:active::before,
#undoBtn.is-pressed::before,
#undoBtnMobile:active::before,
#undoBtnMobile.is-pressed::before {
    animation:
        undoGradientFlow 1.2s linear infinite,
        gradientPulse 0.9s ease-in-out infinite alternate;
}

#undoBtn:active::after,
#undoBtn.is-pressed::after,
#undoBtnMobile:active::after,
#undoBtnMobile.is-pressed::after {
    animation:
        undoGradientFlowSoft 1.5s linear infinite,
        gradientPulseSmall 0.8s ease-in-out infinite alternate;
}

#redoBtn:active::before,
#redoBtn.is-pressed::before,
#redoBtnMobile:active::before,
#redoBtnMobile.is-pressed::before {
    animation:
        redoGradientFlow 1.2s linear infinite,
        gradientPulse 0.9s ease-in-out infinite alternate;
}

#redoBtn:active::after,
#redoBtn.is-pressed::after,
#redoBtnMobile:active::after,
#redoBtnMobile.is-pressed::after {
    animation:
        redoGradientFlowSoft 1.5s linear infinite,
        gradientPulseSmall 0.8s ease-in-out infinite alternate;
}

@keyframes undoGradientFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

@keyframes redoGradientFlow {
    0% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes undoGradientFlowSoft {
    0% { background-position: 10% 50%; }
    100% { background-position: 90% 50%; }
}

@keyframes redoGradientFlowSoft {
    0% { background-position: 90% 50%; }
    100% { background-position: 10% 50%; }
}

@keyframes gradientPulse {
    0% { filter: blur(7px) saturate(1) brightness(0.95); }
    100% { filter: blur(10px) saturate(1.25) brightness(1.12); }
}

@keyframes gradientPulseSmall {
    0% { filter: blur(2px) saturate(1) brightness(0.96); }
    100% { filter: blur(4px) saturate(1.15) brightness(1.08); }
}

@keyframes undoRedoGlow {
    0% {
        box-shadow:
            0 0 6px rgba(0, 200, 140, 0.25),
            0 0 10px rgba(0, 170, 255, 0.2),
            2px 6px 10px rgba(0, 150, 220, 0.25);
    }
    30% {
        box-shadow:
            0 0 12px rgba(0, 255, 160, 0.45),
            0 0 22px rgba(0, 210, 255, 0.35),
            0 0 30px rgba(0, 120, 255, 0.28),
            2px 6px 14px rgba(0, 180, 240, 0.35);
    }
    60% {
        box-shadow:
            0 0 10px rgba(0, 230, 150, 0.35),
            0 0 18px rgba(0, 190, 255, 0.28),
            0 0 26px rgba(0, 120, 255, 0.22),
            2px 6px 12px rgba(0, 170, 230, 0.3);
    }
    100% {
        box-shadow:
            0 0 6px rgba(0, 200, 140, 0.25),
            0 0 10px rgba(0, 170, 255, 0.2),
            2px 6px 10px rgba(0, 150, 220, 0.25);
    }
}

/* ============================= */
/* Spruchgruppe                  */
/* ============================= */

.spruch-group {
    display: flex;
    gap: 10px;
    width: 100%;
}

.spruch-group #toggleQuoteBtn,
.spruch-group #newQuoteBtn {
    flex: 1 1 0;
    width: auto;
}

/* ============================= */
/* Mobile Undo/Redo oben         */
/* ============================= */

.undo-redo-group.mobile-only {
    display: none;
    gap: 10px;
    width: 100%;
}

.undo-redo-group.mobile-only button {
    flex: 1 1 0;
    width: 100%;
    white-space: nowrap;
}

/* ============================= */
/* Mandala + Seitenbuttons       */
/* ============================= */

#mandalaLayout {
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    gap: 6%;
}

#mandalaLayout .mandala-wrapper {
    flex: 1 1 auto;
    margin: 0;
}

#mandalaLayout > #undoBtn,
#mandalaLayout > #redoBtn {
    flex: 0 0 10%;
    min-width: 110px;
    max-width: 180px;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: unset;
    height: auto;
    padding: 0 10px;
    font-size: clamp(1.8rem, 2.6vw, 3rem);
    line-height: 1;
}

#mandalaLayout .mandala-wrapper.ohne-spruch,
#mandalaLayout .mandala-wrapper.mit-spruch {
    align-self: stretch;
}

/* ============================= */
/* Mandala-Buttons mit Icons     */
/* ============================= */

.mandala-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
}

.mandala-btn .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.05em;
    height: 1.05em;
    line-height: 1;
}

.mandala-btn .btn-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.mandala-btn .btn-text {
    display: inline-block;
    line-height: 1.1;
}

/* ============================= */
/* Mandalabilder                 */
/* ============================= */

.mandala-wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto;
    background: transparent;
    overflow: hidden;
}

.mandala-wrapper.ohne-spruch {
    max-width: min(72vw, 78vh);
    aspect-ratio: 1 / 1;
}

.mandala-wrapper.mit-spruch {
    max-width: min(72vw, 97.5vh);
    aspect-ratio: 4 / 5;
}

@supports not (aspect-ratio: 1 / 1) {
    .mandala-wrapper.ohne-spruch {
        width: 100%;
        max-width: 700px;
        height: 700px;
    }

    .mandala-wrapper.mit-spruch {
        width: 100%;
        max-width: 700px;
        height: 875px;
    }
}

.mandala-zentrum {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#canvas {
    position: absolute;
    inset: 0;
    left: -1px;
    top: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    display: block;
    z-index: 30;
    background: black;
}

/* ============================= */
/* Schrittanzeige                */
/* ============================= */

#mandalaStepAnzeige {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
    min-height: 6.5vh;
    height: 6.5vh;
    padding: 0 14px;
    background: transparent;
    border: 1px solid rgba(0, 255, 170, 0.5);
    border-radius: 10px;
    box-shadow:
        0 0 6px rgba(0, 255, 170, 0.4),
        0 0 12px rgba(0, 255, 170, 0.3),
        0 0 18px rgba(0, 255, 170, 0.2);
    color: #b6ffe5;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

#mandalaStepAnzeige span {
    min-width: 0;
}

#mandalaStepAnzeige .anzeige-label {
    flex-shrink: 0;
    font-size: clamp(11px, 0.8vw, 14px);
    opacity: 0.7;
    color: #9fffdc;
}

#mandalaStepValue {
    font-size: clamp(20px, 2.5vw, 30px);
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow:
        0 0 4px rgba(0, 255, 170, 0.6),
        0 0 8px rgba(0, 255, 170, 0.4);
}

/* ============================= */
/* Render Overlay                */
/* ============================= */

#renderOverlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    z-index: 3000;
}

#renderModal {
    width: calc(100% - 40px);
    max-width: 480px;
    text-align: center;
}

.render-spinner {
    width: 46px;
    height: 46px;
    margin: 20px auto;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.25);
    border-top-color: rgba(255, 255, 255, 0.95);
    animation: renderSpin 1s linear infinite;
}

@keyframes renderSpin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================= */
/* Responsive                    */
/* ============================= */

@media (max-width: 600px) {
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: flex !important;
    }

    #mandalaLayout {
        display: block;
        max-width: 100%;
    }

    #buttonContainer {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
        padding: 10px;
        gap: 12px;
    }

    #buttonContainer button,
    #shareButton,
    #toggleQuoteBtn,
    #newQuoteBtn,
    #mandalaStepAnzeige {
        width: 100%;
        font-size: 2.5vh;
        min-height: 4.8vh;
        height: auto;
        line-height: 1.2;
    }

    .undo-redo-group.mobile-only {
        display: flex !important;
    }

    .mandala-wrapper.ohne-spruch {
        max-width: min(90vw, 50vh);
        aspect-ratio: 1 / 1;
    }

    .mandala-wrapper.mit-spruch {
        max-width: min(90vw, 62.5vh);
        aspect-ratio: 4 / 5;
    }

    #mandalaStepAnzeige .anzeige-label {
        font-size: 1.8vh;
    }

    #mandalaStepValue {
        font-size: 2.8vh;
    }
}