html {
    width: 100%;
    -webkit-text-size-adjust: none;
    touch-action: manipulation;
}
body {
    background: #FFFDE0 url(/frontend/filler/ui/i/bg-01-001.jpg) center center repeat;
    background-size: cover;
    color: #000;
    font: 16px 'Tahoma', Arial;
    text-align: center;
    margin: 0;
    padding: 0;
    width: 100%;
    zoom: 1.0;
}
body .app {
    background: #FFFDE0 url(/frontend/filler/ui/i/bg.jpg) center center repeat;
    width: 100vw;
    height: 100vh;
    -moz-transform: translateZ(0) rotate(0.0001deg);
    -webkit-transform: translateZ(0) rotate(0.0001deg);
    transform: translateZ(0) rotate(0.0001deg);
}
*::-moz-focus-inner {
    border: 0;
}
*, body {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}
*, body {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-focus-ring-color: rgba(0,0,0,0);
    outline: none;
}
img {
    -webkit-touch-callout: none;
    touch-callout: none;
}
*, body {
    -moz-user-select: -moz-none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
input, textarea {
    -moz-user-select: text;
    -o-user-select: text;
    -khtml-user-select: text;
    -webkit-user-select: text;
    user-select: text;
}
input, textarea {
    resize: none;
}
input[type='checkbox'] {
    -moz-appearance: none;
    -webkit-appearance:none;
    appearance: none;
    font-size: inherit;
    width: 1.0em;
    height: 1.0em;
    cursor: pointer;
    background: white;
    border-radius: 0.25em;
    border: 0.125em solid #555;
    position: relative;
    vertical-align: middle;
    outline: none;
}
input[type='checkbox']:checked {
    background: #adf;
}
input[type='checkbox']:checked:after {
    content:"✔";
    position: absolute;
    font-size: 90%;
    left: 0;
    top: -0.25em;
}

h1 {
    font-weight: bold;
    font-size: 160%;
    line-height: 160%;
}
h2 {
    font-weight: bold;
    font-size: 130%;
    line-height: 130%;
}

.page {
    position: relative;
    display: inline-block;
    text-align: left;
    width: 1000px;
    min-height: 580px;
    border: 1px solid #CC0;
    background: rgba(255,255,255,0.8);
}
.big-logo {
    width: 600px;
}
.text-long {
    display: inline-block;
    width:600px;
    text-align: justify;
    padding: 0 2em;
}
.text-small {
    font-size: 80%;
}
.show-hover {
    opacity: 0.5;
}
.show-hover:hover {
    opacity: 1.0;
}

@media only screen and (max-width: 640px) {
    body {
        font-size: 14px;
    }
    .page {
        width: auto;
        min-height: 580px;
        border: 1px solid #CC0;
        background: rgba(255,255,255,0.2);
    }
    .big-logo {
        width: 100%;
    }
    .text-long {
        width: auto;
        padding: 0 2em;
    }

}


#debug {
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    width: 300px;
    height: 100%;
    font: 12px/12px "Courier New", fixed;
    /*background: rgba(0,0,0,0.05);*/
}
#debug:hover {
    /*background: rgba(0,0,0,0.75);*/
}

.modal {
    position: absolute;
    display: flex;
    display: none;
    justify-content: center;
    align-items: center;
    left: 0;
    top: 0;
    z-index: 10000;
    width: 100%;
    height: 100%;
    background: #DDD;
    background: rgba(100,100,100,0.5);
}
.modal .modal-block {
    display: inline-block;
    text-align: center;
    padding: 0.75em 1em;
    background: rgba(255,255,255,0.85);
    border: 0.2em solid rgba(0,0,0,0.5);
    border-radius: 0.5em;
}
.modal .bigtext {
    font-size: 120%;
    line-height: 140%;
}
.modal .hugetext {
    font-size: 200%;
    line-height: 140%;
}
.modal .caption {
    font-size: 120%;
    line-height: 120%;
    font-weight: bold;
    margin: 0 0 0.5em 0;
}
.modal .text {
    text-align: justify;
    margin-bottom: 0.75em;
}

