/*KGARMIRE, 2023-02-24*/


*{
    /*Keep it inside 100%*/
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
*:focus{outline:0; }

:root {
    /*https://sashamaps.net/docs/resources/20-colors/*/
    --c0 : white;
    --c1 : gold;
    --c2 : #4363d8;
    --c3 : #911eb4;
    --c4 : #f58231;
    --c5 : #e6194B;
    --c6 : #3cb44b;
    --c7 : #42d4f4;
    --c8 : #ffd8b1;

    --c2a : #4363d855;
    --c3a : #911eb455;
    --c4a : #f5823155;
    --c5a : #e6194B55;
    --c6a : #3cb44b55;
    --c7a : #42d4f455;
    --c8a : #ffd8b155;

    --p0 : crimson;
    --p1 : steelblue;

    --board-size : 600px;
    --title-font:'Righteous', monospace;

    --z-main : 0;
    --z-cursor : 1;
    --z-reminder : 2;
    --z-wipe : 3;
    --z-modal : 4;
    --z-final-pip : 6;
    --z-crown : 7;
}

html, body{
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
}

body{
    overflow:hidden;
    background-color: #121212;
    font-family: var(--title-font);
    color:white;

    overflow: hidden;
}


.flex{display:flex}
.flex-c{display:flex; flex-direction: column;}
.fill{width:100%;height:100%;}
.w-fill{width:100%;height:auto;}
.h-fill{height:100%;width:auto;}
.center{margin:auto}
.v-center{margin:auto 0}
.ghost{opacity: 15%}
.flip-y{transform: scaleY(-1);}
.flip{transform: scale(-1);}

.no-context-menu {
    -webkit-user-select: none; /* disable selection/Copy of UIWebView */
    -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
}
.monospace{
    font-family: "Roboto Mono", monospace;
}

main{
    display: flex;
    flex-direction: column;
    height:100%;
    max-width: 600px;
    width: var(--board-size);
    margin:0 auto;
    position:relative;
}
main.hidden{
    display: none;
}

/*-------------- BOARD ---------------*/
#board{
    height:var(--board-size);
    max-height:600px;
    width:100%;

    display:grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap:8px;

    padding:12px;

/*    margin:auto 0;*/

    transition: 0.5s;
}

#indicator-0 {
    background:transparent;
    height:24px;
    width:100%;
    margin: auto auto 0 auto;
    transition: 0.5s;
}
#indicator-1 {
    background:transparent;
    height:24px;
    width:100%;
    margin: 0 auto auto auto;
    transition: 0.5s;
}

#indicator-0.active{background-color: var(--p0); }
#indicator-1.active{background-color: var(--p1); }

/*--------------- BOX ----------------*/
.cell{
    height:100%;
    width:100%;
    display:flex;
}

.box {
    display:none;
    background-color: #acacac;
    height: 100%;
    width: 100%;
    margin:auto;

    border-radius: 25%;

/*    transition:0.4s;*/
}

.dot {
    display:none;
    height:20%;
    width:20%;
    margin:40%;

    background-color:#121212;
    border-radius: 999px;
}



#cursor {
    display:flex;
    position:absolute;
    z-index: var(--z-cursor);
}

#cursor .circle{
    display:none;
    background-color: white;
    margin:auto;

    height:80%;
    width:80%;

    border-radius: 999px;
}


.box.c1{
    background-color: var(--gold);
    clip-path: polygon(
        0 30%,
        30% 0,
        70% 0,
        100% 30%,
        100% 70%,
        70% 100%,
        30% 100%,
        0% 70%,
        0% 30%
      )
}



/*------------ SCORE-CONT ------------*/
.score-tray{
    display:grid;
    grid-template-columns: repeat(7, 1fr);
    height: 64px;
    width:100%;
    gap:8px;
}

.score-tray.final{
    z-index: var(--z-final-pip);
}

.score-cont, .pip-cont{
    display: flex;
    align-items: center;
    justify-content: center;
    transition:0.4s;
}
.score-cont.col{
    flex-direction: column;
}

#score-0 .score-cont{border-bottom:4px solid red; }
#score-1 .score-cont{border-top:4px solid red; }

#score-0 .score-cont.c2, #score-1 .score-cont.c2{border-color:var(--c2);}
#score-0 .score-cont.c3, #score-1 .score-cont.c3{border-color:var(--c3);}
#score-0 .score-cont.c4, #score-1 .score-cont.c4{border-color:var(--c4);}
#score-0 .score-cont.c5, #score-1 .score-cont.c5{border-color:var(--c5);}
#score-0 .score-cont.c6, #score-1 .score-cont.c6{border-color:var(--c6);}
#score-0 .score-cont.c7, #score-1 .score-cont.c7{border-color:var(--c7);}
#score-0 .score-cont.c8, #score-1 .score-cont.c8{border-color:var(--c8);}

.score-cont.c2.flag{background-color:var(--c2a);}
.score-cont.c3.flag{background-color:var(--c3a);}
.score-cont.c4.flag{background-color:var(--c4a);}
.score-cont.c5.flag{background-color:var(--c5a);}
.score-cont.c6.flag{background-color:var(--c6a);}
.score-cont.c7.flag{background-color:var(--c7a);}
.score-cont.c8.flag{background-color:var(--c8a);}


