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

 body {
     font-family: 'Georgia', serif;
     background: #0a0a0a;
     color: #fff;
     overflow-x: hidden;
 }

 /* Hide all states by default */
 .app-state {
     display: none;
     opacity: 0;
     visibility: hidden;
 }

 .app-state.active {
     display: block;
     opacity: 1;
     visibility: visible;
 }

 /* Small back button */
 .back-button {
     position: fixed;
     top: 25px;
     left: 25px;
     background: rgba(10, 31, 20, 0.95);
     border: 1px solid #2ecc71;
     color: #2ecc71;
     padding: 8px 20px;
     border-radius: 20px;
     cursor: pointer;
     font-family: 'Georgia', serif;
     font-size: 14px;
     font-weight: 300;
     z-index: 10000;
     transition: all 0.3s;
     backdrop-filter: blur(10px);
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
 }

 .back-button:hover {
     background: rgba(46, 204, 113, 0.3);
     transform: translateX(-3px);
     box-shadow: 0 4px 20px rgba(46, 204, 113, 0.4);
 }

 /* STATE 0: LANDING */
 #state-0 {
     background: linear-gradient(135deg, #0a3d1f 0%, #0d2818 100%);
     background-image: url('https://images.unsplash.com/photo-1418065460487-3e41a6c84dc5?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8bWlzdHklMjBmb3Jlc3R8ZW58MHx8MHx8fDA%3D&fm=jpg&q=60&w=3000');
     background-size: cover;
     background-position: center;
     position: relative;
     min-height: 100vh;
     overflow: hidden;
 }

 #state-0::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(10, 61, 31, 0.85);
     z-index: 1;
 }

 .sun-ray {
     position: absolute;
     top: -20%;
     right: -10%;
     width: 150px;
     height: 200%;
     transform-origin: top right;
     opacity: 0;
     z-index: 2;
     pointer-events: none;
     background: linear-gradient(to bottom,
             rgba(255, 255, 200, 0.3) 0%,
             rgba(255, 255, 200, 0.2) 30%,
             rgba(255, 255, 200, 0.15) 50%,
             rgba(255, 255, 200, 0.1) 70%,
             rgba(255, 255, 200, 0) 100%);
 }

 .sun-ray:nth-child(1) {
     transform: rotate(10deg);
     width: 40px;
 }

 .sun-ray:nth-child(2) {
     transform: rotate(20deg);
     width: 20px;
 }

 .sun-ray:nth-child(3) {
     transform: rotate(30deg);
     width: 30px;
 }

 .sun-ray:nth-child(4) {
     transform: rotate(40deg);
     width: 25px;
 }

 .sun-ray:nth-child(5) {
     transform: rotate(50deg);
     width: 35px;
 }

 .particle {
     position: absolute;
     width: 4px;
     height: 4px;
     background: rgba(255, 255, 255, 0.3);
     border-radius: 50%;
     z-index: 2;
     pointer-events: none;
 }

 .grandmother-hero {
     position: absolute;
     bottom: 0%;
     left: 0%;
     width: 500px;
     height: 600px;
     z-index: 3;
     opacity: 0;
     filter: drop-shadow(0 0 20px rgba(46, 204, 113, 0.3));
 }

 .landing-content {
     position: relative;
     z-index: 4;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
     padding: 60px 40px;
     text-align: center;
 }

 .landing-title {
     font-size: 5em;
     font-weight: 700;
     margin-bottom: 20px;
     color: #2ecc71;
     text-shadow: 0 5px 30px rgba(46, 204, 113, 0.3);
     opacity: 0;
 }

 .landing-subtitle {
     font-size: 1.8em;
     color: #a8d5a1;
     margin-bottom: 30px;
     font-style: italic;
     opacity: 0;
 }

 .landing-intro {
     max-width: 700px;
     font-size: 1.3em;
     line-height: 1.8;
     color: #d4e8d4;
     margin-bottom: 40px;
     opacity: 0;
 }

 .nav-button {
     background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
     color: white;
     border: none;
     padding: 18px 45px;
     font-size: 20px;
     font-weight: bold;
     border-radius: 50px;
     cursor: pointer;
     transition: all 0.3s;
     box-shadow: 0 5px 20px rgba(46, 204, 113, 0.4);
     margin: 10px;
     font-family: 'Georgia', serif;
     opacity: 0;
 }

 .nav-button:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 25px rgba(46, 204, 113, 0.6);
 }

 .mist {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 40%;
     background: linear-gradient(to top,
             rgba(13, 40, 24, 0.8) 0%,
             rgba(13, 40, 24, 0) 100%);
     z-index: 2;
     pointer-events: none;
 }

 /* Loading screen */
 .loading-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.97);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 9999;
     flex-direction: column;
 }

 .loading-content h1 {
     font-size: 3em;
     color: #2ecc71;
     margin-bottom: 30px;
     text-shadow: 0 0 40px rgba(46, 204, 113, 0.8);
 }

 .loading-spinner {
     font-size: 5em;
     animation: spin 2s linear infinite;
 }

 @keyframes spin {
     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(360deg);
     }
 }

 .loading-text {
     font-size: 1.5em;
     color: #ddd;
     margin-top: 30px;
 }

 .loading-progress {
     width: 300px;
     height: 8px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 10px;
     margin-top: 20px;
     overflow: hidden;
 }

 .loading-progress-bar {
     height: 100%;
     background: linear-gradient(90deg, #2ecc71, #27ae60);
     transition: width 0.3s;
 }

 /* STATE 0: LANDING */
 #state-0 {
     background: linear-gradient(135deg, #0a3d1f 0%, #0d2818 100%);
     background-image: url('https://images.unsplash.com/photo-1418065460487-3e41a6c84dc5?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8bWlzdHklMjBmb3Jlc3R8ZW58MHx8MHx8fDA%3D&fm=jpg&q=60&w=3000');
     background-size: cover;
     background-position: center;
     position: relative;
     min-height: 100vh;
     overflow: hidden;
 }

 #state-0::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(10, 61, 31, 0.85);
     z-index: 1;
 }

 /* Sun rays */
 .sun-ray {
     position: absolute;
     top: -20%;
     right: -10%;
     width: 150px;
     height: 200%;
     transform-origin: top right;
     opacity: 0;
     z-index: 2;
     pointer-events: none;
     background: linear-gradient(to bottom,
             rgba(255, 255, 200, 0.3) 0%,
             rgba(255, 255, 200, 0.2) 30%,
             rgba(255, 255, 200, 0.15) 50%,
             rgba(255, 255, 200, 0.1) 70%,
             rgba(255, 255, 200, 0) 100%);
 }

 .sun-ray:nth-child(1) {
     transform: rotate(10deg);
     width: 40px;
 }

 .sun-ray:nth-child(2) {
     transform: rotate(20deg);
     width: 20px;
 }

 .sun-ray:nth-child(3) {
     transform: rotate(30deg);
     width: 30px;
 }

 .sun-ray:nth-child(4) {
     transform: rotate(40deg);
     width: 25px;
 }

 .sun-ray:nth-child(5) {
     transform: rotate(50deg);
     width: 35px;
 }

 /* Floating particles */
 .particle {
     position: absolute;
     width: 4px;
     height: 4px;
     background: rgba(255, 255, 255, 0.3);
     border-radius: 50%;
     z-index: 2;
     pointer-events: none;
 }

 /* Grandmother silhouette */

 .grandmother-figure {
     width: 100%;
     height: 100%;
     fill: rgba(20, 40, 30, 0.9);
     stroke: rgba(46, 204, 113, 0.5);
     stroke-width: 2;
 }

 .landing-content {
     position: relative;
     z-index: 4;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
     padding: 60px 40px;
     text-align: center;
 }

 .landing-title {
     font-size: 5em;
     font-weight: 700;
     margin-bottom: 20px;
     color: #2ecc71;
     text-shadow: 0 5px 30px rgba(46, 204, 113, 0.3);
     opacity: 0;
 }

 .landing-subtitle {
     font-size: 1.8em;
     color: #a8d5a1;
     margin-bottom: 30px;
     font-style: italic;
     opacity: 0;
 }

 .landing-intro {
     max-width: 700px;
     font-size: 1.3em;
     line-height: 1.8;
     color: #d4e8d4;
     margin-bottom: 40px;
     opacity: 0;
 }

 .nav-button {
     background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
     color: white;
     border: none;
     padding: 18px 45px;
     font-size: 20px;
     font-weight: bold;
     border-radius: 50px;
     cursor: pointer;
     transition: all 0.3s;
     box-shadow: 0 5px 20px rgba(46, 204, 113, 0.4);
     margin: 10px;
     font-family: 'Georgia', serif;
     opacity: 1;
 }

 .nav-button:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 25px rgba(46, 204, 113, 0.6);
 }

 /* Mist overlay */
 .mist {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 40%;
     background: linear-gradient(to top,
             rgba(13, 40, 24, 0.8) 0%,
             rgba(13, 40, 24, 0) 100%);
     z-index: 2;
     pointer-events: none;
 }

 /* STATE 1: STORY */
 #state-1 {
     position: relative;
     min-height: 100vh;
     background-image: url('https://louisewelcomephotography.co.uk/wp-content/uploads/2022/09/Morning-Mist.jpg');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
 }

 #state-1::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(to bottom,
             rgba(10, 61, 31, 0.9) 0%,
             rgba(10, 61, 31, 0.85) 50%,
             rgba(10, 61, 31, 0.9) 100%);
     z-index: 1;
 }

 .scroll-container {
     position: relative;
     z-index: 2;
     min-height: 400vh;
 }

 /* Falling leaves */
 .leaf {
     position: absolute;
     width: 30px;
     height: 30px;
     opacity: 0.3;
     z-index: 3;
     pointer-events: none;
 }

 /* Mist effect */
 .mist-story {
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 200px;
     background: linear-gradient(to top, rgba(255, 255, 255, 0.1), transparent);
     z-index: 4;
     pointer-events: none;
     animation: mistMove 20s ease-in-out infinite;
 }

 @keyframes mistMove {

     0%,
     100% {
         opacity: 0.3;
         transform: translateX(0);
     }

     50% {
         opacity: 0.5;
         transform: translateX(30px);
     }
 }

 /* Walking family silhouettes */
 .family-silhouettes {
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 1000px;
     z-index: 2;
     pointer-events: none;
     overflow: hidden;
     opacity: 0;
     visibility: hidden;
 }

 /* Make silhouettes visible when state-1 is displayed */
 #state-1[style*="display: block"] .family-silhouettes,
 #state-1[style*="visibility: visible"] .family-silhouettes {
     opacity: 1 !important;
     visibility: visible !important;
 }

 .silhouette {
     position: absolute;
     bottom: 50px;
     filter: blur(1px) brightness(0.5);
     opacity: 0.2;
 }

 .silhouette-group-1 {
     left: -45%;
     height: 600px;
     width: auto;
 }

 .silhouette-group-2 {
     left: -10%;
     height: 400px;
     width: auto;
 }

 .silhouette-group-3 {
     left: -5%;
     height: 700px;
     width: auto;
 }

 /* Story sections */
 .story-section {
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     padding: 100px 60px;
     text-align: center;
     opacity: 1;
     position: relative;
     z-index: 2;
 }

 .story-section h2 {
     font-family: 'Georgia', serif;
     font-size: 3.5em;
     font-weight: 700;
     margin-bottom: 40px;
     color: #2ecc71;
     text-shadow: 0 0 40px rgba(46, 204, 113, 0.6);
 }

 .story-section p {
     font-family: 'Georgia', serif;
     font-size: 1.4em;
     line-height: 2;
     max-width: 900px;
     margin: 15px auto;
     color: #ddd;
 }

 .accent {
     color: #81c784;
     font-weight: 600;
     font-style: italic;
 }

 .emphasis {
     display: block;
     font-size: 1.2em;
     color: #ffd700;
     font-style: italic;
     margin-top: 20px;
     font-family: 'Georgia', serif;
 }

 .decorative-line {
     width: 200px;
     height: 2px;
     background: linear-gradient(90deg, transparent, #d4af37, transparent);
     margin: 30px auto;
     opacity: 0;
 }

 /* Grandma */
 .grandmother {
     width: 280px;
     height: auto;
     margin: 50px 0;
     filter: drop-shadow(0 8px 25px rgba(0, 0, 0, 0.8));
     animation: float 4s ease-in-out infinite;
 }

 @keyframes float {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-25px);
     }
 }

 /* Speech bubble */
 .speech-bubble {
     position: relative;
     background: rgba(235, 219, 128, 0.98);
     border: 5px solid #ffd700;
     border-radius: 30px;
     padding: 40px;
     max-width: 600px;
     margin: 30px auto;
     font-size: 1.3em;
     line-height: 1.8;
     color: #333;
     font-style: normal;
     text-shadow: none;
     opacity: 0;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
 }

 .speech-bubble::after {
     content: '';
     position: absolute;
     bottom: -25px;
     left: 50%;
     transform: translateX(-50%);
     width: 0;
     height: 0;
     border-left: 20px solid transparent;
     border-right: 20px solid transparent;
     border-top: 25px solid #ffd700;
 }

 /* STATE 2: EDUCATION */

 /* Force center the morphing mushroom */
 #state-2 .svg-sticky {
     display: flex !important;
     justify-content: center !important;
     align-items: center !important;
     width: 100% !important;
     min-height: 100vh !important;
     left: 0 !important;
     right: 0 !important;
     margin-left: auto !important;
     margin-right: auto !important;
 }

 #state-2 .svg-sticky svg {
     max-width: 1000px;
     max-height: 1000px;
 }

 .education-container {
     min-height: 500vh;
     position: relative;
     background-image: url('https://images.unsplash.com/photo-1562571373-8ea9b81e756f?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Zm9yZXN0JTIwZmxvb3J8ZW58MHx8MHx8fDA%3D');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
 }

 .education-container::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(to bottom,
             rgba(10, 61, 31, 0.85) 0%,
             rgba(10, 61, 31, 0.9) 50%,
             rgba(10, 61, 31, 0.85) 100%);
     z-index: 1;
 }

 .edu-section {
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     padding: 80px 40px;
     opacity: 1;
     position: relative;
     z-index: 2;
 }

 .education-container {
     position: relative !important;
     min-height: 100vh !important;
 }

 .education-container::before {
     z-index: 1 !important;
 }

 .edu-section {
     position: relative !important;
     z-index: 2 !important;
 }

 h2 {
     font-family: 'Georgia', serif;
     font-size: 3.5em;
     margin-bottom: 60px;
     font-weight: 800;
     text-align: center;
 }

 .mushroom-grid {
     display: flex;
     justify-content: center;
     align-items: flex-end;
     gap: 80px;
     max-width: 1400px;
     width: 100%;
     margin: 0 auto;
     position: relative;
     padding-bottom: 100px;
 }

 .mushroom-card {
     background: transparent;
     border: none;
     padding: 0;
     text-align: center;
     transition: all 0.5s ease;
     position: relative;
     overflow: visible;
     transform: translateY(300px);
     opacity: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 .mushroom-card.grown {
     transform: translateY(0);
     opacity: 1;
 }

 .mushroom-card:hover .mushroom-icon {
     transform: scale(1.15) translateY(-20px);
 }

 .mushroom-card.porcini .mushroom-icon {
     filter: drop-shadow(0 0 50px rgba(255, 215, 0, 0.7));
     animation: goldenGlow 3s ease-in-out infinite;
 }

 @keyframes goldenGlow {

     0%,
     100% {
         filter: drop-shadow(0 0 50px rgba(255, 215, 0, 0.7));
     }

     50% {
         filter: drop-shadow(0 0 100px rgba(255, 215, 0, 1));
     }
 }

 .mushroom-icon {
     width: 400px;
     height: 450px;
     margin: 0 auto 20px;
     background-size: contain;
     background-position: center bottom;
     background-repeat: no-repeat;
     position: relative;
     transition: all 0.5s ease;
     cursor: pointer;
 }

 .mushroom-card.porcini .mushroom-icon {
     width: 480px;
     height: 400px;
 }

 .mushroom-card.porcini .mushroom-icon::before {
     content: '';
     position: absolute;
     top: -90px;
     right: -80px;
     width: 200px;
     height: 150px;
     background-image: url('../assets/amber_left.png');
     background-size: contain;
     background-repeat: no-repeat;
     animation: amberGlow1 2s ease-in-out infinite alternate;
     z-index: 10;
 }

 .mushroom-card.porcini .mushroom-icon::after {
     content: '';
     position: absolute;
     top: -100px;
     left: -25px;
     width: 200px;
     height: 150px;
     background-image: url('../assets/amber_right.png');
     background-size: contain;
     background-repeat: no-repeat;
     animation: amberGlow2 2s ease-in-out infinite alternate;
     z-index: 10;
 }

 @keyframes amberGlow1 {
     0% {
         transform: scale(1);
         opacity: 0.9;
     }

     50% {
         transform: scale(1.05);
         opacity: 1;
     }

     100% {
         transform: scale(1);
         opacity: 0.9;
     }
 }

 @keyframes amberGlow2 {
     0% {
         transform: scale(1);
         opacity: 0.9;
     }

     50% {
         transform: scale(1.04);
         opacity: 1;
     }

     100% {
         transform: scale(1);
         opacity: 0.9;
     }
 }

 .crown-badge {
     position: absolute;
     top: -60px;
     left: 50%;
     transform: translateX(-50%);
     font-size: 80px;
     animation: crownFloat 2.5s ease-in-out infinite;
     filter: drop-shadow(0 0 15px rgba(255, 215, 0, 1));
 }

 @keyframes crownFloat {

     0%,
     100% {
         transform: translateX(-50%) translateY(0) rotate(-5deg);
     }

     50% {
         transform: translateX(-50%) translateY(-15px) rotate(5deg);
     }
 }

 .mushroom-info {
     position: absolute;
     bottom: -120px;
     left: 50%;
     transform: translateX(-50%);
     background: rgba(1, 41, 15, 0.9);
     border: 2px solid rgba(3, 88, 42, 0.2);
     border-radius: 15px;
     padding: 20px 30px;
     min-width: 320px;
     max-width: 400px;
     opacity: 0;
     pointer-events: none;
     transition: all 0.4s ease;
     z-index: 100;
 }

 .mushroom-card:hover .mushroom-info {
     opacity: 1;
     bottom: -140px;
 }

 .mushroom-card.porcini .mushroom-info {
     border-color: #ffd700;
     background: rgba(96, 107, 1, 0.9);
 }

 .mushroom-info::before {
     content: '';
     position: absolute;
     top: -10px;
     left: 50%;
     transform: translateX(-50%);
     width: 0;
     height: 0;
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
     border-bottom: 10px solid rgba(255, 255, 255, 0.2);
 }

 .mushroom-card.porcini .mushroom-info::before {
     border-bottom-color: #ffd700;
 }

 .mushroom-name {
     font-size: 3em;
     font-weight: 700;
     color: #2ecc71;
     margin-bottom: 8px;
     text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
 }

 .mushroom-card.porcini .mushroom-name {
     color: #ffd700;
     font-size: 3.8em;
     text-shadow: 0 0 30px rgba(255, 215, 0, 0.9);
 }

 .mushroom-latvian {
     font-style: italic;
     color: #aaa;
     margin-bottom: 0;
     font-size: 1.4em;
     text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
 }

 .morph-section {
     position: relative;
     min-height: 300vh;
     z-index: 10;
 }

 .svg-sticky {
     position: sticky;
     top: 10%;
     height: 80vh;
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 10;
 }

 #morphingSVG {
     width: 1100px;
     height: auto;
 }

 .mushroom-card:first-child .mushroom-icon {
     width: 300px;
     height: 320px;
 }

 .callout {
     position: absolute;
     background: linear-gradient(135deg, rgba(231, 76, 60, 0.98), rgba(192, 57, 43, 0.98));
     color: white;
     padding: 20px 28px;
     border-radius: 15px;
     font-size: 1.05em;
     opacity: 0;
     pointer-events: none;
     z-index: 10;
     max-width: 300px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5),
         0 0 0 3px rgba(255, 255, 255, 0.1) inset;
     border: 2px solid rgba(255, 255, 255, 0.2);
     backdrop-filter: blur(10px);
     transition: transform 0.3s ease;
 }

 .callout::before {
     content: '⚠️';
     position: absolute;
     top: -20px;
     left: 50%;
     transform: translateX(-50%);
     font-size: 2em;
     filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
 }

 .callout strong {
     display: block;
     font-size: 1.35em;
     margin-bottom: 10px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
     border-bottom: 2px solid rgba(255, 255, 255, 0.3);
     padding-bottom: 8px;
 }

 .callout p {
     margin: 0;
     line-height: 1.5;
     font-weight: 500;
 }

 .callout.left {
     left: 18%;
 }

 .callout.right {
     right: 18%;
 }

 .callout.left::after {
     content: '';
     position: absolute;
     right: -20px;
     top: 50%;
     transform: translateY(-50%);
     width: 0;
     height: 0;
     border-left: 20px solid rgba(192, 57, 43, 0.98);
     border-top: 15px solid transparent;
     border-bottom: 15px solid transparent;
 }

 .callout.right::after {
     content: '';
     position: absolute;
     left: -20px;
     top: 50%;
     transform: translateY(-50%);
     width: 0;
     height: 0;
     border-right: 20px solid rgba(192, 57, 43, 0.98);
     border-top: 15px solid transparent;
     border-bottom: 15px solid transparent;
 }

 #callout-cap {
     top: 18%;
 }

 #callout-spots {
     top: 28%;
 }

 #callout-gills {
     top: 41%;
 }

 #callout-ring {
     top: 53%;
 }

 #callout-volva {
     bottom: 20%;
 }

 .grandmother-edu {
     width: 750px;
     height: auto;
     filter: drop-shadow(0 8px 25px rgba(0, 0, 0, 0.8));
 }

 .nav-button-edu {
     margin-top: 40px;
     padding: 22px 65px;
     font-size: 1.4em;
     background: linear-gradient(135deg, #8d6e63 0%, #6d4c41 100%);
     border: 3px solid #d4af37;
     border-radius: 8px;
     color: #fff;
     font-weight: 600;
     cursor: pointer;
     box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
     transition: all 0.3s ease;
     font-family: 'Georgia', serif;
 }

 .nav-button-edu:hover {
     transform: translateY(-4px);
     box-shadow: 0 12px 35px rgba(212, 175, 55, 0.6);
 }

 .cls-1 {
     fill: #f4e8d0;
 }

 .cls-2 {
     fill: #6f1c1c;
 }

 .cls-3 {
     fill: #5f1611;
 }

 .cls-4 {
     fill: #832525;
 }

 .cls-5 {
     fill: #e5d3b9;
 }

 /* SSTATE4: TEST*/
 .container {
     position: relative;
     z-index: 1;
     max-width: 1400px;
     margin: 0 auto;
     padding: 60px 40px;
     height: 100vh;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 #state-3 #grandmaContainer {
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 #state-3 .mushroom-display {
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 #state-3 #optionsContainer {
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 #state-3 {
     font-family: 'Georgia', serif;
     background: linear-gradient(to bottom, #0a3d1f 0%, #051810 100%);
     background-image: url('https://images.unsplash.com/photo-1562571373-8ea9b81e756f?fm=jpg&q=60&w=3000');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
     color: #fff;
     height: 100vh;
     overflow: hidden;
     position: relative;
 }

 #state-3::before {
     content: '';
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(to bottom, rgba(10, 61, 31, 0.85) 0%, rgba(10, 61, 31, 0.9) 50%, rgba(10, 61, 31, 0.85) 100%);
     z-index: 0;
 }

 #grandmaContainer {
     position: fixed;
     left: 45%;
     top: 50%;
     transform: translate(-50%, -50%);
     z-index: 50;
     cursor: pointer;
     transition: transform 0.3s ease;
 }

 #grandmaContainer:hover {
     transform: translate(-50%, -50%) scale(1.05) translateY(-5px);
 }

 .grandma {
     filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.8));
     animation: grandmaFloat 3s ease-in-out infinite;
 }

 .grandma img {
     width: 300px;
     height: auto;
     display: block;
 }


 @keyframes grandmaFloat {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-15px);
     }
 }

 .speech-bubble-test {
     position: fixed;
     bottom: 50%;
     left: 200px;
     max-width: 500px;
     background: rgba(235, 219, 128, 0.98);
     padding: 30px;
     border-radius: 25px;
     border: 4px solid rgb(255, 215, 0);
     box-shadow: 0 15px 50px rgba(0, 0, 0, 0.7);
     opacity: 0;
     transform: scale(0.8);
     transition: all 0.4s ease;
     pointer-events: none;
     z-index: 101;
 }

 .speech-bubble-test.show {
     opacity: 1;
     transform: scale(1);
     pointer-events: all;
 }

 .speech-bubble-test::before {
     content: '';
     position: absolute;
     bottom: -30px;
     left: 50px;
     width: 0;
     height: 0;
     border-left: 30px solid transparent;
     border-right: 0px solid transparent;
     border-top: 30px solid #ffd700;
 }

 .speech-bubble-test::after {
     content: '';
     position: absolute;
     bottom: -22px;
     left: 54px;
     width: 0;
     height: 0;
     border-left: 26px solid transparent;
     border-right: 0px solid transparent;
     border-top: 26px solid rgba(235, 219, 128, 0.98);
 }

 .speech-text {
     color: #333;
     font-size: 1.15em;
     line-height: 1.7;
     margin-bottom: 15px;
 }

 .speech-close {
     background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
     border: none;
     padding: 12px 30px;
     border-radius: 25px;
     color: white;
     font-size: 1em;
     font-weight: bold;
     cursor: pointer;
     font-family: 'Georgia', serif;
     box-shadow: 0 4px 12px rgba(46, 204, 113, 0.4);
     transition: all 0.3s;
 }

 .speech-close:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 18px rgba(46, 204, 113, 0.6);
 }

 .title-section {
     text-align: center;
     margin-bottom: 20px;
 }

 .title-section h2 {
     font-size: 2.5em;
     color: #2ecc71;
     font-weight: 800;
     text-shadow: 0 0 40px rgba(46, 204, 113, 0.7);
     margin-bottom: 10px;
 }

 .title-section p {
     font-size: 1.1em;
     color: #ddd;
     line-height: 1.6;
 }

 .progress-bar {
     width: 100%;
     max-width: 600px;
     height: 8px;
     background: rgba(0, 0, 0, 0.4);
     border-radius: 20px;
     margin: 15px auto;
     overflow: hidden;
     border: 2px solid rgba(46, 204, 113, 0.5);
 }

 .progress-fill {
     height: 100%;
     background: linear-gradient(90deg, #2ecc71 0%, #27ae60 100%);
     border-radius: 20px;
     transition: width 0.5s ease;
     box-shadow: 0 0 15px rgba(46, 204, 113, 0.8);
 }

 .score-display {
     text-align: center;
     font-size: 1.3em;
     color: #ffd700;
     margin: 15px 0;
     text-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
 }

 .quiz-container {
     max-width: 900px;
     margin: 0 auto;
 }

 .mushroom-card-test {
     background: linear-gradient(135deg, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.1) 100%);
     border-radius: 25px;
     padding: 25px;
     border: 3px solid rgba(46, 204, 113, 0.6);
     box-shadow: 0 15px 50px rgba(0, 0, 0, 0.7);
     backdrop-filter: blur(2px);
     margin-bottom: 20px;
     margin-top: 60px;
 }

 .mushroom-card-test h2 {
     color: #ffd700;
     font-size: 1.6em;
     text-align: center;
     margin-bottom: 20px;
     font-weight: 800;
     text-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
 }

 .mushroom-display {
     position: relative;
     width: 100%;
     height: 320px;
     background: radial-gradient(circle at center, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.02) 100%);
     border-radius: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     border: 3px solid rgba(46, 204, 113, 0.5);
     box-shadow: inset 0 5px 20px rgba(0, 0, 0, 0.6);
 }

 .mushroom-image {
     max-width: 85%;
     max-height: 85%;
     object-fit: contain;
     border-radius: 15px;
     filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.7));
     transition: transform 0.3s ease;
 }

 .mushroom-image:hover {
     transform: scale(1.05);
 }

 .examining-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(46, 204, 113, 0.25);
     display: none;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     backdrop-filter: blur(8px);
 }

 .examining-overlay.show {
     display: flex;
 }

 .examining-text {
     font-size: 2.5em;
     font-weight: bold;
     color: #2ecc71;
     text-shadow: 0 0 30px rgba(46, 204, 113, 1);
     animation: examining 1.5s ease-in-out infinite;
 }

 @keyframes examining {

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

     50% {
         opacity: 0.7;
         transform: scale(1.05);
     }
 }

 .examining-icon {
     font-size: 4em;
     animation: spin 2s linear infinite;
 }

 @keyframes spin {
     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(360deg);
     }
 }

 .examining-icon img {
     transform-origin: center center;
 }

 .particle {
     position: absolute;
     opacity: 0;
     pointer-events: none;
     z-index: 1000;
 }

 #particleContainer {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
     z-index: 999;
 }

 .options-container {
     display: flex;
     justify-content: center;
     align-items: stretch;
     gap: 20px;
     margin-top: 20px;
     max-width: 900px;
     margin-left: auto;
     margin-right: auto;
 }

 .option-button {
     flex: 1 !important;
     padding: 18px 20px;
     background: linear-gradient(135deg, rgba(46, 204, 113, 0.25) 0%, rgba(39, 174, 96, 0.15) 100%);
     border: 3px solid rgba(46, 204, 113, 0.6);
     border-radius: 15px;
     color: #fff;
     font-size: 1.25em;
     font-family: 'Georgia', serif;
     cursor: pointer;
     transition: all 0.3s ease;
     font-weight: bold;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
     text-align: center;
     white-space: nowrap;
     transform: none !important;
     opacity: 1 !important;
 }

 .option-button:hover:not(:disabled) {
     background: linear-gradient(135deg, rgba(46, 204, 113, 0.5) 0%, rgba(39, 174, 96, 0.35) 100%);
     transform: translateY(-3px);
     box-shadow: 0 12px 35px rgba(46, 204, 113, 0.6);
     border-color: #2ecc71;
 }

 .option-button:disabled {
     opacity: 0.5;
     cursor: not-allowed;
 }

 .option-button.correct {
     background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
     border-color: #2ecc71;
     animation: correctPulse 0.6s ease;
     box-shadow: 0 0 40px rgba(46, 204, 113, 1);
 }

 .option-button.wrong {
     background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%);
     border-color: #ff4444;
     animation: wrongShake 0.6s ease;
     box-shadow: 0 0 40px rgba(255, 68, 68, 1);
 }

 @keyframes correctPulse {

     0%,
     100% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.1);
     }
 }

 @keyframes wrongShake {

     0%,
     100% {
         transform: translateX(0);
     }

     20%,
     60% {
         transform: translateX(-15px);
     }

     40%,
     80% {
         transform: translateX(15px);
     }
 }

 .loading-screen {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.97);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 1000;
     flex-direction: column;
 }

 .loading-content h2 {
     font-size: 3em;
     color: #2ecc71;
     margin-bottom: 30px;
     font-weight: 800;
     text-shadow: 0 0 40px rgba(46, 204, 113, 0.8);
 }

 .loading-spinner {
     font-size: 5em;
     animation: spin 2s linear infinite;
 }

 .loading-text {
     font-size: 1.5em;
     color: #ddd;
     margin-top: 30px;
 }

 .results-screen {
     display: none;
     text-align: center;
     max-width: 900px;
     margin: 0 auto;
 }

 .results-screen h2 {
     font-size: 2.5em;
     color: #2ecc71;
     margin-bottom: 30px;
     text-shadow: 0 0 40px rgba(46, 204, 113, 0.8);
 }

 .final-score {
     font-size: 4.5em;
     color: #ffd700;
     margin: 30px 0;
     font-weight: 800;
     text-shadow: 0 0 50px rgba(255, 215, 0, 1);
     animation: scoreGlow 2s ease-in-out infinite;
 }

 @keyframes scoreGlow {

     0%,
     100% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.05);
     }
 }

 .verdict-card {
     background: linear-gradient(135deg, rgba(10, 61, 31, 0.85) 0%, rgba(0, 0, 0, 0.6) 100%);
     padding: 35px;
     border-radius: 25px;
     border: 4px solid rgba(255, 215, 0, 0.7);
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
     margin: 30px 0;
     backdrop-filter: blur(5px);
 }

 .grandma-verdict {
     font-size: 1.3em;
     line-height: 1.8;
     color: #fff;
 }

 .verdict-icon {
     font-size: 4em;
     margin-bottom: 15px;
 }

 button.primary {
     padding: 18px 50px;
     font-size: 1.3em;
     background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
     border: none;
     border-radius: 60px;
     color: white;
     font-weight: bold;
     cursor: pointer;
     box-shadow: 0 10px 35px rgba(46, 204, 113, 0.6);
     transition: all 0.3s;
     font-family: 'Georgia', serif;
     margin-top: 30px;
 }

 button.primary:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 45px rgba(46, 204, 113, 0.8);
 }

 .hidden {
     display: none !important;
 }

 /* STATE 5 PINCH GESTURE */

 .forest-journey {
     position: relative;
     height: 400vh;
     background-image: url('https://images.unsplash.com/photo-1562571373-8ea9b81e756f?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Zm9yZXN0JTIwZmxvb3J8ZW58MHx8MHx8fDA%3D');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
 }

 .forest-journey::before {
     content: '';
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(to bottom, rgba(10, 61, 31, 0.85) 0%, rgba(10, 61, 31, 0.9) 50%, rgba(10, 61, 31, 0.85) 100%);
     pointer-events: none;
 }

 .scroll-container-journey {
     position: sticky;
     top: 0;
     height: 100vh;
     overflow: hidden;
 }

 /* Trees prallax */
 .trees-layer {
     position: absolute;
     width: 100%;
     height: 100%;
     pointer-events: none;
     overflow: hidden;
 }

 .tree-left {
     position: absolute;
     left: -3%;
     bottom: 17%;
     width: 500px;
     height: auto;
     opacity: 0.7;
 }

 .tree-right {
     position: absolute;
     right: -3%;
     bottom: 17%;
     width: 450px;
     height: auto;
     opacity: 0.7;
 }

 /* Grandma */
 #grandma {
     position: absolute;
     left: -400px;
     bottom: 15%;
     width: 400px;
     height: auto;
     opacity: 0;
     z-index: 10;
 }

 /* Speech bubble */
 .speech-bubble-journey {
     position: absolute;
     left: 420px;
     bottom: 40%;
     max-width: 500px;
     background: rgba(235, 219, 128, 0.98);
     padding: 25px 30px;
     border-radius: 25px;
     border: 4px solid rgb(255, 215, 0);
     box-shadow: 0 15px 50px rgba(0, 0, 0, 0.7);
     opacity: 0;
     z-index: 11;
 }

 .speech-bubble-journey::before {
     content: '';
     position: absolute;
     left: -30px;
     bottom: 30px;
     width: 0;
     height: 0;
     border-right: 30px solid #ffd700;
     border-top: 20px solid transparent;
     border-bottom: 20px solid transparent;
 }

 .speech-bubble-journey::after {
     content: '';
     position: absolute;
     left: -22px;
     bottom: 34px;
     width: 0;
     height: 0;
     border-right: 26px solid rgba(235, 219, 128, 0.98);
     border-top: 16px solid transparent;
     border-bottom: 16px solid transparent;
 }

 .speech-text-journey {
     color: #333;
     font-size: 1.2em;
     line-height: 1.6;
     font-weight: 500;
 }

 /* Pinch gesture demo */
 .pinch-demo {
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     text-align: center;
     opacity: 0;
     z-index: 12;
 }

 .hand-illustration {
     width: 300px;
     height: auto;
     margin-bottom: 20px;
     animation: pinchAnimation 1.5s ease-in-out infinite;
 }

 @keyframes pinchAnimation {

     0%,
     100% {
         transform: scale(1);
     }

     50% {
         transform: scale(0.95);
     }
 }

 .pinch-instruction {
     background: rgba(255, 215, 0, 0.95);
     color: #333;
     padding: 20px 35px;
     border-radius: 20px;
     font-size: 1.4em;
     font-weight: bold;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
 }

 /* Running grandma */
 .grandma-running {
     position: absolute;
     left: -400px;
     bottom: 15%;
     width: 400px;
     height: auto;
     opacity: 0;
     z-index: 10;
 }

 .run-text {
     position: absolute;
     left: -300px;
     bottom: 45%;
     background: rgba(46, 204, 113, 0.95);
     color: white;
     padding: 15px 30px;
     border-radius: 50px;
     font-size: 1.3em;
     font-weight: bold;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
     opacity: 0;
     z-index: 11;
     white-space: nowrap;
 }

 /* Continue button */
 .continue-section {
     position: absolute;
     bottom: 10%;
     left: 50%;
     transform: translateX(-50%);
     opacity: 0;
     z-index: 15;
 }

 .continue-btn {
     padding: 20px 60px;
     font-size: 1.5em;
     background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
     border: none;
     border-radius: 60px;
     color: white;
     font-weight: bold;
     cursor: pointer;
     box-shadow: 0 10px 35px rgba(46, 204, 113, 0.6);
     transition: all 0.3s;
     font-family: 'Georgia', serif;
 }

 .continue-btn:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 45px rgba(46, 204, 113, 0.8);
 }

 .light-rays {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: radial-gradient(ellipse at top, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
     opacity: 0;
     pointer-events: none;
 }

 /* STATE 5 THE HUNT */

 /* Sections */
 .game-section {
     min-height: auto;
     position: relative;
     scroll-snap-align: start;
 }

 #game-section {
     position: relative;
     width: 100vw;
     height: auto;
     overflow: hidden;
 }

 #end-section {
     display: none;
     background: linear-gradient(to bottom, #051810 0%, #0a1f14 100%);
     min-height: auto;
 }

 #game-container {
     position: relative;
     width: 100vw;
     height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     background: linear-gradient(to bottom, #0f3d2a 0%, #051810 100%);
 }

 /* Forest background */
 .forest-background {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 0;
     opacity: 0.6;
     background-image:
         radial-gradient(circle at 20% 30%, rgba(34, 139, 34, 0.1) 0%, transparent 50%),
         radial-gradient(circle at 80% 60%, rgba(46, 139, 87, 0.1) 0%, transparent 50%),
         url('../assets/background.webp');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
 }

 /* Camera area */
 .camera-wrapper {
     position: relative;
     width: 840px;
     height: 680px;
     z-index: 1;
     margin: 0 auto;
 }

 #canvas {
     display: block;
     width: 840px !important;
     height: 680px !important;
     border: 5px solid #2ecc71;
     border-radius: 25px;
     background: #000;
     object-fit: cover;
     box-shadow:
         0 0 30px rgba(46, 204, 113, 0.3),
         0 10px 60px rgba(0, 0, 0, 0.8);
 }

 /* Basket - HUGE SCALE */
 .basket {
     position: absolute;
     left: -80px;
     top: 50%;
     transform: translateY(-50%);
     font-size: 100px;
     z-index: 5;
     filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.7));
     transition: transform 0.3s ease;
 }

 .basket.happy {
     animation: basketJumpSmall 0.5s ease-out;
 }

 @keyframes basketJumpSmall {
     0% {
         transform: translateY(-50%) scale(1);
     }

     50% {
         transform: translateY(-60%) scale(1.3);
     }

     100% {
         transform: translateY(-50%) scale(1);
     }
 }

 .basket.spilling {
     animation: basketSpillHuge 2s ease-out forwards;
 }

 @keyframes basketSpillHuge {
     0% {
         transform: translateY(-50%) scale(1) rotate(0deg);
         left: -80px;
     }

     50% {
         transform: translateY(-50%) scale(8) rotate(45deg);
         left: 50%;
     }

     100% {
         transform: translateY(-50%) scale(8) rotate(120deg);
         left: 50%;
     }
 }

 /* Mushrooms */
 .mushroom {
     position: absolute;
     width: 100px;
     height: 100px;
     transition: transform 0.3s ease;
     user-select: none;
     pointer-events: none;
     z-index: 10;
     filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.5));
 }

 .mushroom img {
     width: 100%;
     height: 100%;
     object-fit: contain
 }

 .mushroom.hovering {
     animation: mushroomPulse 0.6s ease-in-out infinite;
 }

 .mushroom.active {
     transform: scale(1.8);
     z-index: 20;
     animation: mushroomGlow 0.5s ease-in-out infinite;
 }

 @keyframes mushroomPulse {

     0%,
     100% {
         transform: scale(1.1);
     }

     50% {
         transform: scale(1.25);
     }
 }

 @keyframes mushroomGlow {

     0%,
     100% {
         filter: drop-shadow(0 0 20px #ffd700);
     }

     50% {
         filter: drop-shadow(0 0 30px #ff0);
     }
 }

 /* HUD */
 .hud {
     display: none;
 }

 .hud {
     position: absolute;
     top: 25px;
     right: 25px;
     background: rgba(10, 31, 20, 0.95);
     padding: 25px 30px;
     border-radius: 20px;
     border: 4px solid #2ecc71;
     min-width: 220px;
     z-index: 100;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
 }

 .hud-row {
     display: flex;
     justify-content: space-between;
     margin: 10px 0;
     font-size: 18px;
     color: #ccc;
 }

 .hud-row span:last-child {
     color: #2ecc71;
     font-weight: bold;
 }

 .score {
     font-size: 56px;
     color: #ffd700;
     text-align: center;
     font-weight: bold;
     margin: 15px 0;
     text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
 }

 /* Timer */
 .timer {
     position: absolute;
     top: 25px;
     left: 50%;
     transform: translateX(-50%);
     background: rgba(10, 31, 20, 0.95);
     padding: 20px 50px;
     border-radius: 60px;
     border: 4px solid #2ecc71;
     font-size: 40px;
     font-weight: bold;
     color: #2ecc71;
     z-index: 100;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
 }

 .timer.warning {
     border-color: #ff4444;
     color: #ff4444;
     animation: timerPulse 0.5s ease-in-out infinite;
 }

 @keyframes timerPulse {

     0%,
     100% {
         transform: translateX(-50%) scale(1);
     }

     50% {
         transform: translateX(-50%) scale(1.1);
     }
 }

 /* Overlay */
 .overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.97);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 1000;
     overflow-y: auto;
 }

 .overlay-content {
     text-align: center;
     max-width: 1000px;
     width: 95%;
     padding: 40px;
     animation: fadeInScale 0.5s ease-out;
 }

 @keyframes fadeInScale {
     from {
         opacity: 0;
         transform: scale(0.9);
     }

     to {
         opacity: 1;
         transform: scale(1);
     }
 }

 .overlay-content h2 {
     font-size: 3.5em;
     color: #2ecc71;
     margin-bottom: 25px;
     text-shadow: 0 0 30px rgba(46, 204, 113, 0.5);
 }

 .overlay-content h3 {
     font-size: 2em;
     color: #ffd700;
     font-weight: 800;
     margin: 30px 0 20px 0;
 }

 .overlay-content p {
     font-size: 1.3em;
     line-height: 2;
     margin: 12px 0;
     color: #ddd;
 }

 .highlight {
     color: #2ecc71;
     font-weight: bold;
 }

 .warning {
     color: #ff4444;
     font-weight: bold;
 }

 button {
     margin-top: 35px;
     padding: 22px 60px;
     font-size: 1.4em;
     background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
     border: none;
     border-radius: 60px;
     color: white;
     font-weight: bold;
     cursor: pointer;
     box-shadow: 0 10px 25px rgba(46, 204, 113, 0.4);
     transition: all 0.3s;
     font-family: 'Georgia', serif;
 }

 button:hover {
     transform: translateY(-4px);
     box-shadow: 0 15px 35px rgba(46, 204, 113, 0.6);
 }

 .loading {
     font-size: 1.4em;
     color: #2ecc71;
     animation: loadingPulse 2s ease-in-out infinite;
 }

 @keyframes loadingPulse {

     0%,
     100% {
         opacity: 1;
     }

     50% {
         opacity: 0.5;
     }
 }

 .particle {
     position: absolute;
     pointer-events: none;
     z-index: 200;
     font-size: 28px;
 }

 /* Grandma scene */
 .grandma-scene {
     width: 100%;
     max-width: 1600px;
     margin: 0 auto;
     padding-left: 2rem;
     padding-right: 2rem;
     padding-bottom: 4rem;
     min-height: auto !important;
     height: auto;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     box-sizing: border-box;
     overflow-y: auto;
 }

 .grandma-scene::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     opacity: 0.3;
     z-index: 2;
     background-image: url('../assets/background.webp');
 }

 .grandma-scene::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(to bottom, rgba(10, 61, 31, 0.85) 0%, rgba(10, 61, 31, 0.9) 50%, rgba(10, 61, 31, 0.85) 100%);
     z-index: 0;
 }

 .grandma-scene>* {
     position: relative;
     z-index: 2;
 }

 .grandma-scene>* {
     position: relative;
     z-index: 1;
 }

 .grandma-scene h1 {
     font-size: 3rem;
     color: #ffd700;
     margin-bottom: 2rem;
     text-align: start;
     position: relative;
     left: 13rem;
     top: 2rem;
     font-weight: 800;
     z-index: 3;
 }

 /* Main layout */
 .grandma-container {
     display: flex;
     gap: 2rem;
     width: 100%;
     max-width: 1400px;
     align-items: flex-start;
     margin: 2rem auto 0;
     justify-content: center;
     z-index: 3;
 }

 /* Grandma left side */
 .grandma-left {
     flex: 0 0 250px;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 1rem;
 }

 .grandma-scene .grandma {
     margin: 0;
     animation: grandmaWave 3s ease-in-out infinite;
     filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.6));
 }

 .grandma-left .grandma img {
     width: 380px;
     height: auto;
     object-fit: contain;
 }

 @keyframes grandmaWave {

     0%,
     100% {
         transform: rotate(-2deg) translateY(0);
     }

     50% {
         transform: rotate(2deg) translateY(-10px);
     }
 }

 @keyframes mushroomBreathe {

     0%,
     100% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.08);
     }
 }

 /* Right content area */
 .grandma-right {
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
     max-width: 800px;
 }

 /* Score section */
 .score-section {
     padding: 2rem;
     text-align: center;
 }

 .score-big {
     font-size: 5rem;
     font-weight: bold;
     color: #ffd700;
     line-height: 1;
     margin-bottom: 0.5rem;
 }

 .stats-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1rem;
     margin-top: 1.5rem;
 }

 @keyframes scoreGlow {

     0%,
     100% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.06);
     }
 }

 .score-section>div:nth-child(2) {
     font-size: 2em;
     color: #ffd700;
     margin-top: 15px;
     letter-spacing: 4px;
     font-weight: bold;
 }


 .stat-item {
     text-align: center;
     background: none;
     padding: 0;
     border: none;
     border-radius: 0;
 }

 .stat-item>div:first-child {
     width: 120px;
     height: 120px;
     margin: 0 auto;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .stat-item img {
     max-width: 100%;
     max-height: 100%;
     width: auto !important;
     height: auto !important;
     object-fit: contain;
     border-radius: 0 !important;
     filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.5));
     transition: transform 0.3s ease;
 }

 .stat-item img:hover {
     transform: translateY(-15px) scale(1.15);
 }

 .stat-item>div:last-child {
     margin-top: 20px;
     font-size: 1.8em;
     font-weight: bold;
 }

 .stat-item.good>div:last-child {
     color: #2ecc71;
     text-shadow: 0 0 15px rgba(46, 204, 113, 0.6);
 }

 .stat-item.bad>div:last-child {
     color: #ff4444;
     text-shadow: 0 0 15px rgba(255, 68, 68, 0.6);
 }

 .stat-item.rare>div:last-child {
     color: #ffd700;
     text-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
 }

 /* Speech bubble */
 .grandma-speech {
     background: linear-gradient(135deg, rgba(46, 204, 113, 0.15) 0%, rgba(46, 204, 113, 0.05) 100%);
     padding: 2rem 2.5rem;
     border-radius: 20px;
     font-size: 1.2em;
     line-height: 1.7;
     border: 2px solid rgba(46, 204, 113, 0.3);
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
 }

 .grandma-speech::before {
     content: '"';
     position: absolute;
     top: 0px;
     left: 10px;
     font-size: 6em;
     color: rgba(46, 204, 113, 0.25);
     font-family: Georgia, serif;
     line-height: 1;
 }

 /* Quote section */
 .latvian-quote {
     margin: 20px 0;
     padding: 35px;
     background: rgba(0, 0, 0, 0.25);
     border-radius: 25px;
     font-size: 1.2em;
     line-height: 1.4;
     color: #ccc;
     border-left: 6px solid #2ecc71;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
 }

 .latvian-quote strong {
     color: #2ecc71;
     font-size: 1.35em;
     font-style: normal;
 }

 /* Buttons container */
 .button-container {
     display: flex;
     justify-content: center;
     gap: 25px;
     margin-top: 50px;
 }

 .end-button {
     background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
     color: white;
     border: none;
     padding: 18px 45px;
     font-size: 20px;
     font-weight: bold;
     border-radius: 50px;
     cursor: pointer;
     transition: all 0.3s;
     box-shadow: 0 5px 20px rgba(46, 204, 113, 0.4);
     margin: 10px;
     font-family: 'Georgia', serif;
     opacity: 1;
 }

 .end-button.primary:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 40px rgba(46, 204, 113, 0.6);
 }


 .particle {
     position: absolute;
     pointer-events: none;
     z-index: 1000;
 }

 .particle img {
     display: block;
     width: 100%;
     height: 100%;
 }