/* ===== بازی «کدوم؟» ===== */
.game {
  background: var(--blue);
  color: #fff;
  border: 5px solid var(--ink);
  border-radius: 36px;
  padding: 28px 20px;
  text-align: center;
  box-shadow: 10px 10px 0 var(--ink);
}

.game h2 {
  color: #fff!important;
}

.q {
  font-size: 70px;
}

.opts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 14px 0;
}

.opt {
  font: 400 26px Lalezar,sans-serif;
  direction: ltr;
  border: 4px solid var(--ink);
  border-radius: 20px;
  background: #fff;
  color: #14204f;
  padding: 8px 22px;
  cursor: pointer;
  min-width: 120px;
}

.opt.ok {
  background: #3ecf6e;
}

.opt.no {
  background: var(--red);
  color: #fff;
  animation: shake .3s;
}

@keyframes shake {25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}

.msg {
  min-height: 30px;
  font-weight: 700;
  font-size: 20px;
}

.game {
  background: radial-gradient(circle at 20% 0,#6f93ff,#1240ff 45%,#0b1fa8);
  box-shadow: 0 10px 0 #061a70,0 24px 40px rgba(18,64,255,.5),inset 0 4px 0 rgba(255,255,255,.45);
}

.opt {
  background: linear-gradient(#fff,#d9e4ff);
  box-shadow: 0 6px 0 #14204f,inset 0 3px 0 #fff;
}

.opt:active {
  transform: translateY(4px);
}

.opt.ok {
  background: linear-gradient(#a6ffc3,#18c75a);
}

.opt.no {
  background: linear-gradient(#ff7a8a,#e0112f);
}

@media (max-width:480px) {
  .game {
    padding: 22px 12px;
    border-width: 4px;
    box-shadow: 6px 6px 0 var(--ink);
  }
  .opt {
    min-width: 0;
    flex: 1 1 40%;
    font-size: 22px;
  }
  .q {
    font-size: 60px;
  }
}

.game {
  background: linear-gradient(145deg,rgba(18,64,255,.72),rgba(130,100,255,.5))!important;
  border: 1.5px solid rgba(255,255,255,.7)!important;
  box-shadow: 0 20px 50px rgba(18,64,255,.4),inset 0 2px 0 rgba(255,255,255,.6)!important;
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  color: #fff;
}

.opt {
  background: linear-gradient(145deg,rgba(255,255,255,.85),rgba(255,255,255,.48))!important;
  border: 1.5px solid rgba(255,255,255,.9)!important;
  box-shadow: 0 6px 16px rgba(10,20,80,.25),inset 0 2px 0 #fff!important;
}

.opt.ok {
  background: linear-gradient(145deg,rgba(120,255,160,.92),rgba(30,190,90,.75))!important;
}

.opt.no {
  background: linear-gradient(145deg,rgba(255,120,140,.92),rgba(224,17,47,.78))!important;
}

.opts label {
  background: rgba(255,255,255,.62)!important;
  border: 1.5px solid rgba(255,255,255,.95)!important;
  box-shadow: inset 0 2px 6px rgba(20,32,79,.12)!important;
}

.opts label {
  box-shadow: 0 3px 10px rgba(20,32,79,.12)!important;
}

.gstars {
  font-size: 28px;
  min-height: 40px;
  filter: drop-shadow(0 0 8px #ffe03a);
}

.modes {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 6px 0 2px;
}

.mode {
  font: 700 16px Vazirmatn,sans-serif;
  border: 1.5px solid rgba(255,255,255,.9);
  background: rgba(255,255,255,.28);
  color: #fff;
  border-radius: 99px;
  padding: 5px 18px;
  cursor: pointer;
}

.mode.on {
  background: #fff;
  color: #1240ff;
  box-shadow: 0 4px 14px rgba(0,0,60,.25);
}

.lvl {
  font-weight: 900;
  margin: 4px 0;
}

.opt.emo {
  font-size: 44px;
  min-width: 90px;
  line-height: 1.3;
}

.spk {
  font-size: 62px;
  border: 0;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.25));
}

.cf {
  position: fixed;
  top: -14px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  z-index: 99;
  pointer-events: none;
  animation: cfall linear forwards;
}

@keyframes cfall {to{transform:translateY(108vh) rotate(720deg)}}