body {
  position: relative;
  margin: 0;
  min-height: 100vh;
}

body::before {
  content: "";
  position: fixed; /* або absolute, якщо треба, щоб фон скролився */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Ховаємо під контент */
  
  background-image: url('/img/bg-neuro12.png');
  background-size: cover;
  background-position: center;
  
  opacity: 1; /* Ось тут регулюєш прозорість фону */
}


a {text-decoration: none;}
.mypointer:hover { cursor: pointer;}

.is_testing::before {
    content: "Тестова версія";
    background-color: #b40303;
    position: absolute;
    top: 0.5rem;
    left: 1.2rem;
    color: #ffffff;
    padding: 4px 10px 4px 5px;
    font-size: 0.85rem;
    font-family: sans-serif;
    border-radius: 4px;
    z-index: 9999;
    pointer-events: none;
    opacity: 100%;
}


#divAttempt::before {
    content: attr(data-fio); /* Обов'язкова властивість для псевдоелементів */
    background-color: #00aebc;
    position: absolute;
    top: 0.5rem;
    right: 1.2rem;
    color: #ffff00;
    padding: 4px 10px 4px 5px;
    font-size: 0.85rem;
    font-family: sans-serif;
    border-radius: 4px;
    z-index: 9999;
    pointer-events: none;
    opacity: 100%;
}

#divAttempt[data-paid="1"]::after {
    content: "$";
    background-color: #ffff00;
    position: absolute;
    top: 0.1rem;
    right: 0.5rem;
    color: #ff0000;
    padding: 2px 6px;
    font-size: 0.85rem;
    font-family: sans-serif;
    border: 2px solid;
    border-radius: 4px;
    z-index: 9999;
    pointer-events: none;
    opacity: 61.8%;
}

