*{

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

}

body{

overflow:hidden;

background:#08111d;

}

canvas{

display:block;

margin:auto;

background:linear-gradient(#56b8ff,#9fe6ff);

}

/* ===========================
   iPad Kontrolleri
=========================== */

#controls{

    position:fixed;

    left:0;
    right:0;
    bottom:25px;

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    padding:0 40px;

    z-index:999;

    pointer-events:none;

}

#leftControls,
#rightControls{

    display:flex;

    gap:20px;

    pointer-events:auto;

}

#controls button{

    width:82px;
    height:82px;

    border:none;

    border-radius:50%;

    font-size:34px;

    font-weight:bold;

    color:white;

    background:rgba(25,25,25,.30);

    backdrop-filter:blur(10px);

    border:3px solid rgba(24,183,255,.65);
    
    box-shadow:0 0 20px rgba(24,183,255,.35);

    cursor:pointer;

    user-select:none;
    
    transition:.15s;

}

#controls button:active{

    transform:scale(.88);

    background:#18B7FF;

    box-shadow:0 0 35px #18B7FF;

}

/*==========================================
EDITOR BAR
==========================================*/

#editorBar{

    display:none;

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:60px;

    background:#2f2f2f;

    border-bottom:2px solid #444;

    z-index:9999;

    align-items:center;

    padding-left:15px;

}

#editorBar button{

    height:40px;

    margin-right:10px;

    padding:0 20px;

    border:none;

    background:#555;

    color:white;

    font-weight:bold;

    cursor:pointer;

}

#editorBar button:hover{

    background:#777;

}

/*==========================================
EDITOR PANEL
==========================================*/

#editorPanel{

    display:none;

    position:absolute;

    top:60px;

    left:120px;

    width:260px;

    background:#2f2f2f;

    border:2px solid #555;

    border-radius:8px;

    padding:10px;

    z-index:9999;

}

.editorItem{

    background:#555;

    color:white;

    padding:10px;

    margin-bottom:8px;

    border-radius:6px;

    cursor:pointer;

    font-weight:bold;

}

.editorItem:hover{

    background:#777;

}

.editorItem.selected{

    background:#2E8B57;

    border:2px solid #7CFC00;

}

.editorIcon{

    width:48px;
    height:48px;

    display:block;

    margin:8px auto;

}

.editorText{

    text-align:center;

    color:white;

    font-size:14px;

}

/*==================================================
FINISH SCREEN
==================================================*/

#finishScreen{

    position:fixed;

    left:0;
    top:0;

    width:100%;
    height:100%;

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

    display:none;

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

    z-index:9999;

}

#finishBox{

    background:#ffffff;

    padding:40px;

    border-radius:20px;

    text-align:center;

    min-width:400px;

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

}

#finishBox h1{

    font-size:60px;

    margin:0;

}

#finishBox h2{

    margin:20px 0;

    font-family:Arial;

}

#btnContinue{

    padding:15px 40px;

    font-size:22px;

    cursor:pointer;

    border:none;

    border-radius:10px;

}

.answerBtn{

    display:block;

    width:220px;

    margin:12px auto;

    padding:15px;

    font-size:24px;

    border:none;

    border-radius:12px;

    cursor:pointer;

}

.answerBtn:hover{

    background:#18B7FF;

    color:white;

}

#answerMessage{

    margin-top:20px;

    font-size:24px;

    font-weight:bold;

    text-align:center;

    min-height:35px;

}

#nextLevelBtn{

    display:inline-block;

    margin-top:20px;

    padding:15px 35px;

    font-size:22px;

    font-weight:bold;

    border:none;

    border-radius:12px;

    background:#18B7FF;

    color:white;

    cursor:pointer;

}

#nextLevelBtn:hover{

    background:#0A9BE0;

}