/* ==========================================
   CANDLE MEMORY
========================================== */


/* ==========================================
   CANDLE CLICK WRAPPER
========================================== */

#candleHitbox{
    position:absolute;

    left:1042px;
    top:255px;

    width:93px;
    height:132px;

    z-index:3;

    cursor:default;

    user-select:none;
    -webkit-user-select:none;

    -webkit-touch-callout:none;

    touch-action:manipulation;

    outline:none;

    overflow:visible;
}


/* ==========================================
   CANDLE IMAGES
========================================== */

#candle,
#candle1,
#candle2,
#candle3,
#candle4{
    position:absolute;

    pointer-events:none;

    user-select:none;
    -webkit-user-select:none;

    -webkit-user-drag:none;
    -webkit-touch-callout:none;
}


#candle{
    left:-232px;
    top:-258px;

    width:550px;
    height:616px;

    display:none;
}


#candle1{
    left:-232px;
    top:-258px;

    width:551px;
    height:616px;

    display:none;
}


#candle2{
    left:-628px;
    top:-653px;

    width:1300px;
    height:1454px;

    display:none;
}


#candle3{
    left:-681px;
    top:-712px;

    width:1400px;
    height:1566px;

    display:none;
}


#candle4{
    left:-785px;
    top:-830px;

    width:1600px;
    height:1790px;

    display:none;
}


/* ==========================================
   CANDLE MEMORY POPUP
========================================== */

.memoryPopup{
    position:fixed;
    inset:0;

    z-index:1000;

    display:none;
    align-items:center;
    justify-content:center;

    padding:24px;

    background:rgba(8, 5, 3, 0.78);

    font-family:"Fredoka", sans-serif;
}


.memoryPopup.isOpen{
    display:flex;
}


.memoryPopupPanel{
    position:relative;

    width:min(520px, 100%);
    max-height:85vh;

    overflow-y:auto;

    padding:42px 34px 34px;

    border:1px solid rgba(201, 162, 107, 0.45);
    border-radius:18px;

    background:
        linear-gradient(
            180deg,
            rgba(39, 27, 18, 0.98),
            rgba(20, 14, 10, 0.98)
        );

    color:#f1dfbf;

    text-align:center;
}


.memoryPopupPanel h2{
    margin-bottom:12px;

    color:#e2bd82;

    font-size:28px;
    font-weight:500;
}


.memoryIntroduction{
    max-width:390px;

    margin:0 auto 28px;

    color:rgba(241, 223, 191, 0.78);

    line-height:1.55;
}


.memoryPopupClose{
    position:absolute;

    top:10px;
    right:15px;

    border:0;

    padding:4px 9px;

    background:transparent;

    color:#d6b27d;

    font-family:inherit;
    font-size:32px;
    line-height:1;

    cursor:pointer;

    -webkit-tap-highlight-color:transparent;
}

/* ==========================================
   MEMORY DETAILS
========================================== */

.memoryDetails{
    display:grid;

    gap:10px;

    text-align:left;
}


.memoryDetails p{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    margin:0;
    padding:12px 0;

    border-bottom:1px solid rgba(201, 162, 107, 0.16);
}


.memoryDetails span{
    color:rgba(241, 223, 191, 0.68);
}


.memoryDetails strong{
    color:#efd5a7;

    font-weight:500;

    text-align:right;
}


/* ==========================================
   VISIT HISTORY
========================================== */

.visitHistorySection{
    margin-top:28px;

    text-align:left;
}


.visitHistorySection h3{
    margin-bottom:12px;

    color:#d5af76;

    font-size:18px;
    font-weight:500;
}


#visitHistoryList{
    display:grid;

    gap:7px;

    color:rgba(241, 223, 191, 0.72);

    font-size:14px;
}


.visitHistoryEntry{
    display:flex;

    justify-content:space-between;

    gap:16px;

    padding:7px 0;

    border-bottom:1px solid rgba(201, 162, 107, 0.10);
}


.memoryClosingMessage{
    margin-top:28px;

    color:#d8b681;

    font-style:italic;

    line-height:1.5;
}


/* ==========================================
   REMOVE TAP HIGHLIGHTS
========================================== */

#candleHitbox{
    -webkit-tap-highlight-color:
        rgba(0,0,0,0);
}


#candleHitbox:focus,
#candleHitbox:active{
    outline:none;

    box-shadow:none;

    -webkit-tap-highlight-color:
        rgba(0,0,0,0);
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width:768px){

    .memoryPopup{

        padding:15px;

    }

    .memoryPopupPanel{

        padding:40px 22px 28px;

    }

    .memoryPopupPanel h2{

        font-size:24px;

    }

    .memoryDetails p{

        flex-direction:column;

        align-items:flex-start;

        gap:4px;

    }

    .memoryDetails strong{

        text-align:left;

    }

}