*{
    box-sizing:border-box;
}

[hidden]{
    display:none !important;
}

:root{
    --font-dbd:"Roboto Condensed", "Arial Narrow", Arial, Helvetica, sans-serif;
    --accent-red:#9b1111;
    --accent-red-bright:#d7352d;
    --panel-dark:rgba(5,5,5,0.5);
    --line-soft:rgba(255,255,255,0.08);
    --text-muted:#938b80;
}

body{
    min-height:100vh;
    margin:0;
    overflow-x:hidden;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.84)),
        radial-gradient(ellipse at 50% -12%, rgba(160, 0, 0, 0.24), transparent 42%),
        linear-gradient(135deg, #030303 0%, #101010 42%, #050505 100%);
    color:#f4f0e8;
    font-family:var(--font-dbd);
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,0.62) 100%),
        radial-gradient(ellipse at 50% 12%, rgba(142, 18, 18, 0.2), transparent 34%),
        linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.72) 100%);
    opacity:0.9;
}

body::after{
    content:"";
    position:fixed;
    inset:-12% -18%;
    pointer-events:none;
    background:
        linear-gradient(92deg, transparent 2%, rgba(205,205,205,0.05) 17%, transparent 31%),
        linear-gradient(76deg, transparent 44%, rgba(180,180,180,0.038) 54%, transparent 68%);
    mix-blend-mode:screen;
    opacity:0.42;
    animation:backgroundFogDrift 24s ease-in-out infinite alternate;
}

.fog-bank{
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:0;
}

.fog-layer{
    position:absolute;
    left:-18vw;
    right:-18vw;
    height:38vh;
    min-height:260px;
    background:
        linear-gradient(90deg, transparent 0%, rgba(225,225,225,0.11) 16%, rgba(210,210,210,0.2) 42%, rgba(230,230,230,0.11) 66%, transparent 100%),
        repeating-linear-gradient(
            92deg,
            transparent 0,
            transparent 92px,
            rgba(255,255,255,0.08) 118px,
            transparent 154px
        );
    filter:blur(22px);
    mix-blend-mode:screen;
    opacity:0.48;
    transform:translate3d(0, 0, 0);
}

.fog-layer-back{
    bottom:28vh;
    opacity:0.36;
    animation:fogDriftLeft 54s linear infinite;
}

.fog-layer-mid{
    bottom:10vh;
    opacity:0.54;
    animation:fogDriftRight 38s linear infinite;
}

.fog-layer-front{
    bottom:-10vh;
    opacity:0.66;
    filter:blur(28px);
    animation:fogDriftLeft 30s linear infinite;
}

.app-shell{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:32px 18px;
    position:relative;
    z-index:1;
}

.app-shell::before,
.app-shell::after{
    content:"";
    position:fixed;
    pointer-events:none;
    z-index:0;
}

.app-shell::before{
    left:0;
    right:0;
    bottom:-12%;
    height:42vh;
    background:
        linear-gradient(0deg, rgba(0,0,0,0.88), transparent),
        linear-gradient(90deg, transparent, rgba(255,255,255,0.045), transparent);
    opacity:0.32;
    animation:lowFogLift 16s ease-in-out infinite alternate;
}

.app-shell::after{
    top:16vh;
    left:calc(50% - 430px);
    width:860px;
    height:190px;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(170, 22, 22, 0.3), transparent 62%),
        linear-gradient(90deg, transparent, rgba(255, 242, 220, 0.055), transparent);
    filter:blur(14px);
    opacity:0.42;
    animation:entityGlowPulse 5200ms ease-in-out infinite;
}

.hero{
    width:min(760px, 100%);
    text-align:center;
    padding:34px 22px 38px;
    border-top:1px solid rgba(180, 0, 0, 0.7);
    border-bottom:1px solid rgba(180, 0, 0, 0.7);
    position:relative;
    z-index:1;
    overflow:hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.008) 30%, transparent),
        linear-gradient(90deg, rgba(120,0,0,0.12), transparent 22%, transparent 78%, rgba(120,0,0,0.12)),
        var(--panel-dark);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.04),
        inset 0 0 62px rgba(0,0,0,0.78),
        0 28px 90px rgba(0,0,0,0.46),
        0 0 56px rgba(120,0,0,0.13),
        0 0 0 1px rgba(122, 10, 10, 0.22);
    backdrop-filter:blur(2px);
}

.hero > *{
    position:relative;
    z-index:1;
}

.hero::before,
.hero::after{
    content:"";
    position:absolute;
    left:50%;
    width:min(520px, 84%);
    height:1px;
    transform:translateX(-50%);
    background:linear-gradient(90deg, transparent, rgba(225, 42, 34, 0.8), transparent);
    z-index:2;
}

.hero::before{
    top:10px;
    box-shadow:0 18px 80px rgba(210, 25, 25, 0.16);
}

.hero::after{
    bottom:10px;
    box-shadow:0 -18px 80px rgba(210, 25, 25, 0.16);
}

.eyebrow{
    margin:0 0 8px;
    color:#b8b0a5;
    font-size:13px;
    font-weight:700;
    letter-spacing:0;
    text-transform:uppercase;
}

