/* ==========================================================
   RESET
========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;

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

    -webkit-touch-callout:none;

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

html,
body{

    width:100%;
    height:100%;

    overflow:hidden;

    background:#000;

    touch-action:none;

    font-family:Arial,Helvetica,sans-serif;

}

/* ==========================================================
   APP
========================================================== */

#app{

    position:relative;

    width:100vw;
    height:100vh;

    overflow:hidden;

}

/* ==========================================================
   BACKGROUND
========================================================== */

#background{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    pointer-events:none;

    z-index:1;

}

/* ==========================================================
   SCENE
========================================================== */

#scene{

    position:absolute;

    inset:0;

    z-index:5;

}

/* ==========================================================
   TOOLBAR
========================================================== */

#toolbar{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:130px;

    padding-bottom:env(safe-area-inset-bottom);

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
            rgba(0,0,0,0),
            rgba(0,0,0,.72)
    );

    z-index:100;

}

/* ==========================================================
   SOURCE CANDLE
========================================================== */

#sourceCandle{

    width:42px;

    cursor:pointer;

    transition:
            transform .18s,
            opacity .25s;

}

#sourceCandle:hover{

    transform:scale(1.05);

}

#sourceCandle:active{

    transform:scale(1.15);

}

/* ==========================================================
   DRAGGING CANDLE
========================================================== */

.drag-candle{

    position:absolute;

    width:42px;

    transform:translate(-50%,-50%);

    pointer-events:none;

    z-index:200;

    transition:
            left .15s,
            top .15s;

}

/* ==========================================================
   PLACED CANDLE
========================================================== */

.placed-candle{

    position:absolute;

    width:26px;

    transform:translate(-50%,-100%);

    pointer-events:none;

    z-index:25;

}

/* ==========================================================
   FLAME
========================================================== */

.flame{

    position:absolute;

    left:50%;

    top:-13px;

    width:18px;

    transform:translateX(-50%);

    pointer-events:none;

    animation:flame 0.45s infinite alternate ease-in-out;

    filter:
            drop-shadow(0 0 10px orange)
            drop-shadow(0 0 18px gold);

}

/* ==========================================================
   SMOKE
========================================================== */

.smoke{

    position:absolute;

    left:50%;

    top:-30px;

    width:24px;

    transform:translateX(-50%);

    opacity:0;

    pointer-events:none;

}

/* ==========================================================
   ANIMATIONS
========================================================== */

@keyframes flame{

    from{

        transform:
                translateX(-50%)
                rotate(-3deg)
                scale(.94);

    }

    to{

        transform:
                translateX(-50%)
                rotate(3deg)
                scale(1.06);

    }

}

@keyframes smoke{

    0%{

        opacity:.65;

        transform:
                translate(-50%,0)
                scale(.8);

    }

    100%{

        opacity:0;

        transform:
                translate(-50%,-35px)
                scale(1.4);

    }

}

/* ==========================================================
   IPHONE
========================================================== */

@supports (padding:max(0px)){

    #toolbar{

        padding-bottom:max(
                env(safe-area-inset-bottom),
                18px
        );

    }

}

/* ==========================================================
   LANDSCAPE
========================================================== */

@media (orientation:landscape){

    #toolbar{

        height:100px;

    }

}

/* ==========================================================
   SMALL SCREENS
========================================================== */

@media (max-width:500px){

    #sourceCandle{

        width:36px;

    }

}