:root {
    --bg-color: #050505;
    --pda-bg: #1a1e21;
    --pda-border: #2b3336;
    --text-main: #a8b5b2;
    --text-highlight: #e0e5e5;
    --accent-green: #5c8a5c;
    --accent-bright-green: #8aff8a;
    --accent-red: #ff4444;
    --accent-orange: #d48e45;
    --scanline-color: rgba(0, 0, 0, 0.5);

    --font-main: 'Share Tech Mono', monospace;
    --font-title: 'Russo One', sans-serif;
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-main);
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
    /* Ajouté pour l'effet 3D */
}

/* --- Background & Atmosphere --- */
.bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: radial-gradient(circle at center, #1a2024 0%, #000000 100%);
    overflow: hidden;
}

.fog-container {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.3;
}

/* Simple CSS fog simulation using gradients */
.fog-img {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: repeating-linear-gradient(45deg,
            transparent,
            transparent 20px,
            rgba(100, 110, 100, 0.1) 20px,
            rgba(100, 110, 100, 0.1) 40px);
    animation: fogMove 60s linear infinite;
}

.fog-img-second {
    animation-direction: reverse;
    animation-duration: 45s;
    opacity: 0.5;
    background: radial-gradient(circle, rgba(60, 70, 60, 0.2) 0%, transparent 60%);
}

@keyframes fogMove {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    100% {
        transform: translate3d(50px, 50px, 0) rotate(5deg);
    }
}

.vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, transparent 50%, rgba(0, 0, 0, 0.9) 100%);
    pointer-events: none;
}

/* --- Screen Effects (CRT) */
.screen-effects {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    /* Lowered z-index to be BEHIND the UI interaction layer but visually we might want it on top. 
                   Actually, let's keep it on top but very subtle, or move it behind if readability is key.
                   Let's keep it on top (z-index 100) but reduce opacity drastically. */
    z-index: 100;
    pointer-events: none;
}

.scanlines {
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0) 50%,
            rgba(0, 0, 0, 0.1) 50%,
            /* Reduced from 0.2 to 0.1 */
            rgba(0, 0, 0, 0.1));
    background-size: 100% 4px;
    animation: scrollScanlines 10s linear infinite;
}

.noise {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    /* Disabled noise effect */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.flicker-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(138, 255, 138, 0.02);
    animation: flicker 4s infinite;
}

@keyframes flicker {
    0% {
        opacity: 0.02;
    }

    5% {
        opacity: 0.05;
    }

    10% {
        opacity: 0.02;
    }

    15% {
        opacity: 0.06;
    }

    20% {
        opacity: 0.02;
    }

    50% {
        opacity: 0.02;
    }

    55% {
        opacity: 0.05;
    }

    60% {
        opacity: 0.02;
    }

    100% {
        opacity: 0.02;
    }
}

/* --- PDA UI Layout --- */
.pda-hardware {
    position: relative;
    width: 95%;
    max-width: 1250px;
    height: 85vh;
    padding: 30px 80px 30px 40px;
    /* Room for left speaker and right buttons */
    /* Stalker Olive Green Casement */
    background: linear-gradient(135deg, #445041 0%, #2f382c 50%, #1b211a 100%);
    border-radius: 6px;
    /* Big 3D Bevels */
    box-shadow:
        inset 2px 2px 3px rgba(255, 255, 255, 0.15),
        inset -4px -4px 6px rgba(0, 0, 0, 0.8),
        0 10px 0 #111511,
        0 10px 2px rgba(255, 255, 255, 0.05),
        /* Drop shadow */
        0 40px 100px rgba(0, 0, 0, 0.95),
        0 20px 40px rgba(0, 0, 0, 0.8);
    border: 1px solid #0a0e0a;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    transform-style: preserve-3d;
    animation: pdaHover 12s ease-in-out infinite alternate;
    will-change: transform;
}

/* Grit and Dirt Texture overlay on the hardware */
.pda-hardware::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 6px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1;
}

/* Hardware Corner Bumpers */
.bumper {
    position: absolute;
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, #2b3636 0%, #192020 100%);
    box-shadow:
        inset 2px 2px 3px rgba(255, 255, 255, 0.1),
        inset -2px -2px 5px rgba(0, 0, 0, 0.8),
        3px 3px 6px rgba(0, 0, 0, 0.6);
    z-index: 5;
    border: 2px solid #0a0d0d;
}