h1{
    margin:0;
    color:#fff8eb;
    font-size:56px;
    font-weight:900;
    line-height:1;
    text-transform:uppercase;
    text-shadow:
        0 0 5px rgba(255,255,255,0.16),
        0 0 18px rgba(205, 20, 20, 0.46),
        0 3px 0 rgba(0,0,0,0.65);
    animation:titlePulse 7000ms ease-in-out infinite;
}

h2{
    margin:10px 0 0;
    color:#bfb8ae;
    font-size:20px;
    font-weight:500;
    text-transform:uppercase;
}

.remaining{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:220px;
    min-height:42px;
    margin:28px 0 22px;
    padding:8px 18px;
    border:1px solid rgba(218, 45, 37, 0.28);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.045), transparent),
        rgba(0,0,0,0.54);
    color:#efe7dc;
    font-size:20px;
    font-weight:700;
    text-transform:uppercase;
    box-shadow:
        inset 0 0 18px rgba(0,0,0,0.45),
        0 0 24px rgba(145, 10, 10, 0.12);
}

.progress-panel{
    width:min(360px, 88vw);
    margin:0 auto 24px;
}

.progress-text{
    margin-bottom:8px;
    color:#bfb8ae;
    font-size:14px;
    font-weight:700;
    text-transform:uppercase;
}

.progress-track{
    height:10px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.14);
    background:rgba(0,0,0,0.5);
    box-shadow:inset 0 0 12px rgba(0,0,0,0.8);
}

.progress-fill{
    width:0;
    height:100%;
    background:linear-gradient(90deg, #7f1010, #d7352d);
    box-shadow:0 0 18px rgba(215, 53, 45, 0.58);
    transition:width 220ms ease;
}

.cycle-summary{
    width:min(520px, 100%);
    margin:-10px auto 24px;
}

.cycle-summary h3{
    margin:0 0 8px;
    color:#8f877d;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
}

.cycle-summary-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:8px;
}

.cycle-summary-item{
    min-height:56px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    border:1px solid rgba(255,255,255,0.08);
    background:rgba(0,0,0,0.28);
    box-shadow:inset 0 0 14px rgba(0,0,0,0.3);
}

.cycle-summary-item strong{
    color:#fff4e0;
    font-size:20px;
    font-weight:900;
    line-height:1;
}

.cycle-summary-item span{
    color:#8f877d;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
}

.portrait-frame{
    width:min(360px, 86vw);
    aspect-ratio:1 / 1;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    position:relative;
    border:1px solid rgba(230, 226, 216, 0.28);
    background:
        radial-gradient(circle at 50% 35%, transparent 42%, rgba(0,0,0,0.42) 100%),
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 8px,
            rgba(255,255,255,0.014) 9px
        ),
        linear-gradient(180deg, rgba(255,255,255,0.04), transparent),
        #171717;
    box-shadow:
        0 0 0 4px rgba(0,0,0,0.42),
        0 22px 60px rgba(0,0,0,0.65),
        0 0 42px rgba(120,0,0,0.34),
        inset 0 0 34px rgba(0,0,0,0.55);
    animation:portraitAura 4800ms ease-in-out infinite;
}

.portrait-frame::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.08),
        inset 0 -42px 58px rgba(0,0,0,0.34),
        inset 0 32px 48px rgba(255,255,255,0.035);
}

.portrait-frame::before{
    content:"";
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    aspect-ratio:1 / 1;
    background:url("images/ui/GIF startup.gif") center / cover no-repeat;
    opacity:0.9;
    filter:drop-shadow(0 0 22px rgba(210, 20, 20, 0.28));
}

.portrait-frame:has(#killerImage[style*="block"])::before{
    display:none;
}

#killerImage{
    width:100%;
    height:100%;
    object-fit:cover;
    display:none;
    z-index:1;
}

.portrait-revealed{
    animation:portraitReveal 420ms ease;
}

.portrait-spinning{
    filter:brightness(0.8) contrast(1.08);
    animation:portraitSpinPulse 220ms ease;
}

.killer-name{
    min-height:56px;
    margin-top:24px;
    position:relative;
    overflow:hidden;
    color:#fff4e0;
    font-size:42px;
    font-weight:900;
    line-height:1.15;
    text-transform:uppercase;
    text-shadow:
        0 2px 0 rgba(0,0,0,0.65),
        0 0 18px rgba(210, 20, 20, 0.42);
}

.killer-name-spinning{
    color:#d8d0c5;
    text-shadow:0 0 24px rgba(215, 53, 45, 0.72);
}

.killer-name-revealed{
    animation:nameReveal 380ms ease;
}

.killer-name-revealed::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(100deg, transparent 8%, rgba(255,255,255,0.72) 46%, transparent 72%);
    mix-blend-mode:screen;
    transform:translateX(-130%);
    animation:nameGlare 680ms ease-out 80ms;
}

