.taskgame-modal {
  position: fixed;
  z-index: 48;
  inset: 0;
  display: grid;
  padding: clamp(18px, 3vw, 42px);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(202, 166, 106, 0.18), transparent 26%),
    radial-gradient(circle at 50% 96%, rgba(145, 75, 31, 0.2), transparent 34%),
    rgba(3, 4, 6, 0.78);
  place-items: center;
  backdrop-filter: blur(10px);
  animation: taskgame-fade 0.32s ease both;
}

.taskgame-modal[hidden] { display: none; }

.taskgame-panel {
  position: relative;
  width: 72vw;
  max-height: 88vh;
  padding: clamp(24px, 3.6vw, 48px);
  overflow: hidden;
  border: 1px solid rgba(215, 169, 91, 0.62);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.6), transparent 16%, transparent 84%, rgba(0, 0, 0, 0.62)),
    radial-gradient(circle at 50% 10%, rgba(191, 122, 45, 0.18), transparent 32%),
    linear-gradient(135deg, rgba(28, 17, 11, 0.96), rgba(6, 7, 9, 0.97) 58%, rgba(26, 16, 10, 0.96));
  box-shadow: inset 0 0 0 1px rgba(255, 226, 164, 0.16), inset 0 0 70px rgba(202, 127, 45, 0.12), 0 30px 100px rgba(0, 0, 0, 0.82);
}

.taskgame-panel::before,
.taskgame-panel::after {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  content: "";
}

.taskgame-panel::before {
  inset: 12px;
  border: 1px solid rgba(202, 166, 106, 0.28);
  box-shadow: inset 0 0 28px rgba(202, 166, 106, 0.08);
}

.taskgame-panel::after {
  top: -110px;
  left: 50%;
  width: min(520px, 64vw);
  height: min(520px, 64vw);
  border: 1px solid rgba(202, 166, 106, 0.08);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(231, 177, 87, 0.18), transparent 64%);
  transform: translateX(-50%);
}

.taskgame-close {
  position: absolute;
  z-index: 4;
  top: clamp(14px, 2vw, 24px);
  right: clamp(14px, 2vw, 24px);
  display: grid;
  width: 46px;
  height: 46px;
  padding: 0;
  cursor: pointer;
  border: 1px solid rgba(242, 212, 155, 0.62);
  border-radius: 8px;
  background: radial-gradient(circle, rgba(119, 65, 29, 0.74), rgba(7, 8, 10, 0.86));
  color: #ffe5ad;
  font-size: 28px;
  line-height: 1;
  place-items: center;
  box-shadow: inset 0 0 16px rgba(242, 212, 155, 0.12), 0 0 20px rgba(198, 130, 49, 0.28);
  clip-path: polygon(22% 0, 78% 0, 100% 22%, 100% 78%, 78% 100%, 22% 100%, 0 78%, 0 22%);
  transition: border-color 0.25s ease, filter 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.taskgame-close:hover,
.taskgame-close:focus-visible {
  border-color: #ffe1a7;
  filter: brightness(1.16);
  transform: scale(1.06);
  box-shadow: inset 0 0 18px rgba(242, 212, 155, 0.22), 0 0 26px rgba(225, 173, 86, 0.55);
}

.taskgame-header,
.taskgame-list,
.taskgame-footer { position: relative; z-index: 2; }

.taskgame-header {
  display: grid;
  justify-items: center;
  margin-bottom: clamp(20px, 3vw, 34px);
  text-align: center;
}

.taskgame-kicker {
  margin: 0 0 8px;
  color: rgba(234, 220, 192, 0.58);
  font-size: 12px;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
}

.taskgame-title {
  margin: 0;
  color: #f7d99f;
  font-size: clamp(34px, 4.8vw, 64px);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-shadow: 0 0 14px rgba(225, 173, 86, 0.48), 0 6px 24px rgba(0, 0, 0, 0.72);
}

.taskgame-rule {
  display: flex;
  align-items: center;
  width: min(420px, 62vw);
  margin-top: 14px;
  gap: 14px;
  color: rgba(202, 166, 106, 0.62);
  font-size: 13px;
  letter-spacing: 0.2em;
}

.taskgame-rule::before,
.taskgame-rule::after {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, rgba(202, 166, 106, 0.66), transparent);
  content: "";
}

.taskgame-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2.2vw, 28px);
}

.taskgame-card {
  position: relative;
  min-height: clamp(360px, 48vh, 520px);
  padding: clamp(18px, 2vw, 26px);
  overflow: hidden;
  border: none;
  outline: none; 
  background-color:transparent;
/*   border: 1px solid rgba(202, 166, 106, 0.5);
  background: rgba(5, 6, 8, 0.72); */
  color: #eadcc0;
 /*  box-shadow: inset 0 0 0 1px rgba(255, 226, 164, 0.08), 0 18px 42px rgba(0, 0, 0, 0.48); */
  text-align: center;
  transition: border-color 0.25s ease, filter 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.taskgame-card::before {
  position: absolute;
  inset: 10px;
  z-index: 1;
  pointer-events: none;
  content: "";
}

.taskgame-card::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
/*   background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.48)), radial-gradient(circle at 50% 38%, transparent 20%, rgba(0, 0, 0, 0.44) 76%); */
  content: "";
}

