/* ===========================================================
   Oppdragshjulet
   Innsatt.no
=========================================================== */

:root{
    --spin-bg:#e9eef5;
    --spin-panel:#ffffff;
    --spin-ink:#111827;
    --spin-muted:#64748b;
    --spin-blue:#2563eb;
    --spin-green:#16a34a;
    --spin-red:#dc2626;
    --spin-gold:#f59e0b;
}

body{
    background:
        radial-gradient(circle at 18% 12%, rgba(255,255,255,.95), rgba(255,255,255,0) 28rem),
        linear-gradient(135deg, #f8fafc 0%, var(--spin-bg) 100%);
    color:var(--spin-ink);
}

.spin-page{ padding-bottom:24px; }
.spin-content{ padding:20px 0 36px; }
.spin-intro{ margin:0 auto 32px; max-width:760px; }
.spin-intro__eyebrow{ color:var(--spin-blue); display:block; font-size:.82rem; font-weight:800; letter-spacing:.12em; margin-bottom:6px; text-transform:uppercase; }
.spin-intro h1{ font-size:clamp(2.25rem, 4vw, 3.5rem); font-weight:900; letter-spacing:-.035em; margin-bottom:10px; }
.spin-intro p{ color:var(--spin-muted); font-size:1.15rem; margin:0; }

/*************************************************
Kort
*************************************************/

#spinApp .card{
    border:none;
    border-radius:18px;
    box-shadow:0 18px 45px rgba(15,23,42,.12);
}

#spinApp .card-header{
    background:linear-gradient(180deg, #ffffff, #f8fafc);
    border-bottom:1px solid #e2e8f0;
    border-radius:18px 18px 0 0 !important;
}

/*************************************************
Venstre panel
*************************************************/

#spinApp label{
    font-weight:600;
}

#spinApp textarea{
    font-size:18px;
    line-height:1.5;
    resize:none;
}

/*************************************************
Knapp
*************************************************/

#startButton{
    background:linear-gradient(135deg, #15803d, #22c55e);
    border:0;
    border-radius:14px;
    font-size:24px;
    font-weight:800;
    min-height:68px;
    box-shadow:0 10px 22px rgba(22,163,74,.2);
    transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

#startButton span{ display:inline-block; margin-right:7px; }

#startButton:hover:not(:disabled){
    box-shadow:0 12px 24px rgba(22,163,74,.22);
    transform:translateY(-2px);
}

#startButton:disabled{
    cursor:not-allowed;
    opacity:.76;
}

#resetButton{
    border-radius:12px;
    min-height:52px;
}

/*************************************************
Hjul
*************************************************/

.wheel-container{
    align-items:center;
    display:flex;
    justify-content:center;
    min-height:720px;
    padding:42px 0 12px;
    position:relative;
}

.wheel-container::before{
    background:
        radial-gradient(circle, rgba(255,255,255,.72) 0%, rgba(255,255,255,0) 68%);
    border-radius:50%;
    content:"";
    height:min(74vw, 760px);
    max-height:760px;
    max-width:760px;
    position:absolute;
    width:min(74vw, 760px);
}

.wheel-container.is-ready::before{
    animation:wheelAmbientGlow 3.8s ease-in-out infinite;
    background:radial-gradient(circle, rgba(96,165,250,.2) 0%, rgba(255,255,255,.7) 45%, rgba(255,255,255,0) 70%);
}

.wheel-container.is-winner::before{
    background:radial-gradient(circle, rgba(250,204,21,.35) 0%, rgba(255,255,255,.75) 48%, rgba(255,255,255,0) 72%);
}

@keyframes wheelAmbientGlow{
    0%, 100%{ opacity:.65; transform:scale(.97); }
    50%{ opacity:1; transform:scale(1.03); }
}

#wheelCanvas{
    aspect-ratio:1;
    background:#f8fafc;
    border-radius:50%;
    box-shadow:
        0 34px 70px rgba(15,23,42,.24),
        inset 0 2px 0 rgba(255,255,255,.9);
    height:auto;
    max-width:100%;
    position:relative;
    width:720px;
    z-index:1;
}

/*************************************************
Pil
*************************************************/