.selected-killer-stats{
    width:min(420px, 100%);
    min-height:36px;
    margin:8px auto 0;
    padding:8px 14px;
    border-top:1px solid rgba(220, 42, 34, 0.28);
    border-bottom:1px solid rgba(255,255,255,0.08);
    background:rgba(0,0,0,0.3);
    color:#c9c0b5;
    font-size:14px;
    font-weight:900;
    line-height:1.35;
    text-transform:uppercase;
    box-shadow:inset 0 0 14px rgba(0,0,0,0.32);
}

.challenge-display{
    width:min(520px, 100%);
    margin:14px auto 0;
    padding:12px 14px;
    border:1px solid rgba(220, 42, 34, 0.28);
    background:
        linear-gradient(90deg, rgba(90,0,0,0.28), transparent 34%, rgba(90,0,0,0.18)),
        rgba(0,0,0,0.42);
    box-shadow:
        inset 0 0 22px rgba(0,0,0,0.4),
        0 0 18px rgba(150, 20, 18, 0.16);
    text-align:left;
    animation:challengeReveal 460ms ease-out;
}

.challenge-display span{
    display:block;
    margin-bottom:3px;
    color:#9b9084;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
}

.challenge-display strong{
    display:block;
    color:#fff4e0;
    font-size:19px;
    font-weight:900;
    text-transform:uppercase;
    text-shadow:0 0 14px rgba(220, 42, 34, 0.34);
}

.challenge-display p{
    margin:5px 0 0;
    color:#bfb8ae;
    font-size:14px;
    line-height:1.35;
}

.challenge-reroll-button{
    width:auto;
    min-width:132px;
    min-height:34px;
    margin-top:10px;
    padding:7px 12px;
    border-color:rgba(255,255,255,0.12);
    background:rgba(20,20,20,0.82);
    color:#d8d0c5;
    font-size:12px;
}

.challenge-reroll-button:hover{
    background:rgba(45,45,45,0.92);
}

.buttons{
    display:flex;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
    margin-top:24px;
}

.settings-panel{
    width:min(620px, 100%);
    margin:18px auto 0;
    border:1px solid var(--line-soft);
    background:rgba(0,0,0,0.24);
    box-shadow:inset 0 0 18px rgba(0,0,0,0.28);
}

.settings-panel summary{
    min-height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    color:#c8bfb4;
    font-size:13px;
    font-weight:900;
    text-transform:uppercase;
    list-style:none;
}

.settings-panel summary::-webkit-details-marker{
    display:none;
}

.settings-panel summary::after{
    content:"+";
    margin-left:8px;
    color:#c63830;
    font-size:18px;
    line-height:1;
}

.settings-panel[open] summary::after{
    content:"-";
}

.settings-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
    padding:0 12px 12px;
}

.mode-toggle{
    width:min(360px, 100%);
    min-height:48px;
    margin:18px auto 0;
    padding:9px 12px 9px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(0,0,0,0.34);
    color:#d8d0c5;
    cursor:pointer;
    box-shadow:inset 0 0 18px rgba(0,0,0,0.34);
}

.settings-panel .mode-toggle{
    width:100%;
    margin:0;
}

.settings-card{
    display:grid;
    gap:9px;
    padding:12px;
    border:1px solid var(--line-soft);
    background:rgba(0,0,0,0.26);
}

.settings-card-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.settings-card-title{
    color:#91897f;
    font-size:12px;
    font-weight:900;
    text-align:left;
    text-transform:uppercase;
}

.settings-card-note{
    color:#675f57;
    font-size:11px;
    font-weight:900;
    text-align:right;
    text-transform:uppercase;
}

.challenge-settings-card,
.owned-killers-card,
.safety-settings-card{
    grid-column:1 / -1;
}

.challenge-category-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:8px;
}

.challenge-category-grid label,
.owned-killer-row{
    min-height:40px;
    display:flex;
    align-items:center;
    border:1px solid rgba(255,255,255,0.1);
    background:rgba(0,0,0,0.32);
    color:#d8d0c5;
    font-size:13px;
    font-weight:900;
    text-transform:uppercase;
    cursor:pointer;
}

.challenge-category-grid label{
    justify-content:center;
    gap:7px;
}

.challenge-category-grid input{
    accent-color:#b21b18;
}

.owned-killer-list{
    max-height:300px;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(175px, 1fr));
    gap:8px;
    overflow:auto;
    padding-right:4px;
}

.owned-killer-row{
    justify-content:space-between;
    gap:9px;
    padding:5px 9px 5px 5px;
}

.owned-killer-row img{
    width:36px;
    height:36px;
    flex:0 0 auto;
    object-fit:cover;
    background:#151515;
}

