:root {
    --bodyBg: #000;
    --bodyColor: #f0f0f0;
    --contentBg: #211f1d;
    --contentBg2: #20201f;
    --navBar: #1e1916;
    --navBarA: #fcd8a4;
    --navBarHomeHoverBg: #221612;
    --navBarAHoverBg: #ffe0d4;
    --navBarAHoverColor: #000;
    --navBarAActiveBg: #44331c;
    --navBarAActiveColor: #fff;
    --logoGold: #c99e4d;
    --textP: #fff7e8;
    --textGold: #ceae87;
    --textQuote: #fff9df;
    --textFooter:  #cdba9a;

    --citeBg: #2d2e2b;
    --citeColor: #f2edda;

    --oldBrown: #6d3522;
    --oldRed: #d76849;

    --base-font-size: 16px;
    font-size: 100%; /* Возвращаем к стандартному размеру */
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    font-size: 100%;
}
@font-face {
    font-family: "Alice";
    src: url('../fonts/Alice-Regular.ttf');
}
body {
    height: 100%;
    overflow: hidden;
    font-size: 1rem;
    line-height: 1;

    font-family: 'Alice', 'Garamond', "Times New Roman", Times, serif;
    margin: 0;
    background: var(--bodyBg);
    color: var(--bodyColor);
}
.gcontainer {
    display: grid;
    height: 100vh;
    width: 100%;
    gap: 0;

    grid-template-areas:
        "ga1 ga2 ga3"
        "gb  gb  gb"
        "gc1 gc2 gc3"
        "gd  gd  gd";

    /* Размеры строк */
    grid-template-rows: 1fr 8fr 5fr 7fr;
    
    /* Размеры колонок */
    grid-template-columns: 2fr 3fr 2fr;
}
.content {
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
#areabottom {
    grid-area: gd;
    background-color: #2c2c2c;
}
#game {
    grid-area: gb;
    background-image: url(/image/tir/walls2.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /* BG-color set after image. If set before && image fails, can produce transparent BG */
    background-color: #000;
}
#targetdiv {
    height: 96%;
    aspect-ratio: 1 / 1;
    position: relative;

    background-image: url(/image/tir/target3.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: #000;
}
#reticle {
    position: absolute;
    width: 1rem;
    height: 1rem;
    background: red;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}
#fire-effect {
    position: absolute;
    width: 50px;
    height: 50px;
    display: none;
}
.topButtons {
    margin: 0;
    padding: 1rem 1rem; /* Отступы для текста */
    border: none; /* Убираем стандартную рамку */
    outline: none; /* Убираем подсветку при клике */
    cursor: pointer;
    
    /* background-image: url('путь-к-вашему-изображению.jpg'); */
    background-size: cover; /* Масштабируем изображение */
    background-position: center; /* Центрируем изображение */
    background-repeat: no-repeat; /* Запрещаем повторение */
    background-color: #4d4d4d;            

    color: var(--textP);
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
}
#settingsButton {
    grid-area: ga1;
}
#scorediv {
    grid-area: ga2;
    margin: 0;
    padding: 0;
    color: var(--textGold);
}
#exitButton {
    grid-area: ga3;
}
#score {
    text-align: center;
    margin: 0 1rem;
    padding: 0;
    font-family: 'Alice', 'Garamond', "Times New Roman", Times, serif;
    font-size: 2.2rem;
    font-weight: normal;
    color: var(--textGold);
}

h2 {
    color: var(--textP);
    font-size: 1.25rem;
    text-align: center;
    margin: 1rem 0;
}
h3 {
    font-size: 1.125rem;
    color: var(--textGold);
}
p {
    margin: 0.5rem 1rem;
    text-align: left;
    font-size: 1rem;
    hyphens: auto;    /* Автоматический перенос */
    color: var(--textP);
}

#cyldiv {
    width: 100%;
    grid-area: gc2;
    background-image: url(/image/tir/cylinder_fon.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /* BG-color set after image. If set before && image fails, can produce transparent BG */
    background-color: #4d4d4d;
}
#cylinder {
    width: 95%;
    margin: 1rem;
    transition: transform 0.333s ease-in-out;
}
.rotate {
    transform: rotate(-60deg);
}
.boka {
    background-color: #4d4d4dff;
    margin: 0;
}
#bok1 {
    grid-area: gc1;
    margin: 0;
    background-image: url(/image/tir/bok1h_on.svg);
    background-repeat: no-repeat;
    background-position: left;
    background-size: cover;
}
#bok2 {
    grid-area: gc3;
    margin: 0;
    background-image: url(/image/tir/bok2h.svg);
    background-repeat: no-repeat;
    background-position: right;
    background-size: cover;
}

