/* ============================================================
   GAMIN - Server Control Center
   Part 1 - Foundation
============================================================ */

/* ---------- Google Font ---------- */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ---------- Variables ---------- */

:root{

    --bg:#0b1017;

    --surface:#161b22;

    --surface2:#1d232c;

    --border:#2d333b;

    --text:#f0f6fc;

    --muted:#8b949e;

    --blue:#58a6ff;

    --green:#3fb950;

    --yellow:#d29922;

    --red:#f85149;

    --radius:18px;

    --shadow:0 15px 35px rgba(0,0,0,.30);

    --transition:.25s ease;

}

/* ---------- Reset ---------- */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);

    color:var(--text);

    font-family:'Inter',sans-serif;

    min-height:100vh;

    overflow-x:hidden;

}

/* ---------- Scrollbar ---------- */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#10151d;

}

::-webkit-scrollbar-thumb{

    background:#2d333b;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#58a6ff;

}

/* ---------- Links ---------- */

a{

    color:inherit;

    text-decoration:none;

}

/* ============================================================
   Boot Screen
============================================================ */

#bootScreen{

    position:fixed;

    inset:0;

    background:#090d13;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

    transition:.8s;

}


.bootLogo{

    text-align:center;

}

.bootLogo h1{

    font-size:70px;

    font-weight:800;

    letter-spacing:8px;

    color:white;

}

.bootLogo p{

    margin-top:15px;

    color:var(--muted);

    font-size:18px;

}

/* ============================================================
   App
============================================================ */

#app{

    opacity:0;

    transition:.6s;

}

/* ============================================================
   Container
============================================================ */

main{

    width:min(1500px,94%);

    margin:auto;

}

/* ============================================================
   Header
============================================================ */

header{

    width:min(1500px,94%);

    margin:35px auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.logo h1{

    font-size:38px;

    font-weight:800;

}

.logo i{

    color:var(--blue);

    margin-right:10px;

}

.logo span{

    display:block;

    margin-top:8px;

    color:var(--muted);

}

.headerRight{

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    gap:12px;

}

.serviceStatus{

    display:flex;

    gap:15px;

}

.online{

    color:var(--green);

    font-weight:600;

    font-size:14px;

}

#clock{

    font-size:18px;

    font-weight:700;

}

/* ============================================================
   Card Grid
============================================================ */

.cardGrid{

    display:grid;

    grid-template-columns:repeat(2, 1fr);

    gap:30px;

}

/* ============================================================
   Generic Card
============================================================ */

.card{

    position:relative;

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:35px;

    box-shadow:var(--shadow);

    overflow:hidden;

    transition:var(--transition);

    min-height:270px;

}

/* Hardware card stays the same height */

.hardware{

    grid-column:1 / -1;

    height:200px;

    cursor:default;

}

/* ============================================================
   Orb
============================================================ */

.orb{

    position:absolute;

    width:140px;

    height:140px;

    border-radius:50%;

    right:-35px;

    top:-35px;

    filter:blur(40px);

    opacity:.18;

    transition:.4s;

}

.minecraftOrb{

    background:#58a6ff;

}

.dockerOrb{

    background:#00d4ff;

}

.cockpitOrb{

    background:#ff9d00;

}

.hardwareOrb{

    background:#3fb950;

}

/* ============================================================
   Card Content
============================================================ */

.icon{

    position:relative;

    font-size:64px;

    margin-bottom:25px;

    transition:.3s;

}

.card h2{

    font-size:28px;

    margin-bottom:12px;

}

.card p{

    color:var(--muted);

    line-height:1.6;

    font-size:15px;

}

.button{

    display:inline-flex;

    align-items:center;

    margin-top:35px;

    color:var(--blue);

    font-weight:700;

    transition:.25s;

}

/* ============================================================
   PART 2 - Premium Card Animations
============================================================ */

/* ---------- Card Hover ---------- */

.card:hover{

    transform:translateY(-8px);

    border-color:var(--blue);

    box-shadow:
        0 18px 40px rgba(0,0,0,.45),
        0 0 30px rgba(88,166,255,.18);

}

/* ---------- Click Animation ---------- */

.card:active{

    transform:translateY(2px) scale(.985);

}

/* ---------- Orb Animation ---------- */

.card:hover .orb{

    opacity:.35;

    transform:scale(1.35);

}

/* ---------- Icon ---------- */