.owned-killer-name{
    min-width:0;
    flex:1;
    overflow:hidden;
    text-align:left;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.owned-killer-row input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.owned-switch{
    width:44px;
    height:24px;
    flex:0 0 auto;
    display:block;
    padding:3px;
    border:1px solid rgba(255,255,255,0.2);
    border-radius:999px;
    background:#242424;
    transition:background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.owned-switch-thumb{
    display:block;
    width:16px;
    height:16px;
    border-radius:50%;
    background:#8f877d;
    box-shadow:0 2px 8px rgba(0,0,0,0.45);
    transition:transform 160ms ease, background 160ms ease;
}

.owned-killer-row input:checked + .owned-switch{
    border-color:rgba(218, 45, 37, 0.5);
    background:#8f1111;
    box-shadow:0 0 18px rgba(150,0,0,0.2);
}

.owned-killer-row input:checked + .owned-switch .owned-switch-thumb{
    transform:translateX(20px);
    background:#fff4e0;
}

.owned-killer-row:hover .owned-switch{
    border-color:rgba(255,255,255,0.38);
}

.settings-stats-settings{
    grid-template-columns:repeat(2, minmax(0, 1fr));
}

.settings-actions{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
}

.safety-actions{
    grid-template-columns:repeat(3, minmax(0, 1fr));
}

.mode-toggle-text{
    font-size:14px;
    font-weight:900;
    text-transform:uppercase;
}

.mode-toggle input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.mode-toggle-track{
    width:54px;
    height:28px;
    flex:0 0 auto;
    padding:3px;
    border:1px solid rgba(255,255,255,0.2);
    border-radius:999px;
    background:#242424;
    transition:background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.mode-toggle-thumb{
    display:block;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#bfb8ae;
    box-shadow:0 2px 8px rgba(0,0,0,0.45);
    transition:transform 160ms ease, background 160ms ease;
}

.mode-toggle input:checked + .mode-toggle-track{
    border-color:rgba(218, 45, 37, 0.5);
    background:#8f1111;
    box-shadow:0 0 18px rgba(150,0,0,0.22);
}

.mode-toggle input:checked + .mode-toggle-track .mode-toggle-thumb{
    transform:translateX(26px);
    background:#fff4e0;
}

.mode-toggle:hover .mode-toggle-track{
    border-color:rgba(255,255,255,0.38);
}

.match-tracker,
.stats-section{
    width:100%;
    margin:26px auto 0;
    padding:18px;
    border-top:1px solid rgba(220, 42, 34, 0.22);
    border-bottom:1px solid rgba(255,255,255,0.08);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.04), transparent 42%),
        linear-gradient(90deg, rgba(125, 16, 12, 0.1), transparent 26%, transparent 74%, rgba(125, 16, 12, 0.07)),
        rgba(0,0,0,0.32);
    box-shadow:inset 0 0 24px rgba(0,0,0,0.34);
}

.section-heading-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.section-heading-row h3{
    margin:0 0 5px;
    color:#d8d0c5;
    font-size:18px;
    font-weight:900;
    text-align:left;
    text-transform:uppercase;
}

.section-heading-row p{
    margin:0;
    color:var(--text-muted);
    font-size:14px;
    line-height:1.35;
    text-align:left;
}

.compact-button,
.compact-action{
    min-width:92px;
    min-height:36px;
    padding:8px 12px;
    font-size:13px;
}

.compact-button{
    background:#202020;
    border-color:rgba(255,255,255,0.11);
    color:#d8d0c5;
}

.compact-button:hover{
    background:#2b2b2b;
    border-color:rgba(255,255,255,0.2);
}

.danger-button{
    background:rgba(70, 19, 18, 0.74);
    color:#e8d0cc;
}

.danger-button:hover{
    background:rgba(102, 28, 25, 0.86);
}

.stats-controls{
    min-width:min(100%, 430px);
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:8px;
}

.stats-controls .compact-button{
    min-width:78px;
}

.stats-filter-group{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:minmax(0, 1.25fr) minmax(130px, 0.75fr);
    gap:8px;
}

.stats-action-group,
.stats-danger-group{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
}

.stats-danger-group{
    padding-left:8px;
    border-left:1px solid rgba(255,255,255,0.1);
}

.match-form{
    margin-top:16px;
    display:grid;
    gap:14px;
}

.stats-settings{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:8px;
}

.settings-stats-settings{
    grid-template-columns:repeat(2, minmax(0, 1fr));
}

.stats-settings label{
    min-height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    border:1px solid rgba(255,255,255,0.1);
    background:rgba(0,0,0,0.32);
    color:#d8d0c5;
    font-size:13px;
    font-weight:900;
    text-transform:uppercase;
}

.stats-settings input{
    accent-color:#b21b18;
}

.match-fields{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:12px;
}

.match-fields label,
.notes-field{
    display:grid;
    gap:7px;
    color:#bfb8ae;
    font-size:13px;
    font-weight:900;
    text-align:left;
    text-transform:uppercase;
}

.match-fields select,
.match-fields input,
.notes-field textarea,
#statsKillerSelect,
#statsDateFilter{
    width:100%;
    min-height:38px;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(0,0,0,0.5);
    color:#f4f0e8;
    font:inherit;
    font-size:15px;
}

.match-fields select,
.match-fields input,
#statsKillerSelect,
#statsDateFilter{
    padding:0 10px;
}

.notes-field textarea{
    padding:10px;
    resize:vertical;
}

.form-actions{
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
}

.stats-summary{
    margin-top:14px;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(104px, 1fr));
    gap:8px;
}

.stat-card{
    min-height:66px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    border:1px solid rgba(255,255,255,0.085);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.028), transparent),
        rgba(0,0,0,0.34);
}

.stat-card strong{
    color:#fff4e0;
    font-size:24px;
    font-weight:900;
    line-height:1;
    text-shadow:0 0 12px rgba(210, 20, 20, 0.28);
}