.bumper-tl {
    top: -6px;
    left: -6px;
    border-radius: 12px 6px 20px 6px;
}

.bumper-tr {
    top: -6px;
    right: -6px;
    border-radius: 6px 12px 6px 20px;
}

.bumper-bl {
    bottom: -6px;
    left: -6px;
    border-radius: 6px 20px 6px 12px;
}

.bumper-br {
    bottom: -6px;
    right: -6px;
    border-radius: 20px 6px 12px 6px;
}

/* Screws inside bumpers */
.bumper-inner {
    position: absolute;
    width: 14px;
    height: 14px;
    background: #111;
    border-radius: 50%;
    box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.9), 0 1px 1px rgba(255, 255, 255, 0.2);
}

.bumper-tl .bumper-inner {
    top: 15px;
    left: 15px;
}

.bumper-tr .bumper-inner {
    top: 15px;
    right: 15px;
}

.bumper-bl .bumper-inner {
    bottom: 15px;
    left: 15px;
}

.bumper-br .bumper-inner {
    bottom: 15px;
    right: 15px;
}

/* Left Speaker Grill */
.speaker-grill {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 5;
    padding: 15px 6px;
    background: #151a15;
    border-radius: 6px;
    box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.8), 0 1px 1px rgba(255, 255, 255, 0.1);
    border: 1px solid #0a0e0a;
}

.speaker-grill span {
    width: 4px;
    height: 18px;
    background: #000;
    border-radius: 2px;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 1);
}

/* Right Side Physical Buttons Panel */
.hardware-buttons-panel {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 70%;
    background: linear-gradient(to right, #404a3e, #262d25);
    border-radius: 22px;
    box-shadow:
        inset 2px 2px 5px rgba(0, 0, 0, 0.6),
        inset -1px -1px 3px rgba(255, 255, 255, 0.1),
        -2px 0 5px rgba(0, 0, 0, 0.4);
    border: 1px solid #1a211a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    padding: 20px 0;
    z-index: 5;
}

.hw-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    box-shadow:
        inset 1px 1px 3px rgba(255, 255, 255, 0.5),
        inset -2px -2px 5px rgba(0, 0, 0, 0.8),
        0 3px 5px rgba(0, 0, 0, 0.9);
    border: 1px solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: default;
}

.hw-btn-cyan {
    background: radial-gradient(circle at 30% 30%, #5ca5a5, #294c4c);
}

.hw-btn .icon {
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    opacity: 0.7;
    text-shadow: 0 0 3px #fff;
}

.hw-btn-divider {
    width: 28px;
    height: 8px;
    background: #111;
    border-radius: 4px;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* The actual Screen */
.pda-container {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    background: #121617;
    /* Very dark slate blue/grey screen base */
    border: 18px solid #1a1e20;
    /* Extremely thick rugged inner border */
    border-radius: 8px;
    box-shadow:
        /* The thick bezel drop shadow INTO the screen */
        inset 0 8px 25px rgba(0, 0, 0, 0.95),
        inset 0 -5px 15px rgba(0, 0, 0, 0.8),
        /* Highlight on the bezel's very edge */
        0 2px 2px rgba(255, 255, 255, 0.05),
        0 -2px 3px rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    padding: 20px;
    overflow: hidden;
    /* Prevent screen contents bleeding over bezel */
}

/* Stunning Dual Spherical Glass Reflection (matching image) */
.glass-reflection {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Two bright overhead lights reflecting on matte glass */
    background:
        radial-gradient(circle at 40% 30%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 15%, rgba(255, 255, 255, 0) 35%),
        radial-gradient(circle at 45% 65%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.04) 15%, rgba(255, 255, 255, 0) 35%);
    pointer-events: none;
    z-index: 99;
    /* Above UI elements */
    transform: translateZ(1px);
}

/* Screen Scratches/Dirt Overlay */
.screen-scratches {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Generates high-frequency noise / dust / scratches using SVG data URI */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 5 -2.0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='white' filter='url(%23noise)' opacity='0.25'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 98;
    opacity: 0.15;
    /* Kept low for 120fps instead of using mix-blend-mode */
    transform: translateZ(1px);
}

@keyframes pdaHover {
    0% {
        transform: rotateX(4deg) rotateY(-5deg) rotateZ(0.5deg) translateZ(0);
    }

    50% {
        transform: rotateX(0deg) rotateY(3deg) rotateZ(-0.5deg) translateZ(30px);
    }

    100% {
        transform: rotateX(3deg) rotateY(-2deg) rotateZ(0deg) translateZ(0);
    }
}

.pda-header {
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid var(--pda-border);
    padding-bottom: 10px;
    margin-bottom: 20px;
    font-size: 1.2rem;
    color: var(--accent-green);
}

.status-indicator.warning {
    color: var(--accent-orange);
    animation: blink 2s infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.pda-content {
    display: flex;
    flex: 1;
    gap: 20px;
}

.panel {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 15px;
}

.left-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 350px;
}

.right-panel {
    flex: 2;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* --- Map Module --- */
.module-header {
    background: var(--pda-border);
    color: var(--text-highlight);
    padding: 5px 10px;
    margin-bottom: 10px;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.map-display {
    width: 100%;
    height: 200px;
    background: #0a0a0a;
    position: relative;
    overflow: hidden;
    border: 1px solid #333;
}

.map-grid {
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(50, 100, 50, 0.2) 1px, transparent 1px),
        linear-gradient(90deg, rgba(50, 100, 50, 0.2) 1px, transparent 1px);
    background-size: 20px 20px;
}

.radar-sweep {
    position: absolute;
    width: 100%;
    height: 100%;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(92, 138, 92, 0.4) 30deg, transparent 31deg);
    border-radius: 50%;
    /* If we wanted a circle radar, but let's keep it rectangular sweep style or clip it */
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    animation: radarSpin 4s linear infinite;
    opacity: 0.3;
}

@keyframes radarSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.anomaly-blip {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--accent-red);
    border-radius: 50%;
    box-shadow: 0 0 5px var(--accent-red);
    animation: blipPulse 1.5s infinite;
}

