/* =========================================================
   GLOBAL
========================================================= */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0a0f1a;
  overflow: hidden;
}

.main-box {
  width: 390px;
  height: 100vh;
  background-image: url('images/bg4.png');
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 20px;
}

/* START SCREEN */
#start-container {
  width: 390px;
  height: 100vh;

  background-image: url(images/mainmenuBG.jpeg);
  background-size: contain;          /* SHOW FULL IMAGE */
  background-repeat: no-repeat;      /* Avoid tiling */
  background-position: center;       /* Center the image */
  background-color: #000;            /* Fill empty space behind */

  text-align: center;
  padding-bottom: 20px;
  padding-right: 20px;
}

.start-title {
  font-size: 52px;
  font-weight: 900;
  color: #f2f205;
  text-shadow: 0 0 14px #f8f8e1;
  letter-spacing: 8px;
  display: inline-block;
  margin-bottom: 25px;
}

.para {
  color: #f2f205;
  font-size:  30px;
  
}
#start-container button {
  width: 150px;
  height: 50px;
  margin-top: 250px;
  font-size: 20px;
  cursor: pointer;
  border-radius: 10px;
  background: #f2f205; /* Original yellow background */
  color: black;
  font-weight: bold;
  
  /* --- Glowing Effect Added Here --- */
  box-shadow: 0 0 10px 5px rgba(242, 242, 5, 0.7); /* Subtle initial glow */
  /* The shadow uses the button's background color (#f2f205) for the glow */
  
  transition: 0.25s ease, box-shadow 0.3s ease; /* Ensure box-shadow transitions */
}

/* --- Stronger Glow on Hover for effect --- */
#start-container button:hover {
  /* Increase the glow effect on hover */
  box-shadow: 0 0 20px 10px rgba(242, 242, 5, 1), /* Stronger yellow glow */
              0 0 40px 15px rgba(255, 255, 255, 0.5); /* Added a white-ish inner layer for 'hot' core */
}
#start-container button:hover {
  box-shadow: 0 0 22px #f2f205;
}
#play-btn {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

#play-btn {
    top: 25px;
}


/* ========================================================
 * blur main div
 =========================================================*/
.blurred{
  background-color: lightblue;
  
  filter: blur(5px); /* Adjust the pixel value for more or less blur */
}

/* =========================================================
   CHILD1 — HINT + TIMER
========================================================= */
.child1 {
  margin-top: 25px;
  padding: 12px;
  width: 90%;
  text-align: center;
  background: #904dcb;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.hint_line {
  color: #fbfbfb;
  font-size: 18px;
  font-weight: 600;
}

.hint_line2 {
  margin-top: 6px;
  color: #ffeaa7;
  font-size: 1.55em;
  font-weight: bold;
  letter-spacing: 3px;
}

/* TIMER */
.timer {
  font-size: 18px;
  font-weight: 800;
  color: #d6e8ff;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(0,0,0,0.25);
  box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}

.timer.warning {
  color:#ffda80;
  background:rgba(40,20,0,0.35);
  animation:pulse 1s infinite ease-in-out;
}
.timer.danger {
  color:#ffb84d;
  background:rgba(60,10,0,0.35);
  animation:pulse 0.8s linear infinite, shake 0.4s linear infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

/* =========================================================
   CHILD3 — TILES
========================================================= */
.child3 {
  width: 90%;
  min-height: 270px;
  padding: 10px;
  margin-top: 35px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.tile {
  width: 62px; height: 90px;
  background:#f2f205;
  color:#000000;
  font-size:34px;
  font-weight: bold;
  border-radius:10px;
  display:flex;
  justify-content:center;
  align-items:center;
  cursor:grab;
  box-shadow:0 4px 10px rgba(0,0,0,0.35);
  transition:0.15s ease;
}
.tile.dragging {
  opacity:0.6;
  transform:scale(0.9);
}

.child3, 
.tile {
  touch-action: none;     /* 🚀 disables long-press delay */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* WIN ANIMATION */
.correct-tile {
  background:#FFD500 !important;
  color:#000 !important;
  transform:scale(1.05);
  box-shadow:0 0 25px rgba(255,213,0,0.9);
}

/* =========================================================
   CHILD4 — BUTTON + COUNTER
========================================================= */
.child4 {
  margin-top:40px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
}

.child4 button, #answer-btn {
  width:150px;
  height:48px;
  background: #904dcb;
  border-radius:10px;
  color:#fbfbfb;
  font-size:16px;
  font-weight:bold;
  cursor:pointer;
  transition:0.2s ease;
}
.child4 button:hover {
  background:rgba(0,0,0,0.65);
  box-shadow:0 0 19px #e0940a;
}

.reveal-counter {
  color:#ffeaa7;
  font-size:15px;
  font-weight:bold;
}

/* =========================================================
   TOOLTIP for guessed letter
========================================================= */
.hint-tooltip {
  position:absolute;
  background:rgba(255,255,255,0.9);
  padding:7px 14px;
  border-radius:8px;
  color:#000;
  font-weight:bold;
  font-size:15px;
  box-shadow:0 0 12px rgba(0,0,0,0.45);
  animation:floatUp 1.2s ease forwards;
  z-index:9999;
  pointer-events:none;
}

@keyframes floatUp {
  0% { opacity:0; transform:translateY(10px); }
  20%{ opacity:1; }
  100%{ opacity:0; transform:translateY(-25px); }
}

/* =========================================================
   SUMMARY POPUP
========================================================= */
.summary {
  position:fixed;
  top:18%;
  left:50%;
  transform:translateX(-50%);
  width:340px;
  padding:20px;
  background: #f2f205;
  border-radius:17px;
  text-align:center;
  color:#000000;
}

.sc4 button, .sc5 button {
  width:100%;
  margin-top:12px;
  height:46px;
  background:rgba(224, 148, 10, 0);
  border: 2px solid black;
  border-radius:10px;
  color:#000000;
  cursor:pointer;
  font-weight:bold;
  transition:0.25s ease;
}

.sc4 button:hover, .sc5 button:hover {
  background: #904dcb;
}

.popUp {
  position:fixed;
  top:18%;
  left:50%;
  transform:translateX(-50%);
  width:340px;
  padding:20px;
  background: #f27405;
  border-radius:17px;
  text-align:center;
  color:#ffffff;
}

.timeUp {
  position:fixed;
  top:18%;
  left:50%;
  transform:translateX(-50%);
  width:340px;
  padding:20px;
  background: #d44939;
  border-radius:17px;
  text-align:center;
  color:#ffffff;
}

.demo-card {
  position:fixed;
  top:18%;
  left:50%;
  transform:translateX(-50%);
  width:340px;
  padding:20px;
  background: #fcfcfc;
  border-radius:17px;
  text-align:center;
  color:#000000;
}
.demo-card button{
  width: 100px;
  height: auto;
  background-color: white;
  color: black;
  border: 2px solid black;
}

#add-name{
  font-weight: bold;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 5px;
  border: 1px solid black;
  background-color: white;
  
}
#demo-close-btn{
  border-radius: 5px;
  background-color: white;
  border: 1px solid gray;
}

/* RESPONSIVE */
@media(min-width:768px){
  .main-box{ width:390px; height:700px; border-radius:12px; }
}