/* both modal buttons */
.buttons {
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    background-color: #4d4d4d;            
    color: #978873;
    font-size: 1.25rem;
    font-weight: bold;
    padding: 1rem;
}
.buttons:hover { color: #de9657; }

/* ============== M O D A L - SeTTingS================ */
#settings-menu {
    display: none;
    position: fixed;
    z-index: 98;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    gap: 0;
    grid-template-areas:
        "gseta   gseta"
        "gsetb1  gsetb2"
        "gsetc   gsetc"
        "gsetd   gsetd"
        "gsete   gsete"
        "gsetx   gsetx";

    grid-template-rows: auto auto 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr;

    width: 81%;
    height: 85%;

    margin: 0 auto;
    text-align: center;
    background-color: rgb(43, 43, 43);
    box-shadow: 1rem 1rem 3rem #000;
}
#settings1 {
    grid-area: gseta;
    margin: 1rem 0 1.7rem 0;
}
#trigger1 {
    grid-area: gsetb1;
    display: flex;
    justify-content:flex-end;
    align-items: center;
    background-color: #4d4d4d;
}
#trigger1 img {
    height: 3rem;
}
#trigger1label {
    grid-area: gsetb2;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content:flex-start;
    align-items: center;
    margin: 0;
    background-color: #4d4d4d;
}
#trigger1label h3 {
    font-size: 1.5rem;
    padding: 0;
    margin: 0;
}
#settings2 {
    grid-area: gsetc;
    margin: 2rem 0 1rem 0;
}
#settings3 {
    grid-area: gsetd;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 0;
}
.sm-icon {
    display: block;
    height: 3rem;
    margin: 1rem 2rem;
}
#settings4 {
    grid-area: gsete;
    padding: 0 0 0.7rem 0;
}
#settingsbuttondiv {
    grid-area: gsetx;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* ============== M O D A L - R E S U L T S================ */
.modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    gap: 0;
    grid-template-areas:
        "gmoda"
        "gmodb"
        "gmodc";

    grid-template-rows: 2fr 4fr 1fr;
    grid-template-columns: 1fr;

    z-index: 99;
    margin: 0 auto;
    text-align: center;
    width: 81%;
    height: 85%;
    background-image: url(/image/tir/x.svg);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 2rem;
    background-color: rgb(43, 43, 43);
    box-shadow: 1rem 1rem 3rem #000;
}
#results {
    grid-area: gmoda;
}
#results ul {
    font-size: 1.2rem;
    color: var(--textP);
    list-style: none;
    text-align: left;
    margin: 1rem 1rem 1rem 0;
}
#results li {
    text-align: left;
    margin: 0.5rem 1rem 0.5rem 0.7rem;
}
#korshun {
    grid-area: gmodb;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    background-image: url(/image/tir/korshun3_720.png);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
    /* BG-color set after image. If set before && image fails, can produce transparent BG */
    background-color: #978873;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 50%;
    width: 100%;
    overflow: hidden;            
}
#quotediv {
    background-color: #00000080;
    width: 100%;
    margin: 0;
    min-height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
#quotediv p {
    font-size: 1.2rem;
}
#modalbuttondiv {
    grid-area: gmodc;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.5rem;
}

/*        ======== [ FOR LANDSCAPE SCREENS ]========        */
/* @media screen and (orientation:landscape){ */
@media only screen and (min-aspect-ratio: 4/3) {
    .gcontainer {
        display: grid;
        height: 100vh;
        width: 100%;

        grid-template-areas:
            "ga1 ga2 ga3 gc1 gd"
            "gb  gb  gb  gc1 gd"
            "gb  gb  gb  gc2 gd"
            "gb  gb  gb  gc2 gd"
            "gb  gb  gb  gc3 gd"
            "gb  gb  gb  gc3 gd";

           grid-template-rows: 1fr 2fr 2fr 2fr 2fr 2fr;
        grid-template-columns: 3fr 3fr 3fr 3fr 5fr;
    }
    #game {
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }
    #targetdiv {
        height: 100%;
        aspect-ratio: 1 / 1;
    }
    #reticle {
        width: 1.275rem;
        height: 1.275rem;
    }
    #cylinder {
        width: 90%;
        height: auto;
        margin: 1rem;
        transition: transform 0.333s ease-in-out;
    }
    #bok1 {
        background-position: top;
    }
    #bok2 {
        background-position: bottom;
     }

    .modal {
        grid-template-areas:
            "gmodb gmoda"
            "gmodb gmodc";

        grid-template-rows: 1fr 1fr;
        grid-template-columns: 4fr 3fr;
        width: 81%;
        height: 91%;
    }

    #settings-menu {
        grid-template-areas:
            "gseta gseta gsetb1 gsetb2"
            "gseta gseta gsetc  gsetc"
            "gseta gseta gsetd  gsetd"
            "gsete gsete gsetx  gsetx";

        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-template-columns: 3fr 5fr 5fr 3fr;

        width: 81%;
        height: 91%;
    }
    #settings2 {
        grid-area: gsetc;
        margin: 0 1rem;
    }
    .sm-icon {
        display: block;
        height: 3rem;
        margin: 0 2rem;
    }
    .buttons {
        padding: 0.4rem 1rem;
    }
}

/* ----------- iPad 1, 2, Mini and Air LANDSCAPE----------- */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- Non-Retina Laptops ----------- */
@media screen and (min-device-width: 1200px){ 

}