/* =========================================================
      GŁÓWNA RAMKA GRY
      ========================================================= */
   
   .game-section-game {
       position: relative;
       width: 100%;
       overflow: hidden;
   
       border: 1px solid rgba(255, 255, 255, 0.16);
       border-radius: 20px;
   
       background: #000000;
   }
   
   .game-section-canvas-wrapper {
       position: relative;
       width: 100%;
       aspect-ratio: 16 / 9;
       overflow: hidden;
       background: #000000;
   }
   
   .game-section-canvas {
       display: block;
       width: 100%;
       height: 100%;
   
       cursor: pointer;
       user-select: none;
       touch-action: none;
   
       -webkit-user-select: none;
   }
   
   
   /* =========================================================
      WYNIK NAD GRĄ
      ========================================================= */
   
   .game-section-game-header {
       position: absolute;
       top: 14px;
       left: 14px;
       z-index: 12;
   
       display: flex;
       align-items: center;
       gap: 16px;
   
       pointer-events: none;
   }
   
   .game-section-game-heading {
       display: none;
   }
   
   .game-section-score {
       display: flex;
       align-items: center;
       gap: 30px;
   
       padding: 10px 18px;
   
       border: 1px solid rgba(255, 255, 255, 0.16);
       border-radius: 10px;
   
       background: rgba(15, 15, 16, 0.62);
   
       backdrop-filter: blur(8px);
       -webkit-backdrop-filter: blur(8px);
   
       box-shadow:
           0 15px 45px rgba(0, 0, 0, 0.42),
           inset 0 1px 0 rgba(255, 255, 255, 0.08);
   }
   
   .game-section-score-item {
       min-width: 54px;
   }
   
   .game-section-score-item span {
       display: block;
       margin-bottom: 2px;
   
       color: rgba(255, 255, 255, 0.55);
   
       font-size: 10px;
       font-weight: 700;
       letter-spacing: 0.12em;
       text-transform: uppercase;
   }
   
   .game-section-score-item strong {
       display: block;
   
       color: #ffffff;
   
       font-size: 23px;
       line-height: 1;
   }
   
   
   /* =========================================================
      LOADER
      ========================================================= */
   
   .game-section-loading {
       position: absolute;
       inset: 0;
       z-index: 40;
   
       display: grid;
       place-items: center;
   
       padding: 24px;
   
       color: rgba(255, 255, 255, 0.76);
       background: #000000;
   
       font-size: 14px;
       font-weight: 700;
       letter-spacing: 0.08em;
       text-align: center;
       text-transform: uppercase;
   
       transition:
           opacity 0.25s ease,
           visibility 0.25s ease;
   }
   
   .game-section-loading.is-hidden {
       opacity: 0;
       visibility: hidden;
       pointer-events: none;
   }
   
   
   /* =========================================================
      WSPÓLNE TŁO OVERLAYÓW
      START + GAME OVER
      ========================================================= */
   
   .game-section-start-screen,
   .game-section-game-over {
       position: absolute;
       inset: 0;
   
       display: grid;
       place-items: center;
   
       padding: 24px;
   
       background:
           radial-gradient(
               circle at 50% 42%,
               rgba(167, 14, 19, 0.22),
               transparent 42%
           ),
           rgba(0, 0, 0, 0.76);
   
       backdrop-filter: blur(5px);
       -webkit-backdrop-filter: blur(5px);
   
       opacity: 1;
       visibility: visible;
       pointer-events: auto;
   
       transition:
           opacity 0.25s ease,
           visibility 0.25s ease;
   }
   
   .game-section-start-screen {
       z-index: 20;
   }
   
   .game-section-game-over {
       z-index: 30;
   }
   
   .game-section-start-screen.is-hidden,
   .game-section-game-over.is-hidden {
       opacity: 0;
       visibility: hidden;
       pointer-events: none;
   }
   
   
   /* =========================================================
      WSPÓLNA KARTA OVERLAYU
      ========================================================= */

   
   .game-section-start-content,
   .game-section-game-over-content {
       position: relative;
   
       width: min(440px, 100%);
       padding: 32px;
   
       overflow: hidden;
   
       color: #ffffff;
       text-align: center;
   
       border: 1px solid rgba(255, 255, 255, 0.16);
       border-top: 3px solid #a70e13;
       border-radius: 10px;
   
       background:
           linear-gradient(
               180deg,
               rgba(27, 28, 30, 0.97),
               rgba(7, 7, 8, 0.98)
           );
   }
   
   .game-section-start-screen:not(.is-hidden)
   .game-section-start-content,
   .game-section-game-over:not(.is-hidden)
   .game-section-game-over-content {
       animation:
           draco-overlay-enter 0.35s ease both;
   }
   
   
   /* =========================================================
      TYPOGRAFIA OVERLAYÓW
      ========================================================= */
   
   .game-section-start-content span,
   .game-section-game-over-content span,
   .game-section-game-over-content span {
       margin: 0;
       color: #ffffff;
       font-size: clamp(20px, 5vw, 27px);
       font-weight: 700;
       line-height: 1;
       letter-spacing: -0.04em;
       font-family: var(--font-heading);
   }

   
   
   .game-section-start-content p,
   .game-section-game-over-description {
       max-width: 350px;
       margin: 15px auto 24px;
   
       color: #ffffff;
   
       font-size: 14px;
       line-height: 1.6;
       font-family: var(--font-body);
   }
   
   
   /* =========================================================
      WYNIK KOŃCOWY
      ========================================================= */
   
   .game-section-final-score {
       margin-bottom: 12px;
   }
   
   .game-section-final-score span {
       display: block;
   
       margin-bottom: 4px;
   
       color: rgba(255, 255, 255, 0.56);
   
       font-size: 12px;
       font-weight: 700;
       letter-spacing: 0.12em;
       text-transform: uppercase;
   }
   
   .game-section-final-score strong {
       display: block;
   
       color: #ffffff;
   
       font-size: clamp(64px, 10vw, 96px);
       line-height: 0.95;
       letter-spacing: -0.07em;
   
       text-shadow:
           0 0 30px rgba(167, 14, 19, 0.45);
   }
   
   .game-section-final-best {
       color: rgba(255, 255, 255, 0.62);
       font-size: 13px;
       margin-bottom: 20px;
   }
   
   .game-section-final-best strong {
       color: #ffffff;
   }
   
   
   /* =========================================================
      WSPÓLNE PRZYCISKI
      ========================================================= */
   
   .game-section-start-button,
   .game-section-restart-button {
       padding: 15px 30px;
   
       color: #ffffff;
   
       border: 1px solid #a70e13;
       border-radius: 10px;
   
       background: #a70e13;
   
       cursor: pointer;
   
       font-family: var(--font-heading);
       font-size: 16px;
       font-weight: 900;
       text-transform: uppercase;
   
       transition: 0.3s all !important;
   }
   
   .game-section-start-button:hover,
   .game-section-restart-button:hover {
    background-color: transparent;
    color: var(--red-accent-color);
    transform: translateY(-5px);
    box-shadow: 0 0px 10px 10px #a70e1370;
   }
   
   .game-section-start-button:active,
   .game-section-restart-button:active {
       transform: translateY(0);
   }
   
   .game-section-start-button:focus-visible,
   .game-section-restart-button:focus-visible {
       outline: 3px solid rgba(255, 255, 255, 0.8);
       outline-offset: 4px;
   }
   
   
   /* =========================================================
      STOPKA GRY
      ========================================================= */
   
   .game-section-game-footer {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 18px;
   
       padding: 12px 18px;
   
       color: rgba(255, 255, 255, 0.48);
       background: #0d0e0f;
   
       border-top: 1px solid rgba(255, 255, 255, 0.1);
   
       font-size: 12px;
   }
   
   .game-section-controls {
       display: flex;
       align-items: center;
       gap: 8px;
   }
   
   .game-section-key {
       display: inline-grid;
       place-items: center;
   
       min-height: 25px;
       padding: 0 9px;
   
       color: #ffffff;
       background: #222326;
   
       border: 1px solid rgba(255, 255, 255, 0.16);
       border-radius: 4px;
   
       box-shadow:
           inset 0 -2px 0 rgba(0, 0, 0, 0.38);
   
       font-size: 10px;
       font-weight: 800;
       letter-spacing: 0.08em;
   }
   
   .game-section-status {
       color: rgba(255, 255, 255, 0.48);
       text-align: right;
   }
   
   
   /* =========================================================
      ANIMACJE
      ========================================================= */
   
   @keyframes draco-overlay-enter {
       from {
           opacity: 0;
           transform:
               translateY(20px)
               scale(0.96);
       }
   
       to {
           opacity: 1;
           transform:
               translateY(0)
               scale(1);
       }
   }
   
   
   /* =========================================================
      RESPONSYWNOŚĆ
      ========================================================= */

      @media (max-width: 1130px){
        .game-section-game{
            width: 100%;
        }
        .game-section-canvas-wrapper{
            aspect-ratio: 3/2;
        }
      }
   
   @media (max-width: 700px) {
       .game-section {
           padding: 50px 20px;
       }
   
       .game-section-hero-content {
           margin-bottom: 26px;
       }
   
       .game-section-hero-content br {
           display: none;
       }
   
       .game-section-game {
           border-radius: 12px;
           width: 100%;
       }

       .game-section-canvas-wrapper{
        aspect-ratio: 3/2;
       }
   
       .game-section-game-header {
           top: 8px;
           left: 8px;
       }
   
       .game-section-score {
           gap: 20px;
           padding: 8px 13px;
       }
   
       .game-section-score-item strong {
           font-size: 19px;
       }
   
       .game-section-start-screen,
       .game-section-game-over {
           padding: 14px;
       }
   
       .game-section-start-content,
       .game-section-game-over-content {
           padding: 25px 18px;
       }
   
       .game-section-start-content p,
       .game-section-game-over-description {
           margin-bottom: 19px;
           font-size: 13px;
       }
   
       .game-section-start-button,
       .game-section-restart-button {
           width: 100%;
           font-size: 14px;
       }
   
       .game-section-game-footer {
           align-items: flex-start;
           flex-direction: column;
           gap: 7px;
           padding: 11px 14px;
       }
   
       .game-section-status {
           text-align: left;
       }
   }
   
   

