/* menus.css — Pantallas de menu y paneles (main menu, mission, shop, settings, etc.)
   Extraido automaticamente de index.html (bloques <style> originales) */

#missionPanel,#missionPanel *,#worldListPanel,#worldListPanel *,#skinMenu,#skinMenu *,#settingsMenu,#settingsMenu *,#playConfigPanel,#playConfigPanel *,#shopPanel,#shopPanel *,#rankingPanel,#rankingPanel *,#communityMapsPanel,#communityMapsPanel *,#authPanel,#authPanel *,#legalPanel,#legalPanel *,#tutorialPanel,#tutorialPanel *,#updatesPanel,#updatesPanel *,#descriptionPanel,#descriptionPanel *,#tipsPanel,#tipsPanel *,#friendsPanel,#friendsPanel *,#createRoomPanel,#createRoomPanel *,#browseRoomsPanel,#browseRoomsPanel *,#lobbyPanel,#lobbyPanel *{touch-action:pan-y!important;}

#missionPanel,#worldListPanel,#skinMenu,#settingsMenu,#playConfigPanel,#shopPanel,#rankingPanel,#communityMapsPanel,#authPanel,#legalPanel,#tutorialPanel,#updatesPanel,#descriptionPanel,#tipsPanel,#friendsPanel,#createRoomPanel,#browseRoomsPanel,#lobbyPanel{-webkit-overflow-scrolling:touch;overflow-y:auto;max-height:85vh;}

/* Aviso de rotar: aspecto en theme-menu.css (fase 5A). Aquí solo el estado base; responsive.css lo muestra en vertical. */
#orientationWarning{display:none;}

#exitWarningOverlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(50,0,0,0.8);display:none;flex-direction:column;justify-content:center;align-items:center;z-index:2000;animation:flashWarning 0.5s infinite alternate;}

#exitWarningText{color:#FF0000;font-size:40px;font-weight:900;text-transform:uppercase;text-shadow:0 0 20px black;border:5px solid red;padding:20px;background:rgba(0,0,0,0.8);transform:rotate(-5deg);text-align:center;}

#mainMenu{background:transparent;width:100%;height:100%;z-index:100;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:all 0.5s ease;}

#menuBgCanvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;background:radial-gradient(circle at center,#0a1a0a,#000000);}