.card:hover .icon{

    transform:scale(1.12) rotate(-4deg);

}

/* ---------- Title ---------- */

.card h2{

    transition:.25s;

}

.card:hover h2{

    color:var(--blue);

}

/* ---------- Description ---------- */

.card p{

    transition:.25s;

}

.card:hover p{

    color:#c9d1d9;

}

/* ---------- Button ---------- */

.button{

    position:relative;

    overflow:hidden;

}

.button::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-3px;

    width:0;

    height:2px;

    background:var(--blue);

    transition:.25s;

}

.card:hover .button{

    letter-spacing:.5px;

    transform:translateX(8px);

}

.card:hover .button::after{

    width:100%;

}

/* ============================================================
   Floating Animation
============================================================ */

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

    100%{

        transform:translateY(0);

    }

}

.minecraft .icon{

    animation:float 5s ease-in-out infinite;

}

.portainer .icon{

    animation:float 5.5s ease-in-out infinite;

}

.cockpit .icon{

    animation:float 6s ease-in-out infinite;

}

.hardware .icon{

    animation:float 6.5s ease-in-out infinite;

}

/* ============================================================
   Shine Effect
============================================================ */

.card::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    background:linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.07),

        transparent

    );

    transition:.8s;

}

.card:hover::before{

    left:140%;

}

/* ============================================================
   Colored Top Border
============================================================ */

.minecraft{

    border-top:4px solid #58a6ff;

}

.portainer{

    border-top:4px solid #00d4ff;

}

.cockpit{

    border-top:4px solid #ff9800;

}

.hardware{

    border-top:4px solid #3fb950;

}

/* ============================================================
   Status Pulse
============================================================ */

.online{

    position:relative;

}

.online::before{

    content:"";

    position:absolute;

    left:-10px;

    top:50%;

    transform:translateY(-50%);

    width:8px;

    height:8px;

    background:var(--green);

    border-radius:50%;

    animation:pulse 2s infinite;

}

@keyframes pulse{

    0%{

        box-shadow:0 0 0 0 rgba(63,185,80,.7);

    }

    70%{

        box-shadow:0 0 0 10px rgba(63,185,80,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(63,185,80,0);

    }

}

/* ============================================================
   Glass Highlight
============================================================ */

.card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.04),

            transparent 35%

        );

    pointer-events:none;

}

/* ============================================================
   Cursor
============================================================ */

.minecraft,
.portainer,
.cockpit{

    cursor:pointer;

}

/* ============================================================
   PART 3 - Hardware Monitor
============================================================ */

/* ---------- Hardware Layout ---------- */

.hardware{

    display:flex;

    flex-direction:column;

}

.hardware .icon{

    margin-bottom:20px;

}

.hardware h2{

    margin-bottom:30px;

}

/* ---------- Stat ---------- */

.stat{

    display:grid;

    grid-template-columns:90px 1fr auto;

    align-items:center;

    gap:15px;

    margin-bottom:22px;

}

.stat:last-child{

    margin-bottom:0;

}

.stat span{

    color:var(--muted);

    font-size:14px;

    font-weight:500;

}

.stat strong{

    color:var(--text);

    font-size:15px;

    font-weight:700;

    white-space:nowrap;

}

/* ---------- Progress Bar ---------- */

.bar{

    width:100%;

    height:10px;

    background:#0d1117;

    border-radius:999px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.05);

}

/* ---------- Fill ---------- */

.bar div{

    width:0%;

    height:100%;

    border-radius:999px;

    transition:

        width .6s ease,

        background-color .3s ease;

}

/* Default */

#cpuBar{

    background:linear-gradient(
        90deg,
        #58a6ff,
        #4fc3ff
    );

}

#ramBar{

    background:linear-gradient(
        90deg,
        #3fb950,
        #5bd36d
    );

}

#diskBar{

    background:linear-gradient(
        90deg,
        #d29922,
        #f0b94c
    );

}

/* ---------- Temperature Badge ---------- */

#cpuTemp{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 12px;

    border-radius:999px;

    background:rgba(88,166,255,.12);

    border:1px solid rgba(88,166,255,.25);

    color:#79c0ff;

}

/* ---------- Uptime ---------- */

#uptime{

    color:#58a6ff;

}

/* ---------- Hardware Card Hover ---------- */

.hardware:hover #cpuTemp{

    background:rgba(88,166,255,.18);

}

