:root {
    --orange: rgba(255, 165, 0, 1);
    --snakeeyes_red: rgba(187, 8, 8, 0.9);
    --snakeeyes_yellow: rgba(255, 255, 0, 1);
    --info_red: rgba(160, 2, 2, 0.95);
    --info_green_light: rgba(51, 255, 51, 1);
    --info_green_light-2: rgba(135, 253, 135, 1);
    --info_green: rgb(2, 105, 75, 0.95);
    --bg_blue_1: rgba(40, 85, 154, 1);
    --darken_1: rgba(0, 0, 0, 0.1);
    --darken_2: rgba(0, 0, 0, 0.2);
    --darken_3: rgba(0, 0, 0, 0.3);
    --darken_4: rgba(0, 0, 0, 0.4);
    --darken_5: rgba(0, 0, 0, 0.5);
    --darken_6: rgba(0, 0, 0, 0.6);
    --darken_7: rgba(0, 0, 0, 0.7);
    --darken_8: rgba(0, 0, 0, 0.8);
    --darken_9: rgba(0, 0, 0, 0.9);
    --lighten_1: rgba(255, 255, 255, 0.1);
    --lighten_2: rgba(255, 255, 255, 0.2);
    --lighten_3: rgba(255, 255, 255, 0.35);
    --lighten_4: rgba(255, 255, 255, 0.4);
    --lighten_5: rgba(255, 255, 255, 0.5);
    --lighten_6: rgba(255, 255, 255, 0.6);
    --lighten_7: rgba(255, 255, 255, 0.7);
    --lighten_8: rgba(255, 255, 255, 0.8);
    --lighten_9: rgba(255, 255, 255, 0.9);
    --arrow_size_factor: 7px;
    --size_factor_dot: 1.8vh;
    /* factor: 15x ; image actual size: 3000px * 200px */
    --img_size_base: 4vh;
}

/* orbitron-regular - latin */
@font-face {
    font-display: swap;
    font-family: 'Orbitron';
    font-style: normal;
    font-weight: 400;
    src: url('./f/orbitron-v31-latin-regular.woff2') format('woff2');
}

/* orbitron-600 - latin */
@font-face {
    font-display: swap;
    font-family: 'Orbitron';
    font-style: normal;
    font-weight: 600;
    src: url('./f/orbitron-v31-latin-600.woff2') format('woff2');
}

/* roboto-condensed-regular - latin */
@font-face {
    font-display: swap;
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 400;
    src: url('./f/roboto-condensed-v27-latin-regular.woff2') format('woff2');
}


body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Roboto Condensed', arial, helvetica, sans-serif;
    font-size: 100%;
    color: #fff;
    background-color: #000;
    /* border-color: #fff; */
}

body {
    /* background-color: #000; */
    /* border-color: #fff; */
}

/* begin: experimental  */

/* - attempt to prevent accidental reloads.  */
/* 
body, html {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    overscroll-behavior: contain;
}

div {
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}
 */

 /* end: experimental  */



p {
    text-wrap: pretty;
}

.container {
    width: 100vw;
    height: 100%;
    min-height: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    background-color: var(--bg_blue_1);
}
    .container.pwa {
        border-bottom: 25px solid #000;
    }

.rainbow .container {
    background-color: rgb(51, 51, 51, 1);
}


.header {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--darken_7);
    background-color: var(--lighten_2);
}
.rainbow .header {
    background-color: var(--lighten_1);
}

.hamburger {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    margin: auto 3vw;
    width: 2.5vh;
    height: 2.5vh;
}
.patties {
    align-self: center;
    width: 0.5vh;
    height: 0.5vh;
    background-color: #fff;
    cursor: pointer;
}

.navbar {
    padding: 1vh;
    display: flex;   
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--darken_3);
    overflow: scroll;
    z-index: 20;
}
    .navbar.infoscreen_showing {
        background-color: #000;
    }
    .navbar.infoscreen_showing .nav > div:nth-of-type(1),
    .navbar.infoscreen_showing .nav > div:nth-of-type(2) {
        visibility: hidden;
    }

.nav {
    display: flex;
    gap: 1.2vh;
}

.info_header .closer,
.nav > div {
    /* factor: 15x ; image size: 3000px * 200px */
    background-image: url('./i/deeces_icons_sprite.png');
    background-size: 60vh 4vh; 
    background-repeat: no-repeat;
    background-color: transparent;
    cursor: pointer;
    height: 4vh;
    width: 4vh;
}

.show_hints {
    background-position: -52vh 0;
}
    .hints .show_hints {
        background-position: -56vh 0;
    }

