/*
    Copyright PRO TV S.A. All rights reserved.
    Contact: @protv.ro
*/
@charset 'utf-8';
@import 'style.css';

canvas {
    cursor: pointer;
}
.pixelated {
    image-rendering: pixelated;
}
.game-wrapper {
    width: 720px;
    height: auto;
    background-color: var(--primary-base);
    border-radius: 30px;
    margin: 0 auto;
}
.game-header {
    display: flex;
    width: 100%;
    justify-content: space-between;
    color: var(--white);
    font-family: var(--main-font);
    font-size: 28px;
    margin-bottom: 20px;
}
#score {
    margin-left: 50px;
    padding: 4px;
    color: white;
    font-weight: 600;
}
#score span {
    color: #000;
}
#timer {
    min-width: 180px;
    margin-right: 50px;
    background-color: var(--white);
    color: var(--primary-base);
    padding: 4px 6px;
    font-weight: 600;
    user-select: none;
}
#timer span {
    color: var(--black);
    min-width: 40px;
    display: inline-block;
}
.game-end-screen {
    width: 640px;
    height: calc(100% - 70px);
    top: 70px;
    background-color: rgba(21,21,21,0.7);
}
.game-end-screen.hide {
    display: none !important;
}
.game-end-screen a {
    width: var(--button-width-desktop);
    border-radius: var(--button-radius);
    font-size: var(--font-size-btn);
    font-weight: var(--betano-font-weight-bold);
    font-family: var(--main-font);
    padding: var(--button-padding);
    text-align: center;
    cursor: pointer;
}
.replay-icon {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxNyAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAuMTcyMzYzIDcuMTI5MjNDMC4xNzIzNjMgNy42ODcxNyAwLjYyMzA5MSA4LjEzNzk0IDEuMTgwOTggOC4xMzc5NEMxLjczODg4IDguMTM3OTQgMi4xODk2IDcuNjg3MTcgMi4xODk2IDcuMTI5MjNDMi4xODk2IDUuNDU4NTUgMy41NDQ5NCA0LjEwMzEgNS4yMTU0NyA0LjEwMzFIMTAuMjU4NlY1LjExMTgxQzEwLjI1ODYgNS41MTg0NSAxMC41MDQ0IDUuODg3MjYgMTAuODgyNyA2LjA0NDg3QzExLjI2MDkgNi4yMDI0OCAxMS42OTI3IDYuMTE0MjEgMTEuOTgyNyA1LjgyNzM2TDEzLjk5OTkgMy44MDk5NUMxNC4zOTM5IDMuNDE1OTIgMTQuMzkzOSAyLjc3NjAyIDEzLjk5OTkgMi4zODE5OUwxMS45ODI3IDAuMzY0NTc3QzExLjY5MjcgMC4wNzQ1NzM2IDExLjI2MDkgLTAuMDEwNTM2MSAxMC44ODI3IDAuMTQ3MDc1QzEwLjUwNDQgMC4zMDQ2ODUgMTAuMjU4NiAwLjY3MDM0MiAxMC4yNTg2IDEuMDc2OThWMi4wODU2OUg1LjIxNTQ3QzIuNDI5MTUgMi4wODU2OSAwLjE3MjM2MyA0LjM0MjY3IDAuMTcyMzYzIDcuMTI5MjNaTTE2LjMxMDMgOS4xNDY2NEMxNi4zMTAzIDguNTg4NyAxNS44NTk2IDguMTM3OTQgMTUuMzAxNyA4LjEzNzk0QzE0Ljc0MzggOC4xMzc5NCAxNC4yOTMxIDguNTg4NyAxNC4yOTMxIDkuMTQ2NjRDMTQuMjkzMSAxMC44MTczIDEyLjkzNzcgMTIuMTcyOCAxMS4yNjcyIDEyLjE3MjhINi4yMjQwOVYxMS4xNjQxQzYuMjI0MDkgMTAuNzU3NCA1Ljk3ODI0IDEwLjM4ODYgNS42IDEwLjIzMUM1LjIyMTc3IDEwLjA3MzQgNC43ODk5NiAxMC4xNjE3IDQuNDk5OTggMTAuNDQ4NUwyLjQ4Mjc0IDEyLjQ2NTlDMi4wODg3NCAxMi44NiAyLjA4ODc0IDEzLjQ5OTkgMi40ODI3NCAxMy44OTM5TDQuNDk5OTggMTUuOTExM0M0Ljc4OTk2IDE2LjIwMTMgNS4yMjE3NyAxNi4yODY0IDUuNiAxNi4xMjg4QzUuOTc4MjQgMTUuOTcxMiA2LjIyNDA5IDE1LjYwNTUgNi4yMjQwOSAxNS4xOTU3VjE0LjE5MDJIMTEuMjY3MkMxNC4wNTM1IDE0LjE5MDIgMTYuMzEwMyAxMS45MzMyIDE2LjMxMDMgOS4xNDY2NFoiIGZpbGw9IiNGRjY5MDAiLz4KPC9zdmc+Cg=='); 
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 30px;
    height: 30px;
}
.restart-btn {
    color: var(--primary-base) !important;
    background-color: var(--white);
    margin-right: 10px;
    height: var(--button-height);
}
.restart-btn:hover {
    background-color: var(--primary-base);
    color: var(--white) !important;
}
.restart-btn:hover .replay-icon{
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI4LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNyAxNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTcgMTc7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTAuMiw3LjFjMCwwLjYsMC41LDEsMSwxYzAuNiwwLDEtMC41LDEtMWMwLTEuNywxLjQtMywzLTNoNXYxYzAsMC40LDAuMiwwLjgsMC42LDAuOWMwLjQsMC4yLDAuOCwwLjEsMS4xLTAuMgoJbDItMmMwLjQtMC40LDAuNC0xLDAtMS40bC0yLTJjLTAuMy0wLjMtMC43LTAuNC0xLjEtMC4yYy0wLjQsMC4yLTAuNiwwLjUtMC42LDAuOXYxaC01QzIuNCwyLjEsMC4yLDQuMywwLjIsNy4xeiBNMTYuMyw5LjEKCWMwLTAuNi0wLjUtMS0xLTFjLTAuNiwwLTEsMC41LTEsMWMwLDEuNy0xLjQsMy0zLDNoLTV2LTFjMC0wLjQtMC4yLTAuOC0wLjYtMC45Yy0wLjQtMC4yLTAuOC0wLjEtMS4xLDAuMmwtMiwyCgljLTAuNCwwLjQtMC40LDEsMCwxLjRsMiwyYzAuMywwLjMsMC43LDAuNCwxLjEsMC4yQzYsMTYsNi4yLDE1LjYsNi4yLDE1LjJ2LTFoNUMxNC4xLDE0LjIsMTYuMywxMS45LDE2LjMsOS4xeiIvPgo8L3N2Zz4K');
}
.quiz-btn {
    color: var(--white);
    background-color: var(--primary-base);
    margin-left: 10px;
    height: var(--button-height);
}
.quiz-btn:hover {
    color: var(--primary-base) !important;
    background-color: var(--white);
}