/* ============================================================
   Value Flash Animation
============================================================ */

@keyframes valueFlash{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}

.value-update{

    animation:valueFlash .35s ease;

}

/* ============================================================
   Progress Pulse
============================================================ */

@keyframes barGlow{

    0%{

        filter:brightness(1);

    }

    50%{

        filter:brightness(1.35);

    }

    100%{

        filter:brightness(1);

    }

}

.bar-update{

    animation:barGlow .45s ease;

}

/* ============================================================
   Usage Colors
============================================================ */

/* Add these classes from JavaScript based on usage */

.usage-low{

    background:linear-gradient(
        90deg,
        #3fb950,
        #5bd36d
    ) !important;

}

.usage-medium{

    background:linear-gradient(
        90deg,
        #d29922,
        #f0b94c
    ) !important;

}

.usage-high{

    background:linear-gradient(
        90deg,
        #f85149,
        #ff7b72
    ) !important;

}

/* ============================================================
   Hardware Fade-In
============================================================ */

.hardware .stat{

    opacity:0;

    transform:translateY(15px);

    animation:statFade .5s forwards;

}

.hardware .stat:nth-child(3){ animation-delay:.10s; }
.hardware .stat:nth-child(4){ animation-delay:.18s; }
.hardware .stat:nth-child(5){ animation-delay:.26s; }
.hardware .stat:nth-child(6){ animation-delay:.34s; }
.hardware .stat:nth-child(7){ animation-delay:.42s; }

@keyframes statFade{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ============================================================
   PART 4 - Quick Console
============================================================ */

.console{

    margin-top:35px;

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    overflow:hidden;

    display:flex;

    flex-direction:column;

}

/* ============================================================
   Header
============================================================ */

.consoleTop{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 28px;

    border-bottom:1px solid var(--border);

    background:#1b2028;

}

.consoleTop h2{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:24px;

    font-weight:700;

}

.consoleTop i{

    color:var(--blue);

}

#consoleState{

    color:var(--green);

    font-weight:700;

    font-size:14px;

}

/* ============================================================
   Terminal
============================================================ */

#consoleLog{

    background:#090d13;

    color:#d7dde5;

    font-family:

        Consolas,

        "Cascadia Code",

        monospace;

    font-size:14px;

    height:420px;

    overflow-y:auto;

    padding:20px;

    line-height:1.7;

}

/* ============================================================
   Console Lines
============================================================ */

.line{

    margin-bottom:6px;

    white-space:pre-wrap;

    word-break:break-word;

    animation:consoleFade .18s;

}

@keyframes consoleFade{

    from{

        opacity:0;

        transform:translateY(4px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ============================================================
   Log Colors
============================================================ */

.line.info{

    color:#9cdcfe;

}

.line.warn{

    color:#ffd166;

}

.line.error{

    color:#ff6b6b;

}

.line.success{

    color:#3fb950;

}

.line.player{

    color:#b392f0;

}

.line.command{

    color:#58a6ff;

}

.line.chat{

    color:#f0f6fc;

}

/* ============================================================
   Command Area
============================================================ */

.command{

    display:flex;

    gap:15px;

    padding:20px;

    border-top:1px solid var(--border);

    background:#11161d;

}

.command input{

    flex:1;

    height:50px;

    background:#0b1017;

    border:1px solid var(--border);

    color:white;

    border-radius:12px;

    padding:0 18px;

    font-size:15px;

    outline:none;

    transition:.25s;

}

.command input:focus{

    border-color:var(--blue);

    box-shadow:

        0 0 15px rgba(88,166,255,.25);

}

/* ============================================================
   Send Button
============================================================ */

.command button{

    width:145px;

    border:none;

    border-radius:12px;

    background:var(--blue);

    color:white;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

}

.command button:hover{

    transform:translateY(-2px);

    box-shadow:

        0 8px 20px rgba(88,166,255,.35);

}

.command button:active{

    transform:scale(.96);

}

/* ============================================================
   Prompt
============================================================ */

.prompt{

    color:var(--green);

    margin-right:10px;

}

/* ============================================================
   Selection
============================================================ */

#consoleLog::selection{

    background:#58a6ff;

    color:white;

}

/* ============================================================
   Custom Scrollbar
============================================================ */

#consoleLog::-webkit-scrollbar{

    width:12px;

}

#consoleLog::-webkit-scrollbar-track{

    background:#090d13;

}

