@charset "UTF-8";
/* CSS Document */

 body { font-family: Arial, sans-serif; background: #E3E3E3; margin: 0; padding: 20px; text-align: center; font-size:16px; }
  h1 { font-size: 20px; color: #000; margin-top: 0; }
	h2 {color:#000; font-family: Baskerville, "Palatino Linotype", Palatino, serif; font-weight:600;}

#game-board {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 378px;
  margin: 12px auto 0;
  justify-items: center;
}
	
	.caption {text-align:center;}
	
	.lead {font-size:16px;}
	.footer {bottom:0px; margin-top: 10px;}
	.footer p {font-size:12px; text-align: center;}
  .element-card { border:1px solid #ccc; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; font-weight:bold; box-sizing:border-box; padding:12px; user-select:none; position:relative; }
  .element-card.large { font-size:38px; min-width:350px; min-height:350px; }
  .element-card.small { font-size:26px; min-width:110px; height: calc((350px - 48px)/3); opacity:0.35; }


  .symbol { display:flex; justify-content:center; gap:10px; margin-top:10px; }
  .symbol-char { font-family: Baskerville, "Palatino Linotype", Palatino, serif; font-weight:300; display:flex; align-items:center; justify-content:center; text-transform:none; border-radius:6px; border: 1px solid #A3A3A3;}
  .element-card.large .symbol-char { width:126px; height:196px; font-size:120px; font-weight:400; margin-top:24px; }
  .element-card.small .symbol-char { width:40px; height:55px; font-size:36px; }
	.element-card.small .symbol { display:flex; justify-content:center; gap:2px; margin-top:4px; }


  .correct { background:#0E64D4; color:#fff; border-radius:6px; padding:0 8px; }
  .misplaced { background:#FF9502; color:#fff; border-radius:6px; padding:0 8px; }
  .wrong { background:#787c7e; color:#fff; border-radius:6px; padding:0 8px; }

	/* Prevent small cards from expanding on feedback */
.element-card.small .symbol-char.correct,
.element-card.small .symbol-char.misplaced,
.element-card.small .symbol-char.wrong {
  padding: 0 4px;        /* reduce horizontal padding */
  font-size: 26px;       /* slightly smaller than 36px */
  box-sizing: border-box;
}

	
  .element-number { position:absolute; top:10px; left:12px; font-size:24px; font-weight:300; }
  .element-name { font-size:26px; color:#333; font-weight:300; margin-top:24px; }
  .element-mass { font-size:14px; color:#666; font-weight:300; margin-top:4px; }

  .guess-slots { display:flex; justify-content:center; gap:10px; margin-top:20px; }
  .guess-slot { width:48px; height:48px; border:2px solid #999; background:#fff; font-size:28px; font-weight:bold; display:flex; align-items:center; justify-content:center; text-transform:uppercase; }

  .keyboard { margin-top:14px; display:flex; flex-direction:column; gap:5px; align-items:center; }
  .key-row { display:flex; gap:5px; }
  .key { min-width:28px; height:36px; border-radius:4px; background:#d3d6da; font-weight:bold; cursor:pointer; border:none; }
  .key.large { min-width:52px; }
  .key.correct { background:#0E64D4; color:#fff; }
  .key.misplaced { background:#FF9502; color:#fff; }
  .key.wrong { background:#787c7e; color:#fff; }
	.key.enter { 
  background: #0E64D4; 
  color: #fff; 
  font-weight: 300;
}
	
	.key.next { 
  background: #d3d6da; 
  color: #d3d6da;
		border:1px dashed #868686;
  font-weight: 300;
		
}
	.key.delete { 
  background: #000; 
  color: #d3d6da; 
  font-weight: 300;
}
	.key.next.ready {
  background: #1BAF24;   /* same green as success popup */
  color: #fff;
				border:1px solid #1BAF24;

}

  #streak-badge { position:fixed; top:0px; right:0px; background:#ffdd57; color:#333; font-size:18px; font-weight:bold; padding:8px 16px; border-radius:4px; box-shadow:0 2px 6px rgba(0,0,0,0.2); z-index:999; display:none; }
  .streaks-bar { position:fixed; top:25%; left:50%; transform:translate(-50%,-40%); z-index:1001; font-size:18px; color:#0E64D4; font-weight:500; background:#e8f0fe; border:1px solid #c3d8ff; padding:24px 32px; border-radius:10px; text-align:center; box-shadow:0 6px 16px rgba(0,0,0,0.25); opacity:0; pointer-events:none; transition:opacity 0.4s; }
  .streaks-bar.show { opacity:1; }
  #popup-wrapper { position:fixed; top:40%; left:50%; transform:translate(-50%,-40%); display:flex; flex-direction:column; align-items:center; z-index:1000; pointer-events:none; }
  #popup-main,#popup-countdown { margin:8px 0; color:#fff; padding:10px 25px; border-radius:8px; font-size:13px; box-shadow:0 4px 12px rgba(0,0,0,0.3); opacity:0; transition:opacity 0.4s; }
  #popup-main.show,#popup-countdown.show { opacity:1; font-size:13px;}
  .popup-success { background:#1BAF24; }
  .popup-error { background:#D32F2F; }
  .popup-info { background:#000000; color:#ffffff; }
  .info-card-how { margin:20px auto; border:1px solid #000; background:#d3d6da; max-width:468px; text-align:left; padding:18px; border-radius:2px; }
  .info-card-how h2 { text-align:center; margin-top:0; color:#333; }
	
.small-cards-container {
  display: flex;
  flex-direction: row;       /* always row */
  gap: 4px;
  justify-content: center;
  width: 100%;
  overflow-x: auto;          /* allow horizontal scrolling if too wide */
  padding-bottom: 4px;       /* optional: space for scrollbar on small screens */
}

/* Optional: prevent wrapping so they never stack vertically */
.small-cards-container .element-card.small {
  flex-shrink: 0;            /* don't shrink too much */
}

	/* HOW-TO EXAMPLE CARDS — ~60% SCALE */
.example-board {
  margin: 14px auto;
}

.example-board .element-card {
  max-width: 240px;
  max-height: 240px;
  padding: 10px;
  justify-content: flex-start;
	margin:12px auto;
	position: relative;
		

}

.example-board .element-number {
  font-size: 16px;
  top: 8px;
  left: 10px;
}

.example-board .symbol {
  margin-top: 24px;
  gap: 6px;
}

.example-board .symbol-char {
  width: 72px;
  height: 110px;
  font-size: 72px;
  font-weight: 400;
  padding: 0;
}

.example-board .element-name {
  margin-top: 18px;
  font-size: 18px;
}

.example-board .element-mass {
  font-size: 13px;
}