.peseta-container{display:inline-flex;align-items:center;background:rgba(0,0,0,0.5);padding:2px 8px;border-radius:10px;border:1px solid #FFD700;margin-right:10px;}

.peseta-icon{width:20px;height:20px;background:radial-gradient(circle,#FFD700,#B8860B);border-radius:50%;color:#000;font-weight:bold;font-size:12px;display:flex;justify-content:center;align-items:center;margin-right:5px;position:relative;font-family:serif;}

.peseta-icon .crown{position:absolute;top:-8px;font-size:10px;}

.confetti-container{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:99998;display:none;}

.confetti-container.active{display:block;}

.confetti-piece{position:absolute;top:-10px;width:10px;height:10px;border-radius:2px;animation:confettiFall linear forwards;}

#missionPanel,#worldListPanel,#skinMenu,#settingsMenu,#playConfigPanel,#shopPanel,#rankingPanel,#communityMapsPanel,#authPanel,#legalPanel,#tutorialPanel,#updatesPanel,#descriptionPanel,#tipsPanel{background:var(--bg-panel);width:85%;max-width:900px;height:auto;max-height:85vh;border-radius:8px;border:1px solid var(--primary);padding:14px 18px;overflow-y:auto;z-index:110;display:flex;flex-direction:column;box-shadow:0 0 40px rgba(0,0,0,0.8);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);backdrop-filter:blur(10px);font-size:13px;}

#playConfigPanel{text-align:center;max-width:600px;}

#settingsMenu{width:90%;max-width:1000px;}

#shopPanel{width:90%;max-width:1100px;}

#wireGameOverlay,#timingGameOverlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);z-index:150;display:none;flex-direction:column;align-items:center;justify-content:center;}

#wireCanvas,#timingCanvas{background:#222;border:4px solid #555;border-radius:10px;box-shadow:0 0 50px rgba(0,0,0,0.8);cursor:crosshair;}

.wire-title{color:var(--primary);font-size:24px;margin-bottom:10px;text-transform:uppercase;letter-spacing:2px;}

#authPanel{width:90%;max-width:600px;}

#legalPanel{width:90%;max-width:800px;}

#tabFriendsPending{position:relative;}

#tutorialPanel{width:90%;max-width:600px;}

#game-overview{margin-top:20px;text-align:left;font-size:14px;color:#ccc;max-height:200px;overflow-y:auto;border-top:1px solid #444;padding-top:10px;width:100%;}

#game-overview h2,#game-overview h3{color:var(--primary-light);margin-top:10px;margin-bottom:5px;}

#game-overview p{margin-bottom:10px;}

.cinematic-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'Courier New',Courier,monospace;font-size:3rem;color:white;text-shadow:0 0 10px black;text-align:center;opacity:0;display:none;transition:opacity 1s;z-index:2000;pointer-events:none;background:rgba(0,0,0,0.7);padding:20px;border:2px solid white;}

/* ── JetOpt: performance mode — eliminar backdrop-filter costoso ── */

body[data-quality="performance"] #settingsMenu,body[data-quality="performance"] #missionPanel{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(10,25,10,0.97)!important;}

/* ── PANEL SKILL TREE ──────────────────────────────────────── */

#skillTreePanel {
    background: var(--bg-panel);
    width: 90%;
    max-width: 680px;
    height: auto;
    max-height: 85vh;
    border-radius: 8px;
    border: 1px solid var(--primary);
    padding: 16px 18px;
    overflow-y: scroll;
    overscroll-behavior: contain;
    z-index: 110;
    display: none;
    flex-direction: column;
    box-shadow: 0 0 40px rgba(0,0,0,0.8);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    backdrop-filter: blur(10px);
    font-size: 13px;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y !important;
}

#skillTreePanel, #skillTreePanel * { touch-action: pan-y !important; }

.skill-category {
    margin-bottom: 14px;
    border: 1px solid rgba(76,175,80,0.3);
    border-radius: 6px;
    padding: 10px 12px;
    background: rgba(0,0,0,0.25);
}

.skill-cat-label {
    color: var(--primary-light);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(76,175,80,0.2);
    padding-bottom: 5px;
    display: block;
}

.skill-node {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 10px;
    border-radius: 5px;
    background: rgba(255,255,255,0.03);
    margin-bottom: 5px;
    border: 1px solid rgba(255,255,255,0.06);
    transition: border-color 0.2s;
}

.skill-node.maxed { border-color: rgba(255,215,0,0.5); background: rgba(255,215,0,0.05); }

.skill-node-info { display: flex; flex-direction: column; gap: 2px; }

.skill-node-name { font-weight: 600; font-size: 13px; color: #e0e0e0; }

.skill-node-desc { font-size: 11px; color: #888; }

.skill-node-cost { font-size: 11px; color: #FFD700; white-space: nowrap; }

.skill-buy-btn {
    background: rgba(46,125,50,0.6);
    border: 1px solid var(--primary);
    color: white;
    padding: 4px 10px;
    font-size: 11px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
    margin-left: 10px;
}

@media (hover:hover){ .skill-buy-btn:hover { background: var(--primary); } }

.skill-buy-btn:disabled { background: #333; border-color: #555; color: #666; cursor: not-allowed; }

#skillTreeXPDisplay {
    text-align: center;
    color: #FFD700;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

#creditsPanel{background:var(--bg-panel);width:90%;max-width:800px;height:auto;max-height:85vh;border-radius:8px;border:1px solid var(--primary);padding:14px 18px;overflow-y:auto;z-index:110;display:flex;flex-direction:column;box-shadow:0 0 40px rgba(0,0,0,0.8);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);backdrop-filter:blur(10px);font-size:13px;-webkit-overflow-scrolling:touch;}

#creditsPanel,#creditsPanel *{touch-action:pan-y!important;}

/* Key remapping panel */

#keyRemapPanel {
        background: rgba(5,15,5,0.98); border: 1px solid var(--primary);
        border-radius: 10px; padding: 16px; max-height: 70vh; overflow-y: auto;
        display: none; margin-top: 10px;
    }

.key-row { display: flex; justify-content: space-between; align-items: center;
        padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.07); font-size: 13px; }

.key-btn { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
        color: #fff; padding: 4px 10px; border-radius: 4px; cursor: pointer; min-width: 50px;
        font-family: monospace; font-size: 12px; text-align: center; }

.key-btn.listening { background: rgba(46,125,50,0.4); border-color: var(--primary); animation: blinkRec 0.5s infinite; }