.attempt { color: #31ff20;}

.grad_GR { background: linear-gradient(to right, green 0%, yellow 38.2%, yellow 61.8%, red 100%);}
.grad_RG { background: linear-gradient(to right, red 0%, yellow 38.2%, yellow 61.8%, green 100%);}
.grad_RGR { background: linear-gradient(to right, red 0%, yellow 20%, green 38.2%, green 61.8%, yellow 80%, red 100%);}
.grad_TYY { background: linear-gradient(to right, red 0%, yellow 23.6%, yellow 38.2%, green 50%,
            yellow 61.8%, yellow 72.4%,red 100%);}
.grad_RGB { background: linear-gradient(to right, red 0%, yellow 23.6%, yellow 38.2%, green 50%,
yellow 61.8%, yellow 72.4%,blue 100%);}

.grad_NORM { background: linear-gradient(to right, red 0%, yellow 50%,
yellow 75%, #007600 100%);}


.gradient-marker {
    position: absolute;
    top: -3px;
    bottom: 3px;
    width: 2px;
    height: calc(100% + 6px);
    background-color: black;
    transform: translateX(-1px);
}

.closeResDiv {
    position: absolute;
    top: 4rem;
    right: 3rem;
    z-index: 10000;
    font-size: 161.8%;
}

#tc_selTest, #infoSelectedTest {min-width: 9rem; display: inline-block;}
.oneRes { background-color: #FFF8DC; }
.oneResInside {
    background-color: inherit;
    color: inherit;
    font-style: inherit;
    padding: inherit;
}

.oneResInside[colbg='1'] {
    background-color: #ede6cb;
    color: #000000;
    font-style: italic;
    font-family: monospace;
    padding: 3px;
}

.gScale, .gScalePay {
    width: 61.8%;
    height: 1.618rem;
    display: inline-block;
    margin-top: 3px;
    margin-bottom: 3px;
}
.text-violet { color: #c500b9;}
.txtValue {
    overflow: hidden;
    white-space: nowrap;
    display: block;
    text-overflow: ellipsis;
}

.mydtbl th { text-align: center!important;}
.my-left {text-align: left!important;}

/****** для міні діаграми ****/
.tc-chart-inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 100%;
}
.tc-chart-axis {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #666;
}

.tc-bar-wrapper {
    position: relative;
    flex: 1;
    height: 100%;
    display: flex;
    justify-content: center;
}
.tc-bar { width: 100%; position: absolute; bottom: 50%; border-radius: 3px; }
.tc-bar-up { background-color: green; transform: translateY(0); }
.tc-bar-down { background-color: red; transform: translateY(100%);}
/**************************************/

.iconAIselect {height: 20px;}


/******* //# details result ***********/
.details-grid { display: grid; grid-template-columns: 1fr;  gap: 20px; }
.details-entry {
    background: #fff;
    padding: 0.618rem;
    border-left: 1rem solid #4caf50;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.382);
    border-radius: 1rem;
}
.details-label { font-weight: bold; font-size: 1.1em; margin-bottom: 5px; }
.details-value { margin-left: 10px; color: blue; font-size: 125%; font-weight: 800;}
.details-descr { font-style: italic; color: #555; margin-top: 5px; }
@media (min-width: 768px) {
    .details-grid { grid-template-columns: 1fr 1fr;}
}

.cell-details .action-btn {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    margin-left: 8px;
}
tr:hover .cell-details .action-btn {
    opacity: 1;
    pointer-events: auto;
}

/**************************************/


/*
.vertical-radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: sans-serif;
}

.vertical-radio-group label {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.vertical-radio-group input[type="radio"] {
    margin-right: 8px;
    accent-color: #007bff;
}

.vertical-radio-group label:hover {
    background: #f0f0f0;
}
*/


/* -- tooltip з сіткою для графіків -- */
.custom-tooltip-box {
  background: #fff;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 30px);
  grid-gap: 4px;
  margin: 10px 0;
}

.grid-center {
    width: 30px;
    height: 30px;
}

.grid-item {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    background: #fff;
    font-size: 12px;
    color: #444;
}

/* Клас для активних клітинок */
.grid-item.active {
    background-color: #333; /* Темний колір */
    border-color: #000;
    color: #fff;            /* Білий текст для контрасту */
    font-weight: bold;
}
.tooltip-header { font-weight: bold; text-align: center; }
.tooltip-value { font-size: 12px; text-align: center; margin-top: 5px; }
/* -- end tooltip з сіткою для графіків -- */



/*** тест реакція ***/
#reactArea::before {
    content: attr(data-label);
    position: absolute;
    top: 0;
    left: 0;
    background: #bd43a3;
    color: white;
    width: fit-content;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: bold;
    font-family: sans-serif;
    border-radius: 4px;
    z-index: 9999;
    pointer-events: none;
    opacity: 100%;
 }
#reactArea {
    position: relative;
    /*width: min(80vw, 300px);
    height: min(80vw, 300px);*/
    aspect-ratio: 1/1;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
}
#borderCircle{
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    top: 0px;
    left: 0px;
    z-index: 1000;
    border: 1px solid #333;
    border-radius: 50%;
    background-color: #2bc830;
}
.ballMain, .ballTarget {  position: absolute; user-select: none; z-index: 1001; }
.ballMain {
    text-align: center;
    border-radius: 50%;
    background-image: url("tcIcoBallLeague.png");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1002;
}
.ballTarget::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 48px; height: 24px;
    background-image: url("tcIcoGoals.png");
    background-size: cover;
    background-position: center;
    z-index: -1;
    transform: rotate(var(--angle));
    transform-origin: center center;
    z-index: 1001;
}


.btnCmd[cmd='catch'] { min-height: 5rem;}
    /*font-size: clamp(12px, 4vw, 12px); line-height: 12px; text-align: center;*/
/********************/




.eyes {
    display: flex;
    justify-content: center;
    gap: 5%;
    opacity: 0.382;
}
.eye {
    /*width: 35%;*/
    width: 13vw;
    aspect-ratio: 2.5 / 1;
    border-radius: 50%;
    /*background: white; */
    position: relative;
    border: 1px solid black;}
.pupil {
    height: 61.8%;
    aspect-ratio: 1 / 0.618;
    background: black;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.btnCmd[cmd='start']{
    -webkit-touch-callout: none; /* Вимикає контекстне меню */
    user-select: none; /* Заборона виділення тексту */
}

.oneTarget.helpTarget { height: 7vw; width: 7vw;}
.sqTarget {  padding: 0px; }
.sqTarget[c='-1'] { border: 1px dotted black; }
.sqBig, .sqMedium, .sqSmall { position: relative; padding: 0px; aspect-ratio: 1/1; }
.sqBig { width: 100%; height: 100%; margin-top: 0%; left: 0; z-index: 200;}
.sqMedium { width: 66%; height: 66%; margin-top: -83%; left: 17%; z-index: 300;}
.sqSmall { width: 34%; height: 34%; margin-top: -50%; left: 33%; z-index: 400;}

.sqBig[c='0'],.sqMedium[c='0'],.sqSmall[c='0'] { visibility: hidden;}
.oneTarget { 
    position: relative; 
    padding: 1%; 
    width: 31%; 
    height: 31%; 
    aspect-ratio: 1/1; 
    display: inline-block;
    background-color: #ffffff;
}
/*.oneTarget,.oneTarget[sq] { cursor: cell; display: inline-block; width: 32%;}
.oneTarget[c='0'] { cursor: auto; } */
.oneTarget[c='0'],.oneTarget[sq],.sqBig[c='0'] { 
    border: none;
    background-color: #ffffff;
    box-shadow: 0px 0px 5px #68ff0f;
}
.oneTarget:hover { cursor: cell; }
.oneTarget[n='0']:hover { cursor: initial; pointer-events: none;}
*[blockevents='1'] {pointer-events: none;}
.ion-close-circled:hover { cursor: pointer; }
.imgButtStart {
    width: 100%;
    aspect-ratio: 1/1;
}
.icoButtStart {
    width: 20%;
    background-color: #000000;
    padding: 5px;
    margin-bottom: 4%;
    box-shadow: 0px 0px 10px #14ff14;
    color: #1eff35;
    margin-right: 0.618rem !important;
}
.icoButtStart:hover {
    background-color: #bebec0;
}
.helpICO { width: 5%; }

[vsh] {position: relative;}
[vsh='1'] {visibility: hidden;}
/*div[vs='1'] { visibility: hidden;}*/
[dnone='1'] { display: none!important; }
[novsbl='1'] {  visibility: hidden; }

.gradient-text, .taskDiv[c='0'] {
    background: linear-gradient(to right, #ff0000, #0000FF, #00c127,#ffff00, #00e0ff, #aa0da2);
    -webkit-background-clip: text; color: transparent; background-clip: text;
}


[c='0'],.taskDiv { background-color: #ffffff; }
[c='1'],.oneTarget[sq][g='5'] { background-color: #ff0000; color: #ffffff; --trueColor: #ff0000; }
[c='2'],.oneTarget[sq][g='5'] { background-color: #0000FF; color: #ffffff; --trueColor: #0000FF; }
[c='3'],.oneTarget[sq][g='5'] { background-color: #00c127; color: #ffffff; --trueColor: #00c127; }
[c='4'],.oneTarget[sq][g='5'] { background-color: #ffff00; color: #000000; --trueColor: #ffff00; }
[c='5'],.oneTarget[sq][g='5'] { background-color: #000000; color: #ffffff; --trueColor: #000000; }
[c='6'],.oneTarget[sq][g='5'] { background-color: #8b8b8b; color: #ffffff; --trueColor: #8b8b8b; }
[c='7'],.oneTarget[sq][g='5'] { background-color: #00e0ff; color: #000000; --trueColor: #00e0ff; }
[c='8'],.oneTarget[sq][g='5'] { background-color: #aa0da2; color: #ffffff; --trueColor: #aa0da2; }

.taskDiv {
    width: 100%;
    height: 5vw;
    display: block;
    border: 3px solid #ffffff;
}
.taskDiv[c='0']{
    background: linear-gradient(to right, #ff0000, #0000FF, #00c127,#ffff00, #00e0ff, #aa0da2);
    color: #ffffff;
    text-shadow: 1px 1px 1px #000000 ;
}

.colorHelp {font-size: 125%;}

/*
.sqBig, .sqMedium, .sqSmall { position: relative; border: 1px solid var(--trueColor);}
.sqBig { width: 6vw; height: 6vw; top: 0vw; left: 0vw; z-index: 200;}
.sqMedium { width: 4vw; height: 4vw; top: 1vw; left: 1vw; z-index: 300;}
.sqSmall { width: 2vw; height: 2vw; top: 2vw; left: 2vw; z-index: 400}
*/
/*.btnCmd { height: 5vw;}*/
.btnCmd[cmd='yes'],.btnCmd[cmd='no'] {
    width: 95%;
}
.btnCmd[cmd='yes'] span,.btnCmd[cmd='no'] span {
    display: flex;
    align-items: center;
    justify-content: center;
}


#countdown-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Напівпрозорий чорний фон */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Поверх усього */
    color: white;
    font-size: 150px; /* Великий розмір шрифту */
    font-family: Arial, sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

#resultDetails {
    position: absolute;
    z-index: 500;
    top: 20px;
    background-color: aquamarine;
    box-shadow: 0px 0px 10px;
}

/*
@media (max-width: 768px){
    .btnCmd[cmd='yes'],.btnCmd[cmd='no'] {font-size: 5vw; height: 10vw;}
    .taskDiv { width: 100%; }
}
*/
@media (max-width: 768px){
    .taskDiv { width: 100%; }
    .icoButtStart { width: 25%; }
    #game1 { margin-top: 25vh;}
    /*
        .oneTarget { height: 20vw; width: 20vw; margin: 2vw;}

        .sqBig { width: 20vw; height: 20vw; top: 0vw; left: 0vw;}
        .sqMedium { width: 14vw; height: 14vw; top: 3vw; left: 3vw;}
        .sqSmall { width: 8vw; height: 8vw; top: 6vw; left: 6vw;}
    */
}

.no-select {
    user-select: none; /* Современные браузеры */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
}