/* ============================================
   Temple Maudit - Feuille de styles
   Jeu de réflexes / plateforme dans un temple
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Cinzel+Decorative:wght@700&display=swap');

#game-main {
    width: 100%;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0a0704;
    font-family: 'Cinzel', serif;
    color: #e0e0e0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#game-main *:not(.tm-btn) { margin: 0; padding: 0; box-sizing: border-box; }
#game-main .tm-btn { margin: 0; box-sizing: border-box; }

#game-main :root {
    --gold: #c9a84c; --gold-bright: #f0c040;
    --stone: #2a1f0e; --fire: #ff6a00; --ember: #ff3300;
}

#gameWrapper {
    position: relative; width: 100%; height: 100dvh;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(ellipse at center, #1a0e04 0%, #0a0704 100%);
    touch-action: none;
    -webkit-tap-highlight-color: transparent; user-select: none;
}

#gameCanvas { display: block; image-rendering: pixelated; touch-action: none; cursor: none; }

#hud { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; font-family: 'Cinzel', serif; }

.screen {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: rgba(10,7,4,0.93); z-index: 100; transition: opacity 0.3s;
}
.screen.hidden { opacity: 0; pointer-events: none; }

.screen-title {
    font-family: 'Cinzel Decorative', serif;
    font-size: clamp(2rem,6vw,3.8rem); color: #f0c040;
    text-shadow: 0 0 30px #c9a84c, 0 0 70px rgba(255,160,0,0.4);
    letter-spacing: 0.06em; margin-bottom: 0.25em;
    animation: titlePulse 2.5s ease-in-out infinite;
}

@keyframes titlePulse {
    0%,100% { text-shadow: 0 0 20px #c9a84c, 0 0 50px rgba(255,160,0,0.3); }
    50% { text-shadow: 0 0 50px #f0c040, 0 0 100px rgba(255,200,0,0.5); }
}

.screen-sub {
    font-family: 'Cinzel', serif; font-size: clamp(0.7rem,2.5vw,1.1rem);
    color: #a08040; letter-spacing: 0.25em; text-transform: uppercase; margin-bottom: 1.8em;
}

.divider {
    width: min(280px,65vw); height: 2px;
    background: linear-gradient(90deg,transparent,#c9a84c,transparent);
    margin: 0.8em 0; box-shadow: 0 0 10px #c9a84c;
}

.instr { color: #c8a060; font-size: clamp(0.65rem,2vw,0.9rem); text-align: center; line-height: 2.2; margin: 0.8em 0; letter-spacing: 0.05em; }
.zone { display:inline-block; padding: 2px 10px; border: 1px solid #c9a84c; border-radius: 3px; background: rgba(201,168,76,0.08); font-size:0.9em; }

.tm-btn {
    font-family: 'Cinzel', serif; font-size: clamp(0.85rem,2.8vw,1.25rem);
    color: #0a0704; background: linear-gradient(135deg, #f0c040, #c9a84c);
    border: none; padding: 0.65em 2.2em; letter-spacing: 0.15em; cursor: pointer;
    margin-top: 1.5em; clip-path: polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
    transition: all 0.2s; box-shadow: 0 0 20px rgba(201,168,76,0.35); font-weight: 700;
    pointer-events: auto;
}
.tm-btn:hover, .tm-btn:active { background: linear-gradient(135deg,#ffe060,#f0c040); box-shadow: 0 0 40px rgba(201,168,76,0.7); transform: scale(1.05); }

#scoreDisplay {
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    font-family: 'Cinzel', serif; font-size: clamp(0.85rem,2.8vw,1.2rem);
    color: #f0c040; text-shadow: 0 0 10px #c9a84c; letter-spacing: 0.1em; z-index: 50;
}

#combo {
    position: absolute; top: 48px; left: 50%; transform: translateX(-50%);
    font-family: 'Cinzel', serif; font-size: clamp(0.65rem,1.8vw,0.9rem);
    color: #ff6a00; text-shadow: 0 0 10px #ff3300; opacity: 0; transition: opacity 0.3s; letter-spacing: 0.1em;
}

#depthBar {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    width: 7px; height: min(180px,38vh); background: rgba(0,0,0,0.5);
    border: 1px solid rgba(201,168,76,0.35); border-radius: 4px; overflow: hidden;
}
#depthFill { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(180deg,#f0c040,#ff6a00); border-radius:4px; box-shadow: 0 0 5px #c9a84c; }

#touchHints { position: absolute; bottom: 12px; width: 100%; display: flex; justify-content: space-between; padding: 0 18px; pointer-events: none; }
.th { font-family: 'Cinzel', serif; font-size: clamp(0.5rem,1.6vw,0.7rem); color: rgba(201,168,76,0.3); letter-spacing: 0.1em; text-align: center; }

#deathFlash { position: absolute; inset: 0; background: #ff3300; pointer-events: none; z-index: 200; opacity: 0; transition: opacity 0.08s; }

#livesDisplay {
    position: absolute; top: 10px; left: 10px;
    font-family: 'Cinzel', serif; font-size: clamp(1rem,3vw,1.3rem);
    color: #ff4444; text-shadow: 0 0 8px #ff0000; letter-spacing: 0.05em; z-index: 50;
    pointer-events: none;
}

#gemScore {
    position: absolute; top: 10px; right: 28px;
    font-family: 'Cinzel', serif; font-size: clamp(0.7rem,2vw,0.95rem);
    color: #e8d060; text-shadow: 0 0 8px #c9a84c; letter-spacing: 0.05em; z-index: 50;
    pointer-events: none;
}

.gem-popup {
    position: absolute; pointer-events: none; z-index: 160;
    font-family: 'Cinzel', serif; font-weight: 700;
    animation: gemPop 0.9s ease-out forwards;
    text-shadow: 0 0 8px currentColor;
}
@keyframes gemPop {
    0%   { opacity:1; transform: translateY(0) scale(1.2); }
    100% { opacity:0; transform: translateY(-48px) scale(0.8); }
}

#lifeUpMsg {
    position: absolute; top: 30%; left: 50%; transform: translateX(-50%);
    font-family: 'Cinzel Decorative', serif; font-size: clamp(1rem,3.5vw,1.6rem);
    color: #ff6060; text-shadow: 0 0 20px #ff2020;
    pointer-events: none; z-index: 160;
    opacity: 0; transition: opacity 0.2s;
}