#consoleLog::-webkit-scrollbar-thumb{

    background:#30363d;

    border-radius:20px;

}

#consoleLog::-webkit-scrollbar-thumb:hover{

    background:#58a6ff;

}

/* ============================================================
   Blinking Cursor
============================================================ */

.cursor{

    display:inline-block;

    width:9px;

    height:18px;

    background:#58a6ff;

    animation:blink 1s infinite;

}

@keyframes blink{

    50%{

        opacity:0;

    }

}

/* ============================================================
   Connection Indicator
============================================================ */

#consoleState{

    position:relative;

    padding-left:18px;

}


/* Connected */

#consoleState.connected::before{

    content:"";

    position:absolute;

    left:0;

    top:50%;

    transform:translateY(-50%);

    width:9px;

    height:9px;

    border-radius:50%;

    background:#3fb950;

    box-shadow:

        0 0 10px rgba(63,185,80,.6);

}


/* Disconnected */

#consoleState.disconnected::before{

    content:"";

    position:absolute;

    left:0;

    top:50%;

    transform:translateY(-50%);

    width:9px;

    height:9px;

    border-radius:50%;

    background:#f85149;

    box-shadow:

        0 0 10px rgba(248,81,73,.6);

}

/* ============================================================
   Empty Console
============================================================ */

.consoleEmpty{

    color:#6e7681;

    text-align:center;

    margin-top:140px;

    font-style:italic;

}

/* ============================================================
   PART 5 - Responsive + Final Polish
============================================================ */

/* ============================================================
   Page Animation
============================================================ */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

header{

    animation:fadeUp .5s ease;

}

.card:nth-child(1){

    animation:fadeUp .5s .10s both;

}

.card:nth-child(2){

    animation:fadeUp .5s .20s both;

}

.card:nth-child(3){

    animation:fadeUp .5s .30s both;

}

.card:nth-child(4){

    animation:fadeUp .5s .40s both;

}

.console{

    animation:fadeUp .6s .55s both;

}

/* ============================================================
   Boot Screen Fade
============================================================ */

#bootScreen.hidden{

    opacity:0;

    visibility:hidden;

    pointer-events:none;

}

#app.loaded{

    opacity:1;

}

/* ============================================================
   Background Glow
============================================================ */

body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    background:

        radial-gradient(circle at 15% 20%,
        rgba(88,166,255,.08),
        transparent 30%),

        radial-gradient(circle at 85% 15%,
        rgba(63,185,80,.05),
        transparent 30%),

        radial-gradient(circle at 50% 90%,
        rgba(88,166,255,.05),
        transparent 35%);

    z-index:-1;

}

/* ============================================================
   Floating Background
============================================================ */

@keyframes drift{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-20px);

    }

    100%{

        transform:translateY(0px);

    }

}

body::after{

    content:"";

    position:fixed;

    width:700px;

    height:700px;

    right:-250px;

    top:-250px;

    border-radius:50%;

    background:

        radial-gradient(circle,
        rgba(88,166,255,.05),
        transparent 70%);

    animation:drift 18s ease-in-out infinite;

    z-index:-2;

}

/* ============================================================
   Card Entrance
============================================================ */

.card{

    will-change:transform;

}

/* ============================================================
   Clock
============================================================ */

#clock{

    font-variant-numeric:tabular-nums;

    letter-spacing:1px;

}

/* ============================================================
   Focus Accessibility
============================================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible{

    outline:2px solid var(--blue);

    outline-offset:3px;

}

/* ============================================================
   Responsive
============================================================ */

@media(max-width:1200px){

    .cardGrid{

        grid-template-columns:1fr;

    }

}

@media(max-width:900px){

    header{

        flex-direction:column;

        align-items:flex-start;

        gap:20px;

    }

    .headerRight{

        width:100%;

        align-items:flex-start;

    }

    .serviceStatus{

        flex-wrap:wrap;

    }

}

@media(max-width:700px){

    .card{

        padding:25px;

    }

    .card h2{

        font-size:24px;

    }

    .icon{

        font-size:52px;

    }

    .consoleTop{

        flex-direction:column;

        align-items:flex-start;

        gap:10px;

    }

    .command{

        flex-direction:column;

    }

    .command button{

        width:100%;

        height:50px;

    }

}