#fsmodal {
    display: flex;
    z-index: 60000;
}

.page-screen {
    position: relative;
    display: inline-block;
    text-align: left;
    /*width: 1000px;*/
    /*min-height: 580px;*/
    /*border: 1px solid #CC0;*/
    background: rgba(255,255,255,0.25);
    text-shadow: rgba(255,255,255,0.99) 0px -1px 4px, rgba(255,255,255,0.99) -1px 0px 4px, rgba(255,255,255,0.99) 0px 1px 4px, rgba(255,255,255,0.99) 1px 0px 4px;
    /*font-size: 16px;*/
    font-size: 3.0vh;
    line-height: 3.0vh;
    height: 100%;
    width: 175vh;
}
.screen {
    position: absolute;
    left: 30%;
    top: 0;
    display: inline-block;
    /*width: 700px;*/
    /*height: 560px;*/
    background: rgba(255,255,255,0.5);
    width: 70%;
    height: 100%;
}
#goFS {
    position: absolute;
    top: 1%;
    right: 1%;
    width: 4%;
    height: 6%;
    vertical-align: top;
}
:-ms-fullscreen #goFS button {
    opacity: 0.5;
    background: #d0FFd0;
}
:-webkit-full-screen #goFS button {
    opacity: 0.5;
    background: #d0FFd0;
}
:fullscreen #goFS button {
    opacity: 0.5;
    background: #d0FFd0;
}
/*
@media all and (display-mode: fullscreen) {
    #goFS {
        opacity: 0.5;
        background: #d0FFd0;
    }
}
/**/
#leftpan {
    position: absolute;
    width: 30%;
    left: 0;
    top: 0;
    height: 100%;
}
#leftpan .block {
    margin-bottom: 0.375em;
    /*border-bottom: 1px dashed rgba(0,0,0,0.12);*/
}
#leftpan .label {
    display: inline-block;
    width: 25%;
    max-width: 25%;
    vertical-align: middle;
}
#leftpan .label > .value {
    font-size: 80%;
}


#playersInfo {
    display: inline-block;
    width: 70%;
    list-style: none;
    margin: 0.2em 0;
    padding: 0;
    color: #077;
}
#playersInfo > li {
    border-left: 0.25em solid transparent;
    padding: 0 0 0 0.25em;
}
#playersInfo > li.me {
    color: #07E;
}
#playersInfo > li.current {
    color: #E10;
    border-left-color: #E10;
}
#playersInfo > li.inactive {
    color: #CCC;
}
#playersInfo > li > .score {
    font-weight: bold;
}
#playersInfo > li .perc {
    font-size: 70%;
}

.progress {
    position: relative;
    display: inline-block;
    /*overflow: hidden;*/
    height: 1.125em;
    width: 99%;
    border: 0.1em solid #9C9090;
    border-radius: 0.25em;
    border-bottom-width: 0.125em;
    background: #D4D4D0 linear-gradient(180deg, #D4D4D0 1%, #969696 15%, #B3B3B3 75%, #D1D1D1 99%);
    font-weight: bold;
    color: #FFF;
    text-shadow: #000 0 0 0.1em, #000 0 0 0.1em, #000 0.1em 0 0.1em, #000 0.1em 0 0.1em;
}
.progress .bar {
    position: absolute;
    left: -0.1em;
    top: 0;
    bottom: -0.1em;
    width: 100%;
    text-align: center;
    vertical-align: middle;
    border: 0.1em solid #9C9090;
    border-bottom-color: #5c5959;
    border-radius: 0.25em;
    background: #FFC000 linear-gradient(180deg, #FFC000 10%, #FFE080 25%, #FFC000 50%);
}
.progress .bar:not([hidden]) {
    display: inline-block;
}
.progress .bar-low {
    top: auto;
    bottom: -0.1em;
    height: 0.25em;
    width: 100%;
    border-top-left-radius: 0.125em;
    border-top-right-radius: 0.125em;
    border-bottom-width: 0;
}
.progress .teal {
    background: #55d0d2 linear-gradient(180deg, #55d0d2 10%, #82e2e7 25%, #55d0d2 50%);
}
.progress .red {
    background: #ff4100 linear-gradient(180deg, #ff4100 10%, #ff723f 25%, #ff4100 50%);
}
.progress .bar-low.red {
    border-color: #cf3300;
}