.hold {
    background-position: -36vh 0;
}
.right .hold {
    background-position: -40vh 0;
}

.repaint {
    background-position: -32vh 0;
}

.nav .rainbow_btn {
    background-image: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rainbow_btn_wrapper {
    border: 1px solid #fff;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 2.5vh;
    height: 2.5vh;
}

.rainbow_btn_wrapper div:nth-child(1) {
    background-color: #dc3833;
}
.rainbow .rainbow_btn_wrapper div:nth-child(1) {
    background-color: hsl(0, 0%, 53%);
}

.rainbow_btn_wrapper div:nth-child(2) {
    background-color: #f5ce49;
}
.rainbow .rainbow_btn_wrapper div:nth-child(2) {
    background-color: hsl(0, 0%, 62%);
}

.rainbow_btn_wrapper div:nth-child(3) {
    background-color: #437d4f;
}
.rainbow .rainbow_btn_wrapper div:nth-child(3) {
    background-color: hsl(0, 0%, 38%);
}

.rainbow_btn_wrapper div:nth-child(4) {
    background-color: #315ea4;
}
.rainbow .rainbow_btn_wrapper div:nth-child(4) {
    background-color: hsl(0, 0%, 42%);
}

.show_stats {
    background-position: -44vh 0;
}

.show_leaders {
    background-position: -48vh 0;
}

.show_about {
    background-position: -16vh 0;
}

.about_info {
    font-size: 1.2rem;
    margin: 0 1vh 5vh;
}

.about_info ul {
    margin: 0;
    padding: 1vh;
}
    .about_info ul.toc {
        list-style-type: none;
        font-size: 1rem;
        padding-left: 0;
    }
.about_info li {
    margin: 1vh;
    padding: 0;
}

.about_info h1 {
    border-top: 1px solid var(--lighten_3);
    font-size: 1.5rem;
    color: var(--info_green_light);
    margin: 3vh 0 0;
    padding: 1vh 0;
}

.about_info h2 {
    font-size: 1.3rem;
    color: rgb(135, 253, 135);
    color: var(--info_green_light-2);
    margin: 3vh 0 0;
    padding: 0;
}

.info_more {
    margin: 0;
    font-size: 1rem;
    font-style: italic;
}

.info_more_list li {
    margin: 0 0 0 1vh;
    padding: 0;
}

.about_info a[name] {
    scroll-margin-top: 7vh;
}

.entities {
    font-size: 1.5rem;
    line-height: 1.2rem;
    letter-spacing: 3px;
}

.version {
    font-size: 0.9rem;
    font-style: italic;
    color: rgb(135, 253, 135);
}

.chevrons {
    width: 2vw;
    height: 2vw;
    border-style: solid;
    border-width: 0 3px 3px 0;
    transform: rotate(-45deg);
}
.right .chevrons {
    transform: rotate(135deg);
}

.logo {
    display: flex;
    gap: 0.2vh;
    margin-left: 2vh;
    font-family: Orbitron;
    font-size: 2rem;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}

.gameperfect .logo {
    text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
}

/* .scoreboard .score_* dynamic by deeces.buildScoreStyles(); */

.scoreboard {
    background-color: rgba(0, 0, 0, 1);
    font-size: 5vh;
    font-family: Orbitron;
    font-weight: 600;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
}

.score {
    display: flex;
    align-items: center;
    background-color: rgb(229, 150, 2);
    overflow: hidden;
    background-image: linear-gradient(to bottom,
        var(--darken_3),
        var(--lighten_1),
        var(--darken_1) 
    );
}

.score_num_wrapper {
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    text-align: center;
}

.spacer_land {
    display: none;
}
.spacer_port {
    display: block;
    max-width: 0;
    visibility: hidden;
}

.perc {
    font-size: 2.5vh;
}

.button > div {
    border-radius: 10px;
    border: 1px solid var(--lighten_5);
    background-color: var(--lighten_2);
    box-shadow: 1px 2px 5px var(--darken_5);
    cursor: pointer;
}
.rainbow .button > div {
    background-color: var(--lighten_2);
}
.button > div:active {
    transform: translateY(1px);
    background-color: var(--lighten_5);
    box-shadow: none;
}

.main {
    flex-grow: 1;
    display: flex;
    overflow-y: scroll;
}
    .right .main {
        flex-direction: row-reverse;
    }

.sidebar {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border: solid #000;
    border-color: var(--lighten_2) var(--darken_7) var(--darken_7) var(--lighten_2);
    border-width: 1px 0;
    background-color: var(--darken_3);
    overflow-y: scroll;
    padding: 0 2vh;
}
.rainbow .sidebar {
    background-color: transparent;
}
.right .sidebar {
    grid-area: 3/1/4/2;  
    border-width: 1px 1px 1px 0;
}
.rotating .sidebar {
    overflow: hidden;
}

.sidebar_wrapper {
    margin: 0 auto;
}

.tiles {
    flex-grow: 1;
    display: flex;
}

.section_diice {
    display: grid;
    gap: 2vh;
    max-height: 100%;
    margin-top: 3vh;
}
.gameover .section_diice .button {
    display: none;
}

.section_scores {
    max-height: 0;
    visibility: hidden;
    overflow: hidden;
}
.gameover .section_scores {
    max-height: 100%;
    visibility: visible;
    margin-top: 3vh;
}

.hints:not(.norolls, .snakeeyes, .fourkind) .angels_wrapper {
    border: 1px dotted yellow;
    animation: hinterConst 800ms infinite ease-in-out;
}

.angels {
    display: flex;
    justify-content: center;
    margin-top: 1vh;
}

.angels_wrapper {
    flex: 1;
    padding: 1vh;
}

.angels_count {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    margin-bottom: 1vh;
    gap: 0.7vh;
}

.norolls .angels_count {
   display: none;
}
.snakeeyes .angels_count {
    opacity: 35%;
}

.angels_count div {
    background-color: var(--lighten_8);
    border-radius: 50%;
    box-shadow: 1px 1px 0 var(--darken_7);
    width: calc(var(--size_factor_dot) / 1.2);
    height: calc(var(--size_factor_dot) / 1.2);
}

.again {
    position: relative;
    margin: 1vh auto 0;
    cursor: pointer;
    filter: drop-shadow(1px 1px 2px var(--darken_3));
    /* factor: 15x. image actual size: 3000px * 200px */
    background-image: url('./i/deeces_icons_sprite.png');
    background-size: auto calc(var(--img_size_base) * 1.5); 
    background-position: calc(var(--img_size_base) * -1.5) 0;
    height: calc(var(--img_size_base) * 1.5);
    width: calc(var(--img_size_base) * 1.5);
    background-repeat: no-repeat;
    background-color: transparent;
    cursor: pointer;
}

.snakeeyes .again,
.norolls .again {
    opacity: 35%;
    background-position: calc(var(--img_size_base) * 0) 0;
    margin-top: 0;
}

.newgame_wrapper {
    margin-bottom: 1vh;
}
.newgame .again {
    background-position: calc(var(--img_size_base) * -4.5) 0;
    opacity: 1;
    margin: 1vh auto;
}

.diice_wrapper {
    display: flex;
    justify-self: center;
}

.diice,
.snakeeyes .diice.one {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    border-radius: 8%;
    border: 1px solid #fff;
    border-right-color: var(--darken_3);
    border-bottom-color: var(--darken_3);
    background-color: #fff; 
    box-shadow: 2px 5px 15px var(--darken_5);
    padding: .25vw;
}

.diice div {
    background-color: #000;
    border-radius: 50%;
    visibility: hidden;
    margin: calc(var(--size_factor_dot) / 6);
    width: var(--size_factor_dot);
    height: var(--size_factor_dot);
}

.snakeeyes .diice.one div {
    background-color: var(--snakeeyes_red);
}

.angels.specials,
.diice.specials,
.fourkind .diice {
    animation: pulse 600ms ease-in-out 2;
}
.specials .again {
    background-position: calc(var(--img_size_base) * -3) 0;
}

.gameover .diice,
.snakeeyes .diice {
    border-color: var(--lighten_2) var(--darken_3) var(--darken_3) var(--lighten_2);
    background-color: var(--lighten_2);
}

.section_diice_hint {
    margin-top: 2vh;
    display: none;
}
.hints .section_diice_hint {
    display: grid;
}

.hint_set {
    display: flex;
    justify-content: center;
    margin: .8vh 0 0 0;
    flex-wrap: nowrap;
}



.snakeeyes .section_diice_hint .diice,
.fourkind .section_diice_hint .diice,
.section_diice_hint .diice {
    border-radius: 5%;
    border: 1px solid #c4c454;
    background-color: var(--lighten_2);
    margin: 0 0 0.25vh 0.3vh;
    box-shadow: none;
    filter: none;
}
.section_diice_hint .diice:first-child {
    margin-right: 0.25vh;
}

.snakeeyes .section_diice_hint .diice div,
.fourkind .section_diice_hint .diice div,
.section_diice_hint .diice div {
    background-color: rgb(255, 255, 0);
    margin: calc(var(--size_factor_dot) / 20);
    width: calc(var(--size_factor_dot) / 3);
    height: calc(var(--size_factor_dot) / 3);
}



.section_stats {
    margin: 2vh;
}

.section_stats_diice,
.section_stats_possibles,
.section_stats_samples ,
.leaderboard_info {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1vh;
}

.leaderboard,
.trendboard {
    margin-bottom: 3vh;
}

.leaderboard_info {
    font-size: 1.2rem;
    letter-spacing: 0.1rem;
}

.trendboard {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 1px;
    border: 1px solid var(--lighten_2);
    box-shadow: 1px 2px 2px var(--darken_3);
}

.graph_label {
    display: flex;
    flex-wrap: nowrap;    
    align-items: center;
    justify-content: flex-end;
    gap: 0.5vh;
}

.graph {
    background-color: var(--darken_7);
    width: 100%;
    height: 100%;
    color: var(--info_red);
    text-shadow: none;
}

.trendboard .graph {
    background-color: #000;
    font-size: 0.5rem;
}

.graph span {
    display: flex;
    align-items: center;
    margin-left: 0.5vh;
}

.percent_full {
    display: flex;
    background-color: #fff;
    height: 100%;
    width: 0%;
    white-space: nowrap;
}

.trendboard .percent_full {
    background-color: rgb(229, 150, 2);
}

.latest,
.trendboard .graph:first-child .percent_full {
    animation: pulse 1800ms ease-in-out infinite;
}



.snakeeyes .section_stats .diice.one,
.section_stats .diice {
    background-color: #fff; 
    box-shadow: 1px 1px 2px var(--darken_5);
    border: none;
}
.section_stats .diice div {
    margin: .4px;
    width: 1vw;
    min-width: 4px;
    height: 1vw;
    min-height: 4px;
    background-color: var(--info_red);
}
.section_stats h1 {
    font-size: 1.2rem;
    margin: 3vh 0 1vh;
}
.section_stats h3 {
    font-size: 1rem;
    margin: 3vh 0 1vh;
}
.section_stats h5 {
    font-size: .9rem;
    margin: 1vh 0;
    font-weight: normal;
}
.section_stats .maths {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background-color: var(--info_red);
    color: var(--info_red);
}
.section_stats .maths div {
    background-color: #fff;;
    padding: 0.5vw;
    overflow: hidden;
    text-shadow: none;
}
.section_stats .maths :nth-child(1) {
    grid-area: 1/1/1/3;
    font-weight: bold;
    padding: 0.8vw 0.5vw;
}
.section_stats form {
    margin: 3vh auto 1vh;
}
#warn_zero_dice {
    display: none;
}
    #warn_zero_dice.show {
        display: block;
    }