.wheel-pointer{
    align-items:center;
    display:flex;
    flex-direction:column;
    left:50%;
    position:absolute;
    top:16px;
    transform:translateX(-50%);
    z-index:3;
}

.wheel-pointer__stem{
    background:linear-gradient(90deg, #991b1b, #ef4444 52%, #7f1d1d);
    border:2px solid rgba(255,255,255,.9);
    border-radius:999px;
    box-shadow:0 8px 18px rgba(127,29,29,.35);
    display:block;
    height:36px;
    width:26px;
}

.wheel-pointer__tip{
    border-left:28px solid transparent;
    border-right:28px solid transparent;
    border-top:56px solid var(--spin-red);
    display:block;
    filter:drop-shadow(0 10px 8px rgba(15,23,42,.32));
    height:0;
    margin-top:-4px;
    position:relative;
    width:0;
}

.wheel-pointer__tip::after{
    border-left:11px solid transparent;
    border-right:11px solid transparent;
    border-top:33px solid rgba(255,255,255,.28);
    content:"";
    left:-4px;
    position:absolute;
    top:-53px;
}

/*************************************************
Status
*************************************************/

#statusText{
    font-weight:800;
    margin-top:10px;
}

#commentText{
    color:var(--spin-muted);
    min-height:35px;
}

.wheel-container.is-winner + .text-center #statusText{ color:var(--spin-green); }

/*************************************************
Modal
*************************************************/

.winner-modal{
    background:
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    overflow:hidden;
}

.winner-modal .modal-header{
    background:linear-gradient(90deg, #f59e0b, #fde68a, #f59e0b);
    border:0;
    color:#111827;
    justify-content:center;
}

.winner-modal .modal-title{
    font-weight:900;
}

.winner-badge{
    color:#64748b;
    font-size:18px;
    font-weight:700;
    letter-spacing:.04em;
    margin-bottom:10px;
    text-transform:uppercase;
}

#winnerName{
    color:var(--spin-green);
    font-size:clamp(42px, 8vw, 68px);
    font-weight:900;
    line-height:1.05;
    overflow-wrap:anywhere;
}

.winner-task-label{
    color:#475569;
    font-size:20px;
    margin-top:18px;
}

.winner-task-name{
    color:var(--spin-blue);
    font-size:clamp(26px, 5vw, 42px);
    font-weight:900;
    line-height:1.15;
    margin-top:6px;
    overflow-wrap:anywhere;
}

.winner-modal-pulse .winner-modal{
    animation:winnerPulse 900ms ease-out 1;
}

@keyframes winnerPulse{
    0%{
        box-shadow:0 0 0 rgba(245,158,11,0);
        transform:scale(.97);
    }

    45%{
        box-shadow:0 0 36px rgba(245,158,11,.48);
        transform:scale(1.015);
    }

    100%{
        box-shadow:0 0 0 rgba(245,158,11,0);
        transform:scale(1);
    }
}

/*************************************************
Konfetti
*************************************************/

.confetti{
    animation:confettiFall 2.8s cubic-bezier(.12,.65,.35,1) forwards;
    border-radius:2px;
    height:12px;
    position:fixed;
    top:-20px;
    width:12px;
    z-index:1100;
}

@keyframes confettiFall{
    from{
        transform:translateY(0) rotate(0deg);
    }

    to{
        transform:translateY(110vh) rotate(720deg);
    }
}

/*************************************************
Responsiv
*************************************************/

@media (max-width:1200px){
    .wheel-container{
        min-height:620px;
    }

    #wheelCanvas{
        width:600px;
    }
}

@media (max-width:992px){
    .wheel-container{
        min-height:560px;
    }

    #wheelCanvas{
        width:500px;
    }
}

@media (max-width:576px){
    .wheel-container{
        min-height:390px;
        padding-top:34px;
    }

    #wheelCanvas{
        width:330px;
    }

    .wheel-pointer{
        top:8px;
    }

    .wheel-pointer__stem{
        height:24px;
        width:20px;
    }

    .wheel-pointer__tip{
        border-left-width:20px;
        border-right-width:20px;
        border-top-width:42px;
    }
}

@media (prefers-reduced-motion: reduce){
    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
    }
}