/* Snowflake Inline Fonts */
      @font-face {
        font-family: "Snowflake Inline";
        src: url("../fonts/SnowflakeInline-Inlinex1.woff2") format("woff2"),
          url("../fonts/SnowflakeInline-Inlinex1.woff") format("woff");
        font-weight: normal;
        font-style: normal;
        font-display: swap;
      }

      @font-face {
        font-family: "Snowflake Inline";
        src: url("../fonts/SnowflakeInline-Inlinex2.woff2") format("woff2"),
          url("../fonts/SnowflakeInline-Inlinex2.woff") format("woff");
        font-weight: bold;
        font-style: normal;
        font-display: swap;
      }

      /* Snowflake Sans - Light */
      @font-face {
        font-family: "Snowflake Sans";
        src: url("../fonts/SnowflakeSans-Light.woff2") format("woff2"),
          url("../fonts/SnowflakeSans-Light.woff") format("woff");
        font-weight: 300;
        font-style: normal;
        font-display: swap;
      }

      @font-face {
        font-family: "Snowflake Sans";
        src: url("../fonts/SnowflakeSans-LightItalic.woff2") format("woff2"),
          url("../fonts/SnowflakeSans-LightItalic.woff") format("woff");
        font-weight: 300;
        font-style: italic;
        font-display: swap;
      }

      /* Snowflake Sans - Book */
      @font-face {
        font-family: "Snowflake Sans";
        src: url("../fonts/SnowflakeSans-Book.woff2") format("woff2"),
          url("../fonts/SnowflakeSans-Book.woff") format("woff");
        font-weight: 400;
        font-style: normal;
        font-display: swap;
      }

      /* Snowflake Sans - Regular (Italic) */
      @font-face {
        font-family: "Snowflake Sans";
        src: url("../fonts/SnowflakeSans-Italic.woff2") format("woff2"),
          url("../fonts/SnowflakeSans-Italic.woff") format("woff");
        font-weight: 400;
        font-style: italic;
        font-display: swap;
      }

      /* Snowflake Sans - Medium */
      @font-face {
        font-family: "Snowflake Sans";
        src: url("../fonts/SnowflakeSans-Medium.woff2") format("woff2"),
          url("../fonts/SnowflakeSans-Medium.woff") format("woff");
        font-weight: 500;
        font-style: normal;
        font-display: swap;
      }

      @font-face {
        font-family: "Snowflake Sans";
        src: url("../fonts/SnowflakeSans-MediumItalic.woff2") format("woff2"),
          url("../fonts/SnowflakeSans-MediumItalic.woff") format("woff");
        font-weight: 500;
        font-style: italic;
        font-display: swap;
      }

      /* Snowflake Sans - Bold */
      @font-face {
        font-family: "Snowflake Sans";
        src: url("../fonts/SnowflakeSans-Bold.woff2") format("woff2"),
          url("../fonts/SnowflakeSans-Bold.woff") format("woff");
        font-weight: 700;
        font-style: normal;
        font-display: swap;
      }

      @font-face {
        font-family: "Snowflake Sans";
        src: url("../fonts/SnowflakeSans-BoldItalic.woff2") format("woff2"),
          url("../fonts/SnowflakeSans-BoldItalic.woff") format("woff");
        font-weight: 700;
        font-style: italic;
        font-display: swap;
      }

      /* Snowflake Sans - Black */
      @font-face {
        font-family: "Snowflake Sans";
        src: url("../fonts/SnowflakeSans-Black.woff2") format("woff2"),
          url("../fonts/SnowflakeSans-Black.woff") format("woff");
        font-weight: 900;
        font-style: normal;
        font-display: swap;
      }

      @font-face {
        font-family: "Snowflake Sans";
        src: url("../fonts/SnowflakeSans-BlackItalic.woff2") format("woff2"),
          url("../fonts/SnowflakeSans-BlackItalic.woff") format("woff");
        font-weight: 900;
        font-style: italic;
        font-display: swap;
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: "Snowflake Sans", "Georgia", serif;
        background: #1e66d1;
        overflow: hidden;
        cursor: none;
        height: 100vh;
        position: fixed;
        width: 100%;
      }

      /* Show default cursor on touch devices */
      @media (pointer: coarse) {
        body {
          cursor: default;
        }

        #cursor {
          display: none;
        }
      }

      #cursor {
        position: fixed;
        width: 60px;
        height: 60px;
        pointer-events: none;
        z-index: 1000;
        transition: opacity 0.5s ease;
        transform: translate(-50%, -50%);
        background-image: url("../assets/kurzor.png");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
      }

      #cursor.hidden {
        opacity: 0;
      }

      #cursor.petting {
        animation: petBounce 0.3s ease-in-out infinite;
      }

      @keyframes petBounce {
        0%,
        100% {
          transform: translate(-50%, -50%) scale(1);
        }
        50% {
          transform: translate(-50%, -50%) scale(1.1);
        }
      }

      .screen {
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        position: relative;
        transition: transform 1s ease-in-out;
        overflow: scroll;
        padding: 1vh 40px;
        gap: 1vh;
      }

      .screen-1 {
        transform: translateY(0);
        transition: transform 1s ease-in-out, opacity 0.5s ease-in-out;
      }

      .screen-1.scrolled {
        transform: translateY(-100vh);
        opacity: 0;
        pointer-events: none;
      }

      .screen-2 {
        position: absolute;
        top: 100vh;
        transition: transform 1s ease-in-out;
        pointer-events: none;
      }

      .screen-2.visible {
        transform: translateY(-100vh);
        pointer-events: auto;
      }

      .progress-container {
        position: relative;
        width: 80%;
        max-width: 300px;
        text-align: center;
        z-index: 10;
        flex-shrink: 0;
      }

      .progress-bar {
        width: 100%;
        height: 2.5vh;
        background: #1656a3;
        overflow: hidden;
        margin-bottom: 1vh;
      }

      .progress-fill {
        height: 100%;
        background: #e2b15a;
        width: 0%;
        transition: width 0.1s linear;
      }

      .progress-text {
        font-family: "Snowflake Sans", sans-serif;
        color: #e2b15a;
        font-size: 25px;
        font-weight: 700;
        line-height: 1.1;
      }

      .lion-container {
        position: relative;
        width: auto;
        height: 43vh;
        max-height: 500px;
        z-index: 5;
        flex-shrink: 0;
        flex-grow: 0;
        aspect-ratio: 700 / 500;
      }

      /*Styles for large screens */
      @media (min-width: 1200px) {
        .lion-container {
          height: 50vh;
          max-height: 700px;
        }
      }

      /*Styles for medium screens */
      @media (max-width: 1140px) {
        .title {
          font-size: 75px !important;
        }

        .lucky-message {
          font-size: 75px !important;
        }
      }

      @media (max-width: 885px) {
        .title {
          font-size: 50px !important;
        }

        .lucky-message {
          font-size: 50px !important;
        }
      }

      @media (max-width: 768px) {
        .lion-container {
          height: 38vh;
        }

        .title {
          font-size: 45px !important;
        }

        .title.cs-lang {
          font-size: 40px !important;
        }

        .lucky-message {
          font-size: 45px !important;
        }

        .subtitle {
          font-size: 22px !important;
        }

        .progress-text {
          font-size: 22px !important;
        }

        .description {
          font-size: 22px !important;
        }

        .lucky-message {
          padding: 30px 0 10px 0 !important;
        }
      }

      @media (max-height: 750px) {
        .title {
          font-size: 70px !important;
        }

        .lucky-message {
          font-size: 60px !important;
        }
        .screen-2 {
            overflow: scroll;
        }
        
        .screen {
            padding: 1hv 20;
        }
      }

      @media (max-width: 590px) {
        
        
        .screen {
          padding: 20px 0 0 0 !important;
        }
        
        .screen.screen-2 {
          padding: 3vh 10px 0 10px !important;
        }

        .lion-container {
          height: 32vh;
          padding: 0 15px !important;
        }

        .title {
          font-size: 51px !important;
          margin-bottom: 15px !important;
        }

        .lucky-message {
          font-size: 45px !important;
        }

        .subtitle {
          font-size: 14px !important;
        }

        .progress-text {
          font-size: 14px !important;
        }

        .description {
          font-size: 14px !important;
        }

        .progress-bar {
          height: 2vh;
        }

        .content-section {
          padding: 0 !important;
        }
      }

      @media (max-width: 480px) {
        .lion-container {
          height: 28vh;
          padding: 0 15px !important;
        }
      }

      @media (max-width: 390px) {
        .title {
          font-size: 45px !important;
          margin-bottom: 30px !important;
        }
        .subtitle {
          font-size: 14px !important;
        }

        .progress-text {
          font-size: 14px !important;
        }
      }

      /*Styles for very small height screens - emergency fallback */
      @media (max-height: 500px) {
        .lion-container {
          height: 35vh;
        }

        .title {
          font-size: 6vh;
        }

        .subtitle {
          font-size: 2.5vh;
        }

        .description {
          font-size: 1.5vh;
        }
      }

      @media (min-width: 1200px) {
        .lion-container {
          height: 43vh;
          max-height: 600px;
        }

        .title {
          font-size: 10vh;
        }

        .subtitle {
          font-size: 4vh;
        }

        .description {
          font-size: 2.2vh;
        }
      }

      .lion-body {
        width: 100%;
        height: 100%;
        position: relative;
      }

      .lion-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
      }

      .lion-hit-area {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        pointer-events: none;
      }

      .lion-smile {
        position: absolute;
        width: 15.43%;
        height: auto;
        top: 30%;
        left: 16.5%;
        transition: opacity 0.3s ease;
        z-index: 3;
      }

      .lion-smile.default {
        opacity: 1;
      }

      .lion-smile.happy {
        opacity: 0;
      }

      .petting .lion-smile.default {
        opacity: 0;
      }

      .petting .lion-smile.happy {
        opacity: 1;
      }

      /* Nose styling */
      .lion-nose {
        position: absolute;
        height: auto;
        top: 28.5%;
        left: 22.5%;
        z-index: 3;
        width: 3.4%;
      }

      .lion-eye {
        position: absolute;
        width: 3.14%;
        aspect-ratio: 1;
        border-radius: 50%;
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        transition: all 0.5s ease;
        z-index: 3;
      }

      .lion-eye.left {
        top: 24%;
        left: 19%;
      }

      .lion-eye.right {
        top: 24%;
        left: calc(21% + 5.14%);
      }

      /* Closed eyes image */
      .lion-eyes-closed {
        position: absolute;
        width: 12%;
        height: auto;
        top: 23.5%;
        left: 18.5%;
        opacity: 0;
        transition: opacity 0.5s ease;
        z-index: 4;
        pointer-events: none;
      }

      .lion-eyes-closed.visible {
        opacity: 1;
      }

      .lion-eye.hidden {
        opacity: 0;
      }

      .pupil {
        width: 35%;
        aspect-ratio: 1;
        border-radius: 50%;
        background: black;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -17.5%;
        margin-top: -17.5%;
        transition: top 0.1s ease, left 0.1s ease;
      }

      .lion-eye.closed .pupil {
        display: none;
      }

      /* Removed white highlight from pupil */
      .pupil::after {
        display: none;
      }

      .star {
        position: absolute;
        pointer-events: none;
        z-index: 4;
        object-fit: contain;
        animation: starRotate 5s ease-in-out infinite;
      }

      @keyframes starRotate {
        0%,
        100% {
          transform: translateY(-50%) rotate(0deg);
        }
        50% {
          transform: translateY(-50%) rotate(45deg);
        }
      }

      .content-section {
        position: relative;
        text-align: center;
        max-width: 90%;
        padding: 0 20px;
        z-index: 10;
        flex-shrink: 0;
        flex-grow: 0;
      }

      .title {
        font-family: "bc-figural", sans-serif;
        font-size: 95px;
        color: #e2b15a;
        font-style: italic;
        margin-bottom: 25px;
        font-weight: 400;
        line-height: 1.2;
      }

      .title.cs-lang {
        font-size: 79px;
      }

      .subtitle {
        font-family: "Snowflake Sans", sans-serif;
        font-size: 25px;
        color: #e2b15a;
        font-weight: 700;
        margin-bottom: 1vh;
        line-height: 1.1;
      }

      .description {
        font-family: "Snowflake Sans", sans-serif;
        font-size: 25px;
        color: #e2b15a;
        line-height: 1.4;
        font-weight: 400;
      }

      @media (min-width: 768px) {
        .content-section {
          max-width: 1200px;
          padding: 0 20px;
        }

        .title {
          margin-bottom: 30px;
        }

        .subtitle {
          margin-bottom: 15px;
        }
      }

      .screen-2 {
        justify-content: flex-start;
        padding-top: 20px;
      }

      

      .lucky-message {
        font-family: "bc-figural", sans-serif;
        font-size: 95px;
        color: #e2b15a;
        font-style: italic;
        line-height: 1.2;
        text-align: center;
        font-weight: 400;
        animation: fadeInUp 1s ease-out 0.5s both;
        padding-top: 45px;
      }

      @media (min-width: 768px) {
        .screen-2 {
          padding-top: 45px;
        }

      
      }

      @keyframes fadeInUp {
        from {
          opacity: 0;
          transform: translateY(50px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .filler {
        height: 5%;
      }