.section_stats label,
.section_stats input, 
.section_stats button {
    text-align: right;
    font-size: 0.8rem;
}
.section_stats .elapsed {
    display: flex;
    gap: 1vh;
    align-items: center;
    font-size: .7rem;
    font-style: italic;
    margin: .7vh 0;
}

.one :nth-of-type(5) {
    visibility: visible;
}
.two :nth-of-type(1),
.two :nth-of-type(9) {
    visibility: visible;
}
.thr :nth-of-type(1),
.thr :nth-of-type(5),
.thr :nth-of-type(9) {
    visibility: visible;
}
.fur :nth-of-type(1),
.fur :nth-of-type(3),
.fur :nth-of-type(7),
.fur :nth-of-type(9) {
    visibility: visible;
}
.fiv :nth-of-type(1),
.fiv :nth-of-type(3),
.fiv :nth-of-type(5),
.fiv :nth-of-type(7),
.fiv :nth-of-type(9) {
    visibility: visible;
}
.six :nth-of-type(1),
.six :nth-of-type(3),
.six :nth-of-type(4),
.six :nth-of-type(6),
.six :nth-of-type(7),
.six :nth-of-type(9) {
    visibility: visible;
}

.rotate {
    animation:spin .4s linear infinite;
}

.rotate-slow {
    animation:spin 1s linear infinite;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}