.stat-card span{
    color:#91897f;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
}

.match-history{
    margin-top:14px;
    display:grid;
    gap:9px;
}

.history-empty{
    margin:0;
    padding:16px 8px;
    color:#827a71;
    font-size:13px;
    font-weight:900;
    text-transform:uppercase;
}

.history-item{
    display:grid;
    grid-template-columns:1fr auto;
    gap:4px 10px;
    padding:10px 12px;
    border:1px solid rgba(255,255,255,0.1);
    background:rgba(0,0,0,0.34);
    text-align:left;
}

.history-item strong{
    color:#f1e9de;
    font-size:14px;
    font-weight:900;
    text-transform:uppercase;
}

.history-item span{
    color:#8f877d;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
}

.history-item p{
    grid-column:1 / -1;
    margin:0;
    color:#bfb8ae;
    font-size:13px;
    line-height:1.35;
}

.history-actions{
    grid-column:1 / -1;
    display:flex;
    gap:8px;
    justify-content:flex-end;
    margin-top:4px;
}

.history-button{
    min-width:74px;
    min-height:32px;
    padding:6px 10px;
    border:1px solid rgba(255,255,255,0.14);
    background:#242424;
    color:#f4f0e8;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
}

.history-button:hover{
    background:#343434;
}

.history-button-danger{
    background:#3a1818;
}

.history-button-danger:hover{
    background:#5a1f1f;
}

.recent-panel{
    width:240px;
    position:absolute;
    top:104px;
    left:calc(50% + 410px);
    padding:18px 14px;
    border-top:1px solid rgba(180, 0, 0, 0.58);
    border-bottom:1px solid rgba(180, 0, 0, 0.58);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.045), transparent),
        rgba(8,8,8,0.68);
    box-shadow:
        inset 0 0 28px rgba(0,0,0,0.45),
        0 18px 42px rgba(0,0,0,0.34);
}

.recent-panel h3{
    margin:0 0 14px;
    color:#d8d0c5;
    font-size:16px;
    font-weight:700;
    text-transform:uppercase;
}

.recent-list{
    display:grid;
    gap:10px;
}

.recent-empty{
    margin:0;
    padding:18px 8px;
    color:#827a71;
    font-size:13px;
    font-weight:700;
    line-height:1.35;
    text-transform:uppercase;
}

.recent-item{
    display:grid;
    grid-template-columns:54px minmax(0, 1fr);
    align-items:center;
    gap:10px;
    min-height:58px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(0,0,0,0.36);
}

.recent-item img{
    width:54px;
    height:54px;
    object-fit:cover;
    background:#151515;
}

.recent-item span{
    min-width:0;
    padding-right:8px;
    color:#f1e9de;
    font-size:13px;
    font-weight:700;
    line-height:1.2;
    text-align:left;
    text-transform:uppercase;
}

.setup-screen{
    position:fixed;
    inset:0;
    z-index:30;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    pointer-events:none;
    opacity:0;
    visibility:hidden;
    background:
        radial-gradient(circle at 50% 35%, rgba(150, 0, 0, 0.24), transparent 34%),
        rgba(0,0,0,0.86);
    transition:opacity 320ms ease, visibility 320ms ease;
}

.setup-screen-visible{
    pointer-events:auto;
    opacity:1;
    visibility:visible;
}

.setup-panel{
    width:min(560px, 100%);
    position:relative;
    padding:38px 28px 32px;
    overflow:hidden;
    text-align:center;
    border-top:1px solid rgba(220, 36, 30, 0.78);
    border-bottom:1px solid rgba(220, 36, 30, 0.78);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.07), transparent 34%),
        rgba(8,8,8,0.9);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.08),
        0 28px 90px rgba(0,0,0,0.74),
        0 0 70px rgba(150,0,0,0.3);
    animation:endPanelReveal 520ms ease;
}

.setup-panel::before,
.setup-panel::after{
    content:"";
    position:absolute;
    left:50%;
    width:min(430px, 82%);
    height:1px;
    transform:translateX(-50%);
    background:linear-gradient(90deg, transparent, rgba(255, 47, 38, 0.86), transparent);
}

.setup-panel::before{
    top:12px;
}

.setup-panel::after{
    bottom:12px;
}

.setup-panel h2{
    margin:0;
    color:#fff8eb;
    font-size:42px;
    font-weight:900;
    line-height:1.08;
    text-transform:uppercase;
    text-shadow:0 0 22px rgba(215, 35, 28, 0.58);
}

.setup-copy{
    max-width:390px;
    margin:14px auto 22px;
    color:#c5baad;
    font-size:16px;
    line-height:1.45;
}

.setup-options{
    display:grid;
    gap:10px;
    margin-bottom:22px;
}

.setup-toggle{
    width:100%;
    margin:0;
}

.end-screen{
    position:fixed;
    inset:0;
    z-index:20;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    pointer-events:none;
    opacity:0;
    visibility:hidden;
    background:
        radial-gradient(circle at 50% 38%, rgba(150, 0, 0, 0.28), transparent 34%),
        radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.08), transparent 44%),
        rgba(0,0,0,0.84);
    transition:opacity 420ms ease, visibility 420ms ease;
}

