/*
** Copyright (C) 2001-2025 initMAX s.r.o.
**
** This program is free software: you can redistribute it and/or modify it under the terms of
** the GNU Affero General Public License as published by the Free Software Foundation, version 3.
**
** This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
** without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
** See the GNU Affero General Public License for more details.
**
** You should have received a copy of the GNU Affero General Public License along with this program.
** If not, see <https://www.gnu.org/licenses/>.
**/
/* No @import of fonts.css here: the manifest already lists it, and 6.0/6.2
   INLINE a module's stylesheet into the page - a relative @import would then
   resolve against zabbix.php and 404, which is exactly how a widget loses its
   web font on the older line while looking right on the newer one. */

.tetrismax {
    font-family: 'Rubik' !important;
    --cell-size: 2rem;

    --background-color: #060919;
    --border-color: rgba(255, 255, 255, 0.20);

    --block-border-color: rgba(255, 255, 255, 0.30);
    --block-background: radial-gradient(178.81% 195.64% at -6.11% 111.94%, #1B195D 0%, #423DE8 52.86%, #E1E1FF 100%);
    --block-shadow: 0 0 33.701px -2.696px rgba(65, 60, 226, 0.42), 0 0 134.803px 0 rgba(66, 61, 230, 0.50);

    --falling-block-border-color: rgba(255, 255, 255, 0.30);
    --falling-block-background: radial-gradient(193.44% 188.57% at -16.11% 120.56%, #FFF 0%, #CED1FF 52.74%, #8B8AF4 100%);
    --falling-block-shadow: 0 2.494px 34.291px -3.117px rgba(255, 255, 255, 0.03), 0 0 33.611px 0 rgba(209, 211, 255, 0.10);

    --tetromino-i: #00ffff;
    --tetromino-j: #0000ff;
    --tetromino-l: #ffa500;
    --tetromino-o: #ffff00;
    --tetromino-s: #00ff00;
    --tetromino-t: #800080;
    --tetromino-z: #ff0000;

    --tetromimo-universal: var(--block-background);

    height: 100%;
    box-sizing: border-box; 
    
    display: grid;
    grid-template-areas: 
        "empty2 header logo"
        "bar   board  next"
        "bar   board  score"
        "bar   board  level"
        "bar   board  lines"
        "bar   board  empty"
    ;
    grid-template-columns: min-content min-content auto;
    grid-template-rows: 
        min-content
        min-content 
        repeat(4, min-content)
    ;
    gap: 1rem;

    padding: 1.5rem 1rem 1rem;
    
    background-color: var(--background-color);

    border-radius: 20px;

    overflow-y: hidden;
    
    /* Corner image */
    background-image: url("../img/corner.svg");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 50%;

    .header {
        grid-area: header;
        text-align: center;
        font-size: 5rem;
        
        background-image: url("../img/tetrisMAX.svg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        padding: 3rem;
    }

    .bar {
        grid-area: bar;
        display: flex;
        flex-direction: column;
        width: 1.75rem;

        .bar__item {
            display: flex;
            flex: 1;
            justify-content: center;
            align-items: center;
            padding: 0.5rem 0;
            .image {
                width: 1rem;
                height: 100%;
                background-repeat: no-repeat;
                background-position: center;
                background-size: contain;
            }
        }

        .bar__item:nth-child(1) { 
            background-color: var(--severity-color-disaster-bg); 
            .image {
                background-image: url("../img/bar/disaster.svg");
            }
        } 
        .bar__item:nth-child(2) { 
            background-color: var(--severity-color-high-bg); 
            .image {
                background-image: url("../img/bar/high.svg");
            }
        } 
        .bar__item:nth-child(3) { 
            background-color: var(--severity-color-average-bg); 
            .image {
                background-image: url("../img/bar/average.svg");
            }
        } 
        .bar__item:nth-child(4) { 
            background-color: var(--severity-color-warning-bg); 
            .image {
                background-image: url("../img/bar/warning.svg");
            }
        } 
        .bar__item:nth-child(5) { 
            background-color: var(--severity-color-info-bg); 
            .image {
                background-image: url("../img/bar/info.svg");
            }
        } 
        .bar__item:nth-child(6) { 
            background-color: var(--severity-color-na-bg); 
            .image {
                background-image: url("../img/bar/classified.svg");
            }
        } 

        .bar__item:first-child {
            border-top-left-radius: 2rem;
            border-top-right-radius: 2rem;
        }
        .bar__item:last-child {
            border-bottom-left-radius: 2rem;
            border-bottom-right-radius: 2rem;
        }
    }
    
    .logo {
        grid-area: logo;
        align-content: center;
        
        .image {
            height: 2.7rem;
            background-image: url("../img/logo.svg");
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }
    }

    .tetrismax__board {
        grid-area: board;
        border-radius: 2rem;
        padding: 1rem;

        border: 3px solid var(--border-color);
        background-color:  var(--background-color);
        box-shadow: 0 0 33.701px -2.696px rgba(65, 60, 226, 0.42), 0 0 134.803px 0 rgba(66, 61, 230, 0.50);

        display: grid;
        grid-template-columns: repeat(var(--board-size-x), var(--cell-size));
        grid-template-rows: repeat(var(--board-size-y), var(--cell-size));

        gap: 3px;

        .filled {
            background: var(--falling-block-background);
            box-shadow: var(--falling-block-shadow);
            border-radius: 0.5rem;
        }

        .dropped {
            background: var(--block-background);
            box-shadow: var(--block-shadow);
            border-radius: 0.5rem;
        }
        /*
        > div {
            &[data-value="1"] {
                background-color: var(--tetromino-universal) !important;
            }

            &[data-value="2"] {
                background-color: var(--tetromino-universal)!important;
            }

            &[data-value="3"] {
                background-color: var(--tetromino-universal)!important;
            }

            &[data-value="4"] {
                background-color: var(--tetromino-universal)!important;
            }

            &[data-value="5"] {
                background-color: var(--tetromino-universal)!important;
            }

            &[data-value="6"] {
                background-color: var(--tetromino-universal)!important;
            }

            &[data-value="7"] {
                background-color: var(--tetromino-universal)!important;
            }
        }*/
    }

    .tetrismax__score {
        grid-area: score;  
    }

    .tetrismax__level {
        grid-area: level;  
    }

    .tetrismax__lines {
        grid-area: lines;
    }

    .tetrismax__next {
        grid-area: next;
        display: flex;
        align-items: center;    
        justify-content: center; 
          
        .score-item__grid-container {
            display: flex;
            background: linear-gradient(184deg, #FFF -14.41%, #D0CFFF 113.14%);
            border-radius: 1rem;
            justify-content: center;
            align-items: center;
            padding: 1rem;
            gap: 1rem;
            
            .tetrismax__next__grid {
                display: grid;
                gap: 0.125rem;
       
                .tetrismax__next__grid__cell {
                    width: 1.5rem;
                    height: 1.5rem;
                    box-sizing: border-box;
                
                    &[data-value] { 
                        background: var(--block-background);
                        box-shadow: var(--block-shadow);
                        border-radius: 0.5rem;
                    }
                }
            }
        }
    }
}

.score-item {
    display: flex;
    flex-direction: column;
    align-items: center;    
    justify-content: center;
    position: relative; 

    .score-item__label {
        height: 1rem;
        margin-bottom: 0.5rem;
        width: 5rem;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        
        &[data-id="next"] {
            background-image: url("../img/next.svg");
        }
        &[data-id="time"] {
            background-image: url("../img/time.svg");
        }
        &[data-id="level"] {
            background-image: url("../img/level.svg");
        }
        &[data-id="lines"] {
            background-image: url("../img/lines.svg");
        }
        &[data-id="score"] {
            background-image: url("../img/form/score.svg");
        }
    }

    .score-item__value {      
        display: flex;
        gap: 0.5rem;
        justify-content: center;
        align-items: center;
        /* Fallback text */
        font-size: 3rem;
        font-weight: bold;
        padding: 0.5rem;
        background: linear-gradient(180deg, #fff 0%, #d0cfff 100%);
        -webkit-background-clip: text;   
        -webkit-text-fill-color: transparent; 
        background-clip: text;
        color: white;
    }

    &:not(.tetrismax__next)::after {
        content: "";
        display: block;
        width: 20%;       
        height: 1px;      
        background-color: rgba(255, 255, 255, 0.20);
        margin-top: 0.5rem; 
        border-radius: 1px; 
    }
}

.char {
    width: 2rem;
    height: 3rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    &[data-id="0"] { background-image: url("../img/numbers/0.svg"); }
    &[data-id="1"] { background-image: url("../img/numbers/1.svg"); }
    &[data-id="2"] { background-image: url("../img/numbers/2.svg"); }
    &[data-id="3"] { background-image: url("../img/numbers/3.svg"); }
    &[data-id="4"] { background-image: url("../img/numbers/4.svg"); }
    &[data-id="5"] { background-image: url("../img/numbers/5.svg"); }
    &[data-id="6"] { background-image: url("../img/numbers/6.svg"); }
    &[data-id="7"] { background-image: url("../img/numbers/7.svg"); }
    &[data-id="8"] { background-image: url("../img/numbers/8.svg"); }
    &[data-id="9"] { background-image: url("../img/numbers/9.svg"); }
    &[data-id="x"] { background-image: url("../img/numbers/x.svg"); }

    &[data-id=":"] { 
        height: 2.2rem !important;
        background-image: url("../img/numbers/semicolon.svg");         
        margin-inline: -0.8rem; 
    }
}

.hidden {
    display: none !important;
}

.dialog-item {
    display: flex;
    flex-direction: column;
    align-items: center;    
    justify-content: center;
    position: relative; 

    .score-item__label {
        height: 2rem;
        margin-bottom: 0.5rem;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        width: 9rem;
        &[data-id="score"] {
            background-image: url("../img/form/score.svg");
        }
    }

    .score-item__value {      
        display: flex;
        gap: 0.5rem;
        justify-content: center;
        align-items: center;
        /* Fallback text */
        font-size: 3rem;
        font-weight: bold;
        padding: 0.5rem;
        background: linear-gradient(180deg, #fff 0%, #d0cfff 100%);
        -webkit-background-clip: text;   
        -webkit-text-fill-color: transparent; 
        background-clip: text;
        color: white;
    }
}

.tetrismax__board .line-clearing {
    animation: clearLine 1s ease-in-out forwards;
}

@keyframes clearLine {
    0%   { opacity: 1; transform: translateX(0); filter: brightness(1); }
    20%  { filter: brightness(3); }
    40%  { filter: brightness(1); }
    60%  { filter: brightness(3); }
    80%  { filter: brightness(1); }
    90%  { opacity: 1; transform: translateX(-5px); }
    100% { opacity: 0; transform: translateX(-10px); filter: brightness(1); }
} 