:root {
  /* Typografie schaalt mee met het scherm-oppervlak */
    --fontBasis: clamp(100%, 1.62svmax, 1.62svmax);
    --fontH1: clamp(100%, 6.48svmax, 6.48svmax); /* 2 * 1.62 */
    --fontH2: clamp(100%, 3.24svmax, 3.24svmax); /* 2 * 1.38 */
    --fontH3: clamp(100%, 1.62svmax, 1.62svmax);
    --fontH4: clamp(100%, 1.38svmax, 1.38svmax);
    --fontH5: clamp(100%, 1.16svmax, 1.16svmax);
    --fontH6: clamp(100%, 1.09svmax, 1.09svmax);
    
    --fontButton: clamp(100%, 2.76svmax, 2.76svmax);
}
* {     
box-sizing: border-box;
    margin: 0;
    padding: 0;
    }
html, body{
	width: 100%;
	min-height: 100svw;
	height: 100%;
	min-height: 100svh;
	font-size: 100%;
	line-height: 1.62;
}
body { 
  background: #171717; 
  color: white; 
  font-family: system-ui, -apple-system, sans-serif; 
  display: flex; 
  flex-direction: column; 
  align-items: center;  
  padding: 1svmin;
  font-size: var(--fontBais);
}
.hidden { display: none !important; }

#start-screen, #game-over-screen { 
  text-align: center; 
  margin-top: 0.972svh; 
  width: 100%;
  max-width: 85svw;
  margin-left: 6.2svw;
  margin-right: 6.2svw;
}

h1 { 
  font-size: var(--fontH1);
  background: linear-gradient(to right, #ec4899, #8b5cf6); 
  -webkit-background-clip: text; 
  color: transparent; 
  margin-bottom: 0.97svh; 
  line-height: 0.972;
}
h2 {
	font-size: var(--fontH2); 
	font-weight: bold; 
	margin-bottom: 0.972svh;
	line-height: 0.972;
}

p { 
  color: #a3a3a3; 
  margin: 0 auto 2.38svmin; 
}

.theFinalScore {
	font-size: 1.62svh;
}

.theFinalScore span{
	font-family: monospace; 
	color: #a78bfa;
}

button { 
  background: #7c3aed; 
  color: white; 
  border: none; 
  padding: 0.38svmin 2.38svmin; 
  font-size: var(--fontButton); 
  font-weight: bold; 
  border-radius: 97svmin; 
  cursor: pointer; 
  box-shadow: 0 0 1.62svmin rgba(124,58,237,0.5); 
  transition: background 0.2s, transform 0.1s; 
}
button:hover { background: #6d28d9; }
button:active { transform: scale(0.95); }

.high-scores { 
  margin-top: 2.24svh; 
  background: #262626; 
  padding: 2.24svmin 4.48svmin; 
  border-radius: 0.97svmin; 
  width: 62svw;
  min-width: 100%;
  margin-left: auto; 
  margin-right: auto; 
}
.score-row { 
  display: flex; 
  justify-content: space-between; 
  margin-bottom: 0.62svh; 
  font-size: 1.62svmax;
  padding-left: 1.38svw;
  padding-right: 1.38svw;
}
.score-row span:last-child { 
  font-family: monospace; 
  color: #a78bfa; 
}

#start-high-scores > div:first-of-type span:last-child{
	color: #FFD700;
} 
#start-high-scores > div:nth-of-type(2) span:last-child{
	color: silver;
}
#start-high-scores > div:nth-of-type(3) span:last-child{
	color: #CD7F32;
}

#start-high-scores > div:first-of-type{
	font-weight: bold;
	font-size: 1.97svmax;
}
#start-high-scores > div:nth-of-type(2){
	font-weight: bold;
	font-size: 1.85svmax;
}
#start-high-scores > div:nth-of-type(3){
	font-weight: bold;
	font-size: 1.71svmax;
}

#start-high-scores > div:nth-of-type(odd){
	background-color: #303030;
}

#game-screen { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  margin-top: 1.62svh; 
  width: 100%;
   max-width: 85svmin;  
}

.header { 
margin-top: 0.972svh;
  display: flex; 
  justify-content: space-between; 
  width: 100%; 
  max-width: 85svmin;  
  margin-bottom: 0.972svh; 
  font-size: 2.24svmin; 
  font-weight: bold; 
}

.board { 
  display: grid; 
  grid-template-columns: repeat(8, 1fr); 
  gap: 0.62svmin; 
  background: #262626; 
  padding: 0.972svmin; 
  border-radius: 0.62svmin; 
  width: 100%; 
	max-width: 85svmin; 
  aspect-ratio: 1 / 1;
  position: relative; 
}

.ball { 
  width: 100%; 
  height: 100%; 
  border-radius: 0.972svmin; 
  cursor: pointer; 
  /**
  transition: transform 0.2s, opacity 0.2s; 
  box-shadow: inset -4px -4px 8px rgba(0,0,0,0.3), inset 4px 4px 8px rgba(255,255,255,0.3), 0 4px 6px rgba(0,0,0,0.3); 
  **/
}
.ball.selected { 
  transform: scale(1.15); 
  box-shadow: 0 0 0.97svmin white, inset -0.25svmin -0.25svmin 0.5svmin rgba(0,0,0,0.3), inset 0.25svmin 0.25svmin 0.5svmin rgba(255,255,255,0.3); 
  z-index: 10;
}
.ball.matched { 
  transform: scale(0); 
  opacity: 0; 
}

/* Ball Colors 
 * 
 * Kan ook met plaatjes ... 
 * 
 **/

.bg-red { background: radial-gradient(circle at 30% 30%, #fca5a5, #ef4444, #991b1b); }
.bg-blue { background: radial-gradient(circle at 30% 30%, #93c5fd, #3b82f6, #1e3a8a); }
.bg-green { background: radial-gradient(circle at 30% 30%, #86efac, #22c55e, #14532d); }
.bg-yellow { background: radial-gradient(circle at 30% 30%, #fde047, #eab308, #713f12); }
.bg-purple { background: radial-gradient(circle at 30% 30%, #d8b4fe, #a855f7, #4c1d95); }
.bg-orange { background: radial-gradient(circle at 30% 30%, #fdba74, #f97316, #7c2d12); }
.bg-grey {background: url('grey.png') no-repeat center / cover;}
/**
.bg-grey { background: radial-gradient(circle at 30% 30%, #979797, #4a4a4a, #161616); }
**/

footer p {
	font-size: 1.302svmax;
	margin-top: 0.972svh;
	margin-left:auto;
	margin-right:auto;
}