/* =========================
   GLOBAL
========================= */

* {
    box-sizing: border-box;
}


body {
    margin: 0;

    font-family:
        Arial,
        sans-serif;

    background: #f7f3ed;

    color: #333;
}


.app {
    max-width: 1600px;

    margin: auto;

    padding: 30px;
}

/* =====================
    AFFILIATE PAGE
========================*/
.affiliate-page {
   max-width: 1600px;
   margin: auto;
   padding: 30px;
}
.affiliate-page {
    background: #fde2e4;
}

.affiliate-page header {
    background: #ffffff;
}

.affiliate-page h1 {
    font-family: "Dancing Script", cursive;
    font-size: 3.5rem;
    text-align: center;
}

.affiliate-page h3 {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: small;
    text-align: center;
}

.affiliate-page button {
    background: #7b5e57;
}


/* =========================
   HEADER
========================= */

header {
    text-align: center;

    margin-bottom: 20px;
}


header h1 {
    margin-bottom: 5px;
    font-family: "Petit Formal Script", cursive;
    font-size: 3.5rem;
}


header p {
    color: #666;
}


/* =========================
   CUSTOM LISTS
========================= */

.custom-lists-section {
    max-width: 1000px;

    margin:
        0 auto
        30px;

    padding: 18px 25px;

    background:
        rgba(
            255,
            255,
            255,
            0.5
        );

    border-radius: 20px;
}


.custom-lists-section h2 {
    margin:
        0
        0
        5px;

    text-align: center;
}


.custom-list-description {
    margin-top: 0;

    margin-bottom: 15px;

    text-align: center;

    color: #666;

    font-size: 0.9rem;
}


/* CREATE LIST */

.create-list-row {
    display: flex;

    gap: 10px;

    align-items: center;
}


.create-list-row input {
    flex: 1;
}


.create-list-row select {
    padding: 10px;

    border:
        1px solid #ccc;

    border-radius: 8px;

    background: white;

    font-size: 0.9rem;
}


/* SAVED LISTS */

#savedLists {
    list-style: none;

    padding: 0;

    margin:
        20px 0
        0;

    max-height: 220px;

    overflow-y: auto;
}


#savedLists li {
    display: flex;

    justify-content:
        space-between;

    align-items: center;

    gap: 15px;

    padding: 10px;

    margin-bottom: 6px;

    background: white;

    border-radius: 10px;
}


.saved-list-name {
    flex: 1;

    font-size: 0.95rem;
}


.saved-list-buttons {
    display: flex;

    gap: 6px;
}


/* =========================
   EDIT CUSTOM LIST
========================= */

.edit-list-panel {
    display: none;

    margin-top: 20px;

    padding: 20px;

    background: white;

    border-radius: 15px;

    box-shadow:
        0 5px 15px
        rgba(
            0,
            0,
            0,
            0.1
        );
}


.edit-list-panel.active {
    display: block;
}


.edit-list-panel h3 {
    margin-top: 0;
}


.edit-list-panel input {
    width: 100%;

    padding: 10px;

    border:
        1px solid #ccc;

    border-radius: 8px;

    font-size: 1rem;
}


.edit-word-row {
    display: flex;

    gap: 10px;

    margin-top: 10px;
}


.edit-word-row input {
    flex: 1;
}


.edit-word-row button {
    white-space: nowrap;
}


#editWordsList {
    list-style: none;

    padding: 0;

    margin: 15px 0;

    max-height: 250px;

    overflow-y: auto;
}


#editWordsList li {
    display: flex;

    justify-content:
        space-between;

    align-items: center;

    padding: 10px;

    margin-bottom: 5px;

    background: #f7f3ed;

    border-radius: 8px;
}


.edit-list-buttons {
    display: flex;

    gap: 10px;
}


.edit-list-buttons button {
    flex: 1;
}


/* =========================
   FOUR WHEEL GRID
========================= */

.wheel-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 30px;

    align-items: start;
}


.wheel-card {
    padding: 25px;

    border-radius: 20px;

    background:
        rgba(
            255,
            255,
            255,
            0.4
        );
}


/* DIFFERENT CARD COLORS */