.end-screen::before,
.end-screen::after{
    content:"";
    position:absolute;
    inset:-20%;
    pointer-events:none;
}

.end-screen::before{
    background:
        linear-gradient(105deg, transparent 12%, rgba(255,255,255,0.055) 18%, transparent 27%),
        linear-gradient(74deg, transparent 42%, rgba(255,255,255,0.04) 48%, transparent 56%);
    opacity:0.58;
    animation:endFogDrift 8s linear infinite;
}

.end-screen::after{
    background:
        repeating-linear-gradient(
            118deg,
            transparent 0,
            transparent 22px,
            rgba(255,255,255,0.03) 23px,
            transparent 24px
        );
    opacity:0.38;
}

.end-screen-visible{
    pointer-events:auto;
    opacity:1;
    visibility:visible;
}

.end-screen-panel{
    width:min(560px, 100%);
    position:relative;
    z-index:1;
    padding:42px 28px 34px;
    overflow:hidden;
    text-align:center;
    border-top:1px solid rgba(220, 36, 30, 0.78);
    border-bottom:1px solid rgba(220, 36, 30, 0.78);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.07), transparent 34%),
        rgba(8,8,8,0.86);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.08),
        0 28px 90px rgba(0,0,0,0.74),
        0 0 70px rgba(150,0,0,0.34);
    animation:endPanelReveal 560ms ease;
}

.end-screen-panel::before,
.end-screen-panel::after{
    content:"";
    position:absolute;
    left:50%;
    width:min(430px, 82%);
    height:1px;
    transform:translateX(-50%);
    background:linear-gradient(90deg, transparent, rgba(255, 47, 38, 0.86), transparent);
}

.end-screen-panel::before{
    top:12px;
}

.end-screen-panel::after{
    bottom:12px;
}

.end-eyebrow{
    margin:0 0 10px;
    color:#b9afa4;
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
}

.end-screen h2{
    margin:0;
    color:#fff8eb;
    font-size:42px;
    font-weight:900;
    line-height:1.08;
    text-transform:uppercase;
    text-shadow:0 0 22px rgba(215, 35, 28, 0.58);
}

.end-final-killer{
    width:min(340px, 100%);
    margin:20px auto 0;
    padding:11px 16px 12px;
    border-top:1px solid rgba(220, 36, 30, 0.58);
    border-bottom:1px solid rgba(220, 36, 30, 0.58);
    background:
        linear-gradient(90deg, transparent, rgba(130, 10, 10, 0.24), transparent),
        rgba(0,0,0,0.3);
    box-shadow:
        inset 0 0 18px rgba(0,0,0,0.38),
        0 0 28px rgba(160, 0, 0, 0.18);
}

.end-final-killer span{
    display:block;
    margin-bottom:4px;
    color:#9f978c;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
}

.end-final-killer strong{
    display:block;
    color:#fff4e0;
    font-size:25px;
    font-weight:900;
    line-height:1.12;
    text-transform:uppercase;
    text-shadow:0 0 16px rgba(215, 35, 28, 0.46);
}

.end-copy{
    max-width:400px;
    margin:18px auto 26px;
    color:#c5baad;
    font-size:16px;
    font-weight:400;
    line-height:1.5;
}

.gallery-section{
    width:100%;
    margin:34px auto 0;
    padding-top:26px;
    border-top:1px solid rgba(220, 42, 34, 0.2);
}

.gallery-section h3{
    margin:0 0 8px;
    color:#d8d0c5;
    font-size:18px;
    font-weight:700;
    text-transform:uppercase;
}

.gallery-subtitle{
    max-width:520px;
    margin:0 auto 18px;
    color:#938b80;
    font-size:14px;
    font-weight:400;
    line-height:1.45;
}

.killer-gallery{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(118px, 1fr));
    gap:14px;
}

.killer-card{
    min-height:0;
    display:grid;
    grid-template-rows:auto minmax(42px, auto) 24px;
    overflow:hidden;
    position:relative;
    border:1px solid rgba(255,255,255,0.12);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.05), transparent),
        rgba(10,10,10,0.74);
    box-shadow:
        inset 0 0 20px rgba(0,0,0,0.28),
        0 12px 28px rgba(0,0,0,0.34);
    transition:filter 160ms ease, opacity 160ms ease, transform 160ms ease, border-color 160ms ease;
}

.killer-card:hover{
    transform:translateY(-2px);
    border-color:rgba(219, 42, 34, 0.56);
}

.killer-card-spinning{
    border-color:#fff;
    box-shadow:
        0 0 0 2px rgba(255,255,255,0.72),
        0 0 22px rgba(255,255,255,0.38),
        0 12px 28px rgba(0,0,0,0.34);
    transform:translateY(-2px);
}

.killer-card img,
.gallery-fallback{
    grid-column:1;
    grid-row:1;
    width:100%;
    aspect-ratio:1 / 1;
    height:auto;
}

.killer-card img{
    z-index:1;
    object-fit:cover;
    background:#121212;
}

