/* style-mobile.css */

/* Import de la police personnalisée */
@font-face {
    font-family: '2Lines';
    src: url('./fonts/2Lines.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root {
    --bg-dark: rgba(26, 34, 51, 0.95); 
    --bg-lighter: rgba(40, 50, 70, 0.95);
    --accent-color: #ff9900;
    --text-color: #ffffff;
    --text-secondary: #aaaaaa;
    --border-radius: 12px;
    --font-title: '2Lines', 'Arial Black', sans-serif;
    --gauge-color: #ffcc00; /* Jaune/orange — identique au quest-counter */
}

body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--text-color);
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* --- INTRO SCREEN --- */
#intro-screen {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: black;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: opacity 0.5s ease-out;
}

#intro-screen.hidden {
    opacity: 0;
    pointer-events: none;
    display: none;
}

.intro-text {
    font-family: var(--font-title);
    font-size: 80px;
    color: #ffff00;
    text-transform: uppercase;
    text-align: center;
    line-height: 1;
    text-shadow: 
        4px 4px 0px #e6b800,
        8px 8px 0px #cc9900,
        12px 12px 0px #997300,
        16px 16px 20px rgba(0,0,0,0.5);
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}

/* --- GAUGE CONTAINER (DROITE) --- */
#gauge-container {
    position: absolute;
    top: 20px;
    right: 20px;
    height: 46px; /* Hauteur burger - border — inchangée */
    width: 150px; /* Largeur de base */
    min-width: 100px;
    background-color: var(--bg-dark);
    border: 1px solid var(--accent-color);
    border-radius: 10px;
    z-index: 1000;
    cursor: default;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 3px;
    box-sizing: border-box;
}

#gauge-track {
    width: 100%;
    height: 10px;
    background-color: rgba(0,0,0,0.5);
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
}

#gauge-fill {
    width: 0%;
    height: 100%;
    background-color: var(--gauge-color);
    box-shadow: 0 0 10px var(--gauge-color);
    transition: width 0.2s ease-out;
}

/* État de collision - jauge rouge */
#gauge-fill.colliding {
    background-color: #ff3333;
    box-shadow: 0 0 15px #ff3333, 0 0 25px #ff0000;
}

/* Label sous la jauge — même style que "SORTIE VERROUILLÉE" */
#gauge-label {
    font-size: 10px;
    letter-spacing: 1px;
    color: #ff4444;
    text-shadow: none;
    font-family: Arial, sans-serif;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    text-transform: uppercase;
}

/* --- QUEST WRAPPER (conteneur flex : quest-counter) --- */
#quest-wrapper {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}

@media (max-width: 768px) {
    #quest-wrapper {
        top: 10px;
        left: 10px;
    }
}

#menu-container {
    position: absolute;
    bottom: 30px;
    left: 20px;
    width: 50px;
    height: 50px;
    background: linear-gradient(to bottom, var(--bg-lighter), var(--bg-dark));
    border: 1px solid var(--accent-color);
    border-radius: 10px;
    z-index: 1000;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    transform-origin: top left;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#menu-toggle {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    color: var(--accent-color);
    line-height: 1;
}

#menu-content {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.1s;
}

#menu-container.expanded {
    cursor: default;
    width: 400px; 
    min-height: 275px;
    height: auto;
    border-radius: var(--border-radius);
    transform: none;
    overflow: visible;
    bottom: 30px;
    top: auto;
    z-index: 1200;
}

#menu-container.expanded #menu-toggle { display: none; }

#menu-container.expanded #menu-content {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.2s ease-out 0.1s;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.modal-header {
    background-color: transparent;
    padding: 15px 60px 15px 20px;
    border-bottom: none;
    display: flex;
    align-items: center;
    position: relative;
}

.modal-title {
    font-family: var(--font-title);
    font-size: 32px;
    color: #ffff00;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    line-height: 1;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.5);
}

#close-modal-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
    color: var(--accent-color);
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    background: none;
    border: none;
    padding: 0;
    transition: transform 0.25s ease;
}

#close-modal-btn:hover,
#close-modal-btn:active {
    transform: translateY(-50%) rotate(90deg);
}

.modal-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background-color: transparent;
}

.section-title {
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 16px;
    color: var(--text-color);
    text-transform: uppercase;
    margin-bottom: 10px;
}

.control-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    margin-bottom: 10px;
}

.control-label {
    font-size: 14px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.keys-group { display: flex; gap: 5px; }

.key-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 28px; height: 28px;
    background: linear-gradient(180deg, #444 0%, #222 100%);
    border: 1px solid #666;
    border-radius: 5px;
    color: white;
    font-size: 16px;
    box-shadow: 0 3px 0 #000, inset 0 1px 0 rgba(255,255,255,0.1);
}

.switch {
    position: relative;
    display: inline-block;
    width: 50px; height: 26px;
}

.switch input { opacity: 0; width: 0; height: 0; }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 26px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px; width: 18px;
    left: 4px; bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider { background-color: #ff9900; }
input:checked + .slider:before { transform: translateX(24px); }

#modal-help-btn {
    position: absolute;
    right: 55px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid var(--accent-color);
    background: none;
    color: var(--accent-color);
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s;
}
#modal-help-btn.active { background: var(--accent-color); color: #000; }

#modal-help-panel {
    display: none;
    padding: 10px 20px 20px;
    overflow-y: auto;
}

/* Quand intro-desc est dans le panel aide : pas de scroll interne */
#modal-help-panel #intro-desc {
    max-height: none;
    overflow-y: visible;
}

