.screen-start {
  isolation: isolate;
  overflow: hidden;
  background: #123824;
}

.start-picture {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  overflow: hidden;
}

.start-picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 54%;
}

.start-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}


/* =========================================================
   KARTA — DESKTOP
   DÓŁ + PRAWA STRONA
   ========================================================= */

.start-event-card {
  position: absolute;

  top: auto;
  left: auto;
  right: clamp(18px, 3vw, 42px);
  bottom: clamp(18px, 3vw, 34px);

  transform: none;

  width: min(640px, calc(100% - 36px));

  display: grid;
  justify-items: start;
  gap: 12px;

  padding: clamp(19px, 2.2vw, 29px);

  border: 1px solid rgb(255 228 140 / 52%);
  border-radius: 28px;

  background: linear-gradient(
    135deg,
    rgb(10 63 36 / 44%),
    rgb(4 31 18 / 20%)
  );

  box-shadow:
    0 12px 31px rgb(0 0 0 / 20%),
    inset 0 0 0 1px rgb(255 255 255 / 9%);

  color: #fff4d2;
  text-align: left;

  text-shadow: 0 2px 3px rgb(0 0 0 / 68%);

  backdrop-filter: blur(1.5px) saturate(0.92);

  isolation: isolate;
}

.start-event-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: -1;

  border: 1px dashed rgb(255 231 158 / 28%);
  border-radius: 21px;

  pointer-events: none;
}

.start-card__art {
  position: absolute;
  z-index: 0;

  right: -45px;
  bottom: -44px;

  width: 138px;
  height: 138px;

  object-fit: contain;

  opacity: 0.72;

  filter: drop-shadow(0 7px 6px rgb(0 0 0 / 28%));
}

.start-event-card > :not(.start-card__art) {
  position: relative;
  z-index: 1;
}


/* =========================================================
   LEAD
   ========================================================= */

.start-event-card__lead {
  margin: 0;
  color: #d8f39d;

  font-family: "Fredoka", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.06em;

  text-transform: uppercase;

  text-shadow:
    0 1px 0 rgb(22 67 30 / 90%),
    0 0 8px rgb(176 232 112 / 28%);
}


/* =========================================================
   COUNTDOWN
   ========================================================= */

.start-countdown__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));

  width: 100%;

  gap: 7px;
}

.start-countdown__unit {
  min-width: 0;

  display: grid;
  justify-items: center;

  gap: 3px;

  padding: 8px 4px 6px;

  border: 1px solid rgb(255 239 172 / 23%);
  border-radius: 13px;

  background: linear-gradient(
    160deg,
    rgb(255 255 255 / 12%),
    rgb(13 68 40 / 12%)
  );
}

.start-countdown__unit strong {
  color: #fff0a7;

  font-size: clamp(24px, 3vw, 35px);
  font-variant-numeric: tabular-nums;

  line-height: 1;

  white-space: nowrap;

  text-shadow:
    0 2px 0 rgb(104 58 18 / 85%),
    0 0 9px rgb(255 226 112 / 27%);
}


/* GODZINY */

.start-countdown__unit:nth-child(2) strong {
  color: #b8ed82;

  text-shadow:
    0 2px 0 rgb(37 95 45 / 85%),
    0 0 9px rgb(170 237 113 / 25%);
}


/* MINUTY */

.start-countdown__unit:nth-child(3) strong {
  color: #a4e0ec;

  text-shadow:
    0 2px 0 rgb(31 87 101 / 85%),
    0 0 9px rgb(112 208 239 / 25%);
}


/* SEKUNDY */

.start-countdown__unit:nth-child(4) strong {
  color: #ffbd9d;

  text-shadow:
    0 2px 0 rgb(128 54 39 / 85%),
    0 0 9px rgb(255 150 113 / 25%);
}


/* MILISEKUNDY */

.start-countdown__unit:nth-child(5) strong {
  color: #ffd66b;

  text-shadow:
    0 2px 0 rgb(112 68 18 / 90%),
    0 0 10px rgb(255 204 72 / 30%);
}

