:root {
    --background-block: #f2f2f2;
    --background-block-DT: #464646;
    --background-block-odd: #fbfbfb;
    --background-block-odd-DT: #3b3b3b;
    --background-block-even: #f2f2f2;
    --background-block-even-DT: #464646;

    --background-blockTabs: #f2f2f2;
    --background-blockTabs-DT: #464646;

    --color-infoBlock: #825454;
    --color-infoBlock-DT: #eccdcd;
    --background-infoBlock: #e0e0e0;
    --background-infoBlock-DT: #343434;


    --borderRadius-block: 6px;
}



/* ОБЩЕЕ */
.paddingSmall {padding: 10px;}
.paddingMedium {padding: 20px;}
.paddingLarge {padding: 30px;}
.paddingHuge {padding: 50px;}
.paddingHeightSmall {padding-top: 10px; padding-bottom: 10px;}
.paddingHeightMedium {padding-top: 20px; padding-bottom: 20px;}
.paddingHeightLarge {padding-top: 30px; padding-bottom: 30px;}
.paddingWidthSmall {padding-left: 10px; padding-right: 10px;}
.paddingWidthMedium {padding-left: 20px; padding-right: 20px;}
.paddingWidthLarge {padding-left: 30px; padding-right: 30px;}

.widthContentSmall {margin: 0 auto; max-width: 400px;}
.widthContentLarge {margin: 0 auto; max-width: 900px;}




.important {
    background: var(--background-main);
    color: var(--color-titleHead);
    box-sizing: border-box;
}


/* flexCardBattle */
.flexCardBattle {
	display: flex;
	text-align: center;
	justify-content: space-between;
  	align-items: center;
}
.flexCardBattle > :nth-child(1) {
	width: 140px;
}
.flexCardBattle > :nth-child(2) {
	font-size: 20px;
  	font-weight: bold;
	margin: 0 6px;
}
.flexCardBattle > :nth-child(3) {
	width: 140px;
}


/* blockTabs */
.blockTabs {
    display: flex;
    margin-bottom: 10px;
}
.blockTabs > div {
    flex: 1;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    background-color: var(--background-blockTabs);
    color: var(--color-grayDark);
    border-radius: var(--borderRadius-block);
    margin-right: 4px;
}
.blockTabs > div:last-child {
    margin-right: 0;
}
.blockTabs > div:hover {
    background-color: var(--background-main);
    color: var(--color-titleHead);
}
.blockTabs > [data-status="active"] {
    background-color: var(--background-main);
    color: var(--color-titleHead);
}



/* block */
.block {
    background: var(--background-block);
    box-sizing: border-box;
    border-radius: var(--borderRadius-block);
    box-shadow: 0 0 5px rgba(0,0,0,.14);
}
.block-h1 {
    background: var(--background-main);
    color: var(--color-titleHead);
    font-size: 28px;
    margin-bottom: 4px;
}
.block-h2 {
    border-bottom: 1px solid var(--background-body);
    font-weight: 700;
}

.infoBlock {
    background:#e0e0e0;
    color: #825454;
}

/* tableGamesItem */
.tableGamesItem {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--color-grayDark);
    transition: background-color 0.3s;
    border-radius: var(--borderRadius-block);
}
.tableGamesItem:hover {
    background-color: var(--background-body);
}