/*
 * Overlay odliczania przed rozpoczęciem gry.
 * Dopisz ten kod na końcu CSS sekcji gry.
 */
 .game-section-start-countdown {
    position: absolute;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(
            circle at center,
            rgba(157, 0, 9, 0.2) 0%,
            rgba(4, 4, 4, 0.88) 48%,
            rgba(0, 0, 0, 0.96) 100%
        );
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: wait;
}

.game-section-start-countdown[hidden] {
    display: none;
}

.game-section-start-countdown::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.035) 50%,
            transparent 100%
        );
    transform: translateX(-100%);
    animation: game-start-countdown-scan 1.2s linear infinite;
}

.game-section-start-countdown-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 240px;
    min-height: 240px;
    text-align: center;
}

.game-section-start-countdown-eyebrow {
    margin-bottom: 8px;
    color: #d10d18;
    font-size: clamp(12px, 1.4vw, 18px);
    font-weight: 800;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.game-section-start-countdown-value {
    display: block;
    min-width: 4ch;
    color: #ffffff;
    font-size: clamp(112px, 18vw, 230px);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.06em;
    text-align: center;
    text-shadow:
        0 0 18px rgba(255, 255, 255, 0.18),
        0 0 48px rgba(209, 13, 24, 0.35);
    transform-origin: center;
}

.game-section-start-countdown[data-phase='start']
.game-section-start-countdown-value {
    min-width: 0;
    color: #ffffff;
    font-size: clamp(68px, 12vw, 154px);
    letter-spacing: 0.06em;
    text-shadow:
        0 0 22px rgba(255, 255, 255, 0.2),
        0 0 58px rgba(209, 13, 24, 0.6);
}

.game-section-start-countdown-value.is-animating {
    animation: game-start-countdown-pop 0.72s cubic-bezier(0.2, 0.85, 0.25, 1);
}

@keyframes game-start-countdown-pop {
    0% {
        opacity: 0;
        transform: scale(1.45);
        filter: blur(8px);
    }

    28% {
        opacity: 1;
        transform: scale(0.94);
        filter: blur(0);
    }

    55% {
        transform: scale(1.04);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

@keyframes game-start-countdown-scan {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .game-section-start-countdown::before,
    .game-section-start-countdown-value.is-animating {
        animation: none;
    }
}