* { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Full-screen flash ──────────────────────────────────────── */
@keyframes evi-screen-flash {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}
.evi-flash-overlay {
    position: fixed; inset: 0;
    background: #fff;
    pointer-events: none;
    z-index: 999;
    opacity: 1;
    animation: evi-screen-flash 1s ease-out forwards;
}

body {
    background: #000;
    color: #fff;
    min-height: 100vh;
    font-family: 'Mouse Memoirs', sans-serif;
}

/* ── Header ────────────────────────────────────────────────── */
.evi-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 10px 20px;
    border-bottom: 1px solid #1a1a1a;
}
.evi-header-nav { display: flex; gap: 10px; }
.evi-hdr-btn {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    padding: 8px 18px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: transform 0.15s;
}
.evi-hdr-back { background: #222; color: #aaa; border: 1px solid #444; }
.evi-hdr-back:hover { color: #fff; border-color: #888; }
.evi-hdr-menu { background: linear-gradient(135deg, #FFD700, #FFA500); color: #111; }
.evi-hdr-menu:hover { transform: scale(1.05); }

/* ── Page ───────────────────────────────────────────────────── */
.evi-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 20px 20px;
    gap: 16px;
    min-height: calc(100vh - 56px);
    position: relative;
    z-index: 2;
}

/* ── Title ──────────────────────────────────────────────────── */
.evi-title {
    font-family: 'Henny Penny', cursive;
    font-size: 3.2rem;
    letter-spacing: 8px;
    color: #fff;
    text-shadow:
        0 0 8px  #fff,
        0 0 22px #ff2020,
        0 0 50px #cc0000,
        0 0 90px #880000;
    animation: evi-title-pulse 2.2s ease-in-out infinite alternate;
}
@keyframes evi-title-pulse {
    from { text-shadow: 0 0 6px #fff, 0 0 18px #ff2020, 0 0 40px #cc0000, 0 0 70px #880000; }
    to   { text-shadow: 0 0 12px #fff, 0 0 32px #ff3030, 0 0 70px #ff0000, 0 0 120px #ff2020, 0 0 160px #cc0000; }
}

/* ── Stage: nominees row ────────────────────────────────────── */
.evi-stage {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-end;
    gap: 14px;
    width: 100%;
    max-width: 1100px;
    min-height: 260px;
}

/* ── Each nominee card ──────────────────────────────────────── */
.evi-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 3px solid #FFD700;
    box-shadow: 0 0 14px rgba(255,215,0,0.4), 0 0 30px rgba(255,215,0,0.15);
    background: #111;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 195px;
    transition: transform 0.3s, opacity 0.5s, box-shadow 0.3s;
    animation: evi-card-idle 2.5s ease-in-out infinite alternate;
}
@keyframes evi-card-idle {
    from { box-shadow: 0 0 10px rgba(255,215,0,0.3), 0 0 25px rgba(255,200,0,0.1); }
    to   { box-shadow: 0 0 22px rgba(255,215,0,0.6), 0 0 50px rgba(255,200,0,0.25); }
}

.evi-card img {
    width: 195px;
    height: 260px;
    object-fit: cover;
    display: block;
}

.evi-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.75);
    font-family: 'Mouse Memoirs', sans-serif;
    font-size: 1.3rem;
    text-align: center;
    padding: 4px 4px 6px;
    color: #fff;
    letter-spacing: 0.5px;
}

/* ── Slow heartbeat phase ────────────────────────────────────── */
@keyframes evi-heartbeat {
    0%   { filter: grayscale(85%) brightness(0.7); transform: scale(1);    box-shadow: none; }
    12%  { filter: grayscale(0%)  brightness(1.1); transform: scale(1.06); box-shadow: 0 0 24px 6px rgba(255,220,80,0.5); }
    22%  { filter: grayscale(70%) brightness(0.8); transform: scale(1);    box-shadow: none; }
    32%  { filter: grayscale(0%)  brightness(1.1); transform: scale(1.06); box-shadow: 0 0 24px 6px rgba(255,220,80,0.5); }
    45%  { filter: grayscale(85%) brightness(0.7); transform: scale(1);    box-shadow: none; }
    100% { filter: grayscale(85%) brightness(0.7); transform: scale(1);    box-shadow: none; }
}
.evi-card.slow-blink {
    animation: evi-heartbeat 2.2s ease-in-out infinite;
}
.evi-card.slow-blink:nth-child(2) { animation-delay: 0.44s; }
.evi-card.slow-blink:nth-child(3) { animation-delay: 0.88s; }
.evi-card.slow-blink:nth-child(4) { animation-delay: 1.32s; }
.evi-card.slow-blink:nth-child(5) { animation-delay: 1.76s; }

/* ── All cards shake while rolling ─────────────────────────── */
.evi-stage.rolling .evi-card:not(.saved):not(.slow-blink) {
    animation: evi-shake 0.45s ease-in-out infinite;
}
@keyframes evi-shake {
    0%,100% { transform: translate(0,0) rotate(0deg); }
    15%  { transform: translate(-5px,-2px) rotate(-1.2deg); }
    30%  { transform: translate( 5px, 2px) rotate( 1.2deg); }
    45%  { transform: translate(-4px, 2px) rotate(-0.7deg); }
    60%  { transform: translate( 4px,-2px) rotate( 0.7deg); }
    80%  { transform: translate(-2px, 1px) rotate(-0.3deg); }
}

/* ── Active card: float up + strong spotlight ───────────────── */
.evi-stage.rolling .evi-card.active {
    animation: evi-active-rise 0.18s ease-out forwards;
    border-color: #ffffff;
    box-shadow:
        0 0 40px rgba(255,255,255,1),
        0 0 90px rgba(255,255,255,0.6),
        0 0 160px rgba(255,255,255,0.25);
    z-index: 10;
    filter: brightness(1.25);
}
@keyframes evi-active-rise {
    0%   { transform: scale(1.0) translateY(0px); }
    50%  { transform: scale(1.22) translateY(-18px); }
    100% { transform: scale(1.17) translateY(-14px); }
}

/* Non-active cards dim hard */
.evi-stage.rolling .evi-card:not(.active):not(.saved) {
    filter: brightness(0.25) saturate(0.3);
}

/* ── Landing: pop + green explosion ────────────────────────── */
.evi-card.flashing {
    border-color: #00ff55;
    animation: evi-pop 0.55s cubic-bezier(0.36,0.07,0.19,0.97) forwards;
    z-index: 10;
}
@keyframes evi-pop {
    0%   { transform: scale(1.17) translateY(-14px); box-shadow: 0 0 40px rgba(0,255,85,0.6); }
    25%  { transform: scale(1.38) translateY(-22px); box-shadow: 0 0 80px rgba(0,255,85,1), 0 0 150px rgba(0,255,85,0.5); }
    55%  { transform: scale(1.08) translateY(-6px);  box-shadow: 0 0 50px rgba(0,255,85,0.8); }
    75%  { transform: scale(1.22) translateY(-14px); box-shadow: 0 0 65px rgba(0,255,85,0.9); }
    100% { transform: scale(1.14) translateY(-10px); box-shadow: 0 0 55px rgba(0,255,85,0.8), 0 0 110px rgba(0,200,60,0.35); }
}

.evi-card.saved {
    border-color: #00ff55;
    box-shadow: 0 0 18px rgba(0,255,85,0.7), 0 0 40px rgba(0,255,85,0.3);
    animation: none;
    transform: scale(1.05);
    filter: brightness(1.3) saturate(1.6);
    opacity: 1;
    transition: none;
}
.evi-card.saved .evi-name { color: #00ff88; }

/* Gradually fade saved cards to grey after the pop */
.evi-card.saved-fading {
    filter: grayscale(75%) brightness(0.55) !important;
    opacity: 0.55 !important;
    transform: scale(0.92) !important;
    transition: filter 7s ease-in, opacity 7s ease-in, transform 7s ease-in !important;
}
.evi-card.saved-fading .evi-name { color: #888 !important; }

/* fly-away handled via Web Animations API in JS */
.evi-card.fly-away {
    pointer-events: none;
}

.evi-saved-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Henny Penny', cursive;
    font-size: 1.6rem;
    letter-spacing: 4px;
    color: #00cc55;
    text-shadow: 0 0 10px #00ff88, 0 0 25px #00cc55;
    pointer-events: none;
    white-space: nowrap;
}

/* ── EVICTED: dramatic red ──────────────────────────────────── */
.evi-card.evicted {
    border-color: #ff0000;
    width: 220px;
    animation: evi-card-evicted 1.4s ease-in-out infinite alternate;
}
.evi-card.evicted img {
    width: 220px;
    height: 293px;
}
@keyframes evi-card-evicted {
    from { box-shadow: 0 0 30px rgba(255,0,0,0.8), 0 0 60px rgba(200,0,0,0.4), 0 0 100px rgba(180,0,0,0.2); }
    to   { box-shadow: 0 0 55px rgba(255,30,30,1),  0 0 110px rgba(255,0,0,0.6), 0 0 180px rgba(200,0,0,0.3); }
}

/* ── Evicted centred spotlight overlay ─────────────────────── */
.evi-spotlight-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
    background: rgba(0,0,0,0.55);
}
.evi-spotlight-overlay.visible { opacity: 1; }

.evi-spotlight-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    pointer-events: auto;
    animation: evi-spotlight-pulse 1.2s ease-in-out infinite alternate;
}
.evi-spotlight-card img {
    width: 360px;
    height: 480px;
    object-fit: cover;
    border-radius: 14px;
    border: 3px solid #ff0000;
}
.evi-spotlight-name {
    font-family: 'Henny Penny', cursive;
    font-size: 2.4rem;
    letter-spacing: 4px;
    color: #fff;
    text-shadow: 0 0 12px #fff, 0 0 30px #ff4444;
}
.evi-spotlight-menu {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    padding: 10px 24px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #111;
    pointer-events: auto;
    transition: transform 0.15s;
    margin-top: 4px;
}
.evi-spotlight-menu:hover { transform: scale(1.05); }
.evi-spotlight-label {
    font-family: 'Henny Penny', cursive;
    font-size: 3rem;
    letter-spacing: 6px;
    color: #ff2020;
    text-shadow: 0 0 20px #ff0000, 0 0 50px #cc0000, 0 0 90px #880000;
    animation: evi-label-pulse 0.9s ease-in-out infinite alternate;
}
@keyframes evi-spotlight-pulse {
    from { transform: scale(1);    box-shadow: 0 0 60px rgba(255,0,0,0.3); }
    to   { transform: scale(1.06); box-shadow: 0 0 120px rgba(255,0,0,0.7); }
}
@keyframes evi-label-pulse {
    from { opacity: 0.85; text-shadow: 0 0 14px #ff0000, 0 0 35px #cc0000; }
    to   { opacity: 1;    text-shadow: 0 0 28px #ff2020, 0 0 60px #ff0000, 0 0 100px #cc0000; }
}

.evi-evicted-label {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Henny Penny', cursive;
    font-size: 2rem;
    letter-spacing: 4px;
    color: #ff2020;
    -webkit-text-stroke: 1px #880000;
    text-shadow: 0 0 14px #ff0000, 0 0 35px #cc0000, 0 0 60px #880000;
    pointer-events: none;
    white-space: nowrap;
    animation: evi-evicted-label-pulse 1s ease-in-out infinite alternate;
}
@keyframes evi-evicted-label-pulse {
    from { opacity: 0.85; text-shadow: 0 0 10px #ff0000, 0 0 25px #cc0000; }
    to   { opacity: 1;    text-shadow: 0 0 20px #ff2020, 0 0 50px #ff0000, 0 0 80px #cc0000; }
}

/* ── Message ────────────────────────────────────────────────── */
.evi-message {
    font-family: Impact, 'Arial Narrow', Arial, sans-serif;
    font-size: 4rem;
    font-weight: 900;
    letter-spacing: 8px;
    color: #00aa44;
    text-align: center;
    min-height: 52px;
    text-transform: uppercase;
    -webkit-text-stroke: 3px #ffffff;
    text-shadow: none;
}

/* ── No nominees ────────────────────────────────────────────── */
.evi-empty {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.4rem;
    letter-spacing: 0.1em;
    color: #555;
    text-align: center;
    padding: 40px 0;
}

/* ── ROLL button ────────────────────────────────────────────── */
.evi-btn-row {
    display: flex;
    justify-content: center;
}
.evi-roll-btn {
    font-family: 'Henny Penny', cursive;
    font-size: 1.1rem;
    letter-spacing: 2px;
    padding: 9px 30px;
    background: #000;
    color: #fff;
    border: 3px solid #ff2020;
    border-radius: 12px;
    cursor: pointer;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
    box-shadow: 0 0 14px rgba(255,32,32,0.7), 0 0 35px rgba(255,32,32,0.3);
    animation: evi-btn-pulse 2s ease-in-out infinite alternate;
    transition: transform 0.15s;
}
@keyframes evi-btn-pulse {
    from { box-shadow: 0 0 10px rgba(255,32,32,0.6), 0 0 25px rgba(255,32,32,0.25); }
    to   { box-shadow: 0 0 22px rgba(255,32,32,1),   0 0 55px rgba(255,32,32,0.5); }
}
.evi-roll-btn:hover    { transform: scale(1.05); }
.evi-roll-btn:active   { transform: scale(0.97); }
.evi-roll-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; animation: none; }
.evi-roll-btn.btn-reset {
    border-color: #FFD700;
    box-shadow: 0 0 14px rgba(255,215,0,0.6), 0 0 30px rgba(255,215,0,0.25);
    animation: evi-btn-gold 2s ease-in-out infinite alternate;
}
@keyframes evi-btn-gold {
    from { box-shadow: 0 0 10px rgba(255,215,0,0.5), 0 0 25px rgba(255,180,0,0.2); }
    to   { box-shadow: 0 0 22px rgba(255,215,0,1),   0 0 55px rgba(255,180,0,0.5); }
}