*{

margin:0;
padding:0;
box-sizing:border-box;

font-family:Arial,Helvetica,sans-serif;

}

body{

background:#181818;
color:white;

overflow:hidden;

}

header{

height:70px;

background:#222;

display:flex;

justify-content:center;

align-items:center;

font-size:20px;

box-shadow:0 0 10px black;

}

.container{

display:flex;

height:calc(100vh - 70px);

}

/* LEFT */

.left-panel{

flex:3;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

position:relative;

min-width:0;

}

/* Wheel + pointer live together in this box,
   so the pointer always sits on the wheel rim
   no matter the screen size. */

.wheel-wrap{

    position:relative;

    width:min(88vw, 62vh, 480px);

}

#wheelCanvas{

display:block;

width:100%;

height:auto;

background:white;

border-radius:50%;

box-shadow:0 0 25px black;

}

#pointer{

position:absolute;

top:-6px;

left:50%;

transform:translateX(-50%);

width:0;
height:0;

border-left:18px solid transparent;
border-right:18px solid transparent;
border-top:30px solid white;

filter:drop-shadow(0 3px 4px rgba(0,0,0,.6));

z-index:100;

}

#spinBtn{

margin-top:30px;

padding:18px 45px;

font-size:22px;

border:none;

background:#ff5722;

color:white;

border-radius:10px;

cursor:pointer;

transition:.3s;

width:auto;

}

#spinBtn:hover{

background:#ff784e;

}

/* ===========================
   RIGHT PANEL
=========================== */

.right-panel{

    width:380px;

    background:#242424;

    padding:20px;

    overflow-y:auto;

    border-left:2px solid #333;

}

/* Header */

.panel-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

.panel-header h2{

    font-size:24px;

}

/* Add Button */

#addEntryBtn{

    width:45px;

    height:45px;

    border:none;

    border-radius:50%;

    background:#4CAF50;

    color:white;

    font-size:28px;

    cursor:pointer;

    transition:.3s;

    margin-top:0;

}

#addEntryBtn:hover{

    transform:scale(1.1);

    background:#5fcf63;

}/* ===========================
   ENTRY CARD
=========================== */

.entry-card{

    background:#323232;

    border-radius:15px;

    padding:15px;

    margin-bottom:20px;

    display:flex;

    flex-direction:column;

    gap:12px;

    transition:.3s;

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

}

.entry-card:hover{

    transform:translateY(-3px);

    box-shadow:0 0 20px rgba(0,0,0,.5);

}
.preview{

    width:100%;

    height:120px;

    object-fit:cover;

    border-radius:10px;

    border:2px solid #555;

    background:#2a2a2a;

}
.name{

    padding:12px;

    border:none;

    border-radius:8px;

    font-size:16px;

}
.color{

    width:100%;

    height:45px;

    cursor:pointer;

    border:none;

    border-radius:8px;

}
.imageInput{

    color:white;

    max-width:100%;

}
.delete{

    background:#e53935;

    color:white;

    border:none;

    border-radius:8px;

    padding:12px;

    cursor:pointer;

    transition:.3s;

}

.delete:hover{

    background:#ff5555;

}
#saveWheel{

    background:#03A9F4;

    color:white;

}

#loadWheel{

    background:#8E24AA;

    color:white;

}

#clearWheel{

    background:#E53935;

    color:white;

}
button{

    width:100%;

    margin-top:15px;

    padding:15px;

    border:none;

    border-radius:10px;

    font-size:17px;

    cursor:pointer;

    transition:.3s;

}

button:hover{

    transform:scale(1.02);

}
#doneBtn{

    padding:12px 28px;

    border:none;

    border-radius:12px;

    background:#FF0000;

    color:white;

    font-size:20px;

    cursor:pointer;

}

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

@media (max-width: 900px){

    body{

        overflow:auto;

    }

    header{

        height:56px;

        font-size:15px;

    }

    .container{

        flex-direction:column;

        height:auto;

        min-height:calc(100vh - 56px);

    }

    .left-panel{

        padding:24px 0 8px;

    }

    .wheel-wrap{

        width:min(86vw, 380px);

    }

    #spinBtn{

        margin-top:22px;

        width:88%;

        padding:15px 0;

    }

    .right-panel{

        width:100%;

        border-left:none;

        border-top:2px solid #333;

        padding:16px;

    }

}

@media (prefers-reduced-motion: reduce){

    *{

        transition:none !important;

        animation:none !important;

    }

}