.gallery-fallback{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px;
    color:#8f877d;
    font-size:15px;
    line-height:1.25;
    text-transform:uppercase;
    background:
        radial-gradient(circle at 50% 28%, rgba(128, 15, 15, 0.34), transparent 45%),
        #181818;
}

.killer-card p{
    margin:0;
    padding:9px 8px 6px;
    color:#f1e9de;
    font-size:14px;
    font-weight:700;
    line-height:1.2;
    text-transform:uppercase;
}

.killer-card span{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:24px;
    color:#c9c0b5;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    background:rgba(255,255,255,0.06);
}

.killer-card-used{
    opacity:0.46;
    filter:grayscale(1);
}

.killer-card-used span{
    color:#f2d7d4;
    background:rgba(135, 12, 12, 0.52);
}

.killer-card-disabled{
    opacity:0.36;
    filter:grayscale(1);
    border-color:rgba(130, 130, 130, 0.18);
}

.killer-card-disabled span{
    color:#d4ccc2;
    background:rgba(80, 80, 80, 0.54);
}

.killer-stat-badge{
    position:absolute;
    left:7px;
    top:7px;
    z-index:2;
    min-height:24px;
    padding:4px 7px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,0.28);
    background:rgba(0,0,0,0.72);
    color:#fff4e0;
    font-size:11px;
    font-weight:900;
    line-height:1;
    text-transform:uppercase;
    text-shadow:0 0 8px rgba(220, 42, 34, 0.55);
}

.app-footer{
    width:100%;
    max-width:760px;
    margin:28px auto 0;
    padding-top:16px;
    border-top:1px solid rgba(255,255,255,0.08);
    color:#756e66;
    font-size:12px;
    line-height:1.45;
    text-align:center;
}

.version-label{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:22px;
    margin-right:8px;
    padding:2px 7px;
    border:1px solid rgba(255,255,255,0.1);
    background:rgba(0,0,0,0.28);
    color:#9f978c;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
}

button{
    min-width:170px;
    min-height:52px;
    padding:14px 24px;
    border:1px solid rgba(255,255,255,0.16);
    color:white;
    cursor:pointer;
    font-size:18px;
    font-family:var(--font-dbd);
    font-weight:900;
    text-transform:uppercase;
    box-shadow:
        inset 0 0 18px rgba(0,0,0,0.36),
        0 10px 24px rgba(0,0,0,0.34);
    transition:transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

button:hover{
    transform:translateY(-2px);
    border-color:rgba(255,255,255,0.32);
    box-shadow:
        inset 0 0 18px rgba(0,0,0,0.34),
        0 14px 30px rgba(0,0,0,0.42),
        0 0 18px rgba(190, 24, 24, 0.18);
}

button:disabled{
    cursor:not-allowed;
    opacity:0.58;
    transform:none;
}

.primary-button{
    background:#9b1111;
    position:relative;
    overflow:hidden;
}

#randomButton::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.16) 45%, transparent 70%);
    transform:translateX(-120%);
    animation:buttonGlint 4600ms ease-in-out infinite;
}

.primary-button:hover{
    background:#bf1717;
}

.secondary-button{
    background:#242424;
}

.secondary-button:hover{
    background:#343434;
}

@keyframes nameReveal{

    from{
        opacity:0;
        transform:translateY(8px) scale(0.98);
        text-shadow:
            0 2px 0 rgba(0,0,0,0.65),
            0 0 8px rgba(210, 20, 20, 0.28);
    }

    48%{
        opacity:1;
        transform:translateY(0) scale(1.035);
        text-shadow:
            0 2px 0 rgba(0,0,0,0.65),
            0 0 28px rgba(255, 244, 224, 0.42),
            0 0 34px rgba(215, 35, 28, 0.72);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
        text-shadow:
            0 2px 0 rgba(0,0,0,0.65),
            0 0 18px rgba(210, 20, 20, 0.42);
    }

}

@keyframes nameGlare{

    from{
        opacity:0;
        transform:translateX(-130%);
    }

    34%{
        opacity:0.72;
    }

    to{
        opacity:0;
        transform:translateX(130%);
    }

}

@keyframes portraitReveal{

    from{
        opacity:0;
        filter:brightness(0.4);
    }

    to{
        opacity:1;
        filter:brightness(1);
    }

}

@keyframes portraitSpinPulse{

    from{
        opacity:0.68;
        transform:scale(1.025);
    }

    to{
        opacity:1;
        transform:scale(1);
    }

}

@keyframes challengeReveal{

    from{
        opacity:0;
        transform:translateY(8px);
        filter:brightness(0.7);
    }

    to{
        opacity:1;
        transform:translateY(0);
        filter:brightness(1);
    }

}

@keyframes backgroundFogDrift{

    from{
        transform:translate3d(-2%, 0, 0);
    }

    to{
        transform:translate3d(2%, -2%, 0);
    }

}

@keyframes fogDriftLeft{

    from{
        transform:translate3d(7%, 0, 0) scale(1.04);
    }

    to{
        transform:translate3d(-7%, -10px, 0) scale(1.08);
    }

}