@keyframes pulse {
    0% {
        opacity: 1.0;
    }
    50% {
        opacity: 0.25;
    }
    100% {
        opacity: 1.0;
    }
}


@keyframes pulse-min {
    0% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.1;
    }
    100% {
        opacity: 0.6;
    }
}

@keyframes pulse-bg {
    0% {
        background-color: var(--darken_5);
    }
    50% {
        background-color: var(--lighten_5);
    }
    100% {
        background-color: var(--darken_5);
    }
}

@keyframes hinter {
    6%,
    12%,
    18%,
    100% {
        border-style: dotted;
    }
    3%,
    9%,
    15% {
        border-style: solid;
    }
}

@keyframes hinterConst {
    50% {
        border-style: solid;
    }
    100% {
        border-style: dotted;
    }
}

/* display all dots during roll */
.rotate :nth-of-type(1),
.rotate :nth-of-type(3),
.rotate :nth-of-type(4),
.rotate :nth-of-type(5),
.rotate :nth-of-type(6),
.rotate :nth-of-type(7),
.rotate :nth-of-type(9) {
    visibility: visible;
}

.stack {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stack > div {
    margin: 0;
    padding: 0;
    flex-grow: 1;
}


.rainbow #stack0 {
    background-color: #dc3833;
}
.rainbow #stack1 {
    background-color: #f5ce49;
}
.rainbow #stack2 {
    background-color: #437d4f;
}
.rainbow #stack3 {
    background-color: #315ea4;
}
.tile {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--darken_3); /* fallback color */
    border-color: var(--lighten_2) var(--darken_3) var(--darken_3) var(--lighten_2);
}

