/* ============================================================
   EZLabyrinth v1.1.0
   ============================================================ */

/* --- Palettes --- */
.ezlabyrinth-app.palette-indigo {
    --bg:         #1a1a2e;
    --wall:       #c9a84c;
    --wall-dim:   #8b6914;
    --light:      #f5e6c8;
    --text:       #f5e6c8;
    --text-dim:   rgba(245,230,200,0.5);
    --btn-bg:     rgba(201,168,76,0.12);
    --btn-border: #c9a84c;
    --btn-hover:  rgba(201,168,76,0.28);
    --glow-a:     #f5e6c8;
    --glow-b:     #c9a84c;
}
.ezlabyrinth-app.palette-stone {
    --bg:         #2e2218;
    --wall:       #c97c4c;
    --wall-dim:   #8b5a2e;
    --light:      #fdf0dc;
    --text:       #fdf0dc;
    --text-dim:   rgba(253,240,220,0.5);
    --btn-bg:     rgba(201,124,76,0.12);
    --btn-border: #c97c4c;
    --btn-hover:  rgba(201,124,76,0.28);
    --glow-a:     #fdf0dc;
    --glow-b:     #c97c4c;
}
.ezlabyrinth-app.palette-forest {
    --bg:         #0d1f0d;
    --wall:       #7aab6a;
    --wall-dim:   #4a7a3a;
    --light:      #e8f5e0;
    --text:       #e8f5e0;
    --text-dim:   rgba(232,245,224,0.5);
    --btn-bg:     rgba(122,171,106,0.12);
    --btn-border: #7aab6a;
    --btn-hover:  rgba(122,171,106,0.28);
    --glow-a:     #e8f5e0;
    --glow-b:     #7aab6a;
}
.ezlabyrinth-app.palette-contrast {
    --bg:         #000;
    --wall:       #fff;
    --wall-dim:   #aaa;
    --light:      #fff;
    --text:       #fff;
    --text-dim:   rgba(255,255,255,0.55);
    --btn-bg:     rgba(255,255,255,0.1);
    --btn-border: #fff;
    --btn-hover:  rgba(255,255,255,0.25);
    --glow-a:     #fff;
    --glow-b:     #ccc;
}

/* ============================================================
   Base
   ============================================================ */
.ezlabyrinth-app {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: Georgia, 'Times New Roman', serif;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ezlabyrinth-shortcode .ezlabyrinth-app { min-height: 90vh; }

/* ============================================================
   Phases
   ============================================================ */
.ezl-phase {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 1.2s ease;
    pointer-events: none;
}
.ezl-phase.ezl-active {
    opacity: 1;
    pointer-events: all;
}

/* ============================================================
   Text phases
   ============================================================ */
.ezl-phase-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 40px 32px;
    max-width: 520px;
    width: 100%;
    text-align: center;
}
.ezl-text {
    font-size: clamp(15px, 3.5vw, 19px);
    line-height: 1.9;
    color: var(--text);
    opacity: 0;
    transition: opacity 1.4s ease 0.4s;
}
.ezl-active .ezl-text { opacity: 1; }

.ezl-guidance {
    font-size: clamp(13px, 3vw, 15px);
    line-height: 1.75;
    color: var(--text-dim);
    font-style: italic;
    letter-spacing: 0.02em;
}

#ezl-guidance-out {
    opacity: 0;
    transition: opacity 2s ease;
}

/* Reflection question */
.ezl-question {
    font-size: clamp(14px, 3.2vw, 17px);
    line-height: 1.85;
    color: var(--light);
    font-style: italic;
    letter-spacing: 0.02em;
    opacity: 0;
    transition: opacity 1.5s ease;
    min-height: 2em;
}

