/*==========================================================
Storybook Voices

Puzzle Builder

puzzle.css

Ctrl+F

BODY

HEADER

WORKSPACE

LEFT LIBRARY

PUZZLE STAGE

OPTIONS PANEL

BOTTOM TOOLBAR

STATUS BAR

RESPONSIVE
==========================================================*/



/*==========================================================
BODY
==========================================================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

/*==========================================================
PUZZLE ROOM BACKGROUND
==========================================================*/

body{

    margin:0;

    min-height:100vh;

    overflow:hidden;

    font-family:Segoe UI,Arial,sans-serif;

    background:

        radial-gradient(circle at top left,
            rgba(255,214,230,.65),
            transparent 40%),

        radial-gradient(circle at top right,
            rgba(205,235,255,.60),
            transparent 42%),

        radial-gradient(circle at bottom left,
            rgba(225,255,220,.55),
            transparent 38%),

        radial-gradient(circle at bottom right,
            rgba(255,247,205,.60),
            transparent 40%),

        linear-gradient(

            135deg,

            #fbf8f2 0%,

            #f8f6f3 25%,

            #f5fbff 50%,

            #fffdf8 75%,

            #f9f7f3 100%

        );

    background-attachment:fixed;

}



/*==========================================================
PUZZLE ROOM
==========================================================*/

#puzzleRoom{

    position:relative;

    width:100vw;

    height:100vh;

}



/*==========================================================
HEADER
==========================================================*/

#headerBar{

    position:absolute;

    left:20px;

    top:20px;

    width:calc(100% - 40px);

    height:70px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 25px;

    background:rgba(255,255,255,.42);

backdrop-filter:blur(26px);

-webkit-backdrop-filter:blur(26px);

border-radius:28px;

border:1px solid rgba(255,255,255,.70);

box-shadow:

    0 20px 45px rgba(90,90,90,.10),

    inset 0 1px rgba(255,255,255,.75);
}

#logo{

    font-size:26px;

    font-weight:700;

    color:#34504d;

}

#roomTitle{

    font-size:28px;

    font-weight:700;

    color:#46605b;

}

#btnHome{

    width:170px;

    height:44px;

    border:none;

    border-radius:16px;

    background:#ffffffaa;

    cursor:pointer;

    font-size:18px;

}



/*==========================================================
WORKSPACE
==========================================================*/

#workspace{

    position:absolute;

    left:20px;

    top:110px;

    width:calc(100% - 40px);

    height:calc(100% - 210px);

    display:flex;

    gap:20px;

}



/*==========================================================
LEFT LIBRARY
==========================================================*/

#libraryPanel{

    width:260px;

    background:rgba(255,255,255,.28);

    backdrop-filter:blur(18px);

    border-radius:24px;

    border:1px solid rgba(255,255,255,.45);

    padding:20px;

    overflow-y:auto;

}

#libraryPanel h2{

    margin-bottom:18px;

    color:#40615d;

}

.libraryButton{

    width:100%;

    height:46px;

    margin-bottom:12px;

    border:none;

    border-radius:14px;

    background:rgba(255,255,255,.55);

    cursor:pointer;

    font-size:18px;

    transition:.25s;

}

.libraryButton:hover{

    transform:translateY(-2px);

    background:white;

}



/*==========================================================
PUZZLE STAGE
==========================================================*/

#stagePanel{

    flex:1;

    display:flex;

    align-items:center;

    justify-content:center;

}

#storyStage{

    position:relative;

    width:100%;

    height:100%;

    border-radius:28px;

    overflow:hidden;

    background:#faf8f1;

    border:1px solid rgba(255,255,255,.5);

    backdrop-filter:blur(14px);

    box-shadow:0 12px 30px rgba(0,0,0,.12);

}



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

#backgroundVideo{

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:1;

}

#backgroundImage{

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:2;

}



/*==========================================================
PUZZLE CANVAS
==========================================================*/

#puzzleCanvas{

    position:absolute;

    left:50%;

    top:50%;

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

    width:720px;

    height:720px;

    z-index:20;

    display:flex;

    align-items:center;

    justify-content:center;

}



/*==========================================================
OPTIONS PANEL
==========================================================*/

#optionsPanel{

    width:300px;

    background:rgba(255,255,255,.28);

    backdrop-filter:blur(18px);

    border-radius:24px;

    border:1px solid rgba(255,255,255,.45);

    padding:22px;

    overflow-y:auto;

}

#optionsPanel h2{

    color:#3f5e59;

    margin-bottom:20px;

}

#optionsPanel h3{

    margin-top:18px;

    margin-bottom:10px;

    color:#4b6c67;

}

.shapeButton{

    width:100%;

    height:44px;

    margin-bottom:10px;

    border:none;

    border-radius:14px;

    background:white;

    cursor:pointer;

    font-size:18px;

}

.shapeButton:hover{

    background:#fdf7df;

}

#optionsPanel button{

    width:100%;

    height:44px;

    margin-top:10px;

    border:none;

    border-radius:14px;

    background:#ffffffcc;

    cursor:pointer;

    font-size:18px;

}

#backgroundColor{

    width:100%;

    height:42px;

    margin-bottom:12px;

    cursor:pointer;

}



#clearBackground{

    width:100%;

    height:42px;

    border:none;

    border-radius:14px;

    background:rgba(255,255,255,.75);

    cursor:pointer;

    font-size:18px;

    transition:.25s;

}



#clearBackground:hover{

    background:white;

    transform:translateY(-2px);

}


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

#toolbar{

    position:absolute;

    left:20px;

    bottom:60px;

    width:calc(100% - 40px);

    height:60px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:16px;

    background:rgba(255,255,255,.28);

    backdrop-filter:blur(18px);

    border-radius:22px;

    border:1px solid rgba(255,255,255,.45);

}

#toolbar button{

    width:140px;

    height:42px;

    border:none;

    border-radius:14px;

    background:white;

    cursor:pointer;

    font-size:18px;

}



/*==========================================================
STATUS BAR
==========================================================*/

#statusBar{

    position:absolute;

    left:20px;

    bottom:15px;

    width:calc(100% - 40px);

    height:34px;

    display:flex;

    align-items:center;

    padding-left:20px;

    border-radius:18px;

    background:rgba(255,255,255,.22);

    backdrop-filter:blur(18px);

    color:#35514e;

    font-size:17px;

}



/*==========================================================
RESPONSIVE
==========================================================*/

@media(max-width:1200px){

#workspace{

    flex-direction:column;

}

#libraryPanel{

    width:100%;

    height:180px;

}

#optionsPanel{

    width:100%;

    height:300px;

}

#puzzleCanvas{

    width:520px;

    height:520px;

}

}



@media(max-width:700px){

#roomTitle{

    font-size:22px;

}

#logo{

    font-size:20px;

}

#btnHome{

    width:120px;

}

#puzzleCanvas{

    width:320px;

    height:320px;

}

#toolbar{

    flex-wrap:wrap;

    height:auto;

    padding:12px;

}

#toolbar button{

    width:120px;

}

}