.pip{
    height:8px;
    width:8px;

    border-radius: 999px;
    background-color: #444;
    margin:4px;
    transition:0.4s;
/*    transition: outline 0s;*/
}

.score-cont.flag .pip:not(.active){background-color: #121212}
.score-cont.c2 .pip.active{background-color: var(--c2)}
.score-cont.c3 .pip.active{background-color: var(--c3)}
.score-cont.c4 .pip.active{background-color: var(--c4)}
.score-cont.c5 .pip.active{background-color: var(--c5)}
.score-cont.c6 .pip.active{background-color: var(--c6)}
.score-cont.c7 .pip.active{background-color: var(--c7)}
.score-cont.c8 .pip.active{background-color: var(--c8)}

.gold-pip{
    height:8px;
    width:8px;
    margin:4px;

    clip-path: polygon(
        0 30%,
        30% 0,
        70% 0,
        100% 30%,
        100% 70%,
        70% 100%,
        30% 100%,
        0% 70%,
        0% 30%
    );

    background-color: var(--c1);
    display: none;
}


/*====================================*/
/*               MODALS               */
/*====================================*/

#modal-cont{
    display:none;
    position: absolute;
    top:0;
    left:0;

    height: 100%;
    width:100%;

    z-index: var(--z-modal);
}

.modal{
    display:none;
    margin:0 auto;
}
.modal.active{
    display:block;
}

.modal button.confirm{
    background: transparent;
    border: 2px solid white;
    border-radius: 8px;
    color: white;
    font-family: var(--title-font);
    font-size: 1.2rem;
    height: 64px;
    width: 256px;
    transition: 0.4s;
}

.modal button.confirm.active{color:black; background-color: white}

/*.modal button.confirm.p0.active{color:white;background-color: var(--p0); border-color: var(--p0);}
.modal button.confirm.p1.active{color:white;background-color: var(--p1); border-color: var(--p1);}*/

/*---------- CAPTURE MODALS ----------*/
.capture .cont{
    display: grid;
    grid-template-rows: 1fr auto auto 1fr;
    height: 100%;
    width: 100%;
    margin: auto;
    align-items: center;
    justify-content: center;
}

.modal-title{
    text-align: center;
    width: 100%;
    font-size: 3rem;
    margin: 0;
    font-family: var(--title-font);
}

.capture button.confirm{
    margin:auto auto 48px auto;
}

.capture button img{
    height:50%;
    width:50%;
}
.capture button p{margin:0; }

.capture .memo{
    font-size: 0.9rem;
    text-align: center;
    margin: 0;
}

.peek {
    font-size: 0.8rem !important;
    width: 100% !important;
    height: auto !important;
    display: grid;
    padding: 12px;
    grid-template-columns: 32px 1fr;
    gap: 8px;
    margin: 48px auto auto auto;
}

.peek img{
    height: 32px !important;
    width: auto !important;
}


/*....... TOTAL CAPTURE MODAL ........*/

#total-capture .grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-gap:16px;
    margin:auto;
}

/*........ GOLD CAPTURE MODAL ........*/

#gold-capture .main-grid{
    height:calc(100% - 140px);
    margin-top:70px;
}

#gold-capture .grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:8px;
    margin:8px auto;
}

#gold-capture .box{
    display:flex;
    height:82px;
    width: 82px;
}


#gold-capture button.c2{background-color: var(--c2)}
#gold-capture button.c3{background-color: var(--c3)}
#gold-capture button.c4{background-color: var(--c4)}
#gold-capture button.c5{background-color: var(--c5)}
#gold-capture button.c6{background-color: var(--c6)}
#gold-capture button.c7{background-color: var(--c7)}
#gold-capture button.c8{background-color: var(--c8)}

#gold-capture .box .check{
    display: none;
    margin:auto;
}
#gold-capture .box.active .check{
    display: block;
}


/*-------- WELCOME MODAL  --------*/

#welcome .grid{
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: 48px 0;
    height: 100%;
}



/*------- POST GAME MODAL  -------*/

#post-game .grid{
    display:grid;
    grid-template-rows: 72px auto 1fr 128px 1fr auto 72px;
    width:100%;
    height:100%;
}

#post-game .crown{
    width: 88px;
    height: auto;
    margin:0 auto;
}


/*--------------- WIPE ---------------*/

#wipe{
    position: absolute;
    top:0;
    left:0;
    z-index: var(--z-modal);

    height:100%;
    width:100%;

    display: none;
}
#wipe.final{
    height:calc(100% - 140px);
    margin-top: 70px;
}

#wipe-color{
    height:100%;
    width:100%;
    background-color: #121212;

    margin:auto;
}

.title{
    display:none;
    position: absolute;
    text-align: center;
    width: 100%;
    font-size: 3rem;
    margin: 0;
}

.title.top{bottom:50%}
.title.bottom{top: 50%;}

/*------------- REMINDER -------------*/

#reminder{
    position: absolute;
    top:0;
    left:0;
    z-index: var(--z-reminder);

    height:100%;
    width:100%;

    pointer-events: none;

    display: none;
}

#reminder p{
    margin: auto auto 72px auto;
    background-color: rgba(255,255,255, 0.4);
    color: white;
    border-radius: 99px;
    text-transform: uppercase;
    padding: 8px 16px;
}