@keyframes blipPulse {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }

    100% {
        opacity: 0;
        transform: scale(0.5);
    }
}

.player-marker {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid var(--accent-bright-green);
    transform: translate(-50%, -50%);
}

/* --- Stats Module --- */
.stat-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.stat-row .label {
    width: 100px;
    color: var(--text-main);
}

.bar-container {
    flex: 1;
    height: 6px;
    background: #111;
    margin: 0 10px;
    border: 1px solid #333;
}

.bar-fill {
    height: 100%;
    background: var(--accent-green);
    box-shadow: 0 0 5px var(--accent-green);
}

.rad-bar {
    background: var(--accent-orange);
    box-shadow: 0 0 5px var(--accent-orange);
}

.psy-bar {
    background: #aa55ff;
    box-shadow: 0 0 5px #aa55ff;
}

.value.blink-red {
    color: var(--accent-red);
    animation: blink 0.5s infinite;
}

/* --- Audio Module --- */
.audio-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 5px 0;
}

.audio-btn {
    background: rgba(10, 10, 10, 0.8);
    border: 1px solid var(--pda-border);
    color: var(--text-highlight);
    font-family: var(--font-main);
    padding: 5px 15px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    text-transform: uppercase;
}

.audio-btn:hover {
    background: var(--accent-green);
    color: #000;
    box-shadow: 0 0 10px var(--accent-green);
}

.audio-btn.muted {
    color: var(--accent-red);
    border-color: var(--accent-red);
}

.audio-btn.muted:hover {
    background: var(--accent-red);
    color: #000;
    box-shadow: 0 0 10px var(--accent-red);
}

.audio-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    height: 10px;
    outline: none;
    display: flex;
    align-items: center;
}

.audio-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    background: #222;
    border: 1px solid #333;
}

.audio-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 16px;
    background: var(--accent-green);
    cursor: pointer;
    margin-top: -6px;
    box-shadow: 0 0 5px var(--accent-green);
}

.audio-slider::-moz-range-track {
    width: 100%;
    height: 4px;
    background: #222;
    border: 1px solid #333;
}

.audio-slider::-moz-range-thumb {
    width: 10px;
    height: 16px;
    background: var(--accent-green);
    cursor: pointer;
    border: none;
    box-shadow: 0 0 5px var(--accent-green);
}

/* --- Typography & Server Info --- */
.server-info {
    text-align: center;
    margin-bottom: 30px;
}

.glitch-text {
    font-family: var(--font-title);
    font-size: 3rem;
    color: var(--text-highlight);
    position: relative;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);
    letter-spacing: 5px;
}

