*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family:Tahoma, Arial, sans-serif;
}

body{
  min-height:100vh;
  background:linear-gradient(135deg,#c3ecf7,#729ed0);
  display:flex;
  justify-content:center;
  align-items:center;
  padding:0;
}
p{color: #0e3145;}
.game-frame{
  width: min(100vw, 800px);
  height: 100vh;
  max-height: 100vh;
  background:#f0fffe;
  border:8px solid #344d8b;
  border-radius:25px;
  box-shadow:0 15px 40px rgba(0, 0, 0, 0.25);
  overflow:auto;
}

.game-header{
  background:linear-gradient(90deg,#18385c,#4589b9,#18425c);
  color:rgb(255, 255, 255);
  text-align:center;
  padding:20px;
}

.game-header h1{
  font-size:32px;
}

.game-content{
  padding:25px;
  min-height:520px;
  width: auto;
}

/* لوحة البداية */
.panel{
  background:#d8f5ff;
  border:3px solid #4596b9;
  border-radius:20px;
  padding:22px;
}

.panel h2{
  text-align:center;
  margin-bottom:18px;
  color:#18335c;
}

.form-group{
  margin-bottom:15px;
}

label{
  display:block;
  margin-bottom:7px;
  font-weight:bold;
  color:#182f5c;
}

select,input{
  width:100%;
  padding:12px;
  border:2px solid #458bb9;
  border-radius:12px;
  font-size:16px;
  background:white;
}

.team-row{
  display:grid;
  grid-template-columns:1fr 110px;
  gap:10px;
  margin-bottom:10px;
}

.btn ,.but-log{
  border:none;
  padding:13px 20px;
  border-radius:14px;
  font-size:17px;
  font-weight:bold;
  cursor:pointer;
  background:#34528b;
  color:white;
  transition:.2s;
}

.btn:hover{
  transform:scale(1.03);
  background:#1d446b;
}

.start-btn{
  width:100%;
  margin-top:12px;
}

/* شاشة السؤال */
.question-area{
  text-align:center;
}
.question-area .card{
  width:100%;
  max-width:520px;
  height:260px;
  margin:0 auto 25px;
}
.stage-info{
  color:#183c5c;
  margin-bottom:15px;
  font-size:20px;
  font-weight:bold;
}

.card{
  width:100%;
  max-width:520px;
  height:260px;
  margin:0 auto 25px;
  perspective:1000px;
  cursor:pointer;
}

.card-inner{
  width:100%;
  height:100%;
  position:relative;
  transition:transform .7s;
  transform-style:preserve-3d;
}

.card.flip .card-inner{
  transform:rotateY(180deg);
}

.card-face{
  position:absolute;
  width:100%;
  height:100%;
  backface-visibility:hidden;
  border-radius:25px;
  border:5px solid #34458b;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:25px;
  font-size:24px;
  font-weight:bold;
  line-height:1.8;
  box-shadow:0 10px 25px rgba(0,0,0,.18);
}

.card-front{
  background:#abd5de;
  color:#14224b;
}

.card-back{
  background:#d8f7ff;
  color:rgb(10, 40, 96);
  transform:rotateY(180deg);
}

.teams-score{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:12px;
  margin-top:20px;
}

.team-card{
  border-radius:16px;
  padding:15px;
  color:white;
  font-weight:bold;
  box-shadow:0 5px 14px rgba(0,0,0,.2);
}

.team-card button{
  margin-top:10px;
  width:100%;
  padding:9px;
  border:none;
  border-radius:10px;
  font-weight:bold;
  cursor:pointer;
}

.controls{
  margin-top:22px;
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  
}

/* شاشة الفائز */
.winner-box{
  text-align:center;
  background:#d8efff;
  border:4px solid #4554b9;
  border-radius:22px;
  padding:35px 20px;
}

.winner-box h2{
  color:#18325c;
  font-size:30px;
  margin-bottom:15px;
}

.winner-name{
  font-size:35px;
  color:#34528b;
  font-weight:bold;
  margin:20px 0;
}
.confetti{
  position:fixed;
  top:-20px;
  width:10px;
  height:18px;
  z-index:9999;
  border-radius:3px;
  animation:fallConfetti linear forwards;
  pointer-events:none;
}
.qa-image{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:12px;
}

.login-card{
  max-width:420px;
  height: auto;
 
  text-align:center;
  border:2px solid #1f3182;
}

input{
  width:90%;
  height:58px;
  border:2px solid #cdd3e3;
  border-radius:16px;
  padding:0 16px;
  font-size:21px;
  font-weight:800;
  text-align:center;
  font-family:inherit;
}



.page{display:none}
.page.active{display:block;}
.logo{color:#fff;font-weight:900;margin:18px 0;font-size:18px}
.logo.small{font-size:14px;margin:0}
.main-title{
  text-align:center;
  color:#211051;
  font-size:34px;
  margin:20px 0;
}
.card{
  background:#f7f7ee;
  border-radius:28px;
  padding:24px;
  box-shadow:0 10px 25px rgba(0,0,0,.18);
}
.login-card{
  max-width:420px;
  margin:120px auto;
  text-align:center;
}

.login-container{
  width:100%;
  max-width:420px;
  background:#fffaf0;
  border:8px solid #45348b;
  border-radius:22px;
  box-shadow:0 15px 40px rgba(0,0,0,.25);
  margin: 40px auto;
}

.login-box{
  padding:30px;
  text-align:center;
  background:#fffdf7;
  
}

.login-box h2{
  color:#241d6b;
  margin-bottom:10px;
  font-size:26px;

   white-space: nowrap;
  display:block;
}

.login-box p{
  color:#24144b;
  margin-bottom:20px;
  font-size:15px;
}

.login-box input{
  width:100%;
  padding:14px;
  margin-bottom:14px;
  border:3px solid #948cd2;
  border-radius:12px;
  font-size:16px;
  text-align:center;
  color:#14154b;
  background:white;
}

.login-box input:focus{
  outline:none;
  border-color:#343d8b;
}

#loginMessage{
  margin-top:15px;
  font-weight:bold;
  color:#1d276b;
}
.intro-box{
    background:#62aee4;
    border-radius:20px;
    padding:25px;
    margin-bottom:20px;
    text-align:center;
    box-shadow:0 6px 20px rgba(0,0,0,.12);

}

.intro-box h2{
    font-size:32px;
    font-weight:800;
    color:#0051ff;
    margin-bottom:15px;
}

.intro-box p{
    font-size:20px;
    line-height:2;
    color:#101011;
    margin-bottom:20px;
    text-align:center;
    font-weight:600;
}

.features-list{
    list-style:none;
    padding:0;
    margin:0 auto;
    text-align:center;
}

.features-list li{
    font-size:20px;
    font-weight:600;
    padding:10px 0;
    color:#333333;
}

.features-list li::before{
    content:"✨ ";
}
.color-card{
  height:86px;
  background:#fff;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:0;
  box-shadow:0 5px 18px rgba(0, 0, 0, 0.08);
}
.color-card span{
  width:38px;
  height:42px;
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
}
.color-card.selected{outline:4px solid #6ec8ee}
.btn{
  border:0;
  border-radius:18px;
  min-height:58px;
  padding:10px 28px;
  font-size:24px;
  font-weight:900;
  font-family:inherit;
  cursor:pointer;
  box-shadow:0 6px 0 rgba(0,0,0,.25);
}
.yellow{background:#3da8f4;color:#111;width:100%;margin-top:22px}

@keyframes fallConfetti{
  0%{
    transform:translateY(0) rotate(0deg);
    opacity:1;
  }
  100%{
    transform:translateY(110vh) rotate(720deg);
    opacity:0;
  }
}
@media(max-width:600px){
  .game-header h1{
    font-size:24px;
  }

 .game-content{
    min-height:auto;
    padding:12px;
  }
  

  .card-face{
    font-size:20px;
  }

  .team-row{
    grid-template-columns:1fr;
  }

  .game-frame{
    width:auto;
    height:100vh;
    border-radius:0;
    border-width:0;
  }


  .question-area .card{
    height:220px;
  }

  .btn{
    font-size:20px;
    min-height:50px;
  }
}