@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@400;600;800&display=swap');

:root{
    --bg:#d9d9d9;
    --teal1:#008080;
    --teal2:#15b295;
}

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

body{
    font-family:"Funnel Display",sans-serif;
    background:var(--bg);
    height:100vh;
    overflow:hidden;
    cursor:default;
}

/* HEADER */
.header{
    background:linear-gradient(90deg,var(--teal1),var(--teal2));
    color:white;
    padding:2vh 2vw;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.header h1{font-size:3vw;}
.header p{font-size:1.2vw; opacity:0.9;}
.updated{font-size:1.5vw; font-weight:600;}

.fs-btn{
    background:transparent;
    border:none;
    cursor:pointer;
}

.fs-btn i{
    font-size:20px;
    color:white;
}

/* LAYOUT */
.dashboard{
    height:100vh;
    display:flex;
    flex-direction:column;
}

.main-area{
    display:flex;
    flex:1;
    gap:10px;
    padding:10px;
    align-items:stretch;
}

/* GRID */
.grid{
    flex:1;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}

/* CARDS */
.card{
    color:white;
    padding:1.5vh 1.5vw;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.reform{background:#1fb7c9;}
.conservative{background:#1a8fe3;}
.labour{background:#e6003c;}
.libdem{background:#f5a623;}
.green{background:#6bb321;}
.independent{background:#7a7a7a;}

.name{
    text-align:center;
    font-size:2.2vw;
    font-weight:700;
}

.metrics{
    display:flex;
    justify-content:space-between;
    gap:10px;
}

.metric{
    text-align:center;
}

.label{
    font-size:1vw;
    opacity:0.85;
}

.value{
    font-size:2.5vw;
    font-weight:800;
}

/* CHANGE */
.pos{color:#00ff99;}
.neg{color:#ff4d4d;}
.neutral{color:#e0e0e0;}

@keyframes pop{
    0%{transform:scale(1);}
    40%{transform:scale(1.25);}
    100%{transform:scale(1);}
}

.value.updated{
    animation:pop 0.75s ease;
}

/* PANEL */
.updates-panel{
    width:260px;
    background:linear-gradient(180deg,var(--teal1),var(--teal2));
    color:white;
    scrollbar-width:thin;
    scrollbar-color:var(--bg) transparent;

    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.panel-title{
    padding:12px;
    font-size:1.2vw;
    font-weight:700;
    text-align:center;
}

.panel-list{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:10px;
    overflow-y:auto;
}

/* UPDATE ITEM */
.update-item{
    display:flex;
    align-items:center;

    font-size:0.9vw;
    padding:8px;
    border-radius:6px;

    color:white;
    background:rgba(255,255,255,0.12);

    border-left:6px solid transparent;

    /* smooth repositioning of old items */
    transition:
        transform 420ms cubic-bezier(0.22,1,0.36,1),
        opacity 320ms ease;

    will-change:transform, opacity;

    gap:0;

    /* NEW ITEMS ANIMATE IN */
    animation:slideIn 420ms cubic-bezier(0.22,1,0.36,1);
}

/* controlled spacing */
.rt-time{
    font-weight:800;
    margin-right:8px;
}

.rt-party{
    font-weight:800;
    margin-left:20px;
}

.rt-sep{
    margin-right:3px;
    padding:0;
    font-weight:600;
    opacity:0.8;
}

.rt-delta{
    font-weight:400;
    margin-left:0;
    white-space:nowrap;
}

/* PARTY BORDERS */
.update-item.reform{border-left-color:#1fb7c9;}
.update-item.conservative{border-left-color:#1a8fe3;}
.update-item.labour{border-left-color:#e6003c;}
.update-item.libdem{border-left-color:#f5a623;}
.update-item.green{border-left-color:#6bb321;}
.update-item.independent{border-left-color:#7a7a7a;}

/* NEW ITEMS SLIDE IN */
@keyframes slideIn{
    0%{
        opacity:0;
        transform:translateY(-18px);
    }

    100%{
        opacity:1;
        transform:translateY(0);
    }
}

/* OLD ITEMS SLIDE DOWN NATURALLY */
.panel-list > .update-item{
    transform:translateY(0);
}

/* REMOVE ANIMATION */
@keyframes fadeOut{
    0%{
        opacity:1;
        transform:translateY(0);
    }

    100%{
        opacity:0;
        transform:translateY(-10px);
    }
}

.update-item.removing{
    animation:fadeOut 300ms ease forwards;
}

/* MOBILE */
@media (orientation: portrait), (max-width: 900px){

    body{
        overflow:auto;
    }

    /* HEADER */
    .header{
        position:relative;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        text-align:center;
        gap:10px;
        padding:18px 14px;
    }

    .header h1{
        font-size:7vw;
        line-height:1.1;
    }

    .header p{
        font-size:3.8vw;
    }

    .updated{
        font-size:4.2vw;
    }

    #countedStats{
        font-size:3.8vw;
        line-height:1.3;
    }

    .fs-btn{
        position:absolute;
        top:12px;
        right:12px;
    }

    /* LAYOUT */
    .main-area{
        flex-direction:column;
        padding:10px;
        gap:12px;
    }

    /* GRID */
    .grid{
        grid-template-columns:1fr;
        gap:12px;
    }

    /* CARDS */
    .card{
        padding:16px;
        border-radius:12px;
        gap:14px;
    }

    .name{
        font-size:6.5vw;
        margin-bottom:0;
    }

    /* SEAT SHARE */
    .seat-share{
        margin:2px 0;
    }

    .seat-share-number{
        font-size:8vw !important;;
        font-weight:800;
        line-height:1;
    }

    .seat-share-label{
        margin-top:6px;
        font-size:3.5vw !important;
        opacity:0.85;
    }

    /* METRICS */
    .metrics{
        flex-direction:column;
        gap:10px;
    }

    .metric{
        display:flex;
        justify-content:space-between;
        align-items:center;

        padding:12px 14px;

        background:rgba(255,255,255,0.12);

        border-radius:10px;
    }

    .label{
        font-size:3.8vw;
    }

    .value{
        font-size:6vw;
    }

    /* PANEL */
    .updates-panel{
        width:100%;
        border-radius:12px;
    }

    .panel-title{
        font-size:4.5vw;
        padding:14px;
    }

    .panel-list{
        max-height:45vh;
    }

    .update-item{
        font-size:3.8vw;
        padding:12px;
    }

    .rt-time{
        margin-right:10px;
    }

    .rt-party{
        margin-left:10px;
    }
}

.seat-share{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    margin:0.6vh 0;
}

.seat-share-number{
    font-size:2.5vw;
    font-weight:800;
    line-height:1;
}

.seat-share-label{
    margin-top:4px;
    font-size:1vw;
    opacity:0.85;
}