.gameover .stack > div:not(.chosen, .spent),
.stack div.spent,
.stack div.spent:active {
    text-shadow: none;
    border-color: var(--lighten_2) var(--darken_7) var(--darken_7) var(--lighten_2);
    background-color: var(--darken_6);
}
.rainbow .gameover .stack > div:not(.chosen, .spent),
.rainbow .stack div.spent,
.rainbow .stack div.spent:active {
    background-color: var(--darken_8);
}

.gameover .stack > div:not(.chosen, .spent) div,
.stack div.spent div {
    background-color: transparent;
}

.tile:active,
.stack .chosen,
.stack .chosen:active {
    background-color: var(--lighten_3);
    color: transparent;
    text-shadow: none;
}
.rainbow .tile:active,
.rainbow .stack .chosen,
.rainbow .stack .chosen:active {
    background-color: transparent;
}

.stack div.chosen div {
    background-color: transparent;
    color: var(--lighten_3);
}

.tile:active div {
    background-color: transparent;
    color: var(--lighten_3);
}

/* styled snakeeyes on tiles */
.snakeeyes .tile:nth-of-type(1) div div:nth-of-type(1),
.snakeeyes .tile:nth-of-type(1) div div:nth-of-type(2),
.snakeeyes .tile:nth-of-type(1) div div:nth-of-type(3),
.snakeeyes .tile:nth-of-type(1) div div:nth-of-type(4) {
    border: 1px solid var(--snakeeyes_yellow);
    border-width: 0 2px;
    background-color: var(--snakeeyes_red);
    width: .3vh;
    height: 1.7vh;
    border-radius: 40%;
    box-shadow: 0px 1px 3px var(--darken_7);
    animation: pulse 1600ms ease-in-out infinite;
}
.snakeeyes .tile:nth-of-type(1) div div:nth-of-type(1),
.snakeeyes .tile:nth-of-type(1) div div:nth-of-type(4) {
    visibility: hidden;
}
.snakeeyes .tile:not(.chosen, .spent) div div {
    background-color: var(--darken_2);
}

.fourkind .stack div.spent {
    animation: pulse-bg 600ms ease-in-out 2;
}

.tile_wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 2px;
}

.tile_wrapper div {
    border-radius: 50%;
    margin: .15rem;
    width: .5rem;
    height: .5rem;
    background-color: var(--lighten_3);
}

.rainbow .tile_wrapper div {
    background-color: var(--lighten_6);
}

.hints .possible:not(.chosen, .spent),
.snakeeyes.hints .chosen:first-child,
.snakeeyes.hints .possible {
    background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.3));
    border: 1px dotted yellow;
    animation: hinterConst 800ms infinite ease-in-out;
}

.fourkind.hints .possible {
    animation: none;
    border: inherit;
}

.hints .possible:not(.chosen, 
.spent) ~ .possible:not(.chosen, .spent) {
    animation: none;
    background-image: none;
}

