.scwz{
    --red:#a82d2d;
    --green:#274f3d;
    --gold:#d4ad67;
    --cream:#fffaf0;
    --paper:#f6eedf;
    --ink:#40372f;

    color:var(--ink);

    background:var(--cream);
}

.scwz *{
    box-sizing:border-box;
}

.scwz button,
.scwz a{
    font:inherit;
}


/* HERO */

.scwz-hero{
    padding:56px 24px 44px;

    text-align:center;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(212,173,103,.15),
            transparent 40%
        ),
        linear-gradient(
            180deg,
            #fffaf0,
            #f8edd8
        );

    border-bottom:
        1px solid rgba(212,173,103,.35);
}

.scwz-kicker,
.scwz-mini{
    color:var(--red);

    font-size:12px;
    font-weight:800;

    letter-spacing:.12em;

    text-transform:uppercase;
}

.scwz-hero h1{
    margin:10px 0 12px;

    color:var(--green);

    font-size:clamp(34px,5vw,58px);
    line-height:1.05;
}

.scwz-hero p{
    max-width:780px;

    margin:0 auto;

    font-size:18px;
    line-height:1.65;
}

.scwz-badges{
    display:flex;

    justify-content:center;
    flex-wrap:wrap;

    gap:10px;

    margin-top:24px;
}

.scwz-badges span{
    padding:8px 13px;

    background:#fff;

    border:
        1px solid rgba(212,173,103,.45);

    border-radius:999px;

    font-size:13px;
}


/* BODY */

.scwz-body{
    width:min(1240px,100%);

    margin:auto;

    padding:34px 22px 72px;
}


/* PROGRESS */

.scwz-progress-wrap{
    display:grid;

    grid-template-columns:auto 1fr;

    align-items:end;

    gap:26px;

    margin-bottom:20px;
}

.scwz-progress-wrap strong{
    color:var(--green);

    font-size:18px;
}

.scwz-progress{
    height:10px;

    overflow:hidden;

    background:#e9e3d7;

    border-radius:999px;
}

.scwz-progress span{
    display:block;

    width:0;
    height:100%;

    border-radius:inherit;

    background:
        linear-gradient(
            90deg,
            #cda45c,
            #e5c679
        );

    transition:
        width .35s ease;
}


/* LAYOUT */

.scwz-layout{
    display:grid;

    grid-template-columns:
        minmax(0,1.55fr)
        minmax(280px,.45fr);

    gap:24px;

    align-items:start;
}

.scwz-stage-card,
.scwz-list-card{
    overflow:hidden;

    border:
        1px solid rgba(212,173,103,.55);

    border-radius:22px;

    background:#fffdf7;

    box-shadow:
        0 18px 50px rgba(67,46,28,.14);
}


/* TOOLS */

.scwz-tools{
    display:flex;

    align-items:center;

    gap:8px;

    padding:12px 14px;

    border-bottom:
        1px solid rgba(212,173,103,.28);

    background:#fff9ed;
}

.scwz-tools button{
    min-width:38px;
    height:38px;

    border:
        1px solid #dbc28f;

    border-radius:10px;

    background:#fff;

    cursor:pointer;
}

.scwz-tools span{
    min-width:58px;

    text-align:center;

    color:var(--green);

    font-weight:700;
}

.scwz-tools .scwz-resetview{
    margin-left:auto;

    padding:0 12px;
}


/* IMAGE */

.scwz-viewport{
    position:relative;

    overflow:hidden;

    width:100%;

    aspect-ratio:4/3;

    background:#1f2f35;

    touch-action:none;

    cursor:grab;
}

.scwz-viewport:active{
    cursor:grabbing;
}

.scwz-canvas{
    position:absolute;

    inset:0;

    transform-origin:center center;

    user-select:none;

    will-change:transform;
}

.scwz-canvas img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    user-select:none;
    pointer-events:none;
}


/* HOTSPOTS */

.scwz-hotspot{
    position:absolute;

    padding:0;

    border:2px solid transparent;

    border-radius:50%;

    background:transparent;

    cursor:pointer;

    transition:.2s ease;
}

.scwz-hotspot:hover,
.scwz-hotspot:focus{
    border-color:
        rgba(255,245,210,.90);

    background:
        rgba(255,235,170,.12);

    outline:none;
}