.gameTableNames {
    flex: 1;
    min-width: 0;
}
.gameTableNames .ATT {
    gap: 4px;
}
.gameTableNames .ATT > img {
    display: block;
    width: 54px;
}
.gameTableNames .ATT > div {
    min-width: 0;
}
.gameTableNames .ATT > div > div:nth-child(1) {
    font-size: 18px;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gameTableNames H2 {
    font-weight: normal;
    text-align: left;
    margin-bottom: 0;
    font-size: 18px;
}
.gameTableNames .ATT > div > div:nth-child(2) {
    font-size: 12px;
    font-weight: bold;
    color: var(--color-text);
}
.gameTableNames .ATT > div > div:nth-child(3) {
    font-size: 12px;
}

.gameTableDate {
    flex: 0 0 85px;
    text-align: center;
}
.gameTableDate > div:nth-child(1) {
    font-size: 14px;
}
.gameTableDate > div:nth-child(2) {
    font-size: 18px;
}

.gameTableCounts {
    flex: 0 0 85px;
    text-align: center;
    border-radius: 4px 4px 4px 4px;
    /* border: 2px solid var(--background-main); */
}
.gameTableCounts > div:nth-child(1) {
    color: #cdff74;
    font-size: 18px;
    background: var(--background-main);
    border-radius:  var(--borderRadius-block);
    padding: 4px 0;
}
.gameTableCounts > div:nth-child(2) {
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
    font-size: 14px;
    padding: 3px 0;
}
.gameTableCounts > div:nth-child(2) > img {
    filter: invert(45%);
    height: 16px;
}



/* ATT */
.ATT {
    display: flex;
    align-items: center;
}

.block-h1 .ATT {
    gap: 10px;
}

.block-h1 H1 {
    font-weight: normal;
    text-align: left;
    margin-bottom: 0;
    font-size: 28px;
}

.block-h1 .ATT > img {
    width: 80px;
    border-radius: var(--borderRadius-block);
}
.block-h1 .ATT > div > div:nth-child(2) {
    font-size: 14px;
}

.innerBlock .ATT > img {
    display: block;
    width: 50px;
    border-radius: var(--borderRadius-block);
    margin-right: 6px;
}
.innerBlock .ATT  > div > div:nth-child(1) {
    color: var(--color-sidebar);
    font-size: 20px;
}
.innerBlock .ATT  > div > div:nth-child(2), .innerBlock .ATT  > div > div:nth-child(3) {
    color: var(--color-grayDark);
    font-size: 12px;
}
a.innerBlock:hover .ATT > div > div:nth-child(1), a.innerBlock:hover .ATT > div > div:nth-child(2) {
    color: var(--color-titleHead);
}

/* innerBlock */
.innerBlock {
    background-color: var(--background-body);
    border-radius: var(--borderRadius-block);
}
a.innerBlock:hover {
    background-color: var(--background-main);
}


/* wrapFlexInline */
.wrapFlexInline {
    display: flex;
    flex-wrap: wrap;
}
.wrapFlexInline > *{
    flex: 1 0 auto;
    margin: 4px;
}

/* wrapFlexColumn */
.wrapFlexColumn {
    display: flex;
    flex-direction: column;
    gap: 6px;
}


/* wrapIcons */
.wrapIcons {
    display: flex;
    gap: 6px;
}
.wrapIcons img {
    display: block;
    width: 26px;
}






/* flexColumn */
.flexColumn {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.flexRow {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: start;
}
.flexColumn > div, .flexRow > div {
    flex: 1 50%;
}


/* justifyBetween */
.justifyBetween {
    display: flex;
    justify-content: space-between;
    align-items: center;
}



/* стрелочки */
.arrowDownGrid {
	position: absolute;
	height: 40px;
	width: 20px;
	background-image: url('/public/img/arrowDown.png');
	left: -22px;
}

.arrowUpGrid {
	position: absolute;
	height: 40px;
	width: 20px;
	background-image: url('/public/img/arrowUp.png');
	left: -22px;
}




/* grid */
.grid {
    display: flex;
    gap: 30px;
}
.grid > div {
    flex: 0 0 220px;
    justify-content: space-around;
    display: flex;
    flex-flow: column nowrap;
    gap: 30px;
    position: relative;
    padding-top: 100px;
    /* padding-bottom: 60px; */
}
.wrapBlockGrid {
    display: flex;
    flex-direction: column;
    gap: 3px;
    position: relative;
}

.blockGrid {
    display: flex;
    background-color: var(--background-body);
    border-radius: var(--borderRadius-block);
    box-sizing: border-box;
    border: 2px solid transparent;
    gap: 6px;
}
.blockGrid-highlight {
    border: 2px solid var(--background-main);
}
.blockGrid > :nth-child(1) > img {
    width: 40px;
    box-sizing: border-box;
    display: block;
}
.blockGrid > :nth-child(1) {
    max-width: 40px;
}
.blockGrid > :nth-child(2) {
    max-width: 20px;
}
.blockGrid > :nth-child(3) {
    flex: 1;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
}
.blockGrid > :nth-child(4) {
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 2px solid var(--background-block);
}
.blockGrid[data-status="lose"] {
    color: var(--color-grayDark);
}

.blockGridHeader {
    position: absolute;
    top: 0;
    background: var(--background-body);
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-size: 20px;
    border-radius: var(--borderRadius-block);
}
.blockGridHeader > div {
    font-size: 14px;
    color: gray;
}


#timer {
    font-size: 30px;
    margin-bottom: 10px;
}


.iconBattle {
    background: var(--background-body);
    position: absolute;
    right: 27px;
    top: 31px;
    width: 32px;
    height: 32px;
    border-radius: var(--borderRadius-block);
    border: 2px solid var(--background-block);
    box-sizing: border-box;
    cursor: pointer;
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
}
.iconBattle-info {background-image: url('/public/img/infoBattle.png');}
.iconBattle-edit {background-image: url('/public/img/editBattle.png');}
.iconBattle-chat {background-image: url('/public/img/chatBattle.png');}


.iconBattle:hover {
    border: 2px solid var(--background-main)
}








.infoBlock {
    background: var(--background-infoBlock);
    color: var(--color-infoBlock);
}











/*/////////////////////////////////*/
/*////////// ТЁМНАЯ ТЕМА //////////*/
/*/////////////////////////////////*/
body.dark-theme .tableGamesItem {
    color: var(--color-grayLight);
}
body.dark-theme .gameTableNames .ATT > div > div:nth-child(1), body.dark-theme .gameTableNames .ATT > div > div:nth-child(2) {
    color: var(--color-text-DT);
}
body.dark-theme .tableGamesItem:hover {
    background-color: var(--background-body-DT);
}
body.dark-theme .block {
    background: var(--background-block-DT);
}
body.dark-theme .block-h1 {
    background: var(--background-main-DT);
    color: var(--color-titleHead-DT);
}
body.dark-theme .blockTabs > div {
    background-color: var(--background-blockTabs-DT);
    color: var(--color-grayLight);
}
body.dark-theme .blockTabs > div:hover {
    background-color: var(--background-main-DT);
    color: var(--color-titleHead-DT);
}
body.dark-theme .blockTabs > [data-status="active"] {
    background-color: var(--background-main-DT);
    color: var(--color-titleHead-DT);
}

body.dark-theme .innerBlock {
    background-color: var(--background-body-DT);
}
body.dark-theme a.innerBlock:hover {
    background: var(--background-main-DT);
}

body.dark-theme .innerBlock .ATT > div > div:nth-child(2) {
    color: var(--color-grayLight);
}

body.dark-theme .innerBlock .ATT > div > div:nth-child(1), body.dark-theme a.innerBlock:hover .ATT > div > div:nth-child(2) {
    color: var(--color-titleHead-DT);
}
body.dark-theme .block-h2 {
    border-bottom: 1px solid var(--background-body-DT);
}

body.dark-theme .blockGrid {
    background-color: var(--background-body-DT);
}
body.dark-theme .blockGrid > :nth-child(4) {
    border-left: 2px solid var(--background-block-DT);
}
body.dark-theme .blockGrid[data-status="lose"] {
    color: var(--color-grayLight);
}
body.dark-theme .blockGrid-highlight {
    border: 2px solid var(--color-titleHead-DT);
}
body.dark-theme .infoBlock {
    background: var(--background-infoBlock-DT);
    color: var(--color-infoBlock-DT);
}

body.dark-theme .blockGridHeader {background: var(--background-body-DT);}
body.dark-theme .iconBattle {background-color: var(--background-body-DT); border: 2px solid var(--background-block-DT);}
body.dark-theme .iconBattle:hover {border: 2px solid var(--color-titleHead-DT)}

body.dark-theme .important {background: var(--background-main-DT);color: var(--color-titleHead-DT);}














/*/////////////////////////////////*/
/*////////// АДАПТИВНОСТЬ //////////*/
/*/////////////////////////////////*/
@media screen and (max-width: 1380px) {
    .widthContentLarge {max-width: 700px;}
}

@media screen and (max-width: 640px) {
    .widthContentLarge {margin: 0 20px;}
    .widthContentSmall {max-width: 360px;}
    .paddingSmall {padding: 7px;}
    .paddingMedium {padding: 14px;}
    .paddingLarge {padding: 21px;}
    .paddingHuge {padding: 40px;}
    .paddingHeightSmall {padding-top: 7px; padding-bottom: 7px;}
    .paddingHeightMedium {padding-top: 14px; padding-bottom: 14px;}
    .paddingHeightLarge {padding-top: 21px; padding-bottom: 21px;}
    .paddingWidthSmall {padding-left: 7px; padding-right: 7px;}
    .paddingWidthMedium {padding-left: 14px; padding-right: 14px;}
    .paddingWidthLarge {padding-left: 21px; padding-right: 21px;}

    .flexRow, .flexColumn {flex-direction: column; gap: 8px; align-items: stretch;}
    .block-h1 .ATT > img {width: 50px;}
    .block-h1 .ATT > div > div:nth-child(2) {font-size: 12px;}
    .blockTabs > div {padding: 8px;}
    .gameTableNames .ATT > img {width: 46px;}
    .block-h1, .block-h1 H1 {font-size: 24px;}
    .innerBlock .ATT > img {width: 44px;}
    .innerBlock .ATT > div > div:nth-child(1) {font-size: 18px;}
}

@media screen and (max-width: 480px) {
    .widthContentLarge {margin: 0 6px;}
    .widthContentSmall {max-width: 340px;}
    .paddingSmall {padding: 4px;}
    .paddingMedium {padding: 8px;}
    .paddingLarge {padding: 12px;}
    .paddingHuge {padding: 30px;}
    .paddingHeightSmall {padding-top: 4px; padding-bottom: 4px;}
    .paddingHeightMedium {padding-top: 8px; padding-bottom: 8px;}
    .paddingHeightLarge {padding-top: 12px; padding-bottom: 12px;}
    .paddingWidthSmall {padding-left: 4px; padding-right: 4px;}
    .paddingWidthMedium {padding-left: 8px; padding-right: 8px;}
    .paddingWidthLarge {padding-left: 12px; padding-right: 12px;}

    .gameTableDate > div:nth-child(1) {font-size: 12px;}
    .gameTableDate > div:nth-child(2) {font-size: 15px;}
    .gameTableDate, .gameTableCounts {flex: 0 0 70px;}
    /* .gameTableCounts > div:nth-child(1) {background: var(--background-main-DT);} */
    .block-h1 .ATT > img {width: 40px;}
    .blockTabs > div {padding: 6px; font-size: 12px;}
    .gameTableNames .ATT > img {width: 40px;}
    .gameTableNames .ATT > div > div:nth-child(1), .gameTableNames H2 {font-size: 16px;}
    .block-h1, .block-h1 H1 {font-size: 20px;}
    .innerBlock .ATT > img {width: 38px;}
    .innerBlock .ATT > div > div:nth-child(1) {font-size: 16px;}
}