@media(max-width:500px){

    .logo h1{

        font-size:30px;

    }

    .bootLogo h1{

        font-size:48px;

    }

    .bootLogo p{

        font-size:16px;

    }

    #consoleLog{

        height:320px;

    }

}

/* ============================================================
   Reduced Motion
============================================================ */

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

    *{

        animation:none !important;

        transition:none !important;

    }

}

/* Status indicator dots */

.statusDot {
    display:inline-block;
    width:10px;
    height:10px;
    border-radius:50%;
    margin-right:8px;
}

.statusDot.green {
    background:#00ff66;
    box-shadow:0 0 8px #00ff66;
}

.statusDot.red {
    background:#ff3333;
    box-shadow:0 0 8px #ff3333;
}

/* ============================================================
   SERVER INFORMATION CARD
============================================================ */

.serverInfo{

    border-top:4px solid #a371f7;

}

.infoOrb{

    background:#a371f7;

}

.serverInfo .icon{

    color:#a371f7;

}

.infoList{

    display:flex;

    flex-direction:column;

    gap:14px;

    margin-top:22px;

}

.infoRow{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:12px 14px;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.06);

    border-radius:10px;

}

.infoRow span{

    color:var(--muted);

    font-size:14px;

}

.infoRow strong{

    color:var(--text);

    font-size:14px;

    text-align:right;

    word-break:break-word;

}

.serverInfo:hover .icon{

    color:#c297ff;

}

@media(max-width:500px){

    .infoRow{

        align-items:flex-start;

        flex-direction:column;

        gap:5px;

    }

    .infoRow strong{

        text-align:left;

    }

}


/* ============================================================
   ADMIN LOGIN OVERLAY
============================================================ */

#loginModal{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    background:rgba(9,13,19,.82);

    backdrop-filter:blur(8px);

    z-index:100000;

    padding:20px;

}

#loginModal.active{

    display:flex;

}


/* ---------- Login Box ---------- */

.loginBox{

    width:min(380px,100%);

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:35px;

    box-shadow:var(--shadow);

}


/* ---------- Title ---------- */

.loginBox h2{

    display:flex;

    align-items:center;

    gap:14px;

    font-size:28px;

    margin-bottom:25px;

}

.loginBox h2 i{

    color:var(--blue);

}


/* ---------- Inputs ---------- */

.loginBox input{

    width:100%;

    height:50px;

    margin-bottom:16px;

    padding:0 15px;

    background:#0d1117;

    border:1px solid var(--border);

    border-radius:12px;

    color:var(--text);

    font-family:inherit;

    font-size:15px;

    outline:none;

    transition:.25s;

}

.loginBox input:focus{

    border-color:var(--blue);

    box-shadow:0 0 15px rgba(88,166,255,.18);

}

.loginBox input::placeholder{

    color:var(--muted);

}


/* ---------- Buttons ---------- */

.loginButtons{

    display:flex;

    gap:15px;

    margin-top:5px;

}

.loginButtons button{

    flex:1;

    height:50px;

    border:none;

    border-radius:12px;

    font-family:inherit;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

#loginConfirm{

    background:var(--blue);

    color:white;

}

#loginConfirm:hover{

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(88,166,255,.35);

}

#loginCancel{

    background:var(--surface2);

    color:var(--text);

}

#loginCancel:hover{

    background:#30363d;

    transform:translateY(-2px);

}


/* ---------- Browser Autofill Fix ---------- */

.loginBox input:-webkit-autofill,

.loginBox input:-webkit-autofill:hover,

.loginBox input:-webkit-autofill:focus{

    -webkit-text-fill-color:var(--text);

    -webkit-box-shadow:0 0 0 1000px #0d1117 inset;

    transition:background-color 9999s ease-in-out 0s;

}

/* ============================================================
   ADMIN BUTTON
============================================================ */

.adminButton{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:12px;

    color:var(--text);

    font-family:inherit;

    font-size:14px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

.adminButton i{

    color:var(--red);

}

.adminButton:hover{

    transform:translateY(-2px);

    border-color:var(--blue);

    box-shadow:0 8px 20px rgba(88,166,255,.18);

}

/* ============================================================
   LONGER HARDWARE MONITOR
============================================================ */

.hardware{

    min-height:500px;

}


/* ============================================================
   PUSH CONSOLE DOWN
============================================================ */

.console{

    margin-top:50px;

}