@import"https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@500&display=swap";

.app-container{
    position:relative;
    width:100%;
    height:100vh;
    height:100dvh; /* Dynamic viewport height för mobil */
    overflow:hidden;
}

.main-canvas{
    width:100%!important;
    height:100%!important;
    display:block!important;
    position:absolute!important;
    top:0!important;
    left:0!important;
    z-index:1!important;
}

.button-container{
    position:absolute;
    bottom:80px;
    bottom:max(80px, env(safe-area-inset-bottom) + 60px); /* Safe area för iPhone notch */
    left:0;
    right:0;
    display:flex;
    justify-content:center;
    z-index:10;
    pointer-events:none;
    padding:0 20px;
}

.outline-button{
    background-color:transparent;
    color:#fff;
    border:2px solid white;
    border-radius:30px;
    padding:10px 30px;
    font-family:Lexend Deca,sans-serif;
    font-size:16px;
    font-weight:500;
    text-transform:lowercase;
    letter-spacing:1px;
    cursor:pointer;
    transition:all .2s ease;
    pointer-events:auto;
    -webkit-tap-highlight-color:transparent; /* Ta bort blå highlight på iOS */
    user-select:none;
    -webkit-user-select:none;
}

.outline-button:hover{
    background-color:#ffffff1a;
    transform:translateY(-2px);
}

.outline-button:active{
    transform:translateY(0);
    background-color:#ffffff33;
}

/* Mobil-specifika anpassningar */
@media (max-width: 768px) {
    .outline-button {
        padding: 10px 30px;
        font-size: 16px;
        border-width: 2px;
    }
    
    .button-container {
        bottom: max(40px, env(safe-area-inset-bottom) + 20px);
    }
    
    /* Prestanda-optimeringar för mobil */
    .main-canvas {
        will-change: auto !important;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }
    
    .app-container {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000;
        perspective: 1000;
    }
}

@media (max-width: 480px) {
    .outline-button {
        padding: 12px 35px;
        font-size: 16px;
    }
}

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

html,body,#root{
    width:100%;
    height:100%;
    height:100dvh; /* Dynamic viewport height */
    overflow:hidden;
    background:#000000;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling på iOS */
}

canvas{
    touch-action:none;
    -webkit-touch-callout:none; /* Förhindra copy/paste på iOS */
    -webkit-user-select:none;
    user-select:none;
}

/* Förbättra prestanda på mobil */
@media (max-width: 768px) {
    .main-canvas {
        will-change: transform;
    }
}