:root {
            --teema-pää: #f1c40f;
            --teema-tumma: #f39c12;
            --tausta: #121212;
            --paneeli-tausta: #242424;
            --teksti: #ecf0f1;
            
            --scale-vasen: 1;
            --scale-kuvio: 1;
            --scale-oikea: 1;
            --scale-pallo-var: 1;
            
            --pallo-koko: min(22vw, 28vh);
            --pallo-fontti: min(6.5vw, 8.5vh);
        }

        * { box-sizing: border-box; }
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: var(--tausta); color: var(--teksti); margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; overflow: hidden; }
        
        .pääpaneeli { background: var(--paneeli-tausta); padding: 2vh 2vw; border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,0.5); border: 1px solid #333; width: 95vw; height: 96vh; max-height: none; display: flex; flex-direction: column; justify-content: space-between; text-align: center; position: relative; }
        
        .vasen-yla-kulma { position: absolute; top: 2vh; left: 2vw; display: flex; flex-direction: column; gap: 8px; z-index: 10; text-align: left;}
        .vasen-tekstit-wrapper { transform: scale(var(--scale-vasen)); transform-origin: top left; display: flex; flex-direction: column; gap: 8px; }

        .tavoite-naytto { background: #1a1a1a; border: 2px solid var(--teema-tumma); color: #fff; padding: 8px 15px; border-radius: 8px; font-size: min(1.6vw, 2.5vh); font-weight: bold; text-transform: uppercase; box-shadow: 0 0 10px rgba(243, 156, 18, 0.2); }
        .tavoite-arvo { color: var(--teema-pää); font-size: 1.2em; margin-left: 10px; display: inline-block; vertical-align: middle; line-height: 1.1; }
        
        .edelliset-naytto { background: rgba(26, 26, 26, 0.9); border: 1px solid #444; color: #ccc; padding: 10px 15px; border-radius: 8px; font-size: min(1.3vw, 2.2vh); box-shadow: 0 2px 5px rgba(0,0,0,0.3); display: flex; align-items: center; gap: 10px; white-space: nowrap; width: fit-content;}
        #edelliset-lista { color: var(--teema-pää); font-size: 1.2em; font-weight: bold; letter-spacing: 1px; }

        .mini-kuvio-container { background: #1a1a1a; border: 2px solid var(--teema-tumma); border-radius: 8px; padding: 12px; display: none; width: fit-content; text-align: center; box-shadow: 0 0 15px rgba(243, 156, 18, 0.2); transform: scale(var(--scale-kuvio)); transform-origin: top left;}
        .mini-kuvio-otsikko { color: var(--teema-pää); font-size: 16px; font-weight: bold; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px;}
        .mini-ruudukko { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; width: 150px; }
        .mini-solu { aspect-ratio: 1; background: #222; border-radius: 4px; border: 1px solid #333; }
        .mini-solu.valittu { background: var(--teema-pää); border-color: #fff; box-shadow: 0 0 8px rgba(241, 196, 15, 0.8); }

        .keskiosa-container { display: flex; align-items: center; justify-content: flex-end; position: relative; width: 100%; margin-top: 1vh; padding-right: 2vw; min-height: var(--pallo-koko); }
        .arvottu-pallo-container { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; z-index: 1; margin-top: var(--pos-pallo-y, 0vh);}
        .arvottu-pallo { width: calc(var(--pallo-koko) * var(--scale-pallo-var)); height: calc(var(--pallo-koko) * var(--scale-pallo-var)); border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--teema-tumma), #d35400); color: #121212; font-size: calc(var(--pallo-fontti) * var(--scale-pallo-var)); font-weight: 900; display: flex; align-items: center; justify-content: center; box-shadow: 0 15px 40px rgba(0,0,0,0.7), inset -10px -10px 25px rgba(0,0,0,0.4); text-shadow: 2px 2px 5px rgba(255,255,255,0.2); }
        .pallo-animaatio { animation: pomppu 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
        
        @keyframes pomppu { 
            0% { opacity: 0; transform: scale(0.1) translateY(100px) rotate(-270deg); } 
            50% { opacity: 1; transform: scale(1.1) translateY(-15px) rotate(10deg); } 
            75% { transform: scale(0.95) translateY(5px) rotate(-5deg); }
            100% { opacity: 1; transform: scale(1) translateY(0) rotate(0deg); } 
        }

        .otsikko-container { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; gap: 15px; max-width: 25vw; text-align: center; z-index: 5; transform: scale(var(--scale-oikea)); transform-origin: center right;}
        #pub-logo { max-height: min(20vw, 25vh); display: none; border-radius: 12px; box-shadow: 0 6px 15px rgba(0,0,0,0.5); object-fit: contain; }
        h1 { color: var(--teema-pää); margin: 0; text-transform: uppercase; font-size: min(3.2vw, 3.8vh); letter-spacing: 2px; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); line-height: 1.2; text-align: center; word-wrap: break-word;}
        
        /* Ruudukko - LIQUID GLASS TYYLI */
        .numerotaulu { display: grid; grid-template-columns: repeat(16, 1fr); gap: 0.5vw; width: 100%; margin-top: -15px; margin-bottom: 1vh;}
        
        .numero-solu { 
            background: rgba(40, 40, 40, 0.4); 
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px); 
            padding: 1.5vh 0; text-align: center; border-radius: 8px; 
            color: rgba(255, 255, 255, 0.15); font-weight: bold; 
            font-size: min(2.6vw, 3.6vh) !important; line-height: 1 !important; 
            border: 1px solid rgba(255, 255, 255, 0.05); 
            border-top: 1px solid rgba(255, 255, 255, 0.15); 
            border-left: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.3), 0 4px 10px rgba(0,0,0,0.4);
            display: flex; align-items: center; justify-content: center; 
            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); 
        }
        
        .kirjain-solu { 
            background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
            color: var(--teema-pää); font-size: min(3.9vw, 5.2vh) !important; line-height: 1 !important; 
            text-shadow: 0 0 10px rgba(241, 196, 15, 0.3), 2px 2px 4px rgba(0,0,0,0.8); 
        }
        
        .numero-solu.aktiivinen { 
            background: rgba(241, 196, 15, 0.15); color: #fff; 
            border: 1px solid rgba(241, 196, 15, 0.5); border-top: 1px solid rgba(255, 255, 255, 0.7); border-left: 1px solid rgba(255, 255, 255, 0.4);
            box-shadow: inset 0 0 20px rgba(241, 196, 15, 0.5), 0 0 15px rgba(241, 196, 15, 0.5), 0 4px 8px rgba(0,0,0,0.6); 
            text-shadow: 0 0 8px rgba(255, 255, 255, 0.8), 0 0 15px var(--teema-pää);
            z-index: 2; position: relative; transform: translateY(-2px);
        }
        
        .numero-solu.viimeisin { 
            background: rgba(231, 76, 60, 0.25); color: #fff; 
            border: 1px solid rgba(231, 76, 60, 0.7); border-top: 1px solid #fff; border-left: 1px solid rgba(255, 255, 255, 0.8);
            z-index: 3; transform: translateY(-4px) scale(1.05); 
            animation: sykeLasinAlla 1.2s infinite alternate; 
        }
        
        @keyframes sykeLasinAlla { 
            from { box-shadow: inset 0 0 20px rgba(231, 76, 60, 0.6), 0 0 15px rgba(231, 76, 60, 0.7), 0 8px 15px rgba(0, 0, 0, 0.5); text-shadow: 0 0 8px #fff, 0 0 15px rgba(231, 76, 60, 0.8); } 
            to { box-shadow: inset 0 0 40px rgba(231, 76, 60, 0.9), 0 0 30px rgba(231, 76, 60, 1), 0 8px 15px rgba(0, 0, 0, 0.6); text-shadow: 0 0 15px #fff, 0 0 30px rgba(231, 76, 60, 1); } 
        }