/* Basic layout --------------------------------------------------- */
body {
    background-color: #f0e9dd;
    font-family: Arial, sans-serif;
    margin: 20px;
    text-align: center;
}

h1 { margin-bottom: 10px; }

.section { margin-top: 30px; }
.hidden   { display:none; }

/* Inputs ---------------------------------------------------------- */
#labelsContainer input[type="text"]{
    width:200px;
}
#result { white-space: pre-wrap; }

/* Canvas ----------------------------------------------------------- */
#wheelCanvas{
    border:2px solid #333;
    background:#e0d5a6;
}

/* Buttons --------------------------------------------------------- */
button{margin:5px;}

#labelsContainer textarea {
    font-family: inherit;
    font-size: 1rem;   /* match the look of the old inputs */
    line-height: 1.4;
}

/* ---------- Arrow --------------------------------- */
#pointer {
    position: absolute;
    left: 50%;          /* horizontally centered on the canvas   */
    top: -5px;          /* just above the wheel                 */
    transform: translateX(-50%);   /* keep it perfectly centered */

    width: 0;
    height: 0;

    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 70px solid #000;   /* arrow colour */
    z-index: 10;                     /* above the canvas */
}




/* Optional tweak – make it a bit slimmer on very small screens */
@media (max-width: 420px) {
    #pointer { border-left:12px solid transparent; border-right:12px solid #ff0;
               border-bottom:16px solid #333; }
}


/* -------------------------------------------------- */
/* Modal overlay – darkens the rest of the page */
.modal-overlay {
    position: fixed;
    top:0; left:0; width:100%; height:100%;
    background: rgba(0,0,0,0.5);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index: 9999;
}

/* Modal box */
.modal-box {
    background:#fff;
    padding:20px 25px;
    border-radius:8px;
    max-width:90%;
    width:400px;
    box-shadow:0 4px 12px rgba(0,0,0,.3);
    position:relative;
    text-align:center;
}

/* Close button */
.modal-close {
    position:absolute;
    top:10px; right:10px;
    background:none;border:none;font-size:1.2rem;
    cursor:pointer;
}

/* Copy‑to‑clipboard confirmation message */
.copy-notice {
    display: inline-block;
    margin-left: 10px;          /* space after the button */
    color: #28a745;             /* green – feel free to change */
    font-size: 0.9rem;
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;       /* let clicks pass through */
}
.copy-notice.show {
    opacity: 1;
}