/* css/wheel.css - Végleges, ESZTÉTIKAILAG JAVÍTOTT verzió */

/* A fő tároló konténer az oldalon */
.wheel-page-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    gap: 20px;
}


.banner-wrapper {
    width: 100%;             /* Foglalja el a teljes rendelkezésre álló szélességet */
    margin-bottom: 20px;     /* Térköz a banner és a H1 között */
    text-align: center;      /* A benne lévő bannert (ami inline elem) középre igazítja */
}


/* A kerék, a mutató és a gomb közös konténere */
.wheel-container {
    position: relative;
    width: 90vw;
    max-width: 450px;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Maga a szerencsekerék vászon */
canvas#fortune-wheel {
    width: 100%;
    height: 100%;
    transition: transform 6s cubic-bezier(0.2, 0.8, 0.2, 1); /* Az animáció most már itt van definiálva */
}

/* A nyereményt jelző mutató */
.pointer {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 40px solid var(--accent-orange);
    z-index: 20;
}

/* A "SPIN" gomb - VISSZATÉVE KÖZÉPRE */
#spin-btn {
    position: absolute; /* A .wheel-container közepéhez igazodik */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Tökéletes középre igazítás */
    
    width: 25%;  /* <-- KICSIT NAGYOBB */
    height: 25%; /* <-- KICSIT NAGYOBB */
    border-radius: 50%;
    border: 5px solid var(--accent-orange);
    background-color: var(--dark-blue);
    color: var(--text-light);
    font-weight: bold;
    font-size: 1.5em; /* <-- NAGYOBB BETŰMÉRET */
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
    z-index: 10;
    
    /* Flexbox a szöveg középre igazításához a gombon belül */
    display: flex;
    justify-content: center;
    align-items: center;
    
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
}

#spin-btn:hover:not(:disabled) {
    transform: translate(-50%, -50%) scale(1.1);
    background-color: var(--accent-orange);
}

#spin-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    background-color: var(--medium-blue);
}

/* Az eredményt és a pörgetések számát kijelző dobozok */
#result-display {
    padding: 10px 20px;
    background-color: var(--medium-blue);
    color: var(--text-light);
    font-size: 1.2em;
    border-radius: 8px;
    text-align: center;
    font-weight: bold;
    min-width: 250px;
}

/* Az extra pörgetésekért felelős szekció */
.extra-spins-container {
    text-align: center;
    width: 100%;
    max-width: 450px;
    margin-top: 10px;
    margin-bottom: 20px;
    padding: 40px;
    background-color: rgba(33, 47, 61, 0.5);
    border-radius: 8px;
} 


/* --- Kétoszlopos Hirdetési Sáv --- */

/* Új "szigetelő" réteg a főoldali hirdetéseknek */
.ad-section-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
}
/* A fő "csomagoló" konténer */
.ad-row-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 255px;
    width: 100%;
    margin: 40px 0;
}

/* Egy hirdetési doboz stílusa */
.ad-box-item {
    flex-shrink: 0;
    padding: 0;
    border-radius: 10px;
    text-align: center;
    width: 300px; /* Fix szélesség a 300x250-es bannerhez */
    box-sizing: border-box;
}

.ad-box-itemsecond {
    flex-shrink: 0;
    padding: 0;
    border-radius: 10px;
    text-align: center;
    width: 300px; /* Fix szélesség a 300x250-es bannerhez */
    box-sizing: border-box;
}


/* Az Adsterra Natív bannernek külön wrapper, hogy ne folyjon túl */
.adsterra-native-wrapper {
    max-width: 300px;
    overflow: hidden; /* Megakadályozza, hogy a natív banner "kilógjon" */
    margin-bottom: 8px;
}