@keyframes fogDriftRight{

    from{
        transform:translate3d(-8%, 6px, 0) scale(1.08);
    }

    to{
        transform:translate3d(8%, -8px, 0) scale(1.04);
    }

}

@keyframes lowFogLift{

    from{
        transform:translateY(0);
        opacity:0.34;
    }

    to{
        transform:translateY(-18px);
        opacity:0.48;
    }

}

@keyframes entityGlowPulse{

    0%,
    100%{
        opacity:0.28;
        transform:scaleX(0.96);
    }

    50%{
        opacity:0.48;
        transform:scaleX(1.04);
    }

}

@keyframes titlePulse{

    0%,
    100%{
        text-shadow:
            0 0 5px rgba(255,255,255,0.14),
            0 0 18px rgba(205, 20, 20, 0.46),
            0 3px 0 rgba(0,0,0,0.65);
    }

    50%{
        text-shadow:
            0 0 7px rgba(255,255,255,0.18),
            0 0 28px rgba(205, 20, 20, 0.66),
            0 3px 0 rgba(0,0,0,0.65);
    }

}

@keyframes portraitAura{

    0%,
    100%{
        box-shadow:
            0 0 0 4px rgba(0,0,0,0.42),
            0 22px 60px rgba(0,0,0,0.65),
            0 0 34px rgba(120,0,0,0.28),
            inset 0 0 34px rgba(0,0,0,0.55);
    }

    50%{
        box-shadow:
            0 0 0 4px rgba(0,0,0,0.42),
            0 22px 60px rgba(0,0,0,0.65),
            0 0 54px rgba(160, 18, 18, 0.46),
            inset 0 0 34px rgba(0,0,0,0.55);
    }

}

@keyframes buttonGlint{

    0%,
    62%,
    100%{
        transform:translateX(-120%);
    }

    74%{
        transform:translateX(120%);
    }

}

@keyframes endPanelReveal{

    from{
        opacity:0;
        transform:translateY(18px) scale(0.98);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }

}

@keyframes endFogDrift{

    from{
        transform:translateX(-4%);
    }

    to{
        transform:translateX(4%);
    }

}

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

    *,
    *::before,
    *::after{
        animation-duration:1ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
    }

}

@media (max-width:1080px){

    .app-shell{
        display:grid;
        grid-template-columns:minmax(0, 760px);
        align-items:start;
        gap:22px;
    }

    .recent-panel{
        position:static;
        width:min(760px, 100%);
        margin:0 auto;
    }

    .recent-list{
        grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
    }

}

@media (max-width:600px){

    .app-shell{
        align-items:flex-start;
        padding:18px 12px 28px;
    }

    .hero{
        padding:28px 14px 30px;
    }

    h1{
        font-size:38px;
    }

    h2{
        font-size:17px;
    }

    .killer-name{
        font-size:32px;
        min-height:46px;
    }

    .remaining{
        width:100%;
        min-width:0;
        margin:22px 0 18px;
        font-size:17px;
    }

    .portrait-frame{
        width:min(320px, 88vw);
    }

    .end-screen h2{
        font-size:31px;
    }

    .end-screen-panel{
        padding:34px 20px 30px;
    }

    button{
        width:100%;
    }

    .mode-toggle{
        width:100%;
    }

    .settings-grid{
        grid-template-columns:1fr;
    }

    .cycle-summary-grid,
    .challenge-category-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .cycle-summary-item{
        min-height:52px;
    }

    .settings-card{
        grid-column:1 / -1;
    }

    .section-heading-row,
    .form-actions{
        align-items:stretch;
    }

    .section-heading-row{
        flex-direction:column;
    }

    .compact-button,
    .compact-action,
    #statsKillerSelect{
        width:100%;
    }

    .stats-controls{
        width:100%;
        grid-template-columns:1fr;
    }

    .stats-filter-group{
        grid-template-columns:1fr;
    }

    .stats-action-group,
    .stats-danger-group{
        width:100%;
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .stats-action-group{
        grid-template-columns:1fr;
    }

    .stats-danger-group{
        padding-left:0;
        padding-top:8px;
        border-left:none;
        border-top:1px solid rgba(255,255,255,0.1);
    }

    .history-actions{
        justify-content:stretch;
    }

    .history-button{
        flex:1;
    }

    .stats-settings,
    .match-fields,
    .safety-actions,
    .owned-killer-list{
        grid-template-columns:1fr;
    }

    .setup-panel{
        padding:34px 20px 30px;
    }

    .setup-panel h2{
        font-size:31px;
    }

    .killer-gallery{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:10px;
    }

    .recent-list{
        grid-template-columns:1fr;
    }

}

@media (max-width:420px){

    h1{
        font-size:32px;
    }

    h2{
        font-size:15px;
    }

    .hero{
        padding-inline:10px;
    }

    .cycle-summary-grid,
    .challenge-category-grid{
        grid-template-columns:1fr;
    }

    .killer-card p{
        min-height:44px;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:13px;
    }

    .killer-card span{
        font-size:11px;
    }

    .settings-card-heading{
        align-items:flex-start;
        flex-direction:column;
        gap:4px;
    }

    .settings-card-note{
        text-align:left;
    }

}