.play-wrap{
max-width:900px;
margin:auto;
padding:80px 20px;
text-align:center;
position:relative;
z-index:1;
}

.play-wrap h1{
color:#F5C77A;
margin-bottom:10px;
}

.hijri{
opacity:.85;
margin-bottom:10px;
}

.main-timer{
font-size:20px;
margin-bottom:30px;
color:#FF9F43;
}

.main-timer span{
font-weight:bold;
font-size:26px;
}

.play-card{
background:rgba(0,0,0,.45);
border-radius:16px;
padding:25px;
margin:25px 0;
border:1px solid rgba(245,199,122,.4);
backdrop-filter:blur(6px);
transition:.4s;
}

.play-card h3{
margin-bottom:15px;
}

.question-box{
background:rgba(0,0,0,.6);
padding:18px;
border-radius:10px;
margin-bottom:15px;
min-height:60px;
display:flex;
align-items:center;
justify-content:center;
}

.play-card input{
width:100%;
padding:12px;
border-radius:8px;
border:1px solid #444;
background:#111;
color:white;
margin-bottom:12px;
}

.play-card input:focus{
outline:none;
border-color:#4facfe;
box-shadow:0 0 10px rgba(79,172,254,.4);
}

.tools{
display:flex;
gap:10px;
justify-content:center;
}

.tools button{
padding:10px 16px;
border:none;
border-radius:8px;
cursor:pointer;
background:linear-gradient(135deg,#4facfe,#00f2fe);
color:black;
font-weight:bold;
}

.tools button:hover{
transform:translateY(-2px);
}

/*reveal animation*/

.reveal{
animation:reveal .7s ease;
}

@keyframes reveal{
from{opacity:0; transform:scale(.9)}
to{opacity:1; transform:scale(1)}
}

/* locked */

.locked{
opacity:.6;
filter:grayscale(.4);
}

.locked .question-box{
background:#222;
}


.locked-box{
  text-align: center;
  padding: 30px;
  border-radius: 14px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.2);
  font-size: 18px;
}

.locked-box p{
  margin-top: 10px;
  font-weight: 600;
}
/* ===== Challenge Grid Layout ===== */

.challenge-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 30px;
}

/* ===== Challenge Boxes ===== */

.challenge-box{
  background: rgba(15, 20, 40, 0.75);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 18px;
  padding: 22px;
  backdrop-filter: blur(8px);
  transition: transform .25s, box-shadow .25s;
}

.challenge-box:hover{
  transform: translateY(-6px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.challenge-box.islamic h3 i{
  color: #f5c77a;
}

.challenge-box.general h3 i{
  color: #7ad1ff;
}

.challenge-box.sports h3 i{
  color: #7affb0;
}

.challenge-box input{
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: none;
  margin-top: 12px;
  background: rgba(255,255,255,.1);
  color: white;
}

.actions{
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.voice-btn,
.submit-btn{
  padding: 10px 14px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: .25s;
}

.voice-btn{
  background: #2b2f55;
  color: white;
}

.submit-btn{
  background: linear-gradient(45deg,#f5c77a,#ffdf9e);
  color: #111;
  font-weight: 600;
}

.submit-btn:hover{
  transform: scale(1.05);
}
/* ===== Question Box ===== */

.challenge-box h3{
  margin-bottom: 14px;
}

.question{
  margin-top: 12px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  min-height: 70px;

  display: flex;
  align-items: center;
  line-height: 1.5;
}


/* Container to give some space from the top and sides */
.back-container {
    padding: 15px 20px;
    width: 100%;
    display: flex;
    justify-content: flex-start; /* Keeps it on the left */
}

/* The button styling */
.back-btn {
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px; /* Space between arrow and text */
    background: rgba(255, 255, 255, 0.1); /* Subtle transparent background */
    padding: 8px 16px;
    border-radius: 8px; /* Slightly rounded corners */
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

/* Hover effect for desktop and touch feedback for mobile */
.back-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateX(-3px); /* Moves slightly left when clicked */
}

/* Optional: Icon style adjustment */
.back-btn i {
    font-size: 14px;
}

/* responsive */

@media(max-width:600px){

.play-card{
padding:18px;
}

.tools{
flex-direction:column;
}

}