/* ============================================
   Hatch scene — overlay fullscreen intégré dans game.php
   (anciennement hatch.php standalone). Chargé toujours mais actif
   uniquement quand #hatch-scene-overlay est rendu dans le DOM.
   ============================================ */

/* L'overlay prend tout l'écran, masque le jeu en-dessous */
.hatch-scene-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: var(--bg-deep);
    overflow: hidden;
    z-index: 5000;
}

/* Empêche le scroll de la page quand la scène est active */
body.hatch-active {
    overflow: hidden;
}

/* Quand on entre sur game.php avec un query param hatch_egg / first_hatch,
   on masque instantanement tout le jeu en-dessous (sidebar, header, panels)
   jusqu'a ce que JS inject #hatch-scene-overlay. Evite un micro-flash du
   game UI avant la scene d'eclosion. Le #hatch-scene-overlay lui-meme n'est
   pas masque car il n'existe pas encore au moment ou cette regle s'applique ;
   des que JS le cree, il est visible par defaut. */
body.hatch-incoming > *:not(.hatch-scene-overlay) {
    visibility: hidden;
}

.hatch-scene-overlay #egg-canvas {
    display: block;
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}
.hatch-scene-overlay .hatch-overlay-top {
    position: absolute;
    top: 5vh; left: 0; right: 0;
    text-align: center;
    pointer-events: none;
    z-index: 2;
}
.hatch-scene-overlay .hatch-overlay-bottom {
    position: absolute;
    bottom: 8vh; left: 0; right: 0;
    display: flex;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}
.hatch-scene-overlay .hatch-overlay-bottom > * { pointer-events: auto; }
.hatch-scene-overlay .hatch-title {
    font-size: clamp(28px, 4vw, 48px);
    color: var(--gold);
    font-family: 'MedievalSharp', Georgia, serif;
    margin-bottom: 6px;
    text-shadow: 0 0 20px rgba(var(--gold-rgb),0.3);
    opacity: 0;
    transition: opacity 0.6s;
}
.hatch-scene-overlay .hatch-title.visible { opacity: 1; }
.hatch-scene-overlay .hatch-subtitle {
    color: var(--text-secondary);
    margin-bottom: 20px;
    font-size: clamp(12px, 1.5vw, 16px);
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0;
    transition: opacity 0.6s;
}
.hatch-scene-overlay .hatch-subtitle.visible { opacity: 1; }
/* Prompt discret (remplace le bouton Ouvrir) : texte blanc cassé, centré sous l'œuf.
   Disparait au clic sur l'œuf (phase === 'landed' -> 'hatching'). */
.hatch-scene-overlay .hatch-prompt {
    display: none;
    position: absolute;
    left: 50%;
    bottom: 14vh;
    transform: translateX(-50%);
    z-index: 3;
    color: rgba(255, 255, 255, 0.78);
    font-family: 'Cinzel', serif;
    font-size: clamp(14px, 1.3vw, 18px);
    letter-spacing: 0.18em;
    text-transform: lowercase;
    font-variant: small-caps;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.9), 0 0 14px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.8s ease;
    pointer-events: none;
    user-select: none;
    animation: hatch-prompt-breathe 3.2s ease-in-out infinite;
}
.hatch-scene-overlay .hatch-prompt.visible { opacity: 1; }
@keyframes hatch-prompt-breathe {
    0%, 100% { opacity: 0.65; }
    50%      { opacity: 1; }
}

/* Curseur "cliquable" quand l'oeuf est pose */
.hatch-scene-overlay #egg-canvas.egg-interactive { cursor: pointer; }

/* Voile noir : levee tres progressive (2.4s) pour laisser le noir s'installer,
   puis devoiler la scene en fondu cinematique. La silhouette de l'oeuf emerge
   ensuite doucement de l'ombre via son propre fade alpha (6s). */
.hatch-scene-overlay #hatch-fadein {
    position: fixed;
    inset: 0;
    background: #000;
    opacity: 1;
    z-index: 100;
    pointer-events: none;
    transition: opacity 2.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.hatch-scene-overlay #hatch-fadein.gone { opacity: 0; }