.subject-card {
    background: #dce9d6;
}


.color-card {
    background: #ead7e7;
}


.medium-card {
    background: #f1dfc8;
}


.surface-card {
    background: #d6e4eb;
}


.wheel-card > h2 {
    margin:
        0
        0
        25px;

    text-align: center;
}


/* =========================
   WHEEL
========================= */

.wheel-section {
    position: relative;

    display: flex;

    justify-content: center;
}


.pointer {
    position: absolute;

    top: -22px;

    left: 50%;

    transform:
        translateX(-50%);

    z-index: 10;

    font-size: 2.5rem;
}


.wheel-container {
    position: relative;

    width: 400px;

    height: 400px;

    max-width: 100%;
}


.wheel-container canvas {
    display: block;

    width: 100%;

    height: 100%;

    border-radius: 50%;

    box-shadow:
        0 10px 30px
        rgba(
            0,
            0,
            0,
            0.2
        );
}


/* =========================
   CENTER BUTTON
========================= */

.center-button {
    position: absolute;

    top: 50%;

    left: 50%;

    transform:
        translate(
            -50%,
            -50%
        );

    width: 85px;

    height: 85px;

    border-radius: 50%;

    border:
        4px solid white;

    background: white;

    color: #333;

    font-size: 1rem;

    font-weight: bold;

    cursor: pointer;

    box-shadow:
        0 3px 10px
        rgba(
            0,
            0,
            0,
            0.2
        );
}


/* =========================
   WINNER BOX
========================= */

.winner-box {
    margin:
        20px 0
        15px;

    padding: 15px;

    background: white;

    border-radius: 15px;

    text-align: center;

    box-shadow:
        0 5px 15px
        rgba(
            0,
            0,
            0,
            0.1
        );
}


.winner-box h3 {
    margin: 0;
}


/* =========================
   PRESET ROW
========================= */

.preset-row {
    display: flex;

    gap: 8px;

    align-items: center;
}


.preset-row select {
    flex: 1;

    min-width: 0;

    padding: 10px;

    border:
        1px solid #ccc;

    border-radius: 8px;

    background: white;

    font-size: 0.9rem;
}


.preset-row button {
    padding:
        10px
        12px;

    white-space: nowrap;

    font-size: 0.9rem;
}


/* =========================
   BUTTONS
========================= */

button {
    padding:
        10px
        14px;

    border: none;

    border-radius: 8px;

    background: #555;

    color: white;

    cursor: pointer;

    font-size: 0.9rem;
}


button:hover {
    opacity: 0.85;
}


.clear-wheel-button,
.remove-button,
.delete-custom-list-button {
    background: #888;
}


/* =========================
   WHEEL LIST
========================= */

.wheel-list {
    list-style: none;

    padding: 0;

    margin:
        20px 0
        0;

    max-height: 180px;

    overflow-y: auto;
}


.wheel-list li {
    display: flex;

    justify-content:
        space-between;

    align-items: center;

    padding: 10px;

    margin-bottom: 5px;

    background: white;

    border-radius: 8px;
}


/* =========================
   REMOVE BUTTON
========================= */

.remove-button {
    padding:
        4px
        10px;

    margin-left: 10px;

    font-size: 0.9rem;
}


/* =========================
   MOBILE
========================= */

@media (
    max-width: 1100px
) {

    .wheel-grid {
        grid-template-columns:
            1fr;

        max-width: 650px;

        margin: auto;
    }


    .custom-lists-section {
        max-width: 650px;
    }

}


@media (
    max-width: 650px
) {

    .app {
        padding: 15px;
    }


    header h1 {
        font-size: 2rem;
    }


    .wheel-card {
        padding: 15px;
    }


    .wheel-container {
        width: 100%;

        height: auto;

        aspect-ratio: 1 / 1;
    }


    .preset-row,
    .create-list-row {
        flex-wrap: wrap;
    }


    .preset-row select,
    .create-list-row input,
    .create-list-row select {
        width: 100%;

        flex-basis: 100%;
    }


    #savedLists li {
        flex-direction: column;

        align-items: stretch;
    }


    .saved-list-buttons {
        justify-content: flex-end;
    }

}