.start-countdown__unit span {
  color: #c6e991;

  font-size: 10px;
  font-weight: 600;

  letter-spacing: 0.08em;

  white-space: nowrap;
}


/* =========================================================
   CLAIM
   ========================================================= */

.start-event-card__claim {
  max-width: 280px;

  margin: 0;

  color: #fff7d6;

  font-size: clamp(13px, 1.55vw, 17px);
  font-weight: 1000;

  line-height: 1.15;

  text-transform: uppercase;
}


/* =========================================================
   TYTUŁ
   ========================================================= */

.start-card__title {
  display: flex;
  align-items: center;

  gap: 7px;

  margin: 0;

  color: #ffe495;

  font-size: clamp(19px, 2.2vw, 28px);
  font-weight: 1000;

  line-height: 0.95;
  letter-spacing: -0.03em;

  text-transform: uppercase;
}

.start-card__five {
  display: inline-grid;
  place-items: center;

  width: 46px;
  height: 46px;

  flex: 0 0 auto;

  border: 2px solid #ffe495;
  border-radius: 50%;

  color: #fff7d6;

  font-size: 30px;
  font-style: italic;

  transform: rotate(-8deg);
}


/* =========================================================
   MOBILE
   KARTA — DÓŁ + ŚRODEK
   ========================================================= */
@media (max-width: 759px) {
  .start-picture img {
    object-position: center center;
  }

  .start-event-card {
    top: auto;
    right: auto;
    bottom: 8px;
    left: 50%;

    width: calc(100% - 10px);

    justify-items: center;
    gap: 6px;

    padding: 10px 12px;

    transform: translateX(-50%);

    border-radius: 16px;

    text-align: center;

    background: linear-gradient(
      135deg,
      rgb(10 63 36 / 28%),
      rgb(4 31 18 / 10%)
    );

    border: 1px solid rgb(255 228 140 / 34%);

    box-shadow:
      0 8px 18px rgb(0 0 0 / 16%),
      inset 0 0 0 1px rgb(255 255 255 / 6%);

    backdrop-filter: blur(1.2px) saturate(0.86);
  }

  .start-event-card::before {
    inset: 4px;
    border-radius: 11px;
    border: 1px dashed rgb(255 231 158 / 18%);
  }

  .start-card__art {
    right: -22px;
    bottom: -24px;

    width: 72px;
    height: 72px;

    opacity: 0.5;
  }

  .start-event-card__lead {
    font-size: 14px;
    line-height: 1.05;
    letter-spacing: 0.04em;
  }

  .start-countdown__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
  }

  .start-countdown__unit {
    min-width: 0;
    gap: 1px;
    padding: 4px 2px 3px;
    border-radius: 8px;
  }

  .start-countdown__unit strong {
    font-size: clamp(14px, 4.7vw, 20px);
  }

  .start-countdown__unit span {
    font-size: 5px;
    letter-spacing: 0.04em;
  }

  .start-event-card__claim {
    max-width: 210px;
    font-size: clamp(8px, 2.3vw, 10px);
  }

  .start-card__title {
    font-size: clamp(14px, 4.2vw, 19px);
    gap: 5px;
  }

  .start-card__five {
    width: 28px;
    height: 28px;
    font-size: 18px;
  }
}

/* =========================================================
   PJD MOD03 START COPY
   ========================================================= */

.start-event-card__lead {
  color: #d8f39d;

  text-shadow:
    0 1px 0 rgb(22 67 30 / 90%),
    0 0 8px rgb(176 232 112 / 28%);
}

.start-event-card__claim {
  display: grid;
}

.start-claim__team,
.start-claim__highlight {
  display: block;
}

.start-claim__team {
  color: #fff5d0;
}

.start-claim__highlight {
  color: #ffd65f;

  text-shadow:
    0 2px 0 #764319,
    0 0 9px rgb(255 213 86 / 34%);
}

.start-card__five {
  overflow: visible;

  padding: 0;

  border: 0;

  background: transparent;
}

.start-card__five img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  filter: drop-shadow(0 3px 2px rgb(0 0 0 / 32%));
}