:root{
    --bg0:#07080a;
    --bg1:#0d0f14;
    --paper:#f6f6f6;
    --ink:#0b0b0e;
    --muted: rgba(255,255,255,.70);
    --muted2: rgba(255,255,255,.55);
    --line: rgba(255,255,255,.12);

    --card: rgba(255,255,255,.06);
    --card2: rgba(0,0,0,.25);

    --red:#ff2d2d;
    --green:#22c55e;
    --blue:#2d7dff;
    --gray:#a0a0a0;

    --r12:12px;
    --r16:16px;
    --r20:20px;
    --r24:24px;

    --shadow: 0 20px 70px rgba(0,0,0,.55);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    color: #fff;
    background: var(--bg0);
    overflow-x:hidden;
}

.mono{
    font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    letter-spacing:.06em;
}
.srOnly{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.bg{
    position:fixed; inset:0;
    background:
            radial-gradient(1200px 800px at 20% 10%, rgba(45,125,255,.12), transparent 60%),
            radial-gradient(1000px 700px at 80% 20%, rgba(255,45,45,.10), transparent 60%),
            radial-gradient(1100px 900px at 55% 85%, rgba(34,197,94,.08), transparent 65%),
            linear-gradient(135deg, var(--bg0), var(--bg1));
    filter: saturate(110%);
    z-index:-1;
}

.wrap{
    max-width: 1100px;
    margin: 0 auto;
    padding: max(16px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
}

/* ===== Header ===== */
.top{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:14px;
    padding: 18px 6px 14px;
}
.brand{
    font-weight:900;
    font-size: clamp(22px, 3vw, 30px);
    letter-spacing:.18em;
}
.sub{
    margin-top:6px;
    color: var(--muted2);
    font-size: 13px;
}

.topRight{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
}
.pill{
    border:1px solid var(--line);
    background: rgba(0,0,0,.30);
    padding:10px 12px;
    border-radius: 999px;
    font-size: 12px;
    color: var(--muted);
}
.pill span{ color:#fff; font-weight:800; margin-left:6px; }
.pill.danger{ border-color: rgba(255,255,255,.18); }

/* ===== Card + Layout ===== */
.card{
    border:1px solid var(--line);
    background: var(--card);
    border-radius: var(--r24);
    box-shadow: var(--shadow);
    overflow:hidden;
}

.layout{
    display:grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 16px;
    padding: 16px;
}

/* ===== Evidence ===== */
.evidenceFrame{
    position:relative;
    border-radius: var(--r20);
    overflow:hidden;
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.10);
    min-height: 380px;
}
#evidenceImg{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    aspect-ratio: 9/16;
}

.stamp{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
    font-size: clamp(56px, 7vw, 110px);
    letter-spacing:.12em;
    transform: rotate(-18deg);
    text-transform: uppercase;
    opacity:.90;
    -webkit-text-stroke: 10px rgba(0,0,0,.35);
    filter: drop-shadow(0 12px 24px rgba(0,0,0,.55));
}
.stamp.guilty{ color: var(--red); }
.stamp.acquitted{ color: var(--blue); }
.stamp.mistrial{ color: var(--gray); }

/* ===== Right column ===== */
.text{
    display:flex;
    flex-direction:column;
    gap: 12px;
    min-width: 0;
}

.tagRow{
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:flex-start;
    flex-wrap: wrap;
}
.tag{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(0,0,0,.30);
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
    font-weight: 800;
    font-size: 12px;
    letter-spacing:.08em;
    text-transform: uppercase;
}
.badge{
    display:inline-flex;
    align-items:center;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.86);
    font-size: 12px;
}

.panel{
    border-radius: var(--r20);
    border:1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.22);
    padding: 14px 14px;
}
.label{
    color: var(--muted2);
    font-size: 12px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: .10em;
}
.statement{
    font-size: 16px;
    line-height: 1.45;
    color: rgba(255,255,255,.92);
    font-weight: 650;
    overflow-wrap: anywhere;
}
.defendant{
    margin-top: 10px;
    font-size: 15px;
    color: rgba(255,255,255,.88);
    overflow-wrap: anywhere;
}
.rebuttalBox{
    margin-top: 12px;
    border-radius: 14px;
    border: 1px dashed rgba(255,255,255,.20);
    background: rgba(0,0,0,.18);
    padding: 12px;
}
.rebuttalBox .label{ margin-bottom: 6px; }
.rebuttalText{
    font-size: 14px;
    line-height: 1.45;
    color: rgba(255,255,255,.90);
    overflow-wrap: anywhere;
}