.progress .val {
    position: absolute;
    display: inline-block;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    vertical-align: middle;
}
.progress .soft-text {
    opacity: 0.75;
    font-size: 80%;
    line-height: 80%;
    padding-top: 0.25em;
    /*color: #FFF;*/
    /*text-shadow: #000 0 0 0.1em, #000 0 0 0.1em, #000 0.1em 0 0.1em, #000 0.1em 0 0.1em;*/
}
.left-text {
    text-align: left;
}
.right-text {
    text-align: right;
}


button {
    display: inline-block;
    font: inherit;
    margin: 0;
    padding: 0.125em 0.48em;
    border: 0.0625em solid #9C9090;
    border-radius: 0.25em;
    border-bottom-width: 0.125em;
    background: #FFFCE0 linear-gradient(180deg, #FFFCE0 10%, #FFFEF0 25%, #FFF4C0 50%);
    color: #000;
    vertical-align: middle;
    text-align:center;
}
button:hover {
    border-color: #C0B8B0;
    background: #FFF8A0 linear-gradient(180deg, #FFF8A0 10%, #FFF4C0 25%, #FFF370 50%);
}
button:focus {
    background: #FFF8A0 linear-gradient(180deg, #FFF8B0 10%, #FFF8D0 25%, #FFF480 50%);
    outline: none;
}
button:active {
    border-color: #9C9090;
    border-bottom-width: 0.0625em;
    border-top: 0.125em solid #9C9090;
    background: #FFFFF0 linear-gradient(180deg, #FFF4C0 50%, #FFFEF0 75%, #FFF4C0 95%);
}


div.cell-color-1 { background: hsl(5, 100%, 60%); }
div.cell-color-2 { background: hsl(100, 100%, 60%); }
div.cell-color-3 { background: hsl(210, 100%, 55%); }
div.cell-color-4 { background: hsl(59, 100%, 60%); }
div.cell-color-5 { background: hsl(320, 100%, 70%); }
div.cell-color-6 { background: hsl(180, 100%, 60%); }
div.cell-color-7 { background: hsl(275, 100%, 58%); }
div.cell-color-8 { background: hsl(37, 100%, 50%); }
div.cell-color-9 { background: hsl(0, 100%, 100%); }
div.cell-color-10 { background: hsl(120, 100%, 38%); }
div.cell-color-11 { background: hsl(60, 100%, 35%); }
div.cell-color-12 { background: hsl(210, 10%, 50%); }
div.cell-color-13 { background: hsl(30, 100%, 40%); }
div.cell-color-14 { background: hsl(315, 100%, 45%); }
div.cell-color-15 { background: hsl(270, 100%, 83%); }
div.cell-color-16 { background: hsl(30, 100%, 80%); }

div.cell-color-21 { background: hsl(210, 100%, 80%); }
div.cell-color-22 { background: hsl(30, 100%, 40%); }
div.cell-color-23 { background: hsl(180, 100%, 30%); }
div.cell-color-24 { background: hsl(265, 100%, 72%); }
div.cell-color-25 { background: hsl(0, 100%, 90%); }
div.cell-color-25 { background: hsl(60, 100%, 40%); }

div.cell-color-26 { background: hsl(5, 100%, 40%); }
div.cell-color-27 { background: hsl(210, 10%, 30%); }
div.cell-color-28 { background: hsl(300, 100%, 70%); }