.hatch-scene-overlay .hatch-form {
    max-width: 350px;
    width: 90%;
    display: none;
    opacity: 0;
    transition: opacity 0.6s;
}
.hatch-scene-overlay .hatch-form.visible { opacity: 1; }
.hatch-scene-overlay .hatch-form label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-family: 'Roboto Condensed', sans-serif;
}
.hatch-scene-overlay .hatch-form form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* Stats & Ultimate panels — medieval style */
.hatch-scene-overlay .hatch-panel {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
    background:
        linear-gradient(170deg, rgba(30,22,12,0.92) 0%, rgba(16,12,8,0.95) 100%);
    border: 2px solid var(--border-modal-gold);
    border-image: linear-gradient(180deg, var(--gold) 0%, var(--border-modal-gold) 40%, var(--border-modal-dark) 100%) 1;
    padding: 28px 32px;
    min-width: 220px;
    box-shadow:
        0 0 30px rgba(0,0,0,0.7),
        inset 0 1px 0 rgba(var(--gold-rgb),0.15),
        inset 0 -1px 0 rgba(0,0,0,0.4);
}
.hatch-scene-overlay .hatch-panel::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(var(--gold-rgb),0.08);
    pointer-events: none;
}
.hatch-scene-overlay .hatch-panel.visible {
    opacity: 1;
}
.hatch-scene-overlay .hatch-panel-left {
    left: 4vw;
    transform: translateY(-50%) translateX(-40px);
}
.hatch-scene-overlay .hatch-panel-left.visible {
    transform: translateY(-50%) translateX(0);
}
.hatch-scene-overlay .hatch-panel-right {
    right: 4vw;
    transform: translateY(-50%) translateX(40px);
    text-align: center;
}
.hatch-scene-overlay .hatch-panel-right.visible {
    transform: translateY(-50%) translateX(0);
}
.hatch-scene-overlay .panel-title {
    font-family: 'MedievalSharp', serif;
    font-size: clamp(16px, 1.5vw, 22px);
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(var(--gold-rgb),0.25);
    text-shadow: 0 0 12px rgba(var(--gold-rgb),0.3);
}
.hatch-scene-overlay .stat-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    font-family: 'Roboto Condensed', sans-serif;
    padding: 6px 8px;
    border-radius: 4px;
    background: rgba(var(--gold-rgb),0.04);
}
.hatch-scene-overlay .stat-row img {
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 0 4px rgba(var(--gold-rgb),0.3));
}
.hatch-scene-overlay .stat-label {
    color: var(--text-brown);
    font-size: clamp(13px, 1.1vw, 16px);
    flex: 1;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.5px;
}
.hatch-scene-overlay .stat-value {
    color: var(--text-warm);
    font-family: 'Oswald', sans-serif;
    font-size: clamp(16px, 1.4vw, 22px);
    font-weight: 600;
    text-shadow: 0 0 8px rgba(var(--gold-rgb),0.2);
}
.hatch-scene-overlay .ulti-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    filter: drop-shadow(0 0 8px rgba(var(--gold-rgb),0.4));
}
.hatch-scene-overlay .ulti-name {
    font-family: 'MedievalSharp', serif;
    font-size: clamp(17px, 1.6vw, 24px);
    margin-bottom: 14px;
    text-shadow: 0 0 10px rgba(var(--gold-rgb),0.25);
}
.hatch-scene-overlay .ulti-desc {
    color: var(--text-brown);
    font-size: clamp(12px, 1vw, 15px);
    font-family: 'Roboto Condensed', sans-serif;
    line-height: 1.6;
    max-width: 220px;
    margin: 0 auto;
}
.hatch-scene-overlay .ulti-separator {
    width: 60%;
    height: 1px;
    margin: 12px auto 14px;
    background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb),0.3), transparent);
}
.hatch-scene-overlay .hatch-back-link {
    position: fixed; top: 16px; right: 20px; z-index: 999;
    color: var(--text-secondary); font-family: 'Oswald', sans-serif; font-size: 0.9rem;
    text-decoration: none; padding: 6px 14px;
    background: rgba(10, 10, 30, 0.7); border: 1px solid var(--border); border-radius: 6px;
    transition: all 0.2s;
    cursor: pointer;
}
.hatch-scene-overlay .hatch-back-link:hover { color: var(--gold); border-color: var(--gold); }
@media (max-width: 900px) {
    .hatch-scene-overlay .hatch-panel { display: none; }
}