@media (max-width: 768px) and (orientation: portrait) {
    canvas {
        max-width: 90%;
        width: 100%; 
        min-width: 320px;
        height: auto;
    }
    .game-wrapper {
        max-width: 90%;
        width: auto;
        min-width: 350px;
        height: auto;
    }
    .game-header {
        font-size: 16px;
        margin-bottom: 10px;
    }
    .game-end-screen {
        max-width: 90%;
        width: 100%; 
        min-width: 320px;
        height: calc(100% - 42px);
        top: 42px;
    }
    .game-end-screen a {
        width: 130px;
        height: 30px;
        font-size: 16px;
        line-height: 10px;
    }
    #timer {
        min-width: 80px;
        margin-right: 16px;
    }
    #timer span {
        min-width: 30px;
    }
    #score {
        margin-left: 10px;
    }
    .replay-icon {
        width: 20px;
        height: 20px;
    }
}
@media (min-width: 500px) and (max-width: 1200px) and (orientation: landscape) {
    canvas {
        width: 400px;
        height: auto;
    }
    .game-wrapper {
        width: 440px;
        height: auto;
    }
    .game-header {
        font-size: 16px;
        margin-bottom: 10px;
    }
    .game-end-screen {
        width: 400px;
        height: calc(100% - 42px);
        top: 42px;
    }
    .game-end-screen a {
        width: 130px;
        height: 30px;
        font-size: 16px;
        line-height: 10px;
    }
    #score {
        margin-left: 15px;
    }
    #timer {
        margin-right: 20px;
        min-width: 120px;
    }
}