.glitch-text::before,
.glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--pda-bg);
    /* Match background to hide main text partially */
    opacity: 0.8;
}

.glitch-text::before {
    left: 2px;
    text-shadow: -1px 0 red;
    clip: rect(24px, 550px, 90px, 0);
    animation: glitch-anim-1 2.5s infinite linear alternate-reverse;
}

.glitch-text::after {
    left: -2px;
    text-shadow: -1px 0 blue;
    clip: rect(85px, 550px, 140px, 0);
    animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
    0% {
        clip: rect(20px, 9999px, 10px, 0);
    }

    100% {
        clip: rect(80px, 9999px, 100px, 0);
    }
}

@keyframes glitch-anim-2 {
    0% {
        clip: rect(10px, 9999px, 90px, 0);
    }

    100% {
        clip: rect(60px, 9999px, 30px, 0);
    }
}

.server-mode {
    font-size: 1rem;
    color: var(--accent-green);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-top: 5px;
}

/* --- Terminal Log --- */
.log-terminal {
    height: 150px;
    /* Fixed height to prevent expanding */
    flex: none;
    background: #080808;
    border: 1px solid #333;
    padding: 10px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.9rem;
    color: var(--text-main);
    overflow-y: auto;
    /* Scroll enabled */
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    /* justify-content: flex-end; Removed to allow normal scrolling behavior from top */

    /* Custom Scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--accent-green) #080808;
}

.log-terminal::-webkit-scrollbar {
    width: 6px;
}

.log-terminal::-webkit-scrollbar-track {
    background: #080808;
}

.log-terminal::-webkit-scrollbar-thumb {
    background-color: var(--accent-green);
    border-radius: 2px;
}

.log-entry {
    margin-bottom: 4px;
    opacity: 0.8;
}

/* --- Loading Area --- */
.loading-area {
    margin-top: auto;
}

.loading-text {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 1.1rem;
    color: var(--text-highlight);
}

.progress-container {
    position: relative;
    height: 20px;
    background: #0a0a0a;
    border: 1px solid var(--pda-border);
    display: flex;
    align-items: center;
    padding: 2px;
}

.progress-bar-bg {
    flex: 1;
    height: 100%;
    background: transparent;
    position: relative;
}

.progress-bar-fill {
    height: 100%;
    width: 0%;
    background: repeating-linear-gradient(45deg,
            var(--accent-green),
            var(--accent-green) 10px,
            #4a704a 10px,
            #4a704a 20px);
    box-shadow: 0 0 10px var(--accent-green);
    transition: width 0.2s ease-out;
}

.percentage {
    position: absolute;
    right: 10px;
    color: #fff;
    font-weight: bold;
    text-shadow: 0 0 5px #000;
    z-index: 2;
}

.current-file {
    margin-top: 5px;
    font-size: 0.8rem;
    color: #666;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* --- Footer --- */
.pda-footer {
    border-top: 2px solid var(--pda-border);
    padding-top: 10px;
    text-align: right;
    font-style: italic;
    color: var(--accent-green);
    font-size: 0.9rem;
}

/* --- Final Overlay (WOW Moment) --- */
.final-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.final-msg {
    color: white;
    font-family: var(--font-title);
    font-size: 4rem;
    letter-spacing: 10px;
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.5s ease-out;
}

.final-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.final-overlay.active .final-msg {
    opacity: 1;
    transform: scale(1);
}

/* Anomaly Trigger Classes */
.anomaly-active .pda-container {
    animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both infinite;
    filter: hue-rotate(90deg) contrast(1.5);
}

.anomaly-active .scanlines {
    background: linear-gradient(rgba(255, 0, 0, 0.2), rgba(0, 0, 0, 0.5));
}

@keyframes shake {

    10%,
    90% {
        transform: translate3d(-2px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(4px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-8px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(8px, 0, 0);
    }
}

/* Responsive adjustments */
@media (max-width: 800px) {
    .pda-hardware {
        width: 100%;
        height: 100vh;
        border-radius: 0;
        padding: 10px;
    }

    .pda-container {
        border-radius: 0;
    }

    .screw {
        display: none;
        /* Hide screws on small screens lacking proper bezel */
    }

    .pda-content {
        flex-direction: column;
    }

    .left-panel {
        max-width: 100%;
        flex-direction: row;
    }

    .map-display {
        width: 150px;
        height: 150px;
    }

    .status-module {
        flex: 1;
    }
}