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

/*!
  * © Symtiles 2025-2026. All rights reserved. *
  * Copyright Symtiles 2025-2026. All rights reserved. *
  */



 body { font-family: Arial, sans-serif; background: #E3E3E3; margin: 0; padding: 20px; text-align: center; font-size:14px; }
  h1 { font-size: 20px; color: #0F0F0F; margin-top: 0;margin-bottom: 0px; }
	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: 10px auto 0;
  justify-items: center;
}
	.lead {font-size:18px; }
	.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; margin-bottom:2px; }
  .element-card.large { font-size:38px; min-width:334px; min-height:312px; }
  .element-card.small { font-size:26px; min-width:110px; height: calc((350px - 48px)/3); opacity:0.45; }


  .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:184px; 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; color:#666; font-weight:200; }
  .element-name { font-size:26px; color:#333; font-weight:300; margin-top:10px; letter-spacing: 1px; }
  .element-mass { font-size:16px; color:#666; font-weight:300; margin-top:2px; }

  .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:4px; display:flex; flex-direction:column; gap:6px; align-items:center; }
  .key-row { display:flex; gap:5px; }
  .key { min-width:28px; height:42px; border-radius:4px; background:#d3d6da; font-weight:500; cursor:pointer; border:none; font-size:1.2em; color:#474747;}
  .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: #E3E3E3; 
  color: #E3E3E3;
		border:1px dashed #C4C4C4;
  font-weight: 300;
		
}
	.key.delete { 
  background: #000; 
  color: #d3d6da; 
  font-weight: 300;
}
	
	.key.delete {
  min-width: 38px;   /* smaller than ENTER/NEXT */
  height: 42px;      /* same height as other keys */
  font-size: 16px;   /* optional: slightly smaller icon */
}
	.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 9px; border-radius:0px; /*box-shadow:0 2px 6px rgba(0,0,0,0.2);*/ z-index:999; display:none; }
  .streaks-bar { width:258px; position:fixed; top:22%; left: 50%; transform:translate(-50%,-40%); z-index:1001; font-size:18px; color:#474747; font-weight:500; background:#e8f0fe; border:1px solid #474747; padding:24px 32px; border-radius:10px; text-align:center; box-shadow:0 6px 16px rgba(0,0,0,0.35); 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; }
.popup-next-puzzle { background:#000000; color:#ffffff; }
  .info-card { margin:20px auto; border:1px solid #000; background:#d3d6da; max-width:300px; text-align:left; padding:18px; border-radius:2px; }
  .info-card h2 { text-align:center; margin-top:0; color:#333; font-family: Arial, sans-serif; font-weight: 300;}
	
.small-cards-container {
  display: flex;
  flex-direction: row;       /* always row */
  gap: 2px;
  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 */
}

	.element-progress {
  position: fixed;
  top: 43px;
  right: 0px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 6px 8px;
/*  border-radius: 999px;*/
  font-size: 13px;
  font-weight: 600;
  z-index: 1000;
  pointer-events: none;
}

	.symtiles-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}


.symtiles-overlay h2 {color:#474747; font-family:Arial, sans-serif; font-weight: 300; text-align: center;}
.symtiles-overlay h4 {color:#474747; font-family:Arial, sans-serif; font-weight: 300; text-align: center; font-size: 18px;}
.symtiles-overlay p {color:#474747; font-family:Arial, sans-serif; font-size:16px; font-weight: 300; text-align: center;}


.symtiles-modal {
  background: #fff;
  color: #000000;
  max-width: 420px;
  width: calc(100% - 32px);
  padding: 4px 12px 16px;
  border-radius: 14px;
  text-align: left;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: symtilesFadeIn 0.25s ease-out;
}

.symtiles-modal h2 {
  margin-top: 0;
}

.symtiles-modal ul {
  padding-left: 18px;
}

.symtiles-modal button {
  margin-top: 16px;
  padding: 10px 18px;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
	letter-spacing: 1px;
  cursor: pointer;
  background: #1BAF24;
  color: #ffffff;
	text-align: center;
	width: 100%;
}

.symtiles-modal button:hover {
  /*filter: brightness(0.70);*/
	color:#ffffff;
	background-color: #474747;
}

.text-left { text-align:left;}

@keyframes symtilesFadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

.timer {
    margin-top: 6px;
    font-size: 16px;
    opacity: 0.9;
	position: fixed;
  top: 69px;
  right: 0px;
  background: rgba(241, 90, 36, 1.0);
  color: #fff;
  padding: 6px 12px;
/*  border-radius: 999px;*/
  font-weight: 400;
  z-index: 1000;
  pointer-events: none;
}

.overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.overlay-content {
  background: #fff;
  padding: 20px 30px;
  border-radius: 10px;
  text-align: center;
}

.overlay.hidden {
  display: none;
}

.mode-buttons button {
  margin: 10px;
  padding: 10px 20px;
  font-size: 1rem;
}


.daily-countdown {
    margin-top: 10px;
    font-weight: 400;
    opacity: 1.0;
	background-color:#000000;
	color:#ffffff;
	padding: 8px 6px;
	max-width:380px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	  

}

.daily-countdown {text-align: center;}