.tile:nth-child(1) .tile_wrapper :nth-child(n+3){
    background-color: transparent;
}
.tile:nth-child(2) .tile_wrapper :nth-child(n+4){
    background-color: transparent;
}
.tile:nth-child(3) .tile_wrapper :nth-child(n+5){
    background-color: transparent;
}
.tile:nth-child(4) .tile_wrapper :nth-child(n+6){
    background-color: transparent;
}
.tile:nth-child(5) .tile_wrapper :nth-child(n+7){
    background-color: transparent;
}
.tile:nth-child(6) .tile_wrapper :nth-child(n+8){
    background-color: transparent;
}
.tile:nth-child(7) .tile_wrapper :nth-child(n+9){
    background-color: transparent;
}
.tile:nth-child(8) .tile_wrapper :nth-child(n+10){
    background-color: transparent;
}
.tile:nth-child(9) .tile_wrapper :nth-child(n+11){
    background-color: transparent;
}
.tile:nth-child(10) .tile_wrapper :nth-child(n+12){
    background-color: transparent;
}
.tile:nth-child(11) .tile_wrapper :nth-child(n+13){
    background-color: transparent;
}


.log {
    grid-area: 4/1/5/6;
    overflow: scroll;
    display: flex;
}

.info_screen {
    position: absolute;
    display: none;
    top: 0;
    right: 0;
    left: 0;
    height: 100%;
    z-index: 10;
}

.info_prefs.show {
    display: block;
}
.info_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: auto 2vh;
}
.gamesTotal {
    margin: auto 0;
    font-size: 1.5rem;
}

.info_header .closer {
    background-position: calc(var(--img_size_base) * -6 ) 0;
}

.info_gameperfect .closer {
    font-size: 4rem;
    z-index: 20;
}

.info_hints_hint.show {
    z-index: 20;
    display: block;
}

.info_content {
    background-color: var(--info_red);
    padding: 10vh 2vw 2vh;
    overflow: scroll;
    height: 100%;
    text-shadow: 1px 1px 1px var(--darken_3);
}
.info_about .info_content {
    background-color: #02694b;
    background-color: var(--info_green);
}

.info_content a,
.info_content a:link,
.info_content a:visited,
.info_content a:hover,
.info_content a:active {
    color: rgb(255, 255, 255);
    text-shadow: none;
}

.info_hints_hint .info_content {
    background: none;
    background-image: radial-gradient(
        farthest-corner at 6vw -7vh,
        rgba(0,0,0,0.0) 7%,
        rgba(0,0,0,0.9) 14%
    );
    margin: 0;
    padding: 30%;
    opacity: 0.85;
}

.hints_arrow {
    display: grid;
    padding: var(--arrow_size_factor);
    width: var(--arrow_size_factor);
    height: var(--arrow_size_factor);
    background: none;
    border: solid yellow;
    border-width: var(--arrow_size_factor) 0 0 var(--arrow_size_factor);
    animation: pulse 2000ms linear infinite;
    animation-delay: 1000ms;
    margin: calc(var(--arrow_size_factor) * -1) auto 0 0;
}
.hints_arrow:nth-of-type(2) {
    margin-left: calc(var(--arrow_size_factor) * 3);
    animation-delay: 800ms;
}
.hints_arrow:nth-of-type(3) {
    margin-left: calc(var(--arrow_size_factor) * 6);
    animation-delay: 600ms;
}
.hints_arrow:nth-of-type(4) {
    margin-left: calc(var(--arrow_size_factor) * 9);
    animation-delay: 400ms;
}
.hints_arrow:nth-of-type(5) {
    margin-left: calc(var(--arrow_size_factor) * 12);
    animation-delay: 200ms;
}

.section-prefs {
    margin: 3vh;
    font-size: 1.3rem;
}
.section-prefs h5 {
    margin-bottom: 2.5vh;
}
.section-prefs label {
    display: flex;
    gap: 5vw;
    margin-bottom: 1vh;
    padding: 1vh 0;
    font-size: 1rem;
}

.section-prefs input {
    width: 1.2rem;
    height: 1.2rem;
    margin: auto 0;
}

.section-other {
    margin: 3vh;
}

.section-other a {
    color: #fff;
}

.gameperfect .navbar {
    background-color: var(--darken_5);
}

.gameperfect .nav {
    visibility: hidden;
}

.gameperfect .scoreboard {
    z-index: 20;
    border-bottom: 1px solid #000;
    animation: shadowy 2s infinite;
}

@keyframes shadowy {
    0% {
        text-shadow: 1px 3px 2px rgba(0, 0, 0, 0.5);
    }
    50% {
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
    }
    100% {
        text-shadow: 1px 3px 2px rgba(0, 0, 0, 0.5);
    }
}

.info_gameperfect {
    overflow: hidden;
    background-image: url('./i/deeces_perfect.png');
    background-size: cover;
    background-position: center;
    transition: opacity 1s ease-out;
}

