/* Base style
   ========================================================================== */
   
/* Fonts */
@font-face {
   font-family: 'geoform-heavy';
   src: url('fonts/geoform-heavy.woff2') format('woff2'),
       url('fonts/geoform-heavy.woff') format('woff');
   font-weight: 900;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'geoform-bold';
   src: url('fonts/geoform-bold.woff2') format('woff2'),
       url('fonts/geoform-bold.woff') format('woff');
   font-weight: 900;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'kimberley';
   src: url('fonts/kimberley-black.woff2') format('woff2'),
       url('fonts/kimberley-black.woff') format('woff');
   font-weight: 900;
   font-style: normal;
   font-display: swap;
}

html{ -webkit-user-select: none; -ms-user-select: none; user-select: none; background:#000000; }

/*-- Percent Loader -- */
#mainLoader{
    position: fixed;
    z-index: 5;
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-size: 25px;
    line-height: 1.4;
    color: #fff;
    text-align: center;
    font-family: 'geoform-heavy';
    background: #000;
    box-sizing: border-box;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#mainLoader img{
    display: block;
    max-width: min(60vw, 400px);
    max-height: 40vh;
    width: auto;
    height: auto;
}

/*-- Content Wrapper -- */
#mainHolder{ position:absolute; width:100%;height:100%;}

/*-- Browser Not Support -- */
#notSupportHolder{ position:relative; width:90%; margin:2% auto; color:#fff; text-align:center; font-size:25px; font-family:'geoform-heavy'; display:none; }

/*-- Rotate Animation -- */
@-moz-keyframes spin { 50% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(0deg); } }
@-webkit-keyframes spin { 50% { -webkit-transform: rotate(90deg); } 100% { -webkit-transform: rotate(0deg); } }
@keyframes spin { 50% { -webkit-transform: rotate(90deg); transform:rotate(90deg); } 100% { -webkit-transform: rotate(90deg); transform:rotate(90deg); } }

/*-- Canvas Wrapper -- */
#canvasHolder{ position:relative; width:100%; max-width:1280px; height:100%; margin:auto; display:none; }
canvas{ position:fixed; }

/*-- Form Wrapper -- */
.clearfix:after { content: "."; visibility: hidden; display: block; clear: both;}

#gameCanvasBackground {
    background-image: url('../assets/background.png');
    background-size: cover;
    background-position: center;
}

#backgroundRotate {
        position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 100%;      /* або будь-який потрібний розмір */
    height: 450px;     /* зберігай пропорції */
    background-image: url('../assets/rotate.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    z-index: 20;
    display: none; /* показуй тільки коли пауза */
}

#backgroundPause {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(504px, 90vw);
    height: calc(min(504px, 90vw) * 345 / 504);
    background-image: url('../assets/pauseWin.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    z-index: 20;
    display: none;
}