root { 
    display: block;
}

body{
    background-color: #000;
    background-repeat: repeat-x;
    background-position: top;   
}

*, *:before, *:after {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
     
input, input:before, input:after {
    -webkit-user-select: initial;
    -khtml-user-select: initial;
    -moz-user-select: initial;
    -ms-user-select: initial;
    user-select: initial;
}

::selection { background: transparent;color:inherit; }
::-moz-selection { background: transparent;color:inherit; }

#canvas{
    position: fixed;  
}

canvas {
    image-rendering: optimizeSpeed;
    image-rendering:-o-crisp-edges;
    image-rendering:-webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
	-ms-touch-action: none;
}

.ani_hack{
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
    
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: none;
    -webkit-tap-highlight-color: transparent; /* mobile webkit */
}

/***************FONTS*******************/
.check-fonts{
                position: fixed;
                opacity:0;
}

.check-font-1{
        font-family: 'upheaval_tt_brkregular';
}
                
@font-face {
    font-family: 'upheaval_tt_brkregular';
    src: url('upheavtt-webfont.eot');
    src: url('upheavtt-webfont.eot?#iefix') format('embedded-opentype'),
         url('upheavtt-webfont.woff2') format('woff2'),
         url('upheavtt-webfont.woff') format('woff'),
         url('upheavtt-webfont.ttf') format('truetype'),
         url('upheavtt-webfont.svg#upheaval_tt_brkregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

.block-game {
  position: fixed;
  inset: 0;
  background: transparent;
  display: none;
}

html, body {
    background: #eef3fb; 
    color: #fff;
    overflow: hidden;
    touch-action: none;
    -ms-touch-action: none;
    transition: background-color 0.2s ease; 
}

html[data-theme="dark"], html[data-theme="dark"] body {
    background: #0d1b2a; 
}

.modal-overlay {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.8); z-index: 1000;
        display: none; justify-content: center; align-items: center;
        font-family: Arial, sans-serif;
    }
    .modal-content {
        background: #2a2a2a; border: 2px solid #555; border-radius: 10px;
        padding: 20px; text-align: center; color: #fff;
        max-width: 90%; width: 400px; box-shadow: 0 0 20px rgba(0,0,0,0.5);
    }
    .modal-content h2 { color: #ffff21; margin-top: 0; }
    .modal-btn {
        background: #ffff21; color: #000; border: none; padding: 10px 20px;
        margin: 5px; font-size: 16px; font-weight: bold; border-radius: 5px;
        cursor: pointer; text-transform: uppercase;
    }
    .modal-btn:hover { background: #fff; }
    
    .modal-input {
        width: 80%; 
        padding: 10px; 
        font-size: 18px; 
        margin: 15px 0;
        text-align: center; 
        border-radius: 5px; 
        border: none; 
        outline: none;
        background-color: #ffffff; 
        color: #000000;            
    }
    
    /* Share Buttons */
    .share-container { display: flex; justify-content: center; gap: 15px; margin-top: 20px; }
    .share-btn { width: 50px; height: 50px; cursor: pointer; fill: #fff; transition: transform 0.2s; }
    .share-btn:hover { transform: scale(1.1); }
    .share-wa { fill: #25D366; }
    .share-x { fill: #1DA1F2; }

    /* Scoreboard List */
    #score-list {
        list-style: none; padding: 0; margin: 15px 0; max-height: 50vh;
        overflow-y: auto; background: #1a1a1a; border-radius: 5px;
    }
    #score-list li {
        display: flex; justify-content: space-between; padding: 10px;
        border-bottom: 1px solid #333; font-size: 18px; align-items: center;
    }
    #score-list li:last-child { border-bottom: none; }
    
    /* Top 3 Styling (Gold, Silber, Bronze) */
    #score-list li.rank-1 { background: rgba(255, 215, 0, 0.2); color: #FFD700; font-weight: bold; font-size: 22px; }
    #score-list li.rank-2 { background: rgba(192, 192, 192, 0.2); color: #C0C0C0; font-weight: bold; font-size: 20px; }
    #score-list li.rank-3 { background: rgba(205, 127, 50, 0.2); color: #CD7F32; font-weight: bold; font-size: 20px; }
    
    .medal::before { margin-right: 10px; }
    .rank-1 .medal::before { content: '🥇'; }
    .rank-2 .medal::before { content: '🥈'; }
    .rank-3 .medal::before { content: '🥉'; }

    /* Trophy Button (Main Screen) */
    #trophy-btn {
        position: fixed; bottom: 20px; left: 20px; width: 50px; height: 50px;
        background: rgba(0,0,0,0.5); border-radius: 50%; padding: 10px;
        cursor: pointer; z-index: 900; transition: transform 0.2s;
    }
    #trophy-btn:hover { transform: scale(1.1); }
    #trophy-btn svg { fill: #FFD700; width: 100%; height: 100%; }