.scwz-hotspot.is-found{
    border-color:#e9c875;

    background:
        rgba(233,200,117,.23);

    box-shadow:
        0 0 0 6px
        rgba(233,200,117,.13);
}

.scwz-hotspot.is-found::after{
    content:"✓";

    position:absolute;

    right:-8px;
    top:-8px;

    width:26px;
    height:26px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:#2f7351;

    color:white;

    font-weight:800;
}


/* CAPTION */

.scwz-caption{
    padding:10px 14px;

    background:#fff9ed;

    color:#7d7268;

    font-size:12px;
}


/* LIST */

.scwz-list-card{
    position:sticky;

    top:24px;

    padding:26px;
}

.scwz-list-card h2{
    margin:6px 0 8px;

    color:var(--green);

    font-size:28px;
}

.scwz-list-card > p{
    margin:0 0 18px;
}

.scwz-list{
    display:grid;

    gap:8px;
}

.scwz-list button{
    display:grid;

    grid-template-columns:
        26px 1fr 24px;

    gap:8px;

    align-items:center;

    width:100%;

    padding:11px 12px;

    border:
        1px solid #e4dac6;

    border-radius:12px;

    background:white;

    text-align:left;

    cursor:pointer;
}

.scwz-list button:hover{
    border-color:#d4ad67;

    background:#fffaf0;
}

.scwz-list b{
    font-weight:650;
}

.scwz-list i{
    color:#9e9489;

    font-style:normal;
    font-weight:800;

    text-align:center;
}

.scwz-list button.is-found{
    background:#f3faf5;

    border-color:#bfd9c9;
}

.scwz-list button.is-found i{
    color:#2f7351;
}


/* HINT */

.scwz-hint{
    margin-top:18px;

    padding:14px 15px;

    border-left:
        4px solid var(--gold);

    border-radius:12px;

    background:#f7edda;
}

.scwz-hint p{
    margin:4px 0 0;
}


/* RESTART */

.scwz-restart{
    width:100%;

    margin-top:18px;

    padding:11px 14px;

    border:
        1px solid #d9c18d;

    border-radius:999px;

    background:#fff;

    cursor:pointer;
}


/* COMPLETE */

.scwz-complete{
    position:fixed;

    inset:0;

    z-index:99999;

    display:grid;

    place-items:center;

    padding:24px;

    background:
        rgba(16,31,35,.68);

    backdrop-filter:
        blur(4px);
}

.scwz-complete[hidden]{
    display:none;
}

.scwz-complete-card{
    width:min(560px,100%);

    padding:38px;

    text-align:center;

    border:
        1px solid #e2c47e;

    border-radius:24px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(227,192,112,.2),
            transparent 38%
        ),
        #fffaf0;

    box-shadow:
        0 28px 80px rgba(0,0,0,.28);
}

.scwz-star{
    color:var(--gold);

    font-size:38px;
}

.scwz-complete h2{
    margin:8px 0 12px;

    color:var(--green);

    font-size:36px;
}

.scwz-complete-actions{
    display:flex;

    justify-content:center;
    flex-wrap:wrap;

    gap:10px;

    margin-top:22px;
}

.scwz-complete-actions button,
.scwz-complete-actions a{
    padding:11px 17px;

    border-radius:999px;

    text-decoration:none;

    cursor:pointer;
}

.scwz-complete-actions button{
    border:0;

    background:var(--gold);

    color:#2e271e;

    font-weight:750;
}

.scwz-complete-actions a{
    border:
        1px solid #d9c18d;

    background:white;

    color:var(--green);
}


/* TABLET */

@media(max-width:920px){

    .scwz-layout{
        grid-template-columns:1fr;
    }

    .scwz-list-card{
        position:static;
    }

}


/* SMARTPHONE */

@media(max-width:640px){

    .scwz-hero{
        padding:
            42px 18px 34px;
    }

    .scwz-body{
        padding:
            24px 12px 52px;
    }

    .scwz-progress-wrap{
        grid-template-columns:1fr;

        gap:10px;
    }

    .scwz-viewport{
        aspect-ratio:4/3;
    }

    .scwz-tools{
        flex-wrap:wrap;
    }

    .scwz-tools .scwz-resetview{
        margin-left:0;
    }

    .scwz-list-card{
        padding:20px;
    }

}