/* Global experience font variants */
.ezlabyrinth-app.ezl-font-sans,
.ezlabyrinth-app.ezl-font-sans .ezl-text,
.ezlabyrinth-app.ezl-font-sans .ezl-guidance,
.ezlabyrinth-app.ezl-font-sans .ezl-question,
.ezlabyrinth-app.ezl-font-sans .ezl-duration-prompt,
.ezlabyrinth-app.ezl-font-sans .ezl-duration-btn,
.ezlabyrinth-app.ezl-font-sans .ezl-phase-label,
.ezlabyrinth-app.ezl-font-sans .ezl-sub-prompt,
.ezlabyrinth-app.ezl-font-sans .ezl-scripture,
.ezlabyrinth-app.ezl-font-sans .ezl-btn {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
.ezlabyrinth-app.ezl-font-sans .ezl-question {
    font-style: normal;
}

/* ============================================================
   Duration selection
   ============================================================ */
.ezl-duration-select { text-align: center; }
.ezl-duration-prompt {
    font-size: clamp(13px, 3vw, 14px);
    color: var(--text-dim);
    margin: 0 0 12px;
    letter-spacing: 0.04em;
}
.ezl-duration-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.ezl-duration-btn {
    background: var(--btn-bg);
    border: 1px solid var(--btn-border);
    color: var(--text);
    font-family: Georgia, serif;
    font-size: clamp(12px, 3vw, 14px);
    padding: 9px 18px;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.3s ease;
    letter-spacing: 0.03em;
}
.ezl-duration-btn:hover,
.ezl-duration-btn.ezl-selected {
    background: var(--btn-hover);
    border-color: var(--wall);
}

/* ============================================================
   Walk phase layout
   ============================================================ */
#ezl-phase-walk {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.ezl-walk-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    justify-content: center;
}
.ezl-labyrinth-container {
    position: relative;
    flex: 0 0 auto;
    width:  min(65vw, 65vh, 520px);
    height: min(65vw, 65vh, 520px);
    cursor: none;
}
#ezl-svg-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
#ezl-svg-wrap svg {
    width: 100%;
    height: 100%;
}
#ezl-svg-wrap svg path { fill: var(--wall); }

#ezl-foot-canvas,
#ezl-light-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.ezl-walk-text-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 24px 0;
    min-height: 70px;
    width: 100%;
    max-width: 520px;
    text-align: center;
}
.ezl-phase-label {
    font-size: 11px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--wall-dim);
    opacity: 0;
    transition: opacity 1s ease;
    min-height: 16px;
}
.ezl-phase-label.ezl-visible { opacity: 1; }

.ezl-sub-prompt {
    font-size: clamp(13px, 3vw, 15px);
    font-style: italic;
    color: var(--text-dim);
    line-height: 1.7;
    opacity: 0;
    transition: opacity 2s ease 1.5s;
}
.ezl-sub-prompt.ezl-visible { opacity: 1; }

.ezl-center-hint {
    font-size: clamp(11px, 2.5vw, 13px);
    font-style: italic;
    color: var(--wall-dim);
    margin: 0;
    opacity: 0;
    transition: opacity 1.5s ease;
}


/* ============================================================
   Buttons
   ============================================================ */
.ezl-btn {
    background: var(--btn-bg);
    border: 1px solid var(--btn-border);
    color: var(--text);
    font-family: Georgia, serif;
    font-size: clamp(13px, 3vw, 15px);
    padding: 13px 34px;
    border-radius: 3px;
    cursor: pointer;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: background 0.3s ease;
    text-decoration: none;
    display: inline-block;
}
.ezl-btn:hover { background: var(--btn-hover); }

/* ============================================================
   Sound toggle
   ============================================================ */
.ezl-sound-toggle {
    position: absolute;
    top: 18px;
    right: 18px;
    background: transparent;
    border: 1px solid var(--wall-dim);
    color: var(--wall-dim);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s, color 0.3s;
    z-index: 10;
}
.ezl-sound-toggle:hover { border-color: var(--wall); color: var(--wall); }
.ezl-sound-toggle.sound-off .ezl-sound-on  { display: none; }
.ezl-sound-toggle.sound-on  .ezl-sound-off { display: none; }

/* ============================================================
   Resting glow
   ============================================================ */
.ezl-center-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        var(--glow-a) 0%,
        var(--glow-b) 30%,
        transparent 68%
    );
    opacity: 0;
    transition: opacity 3s ease;
    pointer-events: none;
}
.ezl-active .ezl-center-glow { opacity: 0.16; }

/* ============================================================
   Scripture
   ============================================================ */
.ezl-scripture {
    font-size: clamp(12px, 3vw, 14px);
    font-style: italic;
    color: var(--wall-dim);
    letter-spacing: 0.02em;
}

/* ============================================================
   Center icon pulse
   ============================================================ */
@keyframes ezl-pulse {
    0%   { opacity: 0.7; }
    50%  { opacity: 1;   }
    100% { opacity: 0.7; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 480px) {
    .ezl-labyrinth-container {
        width:  min(90vw, 50vh);
        height: min(90vw, 50vh);
    }
    .ezl-phase-content { padding: 28px 20px; gap: 18px; }
    .ezl-duration-btn  { padding: 8px 14px; }
}
@media (min-height: 700px) and (min-width: 600px) {
    .ezl-labyrinth-container {
        width:  min(60vw, 60vh, 520px);
        height: min(60vw, 60vh, 520px);
    }
}