/* ============
** response box
** ============ */


.antwoorden.center { gap: 12px; 
	display: flex;
    flex-direction: column;
	align-items: center;
    justify-content: center;
    width: 95%;
}


/* Fullscreen overlay */

.rboverlay {
    position: fixed;
    top: 0; left: 0;
	right: 0;
	/* transform: translateX(-50%); */
	padding: 0;
    width: 100%;
	max-width: 700px;
	margin: 0 auto;
    height: 100vh;
	/* width:  100%; */
	/* height: 100%; */
    /* background: rgba(0,0,0,0.85); */
	background-color: var(--bglight);
    color: black;
    /* font-size: 6rem; */
	/* font-size: 100%; */
	font-size: 300px;
    font-weight: bold;
	line-height: 1;
    display: flex;
	flex-direction: column;
    justify-content: center;
	/* padding-top: 80px; */
    /* align-items: top; */
	align-items: center;
    z-index: 1000;
    cursor: pointer;
	inset: 0;
  }

.rboverlay.punten {
	flex-direction: column;
}

.show_overlay  { display: flex; }
.rboverlay.k1  { background: var(--groenb);  }
.rboverlay.k2  { background: var(--blauwb);  }
.rboverlay.k3  { background: var(--geelb);   }
.rboverlay.k4  { background: var(--oranjeb); }
.rboverlay.k5  { background: var(--roodb);   }
.rboverlay.ja  { background: var(--groenl);  }
.rboverlay.mmm { background: var(--geell);   }
.rboverlay.nee { font-size: 200px;   background: var(--roodl);   }
 
.rboverlay.noord  { font-size: 400px; background: var(--groenl); }
.rboverlay.oost   { font-size: 400px; background: var(--blauwl); }
.rboverlay.zuid   { font-size: 400px; background: var(--geell);  }
.rboverlay.west   { font-size: 400px; background: var(--roodl);  }

.rboverlay.schoppen  { padding-top: 20px; }
.rboverlay.harten    {  }
.rboverlay.ruiten    {  }
.rboverlay.klaveren  {  }

.rboverlay img { 
	width: 80%;
	max-width: 500px;
	height: auto;
	object-fit: contain;
	object-position: top;
}

.rboverlay.kaarten {
	/* display: flex; */
    flex-direction: column; /* onder elkaar */
    align-items: center;    /* horizontaal centreren */
	font-size: 30px;
	background-color: var(--bg);
    gap: 24px;
    border: 2px solid var(--bcolor);
    border-radius: 12px;
    padding: 20px;
	box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}

.rbcell.selected {
	background-color: var(--oranjel);
}

.rbrow {
    display: grid !important;
    column-gap: 10px;
    margin-bottom: 30px;
	margin-left: 10px;
	margin-right: 10px;
	justify-content: center;
	width: 95%;
}


.rbcol3 { grid-template-columns: repeat(3, 1fr); }

.rbcol1 { grid-template-columns: repeat(1, 1fr); }
.rbcol2 { grid-template-columns: repeat(2, 1fr); }

.rbcol4 {  grid-template-columns: repeat(4, 1fr); }
/* .rbcol5 { display: inline-flex; grid-template-columns: repeat(5, 1fr); } */

.rbcol5 { grid-template-columns: repeat(5, 1fr); }

.rbcell {
	display: flex;
	width: 100%;
	min-height: 50px;
	/* max-width: 150px; */
    background: lightblue;
    padding: 5px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
    /* transition: transform 0.1s; */
	
    border: 3px solid var(--bcolor);
    /* color: var(--bcolor); */
	color: black;
	background-color: var(--bglight);
	/* text-align: center; */
    justify-content: center; /* tekst centreren in de box */
	align-items: center;
    /* padding: 12px 0; */
	line-height: 1;
	user-select: none;
}

.rbcell:active {
    transform: scale(0.95);
}

.rbcell img {
	width: auto;
	height: 30px;
}

.rbcell.k1  { background: var(--groenb);  }
.rbcell.k2  { background: var(--blauwb);  }
.rbcell.k3  { background: var(--geelb);   }
.rbcell.k4  { background: var(--oranjeb); }
.rbcell.k5  { background: var(--roodb);   }

.rbcell.ja  { font-size: 24px; background: var(--groenl); }
.rbcell.mmm { font-size: 24px; background: var(--geell);  }
.rbcell.nee { font-size: 24px; background: var(--roodl);  }
 
.rbcell.noord  { font-size: 24px; }
.rbcell.oost   { font-size: 24px; }
.rbcell.zuid   { font-size: 24px; }
.rbcell.west   { font-size: 24px; }

.rbcell.schoppen  {  }
.rbcell.harten    {  }
.rbcell.ruiten    {  }
.rbcell.klaveren  {  }

.rbcell.kaarten {
	height: auto;
}

.kaart {
	z-index: 1001;
	/* display: flex; */
	flex-direction: column;
	justify-content: flex-start;
	align-items: top;
	padding-top: 40px;
	font-size: 240px;
	width: 100vw;
}

.kaart img {
	height: 210px;
	width: auto;
}
.kaart span {
	text-align: center;
}

.select_kleur img, .select_kaart img {
	max-width: 50px;
}


.hide_overlay {
	display: none;
}