#scroll-hint {
    position: sticky;
    bottom: 4px;
    float: right;
    width: 0; height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 12px solid var(--accent-color);
    animation: scrollFloat 1.5s ease-in-out infinite;
    cursor: pointer;
    margin-right: 4px;
}
@keyframes scrollFloat {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(4px); }
}

#level {
    position: fixed;
    bottom: 30px; left: 80px;
    padding: 6px 10px;
    background: rgba(0,0,0,0.5);
    border-radius: 4px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    color: #ffcc00;
    z-index: 1000;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: padding 0.2s ease;
}

#level.timer-active {
    padding-top: 10px;
    padding-bottom: 10px;
}

#level-timer {
    display: none;
    width: 100%;
    text-align: center;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 25px;
    color: #ffcc00;
    pointer-events: none;
    letter-spacing: 1px;
    line-height: 1.2;
    margin-bottom: 4px;
}

/* Largeur fixe pour que text-align:left soit effectif */
#pause-btn,
#fullscreen-enter-btn,
#fullscreen-exit-btn {
    min-width: 110px;
}

#quest-counter {
    height: 46px;
    min-width: 120px;
    background-color: var(--bg-dark);
    border: 1px solid var(--accent-color);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    padding: 0 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    color: #ffcc00;
    letter-spacing: 1px;
    text-shadow: 0 0 8px #ffaa00;
    line-height: 1.3;
    pointer-events: none;
}

#bumper10-timer {
    position: absolute;
    top: 76px; /* sous quest-counter (20px top + 46px height + 10px gap) */
    left: 20px;
    min-width: 120px;
    text-align: center;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 64px;
    color: #ff00ff;
    z-index: 1100;
    pointer-events: none;
    text-shadow: 0 0 20px #ff00ff, 0 0 40px #cc00cc;
    line-height: 1;
    transform-origin: center center;
}

#digball-timer {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 52px;
    color: #ff4400;
    z-index: 10;
    text-shadow: 0 0 20px #ff8800, 0 0 40px #ff4400;
    pointer-events: none;
    animation: digpulse 0.5s ease-in-out infinite alternate;
}

@keyframes digpulse {
    from { transform: translateX(-50%) scale(1.0); opacity: 1; }
    to   { transform: translateX(-50%) scale(1.1); opacity: 0.8; }
}

#iceball-timer {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 52px;
    color: #aaffff;
    z-index: 10;
    text-shadow: 0 0 20px #88eeff, 0 0 40px #aaffff;
    pointer-events: none;
    animation: icepulse 0.6s ease-in-out infinite alternate;
}

@keyframes icepulse {
    from { transform: translateX(-50%) scale(1.0); opacity: 1; }
    to   { transform: translateX(-50%) scale(1.08); opacity: 0.85; }
}

/* --- RESPONSIVE SMARTPHONE --- */
@media (max-width: 768px) {
    .intro-text { font-size: 60px; }

    /* Gauge responsive */
    #gauge-container {
        top: 10px;
        right: 10px;
        height: 56px;
        width: 100px;
    }
    #gauge-track { height: 8px; }
    #gauge-label { font-size: 9px; letter-spacing: 0.5px; }

    #menu-container {
        width: 40px; height: 40px;
        bottom: 25px; left: 10px;
    }

    #menu-toggle { font-size: 22px; }

    #menu-container.expanded {
        width: calc(100vw - 20px);
        min-height: 235px;
        bottom: 25px;
    }

    /* Mode aide : hauteur limitée par JS selon position réelle de quest-wrapper */
    #menu-container.expanded.help-active {
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    #menu-container.expanded.help-active #menu-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    #menu-container.expanded.help-active #modal-help-panel {
        flex: 1;
        overflow-y: auto;
        min-height: 0;
    }

    .modal-header { padding: 12px 50px 12px 15px; }
    .modal-title { font-size: 26px; }
    #close-modal-btn { font-size: 28px; right: 10px; }
    #modal-help-btn { right: 45px; }
    .modal-body { padding: 15px; gap: 12px; }
    .control-row { margin-bottom: 8px; }
    .section-title { font-size: 14px; }
    .control-label { font-size: 13px; }
    .key-icon { width: 24px; height: 24px; font-size: 14px; }
    .switch { width: 45px; height: 24px; }
    .slider:before { height: 16px; width: 16px; }
    input:checked + .slider:before { transform: translateX(21px); }
    
    #level { font-size: 10px; padding: 4px 8px; bottom: 25px !important; right: auto !important; left: 60px; z-index: 1000; display: flex; flex-direction: column; align-items: center; text-align: center; }
    #level-timer { font-size: 21px; width: 100%; text-align: center; }
    #help { display: none; }
    #quest-counter { font-size: 12px; padding: 0 8px; height: 56px; min-width: 100px; }
    #pause-btn { bottom: 50px !important; right: 10px !important; }
    #fullscreen-enter-btn, #fullscreen-exit-btn { bottom: 25px !important; right: 10px !important; }
    #bumper10-timer {
    position: absolute;
    top: 76px; /* sous quest-counter (20px top + 46px height + 10px gap) */
    left: 20px;
    min-width: 120px;
    text-align: center;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 64px;
    color: #ff00ff;
    z-index: 1100;
    pointer-events: none;
    text-shadow: 0 0 20px #ff00ff, 0 0 40px #cc00cc;
    line-height: 1;
    transform-origin: center center;
}

#digball-timer { font-size: 36px; }
    #iceball-timer { font-size: 36px; }
}