root { 
    display: block;
}

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

*, *:before, *:after {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}


input, input:before, input:after {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

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

#canvas{
    position: fixed;
 
}

canvas {
    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: 'Montserrat';
}
                
                
@font-face {
    font-family: 'Montserrat';
    src: url('Montserrat-Black.woff2') format('woff2'),
        url('Montserrat-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

.game-modal-overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.72);
    z-index: 9999;
}

.game-modal-card {
    width: min(900px, 90vw);
    max-height: 88vh;
    overflow: auto;
    border-radius: 26px;
    border: 6px solid #e3a130;
    background: #2a1003;
    box-shadow: inset 0 0 0 6px rgba(0, 0, 0, 0.2);
    padding: 28px 32px;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
}

.game-modal-card--report {
    width: min(980px, 92vw);
}

.game-modal-title {
    margin: 0 0 20px 0;
    font-size: 46px;
    text-align: center;
}

.game-form-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.game-form-grid label {
    font-size: 26px;
    color: #ffe9b7;
}

.game-form-grid input,
.game-form-grid select {
    width: 100%;
    box-sizing: border-box;
    border: 3px solid #f3d578;
    border-radius: 14px;
    padding: 10px 12px;
    font-size: 22px;
    color: #2a1003;
    background: #fff8dc;
    font-family: 'Montserrat', sans-serif;
}

.game-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

.game-form-row--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.game-form-row--contact {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.game-modal-button {
    margin-top: 18px;
    border: 3px solid #9a5d0f;
    border-radius: 14px;
    background: #f4b861;
    color: #2a1003;
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    font-weight: 900;
    padding: 10px 18px;
    cursor: pointer;
}

.game-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.game-report-content {
    background: rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    padding: 16px 20px;
    font-size: 22px;
    line-height: 1.35;
}

.game-report-content h3,
.game-report-content h4 {
    margin: 8px 0;
    color: #ffe9b7;
}

.game-report-content ul {
    margin: 8px 0 12px 22px;
}

.game-career-picks {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: center;
}

.game-form-error,
.game-form-status {
    margin: 14px 0;
    font-size: 18px;
    line-height: 1.4;
}

.game-form-error {
    color: #ffcfb3;
}

.game-modal-button:disabled {
    opacity: 0.6;
    cursor: wait;
}

.game-modal-actions[hidden] {
    display: none;
}

.game-test-badge {
    position: fixed;
    right: 8px;
    bottom: 8px;
    z-index: 10000;
    padding: 6px 10px;
    background: #fff8dc;
    color: #2a1003;
    font: 14px sans-serif;
    pointer-events: none;
}

@media (max-width: 640px) {
    .game-modal-card {
        padding: 18px;
        box-sizing: border-box;
    }
    .game-modal-title {
        font-size: 28px;
    }
    .game-form-row,
    .game-career-picks {
        grid-template-columns: 1fr;
    }
    .game-modal-actions {
        flex-wrap: wrap;
    }
    .game-modal-button {
        font-size: 20px;
    }
}

.game-career-select {
    width: 100%;
    box-sizing: border-box;
    border: 3px solid #f3d578;
    border-radius: 12px;
    padding: 10px;
    font-size: 20px;
    background: #fff8dc;
    color: #2a1003;
    font-family: 'Montserrat', sans-serif;
}

.orientation-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: none;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 24px;
    background: rgba(22, 10, 2, 0.96);
    color: #fff8dc;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}

.orientation-card {
    width: 100%;
    max-width: 440px;
}

.orientation-device {
    position: relative;
    width: 42px;
    height: 72px;
    margin: 0 auto 24px;
    border: 5px solid #f4b861;
    border-radius: 12px;
    animation: orientation-rotate 1.6s ease-in-out infinite alternate;
}

.orientation-device::after {
    position: absolute;
    bottom: 5px;
    left: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #f4b861;
    content: "";
    transform: translateX(-50%);
}

.orientation-card h1 {
    margin: 0 0 14px;
    font-size: 30px;
}

.orientation-card p {
    margin: 0 0 18px;
    font-size: 17px;
    line-height: 1.5;
}

.orientation-card button {
    border: 3px solid #9a5d0f;
    border-radius: 12px;
    padding: 12px 18px;
    background: #f4b861;
    color: #2a1003;
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;
    font-weight: 900;
    cursor: pointer;
}

.orientation-card .orientation-status {
    margin-top: 18px;
    color: #ffe9b7;
    font-size: 14px;
}

@keyframes orientation-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(90deg); }
}

@media (orientation: portrait) {
    .orientation-overlay {
        display: flex;
    }
}

@media (max-width: 480px) {
    .orientation-card h1 {
        font-size: 25px;
    }
    .orientation-card button {
        font-size: 15px;
    }
}