.quadcell {
    position: relative;
    display: inline-block;
    border-radius: 0.25em;
    border: 0.0625em solid #333;
    float: left;
    width: 2.25em;
    height: 2.25em;
    margin: 0 0.45em 0.5em 0;
    cursor: pointer;
}
.quadcell:hover {
   border-color: #EEE;
}
.quadcell.disabled:hover {
    border-color: inherit;
}
.quadcell .cnt {
    position: absolute;
    display: inline-block;
    right: -0.0625em;
    bottom: -0.0625em;
    border-radius: 0;
    border-bottom-right-radius: 0.25em;
    border-top-left-radius: 0.25em;
    border: 0.0625em solid #333;
    padding: 0.125em;
    font-size: 80%;
    line-height: 80%;
    background: rgba(255,255,255,0.5);
}
.disabled {
    opacity: 0.2;
    cursor: default;
}
.hidden {
    opacity: 0;
    display:none;
}






.svg-screen {
    width: 100%;
    height: 100%;
    /* -- Filter is x2 to slow animations -- */
    /*filter: drop-shadow(4px 5px 2px rgba(128, 128, 128, .99));*/
}
.svg-screen .cell {
    stroke: #333333;
    stroke-width: 0.025;
    stroke-linecap: round;
    stroke-linejoin: round;
    /*
    stroke-dasharray: 0.061859, 0.061859, 0.061859, 0.061859, 0.061859, 0.061859, 0.061859, 0;
    */
}



.cell-color-1 { fill: hsl(5, 100%, 60%); }
.cell-color-2 { fill: hsl(100, 100%, 60%); }
.cell-color-3 { fill: hsl(210, 100%, 55%); }
.cell-color-4 { fill: hsl(59, 100%, 60%); }
.cell-color-5 { fill: hsl(320, 100%, 70%); }
.cell-color-6 { fill: hsl(180, 100%, 60%); }
.cell-color-7 { fill: hsl(275, 100%, 58%); }
.cell-color-8 { fill: hsl(37, 100%, 50%); }
.cell-color-9 { fill: hsl(0, 100%, 100%); }
.cell-color-10 { fill: hsl(120, 100%, 38%); }
.cell-color-11 { fill: hsl(60, 100%, 35%); }
.cell-color-12 { fill: hsl(210, 10%, 50%); }
.cell-color-13 { fill: hsl(30, 100%, 40%); }
.cell-color-14 { fill: hsl(315, 100%, 45%); }
.cell-color-15 { fill: hsl(270, 100%, 83%); }
.cell-color-16 { fill: hsl(30, 100%, 80%); }
.cell-color-17 { fill: hsl(210, 10%, 30%); }
.cell-color-18 { fill: hsl(5, 100%, 40%); }