/* ===== Vote + Defense ===== */
.vote, .defense{
    border-radius: var(--r20);
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    padding: 14px;
}

.hint{
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 10px;
}

textarea{
    width:100%;
    background: rgba(0,0,0,.35);
    border:1px solid rgba(255,255,255,.12);
    border-radius: var(--r16);
    padding: 12px 12px;
    color:#fff;
    font-size: 14px;
    line-height:1.35;
    outline:none;
    resize: vertical;
    min-height: 80px;
}
textarea:focus{
    border-color: rgba(255,255,255,.25);
    box-shadow: 0 0 0 4px rgba(45,125,255,.12);
}

.btnRow{
    display:flex;
    gap: 10px;
    margin-top: 10px;
}
.btn{
    flex:1;
    border:1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.35);
    color:#fff;
    padding: 14px 14px;
    border-radius: 999px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor:pointer;
    min-height: 48px;
    transition: transform .08s ease, filter .15s ease, background .15s ease, opacity .15s ease;
}
.btn:active{ transform: scale(.98); }
.btn:hover{ filter: brightness(1.06); }

.btn.guilty{
    border-color: rgba(255,45,45,.45);
    background: rgba(255,45,45,.12);
}
.btn.not{
    border-color: rgba(34,197,94,.40);
    background: rgba(34,197,94,.10);
}
.btn.neutral{
    border-color: rgba(255,255,255,.18);
    background: rgba(255,255,255,.06);
}
.btn[disabled]{
    opacity: .55;
    cursor:not-allowed;
}

.small{
    margin-top: 10px;
    color: var(--muted2);
    font-size: 12px;
    line-height: 1.35;
}

/* ===== Results ===== */
.results{
    grid-column: 1 / -1;
    border-top: 1px solid rgba(255,255,255,.10);
    margin: 8px -16px -16px;
    padding: 16px;
    background: rgba(0,0,0,.18);
}

.resultHeader{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

#verdictLabel{
    font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
    letter-spacing:.12em;
    font-size: clamp(22px, 3vw, 34px);
}
#splitLabel{
    color: var(--muted);
    font-size: 13px;
}

#artifactImg{
    width:100%;
    max-width: 560px;
    border-radius: var(--r20);
    border:1px solid rgba(255,255,255,.10);
    box-shadow: 0 16px 50px rgba(0,0,0,.45);
    display:block;
    margin: 10px 0 8px;
}

.opinions{
    margin-top: 18px;
    border-radius: var(--r20);
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    padding: 14px;
}

#opinionsList{
    display:flex;
    flex-direction:column;
    gap: 10px;
}

.opinionRow{
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.26);
    padding: 12px;
}
.opinionMeta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    margin-bottom: 8px;
    color: rgba(255,255,255,.78);
    font-size: 12px;
}
.opinionText{
    font-size: 14px;
    line-height: 1.45;
    color: rgba(255,255,255,.92);
    overflow-wrap:anywhere;
}
.kicker{
    color: rgba(255,255,255,.65);
    font-size: 12px;
}

/* ===== Footer ===== */
.foot{
    padding: 16px 6px 4px;
    color: rgba(255,255,255,.55);
    font-size: 12px;
}

/* ===== Sticky action panel on wide screens ===== */
@media (min-width: 980px){
    .sticky{
        position: sticky;
        top: 16px;
    }
}

/* ===== Tablet ===== */
@media (max-width: 980px){
    .layout{
        grid-template-columns: 1fr;
    }
    .results{
        margin: 8px 0 0;
    }
    #artifactImg{
        max-width: 100%;
    }
}

/* ===== Phone ===== */
@media (max-width: 560px){
    .wrap{
        padding-left: 12px;
        padding-right: 12px;
    }
    .top{
        align-items:flex-start;
        flex-direction:column;
    }
    .topRight{
        width:100%;
        justify-content:flex-start;
    }
    .layout{
        padding: 12px;
        gap: 12px;
    }
    .panel, .vote, .defense{
        padding: 12px;
    }
    .btnRow{
        flex-direction: column;
    }
    .btn{
        width:100%;
    }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
    *{
        scroll-behavior:auto !important;
        transition:none !important;
    }
}
/*
.voteSticky{
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 50;
    box-shadow: 0 20px 70px rgba(0,0,0,.65);
}

@media (min-width: 821px){
    .voteSticky{ display:none !important; }
}
*/