.taskgame-card:hover,
.taskgame-card:focus-within {
  border-color: #f2d49b;
  filter: drop-shadow(0 0 10px rgba(242, 212, 155, 0.62));
}

.taskgame-card.is-locked {
  cursor: not-allowed;
  filter: grayscale(0.45) brightness(0.72);
}

.taskgame-card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1;
  transform: scale(1.04);
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.taskgame-card:hover .taskgame-card-bg,
.taskgame-card:focus-within .taskgame-card-bg {
  opacity: 1;
  filter: brightness(1.08);
  transform: scale(1.04);
}

.taskgame-card-content {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: calc(clamp(360px, 48vh, 520px) - clamp(36px, 4vw, 52px));
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.taskgame-badge {
  position: absolute;
  top: 0;
  left: 50%;
  min-width: 86px;
  padding: 8px 13px;
  border: 1px solid rgba(242, 212, 155, 0.5);
  background: rgba(5, 6, 8, 0.66);
  color: #f2d49b;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  transform: translateX(-50%);
}

.taskgame-name {
  margin: 0 0 12px;
  color: #ffe0a4;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.82);
}

.taskgame-desc {
  min-height: 3.8em;
  margin: 0 0 20px;
  color: rgba(246, 225, 190, 0.82);
  font-size: clamp(13px, 1.35vw, 17px);
  letter-spacing: 0.08em;
  line-height: 1.9;
}

.taskgame-start {
  display: grid;
  width: min(232px, 92%);
  height: auto;
  min-height: 0;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: url("../../assets/images/taskgame/btn_startgame.webp") center / contain no-repeat;
  color: #f9dfaa;
  font-size: clamp(17px, 1.8vw, 23px);
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  aspect-ratio: 232 / 65;
  place-items: center;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.58));
  cursor: pointer;
  transition: background-image 0.15s ease, filter 0.2s ease, transform 0.2s ease;
}

.taskgame-start:hover,
.taskgame-start:focus-visible,
.taskgame-start:active {
  background-image: url("../../assets/images/taskgame/btn_startgame_hover.webp");
  filter: brightness(1.12) drop-shadow(0 12px 22px rgba(225, 173, 86, 0.34));
  transform: scale(1.045);
}

.taskgame-start:active { transform: scale(1.025); }

.taskgame-card.is-locked .taskgame-start { opacity: 0.62; }

.taskgame-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(18px, 3vw, 34px);
  color: rgba(234, 220, 192, 0.68);
  font-size: clamp(12px, 1.3vw, 16px);
  letter-spacing: 0.18em;
  gap: 18px;
  text-align: center;
}

.taskgame-footer::before,
.taskgame-footer::after {
  width: min(180px, 22vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(202, 166, 106, 0.56), transparent);
  content: "";
}

@keyframes taskgame-fade {
  from { opacity: 0; transform: scale(1.02); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 900px) and (orientation: portrait) {
  .taskgame-modal {
    padding: 14px;
  }

  .taskgame-panel {
    width: min(1120px, 94vw);
    max-height: min(760px, 88dvh);
    overflow: auto;
  }

  .taskgame-close {
    position: sticky;
    top: 0;
    float: right;
    margin: -6px -6px -40px 0;
  }

  .taskgame-list {
    display: flex;
    margin-inline: calc(clamp(24px, 3.6vw, 48px) * -1);
    padding: 14px calc((100% - min(307px, 72vw)) / 2) 24px;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
    scroll-padding-inline: calc((100% - min(307px, 72vw)) / 2);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    touch-action: pan-x;
    perspective: 900px;
  }

  .taskgame-list::-webkit-scrollbar { display: none; }

  .taskgame-card {
    width: min(307px, 72vw);
    min-width: min(307px, 72vw);
    min-height: clamp(360px, 48vh, 520px);
    opacity: 0.48;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    transform: scale(0.88) rotateY(5deg);
    transition: opacity 0.32s ease, filter 0.32s ease, transform 0.32s ease;
  }

  .taskgame-card.is-selected {
    z-index: 2;
    opacity: 1;
    filter: drop-shadow(0 0 14px rgba(242, 212, 155, 0.38));
    transform: scale(1) rotateY(0);
  }

  .taskgame-card.is-selected ~ .taskgame-card {
    transform: scale(0.88) rotateY(-5deg);
  }

  .taskgame-card-content {
    min-height: calc(clamp(360px, 48vh, 520px) - clamp(36px, 4vw, 52px));
  }
  .taskgame-footer::before,
  .taskgame-footer::after { width: 16vw; }
}