.info_gameperfect .info_content {
    background-color: transparent;
    padding-top: 15vh;
}

.info_gameperfect .info_header {
    position: relative;
    justify-content: flex-end;
}

.info_gameperfect.outro {
    opacity: 0;
}

.firework {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    transition: transform 1s ease-out, opacity 1s ease-out;
}

.firework.white {
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 30%, rgba(255,255,255,1) 60%, rgba(255,255,255,0.2) 100%);
}

.firework.red {
    background: radial-gradient(circle, rgba(255,0,0,1) 0%, rgba(255,0,0,1) 30%, rgba(255,0,0,1) 60%, rgba(255,0,0,0.2) 100%);
}

.firework.blue {
    background: radial-gradient(circle, rgba(0,0,255,1) 0%, rgba(0,0,255,1) 30%, rgba(0,0,255,1) 60%, rgba(0,0,255,0.2) 100%);
}

.firework.green {
    background: radial-gradient(circle, rgba(0,255,0,1) 0%, rgba(0,255,0,1) 30%, rgba(0,255,0,1) 60%, rgba(0,255,0,0.2) 100%);
}

.firework.yellow {
    background: radial-gradient(circle, rgba(255,255,0,1) 0%, rgba(255,255,0,1) 30%, rgba(255,255,0,1) 60%, rgba(255,255,0,0.2) 100%);
}

.firework.explode {
    transform: scale(70);
    opacity: 0;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.3), 0 0 60px rgba(255, 255, 0, 0.3), 0 0 90px rgba(255, 69, 0, 0.3), 0 0 120px rgba(255, 0, 0, 0.3);
}



.hide {
    display: none;
}
.show {
    display: block;
}
.invis {
    visibility: hidden;
}

.snakeeyes.hints .possible {
    background-image: linear-gradient(to bottom, 
        var(--lighten_1),
        var(--darken_5) 
    );
}

.stack .gradient:active {
    background-image: none;
}



@media screen and (orientation: landscape) {

                    :root {
                        --size_factor_dot: 2.5vh;
                        /* factor: 15x ; image actual size: 3000px * 200px */
                        --img_size_base: 4vw;
                    }

                    .container {
                        flex-direction: row;
                    }
                        .container.pwa {
                            border-bottom: none;
                        }

                    .header {
                        flex-direction: row;
                    }
                    
                    .navbar {
                        flex-direction: column;
                    }

                    .nav {
                        display: flex;
                        flex-direction: column;
                        gap: 1.5vw;
                    }

                    .info_header .closer,
                    .nav > div {
                        background-size: 60vw 4vw;
                        height: 4vw;
                        width: 4vw;
                    }

                    .show_hints {
                        background-position: -52vw 0;
                    }

                    .hints .show_hints {
                        background-position: -56vw 0;
                    }

                    .hold {
                        background-position: -36vw 0;
                    }
                        .right .hold {
                            background-position: -40vw 0;
                        }
                    
                    .repaint {
                        background-position: -32vw 0;
                    }

                    .rainbow_btn_wrapper {
                        width: 2.5vw;
                        height: 2.5vw;
                    }

                    .show_stats {
                        background-position: -44vw 0;
                    }
                    
                    .show_leaders {
                        background-position: -48vw 0;
                    }
                    
                    .show_about {
                        background-position: -16vw 0;
                    }

                    .show_leaders div:nth-of-type(5) {
                        display: none;
                    }

                    .logo {
                        flex-direction: column;
                        gap: 0;
                        display: block;
                        margin-top: 4vh;
                        margin-left: 0;
                        font-size: 3.2vw;
                        line-height: 3.2vw;
                    }

                    .info_content {
                        padding: 2vh 2vw 3vh 10vw;
                    }

                    .info_gameperfect .info_content {
                        padding-top: inherit;
                    }

                    .info_anchor {
                        scroll-margin-top: 1vh;
                    }
                    

                    /* .scoreboard .score_* dynamic by deeces.buildScoreStyles(); */

                    .scoreboard {
                        flex-direction: row;
                    }

                    .score {
                        min-height: auto; /* reset */
                        width: 100%;
                        flex-grow: 0;
                        align-self: flex-end;
                        align-content: flex-start;
                        padding: 0 1vh;
                        background-image: linear-gradient(to left, 
                            var(--darken_3),
                            var(--lighten_1),
                            var(--darken_1) 
                        );
                    }

                    .score_num_wrapper {
                        align-self: flex-start;
                        position: relative;
                        display: flex;
                        flex-direction: column;
                    }

                    .spacer_land {
                        display: block;
                        visibility: hidden;
                    }
                    .spacer_port {
                        display: none;
                    }

                    .sidebar {
                        padding: 0 3vh;
                    }

                    .tile_wrapper {
                        grid-template-columns: repeat(6, 1fr);
                    }
                    
                    .section_diice {
                        grid-template-columns: repeat(2, 1fr);
                    }
                    
                    .section_diice_hint {
                        grid-template-columns: repeat(2, 1fr);
                    }

                    .hint_set {
                        margin-top: 1.2vh;
                    }

                    .section_diice_hint .diice {
                        margin-bottom: 1vh;
                    }

                    .angels {
                        grid-area: 3/1/4/3;
                        margin: 1vw auto 0;
                    }

                    .angels_wrapper {
                        padding: 1vw;
                    }
                    
                    .angels_count {
                        grid-template-columns: repeat(4, 1fr);
                        gap: 0.7vw;
                    }

                    .again {
                        margin-top: 1vw;
                    }

                    .newgame_wrapper {
                        margin: 6vh 3vh;
                    }

                    .leaderboard .perc {
                        font-size: 2vw;
                    }

                    .leaderboard.trendboard div {
                        min-height: 2vh;
                    }

                    .snakeeyes .tile:nth-of-type(1) div div:nth-of-type(2) {
                        visibility: hidden;
                    }
                    .snakeeyes .tile:nth-of-type(1) div div:nth-of-type(4) {
                        visibility: visible;
                    }

}




