/* --- Import de la police VT323 --- */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

/* --- Variables de couleurs hacker --- */
:root {
    --hacker-bg: hsl(154 50% 5%);
    --hacker-green: #00FF00;
    --hacker-green-bright: hsl(154 84% 70%);
    --hacker-green-dark: hsl(154 50% 20%);
    --hacker-red: #FF0000;
    --hacker-blue: #007BFF;
}

/* --- Container GPS --- */
.gps-container {
    width: 100%;
    max-width: 50vw;
    margin: 2vw auto;
    padding:  0;
}

/* --- Status Box --- */
.status-box {
    background-color: var(--hacker-bg);
    border: 2px solid var(--hacker-green);
    padding: 1vw;
    margin-bottom: 1.5vw;
    font-family: 'VT323', 'Monaco', 'Courier New', monospace;
    text-shadow: 0 0 .3vw var(--hacker-green-bright);
}

.status-label {
    color: var(--hacker-green-bright);
    font-size: 1.2vw;
    margin-bottom: 0.5vw;
    letter-spacing: 0.2vw;
}

.status-value {
    color: var(--hacker-green);
    font-size: 1.5vw;
    animation: pulse 2s infinite;
}

.status-value.near {
    color: var(--hacker-blue);
    animation: pulse-fast 1s infinite;
}

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

/* --- Info Box --- */
.info-box {
    background-color: var(--hacker-bg);
    border: 2px solid var(--hacker-green);
    padding: 1.5vw;
    margin-bottom: 1.5vw;
    text-align: left ! important;
}

.box-title {
    color: var(--hacker-green-bright);
    font-size: 1.3vw;
    margin-bottom: 1vw;
    text-align: center;
    letter-spacing: 0.3vw;
    border-bottom: 1px solid var(--hacker-green);
    padding-bottom:  0.5vw;
    width: 100%;
    display: block;
}

.box-title.success {
    color: var(--hacker-blue);
    border-bottom-color: var(--hacker-blue);
    animation: glow-blue 1.5s infinite;
}

#position-info p {
    margin: 0.5vw 0;
    font-size: 1.3vw;
    color: var(--hacker-green);
    text-align: left !important;
}

#position-info strong {
    color: var(--hacker-green-bright);
}

/* --- Question Box --- */
.question-box {
    background-color: var(--hacker-bg);
    border: 2px solid var(--hacker-blue);
    padding: 1.5vw;
    margin-bottom: 1.5vw;
    animation: slideIn 0.5s ease;
}

.question-text {
    color: var(--hacker-green);
    font-size: 1.4vw;
    line-height: 1.6;
    margin-bottom: 1.5vw;
}

/* --- Terminal Input --- */
.terminal-input {
    width: 100%;
    background-color: #000;
    border: 2px solid var(--hacker-green);
    color: var(--hacker-green);
    font-family: 'VT323', 'Monaco', 'Courier New', monospace;
    font-size: 1.3vw;
    padding:  0.8vw;
    margin-bottom: 1vw;
    outline: none;
    box-sizing: border-box;
    text-shadow: 0 0 .3vw var(--hacker-green-bright);
}

.terminal-input::placeholder {
    color: var(--hacker-green-dark);
}

.terminal-input:focus {
    border-color: var(--hacker-green-bright);
    box-shadow: 0 0 1vw var(--hacker-green-bright);
    animation: glow-input 1.5s infinite;
}

/* --- Terminal Button --- */
.terminal-button {
    width: 100%;
    background-color:  var(--hacker-bg);
    border: 2px solid var(--hacker-green);
    color: var(--hacker-green-bright);
    font-family: 'VT323', 'Monaco', 'Courier New', monospace;
    font-size: 1.5vw;
    padding: 1vw;
    cursor: pointer;
    letter-spacing: 0.3vw;
    text-shadow: 0 0 .3vw var(--hacker-green-bright);
    transition: all 0.3s ease;
}

.terminal-button:hover {
    background-color:  var(--hacker-green);
    color: #000;
    box-shadow: 0 0 1.5vw var(--hacker-green-bright);
    text-shadow: none;
}

.terminal-button:active {
    transform: scale(0.98);
}
.terminal.font-terminus {
    text-align: left;
    font-size: 1.5vw;
}

/* --- Error Message --- */
.error-message {
    background-color: #000;
    border: 2px solid var(--hacker-red);
    color: var(--hacker-red);
    padding: 1vw;
    margin-bottom: 1.5vw;
    text-align: center;
    animation: shake 0.5s ease;
}

/* --- Message Box (Success) --- */
.message-box {
    background-color:  #000;
    border: 3px solid var(--hacker-blue);
    padding: 2vw;
    margin-bottom: 1.5vw;
    text-align: center;
    animation: celebrate 0.6s ease;
    box-shadow: 0 0 2vw var(--hacker-blue);
}

.secret-message {
    color: var(--hacker-blue);
    font-size: 1.5vw;
    line-height: 1.6;
    text-shadow: 0 0 .5vw var(--hacker-blue);
    animation: glow-blue 2s infinite;
}

/* --- GPS Icon --- */
.gps-icon {
    font-size: 2vw;
    display: inline-block;
}

/* --- Animations --- */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity:  0.6;
    }
}

@keyframes pulse-fast {
    0%, 100% {
        opacity: 1;
        text-shadow: 0 0 .5vw var(--hacker-blue);
    }
    50% {
        opacity: 0.7;
        text-shadow: 0 0 1vw var(--hacker-blue);
    }
}

@keyframes blink {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0;
    }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-1vw); }
    75% { transform: translateX(1vw); }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform:  translateY(-2vw);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes celebrate {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.02) rotate(1deg); }
    75% { transform: scale(1.02) rotate(-1deg); }
}

@keyframes glow-input {
    0%, 100% {
        box-shadow: 0 0 .5vw var(--hacker-green-bright);
    }
    50% {
        box-shadow: 0 0 1.5vw var(--hacker-green-bright);
    }
}

@keyframes glow-blue {
    0%, 100% {
        text-shadow: 0 0 .3vw var(--hacker-blue);
    }
    50% {
        text-shadow:  0 0 1vw var(--hacker-blue);
    }
}

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

/* --- Layout Right Side (pour symétrie) --- */
#right {
    float: right;
    width: 25%;
    height: 100vh;
    overflow: hidden;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    #center {
        width: 100% !important;
        padding:  0 3vw !important;
    }
    
    .title.font-terminus {
        font-size: 3pt;
    }
    .terminal.font-terminus {
        font-size: 8pt;
    }

    .status-label,
    .box-title {
        font-size: 3vw;
    }

    .status-value,
    .question-text,
    #position-info p,
    .terminal-input,
    .terminal-button,
    .secret-message {
        font-size: 3.5vw;
    }

    .title {
        font-size: 2vw;
    }
}

/* --- Prevent text selection --- */
.prevent-select {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.timer-wrap {
    display: flex;
    flex-direction: column;
    text-align: center;

    margin-top: 2vh;
    margin-right: 2vw;
}

.timer-wrap p {
  margin: 0;
}