.svg-screen .cell-color-0 {
    /*fill: none;*/
    /*fill: transparent;*/
    fill: url(#pt_wall);
    stroke: none;
    stroke-width: 0;
}
.svg-screen .cell-color-0:hover {
    /*fill: none;*/
    animation: none;
}
noindex:-o-prefocus, .svg-screen .cell-color-0 {
    fill: none;
}



/*.svg-screen .cell:hover,*/
.svg-screen .cell-color-hovered {
    /*stroke-width: 0.1;*/
    animation: cell-selection 400ms infinite alternate ease-in-out;
    /*animation: cell-selection 400ms infinite alternate steps(2, start);*/
    fill: hsl(0, 0%, 30%);
}
noindex:-o-prefocus,
.svg-screen .cell:hover,
.svg-screen .cell-color-hovered {
    fill: hsl(60, 100%, 90%);
    stroke: hsl(90, 100%, 70%);
    stroke-width: 0.2;
}

@-webkit-keyframes cell-selection {
    100% {
        fill: hsl(0, 0%, 100%);
    }
}
@-moz-keyframes cell-selection {
    100% {
        fill: hsl(0, 0%, 100%);
    }
}
@-o-keyframes cell-selection {
    100% {
        fill: hsl(0, 0%, 100%);
    }
}
@keyframes cell-selection {
    100% {
        fill: hsl(0, 0%, 100%);
    }
}


.svg-screen .cell-active-player {
    stroke: #333333;
    stroke-width: 0.15;
    stroke-linecap: butt;
    stroke-linejoin: round;
    stroke-dasharray: 0.22 0.07 0.22 0.07; /*sum=0.58     0.25 0.33 */
    /*animation: cell-active-player 10s linear infinite;*/
    /*animation: cell-active-player 10s steps(20, end) infinite;*/
}

@keyframes cell-active-player {
    to {
        stroke-dashoffset: 0.58;
    }
}

.svg-screen[data-frame="0"] .cell-active-player {
    stroke-dashoffset: 0.0;
}
.svg-screen[data-frame="10"] .cell-active-player {
    stroke-dashoffset: 0.0483;
}
.svg-screen[data-frame="20"] .cell-active-player {
    stroke-dashoffset: 0.0967;
}
.svg-screen[data-frame="30"] .cell-active-player {
    stroke-dashoffset: 0.145;
}
.svg-screen[data-frame="40"] .cell-active-player {
    stroke-dashoffset: 0.1933;
}
.svg-screen[data-frame="50"] .cell-active-player {
    stroke-dashoffset: 0.2417;
}
.svg-screen[data-frame="60"] .cell-active-player {
    stroke-dashoffset: 0.29;
}
.svg-screen[data-frame="70"] .cell-active-player {
    stroke-dashoffset: 0.3383;
}
.svg-screen[data-frame="80"] .cell-active-player {
    stroke-dashoffset: 0.3867;
}
.svg-screen[data-frame="90"] .cell-active-player {
    stroke-dashoffset: 0.435;
}
.svg-screen[data-frame="100"] .cell-active-player {
    stroke-dashoffset: 0.4833;
}
.svg-screen[data-frame="110"] .cell-active-player {
    stroke-dashoffset: 0.5317;
}
.svg-screen[data-frame="120"] .cell-active-player {
    stroke-dashoffset: 0.58;
}

/*
@media only screen and (orientation:portrait){
}

@media only screen and (orientation:landscape){
}

@media (min-aspect-ratio: 16/9) {
}

@media (prefers-color-scheme: dark)    no-preference | light | dark
@media (light-level: dim)    dim | normal | washed
#goFS:fullscreen #goFS {
    display: none;
}

*/

@media (max-aspect-ratio: 14/8) {
    .page-screen {
        left: 0;
        top: calc((100vh - 57vw) / 2);
        font-size: 1.71vw;
        line-height: 1.71vw;
        height: 57vw;
        width: 100%;
    }
}

@media (max-aspect-ratio: 1/1) {
    .page-screen {
        -webkit-transform-origin: 50vw 50vw 0;
        -moz-transform-origin: 50vw 50vw 0;
        -o-transform-origin: 50vw 50vw 0;
        -ms-transform-origin: 50vw 50vw 0;
        transform-origin: 50vw 50vw 0;
        /* Поворачиваем на 20 градусов против часовой стрелки */
        -webkit-transform: rotate(-20deg);
        -moz-transform: rotate(-20deg);
        -o-transform: rotate(-20deg);
        -ms-transform: rotate(-20deg);
        transform: rotate(90.0001deg);

        left: calc((100vw - 57vh) / -2);
        top: 0;

        font-size: 1.71vh;
        line-height: 1.71vh;
        height: 57vh;
        width: 100vh;
    }
}

@media (max-aspect-ratio: 8/14) {
    .page-screen {
        left: 0;
        top: calc((100vh - 175vw) / 2);

        font-size: 3vw;
        line-height: 3vw;
        height: 100vw;
        width: 175vw;
    }
}

@media only screen and (max-width: 640px) {
    .quadcell .cnt {
        font-size: 90%;
        line-height: 90%;
        font-weight: bold;
        letter-spacing: -0.12em;
    }

}


/* Full screen mode or desktop browser */

@media only screen and (min-width: 1025px) {
    #fsmodal {
        display: none;
    }
}

:-ms-fullscreen #fsmodal {
    display: none;
}
:-webkit-full-screen #fsmodal {
    display: none;
}
:fullscreen #fsmodal{
    display: none;
}


/*# sourceMappingURL=filler.css.map*/