@media screen and (orientation: landscape) and (min-aspect-ratio: 2/1.1) {

                    :root {
                        --size_factor_dot: 3vh;
                        --img_size_base: 3vw;
                    }
                                    
                    .navbar {
                        padding: 2vh 3vh;
                    }

                    .info_header .closer {
                        background-position: calc(var(--img_size_base) * -8 ) 0;
                    }

                    .logo {
                        display: grid;
                        grid-template-columns: 1fr 1fr;
                        gap: 0.5vw;
                        font-size: 2.5vw;
                        line-height: 2.5vw;
                    }

                    .trendboard .graph {
                        font-size: 0.2rem;
                    }

                    .tiles {
                        display: flex;
                        flex-direction: column;
                        flex-grow: 1;
                    }
                    .stack {
                        display: flex;
                        flex-direction: row;
                        flex-grow: 1;
                        height: 100%;
                    }
                    .stack > div {
                        flex-grow: 1;
                    }

                    .tile {
                         /* flex is flipping left and right on primary breakpoint. code accordingly */
                         border-color: var(--lighten_2) var(--darken_3) var(--darken_3) var(--lighten_2);
                    }

                    .gameover .stack > div:not(.chosen, .spent),
                    .stack div.spent,
                    .stack div.spent:active {
                        text-shadow: none;
                         /* flex is flipping left and right on primary breakpoint. code accordingly */
                         border-color: var(--lighten_1) var(--darken_7) var(--darken_7) var(--lighten_1);
                    }

                    .tile_wrapper {
                        grid-template-columns: repeat(3, 1fr);
                    }

                    .tile_wrapper div {
                        margin: .12rem;
                        width: .4rem;
                        height: .4rem;
                    }

                    .snakeeyes .tile:nth-of-type(1) div div:nth-of-type(2),
                    .snakeeyes .tile:nth-of-type(1) div div:nth-of-type(4) {
                        visibility: hidden;
                    }
                    .snakeeyes .tile:nth-of-type(1) div div:nth-of-type(1),
                    .snakeeyes .tile:nth-of-type(1) div div:nth-of-type(3) {
                        visibility: visible;
                        width: 0.5vh;
                        height: 4vh;
                    }

}


.palette_tests {

    /* blues */
    background-color: #4a5fc1;
    background-color: #394F8A;
    background-color: #00458B;
    background-color: #1897fe;
    background-color: #28559A;
    background-color: #005498;

    /* greens */
    background-color: #373A36;
    background-color: #1D2228;
    background-color: #0c7c8c;
    background-color: #1c716a;
    background-color: #065c5e;
    background-color: #08535d;

    /* reds */
    background-color: #AD4328;
    background-color: #61082B;

    /* browns */
    background-color: #56642A;
    background-color: #46854f;
    background-color: #46854f;
    background-color: #849531;
    background-color: #715e1c;
    background-color: #554615;
    background-color: #3F6844;

    /* purples */
    background-color: #5626C4;
    background-color: #4E3883;
    background-color: #4A2C40;
    background-color: #433f68;
    background-color: #2d3e60;
    background-color: #4a249d;

}